/* Phone and tablet rules for the Claude Design pages. The templates use inline
   styles, so these target data-sion attributes and need !important. Linked from
   every page in src/; the pre-rendered snapshot uses it too, so phones get the
   menu button before JavaScript runs. */

/* Sticky header. The SiteHeader <dc-import> renders as a .sc-host directly inside
   the page wrapper; that host is what sticks. The negative top lets the dark top
   bar (35px, 41px on phones) scroll away so only the logo + nav row stays pinned.
   The page wrapper's inline overflow-x:hidden would break sticky, so browsers
   that support it get overflow-x:clip (same no-sideways-scroll, sticky works). */
@supports (overflow-x: clip) {
  [data-sion="page"] { overflow-x: clip !important; }
}
.sc-host:has(> div > [data-sion="header"]) { position: sticky; top: -35px; z-index: 50; }
@media (max-width: 640px) {
  .sc-host:has(> div > [data-sion="header"]) { top: -41px; }
}
#estimate { scroll-margin-top: 96px; }
/* Open phone menu scrolls inside itself if the screen is short (landscape) */
[data-sion="menu"] { max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; }

/* Header: menu button below 900px (src/SiteHeader.dc.html) */
@media (max-width: 900px) {
  [data-sion="nav"] { display: none !important; }
  [data-sion="menu-btn"] { display: flex !important; flex: none; }
  [data-sion="header"] { flex-wrap: nowrap !important; }
}
@media (max-width: 400px) {
  [data-sion="logo"] { zoom: 0.8; }
}
@media (min-width: 901px) {
  [data-sion="menu"] { display: none !important; }
}

/* Top bar: drop the tagline below 760px so it is one row of phone + email
   (with the tagline it wraps to two rows between ~645 and ~724px, which would
   break the sticky header's negative top) */
@media (max-width: 760px) {
  [data-sion="tagline"] { display: none !important; }
  [data-sion="topbar"] { justify-content: center !important; }
}
@media (max-width: 640px) {
  [data-sion="topbar"] { padding-top: 0 !important; padding-bottom: 0 !important; }
  [data-sion="topbar"] a { display: inline-block; padding: 12px 0; }
}
/* Small phones: phone number only (email is in the contact section and footer) */
@media (max-width: 400px) {
  [data-sion="topbar-email"] { display: none !important; }
}

/* Big headlines: the wide Archivo caps clip on narrow phones */
@media (max-width: 480px) {
  h1 { font-size: 12.5vw !important; }
}

/* Large phone numbers stay on one line */
[data-sion="bigtel"] { white-space: nowrap; }
@media (max-width: 480px) {
  [data-sion="bigtel"] { font-size: min(8vw, 40px) !important; }
}

/* Estimate form: 16px inputs so iOS Safari doesn't zoom in on tap */
#estimate input, #estimate textarea, #estimate select { font-size: 16px !important; }

/* Footer link lists: taller tap targets */
@media (max-width: 900px) {
  [data-sion="footer-links"] a { padding: 9px 0; line-height: 1.5; }
}