/* ==========================================================================
   55TH Avenue - Design Tokens & Base Styles
   Monochrome editorial system. Sharp corners. No shadows except the single
   ambient shadow token. Serif display type, grotesque sans for UI/body.
   ========================================================================== */

:root {
	/* Color */
	--color-surface: #f9f9f9;
	--color-surface-dim: #dadada;
	--color-surface-bright: #f9f9f9;
	--color-surface-container-lowest: #ffffff;
	--color-surface-container-low: #f3f3f3;
	--color-surface-container: #eeeeee;
	--color-surface-container-high: #e8e8e8;
	--color-surface-container-highest: #e2e2e2;
	--color-on-surface: #1a1c1c;
	--color-on-surface-variant: #4c4546;
	--color-inverse-surface: #2f3131;
	--color-inverse-on-surface: #f1f1f1;
	--color-outline: #7e7576;
	--color-outline-variant: #e2e2e2;

	--color-primary: #000000;
	--color-on-primary: #ffffff;
	--color-secondary: #5d5f5f;
	--color-secondary-fixed-dim: #c6c6c7;

	--color-accent: #e9c349;
	--color-accent-on: #241a00;

	--color-error: #ba1a1a;
	--color-on-error: #ffffff;

	/* Typography */
	--font-serif: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
	--font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--size-display-xl: 80px;
	--lh-display-xl: 96px;
	--size-display-xl-mobile: 40px;
	--lh-display-xl-mobile: 48px;

	--size-headline-lg: 48px;
	--lh-headline-lg: 56px;
	--size-headline-lg-mobile: 30px;
	--lh-headline-lg-mobile: 38px;

	--size-headline-md: 32px;
	--lh-headline-md: 40px;
	--size-headline-md-mobile: 24px;
	--lh-headline-md-mobile: 32px;

	--size-body-lg: 18px;
	--lh-body-lg: 28px;
	--size-body-md: 16px;
	--lh-body-md: 24px;

	--size-label-caps: 12px;
	--lh-label-caps: 16px;
	--tracking-label-caps: 0.1em;

	--size-label-md: 14px;
	--lh-label-md: 20px;

	/* Spacing */
	--unit: 8px;
	--container-max: 1440px;
	--gutter: 24px;
	--margin-desktop: 64px;
	--margin-mobile: 20px;
	--section-gap: 120px;
	--section-gap-mobile: 64px;

	/* Shape & elevation */
	--radius: 0;
	--shadow-ambient: 0px 20px 40px rgba(0, 0, 0, 0.05);

	--ease: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 767px) {
	:root {
		--size-display-xl: var(--size-display-xl-mobile);
		--lh-display-xl: var(--lh-display-xl-mobile);
		--size-headline-lg: var(--size-headline-lg-mobile);
		--lh-headline-lg: var(--lh-headline-lg-mobile);
		--size-headline-md: var(--size-headline-md-mobile);
		--lh-headline-md: var(--lh-headline-md-mobile);
		--section-gap: var(--section-gap-mobile);
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Kept on the root, not body: the footer-reveal sticky trick (see
	   .fa-footer-reveal) needs body to have no overflow of its own, since
	   overflow on a direct ancestor of a position:sticky element breaks
	   its stickiness. Setting it here still prevents horizontal scroll
	   site-wide. */
	overflow-x: hidden;
}

body {
	margin: 0;
	background: var(--color-surface);
	color: var(--color-on-surface);
	font-family: var(--font-sans);
	font-size: var(--size-body-md);
	line-height: var(--lh-body-md);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	max-width: 100%;
	display: block;
}

/* Safety-net default for the inline icon SVGs from fa_icon() (see
   inc/template-tags.php): none of them specify their own width/height,
   so without this an icon placed somewhere that forgets to size it falls
   back to the browser's ~300x150 default SVG box. Any component-specific
   rule (header icons, hamburger, etc.) is more specific and overrides
   this as normal. */
svg {
	width: 20px;
	height: 20px;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font-family: inherit;
	cursor: pointer;
}

input,
textarea,
select,
button {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: 400;
}

p {
	margin: 0;
}

/* No rounded corners, ever. */
* {
	border-radius: 0 !important;
}

::selection {
	background: var(--color-primary);
	color: var(--color-on-primary);
}

/* High contrast mode, toggled from the footer (assets/js/nav.js persists
   the choice in localStorage). Strengthens the palette's weakest
   contrast pairs — secondary text and hairline borders — without
   touching layout. */
html.fa-high-contrast {
	--color-on-surface-variant: #1a1c1c;
	--color-outline: #000000;
	--color-outline-variant: #4c4546;
	--color-secondary-fixed-dim: #ffffff;
}

html.fa-high-contrast img,
html.fa-high-contrast .wp-block-cover__background {
	filter: contrast(1.1);
}

/* Type utilities ----------------------------------------------------- */

.display-xl {
	font-family: var(--font-serif);
	font-size: var(--size-display-xl);
	line-height: var(--lh-display-xl);
	letter-spacing: -0.02em;
	font-weight: 400;
}

.headline-lg {
	font-family: var(--font-serif);
	font-size: var(--size-headline-lg);
	line-height: var(--lh-headline-lg);
	font-weight: 400;
}

.headline-md {
	font-family: var(--font-serif);
	font-size: var(--size-headline-md);
	line-height: var(--lh-headline-md);
	font-weight: 400;
}

.body-lg {
	font-family: var(--font-sans);
	font-size: var(--size-body-lg);
	line-height: var(--lh-body-lg);
	font-weight: 400;
}

.body-md {
	font-family: var(--font-sans);
	font-size: var(--size-body-md);
	line-height: var(--lh-body-md);
	font-weight: 400;
}

.label-caps {
	font-family: var(--font-sans);
	font-size: var(--size-label-caps);
	line-height: var(--lh-label-caps);
	letter-spacing: var(--tracking-label-caps);
	font-weight: 600;
	text-transform: uppercase;
}

.label-md {
	font-family: var(--font-sans);
	font-size: var(--size-label-md);
	line-height: var(--lh-label-md);
	font-weight: 500;
}

/* Layout utilities ----------------------------------------------------- */

.fa-container {
	width: 100%;
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--margin-mobile);
	padding-right: var(--margin-mobile);
}

@media (min-width: 1024px) {
	.fa-container {
		padding-left: var(--margin-desktop);
		padding-right: var(--margin-desktop);
	}
}

.fa-section {
	padding-top: var(--section-gap);
	padding-bottom: var(--section-gap);
}

/* Lets alignfull blocks (our hero / banner ACF blocks) break out of any
   max-width container they're nested inside, e.g. on page.php. */
.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.fa-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.fa-skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--color-primary);
	color: var(--color-on-primary);
	padding: var(--unit) calc(var(--unit) * 2);
	z-index: 200;
	transition: top 0.2s var(--ease);
}

.fa-skip-link:focus {
	top: 0;
}

/* #fa-main sits above the fixed .fa-footer (components.css) in the
   stacking order and needs to be opaque so it visually covers the
   footer while scrolling past it, revealing it only once .fa-main and
   the .fa-footer-spacer beneath it have fully scrolled by. It also needs
   to be at least one full viewport tall: the footer is always rendered
   at a fixed position, so on a page shorter than the viewport, #fa-main's
   own box wouldn't reach the bottom of the screen and the footer would
   show through the gap even at scroll position 0. */
#fa-main {
	position: relative;
	z-index: 1;
	background: var(--color-surface);
	min-height: 100vh;
}

/* No-JS fallback: without assets/js/footer-reveal.js there's no reserved
   scroll room for the fixed footer, so it would sit permanently on top
   of the page instead of revealing at the end. Falling back to normal
   static flow keeps it fully functional, just without the reveal effect. */
html.no-js .fa-footer {
	position: static;
}

/* WordPress/WooCommerce core mark plenty of markup as screen-reader-only
   (the review star widget's "1 of 5 stars" labels, sale-price "Original
   price was / Current price is" text, etc.) via this exact class, on the
   assumption every theme defines it — without it here, all of that text
   was rendering fully visible instead of staying accessible-only. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--color-surface-container-low);
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: var(--color-on-surface);
	display: block;
	font-size: var(--size-label-md);
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}