/* ===================================================================
   SITE FOOTER
   -------------------------------------------------------------------
   One compact band instead of the six-column wall it replaces.

   Layout is a single CSS grid: brand block, three link columns, and
   the newsletter. The link columns are capped in the template rather
   than here - a footer that grows a row every time a category is
   added is how the old one ended up taller than most pages.

   Loaded after the brand layer so it settles the two rules that used
   to reach into the footer from elsewhere: the mobile 44px tap-target
   block in mobile-optimization.css, and the deep-rose link hover from
   brand-colour.css (which is a white-background colour and reads at
   1.9:1 on plum).
   =================================================================== */

.site-footer {
    --footer-bg: #4a2231;
    --footer-ink: #ffffff;
    --footer-muted: rgba(255, 255, 255, 0.68);
    --footer-rule: rgba(255, 255, 255, 0.12);

    background-color: var(--footer-bg);
    color: var(--footer-ink);
    margin: 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    position: relative;
    font-size: 0.9375rem;

    /* Sits above the fixed currency selector (z-index 9999), so the pill
       slides behind the footer as you reach the end of the page instead of
       landing on top of the legal line. That is what pays for the reduced
       bottom padding below - the footer no longer has to reserve 80px of
       empty space to stay out of the pill's way. */
    z-index: 10001;
}

.site-footer .footer-inner {
    max-width: 1240px;
    margin: 0 auto;
    /* The bottom padding used to be 5rem, reserving a strip for the fixed
       currency selector so it could not land on the legal line. It read as
       80px of dead space hanging under the footer - the last thing on every
       page. The z-index above solves the collision instead, so this is back
       to ordinary spacing. */
    padding: 3rem 1.25rem 1.75rem;
}

/* -------------------------------------------------------------------
   Top band
   ------------------------------------------------------------------- */
/* Three tracks only - brand, the whole nav, newsletter. The link columns
   grid themselves inside .footer-nav, so a column being added or removed
   (the Occasions one has already come and gone) rebalances the nav rather
   than leaving a dead track on the right and squeezing the newsletter into
   a column too narrow for its own input. */
.footer-top {
    display: grid;
    grid-template-columns: minmax(13rem, 1.05fr) minmax(0, 2.1fr) minmax(17rem, 1.2fr);
    gap: 2.5rem 3rem;
    padding-bottom: 2.5rem;
}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 1.75rem 1.5rem;
    align-content: start;
}

/* Brand -------------------------------------------------------------- */
.footer-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--footer-ink);
    text-decoration: none;
    margin-bottom: 0.875rem;
}

.footer-brand-link img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
}

.footer-brand-name {
    font-family: var(--font-display, Georgia, serif);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.footer-tagline {
    color: var(--footer-muted);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0 0 1rem;
    max-width: 30ch;
}

.footer-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--footer-ink);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    border-bottom: 1px solid var(--footer-rule);
    padding-bottom: 2px;
    transition: border-color 0.2s ease;
}

.footer-contact-link:hover,
.footer-contact-link:focus-visible {
    color: var(--footer-ink);
    border-bottom-color: var(--brand-pink, #e8829f);
}

.footer-reply {
    color: var(--footer-muted);
    font-size: 0.8125rem;
    margin: 0.625rem 0 0;
}

/* Link columns -------------------------------------------------------- */
.footer-col-title {
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--footer-ink);
    margin: 0 0 0.875rem;
}

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

.footer-list li + li {
    margin-top: 0.125rem;
}

.site-footer .footer-link {
    display: inline-block;
    color: var(--footer-muted);
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 0.25rem 0;
    transition: color 0.18s ease;
}

/* Beats a.footer-link:hover in brand-colour.css, whose deep rose is a
   white-background colour and disappears against the plum. */
.site-footer a.footer-link:hover,
.site-footer a.footer-link:focus-visible {
    color: var(--footer-ink);
    text-decoration: none;
}

/* Newsletter ---------------------------------------------------------- */
.footer-signup {
    min-width: 0;
}

.footer-signup-title {
    font-family: var(--font-display, Georgia, serif);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 0.375rem;
    color: var(--footer-ink);
}

.footer-signup-copy {
    color: var(--footer-muted);
    font-size: 0.8125rem;
    line-height: 1.55;
    margin: 0 0 0.875rem;
}

.footer-signup-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.site-footer .footer-input {
    flex: 1 1 11rem;
    min-width: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--footer-rule);
    border-radius: 999px;
    color: var(--footer-ink);
    font-size: 0.875rem;
    padding: 0.625rem 1rem;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.site-footer .footer-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.site-footer .footer-input:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--brand-pink, #e8829f);
    color: var(--footer-ink);
    outline: none;
    box-shadow: none;
}

.site-footer .footer-submit {
    flex: 0 0 auto;
    background: var(--brand-pink, #e8829f);
    color: var(--brand-plum-ink, #4a2231);
    border: none;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.625rem 1.25rem;
    transition: filter 0.18s ease, transform 0.18s ease;
}

.site-footer .footer-submit:hover {
    filter: brightness(1.07);
    color: var(--brand-plum-ink, #4a2231);
}

.site-footer .footer-submit:active {
    transform: translateY(1px);
}

.footer-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.site-footer .footer-consent input {
    margin: 0.15rem 0 0;
    flex: 0 0 auto;
    width: 0.95rem;
    height: 0.95rem;
    accent-color: var(--brand-pink, #e8829f);
}

.footer-consent label {
    color: var(--footer-muted);
    font-size: 0.75rem;
    line-height: 1.5;
}

.site-footer .footer-consent a {
    color: var(--footer-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.site-footer .footer-consent a:hover {
    color: var(--footer-ink);
}

/* -------------------------------------------------------------------
   Bottom bar
   ------------------------------------------------------------------- */
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    border-top: 1px solid var(--footer-rule);
    padding: 1.125rem 0 0.25rem;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    color: var(--footer-muted);
    font-size: 0.8125rem;
    margin: 0;
}

.site-footer .footer-legal a {
    color: var(--footer-muted);
    text-decoration: none;
    transition: color 0.18s ease;
}

.site-footer .footer-legal a:hover {
    color: var(--footer-ink);
}

.footer-credit {
    color: var(--footer-muted);
    font-size: 0.8125rem;
    margin: 0;
    white-space: nowrap;
}

.site-footer .footer-credit a {
    color: #7fdca0;
    text-decoration: none;
    font-weight: 500;
}

.site-footer .footer-credit a:hover {
    text-decoration: underline;
}

/* -------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .footer-top {
        grid-template-columns: minmax(12rem, 1fr) minmax(0, 2.2fr);
        gap: 2.25rem 2.5rem;
    }

    .footer-signup {
        grid-column: 1 / -1;
        border-top: 1px solid var(--footer-rule);
        padding-top: 1.75rem;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        align-items: center;
        gap: 0 2rem;
    }

    .footer-signup-title,
    .footer-signup-copy {
        grid-column: 1;
    }

    .footer-signup-copy {
        margin-bottom: 0;
    }

    .footer-signup form {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

@media (max-width: 767.98px) {
    .site-footer .footer-inner {
        padding: 2.25rem 1.125rem 1.5rem;
    }

    .footer-top {
        gap: 1.75rem;
        padding-bottom: 1.75rem;
    }

    /* Multi-column rather than grid on a phone: grid rows are as tall as
       their tallest column, so a five-item list next to a three-item one
       leaves a hole and pushes the third column onto a row of its own.
       Columns flow instead, and balance. */
    .footer-nav {
        display: block;
        column-width: 8.5rem;
        column-gap: 1.5rem;
    }

    .footer-nav .footer-col {
        break-inside: avoid;
        margin-bottom: 1.5rem;
    }

    .footer-nav .footer-col:last-child {
        margin-bottom: 0;
    }

    .footer-tagline {
        max-width: none;
    }

    .footer-signup {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding-top: 1.5rem;
    }

    .footer-signup form {
        grid-column: 1;
        grid-row: auto;
        margin-top: 0.875rem;
    }

    /* mobile-optimization.css gives every form submit width:100% below this
       width. That is right for a phone, wrong for a 700px tablet where the
       field and the button still fit on one line. Its min-height and top
       margin also left the button sitting 8px lower than the field it is
       paired with, so both controls are sized here instead. */
    .site-footer .footer-signup-row .footer-submit {
        width: auto;
        margin: 0;
    }

    .site-footer .footer-signup-row .footer-input,
    .site-footer .footer-signup-row .footer-submit {
        min-height: 0;
        /* 16px keeps iOS from zooming the page on focus */
        font-size: 16px;
        padding: 0.6875rem 1.25rem;
    }

    /* Comfortable tap targets without the 44px min-height from
       mobile-optimization.css, which stretched every link into its own
       row and was most of why the footer ran so long. */
    .site-footer .footer-link {
        padding: 0.4375rem 0;
    }

    .footer-bottom {
        justify-content: center;
        text-align: center;
        padding-top: 1rem;
    }

    .footer-legal {
        justify-content: center;
        width: 100%;
        gap: 0.375rem 0.875rem;
        font-size: 0.78125rem;
    }

    /* The copyright drops below the links rather than sharing the row with
       them - together they overflow a phone and leave one link orphaned on
       a line of its own. */
    .footer-legal > span {
        order: 2;
        width: 100%;
    }

    .footer-credit {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .footer-top {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-footer .footer-signup-row .footer-input,
    .site-footer .footer-signup-row .footer-submit {
        flex: 1 1 100%;
        width: 100%;
    }
}

@media (max-width: 359.98px) {
    .footer-nav {
        column-width: auto;
        column-count: 1;
    }
}

/* The mobile block in mobile-optimization.css targets the bare `footer`
   element, so it applies at equal specificity and earlier in the
   cascade for anything not re-declared above. These reset what it sets
   that this layout does not want. */
@media (max-width: 767.98px) {
    .site-footer .footer-inner {
        text-align: left;
    }

    .site-footer a {
        min-height: 0;
    }
}