/*
Theme Name: Gilded Moderne
Description: Custom Twenty Twenty-Five child theme.
Template: twentytwentyfive
Version: 1.0.0
Text Domain: gilded-moderne
*/

/* =========================================================
   GILDED MODERNE — GLOBAL SITE STYLES

   RESPONSIVE ARCHITECTURE

   Mobile:
   Base styles / 0px–600px

   Tablet:
   601px–900px

   Desktop / laptop:
   901px+

   Shared site-level responsibilities:

   - Curtain background environment
   - Travelling spotlight layer
   - WordPress content layering over curtain
   - Shared transparent theme treatment
   - Curtain-page title accessibility treatment
   - Responsive navigation
   - Responsive-menu visual treatment
   - Footer navigation alignment
   - Actor / Vocalist / Producer detail-page layouts
   - Privacy / Cookie policy content window
========================================================= */


/* =========================================================
   GLOBAL VARIABLES
========================================================= */

:root {
	--lorene-spot-x: 50%;
	--lorene-spot-y: 50%;
	--lorene-spot-opacity: 0;
}


/* =========================================================
   CURTAIN PAGE ENVIRONMENT
   MOBILE FIRST
========================================================= */

body:has(.lorene-curtain-bg) {
	position: relative;

	background: #000;
}


/*
 * Hidden HTML hook.
 *
 * Pages containing this element receive the curtain
 * background and travelling spotlight environment.
 */

.lorene-curtain-bg {
	display: none;
}


/* =========================================================
   BASE CURTAIN
   MOBILE DEFAULT
========================================================= */

body:has(.lorene-curtain-bg)::before {
	content: "";

	position: fixed;
	inset: 0;

	z-index: 0;

	pointer-events: none;

	background-image:
		url("/wp-content/themes/lorene-tt5-child/assets/images/ls_curtain_port_bw.webp");

	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;

	filter:
		brightness(0.52)
		contrast(1.12);
}


/* =========================================================
   TRAVELLING SEPIA SPOTLIGHT
   MOBILE DEFAULT
========================================================= */

body:has(.lorene-curtain-bg)::after {
	content: "";

	position: fixed;
	inset: 0;

	z-index: 0;

	pointer-events: none;

	background-image:
		url("/wp-content/themes/lorene-tt5-child/assets/images/ls_curtain_port_sep.webp");

	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;

	filter:
		brightness(1.12)
		contrast(1.10);

	opacity:
		var(--lorene-spot-opacity);

	-webkit-mask-image:
		radial-gradient(
			circle 20rem at
				var(--lorene-spot-x)
				var(--lorene-spot-y),
			#000 0%,
			rgba(0, 0, 0, 0.92) 28%,
			rgba(0, 0, 0, 0.55) 48%,
			rgba(0, 0, 0, 0.15) 66%,
			transparent 78%
		);

	mask-image:
		radial-gradient(
			circle 20rem at
				var(--lorene-spot-x)
				var(--lorene-spot-y),
			#000 0%,
			rgba(0, 0, 0, 0.92) 28%,
			rgba(0, 0, 0, 0.55) 48%,
			rgba(0, 0, 0, 0.15) 66%,
			transparent 78%
		);

	transition:
		opacity 650ms ease;
}


/* =========================================================
   WORDPRESS CONTENT ABOVE CURTAIN
========================================================= */

body:has(.lorene-curtain-bg) .wp-site-blocks {
	position: relative;

	z-index: 1;

	background: transparent !important;

	color: #fff;
}


body:has(.lorene-curtain-bg) .wp-site-blocks a {
	color: inherit;
}


/* =========================================================
   REMOVE THEME WHITE BACKGROUNDS ON CURTAIN PAGES
========================================================= */

body:has(.lorene-curtain-bg) main,
body:has(.lorene-curtain-bg) .wp-block-post-content,
body:has(.lorene-curtain-bg) .wp-block-group,
body:has(.lorene-curtain-bg) .wp-block-template-part {
	background-color: transparent !important;
}


/* =========================================================
   CURTAIN-PAGE TITLE

   Keep the H1 in the document structure for accessibility
   and metadata while hiding the redundant visual title.
========================================================= */

body:has(.lorene-curtain-bg) .wp-block-post-title {
	position: absolute !important;

	width: 1px !important;
	height: 1px !important;

	padding: 0 !important;
	margin: -1px !important;

	overflow: hidden !important;

	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;

	white-space: nowrap !important;

	border: 0 !important;
}


/* =========================================================
   RESPONSIVE NAVIGATION — OPEN MENU
   MOBILE + TABLET

   WordPress's open responsive menu must remain attached
   to the viewport, not to the sticky header's dimensions.
========================================================= */

.wp-block-navigation__responsive-container.is-menu-open {
	position:
		fixed !important;

	inset:
		0 !important;

	width:
		100vw !important;

	max-width:
		none !important;

	height:
		100dvh !important;

	min-height:
		100vh !important;

	z-index:
		100000 !important;

	overflow-y:
		auto !important;

	box-sizing:
		border-box;

	background:
		rgba(30, 22, 16, 0.94) !important;

	color:
		#f5f0e6 !important;

	-webkit-backdrop-filter:
		blur(12px)
		brightness(0.72);

	backdrop-filter:
		blur(12px)
		brightness(0.72);
}


.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
	width:
		100%;

	min-height:
		100%;
}


.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content {
	color:
		inherit !important;
}


.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close {
	color:
		inherit !important;
}


.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close svg {
	fill:
		currentColor;

	stroke:
		currentColor;
}


/* =========================================================
   STICKY SITE HEADER
   ALL RESOLUTIONS

   Sticky positioning belongs to the WordPress Header
   template-part wrapper.

   IMPORTANT:
   backdrop-filter is NOT applied to the wrapper itself.
   A filtered ancestor can trap WordPress's fixed responsive
   menu inside the header height. The visual blur therefore
   lives on a pseudo-element behind the header content.
========================================================= */

header.wp-block-template-part:has(.lorene-sticky-header) {
	position:
		sticky !important;

	top:
		0;

	z-index:
		1000;

	width:
		100%;

	overflow:
		visible !important;

	background:
		transparent !important;
}


/* Dark / blurred sticky-header surface */

header.wp-block-template-part:has(.lorene-sticky-header)::before {
	content:
		"";

	position:
		absolute;

	inset:
		0;

	z-index:
		0;

	pointer-events:
		none;

	background:
		rgba(0, 0, 0, 0.58);

	-webkit-backdrop-filter:
		blur(12px)
		brightness(0.52);

	backdrop-filter:
		blur(12px)
		brightness(0.52);

	box-shadow:
		0 0.5rem 1.5rem
		rgba(0, 0, 0, 0.24);
}


/* Actual header content sits above the blur layer */

.lorene-sticky-header {
	position:
		relative;

	z-index:
		1;

	width:
		100%;

	overflow:
		visible !important;

	background:
		transparent !important;
}


/* =========================================================
   WORDPRESS COLUMNS
   SITE-WIDE MOBILE-FIRST BREAKPOINT

   functions.php adds WordPress Core's
   .is-not-stacked-on-mobile class to every rendered
   Columns block. That removes Core's built-in stacking
   breakpoint from the front end.

   Gilded Moderne then controls the layout:

   Mobile:  0px-600px   = stacked
   Tablet:  601px-900px = columns
   Desktop: 901px+      = columns

   flex-direction is intentionally low-specificity so
   component CSS can still define a more specialized
   layout where required.
========================================================= */

:where(.wp-block-columns.is-not-stacked-on-mobile) {
	flex-direction:
		column;
}


/* =========================================================
   FOOTER
   MOBILE DEFAULT
   0px–600px

   Mobile footer:
   - identity centered
   - monogram centered
   - navigation centered
   - credit row centered
========================================================= */

.lorene-footer-columns {
	width:
		100%;

	text-align:
		center;
}


.lorene-footer-columns > .wp-block-column {
	display:
		flex;

	flex-direction:
		column;

	align-items:
		center !important;

	width:
		100%;

	text-align:
		center !important;
}


.lorene-footer-columns > .wp-block-column > * {
	margin-left:
		auto !important;

	margin-right:
		auto !important;

	text-align:
		center !important;
}


/* ---------------------------------------------------------
   MONOGRAM — MOBILE
--------------------------------------------------------- */

.lorene-footer-columns .wp-block-image {
	margin-left:
		auto !important;

	margin-right:
		auto !important;
}


/* ---------------------------------------------------------
   FOOTER NAVIGATION — MOBILE
--------------------------------------------------------- */

.wp-block-navigation.bottom-nav-list {
	--navigation-layout-justification-setting:
		center !important;

	--navigation-layout-justify:
		center !important;

	--navigation-layout-align:
		center !important;

	width:
		100% !important;

	margin-left:
		auto !important;

	margin-right:
		auto !important;

	justify-content:
		center !important;

	align-items:
		center !important;

	text-align:
		center !important;
}


.wp-block-navigation.bottom-nav-list
.wp-block-navigation__responsive-container-content,
.wp-block-navigation.bottom-nav-list
.wp-block-navigation__container,
.wp-block-navigation.bottom-nav-list
.wp-block-page-list {
	width:
		100% !important;

	justify-content:
		center !important;

	align-items:
		center !important;

	text-align:
		center !important;
}


.wp-block-navigation.bottom-nav-list
.wp-block-navigation-item {
	justify-content:
		center !important;

	align-items:
		center !important;

	text-align:
		center !important;
}


.wp-block-navigation.bottom-nav-list
.wp-block-navigation-item__content {
	text-align:
		center !important;
}


/* ---------------------------------------------------------
   FOOTER CREDIT ROW — MOBILE
--------------------------------------------------------- */

.lorene-footer-columns + .wp-block-group {
	width:
		100%;

	justify-content:
		center !important;

	text-align:
		center !important;
}


.lorene-footer-columns + .wp-block-group > * {
	text-align:
		center !important;
}


/* =========================================================
   LORENE DETAIL PAGES
   Actor / Vocalist / Producer

   MOBILE FIRST

   Structure:

   .lorene-detail-page
      .lorene-detail-section
         .lorene-detail-row
         .lorene-detail-row--reverse
========================================================= */


/* ---------------------------------------------------------
   PAGE WRAPPER
   MOBILE DEFAULT
--------------------------------------------------------- */

.lorene-detail-page {
	width:
		calc(100% - 2rem);

	margin-inline:
		auto;

	padding:
		2.5rem 0 4rem;

	box-sizing:
		border-box;
}


/* ---------------------------------------------------------
   THREE MAJOR CONTENT SECTIONS
   MOBILE DEFAULT
--------------------------------------------------------- */

.lorene-detail-section {
	width:
		100%;

	max-width:
		none !important;

	display:
		flex;

	flex-direction:
		column;

	gap:
		2rem;

	margin:
		0 0 4rem;
}


.lorene-detail-section:last-child {
	margin-bottom:
		0;
}


/* ---------------------------------------------------------
   IMAGE + COPY ROW
   MOBILE DEFAULT

   Image always comes before copy on mobile.
--------------------------------------------------------- */

.lorene-detail-row,
.lorene-detail-row--reverse {
	width:
		100%;

	max-width:
		none !important;

	display:
		flex;

	flex-direction:
		column;

	align-items:
		stretch;

	gap:
		0;

	margin:
		0 !important;
}


/* ---------------------------------------------------------
   DETAIL IMAGE SIDE
   MOBILE DEFAULT
--------------------------------------------------------- */

.lorene-detail-media {
	position:
		relative;

	isolation:
		isolate;

	flex:
		none;

	width:
		100%;

	min-width:
		0;

	aspect-ratio:
		1 / 1;

	overflow:
		hidden;

	margin:
		0 !important;
}


/*
 * Soft dark feather around image edges.
 *
 * This removes the hard digital rectangle without
 * introducing an obvious decorative border.
 */

.lorene-detail-media::after {
	content:
		"";

	position:
		absolute;

	inset:
		0;

	z-index:
		2;

	pointer-events:
		none;

	box-shadow:
		inset 0 0 2.25rem 0.8rem rgba(0, 0, 0, 0.68),
		inset 0 0 0.75rem rgba(0, 0, 0, 0.45);
}


/* WordPress Image block */

.lorene-detail-image {
	width:
		100%;

	height:
		100%;

	margin:
		0 !important;

	padding:
		0 !important;
}


/* Actual photograph */

.lorene-detail-image img {
	display:
		block;

	width:
		100%;

	height:
		100%;

	object-fit:
		cover;

	/*
	 * Slight upward crop bias helps portrait images
	 * without materially changing square cast images.
	 */
	object-position:
		center 35%;

	/*
	 * Tiny enlargement prevents the feathered edge
	 * from exposing an image/container seam.
	 */
	transform:
		scale(1.015);
}


/* ---------------------------------------------------------
   DETAIL COPY SIDE
   MOBILE DEFAULT
--------------------------------------------------------- */

.lorene-detail-copy {
	flex:
		none;

	width:
		100%;

	min-width:
		0;

	display:
		flex;

	flex-direction:
		column;

	justify-content:
		center;

	padding:
		1.75rem;

	box-sizing:
		border-box;

	/*
	 * Translucent dark surface allows some curtain
	 * and spotlight presence to remain visible.
	 */
	background:
		rgba(0, 0, 0, 0.58);

	/*
	 * Blur and darken the moving curtain behind the copy
	 * so the texture never competes with the text.
	 */
	-webkit-backdrop-filter:
		blur(12px)
		brightness(0.52);

	backdrop-filter:
		blur(12px)
		brightness(0.52);

	/*
	 * Soft transition between panel and stage environment.
	 */
	box-shadow:
		inset 0 0 2rem rgba(0, 0, 0, 0.35),
		0 0 1.75rem rgba(0, 0, 0, 0.30);

	color:
		#f5f5f5;

	margin:
		0 !important;
}


/* Prevent Gutenberg block margins from becoming excessive */

.lorene-detail-copy > :first-child {
	margin-top:
		0;
}


.lorene-detail-copy > :last-child {
	margin-bottom:
		0;
}


/* Maintain readable headings over curtain environment */

.lorene-detail-copy h2,
.lorene-detail-copy h3,
.lorene-detail-copy h4 {
	color:
		inherit;
}


/* =========================================================
   PRIVACY / COOKIE POLICY WINDOW
   MOBILE DEFAULT
========================================================= */

.policy-window {
	width:
		calc(100% - 2rem);

	margin-inline:
		auto;

	padding:
		1.75rem;

	box-sizing:
		border-box;

	background:
		rgba(0, 0, 0, 0.58);

	-webkit-backdrop-filter:
		blur(12px)
		brightness(0.52);

	backdrop-filter:
		blur(12px)
		brightness(0.52);

	box-shadow:
		inset 0 0 2rem rgba(0, 0, 0, 0.35),
		0 0 1.75rem rgba(0, 0, 0, 0.30);

	color:
		#f5f5f5;
}


.policy-window h2,
.policy-window h3,
.policy-window h4,
.policy-window p,
.policy-window li,
.policy-window strong {
	color:
		inherit;
}


.policy-window a {
	color:
		inherit;

	text-underline-offset:
		0.2em;
}


.policy-window > :first-child {
	margin-top:
		0;
}


.policy-window > :last-child {
	margin-bottom:
		0;
}


/* =========================================================
   TABLET AND UP
   601px+
========================================================= */

@media (min-width: 601px) {

		/* -----------------------------------------------------
	   STICKY HEADER HEIGHT
	   TABLET + DESKTOP ONLY

	   Extend the existing blurred header surface just
	   enough to fully contain the logo and navigation.
	   Mobile remains unchanged.
	----------------------------------------------------- */

	header.wp-block-template-part:has(.lorene-sticky-header) {
		padding-bottom:
			.25rem !important;

		box-sizing:
			border-box;
	}


	/* -----------------------------------------------------
	   WORDPRESS COLUMNS
	   TABLET + DESKTOP
	----------------------------------------------------- */

	:where(.wp-block-columns.is-not-stacked-on-mobile) {
		flex-direction:
			row;
	}


	/* -----------------------------------------------------
	   LANDSCAPE CURTAIN
	   TABLET + DESKTOP
	----------------------------------------------------- */

	body:has(.lorene-curtain-bg)::before {
		background-image:
			url("/wp-content/themes/lorene-tt5-child/assets/images/ls_curt_land_bw.webp");
	}


	body:has(.lorene-curtain-bg)::after {
		background-image:
			url("/wp-content/themes/lorene-tt5-child/assets/images/ls_curt_land_sep.webp");
	}


	/* -----------------------------------------------------
	   FOOTER LAYOUT
	   TABLET + DESKTOP

	   Left column  = left aligned
	   Center       = centered
	   Navigation   = right aligned
	----------------------------------------------------- */


	/* LEFT FOOTER COLUMN */

	.lorene-footer-columns
	> .wp-block-column:first-child {
		display:
			flex;

		flex-direction:
			column;

		align-items:
			flex-start !important;

		justify-content:
			flex-start !important;

		text-align:
			left !important;
	}


	.lorene-footer-columns
	> .wp-block-column:first-child > * {
		align-self:
			flex-start !important;

		margin-left:
			0 !important;

		margin-right:
			auto !important;

		text-align:
			left !important;
	}


	.lorene-footer-columns
	> .wp-block-column:first-child
	.wp-block-group {
		justify-content:
			flex-start !important;

		align-items:
			flex-start !important;

		text-align:
			left !important;
	}


	.lorene-footer-columns
	> .wp-block-column:first-child h1,
	.lorene-footer-columns
	> .wp-block-column:first-child h2,
	.lorene-footer-columns
	> .wp-block-column:first-child h3,
	.lorene-footer-columns
	> .wp-block-column:first-child p {
		margin-left:
			0 !important;

		margin-right:
			auto !important;

		text-align:
			left !important;
	}


	/* CENTER FOOTER COLUMN */

	.lorene-footer-columns
	> .wp-block-column:nth-child(2) {
		display:
			flex;

		flex-direction:
			column;

		align-items:
			center !important;

		justify-content:
			flex-start !important;

		text-align:
			center !important;
	}


	.lorene-footer-columns
	> .wp-block-column:nth-child(2) > * {
		align-self:
			center !important;

		margin-left:
			auto !important;

		margin-right:
			auto !important;
	}


	/* RIGHT FOOTER COLUMN */

	.lorene-footer-columns
	> .wp-block-column:last-child {
		display:
			flex;

		flex-direction:
			column;

		align-items:
			flex-end !important;

		justify-content:
			flex-start !important;

		text-align:
			right !important;
	}


	/* -----------------------------------------------------
	   FOOTER NAVIGATION
	   TABLET + DESKTOP
	----------------------------------------------------- */

	.wp-block-navigation.bottom-nav-list {
		--navigation-layout-justification-setting:
			flex-end !important;

		--navigation-layout-justify:
			flex-end !important;

		--navigation-layout-align:
			flex-end !important;

		width:
			100% !important;

		margin-left:
			auto !important;

		margin-right:
			0 !important;

		justify-content:
			flex-end !important;

		align-items:
			flex-end !important;

		text-align:
			right !important;
	}


	.wp-block-navigation.bottom-nav-list
	.wp-block-navigation__responsive-container-content,
	.wp-block-navigation.bottom-nav-list
	.wp-block-navigation__container,
	.wp-block-navigation.bottom-nav-list
	.wp-block-page-list {
		width:
			100% !important;

		justify-content:
			flex-end !important;

		align-items:
			flex-end !important;

		text-align:
			right !important;
	}


	.wp-block-navigation.bottom-nav-list
	.wp-block-navigation-item {
		justify-content:
			flex-end !important;

		align-items:
			flex-end !important;

		text-align:
			right !important;
	}


	.wp-block-navigation.bottom-nav-list
	.wp-block-navigation-item__content {
		text-align:
			right !important;
	}

	/* -----------------------------------------------------
	   DETAIL PAGES
	   TABLET DEFAULT
	----------------------------------------------------- */

	.lorene-detail-page {
		width:
			min(92%, 900px);

		padding:
			3rem 0 6rem;
	}


	.lorene-detail-section {
		gap:
			2rem;

		margin-bottom:
			4.5rem;
	}


	.lorene-detail-row {
		flex-direction:
			row;

		gap:
			2rem;
	}


	.lorene-detail-row--reverse {
		flex-direction:
			row-reverse;
	}


	.lorene-detail-media {
		flex:
			0 0 42%;

		width:
			auto;
	}


	.lorene-detail-copy {
		flex:
			1 1 58%;

		width:
			auto;

		padding:
			clamp(1.5rem, 3vw, 2.5rem);
	}


	/* -----------------------------------------------------
	   POLICY WINDOW
	   TABLET + DESKTOP
	----------------------------------------------------- */

	.policy-window {
		width:
			min(960px, calc(100% - 3rem));

		padding:
			clamp(2rem, 4vw, 4rem);
	}

}


/* =========================================================
   WORDPRESS NAVIGATION COMPATIBILITY OVERRIDE
   HEADER ONLY — TABLET
   601px–900px

   WordPress Core normally returns to desktop navigation
   before Gilded Moderne's 900px tablet breakpoint.

   Only the HEADER navigation is held in hamburger mode
   through tablet width. Footer navigation is deliberately
   excluded so its own left/center/right layout remains
   independent.
========================================================= */

@media (min-width: 601px) and (max-width: 900px) {

	header.wp-block-template-part:has(.lorene-sticky-header)
	.wp-block-navigation__responsive-container:not(.is-menu-open) {
		display:
			none !important;
	}


	header.wp-block-template-part:has(.lorene-sticky-header)
	.wp-block-navigation__responsive-container-open {
		display:
			flex !important;

		align-items:
			center;

		justify-content:
			center;
	}

}


/* =========================================================
   DESKTOP / LAPTOP
   901px+
========================================================= */

@media (min-width: 901px) {


	/* -----------------------------------------------------
	   DETAIL PAGES
	   DESKTOP
	----------------------------------------------------- */

	.lorene-detail-page {
		width:
			min(1180px, calc(100% - 3rem));

		padding:
			4rem 0 6rem;
	}


	.lorene-detail-section {
		gap:
			2.5rem;

		margin-bottom:
			6rem;
	}


	.lorene-detail-row {
		gap:
			2.5rem;
	}


	.lorene-detail-media {
		flex:
			1 1 50%;
	}


	.lorene-detail-copy {
		flex:
			1 1 50%;

		padding:
			clamp(2rem, 4vw, 4rem);
	}

}


/* =========================================================
   GLOBAL REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	body:has(.lorene-curtain-bg)::after {
		transition:
			none;
	}

}