/* ==========================================================================
   Befox.design — ZÁKLAD
   Návrhové proměnné, reset, typografie, layoutová primitiva a společný obal
   stránky (top bar, hlavička, stavová lišta, patička, tlačítka).
   Načítá se na každé stránce jako první. Komponenty jsou v components.css.
   ========================================================================== */

/* Inter — text */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Space Grotesk — nadpisy */
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono — štítky a čísla */
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  /* Základní odstíny — kanály zvlášť, aby se daly použít s průhledností
     jako rgb(var(--fg-rgb) / .60). Nikde v CSS nemá být barva natvrdo. */
  --bg-rgb:11 14 20;
  --fg-rgb:231 234 240;
  --accent-rgb:255 107 44;
  --cyan-rgb:34 211 238;
  --shadow-rgb:0 0 0;

  --bg:rgb(var(--bg-rgb));
  --fg:rgb(var(--fg-rgb));
  --accent:rgb(var(--accent-rgb));

  /* Odvozené plochy a světlejší varianty */
  --surface-1:#0E1219;   /* rozbalené menu, překryvy */
  --surface-2:#0F1319;   /* nabídka jazyků, pole formuláře */
  --surface-3:#11151C;   /* podklad náhledu obrázku */
  --accent-hi:#FF8A58;   /* odkaz při najetí */
  --cyan-hi:#67E6FB;     /* datový odkaz při najetí */
  --warn:#FFB27A;        /* zástupný text k doplnění */
  --paper:#FFFFFF;       /* tisk */
  --ink:#111111;         /* tisk */
  --accent-soft:rgb(var(--accent-rgb) / .04);
  --cyan:rgb(var(--cyan-rgb));

  --fg-72:rgb(var(--fg-rgb) / .72);
  --fg-68:rgb(var(--fg-rgb) / .68);
  --fg-65:rgb(var(--fg-rgb) / .65);
  --fg-62:rgb(var(--fg-rgb) / .62);
  /* Pod .50 klesá kontrast na tmavém podkladu pod 4,5:1 (WCAG 2.2 AA),
     proto je .50 spodní hranice i pro nejtišší popisky. */
  --fg-55:rgb(var(--fg-rgb) / .55);   /*  5.36:1 */
  --fg-45:rgb(var(--fg-rgb) / .53);   /*  5.09:1 */
  --fg-42:rgb(var(--fg-rgb) / .52);   /*  4.96:1 */
  --fg-40:rgb(var(--fg-rgb) / .51);   /*  4.82:1 */
  --fg-38:rgb(var(--fg-rgb) / .50);   /*  4.69:1 */

  --line:rgb(var(--fg-rgb) / .10);
  --line-soft:rgb(var(--fg-rgb) / .07);
  --line-strong:rgb(var(--fg-rgb) / .12);

  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;

  --wrap:1240px;
  --pad:32px;
  --t:180ms ease;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:112px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

html{overflow-x:clip}
body{
  margin:0;
  overflow-wrap:break-word;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--accent-hi)}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;margin:0;text-wrap:balance}
p{margin:0}
strong{color:var(--fg)}

:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px}
/* Záloha pro prohlížeče bez podpory :focus-visible — na tmavém podkladu
   je výchozí obrys prakticky neviditelný, proto vlastní. */
@supports not selector(:focus-visible){
  a:focus,button:focus,summary:focus,input:focus,select:focus,textarea:focus{
    outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px;
  }
}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.grid-bg{
  background-color:var(--bg);
  background-image:
    linear-gradient(rgb(var(--fg-rgb) / .028) 1px,transparent 1px),
    linear-gradient(90deg,rgb(var(--fg-rgb) / .028) 1px,transparent 1px);
  background-size:64px 64px;
  min-height:100vh;
}
.rule{border-bottom:1px solid var(--line)}
.mono{font-family:var(--mono)}
.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--bg);padding:12px 18px;z-index:100;font-weight:600}
.skip:focus{left:12px;top:12px}

/* --------------------------------------------------------------- top bar */

.topbar{
  border-bottom:1px solid var(--line);
  background:rgb(var(--accent-rgb) / .05);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  position:relative;
  z-index:40;
}
.topbar__in{
  display:flex;align-items:center;gap:26px;
  min-height:38px;padding-top:6px;padding-bottom:6px;
  flex-wrap:wrap;
}
.topbar a{color:inherit}

.emergency{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--accent);text-transform:uppercase;font-weight:500;
  white-space:nowrap;
  transition:text-shadow var(--t),color var(--t);
}
.emergency:hover{color:var(--accent);text-shadow:0 0 14px rgb(var(--accent-rgb) / .6)}
.emergency__short{display:none}
.pulse{
  width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 0 rgb(var(--accent-rgb) / .6);animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgb(var(--accent-rgb) / .55)}
  70%{box-shadow:0 0 0 8px rgb(var(--accent-rgb) / 0)}
  100%{box-shadow:0 0 0 0 rgb(var(--accent-rgb) / 0)}
}
.topbar__sep{color:var(--fg-38)}
.topbar__mail{color:var(--fg-55);transition:color var(--t)}
.topbar__mail:hover{color:var(--fg)}
.topbar__hours{color:var(--fg-45)}
.topbar__right{margin-left:auto;display:flex;align-items:center;gap:18px}

/* přepínač jazyků — <details>, aby fungoval i bez JavaScriptu */
.lang{position:relative}
.lang__btn{
  list-style:none;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  border:1px solid var(--line-strong);border-radius:3px;
  color:var(--fg-55);padding:5px 10px;
  display:inline-flex;align-items:center;gap:8px;
  transition:border-color var(--t),color var(--t);
}
.lang__btn::-webkit-details-marker{display:none}
.lang__btn::marker{content:""}
.lang__btn:hover{color:var(--fg);border-color:rgb(var(--cyan-rgb) / .5)}
.lang__chev{opacity:.7;transition:transform var(--t)}
.lang[open] .lang__chev{transform:rotate(180deg)}
.lang__menu{
  position:absolute;top:calc(100% + 7px);right:0;min-width:196px;
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:6px;
  box-shadow:0 18px 40px rgb(var(--shadow-rgb) / .55);
  padding:5px;margin:0;list-style:none;z-index:60;
}
.lang__menu li + li{margin-top:2px}
.lang__opt{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 10px;border-radius:4px;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;color:var(--fg-72);
  text-align:left;
  transition:background var(--t),color var(--t);
}
.lang__opt:hover:not([aria-disabled="true"]){background:rgb(var(--fg-rgb) / .05);color:var(--fg)}
.lang__opt[aria-current="true"]{color:var(--cyan)}
.lang__opt[aria-disabled="true"]{cursor:not-allowed;color:var(--fg-40)}
.lang__code{width:22px;flex:none;font-weight:500}
.lang__name{flex:1}
.lang__soon{font-size:9.5px;letter-spacing:.1em;color:var(--fg-38);border:1px solid var(--line);border-radius:2px;padding:2px 5px}

/* ---------------------------------------------------------------- header */

.header{
  position:sticky;top:0;z-index:30;
  border-bottom:1px solid var(--line);
  background:rgb(var(--bg-rgb) / .88);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.header__in{display:flex;align-items:center;gap:40px;height:68px}
.brand{
  font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em;
  color:var(--fg);display:flex;align-items:baseline;gap:2px;flex:none;
}
.brand:hover{color:var(--fg)}
.brand span{font-family:var(--mono);font-size:12px;color:var(--fg-45);font-weight:400}
.nav{display:flex;align-items:center;gap:26px;font-size:14px;margin-left:8px}
.nav a{color:var(--fg-72)}
.nav a:hover,.nav a[aria-current="true"]{color:var(--fg)}
.header__cta{margin-left:auto;display:flex;align-items:center;gap:18px}

.btn{
  display:inline-block;font-size:15px;font-weight:500;border-radius:4px;
  padding:14px 24px;border:1px solid transparent;cursor:pointer;
  font-family:var(--body);text-align:center;
  transition:box-shadow var(--t),transform var(--t),border-color var(--t),color var(--t);
}
.btn--primary{background:var(--accent);color:var(--bg)}
.btn--primary:hover{color:var(--bg);box-shadow:0 0 28px rgb(var(--accent-rgb) / .45);transform:translateY(-1px)}
.btn--ghost{color:var(--fg);border-color:rgb(var(--fg-rgb) / .22)}
.btn--ghost:hover{color:var(--fg);border-color:rgb(var(--cyan-rgb) / .6);box-shadow:0 0 20px rgb(var(--cyan-rgb) / .18)}
.btn--sm{font-size:14px;padding:11px 18px}

.burger{
  display:none;background:none;border:1px solid var(--line-strong);border-radius:4px;
  width:40px;height:38px;cursor:pointer;padding:0;align-items:center;justify-content:center;
}
.burger span{display:block;width:17px;height:1.5px;background:var(--fg);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--fg)}
.burger span::before{top:-5px}
.burger span::after{top:5px}

/* --------------------------------------------------------- status strip */

.statusbar{border-bottom:1px solid var(--line);background:rgb(var(--cyan-rgb) / .03);overflow:hidden}
.statusbar__in{
  display:flex;align-items:center;gap:28px;
  padding-top:9px;padding-bottom:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  color:rgb(var(--fg-rgb) / .6);white-space:nowrap;
}
.statusbar__live{display:flex;align-items:center;gap:8px;color:var(--cyan);flex:none}
.dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px rgb(var(--cyan-rgb) / .8)}
.statusbar__clock{margin-left:auto;color:var(--fg-40);flex:none}

/* ----------------------------------------------------------- section h/l */

.sec{padding-top:76px;padding-bottom:76px}
.sec--lg{padding-top:84px;padding-bottom:76px}
.sec-head{margin-bottom:40px}
.sec-head--tight{margin-bottom:12px}
.sec-head h2{font-weight:600;font-size:38px}
.sec-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--fg-42);margin:0 0 40px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--cyan);margin-bottom:22px}
.eyebrow--accent{color:var(--accent)}
.link-mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em}

/* ---------------------------------------------------------------- footer */

.footer__cols{
  display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:40px;
  padding-top:56px;padding-bottom:28px;
}
.footer__brand{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em;margin-bottom:14px}
.footer__brand span{font-family:var(--mono);font-size:12px;color:var(--fg-45);font-weight:400}
.footer__about{font-size:14.5px;line-height:1.6;color:var(--fg-55);margin-bottom:16px;max-width:30ch}
.footer__legal{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--fg-40);line-height:1.9}
.footer__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--fg-40);margin-bottom:14px}
.footer__links{display:grid;gap:9px;font-size:14.5px}
.footer__links a{color:var(--fg-68)}
.footer__links a:hover{color:var(--fg)}
.footer__contact{display:grid;gap:9px;font-family:var(--mono);font-size:12.5px}
.footer__bar{border-top:1px solid var(--line)}
.footer__bar-in{
  display:flex;gap:24px;flex-wrap:wrap;align-items:center;
  padding-top:18px;padding-bottom:18px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--fg-38);
}
.footer__bar-in a{color:var(--fg-55)}
.footer__bar-in a:hover{color:var(--fg)}
.footer__wcag{margin-left:auto}

/* ============================================================ responzivita */

/* Stavová lišta — postupně odebírat údaje, ať se řádek nikdy neořízne. */
@media (max-width:1000px){
  .statusbar__in > .statusbar__stat:nth-child(4){display:none}
}
@media (max-width:880px){
  .statusbar__in > .statusbar__stat:nth-child(3){display:none}
}

@media (max-width:1080px){
  .footer__cols{grid-template-columns:1fr 1fr;gap:32px}
}

@media (max-width:920px){
  .nav,.header__cta .btn{display:none}
  .burger{display:flex}
  .header__in{gap:16px}
  .nav--open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:68px;left:0;right:0;
    background:var(--surface-1);border-bottom:1px solid var(--line);
    padding:8px 0;margin:0;z-index:35;
  }
  .nav--open > a{padding:13px var(--pad);font-size:15px}
  .nav--open > a + a{border-top:1px solid var(--line-soft)}
}

@media (max-width:760px){
  :root{--pad:20px}
  html{scroll-padding-top:96px}
  .sec,.sec--lg{padding-top:56px;padding-bottom:56px}
  .sec-head h2{font-size:29px}
  .footer__cols{grid-template-columns:1fr;gap:28px}
  .topbar__hours,.topbar__sep{display:none}
  .topbar__in{gap:12px;row-gap:6px;flex-wrap:nowrap}
  .topbar__right{gap:12px}
  .statusbar__in{gap:16px}
  .statusbar__stat{display:none}
  .btn{padding:13px 20px}
}

@media (max-width:660px){
  .topbar__mail{display:none}
  .emergency__long{display:none}
  .emergency__short{display:inline}
}

@media print{
  .topbar,.statusbar,.header,.burger{display:none}
  body{background:var(--paper);color:var(--ink)}
}

/* ==========================================================================
   MEGA MENU
   <details> — ovládá se klávesnicí a funguje i bez JavaScriptu.
   Na širokém displeji panel pod hlavičkou, na mobilu vnořený seznam.
   ========================================================================== */

.nav__drop{position:static}
.nav__link{
  list-style:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  color:var(--fg-72);transition:color var(--t);
}
.nav__link::-webkit-details-marker{display:none}
.nav__link::marker{content:""}
.nav__link:hover,.nav__drop[open] .nav__link{color:var(--fg)}
.nav__chev{opacity:.65;transition:transform var(--t)}
.nav__drop[open] .nav__chev{transform:rotate(180deg)}

.mega{
  position:absolute;left:0;right:0;top:100%;z-index:45;
  background:var(--surface-1);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:0 24px 48px rgb(var(--shadow-rgb) / .5);
  max-height:calc(100vh - 106px);overflow-y:auto;overscroll-behavior:contain;
}
.mega__in{
  max-width:var(--wrap);margin:0 auto;padding:30px var(--pad) 26px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px 36px;
}
.mega__col{min-width:0}
.mega__pillar{
  display:block;font-family:var(--display);font-weight:600;font-size:16px;
  letter-spacing:-.015em;color:var(--fg);margin-bottom:5px;
}
.mega__pillar:hover{color:var(--cyan)}
.mega__pillar[aria-current="page"]{color:var(--cyan)}
.mega__note{
  font-size:12.5px;line-height:1.45;color:var(--fg-55);
  margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line-soft);
}
.mega__list{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.mega__list a{
  display:block;font-size:13.5px;line-height:1.3;color:var(--fg-68);
  padding:4px 8px;margin-left:-8px;border-radius:3px;
  transition:background var(--t),color var(--t);
}
.mega__list a:hover{background:rgb(var(--fg-rgb) / .05);color:var(--fg)}
.mega__list a[aria-current="page"]{color:var(--cyan)}
.mega__all{
  grid-column:1 / -1;margin:0;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
}

@media (max-width:920px){
  /* V rozbaleném mobilním menu je mega jen další úroveň seznamu. */
  .nav--open .nav__drop{width:100%}
  .nav--open .nav__link{
    display:flex;justify-content:space-between;width:100%;
    padding:13px var(--pad);font-size:15px;
  }
  .nav--open .nav__drop + a{border-top:1px solid var(--line-soft)}
  .mega{
    position:static;box-shadow:none;border-top:1px solid var(--line-soft);
    border-bottom:0;background:rgb(var(--fg-rgb) / .02);
    /* Seznam se roluje uvnitř menu, aby nepřerostl celou obrazovku. */
    max-height:min(62vh,520px);overflow-y:auto;overscroll-behavior:contain;
  }
  .mega__in{
    grid-template-columns:1fr;gap:0;padding:2px var(--pad) 10px;max-width:none;
  }
  .mega__col{border-bottom:1px solid var(--line-soft);padding:10px 0}
  .mega__col:last-of-type{border-bottom:0}
  .mega__pillar{
    font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--fg-55);margin-bottom:6px;
  }
  .mega__pillar[aria-current="page"]{color:var(--cyan)}
  .mega__note{display:none}
  .mega__list{grid-template-columns:1fr 1fr;gap:1px 8px}
  .mega__list a{font-size:13.5px;padding:7px 8px;margin-left:-8px}
  .mega__all{padding-top:12px;border-top:0}
}

@media (max-width:400px){
  .mega__list{grid-template-columns:1fr}
}