/*
 * responsive.css — global mobile/PWA layer.
 *
 * Loaded AFTER color_brand.css and the Tailwind CDN runtime. Uses `!important`
 * on a handful of single-class spacing utilities so the design-token defaults
 * (desktop: 64px gutters / 96px section padding) collapse to the mobile scale
 * defined in design.md (16px gutters / 48px section padding) on small screens —
 * without having to touch every template. New pages inherit the behaviour for
 * free as long as they use the brand spacing utilities.
 *
 * Also houses: mobile nav drawer, sticky mobile CTA bar, PWA standalone tweaks.
 */

/* ------------------------------------------------------------------ *
 * 1. Fluid section + gutter spacing (phones & small tablets)
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .px-margin-desktop {
    padding-left: var(--margin-mobile, 16px) !important;
    padding-right: var(--margin-mobile, 16px) !important;
  }
  .py-section-padding {
    padding-top: var(--section-padding-mobile, 48px) !important;
    padding-bottom: var(--section-padding-mobile, 48px) !important;
  }
  .pt-section-padding { padding-top: var(--section-padding-mobile, 48px) !important; }
  .pb-section-padding { padding-bottom: var(--section-padding-mobile, 48px) !important; }

  /* Large fixed vertical bands (stats etc.) breathe less on phones. */
  .py-20 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

  /* Big editorial radii feel oversized on a phone card. */
  .rounded-\[40px\] { border-radius: 1.5rem !important; }

  /* Prevent any element from forcing horizontal scroll on narrow screens. */
  img, video, iframe, svg { max-width: 100%; }
}

/* Tablet: ease the desktop gutter a touch so 64px doesn't crowd content. */
@media (min-width: 768px) and (max-width: 1023px) {
  .px-margin-desktop {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

/* ------------------------------------------------------------------ *
 * 1b. Heading / section-title scale (tablet + mobile)
 *
 * Tailwind generates `.text-headline-*` as fixed px (72 / 56 / 32 / 24),
 * so large display titles overflow small screens. The element/class
 * selectors in color_brand.css don't catch the utility, so override the
 * utilities here with `!important` (beats the CDN utility regardless of
 * stylesheet injection order). Desktop sizing is untouched.
 * ------------------------------------------------------------------ */
@media (max-width: 1023px) {  /* tablets */
  .text-headline-xl { font-size: 48px !important; line-height: 1.1 !important; }
  .text-headline-lg { font-size: 40px !important; line-height: 1.15 !important; }
  .text-headline-md { font-size: 28px !important; line-height: 1.25 !important; }
}
@media (max-width: 767px) {   /* phones */
  .text-headline-xl { font-size: 34px !important; line-height: 1.15 !important; }
  .text-headline-lg { font-size: 28px !important; line-height: 1.2  !important; }
  .text-headline-md { font-size: 24px !important; line-height: 1.3  !important; }
  .text-headline-sm { font-size: 20px !important; line-height: 1.35 !important; }
}

/* Kill horizontal overflow globally — common PWA papercut on phones. */
html, body { overflow-x: hidden; }

/* ------------------------------------------------------------------ *
 * 2. Mobile nav drawer
 * ------------------------------------------------------------------ */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  visibility: hidden;
  pointer-events: none;
}
.mobile-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}
.mobile-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mobile-drawer.is-open .mobile-drawer__overlay { opacity: 1; }

.mobile-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(86vw, 360px);
  background: var(--color-surface-white, #fff);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  /* Respect notches / Android nav bars in standalone PWA mode. */
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-drawer.is-open .mobile-drawer__panel { transform: translateX(0); }

.mobile-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  font-size: var(--font-body-lg-size, 18px);
  color: var(--color-on-surface, #1c1c18);
  border-bottom: 1px solid var(--color-divider, #efe6d2);
  transition: color 0.15s ease;
}
.mobile-drawer__link:hover,
.mobile-drawer__link[aria-current="page"] {
  color: var(--color-primary, #033a13);
}

.mobile-drawer__sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.mobile-drawer__group.is-expanded .mobile-drawer__sub { max-height: 600px; }
.mobile-drawer__group.is-expanded .mobile-drawer__chevron { transform: rotate(180deg); }
.mobile-drawer__chevron { transition: transform 0.25s ease; }
.mobile-drawer__sublink {
  display: block;
  padding: 10px 4px 10px 18px;
  font-size: var(--font-body-md-size, 16px);
  color: var(--color-on-surface-variant, #414940);
}
.mobile-drawer__sublink:hover { color: var(--color-primary, #033a13); }

/* Accordion parent row: the title is a real link; the chevron only toggles. */
.mobile-drawer__parent-link {
  flex: 1 1 auto;
  color: var(--color-on-surface, #1c1c18);
}
.mobile-drawer__parent-link:hover { color: var(--color-primary, #033a13); }
.mobile-drawer__expand {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: -10px -8px -10px 8px;   /* enlarge tap target without growing the row */
  border: 0;
  background: transparent;
  color: var(--color-on-surface-variant, #414940);
  cursor: pointer;
}

/* Lock body scroll while the drawer is open. */
body.drawer-open { overflow: hidden; }

/* ------------------------------------------------------------------ *
 * 3. Hamburger button (only shows below md)
 * ------------------------------------------------------------------ */
.mobile-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full, 9999px);
}
@media (min-width: 768px) {
  .mobile-nav-toggle { display: none; }
}

/* ------------------------------------------------------------------ *
 * 4. PWA standalone-display tweaks
 * ------------------------------------------------------------------ */
@media (display-mode: standalone) {
  /* Pad the fixed header for the status-bar inset when launched from home screen. */
  [data-site-header] { padding-top: env(safe-area-inset-top, 0); }
}

/* ------------------------------------------------------------------ *
 * 5. PWA install banner (big card / small FAB)
 *    Visibility is driven by [data-pwa-banner][data-state] from pwa.js.
 * ------------------------------------------------------------------ */
[data-pwa-banner] [data-pwa-big],
[data-pwa-banner] [data-pwa-reopen] { display: none; }
[data-pwa-banner][data-state="big"]   [data-pwa-big]    { display: block; }
[data-pwa-banner][data-state="small"] [data-pwa-reopen] { display: inline-flex; }

/* --- Big banner --- */
.pwa-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 9998;
  animation: pwa-rise 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.pwa-banner__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 42rem;
  margin: 0 auto;
  padding: 1rem;
  background: var(--color-surface-white, #fff);
  border: 1px solid var(--color-divider, #efe6d2);
  border-radius: 1rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.pwa-banner__accent {
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--color-primary, #033a13);
}
.pwa-banner__lead { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.pwa-banner__icon {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: rgba(3, 58, 19, 0.08);
  border-radius: 0.75rem;
  color: var(--color-primary, #033a13);
}
.pwa-banner__title {
  font-family: var(--font-family-display, serif);
  color: var(--color-primary, #033a13);
  font-size: 1rem;
  line-height: 1.2;
  margin: 0;
}
.pwa-banner__text {
  color: var(--color-text-muted, #5a5a5a);
  font-size: 0.8125rem;
  margin: 2px 0 0;
}
.pwa-banner__actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.pwa-banner__install {
  background: var(--color-primary, #033a13);
  color: #fff;
  border: 0;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-full, 9999px);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(3, 58, 19, 0.22);
  transition: background 0.2s ease, transform 0.1s ease;
}
.pwa-banner__install:hover { background: var(--color-secondary, #2d6c00); }
.pwa-banner__install:active { transform: scale(0.96); }
.pwa-banner__close {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--color-text-muted, #5a5a5a);
  border-radius: 0.5rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.pwa-banner__close:hover { background: var(--color-surface-container, #f0eee7); color: var(--color-on-surface, #1c1c18); }

/* Tighten the card on small phones; hide the icon tile + subtitle if cramped. */
@media (max-width: 400px) {
  .pwa-banner__icon { display: none; }
  .pwa-banner__install { padding: 0.55rem 1rem; }
}

/* --- Small FAB --- */
.pwa-fab {
  position: fixed;
  left: 1.25rem;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 9998;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  background: var(--color-primary, #033a13);
  color: #fff;
  border: 0;
  border-radius: var(--radius-full, 9999px);
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  animation: pwa-pop 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transition: transform 0.18s ease;
}
.pwa-fab:hover { transform: scale(1.1); }
.pwa-fab:active { transform: scale(0.95); }
.pwa-fab__tip {
  position: absolute;
  left: calc(100% + 0.5rem);
  white-space: nowrap;
  background: var(--color-inverse-surface, #31312c);
  color: #fff;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.pwa-fab:hover .pwa-fab__tip { opacity: 1; }

@keyframes pwa-rise {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pwa-pop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* ------------------------------------------------------------------ *
 * 6. Floating filter sheet (product list + jobs list)
 *
 * Desktop (>=1024px): the filter aside stays an in-flow sidebar — these
 * rules don't apply, so the page's own `lg:` classes govern it.
 * Below 1024px: the aside becomes a bottom sheet, hidden until opened by
 * a floating "Filters" button. Markup hooks:
 *   [data-filter-root]   wrapper that scopes the JS
 *   [data-filter-open]   floating button (the .filter-fab)
 *   [data-filter-sheet]  the aside / filter form container (.filter-sheet)
 *   [data-filter-overlay] dimmer behind the sheet
 *   [data-filter-close]  any close trigger inside the sheet
 * ------------------------------------------------------------------ */
.filter-fab { display: none; }
.filter-sheet__overlay { display: none; }
.filter-sheet__bar { display: none; }   /* mobile sheet header (title + close) */

@media (max-width: 1023px) {
  .filter-fab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 9000;
    padding: 0.75rem 1.5rem;
    border: 0;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-primary, #033a13);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    cursor: pointer;
  }
  .filter-fab:active { transform: translateX(-50%) scale(0.96); }

  .filter-sheet__overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9001;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .filter-sheet__overlay.is-open { opacity: 1; visibility: visible; }

  /* The aside itself becomes the sheet. !important beats Tailwind width/col
     utilities (w-full / lg:col-span-3 / sticky) that linger below lg. */
  .filter-sheet {
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    z-index: 9002;
    width: auto !important;
    max-height: 85vh;
    overflow-y: auto;
    margin: 0 !important;
    padding: 0 1rem calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--color-surface, #fcf9f2);
    border-radius: 1.25rem 1.25rem 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.22);
    transform: translateY(110%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .filter-sheet.is-open { transform: translateY(0); }

  /* Neutralise any sticky positioning on the inner form while in sheet mode. */
  .filter-sheet .sticky { position: static !important; top: auto !important; }

  /* Sticky sheet header with grab handle + close button. */
  .filter-sheet__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    margin: 0 -1rem 0.5rem;
    padding: 0.85rem 1rem;
    background: var(--color-surface, #fcf9f2);
    border-bottom: 1px solid var(--color-divider, #efe6d2);
    z-index: 1;
  }
  .filter-sheet__bar h3 {
    font-family: var(--font-family-display, serif);
    color: var(--color-primary, #033a13);
    font-size: 1.125rem;
    margin: 0;
  }
  .filter-sheet__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border: 0; border-radius: var(--radius-full, 9999px);
    background: transparent;
    color: var(--color-on-surface-variant, #414940);
    cursor: pointer;
  }

  body.filter-open { overflow: hidden; }
}

/* ------------------------------------------------------------------ *
 * 7. Header logo sizing + fixed-header spacer + hero fit
 * ------------------------------------------------------------------ */
/* Logo: smaller on phones (3rem), medium on tablet (4rem), full on desktop
   (keeps the markup's h-20 = 5rem). !important also wins over the scrolled
   state so the phone logo stays compact. */
@media (max-width: 767px)  { .site-header__logo { height: 3rem !important; } }
@media (min-width: 768px) and (max-width: 1023px) { .site-header__logo { height: 4rem !important; } }

/* Fixed-header height as a CSS var. header.js measures the real (unscrolled)
   header and overwrites --header-h at runtime; these are per-breakpoint
   fallbacks for first paint / no-JS. */
:root { --header-h: 96px; }
@media (min-width: 768px) and (max-width: 1023px) { :root { --header-h: 80px; } }
@media (max-width: 767px) { :root { --header-h: 64px; } }

/* Spacer that offsets the fixed header (replaces the old fixed h-24). */
.site-header-spacer { height: var(--header-h); flex: none; }

/* Hero fills exactly the viewport minus the header, so the video fits the
   window with nothing cut off below the fold. svh handles mobile browser
   chrome (address bar) better than vh. */
.hero-slider {
  /* Sits below the fixed header (spacer reserves --header-h above) and fills
     the rest of the viewport, with a taller floor on short screens. */
  height: calc(100vh - var(--header-h)) !important;
  height: calc(100svh - var(--header-h)) !important;
  min-height: 620px !important;
}

/* CLS guard: the YouTube API injects the player iframe at its default 640x360
   in normal flow before hero_slider.js can size it, which used to shove the
   page (top layout-shift culprit). Pin the mount div + iframe absolutely
   filling the slide from the moment they mount; coverIframe()'s inline styles
   still take over afterward to scale-to-cover. */
.hero-slide__player,
.hero-slide__player > div,
.hero-slide__player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}