/*
 * Crown Shadeports design system — tokens + component classes.
 * Source of truth: /docs/design/tokens/*.css and /docs/design/readme.md.
 * Used by GenerateBlocks pages via each block's "Global Classes" (globalClasses attribute).
 */

/* ============ TOKENS ============ */
:root{
  --font-body:"Open Sans","Helvetica Neue",Arial,sans-serif;
  --font-heading:"Source Sans 3","Open Sans",Arial,sans-serif;
  --font-wordmark:"Oswald","Source Sans 3",Arial,sans-serif;

  --navy-50:#eff3f9; --navy-100:#dbe4f1; --navy-200:#c3cddc; --navy-300:#879cb9;
  --navy-400:#4a6a96; --navy-500:#2a5da3; --navy-600:#17498c; --navy-700:#0f3974;
  --navy-800:#0b2a56; --navy-900:#071c39;
  --orange-50:#fef6f0; --orange-100:#f9dfc7; --orange-200:#f4bf90; --orange-300:#ee9f58;
  --orange-400:#f19b4e; --orange-500:#e98021; --orange-600:#d06f18; --orange-700:#b85f11;
  --charcoal-400:#5c5c5c; --charcoal-500:#454545; --charcoal-600:#3a3a3a; --charcoal-700:#262626; --charcoal-900:#131313;
  --white:#ffffff;
  --grey-25:#fafbfc; --grey-50:#f6f7f9; --grey-100:#eceef1; --grey-200:#d8dce1;
  --grey-300:#bcc2ca; --grey-400:#a8aeb6; --grey-500:#6b7178; --grey-600:#545a61;
  --green-500:#1f7a45; --green-50:#e9f4ee;

  --surface-page:var(--white); --surface-muted:var(--grey-50); --surface-card:var(--white);
  --surface-navy:var(--navy-700); --surface-navy-deep:var(--navy-900); --surface-navy-soft:var(--navy-50);

  --text-heading:var(--navy-800); --text-body:var(--charcoal-500); --text-muted:var(--grey-500);
  --text-inverse:var(--white); --text-inverse-muted:var(--navy-200);
  --text-accent:var(--orange-600); --text-link:var(--navy-700); --text-link-hover:var(--orange-600);

  --border-subtle:var(--grey-200); --border-strong:var(--grey-300);

  --action-primary:var(--orange-500); --action-primary-hover:var(--orange-600); --action-primary-active:var(--orange-700);
  --action-secondary:var(--navy-700); --action-secondary-hover:var(--navy-800); --action-secondary-active:var(--navy-900);

  --text-display:57.6px; --text-h2:46.8px; --text-h3:27px; --text-h4:24px; --text-h5:20px;
  --text-body-lg:18px; --text-body-md:16px; --text-body-sm:14.4px; --text-eyebrow:13px;
  --leading-tight:1.08; --leading-heading:1.16; --leading-snug:1.35; --leading-body:1.6;
  --tracking-wordmark:0.02em; --tracking-eyebrow:0.14em; --tracking-tight:-0.015em;

  --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px;
  --container-max:1180px; --gutter:24px; --gutter-lg:40px; --section-y:80px;
  --card-pad:24px; --card-pad-lg:32px; --grid-gap:24px;

  --radius-sm:4px; --radius-md:6px; --radius-lg:10px; --radius-pill:999px;

  --shadow-sm:0 1px 3px rgba(19,19,19,.08),0 1px 2px rgba(19,19,19,.04);
  --shadow-md:0 4px 12px rgba(11,42,86,.09);
  --shadow-lg:0 12px 28px rgba(11,42,86,.14);
  --shadow-sticky:0 2px 10px rgba(11,42,86,.10);
  --shadow-focus:0 0 0 3px rgba(233,128,33,.35);

  --scrim-left:linear-gradient(to right,rgba(7,28,57,.88) 0%,rgba(7,28,57,.55) 45%,rgba(7,28,57,0) 85%);
  --scrim-bottom:linear-gradient(to top,rgba(7,28,57,.86) 0%,rgba(7,28,57,.62) 38%,rgba(7,28,57,.10) 78%,rgba(7,28,57,0) 100%);

  --duration-base:180ms; --duration-fast:120ms;
  --ease-standard:cubic-bezier(.2,.6,.3,1);
}

/* ============ BASE ============ */
*,*::before,*::after{ box-sizing:border-box; }
body{ background:var(--surface-page); color:var(--text-body); font:400 var(--text-body-lg)/var(--leading-body) var(--font-body); }
.gb-text{ margin:0; }
:where(h1,h2,h3,h4,h5).gb-text{ font-family:var(--font-heading); color:var(--text-heading); text-wrap:balance; }
:where(p).gb-text{ max-width:62ch; }
:where(a).gb-text{ text-decoration:none; color:var(--text-link); }
:where(a).gb-text:hover{ color:var(--text-link-hover); text-decoration:underline; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--navy-700); outline-offset:2px; box-shadow:var(--shadow-focus); border-radius:var(--radius-sm); }

.skip-link{
  position:absolute; left:16px; top:-48px; z-index:1000; background:var(--navy-900); color:var(--white);
  padding:12px 20px; border-radius:var(--radius-md); font:700 16px/1 var(--font-body);
  transition:top var(--duration-base) var(--ease-standard);
}
.skip-link:focus{ top:16px; }
.visually-hidden{ position:absolute!important; width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* ============ LAYOUT ============ */
.container{ max-width:var(--container-max); margin:0 auto; padding-inline:var(--gutter); }
/* GeneratePress's own "One Container" layout style targets any element
   named .container with `.one-container .container{background-color:var(--base-3)}`
   (opaque white) - same class name as this design system's generic wrapper,
   different purpose. That stylesheet loads after this one, so at equal
   specificity it wins, silently forcing a white box wherever a .hero/.band
   section wraps its content in .container. Usually invisible (light bands,
   or covered by the hero photo/scrim), but breaks completely on dark bands
   (e.g. .band-navy) - text set for a dark background renders on white with
   no contrast. Scoped to just these two component classes so GP's own
   "Container" layout style elsewhere on the site is untouched. */
.hero .container, .band .container{ background:transparent!important; }
.band{ padding-block:var(--section-y); }
.band-muted{ background:var(--surface-muted); }
.band-navy{ background:var(--surface-navy); color:var(--text-inverse); }
.grid{ display:grid; gap:var(--grid-gap); }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid-5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
@media (max-width:980px){ .grid-4,.grid-5{ grid-template-columns:repeat(2,minmax(0,1fr)); } .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4,.grid-5{ grid-template-columns:1fr; } }
.stack{ display:flex; flex-direction:column; gap:var(--space-6); }
.stack-tight{ display:flex; flex-direction:column; gap:var(--space-3); }
.cluster{ display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; }
.center-v{ align-items:center; }

/* ============ ICON ============ */
.icon{ width:20px; height:20px; flex:none; }
.icon-14{ width:14px; height:14px; }
.icon-16{ width:16px; height:16px; }
.icon-24{ width:24px; height:24px; }
.icon-28{ width:28px; height:28px; }
.icon-orange{ color:var(--orange-500); }
.icon-orange-inverse{ color:var(--orange-400); }
.icon-navy{ color:var(--navy-700); }

/* ============ TYPE ============ */
.eyebrow{ font:700 var(--text-eyebrow)/1 var(--font-body); text-transform:uppercase; letter-spacing:var(--tracking-eyebrow); color:var(--text-accent); display:inline-block; }
.eyebrow-inverse{ color:var(--orange-300); }
.h1{ font:700 var(--text-display)/var(--leading-tight) var(--font-heading); letter-spacing:var(--tracking-tight); }
.h2{ font:700 var(--text-h2)/var(--leading-heading) var(--font-heading); letter-spacing:var(--tracking-tight); }
.h3{ font:600 var(--text-h3)/var(--leading-snug) var(--font-heading); }
.h4{ font:600 var(--text-h4)/var(--leading-snug) var(--font-heading); }
.h5{ font:600 var(--text-h5)/var(--leading-snug) var(--font-heading); }
.lede{ font-size:var(--text-body-lg); color:var(--text-body); }
.body-sm{ font-size:var(--text-body-sm); }
.body-md{ font-size:var(--text-body-md); }
.accent{ color:var(--orange-400); }
.text-inverse{ color:var(--text-inverse); }
.text-inverse-muted{ color:var(--text-inverse-muted); }
.text-muted{ color:var(--text-muted); }
@media (max-width:640px){ .h1{ font-size:36px; } .h2{ font-size:30px; } .h3{ font-size:22px; } .band{ padding-block:56px; } }
.mb-10{ margin-bottom:var(--space-10); }

/* ============ BUTTONS (built on generateblocks/text, tagName a) ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:44px; padding:0 var(--space-6); border-radius:var(--radius-md);
  font:700 var(--text-body-md)/1 var(--font-body)!important; text-decoration:none!important; cursor:pointer;
  border:2px solid transparent; transition:background-color var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard);
}
.btn-lg{ min-height:52px; padding:0 var(--space-8); font-size:17px!important; }
.btn-primary{ background:var(--action-primary); border-color:var(--action-primary); color:var(--white)!important; }
.btn-primary:hover{ background:var(--action-primary-hover); border-color:var(--action-primary-hover); color:var(--white)!important; }
.btn-secondary{ background:var(--action-secondary); border-color:var(--action-secondary); color:var(--white)!important; }
.btn-secondary:hover{ background:var(--action-secondary-hover); border-color:var(--action-secondary-hover); color:var(--white)!important; }
.btn-outline{ background:transparent; border-color:var(--navy-700); color:var(--navy-700)!important; }
.btn-outline:hover{ background:var(--navy-50); }
.btn-outline-inverse{ background:transparent; border-color:rgba(255,255,255,.55); color:var(--white)!important; }
.btn-outline-inverse:hover{ background:rgba(255,255,255,.12); border-color:var(--white); }

/* ============ CARD ============ */
.card{ background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:var(--card-pad); }
.card-lg{ padding:var(--card-pad-lg); }
.card-muted{ background:var(--surface-muted); border-color:var(--surface-muted); box-shadow:none; }

/* ============ BADGE ============ */
.badge{ display:inline-flex; align-items:center; gap:var(--space-2); padding:8px 16px; border-radius:var(--radius-pill); font:600 var(--text-body-sm)/1 var(--font-body); background:var(--surface-navy-soft); color:var(--navy-700); }

/* ============ TRUST STRIP ============ */
.trust-strip{ display:flex; flex-wrap:wrap; gap:var(--space-6); list-style:none; margin:0; padding:8px 0 0; }
.trust-strip-item{ display:flex; align-items:center; gap:var(--space-2); font:600 var(--text-body-sm)/1.3 var(--font-body); }

/* ============ TOP BAR ============ */
.topbar{ position:sticky; top:0; z-index:100; background:var(--white); box-shadow:var(--shadow-sticky); }
.topbar-contact{ background:var(--navy-900); color:var(--navy-200); }
.topbar-contact-row{ display:flex; justify-content:flex-end; gap:var(--space-6); padding-block:6px; font-size:13px; }
.topbar-contact-row a.gb-text{ color:var(--navy-200); display:inline-flex; align-items:center; gap:6px; }
.topbar-contact-row a.gb-text:hover{ color:var(--white); }
.topbar-main-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); padding-block:var(--space-3); }
.wordmark{ font-family:var(--font-wordmark); letter-spacing:var(--tracking-wordmark); font-weight:700; font-size:22px; display:inline-flex; gap:4px; }
.wordmark-crown{ color:var(--navy-700); }
.wordmark-shadeports{ color:var(--orange-500); }
.nav-primary{ display:flex; gap:var(--space-6); align-items:center; list-style:none; margin:0; padding:0; }
.nav-primary a.gb-text{ color:var(--navy-800); font:600 var(--text-body-md)/1 var(--font-body); padding:8px 0; border-bottom:2px solid transparent; display:inline-block; }
.nav-primary a.gb-text:hover{ color:var(--text-accent); }
.nav-current{ border-bottom-color:var(--orange-500)!important; color:var(--text-accent)!important; }

/* ============ BREADCRUMB ============ */
.breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); font-size:var(--text-body-sm); list-style:none; margin:0; padding:0; }
.breadcrumb li{ display:flex; align-items:center; gap:var(--space-2); }
.breadcrumb a.gb-text{ color:var(--navy-200); }
.breadcrumb a.gb-text:hover{ color:var(--white); text-decoration:underline; }
.breadcrumb-current{ color:var(--white); font-weight:600; }

/* ============ HERO ============ */
.hero{ position:relative; background:var(--charcoal-700); overflow:hidden; }
.hero-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-scrim{ position:absolute; inset:0; background:var(--scrim-left); }
.hero-content{ position:relative; padding-block:var(--space-12) var(--space-16); max-width:720px; }

/* ============ PHOTO FRAME ============ */
.photo-frame{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.photo-frame img{ width:100%; height:100%; object-fit:cover; }
.photo-caption{ position:absolute; left:0; right:0; bottom:0; padding:var(--space-5) var(--space-5) var(--space-4); background:var(--scrim-bottom); color:var(--white); font:600 var(--text-body-sm)/1.4 var(--font-body); }
.ratio-16-10{ aspect-ratio:16/10; }
.ratio-4-3{ aspect-ratio:4/3; }

/* ============ SERVICE / AREA / WHY CARDS ============ */
.service-card{ display:flex; flex-direction:column; gap:var(--space-3); position:relative; }
.icon-wrap{ width:52px; height:52px; border-radius:var(--radius-lg); background:var(--surface-navy-soft); display:flex; align-items:center; justify-content:center; }
.service-badge{ position:absolute; top:var(--card-pad); right:var(--card-pad); }
.area-card{ display:flex; flex-direction:column; gap:8px; }
.area-card-title{ display:flex; align-items:center; gap:8px; }
.why-card{ display:flex; gap:var(--space-4); align-items:flex-start; }

/* ============ STEP LIST ============ */
.step-list{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--space-6); list-style:none; margin:0; padding:0; }
@media (max-width:980px){ .step-list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .step-list{ grid-template-columns:1fr; } }
.step{ display:flex; flex-direction:column; gap:var(--space-3); }
.step-num{ width:40px; height:40px; border-radius:50%; border:2px solid var(--orange-500); color:var(--orange-600); display:flex; align-items:center; justify-content:center; font:700 16px/1 var(--font-heading); }

/* ============ PRICE TABLE (core/table) ============ */
.price-table{ border-radius:var(--radius-lg) var(--radius-lg) 0 0; overflow:hidden; box-shadow:var(--shadow-sm); background:var(--white); margin:0; }
.price-table table{ border-collapse:collapse; width:100%; }
.price-table thead th{ background:var(--navy-700); color:var(--white); text-align:left; font:600 var(--text-body-md)/1 var(--font-heading); padding:var(--space-4) var(--card-pad); }
.price-table td{ padding:var(--space-4) var(--card-pad); border-bottom:1px solid var(--border-subtle); font-size:var(--text-body-md); }
.price-table tr:last-child td{ border-bottom:0; }
.price-note{ padding:var(--space-4) var(--card-pad) var(--card-pad); font-size:var(--text-body-sm); color:var(--text-muted); background:var(--white); margin:0; border-radius:0 0 var(--radius-lg) var(--radius-lg); box-shadow:var(--shadow-sm); }

/* ============ FAQ (core/details) ============ */
.faq-sticky{ position:sticky; top:130px; }
.faq{ border-top:1px solid var(--border-subtle); }
.faq details{ border-bottom:1px solid var(--border-subtle); }
.faq summary{ padding:var(--space-5) 0; cursor:pointer; font:600 var(--text-h5)/1.3 var(--font-heading); color:var(--text-heading); }
.faq p{ margin:0 0 var(--space-5); font-size:var(--text-body-md); max-width:70ch; }

/* ============ PULL QUOTE ============ */
.pull-quote{ border-left:4px solid var(--orange-500); padding-left:var(--space-5); }
.pull-quote p.gb-text{ margin:0; font:600 var(--text-h5)/1.4 var(--font-heading); color:var(--text-heading); max-width:none; }
.pull-quote .quote-cite{ display:block; margin-top:8px; font:400 var(--text-body-sm)/1 var(--font-body); color:var(--text-muted); font-style:normal; }

/* ============ FOOTER ============ */
.site-footer{ background:var(--surface-navy-deep); color:var(--navy-200); }
.site-footer a.gb-text{ color:var(--navy-200); }
.site-footer a.gb-text:hover{ color:var(--white); text-decoration:underline; }
.footer-heading{ color:var(--white)!important; text-transform:uppercase; letter-spacing:.06em; font-size:13px!important; margin-bottom:var(--space-4)!important; }
.footer-wordmark{ margin-bottom:var(--space-4); display:inline-flex; }
.footer-wordmark-crown{ color:var(--navy-200); }
.footer-wordmark-shadeports{ color:var(--orange-400); }
.footer-tagline{ color:var(--navy-300); max-width:32ch; }
.footer-cta-btn{ margin-top:var(--space-2); align-self:flex-start; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:var(--gutter-lg); padding-block:var(--space-16); }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; row-gap:var(--space-10); } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-links{ display:flex; flex-direction:column; gap:var(--space-3); font-size:var(--text-body-sm); list-style:none; margin:0; padding:0; }
.contact-line{ display:flex; align-items:flex-start; gap:10px; font-size:var(--text-body-sm); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-block:var(--space-5); font-size:13px; color:var(--navy-300); }

/* The live sitewide footer (GenerateBlocks Pro "Site Footer" element) predates
   this design system and isn't built with the .site-footer/.footer-* classes
   above - it uses GB's own auto-generated classes and falls back to the
   sitewide heading color (--text-heading, navy-800), which fails contrast on
   this footer's navy-900 background (1.2:1, WCAG needs 3:1). Scoped to the
   <footer> landmark only, so no other page's headings are affected. */
footer :where(h1, h2, h3, h4, h5).gb-text{ color:var(--navy-200); }

/* ============ FORM CARD (Ninja Forms wrapper) ============ */
.quote-form-card .nf-form-title{ display:none; }