/* ============================================================
   HOSH — FÁZE 4: Footer
   Verze: 2.0  (čistý soubor — bez JS závislostí)
   Nahrát do: Shoptet Admin → Vzhled → Šablony → Vlastní CSS

   Struktura footeru (Shoptet DOM):
   #footer
     .footer-rows
       .site-name                   ← logo
       .custom-footer.elements-4
         .custom-footer__banner10   ← footer_about (skryt)
         .custom-footer__banner56   ← Kontakt (hosh-contact HTML)
         .custom-footer__banner57   ← Informace (hosh-info HTML)
         .custom-footer__banner64   ← Sledujte nás (hosh-social HTML)
     .footer-bottom
       #signature
       .copyright
   ============================================================ */


/* ── 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Í GRID ───────────────────────────────────────── */

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


/* ── 3. LOGO ──────────────────────────────────────────────── */

#footer .site-name {
    display: block !important;
}

#footer .site-name a {
    display: block !important;
    text-decoration: none !important;
}

#footer .site-name img {
    max-height: 38px !important;
    width: auto !important;
    filter: brightness(0) invert(1) !important;
    display: block !important;
}

/* Skrýt logo (site-name) — footer je bez loga */
#footer .site-name {
    display: none !important;
}

/* Skrýt banner10 — footer_about text nepotřebujeme v footeru */
#footer .custom-footer__banner10 {
    display: none !important;
}


/* ── 4. OBSAHOVÝ GRID (3 sloupce) ────────────────────────── */

#footer .custom-footer {
    display: grid !important;
    grid-template-columns: 1fr 1.1fr 0.8fr !important;
    gap: 0 28px !important;
    align-items: start !important;
}

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


/* ── 5. NADPISY SLOUPCŮ (CSS ::before) ───────────────────── */

/* Nadpisy sloupců — přímo h2 z banner HTML (viditelné pro Google + screen readery) */
#footer .custom-footer__banner56 h2,
#footer .custom-footer__banner57 h2,
#footer .custom-footer__banner64 h2 {
    font-family: var(--hosh-sans) !important;
    font-size: 9px !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: 20px !important;
    border-bottom: 1px solid #1f1f1f !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Social heading — kratší letter-spacing aby se nevlomil */
#footer .custom-footer__banner64 h2 {
    letter-spacing: 0.12em !important;
}

/* Skrýt případný h3 který Shoptet auto-injectuje */
#footer .custom-footer__banner56 h3,
#footer .custom-footer__banner57 h3,
#footer .custom-footer__banner64 h3 {
    display: none !important;
}


/* ── 6. KONTAKT BANNER (.hosh-contact) ───────────────────── */

#footer .hosh-contact {
    padding: 0 !important;
}

#footer .hosh-contact-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}

#footer .hosh-contact-row:last-child {
    margin-bottom: 0 !important;
}

#footer .hosh-contact-icon {
    flex-shrink: 0 !important;
    margin-top: 1px !important;
    opacity: 0.3 !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.2em !important;
    text-transform: uppercase !important;
    color: var(--hosh-white) !important;
    margin-bottom: 5px !important;
    display: block !important;
}

#footer .hosh-contact-value,
#footer .hosh-contact-value a {
    font-size: 12px !important;
    color: #666 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.6 !important;
    text-decoration: none !important;
    white-space: nowrap !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: 11px !important;
    color: #3d3d3d !important;
    letter-spacing: 0.02em !important;
    margin-top: 3px !important;
    display: block !important;
}


/* ── 7. INFORMACE BANNER (.hosh-info) ────────────────────── */

#footer .hosh-info {
    padding: 0 !important;
}

#footer .hosh-info-item {
    display: block !important;
    margin-bottom: 10px !important;
}

#footer .hosh-info-item:last-child {
    margin-bottom: 0 !important;
}

#footer .hosh-info-item a {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #666 !important;
    letter-spacing: 0.02em !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    transition: color 0.15s !important;
    display: block !important;
}

#footer .hosh-info-item a:hover {
    color: var(--hosh-white) !important;
}

/* Oddělovač před HOSH Klub + Velkoobchod */
#footer .hosh-info-sep {
    height: 1px !important;
    background: #1a1a1a !important;
    margin: 14px 0 !important;
}

/* Zvýrazněné CTA položky (HOSH Klub, Velkoobchod) */
#footer .hosh-info-item.highlight a {
    color: #4d8c72 !important;
    font-weight: 500 !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

#footer .hosh-info-item.highlight a:hover {
    color: var(--hosh-white) !important;
}


/* ── 8. SOCIÁLNÍ SÍTĚ BANNER (.hosh-social) ──────────────── */

#footer .hosh-social {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 8px !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: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
    border: 1px solid #2a2a2a !important;
    opacity: 0.45 !important;
    text-decoration: none !important;
    transition: border-color 0.2s, opacity 0.2s !important;
}

#footer .hosh-social a:hover {
    border-color: var(--hosh-accent) !important;
    opacity: 1 !important;
}

#footer .hosh-social svg {
    display: block !important;
}


/* ── 9. FOOTER BOTTOM ────────────────────────────────────── */

#footer .footer-bottom {
    border-top: 1px solid #181818 !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: #333 !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: #333 !important;
    text-decoration: none !important;
}

/* Schovat staré Shoptet elementy v bottom baru */
#footer .footer-bottom .footer-socials,
#footer .footer-bottom .contact-box {
    display: none !important;
}


/* ── 10. RESPONSIVE ───────────────────────────────────────── */

@media (max-width: 1024px) {
    #footer .footer-rows {
        padding: 48px 32px 44px !important;
    }

    #footer .custom-footer {
        gap: 0 20px !important;
    }
}

@media (max-width: 768px) {
    #footer .footer-rows {
        padding: 40px 24px 36px !important;
    }

    #footer .custom-footer {
        grid-template-columns: 1fr 1fr !important;
        gap: 32px 24px !important;
    }

    /* Social sloupec přes celou šířku na tabletu */
    #footer .custom-footer__banner64 {
        grid-column: 1 / -1 !important;
    }

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

@media (max-width: 480px) {
    #footer .custom-footer {
        grid-template-columns: 1fr !important;
        gap: 32px 0 !important;
    }

    #footer .custom-footer__banner64 {
        grid-column: auto !important;
    }

    #footer .hosh-contact-value,
    #footer .hosh-contact-value a {
        white-space: normal !important;
    }
}