/*
Theme Name: Reblog Child
Theme URI: https://zaribo.com/blog/
Description: Child theme of Reblog for the Zaribo blog. Holds the custom footer so parent theme updates stay safe.
Author: Zaribo
Template: reblog
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: reblog-child
*/

/* ---------------------------------------------------------------------------
   Footer
   The parent sets "#colophon a, #colophon p, #colophon li { color; font-size }",
   so every rule here is scoped to #colophon to win on specificity.
   --------------------------------------------------------------------------- */

#colophon.zb-footer {
    --zb-bg: #1f2124;
    --zb-bg-bottom: #17191b;
    --zb-text: #b9bec5;
    --zb-heading: #ffffff;
    --zb-accent: #efcd23;
    --zb-line: rgba(255, 255, 255, .09);
    background: var(--zb-bg);
    color: var(--zb-text);
}

#colophon.zb-footer .zb-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

#colophon .zb-footer-main {
    padding: 54px 0 46px;
}

#colophon .zb-footer-main .zb-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 56px;
    align-items: flex-start;
}

#colophon .zb-foot-col {
    flex: 1 1 180px;
    min-width: 0;
}

#colophon .zb-foot-brand {
    flex: 1.7 1 280px;
}

#colophon p.zb-foot-title {
    margin: 0 0 6px;
    font-size: 23px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--zb-accent);
}

#colophon p.zb-foot-tag {
    margin: 0 0 16px;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
}

#colophon p.zb-foot-text {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.7;
    max-width: 32em;
    color: var(--zb-text);
}

#colophon a.zb-foot-shop {
    display: inline-block;
    padding: 9px 20px;
    border: 1px solid var(--zb-accent);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--zb-accent);
    text-decoration: none;
    transition: background .15s, color .15s;
}

#colophon a.zb-foot-shop:hover,
#colophon a.zb-foot-shop:focus {
    background: var(--zb-accent);
    color: #1f2124;
    text-decoration: none;
}

#colophon .zb-foot-heading {
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--zb-heading);
}

#colophon ul.zb-foot-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

#colophon ul.zb-foot-list li {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
    font-size: 15px;
}

#colophon ul.zb-foot-list li:last-child {
    margin-bottom: 0;
}

#colophon ul.zb-foot-list a {
    font-size: 15px;
    line-height: 1.5;
    color: var(--zb-text);
    text-decoration: none;
}

#colophon ul.zb-foot-list a:hover,
#colophon ul.zb-foot-list a:focus {
    color: var(--zb-accent);
    text-decoration: none;
}

#colophon .zb-footer-bottom {
    background: var(--zb-bg-bottom);
    border-top: 1px solid var(--zb-line);
    padding: 17px 0;
}

#colophon .zb-footer-bottom .zb-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    align-items: center;
    justify-content: space-between;
}

#colophon .zb-foot-copy,
#colophon .zb-foot-legal,
#colophon .zb-foot-legal a {
    font-size: 13px;
    color: rgba(255, 255, 255, .42);
}

#colophon .zb-foot-legal a:hover,
#colophon .zb-foot-legal a:focus {
    color: var(--zb-accent);
}

#colophon .zb-foot-legal {
    display: flex;
    align-items: center;
    gap: 18px;
}

#colophon .zb-footer .social-icons,
#colophon ul.social-icons {
    margin: 0;
    padding: 0;
    display: flex;
    gap: 14px;
    list-style: none;
}

#colophon ul.social-icons li {
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 860px) {
    #colophon .zb-footer-main {
        padding: 38px 0 30px;
    }
    #colophon .zb-footer-main .zb-wrap {
        gap: 30px;
    }
    #colophon .zb-foot-col,
    #colophon .zb-foot-brand {
        flex: 1 1 100%;
    }
    #colophon .zb-footer-bottom .zb-wrap {
        justify-content: flex-start;
    }
}