/*
 * Hlavní menu (partials/site/header.htm) a patička (partials/site/footer.htm)
 */
:root {
    /* tmavá lišta menu + patička – změnou těchto hodnot se přebarví obojí */
    --sn-bar: #1f3f50;
    --sn-bar-deep: #15303e;
    --sn-bar-text: #dbe6ec;
    --sn-bar-soft: #c9d7df;
    --sn-bar-muted: #9fb9c7;
    /* světlé dlaždice s ikonami v mega-menu */
    --sn-tint: #e8eff3;
    --sn-tint-ink: #1f3f50;

    --sn-orange: #e46305;
    --sn-orange-600: #c95604;
    --sn-orange-50: #fff3ea;
    --sn-ink: #1c2429;
    --sn-muted: #6b7a84;
    --sn-line: #e3e8ec;
}

/* ========== MENU ========== */
.sn {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    height: 64px;
    background: var(--sn-bar);
    color: #fff;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.4;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
}
body { padding-top: 64px; }

/* reset přes :where() = nulová specificita, ať ho třídy níže přebijí */
:where(.sn) * { box-sizing: border-box; }
.sn a, .sn a:hover, .sn a:focus { text-decoration: none; }
:where(.sn) ul { list-style: none; margin: 0; padding: 0; }
:where(.sn) h4 { margin: 0; }
:where(.sn) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sn .sn-i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.sn-in { position: relative; display: flex; align-items: center; height: 100%; }
.sn-in::before, .sn-in::after { display: none; } /* bootstrap clearfix by byl flex položka */

.sn-logo {
    font-family: Impact, Charcoal, "Arial Narrow", sans-serif;
    font-size: 30px;
    letter-spacing: .5px;
    line-height: 1;
    color: #fff;
    margin-right: 22px;
}
.sn-logo:hover, .sn-logo:focus { color: #fff; }
.sn-logo span { color: var(--sn-orange); font-size: 20px; }

/* ---------- horní položky ---------- */
.sn-menu { display: flex; align-self: stretch; }
.sn-nav { display: flex; align-items: stretch; }
.sn-nav > li { display: flex; }
.sn-top {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    font-weight: 500;
    color: var(--sn-bar-text);
    white-space: nowrap;
}
.sn a.sn-top { color: var(--sn-bar-text); }
.sn-top::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--sn-orange);
    transform: scaleX(0);
    transition: transform .18s;
}
.sn a.sn-top:hover, .sn a.sn-top:focus,
.sn-top:hover, .sn-nav > li.open > .sn-top, .sn-nav > li.active > .sn-top { color: #fff; }
.sn-top:hover, .sn-nav > li.open > .sn-top { background: rgba(255, 255, 255, .06); }
.sn-top:hover::after, .sn-nav > li.open > .sn-top::after, .sn-nav > li.active > .sn-top::after { transform: scaleX(1); }
.sn-caret { width: 12px !important; height: 12px !important; transition: transform .18s; }
.sn-nav > li.open .sn-caret { transform: rotate(180deg); }

/* ---------- CTA ---------- */
.sn-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 18px;
    border-radius: 99px;
    background: var(--sn-orange);
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(228, 99, 5, .35);
    transition: background .15s, transform .15s;
}
.sn a.sn-cta, .sn a.sn-cta:hover, .sn a.sn-cta:focus { color: #fff; }
.sn-cta:hover { background: var(--sn-orange-600); transform: translateY(-1px); }
.sn-cta-desktop { margin-left: auto; }
.sn-cta-mobile, .sn-burger { display: none; }

/* ---------- mega-menu ---------- */
.sn-has-mega { position: static; }
.sn-mega {
    position: absolute;
    top: 100%;
    left: 15px;
    right: 15px;
    display: grid;
    grid-template-columns: 2fr 1fr 260px;
    background: #fff;
    color: var(--sn-ink);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 12px 32px rgba(21, 48, 62, .22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .16s, transform .16s, visibility .16s;
}
.sn-has-mega.open > .sn-mega { opacity: 1; visibility: visible; transform: none; }
.sn-col { padding: 22px 22px 24px; border-right: 1px solid var(--sn-line); }
.sn-col:last-child { border-right: 0; }
.sn-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.sn-col h4 { margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sn-muted); }

.sn-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; margin: 0 -10px; border-radius: 8px; }
.sn a.sn-item { color: var(--sn-ink); }
.sn-item:hover, .sn-item.active { background: var(--sn-tint); }
.sn-item b { display: block; font-size: 14.5px; font-weight: 600; }
.sn-item small { display: block; font-size: 12.5px; line-height: 1.3; color: var(--sn-muted); }
.sn-item.active b { color: var(--sn-orange-600); }
.sn-ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--sn-tint); color: var(--sn-tint-ink); }
.sn-item:hover .sn-ico, .sn-item.active .sn-ico { background: var(--sn-tint-ink); color: #fff; }
.sn a.sn-sub { display: block; margin: -4px 0 4px; padding: 2px 0 2px 48px; font-size: 13px; color: var(--sn-muted); }
.sn a.sn-sub:hover, .sn a.sn-sub.active { color: var(--sn-orange); }

.sn-promo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 0 0 14px 0;
    border-top: 2px solid #fff; /* oddělení od lišty menu (stejná barva) */
    background: linear-gradient(160deg, var(--sn-bar) 0%, var(--sn-bar-deep) 100%);
    color: #fff;
}
.sn-promo h4 { color: var(--sn-bar-muted); margin-bottom: 0; }
.sn-promo-title { font-size: 18px; font-weight: 700; line-height: 1.25; }
.sn-promo p { margin: 0; font-size: 13.5px; color: var(--sn-bar-soft); }
.sn-promo .sn-cta { align-self: flex-start; margin-top: auto; }

/* ---------- tablet ---------- */
@media (min-width: 768px) and (max-width: 991px) {
    .sn-mega { grid-template-columns: 2fr 1fr; }
    .sn-promo { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; padding: 16px 22px; border-radius: 0 0 14px 14px; }
    .sn-promo h4, .sn-promo p { display: none; }
    .sn-promo .sn-cta { margin-top: 0; }
}

/* ---------- mobil ---------- */
@media (max-width: 767px) {
    .sn { height: 58px; }
    body { padding-top: 58px; }
    body.sn-lock { overflow: hidden; }

    .sn-logo { font-size: 26px; }
    .sn-logo span { font-size: 17px; }
    .sn-cta-desktop { display: none; }

    .sn-burger {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        margin-left: auto;
        border-radius: 10px;
        background: rgba(255, 255, 255, .08);
    }
    .sn-burger .sn-i { width: 22px; height: 22px; }
    .sn-burger .sn-i-close, .sn.menu-open .sn-burger .sn-i-open { display: none; }
    .sn.menu-open .sn-burger .sn-i-close { display: block; }

    .sn-menu {
        position: fixed;
        top: 58px;
        left: 0;
        right: 0;
        bottom: 0;
        display: block;
        overflow-y: auto;
        background: #fff;
        color: var(--sn-ink);
        padding: 14px 0 30px;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .22s, visibility .22s;
    }
    .sn.menu-open .sn-menu { transform: none; visibility: visible; }

    .sn-cta-mobile {
        display: flex;
        height: auto;
        margin: 0 16px 12px;
        padding: 12px;
        gap: 12px;
        border-radius: 12px;
        border: 1px solid #ffd9bd;
        background: var(--sn-orange-50);
        box-shadow: none;
        white-space: normal;
        font-weight: 400;
    }
    .sn a.sn-cta-mobile, .sn a.sn-cta-mobile:hover, .sn a.sn-cta-mobile:focus { color: var(--sn-ink); }
    .sn-cta-mobile:hover { background: var(--sn-orange-50); transform: none; }
    .sn-cta-mobile .sn-ico { width: 40px; height: 40px; background: var(--sn-orange); color: #fff; }
    .sn-cta-mobile b { display: block; font-weight: 600; }
    .sn-cta-mobile small { color: var(--sn-muted); font-size: 13px; }

    .sn-nav { display: block; }
    .sn-nav > li { display: block; border-top: 1px solid var(--sn-line); }
    .sn-top, .sn a.sn-top { width: 100%; padding: 15px 18px; gap: 12px; font-weight: 600; color: var(--sn-ink); }
    .sn a.sn-top:hover, .sn a.sn-top:focus, .sn-top:hover,
    .sn-nav > li.open > .sn-top, .sn-nav > li.active > .sn-top { color: var(--sn-ink); background: none; }
    .sn-top::after { display: none; }
    .sn-caret { margin-left: auto; }

    .sn-mega {
        position: static;
        display: none;
        padding: 0 12px 10px;
        box-shadow: none;
        border-radius: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }
    .sn-has-mega.open > .sn-mega { display: block; }
    .sn-col { padding: 0; border: 0; }
    .sn-col h4 { padding: 10px 10px 4px; margin: 0; }
    .sn-grid { display: block; }
    .sn-item { margin: 0; padding: 8px 10px; }
    .sn-item small { display: none; }
    .sn-ico { width: 32px; height: 32px; }
    .sn a.sn-sub { padding: 4px 0 8px 64px; margin: 0; }
    .sn-promo { display: none; }
}

/* ========== PATIČKA ========== */
.sf {
    background: var(--sn-bar-deep);
    color: var(--sn-bar-soft);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 14.5px;
    line-height: 1.5;
    border-top: 3px solid var(--sn-orange);
}
.sf a, .sf a:hover, .sf a:focus { text-decoration: none; }
:where(.sf) ul { list-style: none; margin: 0; padding: 0; }
:where(.sf) h4, :where(.sf) p { margin: 0; }
.sf .sn-i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.sf-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-top: 48px; padding-bottom: 40px; }
.sf-in::before, .sf-in::after { display: none; }

.sf-brand p { margin: 14px 0 20px; max-width: 300px; }
.sf .sn-logo { display: inline-block; margin: 0; }
.sf a.sn-cta, .sf a.sn-cta:hover, .sf a.sn-cta:focus { color: #fff; }

.sf h4 { margin-bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sn-bar-muted); }
.sf-col li { margin: 0 0 9px; }
.sf a.sf-link { display: inline-flex; align-items: center; gap: 9px; color: var(--sn-bar-text); transition: color .15s; }
.sf a.sf-link:hover, .sf a.sf-link:focus { color: #fff; }
.sf a.sf-link:hover .sn-i { color: var(--sn-orange); }
.sf-link .sn-i { color: var(--sn-bar-muted); transition: color .15s; }
.sf a.sf-sub { padding-left: 27px; font-size: 13.5px; color: var(--sn-bar-muted); }

.sf-bottom { border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .15); font-size: 13px; color: var(--sn-bar-muted); }
.sf-bottom .container { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; }
.sf-bottom .container::before, .sf-bottom .container::after { display: none; }
.sf a.sf-up { display: inline-flex; align-items: center; gap: 6px; color: var(--sn-bar-text); }
.sf a.sf-up:hover { color: #fff; }
.sf-up .sn-i { width: 14px; height: 14px; transform: rotate(180deg); }

@media (min-width: 768px) and (max-width: 991px) {
    .sf-in { grid-template-columns: 1fr 1fr 1fr; }
    .sf-brand { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
    .sf-brand p { margin: 0; flex: 1; max-width: none; }
}
@media (max-width: 767px) {
    .sf-in { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-top: 36px; padding-bottom: 28px; }
    .sf-brand { grid-column: 1 / -1; }
    .sf-col-wide { grid-row: span 2; }
}