/* =========================================================================
   Site-wide styly: základ, hlavička, patička, DS komponenty, reveal.
   Staví na tokenech z ds.css. Stylování konkrétních stránek patří
   do vlastního souboru (např. home.css), načteného přes @section Head.

   Konvence: třídy s prefixem k-, BEM-ish (k-blok__prvek--modifikátor).
   Marketingové stránky = bespoke CSS na tokenech; běžné UI = Tailwind utility
   (tailwind.config v _Layout.cshtml je napojený na stejné tokeny).

   Pozor: wwwroot/libs/ je v .gitignore, JS knihovny sem NEVENDOROVAT.
   ========================================================================= */

:root {
    color-scheme: light;

    /* Mimo DS: modré CTA v hlavičce je v návrhu jediný barevný prvek. */
    --k-cta: #3A83F7;
    --k-cta-hover: #2E6EDC;
    --k-header-height: 76px;
}

html {
    scroll-padding-top: var(--k-header-height);
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* Návrh přepisuje DS base: odkazy ink, hover neutral-700. */
a { color: var(--ink); }
a:hover { color: var(--neutral-700); }


/* --- Hlavička ------------------------------------------------------------ */

.k-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    height: var(--k-header-height);
    padding: 0 clamp(24px, 5vw, 96px);
    background: rgba(253, 253, 252, 0.85);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.k-logo,
.k-logo:hover {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: var(--tracking-tighter);
    color: var(--ink);
}

.k-nav {
    display: flex;
    align-items: center;
    gap: 40px;
}

.k-nav__link {
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-600);
    transition: color var(--duration-fast) var(--ease-reveal);
}

.k-nav__link:hover { color: var(--ink); }

.k-nav__cta {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 20px;
    border-radius: var(--radius-pill);
    background: var(--k-cta);
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--duration-fast) var(--ease-reveal), transform 150ms var(--ease-reveal);
}

.k-nav__cta:hover { background: var(--k-cta-hover); color: var(--white); }
.k-nav__cta:active { transform: scale(0.95); }

/* Dropdown „Pro firmy“ – na hover (myš) i na klik (dotyk, klávesnice; viz site.js). */
.k-dropdown { position: relative; }

.k-dropdown__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-600);
    transition: color var(--duration-fast) var(--ease-reveal);
}

.k-dropdown__trigger:hover,
.k-dropdown.is-open .k-dropdown__trigger { color: var(--ink); }

.k-dropdown__panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 12px;
    z-index: 60;
}

.k-dropdown:hover .k-dropdown__panel,
.k-dropdown.is-open .k-dropdown__panel { display: block; }

.k-dropdown__menu {
    min-width: 220px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--neutral-200);
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(229, 229, 229, 0.5), 0 8px 10px -6px rgba(229, 229, 229, 0.5);
}

.k-dropdown__item,
.k-dropdown__item:hover {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    transition: background var(--duration-fast) var(--ease-reveal);
}

.k-dropdown__item:hover { background: var(--neutral-100); }

@media (max-width: 640px) {
    .k-header { gap: 16px; padding: 0 16px; }
    .k-nav { gap: 20px; }
    /* „Kontakt“ i CTA vedou na #kontakt – na mobilu stačí CTA. */
    .k-nav__link--contact { display: none; }
    .k-nav__cta { padding: 0 16px; }
}


/* --- Patička ------------------------------------------------------------- */

.k-footer {
    padding: clamp(24px, 3vw, 40px) clamp(24px, 5vw, 96px) clamp(40px, 4vw, 64px);
}

.k-footer__inner {
    max-width: var(--page-max);
    margin: 0 auto;
}

.k-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 72px);
    align-items: end;
}

.k-footer__claim {
    margin: 0;
    font-size: clamp(24px, 3vw, 44px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: var(--tracking-tighter);
    color: var(--ink);
    text-wrap: pretty;
}

.k-footer__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px 32px;
}

.k-footer__link {
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-600);
    transition: color var(--duration-fast) var(--ease-reveal);
}

.k-footer__link:hover { color: var(--ink); }

.k-footer__bottom {
    margin-top: clamp(32px, 4vw, 56px);
    padding-top: clamp(24px, 3vw, 36px);
    border-top: 1px solid var(--neutral-100);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px 32px;
}

.k-footer__name { font-size: 14px; font-weight: 500; color: var(--neutral-600); }
.k-footer__meta { font-size: 14px; font-weight: 500; color: var(--neutral-500); }
.k-footer__mono { font-family: var(--font-mono); font-size: 12px; color: var(--neutral-500); }

/* Placeholder z návrhu pro chybějící obsah – před spuštěním nahradit. */
.k-todo {
    border: 1px dashed var(--neutral-300);
    border-radius: var(--radius-pill);
    padding: 6px 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--neutral-400);
}

@media (max-width: 760px) {
    .k-footer__top { grid-template-columns: minmax(0, 1fr); }
    .k-footer__links { justify-content: flex-start; }
}


/* --- DS: Button (components/actions/Button.jsx) ---------------------------
   React komponenta převedená na CSS. Hover/press stavy řeší :hover/:active.
   Dvojitá třída u skinů kvůli Tailwind preflightu: Play CDN vkládá svůj <style>
   až ZA naše CSS a jeho [type='submit'] { background-color: transparent }
   by se stejnou specificitou jinak vyhrálo. */

.k-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-sizing: border-box;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--duration-fast);
}

.k-btn.k-btn--lg { padding: 16px 40px; font-size: 16px; }

.k-btn.k-btn--primary { background: var(--ink); color: var(--white); box-shadow: var(--shadow-btn); }
.k-btn.k-btn--primary:hover { background: var(--neutral-800); color: var(--white); transform: scale(1.05); }

.k-btn.k-btn--inverse { background: var(--white); color: var(--black); }
.k-btn.k-btn--inverse:hover { background: var(--neutral-200); color: var(--black); transform: scale(1.05); }
.k-btn.k-btn--glow { box-shadow: var(--glow-strong); }

.k-btn:active { transform: scale(0.95); }
.k-btn:disabled { cursor: progress; opacity: 0.7; }


/* --- DS: EmailCapture (components/forms/EmailCapture.jsx) ---------------- */

.k-email {
    width: 100%;
    max-width: 420px;
    font-family: var(--font-sans);
}

.k-email__form {
    display: flex;
    align-items: center;
    padding: 6px;
    background: var(--white);
    border: 1px solid rgba(229, 229, 229, 0.6);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-capsule);
    transition: all var(--duration-fast);
}

.k-email__form:hover { box-shadow: var(--shadow-capsule-hover); }
.k-email__form:focus-within { outline: 2px solid rgba(23, 23, 23, 0.05); }

.k-email__input {
    width: 100%;
    min-width: 0;
    padding: 8px 24px;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
}

.k-email__input::placeholder { color: var(--text-faint); }
.k-email__form .k-btn { flex-shrink: 0; }

.k-email__note {
    margin: 16px 0 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    text-align: center;
}

/* Mimo DS: DS nemá chybovou barvu; světle červená je čitelná na tmavé kapsli. */
.k-email__note--error { font-size: 14px; color: #FCA5A5; }

.k-email__done {
    margin: 0;
    padding: 18px 28px;
    border: 1px solid var(--border-on-dark-strong);
    border-radius: var(--radius-pill);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-on-dark);
}


/* --- Reveal on scroll ([data-reveal]) -------------------------------------
   Prvky schováme jen pod .js (inline skript v <head>), takže bez JS je obsah
   normálně vidět. Odkrývá je site.js přes IntersectionObserver.
   Pojistka: kdyby site.js vůbec nenaběhl (html nedostane .reveal-ready),
   po 2 s se vše ukáže samo. */

.js [data-reveal]:not(.is-revealed) {
    opacity: 0;
    transform: translateY(30px);
}

.js:not(.reveal-ready) [data-reveal]:not(.is-revealed) {
    animation: k-reveal-fallback 0s 2s forwards;
}

.js [data-reveal] {
    transition: opacity var(--duration-reveal) var(--ease-reveal), transform var(--duration-reveal) var(--ease-reveal);
}

@keyframes k-reveal-fallback {
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .js [data-reveal]:not(.is-revealed) { opacity: 1; transform: none; }
    .js [data-reveal] { transition: none; }
}