/*
 * ============================================================
 *  wj26.css  —  Ware Joggers website stylesheet
 *  Complements Bootstrap 5.3
 *  Created: 24 Feb 2026  |  Shu Pillinger
 *
 *  SECTION ORDER (mirrors site navigation):
 *
 *   1.  CSS Custom Properties & Global Reset
 *   2.  Global / Shared Components
 *       2a. Navigation (navbar)
 *       2b. Hero bars (slim red banner used site-wide)
 *       2c. Split hero layout (image + text panels)
 *       2d. Full-width hero image block (index only)
 *       2e. Page panels (alternating content sections)
 *       2f. Shared buttons
 *       2g. Shared cards & lists
 *       2h. FAQ accordion
 *       2i. CTA band
 *       2j. Footer
 *       2k. Tap-to-expand (shared mobile table rows)
 *   3.  Home (index.php)
 *   4.  Club
 *       4a. About / General (info-card, location-card, stat-card)
 *       4b. Committee
 *       4c. Honours Board
 *   5.  Training
 *       5a. Calendar
 *       5b. Coaches
 *       5c. Sessions
 *   6.  Racing
 *       6a. Championship (shared layout, table, leaderboard)
 *       6b. Races in Club Vest / Colours (shared layout, leaderboard, results)
 *       6c. Club Records
 *   7.  News
 *   8.  Members' Area  (placeholder — styles currently inline in members.php)
 *   9.  Other / Unclassified
 * ============================================================
 */


/* ============================================================
   1. CSS CUSTOM PROPERTIES & GLOBAL RESET
   ============================================================ */

:root {
    --wj-red:   #DC143C;
    --wj-dark:  #2c3e50;
    --wj-light: #ecf0f1;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html { scroll-behavior: smooth; }


/* ============================================================
   2. GLOBAL / SHARED COMPONENTS
   ============================================================ */

/* ── 2a. Navigation ─────────────────────────────────────────── */

.navbar {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.navbar-brand img {
    height: 50px;
}

/* Dropdown toggles styled as non-clickable top-level items */
.navbar-nav button.nav-link {
    background: none;
    border: none;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    cursor: default;
}

/* ── Mobile nav scrolling fix ──────────────────────────────── */
@media (max-width: 991.98px) {
    #navbarNav {
        max-height: calc(100dvh - 70px); /* 70px ≈ your navbar height */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* ── 2b. Hero bars (slim red banner used site-wide) ─────────── */

.hero-section {
    background: linear-gradient(135deg, var(--wj-red) 0%, #c41230 100%);
    color: white;
    padding: 28px 0 24px;
    margin-bottom: 0;
}

.hero-section h1 {
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.hero-section .lead {
    opacity: 0.95;
    font-size: 1.05rem;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .hero-section {
        padding: 20px 0 18px;
    }
    .hero-section h1 {
        font-size: 1.5rem;
    }
}


/* ── 2c. Split hero layout (image + text panels) ────────────── */
/*       Used on: About, Membership, Beginners, Colours, etc.   */

.split-hero {
    display: flex;
    min-height: 420px;
}

.split-hero-left {
    flex: 1 1 60%;
    background-color: var(--wj-dark);
    display: flex;
    align-items: center;
    padding: 60px 48px;
}

.split-hero-right {
    flex: 1 1 40%;
    background-color: var(--wj-red);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.split-hero-img {
    width: 65%;
    height: auto;
    display: block;
}

.split-hero-content {
    color: white;
    max-width: 600px;
}

.split-hero-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin-bottom: 16px;
}

.split-hero-content h1 {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.1;
    color: white;
    margin-bottom: 20px;
}

.split-hero-content p {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.8);
    margin-bottom: 28px;
    line-height: 1.65;
}

.split-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

/* Placeholder shown when image is missing */
.split-hero-placeholder {
    display: none;
    width: 100%;
    height: 100%;
    min-height: 320px;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(
        -45deg,
        rgba(255,255,255,0.06),
        rgba(255,255,255,0.06) 10px,
        rgba(255,255,255,0.10) 10px,
        rgba(255,255,255,0.10) 20px
    );
}

.split-hero-placeholder-inner {
    text-align: center;
    color: rgba(255,255,255,0.7);
}

.split-hero-placeholder-inner i {
    font-size: 3rem;
    display: block;
    margin-bottom: 12px;
    color: rgba(255,255,255,0.4);
}

.split-hero-placeholder-inner p {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.split-hero-placeholder-inner small {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}

@media (max-width: 992px) {
    .split-hero { flex-direction: column; }
    .split-hero-left,
    .split-hero-right { flex: none; width: 100%; }
    .split-hero-left  { padding: 48px 28px; }
    .split-hero-right { min-height: 280px; }
    .split-hero-content h1 { font-size: 2.4rem; }
}

@media (max-width: 576px) {
    .split-hero-content h1 { font-size: 2rem; }
}


/* ── 2d. Full-width hero image block (index.php only) ────────── */

.hero-image-wrap {
    width: 100%;
    max-height: 480px;
    overflow: hidden;
    position: relative;
    margin-bottom: 48px;
    background: #e9ecef;
}

.hero-image {
    width: 100%;
    height: 480px;
    object-fit: cover;
    object-position: center 30%;
    display: block;
}

.hero-placeholder {
    display: none;
    width: 100%;
    height: 340px;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(
        -45deg,
        #e9ecef,
        #e9ecef 10px,
        #f8f9fa 10px,
        #f8f9fa 20px
    );
}

.hero-placeholder-inner {
    text-align: center;
    color: #6c757d;
}

.hero-placeholder-inner i {
    font-size: 3.5rem;
    display: block;
    margin-bottom: 12px;
    color: #adb5bd;
}

.hero-placeholder-inner p {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.hero-placeholder-inner small {
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .hero-image {
        height: 240px;
        object-position: center center;
    }
    .hero-placeholder {
        height: 200px;
    }
    .hero-image-wrap {
        max-height: 240px;
        margin-bottom: 28px;
    }
}


/* ── 2e. Page panels (alternating content sections) ─────────── */
/*        Used on: About, Membership, Beginners, Colours, etc.  */

.page-panels {
    margin-bottom: 0;
}

.page-panel {
    padding: 72px 0;
}

.page-panel-light {
    background: #fff;
}

.page-panel-dark {
    background: var(--wj-dark);
}

.panel-split {
    display: flex;
    align-items: center;
    gap: 64px;
}

.panel-split-reverse {
    flex-direction: row-reverse;
}

.panel-split-text {
    flex: 1 1 55%;
}

.panel-split-visual {
    flex: 1 1 40%;
    border-radius: 8px;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.panel-heading {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--wj-dark);
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 14px;
}

.panel-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--wj-red);
}

.panel-heading-light  { color: white; }
.panel-heading-light::after { background: rgba(255,255,255,0.5); }

.panel-split-text p {
    color: #555;
    line-height: 1.75;
    margin-bottom: 16px;
}

.page-panel-dark .panel-split-text p {
    color: rgba(255,255,255,0.75);
}

/* Visual accent panels */
.panel-visual-red   { background: #FCEBEB; }
.panel-visual-green { background: #EAF6F0; }

.panel-visual-inner {
    padding: 36px 32px;
    text-align: center;
}

.panel-visual-icon {
    font-size: 2.5rem;
    color: var(--wj-red);
    margin-bottom: 18px;
    display: block;
}

.panel-visual-quote {
    font-size: 0.95rem;
    color: var(--wj-dark);
    line-height: 1.65;
    font-style: italic;
    margin: 0;
}

/* Price badge (dark panel) */
.panel-visual-price {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
}

.price-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.price-badge-amount {
    font-size: 4.5rem;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.price-badge-label {
    font-size: 1rem;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 8px;
}

/* Checklist (dark panel) */
.panel-list-light {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.panel-list-light li {
    padding: 10px 0 10px 28px;
    position: relative;
    color: rgba(255,255,255,0.8);
    font-size: 0.95rem;
    line-height: 1.55;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.panel-list-light li:last-child { border-bottom: none; }

.panel-list-light li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #5DCAA5;
    font-weight: 700;
}

.panel-list-light em {
    color: rgba(255,255,255,0.5);
    font-style: normal;
    font-size: 0.85em;
}

.panel-value-note {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
    margin-top: 8px;
}

/* Arrow list (light panel) */
.panel-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.panel-list li {
    padding: 10px 0 10px 28px;
    position: relative;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.55;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}

.panel-list li:last-child { border-bottom: none; }

.panel-list li::before {
    content: "›";
    position: absolute;
    left: 0;
    color: var(--wj-red);
    font-weight: 700;
    font-size: 1.3em;
    line-height: 1.2;
}

/* Kit / checklist items (light panel) */
.kit-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 20px;
}

.kit-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.kit-item i {
    color: var(--wj-red);
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.kit-item span {
    color: #444;
    font-size: 0.95rem;
    line-height: 1.5;
}

.kit-item em {
    color: #888;
    font-style: normal;
}

/* Highlight cards row */
.highlight-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 0;
}

.highlight-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
    border-right: 1px solid #e8e8e8;
    background: white;
}

.highlight-card:last-child { border-right: none; }

.highlight-card i {
    font-size: 1.5rem;
    color: var(--wj-red);
    margin-bottom: 10px;
}

.highlight-card strong {
    font-size: 0.9rem;
    color: var(--wj-dark);
    display: block;
    margin-bottom: 5px;
}

.highlight-card span {
    font-size: 0.8rem;
    color: #7f8c8d;
    line-height: 1.45;
}

@media (max-width: 992px) {
    .panel-split,
    .panel-split-reverse { flex-direction: column; gap: 32px; }
    .panel-split-visual  { width: 100%; min-height: 180px; }
    .highlight-cards     { grid-template-columns: repeat(2, 1fr); }
    .highlight-card:nth-child(2) { border-right: none; }
    .highlight-card:nth-child(3) { border-top: 1px solid #e8e8e8; }
    .highlight-card:nth-child(4) { border-top: 1px solid #e8e8e8; border-right: none; }
}

@media (max-width: 576px) {
    .page-panel { padding: 48px 0; }
    .highlight-cards { grid-template-columns: 1fr; }
    .highlight-card  { border-right: none; border-bottom: 1px solid #e8e8e8; }
    .highlight-card:nth-child(3),
    .highlight-card:nth-child(4) { border-top: none; }
    .highlight-card:nth-child(4) { border-bottom: none; }
}


/* ── 2f. Shared buttons ──────────────────────────────────────── */

.btn-wj-primary {
    background-color: var(--wj-red);
    border-color: var(--wj-red);
    color: white;
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-wj-primary:hover {
    background-color: #c41230;
    border-color: #c41230;
    color: white;
    transform: scale(1.05);
}

.btn-wj-outline {
    border: 2px solid var(--wj-red);
    color: var(--wj-red);
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-wj-outline:hover {
    background-color: var(--wj-red);
    color: white;
}

/* Split-hero CTA button */
.btn-split-cta {
    display: inline-block;
    background: white;
    color: var(--wj-dark);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 14px 28px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
    letter-spacing: 0.02em;
}

.btn-split-cta:hover {
    background: var(--wj-light);
    transform: translateY(-2px);
    color: var(--wj-dark);
    text-decoration: none;
}

/* CTA band buttons */
.btn-cta-white {
    display: inline-block;
    background: white;
    color: var(--wj-red);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 14px 28px;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s ease;
}

.btn-cta-white:hover {
    background: var(--wj-light);
    color: var(--wj-red);
    text-decoration: none;
}

.btn-cta-ghost {
    display: inline-block;
    border: 1.5px solid rgba(255,255,255,0.5);
    color: white;
    font-size: 0.85rem;
    padding: 12px 28px;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.btn-cta-ghost:hover {
    border-color: white;
    background: rgba(255,255,255,0.1);
    color: white;
    text-decoration: none;
}

/* Filter / reset buttons — used across racing pages */
.btn-wj-filter {
    background: var(--wj-red);
    border: none;
    color: #fff;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 8px 24px;
    transition: background 0.2s, transform 0.2s;
}

.btn-wj-filter:hover {
    background: #c41230;
    transform: scale(1.03);
    color: #fff;
}

.btn-wj-reset {
    background: transparent;
    border: 2px solid var(--wj-red);
    color: var(--wj-red);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 18px;
    transition: all 0.2s;
}

.btn-wj-reset:hover {
    background: var(--wj-red);
    color: #fff;
}

@media (max-width: 992px) {
    .btn-cta-white,
    .btn-cta-ghost { width: 100%; }
}


/* ── 2g. Shared cards & lists ────────────────────────────────── */

/* Info card — used on Home, About, Members pages */
.info-card {
    background: white;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    border-left: 4px solid var(--wj-red);
}

.info-card h3 {
    color: var(--wj-red);
    margin-bottom: 20px;
    font-weight: 600;
}

.info-card ul {
    list-style: none;
    padding-left: 0;
}

.info-card ul li {
    padding: 8px 0 8px 30px;
    position: relative;
}

.info-card ul li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--wj-red);
    font-weight: bold;
    font-size: 1.2rem;
}

/* Location card */
.location-card {
    background: var(--wj-light);
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 30px;
}

.location-card h4 {
    color: var(--wj-dark);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.location-card h4 i {
    color: var(--wj-red);
    font-size: 1.5rem;
}

/* Section title with red underline */
.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--wj-dark);
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 15px;
}

.section-title:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background-color: var(--wj-red);
}

/* FAQ section card */
/* NOTE: .faq-card uses same pattern as .info-card — candidate for consolidation */
.faq-card {
    background: white;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    border-left: 4px solid var(--wj-red);
}

.faq-card h3 {
    color: var(--wj-red);
    margin-bottom: 20px;
    font-weight: 600;
}


/* ── 2h. FAQ accordion ───────────────────────────────────────── */

.faq-accordion .accordion-item {
    border: none;
    border-bottom: 1px solid #e9ecef;
    border-radius: 0 !important;
}

.faq-accordion .accordion-item:last-child { border-bottom: none; }

.faq-accordion .accordion-button {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wj-dark);
    background: white;
    padding: 12px 40px 12px 0;
    box-shadow: none;
}

.faq-accordion .accordion-button:not(.collapsed) {
    color: var(--wj-red);
    background: white;
    box-shadow: none;
}

.faq-accordion .accordion-button::after,
.faq-accordion .accordion-button:not(.collapsed)::after { filter: none; }

.faq-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.faq-accordion .accordion-body {
    font-size: 0.875rem;
    color: #555;
    padding: 0 0 12px 0;
    line-height: 1.6;
}

.faq-accordion .accordion-body a {
    color: var(--wj-red);
    text-decoration: none;
}

.faq-accordion .accordion-body a:hover { text-decoration: underline; }

.faq-section {
    background: #f7f7f5;
    padding: 72px 0;
}

.faq-section-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--wj-dark);
    margin-bottom: 40px;
    text-align: center;
}


/* ── 2i. CTA band ────────────────────────────────────────────── */

.cta-band {
    background: var(--wj-red);
    padding: 64px 0;
}

.cta-band-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.cta-band-text h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
    margin-bottom: 10px;
}

.cta-band-text p {
    color: rgba(255,255,255,0.8);
    max-width: 520px;
    line-height: 1.65;
    margin: 0;
}

.cta-band-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}

@media (max-width: 992px) {
    .cta-band-inner  { flex-direction: column; text-align: center; }
    .cta-band-text p { max-width: 100%; }
    .cta-band-actions { width: 100%; }
}


/* ── 2j. Footer ──────────────────────────────────────────────── */

footer {
    background-color: var(--wj-dark);
    color: white;
    padding: 40px 0 20px;
    margin-top: 60px;
}

footer a { color: white; text-decoration: none; }
footer a:hover { color: var(--wj-red); }




/* ── 2k. Tap-to-expand (shared mobile table rows) ───────────
   Used on: champ-results, colours-leaderboard, colours-results,
            records, members
   ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .expandable-row { cursor: pointer; }
    .expandable-row.is-expanded > td:last-child { border-bottom: none; }
    .expand-indicator {
        display: inline-block;
        font-size: 0.65rem;
        color: #999;
        margin-left: 4px;
        transition: transform 0.2s ease;
        vertical-align: middle;
    }
    .expandable-row.is-expanded .expand-indicator { transform: rotate(180deg); color: var(--wj-red); }
    tr.expand-detail-row td {
        padding: 6px 10px 10px 10px;
        background: #f8f8f8;
        border-top: none;
    }
    tr.expand-detail-row .expand-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 12px;
    }
    tr.expand-detail-row .expand-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 40px;
    }
    tr.expand-detail-row .expand-item .expand-label {
        font-size: 0.65rem;
        color: #888;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    tr.expand-detail-row .expand-item .expand-val {
        font-size: 0.9rem;
        font-weight: 600;
        color: #222;
    }
    /* Race-link variant used in champ-leaderboards expand rows */
    tr.expand-detail-row .expand-item .expand-val a.expand-race-link {
        color: var(--wj-red);
        text-decoration: none;
        font-weight: 700;
    }
}
@media (min-width: 768px) {
    .expand-indicator { display: none !important; }
    tr.expand-detail-row { display: none !important; }
}

/* ============================================================
   3. HOME (index.php)
   ============================================================ */

/* Stat cards */
.stat-card {
    text-align: center;
    padding: 30px 20px;
    border-radius: 10px;
    background: white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    transition: transform 0.3s ease;
}

.stat-card:hover { transform: translateY(-5px); }

.stat-card i {
    font-size: 3rem;
    color: var(--wj-red);
    margin-bottom: 15px;
}

.stat-card h3 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--wj-dark);
    margin-bottom: 5px;
}

.stat-card p {
    color: #7f8c8d;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .stat-card { margin-bottom: 20px; }
}

/* Instagram section */
.instagram-section {
    background: linear-gradient(135deg, #f9f1f4 0%, #fdf6f9 100%);
    padding: 60px 0 64px;
    margin-top: 20px;
    border-top: 1px solid #f0dde6;
}

.instagram-section-title {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--wj-dark);
    margin-bottom: 10px;
}

.instagram-section-title i { color: #E1306C; }

.instagram-section-sub {
    color: #6c757d;
    font-size: 1rem;
    margin-bottom: 0;
}

.instagram-section-sub a {
    color: #E1306C;
    font-weight: 600;
    text-decoration: none;
}

.instagram-section-sub a:hover { text-decoration: underline; }

.instagram-section behold-widget {
    display: block;
    width: 100%;
}

.btn-instagram {
    background-color: #E1306C;
    border-color: #E1306C;
    color: white;
    padding: 14px 36px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-instagram:hover {
    background-color: #c0255a;
    border-color: #c0255a;
    color: white;
    transform: scale(1.04);
}


/* ============================================================
   4. CLUB
   ============================================================ */

/* ── 4a. About / General ─────────────────────────────────────── */
/*        .info-card, .location-card, .section-title are in 2g  */


/* ── 4b. Committee ───────────────────────────────────────────── */

.committee-jump-nav {
    background: var(--wj-dark);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.committee-jump-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.committee-jump-list::-webkit-scrollbar { display: none; }

.committee-jump-link {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 13px 22px;
    color: rgba(255,255,255,0.72);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.committee-jump-link i { font-size: 0.95rem; }

.committee-jump-link:hover {
    color: white;
    background: rgba(255,255,255,0.07);
    text-decoration: none;
}

.committee-jump-link.active {
    color: white;
    border-bottom-color: var(--wj-red);
}

.committee-main {
    padding-top: 48px;
    padding-bottom: 20px;
}

.committee-section {
    margin-bottom: 56px;
    scroll-margin-top: 56px;
}

.committee-section-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--wj-dark);
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--wj-red);
    display: inline-block;
}

.committee-col        { flex: 0 0 20%; max-width: 20%; }

.committee-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.09);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.committee-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.13);
}

.committee-card--honorary { border: 2px solid #c9a84c; }

.committee-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--wj-light);
}

.committee-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.4s ease;
}

.committee-card:hover .committee-img { transform: scale(1.04); }

.committee-img-placeholder {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: #e9ecef;
    color: #adb5bd;
    font-size: 4rem;
}

.committee-role-badge {
    position: absolute;
    bottom: 10px; left: 10px; right: 10px;
    background: var(--wj-red);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 5px 10px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    transition: background 0.2s ease, transform 0.15s ease;
    text-align: left;
    line-height: 1.3;
}

.committee-role-badge:hover          { background: #b01030; transform: translateY(-1px); }
.committee-role-badge:focus-visible   { outline: 2px solid white; outline-offset: 2px; }

.committee-role-badge--plain {
    position: absolute;
    bottom: 10px; left: 10px; right: 10px;
    background: var(--wj-dark);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 5px 10px;
    border-radius: 20px;
    display: block;
    text-align: center;
    cursor: default;
    line-height: 1.3;
}

.committee-role-badge--gold {
    position: absolute;
    bottom: 10px; left: 10px; right: 10px;
    background: linear-gradient(135deg, #c9a84c 0%, #e8c96a 50%, #c9a84c 100%);
    color: #3a2800;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 5px 10px;
    border-radius: 20px;
    display: block;
    text-align: center;
    cursor: default;
    line-height: 1.3;
}

.committee-body {
    padding: 14px 14px 16px;
    flex: 1;
}

.committee-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--wj-dark);
    margin-bottom: 6px;
    line-height: 1.3;
}

.committee-email {
    font-size: 0.72rem;
    color: var(--wj-red);
    text-decoration: none;
    word-break: break-all;
    display: flex;
    align-items: flex-start;
    gap: 5px;
    line-height: 1.4;
}

.committee-email i { flex-shrink: 0; margin-top: 2px; }
.committee-email:hover { text-decoration: underline; color: #b01030; }

.committee-email--muted {
    color: #999;
    font-size: 0.72rem;
    display: flex;
    align-items: flex-start;
    gap: 5px;
    line-height: 1.4;
}

.committee-email--muted i { flex-shrink: 0; margin-top: 2px; }

.committee-modal-header            { background: var(--wj-dark); color: white; }
.committee-modal-header .modal-title { font-size: 1rem; font-weight: 700; }

.committee-modal-body {
    font-size: 0.9rem;
    color: #444;
    line-height: 1.65;
}

.committee-modal-body ul,
.committee-modal-body ol { padding-left: 1.4rem; margin-bottom: 1rem; }
.committee-modal-body li { margin-bottom: 6px; }

.committee-modal-section {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--wj-red);
    margin-bottom: 10px;
    margin-top: 20px;
    border-bottom: 1px solid #f0dde6;
    padding-bottom: 6px;
}

.committee-modal-poem {
    font-style: italic;
    color: #555;
    line-height: 1.9;
    border-left: 3px solid var(--wj-red);
    padding-left: 18px;
    margin-bottom: 16px;
}

.committee-modal-attribution {
    font-size: 0.85rem;
    color: #888;
    text-align: right;
}

@media (max-width: 1199px) { .committee-col { flex: 0 0 25%; max-width: 25%; } }
@media (max-width: 991px)  { .committee-col { flex: 0 0 33.333%; max-width: 33.333%; } }
@media (max-width: 767px)  { .committee-col { flex: 0 0 50%; max-width: 50%; } }
@media (max-width: 576px) {
    .committee-jump-link { padding: 10px 14px; font-size: 0.78rem; }
    .committee-name      { font-size: 0.83rem; }
    .committee-body      { padding: 10px 10px 12px; }
}


/* ── 4c. Honours Board ───────────────────────────────────────── */

.honours-hero {
    display: flex;
    min-height: 380px;
}

.honours-hero-left {
    flex: 1 1 50%;
    background-color: var(--wj-dark);
    display: flex;
    align-items: center;
    padding: 60px 48px;
}

.honours-hero-right {
    flex: 1 1 50%;
    background-color: var(--wj-red);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
}

.honours-hero-content        { color: white; max-width: 480px; }

.honours-hero-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin-bottom: 16px;
}

.honours-hero-content h1 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
    color: white;
    margin-bottom: 16px;
}

.honours-hero-sub {
    font-size: 1rem;
    color: rgba(255,255,255,0.75);
    margin-bottom: 0;
    line-height: 1.65;
}

.honours-trophy-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    align-items: stretch;
    width: 100%;
}

.honours-trophy-card {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 10px;
    padding: 18px 16px;
    flex: 1 1 120px;
    max-width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.honours-trophy-icon {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 4px;
    flex-shrink: 0;
}

.honours-trophy-icon--gold   { background: linear-gradient(135deg, #c9a84c 0%, #e8c96a 50%, #c9a84c 100%); color: #3a2800; }
.honours-trophy-icon--silver { background: linear-gradient(135deg, #8a9bb0 0%, #b8c8d8 50%, #8a9bb0 100%); color: #1a2a38; }
.honours-trophy-icon--bronze { background: linear-gradient(135deg, #8b5e3c 0%, #c48a5f 50%, #8b5e3c 100%); color: #fff; }

.honours-trophy-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}

.honours-trophy-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: white;
    line-height: 1.35;
}

.honours-main {
    padding-top: 52px;
    padding-bottom: 20px;
}

.honours-section {
    margin-bottom: 60px;
    scroll-margin-top: 56px;
}

.honours-section-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--wj-dark);
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--wj-red);
    display: inline-block;
}

.honours-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.09);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.honours-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.13);
}

.honours-card--gold   { border: 2px solid #c9a84c; }
.honours-card--blue   { border: 2px solid #3a6ea5; }
.honours-card--teal   { border: 2px solid #2a8a7a; }
.honours-card--red    { border: 2px solid var(--wj-red); }
.honours-card--bronze { border: 2px solid #8b5e3c; }

.honours-icon-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

.honours-icon-wrap--gold   { background: linear-gradient(160deg, #fdf6e3 0%, #f5e8b8 100%); color: #a07820; }
.honours-icon-wrap--blue   { background: linear-gradient(160deg, #eaf0f8 0%, #c5d8ef 100%); color: #2a5080; }
.honours-icon-wrap--teal   { background: linear-gradient(160deg, #e5f5f2 0%, #b8e0da 100%); color: #1e6e60; }
.honours-icon-wrap--red    { background: linear-gradient(160deg, #fceef1 0%, #f5c0cb 100%); color: var(--wj-red); }
.honours-icon-wrap--bronze { background: linear-gradient(160deg, #f5ede7 0%, #e0c4ab 100%); color: #6b3d1e; }
.honours-icon-wrap--compact { aspect-ratio: unset; padding: 18px 0 46px; min-height: unset; }

.honours-badge {
    position: absolute;
    bottom: 10px; left: 10px; right: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 5px 10px;
    border-radius: 20px;
    display: block;
    text-align: center;
    cursor: default;
    line-height: 1.3;
}

.honours-badge--gold   { background: linear-gradient(135deg,#c9a84c 0%,#e8c96a 50%,#c9a84c 100%); color: #3a2800; }
.honours-badge--blue   { background: #3a6ea5; color: white; }
.honours-badge--teal   { background: #2a8a7a; color: white; }
.honours-badge--red    { background: var(--wj-red); color: white; }
.honours-badge--bronze { background: linear-gradient(135deg,#8b5e3c 0%,#c48a5f 50%,#8b5e3c 100%); color: white; }

.honours-body {
    padding: 14px 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.honours-name   { font-size: 0.92rem; font-weight: 700; color: var(--wj-dark); margin: 0; line-height: 1.3; }
.honours-meta   { font-size: 0.78rem; color: #888; margin: 0; line-height: 1.35; }
.honours-result { font-size: 0.8rem; color: #555; margin: 0; line-height: 1.4; }
.honours-result strong { color: var(--wj-dark); }

.honours-captains-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.honours-list-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.09);
    height: 100%;
}

.honours-list-header {
    padding: 14px 18px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
}

.honours-list-header--blue { background: #3a6ea5; }
.honours-list-header--teal { background: #2a8a7a; }

.honours-list-body { padding: 6px 0; }

.honours-list-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 18px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.88rem;
    color: #444;
}

.honours-list-row:last-child { border-bottom: none; }

.honours-list-row--current {
    background: #f5f9f5;
    font-weight: 600;
    color: var(--wj-dark);
}

.honours-list-year {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: #aaa;
    min-width: 90px;
}

.honours-list-row--current .honours-list-year { color: #2a8a7a; }

@media (max-width: 991px) {
    .honours-hero { flex-direction: column; }
    .honours-hero-left,
    .honours-hero-right   { flex: none; width: 100%; }
    .honours-hero-left    { padding: 44px 28px; }
    .honours-hero-right   { padding: 36px 24px; min-height: 240px; }
    .honours-hero-content h1 { font-size: 2.2rem; }
    .honours-trophy-grid  { justify-content: flex-start; }
    .honours-trophy-card  { max-width: none; flex: 1 1 130px; }
}

@media (max-width: 576px) {
    .honours-trophy-card { flex: 1 1 100%; max-width: none; flex-direction: row; text-align: left; }
    .honours-trophy-icon { margin-bottom: 0; }
    .honours-hero-left   { padding: 36px 20px; }
    .honours-hero-right  { padding: 28px 20px; }
    .honours-captains-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ── Photo card (President, Treasurer, Member of the Year sections) ─ */
.honours-photo-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.09);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.honours-photo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.13);
}
.honours-photo-card--gold { border: 2px solid #c9a84c; }

.honours-photo-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: linear-gradient(160deg, #fdf6e3 0%, #f5e8b8 100%);
}
.honours-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.honours-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #a07820;
    font-size: 2.8rem;
    gap: 6px;
}
.honours-photo-placeholder small {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #b89030;
}

.honours-photo-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 5px 10px;
    border-radius: 20px;
    text-align: center;
    line-height: 1.3;
    background: linear-gradient(135deg,#c9a84c 0%,#e8c96a 50%,#c9a84c 100%);
    color: #3a2800;
}

.honours-photo-body {
    padding: 14px 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.honours-photo-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--wj-dark);
    margin: 0;
    line-height: 1.3;
}
.honours-photo-meta {
    font-size: 0.78rem;
    color: #888;
    margin: 0;
    line-height: 1.35;
}

/* 5-across column layout — mirrors .committee-col */
.honours-hon-col { flex: 0 0 20%; max-width: 20%; }
@media (max-width: 1199px) { .honours-hon-col { flex: 0 0 25%; max-width: 25%; } }
@media (max-width: 991px)  { .honours-hon-col { flex: 0 0 33.333%; max-width: 33.333%; } }
@media (max-width: 767px)  { .honours-hon-col { flex: 0 0 50%; max-width: 50%; } }

/* Explanatory note below section titles */
.honours-section-note {
    font-size: 0.83rem;
    color: #777;
    margin: -10px 0 18px;
    font-style: italic;
}



/* ============================================================
   5. TRAINING
   ============================================================ */

/* ── 5a. Calendar ────────────────────────────────────────────── */

.calendar-main  { padding-top: 40px; }

.calendar-intro {
    color: #555;
    line-height: 1.75;
    font-size: 0.97rem;
    margin-bottom: 0;
}

.calendar-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.09);
    overflow: hidden;
    border: 1px solid #e8e8e8;
}

.calendar-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--wj-dark);
    color: white;
    flex-wrap: wrap;
    gap: 8px;
}

.calendar-card-label { font-weight: 600; font-size: 0.92rem; letter-spacing: 0.01em; }
.calendar-card-tz    { font-size: 0.82rem; opacity: 0.7; }

.calendar-embed-wrap {
    background: #fff;
    line-height: 0;
}

.calendar-embed-wrap iframe {
    display: block;
    width: 100%;
    min-height: 500px;
}

.cal-info-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    height: 100%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.07);
    border-left: 4px solid var(--wj-red);
}

.cal-info-card i      { font-size: 1.5rem; color: var(--wj-red); flex-shrink: 0; margin-top: 2px; }
.cal-info-card strong { display: block; color: var(--wj-dark); font-size: 0.95rem; margin-bottom: 5px; }
.cal-info-card p      { font-size: 0.85rem; color: #6c757d; margin: 0; line-height: 1.55; }

@media (max-width: 576px) {
    .calendar-card-header { flex-direction: column; align-items: flex-start; }
    .calendar-embed-wrap iframe { min-height: 420px; height: 420px; }
}


/* ── 5b. Coaches ─────────────────────────────────────────────── */

.coaches-intro-strip {
    background: var(--wj-light);
    border-bottom: 1px solid #dde1e3;
    padding: 18px 0;
    font-size: 0.92rem;
    color: #555;
}

.coaches-intro-strip a             { color: var(--wj-red); text-decoration: none; font-weight: 600; }
.coaches-intro-strip a:hover       { text-decoration: underline; }

.coaches-main { padding-top: 48px; padding-bottom: 20px; }

.coach-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.09);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.coach-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.13);
}

.coach-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--wj-light);
}

.coach-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.4s ease;
}

.coach-card:hover .coach-img { transform: scale(1.04); }

.coach-img-placeholder {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: #e9ecef;
    color: #adb5bd;
    font-size: 4rem;
}

.coach-role-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: var(--wj-red);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 20px;
}

.coach-body   { padding: 20px 22px 24px; flex: 1; }
.coach-name   { font-size: 1.1rem; font-weight: 700; color: var(--wj-dark); margin-bottom: 10px; }
.coach-bio    { font-size: 0.875rem; color: #555; line-height: 1.65; margin: 0; }

.coaches-cta {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--wj-light);
    border-left: 4px solid var(--wj-red);
    border-radius: 10px;
    padding: 24px 28px;
    margin: 48px 0 60px;
    flex-wrap: wrap;
}

.coaches-cta-icon    { font-size: 2rem; color: var(--wj-red); flex-shrink: 0; }
.coaches-cta strong  { display: block; color: var(--wj-dark); font-size: 1rem; margin-bottom: 4px; }
.coaches-cta p       { font-size: 0.875rem; color: #6c757d; margin: 0; }

@media (max-width: 576px) {
    .coaches-cta { flex-direction: column; align-items: flex-start; gap: 14px; }
}




/* ── 5c. Sessions ────────────────────────────────────────────── */

/* Image strip — 3-column grid of session photos */
.session-image-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 2rem 0 2.5rem;
}

.session-image-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.session-image {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.session-image-placeholder {
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 6px;
    border: 2px dashed rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    padding: 1rem;
}

.session-image-placeholder i    { font-size: 2rem; opacity: 0.4; }
.session-image-placeholder span { font-size: 0.75rem; font-family: monospace; color: rgba(255,255,255,0.7); word-break: break-all; }
.session-image-placeholder small { font-size: 0.65rem; opacity: 0.5; }

.session-image-figure figcaption {
    margin-top: 6px;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.55);
    text-align: center;
    font-style: italic;
}

@media (max-width: 640px) {
    .session-image-strip { grid-template-columns: 1fr; }
}

@media (min-width: 641px) and (max-width: 900px) {
    .session-image-strip { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}


/* Light-panel overrides for image placeholders (advice.php dark-on-light panels) */
.advice-placeholder-light {
    border-color: rgba(0,0,0,0.15) !important;
    background: rgba(0,0,0,0.03) !important;
    color: rgba(0,0,0,0.4) !important;
}
.advice-placeholder-light i    { opacity: 0.3; }
.advice-placeholder-light span { color: rgba(0,0,0,0.55) !important; }

.advice-caption-light { color: rgba(0,0,0,0.45) !important; }

/* ============================================================
   6. RACING
   ============================================================ */

/* ── 6a. Championship ─────────────────────────────────────────── */

.champ-main { padding: 32px 0 60px; }

.champ-filter-card {
    background: #fff;
    border-radius: 12px;
    padding: 18px 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-left: 4px solid var(--wj-red);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.champ-filter-card .form-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0;
}

.champ-season-form { display: inline-flex; align-items: center; gap: 8px; }

/* Tab nav */
.champ-tab-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 24px; }

.champ-tab-nav a {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--wj-dark);
    background: #f0f0f0;
    transition: background 0.2s, color 0.2s;
}

.champ-tab-nav a:hover,
.champ-tab-nav a.active { background: var(--wj-red); color: #fff; }

/* Table card */
.champ-table-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 28px;
}

.champ-table-header {
    background: var(--wj-dark);
    color: #fff;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.champ-table-header h4 { margin: 0; font-size: 1rem; font-weight: 700; }

.champ-season-badge {
    background: var(--wj-red);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
}

/* Fixture status badges */
.badge-results { background: #d4edda; color: #155724; font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 12px; white-space: nowrap; }
.badge-signup  { background: #d1ecf1; color: #0c5460; font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 12px; white-space: nowrap; }
.badge-tbc     { background: #e2e3e5; color: #383d41; font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 12px; white-space: nowrap; }
.badge-closed  { background: #f8d7da; color: #721c24; font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 12px; white-space: nowrap; }

/* Results split layout */
.results-layout { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }

.results-race-list {
    flex: 0 0 220px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
}

.results-race-list-header {
    background: var(--wj-dark);
    color: #fff;
    padding: 12px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.results-race-list a {
    display: block;
    padding: 10px 14px;
    font-size: 0.82rem;
    color: var(--wj-dark);
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
    line-height: 1.35;
}

.results-race-list a:hover         { background: #fdf4f6; }
.results-race-list a.active        { background: var(--wj-red); color: #fff; }
.results-race-list a .race-meta    { font-size: 0.75rem; opacity: 0.75; margin-top: 2px; }
.results-race-list a.active .race-meta { opacity: 0.85; }

.results-detail { flex: 1 1 400px; min-width: 0; }

.results-prompt {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 40px 24px;
    text-align: center;
    color: #999;
}

.results-prompt i { font-size: 2.5rem; display: block; margin-bottom: 12px; color: #ccc; }

/* Championship leaderboard table */
.champ-table {
    width: 100%;
    font-size: 0.82rem;
    margin: 0;
}

.champ-table thead th {
    background: var(--wj-red);
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 9px 8px;
    border: none;
    white-space: nowrap;
    vertical-align: bottom;
}

.champ-table thead th.race-num-header {
    text-align: center;
    min-width: 30px;
    padding: 9px 4px;
    cursor: default;
}

.champ-table tbody tr              { border-bottom: 1px solid #f0f0f0; transition: background 0.15s; }
.champ-table tbody tr:hover        { background: #fdf4f6; }
.champ-table tbody td              { padding: 8px 8px; vertical-align: middle; color: var(--wj-dark); }
.champ-table tbody tr.division-row td {
    background: var(--wj-light);
    color: var(--wj-dark);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 7px 10px;
    border-top: 2px solid #dde1e3;
}

.champ-table tbody tr.trebles-team-start td { border-top: 3px solid var(--wj-red); }

.champ-table td.pos-cell  { font-weight: 700; color: var(--wj-red); width: 30px; text-align: center; }
.champ-table td.pts-cell  { font-weight: 700; width: 42px; text-align: center; }
.champ-table td.name-cell { font-weight: 600; }
.champ-table td.race-cell { text-align: center; color: #555; }
.champ-table td.aux-cell  { text-align: center; color: #666; }

/* Championship rules/terms table */
.champ-terms-table-wrap {
    background: #fff;
    border-radius: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-top: 28px;
}

.champ-terms-table {
    width: 100%;
    font-size: 0.875rem;
    margin: 0;
    border-collapse: collapse;
}

.champ-terms-table thead th {
    background: var(--wj-red);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 14px;
    border: none;
    white-space: nowrap;
}

.champ-terms-table thead th:nth-child(1) { width: 12%; }
.champ-terms-table thead th:nth-child(2) { width: 22%; }
.champ-terms-table thead th:nth-child(3) { width: auto; }

.champ-terms-table tbody tr            { border-bottom: 1px solid #f0f0f0; transition: background 0.15s; }
.champ-terms-table tbody tr:hover      { background: #fdf4f6; }
.champ-terms-table tbody td {
    padding: 10px 14px;
    vertical-align: top;
    color: var(--wj-dark);
    line-height: 1.55;
}
.champ-terms-table tbody td:first-child  { font-weight: 700; white-space: nowrap; }
.champ-terms-table tbody td:nth-child(2) { color: #777; font-style: italic; }

@media (max-width: 576px) {
    .champ-filter-card { padding: 14px 16px; }
    .results-layout    { flex-direction: column; }
    .results-race-list { flex: none; width: 100%; }
    .champ-table       { font-size: 0.78rem; }
    .champ-terms-table thead th,
    .champ-terms-table tbody td { padding: 8px 10px; }
    .champ-terms-table thead th { white-space: normal; }
    .champ-terms-table tbody td:first-child { white-space: normal; }
}


/* ── 6b. Races in Club Vest / Colours ───────────────────────── */

.colours-main { padding: 32px 0 60px; }

/* Shared tab nav */
/* NOTE: .colours-tab-nav and .champ-tab-nav are nearly identical —
   candidate for a single .wj-tab-nav utility class in future. */
.colours-tab-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 24px; }

.colours-tab-nav a {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--wj-dark);
    background: #f0f0f0;
    transition: background 0.2s, color 0.2s;
}

.colours-tab-nav a:hover,
.colours-tab-nav a.active { background: var(--wj-red); color: #fff; }

/* Filter card */
.colours-filter-card {
    background: #fff;
    border-radius: 12px;
    padding: 18px 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-left: 4px solid var(--wj-red);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.colours-filter-card .form-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0;
}

/* Leaderboard table card */
.colours-table-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 28px;
    max-width: 100%;
}

.colours-table-header {
    background: var(--wj-dark);
    color: #fff;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.colours-table-header h4 { margin: 0; font-size: 1rem; font-weight: 700; }

.colours-table {
    font-size: 0.875rem;
    border-collapse: collapse;
    table-layout: auto;
}

@media (min-width: 768px) { .colours-table { width: 100%; } }

.colours-table thead th {
    background: #f7f7f5;
    padding: 8px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #555;
    border-bottom: 2px solid #e9e9e9;
    white-space: nowrap;
}

.colours-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.colours-table tbody tr:last-child td { border-bottom: none; }
.colours-table tbody tr:hover          { background: #fafafa; }

/* Shared cell classes — also used by .champ-table in members.php */
.pos-cell      { font-weight: 700; color: var(--wj-dark); text-align: center; }
.pts-cell      { font-weight: 400; color: var(--wj-red);  text-align: center; }
.pts-cell-total { font-weight: 700; color: var(--wj-red); text-align: center; }
.name-cell a   { color: var(--wj-dark); text-decoration: none; font-weight: 600; }
.name-cell a:hover { color: var(--wj-red); text-decoration: underline; }
.link-cell a   { color: var(--wj-red); font-size: 0.8rem; word-break: break-all; text-decoration: none; }
.link-cell a:hover { text-decoration: underline; }

/* Search form */
.colours-search-form { display: inline-flex; align-items: center; gap: 8px; }

.colours-search-form input[type="text"] {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.875rem;
}

.colours-search-form .btn-search {
    background: var(--wj-red);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.colours-search-form .btn-search:hover { background: #c41230; }

/* Results table (full-width variant) */
.colours-results-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 28px;
}

.colours-results-table {
    width: 100%;
    font-size: 0.875rem;
    border-collapse: collapse;
    table-layout: auto;
}

.colours-results-table thead th {
    background: #f7f7f5;
    padding: 8px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #555;
    border-bottom: 2px solid #e9e9e9;
    white-space: nowrap;
}

.colours-results-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.colours-results-table tbody tr:last-child td { border-bottom: none; }
.colours-results-table tbody tr:hover          { background: #fafafa; }

/* Milestone achievement badges */
.milestone-badge {
    display: inline-block;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 20px;
    margin-left: 5px;
    vertical-align: middle;
}

.ms-25   { background: #7b2d8b; }
.ms-50   { background: #c0392b; }
.ms-75   { background: #e67e22; }
.ms-100  { background: #222222; }
.ms-150  { background: #5cb85c; }
.ms-200  { background: #27ae60; }
.ms-250  { background: #1a6b3c; }
.ms-300  { background: #5bc0de; }
.ms-400  { background: #2980b9; }
.ms-500  { background: #1a4f80; }
.ms-750  { background: #f5e96e; color: #555; }
.ms-1000 { background: #f1c40f; color: #555; }


/* ── 6c. Club Records ─────────────────────────────────────────── */

.records-main { padding: 40px 0 60px; }

.records-filter-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 32px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-left: 4px solid var(--wj-red);
}

.records-filter-card h5 {
    color: var(--wj-dark);
    font-weight: 700;
    margin-bottom: 16px;
    font-size: 1rem;
}

.records-filter-card .form-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.records-filter-card .form-select       { border-color: #dee2e6; font-size: 0.9rem; }
.records-filter-card .form-select:focus { border-color: var(--wj-red); box-shadow: 0 0 0 0.2rem rgba(220,20,60,0.15); }

.records-table-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.records-table-header {
    background: var(--wj-dark);
    color: #fff;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.records-table-header h4 { margin: 0; font-size: 1.05rem; font-weight: 700; }

.records-count-badge {
    background: var(--wj-red);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
}

.records-table {
    width: 100%;
    font-size: 0.875rem;
    margin: 0;
}

.records-table thead th {
    background: var(--wj-red);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 14px;
    border: none;
    white-space: nowrap;
}

.records-table tbody tr            { border-bottom: 1px solid #f0f0f0; transition: background 0.15s; }
.records-table tbody tr:hover      { background: #fdf4f6; }
.records-table tbody td            { padding: 10px 14px; vertical-align: middle; color: var(--wj-dark); }

.record-unset    { background: #fff8e1 !important; }
.record-unset td { color: #999 !important; font-style: italic; }

.unset-badge {
    display: inline-block;
    background: #ffe082;
    color: #795548;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}

.record-category-row td {
    background: var(--wj-light);
    color: var(--wj-dark);
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 7px 14px;
    border-top: 2px solid #dde1e3;
}

.records-empty {
    padding: 60px 24px;
    text-align: center;
    color: #999;
}

.records-empty i {
    font-size: 3rem;
    display: block;
    margin-bottom: 12px;
    color: #ccc;
}

@media (max-width: 576px) {
    .records-filter-card  { padding: 18px 16px; }
    .records-table-header { padding: 12px 16px; }
    .records-table thead th,
    .records-table tbody td { padding: 8px 10px; }
}


/* ============================================================
   7. NEWS
   ============================================================ */

.news-page-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 36px 16px 60px;
}

.news-page-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--wj-dark);
    margin-bottom: 8px;
    padding-bottom: 14px;
    position: relative;
}

.news-page-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background-color: var(--wj-red);
}

.news-accordion {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.news-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    border-left: 4px solid var(--wj-red);
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}

.news-card.open { box-shadow: 0 6px 18px rgba(0,0,0,0.13); }

.news-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.news-card-header:hover .news-card-title { color: var(--wj-red); }

.news-card-left { flex: 1; min-width: 0; }

.news-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wj-dark);
    margin: 0 0 4px 0;
    line-height: 1.3;
    transition: color 0.2s;
}

.news-card.open .news-card-title { color: var(--wj-red); }

.news-card-date {
    font-size: 0.8rem;
    color: #999;
    font-style: italic;
}

.news-card-chevron {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--wj-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.3s;
    color: var(--wj-dark);
    font-size: 0.85rem;
}

.news-card.open .news-card-chevron {
    background: var(--wj-red);
    color: white;
    transform: rotate(180deg);
}

.news-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    padding: 0 20px;
    border-top: 0px solid #f0f0f0;
}

.news-card.open .news-card-body {
    max-height: 3000px;
    padding: 0 20px 24px;
    border-top: 1px solid #f0f0f0;
    transition: max-height 0.5s ease, padding 0.3s ease;
}

/* Flex wrapper — only rendered when an image is present */
.news-card-content {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding-top: 16px;
}

.news-card-img {
    flex: 0 0 35%;
    max-width: 35%;
    width: 35%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    order: 2; /* image on right */
}

/* When there is no image the text fills the full width naturally */
.news-card-text {
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    color: #444;
    line-height: 1.75;
    order: 1;
}

.news-card-text p             { margin-bottom: 12px; }
.news-card-text p:last-child  { margin-bottom: 0; }

.news-card-back {
    display: inline-block;
    margin-top: 14px;
    font-size: 0.8rem;
    color: var(--wj-red);
    text-decoration: none;
}

.news-card-back:hover { text-decoration: underline; }

.news-empty {
    background: white;
    border-radius: 10px;
    padding: 40px 30px;
    text-align: center;
    color: #888;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    border-left: 4px solid var(--wj-red);
}

@media (max-width: 768px) {
    .news-card-content {
        flex-direction: column;
        gap: 12px;
    }
    .news-card-img {
        flex: none;
        max-width: 100%;
        width: 100%;
        aspect-ratio: 16 / 9;
        order: 1; /* image above text on mobile */
    }
    .news-card-text {
        order: 2;
    }
}


/* ============================================================
   8. MEMBERS' AREA
   ============================================================ */

/* ── Member info strip ─────────────────────────────────────── */
.members-info-strip {
    background: var(--wj-light);
    border-bottom: 1px solid #dde1e3;
    padding: 18px 0;
}
.members-info-inner {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}
.members-avatar {
    width: 110px; height: 110px;
    border-radius: 50%; object-fit: cover;
    border: 3px solid var(--wj-red); flex-shrink: 0;
}
.members-info-text { flex: 1; min-width: 0; }
.members-info-name { font-size: 1rem; font-weight: 700; color: var(--wj-dark); margin: 0 0 2px 0; }
.members-info-meta { font-size: 0.8rem; color: #6c757d; margin: 0; }

/* ── Info strip detail list ────────────────────────────────── */
.members-info-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    row-gap: 3px;
    margin: 8px 0 0 0;
    font-size: 0.8rem;
}

.members-info-dl dt {
    color: #888;
    font-weight: 600;
    white-space: nowrap;
}

.members-info-dl dt::after {
    content: ':';
}

.members-info-dl dd {
    color: var(--wj-dark);
    font-weight: 500;
    margin: 0;
}

/* ── Main content area ─────────────────────────────────────── */
.members-main { padding: 32px 0 60px; }

/* ── Section banner ────────────────────────────────────────── */
.members-banner {
    background: var(--wj-dark);
    color: #fff;
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.members-banner h4 { margin: 0; font-size: 1.05rem; font-weight: 700; }

/* ── Two-column layout ─────────────────────────────────────── */
.members-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.members-subnav-col { flex: 0 0 240px; width: 240px; }
.members-content-col { flex: 1; min-width: 0; }

/* ── Sub-nav cards ─────────────────────────────────────────── */
.members-subnav-list { display: flex; flex-direction: column; gap: 8px; }

.members-subnav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1.5px solid #e9ecef;
    border-left: 4px solid transparent;
    border-radius: 8px;
    padding: 12px 14px;
    text-decoration: none;
    color: var(--wj-dark);
    transition: all 0.18s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.members-subnav-item:hover {
    border-left-color: var(--wj-red);
    background: #fafafa;
    box-shadow: 0 3px 10px rgba(0,0,0,0.09);
    text-decoration: none;
    color: var(--wj-dark);
}
.members-subnav-item.active {
    background: var(--wj-red);
    border-left-color: var(--wj-red);
    color: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
.members-subnav-item.active .members-subnav-title { color: #fff; }
.members-subnav-item.active .members-subnav-sub { color: rgba(255,255,255,0.75); }
.members-subnav-item.active .members-subnav-icon { color: #fff; }

.members-subnav-icon {
    font-size: 1.15rem; color: var(--wj-red);
    flex-shrink: 0; width: 22px; text-align: center;
}
.members-subnav-text { flex: 1; min-width: 0; }
.members-subnav-title { display: block; font-size: 0.88rem; font-weight: 700; line-height: 1.2; }
.members-subnav-sub { display: block; font-size: 0.75rem; color: #888; margin-top: 2px; line-height: 1.3; }

.members-subnav-item.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    background: #f4f4f4;
    border-left-color: #ccc;
    box-shadow: none;
}
.members-subnav-item.disabled .members-subnav-icon { color: #aaa; }
.members-subnav-item.disabled .members-subnav-sub  { color: #bbb; }
.admin-lock {
    font-size: 0.75rem;
    color: #aaa;
    flex-shrink: 0;
    margin-left: 4px;
}

/* ── Content card ──────────────────────────────────────────── */
.members-card {
    background: #fff; border-radius: 12px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 24px;
}
.members-card-header {
    background: var(--wj-dark); color: #fff;
    padding: 14px 20px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
}
.members-card-header h4 { margin: 0; font-size: 1rem; font-weight: 700; }
.members-card-body { padding: 24px; }
.members-card-body p { font-size: 0.92rem; color: #555; line-height: 1.7; margin-bottom: 10px; }
.members-card-body p:last-child { margin-bottom: 0; }

/* ── Role Admin table ──────────────────────────────────────── */
.admin-roles-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.admin-roles-table thead tr {
    background: var(--wj-dark);
    color: #fff;
}
.admin-roles-table th {
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.admin-roles-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    vertical-align: middle;
}
.admin-roles-table tbody tr:last-child td { border-bottom: none; }
.admin-roles-table tbody tr:hover { background: #fafafa; }
.admin-roles-table code {
    background: #f1f3f5;
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 0.8rem;
    color: #c0392b;
}
.role-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.badge-god     { background: var(--wj-red); color: #fff; }
.badge-all     { background: #fff; color: var(--wj-red); border: 2px solid var(--wj-red); }
.badge-records { background: #0c7abf; color: #fff; }
/* NOTE: previously named .badge-results, which collided with the fixture-status
         badge of the same name in section 6a. Renamed to .badge-role-results. */
.badge-role-results { background: #2c0a0a; color: #fff; }
.badge-members { background: #1a7a3c; color: #fff; }
.badge-unknown { background: #aaa; color: #fff; }

/* ── Member Admin table ────────────────────────────────────── */
.admin-members-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.admin-members-table thead tr {
    background: var(--wj-dark);
    color: #fff;
}
.admin-members-table th {
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.admin-members-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    vertical-align: middle;
}
.admin-members-table tbody tr:last-child td { border-bottom: none; }
.admin-members-table tbody tr:hover { background: #fafafa; }
.admin-members-row-inactive td { color: #999; }

/* ── Member Admin filter panel ─────────────────────────────── */
.members-filter-card {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 20px;
    border: 1px solid #e9ecef;
    border-left: 4px solid var(--wj-red);
}
.members-filter-card h6 {
    color: var(--wj-dark);
    font-weight: 700;
    margin-bottom: 14px;
    font-size: 0.9rem;
}
.members-filter-card .form-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 3px;
}
.members-filter-card .form-select,
.members-filter-card .form-control {
    border-color: #dee2e6;
    font-size: 0.875rem;
    border-radius: 6px;
}
.members-filter-card .form-select:focus,
.members-filter-card .form-control:focus {
    border-color: var(--wj-red);
    box-shadow: 0 0 0 0.2rem rgba(220,20,60,0.12);
}

/* ── Restricted notice ─────────────────────────────────────── */
.members-restricted-notice {
    display: flex; align-items: flex-start; gap: 12px;
    background: #fff8e1; border: 1px solid #ffe082;
    border-left: 4px solid #f9a825; border-radius: 8px;
    padding: 14px 16px; margin-bottom: 20px;
    font-size: 0.875rem; color: #555;
}
.members-restricted-notice i { color: #f9a825; font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }

/* ── Form styling ──────────────────────────────────────────── */
.members-form-label {
    font-size: 0.8rem; font-weight: 600; color: #555;
    text-transform: uppercase; letter-spacing: 0.05em;
    margin-bottom: 4px; display: block; margin-top: 14px;
}
.members-form-label:first-child { margin-top: 0; }
.members-form-input {
    width: 100%; border: 1.5px solid #dee2e6; border-radius: 8px;
    padding: 9px 13px; font-size: 0.9rem; color: var(--wj-dark);
    background: #f8f9fa; transition: border-color 0.2s, box-shadow 0.2s;
}
.members-form-input:focus {
    outline: none; border-color: var(--wj-red);
    box-shadow: 0 0 0 3px rgba(220,20,60,0.1); background: #fff;
}
.members-form-actions { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
.members-form-actions .btn-wj-primary { border: none; cursor: pointer; font-size: 0.9rem; }
.members-form-cancel {
    display: inline-block; border: 2px solid #dee2e6; color: #555;
    padding: 10px 20px; border-radius: 25px; font-weight: 600;
    font-size: 0.85rem; text-decoration: none; transition: all 0.2s ease;
}
.members-form-cancel:hover { border-color: var(--wj-red); color: var(--wj-red); text-decoration: none; }

/* ── Password reveal toggle ────────────────────────────────── */
.pw-wrapper { position: relative; }
.pw-wrapper .members-form-input { padding-right: 42px; }
.pw-toggle {
    position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
    background: none; border: none; padding: 0; cursor: pointer;
    color: #aaa; font-size: 1rem; line-height: 1;
    transition: color 0.15s;
}
.pw-toggle:hover { color: var(--wj-red); }

/* ── Minutes / doc lists ───────────────────────────────────── */
.members-minutes-group { margin-bottom: 24px; }
.members-minutes-header {
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--wj-red);
    border-bottom: 2px solid #f0dde6; padding-bottom: 6px; margin-bottom: 10px;
}
.members-minutes-list { list-style: none; padding: 0; margin: 0; }
.members-minutes-list li { border-bottom: 1px solid #f0f0f0; }
.members-minutes-list li:last-child { border-bottom: none; }
.members-minutes-list a {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 4px; font-size: 0.875rem; color: var(--wj-dark);
    text-decoration: none; transition: color 0.15s;
}
.members-minutes-list a:hover { color: var(--wj-red); }
.members-minutes-list a i { color: var(--wj-red); font-size: 0.85rem; flex-shrink: 0; }

.members-doc-list { list-style: none; padding: 0; margin: 0; }
.members-doc-list li { border-bottom: 1px solid #f0f0f0; }
.members-doc-list li:last-child { border-bottom: none; }
.members-doc-list a {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 4px; font-size: 0.9rem; color: var(--wj-dark);
    text-decoration: none; font-weight: 500; transition: color 0.15s;
}
.members-doc-list a:hover { color: var(--wj-red); }
.members-doc-list a i { color: var(--wj-red); font-size: 1rem; flex-shrink: 0; }

/* ── Race filter pills ─────────────────────────────────────── */
.members-sub-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.members-sub-nav a {
    display: inline-block; padding: 6px 16px; border-radius: 20px;
    font-size: 0.82rem; font-weight: 600; text-decoration: none;
    color: var(--wj-dark); background: #f0f0f0; transition: background 0.2s, color 0.2s;
}
.members-sub-nav a:hover, .members-sub-nav a.active { background: var(--wj-red); color: #fff; }

/* ── Race table card ───────────────────────────────────────── */
.members-table-card {
    background: #fff; border-radius: 10px; overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.07); margin-bottom: 20px;
}
.members-table-header {
    background: var(--wj-dark); color: #fff; padding: 12px 18px;
    display: flex; align-items: center; justify-content: space-between;
}
.members-table-header h5 { margin: 0; font-size: 0.92rem; font-weight: 700; }
.members-count-badge {
    background: var(--wj-red); color: #fff; font-size: 0.75rem;
    font-weight: 700; padding: 2px 10px; border-radius: 20px;
}

/* ── Responsive: stack on mobile ───────────────────────────── */
@media (max-width: 767px) {
    .members-layout { flex-direction: column; gap: 12px; }
    .members-subnav-col { flex: none; width: 100%; }
    .members-card-body { padding: 16px; }
    .members-info-strip .members-avatar { width: 80px; height: 80px; }
    .members-info-inner { gap: 16px; }
}

@media (max-width: 575px) {
    .members-card-body { padding: 12px; }
    .members-filter-card { padding: 12px; }
}

/* ── Role inline form panel ────────────────────────────────── */
.member-counts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.member-counts-table thead tr {
    background: var(--wj-dark);
    color: #fff;
}
.member-counts-table th {
    padding: 10px 16px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
}
.member-counts-table th:first-child { text-align: left; }
.member-counts-table td {
    padding: 10px 16px;
    border-bottom: 1px solid #e8eefa;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a2f6b;
}
.member-counts-table td:first-child {
    text-align: left;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #555;
}
.member-counts-table tbody tr:last-child td { border-bottom: none; }
.member-counts-table tbody tr:hover { background: #f5f8ff; }
.member-counts-table .total-col {
    background: #e8eefa;
    font-weight: 700;
    color: #1a2f6b;
}
.member-counts-table tfoot td {
    background: #e8eefa;
    font-weight: 700;
    color: #1a2f6b;
    border-top: 2px solid #c8d6f5;
    border-bottom: none;
}

.role-form-panel {
    background: #f0f4ff;
    border: 1px solid #c8d6f5;
    border-left: 4px solid #3d6fd4;
    border-radius: 10px;
    padding: 20px 22px;
    margin-bottom: 22px;
}
.role-form-panel h6 {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a2f6b;
    margin-bottom: 16px;
}
.role-form-panel .form-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 3px;
}
.role-form-panel .form-select,
.role-form-panel .form-control {
    border-color: #c8d6f5;
    font-size: 0.875rem;
    border-radius: 6px;
}
.role-form-panel .form-select:focus,
.role-form-panel .form-control:focus {
    border-color: #3d6fd4;
    box-shadow: 0 0 0 0.2rem rgba(61,111,212,0.15);
}
.btn-role-submit {
    background: #3d6fd4;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 8px 20px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s;
}
.btn-role-submit:hover { background: #2d55aa; }
.btn-role-cancel {
    display: inline-block;
    border: 2px solid #c8d6f5;
    color: #3d6fd4;
    background: transparent;
    border-radius: 20px;
    padding: 7px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.18s;
}
.btn-role-cancel:hover { border-color: #3d6fd4; background: #e8eefa; text-decoration: none; color: #1a2f6b; }
.btn-role-remove {
    background: #c0392b;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 8px 20px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s;
}
.btn-role-remove:hover { background: #922b21; }
.role-edit-btn {
    background: none;
    border: none;
    padding: 3px 7px;
    color: #3d6fd4;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
    font-size: 1rem;
    line-height: 1;
}
.role-edit-btn:hover { background: #e8eefa; color: #1a2f6b; }
.role-form-message {
    padding: 10px 14px;
    border-radius: 7px;
    font-size: 0.875rem;
    margin-bottom: 16px;
}
.role-form-message.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.role-form-message.error   { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* ── Add Member form section headings ──────────────────────── */
.am-section-heading {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #3d6fd4;
    border-bottom: 2px solid #c8d6f5;
    padding-bottom: 5px;
    margin-top: 22px;
    margin-bottom: 4px;
}
/* Flex-row variant: border spans full width including checkbox side */
.am-section-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #c8d6f5;
    padding-bottom: 5px;
    margin-top: 22px;
    margin-bottom: 4px;
}
.am-section-heading-row .am-section-heading {
    border-bottom: none;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    flex: 1;
}


/* ============================================================
   9. OTHER / UNCLASSIFIED
   ── Review these items and move to the correct section.   ──
   ============================================================ */

/*
   ITEMS TO REVIEW:
   - season-inferred   : likely Members' Area (Race History table) → section 8
   - .btn-wj-filter / .btn-wj-reset have been moved to section 2f (shared buttons)
     as they appear on Records, Championship, and Colours pages.
*/