/* =====================================================
   SITE HEADER / NAVIGATION

   Breakpoint: 1100px. The full desktop row (branding + six nav
   links + call button) genuinely needs about 1080px; the earlier
   900px breakpoint left a squeezed desktop nav wrapping and
   overflowing on tablets and constrained containers. Below 1100px
   the nav becomes a burger-driven overlay and the call button
   collapses to an icon.

   Nothing in this header is allowed to overlap or overflow: the
   branding text truncates with an ellipsis rather than wrapping,
   every fixed-size element is flex-shrink: 0, and nav labels are
   nowrap.
===================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  width: 100%;
  background: var(--parchment);
  border-bottom: 1px solid var(--line);
}

/* Sit below the WordPress admin bar for logged-in users. Core sets
   --wp-admin--admin-bar--height on <html> whenever the bar renders. */
body.admin-bar .site-header {
  top: var(--wp-admin--admin-bar--height, 32px);
}

.site-header__bar {
  display: flex;
  flex-wrap: wrap; /* last-resort: if ever squeezed again, rows wrap tidily instead of overlapping */
  row-gap: 8px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  /* Vertical only. A shorthand here (padding: 14px 0) reset the horizontal
     padding .container supplies, which pushed the header flush to the screen
     edge on anything narrower than the 1180px max-width. */
  padding-top: 14px;
  padding-bottom: 14px;
  min-height: 78px;
}

/* ---------- Branding ---------- */
.site-branding {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  min-width: 0; /* lets the text column shrink so it can truncate */
}

.site-branding img.custom-logo {
  height: 46px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.site-branding__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--brick);
  border-radius: 50%;
  color: var(--brick);
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  flex-shrink: 0;
}

/* Truncate rather than wrap. A wrapping site title was what drove the
   logo into the nav on constrained layouts. */
.site-branding__text {
  min-width: 0;
  overflow: hidden;
  line-height: 1.15;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.site-branding__text small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Right-hand actions ---------- */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.site-header__cta {
  white-space: nowrap;
}

/* ---------- Menu toggle ---------- */
.menu-toggle {
  display: none;
  background: transparent;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  padding: 9px 11px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  flex-shrink: 0;
}

.menu-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
}

.menu-toggle .menu-toggle__close,
.menu-toggle[aria-expanded="true"] .menu-toggle__open {
  display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__close {
  display: block;
}

/* ---------- Navigation: desktop ---------- */
.primary-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: 2px;
}

.primary-nav a {
  display: inline-block;
  padding: 10px 13px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-soft);
  border-radius: var(--radius);
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}

.primary-nav a:hover,
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a,
.primary-nav .current-menu-ancestor > a {
  color: var(--brick);
  background: var(--parchment-deep);
}

/*
 * The nav's generic link colour must not repaint the call button.
 * `.primary-nav a` is (0,1,1) and outranks `.btn-primary` at (0,1,0), so the
 * phone button inside the mobile overlay rendered as --ink-soft (#45536B) on
 * --brick (#1E3A5F): a measured 1.48:1, effectively unreadable. These selectors
 * are (0,2,1) and restore the button's own colours in both states.
 */
.primary-nav a.btn-primary,
.primary-nav a.btn-primary:hover {
  color: var(--white);
  background: var(--brick);
}

.primary-nav a.btn-primary:hover {
  background: var(--brick-deep);
}

.primary-nav a.btn-outline {
  color: var(--ink);
  background: transparent;
}

.primary-nav a.btn-outline:hover {
  color: var(--white);
  background: var(--ink);
}

/* The phone link inside the nav exists for the mobile overlay only. */
.primary-nav > .btn {
  display: none;
}

/* ---------- Below the breakpoint ---------- */
@media (max-width: 1099px) {
  .menu-toggle {
    display: inline-flex;
  }

  /* Call button collapses to a round icon; the screen-reader name in the
     markup keeps it accessible. */
  .site-header__cta {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }

  .site-header__cta-label {
    display: none;
  }

  /* Overlay nav. visibility (not just opacity) removes the hidden links
     from the keyboard tab order; the transition delays visibility on close
     so the fade still shows. */
  .primary-nav {
    position: fixed;
    inset: 0;
    top: var(--header-height);
    background: var(--parchment);
    flex-direction: column;
    align-items: stretch;
    padding: 20px 28px 40px;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 490;
  }

  body.admin-bar .primary-nav {
    top: calc(var(--header-height) + var(--wp-admin--admin-bar--height, 32px));
  }

  .primary-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
  }

  .primary-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .primary-nav a {
    padding: 16px 6px;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--line);
    white-space: normal;
  }

  .primary-nav > .btn {
    display: inline-flex;
    margin-top: 18px;
    justify-content: center;
  }
}

/* Very small screens: the branding carries the load, the call action
   lives inside the menu. */
@media (max-width: 480px) {
  .site-header__cta {
    display: none;
  }

  .site-branding {
    font-size: 1.05rem;
  }

  .site-header__bar {
    gap: 12px;
  }
}

/* =====================================================
   SITE FOOTER
===================================================== */
.site-footer {
  background: var(--ink);
  color: var(--parchment);
}

.site-footer a {
  color: var(--parchment);
}

.site-footer__top {
  /* Vertical only - see the note on .site-header__bar. */
  padding-top: 64px;
  padding-bottom: 48px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 48px;
}

@media (max-width: 780px) {
  .site-footer__top {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.site-footer__brand {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin-bottom: 14px;
  color: var(--white);
}

.site-footer__tagline {
  color: rgba(249, 248, 244, 0.65);
  max-width: 34ch;
}

.site-footer h4 {
  color: var(--brass-light);
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.site-footer__list li {
  margin-bottom: 11px;
  color: rgba(249, 248, 244, 0.82);
  line-height: 1.5;
}

/* WCAG 2.2 SC 2.5.8 Target Size (Minimum) asks for 24x24 CSS px. These list and
   legal links measured 20-23px tall, so they get an explicit floor. inline-flex
   keeps them on the text baseline while the min-height applies. */
.site-footer__list a,
.site-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.site-footer__list a:hover {
  color: var(--brass-light);
}

.site-footer__bottom {
  border-top: 1px solid rgba(249, 248, 244, 0.14);
  /* Vertical only - see the note on .site-header__bar. */
  padding-top: 26px;
  padding-bottom: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: rgba(249, 248, 244, 0.55);
}

/* Was 0.45 alpha, which measured 3.97:1 and failed AA for this text size.
   0.65 measures 6.74:1. */
.site-footer__legal {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: center;
}

.site-footer__legal a {
  color: rgba(249, 248, 244, 0.72);
  text-decoration: underline;
  text-decoration-color: rgba(249, 248, 244, 0.3);
  text-underline-offset: 3px;
}

.site-footer__legal a:hover {
  color: var(--brass-light);
  text-decoration-color: var(--brass-light);
}

.site-footer__disclaimer {
  padding: 22px 0 0;
  font-size: 0.82rem;
  line-height: 1.65;
  color: rgba(249, 248, 244, 0.65);
  max-width: 90ch;
}

/* =====================================================
   HERO
===================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--parchment);
  border-bottom: 1px solid var(--line);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 48px;
  /* Vertical only - see the note on .site-header__bar. */
  padding-top: clamp(48px, 7vw, 92px);
  padding-bottom: clamp(56px, 8vw, 100px);
}

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
}

.hero__eyebrow-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.hero h1 {
  margin-bottom: 22px;
}

.hero__lede {
  font-size: 1.18rem;
  color: var(--ink-soft);
  max-width: 52ch;
  margin-bottom: 34px;
}

.hero__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Sizes to the zoning-map image now rather than forcing a square box. The old
   aspect-ratio: 1/1 left a tall empty gap under the 16:9 map. */
.hero__art {
  position: relative;
  max-width: 520px;
  margin-left: auto;
  align-self: center;
}

@media (max-width: 900px) {
  .hero__art {
    margin: 0 auto;
    max-width: 340px;
  }
}

/* Page header, used on interior pages (archives / About / History / Contact) */
.page-header {
  background: var(--parchment-deep);
  border-bottom: 1px solid var(--line);
  padding: clamp(44px, 6vw, 72px) 0;
}

.page-header__eyebrow {
  margin-bottom: 14px;
}

.page-header p {
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: 1.08rem;
}

.breadcrumbs {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-bottom: 18px;
  letter-spacing: 0.01em;
}

.breadcrumbs a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--line);
}

.breadcrumbs a:hover {
  color: var(--brick);
}

.breadcrumbs .sep {
  margin: 0 8px;
  opacity: 0.5;
}