/* =============================================================
   Legacy IMLeagues color theme — for design comparison only.
   =============================================================
   Maps the new indigo cascade to the classic IMLeagues palette:
      Primary blue:   #19589b  (replaces indigo #6366F1 family)
      Accent orange:  #ed9118  (highlight color, used sparingly)
      Old logo:       iml-logo-legacy.png (swap done by JS in layout.js)

   Activation: visit any page with ?theme=legacy. layout.js stores the
   choice in localStorage and links this stylesheet on every page.
   Switch back with ?theme=new (or clear localStorage).

   Only Tailwind utility classes that bind to primary-* are overridden,
   plus the indigo gradient stops that show through in the hero. Slate/
   neutral colors are left as-is — they're cosmetic and the legacy site
   used similar grays.

   Important: this file is loaded AFTER the Tailwind CDN runtime so the
   !important flags are needed to win the cascade.
============================================================= */

/* ---- Background tints ---- */
.bg-primary-50  { background-color: #e8eef5 !important; }
.bg-primary-100 { background-color: #c7d6ea !important; }
.bg-primary-500 { background-color: #2d70b8 !important; }
.bg-primary-600 { background-color: #19589b !important; }
.bg-primary-700 { background-color: #144478 !important; }

/* ---- Text colors ---- */
.text-primary-50  { color: #e8eef5 !important; }
.text-primary-100 { color: #c7d6ea !important; }
.text-primary-500 { color: #2d70b8 !important; }
.text-primary-600 { color: #19589b !important; }
.text-primary-700 { color: #144478 !important; }

/* ---- Borders ---- */
.border-primary-50  { border-color: #e8eef5 !important; }
.border-primary-100 { border-color: #c7d6ea !important; }
.border-primary-300 { border-color: #7aa3d0 !important; }
.border-primary-500 { border-color: #2d70b8 !important; }
.border-primary-600 { border-color: #19589b !important; }
.border-primary-700 { border-color: #144478 !important; }

/* ---- Hover states ---- */
.hover\:bg-primary-600:hover     { background-color: #19589b !important; }
.hover\:bg-primary-700:hover     { background-color: #144478 !important; }
.hover\:text-primary-600:hover   { color: #19589b !important; }
.hover\:border-primary-300:hover { border-color: #7aa3d0 !important; }
.hover\:border-primary-600:hover { border-color: #19589b !important; }

/* ---- Focus rings ---- */
.focus\:ring-primary-500:focus { --tw-ring-color: rgba(45, 112, 184, 0.5) !important; }
.focus\:border-primary-500:focus { border-color: #2d70b8 !important; }
.focus\:border-primary-600:focus { border-color: #19589b !important; }

/* ---- Tailwind opacity-suffix shadow utilities. Cover both the base
   classes (.shadow-primary-600/N) and the :hover variants — without
   the hover overrides the button keeps the indigo shadow color from
   the default Tailwind cascade, which looked purple-ey on the legacy
   blue button. ---- */
.shadow-primary-600\/10 { --tw-shadow-color: rgba(25, 88, 155, 0.10) !important; --tw-shadow: var(--tw-shadow-colored) !important; }
.shadow-primary-600\/20 { --tw-shadow-color: rgba(25, 88, 155, 0.20) !important; --tw-shadow: var(--tw-shadow-colored) !important; }
.shadow-primary-600\/25 { --tw-shadow-color: rgba(25, 88, 155, 0.25) !important; --tw-shadow: var(--tw-shadow-colored) !important; }
.shadow-primary-600\/30 { --tw-shadow-color: rgba(25, 88, 155, 0.30) !important; --tw-shadow: var(--tw-shadow-colored) !important; }
.hover\:shadow-primary-600\/20:hover { --tw-shadow-color: rgba(25, 88, 155, 0.20) !important; --tw-shadow: var(--tw-shadow-colored) !important; }
.hover\:shadow-primary-600\/30:hover { --tw-shadow-color: rgba(25, 88, 155, 0.30) !important; --tw-shadow: var(--tw-shadow-colored) !important; }
.focus\:ring-primary-500\/20:focus { --tw-ring-color: rgba(45, 112, 184, 0.2) !important; }
.focus\:ring-primary-600\/50:focus { --tw-ring-color: rgba(25, 88, 155, 0.5) !important; }

/* ---- Gradient stops (used in hero gradient + indigo gradient) ----
   from-primary-50 is the top stop of the hero radial gradient (line 139
   of index.html: `from-primary-50 via-white to-neutral-50`). The indigo
   theme's #EEF2FF reads as basically white; the legacy blue equivalent
   #e8eef5 was just blue enough to look like a deliberate tint behind the
   main content. Flatten it to pure white in legacy mode so the hero sits
   on a clean background. ---- */
.from-primary-50  { --tw-gradient-from: #ffffff var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-primary-600 { --tw-gradient-from: #19589b var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(25 88 155 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-indigo-50     { --tw-gradient-to: #fff5e6 var(--tw-gradient-to-position) !important; }
/* #cf7505 is the WCAG-safe orange (3.27:1 vs white at the "large text"
   threshold). Used in the hero "Unified." gradient and the nav wordmark
   gradient below so both stay matched. */
.to-indigo-500    { --tw-gradient-to: #cf7505 var(--tw-gradient-to-position) !important; }

/* ---- Nav primary Login button: no override needed.
        The bg-primary-600 → #19589b mapping above already gives the nav
        Login button the legacy brand blue (7.19:1 against white text →
        passes WCAG AAA). Brand blue also lets the hero Login keep the
        attention-grabbing orange while the nav stays calm and on-brand.
        ---- */

/* ---- Accent orange touches.
        Brighter orange (#cf7505 ≈ 3.27:1 against white) for the hero Login
        button. That ratio passes WCAG only at the "large text" threshold
        (3:1) — qualified by bumping the button text to 20px/bold below.
        Hover darkens to #a85e00 (the previous "safe" orange — still passes
        4.5:1 for normal text if the user pauses on it). ---- */
body[data-page="home"] section a.bg-primary-600[href="/login"],
body[data-page="home"] section a.bg-primary-600[href="/signup"] {
    background-color: #cf7505 !important;
}
body[data-page="home"] section a.bg-primary-600[href="/login"]:hover,
body[data-page="home"] section a.bg-primary-600[href="/signup"]:hover {
    background-color: #a85e00 !important;
}
body[data-page="home"] section a.bg-primary-600[href="/login"] .shadow-primary-600\/20,
body[data-page="home"] section a.bg-primary-600[href="/signup"] .shadow-primary-600\/20 {
    --tw-shadow-color: rgba(207, 117, 5, 0.25) !important;
}

/* Bump font-size + weight so the button qualifies as WCAG "large text"
   (≥14pt bold or ≥18pt regular). 20px font-bold = 15pt bold — passes.
   That raises the orange button's contrast floor from 4.5:1 to 3:1,
   which the #cf7505 fill meets. */
html.legacy-theme body[data-page="home"] section a.bg-primary-600[href="/login"] {
    font-size: 1.25rem !important;   /* text-xl, 20px */
    font-weight: 700 !important;     /* bold (vs. semibold default) */
}

/* ---- Nav wordmark accent.
        Only the "im" portion gets the blue → orange gradient (matching the
        direction of the hero "Unified." word). "leagues" stays in the
        default neutral-900 so the gradient feels like a deliberate brand
        accent, not the whole word. ---- */
html.legacy-theme #nav-slot .brand-im {
    background: linear-gradient(to right, #19589b 0%, #cf7505 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

/* ---- Nav wordmark rotating suffix.
        Turns the "leagues" portion of the top-left brand into a clipped
        stack that rolls through what IMLeagues covers — leagues, fitness,
        clubs, facilities, equipment, memberships. "im" stays in the
        gradient defined above.

        Width is determined by the widest word ("memberships") so the
        rest of the nav doesn't shift while words change.

        WCAG 2.2.2: pauses on hover of the brand link (mouse) and on
        focus-within (keyboard tab). prefers-reduced-motion stops it
        entirely. Mobile touch users without the OS preference set
        will see continuous motion — small peripheral nav animation
        accepted by the platform's common patterns. ---- */
/* Each row is 1.25em tall — 1em for cap-height to baseline, plus ~0.25em
   underneath for descenders (g/p/q/y). Without that extra space the
   font's descenders bleed past the mask and you see letter bottoms
   peeking through during transitions. Animation translates in 1.25em
   steps to match. */
html.legacy-theme .brand-leagues {
    display: inline-block;
    overflow: hidden;
    height: 1.25em;
    line-height: 1.25em;
    vertical-align: -0.18em; /* pull the mask down so its baseline lines up with "im" */
}
html.legacy-theme .brand-leagues .bl-stack {
    display: flex;
    flex-direction: column;
    animation: nav-roll 21s infinite;
}
html.legacy-theme .brand-leagues .bl-stack > span {
    display: block !important; /* overrides the inline display:none */
    height: 1.25em;
    line-height: 1.25em;
    white-space: nowrap;
    text-align: left;
}

@keyframes nav-roll {
    /* 7 unique words, ~2s hold + ~1s smooth transition each. 8th span
       is a duplicate of "leagues" so the loop returns smoothly. */
    0%, 9.5%       { transform: translateY(0em); }     /* leagues */
    14.3%, 23.8%   { transform: translateY(-1.25em); } /* fitness */
    28.6%, 38%     { transform: translateY(-2.5em); }  /* clubs */
    42.8%, 52.4%   { transform: translateY(-3.75em); } /* facilities */
    57.1%, 66.7%   { transform: translateY(-5em); }    /* equipment */
    71.4%, 81%     { transform: translateY(-6.25em); } /* memberships */
    85.7%, 95.2%   { transform: translateY(-7.5em); }  /* everything */
    100%           { transform: translateY(-8.75em); } /* leagues (loop) */
}

/* Pause when user hovers or focuses the brand link — satisfies WCAG
   2.2.2 for keyboard + mouse. Touch users without prefers-reduced-motion
   see continuous motion (a common compromise for peripheral nav animation). */
html.legacy-theme #nav-slot a[href="/"]:hover .bl-stack,
html.legacy-theme #nav-slot a[href="/"]:focus-within .bl-stack {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    html.legacy-theme .brand-leagues .bl-stack { animation: none !important; }
}

/* ---- Hero wordmark on the home page.
        Hidden by default via inline display:none on the .legacy-hero-logo
        div in index.html / index2.html. Legacy mode flips it on and gives
        it a prominent centered placement above the stat pill, echoing the
        old /spa/portal/home hero. ---- */
html.legacy-theme .legacy-hero-logo {
    display: block !important;
    margin: 0 auto 28px;
    text-align: center;
}
html.legacy-theme .legacy-hero-logo img {
    margin: 0 auto;
    max-width: 360px;
    width: 65%;
    height: auto;
}
@media (max-width: 640px) {
    html.legacy-theme .legacy-hero-logo img {
        width: 75%;
        max-width: 280px;
    }
}

/* ---- Subtle theme-swap indicator at the corner ---- */
.legacy-theme-badge {
    position: fixed; bottom: 16px; left: 16px;
    background: #19589b; color: #fff;
    padding: 6px 12px; border-radius: 999px;
    font: 600 12px/1 system-ui, sans-serif;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    z-index: 9999;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
}
.legacy-theme-badge:hover { background: #144478; }
.legacy-theme-badge::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%; background: #ed9118;
}