/* CamperInvest — jednotná navigace v2
   Jediný zdroj pravdy pro hlavičku CELÉHO webu (titulka, /konfigurator/, /technika/,
   /intel/, /brand/, /o-nas/). Žádná stránka nesmí mít vlastní header CSS.

   Novinky proti v1:
   - .sbread  — pás drobečkové navigace pod lištou
   - .sbar__cta — tlačítko Konzultace
   - .sbar--hero — transparentní varianta nad hero fotkou (titulka)
   - overlay menu používá STACKED lockup (ne jednořádkové CAMPERINVEST)
*/

:root{
  --ci-ink:#17150F; --ci-cream:#F0E8D8; --ci-white:#FBFAF6;
  --ci-wood:#392620; --ci-tan:#C9A87E;
  --ci-hair-dark:rgba(240,232,216,.12);
}

/* ---------- lišta ---------- */
.sbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:18px 42px;background:rgba(23,21,15,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ci-hair-dark)}

/* transparentní varianta nad hero fotografií (titulka) */
.sbar--hero{position:absolute;background:none;backdrop-filter:none;border-bottom:none;left:0;right:0}

.sbar__l{display:flex;align-items:center;gap:34px}

/* ---------- logo: VŽDY stacked, interně centrované ---------- */
.sbar__logo{display:inline-flex;flex-direction:column;align-items:center;text-decoration:none;line-height:.96}
.sbar__logo .w{font-family:'Jost',sans-serif;font-weight:500;font-size:21px;line-height:.98;letter-spacing:.1em;
  color:var(--ci-cream);text-align:center;padding-left:.1em}
.sbar__logo .t{font-family:'Jost',sans-serif;font-weight:300;font-size:7.5px;letter-spacing:.4em;text-transform:uppercase;
  color:rgba(240,232,216,.68);text-align:center;margin-top:5px;padding-left:.4em}

.sbar__div{width:1px;height:34px;background:rgba(240,232,216,.16)}

/* ---------- menu ---------- */
.sbar__nav{display:flex;align-items:center;gap:28px}
.sbar__nav a{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(240,232,216,.72);text-decoration:none;padding:8px 0;border-bottom:1.5px solid transparent;
  transition:color .15s,border-color .15s;white-space:nowrap}
.sbar__nav a:hover{color:var(--ci-cream)}
.sbar__nav a.on{color:var(--ci-cream);border-bottom-color:var(--ci-tan)}

.sbar__r{display:flex;align-items:center;gap:26px;margin-left:36px}

/* ---------- jazyk: 8 jazyků (CS EN DE NL PL HR FR IT) ----------
   Osm kódů se do lišty inline nevešlo — kompaktní přepínač:
   aktuální kód + šipka, rozbaluje panel se všemi jazyky. */
.sbar__lang{position:relative;font-family:'IBM Plex Mono',monospace}
.sbar__lang__btn{display:flex;align-items:center;gap:7px;font-family:inherit;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(240,232,216,.72);background:none;border:none;cursor:pointer;padding:6px 0;
  transition:color .15s}
.sbar__lang__btn:hover,.sbar__lang.open .sbar__lang__btn{color:var(--ci-cream)}
.sbar__lang__btn .cv{font-size:8px;opacity:.7;transition:transform .18s}
.sbar__lang.open .sbar__lang__btn .cv{transform:rotate(180deg)}

.sbar__lang__panel{position:absolute;top:calc(100% + 12px);right:0;z-index:40;min-width:186px;
  display:none;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(15,13,9,.98);border:1px solid rgba(240,232,216,.16);padding:8px;
  backdrop-filter:blur(10px)}
.sbar__lang.open .sbar__lang__panel{display:grid}
.sbar__lang__panel a{display:flex;align-items:baseline;gap:7px;padding:8px 9px;text-decoration:none;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(240,232,216,.62);transition:.15s}
.sbar__lang__panel a:hover{background:rgba(240,232,216,.07);color:var(--ci-cream)}
.sbar__lang__panel a.on{color:var(--ci-tan)}
.sbar__lang__panel .nm{font-family:'IBM Plex Sans',sans-serif;font-size:11px;letter-spacing:0;
  text-transform:none;color:rgba(240,232,216,.42)}
.sbar__lang__panel a:hover .nm{color:rgba(240,232,216,.7)}

/* ---------- Klientská zóna (reálné CF Access přihlášení) ----------
   Login sedí v řádku navigace, hned za zašedlými sekcemi — rámuje je
   jako „členská zóna", takže ztlumené položky čtou jako záměr. */
.sbar__nav a.login{display:inline-flex;align-items:center;gap:7px;color:var(--ci-cream);
  background:rgba(240,232,216,.06);border:1px solid rgba(240,232,216,.36);
  padding:7px 14px;border-bottom:1px solid rgba(240,232,216,.36);margin-left:10px;
  transition:color .15s,background .15s,border-color .15s}
.sbar__nav a.login::before{content:"→";font-size:12px;opacity:.85}
.sbar__nav a.login:hover{color:var(--ci-ink);background:var(--ci-cream);border-color:var(--ci-cream)}
.smenu .item--login .num{color:var(--ci-tan)}
.smenu .item--login .lbl{color:var(--ci-cream)}
a.item--login:hover .lbl{color:#fff}
/* malé „Přihlásit" tlačítko přímo u zašedlých (brzy) položek — rámuje je jako členské */
.smenu .item .lockbtn{margin-left:auto;align-self:center;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(240,232,216,.85);text-decoration:none;
  border:1px solid rgba(240,232,216,.34);padding:8px 14px;transition:color .15s,background .15s,border-color .15s}
.smenu .item .lockbtn:hover{color:var(--ci-ink);background:var(--ci-cream);border-color:var(--ci-cream)}

/* ---------- CTA ---------- */
.sbar__cta{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ci-ink);background:var(--ci-tan);padding:9px 16px;text-decoration:none;
  border:1px solid var(--ci-tan);transition:background .15s,color .15s;white-space:nowrap}
.sbar__cta:hover{background:transparent;color:var(--ci-tan)}

/* ---------- hamburger ---------- */
.sburger{display:none;flex-direction:column;gap:6px;padding:6px 0;background:none;border:none;cursor:pointer}
.sburger span{display:block;width:26px;height:1.5px;background:var(--ci-cream)}

/* ---------- drobečková navigace ----------
   POZOR: vodorovné odsazení MUSÍ být shodné s .sbar (42 px desktop / 20 px mobil),
   jinak má hlavička dvě různé svislé osy. Žádný vnořený .wrap s vlastním gutterem.
   Pokud .sbar dostane max-width a centrovaný obsah, musí ho dostat i .sbread. */
.sbread{position:static;display:flex;align-items:center;gap:10px;
  padding:11px 42px;background:rgba(23,21,15,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ci-hair-dark);
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.sbread a{color:rgba(240,232,216,.55);text-decoration:none;transition:color .15s}
.sbread a:hover{color:var(--ci-cream)}
.sbread .sep{color:rgba(240,232,216,.3)}
.sbread .cur{color:var(--ci-tan)}
.sbread .back{display:none}          /* zpětná šipka jen na mobilu */

/* ---------- overlay menu (mobil) ---------- */
.smenu{position:fixed;inset:0;z-index:60;background:rgba(15,13,9,.98);display:flex;flex-direction:column;
  padding:20px 22px 40px;opacity:0;visibility:hidden;transition:opacity .18s ease-out}
.smenu.open{opacity:1;visibility:visible}
.smenu__head{display:flex;align-items:center;justify-content:space-between}
/* stacked lockup i v overlay — nikdy jednořádkové */
.smenu__logo{display:inline-flex;flex-direction:column;align-items:center;text-decoration:none;line-height:.96}
.smenu__logo .w{font-family:'Jost',sans-serif;font-weight:500;font-size:18px;line-height:.98;letter-spacing:.1em;
  color:var(--ci-cream);text-align:center;padding-left:.1em}
.smenu__logo .t{font-family:'Jost',sans-serif;font-weight:300;font-size:6.5px;letter-spacing:.36em;text-transform:uppercase;
  color:rgba(240,232,216,.68);text-align:center;margin-top:4px;padding-left:.36em}
.smenu__close{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(240,232,216,.82);background:none;border:none;cursor:pointer;padding:4px 0}
.smenu nav{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;max-width:840px;width:100%;margin:0 auto}
.smenu .item{display:flex;align-items:baseline;gap:20px;padding:14px 0;
  border-bottom:1px solid var(--ci-hair-dark);text-decoration:none}
.smenu .num{font-family:'IBM Plex Mono',monospace;font-size:11px;width:30px;color:rgba(240,232,216,.5)}
.smenu .lbl{font-family:'Jost',sans-serif;font-weight:400;font-size:clamp(24px,7vw,32px);letter-spacing:.01em;
  color:rgba(240,232,216,.72)}
a.item:hover .lbl{color:var(--ci-cream)}
.smenu .item--on .num{color:var(--ci-tan)}
.smenu .item--on .lbl{color:var(--ci-cream)}
.smenu__foot{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(240,232,216,.5)}

/* 8 jazyků v overlay menu (mobil — lištový přepínač je skrytý) */
.smenu__langs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px}
.smenu__langs a{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(240,232,216,.6);text-decoration:none;border:1px solid rgba(240,232,216,.16);padding:7px 11px;
  transition:.15s}
.smenu__langs a:hover{color:var(--ci-cream);border-color:rgba(240,232,216,.4)}
.smenu__langs a.on{color:var(--ci-ink);background:var(--ci-tan);border-color:var(--ci-tan)}

/* ---------- responzivní ----------
   Full lišta s delšími labely (Know-how & market) + 8 položek + jazyk + CTA
   se pod ~1240 px nevejde na jeden řádek — proto silnější tightening do 1400,
   a pod 1240 přebírá hamburger (overlay má všechny položky i jazyky). */
@media(max-width:1400px){
  .sbar{padding:16px 30px}
  .sbar__l{gap:22px}
  .sbar__nav{gap:17px}
  .sbar__nav a{font-size:11px;letter-spacing:.06em}
  .sbar__nav .soon{font-size:11px;letter-spacing:.06em}
  .sbar__r{gap:18px;margin-left:22px}
  .sbar__cta{padding:8px 13px;letter-spacing:.1em}
}
@media(max-width:1240px){
  .sbar{padding:14px 20px}
  .sbar__nav,.sbar__lang,.sbar__div,.sbar__cta,.sbar__langrow,.sbar__login{display:none}
  .sburger{display:flex}
  .sbread{top:64px;padding:9px 20px;font-size:9.5px;letter-spacing:.12em;gap:7px}
  /* jazyky se přesouvají do overlay menu — viz .smenu__langs */
  /* na mobilu jen: ‹ rodič › aktuální — mezistupně skryj */
  .sbread .back{display:inline}
  .sbread .mid{display:none}
}

/* ---------- položky "brzy" (sekce zatím neexistují) — nerozklikávací, ztlumené ---------- */
.sbar__nav .soon{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(240,232,216,.30);padding:8px 0;white-space:nowrap;cursor:default}
.smenu .item--soon{cursor:default}
.smenu .item--soon .num{color:rgba(240,232,216,.26)}
.smenu .item--soon .lbl{color:rgba(240,232,216,.28)}
@media(max-width:1100px){.sbar__nav .soon{font-size:11px;letter-spacing:.1em}}