/* ClairHydra site chrome: the shared header + footer (partials/header.html, partials/footer.html).

   Plain CSS on purpose, not Tailwind utilities: the Tailwind Play CDN is itself a script, so
   utility-styled chrome would flash unstyled and would be completely unstyled with JS off.
   This file is linked from inside the header partial, so every page gets it without a head edit.

   --nav-h is the header height (64px mobile / 80px from 1024px up). Anything that has to sit
   under the sticky header reads it instead of hard-coding a number: the Home pin-and-cover cards
   (top + height), the Home hero height, and scroll-padding-top for in-page anchors below. */

:root {
  --nav-h: 64px;
  --logo-h: 36px;
}
@media (min-width: 1024px) {
  :root {
    --nav-h: 80px;
    --logo-h: 40px;
  }
}
@media (min-width: 1280px) {
  :root {
    --logo-h: 48px;
  }
}

html {
  /* In-page anchors (#dealer-inquiry, #site-assessment) must land below the sticky bar. */
  scroll-padding-top: var(--nav-h);
}
/* Scroll lock while the mobile menu is open. `html` ONLY: also setting overflow on `body` makes
   body its own scroll container, and the sticky header then sticks to that (which never
   scrolls) instead of the viewport, so the header scrolls out of view behind the open menu. */
html.nav-open {
  overflow: hidden;
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  box-sizing: border-box;
  min-height: var(--nav-h);
  background: #f5f8fa;
  /* Always present (transparent) so the scrolled state doesn't change the height by 1px. */
  border-bottom: 1px solid transparent;
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.site-header.is-scrolled {
  border-bottom-color: rgba(21, 60, 64, 0.14);
  box-shadow: 0 8px 24px -14px rgba(21, 60, 64, 0.35);
}

.site-header__bar {
  box-sizing: border-box;
  display: flex;
  /* Wraps only in the no-JS mobile fallback (link row under the logo); see .site-nav below. */
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  min-height: calc(var(--nav-h) - 1px);
  max-width: 80rem;
  margin: 0 auto;
  padding: 8px 16px;
}
@media (min-width: 1024px) {
  .site-header__bar {
    flex-wrap: nowrap;
    gap: 32px;
    padding: 0 24px;
  }
}

.site-logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  border-radius: 6px;
}
.site-logo img {
  display: block;
  width: auto;
  max-width: none;
  height: var(--logo-h);
}

/* Hamburger: hidden by default so a visitor without working JS never sees a dead button. */
.site-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 -8px 0 auto;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #153c40;
  cursor: pointer;
}
.site-nav-toggle__bars {
  position: relative;
  display: block;
  width: 22px;
  height: 14px;
}
.site-nav-toggle__bars span {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s ease, top 0.25s ease, opacity 0.2s ease;
}
.site-nav-toggle__bars span:nth-child(1) { top: 0; }
.site-nav-toggle__bars span:nth-child(2) { top: 6px; }
.site-nav-toggle__bars span:nth-child(3) { top: 12px; }
.site-nav-toggle[aria-expanded='true'] .site-nav-toggle__bars span:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}
.site-nav-toggle[aria-expanded='true'] .site-nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}
.site-nav-toggle[aria-expanded='true'] .site-nav-toggle__bars span:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

/* Default (no JS, below 1024px): a plain wrapped row of links under the logo. */
.site-nav {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
  padding-bottom: 8px;
}
.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  position: relative;
  display: inline-block;
  padding: 10px 2px;
  border-radius: 4px;
  color: #2c3e50;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
/* Underline: animates in on hover/focus and stays on for the current page. */
.site-nav__link::after {
  content: '';
  position: absolute;
  right: 2px;
  bottom: 4px;
  left: 2px;
  height: 2px;
  background: #f68c11;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link[aria-current='page']::after {
  transform: scaleX(1);
}

/* The one orange control in the chrome. Dark teal label, NOT white: white on #F68C11 is ~2.3:1
   (fails AA); #153C40 on #F68C11 clears 4.5:1. Same pill is reused in the footer. */
.site-cta {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 9999px;
  background: #f68c11;
  color: #153c40;
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.site-cta:hover {
  background: #f9a038;
}
.site-cta:active {
  transform: translateY(1px);
}

.site-header a:focus-visible,
.site-header button:focus-visible {
  outline: 2px solid #215d63;
  outline-offset: 3px;
}
.site-header .site-cta:focus-visible {
  outline: 3px solid #153c40;
  outline-offset: 3px;
}

/* Desktop: logo left, links centred in the free space, CTA far right. */
@media (min-width: 1024px) {
  .site-nav {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 32px;
    padding-bottom: 0;
  }
  .site-nav__list {
    flex-wrap: nowrap;
    gap: clamp(20px, 2.4vw, 40px);
    margin-inline: auto;
  }
}

/* No JS (or nav.js failed to load) below 1024px: the link row wraps to ~190px, far too tall to
   leave pinned over a phone screen, so the bar just scrolls away with the page. */
@media (max-width: 1023.98px) {
  html:not(.js) .site-header {
    position: static;
  }
}

/* Mobile with JS: hamburger + full-screen panel under the bar. `html.js` is set by an inline
   script in the partial before first paint; if nav.js then fails to load, that class is removed
   and everything above (the static link row) takes over again. */
@media (max-width: 1023.98px) {
  html.js .site-nav-toggle {
    display: inline-flex;
  }
  html.js .site-nav {
    position: fixed;
    top: var(--nav-h);
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 24px;
    padding: 8px 24px calc(24px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #f5f8fa;
  }
  html.js .site-nav.is-open {
    display: flex;
  }
  html.js .site-nav__list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
  }
  html.js .site-nav__list li {
    border-bottom: 1px solid rgba(21, 60, 64, 0.12);
  }
  html.js .site-nav__link {
    padding: 16px 2px;
    font-size: 1.75rem;
  }
  html.js .site-nav__link::after {
    bottom: 10px;
  }
  html.js .site-nav .site-cta {
    width: 100%;
    min-height: 56px;
    font-size: 18px;
  }
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  background: #153c40;
  color: #f5f8fa;
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15.5px;
  line-height: 1.5;
}
.site-footer a {
  color: inherit;
  text-decoration: none;
}
.site-footer a:hover,
.site-footer a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.site-footer a:focus-visible {
  border-radius: 3px;
  outline: 2px solid #f5f8fa;
  outline-offset: 3px;
}
/* Beat `.site-footer a { color: inherit }` (higher specificity than plain `.site-cta`). */
.site-footer a.site-cta {
  color: #153c40;
  text-decoration: none;
}
.site-footer a.site-cta:focus-visible {
  outline-color: #f5f8fa;
}

.site-footer__inner {
  box-sizing: border-box;
  max-width: 80rem;
  margin: 0 auto;
  padding: 56px 24px 0;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}
@media (min-width: 640px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
  }
}
@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr 1.7fr;
    gap: 48px;
  }
}

.site-footer__logo {
  display: inline-block;
}
.site-footer__logo img {
  display: block;
  width: auto;
  max-width: none;
  height: 44px;
}
.site-footer__tagline {
  margin: 16px 0 0;
  font-size: 16px;
  font-weight: 500;
}
.site-footer .site-cta {
  margin-top: 24px;
}

.site-footer__title {
  margin: 0 0 16px;
  color: #bcced0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}
.site-footer__list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__list a {
  display: inline-block;
  padding: 4px 0;
  font-weight: 500;
}

.site-footer address {
  display: grid;
  gap: 12px;
  font-style: normal;
}
.site-footer address p {
  margin: 0;
}
.site-footer__stack {
  display: grid;
  gap: 2px;
}
.site-footer__nowrap {
  white-space: nowrap;
}

.site-footer__bar {
  margin-top: 56px;
  padding: 20px 0 28px;
  border-top: 1px solid rgba(245, 248, 250, 0.16);
  color: rgba(245, 248, 250, 0.78);
  font-size: 14px;
}
.site-footer__bar p {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-nav__link::after,
  .site-nav-toggle__bars span,
  .site-cta {
    transition: none;
  }
}