/* ============================================================
   SK Lázně Bělohrad – rozvržení a "klidný chrom"
   ------------------------------------------------------------
   Linkuje se AŽ ZA app.css, takže ho přebíjí. Pozor: "později
   vyhrává" platí jen při STEJNÉ nebo vyšší specificitě, proto jsou
   selektory přebíraných pravidel opsané doslova z app.css.

   Obsah: hlavička, značka, hlavní navigace (včetně mobilního menu),
   patičkové/stránkové rámce (.page-head, .section, .two-col, .panel).

   ZÁMĚR REDESIGNU (rozhodnuto majitelem webu):
     – hlavička je JEDNOBAREVNÁ var(--green-deep); tříbodový diagonální
       gradient z app.css je pryč (byl to nejnápadnější "šablonový" rys),
     – ZLATÁ JE VZÁCNÁ. V celém chromu přežívá na JEDINÉM místě:
       podtržení aktivní položky navigace (.main-nav__link.active).
       Zrušené je: 3px zlaté orámování hlavičky, zlatý prstenec znaku,
       zlatý prstenec u profilovky i zlatý proužek před KAŽDÝM <h2>
       (.section__title::before). Kdo ho chce, přihlásí se přes
       .section__title--accent.
     – hierarchii nese velikost, barva (--ink / --ink-2 / --muted)
       a prostor, ne tučnost. --fw-black (800) je vyhrazená pro skóre,
       v chromu se nepoužívá.

   ZÁVAZNÁ OMEZENÍ (tiše rozbitelná):
     – .site-header NESMÍ dostat transform / filter / backdrop-filter /
       opacity / will-change / contain. Cokoli z toho založí stacking
       context, čímž .nav-dropdown__menu spadne pod obsah stránky
       A rozbije se position: sticky. Proto tu není žádné "frosted glass".
     – .site-header ani .site-header__inner NESMÍ mít overflow: hidden.
     – .site-header__inner musí zůstat position: relative (mobilní
       .main-nav je pod 1080px position: absolute; top: 100%).
     – Vrstvy: .nav-backdrop 90 < .site-header 100; .nav-dropdown__menu
       má 50 uvnitř stacking contextu hlavičky. Nemenit.
     – Mobilní menu je čistě CSS trik (.nav-toggle:checked ~ .main-nav).
       Checkbox musí zůstat PŘEDCHOZÍM SOUROZENCEM <nav class="main-nav">
       ve stejném rodiči. Animace je max-height 0 → 85vh + overflow: hidden.

   Breakpointy: POUZE 640 / 760 / 960 / 1080 (viz tokens.css).
   1080px je práh navigace a NEMĚNÍ SE.

   Poznámka k .content a .site-footer*: ty zůstávají v
   Components/Layout/MainLayout.razor.css. Je to izolované (scoped) CSS,
   takže má selektory typu .content[b-xxxxx] – specificita (0,2,0), kterou
   by pravidlo .content odsud (0,1,0) stejně nepřebilo. Duplikovat je sem
   by znamenalo dva zdroje pravdy, z nichž jeden tiše nikdy neplatí.
   ============================================================ */

/* ------------------------------------------------------------
   Podklad pod rozbalenou nabídkou – klik mimo ni ji zavře.
   Nižší z-index než .site-header, aby hlavička zůstala klikatelná.
   ------------------------------------------------------------ */
.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: transparent;
}

/* ------------------------------------------------------------
   Hlavička
   ------------------------------------------------------------ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--green-deep);
    color: #fff;
    border-bottom: 1px solid var(--green-dark);
    box-shadow: var(--e-1);
}

.site-header__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--sp-3) var(--pad-page-x);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    /* Kotva pro mobilní .main-nav (position: absolute; top: 100%). NEMAZAT. */
    position: relative;
}

/* ------------------------------------------------------------
   Značka klubu
   ------------------------------------------------------------ */
.brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    color: #fff;
    text-decoration: none;
    margin-right: auto;
    flex-shrink: 0;
}

.brand__crest {
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fff;
    object-fit: cover;
    /* Zlatý prstenec je pryč – zlatá zůstává jen na aktivní položce navigace. */
    box-shadow: none;
}

/* Jediné místo, kde se používá kondenzované písmo – klubový nápis.
   Fluidní --fs-xl nahrazuje původní ruční zmenšování na 420px. */
.brand__name {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-xl);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.1;
    white-space: nowrap;
}

/* ------------------------------------------------------------
   Hlavní navigace
   ------------------------------------------------------------ */
.main-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

/* Bez verzálek a bez rozpáleného prostrkání – má to působit jako web
   klubu, ne jako přistávací stránka produktu. */
.main-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: #fff;
    text-decoration: none;
    font-weight: var(--fw-medium);
    text-transform: none;
    letter-spacing: normal;
    font-size: var(--fs-sm);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    transition: background var(--dur) var(--ease);
    white-space: nowrap;
}

.main-nav__link:hover {
    background: color-mix(in srgb, #fff var(--tint-1), transparent);
}

/* JEDINÝ výskyt zlaté v celém chromu. */
.main-nav__link.active {
    background: color-mix(in srgb, #fff var(--tint-1), transparent);
    box-shadow: inset 0 -2px 0 var(--gold);
}

/* ------------------------------------------------------------
   Sociální ikony v navigaci
   Dotykový cíl: 40px na myši, 44px na dotyku (viz @media 760px).
   ------------------------------------------------------------ */
.main-nav__social {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 0 var(--sp-1);
}

.main-nav__social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: color-mix(in srgb, #fff var(--tint-1), transparent);
    color: #fff;
    transition: background var(--dur) var(--ease);
}

/* Facebook/Instagram jsou plné (fill) glyfy, ne tahové ikony z <Icon>. */
.main-nav__social-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.main-nav__social-icon:hover {
    background: color-mix(in srgb, #fff var(--tint-3), transparent);
}

/* ------------------------------------------------------------
   Profilovka v hlavičce
   Na desktopu jen kulatý avatar, popisek "Profil" až v mobilním menu.
   ------------------------------------------------------------ */
.main-nav__profile {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1);
}

.main-nav__profile .avatar {
    transition: box-shadow var(--dur) var(--ease);
}

.main-nav__profile:hover .avatar {
    box-shadow: 0 0 0 2px color-mix(in srgb, #fff var(--tint-3), transparent);
}

.main-nav__profile.active {
    background: transparent;
    box-shadow: none;
}

.main-nav__profile.active .avatar {
    box-shadow: 0 0 0 2px #fff;
}

/* Základ je skrytý; @media 1080px níže ho zase zobrazí. V app.css byla
   tahle dvojice v OPAČNÉM pořadí (základ až za media blokem), takže
   popisek nešel vidět ani na mobilu – tady je pořadí správně. */
.main-nav__profile-label {
    display: none;
}

/* ------------------------------------------------------------
   Rozbalovací složky navigace
   Jsou to <details>, jejichž atribut open řídí VÝHRADNĚ C#
   (@onclick="ToggleZapasy" @onclick:preventDefault na <summary>).
   Obě potlačení markeru jsou potřeba – pokrývají jiné prohlížeče.
   ------------------------------------------------------------ */
.nav-dropdown {
    position: relative;
}

.nav-dropdown__toggle {
    cursor: pointer;
    list-style: none;
}

.nav-dropdown__toggle::marker {
    display: none;
}

.nav-dropdown__toggle::-webkit-details-marker {
    display: none;
}

/* Šipku dělá <Icon Name="chevron-down" Class="icon--toggle" /> uvnitř
   <summary>; CSS vlastnost content SVG pojmout neumí. */
.nav-dropdown__toggle::after {
    content: none;
}

.nav-dropdown__toggle .icon--toggle {
    flex: 0 0 auto;
    transition: transform var(--dur) var(--ease);
}

.nav-dropdown[open] > .nav-dropdown__toggle .icon--toggle {
    transform: rotate(180deg);
}

.nav-dropdown[open] > .nav-dropdown__toggle {
    background: color-mix(in srgb, #fff var(--tint-2), transparent);
}

.nav-dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: var(--sp-1);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--e-4);
    padding: var(--sp-1);
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Uvnitř stacking contextu hlavičky. NEMĚNIT. */
    z-index: 50;
}

.nav-dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--ink);
    text-decoration: none;
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    text-transform: none;
    letter-spacing: normal;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    white-space: nowrap;
}

.nav-dropdown__item:hover {
    background: color-mix(in srgb, var(--green) var(--tint-1), transparent);
    color: var(--green-dark);
}

.nav-dropdown__item.active {
    background: var(--green);
    color: #fff;
}

.nav-dropdown__divider {
    height: 1px;
    background: var(--border);
    margin: var(--sp-1) var(--sp-2);
}

/* ------------------------------------------------------------
   Přepínač mobilního menu
   ------------------------------------------------------------ */

/* Na desktopu je checkbox úplně mimo; pod 1080px se z něj stane
   neviditelný, ale klávesnicí dosažitelný ovladač (viz media blok). */
.nav-toggle {
    display: none;
}

.nav-toggle-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    /* Dotykový cíl – dřív ~37×30 px, což je pod hranicí použitelnosti. */
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--r-sm);
    color: #fff;
}

/* :not(.visually-hidden) – uvnitř labelu je ještě skrytý textový popisek
   pro čtečky, ten se nesmí vykreslit jako čtvrtý pruh. */
.nav-toggle-btn span:not(.visually-hidden) {
    width: 24px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* Otevřené menu = křížek. Label je bezprostřední sourozenec checkboxu. */
.nav-toggle:checked + .nav-toggle-btn span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.nav-toggle:checked + .nav-toggle-btn span:nth-child(2) {
    opacity: 0;
}

.nav-toggle:checked + .nav-toggle-btn span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Základní prstenec zaměření z base.css je zelený – na tmavě zelené
   hlavičce by nebyl vidět. */
.nav-toggle:focus-visible + .nav-toggle-btn {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ------------------------------------------------------------
   760px – dotyková zařízení: zvětšené cíle
   ------------------------------------------------------------ */
@media (max-width: 760px) {
    .main-nav__social-icon {
        width: 44px;
        height: 44px;
    }
}

/* ------------------------------------------------------------
   1080px – práh navigace. NEMĚNIT.
   Navigace má tolik položek (Zápasy, Síň slávy, Fotky, Partneři, Info,
   sociální ikony, Účet), že se vedle zvětšeného znaku nevejde na žádnou
   menší šířku – ani na tabletu, ani na menším notebooku.
   ------------------------------------------------------------ */
@media (max-width: 1080px) {
    .nav-toggle-btn {
        display: flex;
    }

    /* Neviditelný, ale ovladatelný klávesnicí (Tab + mezerník). Absolutní
       pozice ho vyřadí z toku, takže rozvržení hlavičky neovlivní. */
    .nav-toggle {
        display: block;
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        opacity: 0;
        pointer-events: none;
    }

    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--green-dark);
        border-bottom: 1px solid var(--green-deep);
        max-height: 0;
        overflow: hidden;
        padding: 0 var(--sp-2);
        transition: max-height 0.25s var(--ease), padding 0.25s var(--ease);
    }

    .nav-toggle:checked ~ .main-nav {
        max-height: 85vh;
        overflow-y: auto;
        padding: var(--sp-2);
    }

    .main-nav__link {
        padding: var(--sp-3);
    }

    .main-nav__social {
        justify-content: center;
        padding: var(--sp-2) 0;
    }

    /* U avatara v mobilním menu ukaž i popisek, ať je jasné, kam vede. */
    .main-nav__profile-label {
        display: inline;
        font-size: var(--fs-sm);
    }

    /* Ve svisle skládaném menu se složka rozbaluje rovnou pod sebe,
       ne jako plovoucí panel. */
    .nav-dropdown__menu {
        position: static;
        margin-top: var(--sp-1);
        margin-left: var(--sp-2);
        min-width: 0;
        background: color-mix(in srgb, #fff var(--tint-1), transparent);
        border: 0;
        box-shadow: none;
    }

    .nav-dropdown__item {
        color: #fff;
        white-space: normal;
    }

    .nav-dropdown__item:hover {
        background: color-mix(in srgb, #fff var(--tint-2), transparent);
        color: #fff;
    }

    .nav-dropdown__divider {
        background: color-mix(in srgb, #fff var(--tint-2), transparent);
    }
}

/* ------------------------------------------------------------
   Hlavička stránky
   ------------------------------------------------------------ */
.page-head {
    margin: 0 0 var(--sp-5);
}

.page-head h1 {
    margin: 0;
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    color: var(--ink);
}

.page-head__sub {
    margin: var(--sp-1) 0 0;
    color: var(--muted);
}

/* ------------------------------------------------------------
   Sekce
   ------------------------------------------------------------ */
.section {
    margin: var(--sp-6) 0;
}

.section__title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    color: var(--ink);
    margin: 0 0 var(--sp-3);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* Zlatý proužek před KAŽDÝM nadpisem sekce (31 kusů) je zrušený –
   tím se zlatá stává vzácnou. Kdo ji chce, přidá si --accent variantu. */
.section__title::before {
    content: none;
}

.section__title.section__title--accent::before {
    content: "";
    width: 3px;
    height: 1em;
    border-radius: 2px;
    background: var(--gold);
    flex: 0 0 auto;
}

.section__subtitle {
    font-size: var(--fs-md);
    font-weight: var(--fw-normal);
    margin: 0 0 var(--sp-2);
    color: var(--muted);
}

.section__head-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-4);
    margin-bottom: var(--sp-3);
    flex-wrap: wrap;
}

.section__head-row .section__title {
    margin: 0;
}

.section__more {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    text-decoration: none;
    color: var(--green-dark);
}

.section__more:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------
   Dvousloupcové rozvržení
   ------------------------------------------------------------ */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
}

/* Bez min-width: 0 by sloupec (1fr) nešel zúžit pod obsah dětí (např.
   dlouhý název týmu v kartě zápasu) a na mobilu by karta přetekla ven. */
.two-col > * {
    min-width: 0;
}

/* Stejně velké boxy vedle sebe (dashboard: Poslední výsledky / Nejbližší zápasy). */
.two-col--equal {
    align-items: stretch;
}

.two-col--equal .panel {
    margin: 0;
    height: 100%;
}

/* ------------------------------------------------------------
   Panel
   --pad-card je fluidní clamp, takže tu žádné zmenšování na mobilu
   být nemusí (v app.css na to byl zvláštní @media blok).
   ------------------------------------------------------------ */
.panel {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--pad-card);
}

/* ------------------------------------------------------------
   960px – "dva sloupce se nevejdou" (v app.css bylo 800px)
   ------------------------------------------------------------ */
@media (max-width: 960px) {
    .two-col {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------
   640px – telefon
   ------------------------------------------------------------ */
@media (max-width: 640px) {
    .brand {
        gap: var(--sp-2);
    }

    .brand__crest {
        width: 44px;
        height: 44px;
    }

    .site-header__inner {
        gap: var(--sp-2);
    }

    .section {
        margin: var(--sp-5) 0;
    }

    .page-head {
        margin: 0 0 var(--sp-4);
    }

    .two-col {
        gap: var(--sp-4);
    }
}