/* PawValet v2 — Mobile-first enhancements + advanced web platform features.
   Load AFTER components.css. */

/* ═══════════════════════════════════════════════════════════
   MOBILE NAV MENU — hamburger + full-height sheet
   ═══════════════════════════════════════════════════════════ */

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid var(--color-border-strong);
  cursor: pointer;
  position: relative;
  z-index: calc(var(--z-modal) + 1);
  transition: background var(--duration-fast), border-color var(--duration-fast);
}

.menu-toggle:hover {
  background: var(--color-surface);
  border-color: var(--color-ink);
}

.menu-toggle-bars {
  width: 18px;
  height: 12px;
  position: relative;
  display: block;
}

.menu-toggle-bars::before,
.menu-toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 320ms var(--ease-out-expo);
}

.menu-toggle-bars::before { top: 0; }
.menu-toggle-bars::after  { bottom: 0; }

.menu-toggle[aria-expanded="true"] .menu-toggle-bars::before {
  transform: translateY(5.25px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::after {
  transform: translateY(-5.25px) rotate(-45deg);
}

@media (max-width: 879px) {
  .menu-toggle { display: inline-flex; }

  /* Hide the regular nav links on mobile, show in menu sheet instead */
  .nav-links-desktop { display: none !important; }

  .menu-sheet {
    position: fixed;
    inset: 0;
    background: var(--color-bg);
    z-index: var(--z-modal);
    /* Top padding clears: announce bar (~44px) + nav (~76px) + breathing room */
    padding: calc(140px + env(safe-area-inset-top)) var(--space-gutter) calc(var(--space-7) + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transform: translateY(-100%);
    transition: transform 420ms var(--ease-out-expo);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* When menu is open, lift the nav above the sheet so the toggle stays clickable */
  body:has(.menu-sheet[data-open="true"]) .nav {
    z-index: calc(var(--z-modal) + 1);
  }

  .menu-sheet[data-open="true"] {
    transform: translateY(0);
  }

  .menu-sheet-link {
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--color-ink);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: color var(--duration-fast), padding-left var(--duration-normal) var(--ease-out-soft);
  }

  .menu-sheet-link:hover,
  .menu-sheet-link:active {
    color: var(--color-sage-deep);
    padding-left: var(--space-3);
  }

  .menu-sheet-link::after {
    content: '→';
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    color: var(--color-ink-3);
  }

  .menu-sheet-cta {
    margin-top: auto;
    padding-top: var(--space-6);
  }

  .menu-sheet-cta .btn {
    width: 100%;
    justify-content: center;
    padding: var(--space-5);
    font-size: var(--text-base);
  }
}

@media (min-width: 880px) {
  .menu-sheet { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE STICKY BOTTOM CTA
   ═══════════════════════════════════════════════════════════ */

.mobile-cta {
  display: none;
}

@media (max-width: 720px) {
  .mobile-cta {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    padding: var(--space-3) var(--space-gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
    background: oklch(97.5% 0.008 80 / 0.92);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border-top: 1px solid var(--color-border);
    transform: translateY(120%);
    transition: transform 420ms var(--ease-out-expo);
  }

  .mobile-cta.visible {
    transform: translateY(0);
  }

  .mobile-cta .btn {
    width: 100%;
    justify-content: center;
    min-height: 52px;
    font-size: var(--text-base);
  }

  /* When sticky CTA is visible, give content bottom padding so it doesn't get hidden */
  body.has-sticky-cta { padding-bottom: 80px; }
}

/* ═══════════════════════════════════════════════════════════
   TOUCH FEEDBACK — press states on mobile
   ═══════════════════════════════════════════════════════════ */

@media (hover: none) {
  .btn:active,
  .pill-label:active,
  .price-card:active,
  .walker-card:active,
  .pillar:active {
    transform: scale(0.97);
    transition: transform 120ms var(--ease-out-soft);
  }
}

/* Suppress default tap highlight on touch */
a, button, .pill-label, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* Field invalid state */
.field-invalid {
  border-color: oklch(62% 0.105 38) !important;
  box-shadow: 0 0 0 3px oklch(62% 0.105 38 / 0.15);
}

/* ═══════════════════════════════════════════════════════════
   SCROLL-SNAP — walker cards become a swipeable rail on mobile
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  .walkers-rail {
    display: flex !important;
    grid-template-columns: none !important;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding: var(--space-2) var(--space-gutter);
    margin-inline: calc(var(--space-gutter) * -1);
    scroll-padding: var(--space-gutter);
    scrollbar-width: none;
  }
  .walkers-rail::-webkit-scrollbar { display: none; }

  .walker-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }

  .pricing-grid {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding: var(--space-2) var(--space-gutter);
    margin-inline: calc(var(--space-gutter) * -1);
    scroll-padding: var(--space-gutter);
    scrollbar-width: none;
    gap: var(--space-4);
  }
  .pricing-grid::-webkit-scrollbar { display: none; }

  .price-card {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }

  .price-card-featured {
    transform: scale(1) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   SCROLL-DRIVEN ANIMATIONS — modern browsers only
   ═══════════════════════════════════════════════════════════ */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-visual-photo,
    .bruno-img img,
    .price-card-img img {
      animation: photo-parallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    @keyframes photo-parallax {
      0%   { transform: scale(1.08) translateY(2%); }
      100% { transform: scale(1.08) translateY(-2%); }
    }

    .step,
    .pillar {
      animation: pop-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }

    @keyframes pop-in {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
  }
}

/* ═══════════════════════════════════════════════════════════
   IMAGE FALLBACKS — when a photo is missing, the text takes
   over with an INTENTIONAL editorial layout. Never narrow
   half-width text. Never cramped grids. Centered, generous,
   magazine-quality both with and without imagery. */
/* ═══════════════════════════════════════════════════════════ */

/* 1. Hide the broken figures themselves */
figure.figure-broken {
  display: none !important;
}

/* 2. Collapse multi-column containers to single column */
.has-broken-figure {
  grid-template-columns: 1fr !important;
}

/* 3. SECTION-level treatment: when a section loses its image,
      give the text column a proper reading width, centered. */

/* — Hero text-only — */
.hero:has(.has-broken-figure) .hero-grid,
.section-has-broken.hero .hero-grid {
  grid-template-columns: 1fr !important;
}

.hero:has(.hero-visual.figure-broken) .hero-content {
  max-width: 60ch;
}

.hero:has(.hero-visual.figure-broken) .hero-title {
  font-size: clamp(2.75rem, 1.5rem + 7vw, 7rem);
}

/* — Meet Bruno text-only state — */
.bruno.section-has-broken .bruno-grid,
.bruno-grid.has-broken-figure {
  grid-template-columns: 1fr !important;
  max-width: 720px;
  margin-inline: auto;
  text-align: left;
}

.bruno.section-has-broken .bruno-text,
.bruno-grid.has-broken-figure .bruno-text {
  max-width: 100%;
}

.bruno.section-has-broken .bruno-body,
.bruno-grid.has-broken-figure .bruno-body {
  font-size: var(--text-lg);
  max-width: 60ch;
}

/* — Bruno facts: when text-only, switch to a clean horizontal definition strip — */
.bruno.section-has-broken .bruno-facts {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.bruno.section-has-broken .bruno-facts > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  grid-template-columns: none;
  min-width: 0;
}

.bruno.section-has-broken .bruno-facts dt {
  font-size: 10px;
  margin: 0;
}

.bruno.section-has-broken .bruno-facts dd {
  font-size: var(--text-base);
}

/* — Story page splits + full-bleed sections: centered editorial column — */
.story-section .story-split.has-broken-figure {
  grid-template-columns: 1fr !important;
  max-width: 680px;
  margin-inline: auto;
}

.story-section.section-has-broken .story-h2 {
  max-width: 16ch;
}

.story-section.section-has-broken .story-body {
  max-width: 60ch;
}

/* Story sections with full-bleed figures (Before Bruno, Today, etc.):
   when figure is missing, center the text container too. */
.story-section.section-has-broken > .container > .reveal:not(:has(.story-figure)) {
  max-width: 680px;
  margin-inline: auto;
}
.story-section.section-has-broken > .container > div:has(> .story-figure.figure-broken) {
  max-width: 680px;
  margin-inline: auto;
}

/* Story hero text-only: centered, generous */
.story-hero-grid.has-broken-figure {
  grid-template-columns: 1fr !important;
  text-align: left;
  max-width: 760px;
  margin-inline: auto;
}

.story-hero:has(.has-broken-figure) .story-hero-title {
  font-size: clamp(2.75rem, 1.5rem + 6vw, 6rem);
}

/* — Morning Rise card text-only — */
.price-card-hero.has-broken-figure {
  grid-template-columns: 1fr !important;
}
.price-card-hero.has-broken-figure .price-card-body {
  padding: clamp(2.25rem, 1.8rem + 1vw, 3rem) clamp(1.5rem, 1.2rem + 1vw, 2.5rem) clamp(1.5rem, 1.2rem + 1vw, 2.5rem);
}
.price-card-hero.has-broken-figure .price-card-tag {
  top: var(--space-4);
  left: var(--space-4);
  right: auto;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE TYPOGRAPHY POLISH
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 540px) {
  .hero-title { line-height: 1; }
  .section-title { font-size: clamp(1.875rem, 1.4rem + 2.2vw, 2.5rem); }
  .hero-trust-strip { gap: var(--space-3); }
  .hero-trust-item { font-size: 11px; }

  /* Tighter section padding on small screens */
  section { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE HERO LIFT — photo-forward presentation
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  .hero {
    padding-top: var(--space-5);
  }
  .hero-visual {
    aspect-ratio: 4 / 5;
    max-height: 70dvh;
    margin-top: var(--space-5);
    border-radius: var(--radius-lg);
  }
  .hero-actions { gap: var(--space-2); }
  .hero-actions .btn { flex: 1; min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════
   SAFE AREAS — iOS notch / dynamic island awareness
   ═══════════════════════════════════════════════════════════ */

.nav-inner { padding-top: max(var(--space-4), env(safe-area-inset-top)); }
.footer    { padding-bottom: max(var(--space-7), env(safe-area-inset-bottom)); }

@media (max-width: 879px) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}

/* ═══════════════════════════════════════════════════════════
   CONTAINER QUERIES — components adapt to their container
   ═══════════════════════════════════════════════════════════ */

.bruno {
  container-type: inline-size;
  container-name: bruno;
}

@container bruno (max-width: 700px) {
  .bruno-grid { grid-template-columns: 1fr !important; gap: var(--space-6) !important; }
  .bruno-images { grid-template-columns: 1fr 1fr; }
  .bruno-img-secondary { margin-top: calc(var(--space-3) * -1) !important; margin-left: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════
   FOCUS-VISIBLE ON TOUCH — keep accessibility on keyboard nav
   ═══════════════════════════════════════════════════════════ */

:focus-visible {
  outline: 2px solid var(--color-sage-deep);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* ═══════════════════════════════════════════════════════════
   PERFORMANCE — off-screen sections
   ═══════════════════════════════════════════════════════════ */

@supports (content-visibility: auto) {
  .pillars,
  .walkers,
  .bruno,
  .recruit,
  .faq-list {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
  }
}