/**
 * mod_opcfooter — OPC Footer
 *
 * COLOUR: this module deliberately sets no colour of its own. The band it sits
 * in is painted by the TEMPLATE, not by Branding — big_goose's
 * scss/blocks/_footer.scss does:
 *
 *     .footer { color: $white; background-color: var(--big_goose-color-primary); }
 *
 * which is a compiled template variable, unrelated to Branding's brand_primary
 * (--opc-primary). An earlier version of this file used --opc-text-soft
 * (#475569, a dark slate intended for LIGHT surfaces) and rendered as
 * near-illegible grey-on-navy. Inheriting is the only approach that stays
 * correct whatever colour the band happens to be, in either theme — so
 * `color` is left to cascade from .footer and opacity carries the "muted"
 * effect instead, since it is relative to whatever the inherited colour is.
 *
 * No font-family is declared either — the site's own font is inherited.
 */

.opc-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .35rem 1.5rem;
    width: 100%;
    /* Vertical padding is 0: big_goose's own .footer .grid-child already applies
       2.5rem, and adding to it produced a very tall, empty band. Horizontal
       spacing is likewise the grid-child's job. */
    padding: 0;
    font-size: .8125rem;
    line-height: 1.5;
    /* Inherited from .footer — see the note above. */
    color: inherit;
}

/* The muting is applied to the two children, NOT to .opc-footer itself: opacity
   on the parent creates a stacking context that its descendants cannot exceed,
   so the link's hover could never brighten past the parent's value. */
.opc-footer__copyright,
.opc-footer__vendor-link {
    opacity: .85;
}

/* Both halves are <p>: kill the browser's default block margins so the strip
   stays as short as its own padding, and let each side keep its edge when the
   two wrap onto separate lines. */
.opc-footer__copyright,
.opc-footer__vendor {
    margin: 0;
}

.opc-footer__copyright {
    text-align: left;
}

.opc-footer__vendor {
    text-align: right;
    /* Pushed right on a single line by justify-content; margin-left:auto keeps
       it right-aligned when flex-wrap has already dropped it to its own row. */
    margin-left: auto;
}

/* Policy links: given flex-basis:100% so they ALWAYS drop to their own centred
   row between copyright and vendor credit, rather than fighting either for
   space on the same line — this row can hold up to four links (Terms/Privacy/
   Risk/Refund) and squeezing it in beside the other two would wrap badly at
   most widths. Omitted entirely from the DOM (see default.php) when nothing is
   configured, so an instance with no policy articles set sees no gap. */
.opc-footer__policies {
    flex-basis: 100%;
    order: 1;
    text-align: center;
    margin: 0;
    opacity: .85;
}

.opc-footer__vendor {
    /* Keeps the vendor credit on the row it was on (after copyright, before the
       policies row takes flex order 1) rather than being reordered by it. */
    order: 2;
}

.opc-footer__policies-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .15em;
}

.opc-footer__policies-link:hover,
.opc-footer__policies-link:focus-visible {
    color: inherit;
    opacity: 1;
}

.opc-footer__policies-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

.opc-footer__policies-sep {
    margin: 0 .4em;
    opacity: .6;
}

.opc-footer__vendor-link {
    /* Underlined at rest, so the link is never signalled by colour alone
       (WCAG 1.4.1). Kept subtle via the shared .85 opacity above rather than by
       taking the site's link colour, which would fight the band. */
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .15em;
}

/* Hover/focus BRIGHTENS toward the band's own text colour rather than setting a
   colour of its own. Same reasoning as the block comment at the top: a fixed
   colour here (this rule used to set --opc-text, near-black) would darken the
   link against a dark band — the opposite of a hover affordance. The link rests
   at .85, so returning to full opacity is the lift. */
.opc-footer__vendor-link:hover,
.opc-footer__vendor-link:focus-visible {
    color: inherit;
    opacity: 1;
}

/* Focus ring is the one place this module is deliberately NOT subtle: keyboard
   users need to see where they are. */
.opc-footer__vendor-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Narrow screens: stack rather than squeeze, and align both to the left so the
   two lines read as one block instead of a ragged split. */
@media (max-width: 480px) {
    .opc-footer {
        justify-content: flex-start;
    }

    .opc-footer__vendor {
        margin-left: 0;
        text-align: left;
    }
}