/*
 * Sirius – page headers of the theme variants (not used by the original theme).
 *
 * - .sirius-hero-scene: the camp illustration with the animated campfire (inline SVG,
 *   themes/sirius/inc/skins.php), behind the overlay, the title and the mountain cut.
 * - Three page-title styles, chosen in Sirius mgmt → Izgled weba:
 *   body.sirius-naslov-nebo | -zatamnjenje | -putokaz.
 * Colours for the "nebo" style come from the variant (--sirius-title-sky…).
 */

.sirius-page-hero > .sirius-hero-scene {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}
.sirius-page-hero .wp-block-cover__inner-container .wp-block-post-title,
.sirius-page-hero .wp-block-cover__inner-container .wp-block-query-title { text-wrap: balance; }

/* ------------------------------------------------ 1. Naslov na nebu (no background) */

.sirius-naslov-nebo .sirius-page-hero .wp-block-cover__inner-container,
.sirius-naslov-nebo .sirius-page-hero .wp-block-cover__inner-container .has-base-color,
.sirius-naslov-nebo .sirius-page-hero .wp-block-cover__inner-container :is(h1, h2) {
	color: var(--sirius-title-sky, var(--wp--preset--color--forest)) !important;
	text-shadow: var(--sirius-title-sky-glow, none);
}
.sirius-naslov-nebo .sirius-page-hero .wp-block-cover__inner-container p:not(.has-ember-color):not(.has-campfire-color) {
	color: var(--sirius-title-sky-text, var(--wp--preset--color--contrast)) !important;
	text-shadow: var(--sirius-title-sky-glow, none);
}
.sirius-naslov-nebo .sirius-page-hero .wp-block-cover__inner-container :is(.has-ember-color, .has-campfire-color) {
	color: var(--sirius-title-sky-label, var(--wp--preset--color--campfire)) !important;
}
.sirius-naslov-nebo .sirius-page-hero .wp-block-cover__inner-container a:not(.wp-element-button) { color: inherit; }
/* Phones: the illustration is cropped to its middle (forest), so the title gets a soft glow band. */
@media (max-width: 700px) {
	.sirius-naslov-nebo .sirius-page-hero > .wp-block-cover__background {
		display: block !important;
		opacity: 1 !important;
		background: linear-gradient(to bottom, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.55) 45%, rgb(255 255 255 / 0) 85%) !important;
	}
	.sirius-skin-svjezi-pergament.sirius-naslov-nebo .sirius-page-hero > .wp-block-cover__background {
		background: linear-gradient(to bottom, rgb(20 20 30 / 0) 0%, rgb(20 20 30 / 0.45) 45%, rgb(20 20 30 / 0) 85%) !important;
	}
}

/* ------------------------------------------------ 2. Meko zatamnjenje (soft shade on the left) */

.sirius-naslov-zatamnjenje .sirius-page-hero > .wp-block-cover__background {
	display: block !important;
	opacity: 1 !important;
	background: linear-gradient(to right, rgb(12 34 22 / 0.62) 0%, rgb(12 34 22 / 0.38) 32%, rgb(12 34 22 / 0) 62%) !important;
}
.sirius-naslov-zatamnjenje .sirius-page-hero .wp-block-cover__inner-container,
.sirius-naslov-zatamnjenje .sirius-page-hero .wp-block-cover__inner-container .has-base-color,
.sirius-naslov-zatamnjenje .sirius-page-hero .wp-block-cover__inner-container :is(h1, h2),
.sirius-naslov-zatamnjenje .sirius-page-hero .wp-block-cover__inner-container p:not(.has-ember-color):not(.has-campfire-color) {
	color: #FFFFFF !important;
	text-shadow: 0 2px 14px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.35);
}
.sirius-naslov-zatamnjenje .sirius-page-hero .wp-block-cover__inner-container :is(.has-ember-color, .has-campfire-color) {
	color: var(--wp--preset--color--ember) !important;
	text-shadow: 0 1px 8px rgb(0 0 0 / 0.4);
}
.sirius-naslov-zatamnjenje .sirius-page-hero .wp-block-cover__inner-container a:not(.wp-element-button) { color: inherit; }
@media (max-width: 700px) {
	.sirius-naslov-zatamnjenje .sirius-page-hero > .wp-block-cover__background {
		background: linear-gradient(to bottom, rgb(12 34 22 / 0.2), rgb(12 34 22 / 0.55) 55%, rgb(12 34 22 / 0.2)) !important;
	}
}

/* ------------------------------------------------ 3. Drveni putokaz (wooden signpost) */

/*
 * The signpost with the title is drawn into the illustration (inc/skins.php,
 * sirius_skin_signpost_svg): same size relative to the tents on every screen.
 * The real title stays in the page for screen readers and search engines.
 */
@media (min-width: 701px) {
	/* No shade over the illustration: the sign carries the title (V2 would dim the wood). */
	.sirius-naslov-putokaz .sirius-page-hero > .wp-block-cover__background { opacity: 0 !important; }
	.sirius-naslov-putokaz .sirius-page-hero .wp-block-cover__inner-container {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}
/* Phones: the illustration is cropped to its middle, so the sign is hidden and the title
   is shown as text over a soft shade instead. */
@media (max-width: 700px) {
	.sirius-naslov-putokaz .sirius-hero-sign { display: none; }
	.sirius-naslov-putokaz .sirius-page-hero > .wp-block-cover__background {
		display: block !important;
		opacity: 1 !important;
		background: linear-gradient(to bottom, rgb(12 34 22 / 0.2), rgb(12 34 22 / 0.55) 55%, rgb(12 34 22 / 0.2)) !important;
	}
	.sirius-naslov-putokaz .sirius-page-hero .wp-block-cover__inner-container,
	.sirius-naslov-putokaz .sirius-page-hero .wp-block-cover__inner-container .has-base-color,
	.sirius-naslov-putokaz .sirius-page-hero .wp-block-cover__inner-container :is(h1, h2),
	.sirius-naslov-putokaz .sirius-page-hero .wp-block-cover__inner-container p:not(.has-ember-color):not(.has-campfire-color) {
		color: #FFFFFF !important;
		text-shadow: 0 2px 14px rgb(0 0 0 / 0.45);
	}
	.sirius-naslov-putokaz .sirius-page-hero .wp-block-cover__inner-container :is(.has-ember-color, .has-campfire-color) {
		color: var(--wp--preset--color--ember) !important;
	}
}