/* Budd Baer Cares — filter chips, partner feature, mobile nav, drawers and sheets.
   Part 2 of 3 of the public stylesheet, split because the single file was
   53,446 bytes against a 40,960-byte ceiling. CASCADE ORDER IS LOAD-BEARING:
   later parts override earlier ones, so these must be linked in the order
   declared by SITE_CSS in src/lib/assets.js — the one place that order lives. */

/* ------------------------------------------------------------------
   Public filter chips (program filter on Our Impact).
   These previously reused the console's .tabs class, which is defined in
   admin.css and never loaded on the public site — so they rendered as a
   run-together line of bare links.
   ------------------------------------------------------------------ */

.filter-bar {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 2rem; padding: 0; list-style: none;
}
.filter-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--text); text-decoration: none;
  font-size: .9rem; font-weight: 600; line-height: 1.4;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.filter-chip:hover { border-color: var(--brand-600); color: var(--text); background: var(--surface-2); }
.filter-chip[aria-current="page"] {
  background: var(--brand-700); border-color: var(--brand-700); color: #fff;
}
.filter-chip[aria-current="page"]:hover { background: var(--brand-800); color: #fff; }
.filter-chip .chip-count {
  font-size: .78rem; font-weight: 700; opacity: .75;
  padding: 0 .35rem; border-radius: 999px; background: rgba(0, 0, 0, .08);
}
.filter-chip[aria-current="page"] .chip-count { background: rgba(255, 255, 255, .22); opacity: 1; }
:root[data-theme="dark"] .filter-chip .chip-count { background: rgba(255, 255, 255, .12); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .filter-chip .chip-count { background: rgba(255, 255, 255, .12); }
}
.filter-bar-label {
  width: 100%; margin: 0 0 .1rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-mute);
}

/* ------------------------------------------------------------------
   Share the Love hometown partner feature.
   ------------------------------------------------------------------ */

.partner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent-600);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}
.partner-head { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.partner-logo {
  /* Partner marks are often wide wordmarks, so constrain the height and let
     the width follow rather than forcing them into a square. */
  height: 56px; width: auto; max-width: min(100%, 280px);
  object-fit: contain; flex: none;
}
.partner-eyebrow {
  margin: 0; font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-600);
}
:root[data-theme="dark"] .partner-eyebrow { color: #f4a1ac; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .partner-eyebrow { color: #f4a1ac; }
}
.partner-quote {
  margin: 0 0 1.25rem; padding: .85rem 0 .85rem 1.25rem;
  border-left: 3px solid var(--accent-600);
  font-family: var(--font-display); font-size: 1.12rem;
  line-height: 1.5; color: var(--text);
}
.partner-body { color: var(--text-soft); max-width: var(--maxw-text); }
.partner-prog {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.1rem;
}
.partner-prog h3 { font-size: 1rem; margin: 0 0 .25em; }
.partner-involve {
  margin: 1.5rem 0 0; padding: .9rem 1.1rem;
  background: var(--surface-sunk); border-radius: var(--radius);
  color: var(--text-soft); font-size: .95rem;
}

/* The sign-in card sits on --surface, which flips with the theme, so it shows
   whichever logo variant reads against the current background. The header does
   not need this: it is navy in both themes and always uses the white art. */
.brand-mark-adaptive { position: relative; }
.brand-mark-adaptive img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-mark-adaptive .logo-on-dark { display: none; }
:root[data-theme="dark"] .brand-mark-adaptive .logo-on-light { display: none; }
:root[data-theme="dark"] .brand-mark-adaptive .logo-on-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-mark-adaptive .logo-on-light { display: none; }
  :root:not([data-theme="light"]) .brand-mark-adaptive .logo-on-dark { display: block; }
}

/* Ways the dealership shows up for the partner charity. */
.partner-involve-block {
  margin-top: 1.75rem; padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.partner-involve-block h3 { font-size: 1.05rem; margin: 0 0 1rem; }
.partner-ways { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.partner-ways li {
  padding: 1rem 1.15rem; border-radius: var(--radius);
  background: var(--surface-sunk); border-left: 3px solid var(--accent-600);
}
.partner-ways b { display: block; margin-bottom: .25rem; color: var(--text); }
.partner-ways span { display: block; font-size: .95rem; }

/* ==================================================================
   Mobile navigation.

   The nav previously wrapped into three or four ragged rows on a phone,
   consuming a fifth of the screen — and because the header is sticky, it
   followed you down the whole page. Below the breakpoint it now collapses
   behind a menu button.

   Progressive enhancement: the button ships with the `hidden` attribute and
   only JavaScript removes it, so with JS off nobody sees a control that does
   nothing — the nav simply stays open and wraps, as it did before.
   ================================================================== */

.header-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }

.nav-toggle {
  /* 44px is the minimum comfortable touch target. */
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius);
  color: inherit; cursor: pointer; padding: 0;
}
.nav-toggle:hover { background: rgba(255, 255, 255, .2); }
.nav-toggle-bars { display: grid; gap: 4px; width: 20px; }
.nav-toggle-bars span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: currentColor; transition: transform .16s ease, opacity .16s ease;
}
[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* The compact call to action only exists in the collapsed bar. */
.nav-cta-compact { display: none; }

@media (max-width: 900px) {
  .header-inner { min-height: 60px; flex-wrap: nowrap; gap: .5rem; }
  /* Nothing in the bar may wrap — a two-line brand or button doubles the
     height of a header that is stuck to the top of every page. */
  .brand { min-width: 0; }
  .brand-text { min-width: 0; }
  .brand-text b { font-size: 1rem; white-space: nowrap; }
  .brand-text span { display: none; }
  .brand-mark { width: 36px; height: 36px; }
  .nav-cta-compact { white-space: nowrap; }
  .site-header .header-actions { flex: none; }

  /* Only once JS has taken over does the bar become a collapsed one. */
  .js .nav-cta-compact { display: inline-flex; padding: .6rem .85rem; font-size: .88rem; }
  .js .nav-cta-inline { display: none; }

  .js .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    margin: 0; padding: .5rem .75rem 1rem;
    flex-direction: column; align-items: stretch; gap: .15rem;
    background: var(--brand-900);
    border-top: 1px solid rgba(255, 255, 255, .14);
    box-shadow: var(--shadow-lg);
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .js .nav[hidden] { display: none; }

  .js .nav a {
    padding: .85rem 1rem;          /* ~48px tall */
    border-radius: var(--radius);
    font-size: 1rem; opacity: 1;
  }
  .js .nav a + a { border-top: 1px solid rgba(255, 255, 255, .08); }
  .js .nav a[aria-current="page"] { background: rgba(255, 255, 255, .16); }
  .js .nav .theme-toggle {
    width: 100%; height: 48px; border-radius: var(--radius);
    margin: .5rem 0 0; justify-content: center;
  }
  .site-header { position: sticky; }
}

@media (min-width: 901px) {
  /* Desktop keeps the single-row nav; the toggle is irrelevant there. */
  .nav-toggle { display: none; }
  .header-actions { margin-left: 0; }
}

/* On the narrowest phones the bar cannot hold the wordmark and the full call
   to action. The logo already identifies the site, and getting someone to the
   form matters more than repeating the name, so the text goes and the button
   keeps its full label. */
@media (max-width: 430px) {
  .site-header .brand-text { display: none; }
}

/* ------------------------------------------------------------------
   iOS Safari zooms the whole page in when you focus a form control whose
   font-size is below 16px, and it does not zoom back out. On a seventeen
   field application filled from a phone that is punishing, so every control
   goes to 16px at phone widths. Desktop keeps the tighter sizing.
   ------------------------------------------------------------------ */

@media (max-width: 900px) {
  input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
  input[type="number"], input[type="password"], input[type="search"], input[type="url"],
  textarea, select {
    font-size: 16px;
    padding: .7rem .8rem;
  }
  input[type="file"] { font-size: 16px; padding: .7rem; }

  /* Roomier tap targets and a little more air between questions. */
  .field { margin-bottom: 1.75rem; }
  .choice { padding: .8rem .9rem; }
  .choice input { width: 20px; height: 20px; }
  .form-actions .btn { width: 100%; justify-content: center; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-card { padding: 1.15rem; }
  fieldset legend { font-size: 1rem; }
}

/* ==================================================================
   Drawers and sheets.

   A dropdown panel is fine for a handful of links, but it is the wrong
   shape for anything long or task-shaped: on a phone the console's
   review form sat almost four screens below the fold. These give the
   nav a side drawer and put long forms in a bottom sheet that opens
   over the page instead of pushing it down.

   Everything degrades: the sheets are <details>, so with JavaScript off
   they are plain inline disclosures, and the drawer falls back to the
   dropdown panel.
   ================================================================== */

.scrim {
  position: fixed; inset: 0;
  /* MUST stay below every sticky/positioned ancestor that a drawer or sheet
     lives inside. .site-header (30), .admin-header (40) and .review-sheet (30)
     each create a stacking context, so a panel nested in one cannot escape it
     however high its own z-index is — at z-index 60 this scrim rendered over
     the drawer and swallowed every tap, closing the menu instead of following
     the link. Keep this the lowest of the numbers above. */
  z-index: 20;
  background: rgba(6, 14, 24, .55);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.scrim[data-open] { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .scrim, .js .nav, .js .admin-nav, .sheet-panel { transition: none !important; }
}

/* ---- side drawer (navigation) ---- */

@media (max-width: 900px) {
  .js .nav {
    position: fixed; top: 0; right: 0; left: auto; bottom: 0;
    z-index: 70;
    width: min(86vw, 340px);
    max-height: none; height: 100dvh;
    padding: 1rem .9rem calc(1rem + env(safe-area-inset-bottom));
    border-top: 0; border-left: 1px solid rgba(255, 255, 255, .12);
    transform: translateX(100%);
    transition: transform .22s cubic-bezier(.2, .7, .3, 1);
    overscroll-behavior: contain;
  }
  /* Kept in the layout (not display:none) so the transition can run and so
     focus can be moved into it before it finishes opening. */
  .js .nav[hidden] { display: flex; visibility: hidden; }
  .js .nav[data-open] { transform: translateX(0); visibility: visible; }

  .js .nav::before {
    content: "Menu";
    display: block; padding: .4rem .75rem 1rem;
    font-size: .74rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--brand-300);
  }
}

/* ---- bottom sheet (long forms) ---- */

.sheet-trigger { display: none; }
.sheet > .sheet-panel { display: block; }

@media (max-width: 1080px) {
  .js .sheet-trigger {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; min-height: 48px; padding: .7rem 1rem;
    background: var(--accent-600); color: #fff;
    border-radius: var(--radius); cursor: pointer; list-style: none;
    font-weight: 600; font-size: .95rem;
  }
  .js .sheet-trigger::-webkit-details-marker { display: none; }
  .js .sheet-trigger.is-quiet {
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border);
    justify-content: space-between;
  }

  .js .sheet > .sheet-panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    max-height: 85dvh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-lg);
    padding: .5rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform .24s cubic-bezier(.2, .7, .3, 1);
  }
  .js .sheet[open] > .sheet-panel { transform: translateY(0); }

  /* Grab handle, so it reads as a sheet rather than a stuck panel. */
  .js .sheet > .sheet-panel::before {
    content: ""; display: block; width: 40px; height: 4px; margin: .35rem auto 1rem;
    border-radius: 999px; background: var(--border-strong);
  }
  .js .sheet > .sheet-panel .card {
    border: 0; box-shadow: none; padding: 0; background: transparent;
  }
}

/* An off-canvas drawer sits outside the viewport when closed. Chromium does
   not extend the scrollable area to reach it, but iOS Safari can, which shows
   up as a page that scrolls sideways into empty space. So clip the horizontal
   axis — but carefully, because the obvious spelling of this is a trap.

   `overflow-x: hidden` forces the other axis to compute to `auto`, which turns
   the element into a scroll container. Putting it on `html` AND `body`, as this
   rule used to, creates two nested scrollports: WebKit then measures sticky
   offsets and scroll extent against the inner one, which reads as a page that
   stops short, repaints the bottom oddly, or refuses to scroll its full depth.

   `overflow-x: clip` clips without ever creating a scroll container, so the
   sticky header keeps working and the nesting problem cannot recur no matter
   which elements carry it — which is why both are named here, rather than
   relying on the root's overflow propagating to the viewport, which engines
   have been inconsistent about for `clip`. The `hidden` fallback below is on
   `html` alone, so on engines predating clip (Safari < 16) there is still only
   one scrollport. */
html { overflow-x: hidden; }
@supports (overflow-x: clip) {
  html { overflow-x: clip; }
  body { overflow-x: clip; }
}

/* The drawer covers the toggle that opened it, so it carries its own close
   control rather than relying on the scrim strip or the Escape key. */
.drawer-close { display: none; }

@media (max-width: 900px) {
  .js .nav .drawer-close {
    display: grid; place-items: center;
    position: absolute; top: .55rem; right: .75rem;
    width: 44px; height: 44px; padding: 0;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--radius);
    color: #fff; font-size: 1.05rem; cursor: pointer;
  }
  .js .nav .drawer-close:hover { background: rgba(255, 255, 255, .2); }
  .js .nav { position: fixed; }
}