/* The site footer, as arranged under Settings, Page Settings.
   ---------------------------------------------------------------------------
   Linked by Pages/Shared/_Layout.cshtml only, and every rule is scoped under
   .site-footer, which only that layout emits. Nothing here may move to
   site.css: the admin layout loads that one.

   Each setting becomes a class on <footer> and the rules below do the rest.
   A third appearance is one SettingOption and one block of rules here - which
   is why "light" has rules of its own rather than being written as
   :not(.site-footer--dark). A hole is not a case. */

.site-footer {
    margin-top: 3rem;
    font-size: .9375rem;
}

/* The words inside the ground. The ground itself always runs the width of the
   window; this is the band the words keep, which is the Footer width setting. */
.site-footer__inner {
    max-width: var(--cms-band);
    margin-inline: auto;
    padding-inline: .75rem;
}

.site-footer--w-full .site-footer__inner {
    max-width: none;
    padding-inline: 1.5rem;
}

/* Appearance ---------------------------------------------------------------
   Written against the theme's variables, so the footer follows whichever
   Bootswatch theme the site is set to. The literal after each var() is for
   Bootstrap 5.1, which the local bundle is: only the CDN theme has 5.3's. */

.site-footer--dark {
    background-color: rgba(var(--bs-dark-rgb, 33, 37, 41), 1);
    color: rgba(255, 255, 255, .7);
}

.site-footer--dark .site-footer__strip {
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.site-footer--light {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-secondary-color, #6c757d);
}

.site-footer--light .site-footer__strip {
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

/* A link takes the color of the ground it is on, and says it is a link by
   brightening rather than by being a different color from everything else. */
.site-footer a {
    color: inherit;
    text-decoration: none;
}

.site-footer--dark a:hover,
.site-footer--dark a:focus {
    color: #fff;
    text-decoration: underline;
}

.site-footer--light a:hover,
.site-footer--light a:focus {
    color: var(--bs-emphasis-color, #000);
    text-decoration: underline;
}

/* The blocks -----------------------------------------------------------------
   One column on a phone, two on a tablet, and as many as the Blocks across
   setting asks for above that. The count is a custom property rather than a
   rule per class, so adding "Five" later is one more line here. */

.site-footer--cols-2 { --footer-cols: 2; }
.site-footer--cols-3 { --footer-cols: 3; }
.site-footer--cols-4 { --footer-cols: 4; }

.site-footer__blocks .site-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-block: 2.5rem;
}

@media (min-width: 576px) {
    .site-footer__blocks .site-footer__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .site-footer__blocks .site-footer__inner {
        grid-template-columns: repeat(var(--footer-cols, 3), minmax(0, 1fr));
    }
}

.site-footer__title {
    /* Small caps rather than a heading size: it labels a column, and a footer
       full of h2s at heading size reads as a second page. */
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.site-footer--dark .site-footer__title {
    color: #fff;
}

.site-footer--light .site-footer__title {
    color: var(--bs-emphasis-color, #000);
}

.site-footer__body {
    margin: 0;
}

.site-footer__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__list > li + li {
    margin-top: .5rem;
}

/* A post or a product: its picture beside its name, both inside the link. */
.site-footer__list--media a {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.site-footer__list--media > li + li {
    margin-top: .875rem;
}

.site-footer__thumb {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: .25rem;
    flex-shrink: 0;
}

.site-footer__date {
    display: block;
    opacity: .65;
    font-size: .8125rem;
}

.site-footer__contact {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__contact > li {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
}

.site-footer__contact > li + li {
    margin-top: .625rem;
}

.site-footer__contact .bi {
    /* Holds the icons in one column however long the line beside them runs. */
    flex-shrink: 0;
    margin-top: .15rem;
    opacity: .7;
}

/* An address is typed as lines, so it shows as the lines it was typed as. */
.site-footer__address {
    white-space: pre-line;
}

/* The copyright strip -------------------------------------------------------
   One line on a wide screen, wrapping to as many as it needs on a narrow one.
   It is the whole of the One line layout, and the last row of the Columns one. */

.site-footer__strip .site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.5rem;
    padding-block: 1.25rem;
}

.site-footer__copyright {
    margin: 0;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The divider between inline links, which belongs to the gap rather than to
   the markup: no empty element to render and none to hide at the ends. */
.site-footer__links li + li::before {
    content: "|";
    margin-inline-end: 1rem;
    opacity: .4;
}

.site-footer__marks {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.125rem;
}

/* In the strip, everything after the links sits at the far end, as in the
   one-line design: words on the left, the marks and the logo on the right. In
   a block they stay where the block puts them, which is why this is scoped. */
.site-footer__strip .site-footer__marks {
    margin-inline-start: auto;
}

.site-footer__marks + .site-footer__logo {
    margin-inline-start: 0;
}

.site-footer__logo {
    height: 2rem;
    width: auto;
    margin-inline-start: auto;
}

@media print {
    .site-footer {
        background: none;
        color: #000;
    }
}