/* Site-level styles: base elements and organisms (header, footer) that the
   design system doesn't ship yet. Tokens only: no raw colors (enforced by
   web/contract_test.go). Components live in components.css (vendored) and
   tokens in tokens.css (generated). */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
main:focus { outline: none; }

/* Static equivalents of the React Stack/Grid props (which set inline styles):
   Stack defaults to a column with gap space-4, Grid to gap space-6. */
.lr-stack { flex-direction: column; gap: var(--space-4); }
.lr-stack--row { flex-direction: row; flex-wrap: wrap; align-items: center; }
.lr-grid { gap: var(--space-6); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--background) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: var(--space-16);
}
.site-header__actions { display: flex; align-items: center; gap: var(--space-2); }
.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-1); }
.site-nav__link {
  display: inline-flex; align-items: center; min-height: var(--space-10);
  padding: 0 var(--space-3); border-radius: var(--radius-md);
  color: var(--muted-foreground); font-weight: var(--weight-medium); text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.site-nav__link:hover { color: var(--foreground); background: var(--muted); }
.site-nav__link[aria-current="page"] { color: var(--foreground); box-shadow: inset 0 -2px 0 var(--primary); }
.site-nav__link:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
/* Narrow screens: the inline nav moves into the Menu sheet. */
.site-header .site-nav { display: none; }
@media (min-width: 768px) {
  .site-header .site-nav { display: block; margin-right: auto; }
  .site-header__menu { display: none; }
}
#site-menu .site-nav__list { flex-direction: column; }
#site-menu .site-nav__link { width: 100%; font-size: var(--text-lg); }
/* Very narrow phones: the mark alone, so the logo and both buttons fit. The
   link keeps its accessible name ("Ladybug Repairs, home"). */
@media (max-width: 379px) {
  .site-header .lr-logo__text { display: none; }
}

/* Footer: brand, contact and pages stack on phones and sit side by side from
   768px; the copyright and legal links share the bottom row. */
.site-footer { border-top: 1px solid var(--border); }
.site-footer__inner { gap: var(--space-6); }
.site-footer__grid { display: grid; gap: var(--space-8); }
.site-footer__col { gap: var(--space-3); }
.site-footer__brand { gap: var(--space-3); }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.site-footer__list--inline { flex-direction: row; flex-wrap: wrap; column-gap: var(--space-4); }
/* Footer links are tap targets: at least 32px tall. */
.site-footer__list .lr-link { display: inline-flex; align-items: center; min-height: var(--space-8); font-size: var(--text-sm); }
.site-footer__hours { margin: 0; display: grid; gap: var(--space-2); }
.site-footer__hours dd { margin: 0; }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); }
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; }
}

/* Not found and error pages */
.error-page { gap: var(--space-6); align-items: flex-start; }

/* Quote form (/quote and the home page) */
.quote-page { gap: var(--space-6); }
.quote-form { gap: var(--space-5); }
/* The honeypot stays in the form for bots but off screen for people. */
.quote-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* htmx: swap a submit button's label for a spinner while the request runs */
.btn-label { display: inline-flex; align-items: center; gap: var(--space-2); }
.btn-busy { display: none; align-items: center; gap: var(--space-2); }
.htmx-request .btn-busy { display: inline-flex; }
.htmx-request .btn-label { display: none; }

/* Temporary /showcase pages (development only; delete with the showcase) */
.showcase-head { gap: var(--space-2); margin-bottom: var(--space-8); }
.showcase-example {
  display: grid; gap: var(--space-4);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border);
}
.showcase-index { list-style: none; margin: 0; padding: 0; }
.showcase-icons {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
}
.showcase-icons li { display: grid; justify-items: center; gap: var(--space-2); text-align: center; }

/* Component CSS sets display on elements (e.g. .lr-image__fallback is a grid),
   which would beat the UA [hidden] rule. Keep hidden meaning hidden. */
[hidden] { display: none !important; }

/* Cards. The design system's header has top padding only (it expects content
   or a footer below it); a header-only card needs the bottom padding too. */
.lr-card > .lr-card__header:last-child { padding-bottom: var(--space-6); }

/* Interactive cards: the card's one link (.lr-card__link) stretches over the
   whole card, so clicking anywhere follows it. Still a single link for
   keyboard and screen readers; the card shows the focus ring (focus-within). */
.lr-card--interactive { position: relative; }
.lr-card__link { color: inherit; text-decoration: none; }
.lr-card__link::after { content: ""; position: absolute; inset: 0; }
.lr-card__link:focus-visible { outline: none; }
.showcase-index { margin-bottom: var(--space-16); }

/* Accordion and Collapsible on native <details>. The design system keys
   its open state on .is-open; the open attribute plays that role here, so
   they work with no JavaScript. */
summary.lr-accordion__trigger, summary.lr-collapsible__trigger { list-style: none; }
summary.lr-accordion__trigger::-webkit-details-marker,
summary.lr-collapsible__trigger::-webkit-details-marker { display: none; }
details[open] > .lr-accordion__panel { grid-template-rows: 1fr; }
details[open] > summary .lr-accordion__chev { transform: rotate(180deg); }
.lr-collapsible__label--open { display: none; }
details[open] > summary > .lr-collapsible__label:has(+ .lr-collapsible__label--open) { display: none; }
details[open] > summary > .lr-collapsible__label--open { display: inline; }
.showcase-tooltips { padding-top: var(--space-12); }

/* Popover and DropdownMenu on the native popover API. Open popovers live in
   the top layer, so the design system's absolute offsets don't apply:
   app.js places them next to their trigger with top/left. */
.lr-pop[popover] { position: fixed; inset: auto; margin: 0; translate: none; }
/* Home: hero */
.home-hero__grid { display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 1024px) {
  .home-hero__grid { grid-template-columns: 1.05fr 1fr; gap: var(--space-16); }
}
.home-hero__copy { gap: var(--space-6); align-items: flex-start; }
.home-hero__trust {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  color: var(--muted-foreground);
}
.home-hero__trust li { display: inline-flex; align-items: center; gap: var(--space-2); }
.home-hero__media { position: relative; padding: 0 0 var(--space-10) var(--space-10); }
.home-hero__status {
  position: absolute; left: 0; bottom: 0; width: min(340px, 90%);
  padding: var(--space-5); display: grid; gap: var(--space-3);
  box-shadow: var(--shadow-xl);
}
.home-hero__status-head { display: flex; justify-content: space-between; gap: var(--space-3); }
.home-hero__status-title { font-weight: var(--weight-semibold); }