/* ============================================================
   HOSH — FÁZE 4: Footer
   Verze: 4.0  (čistý přepis)
   Nahrát do: Shoptet Admin → Vzhled → Šablony → Vlastní CSS
   ============================================================ */


/* ── 1. BASE ──────────────────────────────────────────────── */

#footer {
    background: #0D0D0D !important;
    color: #fff !important;
    font-family: var(--hosh-sans) !important;
    padding: 0 !important;
    border-top: 2px solid var(--hosh-accent) !important;
    margin-top: 0 !important;
}
#footer * { box-sizing: border-box; }


/* ── 2. HLAVNÍ LAYOUT ─────────────────────────────────────── */

#footer .footer-rows {
    display: block !important;
    padding: 0 48px 52px !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
}

#footer .site-name              { display: none !important; }
#footer .custom-footer__banner10 { display: none !important; }

#footer .custom-footer {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 28px !important;
    align-items: start !important;
}

#footer .custom-footer .banner,
#footer .custom-footer .banner-wrapper {
    padding: 0 !important;
    margin: 0 !important;
}


/* ── 3. NEWSLETTER SLOT (banner55) ───────────────────────── */

#footer .custom-footer__banner55 {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 44px 0 52px !important;
    margin-bottom: 52px !important;
    border-bottom: 1px solid #1e1e1e !important;
}

#footer .custom-footer__banner55 .banner,
#footer .custom-footer__banner55 .banner-wrapper,
#footer .custom-footer__banner55 .banner-wrapper > span {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

#footer .custom-footer__banner55 h2 { display: none !important; }

#footer .hosh-newsletter-banner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 80px !important;
    width: 100% !important;
}
#footer .hosh-nl-left {
    flex: 0 0 400px !important;
    max-width: 400px !important;
}
#footer .hosh-nl-title {
    font-family: var(--hosh-serif) !important;
    font-size: 38px !important;
    font-weight: 400 !important;
    color: var(--hosh-white) !important;
    letter-spacing: 0.01em !important;
    line-height: 1.15 !important;
    margin-bottom: 10px !important;
}
#footer .hosh-nl-sub {
    font-size: 14px !important;
    font-weight: 300 !important;
    color: #999 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.65 !important;
}
#footer .hosh-nl-right { flex: 1 !important; }
#footer .hosh-nl-right form { width: 100% !important; }
#footer .hosh-nl-row {
    display: flex !important;
    gap: 0 !important;
    margin-bottom: 12px !important;
    width: 100% !important;
}
#footer .hosh-nl-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 50px !important;
    background: transparent !important;
    border: 1px solid #3a3a3a !important;
    border-right: none !important;
    border-radius: 0 !important;
    color: var(--hosh-white) !important;
    font-family: var(--hosh-sans) !important;
    font-size: 13px !important;
    letter-spacing: 0.02em !important;
    padding: 0 18px !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.2s !important;
}
#footer .hosh-nl-input::placeholder { color: #555 !important; }
#footer .hosh-nl-input:focus { border-color: var(--hosh-accent) !important; }
#footer .hosh-nl-btn {
    height: 50px !important;
    background: var(--hosh-accent) !important;
    border: 1px solid var(--hosh-accent) !important;
    border-radius: 0 !important;
    color: var(--hosh-white) !important;
    font-family: var(--hosh-sans) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    padding: 0 28px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.2s !important;
}
#footer .hosh-nl-btn:hover { background: var(--hosh-accent-hover) !important; border-color: var(--hosh-accent-hover) !important; }
#footer .hosh-nl-note {
    font-size: 10px !important;
    color: #666 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}
#footer .hosh-nl-note a { color: #666 !important; text-decoration: underline !important; text-underline-offset: 2px !important; }


/* ── 4. NADPISY SLOUPCŮ ───────────────────────────────────── */

#footer .custom-footer__banner56 h2,
#footer .custom-footer__banner57 h2,
#footer .custom-footer__banner64 h2 {
    font-family: var(--hosh-sans) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--hosh-white) !important;
    display: block !important;
    padding-bottom: 14px !important;
    margin-bottom: 24px !important;
    border-bottom: 1px solid #2a2a2a !important;
    line-height: 1 !important;
}
#footer .custom-footer__banner64 h2 { letter-spacing: 0.12em !important; }
#footer .custom-footer__banner56 h3,
#footer .custom-footer__banner57 h3,
#footer .custom-footer__banner64 h3 { display: none !important; }


/* ── 5. KONTAKT ───────────────────────────────────────────── */

#footer .hosh-contact { padding: 0 !important; }
#footer .hosh-contact-row { display: flex !important; align-items: flex-start !important; gap: 14px !important; margin-bottom: 24px !important; }
#footer .hosh-contact-row:last-child { margin-bottom: 0 !important; }
#footer .hosh-contact-icon { flex-shrink: 0 !important; margin-top: 3px !important; opacity: 0.55 !important; }
#footer .hosh-contact-icon svg { display: block !important; stroke: var(--hosh-white) !important; }
#footer .hosh-contact-label { font-size: 9px !important; font-weight: 700 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: #777 !important; margin-bottom: 7px !important; display: block !important; }
#footer .hosh-contact-value,
#footer .hosh-contact-value a { font-size: 15px !important; font-weight: 300 !important; color: #d4d4d4 !important; letter-spacing: 0.01em !important; line-height: 1.5 !important; text-decoration: none !important; transition: color 0.15s !important; display: block !important; }
#footer .hosh-contact-value a:hover { color: var(--hosh-white) !important; }
#footer .hosh-contact-muted { font-size: 12px !important; color: #555 !important; letter-spacing: 0.02em !important; margin-top: 4px !important; display: block !important; white-space: nowrap !important; }


/* ── 6. INFORMACE ─────────────────────────────────────────── */

#footer .hosh-info { padding: 0 !important; }
#footer .hosh-info-item { display: block !important; margin-bottom: 12px !important; }
#footer .hosh-info-item:last-child { margin-bottom: 0 !important; }
#footer .hosh-info-item a { font-size: 14px !important; font-weight: 300 !important; color: #c0c0c0 !important; letter-spacing: 0.01em !important; text-decoration: none !important; line-height: 1.4 !important; transition: color 0.15s !important; display: block !important; }
#footer .hosh-info-item a:hover { color: var(--hosh-white) !important; }
#footer .hosh-info-sep { height: 1px !important; background: #222 !important; margin: 16px 0 !important; }
#footer .hosh-info-item.highlight a { color: #6bbf95 !important; font-weight: 500 !important; font-size: 11px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; }
#footer .hosh-info-item.highlight a:hover { color: var(--hosh-white) !important; }


/* ── 7. SOCIÁLNÍ SÍTĚ ─────────────────────────────────────── */

#footer .hosh-social { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 10px !important; align-items: center !important; padding: 0 !important; width: 100% !important; }
#footer .hosh-social a { display: flex !important; align-items: center !important; justify-content: center !important; width: 52px !important; height: 52px !important; flex-shrink: 0 !important; border: 1px solid #3a3a3a !important; opacity: 0.85 !important; text-decoration: none !important; transition: border-color 0.2s, opacity 0.2s, background 0.2s !important; }
#footer .hosh-social a:hover { border-color: var(--hosh-accent) !important; opacity: 1 !important; background: rgba(28,58,47,0.2) !important; }
#footer .hosh-social svg { display: block !important; width: 20px !important; height: 20px !important; }


/* ── 8. FOOTER BOTTOM ────────────────────────────────────── */

#footer .footer-bottom { border-top: 1px solid #1e1e1e !important; padding: 18px 48px !important; max-width: 1280px !important; margin: 0 auto !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; }
#footer .footer-bottom .copyright { font-size: 10px !important; color: #444 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; font-weight: 400 !important; }
#footer .footer-bottom #signature { opacity: 0.2 !important; display: flex !important; align-items: center !important; gap: 4px !important; }
#footer .footer-bottom #signature img { max-height: 14px !important; filter: invert(1) !important; }
#footer .footer-bottom #signature a { font-size: 10px !important; color: #444 !important; text-decoration: none !important; }
#footer .footer-bottom .footer-socials,
#footer .footer-bottom .contact-box { display: none !important; }


/* ── 9. COLLAPSE WRAPPER ─────────────────────────────────── */

#footer .hosh-collapse-wrap {
    overflow: hidden !important;
    transition: max-height 0.3s ease, opacity 0.3s ease !important;
    max-height: 600px !important;
    opacity: 1 !important;
}
#footer .hosh-collapse-wrap.hosh-collapsed {
    max-height: 0 !important;
    opacity: 0 !important;
}


/* ── 10. RESPONSIVE ≤992px ────────────────────────────────── */

@media (max-width: 992px) {

    #footer .footer-rows { padding: 0 24px 36px !important; }

    /* Newsletter */
    #footer .custom-footer__banner55 { padding: 36px 0 36px !important; margin-bottom: 36px !important; }
    #footer .hosh-newsletter-banner { flex-direction: column !important; gap: 20px !important; align-items: flex-start !important; }
    #footer .hosh-nl-left { flex: none !important; max-width: 100% !important; width: 100% !important; }
    #footer .hosh-nl-title { font-size: 26px !important; margin-bottom: 8px !important; }
    #footer .hosh-nl-sub { font-size: 13px !important; }
    #footer .hosh-nl-right { flex: none !important; max-width: 100% !important; width: 100% !important; }
    #footer .hosh-nl-right form { width: 100% !important; }
    #footer .hosh-nl-row { width: 100% !important; }

    /* Grid → single column */
    #footer .custom-footer { grid-template-columns: 1fr !important; gap: 0 !important; }

    /* ── KONTAKT + INFORMACE — collapse ── */

    /* Banner border — jen spodní, jedna čára */
    #footer .custom-footer__banner56,
    #footer .custom-footer__banner57 {
        border-bottom: 1px solid #2a2a2a !important;
        padding: 18px 0 !important;
    }

    /* H2 — flex trigger, BEZ vlastní border-bottom */
    #footer .custom-footer__banner56 h2,
    #footer .custom-footer__banner57 h2 {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        cursor: pointer !important;
        user-select: none !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        border: none !important;
    }

    /* + ikona */
    #footer .custom-footer__banner56 h2::after,
    #footer .custom-footer__banner57 h2::after {
        content: "+" !important;
        font-size: 22px !important;
        font-weight: 200 !important;
        letter-spacing: 0 !important;
        opacity: 0.6 !important;
        flex-shrink: 0 !important;
        line-height: 1 !important;
    }

    /* − ikona */
    #footer .custom-footer__banner56 h2:not(.hosh-collapsed)::after,
    #footer .custom-footer__banner57 h2:not(.hosh-collapsed)::after { content: "−" !important; }

    /* Mezera pod h2 když otevřeno */
    #footer .custom-footer__banner56 h2:not(.hosh-collapsed),
    #footer .custom-footer__banner57 h2:not(.hosh-collapsed) { margin-bottom: 18px !important; }

    /* ── SLEDUJTE NÁS — bez collapse, centrované ── */

    #footer .custom-footer__banner64 {
        border-top: 1px solid #2a2a2a !important;
        padding: 32px 0 24px !important;
        text-align: center !important;
    }

    /* H2 — vycentrovaný, bez border, bez kurzoru */
    #footer .custom-footer__banner64 h2 {
        display: block !important;
        text-align: center !important;
        cursor: default !important;
        pointer-events: none !important;
        margin-bottom: 20px !important;
        border: none !important;
        padding-bottom: 0 !important;
    }
    #footer .custom-footer__banner64 h2::after { display: none !important; content: "" !important; }

    /* Ikony centrované */
    #footer .custom-footer__banner64 .hosh-social { justify-content: center !important; gap: 12px !important; }

    /* Footer bottom */
    #footer .footer-bottom { flex-direction: column !important; align-items: flex-start !important; padding: 16px 24px !important; gap: 8px !important; }
}


/* ── 11. RESPONSIVE ≤576px ────────────────────────────────── */

@media (max-width: 576px) {
    #footer .hosh-contact-value,
    #footer .hosh-contact-value a { white-space: normal !important; }
}