/* ==========================================================================
   Footer - v2 design (webparts/wristband-home-footer-v2.php)
   --------------------------------------------------------------------------
   Enqueued site-wide by webparts/topCSS.php, since webparts/footer.php now
   renders this footer on every page. Self-contained island under .wcv2-ft
   with its own dark palette: the --wcv2-* tokens are declared on .wcv2 and
   body.wcv2-doc, and this footer wants a different (deep ink) ground, so it
   declares its own rather than inheriting.

   Every colour ships an sRGB hex first, then the oklch() it was derived from,
   so pre-2023 browsers get the intended value instead of falling through.
   ========================================================================== */

.wcv2-ft {
    --ft-ink:      #0d0f15;  --ft-ink:      oklch(.17 .012 265);   /* main ground */
    --ft-band:     #15181f;  --ft-band:     oklch(.21 .015 265);   /* raised newsletter band */
    --ft-deep:     #07090d;  --ft-deep:     oklch(.14 .01 265);    /* legal strip */
    --ft-teal:     #75dcac;  --ft-teal:     oklch(.82 .12 162);    /* link hover on dark */
    --ft-teal-btn: #00a169;  --ft-teal-btn: oklch(.62 .15 162);    /* newsletter button */
    --ft-glow:     #008b52;  --ft-glow:     oklch(.55 .15 160);    /* band bloom */

    --ft-text:   rgba(255, 255, 255, .72);
    --ft-muted:  rgba(255, 255, 255, .45);
    --ft-hair:   rgba(255, 255, 255, .10);
    --ft-hair-2: rgba(255, 255, 255, .16);

    --ft-ease: cubic-bezier(.16, 1, .3, 1);

    --ft-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ft-head: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    background: var(--ft-ink);
    color: var(--ft-text);
    font-family: var(--ft-font);
    -webkit-font-smoothing: antialiased;
}

/* Island defences, same two lessons as the category CSS:
   - style.correct.css:9 `*{margin:0 auto}` centres grid/flex children, so zero
     margins for every descendant and let the later component rules win.
   - element resets go inside :where() so they score (0,1,0) and cannot outrank
     a single-class component rule. */
.wcv2-ft,
.wcv2-ft *,
.wcv2-ft *::before,
.wcv2-ft *::after {
    box-sizing: border-box;
    margin: 0;
}
.wcv2-ft :where(h1, h2, h3, h4, p, ul, li) { padding: 0; list-style: none; }
.wcv2-ft :where(a) { text-decoration: none; color: inherit; }
.wcv2-ft :where(button) {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.wcv2-ft :where(img) { display: block; max-width: 100%; }
.wcv2-ft :where(input) { font: inherit; }

.wcv2-ft-shell {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
}
@media (min-width: 768px)  { .wcv2-ft-shell { padding: 0 24px; } }
@media (min-width: 1024px) { .wcv2-ft-shell { padding: 0 32px; } }

/* Screen-reader-only label for the native newsletter input. */
.wcv2-ft-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Shared focus treatment - visible on a dark ground, and only for keyboard. */
.wcv2-ft a:focus-visible,
.wcv2-ft button:focus-visible,
.wcv2-ft input:focus-visible {
    outline: 2px solid var(--ft-teal);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ==========================================================================
   Newsletter band
   ========================================================================== */

.wcv2-ft-news {
    position: relative;
    background: var(--ft-band);
    border-bottom: 1px solid var(--ft-hair);
    overflow: hidden;   /* clips the bloom */
}
/* Soft teal bloom behind the heading. Static - no travelling highlight, for the
   same reason the review card's sweeping accent line was removed. */
.wcv2-ft-news::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -5%;
    width: 55%;
    height: 220%;
    background: radial-gradient(closest-side, var(--ft-glow), transparent 70%);
    opacity: .16;
    pointer-events: none;
}

.wcv2-ft-news-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 40px 16px;
    background: transparent !important;
}
@media (min-width: 900px) {
    .wcv2-ft-news-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 48px;
        padding: 44px 32px;
    }
}

.wcv2-ft-news-copy h2 {
    font-family: var(--ft-head);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #fff;
}
@media (min-width: 900px) { .wcv2-ft-news-copy h2 { font-size: 28px; } }
.wcv2-ft-news-copy p {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ft-muted);
}

/* min-height reserves the form's space so the band keeps its proportions
   whether or not Klaviyo has mounted yet - it injects asynchronously, and on
   non-production hosts it does not render at all (verified: the legacy footer
   behaves identically, so this is environmental, not a regression). */
.wcv2-ft-news-form {
    width: 100%;
    max-width: 460px;
    flex-shrink: 0;
    min-height: 56px;
}

/* --- Native fallback field (non-Klaviyo brands) ------------------------- */
.wcv2-ft-native {
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--ft-hair-2);
    border-radius: 12px;
    padding: 6px;
    transition: border-color .3s ease, background-color .3s ease;
}
.wcv2-ft-native:focus-within {
    border-color: var(--ft-teal);
    background: rgba(255, 255, 255, .09);
}
.wcv2-ft-native input {
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    padding: 10px 12px;
    color: #fff;
    font-size: 15px;
}
.wcv2-ft-native input::placeholder { color: rgba(255, 255, 255, .38); }
.wcv2-ft-native input:focus { outline: none; }
.wcv2-ft-native .sub-button {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 8px;
    background: var(--ft-teal-btn);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    transition: filter .3s var(--ft-ease), transform .3s var(--ft-ease);
}
.wcv2-ft-native .sub-button:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* --- Klaviyo embed, best-effort match ----------------------------------
   BRITTLE BY NATURE: Klaviyo injects its own markup and can change class names
   or structure in any release, at which point these overrides simply stop
   matching. That is acceptable here because the band around the form is styled
   independently and still reads correctly with the form left at its Klaviyo
   defaults. Never make anything structural depend on these selectors.
   Field/button copy and colours are also editable in the Klaviyo dashboard,
   which is the durable place to change them. */
.wcv2-ft-news-form form,
.wcv2-ft-news-form [class*="klaviyo"] form { max-width: 100% !important; }

.wcv2-ft-news-form input[type="email"],
.wcv2-ft-news-form input[type="text"] {
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 10px !important;
    color: #fff !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    box-shadow: none !important;
}
.wcv2-ft-news-form input[type="email"]::placeholder,
.wcv2-ft-news-form input[type="text"]::placeholder {
    color: rgba(255, 255, 255, .38) !important;
}
.wcv2-ft-news-form button,
.wcv2-ft-news-form button[type="submit"] {
    background: var(--ft-teal-btn) !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

/* ==========================================================================
   Main grid
   ========================================================================== */

.wcv2-ft-main { padding: 44px 0 40px; }

.wcv2-ft-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px 28px;
}
@media (min-width: 640px)  { .wcv2-ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .wcv2-ft-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1.4fr; gap: 40px 32px; } }

/* --- Brand column ------------------------------------------------------- */
.wcv2-ft-brand { grid-column: 1 / -1; }
@media (min-width: 1024px) { .wcv2-ft-brand { grid-column: auto; } }

.wcv2-ft-word {
    display: inline-block;
    font-family: var(--ft-head);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -.02em;
    color: #fff;
}
.wcv2-ft-blurb {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--ft-muted);
    max-width: 34ch;
}

.wcv2-ft-rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 8px 12px;
    border: 1px solid var(--ft-hair);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    transition: border-color .3s ease, background-color .3s ease, transform .4s var(--ft-ease);
}
.wcv2-ft-rating:hover {
    border-color: var(--ft-hair-2);
    background: rgba(255, 255, 255, .07);
    transform: translateY(-1px);
}
.wcv2-ft-stars { display: inline-flex; color: #f0b429; }
.wcv2-ft-rating-txt { font-size: 12.5px; color: var(--ft-text); white-space: nowrap; }

.wcv2-ft-social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}
.wcv2-ft-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--ft-hair);
    color: var(--ft-text);
    transition: color .3s ease, border-color .3s ease,
                background-color .3s ease, transform .4s var(--ft-ease);
}
.wcv2-ft-social a:hover {
    color: #fff;
    border-color: var(--ft-teal);
    background: rgba(117, 220, 172, .10);
    transform: translateY(-2px);
}

/* --- Link columns ------------------------------------------------------- */
.wcv2-ft-collabel {
    font-family: var(--ft-head);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ft-muted);
}
.wcv2-ft-colhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 0;
    text-align: left;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
}
.wcv2-ft-chev { display: flex; transition: transform .2s ease; }
.wcv2-ft-col.is-open .wcv2-ft-chev { transform: rotate(180deg); }

.wcv2-ft-links { display: grid; gap: 11px; padding-bottom: 14px; }
.wcv2-ft-links a {
    display: inline-block;
    font-size: 14px;
    color: var(--ft-text);
    transition: color .25s ease, transform .3s var(--ft-ease);
}
.wcv2-ft-links a:hover { color: var(--ft-teal); transform: translateX(2px); }

/* Mobile: collapsed accordions. Toggled by a class rather than the [hidden]
   attribute so that resizing past the breakpoint always reveals the list -
   an inline `hidden` would survive the media query. */
.wcv2-ft-col .wcv2-ft-links { display: none; }
.wcv2-ft-col.is-open .wcv2-ft-links { display: grid; }
.wcv2-ft-col { border-bottom: 1px solid var(--ft-hair); }

@media (min-width: 640px) {
    .wcv2-ft-col { border-bottom: 0; }
    .wcv2-ft-col .wcv2-ft-links,
    .wcv2-ft-col.is-open .wcv2-ft-links { display: grid; padding-bottom: 0; }
    /* Above the breakpoint the heading is a label, not a control. */
    .wcv2-ft-colhead { padding: 0 0 16px; pointer-events: none; }
    .wcv2-ft-chev { display: none; }
}

/* --- Contact column ----------------------------------------------------- */
.wcv2-ft-contact { grid-column: 1 / -1; }
@media (min-width: 640px)  { .wcv2-ft-contact { grid-column: span 2; } }
@media (min-width: 1024px) { .wcv2-ft-contact { grid-column: auto; } }

.wcv2-ft-collabel-static { display: block; padding-bottom: 16px; }

.wcv2-ft-tel,
.wcv2-ft-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ft-text);
    margin-bottom: 10px;
    transition: color .25s ease;
}
.wcv2-ft-tel svg,
.wcv2-ft-row svg { flex-shrink: 0; margin-top: 2px; color: var(--ft-muted); }
.wcv2-ft-tel:hover,
a.wcv2-ft-row:hover { color: var(--ft-teal); }
.wcv2-ft-tel:hover svg,
a.wcv2-ft-row:hover svg { color: var(--ft-teal); }
.wcv2-ft-row-static { cursor: default; }

/* The toll-free number is the primary contact - give it real weight. */
.wcv2-ft-tel {
    font-family: var(--ft-head);
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 14px;
}
.wcv2-ft-tel svg { width: 18px; height: 18px; margin-top: 4px; }

/* ==========================================================================
   Legal strip
   ========================================================================== */

.wcv2-ft-legal {
    background: var(--ft-deep);
    border-top: 1px solid var(--ft-hair);
}
.wcv2-ft-legal-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 16px;
}
@media (min-width: 900px) {
    .wcv2-ft-legal-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 18px 32px;
    }
}
.wcv2-ft-copy { font-size: 13px; color: var(--ft-muted); }

.wcv2-ft-legal-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
}
.wcv2-ft-legal-links a {
    font-size: 13px;
    color: var(--ft-muted);
    transition: color .25s ease;
}
.wcv2-ft-legal-links a:hover { color: var(--ft-teal); }

/* Payment marks: individual light plates, since every scheme's artwork assumes
   a light ground. One tile per method rather than a single sprite image, so the
   row wraps cleanly and methods can be added or reordered in the PHP. */
.wcv2-ft-pay {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.wcv2-ft-pay li {
    display: flex;
    width: 42px;
    height: 28px;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: transform .35s var(--ft-ease);
}
.wcv2-ft-pay li:hover { transform: translateY(-2px); }
.wcv2-ft-pay svg { width: 34px; height: 22px; display: block; }
/* The two marks that carry their own full-bleed brand colour want the plate to
   disappear behind them. */
.wcv2-ft-pay li:nth-child(3) svg,
.wcv2-ft-pay li:nth-child(6) svg { width: 100%; height: 100%; border-radius: 4px; }

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .wcv2-ft * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }
    .wcv2-ft-social a:hover,
    .wcv2-ft-rating:hover,
    .wcv2-ft-native .sub-button:hover { transform: none; }
    .wcv2-ft-links a:hover { transform: none; }
}