/* static/css/components/footer-block.css
   A footer block from the Footers group, on any page. Three backgrounds
   (charcoal with the gold hairline, gold, white) and three text sizes, all
   picked on the block in admin. 2px ink border and Roboto, like the blog
   cards. Prefix footer-block. */

.footer-block {
    position: relative;
    border: 2px solid var(--dark-surface);
    padding: 0.8rem 0.9rem 0.9rem;
    margin-bottom: 0.6rem;
    font: 400 1.05rem/1.6 'Roboto', sans-serif;
    overflow-wrap: anywhere;
}

/* ---- backgrounds ---- */
.footer-block--charcoal {
    background: var(--bg-footer);
    color: var(--bg-primary);
    padding-bottom: calc(0.9rem + 3px);
}

.footer-block--charcoal::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--accent-gold);
}

.footer-block--gold {
    background: var(--bg-primary);
    color: var(--dark-surface);
}

.footer-block--white {
    background: var(--surface);
    color: var(--dark-surface);
}

/* ---- text sizes: everything inside scales with the block ---- */
.footer-block--small  { font-size: 0.9rem; }
.footer-block--normal { font-size: 1.05rem; }
.footer-block--large  { font-size: 1.2rem; }

/* ---- title, line under it, picture, text ---- */
.footer-block__title {
    margin: 0 0 0.35rem;
    font: 700 1.1em/1.3 'Roboto', sans-serif;
    letter-spacing: 0.04em;
}

.footer-block--charcoal .footer-block__title {
    color: var(--accent-gold);
}

.footer-block__sub {
    margin: 0 0 0.6rem;
    font-weight: 700;
}

.footer-block__img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 0 0.6rem;
}

.footer-block__text > :first-child { margin-top: 0; }
.footer-block__text > :last-child  { margin-bottom: 0; }

.footer-block__text p,
.footer-block__text ul,
.footer-block__text ol {
    margin: 0 0 0.6rem;
}

.footer-block__text ul,
.footer-block__text ol {
    padding-left: 1.4rem;
}

.footer-block__text li + li {
    margin-top: 0.2rem;
}

/* links: teal on the light backgrounds, gold on charcoal */
.footer-block a {
    color: var(--accent-teal);
}

.footer-block a:hover {
    color: var(--accent-teal-dark);
}

.footer-block--charcoal a {
    color: var(--accent-gold);
}

.footer-block--charcoal a:hover {
    color: var(--gold-light);
}

@media (max-width: 480px) {
    .footer-block {
        padding: 0.5rem 0.35rem 0.6rem;
        margin-bottom: 0.4rem;
    }
    .footer-block--charcoal {
        padding-bottom: calc(0.6rem + 3px);
    }
}