/* ==========================================================================
   A Doggie Do — mobile-first responsive layer
   --------------------------------------------------------------------------
   PART OF THE "LOCAL LAYER". Re-apply after every Claude Design re-import.
   See ENGINE/site/README.md → "The local layer".

   WHY THIS FILE EXISTS
   The Claude Design export styles everything with inline `style="..."`
   attributes and fixed pixel grids/widths. Inline styles cannot be reached by
   normal media queries, so this file overrides them two ways:

     1. TOKENS (no !important needed). The design system defines --text-*,
        --container etc. as custom properties. Redefining them on :root inside
        a media query cascades into every inline style that *references* a
        token, so typography and container widths scale down for free — even on
        pages nobody has audited.

     2. LAYOUT (!important required). Hardcoded `grid-template-columns:
        repeat(3,1fr)` and `width:302px` sit in the style attribute, which beats
        any stylesheet rule. Overriding them is the one legitimate use of
        !important here. Attribute selectors ([style*="..."]) are used so the
        rules bind structurally and survive re-imports rather than needing a
        hand-tagged class on each element.

   Mobile is the priority: >75% of visitors are on phones. Where mobile and
   desktop conflict, mobile wins.
   ========================================================================== */


/* ==========================================================================
   0. UNIVERSAL SAFETY NET (all viewports)
   Stops any single element from forcing a horizontal scrollbar. Cheap
   insurance against re-imported markup we haven't audited yet.
   ========================================================================== */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Images should never exceed their column, regardless of a fixed width attr. */
img {
  max-width: 100%;
}


/* ==========================================================================
   1. TABLET AND BELOW  (<= 1024px)
   Collapse the widest grids one step early so mid-size tablets don't get
   four hairline-thin columns.
   ========================================================================== */

@media (max-width: 1024px) {
  :root {
    --text-5xl: 3.6rem;
    --text-4xl: 3rem;
    --text-3xl: 2.4rem;
    --text-2xl: 1.9rem;
  }

  [style*="repeat(4,1fr)"],
  [style*="repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* ==========================================================================
   2. PHONE  (<= 760px)  — the primary target
   ========================================================================== */

@media (max-width: 760px) {

  /* ---- 2a. Typography scale -------------------------------------------
     The export's display sizes (--text-4xl = 3.9rem / 62px) overflow a 390px
     screen mid-word. These values keep the same visual hierarchy at phone
     scale. Body text stays >=16px so iOS Safari never zooms on focus.        */
  :root {
    --text-5xl: 2.4rem;    /* 84px -> 38px */
    --text-4xl: 2.05rem;   /* 62px -> 33px */
    --text-3xl: 1.75rem;   /* 48px -> 28px */
    --text-2xl: 1.45rem;   /* 36px -> 23px */
    --text-xl:  1.25rem;   /* 28px -> 20px */
    --text-lg:  1.125rem;  /* 22px -> 18px */
    --text-md:  1rem;      /* 18px -> 16px */

    --container: 100%;
    --container-narrow: 100%;
  }

  /* Long display headings are set in an all-caps condensed face; allow them
     to break rather than punch out of the viewport. */
  h1, h2, h3 {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }


  /* ---- 2b. Collapse every multi-column grid to a single column ---------
     Covers repeat(2|3|4,1fr), "1fr 1fr", "1fr 1fr auto" and the fractional
     footer grid. Written as attribute selectors so re-imported markup with
     the same inline values is picked up automatically.                      */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Exception: PHOTO galleries stay 2-up. Images are scanned at a glance
     rather than read, so a single column just doubles the scroll distance
     for no gain. :has() scopes this to grids whose direct children are photo
     tiles (a wrapper div containing only an img) and not text cards.
     Supported in all current mobile browsers; older ones simply fall back to
     the 1-column rule above, which is still correct, just longer. */
  [style*="grid-template-columns"]:has(> div > img):not(:has(> div > h2)):not(:has(> div > h3)):not(:has(> div > p)) {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Exception: the "120px 1fr" media rows (icon + text) read better keeping
     their two-column shape, just with a smaller icon well. */
  [style*="grid-template-columns:120px 1fr"],
  [style*="grid-template-columns: 120px 1fr"] {
    grid-template-columns: 64px 1fr !important;
    gap: 14px !important;
  }

  /* Exception: the Services add-ons photo strip — a flex row that ALSO
     carries a leftover grid-template-columns inline (the only such combo in
     the export). The generic flex-wrap rule (2g) stacked its six full-width
     photos 1-per-row; Zakk wants 2-up (2026-07-22), so convert it to a real
     grid. The inline 6px gap is intentionally kept — tight tiles inside the
     rounded overflow:hidden container. Do NOT set height:100% on the images:
     with bare <img> grid items it creates a track-sizing cycle that shrinks
     the 1fr columns (~142px with a dead center gap). width:100% from the
     generic img rule + aspect-ratio is enough. */
  [style*="display: flex"][style*="grid-template-columns"],
  [style*="display:flex"][style*="grid-template-columns"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="display: flex"][style*="grid-template-columns"] img,
  [style*="display:flex"][style*="grid-template-columns"] img {
    aspect-ratio: 4 / 3;
  }

  /* Exception: the "NOT JUST DOGS" cards on Services (#other-animals — the id
     is export markup, so it survives re-imports). They are text cards, so the
     pure-photo 2-up exception above rightly skips them, but Zakk wants them
     2-up too (2026-07-22). At ~170px-wide cards the 16px letterspaced h3
     broke mid-word ("MAMMAL S") and the 22px card padding starved the text —
     scale both down, and give the photos one uniform ratio so rows align. */
  #other-animals [style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #other-animals [style*="grid-template-columns"] img {
    aspect-ratio: 4 / 3;
  }
  #other-animals [style*="grid-template-columns"] h3 {
    font-size: 14px !important;
    letter-spacing: 0.04em !important;
  }
  #other-animals [style*="grid-template-columns"] [style*="padding: 22px"],
  #other-animals [style*="grid-template-columns"] [style*="padding:22px"] {
    padding: 14px 14px 16px !important;
  }

  /* Tighten grid gutters generally — 18-28px gaps waste a phone's width. */
  [style*="display:grid"],
  [style*="display: grid"] {
    gap: 16px !important;
  }


  /* ---- 2c. Fixed-width media ------------------------------------------
     The export hardcodes width:302px / height:257px with object-fit:fill on
     photos, which both overflows and squashes the aspect ratio. Full-bleed
     width + object-fit:cover fixes both.                                    */
  img[style*="width:"],
  img[style*="width "] {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  /* Photos inside a 2-up gallery get a fixed aspect ratio so the rows line up
     instead of stepping raggedly (the source images have mixed dimensions).
     MUST carry the SAME text-exclusion guards as the 2-up layout rule above —
     without them this also matches the About timeline's photo row (h3 + img + p
     in one cell), where height:100% collapses the grid cell and the paragraph
     overlaps the next row. That reproduces in Firefox/Zen even though Chromium
     tolerates it. Scope it to pure-image gallery tiles only. */
  [style*="grid-template-columns"]:has(> div > img):not(:has(> div > h2)):not(:has(> div > h3)):not(:has(> div > p)) img {
    aspect-ratio: 4 / 3;
    height: 100% !important;
  }

  /* The logo seal and other small round marks are sized by width/height
     ATTRIBUTES (not inline style) and must keep their intrinsic size. */
  img[width]:not([style*="width:"]) {
    width: auto !important;
    max-width: 100%;
  }

  /* Photo tiles in the hero carry a decorative translateY offset that leaves
     a ragged edge once stacked. */
  [style*="transform:translateY(14px)"],
  [style*="transform: translateY(14px)"] {
    transform: none !important;
  }


  /* ---- 2d. Section padding --------------------------------------------
     32-44px side padding eats ~22% of a 390px screen. 18px keeps content
     breathing without starving it.                                          */
  section,
  footer > div,
  [style*="padding:74px 32px"],
  [style*="padding:48px 44px"],
  [style*="padding:64px 32px"],
  [style*="padding:56px 32px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Cards keep a little more inner room than the page edge. */
  [style*="padding:28px"],
  [style*="padding: 28px"] {
    padding: 20px !important;
  }


  /* ---- 2e. Decorative overflow ----------------------------------------
     The rainbow hero glow is a 900px absolutely-positioned blob. It's purely
     decorative, so clamp it rather than let it define scroll width.         */
  [style*="width:900px"][style*="position:absolute"],
  [style*="width: 900px"][style*="position: absolute"] {
    width: 100% !important;
    max-width: 100vw !important;
  }


  /* ---- 2f. Touch targets ----------------------------------------------
     Apple/Google both recommend >=44px. Buttons in the export are 44-52px
     tall already but shrink-to-fit horizontally; make primary CTAs full
     width so they're easy to hit one-handed.                                */
  button,
  [role="button"] {
    min-height: 44px;
  }

  /* CTA button rows: stack and fill. */
  [style*="display:flex"][style*="justify-content:center"][style*="flex-wrap:wrap"] > a,
  [style*="display: flex"][style*="justify-content: center"][style*="flex-wrap: wrap"] > a {
    width: 100%;
  }

  /* Buttons are wrapped by the design system in a .sc-host-x div, so the
     wrapper has to stretch too or the button keeps its intrinsic width. */
  [style*="display:flex"][style*="justify-content:center"][style*="flex-wrap:wrap"] > a .sc-host-x,
  [style*="display: flex"][style*="justify-content: center"][style*="flex-wrap: wrap"] > a .sc-host-x {
    display: block !important;
    width: 100% !important;
  }

  [style*="display:flex"][style*="justify-content:center"][style*="flex-wrap:wrap"] > a button,
  [style*="display: flex"][style*="justify-content: center"][style*="flex-wrap: wrap"] > a button {
    width: 100% !important;
  }


  /* ---- 2g. Generic flex rows wrap -------------------------------------
     Stat rows, badge rows and meta rows are inline flex with large gaps.    */
  [style*="display:flex"]:not(nav):not([data-no-wrap]),
  [style*="display: flex"]:not(nav):not([data-no-wrap]) {
    flex-wrap: wrap;
  }
}


/* ==========================================================================
   3. SITE HEADER — mobile navigation
   --------------------------------------------------------------------------
   The desktop header is one flex row: logo + 6 nav links + text-us link +
   "Book an Appointment" button ≈ 800px of content. On a phone that alone
   doubles the page width.

   The markup adds a checkbox-driven drawer (no JS — the React runtime
   re-renders and would drop event handlers). Desktop hides the toggle
   entirely and is left exactly as it was.
   ========================================================================== */

/* Toggle + hamburger are desktop-invisible. */
.add-navtoggle,
.add-burger {
  display: none;
}

@media (max-width: 900px) {

  /* Header row: logo left, hamburger right. */
  header > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 10px !important;
  }

  /* Trim the wordmark so it never competes with the burger for space.
     Kept at 11px (not smaller) so the location line stays legible. */
  header .add-logo-sub {
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
  }

  /* Show the hamburger. */
  .add-burger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    margin-left: auto;
    border-radius: 12px;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--border-cream);
    -webkit-tap-highlight-color: transparent;
  }

  .add-burger span {
    position: relative;
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink-900);
    transition: background 0.2s ease;
  }

  .add-burger span::before,
  .add-burger span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink-900);
    transition: transform 0.2s ease;
  }

  .add-burger span::before { top: -6px; }
  .add-burger span::after  { top: 6px; }

  /* Burger -> X when open. */
  .add-navtoggle:checked ~ .add-burger span {
    background: transparent;
  }
  .add-navtoggle:checked ~ .add-burger span::before {
    transform: translateY(6px) rotate(45deg);
  }
  .add-navtoggle:checked ~ .add-burger span::after {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* ---- The drawer -----------------------------------------------------
     The nav and the CTA cluster are two SIBLING elements in the header row.
     Both must drop below the header when open.

     They cannot both be `position:absolute; top:64px` — absolutely positioned
     boxes are out of flow and so have no idea how tall the other one is, which
     stacks them on top of each other and hides the logo.

     Instead: the whole header row becomes a wrapping flex column on mobile.
     The logo and burger stay on the first line (flex-basis auto), while nav
     and .add-cta are forced onto subsequent lines at 100% width. Collapsing
     is done by animating their max-height, so they stay in normal flow and
     naturally stack in source order.                                        */
  header > div {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 64px;
    align-items: center !important;
  }

  /* Logo keeps its place on line 1; the burger is pushed right by margin. */
  header > div > a:first-of-type {
    flex: 0 1 auto;
  }

  header nav,
  header .add-cta {
    flex: 0 0 100% !important;
    order: 3;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    max-height: 0;
    overflow: hidden;
    padding: 0 !important;
    transition: max-height 0.25s ease, padding 0.25s ease;
  }

  header .add-cta {
    order: 4;
    border-top: 1px solid var(--border-cream);
    border-top-color: transparent;
  }

  .add-navtoggle:checked ~ nav {
    max-height: 420px;
    padding: 4px 0 0 !important;
  }

  .add-navtoggle:checked ~ .add-cta {
    max-height: 220px;
    padding: 14px 0 18px !important;
    border-top-color: var(--border-cream);
  }

  /* Drawer links: full-width, generous tap targets, hairline separators. */
  header nav a {
    display: block;
    padding: 15px 4px !important;
    font-size: 17px !important;
    border-bottom: 1px solid var(--border-cream);
  }

  header nav a:last-child {
    border-bottom: none;
  }

  /* CTA cluster inside the drawer. */
  header .add-cta {
    align-items: stretch !important;
    gap: 12px !important;
  }

  header .add-cta a {
    justify-content: center;
    font-size: 16px !important;
  }

  /* The design system wraps each Button in a .sc-host-x div, so the anchor,
     the wrapper AND the button all need to stretch or the button keeps its
     intrinsic width and pushes past the viewport edge. */
  header .add-cta > a,
  header .add-cta .sc-host-x {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  header .add-cta button {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px;
  }
}

/* The header stays sticky on mobile; the drawer expands it in normal flow. */
@media (max-width: 900px) {
  header {
    position: sticky;
    top: 0;
  }
}


/* ==========================================================================
   4. STICKY MOBILE CALL/TEXT BAR
   --------------------------------------------------------------------------
   For a local grooming salon the conversion action is a phone call or text.
   On phones we pin a two-button bar to the bottom of the viewport so the
   primary actions are always one thumb-tap away. Hidden on desktop.
   ========================================================================== */

.add-mobilebar {
  display: none;
}

@media (max-width: 760px) {
  .add-mobilebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: var(--paper-050);
    border-top: 1px solid var(--border-cream);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.08);
    /* Clear the iOS home indicator. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .add-mobilebar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 56px;
    font-weight: 800;
    font-size: 15px;
    text-decoration: none;
    color: var(--ink-900);
    -webkit-tap-highlight-color: transparent;
  }

  .add-mobilebar a + a {
    border-left: 1px solid var(--border-cream);
    background: var(--spectrum-pink, #f7b8d4);
  }

  /* Stop the fixed bar covering the end of the footer. */
  body {
    padding-bottom: 56px;
  }
}


/* ==========================================================================
   5. ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .add-burger span,
  .add-burger span::before,
  .add-burger span::after,
  header nav,
  header > div > div:last-of-type {
    transition: none !important;
  }
}