/*
 * MAAF Construction — main.css
 * Slice 1: design tokens, reset, typography scale, base elements,
 * header sticky w/ backdrop blur, footer, focus, nav underline draw,
 * reduced-motion guard.
 */

/* ─── Design tokens ──────────────────────────────────────────── */
:root {
  /* Brand palette — see docs/BRIEF.md §16.4 */
  --color-red:        #b93338;  /* canonical, matches logo SVG fill */
  --color-red-hover:  #c1272d;
  --color-red-on-dark: #ea5b60;  /* lighter red for labels on charcoal — WCAG AA (5.1:1 on #1A1A1A) */
  --color-red-legacy: #B32025;  /* DEPRECATED — not used; documented only */
  --color-black:      #111111;
  --color-charcoal:   #1A1A1A;
  --color-gray:       #A6A6A6;
  --color-gray-light: #E5E5E5;
  --color-white:      #FFFFFF;

  /* Typography */
  --font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Work Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Type scale — clamp() for fluid sizing across 375 / 768 / 1024 / 1440 */
  --fs-hero:      clamp(2.5rem, 5.5vw, 4.75rem);  /* tuned down from 9rem max */
  --fs-h1:        clamp(2.5rem, 6vw, 5rem);
  --fs-h2:        clamp(2rem, 4vw, 4rem);
  --fs-h3:        clamp(1.5rem, 2.5vw, 2.5rem);
  --fs-h4:        clamp(1.25rem, 1.8vw, 1.5rem);
  --fs-body:      1rem;
  --fs-small:     .875rem;
  --fs-eyebrow:   .75rem;

  --lh-tight:     1.05;
  --lh-snug:      1.25;
  --lh-normal:    1.625;

  --tracking-tight: -0.04em;
  --tracking-snug:  -0.02em;
  --tracking-wide:  0.08em;

  /* Spacing rhythm — base 8px, "radical whitespace" per design philosophy */
  --space-1:  .25rem;
  --space-2:  .5rem;
  --space-3:  .75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;
  --space-section: clamp(4rem, 10vw, 10rem);

  /* Layout */
  --container: 1400px;
  --container-narrow: 880px;
  --gutter: clamp(1rem, 4vw, 3rem);

  /* Motion */
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Effects */
  --shadow-sm: 0 2px 8px rgba(17, 17, 17, 0.06);
  --shadow-md: 0 8px 24px rgba(17, 17, 17, 0.08);
  --shadow-lg: 0 16px 48px rgba(17, 17, 17, 0.12);

  /* Header — 64px logo with 18px breathing top/bottom = 100px total.
     Mobile 48px icon with 14px breathing = 76px total. */
  --header-h: 100px;
  --header-h-mobile: 76px;

  /* Architectural button radius — used across header CTA, hero CTAs,
     pillars and forms. 6px is the moderate, premium-construction
     compromise between pill (lifestyle) and square (brutalist). */
  --radius-btn: 6px;
}

/* ─── Reset / base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Anchor links land below the fixed header instead of getting hidden. */
  scroll-padding-top: var(--header-h-mobile);
  /* Baseline guarantee: the page never scrolls sideways. `clip` (not hidden)
     keeps vertical scroll + position:sticky / GSAP pins working. */
  overflow-x: clip;
}
@media (min-width: 1024px) {
  html { scroll-padding-top: var(--header-h); }
}
/* NOTE: `scroll-behavior: smooth` removed — Lenis already smooths the scroll
   and native + JS smoothing fight each other (visible micro-jitters). */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-black);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }

/* Embeds (Google Maps, etc.) must never exceed the viewport on mobile. */
iframe { max-width: 100%; }

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

button { background: none; border: 0; padding: 0; cursor: pointer; }

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

ul, ol { padding: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-snug);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { max-width: 70ch; }

/* ─── Accessibility ──────────────────────────────────────────── */
.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;
  width: 1px; word-wrap: normal !important;
}

.skip-link {
  position: absolute; top: -100px; left: 0;
  background: var(--color-red); color: var(--color-white);
  padding: .75rem 1.25rem; z-index: 9999;
  font-family: var(--font-display); font-weight: 600;
  transition: top var(--transition-base);
}
.skip-link:focus { top: 0; }

/* MI-6 — focus states: red outline 4px offset, only on keyboard nav. */
:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 4px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ─── Layout primitives ──────────────────────────────────────── */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }

/* ─── Back-to-top button (global) ────────────────────────────────
   Floats bottom-right, fades in once the user scrolls down; main.js toggles
   .is-visible and handles the smooth scroll to top. */
.back-to-top {
  position: fixed;
  right: clamp(1rem, 4vw, 2rem);
  bottom: calc(clamp(1rem, 4vw, 2rem) + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-red);
  color: var(--color-white);
  box-shadow: 0 8px 24px rgba(17, 17, 17, 0.28);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .35s ease, transform .35s ease, background .25s ease;
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { background: var(--color-red-hover); }
.back-to-top__arrow {
  width: 10px;
  height: 10px;
  margin-top: 3px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity .2s ease; transform: none; }
  .back-to-top.is-visible { transform: none; }
}

/* ─── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .75rem;
  padding: 14px 24px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 14px; letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-btn);
  transition: background var(--transition-base), color var(--transition-base),
              transform 100ms ease-out, box-shadow var(--transition-base);
}
.btn:active { transform: scale(0.96); }  /* MI-4 micro-bounce */

.btn--primary { background: var(--color-red); color: var(--color-white); }
.btn--primary:hover { background: var(--color-red-hover); }

.btn--ghost { background: transparent; color: var(--color-black); border: 1.5px solid currentColor; }
.btn--ghost:hover { background: var(--color-black); color: var(--color-white); }

.btn--ghost-white { background: transparent; color: var(--color-white); border: 1.5px solid currentColor; }
.btn--ghost-white:hover { background: var(--color-white); color: var(--color-black); }

/* ─── Site header ────────────────────────────────────────────── *
 * Three-column layout: [logo] [nav margin-auto] [cta cluster].
 *
 * Three visual states (controlled by JS classes on .site-header):
 *   State A — .is-at-top + body.has-hero        → fully transparent
 *   State B — .is-on-hero (not .is-at-top)      → dark glass over hero
 *   State C — default (past hero or no hero)    → light glass
 *
 * All state-dependent properties share the same 300ms transition for sync. */

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h-mobile);
  display: flex; align-items: center;
  color: var(--color-charcoal);
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(17, 17, 17, 0.06);
  transition: background 300ms cubic-bezier(0.4, 0, 0.2, 1),
              backdrop-filter 300ms cubic-bezier(0.4, 0, 0.2, 1),
              -webkit-backdrop-filter 300ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
              color 300ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* State C lift: subtle shadow when past hero and scrolled */
.site-header.is-scrolled:not(.is-on-hero) { box-shadow: 0 4px 24px rgba(17, 17, 17, 0.06); }

@media (min-width: 1024px) {
  .site-header { height: var(--header-h); }
}

.site-header__inner {
  display: flex; align-items: center;
  gap: var(--space-5); width: 100%;
}

/* Logo — 78px desktop, 48px mobile icon. Nudged up 7px (only the logo,
   not the rest of the header cluster) for optical balance. */
.site-logo {
  position: relative;
  display: inline-flex; align-items: center; flex-shrink: 0;
  height: 78px;
  transform: translateY(-7px);
}
.site-logo__horizontal {
  display: block; height: 78px; width: auto;
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.site-logo__horizontal--light {
  position: absolute; top: 50%; left: 0;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}
.site-header .custom-logo { display: block; height: 78px; width: auto; }
.site-logo__icon { display: none; height: 48px; width: 48px; }

@media (max-width: 1023px) {
  .site-logo { height: 48px; }
  .site-logo__horizontal,
  .site-header .custom-logo { display: none; }
  .site-logo__icon { display: block; }
}

/* Primary nav — middle column, centered between logo and CTA. */
.primary-nav { display: none; }

/* ─── Mobile menu — full overlay panel below the header, toggled by
   .menu-toggle (main.js adds .is-open). Hidden on desktop (uses .primary-nav). */
.mobile-menu {
  position: fixed;
  top: var(--header-h-mobile);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--color-charcoal);
  padding: var(--space-5) var(--gutter) var(--space-8);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu li { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.mobile-menu a {
  display: block;
  padding: var(--space-4) 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
  color: var(--color-white);
  transition: color .2s ease;
}
.mobile-menu a:hover,
.mobile-menu .current-menu-item > a { color: var(--color-red); }
body.menu-open { overflow: hidden; }
@media (min-width: 1024px) {
  .mobile-menu { display: none; }
}

@media (min-width: 1024px) {
  .primary-nav { display: block; margin-inline: auto; }
  .primary-nav ul,
  .primary-nav__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: clamp(2rem, 2.6vw, 2.5rem);
  }
  .primary-nav a {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: inherit;
    position: relative;
    padding-block: .5rem;
    display: inline-block;
    /* Match the 300ms header transition so nav color shifts in sync with bg */
    transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* MI-7 — underline draw L→R on hover */
  .primary-nav a::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -2px;
    height: 2px; background: var(--color-red);
    transform: scaleX(0); transform-origin: left center;
    transition: transform var(--transition-base);
  }
  .primary-nav a:hover::after,
  .primary-nav a:focus-visible::after,
  .primary-nav .current-menu-item > a::after { transform: scaleX(1); }
}

/* Right cluster: phone + CTA */
.site-header__cta {
  display: flex; align-items: center;
  gap: var(--space-7);  /* 32px between phone and CTA, per spec */
  flex-shrink: 0;
  margin-left: auto;
}
.site-header__phone {
  display: none;
  align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: inherit;
  opacity: 0.85;
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
              color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header__phone:hover { opacity: 1; color: var(--color-red); }
.site-header__phone svg { color: var(--color-red); flex-shrink: 0; }
@media (min-width: 1024px) { .site-header__phone { display: inline-flex; } }

/* CTA — architectural moderate radius (6px). System-consistent with .btn. */
.site-header__quote {
  padding: 14px 24px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-btn);
  background: var(--color-red);
  color: var(--color-white);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  transition: background var(--transition-base),
              transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow var(--transition-base);
}
.site-header__quote:hover {
  background: var(--color-red-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(185, 51, 56, 0.35);
}
.site-header__quote:active { transform: translateY(0) scale(0.98); }

.site-header__quote-short { display: none; }
@media (max-width: 420px) {
  .site-header__quote { padding: 12px 18px; }
  .site-header__quote-long { display: none; }
  .site-header__quote-short { display: inline; }
}

/* Mobile menu toggle */
.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  color: inherit;
  border-radius: var(--radius-btn);
  transition: background var(--transition-base),
              color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-toggle:hover { background: rgba(17, 17, 17, 0.06); }
@media (min-width: 1024px) { .menu-toggle { display: none; } }

/* Spacer so content doesn't slide under fixed header. */
.site-header-spacer { height: var(--header-h-mobile); }
@media (min-width: 1024px) { .site-header-spacer { height: var(--header-h); } }

/* When the WP admin bar is visible (logged-in user), push the fixed header
   down so it sits BELOW the admin bar instead of being covered by it. Without
   this rule the top 32px (or 46px on small screens) of our header is hidden
   behind the toolbar and the logo + nav appear stuck to the top edge. */
@media screen and (min-width: 783px) {
  .admin-bar .site-header { top: 32px; }
}
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

/* ─── Site footer ────────────────────────────────────────────── */
.site-footer {
  background: var(--color-charcoal);
  color: var(--color-white);
  padding-block: var(--space-9) var(--space-6);
}
.site-footer a { color: var(--color-white); transition: color var(--transition-base); }
.site-footer a:hover { color: var(--color-red); }

.site-footer__grid {
  display: grid; gap: var(--space-7);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: var(--space-8); }
}

.site-footer__brand img { width: 220px; height: auto; margin-bottom: var(--space-5); }
.site-footer__brand p { color: var(--color-gray); max-width: 32ch; font-size: var(--fs-small); }

.site-footer h3 {
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--color-gray);
  margin-bottom: var(--space-4); font-weight: 600;
}

.site-footer ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer__contact { display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--fs-small); font-style: normal; }
.site-footer__contact a,
.site-footer__contact address { display: inline-flex; align-items: flex-start; gap: 12px; font-style: normal; }
.site-footer__contact svg { color: var(--color-red); flex-shrink: 0; margin-top: 3px; }

/* Two-line contact stack: bold primary line + small muted secondary line */
.site-footer__contact-stack { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.site-footer__contact-stack strong {
  color: var(--color-white);
  font-weight: 500;
  font-size: 14px;
}
.site-footer__contact-stack em {
  color: var(--color-gray);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.site-footer__contact a:hover .site-footer__contact-stack strong { color: var(--color-red); }

.site-footer__social { display: flex; gap: var(--space-4); margin-top: var(--space-2); }
.site-footer__social a {
  width: 40px; height: 40px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: background var(--transition-base), border-color var(--transition-base);
}
.site-footer__social a:hover { background: var(--color-red); border-color: var(--color-red); color: var(--color-white); }

.site-footer__bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4);
  font-size: var(--fs-small); color: var(--color-gray);
}
.site-footer__legal { display: inline-flex; gap: var(--space-3); flex-wrap: wrap; }
.site-footer__legal a { color: var(--color-gray); }
.site-footer__legal a:hover { color: var(--color-white); }
.site-footer__legal span { color: rgba(255, 255, 255, 0.2); }

/* ─── Site main wrapper ─────────────────────────────────────────
 * Default padding for pages that aren't the landing (landing handles its own
 * vertical rhythm via individual sections). Front-page.php adds the
 * .site-main--landing modifier so we can zero the padding there.            */
.site-main { padding-block: var(--space-9); }
.site-main--landing { padding-block: 0; }

/* ─── Generic page (legal / prose) ──────────────────────────────
 * Used by page.php — Privacy, Terms, Accessibility and any plain page.
 * Readable measure + the site's display/body type so pages stay coherent
 * with the rest of the design. */
.post-single { max-width: 768px; margin-inline: auto; }
.post-single__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--color-charcoal);
  margin: 0 0 var(--space-6);
}
.post-single__cover { margin-bottom: var(--space-6); border-radius: 8px; overflow: hidden; }
.post-single__cover img { width: 100%; height: auto; display: block; }
.post-single__content {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: rgba(17, 17, 17, 0.8);
}
.post-single__content > :first-child { margin-top: 0; }
.post-single__content p { margin: 0 0 var(--space-4); }
.post-single__content h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--color-charcoal);
  margin: var(--space-7) 0 var(--space-3);
}
.post-single__content h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  color: var(--color-charcoal);
  margin: var(--space-6) 0 var(--space-2);
}
.post-single__content a { color: var(--color-red); text-decoration: underline; text-underline-offset: 3px; }
.post-single__content ul,
.post-single__content ol { margin: 0 0 var(--space-4); padding-left: 1.4em; }
.post-single__content li { margin-bottom: var(--space-2); }
.post-single__content li::marker { color: var(--color-red); }
.post-single__content strong { font-weight: 700; color: var(--color-charcoal); }
.post-single__content blockquote {
  margin: var(--space-6) 0;
  padding-left: var(--space-5);
  border-left: 3px solid var(--color-red);
  font-style: italic;
  color: var(--color-charcoal);
}

/* ─── Loader (MI-1) ──────────────────────────────────────────
 * Hidden by default. loader.js toggles .is-active on first visit per session,
 * then fades + blurs out via GSAP. This avoids a flash for repeat visitors. */
.loader {
  position: fixed; inset: 0; z-index: 9999;
  display: none;
  align-items: center; justify-content: center;
  background: var(--color-white);
}
.loader.is-active { display: flex; }
.loader.is-hidden { opacity: 0; pointer-events: none; }
.loader__logo {
  width: clamp(72px, 12vw, 120px);
  height: auto;
  opacity: 0;  /* GSAP animates to 1 */
}
html.is-loading { overflow: hidden; }

/* ─── prefers-reduced-motion (MI-9) ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .primary-nav a::after { transition: none; }
}

/* Set by main.js when reduced-motion is active — allows JS-driven escape hatches. */
html.reduced-motion [data-aos] { opacity: 1 !important; transform: none !important; }