/* ==========================================================================
   FOOTER — shared by partials/public-footer.php and partials/session-footer.php

   DESIGN
   Deep black surface (#000) with the brand gold (#f8c900) as the single accent.
   Gold on black is ~14:1, so headings, link hovers and the column markers are
   comfortably readable, and the body copy sits at #e8e6e9 (~13:1) / #a49ea6
   (~7:1) rather than the old washed-out mauve that only reached ~4:1.

   WHY THE OLD LAYOUT BROKE
   The previous version had four independent faults that compounded:

     1. NO ALIGNMENT ANCHOR. Every widget was a plain grid child with its own
        natural height, and the public footer's About column had no heading at
        all while the other three did - so its content started ~45px higher
        than everything else. Nothing forced the columns to line up.
     2. MARKERS OUTSIDE THE BOX. .footer-link::before was absolutely positioned
        at left:-12px, i.e. outside the link's own box. On hover the link also
        gained padding-left, so the text slid right while the marker stayed
        put. In the 2-column mobile grid the negative offset pushed the
        markers outside their grid cells and into the neighbouring column.
     3. INCONSISTENT ICON CHIPS. .footer-contact-icon was 36px and
        .footer-social-link 38px, both filled with rgba(255,255,255,.1).
        On a dark surface those pale discs read as unexplained white circles
        rather than as iconography.
     4. LOAD-TIME FLASH. .footer-widget ran fadeInUp with a 0.1s-0.4s delay
        while starting fully opaque, so each column appeared, jumped to
        opacity 0, then faded back in - a visible layout shift on every load.

   All four are fixed structurally below: one grid with a shared baseline
   (subgrid-aligned headings), markers in normal flow, one chip size driven by
   a single token, and no entrance animation.

   ORDERING NOTE
   This file loads BEFORE css/style.css and css/bootstrap.css in the session
   chrome (see partials/session-header.php). Anything here that must win over
   the legacy stack therefore needs at least two classes of specificity. The
   one rule that has to beat a later single-class legacy rule is the WhatsApp
   float, which is written as .footer-modern .float.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   Declared on .footer-modern itself (not :root) so the footer is fully
   self-contained: the public pages load this file without variables.css in
   some templates, and an undefined var() silently voids the whole
   declaration - which is exactly how the footer lost its background before.
   -------------------------------------------------------------------------- */
.footer-modern {
    --ft-black: #000000;
    --ft-surface: #0c0c0e;          /* bottom bar: black, lifted a hair */
    --ft-surface-2: #141416;        /* hover / input fills */
    --ft-line: rgba(255, 255, 255, .14);
    --ft-line-soft: rgba(255, 255, 255, .08);

    --ft-accent: #f8c900;           /* brand gold from variables.css */
    --ft-accent-light: #ffd633;
    --ft-accent-ink: #4a3800;       /* text/icons placed ON gold */
    --ft-accent-rgb: 248, 201, 0;

    --ft-text: #e8e6e9;             /* 13.0:1 on #000 */
    --ft-text-muted: #a49ea6;       /* 7.0:1  on #000 */
    --ft-text-dim: #7d7780;         /* 4.7:1  on #000 - small print only */

    --ft-chip: 42px;                /* ONE icon-chip size for the whole footer */
    --ft-chip-radius: 11px;
    --ft-icon: 17px;                /* ONE glyph size for the whole footer */
    --ft-col-gap: 3rem;
    --ft-row-gap: 2.25rem;

    background: var(--ft-black);
    color: var(--ft-text);
    font-size: .9375rem;
    line-height: 1.65;
    /* Top padding only; .footer-bottom closes the block, so there is no
       trailing gap and no empty band under the last row. */
    padding: 4rem 0 0;
    position: relative;
    /* Contain the sticky/fixed chrome above the footer without creating a
       stacking context that would trap the dropdowns opened from it. */
    z-index: 1;
}

.footer-modern .container {
    max-width: 1240px;
    padding-inline: 24px;
    width: 100%;
}

/* --------------------------------------------------------------------------
   Grid
   Four equal tracks. `align-items: start` + a shared heading block keeps every
   column's content on the same top line, which is what the old natural-height
   flex/grid children failed to do.
   -------------------------------------------------------------------------- */
.footer-grid {
    display: grid;
    gap: var(--ft-row-gap) var(--ft-col-gap);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-bottom: 3rem;
}

/* Single column definition. Everything inside is driven by this one rule, so
   the four columns cannot drift out of alignment independently. */
.footer-widget {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

/* Heading: fixed height and a fixed-width gold rule. Reserving the space
   unconditionally means a column with fewer links still starts its list at the
   same y as every other column. */
.footer-widget-title {
    align-items: center;
    border-bottom: 1px solid var(--ft-line);
    color: var(--ft-accent);
    display: flex;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .09em;
    margin: 0 0 1.5rem;
    min-height: 34px;
    padding-bottom: .625rem;
    position: relative;
    text-transform: uppercase;
    width: 100%;
}

/* Gold underline. `inset-inline-start` keeps it correct in both directions. */
.footer-widget-title::after {
    background: var(--ft-accent);
    bottom: -1px;
    content: '';
    height: 2px;
    inset-inline-start: 0;
    position: absolute;
    width: 34px;
}

/* --------------------------------------------------------------------------
   Column 1 - About
   -------------------------------------------------------------------------- */
.footer-about .footer-logo {
    display: inline-flex;
    align-items: center;
    margin-bottom: 1.125rem;
    text-decoration: none;
}

.footer-logo-img {
    display: block;
    height: 46px;
    width: auto;
    transition: transform var(--transition-fast, .15s ease);
}

.footer-logo-img:hover {
    transform: scale(1.04);
}

.footer-about-desc {
    color: var(--ft-text-muted);
    font-size: .9375rem;
    line-height: 1.75;
    margin: 0 0 1.5rem;
    max-width: 34ch;
}

/* Social row stays hard against the inline-start edge on every breakpoint -
   the old `justify-content: center` on mobile stranded it in the middle of a
   left-aligned column. */
.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
    justify-content: flex-start;
}

/* --------------------------------------------------------------------------
   Icon chips - ONE size, driven by --ft-chip / --ft-icon
   Rounded squares rather than pale discs: a solid white-tinted circle on black
   reads as a missing image, a bordered rounded square reads as a button.
   -------------------------------------------------------------------------- */
.footer-social-link,
.footer-contact-icon {
    align-items: center;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-chip-radius);
    color: var(--ft-accent);
    display: inline-flex;
    flex: 0 0 var(--ft-chip);
    font-size: var(--ft-icon);
    height: var(--ft-chip);
    justify-content: center;
    line-height: 1;
    text-decoration: none;
    width: var(--ft-chip);
    transition: background var(--transition-fast, .15s ease),
                border-color var(--transition-fast, .15s ease),
                color var(--transition-fast, .15s ease);
}

/* Kill any inherited FA line-height so every glyph sits on the same optical
   centre regardless of which icon it is. */
.footer-social-link i,
.footer-contact-icon i {
    display: block;
    font-size: var(--ft-icon);
    line-height: 1;
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
    background: var(--ft-accent);
    border-color: var(--ft-accent);
    color: var(--ft-accent-ink);
}

.footer-social-link--facebook:hover {
    background: #1877f2;
    border-color: #1877f2;
    color: #fff;
}

.footer-social-link--instagram:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border-color: transparent;
    color: #fff;
}

.footer-social-link--twitter:hover {
    background: #1da1f2;
    border-color: #1da1f2;
    color: #fff;
}

.footer-social-link--youtube:hover {
    background: #ff0000;
    border-color: #ff0000;
    color: #fff;
}

.footer-social-link:focus-visible,
.footer-contact-value:focus-visible,
.footer-link:focus-visible,
.footer-bottom-link:focus-visible,
.footer-newsletter-btn:focus-visible,
.footer-newsletter-input:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--ft-accent-rgb), .45);
    outline: none;
}

/* --------------------------------------------------------------------------
   Link lists
   Markers live in normal flow, so they can never escape their column and the
   hover state moves nothing.
   -------------------------------------------------------------------------- */
.footer-links-list,
.footer-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* --------------------------------------------------------------------------
   Legacy neutraliser — REQUIRED, do not delete

   css/style.css loads AFTER this file and still ships the old footer:
   `footer ul li a { width:30px; height:30px; line-height:30px;
   display:inline-block; background:#fff; color:#df2349; border-radius:50% }`.
   Every text link in this footer is an <a> inside a <ul><li>, so that rule
   matched all of them.

   The cascade is resolved per property, not per rule. `.footer-link` has
   higher specificity (one class) than `footer ul li a` (four elements), so it
   won for the properties it declared — colour, font-size, display — but it
   never declared width, height, background or border-radius. Those four
   properties therefore fell through to the legacy rule and painted a 30x30
   white circle behind every Quick Links, My Account, Contact and bottom-bar
   link. That is the white-disc bug; these resets are what actually stop it.

   `.footer-modern` is prepended to lift these to 0,0,2,x so they beat the
   legacy element selector even though this file loads first. Bootstrap and
   style.css cannot be removed yet — session page bodies still depend on them
   (see the ordering note in partials/session-header.php).
   -------------------------------------------------------------------------- */
.footer-modern .footer-links-list,
.footer-modern .footer-contact-list,
.footer-modern .footer-bottom-links {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

.footer-modern .footer-links-list li,
.footer-modern .footer-contact-list li,
.footer-modern .footer-bottom-links li {
    display: block;
    margin-left: 0;
    text-align: left;
}

.footer-modern .footer-link,
.footer-modern .footer-contact-value,
.footer-modern .footer-bottom-link {
    background: none;
    border-radius: 0;
    display: inline-flex;
    height: auto;
    line-height: inherit;
    width: auto;
}

.footer-modern .footer-contact-value,
.footer-modern .footer-bottom-link {
    display: inline;
}

.footer-links-list li {
    margin: 0 0 .25rem;
}

.footer-links-list li:last-child {
    margin-bottom: 0;
}

.footer-link {
    align-items: center;
    color: var(--ft-text);
    display: inline-flex;
    font-size: .9375rem;
    gap: .625rem;
    line-height: 1.5;
    padding: .3125rem 0;
    text-decoration: none;
    transition: color var(--transition-fast, .15s ease);
}

/* In-flow marker. The old version used an absolutely positioned ::before at
   left:-12px plus padding-left on hover, which is what made the text shift
   and collide in the 2-up mobile grid. */
.footer-link::before {
    background: var(--ft-accent);
    border-radius: 50%;
    content: '';
    flex: 0 0 5px;
    height: 5px;
    opacity: .55;
    transition: opacity var(--transition-fast, .15s ease),
                transform var(--transition-fast, .15s ease);
    width: 5px;
}

.footer-link:hover,
.footer-link:focus-visible {
    color: var(--ft-accent);
}

.footer-link:hover::before,
.footer-link:focus-visible::before {
    opacity: 1;
    transform: scale(1.25);
}

/* --------------------------------------------------------------------------
   Contact rows
   -------------------------------------------------------------------------- */
.footer-contact-list li {
    align-items: flex-start;
    display: flex;
    gap: .875rem;
    margin-bottom: 1.125rem;
}

.footer-contact-list li:last-child {
    margin-bottom: 0;
}

.footer-contact-list li:hover .footer-contact-icon {
    background: var(--ft-accent);
    border-color: var(--ft-accent);
    color: var(--ft-accent-ink);
}

.footer-contact-info {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    min-width: 0;
    padding-top: .125rem;
}

.footer-contact-label {
    color: var(--ft-text-dim);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.4;
    text-transform: uppercase;
}

.footer-contact-value {
    color: var(--ft-text);
    font-size: .9375rem;
    font-weight: 500;
    overflow-wrap: anywhere;
    text-decoration: none;
    transition: color var(--transition-fast, .15s ease);
}

.footer-contact-value:hover {
    color: var(--ft-accent);
}

/* --------------------------------------------------------------------------
   Newsletter band (public footer only)
   Sits below the grid as a full-width band rather than as a fifth grid
   column, so the four-column alignment above is never disturbed.
   -------------------------------------------------------------------------- */
.footer-newsletter-band {
    border-top: 1px solid var(--ft-line-soft);
    padding: 2.25rem 0;
}

.footer-newsletter-inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2.5rem;
    justify-content: space-between;
}

.footer-newsletter-copy {
    max-width: 46ch;
    min-width: 0;
}

.footer-newsletter-title {
    color: var(--ft-accent);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .09em;
    margin: 0 0 .375rem;
    text-transform: uppercase;
}

.footer-newsletter-desc {
    color: var(--ft-text-muted);
    font-size: .875rem;
    line-height: 1.65;
    margin: 0;
}

.footer-newsletter-form {
    display: flex;
    flex: 0 1 380px;
    gap: .5rem;
    min-width: 0;
}

.footer-newsletter-input {
    background: var(--ft-surface-2);
    border: 1px solid var(--ft-line);
    border-radius: 9px;
    color: var(--ft-text);
    flex: 1 1 auto;
    font-family: inherit;
    font-size: .9375rem;
    min-width: 0;
    padding: .8125rem 1rem;
    transition: border-color var(--transition-fast, .15s ease),
                background var(--transition-fast, .15s ease);
    width: 100%;
}

.footer-newsletter-input::placeholder {
    color: var(--ft-text-dim);
}

.footer-newsletter-input:focus {
    background: #1b1b1e;
    border-color: var(--ft-accent);
}

.footer-newsletter-btn {
    background: var(--ft-accent);
    border: 1px solid var(--ft-accent);
    border-radius: 9px;
    color: var(--ft-accent-ink);
    cursor: pointer;
    flex: 0 0 auto;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 700;
    padding: 0 1.25rem;
    transition: background var(--transition-fast, .15s ease);
    white-space: nowrap;
}

.footer-newsletter-btn:hover {
    background: var(--ft-accent-light);
}

.footer-newsletter-note {
    color: var(--ft-text-dim);
    display: block;
    font-size: .75rem;
    margin-top: .5rem;
}

/* --------------------------------------------------------------------------
   Bottom bar
   -------------------------------------------------------------------------- */
.footer-bottom {
    background: var(--ft-surface);
    border-top: 1px solid var(--ft-line-soft);
    color: var(--ft-text-muted);
    padding: 1.375rem 0;
}

.footer-bottom .container {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    justify-content: space-between;
}

.footer-copyright {
    color: var(--ft-text-muted);
    font-size: .875rem;
    margin: 0;
}

.footer-bottom-links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-bottom-link {
    color: var(--ft-text-muted);
    font-size: .875rem;
    text-decoration: none;
    transition: color var(--transition-fast, .15s ease);
}

.footer-bottom-link:hover {
    color: var(--ft-accent);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   WhatsApp float
   Lives inside <footer class="footer-modern">, and css/style.css (loaded
   AFTER this file) owns the base `.float` rule - so these must be at least as
   specific. `.footer-modern .float` is, hence it wins.
   -------------------------------------------------------------------------- */
.footer-modern .float {
    align-items: center;
    background: #25d366;
    border-radius: 50%;
    bottom: 88px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
    color: #fff;
    display: flex;
    font-size: 30px;
    height: 56px;
    justify-content: center;
    line-height: 1;
    /* Above the footer so it stays tappable, never above the header. */
    position: fixed;
    right: 28px;
    width: 56px;
    z-index: 900;
}

/* The legacy rule sets a top margin to centre the glyph; with flex centring
   that offset pushes it visibly low. */
.footer-modern .float .my-float {
    margin-top: 0;
}

.footer-modern .float:hover,
.footer-modern .float:focus-visible {
    background: #1eb856;
    color: #fff;
}

/* --------------------------------------------------------------------------
   Tablet - two columns
   The About block no longer spans the full width with a 400px cap and auto
   margins (which left a lopsided half-empty row); it takes the first track
   like every other widget.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .footer-modern .container {
        padding-inline: 20px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-bottom .container {
        flex-direction: column;
        text-align: center;
    }

    .footer-bottom-links {
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Mobile - single column
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .footer-modern {
        padding-top: 3rem;
    }

    .footer-grid {
        gap: 2.25rem;
        grid-template-columns: minmax(0, 1fr);
        padding-bottom: 2.5rem;
    }

    /* Two link columns only where they genuinely fit - below this the labels
       ("Change Password", "Membership Plans") would wrap awkwardly. */
    .footer-links-list {
        display: grid;
        gap: .125rem 1rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* `justify-content: center` on these rows (the old mobile rule) stranded
       the icon and text as a centred group while the text inside stayed
       flush-left. Everything is start-aligned instead. */
    .footer-contact-list li {
        justify-content: flex-start;
    }

    .footer-social {
        justify-content: flex-start;
    }

    .footer-newsletter-band {
        padding: 1.75rem 0;
    }

    .footer-newsletter-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .footer-newsletter-form {
        flex-direction: column;
        width: 100%;
    }

    .footer-newsletter-btn {
        padding: .75rem 1.25rem;
    }

    .footer-bottom-links {
        flex-direction: column;
        gap: .5rem;
    }

    .footer-modern .float {
        bottom: 72px;
        height: 52px;
        right: 18px;
        width: 52px;
    }
}

/* Very small phones: drop back to one link column. */
@media (max-width: 379.98px) {
    .footer-links-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --------------------------------------------------------------------------
   Motion & print
   The fadeInUp entrance animation is intentionally gone: with staggered delays
   it painted each column in, snapped it to opacity 0, then faded it back,
   which read as a layout shift. The footer now renders once, in place.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .footer-logo-img,
    .footer-social-link,
    .footer-contact-icon,
    .footer-link,
    .footer-link::before,
    .footer-contact-value,
    .footer-bottom-link,
    .footer-newsletter-btn,
    .footer-newsletter-input,
    .footer-modern .float {
        transition: none;
    }

    .footer-link:hover::before {
        transform: none;
    }

    .footer-logo-img:hover {
        transform: none;
    }
}

@media print {
    .footer-modern {
        background: #fff;
        color: #000;
    }

    .footer-bottom {
        background: #fff;
        border-top-color: #ccc;
        color: #000;
    }

    .footer-copyright,
    .footer-bottom-link,
    .footer-contact-value,
    .footer-link,
    .footer-about-desc,
    .footer-newsletter-desc {
        color: #000;
    }

    .footer-widget-title {
        border-bottom-color: #ccc;
        color: #000;
    }

    .footer-social-link,
    .footer-contact-icon {
        background: transparent;
        border-color: #999;
        color: #000;
    }

    /* Never print the fixed float: it would land on top of page content. */
    .footer-modern .float,
    .footer-newsletter-form {
        display: none;
    }
}