/* ============================================================
   Shinnova — site-wide design overrides
   Linked LAST in each active page's <head> (after its inline <style>),
   so these win. Mirrors the WordPress theme's theme-overrides.css.
   Font-size rules use !important to win over the per-page inline CSS
   regardless of selector specificity (these are fixed-px, non-responsive
   values, so there is nothing for !important to fight).
   ============================================================ */

/* ---- TUNABLE TYPE MULTIPLIERS (fix #3) ----
   body/card text +~12% (was +50%, taken down 25%). Hero supporting text now
   matches the body scale (request). Section HEADLINES shrunk 25%. The hero
   headline is left at full size. */
:root {
  --scale-body:     1.125;
  --scale-header:   1.125;
  --scale-statnum:  1.4;
  --scale-headline: 0.75;
}

/* ===== GLOBAL (all pages) ===== */
.lede        { font-size: calc(18px * var(--scale-body)) !important; }
.eyebrow     { font-size: calc(12px * var(--scale-body)) !important; }
.text-link   { font-size: calc(12px * var(--scale-body)) !important; }

/* Keep the nav logo from being squeezed/clipped, and stop links wrapping mid-word. */
.nav .nav-logo     { flex: 0 0 auto; }
.nav .nav-logo img { object-fit: contain; width: auto; height: 48px; }
/* Nav menu links: match body text size + bold (request). */
.nav-link          { white-space: nowrap; font-size: 17px !important; font-weight: 700 !important; }

/* Bottom-align the section-head lede with the headline (drop default p margin). */
.section-head .lede { margin-bottom: 0 !important; }

/* Section headlines shrunk 25% to balance the smaller body text (request). */
.display-lg { font-size: calc(clamp(44px, 6vw, 96px) * var(--scale-headline)) !important; }
.display-md { font-size: calc(clamp(34px, 4.2vw, 72px) * var(--scale-headline)) !important; }
.display-sm { font-size: calc(clamp(26px, 3vw, 52px) * var(--scale-headline)) !important; }
.section-head h2 { font-size: calc(clamp(40px, 5vw, 80px) * var(--scale-headline)) !important; }

/* Wider heading column + balanced wrapping (fix #6) */
.section-head { grid-template-columns: 1.35fr 1fr; gap: 56px; }
.display, .section-head .display, .svc-card h3 { text-wrap: balance; }
@media (max-width: 880px) { .section-head { grid-template-columns: 1fr; } }

/* ===== HOMEPAGE ===== */
.hero-sub                 { font-size: calc(19px * var(--scale-header)) !important; line-height: 1.5; max-width: 40ch; }
.hero-eyebrow .eyebrow    { font-size: calc(12px * var(--scale-header)) !important; }
.hero-meta-item .label    { font-size: calc(11px * var(--scale-header)) !important; }
.hero-meta-item .num      { font-size: 42px !important; }
.hero-meta                { gap: 30px !important; }
.svc-card p               { font-size: calc(18px * var(--scale-body)) !important; max-width: none; }
.svc-card .num            { font-size: calc(11px * var(--scale-body)) !important; font-weight: 300 !important; }
/* Taller card + trimmed padding so the larger body copy doesn't clip the tagline. */
.svc-card                 { aspect-ratio: 3 / 4; }
.svc-card-inner           { padding: 36px 40px; }
.prod-card p              { font-size: calc(14px * var(--scale-body)) !important; }
.prod-card .cat           { font-size: calc(10px * var(--scale-body)) !important; }
.proc-step p,
.promise-pt p,
.t-card .quote            { font-size: calc(16px * var(--scale-body)) !important; line-height: 1.5; }

/* Hero video +20% (fix #5) */
.hero-visual { width: min(775px, 57.6vw); }
@media (max-width: 980px) { .hero-visual { width: min(672px, 92%); } }

/* Headline at 80% of its original size, on every screen (request). */
.hero .display-xl { font-size: calc(clamp(56px, 8.5vw, 144px) * 0.8) !important; }

/* Large screens only: trim the hero headline a further 5% so the CTAs clear
   the fold on big monitors (smaller windows already fit, so leave them be). */
@media (min-width: 1280px) {
  .hero .display-xl { font-size: calc(clamp(56px, 8.5vw, 144px) * 0.76) !important; }
}

/* Tighten the multi-line hero headline + trim the inter-element gaps so the
   CTAs sit higher (the 4-line headline was the main height driver). */
.hero h1.display-xl    { line-height: 0.86 !important; }
.hero .hero-eyebrow    { margin-bottom: 18px !important; }
.hero h1.display-xl    { margin-bottom: 20px !important; }
.hero .hero-sub        { margin-bottom: 28px !important; }
.hero .hero-ctas       { margin-bottom: 40px !important; }

/* Cut the whitespace above the eyebrow ~60% (100px → 44px) and collapse the
   vertical-centering slack so the reduction is real on tall screens too. */
.hero { min-height: 0 !important; padding-top: 44px !important; }

/* ------------------------------------------------------------
   SHORT-VIEWPORT HERO FIT
   Guarantee the "Get a Free Quote" / "See How It Works" CTAs are
   visible on load without scrolling. On short screens only: shrink
   the headline (~80%) and compress the hero's vertical rhythm.
   Tall screens are untouched.
   ------------------------------------------------------------ */
@media (max-height: 880px) {
  .hero { min-height: 0 !important; padding-top: 40px !important; padding-bottom: 64px !important; }
  .hero-eyebrow { margin-bottom: 18px !important; }
  .hero h1 { margin-bottom: 20px !important; }
  .hero-sub { margin-bottom: 22px !important; }
  .hero-ctas { margin-bottom: 26px !important; }
}
@media (max-height: 700px) {
  .hero { padding-top: 28px !important; padding-bottom: 32px !important; }
  .hero .display-xl { font-size: calc(clamp(56px, 8.5vw, 144px) * 0.72) !important; }
  .hero-eyebrow { margin-bottom: 8px !important; }
  .hero h1 { margin-bottom: 10px !important; }
  .hero-sub { margin-bottom: 12px !important; line-height: 1.4 !important; font-size: calc(17px * var(--scale-body)) !important; }
  .hero-ctas { margin-bottom: 14px !important; }
  .hero-meta { gap: 28px !important; }
}

/* ------------------------------------------------------------
   INNER-PAGE HEROES — mirror the homepage hero treatment:
   headline ~80%, collapsed top whitespace + top-aligned content,
   and the same short-viewport fit. Covers .page-hero (Residential,
   Commercial, Service Areas, About), .hub-hero (How It Works), and
   the EcoFlow .hero headline (.hero base/tiers already apply to it).
   ------------------------------------------------------------ */
.page-hero, .hub-hero        { min-height: 0 !important; padding-top: 44px !important; }
.hero-grid, .page-hero-grid  { align-items: start !important; }

/* Headlines at 80% (each from its own base size). */
.page-hero .display-xl       { font-size: calc(clamp(56px, 8.5vw, 144px) * 0.56) !important; } /* Commercial, Residential */
.page-hero h1, .hub-hero h1  { font-size: calc(clamp(48px, 7vw, 108px) * 0.8) !important; }   /* Service Areas, About, How It Works */
.hero h1                     { font-size: calc(clamp(56px, 8vw, 128px) * 0.66) !important; }    /* EcoFlow (homepage display-xl wins via specificity) */

@media (max-height: 880px) {
  .page-hero, .hub-hero          { padding-top: 40px !important; padding-bottom: 64px !important; }
  .breadcrumb                    { margin-bottom: 14px !important; }
  .page-hero h1, .hub-hero h1    { margin-bottom: 18px !important; }
  .page-hero-sub, .hub-hero-sub  { margin-bottom: 22px !important; }
  .page-hero-ctas                { margin-bottom: 26px !important; }
}
@media (max-height: 700px) {
  .page-hero, .hub-hero          { padding-top: 28px !important; padding-bottom: 32px !important; }
  .page-hero .display-xl         { font-size: calc(clamp(56px, 8.5vw, 144px) * 0.54) !important; }
  .page-hero h1, .hub-hero h1    { font-size: calc(clamp(48px, 7vw, 108px) * 0.72) !important; margin-bottom: 10px !important; }
  .hero h1                       { font-size: calc(clamp(56px, 8vw, 128px) * 0.58) !important; }
  .breadcrumb                    { margin-bottom: 8px !important; }
  .page-hero-sub, .hub-hero-sub  { margin-bottom: 12px !important; }
  .page-hero-ctas                { margin-bottom: 14px !important; }
}

/* ===== COMMERCIAL PAGE ===== */
.page-hero-sub                 { font-size: calc(18px * var(--scale-header)) !important; line-height: 1.5; }
.page-hero .breadcrumb         { font-size: calc(12px * var(--scale-body)) !important; }
.page-hero-meta .hero-stat .l  { font-size: calc(11px * var(--scale-header)) !important; }
.page-hero-meta .hero-stat .n  { font-size: calc(40px * var(--scale-statnum)) !important; }
.roi-item .lbl                 { font-size: calc(13px * var(--scale-body)) !important; }
.roi-item .desc                { font-size: calc(13px * var(--scale-body)) !important; }
.prob-card p                   { font-size: calc(15px * var(--scale-body)) !important; }
.ind-card p                    { font-size: calc(14px * var(--scale-body)) !important; }
.fin-item .body span           { font-size: calc(14px * var(--scale-body)) !important; }
.how-step p                    { font-size: calc(15px * var(--scale-body)) !important; }
.cta-note                      { font-size: calc(12px * var(--scale-body)) !important; }
.hero-img-label                { font-size: calc(11px * var(--scale-body)) !important; }

/* ===== SERVICE-AREA PAGES (KC / St. Louis) ===== */
.breadcrumb                { font-size: calc(11px * var(--scale-body)) !important; }
.city-pill .txt            { font-size: calc(12px * var(--scale-body)) !important; }
.local-stat .n             { font-size: calc(36px * var(--scale-statnum)) !important; }
.local-stat .l             { font-size: calc(10px * var(--scale-header)) !important; }
.section-head .right       { font-size: calc(17px * var(--scale-body)) !important; line-height: 1.6; }
.office-info p             { font-size: calc(16px * var(--scale-body)) !important; }
.contact-card .lab         { font-size: calc(10px * var(--scale-body)) !important; }
.contact-card .sub         { font-size: calc(12px * var(--scale-body)) !important; }
.area-col li               { font-size: calc(13px * var(--scale-body)) !important; }
.gallery-card .neighborhood{ font-size: calc(10px * var(--scale-body)) !important; }
.gallery-card p            { font-size: calc(12px * var(--scale-body)) !important; }
.gallery-card .specs span  { font-size: calc(10px * var(--scale-body)) !important; }
.util-card p               { font-size: calc(14px * var(--scale-body)) !important; }
.util-fact .text           { font-size: calc(13px * var(--scale-body)) !important; }
.util-fact .text strong    { font-size: calc(13px * var(--scale-body)) !important; }
.cta .lede                 { font-size: calc(18px * var(--scale-body)) !important; }

/* ===== FOOTER (shared) ===== */
.foot-brand p     { font-size: calc(14px * var(--scale-body)) !important; }
.foot-col ul li a { font-size: calc(13px * var(--scale-body)) !important; }

/* ============================================================
   NEWS TICKER (fix #4) — scrolling, replaces the static promo bar.
   ============================================================ */
.ticker-bar {
  background: var(--green);
  color: var(--charcoal);
  overflow: hidden;
  position: relative;
  display: flex;
  white-space: nowrap;
}
.ticker-viewport { overflow: hidden; width: 100%; }
.ticker-track {
  display: inline-flex;
  align-items: center;
  padding: 9px 0;
  animation: ticker-scroll var(--ticker-speed, 40s) linear infinite;
  will-change: transform;
}
.ticker-bar:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 0 26px;
  display: inline-flex;
  align-items: center;
  gap: 26px;
}
.ticker-item::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--charcoal);
  opacity: .5;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; padding-left: 16px; }
}

/* ============================================================
   PARTNER PILLS on the Solar generation card (fix #7)
   Stack a second brand pill (Enphase) under EcoFlow.
   ============================================================ */
.prod-card .thumb .ef-tag + .ef-tag { top: 46px; }
.prod-card .ef-tag.enphase          { color: var(--sky); }
.prod-card .ef-tag.enphase::before  { background: var(--sky); }


/* ============================================================
   MOBILE NAV (hamburger + full-screen menu) — shared across pages.
   Markup + toggle script live per-page; this is the styling.
   ============================================================ */
.nav-toggle { display: none; }
@media (max-width: 980px) {
  .nav-links, .nav-cta { display: none !important; }
  .nav { padding: 14px 20px; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 46px; padding: 11px; border: 0; background: transparent; cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2px; width: 100%; background: #fff; border-radius: 2px;
    transition: transform .3s ease, opacity .2s ease; }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
.mobile-menu {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(22,26,26,.985); backdrop-filter: blur(10px);
  padding: 116px 24px 44px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.mm-inner { display: flex; flex-direction: column; gap: 28px; max-width: 460px; margin: 0 auto; }
.mm-group { display: flex; flex-direction: column; }
.mm-label { font-family: 'Poppins',sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--green); margin-bottom: 8px; }
.mm-group a { font-family: 'TBJ Norguba',sans-serif; text-transform: uppercase; font-size: 22px; line-height: 1;
  color: #fff; text-decoration: none; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; gap: 10px; }
.mm-group a em { font-family: 'Poppins',sans-serif; font-style: normal; font-size: 9px; letter-spacing: .14em;
  color: var(--green); border: 1px solid rgba(0,255,1,.4); border-radius: 999px; padding: 3px 8px; }
.mm-actions { display: flex; flex-direction: column; gap: 16px; margin-top: 6px; }
.mm-phone { font-family: 'Poppins',sans-serif; font-weight: 600; font-size: 18px; color: #fff;
  text-decoration: none; display: flex; align-items: center; gap: 10px; }
.mm-phone .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 rgba(0,255,1,.6); animation: pulse 2s infinite; }
.mm-guide { font-family: 'Poppins',sans-serif; font-size: 14px; color: rgba(255,255,255,.8);
  text-decoration: underline; text-underline-offset: 3px; }
.mm-cta { justify-content: center; font-size: 14px !important; padding: 18px !important; }
@media (min-width: 981px) { .mobile-menu { display: none; } }
