:root {
  color-scheme: light;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: #fff;
}

.captured-route {
  min-height: 100vh;
}

/* ===================================================================
   Newark (newark-faithful) readability + mobile-header fixes.
   Appended; loads after site.css/main.css so these win.
   =================================================================== */

/* hero/slug eyebrow was dark (#00000b) on a dark hero -> brand red, visible */
.mast-copy-slider .eyebrow, .mast-copy-slider .overline,
.page-mast .eyebrow, .page-mast .overline { color: #ff5a4d !important; }

/* darken the hero photos so the white + red hero text is readable over them */
.mast-copy-slider { position: relative !important; }
.mast-copy-slider img.nj-media { filter: brightness(.42) saturate(1.05) !important; }
.page-mast { position: relative !important; }
.page-mast img.nj-media, .page-mast > img { filter: brightness(.5) !important; }

/* slug/inner page-mast lede was dark-grey on a dark photo -> light + shadow */
.page-mast .copy, .page-mast .copy p, .page-mast p, .page-mast li,
.page-mast .slide-copy, .page-mast .slide-copy p {
  color: #f4f4f4 !important; text-shadow: 0 1px 14px rgba(0,0,0,.65);
}

/* DESKTOP dropdown panels: dark links on a transparent panel were invisible over
   the dark hero -> solid white panel + dark links (readable mega-menu) */
@media (min-width: 901px) {
  .content-contain .hidden-content .content,
  .nav-link.dropdown .hidden-anchors .anchors {
    background: #ffffff !important; border-radius: 14px !important;
    box-shadow: 0 26px 60px rgba(0,0,0,.45) !important; pointer-events: auto !important;
  }
  .content-contain .hidden-content .content,
  .content-contain .hidden-content .content *,
  .nav-link.dropdown .hidden-anchors a { color: #14161b !important; }
  .content-contain .hidden-content .content a:hover,
  .nav-link.dropdown .hidden-anchors a:hover { color: #db382b !important; }
}

/* MOBILE header: the red .topnav wrapped phone/email/areas/contact into a giant
   cluttered block -> keep only the click-to-call phone in one compact row */
@media (max-width: 900px) {
  .topnav .topnav-contain a:not([href^="tel"]) { display: none !important; }
  .topnav { padding: .4rem 0 !important; }
  .topnav .topnav-contain {
    justify-content: flex-end !important; flex-wrap: nowrap !important; gap: 0 !important;
    padding-left: 1rem !important; padding-right: 1rem !important;
  }
  .topnav .topnav-contain a[href^="tel"] { white-space: nowrap !important; font-size: .92rem !important; }

  /* mobile drawer: dark links on transparent -> solid dark panel + white links */
  .nav-open .links-contain { background: #0e1014 !important; }
  .nav-open .links-contain a, .nav-open .links-contain span,
  .nav-open .links-contain .text, .nav-open .links-contain p { color: #ffffff !important; }
}

/* Decorative .section-svg is opacity:0/visibility:hidden (invisible) but kept LAYOUT space
   in static flow — a tall-narrow polygon scaled by width to ~2765px, creating huge white-space
   bands on home/inner pages. It's invisible by design, so drop it from layout. Floating
   decorations (.floating-section-svg .section-svg{display:block}) keep their more-specific rule. */
.section-svg{display:none !important}

/* ===================================================================
   njfix3 — scroll-aware header + side-by-side phantom-whitespace fix +
   homepage image fill. Appended; loads last so these win.
   =================================================================== */

/* -------------------------------------------------------------------
   3) HEADER BACKGROUND ON SCROLL
   The captured theme's <nav> is position:fixed + transparent and was built
   to gain a solid bg via a `scrolled` class that the stripped Webflow JS used
   to toggle. main.css already styles `nav.scrolled` (white bg, hidden topnav,
   dark .nav-link). We (a) re-add the toggle in site.js and (b) patch the two
   things main.css's nav.scrolled rules DON'T cover for this build's markup:
   the logo image shadow and the CTA button. */
nav.scrolled { background: #ffffff !important; box-shadow: 0 2px 14px rgba(0,0,0,.10) !important; }
nav.scrolled .brand-logo { filter: drop-shadow(0 0 1px rgba(0,0,0,.35)) drop-shadow(0 1px 2px rgba(0,0,0,.16)) !important; }
/* desktop nav links + CTA readable on the white scrolled bar */
@media (min-width: 901px) {
  nav.scrolled .links-contain .nav-link,
  nav.scrolled .links-contain .nav-link .text span,
  nav.scrolled .links-contain .nav-link a { color: #14161b !important; }
  nav.scrolled .links-contain .nav-link:hover,
  nav.scrolled .links-contain .nav-link:hover .text span { color: #de0018 !important; }
  /* the "Request Roof Help" transparent CTA: dark text on white, red on hover */
  nav.scrolled .links-contain .ctas .btn.transparent .text span { color: #14161b !important; }
  nav.scrolled .links-contain .ctas .btn.transparent:hover .text span { color: #ffffff !important; }
  /* the drawer-only "Call ..." pill is hidden on desktop; keep it that way */
}
/* burger bars dark when scrolled (mobile + the desktop burger this theme shows) */
nav.scrolled .burger-contain #burger span { background: #14161b !important; }

/* -------------------------------------------------------------------
   1) PHANTOM WHITE SPACE — .copy-image-side-by-side with NO image half.
   Every inner/slug page renders this section with only the left .copy
   column (the article lives in .copy .nj-detail-copy) and an EMPTY right
   column. At >=1024px the theme pins .copy to width:50%, leaving a tall
   ~50%-wide white void running the full length of the article.
   Fix: when the section is the slug-article variant (.copy holds
   .nj-detail-copy), let the prose use the full column width so there is
   no void. The homepage variant (short .copy, no .nj-detail-copy) instead
   gets a real image panel injected into the markup (see index.html). */
@media (min-width: 1024px) {
  .copy-image-side-by-side .contain .copy:has(.nj-detail-copy) {
    width: 100% !important;
    max-width: 70rem !important;     /* comfortable measure for long-form reading */
    margin: 0 auto !important;
    padding: 6rem 0 0 !important;
  }
  /* this variant has no image rail, so the section no longer needs a tall min-height */
  .copy-image-side-by-side:has(.copy .nj-detail-copy) {
    min-height: 0 !important;
  }
}
/* Fallback for engines without :has() — never let this section force 690px of
   empty height when it has no image; the content defines the height. */
@supports not (selector(:has(*))) {
  .copy-image-side-by-side { min-height: 0 !important; }
}

/* -------------------------------------------------------------------
   2) HOMEPAGE image-fill side-by-side panel.
   The injected .img-contain on the homepage reuses the captured theme's
   animated diagonal-clip panel. Ensure the photo is visible even if the
   .in-view reveal timing misfires (site.js adds in-view to .animate). */
.copy-image-side-by-side .contain .img-contain .img img { opacity: 1 !important; }
.copy-image-side-by-side.in-view .contain .img-contain .img img { opacity: 1 !important; }