/* ====== Reset + Základ ====== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    line-height: 1.6;
    color: #0f172a;           /* slate-900 */
    background: #ffffff;
}

:root{
    --wrap: min(1100px, 92vw);
    --radius: 1rem;
    --bg-soft: #f1f5f9;       /* slate-100 */
    --card: #ffffff;
    --text: #000000;
    --text-soft: #334155;     /* slate-700 */
    --primary: #2563eb;       /* blue-600 */
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --border: #e2e8f0;        /* slate-200 */
    --testcolor: #ff0000; 
    --shadow: 0 6px 20px rgba(2,6,23,.08);
}

@media (prefers-color-scheme: dark){
    :root{
        --bg-soft: #0b1220;     /* deep bg */
        --card: #0f172a;        /* slate-900 */
        --text: #e5e7eb;
        --text-soft: #cbd5e1;
        --border: #1f2937;
        --shadow: 0 10px 30px rgba(0,0,0,.35);
        --testcolor: #cbd5e1;
    }
    body { background: #0b1020; }
}

.wrap { width: var(--wrap); margin-inline: auto; padding-inline: 1rem; }

/* ====== Header & Navigace ====== */
.site-header {
    position: sticky; top: 0; z-index: 20;
    backdrop-filter: saturate(160%) blur(6px);
    background: color-mix(in srgb, var(--card), transparent 20%);
    border-bottom: 1px solid var(--border);
}

.nav {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: .75rem;
    padding-block: .75rem;
}

.brand {
    display: inline-flex; align-items: center; gap: .6rem;
    text-decoration: none; color: var(--text); font-weight: 600;
}

/*
.logo {
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    box-shadow: var(--shadow);
}
*/

.logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: url("../picture/skull.png") no-repeat center/contain;
    box-shadow: var(--shadow);
}

.nav a.btn { margin-left: .25rem; }

.nav-toggle {
    display: none;
    background: none; border: none; font-size: 1.25rem; line-height: 1;
    padding: .5rem .6rem; border-radius: .6rem; cursor: pointer;
    color: var(--text);
}

.mobile-nav {
    display: none;
    gap: .5rem;
    padding: .5rem 1rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--card);
}
.mobile-nav a { display: inline-block; }

/* ====== Tlačítka ====== */
.btn{
    --btn-bg: var(--primary);
    --btn-fg: #fff;
    --btn-bg-h: var(--primary-700);
    display: inline-flex; align-items: center; justify-content: center;
    gap: .5rem; padding: .6rem .9rem;
    border-radius: .7rem; border: 1px solid transparent;
    background: var(--btn-bg); color: var(--btn-fg); text-decoration: none;
    font-weight: 600; letter-spacing: .01em;
    transition: transform .06s ease, background-color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--btn-bg-h); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.secondary{
    --btn-bg: transparent;
    --btn-fg: var(--text);
    --btn-bg-h: color-mix(in srgb, var(--primary) 10%, transparent);
    border-color: var(--border);
}

/* ====== Hero ====== */
.hero {
    padding-block: clamp(1.5rem, 2.5vw + 1rem, 3rem);
}
.hero h1{
    margin: 0 0 .4rem; line-height: 1.2;
    font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
}
.hero p{
    margin: 0; color: var(--text-soft);
    font-size: clamp(1rem, .95rem + .3vw, 1.1rem);
}

/* ====== Karty ====== */
.cards{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-block: 1rem 2rem;
}
.card{
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow);
    display: grid; align-content: start; gap: .75rem;
}
.card h3{ margin: .2rem 0 0; font-size: 1.15rem; }
.card p{ margin: 0; color: var(--text-soft); }

.chip{
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .85rem; font-weight: 600; color: var(--text-soft);
    background: var(--bg-soft);
    padding: .35rem .6rem; border-radius: 999px;
}
.chip i{
    width: .55rem; height: .55rem; border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

.actions{
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin-top: .25rem;
}

/* ====== Info sekce ====== */
.info{
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: clamp(1rem, 1rem + 1vw, 1.5rem);
    margin-block: 1rem;
}
.info p{color: var(--testcolor);}
.info h2{
    margin-top: 0;
    font-size: clamp(1.25rem, 1.1rem + .8vw, 1.6rem);
}

/* ====== Footer ====== */
.site-footer{
    border-top: 1px solid var(--border);
    color: var(--text-soft);
    text-align: center;
    padding: 2rem 1rem;
    margin-top: 2rem;
}

/* ====== Focus & přístupnost ====== */
:focus-visible{
    outline: 3px solid color-mix(in srgb, var(--primary) 60%, transparent);
    outline-offset: 3px;
    border-radius: .5rem;
}

/* ====== Responsivní chování ====== */
/* Střední šířky: kompaktnější horní lišta */
@media (max-width: 900px){
    .nav { grid-template-columns: 1fr auto auto; }
}

/* Malé displeje: hamburger + skládací menu */
@media (max-width: 680px){
    .nav { grid-template-columns: 1fr auto; }
    .nav > nav { display: none; }   /* skryj primární nav v liště */
    .nav-toggle { display: inline-block; }
    .mobile-nav { display: flex; }
}

/* Extra malé: karty na 1 sloupec, větší klik zóny */
@media (max-width: 420px){
    .cards { grid-template-columns: 1fr; }
    .btn { padding: .7rem 1rem; }
}