/* =============================================================================
   core.css — spolecny zaklad vsech stranek KapSecurity.
   Obsahuje: designove tokeny, pismo, reset, pozadi, navigaci, paticku,
   tlacitka a hlavicku podstranek.

   Nahrazuje puvodni base.css + nav-mobile.css a duplicitni navigaci,
   kterou mela home.css jeste jednou ve vlastni kopii.

   Poradi vrstev (@layer) urcuje silu pravidel bez souboje specificity:
   stranka (home.css, clanek.css, ...) muze prepsat komponentu jednim
   trefnym selektorem a nemusi stupnovat vahu ani sahat po !important.
   ========================================================================== */

@layer tokens, base, components, utilities;

/* --- Pismo: variabilni Inter, hostovane u nas ------------------------------
   Dva rezy pokryji cestinu: "latin" ma a-z a pismena s carkou,
   "latin-ext" hacky a krouzky. Nic se nestahuje z ciziho serveru, takze web
   nikam neposila IP navstevniku a pismo je k dispozici hned. */
@font-face {
    font-family: "Inter var";
    font-style: normal;
    font-weight: 400 800;
    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 var";
    font-style: normal;
    font-weight: 400 800;
    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;
}

@layer tokens {
    :root {
        /* ---- barvy ----
           Zaklad zustava puvodni tmave namornicka modr, jen serazena do
           stupnice, aby se odstiny nevymyslely znovu u kazde komponenty. */
        --barva-pozadi:        #030711;
        --barva-pozadi-hloub:  #01030a;
        --plocha:              #0a1020;
        --plocha-2:            #0e1526;
        --linka:               #1b2537;

        --text:                #e9eefb;
        --text-tlumeny:        #9aa8c2;
        --text-slaby:          #6b7a94;

        /* Znackove akcenty: modra = Hikvision a web obecne,
           tyrkysova = Ctronics, fialova = Suprema a rezervacni system. */
        --modra:               #3b82f6;
        --modra-svetla:        #7cb0ff;
        --modra-tmava:         #1d4ed8;
        --tyrkys:              #22d3ee;
        --fialova:             #a78bfa;
        --fialova-tmava:       #7c3aed;

        /* Akcent, ktery si stranka nebo sekce prepise na svou barvu.
           Vsechny komponenty niz uz sahaji jen sem. */
        --akcent:              var(--modra);
        --akcent-rgb:          59, 130, 246;

        /* ---- typografie ----
           Plynula stupnice: mensi cislo plati na telefonu, vetsi na sirokem
           monitoru, mezi tim se dopocitava — zadne skoky na breakpointech. */
        --pismo: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        --pismo-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

        --t--1:  clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
        --t-0:   clamp(0.95rem, 0.92rem + 0.16vw, 1.05rem);
        --t-1:   clamp(1.08rem, 1.03rem + 0.24vw, 1.22rem);
        --t-2:   clamp(1.3rem,  1.21rem + 0.44vw, 1.6rem);
        --t-3:   clamp(1.6rem,  1.42rem + 0.9vw,  2.2rem);
        --t-4:   clamp(2rem,    1.66rem + 1.7vw,  3rem);
        --t-5:   clamp(2.4rem,  1.8rem  + 3vw,    4.2rem);

        /* ---- rozestupy, rohy, stiny ---- */
        --m-1: 0.5rem;
        --m-2: 0.75rem;
        --m-3: 1rem;
        --m-4: 1.5rem;
        --m-5: 2rem;
        --m-6: 3rem;
        --m-7: 4.5rem;
        --m-8: clamp(4rem, 3rem + 5vw, 7.5rem);

        --r-1: 10px;
        --r-2: 14px;
        --r-3: 20px;
        --r-4: 28px;
        --r-kulaty: 999px;

        --stin-1: 0 2px 8px rgb(0 0 0 / 0.35);
        --stin-2: 0 12px 32px rgb(0 0 0 / 0.45);
        --stin-3: 0 30px 70px rgb(0 0 0 / 0.55);

        --sirka-obsahu: 1240px;
        --vyska-hlavicky: 72px;

        --prechod: 0.25s cubic-bezier(0.22, 1, 0.36, 1);
        --prechod-pomaly: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Sekce si prepnou akcent jedinou tridou a vse uvnitr (odznaky, ramecky,
       zare, odkazy) se prebarvi samo. */
    [data-akcent="ctronics"]  { --akcent: var(--tyrkys);   --akcent-rgb: 34, 211, 238; }
    [data-akcent="suprema"]   { --akcent: var(--fialova);  --akcent-rgb: 167, 139, 250; }
    [data-akcent="rezervace"] { --akcent: #c4b5fd;         --akcent-rgb: 196, 181, 253; }
    [data-akcent="hikvision"] { --akcent: var(--modra);    --akcent-rgb: 59, 130, 246; }
}

@layer base {
    *, *::before, *::after { box-sizing: border-box; }

    html {
        scroll-behavior: smooth;
        /* Kotva nesmi skoncit pod fixni hlavickou. */
        scroll-padding-top: calc(var(--vyska-hlavicky) + 24px);
        -webkit-text-size-adjust: 100%;
    }

    body {
        margin: 0;
        min-height: 100dvh;
        background-color: var(--barva-pozadi);
        color: var(--text);
        font-family: var(--pismo);
        font-size: var(--t-0);
        line-height: 1.65;
        font-synthesis-weight: none;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
    }

    /* Pozadi ve dvou vrstvach: barevne mlhoviny a pres ne jemna mrizka,
       ktera se ke krajum rozplyne. Obe jsou jen dekorace, proto pod obsahem
       a bez zachytavani mysi. */
    body::before,
    body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
    }

    body::before {
        background:
            radial-gradient(60rem 40rem at 78% -5%,  rgb(59 130 246 / 0.20), transparent 65%),
            radial-gradient(45rem 35rem at 8% 18%,   rgb(124 58 237 / 0.14), transparent 62%),
            radial-gradient(50rem 40rem at 50% 105%, rgb(34 211 238 / 0.10), transparent 60%),
            linear-gradient(180deg, var(--barva-pozadi) 0%, var(--barva-pozadi-hloub) 100%);
    }

    body::after {
        background-image:
            linear-gradient(rgb(148 163 184 / 0.045) 1px, transparent 1px),
            linear-gradient(90deg, rgb(148 163 184 / 0.045) 1px, transparent 1px);
        background-size: 64px 64px;
        mask-image: radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 75%);
    }

    h1, h2, h3, h4 {
        color: #fff;
        font-weight: 750;
        letter-spacing: -0.022em;
        line-height: 1.15;
        text-wrap: balance;
        margin: 0;
    }

    p { text-wrap: pretty; }

    a { color: var(--akcent); }

    img, svg, iframe { max-width: 100%; }
    img { height: auto; }

    :focus-visible {
        outline: 2px solid var(--modra-svetla);
        outline-offset: 3px;
        border-radius: 4px;
    }

    ::selection { background-color: rgb(var(--akcent-rgb) / 0.3); color: #fff; }

    /* Vlastni posuvnik ladeny do tmy stranky. */
    @supports (scrollbar-color: red blue) {
        html { scrollbar-color: #24304a transparent; scrollbar-width: thin; }
    }

    /* Kdo ma v systemu vypnute animace, dostane statickou stranku. */
    @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        *, *::before, *::after {
            animation-duration: 0.001ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.001ms !important;
        }
    }

    /* Prechod mezi strankami (Technologie -> clanek). Prohlizec, ktery to
       neumi, prejde normalne a nic mu nechybi. */
    @view-transition { navigation: auto; }
}

@layer components {

    /* ---------- prvni odkaz pro klavesnici ---------- */
    .preskocit {
        position: absolute;
        left: 50%;
        top: 8px;
        translate: -50% -200%;
        z-index: 200;
        padding: 10px 20px;
        border-radius: var(--r-kulaty);
        background-color: var(--modra);
        color: #fff;
        font-weight: 600;
        text-decoration: none;
        transition: translate var(--prechod);
    }
    .preskocit:focus-visible { translate: -50% 0; }

    /* ---------- navigace ---------- */
    /* Jen hlavni hlavicka stranky. Selektor je zamerne "body > nav" —
       obycejne "nav" by chytlo i drobeckovou navigaci uvnitr obsahu. */
    body > nav {
        position: fixed;
        inset: 0 0 auto 0;
        height: var(--vyska-hlavicky);
        z-index: 100;
        background-color: rgb(3 7 17 / 0.62);
        backdrop-filter: blur(16px) saturate(150%);
        border-bottom: 1px solid transparent;
        transition: background-color var(--prechod), border-color var(--prechod), box-shadow var(--prechod);
    }

    /* Po odscrollovani hlavicka ztmavne a oddeli se linkou — do te doby
       splyva s uvodem a nerozbiji ho vodorovnym pruhem. */
    body > nav[data-odscrolovano] {
        background-color: rgb(3 7 17 / 0.86);
        border-bottom-color: var(--linka);
        box-shadow: var(--stin-2);
    }

    /* Ukazatel projite delky stranky. Kresli se cistym CSS podle scrollu,
       bez jedineho radku JavaScriptu. Prohlizec bez podpory ho neukaze. */
    body > nav::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        height: 2px;
        width: 100%;
        transform-origin: 0 50%;
        background: linear-gradient(90deg, var(--modra), var(--tyrkys) 60%, var(--fialova));
        opacity: 0;
    }
    @supports (animation-timeline: scroll()) {
        body > nav::after {
            opacity: 1;
            scale: 0 1;
            animation: postup-stranky linear both;
            animation-timeline: scroll(root block);
        }
    }
    @keyframes postup-stranky { to { scale: 1 1; } }

    .nav-container {
        max-width: var(--sirka-obsahu);
        height: 100%;
        margin: 0 auto;
        padding: 0 clamp(16px, 4vw, 40px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--m-3);
    }

    .logo {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 1.15rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        color: var(--text);
        text-decoration: none;
        transition: opacity var(--prechod);
    }
    .logo:hover { opacity: 0.85; }
    .logo img {
        height: 44px;
        width: auto;
        filter: drop-shadow(0 4px 12px rgb(59 130 246 / 0.45));
    }
    .logo span { color: var(--modra); }
    .logo-text { display: flex; }

    .nav-links {
        display: flex;
        align-items: center;
        height: 100%;
        gap: clamp(2px, 1vw, 10px);
    }

    .nav-links a {
        position: relative;
        padding: 8px 12px;
        border-radius: var(--r-kulaty);
        color: var(--text-tlumeny);
        font-size: 0.94rem;
        font-weight: 500;
        text-decoration: none;
        transition: color var(--prechod), background-color var(--prechod);
    }
    .nav-links a:hover { color: #fff; background-color: rgb(148 163 184 / 0.10); }
    .nav-links a.aktivni { color: #fff; }
    .nav-links a.aktivni::after {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 2px;
        height: 2px;
        border-radius: 2px;
        background: var(--modra);
    }

    .nav-item { position: relative; display: flex; align-items: center; height: 100%; }
    .nav-item > a::after {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        margin-left: 7px;
        border-right: 1.6px solid currentColor;
        border-bottom: 1.6px solid currentColor;
        rotate: 45deg;
        translate: 0 -2px;
        opacity: 0.6;
        transition: rotate var(--prechod);
    }
    .nav-item:hover > a::after { rotate: 225deg; translate: 0 1px; }

    .nav-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 180px;
        margin-top: 6px;
        padding: 6px;
        background-color: rgb(6 11 24 / 0.96);
        backdrop-filter: blur(16px);
        border: 1px solid var(--linka);
        border-radius: var(--r-2);
        box-shadow: var(--stin-3);
        opacity: 0;
        visibility: hidden;
        translate: 0 -8px;
        transition: opacity var(--prechod), translate var(--prechod), visibility var(--prechod);
    }
    /* Neviditelny mustek, aby menu nezmizelo pri prejezdu mysi pres mezeru. */
    .nav-dropdown::before {
        content: "";
        position: absolute;
        inset: -10px 0 auto 0;
        height: 16px;
    }
    .nav-item:hover .nav-dropdown,
    .nav-item:focus-within .nav-dropdown {
        opacity: 1;
        visibility: visible;
        translate: 0 0;
    }
    .nav-dropdown a {
        display: block;
        padding: 9px 14px;
        border-radius: var(--r-1);
        font-size: 0.9rem;
        white-space: nowrap;
    }

    /* ---------- hamburger ---------- */
    .nav-toggle { display: none; }

    /* 900 px, ne 768: pet polozek plus logo se do radku nevejde uz driv. */
    @media (max-width: 900px) {
        .nav-toggle {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 5px;
            width: 44px;
            height: 44px;
            padding: 0;
            background: none;
            border: 0;
            border-radius: var(--r-1);
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        .nav-toggle-line {
            width: 22px;
            height: 2px;
            margin: 0 auto;
            border-radius: 2px;
            background-color: var(--text);
            transition: transform var(--prechod), opacity 0.15s ease;
        }
        .nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
        .nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(2) { opacity: 0; }
        .nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

        .nav-links {
            display: none;
            position: fixed;
            top: var(--vyska-hlavicky);
            left: 0;
            right: 0;
            flex-direction: column;
            align-items: stretch;
            height: auto;
            max-height: calc(100dvh - var(--vyska-hlavicky));
            overflow-y: auto;
            gap: 2px;
            padding: 10px 12px 20px;
            /* Vysunuty panel je zamerne uplne neprusvitny — pres poloprusvitne
               pozadi prosvital text stranky a menu se spatne cetlo. */
            background-color: var(--barva-pozadi);
            border-bottom: 1px solid var(--linka);
            box-shadow: var(--stin-3);
        }
        .nav-links.otevreno { display: flex; }

        .nav-links > a,
        .nav-item > a {
            display: block;
            padding: 14px 16px;
            border-radius: var(--r-2);
            font-size: 1rem;
        }
        .nav-links a.aktivni::after { content: none; }

        /* Na dotyku hover neexistuje, proto jsou podpolozky rovnou videt. */
        .nav-item { display: block; position: static; height: auto; }
        .nav-item > a::after { content: none; }
        .nav-dropdown {
            display: block;
            position: static;
            min-width: 0;
            margin: 0 0 0 14px;
            padding: 0;
            opacity: 1;
            visibility: visible;
            translate: none;
            background: none;
            border: 0;
            border-left: 1px solid var(--linka);
            border-radius: 0;
            box-shadow: none;
        }
        .nav-dropdown::before { content: none; }
        .nav-dropdown a { padding: 12px 16px; color: var(--text-slaby); }
    }

    @media (max-width: 420px) {
        .logo img { height: 36px; }
        .logo { font-size: 1rem; gap: 8px; }
    }

    /* ---------- tlacitka ---------- */
    .tlacitko {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 14px 28px;
        border: 1px solid transparent;
        border-radius: var(--r-kulaty);
        font: inherit;
        font-size: 0.98rem;
        font-weight: 650;
        text-decoration: none;
        cursor: pointer;
        transition: transform var(--prechod), box-shadow var(--prechod),
                    background-color var(--prechod), border-color var(--prechod), color var(--prechod);
    }
    .tlacitko:hover { transform: translateY(-2px); }
    .tlacitko:active { transform: translateY(0); }

    .tlacitko-hlavni {
        position: relative;
        overflow: hidden;
        background: linear-gradient(135deg, var(--modra) 0%, var(--modra-tmava) 100%);
        color: #fff;
        box-shadow: 0 8px 24px rgb(37 99 235 / 0.35);
    }
    /* Jemny lesk prejizdejici pres tlacitko pri najeti mysi. */
    .tlacitko-hlavni::after {
        content: "";
        position: absolute;
        inset: 0;
        translate: -120% 0;
        background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.28), transparent);
        transition: translate var(--prechod-pomaly);
    }
    .tlacitko-hlavni:hover { box-shadow: 0 12px 32px rgb(37 99 235 / 0.5); }
    .tlacitko-hlavni:hover::after { translate: 120% 0; }

    .tlacitko-vedlejsi {
        background-color: rgb(148 163 184 / 0.06);
        border-color: var(--linka);
        color: var(--text);
    }
    .tlacitko-vedlejsi:hover {
        border-color: rgb(var(--akcent-rgb) / 0.6);
        background-color: rgb(var(--akcent-rgb) / 0.08);
        color: #fff;
    }

    /* ---------- odznaky a popisky sekci ---------- */
    .odznak {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 14px;
        border: 1px solid rgb(var(--akcent-rgb) / 0.35);
        border-radius: var(--r-kulaty);
        background-color: rgb(var(--akcent-rgb) / 0.10);
        color: var(--akcent);
        font-size: var(--t--1);
        font-weight: 600;
        letter-spacing: 0.03em;
    }
    /* Tecka pred textem odznaku, aby nebyl jen holy ramecek. */
    .odznak::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: currentColor;
        box-shadow: 0 0 8px currentColor;
    }

    .nadpis-sekce {
        font-family: var(--pismo-mono);
        font-size: var(--t--1);
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--akcent);
    }

    /* ---------- hlavicka podstranky ---------- */
    .stranka-hlavicka {
        max-width: var(--sirka-obsahu);
        margin: 0 auto;
        padding: calc(var(--vyska-hlavicky) + var(--m-7)) clamp(20px, 5vw, 40px) 0;
    }
    .drobecky { font-size: 0.88rem; color: var(--text-slaby); margin-bottom: var(--m-4); }
    .drobecky a { color: var(--text-tlumeny); text-decoration: none; }
    .drobecky a:hover { color: var(--akcent); }
    .stranka-hlavicka h1 { font-size: var(--t-4); margin: var(--m-4) 0 var(--m-3); }
    .stranka-hlavicka .perex {
        font-size: var(--t-1);
        color: var(--text-tlumeny);
        line-height: 1.75;
        max-width: 68ch;
        margin: 0;
    }

    /* ---------- paticka ---------- */
    .site-footer {
        max-width: var(--sirka-obsahu);
        margin: var(--m-8) auto 0;
        padding: var(--m-5) clamp(20px, 5vw, 40px) var(--m-6);
        border-top: 1px solid var(--linka);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: var(--m-3);
        color: var(--text-slaby);
        font-size: 0.88rem;
    }
    .site-footer p { margin: 0; }
    .site-footer a {
        color: var(--text-tlumeny);
        text-decoration: none;
        transition: color var(--prechod);
    }
    .site-footer a:hover { color: var(--akcent); }
    .footer-divisions-links a { margin-left: 12px; }

    @media (max-width: 640px) {
        .site-footer { flex-direction: column; text-align: center; }
        .footer-divisions-links a { margin: 0 8px; }
    }
}

@layer utilities {
    /* Text jen pro odectovace obrazovky. */
    .jen-pro-cteni {
        position: absolute;
        width: 1px; height: 1px;
        margin: -1px; padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* Prvek se objevi, az na nej doscrollujeme. Tridu "videt" pridava
       site.js pres IntersectionObserver. Bez JS zustane vse videt. */
    .nabehne {
        opacity: 0;
        translate: 0 24px;
        transition: opacity var(--prechod-pomaly), translate var(--prechod-pomaly);
    }
    .nabehne.videt { opacity: 1; translate: 0 0; }

    /* Zpozdeni pro naskakujici skupinu prvku (mrizka karet). */
    .nabehne[data-poradi="1"] { transition-delay: 0.08s; }
    .nabehne[data-poradi="2"] { transition-delay: 0.16s; }
    .nabehne[data-poradi="3"] { transition-delay: 0.24s; }

    @media (prefers-reduced-motion: reduce) {
        .nabehne { opacity: 1; translate: none; }
    }
}