/* =============================================================
   ROZVRŽENÍ A — prezentační weby (horní lišta)

   Hlavička, navigace, nabídka Řešení, rozcestník a patička, tedy
   přesně to, co vykresluje core/sablona.php. Obsah jednotlivých
   stránek si každý web stylizuje sám.

   Rozvržení B (levý rail pro znalostní weby — povinnosti, monitor,
   www) zatím neexistuje, viz docs/13, krok 5.
   ============================================================= */

/* -------------------------------------------------------------
   HLAVIČKA
   ------------------------------------------------------------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 18px var(--page-pad);
    background: var(--surface);
    box-shadow: var(--shadow-s);
    transition: padding var(--t-base), background var(--t-base);
}
.site-header.scrolled {
    padding: 10px var(--page-pad);
    background: var(--surface-topbar);
    border-bottom: 1px solid var(--line-strong);
}

.logo { display: flex; align-items: center; }
.logo img { height: 40px; width: auto; }

/* Dvoubarevné logo se nedá přebarvit filtrem, proto dvě varianty
   a přepínání stylem. Hodnoty jsou uvedené dvakrát, stejně jako
   u tokenů: v media query se zámkem proti výslovné volbě světlého,
   a znovu pod [data-theme="dark"], aby přepínač fungoval oběma směry. */
.logo .logo--tmave { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .logo .logo--svetle { display: none; }
    :root:not([data-theme="light"]) .logo .logo--tmave  { display: block; }
}

:root[data-theme="dark"] .logo .logo--svetle { display: none; }
:root[data-theme="dark"] .logo .logo--tmave  { display: block; }

/* Obsah začíná pod fixní hlavičkou. Dnes to řeší každá stránka
   odsazením hero sekce, takže podstránky bez hero mají nadpis
   schovaný za lištou. */
main { padding-top: var(--topbar-h); }

/* -------------------------------------------------------------
   NAVIGACE
   ------------------------------------------------------------- */
.hlavni-navigace {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-left: auto;
}
.hlavni-navigace a {
    position: relative;
    padding: 5px 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-strong);
    text-decoration: none;
    transition: color var(--t-base);
}
.hlavni-navigace > a::after,
.nav-dropdown-trigger::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--brand);
    opacity: 0;
    transform: translateX(-50%);
    transition: width var(--t-base), opacity var(--t-base);
}
.hlavni-navigace a:hover,
.hlavni-navigace a.active { color: var(--brand); }
.hlavni-navigace > a:hover::after,
.hlavni-navigace > a.active::after,
.nav-dropdown-trigger:hover::after,
.nav-dropdown-trigger.active::after { width: 100%; opacity: 1; }

.nav-chevron {
    margin-left: 4px;
    font-size: 0.7rem;
    vertical-align: middle;
    transition: transform var(--t-base);
}

/* Odsazení dolů se stejně velkým záporným okrajem drží myš nad
   nabídkou i při přejezdu mezerou k ní. */
.nav-dropdown-wrapper,
.nav-reseni {
    position: relative;
    display: flex;
    align-items: center;
    padding-bottom: 14px;
    margin-bottom: -14px;
}

.nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 2000;
    min-width: 240px;
    flex-direction: column;
    gap: 2px;
    padding: 16px 10px 10px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-menu);
    transform: translateX(-50%);
}
.nav-dropdown-wrapper:hover .nav-dropdown,
.nav-dropdown-wrapper:focus-within .nav-dropdown,
.nav-reseni:hover .nav-dropdown,
.nav-reseni:focus-within .nav-dropdown { display: flex; }

.nav-dropdown-wrapper:hover .nav-chevron,
.nav-dropdown-wrapper:focus-within .nav-chevron { transform: rotate(180deg); }

.nav-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-strong);
    white-space: nowrap;
    text-decoration: none;
    border-radius: var(--r-xs);
    transition: background var(--t-fast), color var(--t-fast);
}
.nav-dropdown a::after { display: none; }
.nav-dropdown a i {
    width: 16px;
    font-size: 0.9rem;
    text-align: center;
    color: var(--brand);
}
.nav-dropdown a:hover {
    background: var(--brand-bg);
    color: var(--brand);
}

.nav-dropdown-divider {
    height: 1px;
    margin: 6px 10px;
    background: var(--line-strong);
}

/* -------------------------------------------------------------
   NABÍDKA ŘEŠENÍ

   Tmavá varianta, aby se vstup do portfolia odlišil od navigace
   samotného webu. Podle dokumentu 13 nahrazuje dnešní blok
   „Řešení pro vás“ na konci stránky — je dostupná odkudkoli.
   ------------------------------------------------------------- */
.nav-reseni { margin-left: 6px; }

.nav-reseni-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 20px 7px 18px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--surface);
    white-space: nowrap;
    cursor: pointer;
    background: var(--brand);
    border: none;
    border-radius: var(--r-pill);
    box-shadow: 0 2px 8px rgb(var(--brand-rgb) / 0.25);
    transition: background var(--t-fast), box-shadow var(--t-fast);
}
.nav-reseni-trigger:hover {
    background: var(--brand-700);
    box-shadow: 0 4px 16px rgb(var(--brand-rgb) / 0.35);
}

.nav-dropdown--reseni {
    left: auto;
    right: 0;
    min-width: 260px;
    background: var(--surface-dark);
    border-color: var(--line-on-dark);
    box-shadow: 0 12px 40px rgb(var(--black-rgb) / 0.35);
    transform: none;
}
.nav-dropdown--reseni a { color: var(--on-dark-muted); }
.nav-dropdown--reseni a i { color: var(--on-dark-link); }
.nav-dropdown--reseni a:hover {
    background: rgb(var(--white-rgb) / 0.08);
    color: var(--on-dark-link-hover);
}
.nav-dropdown--reseni a.active {
    color: var(--on-dark-link);
    font-weight: 700;
}
.nav-dropdown--reseni a.active i { color: var(--on-dark); }
.nav-dropdown--reseni .nav-dropdown-divider { background: rgb(var(--white-rgb) / 0.15); }

/* -------------------------------------------------------------
   ROZCESTNÍK ŘEŠENÍ
   ------------------------------------------------------------- */
.reseni-kategorie {
    max-width: var(--content-max);
    margin: 0 auto 24px;
    padding: 22px 28px 18px;
    background: rgb(var(--brand-rgb) / 0.04);
    border: 1px solid rgb(var(--brand-rgb) / 0.1);
    border-left: 4px solid var(--cat, var(--brand));
    border-radius: var(--r);
}
.reseni-kategorie--poradenstvi   { --cat: var(--cat-poradenstvi); }
.reseni-kategorie--zpravodajstvi { --cat: var(--cat-zpravodajstvi); }
.reseni-kategorie--nastroje      { --cat: var(--cat-nastroje); }
.reseni-kategorie--komplexni     { --cat: var(--cat-komplexni); }

.reseni-kategorie-nazev {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--cat, var(--brand));
    border-bottom: 1px solid currentColor;
}
.reseni-kategorie-nazev i { font-size: 1.2rem; }

.reseni-karty {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 22px;
}

.reseni-karta {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 22px;
    align-items: start;
    padding: 22px 28px;
    color: var(--text-strong);
    text-decoration: none;
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-m);
    transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s, background 0.22s;
}
.reseni-karta:hover {
    transform: translateY(-3px);
    background: var(--brand-bg);
    border-color: var(--brand);
    box-shadow: var(--shadow-l);
}

.reseni-karta-ikona {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    font-size: 2rem;
    color: var(--brand);
    background: var(--brand-bg);
    border-radius: 50%;
    transition: background var(--t-fast), color var(--t-fast);
}
.reseni-karta:hover .reseni-karta-ikona {
    background: var(--brand);
    color: var(--surface);
}

.reseni-karta-nazev,
.reseni-karta-domena,
.reseni-karta-popis { grid-column: 2; display: block; }

.reseni-karta-nazev {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-strong);
}
.reseni-karta:hover .reseni-karta-nazev { color: var(--brand); }

.reseni-karta-domena {
    margin-top: 3px;
    font-size: 1.05rem;
    color: var(--text);
}
.reseni-karta-popis {
    margin-top: 4px;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--text);
}

/* Karta webu, na kterém zrovna jsme */
.reseni-karta--aktivni {
    position: relative;
    overflow: hidden;
    background: var(--brand-bg);
    border-width: 2px;
    border-color: var(--brand);
}
.reseni-karta--aktivni::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--on-dark-link));
}
.reseni-karta--aktivni .reseni-karta-nazev { color: var(--brand); }
.reseni-karta--aktivni .reseni-karta-ikona {
    background: var(--brand);
    color: var(--surface);
}

/* -------------------------------------------------------------
   PATIČKA
   ------------------------------------------------------------- */
.site-footer {
    padding: 44px var(--page-pad) 30px;
    font-size: 0.9rem;
    color: var(--on-dark-muted);
    background: var(--surface-dark);
    /* V tmavém tématu je patička jen o 1,26 : 1 tmavší než stránka,
       takže by splynula. Rozdíl dělá tenhle obrys; ve světlém tématu
       je průhledný, protože tam je přechod zřejmý sám. */
    border-top: 1px solid var(--footer-obrys);
}

.footer-navigace {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    margin-bottom: 28px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--line-on-dark);
}
.footer-navigace a {
    position: relative;
    padding-bottom: 3px;
    font-weight: 700;
    color: var(--on-dark);
    text-decoration: none;
    transition: color var(--t-base);
}
.footer-navigace a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--on-dark-link);
    transition: width var(--t-base);
}
.footer-navigace a:hover { color: var(--on-dark-link-hover); }
.footer-navigace a.active { color: var(--on-dark-link); }
.footer-navigace a:hover::after,
.footer-navigace a.active::after { width: 100%; }

.footer-sitemap-link {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-size: 0.95rem;
    white-space: nowrap;
}

/* Tři sloupce: kontakt / řešení / rozcestník webu */
.footer-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    line-height: 1.7;
}
.footer-info-grid-3 { grid-template-columns: 18% 57% 21%; }

.footer-info-grid > div {
    min-width: 0;
    padding: 22px 24px;
    overflow-wrap: break-word;
    background: rgb(var(--white-rgb) / 0.05);
    border: 1px solid rgb(var(--white-rgb) / 0.1);
    border-radius: var(--r-sm);
}

.footer-sluzby-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--on-dark);
    border-bottom: 1px solid rgb(var(--white-rgb) / 0.2);
}

.footer-firma-link,
.footer-contact-link {
    font-weight: 700;
    color: var(--on-dark);
    text-decoration: none;
    transition: color var(--t-base);
}
.footer-firma-link:hover,
.footer-contact-link:hover { color: var(--on-dark-link-hover); }

.footer-contact-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.footer-contact-item,
.footer-contact-link {
    display: flex;
    align-items: center;
    gap: 8px;
}
.footer-contact-item i,
.footer-contact-link i {
    width: 14px;
    color: var(--on-dark-link);
}

/* Řešení — tři sloupce odkazů podle skupin z katalogu (5 / 3 / 3) */
.footer-reseni-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.footer-reseni-sloupec,
.footer-info-sloupec {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-co-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--on-dark-muted);
    text-decoration: none;
    transition: color var(--t-fast), transform var(--t-fast);
}
.footer-co-link i {
    width: 14px;
    font-size: 0.85rem;
    color: var(--on-dark-link);
}
.footer-co-link:hover {
    color: var(--on-dark-link-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
    transform: translateX(4px);
}
/* Odkaz na vlastní web — prohozené barvy, ať je poznat bez čtení */
.footer-co-link.active {
    color: var(--on-dark-link);
    font-weight: 700;
}
.footer-co-link.active i { color: var(--on-dark); }

.footer-divider {
    height: 1px;
    margin: 6px 0;
    background: var(--line-on-dark);
}

/* -------------------------------------------------------------
   RESPONZIVITA
   ------------------------------------------------------------- */
@media (max-width: 1100px) {
    .footer-info-grid-3 { grid-template-columns: 1fr 1fr; }
    .footer-info-grid-3 > div:last-child { grid-column: span 2; }
}

@media (max-width: 900px) {
    .hlavni-navigace { display: none; }
    .section-title { font-size: 1.8rem; }
    .footer-info-grid,
    .footer-info-grid-3 { grid-template-columns: 1fr; }
    .footer-info-grid-3 > div:last-child { grid-column: auto; }
    .footer-reseni-grid { grid-template-columns: repeat(2, 1fr); }
    .reseni-kategorie { padding: 18px 20px 14px; }
}

@media (max-width: 600px) {
    .footer-reseni-grid { grid-template-columns: 1fr; }
    .reseni-karty { grid-template-columns: 1fr; }
    .footer-navigace { gap: 14px; }
}

/* -------------------------------------------------------------
   MAPA WEBU

   Vykresluje ji `core/generators/vystupy.php` ze stejného seznamu
   stránek jako sitemap.xml, takže se obě nemohou rozejít.
   ------------------------------------------------------------- */
.mapa-webu {
    max-width: var(--content-max);
    margin: 0 auto 48px;
    padding: 0 var(--page-pad);
    display: grid;
    gap: 14px;
}
.mapa-webu li {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.mapa-webu a {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--link);
    text-decoration: none;
}
.mapa-webu a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mapa-webu-popis {
    display: block;
    margin-top: 4px;
    font-size: 0.95rem;
    color: var(--text);
}

/* -------------------------------------------------------------
   PŘEPÍNAČ TÉMATU
   ------------------------------------------------------------- */
.nav-tema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: 8px;
    font-size: 1rem;
    color: var(--text-strong);
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.nav-tema:hover {
    color: var(--brand);
    border-color: var(--brand);
    background: var(--brand-bg);
}

/* Text jen pro čtečky obrazovky. Tlačítko nese ikonu, ale bez popisu
   by ho čtečka oznámila jako „tlačítko" a nic víc. */
.pouze-pro-cteni {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}