/* Responsive layer for the deployed demo.
   The design is desktop-first; below ~1150px its nav wraps to three rows and
   the hero's hard-coded 74px offset can no longer compensate, leaving a band
   of page background above the image. These rules fix the nav (two rows on
   tablet, a hamburger sheet on phones), the hero offset, and the chat launcher.

   Selectors are deliberately over-specific and use !important: the design's
   own <style> lives in <helmet>, which the dc runtime injects into <head>
   after this file, so source order alone would lose. */

/* ================= tablet: two clean rows instead of three wrapped ones ==== */
@media (max-width: 1150px) {
  nav#sca-nav #sca-nav-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas: "logo actions" "links links" !important;
    align-items: center !important;
    gap: 8px 12px !important;
    height: auto !important;
    padding: 10px 0 !important;
    flex-wrap: nowrap !important;
  }
  nav#sca-nav #sca-nav-row > a:first-child {
    grid-area: logo !important;
    margin-right: 0 !important;
  }
  nav#sca-nav #sca-nav-row > div:last-child {
    grid-area: actions !important;
    justify-self: end !important;
  }
  nav#sca-nav #sca-links {
    grid-area: links !important;
    justify-content: center;
    justify-content: safe center;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  nav#sca-nav #sca-links::-webkit-scrollbar { display: none; }
  nav#sca-nav #sca-links a { white-space: nowrap; }

  /* The call button is the CTA that matters most on a phone — the design
     hides it under 1150px, which is exactly backwards. Keep it. */
  nav#sca-nav a#sca-nav-phone {
    display: inline-flex !important;
    min-width: 0 !important;
  }

  /* The hero sits under the transparent sticky nav via margin-top:-74px.
     --sca-navh is measured live by mobile-nav.js so the pull-up always
     matches the real nav height. */
  main section[data-screen-label="Hero"] {
    margin-top: calc(-1 * var(--sca-navh, 74px)) !important;
    padding-top: var(--sca-navh, 74px) !important;
  }
}

/* ================= phones: hamburger sheet ================================= */
#sca-burger { display: none; }

@media (max-width: 768px) {
  /* single row: logo + call, with room reserved for the burger */
  nav#sca-nav #sca-nav-row {
    grid-template-areas: "logo actions" !important;
    grid-template-columns: 1fr auto !important;
  }
  nav#sca-nav #sca-links { display: none !important; }
  nav#sca-nav #sca-nav-row > div:last-child { padding-right: 52px !important; }
  nav#sca-nav #sca-nav-row > div:last-child > a[href="#/book"] { display: none !important; }

  /* call collapses to an icon circle that matches the burger and sits beside
     it; the full number is still one tap away at the bottom of the sheet.
     font-size:0 hides the number visually but leaves it for screen readers. */
  nav#sca-nav a#sca-nav-phone {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    gap: 0 !important;
    font-size: 0 !important;
    border-radius: 50% !important;
    justify-content: center !important;
    background: rgba(255, 253, 245, 0.72) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  nav#sca-nav a#sca-nav-phone svg {
    width: 19px !important;
    height: 19px !important;
    fill: #101012 !important;
  }
  nav#sca-nav #sca-nav-row > a:first-child > span:first-child { font-size: 21px !important; }
  nav#sca-nav #sca-nav-row > a:first-child > span:last-child {
    font-size: 8px !important;
    letter-spacing: 0.2em !important;
  }

  /* ---- the button ---- */
  #sca-burger {
    display: flex;
    position: fixed;
    top: 10px;
    right: max(16px, calc((100vw - min(1280px, 100vw - 48px)) / 2));
    z-index: 120;
    width: 44px;
    height: 44px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    border: 1px solid rgba(16, 16, 18, 0.14);
    border-radius: 999px;
    background: rgba(255, 253, 245, 0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.12s ease;
  }
  #sca-burger:active { transform: scale(0.94); }
  #sca-burger span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #101012;
    transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.16s ease;
  }
  html.sca-menu-open #sca-burger { background: #FFFDF5; }
  html.sca-menu-open #sca-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  html.sca-menu-open #sca-burger span:nth-child(2) { opacity: 0; }
  html.sca-menu-open #sca-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ---- the sheet ---- */
  #sca-sheet-backdrop {
    position: fixed;
    /* starts below the header so the logo and buttons stay undimmed */
    top: var(--sca-navh, 64px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: rgba(16, 16, 18, 0.34);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
  }
  html.sca-menu-open #sca-sheet-backdrop { opacity: 1; pointer-events: auto; }

  #sca-sheet {
    position: fixed;
    /* the sheet lives outside the design's root div, so it inherits nothing —
       state the family explicitly or it falls back to the browser serif */
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    top: var(--sca-navh, 64px);
    left: 0;
    right: 0;
    z-index: 110;
    max-height: calc(100dvh - var(--sca-navh, 64px));
    overflow-y: auto;
    box-sizing: border-box;
    padding: 6px 24px 26px;
    background: #F2EEE2;
    border-top: 1px solid rgba(16, 16, 18, 0.08);
    box-shadow: 0 24px 60px rgba(16, 16, 18, 0.22);
    transform: translateY(-10px);
    opacity: 0;
    transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
  }
  html.sca-menu-open #sca-sheet { transform: translateY(0); opacity: 1; }
  html.sca-menu-open nav#sca-nav { background: #F2EEE2 !important; }

  #sca-sheet ul { list-style: none; margin: 0; padding: 0; }
  #sca-sheet li + li { border-top: 1px solid rgba(16, 16, 18, 0.07); }
  #sca-sheet ul a {
    display: block;
    padding: 15px 2px;
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #3d3a33;
  }
  #sca-sheet ul a.is-active { color: #101012; }
  #sca-sheet ul a.is-active::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 8px;
    border-radius: 50%;
    background: var(--acd, #4f6f8f);
    vertical-align: middle;
  }

  .sca-sheet-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
  .sca-sheet-book,
  .sca-sheet-call {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
  }
  .sca-sheet-book { background: var(--acd, #4f6f8f); color: #FAF7F0; }
  .sca-sheet-call {
    border: 1px solid rgba(16, 16, 18, 0.16);
    background: rgba(255, 253, 245, 0.85);
    color: #101012;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
  }

  /* hero CTAs go full-width rather than squeezing side by side */
  main section[data-screen-label="Hero"] a[href^="tel:"],
  main section[data-screen-label="Hero"] a[href="#/book"] {
    flex: 1 1 100% !important;
  }

  /* eyebrow pill: scale it to the viewport so it stays on ONE line instead of
     wrapping with an orphaned "· LIC #1063956" */
  main section[data-screen-label="Hero"] > div:last-child > p:first-child > span {
    white-space: nowrap !important;
    font-size: clamp(7.5px, 2.3vw, 11.5px) !important;
    letter-spacing: 0.08em !important;
    padding: 7px 12px !important;
  }

  /* lede: balance the wrap so "Los Angeles" isn't split across lines, and give
     the animated city its own line (the 22ch reserve is what forced the break) */
  main section[data-screen-label="Hero"] > div:last-child > div > p:first-child {
    font-size: 15.5px !important;
    text-wrap: balance !important;
  }
  #sca-city-hero {
    display: block !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  /* WebGL clouds are not loaded on phones (see the loader in <head>). Instead
     the hero drifts slowly left-to-right and back — cheap, GPU-only motion
     that keeps the header alive without three.js.
     Declarations from CSS animations outrank the inline transform the design's
     scroll handler writes, so this wins without touching that code. */
  #sca-hero-clouds { display: none !important; }
  #sca-hero-bg,
  section[data-screen-label="Final CTA"] > div:first-child {
    animation: sca-hero-pan 20s ease-in-out infinite alternate !important;
  }
  /* the CTA image is also scroll-shifted via background-position; pin it so the
     pan is the only motion there */
  section[data-screen-label="Final CTA"] > div:first-child {
    background-position: center 50% !important;
  }

  /* ---- chat launcher collapses to its icon ---- */
  #sca-chat-pill {
    width: auto !important;
    gap: 0 !important;
    padding: 6px !important;
  }
  #sca-chat-pill > span:first-child,
  #sca-chat-pill input#sca-chat-launch { display: none !important; }
  #sca-chat-pill button { width: 52px !important; height: 52px !important; }
  /* swap the send arrow for a chat bubble — as a standalone icon the arrow
     reads as "scroll up" rather than "talk to us" */
  #sca-chat-pill button svg { display: none !important; }
  #sca-chat-pill button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAF7F0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E") !important;
    background-size: 24px 24px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  /* keep the launcher clear of the open sheet */
  html.sca-menu-open #sca-chat-pill { opacity: 0 !important; pointer-events: none !important; }
}

/* scale keeps the translated edges off-screen */
@keyframes sca-hero-pan {
  from { transform: translateX(-2.5%) scale(1.14); }
  to   { transform: translateX(2.5%) scale(1.14); }
}

@media (prefers-reduced-motion: reduce) {
  #sca-sheet, #sca-burger span, #sca-sheet-backdrop { transition: none !important; }
  #sca-hero-bg,
  section[data-screen-label="Final CTA"] > div:first-child { animation: none !important; }
}
