/*
 * Page-scoped styles for /free-inspection/ (Home Protection Gutters campaign
 * landing page). Loaded AFTER /assets/styles.css so these rules land later in
 * the same named cascade layers that file already declares — this overrides
 * shared tokens for this page only and does not edit assets/styles.css.
 *
 * Palette: HPG's own blue (matches the campaign email + logo) plus the
 * email's green CTA / cream section colors, all re-checked for WCAG AA here
 * (see contrast notes below each pairing).
 */

@layer tokens {
  :root {
    /* HPG email's dark navy — 14.62:1 on white. Used for hero/footer bg. */
    --color-primary-deep: #1b2a39;

    /* Email's CTA green, paired with dark navy text (matches the email's own
       button styling): #1b2a39 on #55b98d measures 6.06:1, clears AA. */
    --color-accent: #55b98d;
    --color-accent-text: #1b2a39;
    /* Darker green for text-on-light use (links, icons, focus ring):
       6.50:1 on white, 6.18:1 on the cream section bg below. Also used to
       win the focus-ring / checkbox accent-color overrides below — see the
       components-layer block for why the plain :focus-visible rule alone
       isn't enough. */
    --color-accent-dark: #176b47;

    /* Email's cream section background — 10.78:1 (primary) / 15.02:1 (body
       text) against it, both comfortably AA. */
    --color-bg-soft: #fcf9f2;
    --color-surface: #ffffff;

    /* Email's yellow urgency-banner bg, dark navy text — 9.48:1. */
    --color-urgency-bg: #f7ca6e;
  }
}

@layer base {
  :focus-visible {
    outline-color: var(--color-accent-dark);
  }
}

@layer components {
  /* assets/styles.css's .field input:focus-visible and the consent
     checkbox's accent-color are declared in the *components* layer, which
     outranks our base-layer :focus-visible override above regardless of
     source order or selector specificity (layer order beats both). Without
     these, the form's focus ring and checkbox tick render in --color-accent
     (#55b98d), which is only 2.41:1 on white — fails WCAG 1.4.11's 3:1
     floor for UI-component contrast. --color-accent-dark (#176b47) measures
     6.50:1 on white, computed-style-verified live below. */
  .field input:focus-visible {
    outline-color: var(--color-accent-dark);
  }

  .consent-block input[type="checkbox"] {
    accent-color: var(--color-accent-dark);
  }

  /* Center the 34rem-capped form and its error box in the section. */
  #free-inspection-form .form-grid,
  #free-inspection-form .form-error {
    width: 100%;
    margin-inline: auto;
  }
}

@layer components {
  /* Skip link + form focus ring reuse assets/styles.css's --color-accent
     custom property, which is overridden above — no rule duplication. */

  /* Urgency banner strip above the hero */
  .offer-banner {
    background: var(--color-urgency-bg);
    color: var(--color-primary-deep);
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding-block: 0.6rem;
    font-size: clamp(0.85rem, 0.75rem + 0.5vw, 1.05rem);
  }

  /* Hero photo + gradient overlay */
  .hero-photo {
    position: relative;
    color: #fff;
    background-color: var(--color-primary-deep);
    /* Plain url() fallback first (universal support); the image-set() rule
       below only takes effect where supported, and is ignored as a whole
       (falling back to the rule above) where it isn't. */
    background-image: linear-gradient(135deg, rgba(27, 42, 57, 0.88) 0%, rgba(27, 42, 57, 0.72) 100%), url("img/hero-1600.jpg");
    background-image: linear-gradient(135deg, rgba(27, 42, 57, 0.88) 0%, rgba(27, 42, 57, 0.72) 100%), image-set(url("img/hero-1600.webp") type("image/webp"), url("img/hero-1600.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: center;
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
  }

  /* Class lives on the <picture> wrapper, not the <img>, so sizing/centering
     is unambiguous regardless of how a given browser treats <picture> in
     the box model (it renders with no box of its own per spec). */
  .hero-photo__logo {
    display: block;
    margin-inline: auto;
    /* Was 1.5rem (24px); cut ~75% per the logo-whitespace revision. */
    margin-block-end: 0.375rem;
    /* Noticeably bigger than the old fixed 218px, at every breakpoint —
       the trimmed source image (420x133) has room to scale up before
       looking soft. */
    width: clamp(240px, 70vw, 340px);
  }

  .hero-photo__logo img {
    display: block;
    width: 100%;
    height: auto;
  }

  .hero-photo__eyebrow {
    text-align: center;
    /* assets/styles.css's global `p { max-width: 65ch }` shrink-wraps this
       paragraph's box, and without margin-inline:auto a shrunk block stays
       at its container's start edge — text-align only centers the text
       *inside* that box, not the box itself. Left over from when this sat
       next to .hero-photo__lead (which had its own margin-inline:auto,
       removed along with the paragraph). */
    margin-inline: auto;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-size: 0.95rem;
    color: #dceafb;
  }

  .hero-photo h1 {
    color: #fff;
    text-align: center;
    margin-block-start: 0.5rem;
  }

  .hero-photo__stat {
    color: var(--color-accent);
    font-weight: 800;
  }

  /* Still used by thank-you/index.html (index.html's own copy was deleted
     in an earlier revision, but this page's is intentionally kept). Same
     max-width-without-centering trap as .hero-photo__eyebrow above, so
     margin-inline:auto is required here too. */
  .hero-photo__lead {
    text-align: center;
    max-width: 42ch;
    margin-inline: auto;
    color: #dceafb;
    margin-block-start: 1rem;
  }

  .hero-photo__actions {
    margin-block-start: 2rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Buttons in this page's accent green + dark-navy text (matches the email's
     own CTA pill styling). */
  .btn--hpg-accent {
    display: inline-block;
    padding: 0.85rem 1.75rem;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    background: var(--color-accent);
    color: var(--color-accent-text);
  }

  .btn--hpg-accent:hover,
  .btn--hpg-accent:focus-visible {
    background: color-mix(in oklab, var(--color-accent) 80%, black);
  }

  .btn--hpg-outline {
    display: inline-block;
    padding: 0.85rem 1.75rem;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid #fff;
    color: #fff;
    background: transparent;
    cursor: pointer;
  }

  .btn--hpg-outline:hover,
  .btn--hpg-outline:focus-visible {
    background: rgba(255, 255, 255, 0.14);
  }

  /* Benefit gallery (from the campaign email's "what we find up there") */
  .benefit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 2rem;
  }

  .benefit {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
  }

  .benefit img {
    border-radius: var(--radius);
  }

  .benefit h3 {
    font-size: var(--step-h3);
  }

  /* Services line — compact, not a full card grid */
  .services-line {
    text-align: center;
    font-weight: 600;
    color: var(--color-primary);
    max-width: none;
  }

  /* Fine print / offer terms */
  .fine-print {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--color-text);
    max-width: 42rem;
    margin-inline: auto;
  }

  .fine-print p + p {
    margin-block-start: 0.85rem;
  }

  /* Bottom closing banner (dark, matches email's closing section) */
  .closing-band {
    background: var(--color-primary-deep);
    color: #fff;
    text-align: center;
    padding-block: clamp(2.5rem, 5vw, 4rem);
  }

  .closing-band h2 {
    color: var(--color-accent);
  }

  .closing-band p {
    color: #fff;
    margin-inline: auto;
    max-width: 48ch;
    margin-block: 0.75rem 1.5rem;
  }

  .closing-band__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-block-end: 2rem;
  }

  .closing-band__photo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
  }

  /* Sticky mobile call bar — small screens only, so it never covers content
     on a screen wide enough to show the header's own click-to-call link. */
  .sticky-call {
    display: none;
  }

  @media (max-width: 46rem) {
    .sticky-call {
      display: block;
      position: fixed;
      inset-inline: 0;
      bottom: 0;
      z-index: 20;
      background: var(--color-accent);
      box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
    }

    .sticky-call a {
      display: block;
      text-align: center;
      padding-block: 0.9rem;
      font-weight: 700;
      color: var(--color-accent-text);
      text-decoration: none;
    }

    /* Keep the fixed bar from covering the page's own final content. */
    body {
      padding-block-end: 3.25rem;
    }
  }
}