/**
 * Miles Theme — GLOBAL editorial polish for the LG Miles redesign.
 *
 * Unlike miles-skin.css (scoped to .lgd-miles-skin for the homepage body),
 * this file styles theme-wide chrome — the header nav and footer — so the
 * Miles look carries across every page as the redesign rolls out. Loaded
 * globally; rules are kept targeted to header/footer so existing pages are
 * only lightly touched (uppercase nav, pink hover).
 *
 * Tokens: ms-* in theme.json (--wp--preset--color--ms-accent-1 = #FA00AA,
 * --wp--preset--font-family--big-shoulders-display).
 */

/* =================================================================
   MILES TOKEN FALLBACKS
   =================================================================
   WordPress can omit child-theme presets from the rendered global styles
   when DB-owned style settings override the palette. The Miles patterns
   still need these variables and utility classes on the frontend.
   ================================================================= */
:root {
	--wp--preset--color--ms-base: #000000;
	--wp--preset--color--ms-base-2: #333333;
	--wp--preset--color--ms-base-3: #0a0a0a;
	--wp--preset--color--ms-contrast: #ffffff;
	--wp--preset--color--ms-accent-1: #FA00AA;
	--wp--preset--color--ms-accent-2: #8A8A8A;
	--wp--preset--color--ms-accent-3: #1a1a1a;
	--wp--preset--color--ms-accent-4: #111111;
	--wp--preset--color--ms-white-subtle: rgba(255, 255, 255, 0.72);
	--wp--preset--font-family--big-shoulders-display: "Big Shoulders Display", var(--wp--preset--font-family--big-shoulders, "Big Shoulders", sans-serif);
	--wp--preset--font-family--libre-franklin: "Libre Franklin", var(--wp--preset--font-family--mona-sans, sans-serif);
	/* Fluid Miles spacing scale — keep in sync with theme.json spacingSizes.
	   WP-emitted body-level presets win over these :root fallbacks. */
	--wp--preset--spacing--ms-20: 0.5rem;
	--wp--preset--spacing--ms-30: 1rem;
	--wp--preset--spacing--ms-40: clamp(1.25rem, 2.7vw, 2rem);
	--wp--preset--spacing--ms-50: clamp(2.25rem, 5.5vw, 4rem);
	--wp--preset--spacing--ms-60: clamp(3rem, 8vw, 6rem);
	--wp--preset--spacing--ms-65: clamp(4rem, 11vw, 8rem);
}

.has-ms-base-color { color: var(--wp--preset--color--ms-base) !important; }
.has-ms-base-2-color { color: var(--wp--preset--color--ms-base-2) !important; }
.has-ms-base-3-color { color: var(--wp--preset--color--ms-base-3) !important; }
.has-ms-contrast-color { color: var(--wp--preset--color--ms-contrast) !important; }
.has-ms-accent-1-color { color: var(--wp--preset--color--ms-accent-1) !important; }
.has-ms-accent-2-color { color: var(--wp--preset--color--ms-accent-2) !important; }
.has-ms-accent-3-color { color: var(--wp--preset--color--ms-accent-3) !important; }
.has-ms-accent-4-color { color: var(--wp--preset--color--ms-accent-4) !important; }
.has-ms-white-subtle-color { color: var(--wp--preset--color--ms-white-subtle) !important; }

.has-ms-base-background-color { background-color: var(--wp--preset--color--ms-base) !important; }
.has-ms-base-2-background-color { background-color: var(--wp--preset--color--ms-base-2) !important; }
.has-ms-base-3-background-color { background-color: var(--wp--preset--color--ms-base-3) !important; }
.has-ms-contrast-background-color { background-color: var(--wp--preset--color--ms-contrast) !important; }
.has-ms-accent-1-background-color { background-color: var(--wp--preset--color--ms-accent-1) !important; }
.has-ms-accent-2-background-color { background-color: var(--wp--preset--color--ms-accent-2) !important; }
.has-ms-accent-3-background-color { background-color: var(--wp--preset--color--ms-accent-3) !important; }
.has-ms-accent-4-background-color { background-color: var(--wp--preset--color--ms-accent-4) !important; }
.has-ms-white-subtle-background-color { background-color: var(--wp--preset--color--ms-white-subtle) !important; }

.has-ms-base-border-color { border-color: var(--wp--preset--color--ms-base) !important; }
.has-ms-base-2-border-color { border-color: var(--wp--preset--color--ms-base-2) !important; }
.has-ms-base-3-border-color { border-color: var(--wp--preset--color--ms-base-3) !important; }
.has-ms-contrast-border-color { border-color: var(--wp--preset--color--ms-contrast) !important; }
.has-ms-accent-1-border-color { border-color: var(--wp--preset--color--ms-accent-1) !important; }
.has-ms-accent-2-border-color { border-color: var(--wp--preset--color--ms-accent-2) !important; }
.has-ms-accent-3-border-color { border-color: var(--wp--preset--color--ms-accent-3) !important; }
.has-ms-accent-4-border-color { border-color: var(--wp--preset--color--ms-accent-4) !important; }
.has-ms-white-subtle-border-color { border-color: var(--wp--preset--color--ms-white-subtle) !important; }

.has-big-shoulders-display-font-family { font-family: var(--wp--preset--font-family--big-shoulders-display) !important; }
.has-libre-franklin-font-family { font-family: var(--wp--preset--font-family--libre-franklin) !important; }

body.lgd-miles-page,
body.lgd-miles-page .wp-site-blocks,
body.lgd-miles-page main.site-content,
body.lgd-miles-page .entry-content {
	background: var(--wp--preset--color--ms-base);
}

/* Site-wide film grain. One fixed overlay replaces the hero's local copy
   so every section shares the same tactile surface. pointer-events: none
   keeps it purely visual; the chat widget and modals sit above it. */
body.lgd-miles-page::after {
	content: '';
	position: fixed;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
	background-size: 128px 128px;
	opacity: 0.03;
	pointer-events: none;
	z-index: 9999;
}

body.lgd-miles-page main.site-content.lgd-default-page {
	padding: 0 !important;
	max-width: none !important;
}

body.lgd-miles-page .entry-content {
	max-width: none !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
}

body.lgd-miles-page .entry-content > .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-right: calc(50% - 50vw) !important;
	margin-left: calc(50% - 50vw) !important;
}

/* =================================================================
   HEADER NAV — Miles editorial treatment (keeps the Ollie mega-menu)
   Ollie strips the nav's custom class, so scope via the rendered
   <header class="site-header wp-block-template-part"> wrapper.
   ================================================================= */
header.site-header .wp-block-navigation-item__content {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
}

/* Pink accent on hover/focus. */
header.site-header .wp-block-navigation-item__content:hover,
header.site-header .wp-block-navigation-item__content:focus-visible,
header.site-header .wp-block-navigation-item:hover > a {
	color: var(--wp--preset--color--ms-accent-1);
}

/* =================================================================
   MOBILE NAV — white toggle icons + editorial flyout
   Ollie Menu Designer paints the toggle glyph ms-accent-1 (pink) on a
   pink button, so it vanishes. Force the glyph white and drop the heavy
   pink fill to a clean bare icon (willschmierer.com cue).
   ================================================================= */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	background-color: transparent !important;
	color: #ffffff !important;
}
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	fill: #ffffff !important;
}
/* Ollie's dialog drops the close button at the flyout's left edge; pin it to
   the viewport top-right so it mirrors the hamburger and stays put on scroll. */
.wp-block-navigation__responsive-container-close {
	position: fixed !important;
	top: clamp(14px, 3.2vw, 22px) !important;
	right: clamp(14px, 4.2vw, 24px) !important;
	left: auto !important;
	z-index: 1000;
}
.wp-block-navigation__responsive-container-open:hover svg,
.wp-block-navigation__responsive-container-open:focus-visible svg,
.wp-block-navigation__responsive-container-close:hover svg,
.wp-block-navigation__responsive-container-close:focus-visible svg {
	fill: var(--wp--preset--color--ms-accent-1) !important;
}

/* The Ollie mobile-menu flyout (lgd-mobile-menu): center the stack,
   editorial display type, thin gradient dividers between links. */
.lgd-mobile-menu {
	min-height: 86vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	text-align: center;
	row-gap: 0 !important;
	/* Top padding clears the fixed close button; items anchor near the top. */
	padding-top: clamp(3.5rem, 12vw, 5rem);
	padding-bottom: var(--wp--preset--spacing--large);
}
.lgd-mobile-menu p.has-large-font-size {
	margin: 0;
	width: min(440px, 84vw);
	padding: clamp(0.55rem, 2.1vw, 0.95rem) 0;
	border-top: 1px solid transparent;
	border-image: linear-gradient(90deg, transparent 8%, rgba(250, 0, 170, 0.55) 50%, transparent 92%) 1;
}
.lgd-mobile-menu p.has-large-font-size:first-of-type {
	border-top: 0;
}
.lgd-mobile-menu a {
	font-family: var(--wp--preset--font-family--big-shoulders-display);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 800;
	font-size: clamp(1.55rem, 6vw, 2.15rem);
	line-height: 1.1;
	color: #ffffff;
	text-decoration: none;
	transition: color 0.18s ease;
}
.lgd-mobile-menu a:hover,
.lgd-mobile-menu a:focus-visible {
	color: var(--wp--preset--color--ms-accent-1);
}
/* Bottom CTA button — sits apart from the link stack with breathing room. */
.lgd-mobile-menu .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--medium);
	width: min(440px, 84vw);
}
.lgd-mobile-menu .wp-block-buttons .wp-block-button__link {
	font-family: var(--wp--preset--font-family--big-shoulders-display);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 800;
}

/* =================================================================
   FOOTER — Big Shoulders column titles + pink link hover (Miles)
   ================================================================= */
footer.site-footer .wp-block-heading,
footer.site-footer .footer-col-title {
	font-family: var(--wp--preset--font-family--big-shoulders-display);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 800;
}

footer.site-footer a:hover,
footer.site-footer a:focus-visible,
footer.site-footer .footer-link:hover {
	color: var(--wp--preset--color--ms-accent-1);
}