/* ==========================================================================
   ASTYLIO — GLOBAL LAYOUT (Step 2)
   Reusable storefront shell styling, loaded site-wide behind
   astylio-storefront.css. TOKENS ONLY — every value consumes the ASTYLIO
   semantic tokens (--color-* / --astylio-*); no raw hex, no new fonts,
   no new spacing/radius/shadow systems. z-index uses the central
   --astylio-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.astylio-announcement-off .aksh-promo-bar,
body.astylio-announcement-off .astylio-announcement {
	display: none;
}
body.astylio-announcement-off .aksh-header.site-header { top: 0; }
body.astylio-announcement-off .site-content { padding-top: 72px; }
body.astylio-announcement-off .aksh-mobile-menu.is-open { top: 0; }
@media (max-width: 768px) {
	body.astylio-announcement-off .aksh-header.site-header { top: 0; }
	body.astylio-announcement-off .site-content { padding-top: 66px; }
	body.astylio-announcement-off .aksh-mobile-menu.is-open { top: 0; }
}

/* Close control — IconButton pattern, right-aligned, inverse (burgundy bar). */
.astylio-announcement--dismissible { position: relative; }
.astylio-announcement--dismissible .aksh-promo-track { padding-right: 48px; }
.astylio-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(--astylio-radius-sm);
	z-index: var(--astylio-z-nav-dropdown);
}
.astylio-announcement-close:hover {
	background: var(--color-surface-inverse-hover);
	color: var(--astylio-gold);
}
.astylio-announcement-close svg { width: 18px; height: 18px; }

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

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

.astylio-mobile-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--astylio-space-3);
	padding: var(--astylio-space-4) 0;
	/* P1-07 (aksh-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 `.aksh-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). */
.aksh-mobile-list .astylio-mobile-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--astylio-space-3);
	overflow-wrap: anywhere;
	min-width: 0;
}

.astylio-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(--astylio-duration-fast) var(--astylio-ease-standard);
}
.astylio-mobile-chevron svg {
	display: block;
	width: 100%;
	height: 100%;
}
/* Expanded (drill-down open): chevron points down — same state hook already
   maintained by astylio-layout.js, no JS changes needed. */
.astylio-mobile-trigger[aria-expanded="true"] .astylio-mobile-chevron { transform: rotate(90deg); }

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

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

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

.astylio-mobile-section-title {
	display: block;
	font-family: var(--astylio-font-ui);
	font-size: var(--astylio-fs-label-md);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-secondary);
	padding: var(--astylio-space-4) var(--astylio-space-4) var(--astylio-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 #aksh-mobile-menu is display:none on desktop, so this never leaks
   into the desktop header/navigation. */
.astylio-mobile-menu-promo {
	margin-top: var(--astylio-space-14); /* vertical gap between nav and image */
}
.astylio-mobile-menu-promo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;   /* override the global img rounding — editorial, not a card */
}

/* Mobile-menu account link — below the nav list, above the promo image
   (mobile only: parent #aksh-mobile-menu is display:none on desktop).
   Playfair Display italic distinguishes it from the Poppins nav links;
   sentence-case + secondary colour matches the ref. Tokens only. */
.astylio-mobile-account {
	padding: var(--astylio-space-4) 0;
}
.astylio-mobile-account-link {
	font-family: var(--astylio-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: var(--astylio-fs-body-lg);
	color: var(--color-text-secondary);
	text-decoration: none;
}
.astylio-mobile-account-link:hover { color: var(--color-brand-primary); }
.astylio-mobile-account-sep {
	margin: 0 var(--astylio-space-2);
	color: var(--color-text-muted);
}

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

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

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

/* --- Brand / newsletter column --- */
.astylio-footer-brand {
	padding-right: var(--astylio-space-6);
}
.astylio-footer-wordmark {
	font-family: var(--astylio-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(--astylio-space-2);
	text-transform: uppercase;
	line-height: 1.15;
}
.astylio-footer-tagline {
	font-family: var(--astylio-font-ui);
	font-size: var(--astylio-fs-body-sm);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-text-inverse-muted);
	margin: 0 0 var(--astylio-space-6);
}

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

/* --- Navigation columns --- */
.astylio-footer-nav {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--astylio-space-6);
	max-width: 560px;
}

/* Desktop: empty middle column between the two footer columns. */
@media (min-width: 1025px) {
	.astylio-footer-nav {
		grid-template-columns: repeat(3, 1fr);
		max-width: 840px;
	}
	.astylio-footer-nav .astylio-footer-col:last-child {
		grid-column: 3;
	}
}

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

/* Accordion toggle — clickable on mobile, static heading on desktop. */
.astylio-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. */
.astylio-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(--astylio-duration-fast) var(--astylio-ease-standard);
}
.astylio-footer-col-toggle[aria-expanded="false"] .astylio-footer-col-chevron { transform: rotate(-135deg); }

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

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

/* --- Bottom row: divider + copyright + social icons --- */
.astylio-footer-bottom {
	max-width: var(--astylio-container-xl);
	margin: 0 auto;
	padding: 0 var(--astylio-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(--astylio-space-4);
	padding-top: var(--astylio-space-6);
	padding-bottom: var(--astylio-space-8);
}

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

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

/* Screen-reader only — accessible label for icon-only links. */
.astylio-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)
   -------------------------------------------------------------------------- */
.astylio-gl-preview { padding: var(--astylio-space-12) 0; }
.astylio-gl-preview__note {
	max-width: var(--astylio-container-lg);
	margin: 0 auto var(--astylio-space-8);
	font-family: var(--astylio-font-ui);
	color: var(--color-text-secondary);
	font-size: var(--astylio-fs-body-sm);
}
.astylio-gl-preview__section {
	max-width: var(--astylio-container-xl);
	margin: 0 auto var(--astylio-space-11);
	padding: 0 var(--astylio-space-6);
}
.astylio-gl-preview__title {
	font-family: var(--astylio-font-display);
	font-size: var(--astylio-fs-heading-md);
	font-weight: 500;
	color: var(--color-text-primary);
	margin: 0 0 var(--astylio-space-6);
}
.astylio-gl-preview__placeholder {
	border: 1px dashed var(--color-border-default);
	border-radius: var(--astylio-radius-lg);
	background: var(--color-bg-surface);
	padding: var(--astylio-space-12) var(--astylio-space-8);
	text-align: center;
	color: var(--color-text-muted);
	font-family: var(--astylio-font-ui);
}

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

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

/* Mobile: two-column side-by-side nav (top-aligned, left-aligned). */
@media (max-width: 768px) {
	.astylio-footer-main {
		padding-top: var(--astylio-space-10);
		gap: var(--astylio-space-6);
	}
	.astylio-footer-brand { max-width: none; }
	.astylio-footer-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--astylio-space-7);
		align-items: start;
	}
	.astylio-footer-col {
		border-bottom: 0;
		min-width: 0;
	}
	/* Accordion disabled on mobile — both columns always expanded so the
	   headings stay top-aligned side by side (JS toggle is non-interactive). */
	.astylio-footer-col-toggle {
		cursor: default;
		min-height: auto;
		pointer-events: none;
	}
	.astylio-footer-col-links { padding-bottom: var(--astylio-space-4); }
	.astylio-footer-col[data-collapsed="true"] .astylio-footer-col-links,
	.astylio-footer-col[data-collapsed="false"] .astylio-footer-col-links { display: block; }
	.astylio-footer-col-links li { min-width: 0; }
	.astylio-footer-col-links a { overflow-wrap: break-word; }

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

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

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