/*
 * Ursa Prek: one set of fonts and sizes for the text of every page.
 *
 * The pages were made over eight years and each sets its own type: the older ones Nobel 14 to 16 px with wide
 * letter-spacing and titles from 32 to 52 px, the newer ones Roboto 16 px with titles of 22, 29 or 32 px in a
 * slightly different orange. This sheet lays one set over all of them. It is loaded after Elementor's styles and
 * uses !important, because the pages carry their own sizes on the text blocks and inside the text itself.
 *
 * What it sets: font, size, line height and letter-spacing of running text; font, size, case and colour of
 * titles; font and size of smaller headings; and it brings the text colours down to three: the text colour
 * (for black and near-black), a softer grey (for the two greys used for credits) and the one orange.
 * What it leaves alone: alignment, bold and italic, and the light text colours of the dark pages.
 *
 * Choice (Customizer > Ursa Prek: menu and text): a = Nobel for everything, b = Nobel titles with Roboto text,
 * off = this sheet is not loaded.
 */

.up-type-a {
	--up-text-font: var(--up-menu-font);
	--up-text-size: 16px;
	--up-text-line: 1.7;
	--up-text-spacing: 0.02em;
}
.up-type-b {
	--up-text-font: "Roboto", "Helvetica Neue", Arial, sans-serif;
	--up-text-size: 16px;
	--up-text-line: 1.65;
	--up-text-spacing: 0;
}
.ursaprek {
	--up-title-size: clamp(26px, 2.4vw, 34px);
	--up-title-spacing: 0.05em;
	--up-subtitle-size: 20px;
	--up-text-color: rgba(0, 0, 0, 0.7);
	--up-text-soft: rgba(0, 0, 0, 0.48);
}
.ursaprek.up-dark {
	--up-text-color: rgba(255, 255, 255, 0.86);
	--up-text-soft: rgba(255, 255, 255, 0.6);
}

/* anything a page does not style itself (a price, a caption of the theme) takes the text font and colour too */
body.up-type-a,
body.up-type-b {
	font-family: var(--up-text-font);
	color: var(--up-text-color);
}

/* --- running text */
.up-main .elementor-widget-text-editor,
.up-main .elementor-widget-toggle,
.up-main .elementor-widget-accordion,
.up-main .up-page,
.up-main .up-contact,
.up-main .up-shop {
	font-family: var(--up-text-font) !important;
	font-size: var(--up-text-size) !important;
	line-height: var(--up-text-line) !important;
	letter-spacing: var(--up-text-spacing) !important;
}
/* sizes and fonts typed into the text itself follow the block they are in */
.up-main .elementor-widget-text-editor :is(p, span, em, i, b, strong, u, s, small, big, font, a, li, ul, ol, div, blockquote, td, th, label),
.up-main .elementor-widget-toggle :is(p, span, em, i, b, strong, a, li, div),
.up-main .up-page > :is(p, ul, ol) :is(span, em, i, b, strong, a, font, small) {
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
}

/* --- colours: a text block that sets its own colour keeps it (the dark pages do); otherwise this one */
.up-main .elementor-widget-text-editor,
.up-main .up-page,
.up-main .elementor-widget.up-ink {
	color: var(--up-text-color);
}
.up-main .elementor-widget.up-ink {
	color: var(--up-text-color) !important;
}
.up-main .elementor-widget.up-orange {
	color: var(--up-orange) !important;
}
/* black and near-black typed into a text are the text colour; the two greys are one grey; the oranges one orange.
   (Not "inherit": on Trekking Guide the block itself is set to near-white and its text is typed in dark grey;
   inheriting made that text all but invisible.) */
.up-main :is([style^="color: #000000"], [style*="; color: #000000"], [style^="color: #333333"], [style*="; color: #333333"]) {
	color: var(--up-text-color) !important;
}
.up-main :is([style^="color: #808080"], [style*="; color: #808080"], [style^="color: #999999"], [style*="; color: #999999"]) {
	color: var(--up-text-soft) !important;
}
.up-main :is([style^="color: #ff9900"], [style*="; color: #ff9900"]) {
	color: var(--up-orange) !important;
}

/* links in a text are orange too, unless the text gives them a colour of its own */
.up-main :is(.elementor-widget-text-editor, .elementor-tab-content, .up-page, .up-contact__intro) a:not([style*="color"]) {
	color: var(--up-orange);
	text-decoration: none;
}
.up-main :is(.elementor-widget-text-editor, .elementor-tab-content, .up-page, .up-contact__intro) a:not([style*="color"]):hover {
	text-decoration: underline;
}

/* a fold-out (the "Media" list of the biography) set its own orange for all its text: entries are text colour,
   their links the one orange, like every other dated list */
.up-main .elementor-toggle .elementor-tab-content {
	color: var(--up-text-color) !important;
}
.up-main .up-cv__what a,
.up-main .up-cv__what a span {
	color: var(--up-orange) !important;
}

/* --- titles: the page's main heading, however the page made it */
.up-main :is(h1, h2),
.up-main .elementor-widget.up-title,
.up-main .elementor-widget.up-title :is(p, div, span, em, i, b, strong, a, h3, h4, h5, h6) {
	font-family: var(--up-menu-font) !important;
	font-size: var(--up-title-size) !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: 1.2 !important;
	letter-spacing: var(--up-title-spacing) !important;
	text-transform: uppercase !important;
	color: var(--up-orange) !important;
}
.up-main :is(h1, h2) :is(span, em, i, b, strong, a, font) {
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	font-style: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
	color: inherit !important;
}

/* --- smaller headings: the line under a title, headings inside a text */
.up-main :is(h3, h4, h5, h6),
.up-main .elementor-widget-heading:not(.up-title) .elementor-heading-title {
	font-family: var(--up-text-font) !important;
	font-size: var(--up-subtitle-size) !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	letter-spacing: var(--up-text-spacing) !important;
	text-transform: none !important;
	color: var(--up-text-color);
}
.up-main :is(h3, h4, h5, h6) :is(span, em, i, b, strong, a, font) {
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
}

/* a page typed in the WordPress editor: the first heading is the title, the next ones are smaller headings */
.up-main .up-page > :is(h1, h2) ~ :is(h1, h2) {
	margin-top: 28px;
	font-family: var(--up-text-font) !important;
	font-size: var(--up-subtitle-size) !important;
	line-height: 1.4 !important;
	letter-spacing: var(--up-text-spacing) !important;
	text-transform: none !important;
	color: var(--up-text-color) !important;
}

/* --- captions, buttons and other small parts take the text font */
.up-main :is(figcaption, .widget-image-caption, .elementor-image-carousel-caption, .elementor-button, .elementor-tab-title, .elementor-toggle-title) {
	font-family: var(--up-text-font) !important;
	letter-spacing: var(--up-text-spacing) !important;
}
.up-main :is(figcaption, .widget-image-caption, .elementor-image-carousel-caption) {
	font-size: 14px !important;
	line-height: 1.5 !important;
}

@media (max-width: 860px) {
	.ursaprek {
		--up-title-size: 26px;
		--up-subtitle-size: 18px;
	}
}