/* ===========================================
   1. Core Variables and Base Header Styles
   =========================================== */
/* NOTE: When compact-conversion-header feature flag is enabled,
   many of these styles are overridden by compact-header.css.
   The following will be deprecated:
   - .league-header padding values (reduced from 4rem to 2rem)
   - .meta-card components (replaced by compact info blocks)
   - .league-header__meta grid (replaced by new layout structure)
*/
.league-header {
    /* Theme Variables - Original */
    --league-primary: var(--primary-color, #1a365d);
    --league-gradient: var(--primary-gradient, #2a4365);
    --league-contrast: var(--contrast-color, #ffffff);
    --league-accent: var(--accent-colors-0, #3182ce);

    /* Theme Variables - Enhanced */
    --league-accent-1: var(--accent-colors-0, #3182ce);
    --league-accent-2: var(--accent-colors-1, #2b6cb0);

    /* Layout Variables */
    --header-padding-y: 4rem;
    --header-padding-x: 2rem;
    --header-border-radius: 2rem;
    --header-max-width: 1200px;

    /* Component Variables */
    --header-pattern-opacity: 0.1;
    --meta-card-bg-opacity: 0.1;
    --meta-card-blur: 10px;
    --meta-card-border-opacity: 0.1;
    --meta-card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --meta-card-hover-y: -2px;

    /* Base Styles */
    position: relative;
    overflow: hidden;
    padding: var(--header-padding-y) var(--header-padding-x);
    background: linear-gradient(135deg, var(--league-primary), var(--league-gradient));
    color: var(--league-header-text, var(--league-primary-text, var(--league-contrast-text, var(--text-primary))));
    border-radius: 0 0 var(--header-border-radius) var(--header-border-radius);
    margin-bottom: 2rem;
}

/* ===========================================
   2. Header Pattern and Content Container
   =========================================== */
/* Header Pattern Background */
.league-header__pattern {
    position: absolute;
    inset: 0;
    opacity: var(--header-pattern-opacity);
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: auto;
    z-index: 0;
}

/* Header Content Container */
.league-header__content {
    position: relative;
    max-width: var(--header-max-width);
    margin: 0 auto;
    text-align: center;
    z-index: 1;
}

/* Dark Mode Support */
[data-bs-theme="dark"] {
    .league-header {
        --header-pattern-opacity: 0.05;
        --meta-card-bg-opacity: 0.15;
    }

    .league-header__pattern {
        opacity: var(--header-pattern-opacity);
    }
}

/* Preserve league theme text colors inside the header in dark mode */
[data-bs-theme="dark"] .league-header,
body.dark-mode .league-header {
    color: var(--league-header-text, var(--league-primary-text, var(--league-contrast-text, var(--text-primary)))) !important;
}

[data-bs-theme="dark"] .league-header :is(h1, h2, h3, h4, h5, h6, .league-header__title, .league-header__subtitle),
body.dark-mode .league-header :is(h1, h2, h3, h4, h5, h6, .league-header__title, .league-header__subtitle) {
    color: var(--league-header-text, var(--league-primary-text, var(--league-contrast-text, var(--league-contrast)))) !important;
}

/* Basic Responsive Adjustments */
@media (max-width: 768px) {
    .league-header {
        --header-padding-y: 3rem;
        --header-padding-x: 1rem;
    }
}


/* ===========================================
   3. Typography Styles
   =========================================== */
.league-header__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: var(--league-header-text, var(--league-primary-text, var(--league-contrast-text, inherit)));
    line-height: 1.2;
}

.league-header__subtitle {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    opacity: 0.9;
    margin-bottom: 2rem;
    font-style: italic;
    color: var(--league-header-text, var(--league-primary-text, var(--league-contrast-text, inherit)));
    line-height: 1.4;
}

/* ===========================================
   4. Meta Card Styling
   =========================================== */
.meta-card {
    background: rgba(255, 255, 255, var(--meta-card-bg-opacity));
    backdrop-filter: blur(var(--meta-card-blur));
    -webkit-backdrop-filter: blur(var(--meta-card-blur));
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, var(--meta-card-border-opacity));
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.meta-card:hover {
    transform: translateY(var(--meta-card-hover-y));
    box-shadow: var(--meta-card-shadow);
    border-color: rgba(255, 255, 255, 0.2);
}

.meta-card__icon {
    font-size: 6.5rem;
    margin-bottom: 0.5rem;
    color: var(--league-contrast);
    opacity: 0.9;
    transition: transform 0.2s ease;
}

.meta-card:hover .meta-card__icon {
    transform: scale(1.1);
}

.meta-card__label {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
    margin-bottom: 0.25rem;
    color: var(--league-contrast);
}

.meta-card__value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--league-contrast);
}

.league-header__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

/* ===========================================
   5. Image Handling
   =========================================== */
.league-header__image {
    width: 100%;
    object-fit: cover;
    margin: 2rem auto 0;
    border-radius: 1rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.league-header__image:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

/* Responsive Image Adjustments */
@media (max-width: 768px) {
    .league-header__image {
        max-height: 300px;
        margin: 1.5rem auto 0;
    }
}

/* Image Loading States */
.league-header__image.loading {
    background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.1)
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Focus States for Accessibility */
.league-header__image:focus {
    outline: 2px solid var(--league-accent);
    outline-offset: 2px;
}

/* Image Error State */
.league-header__image.error {
    aspect-ratio: 16/9;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.league-header__image.error::before {
    content: '🖼️';
    font-size: 2rem;
    opacity: 0.5;
}

/* ===========================================
   6. Grid and Layout
   =========================================== */
.league-header__layout {
    display: grid;
    gap: var(--header-grid-gap, 2rem);
    margin-top: var(--header-section-spacing, 2rem);
}

.league-header__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

.league-header__section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ===========================================
   7. Weather Components
   =========================================== */
.weather-summary {
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.25rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.weather-summary .d-flex {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Weather Elements */
.weather-summary .temperature,
.weather-summary .wind-info,
.weather-summary .conditions,
.weather-summary .rain {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    margin-right: 0.5rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(var(--meta-card-blur));
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.weather-summary .temperature:hover,
.weather-summary .wind-info:hover,
.weather-summary .conditions:hover,
.weather-summary .rain:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

/* Weather Icons */
.weather-summary i {
    margin-right: 0.35rem;
    opacity: 0.7;
    font-size: 0.9rem;
}

.temperature i {
    color: var(--league-accent-1);
}

.wind-info i {
    color: var(--league-accent-2);
}

.conditions i {
    color: var(--league-contrast);
}

.rain i {
    color: var(--league-accent);
}

/* Weather Text */
.weather-summary small {
    font-size: 0.8rem;
    color: var(--league-accent);
    font-weight: 500;
}

.wind-details {
    padding-left: 0.75rem;
    font-size: 0.75rem;
    color: var(--league-accent);
    opacity: 0.7;
}

/* Weather Badges */
.weather-summary .badge {
    margin-left: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2rem;
}

/* ===========================================
   8. Accordion Styles
   =========================================== */
.accordion-button {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    background: var(--league-primary);
    color: var(--league-accent);
    border: none;
    transition: all 0.2s ease;
}

.accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, var(--league-primary), var(--league-gradient));
    color: var(--league-contrast);
}

.accordion-button::after {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--league-contrast);
    opacity: 0.8;
}

.accordion-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
    padding-right: 2rem;
}

.accordion-body {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Accordion Animations */
.accordion-button:not(.collapsed)::after {
    transform: translateY(-50%) rotate(-180deg);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .weather-summary .d-flex {
        flex-direction: column;
        gap: 0.25rem;
    }

    .weather-summary .temperature,
    .weather-summary .wind-info,
    .weather-summary .conditions,
    .weather-summary .rain {
        width: 100%;
        margin-right: 0;
    }

    .wind-details {
        padding-left: 0;
        margin-top: 0.25rem;
    }

    .accordion-button {
        padding: 0.75rem 1rem;
    }

    .accordion-header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}


/* ===========================================
   9. Animation and Transitions
   =========================================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Apply Animations */
.league-header__title {
    animation: fadeIn 0.5s ease forwards;
}

.league-header__subtitle {
    animation: fadeIn 0.5s ease forwards;
    animation-delay: 0.1s;
}

.league-header__image {
    animation: fadeIn 0.5s ease forwards;
    animation-delay: 0.2s;
}

.meta-card {
    animation: fadeIn 0.5s ease forwards;
    animation-delay: calc(var(--animation-order, 0) * 0.1s);
}

/* ===========================================
   10. Responsive Adjustments
   =========================================== */
@media (max-width: 1200px) {
    .league-header {
        --header-padding-y: 3.5rem;
    }

    .league-header__meta {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 768px) {
    .league-header {
        --header-padding-y: 3rem;
        --header-padding-x: 1rem;
    }

    .league-header__title {
        font-size: 2.5rem;
    }

    .league-header__subtitle {
        font-size: 1.25rem;
    }

    .league-header__meta {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .meta-card {
        padding: 1.25rem;
    }

    .meta-card__value {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .league-header {
        --header-padding-y: 2rem;
    }

    .league-header__title {
        font-size: 2rem;
    }

    .league-header__subtitle {
        font-size: 1.1rem;
    }
}

/* ===========================================
   11. Dark Mode Support
   =========================================== */
[data-bs-theme="dark"] {
    .league-header {
        --header-pattern-opacity: 0.05;
        --meta-card-bg-opacity: 0.15;
    }

    .accordion-body {
    }

    .weather-summary .temperature,
    .weather-summary .wind-info,
    .weather-summary .conditions,
    .weather-summary .rain {
        background: rgba(255, 255, 255, 0.05);
    }

    .weather-summary .temperature:hover,
    .weather-summary .wind-info:hover,
    .weather-summary .conditions:hover,
    .weather-summary .rain:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .league-header__image {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    }
}

/* ===========================================
   12. Print Styles
   =========================================== */
@media print {
    .league-header {
        background: none !important;
        color: #000;
        padding: 1rem;
    }

    .league-header__pattern {
        display: none;
    }

    .meta-card {
        break-inside: avoid;
        background: none;
        border: 1px solid #ccc;
    }

    .weather-summary,
    .accordion-button::after {
        display: none;
    }
}

/* ===========================================
   13. Prize Grid Styling
   =========================================== */
.prize-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.prize-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    height: 100%;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.prize-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.prize-card-header {
    position: relative;
    padding: 1.75rem 1.5rem;
    text-align: center;
    color: #333;
}

.prize-card-header h3 {
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: #333;
}

.prize-amount {
    font-size: 3.5rem;
    font-weight: 800;
    margin: 0.75rem 0;
    color: #333;
    display: block;
    line-height: 1;
}

.participation-badge {
    display: inline-block;
    padding: 0.35rem 1.25rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0.5rem 0 1rem;
}

.status-in {
    background-color: #28a745;
    color: white;
}

.status-out {
    background-color: #6c757d;
    color: white;
}

.prize-description {
    margin: 1rem 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #555;
}

.prize-details-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.95rem;
    margin-top: 0.75rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--theme-info, #2563eb);
    text-decoration: none;
    background: color-mix(in srgb, var(--theme-info, #2563eb) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-info, #2563eb) 40%, transparent);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--theme-info, #2563eb) 16%, transparent);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.prize-details-link .btn-text {
    font-weight: inherit;
}

.prize-details-link i {
    font-size: 1rem;
}

.prize-details-link:hover {
    color: var(--theme-text-on-accent, #f8fafc);
    background: color-mix(in srgb, var(--theme-info, #2563eb) 25%, transparent);
    border-color: color-mix(in srgb, var(--theme-info, #2563eb) 55%, transparent);
    box-shadow: 0 14px 28px color-mix(in srgb, var(--theme-info, #2563eb) 24%, transparent);
    transform: translateY(-2px);
}

[data-bs-theme="dark"] .prize-details-link {
    background: color-mix(in srgb, var(--theme-info, #3b82f6) 18%, var(--theme-surface-2, #1e293b) 82%);
    border-color: color-mix(in srgb, var(--theme-info, #3b82f6) 55%, transparent);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--theme-info, #3b82f6) 22%, transparent);
    color: var(--theme-info, #3b82f6);
}

[data-bs-theme="dark"] .prize-details-link:hover {
    background: color-mix(in srgb, var(--theme-info, #3b82f6) 32%, transparent);
    border-color: color-mix(in srgb, var(--theme-info, #3b82f6) 70%, transparent);
    box-shadow: 0 18px 32px color-mix(in srgb, var(--theme-info, #3b82f6) 30%, transparent);
    color: var(--theme-text-on-accent, #f8fafc);
}

.payout-details {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 0.75rem;
    margin: 1rem 0;
    border: 1px solid #e9ecef;
}

.payout-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 0.5rem;
}

.payout-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.payout-item .place {
    font-weight: 600;
    color: #495057;
}

.payout-item .amount {
    font-weight: 700;
    color: #28a745;
}

/* Card color variations */
.prize-card.prize-pool {
    border-top: 5px solid #0d6efd;
}

.prize-card.ace-pot {
    border-top: 5px solid #28a745;
}

.prize-card.super-ace {
    border-top: 5px solid #fd7e14;
}

.prize-card.ctp {
    border-top: 5px solid #6f42c1;
}

/* Dark Mode Support for Prize Grid */
[data-bs-theme="dark"] {
    .prize-card {
        background-color: #1a2634;
        border-color: rgba(255, 255, 255, 0.1);
    }

    .prize-card-header h3,
    .prize-amount {
        color: #e0e0e0;
    }

    .prize-description {
        color: #adb5bd;
    }

    .payout-details {
        background-color: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .payout-item {
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    .payout-item .place {
        color: #e0e0e0;
    }

    .payout-item .amount {
        color: #28a745;
    }

    .prize-details-link {
        color: #4dabf7;
    }

    .prize-details-link:hover {
        color: #74c0fc;
    }
}

/* ===========================================
   14. Utilities and Accessibility
   =========================================== */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

[data-theme="high-contrast"] .league-header {
    --meta-card-bg-opacity: 0.2;
    --header-pattern-opacity: 0.15;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .league-header *,
    .meta-card,
    .accordion-button,
    .weather-summary *,
    .prize-card {
        animation: none !important;
        transition: none !important;
    }
}