/* static/css/cbweb.css - Refactored with a Design System */

/* ==========================================================================
   1. The Design System (The "Rules of the Parthenon")
   ========================================================================== */

:root {
    /* --- A. COLOR PALETTE --- */
    /* IMPORTANT: Replace these hex codes with the EXACT colors from your logo! */
    --color-brand-primary: #0A3161; /* The "US Blue" from your logo */
    --color-brand-accent: #D8292F; /* The "Canadian Red" from your logo */

    /* Neutral Palette for a softer, more professional feel */
    --color-neutral-0: #FFFFFF; /* Pure White */
    --color-neutral-100: #f8f9fa; /* Soft Off-White (for page backgrounds) */
    --color-neutral-200: #e9ecef; /* Light Gray (for subtle borders) */
    --color-neutral-400: #ced4da; /* Medium Gray (for muted text) */
    --color-neutral-700: #495057; /* Dark Gray (for body text) */
    --color-neutral-900: #212529; /* Near Black (for headings) */

    /* Semantic Colors for UI feedback */
    --color-success: #198754;
    --color-warning: #ffc107;
    --color-danger: #dc3545;
    --color-info: #0dcaf0;

    /* --- B. TYPOGRAPHY --- */
    /* ... font-family is the same ... */
    --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Typographic Scale (v3 - More Generous Desktop Sizing) */

    /* Scales from 16px -> 18px (was 15px -> 16px). This is the biggest change. */
    --font-size-base: clamp(1rem, 0.19vw + 0.91rem, 1.125rem);

    /* Scales from 13px -> 14px */
    --font-size-xs: clamp(0.8125rem, 0.09vw + 0.78rem, 0.875rem);

    /* Scales from 14px -> 16px */
    --font-size-sm: clamp(0.875rem, 0.19vw + 0.78rem, 1rem);

    /* Scales from 20px -> 26px (was 18px -> 24px) */
    --font-size-lg: clamp(1.25rem, 0.56vw + 1.03rem, 1.625rem);

    /* Scales from 26px -> 36px (was 24px -> 32px) */
    --font-size-xl: clamp(1.625rem, 0.94vw + 1.27rem, 2.25rem);

    /* Scales from 32px -> 50px (was 32px -> 48px) */
    --font-size-xxl: clamp(2rem, 1.88vw + 1.28rem, 3.125rem);

    /* Font Weights (These remain the same) */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* --- C. SPACING & SIZING --- */
    /* A consistent spacing scale for margin, padding, gap, etc. */
    --space-1: 0.25rem; /* 4px */
    --space-2: 0.5rem; /* 8px */
    --space-3: 1rem; /* 16px */
    --space-4: 1.5rem; /* 24px */
    --space-5: 2.5rem; /* 40px */
    --space-6: 3rem; /* 48px */

    /* --- D. BORDERS & SHADOWS --- */
    --border-width: 1px;
    --border-radius: 0.375rem;
    --border-color: var(--color-neutral-200);

    --box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);

    /* --- E. LAYOUT SIZING --- */
    --header-top-bar-height: 56px;
    --header-section-identifier-height: 40px;
    --header-total-height: calc(var(--header-top-bar-height) + var(--header-section-identifier-height)); /* 96px */

}


/* ==========================================================================
   2. Refactored Application Styles
   ========================================================================== */

/* ==========================================================================
   Base & Core Layout
   ========================================================================== */
body {
    /* Use our new variable. Now if the header changes, this updates automatically! */
    padding-top: var(--header-total-height);
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-700);
    font-family: var(--font-family-sans);
}

/* Override for Bootstrap's .lead class to use our fluid type scale */
.lead {
    font-size: var(--font-size-lg);
}


@media (max-width: 991.98px) {
    body {
        padding-top: 96px !important;
    }
}

@media (min-width: 992px) {
    header.fixed-top {
        display: flex;
        flex-direction: column;
    }

    header.fixed-top .d-lg-block {
        order: 1;
    }

    header.fixed-top .section-identifier {
        order: 2;
    }
}

/* ==========================================================================
   Unified Header & Navbar Components
   ========================================================================== */
.header-top-bar {
    background-color: var(--color-brand-primary);
    border-bottom: var(--border-width) solid rgba(255, 255, 255, 0.1);
}

.main-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px;
}

.header-item {
    flex: 1;
}

.header-item:nth-child(2) {
    text-align: center;
}

.header-item:nth-child(3) {
    text-align: right;
}

.mobile-menu-icon, .find-player-icon {
    color: var(--color-neutral-0);
    font-size: var(--font-size-xl);
    line-height: 1;
}

.main-header-content .btn {
    padding: var(--space-2);
    border: none;
}

.main-header-content .btn:focus {
    box-shadow: none;
}

.section-identifier {
    background-color: var(--color-neutral-100);
    text-align: center;
    padding: var(--space-2) var(--space-3);
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: var(--border-width) solid var(--border-color);
}

.section-identifier h2 {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-neutral-900);
}

.navbar-custom {
    background-color: var(--color-brand-primary);
}

.navbar-custom .nav-link {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    transition: color 0.15s ease-in-out;
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link:focus,
.navbar-custom .nav-link.active {
    color: var(--color-neutral-0);
}

.navbar-custom .navbar-brand {
    color: var(--color-neutral-0);
    transition: color 0.15s ease-in-out;
}

.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus {
    color: var(--color-warning);
}

.offcanvas-body .navbar-nav .nav-link {
    font-size: var(--font-size-lg);
    padding: var(--space-2) 0;
    color: var(--color-neutral-900);
}

.mobile-user-greeting {
    font-size: 1.1rem; /* Keeping specific sizes where they make sense */
    color: var(--color-neutral-900);
}

/* ==========================================================================
   List Item Card Component System (FINAL GRID-BASED VERSION)
   ========================================================================== */

.card {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-sm);
    overflow: hidden;
}

/* 1. The Grid Layout */
.card--mobile-row .list-item-layout {
    display: grid;
    /* Let's use a slightly wider column to not constrain our images */
    grid-template-columns: minmax(auto, 150px) 1fr;
    /* The gap between image and text */
    column-gap: var(--space-2);
    align-items: center;
}

/* 2. The Image Wrapper - This now controls the left padding */
.list-item-layout > .flex-shrink-0 {
    display: grid;
    place-content: center;
    height: 100%;
    /* Padding on all sides */
    padding: var(--space-2);
}

/* ==========================================================================
   THREE-COLUMN LAYOUT MODIFIER (CORRECTED SPECIFICITY)
   ========================================================================== */

/* By adding .card--mobile-row, this selector is now strong enough to override the default 2-column layout. */
.card--mobile-row .list-item-layout--three-col {
    display: grid;
    align-items: center;

    /* The NEW, definitive column definition */
    grid-template-columns:
        max-content                         /* 1. Badge column: just big enough for the number */
        clamp(60px, 15vw, 80px)             /* 2. Image column: fluid, but controlled */
        1fr; /* 3. Text column: takes the rest of the space */

    column-gap: var(--space-2);
    padding-inline: var(--space-2); /* Added padding for consistency */
}

/* We also need to boost the specificity of this helper rule */
.card--mobile-row .list-item-layout--three-col .list-item-image-container {
    width: 100%;
    aspect-ratio: 1 / 1; /* Ensure it stays square */
}

/* 3. The Card Body - This now controls the text padding */
.card-body {
    /* We need to reset Bootstrap's default padding first */
    padding: 0;
    position: relative;
    /* Then we apply our own vertical and right-side padding */
    padding-block: var(--space-2);
    padding-inline-end: var(--space-6); /* For the chevron */
}

.card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-900);
    margin-bottom: var(--space-1);
}

.card-text {
    font-size: var(--font-size-sm);
    line-height: 1.3;
    margin-bottom: 0;
}

/* 4. The Image Container - no border */
.list-item-image-container {
    display: grid;
    place-content: center;
    width: 100%;
    overflow: hidden;
    border-radius: var(--border-radius);
    background-color: var(--color-neutral-0);
}

.list-item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 5. MODIFIERS (Contextual Styling) */
/* DEFAULT: Players are portrait */
.list-item--player .list-item-image-container {
    aspect-ratio: 169 / 224;
    max-width: clamp(68px, 20vw, 90px);
}

/* DEFAULT: Reports are square */
.list-item--report .list-item-image-container {
    aspect-ratio: 1 / 1;
    max-width: clamp(90px, 25vw, 144px);
}

/* CONTEXTUAL OVERRIDE: Forcing reports into a smaller, portrait slot on uniform lists */
.list--uniform .list-item--report .list-item-image-container {
    aspect-ratio: 169 / 224;
    max-width: clamp(68px, 20vw, 90px);
}

/* 6. The Chevron */
.list-item-chevron {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: var(--space-3); /* Pulled it in a bit */
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-light);
    color: var(--color-neutral-400);
    transition: color 0.15s ease-in-out, transform 0.2s ease-in-out;
}

.card:hover .list-item-chevron {
    color: var(--color-brand-primary);
    transform: translateY(-50%) translateX(5px);
}

/* ==========================================================================
   Mobile-Only Styles & Overrides (`max-width`)
   ========================================================================== */
@media (max-width: 767.98px) {
    .card--mobile-row .list-item-chevron {
        display: none;
    }

    .card--mobile-row .card-body {
        padding-right: var(--space-3);
    }

    .card--mobile-row .team-player-count {
        width: 50px;
    }

    .card--mobile-row .team-player-count .badge {
        font-size: var(--font-size-sm);
    }
}


/* ==========================================================================
   Page-Specific Component Styles
   ========================================================================== */
.card .player-info-main,
.card .player-info-secondary {
    margin-bottom: var(--space-1);
}

.player-info-main {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-700);
}

.player-info-secondary {
    font-size: var(--font-size-xs);
}

.team-player-count {
    flex-shrink: 0;
    width: 65px;
}

.team-player-count-label {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-400);
    text-transform: uppercase;
    margin-top: 2px;
}

.team-player-count .badge {
    font-size: var(--font-size-base);
}

.team-info-secondary {
    font-size: var(--font-size-sm);
    margin-bottom: 0;
}

/* ==========================================================================
   Legacy / Miscellaneous Styles
   ========================================================================== */
.wp-title-instructions {
    background-color: var(--color-neutral-100);
    padding: var(--space-4);
    border: var(--border-width) solid var(--border-color);
    margin-bottom: var(--space-4);
}

.wp-title-instructions-intro {
    font-size: 1.1em;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-2);
    color: var(--color-neutral-900);
}

.wp-title-instructions-list-header {
    font-style: italic;
    margin-bottom: var(--space-2);
    color: var(--color-neutral-700);
}

.wp-title-instructions-list {
    list-style-type: disc;
    margin-left: var(--space-5);
    margin-bottom: var(--space-2);
}

.wp-title-instructions-closing {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-400);
}

/* ==========================================================================
   Unified Header Desktop Adjustments
   ========================================================================== */
@media (min-width: 992px) {
    .mobile-header-custom {
        max-width: 1140px;
        margin: 0 auto;
    }
}

/* static/css/cbweb.css */

/* ==========================================================================
   Sign-In Prompt Component
   ========================================================================== */

.signin-prompt .card-header {
    font-weight: var(--font-weight-semibold);
    background-color: var(--color-neutral-100);
}

.signin-prompt .card-body {
    padding: var(--space-4) var(--space-5); /* More generous padding */
}

.signin-prompt-intro p {
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-neutral-700);
}

.signin-prompt-intro a,
.signin-prompt-footer a {
    font-weight: var(--font-weight-medium);
    color: var(--color-brand-primary);
    text-decoration: none;
    border-bottom: var(--border-width) solid var(--color-brand-primary);
    transition: background-color 0.15s ease-in-out;
}

.signin-prompt-intro a:hover,
.signin-prompt-footer a:hover {
    background-color: rgba(10, 49, 97, 0.1); /* A subtle hover effect using our primary blue */
}

.signin-prompt-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-4); /* Consistent spacing between buttons */
    align-items: center;
}

.signin-button-wrapper {
    max-width: 240px;
}

.signin-button img {
    max-width: 100%;
    height: auto;
    transition: transform 0.1s ease-in-out;
}

.signin-button:hover img {
    transform: scale(1.03); /* A slight "pop" on hover */
}

.signin-prompt-footer {
    border-top: var(--border-width) solid var(--border-color);
    padding-top: var(--space-4);
}


/* ==========================================================================
   Social Sign-In Buttons
   ========================================================================== */
.btn-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3); /* Space between icon and text */
    padding: var(--space-2) var(--space-5);
    width: 100%;
    max-width: 280px; /* Set a max-width for consistency */

    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    line-height: 1.5;

    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--color-neutral-0);
    color: var(--color-neutral-900);

    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-social:hover {
    background-color: var(--color-neutral-100);
    box-shadow: var(--box-shadow-sm);
}

.btn-social__icon {
    width: 1.5rem; /* 24px */
    height: 1.5rem; /* 24px */
}

/* --- Specific Button Styles --- */

/* Google Button Style */
.btn-social--google {
    /* Optional: Style to match Google's brand guidelines */
    border-color: var(--color-neutral-200);
    color: var(--color-neutral-700);
}

/* X Button Style */
.btn-social--x {
    background-color: var(--color-neutral-900);
    color: var(--color-neutral-0);
    border-color: var(--color-neutral-900);
}

.btn-social--x:hover {
    background-color: #333; /* A slightly lighter black on hover */
    border-color: #333;
}

.btn-social--x .btn-social__text {
    color: var(--color-neutral-0);
}


.download-card__image {
    max-width: 150px;
    border-radius: var(--border-radius);
}


/* --- Text-Only Card Variant --- */
.card-list-item-text-only {
    display: block;
    position: relative;
    padding: var(--space-3);
    padding-right: var(--space-6); /* Make room for chevron */
    border-bottom: var(--border-width) solid var(--border-color);
    text-decoration: none;
    color: var(--color-neutral-700);
    transition: background-color 0.15s ease-in-out;
}

.card-list-item-text-only:last-child {
    border-bottom: none;
}

.card-list-item-text-only:hover {
    background-color: var(--color-neutral-100);
}

/* Ensure the text inside uses the right font sizes */
.card-list-item-text-only h5 {
    font-size: var(--font-size-lg);
    color: var(--color-neutral-900);
}

.card-list-item-text-only p {
    font-size: var(--font-size-sm);

    /* For Flexbox items, this is the key to allowing them to shrink
       and let their content wrap properly. */
    min-width: 0;

    /* This can now do its job. */
    overflow-wrap: break-word;
}

/* --- Player Hero Component --- */
.player-hero {
    display: grid;
    /* Two columns: a flexible image column and a text column that takes the rest */
    grid-template-columns: minmax(auto, 150px) 1fr;
    align-items: center;
    gap: var(--space-4);
    background-color: var(--color-neutral-0);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.player-hero__image-container {
    width: 100%;
    aspect-ratio: 169 / 224; /* Enforce portrait shape */
    border-radius: var(--border-radius);
    overflow: hidden;
}

.player-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player-hero__name {
    font-size: var(--font-size-xxl);
    color: var(--color-neutral-900);
    margin-bottom: var(--space-1);
}

.player-hero__details {
    font-size: var(--font-size-base);
    color: var(--color-neutral-700);
    margin-bottom: var(--space-2);
}

.player-hero__team-info {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-brand-primary);
    margin-bottom: 0;
}

/* --- Table Styles --- */
.table {
    /* Make the font size match our base text for readability */
    font-size: var(--font-size-sm);
}

.table thead th {
    /* Less "shouty" table headers */
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-900);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: var(--font-size-xs);
    border-bottom-width: 2px;
}

.table-striped tbody tr:nth-of-type(odd) {
    /* Use our softer neutral color for the stripes */
    background-color: rgba(0, 0, 0, 0.025);
}


/* ==========================================================================
   Player Card Page ("The Parthenon Centerpiece")
   ========================================================================== */

/* --- A. The Two-Column Dashboard Layout --- */
.player-card-layout {
    display: grid;
    /* On mobile, it's a single column by default */
    grid-template-columns: 1fr;
    /* Use a larger gap for major layout sections */
    gap: var(--space-5);
}

/* On screens wider than 992px, switch to a two-column grid */
@media (min-width: 992px) {
    .player-card-layout {
        /* Main column gets ~65%, secondary gets ~35% */
        grid-template-columns: 2fr 1fr;
    }
}

/* --- B. The Player Hero Component --- */
.player-hero {
    display: grid;
    grid-template-columns: minmax(auto, 150px) 1fr;
    align-items: center;
    gap: var(--space-4);
    background-color: var(--color-neutral-0);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.player-hero__image-container {
    width: 100%;
    aspect-ratio: 169 / 224; /* Enforce portrait shape */
    border-radius: var(--border-radius);
    overflow: hidden;
}

.player-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player-hero__name {
    font-size: var(--font-size-xxl); /* Use our fluid scale */
    color: var(--color-neutral-900);
    line-height: 1.1;
    margin-bottom: var(--space-1);
}

.player-hero__details {
    font-size: var(--font-size-base);
    color: var(--color-neutral-700);
    margin-bottom: var(--space-3); /* Increased margin for better separation */
}

.player-hero__team-info {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-brand-primary);
    margin-bottom: 0;
}


/* --- C. Accordion "Parthenon" Styling --- */
/* This styles the accordion to match our site's theme */

/* We get rid of Bootstrap's default radius, because the whole item will have one */
.accordion {
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-border-color: var(--border-color);
}

/* Style the accordion item itself like one of our cards */
.accordion-item {
    background-color: var(--color-neutral-0);
    border: none; /* We'll apply borders manually */
}

/* We style the button to be our main clickable element */
.accordion-button {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-900);
    background-color: transparent; /* No background when collapsed */
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width) solid var(--border-color);
}

/* When the button is NOT collapsed (i.e., its section is open) */
.accordion-button:not(.collapsed) {
    color: var(--color-brand-primary);
    background-color: rgba(10, 49, 97, 0.05); /* Subtle primary color tint */
    box-shadow: none; /* Remove Bootstrap's default shadow */
}

/* Style the arrow icon */
.accordion-button::after {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230A3161'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* The body of the accordion has no padding, so our list items can be flush */
.accordion-body {
    padding: 0;
}

/* Re-apply the bottom border to the text-only items inside the accordion */
.accordion-body .card-list-item-text-only {
    border-bottom: var(--border-width) solid var(--border-color);
}

.accordion-body .card-list-item-text-only:last-child {
    border-bottom: none;
}

/* Add a border around the entire accordion component for a card-like feel */
#playerActivityAccordion {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden; /* This is key to making the radius work */
}

/* We need to remove the bottom border from the last accordion button */
#playerActivityAccordion .accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom: none;
}


/* ==========================================================================
   "Hot News" Visual Indicator
   ========================================================================== */
.hot-badge {
    background-color: var(--color-brand-accent);
    color: white;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.5px;
    animation: pulse-glow 1.75s infinite ease-in-out;
}

@keyframes pulse-glow {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(216, 41, 47, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 10px 12px rgba(216, 41, 47, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(216, 41, 47, 0);
    }
}

/* --- Player Hero Hot News Alert --- */
.player-hero__hot-news {
    /* Use a subtle tint of our primary brand color for a premium feel */
    background-color: rgba(10, 49, 97, 0.05);
    border-top: 2px solid rgba(10, 49, 97, 0.2);
    padding: var(--space-3);
    margin-top: var(--space-4); /* Add space above it */

    /* Pull it to the edges of the card's padding */
    margin-inline: calc(-1 * var(--space-4));
    margin-bottom: calc(-1 * var(--space-4));

    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);

    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-brand-primary);
}


/* --- Form & Tab Styling --- */

/* Style Bootstrap tabs to match our theme */
.nav-tabs .nav-link {
    color: var(--color-neutral-700);
}

.nav-tabs .nav-link.active {
    color: var(--color-brand-primary);
    border-color: var(--border-color) var(--border-color) var(--color-neutral-0);
    font-weight: var(--font-weight-semibold);
}

/* Style our form inputs */
/* This targets any <p> tag wrapper from form.as_p or form.as_ul */
form p, form ul li {
    margin-bottom: var(--space-4);
}

.form-label {
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-2);
}

/* Style all text inputs, textareas, and selects */
.form-control,
textarea[name="comment"],
select {
    font-size: var(--font-size-base);
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--color-neutral-0);
}

.form-control:focus,
textarea[name="comment"]:focus,
select:focus {
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 3px rgba(10, 49, 97, 0.15); /* Use our brand color for the focus ring */
}

/* Make our primary buttons full-width in forms for a better mobile experience */
form .btn-primary {
    width: 100%;
    padding: var(--space-3);
    font-size: var(--font-size-lg);
}

/* --- Comment Response Styling --- */
.comment-response {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background-color: var(--color-neutral-100);
    border-left: 3px solid var(--color-brand-primary);
    border-radius: var(--border-radius);
}


/* ==========================================================================
   Site Footer Styling
   ========================================================================== */

/* Target all links specifically inside the <footer> */
footer a {
    /*
      The .text-reset class you're using makes the link inherit its color,
      which is white. Let's make it slightly less prominent by default.
      75% opacity white is a great choice on a dark background.
    */
    color: rgba(255, 255, 255, 0.75);

    /* Remove the default underline */
    text-decoration: none;

    /* Add a smooth transition for the hover effect */
    transition: color 0.15s ease-in-out;
}

/* On hover or focus, make the link fully opaque and add an underline */
footer a:hover,
footer a:focus {
    color: var(--color-neutral-0); /* Pure White */
    text-decoration: underline;
}

/* Style the footer's column headings */
footer h5 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: 1px;
}

/* ==========================================================================
   Off-Canvas Menu "Parthenon" Styling
   ========================================================================== */

/* 1. Brand the Header and Body */
.offcanvas-header,
.offcanvas-body {
    background-color: var(--color-brand-primary);
    color: var(--color-neutral-0);
}

.offcanvas-header {
    border-bottom: var(--border-width) solid rgba(255, 255, 255, 0.1);
}

.offcanvas-header .btn-close {
    /* Use Bootstrap's filter to make the 'X' button white */
    filter: invert(1) grayscale(100%) brightness(200%);
}

.offcanvas-title {
    color: var(--color-neutral-0);
    font-weight: var(--font-weight-bold);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* 2. Style the Navigation Links */
.offcanvas-body .navbar-nav .nav-link {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, 0.85); /* Slightly dimmer by default */
    padding: var(--space-2) var(--space-3);
    border-radius: var(--border-radius);
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

/* 3. Create a Polished Hover/Active State */
.offcanvas-body .navbar-nav .nav-link:hover,
.offcanvas-body .navbar-nav .nav-link:focus,
.offcanvas-body .navbar-nav .nav-link.active {
    color: var(--color-neutral-0); /* Fully bright on hover */
    /* Add a subtle, darker background tint on hover for a premium feel */
    background-color: rgba(0, 0, 0, 0.2);
}

/* 4. Create a Visual Hierarchy for the "Sign Out" Action */
/* Target the "Sign Out" link specifically */
.offcanvas-body .navbar-nav .nav-link[href*="logout"] {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: var(--border-width) solid rgba(255, 255, 255, 0.1);

    /* Use your brand's accent color for emphasis */
    color: var(--color-warning);
    font-weight: var(--font-weight-bold);
}

.offcanvas-body .navbar-nav .nav-link[href*="logout"]:hover {
    background-color: var(--color-brand-accent);
    color: var(--color-neutral-900);
}


.offcanvas-body .navbar-nav .nav-link[href*="login"] {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: var(--border-width) solid rgba(255, 255, 255, 0.1);

    /* Use your brand's accent color for emphasis */
    color: var(--color-warning);
    font-weight: var(--font-weight-bold);
}

.offcanvas-body .navbar-nav .nav-link[href*="login"]:hover {
    background-color: var(--color-brand-accent);
    color: var(--color-neutral-900);
}