/*
Theme Name: Flash Roofing
Theme URI: https://flashroofs.com/
Author: Bold Stripes Digital
Author URI: https://boldstripesdigital.com/
Description: Lean custom theme for Flash Roofing. Ships near-zero front-end CSS so generated per-page code renders untouched. Provides sitewide hardcoded header/footer and a modular head/body injection system. Built for a WordPress + RankMath stack.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: flashroofing
*/

/* ============================================================
   ACCESSIBILITY UTILITY
   .screen-reader-text for skip links. The full design system
   (resets, tokens, nav, footer) is in the GLOBAL DESIGN LAYER
   appended below.
   ============================================================ */

/* WP-required accessibility utility (skip links, etc.) */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #fff;
  clip: auto !important;
  clip-path: none;
  color: #111;
  display: block;
  font-size: 1rem;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* ============================================================
   GLOBAL DESIGN LAYER (Flash Roofing)
   Tokens, resets, typography, layout utilities, nav (smart
   header), footer, buttons, cards, scroll-reveal, focus.
   The hardcoded header.php/footer.php depend on everything
   below. Page-section CSS (.fr-hero, .fr-intro, etc.) lives
   with the generated page code, NOT here.
   ============================================================ */

:root{
  /* ---- Official brand palette (Flash Roofing Style Guide) ---- */
  --blue:        #071FB9;  /* primary brand blue */
  --blue-deep:   #071185;  /* deeper blue: deep sections, hovers */
  --blue-light:  #3A52E0;  /* lighter blue tint */
  --yellow:      #FFD558;  /* accent yellow (lighter) */
  --yellow-deep: #F8C80D;  /* accent yellow (saturated) */
  --grey:        #404040;  /* brand grey: body text */

  /* ---- Mapped role tokens ---- */
  --dark:        #0A0E33;  /* deepest surface: footer / deepest sections (blue-black) */
  --dark2:       var(--blue);      /* primary brand fills */
  --dark3:       #101A52;  /* card / surface on dark */
  --accent:      var(--blue);      /* links, highlights */
  --accent-light:#5E78F0;  /* hovers on dark */
  --accent-dark: var(--blue-deep);
  --accent2:     var(--blue);      /* eyebrows, dividers, cursor */
  --cta:         var(--yellow-deep);   /* primary conversion button */
  --cta-hover:   var(--yellow);
  --cta-text:    #1A1400;  /* readable text on yellow */
  --gold:        var(--yellow-deep);   /* stars / rating */

  --text:        #1B1F2E;  /* primary text on light */
  --text-mid:    var(--grey);          /* secondary text */
  --text-muted:  #6E727E;  /* captions */
  --text-invert: #EDEFFA;  /* text on dark */
  --text-invert-mid:#A6ADD6;

  --border:      #E1E3EE;  /* subtle border on light */
  --border-strong:#C7CAD9;
  --border-dark: #23306E;  /* border on dark */

  --light:       #F5F6FB;  /* page background (cool near-white) */
  --light2:      #FFFFFF;  /* pure card white */

  --pad-x: clamp(20px,6vw,100px);
  --pad-y: clamp(60px,8vw,112px);
  --nav-h: 74px;
  --maxw: 1200px;
  --radius: 4px;

  --font-display: 'Goldman', system-ui, sans-serif;  /* logo/heading face */
  --font-body:    'Inter', system-ui, sans-serif;     /* body + UI */

  --z-overlay: 1;
  --z-content: 2;
  --z-drawer:  99998;
  --z-nav:     99999;
}
@media (max-width:768px){
  :root{ --pad-x: clamp(16px,5vw,32px); --pad-y: clamp(48px,7vw,72px); }
}

/* ---- resets ---- */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; overflow-x:hidden !important; max-width:100vw; }
body{ font-family:var(--font-body); color:var(--text); background:var(--light); line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; }
a{ color:var(--accent); text-decoration:none; }

/* Gutenberg block reset for full-bleed landing pages */
.bsd-canvas .site-content,.bsd-canvas article{ margin:0; padding:0; max-width:100%; }
.bsd-canvas article > *:first-child{ margin-top:0; }

/* ---- typography ---- */
h1,h2,h3,.display{ font-family:var(--font-display); line-height:1.06; margin:0; color:var(--text); font-weight:700; }
h2.display{ font-size:clamp(1.9rem,4vw,3.1rem); letter-spacing:.5px; text-transform:uppercase; }
h2.display .accent{ color:var(--blue); }
h3.display{ font-size:clamp(1.15rem,2vw,1.45rem); letter-spacing:.4px; text-transform:uppercase; }
p{ margin:0 0 1.1em; color:var(--text-mid); }
.lead{ font-size:clamp(1.05rem,1.4vw,1.2rem); color:var(--text); font-weight:500; font-family:var(--font-body); }

/* ---- layout utilities ---- */
.container{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x); }
.py-section{ padding:var(--pad-y) 0; }
.section-light  { background:var(--light); }
.section-white  { background:var(--light2); }
.section-blue   { background:var(--blue);  color:var(--text-invert); }
.section-darker { background:var(--dark3); color:var(--text-invert); }
.section-darkest{ background:var(--dark);  color:var(--text-invert); }
.section-blue h2.display,.section-darker h2.display,.section-darkest h2.display{ color:#fff; }
.section-blue h2.display .accent,.section-darker h2.display .accent,.section-darkest h2.display .accent{ color:var(--yellow); }
.section-blue p,.section-darker p,.section-darkest p{ color:var(--text-invert-mid); }
.section-blue h3,.section-darker h3,.section-darkest h3{ color:#fff; }

/* ---- eyebrow ---- */
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--blue); margin-bottom:16px; }
.eyebrow::before{ content:''; display:block; width:26px; height:3px; background:var(--yellow-deep); flex-shrink:0; }
.section-blue .eyebrow,.section-darker .eyebrow,.section-darkest .eyebrow{ color:var(--yellow); }

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:.86rem; letter-spacing:.5px; text-transform:uppercase; padding:15px 26px; border-radius:var(--radius); border:2px solid transparent; text-decoration:none; transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease; }
.btn-lg{ padding:17px 32px; font-size:.94rem; }
.btn-primary{ background:var(--cta); color:var(--cta-text); text-decoration:none; }
.btn-primary:hover{ background:var(--cta-hover); transform:translateY(-2px); }
.btn-ghost{ background:transparent; border-color:rgba(255,255,255,.55); color:#fff; }
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.1); transform:translateY(-2px); }
.btn-arrow svg{ width:16px; height:16px; transition:transform .2s ease; }
.btn-arrow:hover svg{ transform:translateX(4px); }

/* ---- cards ---- */
.card{ background:var(--light2); border:1px solid var(--border); border-radius:var(--radius); transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.card:hover{ border-color:var(--blue); transform:translateY(-5px); box-shadow:0 18px 40px -24px rgba(7,31,185,.35); }

/* ---- review stars shell ---- */
.fr-stars{ display:inline-flex; gap:2px; }
.fr-stars svg{ width:15px !important; height:15px !important; }
.fr-svc-ico{ flex-shrink:0; }

/* ---- scroll reveal ---- */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal-delay="1"]{ transition-delay:.08s; }
[data-reveal-delay="2"]{ transition-delay:.16s; }
[data-reveal-delay="3"]{ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .fr-nav{ transition:none !important; }
}

/* =========================================================================
   SMART HEADER / NAV  (markup injected by Snippet 1)
   Visible at load; hides on scroll-down; reveals on scroll-up.
   ========================================================================= */
.fr-nav{
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:var(--z-nav);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad-x); background:rgba(255,255,255,.92);
  backdrop-filter:saturate(150%) blur(10px); border-bottom:1px solid var(--border);
  transform:translateY(0); transition:transform .35s ease, box-shadow .3s ease;
  will-change:transform;
}
.fr-nav.is-hidden{ transform:translateY(-100%); }     /* slid out (scroll down) */
.fr-nav.is-scrolled{ box-shadow:0 8px 24px -16px rgba(7,17,53,.4); }
.fr-nav-logo img{ height:44px; width:auto; }
.fr-nav-links{ display:flex; align-items:center; gap:28px; margin:0; padding:0; list-style:none; }
.fr-nav-links a{ font-family:var(--font-display); font-weight:700; font-size:.8rem; letter-spacing:.5px; text-transform:uppercase; color:var(--text); }
.fr-nav-links a:hover{ color:var(--blue); }
.fr-nav-end{ display:flex; align-items:center; gap:16px; }
.fr-nav-phone{ font-family:var(--font-display); font-weight:700; color:var(--text); font-size:.82rem; letter-spacing:.5px; display:inline-flex; align-items:center; gap:8px; }
.fr-nav-phone svg{ width:16px; height:16px; }
.fr-nav-phone:hover{ color:var(--blue); }

/* services dropdown */
.fr-nav-drop{ position:relative; }
.fr-nav-drop > a{ display:inline-flex; align-items:center; gap:6px; }
.fr-nav-drop > a svg{ width:12px; height:12px; transition:transform .2s ease; }
.fr-nav-drop:hover > a svg{ transform:rotate(180deg); }
.fr-nav-dropwrap{ position:absolute; top:100%; left:50%; transform:translateX(-50%); padding-top:14px; opacity:0; visibility:hidden; transition:opacity .18s ease; }
.fr-nav-drop:hover .fr-nav-dropwrap{ opacity:1; visibility:visible; }
.fr-nav-dropinner{ background:var(--light2); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 24px 50px -28px rgba(7,17,53,.45); padding:10px; min-width:250px; }
.fr-nav-dropinner a{ display:block; padding:9px 14px; border-radius:3px; font-weight:700; font-size:.74rem; letter-spacing:.5px; text-transform:uppercase; color:var(--text); }
.fr-nav-dropinner a:hover{ background:var(--light); color:var(--blue); }

/* ── Morphing hamburger → X (three CSS-drawn bars) ──
   The burger IS the toggle. On .is-open the bars morph into
   an X in place: top bar drops + rotates +45°, middle fades and
   scales to zero, bottom bar rises + rotates −45°. Springy easing
   with a slight per-bar stagger. No separate close button, no SVG. */
.fr-burger{
  display:none; position:relative;
  width:42px; height:42px; padding:0;
  border:1px solid var(--border-strong);
  background:transparent; border-radius:var(--radius);
  cursor:pointer; flex-direction:column;
  align-items:center; justify-content:center; gap:5px;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.fr-burger span{
  display:block; width:22px; height:2px; border-radius:2px;
  background:var(--dark); transform-origin:center;
  transition:
    transform .38s cubic-bezier(.68,-0.55,.27,1.55),
    opacity   .2s ease;
}
/* Springy stagger: middle bar collapses first, outer bars follow and
   rotate into the X a beat later for a bouncy, layered feel. */
.fr-burger span:nth-child(1){ transition-delay:.08s; }
.fr-burger span:nth-child(2){ transition-delay:0s; }
.fr-burger span:nth-child(3){ transition-delay:.08s; }

/* JS toggles the .is-open class on the burger. */
.fr-burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.fr-burger.is-open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.fr-burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* When the drawer is open, the burger bars would be dark-on-dark, so
   flip them to light to stay visible against the drawer. */
.fr-burger.is-open span{ background:#EDEFFA; }

/* mobile drawer */
.fr-drawer{ position:fixed; inset:0; z-index:var(--z-drawer); background:var(--dark); color:#fff; transform:translateX(100%); transition:transform .3s ease; padding:calc(var(--nav-h) + 20px) var(--pad-x) 40px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
.fr-drawer.is-open{ transform:none; }
.fr-drawer a{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; letter-spacing:.5px; text-transform:uppercase; color:#fff; padding:14px 0; border-bottom:1px solid var(--border-dark); }
.fr-drawer .fr-drawer-cta{ margin-top:24px; border:none; font-size:.94rem; }
.fr-drawer-phone{ display:inline-flex; align-items:center; gap:9px; color:#fff; font-family:var(--font-display); font-weight:700; margin-top:18px; border:none !important; }
.fr-drawer-phone svg{ width:18px; height:18px; }

@media (max-width:980px){
  .fr-nav-links,.fr-nav-drop{ display:none; }
  .fr-nav-phone-label{ display:none; }
  .fr-burger{ display:inline-flex; }
}

/* =========================================================================
   FOOTER  (markup injected by Snippet 2)
   ========================================================================= */
.fr-footer{ background:var(--dark); color:var(--text-invert); padding:var(--pad-y) var(--pad-x) 0; }
.fr-footer-grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:44px; }
.fr-footer h4{ font-family:var(--font-display); font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--yellow); margin:0 0 18px; font-weight:700; }
.fr-footer-logo{ height:46px; width:auto; margin-bottom:18px; }
.fr-footer p,.fr-footer address{ color:var(--text-invert-mid); font-style:normal; font-size:.92rem; line-height:1.7; }
.fr-footer ul{ list-style:none; margin:0; padding:0; }
.fr-footer ul li{ margin-bottom:11px; color:var(--text-invert-mid); font-size:.92rem; }
.fr-footer a{ color:var(--text-invert-mid); font-size:.92rem; }
.fr-footer a:hover{ color:#fff; }
.fr-footer-nap a{ color:#fff; font-weight:700; display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); letter-spacing:.5px; font-size:.92rem; }
.fr-footer-nap svg{ width:15px; height:15px; flex-shrink:0; }
.fr-footer-map{ border:0; width:100%; height:200px; border-radius:var(--radius); }
.fr-footer-cta{ margin-top:16px; }
.fr-footer-bottom{ max-width:var(--maxw); margin:0 auto; margin-top:48px; padding:24px 0; border-top:1px solid var(--border-dark); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.84rem; color:var(--text-muted); }
.fr-footer-bottom a{ color:var(--text-muted); }
@media (max-width:860px){ .fr-footer-grid{ grid-template-columns:1fr 1fr; gap:34px; } }
@media (max-width:540px){ .fr-footer-grid{ grid-template-columns:1fr; } }

/* ---- focus visibility ---- */
:focus-visible{ outline:3px solid var(--yellow-deep); outline-offset:3px; border-radius:2px; }

/* ============================================================
   DRAWER STACKING FIX
   The close button sat at z-index 99999, TIED with the fixed
   nav, which occupies the same top-right corner. Equal z-index
   let the nav intercept taps on the close button. Fix: raise
   the close button above the nav, and hide the nav while the
   drawer is open so nothing overlaps the X.
   ============================================================ */
.fr-drawer-close{ z-index: 100001 !important; } /* above nav (99999) and drawer */

/* When the drawer is open, push the nav out of the way so it
   can't overlap the close button or capture taps. The drawer
   carries its own logo space via padding-top already. */
body.fr-drawer-open .fr-nav{ transform: translateY(-100%) !important; }

/* ============================================================
   CLOSE-BUTTON SVG POINTER FIX
   LiteSpeed's HTML/lazyload processing can detach the inline
   <svg> inside the close button, so taps land on an orphaned
   <svg>/<line> that closest() can't trace back to the button.
   Making the icon non-interactive forces every tap in that
   area to resolve to the <button> itself. Same applied to the
   burger icon for consistency.
   ============================================================ */
.fr-drawer-close svg, .fr-drawer-close svg *{ pointer-events:none; }
/* Taps on the burger bars resolve to the button itself, never to a
   child span — keeps the toggle reliable regardless of LiteSpeed. */
.fr-burger span{ pointer-events:none; }
.fr-nav-phone svg, .fr-drawer-phone svg{ pointer-events:none; }