/* Mayne on Homes: shared design tokens and site chrome (nav + footer).
   Loaded by every page, including the generated homepage.

   IMPORTANT: this file must not contain global resets. The homepage is
   Unbounce output whose absolute widths assume the default content-box sizing,
   so a blanket `* { box-sizing: border-box }` here would shift that layout.
   Box sizing is scoped to the chrome components below; the subpage reset lives
   in pages.css, which the homepage never loads. */

:root {
  /* Sampled from the live page's own CSS, not from memory. */
  --olive:      #8c8000;
  --olive-dark: #7e7000;
  --cream:      #fffbd7;   /* text and button fills */
  --cream-bg:   #fffde7;   /* the lighter tone the homepage bands actually use */
  --ink:        #121212;
  --paper:      #ffffff;
  --line:       #b8b8b8;
  --muted:      #a0a0a0;
  --muted-text:  #5d5d5d;   /* body copy on light backgrounds: breadcrumbs, captions, notes */

  --font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-body:    Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --nav-h: 78px;
  --wrap:  1140px;
  --radius-pill: 100px;
}

.site-nav, .site-nav *, .site-nav *::before, .site-nav *::after,
.site-footer, .site-footer *, .site-footer *::before, .site-footer *::after {
  box-sizing: border-box;
}

/* ── Skip link ───────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--cream);
  color: var(--ink);
  font: 600 15px/1 var(--font-body);
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ── Header nav ──────────────────────────────────────────────────────────── */
/* The nav sits OVER the hero rather than above it, occupying the space the
   generated page had reserved for a duplicate logo and phone button. Because it
   is fixed it costs no layout height, so the hero keeps its original
   proportions and no generated coordinates need rewriting.

   It starts transparent against the dark hero and gains a solid background once
   scrolled, so the links stay readable over lighter content further down.
   assets/js/nav.js adds .is-stuck past the threshold. */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  font-family: var(--font-body);
  transition: background-color .2s ease, border-color .2s ease;
}

.site-nav.is-stuck,
.site-nav.is-open {
  background: var(--ink);
  border-bottom-color: rgba(255, 251, 215, 0.14);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
}

@media (prefers-reduced-motion: reduce) {
  .site-nav { transition: none; }
  .site-nav__brand img,
  .site-nav__brand span { transition: none; }
  .site-footer a { transition: none; }
}

.site-nav__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  min-height: var(--nav-h);
  padding: 10px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
}

.site-nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  text-decoration: none;
  color: var(--cream);
}
/* Same leak as .site-nav__links a: pages.css's global `a:hover { color:
   var(--ink) }` outranks the plain (non-hover) rule above by specificity, so
   without this the wordmark went near-black on hover on every subpage. */
.site-nav__brand:hover,
.site-nav__brand:focus-visible { color: var(--cream); }
/* The header carries the hat mark on its own, not the full badge. The badge's
   circular lettering needs ~76px to stay legible, which made for a very tall
   sticky bar; the hat reads clearly at 46px. The badge now lives in the footer,
   where it has room. */
.site-nav__brand img {
  display: block;
  width: auto;
  height: 46px;
  transition: transform .2s ease;
}
.site-nav__brand:hover img,
.site-nav__brand:focus-visible img { transform: rotate(-6deg) scale(1.06); }

.site-nav__brand span {
  font: 700 22px/1.1 var(--font-display);
  letter-spacing: .01em;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: border-color .2s ease;
}
.site-nav__brand:hover span,
.site-nav__brand:focus-visible span { border-bottom-color: var(--olive); }

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav__links a {
  display: inline-block;
  padding: 6px 2px;
  color: var(--cream);
  font: 500 15px/1.2 var(--font-body);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav__links a:hover,
.site-nav__links a:focus-visible {
  /* Explicit color needed here: the subpages' pages.css sets a global
     `a:hover { color: var(--ink) }`, and this selector's specificity beats it,
     but only for properties this rule actually declares. Without this, nav
     links on every subpage (but not the homepage, which never loads
     pages.css) went near-black on hover against the dark nav bar. */
  color: var(--cream);
  border-bottom-color: var(--olive);
}
.site-nav__links a[aria-current="page"] {
  border-bottom-color: var(--cream);
  font-weight: 700;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: 700 15px/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--olive); color: var(--paper); }
.btn--primary:hover,
.btn--primary:focus-visible { background: var(--cream); color: var(--ink); }

.btn--outline {
  background: transparent;
  color: var(--cream);
  border-color: var(--cream);
}
.btn--outline:hover,
.btn--outline:focus-visible { background: var(--cream); color: var(--ink); }

.site-nav .btn { padding: 11px 22px; white-space: nowrap; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  padding: 52px 20px 30px;
}
.site-footer__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}
/* Footer brand: type only, no mark.
   The circular badge clashed with the footer's plain type, and repeating the
   header's hat lockup made the two read as duplicates. So the footer states the
   name at display size with an olive rule under it: same family as the header,
   clearly its own treatment.

   Needs the extra class to outrank `.site-footer h2`, which is equal specificity
   and declared later in this file. */
.site-footer .site-footer__wordmark {
  display: inline-block;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--olive);
  font: 700 27px/1.15 var(--font-display);
  letter-spacing: .01em;
  text-transform: none;
  color: var(--cream);
}

.site-footer h2 {
  margin: 0 0 14px;
  font: 700 15px/1.2 var(--font-body);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin-bottom: 9px; }
.site-footer a {
  color: var(--cream);
  text-decoration: none;
  /* Matches the nav links' hover treatment (border-bottom, not underline) so
     the header and footer feel like the same component family. */
  border-bottom: 2px solid transparent;
  padding-bottom: 1px;
  transition: border-color .2s ease;
}
.site-footer a:hover,
.site-footer a:focus-visible {
  /* Same fix as the nav links: pages.css's global `a:hover { color: ink }`
     otherwise wins on specificity for color (this rule only declared
     border-bottom-color), turning the text near-black against the dark
     footer so it visually vanished, leaving only a floating underline. */
  color: var(--cream);
  border-bottom-color: var(--olive);
}
.site-footer p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: #d8d4b8; }
.site-footer__phone {
  font: 700 22px/1.2 var(--font-display);
  color: var(--cream);
  text-decoration: none;
}
.site-footer__legal {
  max-width: var(--wrap);
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 251, 215, .16);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 14px;
  color: var(--muted);
}
.site-footer__legal a { color: var(--muted); }


/* ── Burger toggle ───────────────────────────────────────────────────────────
   Hidden on desktop, where the links are always visible. It is a real <button>
   with aria-expanded and aria-controls so screen readers announce its state. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 251, 215, .32);
  border-radius: 10px;
  cursor: pointer;
  flex: 0 0 auto;
}
.nav-toggle:hover { border-color: var(--cream); }

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top:  6px; }

/* Bars fold into a cross when the panel is open. */
.site-nav.is-open .nav-toggle__bars { background: transparent; }
.site-nav.is-open .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.site-nav.is-open .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after { transition: none; }
}

/* ── Focus visibility, applied everywhere ────────────────────────────────── */
.site-nav a:focus-visible,
.nav-toggle:focus-visible,
.site-footer a:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--olive);
  outline-offset: 2px;
}

@media (max-width: 820px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 940px) {
  .site-footer .site-footer__wordmark { font-size: 23px; }

  /* Single row: brand, phone CTA, burger. The links move into a dropdown panel
     so the phone number, which is the primary conversion action, stays visible
     without costing a second row.

     The breakpoint is 940px, not 700px, because the desktop row needs roughly
     850px for the mark, wordmark, four links and the phone button. Below that it
     wrapped to two rows and grew to 118px while --nav-h still said 78px, which
     left the subpage breadcrumbs 18px UNDERNEATH the fixed bar at tablet widths.
     Keep in sync with DESKTOP in assets/js/nav.js. */
  .site-nav__inner {
    flex-wrap: nowrap;
    min-height: 62px;
    padding: 8px 16px;
    gap: 10px;
  }
  .site-nav__brand img { height: 38px; }

  /* Mark only on phones. The wordmark stays in the accessibility tree rather
     than being display:none, so the brand link keeps its accessible name. */
  .site-nav__brand span {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .site-nav .btn { padding: 9px 15px; font-size: 14px; }

  /* DOM order is brand, burger, panel, phone. Visually the phone CTA should sit
     between the brand and the burger, so the burger is ordered last. */
  .nav-toggle { display: inline-flex; order: 3; }
  .site-nav .btn { order: 2; }

  /* The panel is display:none when closed, which also takes it out of the tab
     order and hides it from assistive technology. No aria-hidden juggling. */
  .site-nav__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ink);
    border-bottom: 1px solid rgba(255, 251, 215, .18);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .4);
  }
  .site-nav.is-open .site-nav__menu { display: block; }

  .site-nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 16px 14px;
  }
  .site-nav__links li { border-top: 1px solid rgba(255, 251, 215, .12); }
  .site-nav__links li:first-child { border-top: 0; }
  .site-nav__links a {
    display: block;
    padding: 14px 4px;
    font-size: 16px;
    border-bottom: 0;
  }
  .site-nav__links a:hover,
  .site-nav__links a:focus-visible { color: var(--olive); border-bottom: 0; }
  .site-nav__links a[aria-current="page"] { color: var(--olive); }

  .site-footer__inner { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 340px) {
  /* Measured: the 76px mark, the phone CTA and the burger need 323px of the
     375px row, so they fit comfortably down to about 340px. Below that the mark
     gives way first, because the phone CTA is the conversion path. */
  .site-nav__inner { min-height: 84px; }
  .site-nav__brand img { width: 64px; height: 63px; }
  .site-nav .btn { padding: 9px 12px; font-size: 13px; }
}