/* The Pitched Roofing Company — responsive layer.
 *
 * The pages are static HTML captured from the Claude Design build, so almost
 * every property sits in an inline style attribute. This file is loaded last
 * and uses !important only where an inline style has to be overridden; plain
 * rules are used everywhere else.
 *
 *   1. shared tokens
 *   2. universal guards (no horizontal scroll, images, long strings)
 *   3. desktop + laptop: hero fills the viewport
 *   4. tablet
 *   5. mobile
 *   6. very small phones
 */

/* -------------------------------------------------- 1. tokens */
:root {
  --topbar-h: 35px;          /* the green strip above the fixed header */
  --tap: 44px;               /* minimum comfortable touch target */
}

/* -------------------------------------------------- 2. universal guards */
img, svg, video, iframe {
  max-width: 100%;
}

/* email addresses and URLs are single unbreakable tokens and are the one
   thing on this site long enough to push a narrow layout sideways */
a[href^="mailto:"],
a[href^="http"] {
  overflow-wrap: anywhere;
}

/* -------------------------------------------------- 2b. header partner strip
 * The "In partnership with" logos sit just under the fixed header, centred
 * under the logo, but are NOT part of the header: they are absolutely
 * positioned in the page, so they scroll away with it and the sticky header
 * stays just the logo and nav. The header row is taller than its content
 * on no breakpoint, so each breakpoint below sets the strip's top to
 * topbar (35px) + header row height + a 6px gap, and its width to the
 * logo's width (the logo is 1755x776, so width = height x 2.2616). The two
 * partner logos (each a link to that company's site) split that width
 * between them (each 50% - 4px, the row 6px wider than the box to line their
 * artwork up with the logo's edges), so the pair always spans the Pitched
 * Roofing logo exactly. The strip is pointer-events: none so it never blocks
 * the hero; only the two links take clicks.
 * Desktop values are inline in the markup: top 150px, width 174.1px (77px
 * logo).
 */

/* -------------------------------------------------- 2c. cookie pop-up
 * Fixed to the bottom of the viewport (src/lib/cookie-banner.ts). On a phone
 * the message and the buttons stack, and the two buttons share the width so
 * neither is a smaller target than the other.
 */
@media (max-width: 767px) {
  #cookie-banner {
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom)) !important;
  }
  #cookie-banner .cookie-banner-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
  #cookie-banner p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  #cookie-banner .cookie-banner-actions > button {
    flex: 1 1 0% !important;
  }
}

/* -------------------------------------------------- 3. hero height
 * Every hero fills exactly one viewport, on every device.
 *
 * The top strip is in normal flow and the header is fixed on top of the hero,
 * so strip + hero is the whole fold: the hero needs "viewport minus strip" for
 * strip + header + hero to add up to 100vh. The hero's own padding is pulled
 * in to match (per breakpoint, below) so the section reaches that height by
 * filling it rather than by overflowing it.
 */
section[data-screen-label="Hero"],
section[data-screen-label="Project hero"] {
  min-height: calc(100vh - var(--topbar-h)) !important;
}

@media (min-width: 1024px) {
  /* The section is a centring flex box, so this padding sets the hero's
     natural height rather than where the content sits. Keeping it tied to
     viewport height means the content still fits inside 100vh on a short
     laptop instead of pushing the section past it. */
  section[data-screen-label="Hero"] .hero-inner,
  section[data-screen-label="Project hero"] .hero-inner,
  section[data-screen-label="Project hero"] > div:last-child {
    padding-top: max(100px, 13vh) !important;
    padding-bottom: max(46px, 6vh) !important;
  }
}

/* -------------------------------------------------- 3a. hero call-back bar: HIDDEN
 * Hidden on every page at the client's request (2026-09-24) until a
 * GoHighLevel form replaces it. The design's markup is untouched in every
 * page, so bringing the bar back is just deleting this rule (and, once it
 * holds the new form, updating 3b below to suit its height).
 */
div.callbar-wrap {
  display: none !important;
}

/* -------------------------------------------------- 3b. callback form
 * On desktop the callback form straddles the hero's bottom edge
 * (translateY(-50%) on .callbar-wrap). The design cancels that below 900px, so
 * on a phone the form sits squarely under the hero instead. Put the overlap
 * back, scaled down: the form is ~300px tall stacked, so half of it would
 * swallow the hero's content. A fixed 48px lifts it into the empty band at the
 * bottom of the hero, which measures at least 61px even at 320x568.
 *
 * transform alone would leave a 48px hole underneath, since it does not affect
 * layout, so the same amount comes off the bottom margin.
 *
 * div.callbar-wrap, not .callbar-wrap: the page's own inline <style> is loaded
 * after this file, so an equal-specificity rule would lose the tie.
 */
@media (max-width: 900px) {
  div.callbar-wrap {
    transform: translateY(-48px) !important;
    margin-bottom: -48px !important;
  }
}

/* short screens have little empty hero left to lift into */
@media (max-width: 900px) and (max-height: 600px) {
  div.callbar-wrap {
    transform: translateY(-28px) !important;
    margin-bottom: -28px !important;
  }
}

/* -------------------------------------------------- 3c. coverage map card
 * On desktop the "Speak to a roofer" card floats over the bottom-right of the
 * coverage map. Below 900px the design drops it into normal flow, but it kept
 * its 320px max-width, its 18px top margin and its drop shadow -- so it landed
 * as a narrow floating box on the map panel's white background instead of
 * reading as part of the map.
 *
 * Full width, flush under the image, no shadow: the white panel is then covered
 * edge to edge and the card reads as the map's caption bar.
 */
@media (max-width: 900px) {
  div.map-card {
    max-width: none !important;
    margin-top: 0 !important;
    box-shadow: none !important;
  }
}

/* -------------------------------------------------- 4. tablet */
@media (max-width: 1023px) {
  /* the desktop nav is hidden at this width, so the menu button is the only
     way to navigate — make sure it is a comfortable target */
  header button[aria-label="Open menu"] {
    width: var(--tap);
    height: var(--tap);
  }

  /* the design hides the header phone number at this width; the touch-target
     rules below are specific enough to bring it back, so restate it */
  header .header-phone {
    display: none !important;
  }

  /* --- footer glow ---
     The footer carries two decorative radial-gradient overlays, each an
     absolutely positioned box sized as a percentage of the footer (80% and 55%
     wide). Their combined width exceeds the footer below about 1220px, and by
     tablet and phone they overlap by roughly a quarter of it -- two distinct
     green blooms stacked on each other.

     Hiding the second is not enough: each box cuts its gradient off at its own
     edge while the colour is still visible, leaving a hard vertical seam that
     the other bloom happened to mask. So drop both boxes and paint one gradient
     on the footer itself, where the only place it can be clipped is the page
     edge. One tint, no seam. */
  footer[data-screen-label="Footer"] > div[style*="radial-gradient"] {
    display: none;
  }

  footer[data-screen-label="Footer"] {
    background-image: radial-gradient(ellipse 90% 55% at 22% 12%,
                                      rgba(1, 182, 122, 0.16) 0%,
                                      rgba(1, 182, 122, 0.05) 45%,
                                      rgba(1, 182, 122, 0) 78%) !important;
  }

  /* --- touch targets ---
     Most links here are 11-19px of text with no padding, which lands well
     under a finger. Give the ones people actually tap a 44px box without
     moving them: the text stays put, the hit area grows around it. Prose
     links are left alone. Applied from 1023px down, where the desktop nav is
     gone and the device is a touch one. */
  footer a,
  header a,
  #site-menu a,
  section a[href^="tel:"],
  section a[href^="mailto:"],
  a[style*="display: inline-flex"][style*="text-transform: uppercase"] {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
  }

  footer nav a {
    width: 100%;
  }
}

/* Short handsets and short laptop windows: the hero's content is what decides
   whether it fits the fold, so pull the type and spacing in rather than let the
   section run past 100vh. */
@media (max-width: 1023px) and (max-height: 720px) {
  section[data-screen-label="Hero"] .hero-inner,
  section[data-screen-label="Project hero"] .hero-inner,
  section[data-screen-label="Project hero"] > div:last-child {
    padding-top: 96px !important;
    padding-bottom: 28px !important;
  }
  section[data-screen-label="Hero"] h1,
  section[data-screen-label="Project hero"] h1 {
    font-size: clamp(24px, 7vw, 30px) !important;
  }
  section[data-screen-label="Hero"] .hero-inner p,
  section[data-screen-label="Project hero"] p {
    font-size: 16px !important;
    margin-top: 16px !important;
  }
}

/* -------------------------------------------------- 5. mobile */
@media (max-width: 767px) {
  /* --- header row --- */
  header > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 12px !important;
  }

  /* the logo drops from 77px to 52px here (the page style block's 40px is
     the design's original, overridden by this more specific rule), and the
     "in partnership with" strip under it follows it (see 2b) */
  header .header-logo {
    height: 52px !important;
  }
  div.header-partners {
    top: 125px !important;
  }
  div.header-partners > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  div.header-partners .header-partners-inner {
    width: 117.6px !important;
    gap: 5px !important;
  }
  div.header-partners .header-partners-inner > span:first-child {
    font-size: 7px !important;
    letter-spacing: 0.14em !important;
  }

  /* --- hero ---
     Same deal as desktop: the section centres its content, so this padding
     decides the hero's natural height. Tying it to viewport height keeps the
     content inside the fold on a short handset (667px and down) instead of
     pushing the section past it. The floor clears the fixed header. */
  section[data-screen-label="Hero"] .hero-inner,
  section[data-screen-label="Project hero"] .hero-inner,
  section[data-screen-label="Project hero"] > div:last-child {
    padding-top: max(110px, 15vh) !important;
    padding-bottom: max(40px, 5vh) !important;
    /* the section already supplies an 18px gutter at this width; the hero's
       own 24px on top of it costs 48px of a 375px screen */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* The hero eyebrow is 12px at 0.24em tracking, which needs ~390px and so
     wraps to two lines on a phone, orphaning the last word against the top of
     the headline. Tighten the tracking so it holds one line from 360px up, and
     give it room to breathe where it still has to wrap. */
  section[data-screen-label="Hero"] .hero-inner > div:first-child,
  section[data-screen-label="Project hero"] .hero-inner > div:first-child {
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    line-height: 1.5 !important;
    margin-bottom: 18px !important;
  }

  /* --- horizontal card rails ---
     The rails bleed to the screen edge (margin: 0 -18px) and put the gutter
     back as their own padding (padding: 0 18px). But scroll-snap defaults to
     scroll-padding: auto, so the browser snaps the first card's edge to the
     scrollport edge -- it scrolls 18px on load and cancels that gutter, leaving
     every card rail sitting 18px left of the heading above it. Telling the
     snapport about the gutter lines the cards up with the text. */
  .rail-mobile,
  .rail {
    scroll-padding-left: 18px;
    scroll-padding-right: 18px;
  }

  /* --- accreditation band ---
     The band is a two-column row: label hard left, logos hard right. On a phone
     that leaves the label stranded in a 200px column with the logos ragged
     against the right edge. Stack it instead: label centred, logos centred
     below. The inline styles carry flex-direction, justify-content and the
     label's max-width, so each one has to be overridden explicitly. */
  section[data-screen-label="Accreditations"] > div {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 26px !important;
  }

  section[data-screen-label="Accreditations"] > div > div:first-child {
    max-width: none !important;
    text-align: center !important;
  }

  section[data-screen-label="Accreditations"] .acc-bar {
    width: 100%;
    flex: 0 1 auto !important;
    justify-content: center !important;
    gap: 22px 26px !important;
  }

  /* --- drawer menu --- */
  #site-menu nav a {
    display: flex;
    align-items: center;
    min-height: var(--tap);
  }
  #site-menu a[href^="mailto:"] {
    overflow-wrap: anywhere;
    font-size: 14px;
  }

  /* --- long contact strings --- */
  a[href^="mailto:"] {
    overflow-wrap: anywhere;
  }

  /* --- inputs must be >=16px or iOS zooms the page on focus --- */
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* -------------------------------------------------- 6. very small phones
 * At 320px the header's right-hand group (call button, Get a Quote, menu)
 * is wider than the viewport and pushes the document sideways.
 */
@media (max-width: 400px) {
  header > div {
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 8px !important;
  }

  header .header-logo {
    height: 44px !important;
  }

  div.header-partners {
    top: 118px !important;
  }
  div.header-partners > div {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  div.header-partners .header-partners-inner {
    width: 99.5px !important;
  }

  header a.scp1 {
    padding: 12px 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
  }

  /* Headings are set in vw-based clamps that bottom out around 26-38px. At
     this width single long words ("Straightforward,", "Recommendations") are
     wider than the column and push the page sideways, so cap the scale and
     allow a break as a last resort. */
  h1 { font-size: clamp(26px, 8.5vw, 34px) !important; }
  h2 { font-size: clamp(22px, 7.5vw, 28px) !important; }
  h3 { font-size: clamp(18px, 6vw, 22px) !important; }
  h1, h2, h3, h4 { overflow-wrap: break-word; }

  /* keep the top strip on one line so the fixed header still meets it. The
     smaller type makes the strip 33px rather than 35px, so the hero's
     100vh maths has to follow it. */
  :root { --topbar-h: 33px; }

  .topbar {
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}