/* ==========================================================================
   CMPROM — Light theme repair + premium navbar polish
   --------------------------------------------------------------------------
   Loaded DEAD LAST, after every other stylesheet and the inline critical CSS.
   Purpose: the light redesign recoloured section text and mega-menus but left
   the NAVBAR ACTION CONTROLS (language switcher, login/register, client/account
   button, start-project CTA) with their legacy white-on-dark styling — so on
   the new white navbar they were invisible. This file fixes visibility for good
   and lifts the header to a Stripe/Linear-grade light feel.

   NON-DESTRUCTIVE: pure CSS, no layout rewrites, no PHP, no DB. Safe drop-in.
   ========================================================================== */

/* Local fallbacks so this file works even if token order ever changes. */
:root{
  --lf-ink:    var(--pl-ink,   #0b0c0e);
  --lf-body:   var(--pl-body,  #43474f);
  --lf-muted:  var(--pl-muted, #6b7280);
  --lf-line:   var(--pl-line,  #eaecef);
  --lf-surf:   var(--pl-surface,   #ffffff);
  --lf-surf2:  var(--pl-surface-2, #f6f7f9);
  --lf-red:    var(--pl-red,    #d81f2a);
  --lf-red-ink:var(--pl-red-ink,#b3161f);
}

/* ==========================================================================
   1. TEXT VISIBILITY — DEFINITIVE FIX
   --------------------------------------------------------------------------
   ROOT CAUSE: mobile-premium.css (loaded globally, NOT media-scoped) forces
   .section.invert titles/eyebrows to #fff and subs to #d9e4f6 with !important
   at specificity (0,3,0). On the flipped WHITE background that is white-on-white
   (titles/eyebrows) and faint lavender (subs). Among !important rules the more
   SPECIFIC one wins, so those beat every (0,2,1) light override.
   We win with `html body …` (specificity 0,3,2 -> beats 0,3,0) + !important + last.
   ========================================================================== */
html body .section.invert .section-title,
html body section.invert .section-title,
html body .section.invert h2,
html body .section.invert h3,
html body .section.invert h4{
  color:var(--lf-ink) !important; opacity:1 !important;
}
html body .section.invert .section-sub,
html body section.invert .section-sub,
html body .section.invert p,
html body .section.invert li,
html body .section.invert .lead-soft,
html body .section.invert .rich-content,
html body .section.invert .rich-content p,
html body .page-hero p{
  color:var(--lf-body) !important; opacity:1 !important;
}
html body .section.invert .section-sub{ color:var(--lf-muted) !important; }
html body .section.invert .eyebrow,
html body section.invert .eyebrow,
html body .section.invert .pe-chip{
  color:var(--lf-muted) !important; opacity:1 !important;
  background:var(--lf-surf) !important; border:1px solid var(--lf-line) !important;
}
html body .section.invert .eyebrow::before,
html body .section.invert .pe-chip::before{ background:var(--lf-red) !important; }

/* feature-card / check-list copy inside inverted sections */
html body .section.invert .feature-card,
html body .section.invert .feature-card p,
html body .section.invert .feature-card small,
html body .section.invert .check-list li,
html body .section.invert .check-list span{ color:var(--lf-body) !important; }
html body .section.invert .feature-card h3,
html body .section.invert .feature-card strong{ color:var(--lf-ink) !important; }
html body .section.invert .check-list i,
html body .section.invert .feature-card__icon{ color:var(--lf-red) !important; }

/* legacy inline color:#fff left from the dark era -> force readable (not on CTAs) */
.section.invert [style*="color:#fff"]:not(.btn):not(.btn-accent),
.section.invert [style*="color: #fff"]:not(.btn):not(.btn-accent){ color:var(--lf-ink) !important; }

/* ==========================================================================
   2. NAVBAR — premium light header
   ========================================================================== */
.site-header{ position:sticky; top:0; z-index:1050; }
.site-header .navbar{
  background:rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter:saturate(180%) blur(18px);
          backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--lf-line) !important;
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.site-header.is-scrolled .navbar{
  background:rgba(255,255,255,.9) !important;
  box-shadow:0 1px 0 var(--lf-line), 0 10px 30px rgba(11,12,14,.06) !important;
}
.nav-shell{ min-height:72px; }
.navbar-brand img.brand-logo{ height:42px; width:auto; transition:transform .35s cubic-bezier(.16,1,.3,1); }
.navbar-brand:hover img.brand-logo{ transform:translateY(-1px) scale(1.02); }

/* top-level links — refined weight, red hover underline lives in premium-experience */
.navbar .nav-link{
  color:var(--lf-body) !important; font-weight:600; letter-spacing:-.01em;
  padding:.55rem .9rem !important; border-radius:10px;
  transition:color .2s ease, background .2s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link.active,
.navbar .nav-item.show > .nav-link{ color:var(--lf-ink) !important; background:var(--lf-surf2); }
.navbar .nav-link.dropdown-toggle::after{ opacity:.5; }

/* ==========================================================================
   3. NAV ACTIONS — the elements that were invisible. All restored + premium.
   ========================================================================== */
.nav-actions{ display:flex; align-items:center; gap:.55rem; }

/* Language switcher pill */
.language-menu__button{
  min-height:40px; color:var(--lf-body) !important;
  background:var(--lf-surf) !important;
  border:1px solid var(--lf-line) !important;
  border-radius:10px !important; font-weight:700 !important;
  padding:.45rem .7rem !important;
  transition:border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.language-menu__button:hover{
  color:var(--lf-ink) !important; border-color:#dfe3e8 !important;
  background:var(--lf-surf) !important; box-shadow:0 2px 8px rgba(11,12,14,.06);
}
.language-menu__button i{ color:var(--lf-red) !important; }
.language-menu__button .dropdown-toggle::after,
.language-menu__button::after{ color:var(--lf-muted) !important; }

/* Login (was btn-outline-light: white-on-white) */
.nav-actions .btn-outline-light,
.nav-client-login{
  color:var(--lf-ink) !important;
  background:var(--lf-surf) !important;
  border:1px solid var(--lf-line) !important;
  border-radius:10px !important; font-weight:600 !important;
  padding:.5rem .95rem !important;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.nav-actions .btn-outline-light:hover,
.nav-client-login:hover{
  color:var(--lf-ink) !important; border-color:#dfe3e8 !important;
  background:var(--lf-surf2) !important; box-shadow:0 2px 10px rgba(11,12,14,.06);
  transform:translateY(-1px);
}

/* Register (was btn-light-outline: white-on-white) — subtle red-tinted ghost */
.nav-actions .btn-light-outline,
.nav-client-register{
  color:var(--lf-red-ink) !important;
  background:var(--pl-red-wash, rgba(216,31,42,.06)) !important;
  border:1px solid rgba(216,31,42,.22) !important;
  border-radius:10px !important; font-weight:600 !important;
  padding:.5rem .95rem !important;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.nav-actions .btn-light-outline:hover,
.nav-client-register:hover{
  background:rgba(216,31,42,.1) !important; border-color:rgba(216,31,42,.4) !important;
  transform:translateY(-1px); box-shadow:0 4px 14px rgba(216,31,42,.14);
}

/* Primary CTA — Start a project */
.nav-actions .btn-accent{
  color:#fff !important; background:var(--lf-red) !important; border:0 !important;
  border-radius:10px !important; font-weight:700 !important;
  padding:.55rem 1.05rem !important;
  box-shadow:0 4px 14px rgba(216,31,42,.24);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.nav-actions .btn-accent:hover{
  background:var(--lf-red-ink) !important; transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(216,31,42,.32);
}

/* Client / account button (was white-on-white when a client is logged in) */
.account-menu__button{
  display:inline-flex; align-items:center; gap:.55rem;
  color:var(--lf-ink) !important;
  background:var(--lf-surf) !important;
  border:1px solid var(--lf-line) !important;
  border-radius:12px !important; padding:.35rem .7rem !important;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.account-menu__button:hover{ border-color:#dfe3e8 !important; box-shadow:0 2px 10px rgba(11,12,14,.06); }
.account-menu__avatar{
  width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--pl-red-wash, rgba(216,31,42,.08)); color:var(--lf-red) !important;
}
.account-menu__name{ line-height:1.05; text-align:left; }
.account-menu__name small{ display:block; color:var(--lf-muted) !important; font-size:.68rem; font-weight:600; }
.account-menu__name{ color:var(--lf-ink) !important; font-weight:700; font-size:.85rem; }

/* ==========================================================================
   4. Dropdowns (language / account) — light surfaces, readable items
   ========================================================================== */
.language-menu__dropdown, .account-menu__dropdown, .navbar .dropdown-menu{
  background:var(--lf-surf) !important; border:1px solid var(--lf-line) !important;
  box-shadow:0 8px 24px rgba(11,12,14,.08), 0 30px 60px rgba(11,12,14,.10) !important;
  border-radius:14px !important;
}
.language-menu__head strong, .account-menu__dropdown > strong{ color:var(--lf-ink) !important; }
.language-menu__head small{ color:var(--lf-muted) !important; }
.language-menu__search{ background:var(--lf-surf2) !important; border:1px solid var(--lf-line) !important; }
.language-menu__search input{ color:var(--lf-ink) !important; background:transparent !important; }
.language-menu__item{ color:var(--lf-body) !important; }
.language-menu__item:hover{ background:var(--lf-surf2) !important; }
.language-menu__item.is-current{ color:var(--lf-ink) !important; }
.language-menu__item strong{ color:var(--lf-ink) !important; }
.language-menu__item small{ color:var(--lf-muted) !important; }
.language-menu__code{ color:var(--lf-red) !important; background:var(--pl-red-wash, rgba(216,31,42,.06)) !important; }
.account-menu__dropdown .dropdown-item{ color:var(--lf-body) !important; }
.account-menu__dropdown .dropdown-item:hover{ background:var(--lf-surf2) !important; color:var(--lf-ink) !important; }
.account-menu__dropdown .dropdown-item i{ color:var(--lf-red) !important; }

/* Mobile: keep actions readable when the collapse opens on a light sheet */
@media (max-width:1199.98px){
  .navbar-collapse{ background:var(--lf-surf); border:1px solid var(--lf-line); border-radius:14px; padding:1rem; margin-top:.6rem; box-shadow:0 12px 30px rgba(11,12,14,.08); }
  .nav-actions{ flex-wrap:wrap; }
  .nav-actions .btn, .language-menu, .account-menu{ flex:1 1 auto; }
}

/* ==========================================================================
   5. SOLUTION STUDIO — compact the workbench (shorter scroll to "Generate")
   CSS only — no JS/logic touched. Denser grids + tighter rhythm so the config
   form and generate action are reachable in 1–2 scrolls, not 10.
   ========================================================================== */
.solution-studio-workbench{ padding-top:clamp(2rem,4vw,3rem) !important; padding-bottom:clamp(2rem,4vw,3rem) !important; }
.solution-studio-workbench .studio-composer-group{ margin-top:.8rem !important; }
.solution-studio-workbench .studio-composer-grid{
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr)) !important; gap:.6rem !important;
}
.solution-studio-workbench .studio-composer-block{ padding:.7rem .8rem !important; gap:.35rem !important; }
.solution-studio-workbench .studio-composer-block span{ font-size:.74rem !important; }
.solution-studio-workbench .studio-template-grid{
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important; gap:.6rem !important;
}
.solution-studio-workbench .studio-picker-divider{ margin:1rem 0 !important; }
/* de-emphasise the marketing band now that it sits after the tool */
.solution-studio-premium{ padding-top:clamp(2.5rem,5vw,4rem) !important; padding-bottom:clamp(2.5rem,5vw,4rem) !important; }

/* ==========================================================================
   6. REMAINING INVISIBLE SPOTS (v3) — cards, footer, footer CTA, mega promo
   Same root cause each time: dark-era light text now sitting on a light surface
   (or, in the footer CTA, the light-flip over-reached onto a coloured band).
   ========================================================================== */

/* 6a. Capability cards in inverted sections (.cap__k white / .cap__v lavender) */
html body .section.invert .cap__k{ color:var(--lf-ink) !important; }
html body .section.invert .cap__v{ color:var(--lf-body) !important; }
html body .section.invert .cap__icon i,
html body .section.invert .cap i{ color:var(--lf-red) !important; }

/* 6b. Footer column headings (.footer-heading was #fff on the now-light footer) */
html body .site-footer .footer-heading{ color:var(--lf-ink) !important; }

/* 6c. Footer CTA band is a coloured (red) band — its text must stay LIGHT.
   The generic footer-darkening rule wrongly pulled these dark. Restore. */
html body .site-footer .footer-cta__eyebrow{ color:#ffd7da !important; }
html body .site-footer .footer-cta__title{ color:#ffffff !important; }
html body .site-footer .footer-cta__sub{ color:rgba(255,255,255,.9) !important; }
html body .site-footer .footer-cta .btn-accent{ color:#fff !important; background:#ffffff1a !important; border:1px solid rgba(255,255,255,.5) !important; }
html body .site-footer .footer-cta .btn-accent:hover{ background:#ffffff2e !important; }
html body .site-footer .footer-cta .btn-light-outline{ color:var(--lf-red-ink) !important; background:#fff !important; border:1px solid #fff !important; }

/* 6d. Mega-menu "Featured" promo — make it definitively light with dark text,
   keep the CTA a solid red pill with white text. */
html body .mega-menu__promo{
  background:linear-gradient(160deg,var(--lf-surf2),var(--lf-surf)) !important;
  border:1px solid var(--lf-line) !important;
}
html body .mega-menu__promo .mega-menu__eyebrow{ color:var(--lf-red-ink) !important; }
html body .mega-menu__promo h3{ color:var(--lf-ink) !important; }
html body .mega-menu__promo p{ color:var(--lf-muted) !important; }
html body .mega-menu__promo a{ color:#fff !important; background:var(--lf-red) !important; }
html body .mega-menu__promo a:hover{ background:var(--lf-red-ink) !important; }

/* ==========================================================================
   7. MEGA-MENU LINK CARDS (v3.1) — built for dark bg, now proper light cards
   The items used a near-transparent white surface (fine on charcoal, invisible
   on white). Give them a real card look on the light mega-menu.
   ========================================================================== */
html body .mega-menu .mega-link{
  background:var(--lf-surf) !important;
  border:1px solid var(--lf-line) !important;
  border-radius:12px !important;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease !important;
}
html body .mega-menu .mega-link:hover{
  background:var(--lf-surf) !important;
  border-color:rgba(216,31,42,.28) !important;
  box-shadow:0 6px 18px rgba(11,12,14,.07) !important;
  transform:translateY(-2px);
}
html body .mega-menu .mega-link__icon{
  background:var(--pl-red-wash, rgba(216,31,42,.08)) !important;
  color:var(--lf-red) !important; border-radius:10px;
}
html body .mega-menu .mega-link span,
html body .mega-menu .mega-link__copy strong{ color:var(--lf-ink) !important; }
html body .mega-menu .mega-link small,
html body .mega-menu .mega-link__copy small{ color:var(--lf-muted) !important; font-weight:500; }

/* intro block + trust row readable on light */
html body .mega-menu__intro{ background:var(--pl-red-wash, rgba(216,31,42,.05)) !important; border:1px solid var(--lf-line) !important; }
html body .mega-menu__intro strong{ color:var(--lf-ink) !important; }
html body .mega-menu__intro p{ color:var(--lf-muted) !important; }
html body .mega-menu__eyebrow{ color:var(--lf-red-ink) !important; }
html body .mega-menu__trust{ border-top:1px solid var(--lf-line) !important; }
html body .mega-menu__trust span{ color:var(--lf-muted) !important; }