/* ══════════════════════════════════════════════════════════════════════════
   SOLARBILL — "MORNING LIGHT" THEME (warm · no blue)
   Accent system: gold #F5A623 (primary) · deep amber #C97A0A (links, secondary)
   · warm charcoal #2A2318 (headings, dark buttons) · green #2FA36B (success only)
   · coral #E0563F (warnings). No blues anywhere.
   Loaded last on every page. Overrides each page's colour tokens so the whole
   site shares one light palette. Change a colour HERE and it changes everywhere.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── master palette ── */
  --ml-paper:#FFFDF9;  --ml-cream:#FAF6EE;  --ml-sand:#F1EBDD;  --ml-line:#E6DFCF;
  --ml-ink:#2A2318;    --ml-body:#4A4133;   --ml-muted:#8A8071;
  --ml-sun:#F5A623;    --ml-sun-deep:#C97A0A; --ml-sun-wash:#FFF3DC;
  --ml-amber:#C97A0A;  --ml-amber-wash:#FFF3DC;  /* replaced the old blue accent */
  --ml-leaf:#2FA36B;   --ml-leaf-wash:#E6F7EE;
  --ml-coral:#E0563F;  --ml-coral-wash:#FCE9E5;

  /* ── homepage / installers / blog / explainers token family ── */
  --bg:#FFFDF9; --bg2:#FAF6EE; --surface:#FFFFFF; --border:#E6DFCF;
  --text:#2A2318; --muted:#8A8071; --muted2:#A79C8B; --nav:#FFFDF9;
  --accent:#C97A0A; --accent2:#A0620A; --al:#FFF3DC; --ab:#F0CE8E; --at:#A0620A;
  --orange:#F5A623; --sun:#F5A623; --card:#FFFFFF; --green:#2FA36B;

  /* ── payment-success / quote-landing "scheme" family ── */
  --scheme-bg:#FFFDF9; --scheme-bg2:#FAF6EE; --scheme-surface:#FFFFFF; --scheme-border:#E6DFCF;
  --scheme-text:#2A2318; --scheme-muted:#8A8071; --scheme-nav:#FFFDF9;
  --scheme-accent:#C97A0A; --scheme-accent2:#A0620A;
  --scheme-badge-bg:#FFF3DC; --scheme-badge-border:#F0CE8E; --scheme-badge-text:#A0620A;

  /* ── calculator family ── */
  --surface2:#FAF6EE; --border2:#D9D1BF; --sun2:#C97A0A;
  --blue:#C97A0A; --blue2:#A0620A; --solar:#2FA36B; --solar2:#3DBA7F; --red:#E0563F;

  /* ── Solar Check "dawn instrument" → "paper instrument" ── */
  --night:#FFFDF9; --sky1:#FAF6EE; --ink:#2A2318;
  --mut:rgba(42,35,24,.62); --faint:rgba(42,35,24,.42);
  --edge:#E6DFCF; --glass:#FFFFFF; --heat:#C97A0A;
  --leaf:#2FA36B; --warn:#B8700A; --storm:#E0563F;
}

/* ── global surfaces ── */
html, body { background:#FFFDF9 !important; color:#4A4133; }
h1, h2, h3, h4 { color:#2A2318; }

/* navigation — the single biggest lightening */
nav, #topNav { background:rgba(255,253,249,.94) !important; backdrop-filter:blur(10px); border-bottom:1px solid #E6DFCF !important; }
nav a, nav .nav-link, .nav-link { color:#4A4133 !important; }
nav a:hover, .nav-link:hover { color:#2A2318 !important; }
#topNavSignIn, .nav-signin { background:#2A2318 !important; color:#FFFDF9 !important; }

/* footers */
footer { background:#FAF6EE !important; color:#8A8071 !important; border-top:1px solid #E6DFCF; }
footer a { color:#4A4133 !important; }

/* form controls */
input, select, textarea { background:#FFFFFF; color:#2A2318; border-color:#E6DFCF; }
input::placeholder, textarea::placeholder { color:#A79C8B; }

/* gold buttons keep dark text on light theme */
.btn, button.btn, .btn-primary { color:#2A2318; }
.app .btn { color:#2A2318 !important; box-shadow:0 8px 22px rgba(245,166,35,.25) !important; }
.app .btn.ghost { background:#FFFFFF !important; color:#4A4133 !important; border-color:#E6DFCF !important; }
.app .card, .app .tile { background:#FFFFFF !important; border-color:#E6DFCF !important; box-shadow:0 10px 30px rgba(42,35,24,.06); }
.app .top .logo { color:#2A2318 !important; }

/* status pills readable on white */
.p-good { background:#E6F7EE !important; color:#1E7A4E !important; border-color:#B8E6CC !important; }
.p-warn { background:#FFF4DB !important; color:#9A5E00 !important; border-color:#F3D48A !important; }
.p-bad  { background:#FCE9E5 !important; color:#B23A26 !important; border-color:#F5B9AE !important; }

/* soft shadows instead of black */
.card, .modal, .limit-box, .calc-card { box-shadow:0 10px 30px rgba(42,35,24,.07); }


/* ══ CONTRAST SAFETY NET ═══════════════════════════════════════════════════
   Catches any remaining light-on-light text from the dark→light conversion.
   Elements that legitimately carry white text (dark/amber buttons and bands)
   are re-asserted below. */
.hero-sub, .intro-text, .origin-body, .bill-section-lead, .feature-desc,
.cta-band p, .installer-cta p, .tools-panel-title, .section-lead,
.lead, .sub, .subtitle { color:rgba(74,65,51,.78) !important; }

.nav-link:hover, .nav-links a:hover, nav a:hover { color:#2A2318 !important; }

/* white text is only correct on these dark/amber surfaces */
.btn-primary, .nav-cta, .nav-btn, .submit-btn, .btn-hero, .cta-banner a,
.cta-inline a, .article-card-tag, .price-badge, .step-num, .step-number,
.calc-step-num, .multi-use-btn, #topNavSignIn, .nav-signin {
  background-color:#C97A0A; color:#FFFDF9 !important;
}
/* gold surfaces need dark text, never white */
.btn-sun, .btn-gold, [style*="background:#f5a623"], [style*="background: #f5a623"],
[style*="background:#F5A623"] { color:#2A2318 !important; }

/* green/red status text darkened for light backgrounds */
.trial-days, .stat-change, .metric-val.green-color, .opt-card-saving,
.opt-card-badge, .bill-val.green { color:#1E7A4E !important; }


/* ══ NAV — PROFESSIONAL PASS ═══════════════════════════════════════════════
   One bar, one system: confident 15px links, a single filled CTA, consistent
   40px buttons, hairline + soft shadow instead of the heavy gold stripe. */
nav, #topNav {
  height:72px !important; padding:0 40px !important;
  border-bottom:1px solid #E6DFCF !important; box-shadow:0 1px 0 rgba(42,35,24,.03), 0 8px 24px rgba(42,35,24,.05);
  background:rgba(255,253,249,.94) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
nav .nav-logo, nav .logo, nav a[href="/"] img, nav .nav-logo img { transform:scale(1.12); transform-origin:left center; }
nav .nav-links, nav .nav-right { gap:28px !important; }
nav .nav-link, .nav-links a.nav-link {
  font-size:15px !important; font-weight:500 !important; letter-spacing:-.005em;
  color:#2A2318 !important; opacity:1 !important; padding:6px 0; position:relative; transition:color .15s;
}
nav .nav-link:hover { color:#C97A0A !important; }
nav .nav-link::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:#F5A623; transform:scaleX(0); transform-origin:left; transition:transform .18s; border-radius:2px; }
nav .nav-link:hover::after, nav .nav-link.active::after { transform:scaleX(1); }

/* one button system — everything in the bar is 40px, 8px radius, Inter 14/600 */
nav button, nav .btn, nav .nav-btn, nav .nav-cta, nav .nav-signin, #topNavSignIn, nav a.dnav, nav .dnav {
  height:40px !important; padding:0 18px !important; border-radius:8px !important;
  font-family:inherit !important; font-size:14px !important; font-weight:600 !important; letter-spacing:0 !important;
  text-transform:none !important; display:inline-flex !important; align-items:center; gap:8px; line-height:1 !important;
  transition:all .15s; white-space:nowrap;
}
/* the ONE filled primary: call-back (or the page's main CTA) */
nav [onclick*="openCallback"], nav .nav-cta, nav .nav-btn-primary, nav .btn-hero {
  background:#F5A623 !important; border:1px solid #F5A623 !important; color:#2A2318 !important;
  box-shadow:0 2px 8px rgba(245,166,35,.28);
}
nav [onclick*="openCallback"]:hover, nav .nav-cta:hover { background:#E6971A !important; box-shadow:0 4px 14px rgba(245,166,35,.35); }
/* secondary: Sign In / Dashboard / Quote — quiet outline */
#topNavSignIn, nav .nav-signin, nav .dnav, nav a.dnav, nav .nav-btn:not(.nav-btn-primary), nav .nav-btn-ghost {
  background:#FFFFFF !important; border:1px solid #DED5C2 !important; color:#2A2318 !important;
}
#topNavSignIn:hover, nav .nav-signin:hover, nav .dnav:hover, nav .nav-btn:hover { border-color:#2A2318 !important; }
/* tertiary: Sign out is just text */
nav .dnav.signout, nav [onclick*="logout"], nav [onclick*="signOut"], nav .nav-signout {
  background:transparent !important; border:1px solid transparent !important; color:#8A8071 !important; padding:0 8px !important;
}
nav [onclick*="logout"]:hover, nav [onclick*="signOut"]:hover { color:#2A2318 !important; }
/* logged-in name: quiet label, not a monospace tag */
nav .nav-user, #navUser { font-family:inherit !important; font-size:14px !important; color:#8A8071 !important; letter-spacing:0 !important; text-transform:none !important; }
@media (max-width:900px) { nav, #topNav { height:60px !important; padding:0 14px !important; } }

/* nav pass — fixes from render: burger stays hidden on desktop; index's .anav pills join the system;
   installers' Start Free Trial is the filled primary, Sign In the outline */
@media (min-width:901px) { .sb-burger { display:none !important; } }
nav .anav, nav button.anav {
  height:40px !important; padding:0 16px !important; border-radius:8px !important; font-family:inherit !important;
  font-size:14px !important; font-weight:600 !important; letter-spacing:0 !important; text-transform:none !important;
  background:#FFFFFF !important; border:1px solid #DED5C2 !important; color:#2A2318 !important; display:inline-flex !important; align-items:center;
}
nav .anav:hover { border-color:#2A2318 !important; }
nav .anav[onclick*="doLogout"], nav .anav[onclick*="logout"] { background:transparent !important; border-color:transparent !important; color:#8A8071 !important; padding:0 8px !important; }
nav .anav[onclick*="doLogout"]:hover { color:#2A2318 !important; }
nav [onclick*="showAdmin"] { height:40px !important; border-radius:8px !important; font-family:inherit !important; font-size:13px !important; font-weight:600 !important; letter-spacing:0 !important; text-transform:none !important; }
/* installers page: the trial button is THE primary */
nav a.nav-btn[href="#signup"] { background:#F5A623 !important; border-color:#F5A623 !important; color:#2A2318 !important; box-shadow:0 2px 8px rgba(245,166,35,.28); }
nav a.nav-btn[href="#signup"]:hover { background:#E6971A !important; }

/* logged-in bar (built by JS on index.html) */
nav .nav-pill, nav a.nav-pill, nav button.nav-pill {
  height:40px !important; padding:0 16px !important; border-radius:8px !important; font-family:inherit !important;
  font-size:14px !important; font-weight:600 !important; letter-spacing:0 !important; text-transform:none !important; text-decoration:none;
  background:#FFFFFF !important; border:1px solid #DED5C2 !important; color:#2A2318 !important; display:inline-flex !important; align-items:center; cursor:pointer; transition:all .15s;
}
nav .nav-pill:hover { border-color:#2A2318 !important; }
nav .nav-signout, nav button.nav-signout { background:transparent !important; border:none !important; color:#8A8071 !important; font-family:inherit !important; font-size:14px !important; font-weight:500 !important; padding:0 6px !important; cursor:pointer; height:40px; }
nav .nav-signout:hover { color:#2A2318 !important; }
.hamburger-btn { display:none !important; }

/* ══ PRODUCTS DROPDOWN ═══════════════════════════════════════════════════ */
.nav-dd { position:relative; display:inline-flex; align-items:center; }
.nav-dd-btn { background:none !important; border:none !important; cursor:pointer; height:auto !important; padding:6px 0 !important;
  font-size:15px !important; font-weight:500 !important; color:#2A2318 !important; display:inline-flex !important; align-items:center; gap:5px; box-shadow:none !important; }
.nav-dd-caret { font-size:11px; color:#8A8071; transition:transform .18s; }
.nav-dd.open .nav-dd-caret, .nav-dd:hover .nav-dd-caret { transform:rotate(180deg); color:#C97A0A; }
.nav-dd.open .nav-dd-btn, .nav-dd:hover .nav-dd-btn { color:#C97A0A !important; }
.nav-dd-panel { position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%); width:640px; max-width:calc(100vw - 32px); background:#FFFDF9; border:1px solid #E6DFCF; border-radius:14px;
  box-shadow:0 18px 50px rgba(42,35,24,.14), 0 2px 8px rgba(42,35,24,.06); padding:18px; display:none; grid-template-columns:1fr 1fr; gap:6px 22px; z-index:3000; }
.nav-dd-panel::before { content:""; position:absolute; top:-14px; left:0; right:0; height:14px; }          /* hover bridge */
.nav-dd.open .nav-dd-panel { display:grid; }
@media (hover:hover) and (min-width:901px) { .nav-dd:hover .nav-dd-panel { display:grid; } }
.nav-dd-head { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#8A8071; padding:6px 10px 8px; }
.nav-dd-item { display:block; padding:10px 10px; border-radius:9px; text-decoration:none; color:#2A2318; transition:background .12s; }
.nav-dd-item:hover { background:#FFF3DC; }
.nav-dd-item b { display:block; font-size:14.5px; font-weight:700; color:#2A2318; margin-bottom:2px; }
.nav-dd-item:hover b { color:#C97A0A; }
.nav-dd-item span { display:block; font-size:12.5px; line-height:1.45; color:#6B6152; }
.nav-dd-all { display:block; margin-top:6px; padding:8px 10px; font-size:13px; font-weight:600; color:#C97A0A; text-decoration:none; }
.nav-dd-all:hover { text-decoration:underline; }
/* mobile: lives inside the hamburger menu as an expanded list, not a dropdown */
@media (max-width:900px) {
  .nav-dd { display:none !important; }
  .sb-mobile-menu .sb-group { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#8A8071; padding:12px 12px 4px; }
  .sb-mobile-menu .sb-sub { padding:10px 12px 10px 20px; }
  .sb-mobile-menu .sb-sub small { display:block; font-weight:400; color:#6B6152; font-size:12.5px; margin-top:2px; }
}

/* ══ AUDIENCE SIGNPOSTS (homepage) ═══════════════════════════════════════ */
.aud-ribbon { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  background:#2A2318; color:#FFFDF9; font-size:13.5px; padding:9px 48px; position:relative; z-index:2001; }
.aud-ribbon-tag { background:#F5A623; color:#2A2318; font-weight:800; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:6px; }
.aud-ribbon-text { color:rgba(255,253,249,.85); }
.aud-ribbon-link { color:#F5A623; font-weight:700; text-decoration:none; }
.aud-ribbon-link:hover { text-decoration:underline; }
.aud-ribbon-x { position:absolute; right:14px; top:50%; transform:translateY(-50%); background:none; border:none; color:rgba(255,253,249,.55); font-size:20px; cursor:pointer; line-height:1; padding:4px 8px; }
.aud-ribbon-x:hover { color:#FFFDF9; }
.aud-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:760px; margin:34px auto 0; }
.aud-card { text-align:left; padding:16px 18px; border-radius:12px; border:1px solid #E6DFCF; background:rgba(255,255,255,.7); text-decoration:none; color:#2A2318; transition:all .15s; }
.aud-card-k { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#8A8071; margin-bottom:4px; }
.aud-card-t { font-size:15.5px; font-weight:700; margin-bottom:3px; }
.aud-card-d { font-size:13px; color:#6B6152; line-height:1.45; }
.aud-card-d a { color:#C97A0A; font-weight:600; }
.aud-card-inst { border-color:#F0CE8E; background:#FFF8EA; cursor:pointer; }
.aud-card-inst:hover { border-color:#F5A623; box-shadow:0 8px 24px rgba(245,166,35,.18); transform:translateY(-1px); }
.aud-card-inst .aud-card-k { color:#C97A0A; }
.aud-card-cta { color:#C97A0A; font-weight:700; }
@media (max-width:900px) {
  .aud-ribbon { padding:8px 40px 8px 14px; font-size:12.5px; justify-content:flex-start; }
  .aud-ribbon-text { display:none; }
  .aud-row { grid-template-columns:1fr; gap:10px; margin-top:24px; }
}