/* ═══════════════════════════════════════════════════════════════════
   KRONBERG — light reskin layer
   Loaded after css/style.css on every page except index.html (which owns
   css/kronberg-home.css) and pages/configurator.html (standalone).

   It does three things:
     1. redefines the tokens style.css already uses, so every inline
        `var(--gold)` / `var(--navy)` on 130 pages turns neutral at once
     2. replaces the two-font serif system with one family
     3. rebuilds the header and the mobile panel into the Buben & Zörweg
        pattern: burger at every width, centred logo, one full-screen
        overlay menu instead of a desktop mega menu plus a drawer

   Nothing here is scoped to a page. Add page-specific work elsewhere.
   ═══════════════════════════════════════════════════════════════════ */

/* ══════ 1 · tokens ══════ */
:root{
  --navy:#141416;          /* was near-black already, now the ink token */
  --cream:#ffffff;
  --gold:#141416;          /* the accent is ink; nothing on the site is gold */
  --gold-l:#43444a;
  --gold-d:#000000;
  --white:#ffffff;
  --muted:#55565c;
  --soft:#6c6d73;
  --border:rgba(18,18,22,.10);
  --bg2:#f6f6f4;
  --r:0;                   /* square corners throughout */
  --max:1360px;
  --px:clamp(20px,4.5vw,60px);

  --kb-font:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --kb-ease:cubic-bezier(.2,.7,.2,1);
  --kb-line:rgba(18,18,22,.12);
  --kb-line-2:rgba(18,18,22,.075);
}

/* ══════ 2 · type and base ══════ */
html,
body,
body.loaded{background:#ffffff;color:var(--navy)}

/* style.css sets font-family on 61 separate rules; enumerating them missed
   FAQ summaries and similar. One family, no exceptions. */
*,*::before,*::after{font-family:var(--kb-font) !important}
body{font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased}
/* the pages carry inline font-family on prices and headings; Playfair and
   DM Sans are no longer loaded, so without this they fall back to Georgia */
[style*="Playfair"],[style*="DM Sans"]{font-family:var(--kb-font) !important}
h1,h2,h3,h4{font-weight:400;letter-spacing:-.015em;line-height:1.1}
.fw-300{font-weight:300}
::selection{background:#141416;color:#fff}
:focus-visible{outline:1px solid #141416;outline-offset:2px}

/* The old palette leaned on gold for emphasis. Emphasis is now italic and
   weight, so these inherit: ink on a white section, white on a hero image. */
.gold,.gold-l{color:inherit}
/* the same problem for the hundreds of inline `color:var(--gold)` eyebrows */
[data-nav-theme="dark"] [style*="var(--gold)"]{color:rgba(255,255,255,.8)}
[data-nav-theme="dark"] [style*="background:var(--gold)"]{background:rgba(255,255,255,.55)}
.text-muted{color:var(--muted)}
.text-soft{color:var(--soft)}

/* ══════ 3 · loader ══════ */
.LD,.ld-glass-top,.ld-glass-bot{background:#ffffff}
.ld-logo-ghost{filter:brightness(0);opacity:.12}
.ld-logo-fill{filter:brightness(0)}

/* ══════ 4 · header ══════ */
.nav{
  color:var(--navy);
  background:linear-gradient(180deg,rgba(255,255,255,.55),transparent);
  border-bottom:1px solid transparent;
}
.nav--dark{color:#ffffff;background:linear-gradient(180deg,rgba(12,12,14,.35),transparent)}
.nav.solid,
.nav--dark.solid{
  color:var(--navy);
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--kb-line-2);
}
.nav-bar{grid-template-columns:1fr auto 1fr;height:76px;max-width:var(--max)}
.nav-left,.nav-right{gap:20px}

/* one navigation, not two: the desktop link row and its mega panels go */
.nav-item,
.nav-link,
.mega,
.nav-phone,
.nav-cta,
.mob-backdrop{display:none !important}

.nav-logo{height:17px;opacity:.95;filter:brightness(0)}
.nav--dark .nav-logo{filter:brightness(0) invert(1)}
.nav--dark.solid .nav-logo,
.nav.solid .nav-logo{filter:brightness(0)}

/* burger at every width, not only on mobile */
.ham{display:flex !important;color:currentColor;width:30px;gap:5px}
.ham span{width:24px;height:1.4px;background:currentColor}
.ham span:last-child{width:16px}
.ham.open span:nth-child(1){transform:translateY(6.4px) rotate(45deg)}
.ham.open span:nth-child(3){transform:translateY(-6.4px) rotate(-45deg);width:24px}
.nav--dark .ham,
.nav.solid .ham,
.nav--dark.solid .ham{color:currentColor}

/* right side: one outlined action plus one icon, inheriting the bar's colour */
.nav-cfg-btn{
  height:38px;padding:0 20px;border-radius:0;
  background:transparent;border:1px solid currentColor;color:currentColor;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  transition:background .25s var(--kb-ease),color .25s var(--kb-ease);
}
.nav-cfg-btn:hover{background:currentColor;transform:none}
.nav-cfg-btn:hover svg{color:#fff}
.nav--dark .nav-cfg-btn,
.nav--dark.solid .nav-cfg-btn,
.nav.solid .nav-cfg-btn{background:transparent;color:currentColor}
.nav-icon-btn{display:flex !important;color:currentColor;border-radius:0}

@media(max-width:760px){
  .nav-bar{height:62px}
  .nav-cfg-btn{display:none}
  .nav-logo{height:15px}
}

/* ══════ 5 · overlay menu ══════
   Same markup js/main.js already injects, restyled from a 340px drawer
   into a full-screen frosted overlay. */
.mob-panel{
  top:0;left:0;right:0;bottom:0;width:100%;max-width:none;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(44px) saturate(120%);backdrop-filter:blur(44px) saturate(120%);
  transform:none;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s var(--kb-ease),visibility .45s;
  padding:0 var(--px);
  overflow-y:auto;
}
.mob-panel.open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .mob-panel{background:rgba(255,255,255,.98)}
}

.mob-panel-head,
.mob-panel nav,
.mob-foot{width:100%;max-width:var(--max);margin-left:auto;margin-right:auto}
.mob-panel-head{
  justify-content:flex-start;
  height:calc(76px + env(safe-area-inset-top,0px));
  padding:0;border-bottom:none;flex-shrink:0;
}
.mob-close{width:34px;height:34px;color:var(--navy);opacity:.85}
.mob-close:hover{opacity:1;color:var(--navy)}
.mob-close svg{width:22px;height:22px}

.mob-panel nav{padding-top:clamp(6px,2vw,26px) !important}
.mob-group{border-top:1px solid var(--kb-line-2);padding:0;margin:0;max-width:620px}
.mob-group + .mob-group{margin-top:clamp(22px,3vw,34px)}

.mob-link{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(13px,1.5vw,19px) 2px;
  border-bottom:1px solid var(--kb-line-2);
  font-size:clamp(20px,2.1vw,32px);font-weight:400;color:var(--navy);
  letter-spacing:-.01em;
  transition:padding-left .25s var(--kb-ease),color .2s;
}
.mob-link:hover{padding-left:12px}
.mob-link-arrow{font-size:15px;color:var(--soft);transition:transform .25s var(--kb-ease)}
.mob-link:hover .mob-link-arrow{transform:translateX(4px);color:var(--navy)}

.mob-sublink{
  display:flex;align-items:center;
  padding:clamp(9px,1vw,12px) 2px;
  border-bottom:1px solid var(--kb-line-2);
  font-size:clamp(13.5px,1vw,15px);color:var(--muted);
  transition:padding-left .25s var(--kb-ease),color .2s;
}
.mob-sublink:hover{padding-left:10px;color:var(--navy)}

.mob-foot{
  margin-top:auto;
  padding:clamp(22px,3vw,30px) 0 calc(22px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--kb-line-2);
  color:var(--muted);font-size:13px;
  display:flex;align-items:center;justify-content:flex-start;
  gap:clamp(18px,3vw,40px);flex-wrap:wrap;
}
.mob-foot-num{font-size:13px;letter-spacing:.02em}
.mob-cta{
  display:inline-flex;align-items:center;gap:12px;
  padding:14px 24px;border:1px solid var(--kb-line);
  font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);
  transition:background .25s var(--kb-ease);
}
.mob-cta:hover{background:rgba(18,18,22,.05)}
.mob-cta-arrow{transition:transform .25s var(--kb-ease)}
.mob-cta:hover .mob-cta-arrow{transform:translateX(4px)}

/* the configurator entry is the one filled action in the menu */
.mob-link-cfg{
  background:var(--navy) !important;color:#fff !important;
  border-bottom:none !important;margin-top:18px;
  padding:16px 20px !important;max-width:620px;
}
.mob-link-cfg:hover{padding-left:20px !important;background:#333338 !important}
.mob-link-cfg .mob-link-arrow{color:rgba(255,255,255,.7)}
.mob-foot a{color:var(--muted);transition:color .2s}
.mob-foot a:hover{color:var(--navy)}

/* ══════ 6 · buttons ══════ */
.btn{
  border-radius:0;font-size:11px;letter-spacing:.12em;font-weight:500;
  padding:14px 30px;transition:all .25s var(--kb-ease);
}
.btn-primary,.btn-gold{background:var(--navy);color:#fff}
.btn-primary:hover,.btn-gold:hover{background:#333338;transform:none;box-shadow:none}
.btn-outline{border:1px solid var(--navy);color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}
[style*="background:var(--navy)"] .btn-gold,
[style*="background:var(--navy)"] .btn-primary,
[data-nav-theme="dark"] .btn-gold,
[data-nav-theme="dark"] .btn-primary{background:#ffffff;color:#141416}
[style*="background:var(--navy)"] .btn-gold:hover,
[style*="background:var(--navy)"] .btn-primary:hover,
[data-nav-theme="dark"] .btn-gold:hover,
[data-nav-theme="dark"] .btn-primary:hover{background:#dcdcdd}
.btn-outline-light{border:1px solid rgba(255,255,255,.35)}
.btn-outline-light:hover{background:rgba(255,255,255,.12)}
.btn-sm{padding:11px 22px;font-size:10px}
.btn-lg{padding:16px 40px;font-size:11.5px}

/* ══════ 7 · surfaces ══════ */
.mega-card,
.card,.tile,.panel{border-radius:0}
.mega-card:hover{box-shadow:none;transform:none}

/* ══════ 8 · footer ══════
   Stays dark. Every page writes `color:rgba(245,241,235,…)` inline into it,
   so a light ground would need 137 edits to say the same thing. */
.site-footer{
  background:#0e0e10;
  color:rgba(255,255,255,.55);
  padding:clamp(56px,7vw,88px) var(--px) calc(30px + env(safe-area-inset-bottom,0px));
}
.site-footer-inner{max-width:var(--max)}
.site-footer-grid{border-bottom:1px solid rgba(255,255,255,.09)}
.site-footer-link{color:rgba(255,255,255,.5)}
.site-footer-link:hover{color:#ffffff}
.site-footer-legal-link{color:rgba(255,255,255,.38)}
.site-footer-legal-link:hover{color:#ffffff}

/* the currency switcher was drawn for gold on navy */
.currency-lbl{color:rgba(255,255,255,.32)}
.currency-btn{border-radius:0;color:rgba(255,255,255,.55);border-color:rgba(255,255,255,.2);background:transparent}
.currency-btn:hover{color:#ffffff;border-color:rgba(255,255,255,.45)}
.currency-btn.active{background:#ffffff;border-color:#ffffff;color:#141416;font-weight:500}

@media (prefers-reduced-motion:reduce){
  .mob-panel,.mob-link,.mob-sublink,.nav,.btn{transition-duration:.01ms !important}
}