/* =============================================================
   Ark-tuning.css — reusable page tuning applied to the pages we
   iterated on for /gutters/ (client review round). Transfers:
     - 16px body-copy floor (FAQ-dropdown paragraph pattern)
     - Golden serif italic callouts (.intro-lead, .relevance-close)
     - Blue-textured overlay depth (0.98)
     - Subtle hero darkening
     - .src-link no-underline
     - Mobile: cards stack in one column, intro sections show
       content before image
   Load AFTER ark-readability.css so !important floors get
   overridden cleanly.
============================================================= */

/* 1. Uniform body-copy paragraph rhythm — matches the FAQ
   dropdown paragraph on family/size/weight/line-height.
   COLOR IS INTENTIONALLY NOT FORCED HERE — each paragraph keeps
   its own contextual color (dark on light bg, cream on dark bg
   like .svc-tile p, .def-body p, etc.). Forcing --black across
   the board makes text on dark-navy cards invisible.
   Excludes intentional callouts, hero-sub (light on dark hero),
   footer text (light on dark footer), and eyebrow/kicker labels. */
body p:not(.intro-lead):not(.relevance-close):not(.hero-sub):not(.hero-eyebrow):not(.footer-tag):not(.eyebrow):not(.kicker):not(.reviews-eyebrow):not(.intro-eyebrow):not(.difference-eyebrow):not(.hero-headline):not(.stats-num):not(.stat-num),
.faq-a {
  font-family: var(--sans, 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
}

/* 2. Golden serif italic callouts. 18px matches the visual
   weight of 16px sans body (Didot italic has a smaller x-height
   than Montserrat). */
.intro-lead,
.relevance-close {
  font-family: var(--serif, 'GFS Didot', 'Times New Roman', serif) !important;
  font-style: italic !important;
  color: var(--gold-dark, #c79749) !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
}

/* 3. Blue-textured overlay depth bump — Ark-Promise pattern
   still reads as texture but foreground copy is cleaner. */
.ark-difference-section {
  --ark-difference-overlay-opacity: 0.99;
}
.closing {
  --overlay-opacity: 0.99;
}

/* 4. Hero overlay subtle darkening — pushes hero backdrop images
   further back so the cream serif H1 + gold italic accent read
   cleanly on top. Universal ::after layer at 15% dark. */
section.hero,
.hero {
  position: relative;
}
section.hero::after,
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,0.15);
  pointer-events: none;
  z-index: 1;
}
.hero-content,
.hero-inner,
.hero-statbar,
.hero-badges,
.hero-headline,
.hero-sub,
.hero-cta {
  position: relative;
  z-index: 3;
}

/* 5. No underline on source citation links (kept color + hover) */
.src-link {
  text-decoration: none !important;
}

/* 6. Mobile responsiveness: single-column card stacking.
   Covers the common grid patterns we see across the site:
   - .exp-grid           (While You're At It / explore)
   - .services-grid      (services card grid)
   - .pathway-grid       (pathway cards)
   - .paths-grid         (path cards)
   - .svc-grid           (svc grid)
   - #services > div     (inline-styled video-feature cards)
   Plus explore section padding + hero section polish. */
@media (max-width: 860px) {
  /* Explore / "While You're At It" cards */
  .exp-grid {
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    overflow-x: visible !important;
    gap: 22px !important;
    padding-right: 0 !important;
    scroll-snap-type: none !important;
  }
  .exp-card { scroll-snap-align: none !important; }
  .exp-media { height: 220px !important; }
  .explore {
    padding: 80px 24px !important;
  }
  .explore-head {
    padding-right: 0 !important;
    text-align: center !important;
  }

  /* Video-feature (inline-styled) card grids used by many pages */
  .video-feature > div[style*="grid-template-columns"],
  #services > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    padding: 0 20px !important;
    gap: 18px !important;
  }
  .video-feature > div[style*="grid-template-columns"] > a,
  #services > div[style*="grid-template-columns"] > a {
    padding: 32px 26px !important;
  }

  /* Common named card grid patterns — force single column */
  .pathway-grid,
  .services-grid,
  .paths-grid,
  .svc-grid,
  .exp-grid,
  .path-cards,
  .cards-grid,
  .mrow,
  .reviews-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 7. Mobile intro / story sections: content BEFORE image regardless
   of .reverse variant. HTML DOM order is typically media-first;
   desktop reverse rule kicks in at min-width:1101px, so sub-1101
   viewports would fall back to image-first without this.
   Applies to both .intro (siding, gutters, etc.) AND .story
   (about-us "Our Story" section). */
@media (max-width: 1100px) {
  .intro .intro-content { order: 1 !important; }
  .intro .intro-media { order: 2 !important; }
  .story .story-content { order: 1 !important; }
  .story .story-media { order: 2 !important; }
  .story-inner {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* 8. Financing section redesign — same treatment we ended up
   with on /gutters/ (v4). Was: white card floating on dark navy
   Ark-Promise texture. Now: cream (--off-white) background,
   asymmetric horizontal split — big serif italic "Financing"
   left rail acts as design anchor, vertical gold rule between
   columns, statement as sans body on the right. Doc content
   unchanged; only visual container differs. */
.financing.ark-difference-section {
  background-color: var(--off-white) !important;
  background-image: none !important;
  padding: 130px 24px !important;
}
.financing.ark-difference-section::before,
.financing.ark-difference-section::after { display: none !important; }
.financing-card {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  text-align: left !important;
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: 300px 1fr !important;
  column-gap: 64px !important;
  align-items: center !important;
}
.financing-card .kicker {
  color: var(--navy) !important;
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-size: clamp(40px, 4.4vw, 62px) !important;
  letter-spacing: -0.015em !important;
  font-weight: 400 !important;
  margin-bottom: 0 !important;
  text-align: left !important;
  text-transform: none !important;
  line-height: 1 !important;
  position: relative;
  padding-right: 40px;
}
.financing-card .kicker::after {
  content: '';
  position: absolute;
  right: 0;
  top: 8%;
  bottom: 8%;
  width: 2px;
  background: var(--gold);
  opacity: 0.85;
}
.financing-rule { display: none !important; }
.financing-statement {
  font-family: var(--sans) !important;
  font-style: normal !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--black) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  max-width: 620px !important;
  text-align: left !important;
}
.financing-statement em {
  color: var(--gold-dark) !important;
  font-style: italic !important;
  font-weight: 500 !important;
}
@media (max-width: 860px) {
  .financing.ark-difference-section { padding: 80px 22px !important; }
  .financing-card {
    grid-template-columns: 1fr !important;
    row-gap: 32px !important;
  }
  .financing-card .kicker {
    font-size: 40px !important;
    padding-right: 0 !important;
    padding-bottom: 24px !important;
  }
  .financing-card .kicker::after {
    top: auto;
    bottom: 0;
    left: 0;
    right: auto;
    width: 60px;
    height: 2px;
  }
}

/* 9. Subtle Ark-Promise texture on the "While You're At It" .explore
   section (was a flat block). Applied via ::before overlay at 2.5%
   opacity so foreground copy stays readable. .explore-inner
   z-indexes above the pseudo. */
.explore {
  position: relative !important;
  overflow: hidden;
}
.explore::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://demo.arkroofer.com/wp-content/uploads/2026/06/Artboard-1-scaled.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.025;
  pointer-events: none;
  z-index: 0;
}
.explore-inner {
  position: relative;
  z-index: 1;
}

/* =============================================================
   10. MOBILE RESPONSIVE PASS (client review round)
   - Every section gets 50px top/bottom padding (hero + closing
     kept at their intended heights)
   - All common card/tile/grid patterns collapse to 1 column
   - Heading + kicker sizes tuned down for narrow viewports
   - Horizontal overflow guards
============================================================= */
@media (max-width: 860px) {
  /* 50px top/bottom padding + equal 20px left/right padding on
     every section on mobile (client request). Hero excluded — it
     has its own viewport-height + padding logic below. Nav bar
     excluded — its padding is intentional. */
  section:not(.hero):not(nav):not(.site-nav) {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Consolidated single-column card stacks. Any of these grid
     patterns collapse to 1fr on mobile so nothing overflows.
     Also forces display: grid + overflow-x: visible on the
     .explore-grid carousel pattern used on some pages (roofing/,
     etc.) where the mobile styling was a horizontal-scroll flex
     row — client wants vertical stacking on mobile everywhere. */
  .exp-grid,
  .explore-grid,
  .paths-grid,
  .pathway-grid,
  .services-grid,
  .service-grid,
  .svc-grid,
  .tf-list,
  .path-cards,
  .cards-grid,
  .mrow,
  .reviews-grid,
  .team-grid,
  .awards-grid,
  .values-grid,
  .repair-steps,
  .ctx-stats,
  .financing-cards,
  .footer-grid,
  .platinum-grid,
  .comparison-grid,
  .process-cards-grid,
  .pcols-grid,
  .stats-row,
  .cred-stats,
  .relevance-inner,
  .def-inner,
  .intro-inner,
  .story-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    gap: 22px !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .explore-card,
  .exp-card {
    scroll-snap-align: none !important;
    flex: none !important;
    min-width: 0 !important;
    width: auto !important;
  }

  /* Inline-styled card grids used by many pages (video-feature +
     service pathway on siding/attic/etc.) — force stack. Zero
     horizontal padding since the parent <section> now supplies
     the 20px left/right rule above; otherwise cards end up 40px
     from the viewport edge (20 section + 20 grid = doubled). */
  #services > div[style*="grid-template-columns"],
  .video-feature > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    gap: 18px !important;
  }

  /* Common heading sizes on mobile — bring huge display sizes down
     so they don't overflow the viewport */
  h1,
  .hero-headline {
    font-size: clamp(36px, 8vw, 46px) !important;
    line-height: 1.08 !important;
  }
  h2 {
    font-size: clamp(26px, 6vw, 34px) !important;
    line-height: 1.15 !important;
  }
  h3 {
    font-size: clamp(20px, 4.6vw, 24px) !important;
    line-height: 1.25 !important;
  }

  /* Guard against horizontal overflow site-wide */
  html, body {
    overflow-x: hidden !important;
  }

  /* Common section inner containers — zero horizontal padding on
     the inner wrapper since the parent <section> now supplies the
     20px left/right rule above. Also zero vertical padding so
     inner containers don't stack an additional 40-64px on top of
     the section's 50px top/bottom rule (was giving the intro
     section 64+50 = 114px of top whitespace above the kicker). */
  .intro-content,
  .relevance-inner,
  .def-inner,
  .story-content,
  .platinum-inner,
  .paths-inner,
  .faq-inner,
  .reviews-inner,
  .explore-inner,
  .closing-inner,
  .band-cta-inner,
  .financing-inner,
  .cta-band-inner,
  .cred-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Undo the horizontal padding on rows/grids that are already
     inside a padded parent — prevents double-indent */
  .cred-logos,
  .exp-grid,
  .footer-grid,
  .awards-grid,
  .values-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Cred logos — wrap and center on mobile */
  .cred-logos {
    justify-content: center;
    gap: 24px !important;
    flex-wrap: wrap;
  }
  .cred-logos img { max-height: 44px; width: auto; }

  /* Intro/story media that stays large on mobile */
  .intro-media,
  .story-media {
    height: auto !important;
    max-height: 320px !important;
    aspect-ratio: 4 / 3;
  }
  .intro-media img,
  .story-media img {
    object-fit: cover;
  }

  /* Hero — keep it, but tune its own padding/heights so the H1
     and CTA fit on the first screen without ridiculous whitespace.
     Horizontal padding 20px matches the section rule above. */
  .hero {
    min-height: 78vh !important;
    padding: 100px 20px 60px !important;
  }
  .hero-content { padding: 0 !important; }
  .hero-headline { max-width: 100% !important; }
  .hero-cta,
  .hero-content .btn,
  .hero-content .btn-light,
  .hero-content .btn-navy {
    width: 100%;
    max-width: 340px;
  }

  /* Close CTA — matches the 50px section rhythm so the final CTA
     doesn't feel over-padded on mobile. Also trims the H2 bottom
     margin (some pages set it to 44px) so the button sits nearer
     the headline. */
  .closing,
  .closing.ark-difference-section,
  section.closing {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  .closing h2,
  .closing-inner h2,
  .closing.ark-difference-section h2 {
    margin-bottom: 26px !important;
  }

  /* Wide table-like or overflow-prone rows scroll horizontally
     instead of bursting out of the section */
  .spec-row,
  .compare-row,
  .platform-tiles {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Very small phones — keep the same 20px horizontal padding as
   the 860px rule for consistency (client asked for equal 20px
   left/right site-wide). Only shrink the cred-logo row so it
   doesn't wrap awkwardly. */
@media (max-width: 480px) {
  .cred-logos { gap: 16px !important; }
  .cred-logos img { max-height: 36px; }
}