/* ==========================================================================
   INDUVRA — GLOBAL LAYOUT (Step 2)
   Reusable storefront shell styling, loaded site-wide behind
   induvra-storefront.css. TOKENS ONLY — every value consumes the INDUVRA
   semantic tokens (--color-* / --induvra-*); no raw hex, no new fonts,
   no new spacing/radius/shadow systems. z-index uses the central
   --induvra-z-* tokens (spec §24).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ANNOUNCEMENT BAR — dismissible states + systematic header offset (§40)
   -------------------------------------------------------------------------- */
/* Dismissed: hide the bar and move the fixed overlay header/mobile menu up to
   fill the space it occupied — no per-page margin hacks. */
body.induvra-announcement-off .induvra-promo-bar,
body.induvra-announcement-off .induvra-announcement {
	display: none;
}
body.induvra-announcement-off .induvra-header.site-header { top: 0; }
body.induvra-announcement-off .site-content { padding-top: 72px; }
body.induvra-announcement-off .induvra-mobile-menu.is-open { top: 0; }
@media (max-width: 768px) {
	body.induvra-announcement-off .induvra-header.site-header { top: 0; }
	body.induvra-announcement-off .site-content { padding-top: 66px; }
	body.induvra-announcement-off .induvra-mobile-menu.is-open { top: 0; }
}

/* Close control — IconButton pattern, right-aligned, inverse (burgundy bar). */
.induvra-announcement--dismissible { position: relative; }
.induvra-announcement--dismissible .induvra-promo-track { padding-right: 48px; }
.induvra-announcement-close {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	color: var(--color-text-inverse);
	background: transparent;
	border: 0;
	border-radius: var(--induvra-radius-sm);
	z-index: var(--induvra-z-nav-dropdown);
}
.induvra-announcement-close:hover {
	background: var(--color-surface-inverse-hover);
	color: var(--induvra-gold);
}
.induvra-announcement-close svg { width: 18px; height: 18px; }

/* Static announcement variant (non-marquee) — centered message + CTA. */
.induvra-announcement-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--induvra-space-5);
	width: 100%;
	min-height: 44px;
	padding: 0 var(--induvra-space-8);
}
.induvra-announcement-message {
	font-family: var(--induvra-font-ui);
	font-size: var(--induvra-fs-caption);
	letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   2. MOBILE NAVIGATION — drill-down levels (nested + back)
   -------------------------------------------------------------------------- */
.induvra-mobile-item { position: relative; }

.induvra-mobile-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--induvra-space-3);
	padding: var(--induvra-space-4) 0;
	/* P1-07 (induvra-mobile-robustness-p1): long labels (the anonymous text-node
	   flex item) wrap instead of pushing the chevron outside the viewport;
	   min-width:0 lets the flex label shrink inside the row. Chevron is
	   flex:none and stays at the far right. */
	overflow-wrap: anywhere;
	min-width: 0;
}
/* Higher specificity than style.css `.induvra-mobile-list a { display: block }`
   (0,1,1), which was winning and collapsing the row to block — the chevron
   then flowed inline right after the text. Restores the flex row so text sits
   left and the chevron floats to the row's far right. Padding inherited from
   the base row rule above (layout-only fix, nothing else changes). */
.induvra-mobile-list .induvra-mobile-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--induvra-space-3);
	overflow-wrap: anywhere;
	min-width: 0;
}

.induvra-mobile-chevron {
	width: 12px;
	height: 12px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-muted);
	line-height: 0;
	transition: transform var(--induvra-duration-fast) var(--induvra-ease-standard);
}
.induvra-mobile-chevron svg {
	display: block;
	width: 100%;
	height: 100%;
}
/* Expanded (drill-down open): chevron points down — same state hook already
   maintained by induvra-layout.js, no JS changes needed. */
.induvra-mobile-trigger[aria-expanded="true"] .induvra-mobile-chevron { transform: rotate(90deg); }

/* Hidden sub-level: the drill-down panel (display toggled by JS). */
.induvra-mobile-sub[hidden] { display: none; }
.induvra-mobile-sub {
	background: var(--color-bg-surface);
	border-top: 1px solid var(--color-border-subtle);
	padding: var(--induvra-space-4) 0 var(--induvra-space-6);
}

.induvra-mobile-back {
	display: inline-flex;
	align-items: center;
	gap: var(--induvra-space-2);
	background: transparent;
	border: 0;
	padding: var(--induvra-space-2) var(--induvra-space-4);
	color: var(--color-text-secondary);
	font-family: var(--induvra-font-ui);
	font-size: var(--induvra-fs-label-md);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	min-height: 44px;
}
.induvra-mobile-back:hover { color: var(--color-brand-primary); }
.induvra-mobile-back::before {
	content: "";
	width: 8px;
	height: 8px;
	border-left: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}

.induvra-mobile-subtitle {
	display: block;
	font-family: var(--induvra-font-display);
	font-size: var(--induvra-fs-heading-sm);
	font-weight: 500;
	color: var(--color-text-primary);
	padding: var(--induvra-space-2) var(--induvra-space-4) var(--induvra-space-4);
}

.induvra-mobile-section-title {
	display: block;
	font-family: var(--induvra-font-ui);
	font-size: var(--induvra-fs-label-md);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-secondary);
	padding: var(--induvra-space-4) var(--induvra-space-4) var(--induvra-space-2);
}

/* Mobile-menu promotional/editorial image — final element below the nav.
   Full-width within the menu's content column, portrait, un-rounded. The
   parent #induvra-mobile-menu is display:none on desktop, so this never leaks
   into the desktop header/navigation. */
.induvra-mobile-menu-promo {
	margin-top: var(--induvra-space-14); /* vertical gap between nav and image */
}
.induvra-mobile-menu-promo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;   /* override the global img rounding — editorial, not a card */
}

/* --------------------------------------------------------------------------
   3. FOOTER — brand + newsletter | 4 nav columns, divider, copyright + icons
   -------------------------------------------------------------------------- */

/* Reset outer footer padding — inner elements own all spacing. */
.site-footer.induvra-footer { padding: 0; }

/* Main content: brand/newsletter (left) + nav columns (right). */
.induvra-footer-main {
	max-width: var(--induvra-container-xl);
	margin: 0 auto;
	padding: var(--induvra-space-12) var(--induvra-space-6) var(--induvra-space-9);
	display: grid;
	grid-template-columns: minmax(200px, 1.1fr) 2.4fr;
	gap: var(--induvra-space-10);
	align-items: start;
}

/* --- Brand / newsletter column --- */
.induvra-footer-brand {
	padding-right: var(--induvra-space-6);
}
.induvra-footer-wordmark {
	font-family: var(--induvra-font-display);
	font-size: clamp(30px, 3.5vw, 42px);
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--color-text-inverse);
	margin: 0 0 var(--induvra-space-2);
	text-transform: uppercase;
	line-height: 1.15;
}
.induvra-footer-tagline {
	font-family: var(--induvra-font-ui);
	font-size: var(--induvra-fs-body-sm);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-text-inverse-muted);
	margin: 0 0 var(--induvra-space-6);
}

.induvra-newsletter-label {
	display: block;
	font-family: var(--induvra-font-ui);
	font-size: var(--induvra-fs-body-sm);
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--color-text-inverse-soft);
	margin-bottom: var(--induvra-space-4);
}
.induvra-newsletter-row {
	display: flex;
	gap: 0;
	max-width: 380px;
}
.induvra-newsletter-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.75em 1em;
	background: var(--induvra-ivory-soft, #FCFAF7);
	border: 1px solid var(--color-border-default);
	border-right: none;
	border-radius: var(--induvra-radius-md) 0 0 var(--induvra-radius-md);
	color: var(--color-text-primary);
	font-family: var(--induvra-font-ui);
	font-size: var(--induvra-fs-body-sm);
}
.induvra-newsletter-input::placeholder { color: var(--color-text-muted); }
.induvra-newsletter-submit {
	flex: none;
	padding: 0px 24px;
	background: var(--color-brand-primary);
	border: 1px solid transparent;
	border-radius: var(--induvra-radius-md);
	color: var(--color-text-inverse);
	font-family: var(--induvra-font-ui);
	font-size: var(--induvra-fs-button);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--induvra-duration-fast) var(--induvra-ease-standard),
	            color var(--induvra-duration-fast) var(--induvra-ease-standard);
}
.induvra-footer .induvra-newsletter-submit:hover {
	background: var(--color-brand-primary-light);
	color: var(--color-text-inverse);
}

/* --- Navigation columns --- */
.induvra-footer-nav {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--induvra-space-6);
}

.induvra-footer-col-title {
	font-family: var(--induvra-font-ui);
	font-size: var(--induvra-fs-label-md);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-inverse);
	margin: 0 0 var(--induvra-space-5);
}

/* Accordion toggle — clickable on mobile, static heading on desktop. */
.induvra-footer-col-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: transparent;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
	min-height: 44px;
	text-align: left;
}

/* Chevron — visible on mobile only, hidden on desktop. */
.induvra-footer-col-chevron {
	width: 8px;
	height: 8px;
	border-right: 1.5px solid var(--color-text-inverse-faint);
	border-bottom: 1.5px solid var(--color-text-inverse-faint);
	transform: rotate(45deg);
	transition: transform var(--induvra-duration-fast) var(--induvra-ease-standard);
}
.induvra-footer-col-toggle[aria-expanded="false"] .induvra-footer-col-chevron { transform: rotate(-135deg); }

/* Desktop: hide chevron, make toggle non-interactive. */
@media (min-width: 769px) {
	.induvra-footer-col-chevron { display: none; }
	.induvra-footer-col-toggle { cursor: default; min-height: auto; }
}

.induvra-footer-col-links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.induvra-footer-col-links li { margin-bottom: var(--induvra-space-3); }
.induvra-footer-col-links a {
	font-family: var(--induvra-font-ui);
	font-size: var(--induvra-fs-body-sm);
	color: var(--color-text-inverse-soft);
	text-decoration: none;
	transition: color var(--induvra-duration-fast) var(--induvra-ease-standard);
}
.induvra-footer-col-links a:hover { color: var(--induvra-gold); }

/* --- Bottom row: divider + copyright + social icons --- */
.induvra-footer-bottom {
	max-width: var(--induvra-container-xl);
	margin: 0 auto;
	padding: 0 var(--induvra-space-6);
	border-top: 1px solid var(--color-border-inverse-subtle);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--induvra-space-4);
	padding-top: var(--induvra-space-6);
	padding-bottom: var(--induvra-space-8);
}

.induvra-footer-copy {
	font-family: var(--induvra-font-ui);
	font-size: var(--induvra-fs-body-sm);
	color: var(--color-text-inverse-faint);
	margin: 0;
}

/* Social icons — SVG line icons, horizontal row. */
.induvra-footer-social {
	display: flex;
	align-items: center;
	gap: var(--induvra-space-5);
}
.induvra-footer-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-inverse-soft);
	text-decoration: none;
	transition: color var(--induvra-duration-fast) var(--induvra-ease-standard);
	line-height: 0;
}
.induvra-footer-social-icon:hover { color: var(--induvra-gold); }
.induvra-footer-social-icon svg {
	width: 20px;
	height: 20px;
}

/* Screen-reader only — accessible label for icon-only links. */
.induvra-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   4. GLOBAL LAYOUT PREVIEW PAGE (development route only)
   -------------------------------------------------------------------------- */
.induvra-gl-preview { padding: var(--induvra-space-12) 0; }
.induvra-gl-preview__note {
	max-width: var(--induvra-container-lg);
	margin: 0 auto var(--induvra-space-8);
	font-family: var(--induvra-font-ui);
	color: var(--color-text-secondary);
	font-size: var(--induvra-fs-body-sm);
}
.induvra-gl-preview__section {
	max-width: var(--induvra-container-xl);
	margin: 0 auto var(--induvra-space-11);
	padding: 0 var(--induvra-space-6);
}
.induvra-gl-preview__title {
	font-family: var(--induvra-font-display);
	font-size: var(--induvra-fs-heading-md);
	font-weight: 500;
	color: var(--color-text-primary);
	margin: 0 0 var(--induvra-space-6);
}
.induvra-gl-preview__placeholder {
	border: 1px dashed var(--color-border-default);
	border-radius: var(--induvra-radius-lg);
	background: var(--color-bg-surface);
	padding: var(--induvra-space-12) var(--induvra-space-8);
	text-align: center;
	color: var(--color-text-muted);
	font-family: var(--induvra-font-ui);
}

/* --------------------------------------------------------------------------
   5. RESPONSIVE — footer + preview
   -------------------------------------------------------------------------- */

/* Tablet: stack brand above nav, 2-col nav. */
@media (max-width: 1024px) {
	.induvra-footer-main {
		grid-template-columns: 1fr;
		gap: var(--induvra-space-8);
	}
	.induvra-footer-brand { padding-right: 0; max-width: 400px; }
	.induvra-footer-nav { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: single-column stack, collapsible nav columns. */
@media (max-width: 768px) {
	.induvra-footer-main {
		padding-top: var(--induvra-space-10);
		gap: var(--induvra-space-6);
	}
	.induvra-footer-brand { max-width: none; }
	.induvra-footer-nav {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.induvra-footer-col {
		border-bottom: 1px solid var(--color-border-inverse-subtle);
	}
	.induvra-footer-col-links { padding-bottom: var(--induvra-space-4); }
	.induvra-footer-col[data-collapsed="true"] .induvra-footer-col-links { display: none; }
	.induvra-footer-col[data-collapsed="false"] .induvra-footer-col-links { display: block; }

	/* P0 — footer chevrons not required on mobile. Accordion behaviour,
	   aria-expanded, and the desktop (≥769px) hide rule are untouched;
	   navigation chevrons (.induvra-mobile-chevron) remain. */
	.induvra-footer-col-chevron { display: none; }
	.induvra-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--induvra-space-4);
	}
}

@media (max-width: 480px) {
	.induvra-newsletter-row { flex-direction: column; }
	.induvra-newsletter-submit { width: 100%; }
}

/* Reduced motion — no transform transitions on shell controls. */
@media (prefers-reduced-motion: reduce) {
	.induvra-mobile-chevron,
	.induvra-footer-col-chevron { transition: none; }
	.induvra-mobile-back::before,
	.induvra-mobile-chevron,
	.induvra-footer-col-chevron { transform: none; }
}