/*
 * ============================================================
 * FOOTER
 * A dark navy closing section built around one "information hub":
 * a tab strip (About / Contact / Team) fused directly to the panel
 * it controls, so the click relationship is unambiguous. Panel
 * background matches the active tab's background exactly — that
 * shared color is what visually "attaches" them.
 * ============================================================
 */

.site-footer {
    /* Single source of truth for the wave's height, shared with
       .footer-wave/.footer-wave-shape below and with margin-top here so
       the two can never drift apart. margin-top exists ONLY to make room
       for the wave graphic — if it were ever larger than the wave itself,
       the leftover gap would be a flat, unpatterned strip of plain page
       background sitting between the previous section and the wave: a
       hard straight seam breaking the illusion the wave exists to create.
       Tying both values to the same variable (overridden as one number at
       the ≤768px breakpoint) guarantees the wave always starts exactly
       where the previous section ends, with zero gap at any width. */
    --footer-wave-h: 60px;
    position: relative;
    width: 100%;
    background-color: var(--primary-navy-dark);
    background-image:
        radial-gradient(circle at 80% 0%,   rgb(93 13 24 / 60%), transparent 60%),
        radial-gradient(circle at 20% 100%,  rgba(26, 54, 93, 0.4), transparent 50%),
        linear-gradient(45deg, rgb(255 255 255 / 0%) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.015) 75%, rgba(255, 255, 255, 0.015)),
        linear-gradient(45deg, rgba(255, 255, 255, 0.015) 25%, transparent 25%, transparent 75%, rgb(255 255 255 / 0%) 75%, rgb(255 255 255 / 6%));
    background-size: 100% 100%, 100% 100%, 20px 20px, 20px 20px;
    background-position: 0 0, 0 0, 0 0, 10px 10px;
    /* The wavy top edge is part of the footer box itself (a mask), so the patterned
       background and the red glow run right up to the wave's edge — no separate strip. */
    padding: calc(80px + var(--footer-wave-h)) 40px 25px;
    margin-top: 0;
    --footer-wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,34 C240,58 480,4 720,26 C960,48 1200,2 1440,28 L1440,60 L0,60 Z'/%3E%3C/svg%3E");
    -webkit-mask: var(--footer-wave-mask) 0 0 / 100% var(--footer-wave-h) no-repeat,
                  linear-gradient(#000, #000) 0 calc(var(--footer-wave-h) - 1px) / 100% calc(100% - var(--footer-wave-h) + 1px) no-repeat;
    mask: var(--footer-wave-mask) 0 0 / 100% var(--footer-wave-h) no-repeat,
          linear-gradient(#000, #000) 0 calc(var(--footer-wave-h) - 1px) / 100% calc(100% - var(--footer-wave-h) + 1px) no-repeat;
    z-index: 10;
    transition: background-color 0.4s ease;
}

/* Top-edge wave — replaces a plain divider line. Sits one full SVG-height
   above the footer's actual top edge (top: -60px), so it appears to rise
   out of the box in a soft two-curve wave rather than a straight line.
   `overflow: visible` on the footer (its default — nothing here sets
   overflow: hidden) is what lets it render above the box. */
.footer-wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--footer-wave-h);
    display: block;
    pointer-events: none;
}
/* A thin accent line tracing just the curve (not the closing rectangle
   edges) — echoes the previous straight-line design's gold top accent, and
   is what keeps the wave legible in Dark Mode where the footer's fill is
   otherwise too close in value to the page background to read on its own. */
.footer-wave-line {
    stroke: var(--accent-gold);
    stroke-width: 3px; /* half of it sits outside the masked edge */
    vector-effect: non-scaling-stroke;
    opacity: 0.55;
    transition: stroke 0.4s ease;
}

.footer-container {
    max-width: 1100px;
    width: 95%;
    margin: 0 auto;
}

/* ============================================================
   TOP ROW — brand name/tagline
   ============================================================ */
.footer-top {
    margin-bottom: 20px;
}
.footer-brand { display: flex; flex-direction: column; gap: 4px; }
.footer-brand-name {
    font-family: var(--font-display-fa);
    font-size: 22px;
    font-weight: 900;
    color: #FFFFFF;
}
.footer-brand-tagline {
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
}

/* ============================================================
   HUB — the tab strip + panel, fused into one card
   ============================================================ */
.footer-hub {
    background-color: var(--color-surface);
    border: 1px solid var(--neutral-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

/* Desktop/tablet: a CSS Grid puts every tab in row 1 (each is the only
   row-1 item between its neighbours, so auto-placement lines them up left
   to right exactly like the old flex tab strip) and lets whichever content
   block is not [hidden] span the full-width row 2 below — the "attached
   tabs above a shared panel" look, built from tab+content pairs that are
   plain DOM siblings rather than two separately-grouped rows. This is what
   lets the ≤768px rule further down turn the very same markup into a
   stacked accordion with nothing but `display: block`. */
.footer-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: var(--neutral-soft-bg);
    /* .footer-hub's own overflow:hidden + border-radius already clips this
       strip's square corners into its curve, but that clip is only as
       crisp as the browser's anti-aliasing of it. Rounding (and clipping)
       this element's own flush-to-the-edge background the same amount is
       a belt-and-suspenders fix for the corner where its (--neutral-soft-bg)
       fill meets .footer-hub's rounded top edge — it removes any chance of
       a jagged, un-anti-aliased pixel seam there regardless of browser. */
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    overflow: hidden;
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

.footer-tab {
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 12px 15px;
    background: transparent;
    border: none;
    border-bottom: 3px solid var(--neutral-border);
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink-soft);
    cursor: pointer;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
.footer-tab-icon { width: 20px; height: 20px; transition: transform 0.3s ease; flex-shrink: 0; }
.footer-tab-chevron {
    display: none;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}
.footer-tab-chevron svg { width: 100%; height: 100%; }
.footer-tab:hover { color: var(--accent-gold); background-color: rgba(93, 13, 24, 0.05); }
.footer-tab:hover .footer-tab-icon { transform: translateY(-2px); }
.footer-tab.active {
    color: var(--accent-gold);
    background-color: var(--color-surface);
    border-bottom-color: var(--accent-gold);
}
[data-theme="dark"] .footer-tab:hover { background-color: rgba(217, 82, 110, 0.08); }

.footer-panel-content {
    grid-row: 2;
    grid-column: 1 / -1;
    padding: 36px 40px;
    /* Tall enough for the Contact panel's own natural content (the tallest
       of the three) so switching tabs never resizes the shared .footer-hub
       box — About/Team simply get padded up to the same height instead of
       the hub growing/shrinking per tab. */
    min-height: 370px;
    /* Same belt-and-suspenders rounding as .footer-tabs above, but for the
       bottom edge — this is the box .footer-hub's own bottom corners are
       clipped from, so giving it the matching radius directly keeps that
       corner crisp under overflow:hidden rather than relying on it alone. */
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    transition: opacity 0.22s ease, filter 0.22s ease, transform 0.22s ease;
}
/* Only the currently-visible content blurs/fades during a tab switch — the
   tab strip itself stays crisp throughout. */
#footerPanel.is-animating .footer-panel-content:not([hidden]) {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(6px);
}

/* ============================================================
   ABOUT PANEL
   ============================================================ */
.footer-about {
    display: flex;
    align-items: center;
    gap: 36px;
}
.footer-about-media {
    position: relative;
    flex: 0 0 240px;
}
.footer-about-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border-highlight);
    display: block;
}
.footer-about-badge {
    position: absolute;
    bottom: -14px;
    left: -14px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--grad-btn-start), var(--grad-btn-end));
    color: #FFFFFF;
    box-shadow: 0 10px 22px rgba(93, 13, 24, 0.35);
    border: 3px solid var(--color-surface);
}
.footer-about-badge svg { width: 22px; height: 22px; }

.footer-about-text h3 {
    font-family: var(--font-display-fa);
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-navy);
    margin: 0 0 12px;
}
.footer-about-text p {
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 2;
    color: var(--ink-soft);
    margin: 0;
}
.footer-about-text p + p { margin-top: 10px; }

/* ============================================================
   CONTACT PANEL
   ============================================================ */
.footer-contact-intro {
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.9;
    color: var(--ink-soft);
    margin: 0 0 22px;
}
/* Two columns of contact methods (6 items → 3 rows) plus a third column
   for the map, spanning all three rows. */
.footer-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    grid-auto-rows: min-content;
    gap: 14px;
}

/* .footer-contact-item / -icon / -text now live in components.css — they're
   reused outside the footer too (e.g. the reservation page's urgent-contact
   modal, which doesn't load footer.css at all). */

/* ---- Location: grid-span cell holding the stylized local map ---- */
.footer-location {
    grid-column: 3;
    grid-row: 1 / 4;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* The map is a picture (editable in the admin panel) with a soft blinking
   circle over the academy's marker. A fixed aspect ratio keeps the circle
   exactly on the marker at every card width. */
.footer-map {
    position: relative;
    aspect-ratio: 1200 / 784;
    border-radius: var(--radius-sm);
    border: 1px solid var(--neutral-border);
    background-color: var(--neutral-soft-bg);
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.footer-map > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.footer-location:hover .footer-map { border-color: var(--accent-gold); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14); }
.footer-map-pin {
    position: absolute;
    width: 22%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.footer-map-pin-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(220, 38, 56, 0.34) 0 45%, rgba(220, 38, 56, 0.12) 70%, transparent 72%);
    animation: footer-map-pulse 2.4s ease-in-out infinite;
    /* Paused until js/animations.js's initOffscreenAnimationPausing() confirms
       (IntersectionObserver) this is on screen — the footer is at the very bottom. */
    animation-play-state: paused;
}
.footer-map-pin-ring.in-view { animation-play-state: running; }
@keyframes footer-map-pulse {
    0%, 100% { transform: scale(0.55); opacity: 0.95; }
    50%      { transform: scale(1);    opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
    .footer-map-pin-ring { animation: none; opacity: 0.6; }
}

.footer-location-label {
    display: flex;
    align-items: center;
    gap: 12px;
}
.footer-location-label .footer-contact-icon { width: 34px; height: 34px; }
/* Hovering the card makes the address larger (easier to read). */
.footer-location-label .footer-contact-text strong,
.footer-location-label .footer-contact-text span { transition: font-size 0.25s ease, color 0.25s ease; }
.footer-location:hover .footer-location-label .footer-contact-text strong { font-size: 17px; }
.footer-location:hover .footer-location-label .footer-contact-text span { font-size: 15.5px; color: var(--ink); }
.footer-location-label .footer-contact-icon svg { width: 16px; height: 16px; }
/* ============================================================
   TEAM PANEL
   ============================================================ */
.footer-team {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-team-arrow {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--neutral-soft-bg);
    border: 1.5px solid var(--neutral-border);
    color: var(--primary-navy);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.footer-team-arrow:hover {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
    background-color: var(--color-surface-elevated);
    transform: scale(1.08);
}
.footer-team-arrow svg { width: 18px; height: 18px; }

.footer-team-track {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    overflow-x: auto;
    /* overflow-x set to a scrolling value forces overflow-y to resolve as
       `auto` too (per the CSS Overflow spec), so extra vertical padding is
       needed here — the active card renders ~10% taller than its own
       layout box (a pure `transform: scale()`, so the box itself doesn't
       grow), and without room to spare that visual overhang would clip
       against the track's computed height.
       The same is true horizontally, and it bites harder: the side padding
       below is what `scroll-snap-align: center` uses to still center the
       FIRST or LAST card (there's no sibling on the other side to supply
       that space). 112px is exactly half of a card's unscaled 224px width
       — enough to center it, but not enough for the ~11px of extra width
       `scale(1.1)` adds on each side once that card becomes active. At the
       track's scroll extremes (i.e. exactly the first/last card) that
       overhang has nowhere to go and gets cut off by this element's own
       overflow-x, reading as the card vanishing behind the arrow next to
       it. 128px leaves the scaled card's overhang (~123px half-width) a
       few px of clearance on top of that, at every position, not just the
       middle ones. */
    padding: 18px calc(50% - 128px);
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    outline: none;
    /* Only 12px of gap separates this track from the arrow buttons on
       either side (.footer-team's own gap), and a dimmed neighbour card is
       deliberately peeking right up to that boundary. Without this, that
       peek gets hard-cropped exactly at the track's edge, a single pixel
       away from the arrow's circle — reading as the card disappearing
       "under" the arrow rather than a clean peek. Fading it out over the
       last few pixels instead gives it real, visible clearance from the
       arrow on both sides. */
    mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.footer-team-track::-webkit-scrollbar { display: none; }

/* Each card is directly clickable/selectable (footer.js wires click +
   Enter/Space regardless of arrow/dot navigation), so it needs its own
   pointer cursor and focus ring — the shared [tabindex]:focus-visible
   rule in base.css covers the latter since footer.js sets tabindex="0". */
/* The active card must be UNMISTAKABLY the focal point — not a subtle
   10% size nudge. `transform: scale()` (not a change to `width`) is what
   makes this possible without breaking the centering math below: it's a
   purely visual/compositing effect that never touches the box's actual
   layout size or position, so `scroll-snap-align: center` still centers
   every card's true (unscaled) 224px box exactly, regardless of how big
   or small it currently renders. */
.footer-team-card {
    scroll-snap-align: center;
    flex: 0 0 auto;
    width: 224px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 26px 18px;
    border-radius: var(--radius-md);
    background-color: var(--neutral-soft-bg);
    border: 1.5px solid var(--neutral-border);
    opacity: 0.55;
    transform: scale(0.72);
    cursor: pointer;
    transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer-team-card.is-active {
    opacity: 1;
    transform: scale(1.1);
    background-color: var(--color-surface-elevated);
    border-color: var(--accent-gold);
    box-shadow: var(--glass-shadow-hover);
    z-index: 2;
}
/* A light hover cue on inactive cards hints "this is selectable" — never
   required for the interaction itself, which already works via click/tap. */
@media (hover: hover) {
    .footer-team-card:not(.is-active):hover {
        opacity: 0.85;
        transform: scale(0.78);
        border-color: var(--accent-gold-hover);
    }
}

.footer-team-avatar {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display-fa);
    font-size: 22px;
    font-weight: 800;
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--avatar-a, var(--grad-btn-start)), var(--avatar-b, var(--grad-btn-end)));
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* A member with a real photo puts an <img> inside the same circle instead
   of the initial-letter text (Negin Nasr's card, untouched, still has no
   img here, so this rule simply never matches for her) — cover + 50%
   radius fills the existing 62px circle exactly, cropping naturally
   regardless of the source photo's own aspect ratio, with no change to
   the circle's own size/shadow/gradient/hover-scale behavior above. */
.footer-team-avatar img {
    width: 100%;
    height: 100%;
    /* Safari treats flex children's default min-width/min-height as "auto"
       (i.e. the image's own intrinsic size), so without this override iOS
       Safari lets the photo's real pixel size win over width/height:100%,
       rendering it huge and uncropped — Chrome/Android never hit this. */
    min-width: 0;
    min-height: 0;
    object-fit: cover;
    border-radius: 50%;
}
/* Active-state emphasis is spread across three elements (avatar, name,
   role) rather than relying solely on the card's own 0.9→1.0 scale, so it
   reads as "this person is focused" rather than just "this box got bigger". */
.footer-team-card.is-active .footer-team-avatar { transform: scale(1.08); }
.footer-team-card h4 {
    font-family: var(--font-display-fa);
    font-size: 15px;
    font-weight: 800;
    color: var(--primary-navy);
    margin: 2px 0 0;
    transition: color 0.3s ease;
}
.footer-team-card.is-active h4 { color: var(--accent-gold); }
.footer-team-role {
    font-family: var(--font-body);
    font-size: 11.5px;
    color: var(--ink-soft);
    transition: color 0.3s ease, font-weight 0.3s ease;
}
.footer-team-card.is-active .footer-team-role { color: var(--ink); font-weight: 600; }

.footer-team-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}
.footer-team-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--neutral-border);
    cursor: pointer;
    transition: all 0.3s ease;
}
.footer-team-dot.active { width: 22px; border-radius: 4px; background-color: var(--accent-gold); }

/* ---- Copyright bar ---- */
.footer-copyright {
    margin-top: 40px;
    text-align: center;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 300;
    color: #94A3B8;
    letter-spacing: 0.5px;
}
.footer-copyright span {
    color: var(--accent-gold);
    font-weight: 500;
}
.footer-credits-link {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: inherit;
    text-decoration: none;
}
.footer-credits-link:hover { text-decoration: underline; }