/* =============================================================
   Sitewide body-copy readability override.
   Raises paragraph and description text to 500 so it reads clearly
   on desktop and mobile. Does not affect headings, buttons,
   eyebrows/kickers, or labels because those target their own
   element or class-name patterns.
============================================================= */
p {
  font-weight: 500;
}

/* Common non-<p> body-copy carriers */
.footer-tag,
.footer-col a,
.signup-fineprint,
.material-spec,
.qa-excerpt,
.story-excerpt,
.issue-desc,
.review-text,
.review-location,
.review-author {
  font-weight: 500;
}

/* Preserve intentionally-light hero eyebrow/kicker text that happens
   to use a <p>. If any project uses <p class="eyebrow"> style, keep
   the original weight. */
p.hero-eyebrow,
p.reviews-eyebrow,
p.stories-eyebrow,
p.issue-eyebrow,
p.overview-eyebrow,
p.difference-eyebrow,
p.expert-eyebrow,
p.subscribe-eyebrow,
p.footer-col-title,
p.filter-tab {
  font-weight: 800;
}

/* =============================================================
   Body-copy size floor (matches the /roofing/ tuning).
   Uses !important because per-page inline styles set explicit
   pixel sizes; this is the intended global override.
   Excludes eyebrows/kickers/labels/captions (they keep their own
   small sizes because those are intentional visual hierarchy).
============================================================= */

/* Hero paragraphs across pages */
.hero-sub {
  font-size: 18px !important;
}

/* Standard-body descriptions and excerpts, 15.5px floor */
.pathway-desc,
.explore-desc,
.qa-excerpt,
.story-excerpt,
.issue-desc,
.footer-tag,
.material-spec,
.tier-card-desc,
.svc-tile p,
.path-card p,
.exp-body p,
.mrow-main p,
.pcol p,
.ptl-content p,
.editorial-body p,
.booking-copy p,
.system-card p,
.explore-card p,
.step6 p,
.prail-step p,
.rstep p,
.role-body p,
.mistake-row p,
.tiers-header p,
.financing p,
.process-step p,
.final-cta-copy p,
.video-caption,
.getcard p,
.def-body p,
.cond-item p,
.diff-card figcaption,
/* Homepage + service card body copy */
.service-desc,
.service-body p,
.agitation-body,
/* Additional card and body copies surveyed across pages */
.pathway-card-desc,
.pcard-desc,
.pcard-body,
.pcard-body p,
.material-card-desc,
.material-card-body p,
.profile-desc,
.editorial-body,
.explore-body,
.explore-body p,
.explore-card-body p,
.relevance-body,
.relevance-body p:not(.relevance-close),
.pathway-body,
.pathway-body p,
.ovc-body,
.ovc-body p,
.sh-row-body,
.sh-row-body p,
.rs-body,
.rs-body p,
.tf-body,
.tf-body p,
.vp-body,
.vp-body p,
.why-body,
.why-body p,
.spanel-body,
.spanel-body p,
.specs-body,
.specs-body p,
.stage-body,
.stage-body p,
.svc-tile-body p,
.system-card-body p,
.tier-card-body p,
.platinum-body,
.platinum-body p,
.closing-copy,
.closing-copy p,
.comparison-body,
.comparison-body p,
.editorial-cta-text,
.faq-q-text,
.manifest-text,
.manifest-intro,
.process-intro,
.process-intro-body,
.values-intro,
.why-lead,
.promise-sub,
.promise-lead {
  font-size: 15.5px !important;
}

/* Golden serif italic callouts — sitewide. Client asked for 18px
   on every page that has this treatment. Overrides the older
   15.5px force and picks up any page that doesn't load
   ark-tuning.css (which also sets these to 18px on the 19 tuned
   pages — same value, no conflict). */
.intro-lead,
.relevance-close {
  font-family: 'GFS Didot', 'Times New Roman', serif !important;
  font-style: italic !important;
  color: #c79749 !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
}

/* Process card body copy (matches /roofing/ 16px) */
.process-card p,
.calendar-placeholder p {
  font-size: 16px !important;
}

/* Long-form intro copy, keep readable but preserve narrative rhythm */
.expert-intro,
.difference-intro,
.overview-body,
.paths-intro,
.materials-intro,
.matline-intro,
.shingles-intro,
.vantage-intro,
.conds-lead,
.submit-band-body,
.crosslink-body {
  font-size: 17px !important;
}

/* Mobile fine-tune: keep hero paragraph readable at narrow widths */
@media (max-width: 860px) {
  .hero-sub {
    font-size: 17px !important;
  }
  .expert-intro,
  .difference-intro,
  .overview-body,
  .submit-band-body,
  .crosslink-body {
    font-size: 16px !important;
  }
}

/* =============================================================
   Financing statement — keep serif but shrink from display size
   (clamp 26-40px) down to a paragraph-scale serif quote so it
   reads as body copy, not a headline. Italic gold emphasis on the
   highlighted phrase is preserved.
============================================================= */
.financing-statement {
  font-size: clamp(19px, 1.7vw, 24px) !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
}
@media (max-width: 860px) {
  .financing-statement {
    font-size: 18px !important;
    line-height: 1.55 !important;
  }
}

/* =============================================================
   NAV SHIM — the site-wide nav was rebuilt to use .nav-dropdown /
   .nav-dropdown-trigger / .nav-flyout. Most pages' inline CSS only
   defines the older .nav-services / .nav-service-trigger /
   .service-dropdown classes. These rules provide the new-class
   behavior so the mega-menu hides by default and opens on hover.
   .service-menu-group / .service-parent / .service-submenu already
   work on every page (they were consistent), so no shim needed for
   the nested levels.
============================================================= */
.nav-dropdown {
  position: relative;
  padding: 18px 0;
}
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-dropdown-trigger::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.75;
  transition: transform 0.3s ease;
}
.nav-dropdown:hover .nav-dropdown-trigger::after,
.nav-dropdown:focus-within .nav-dropdown-trigger::after {
  transform: translateY(0) rotate(45deg);
}
.nav-flyout {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 230px;
  padding: 12px;
  background: rgba(10,18,28,0.94);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 20px 45px rgba(0,0,0,0.22);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  z-index: 200;
}
.nav-dropdown:hover .nav-flyout,
.nav-dropdown:focus-within .nav-flyout {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav-flyout a {
  display: block;
  padding: 11px 14px;
  font-size: 10px;
  letter-spacing: 0.14em;
  white-space: nowrap;
  color: #fff;
}
.nav-flyout a:hover {
  opacity: 1;
  color: var(--gold, #e0b162);
  background: rgba(255,255,255,0.06);
}