/* ==========================================================================
   SPORTS SITE THEME
   Midco Sports Network brand theme
   
   Color palette from existing Sports site:
   - Primary Orange:  #EE3B05 (headers, accents, CTAs)
   - Navy Blue:       #00053D (headings, dark backgrounds)
   - Link Blue:       #5381AC (links, secondary text)
   - Grey-Blue:       #526F91 (panels)
   ========================================================================== */

.site-sports {
    /* ==========================================================================
       SPORTS - Brand Colors
       ========================================================================== */
    --color-primary: #EE3B05;
    --color-primary-hover: #CC3204;
    --color-primary-dark: #A82A03;

    --color-secondary: #00053D;
    --color-secondary-hover: #000329;

    /* Override global --color-orange so all components using it
       (btn-orange, bg-orange, error states, etc.) use the Sports orange */
    --color-orange: #EE3B05;

    --footer-link-hover: #EE3B05;

    /* Sports site uses square corners — remove all inherited border-radii */
    --radius-sm: 0;
    --radius-base: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;
    --radius-2xl: 0;
    --card-border-radius: 0;
}

/* ==========================================================================
   SPORTS - Typography
   ========================================================================== */

.site-sports h1 {
    font-size: 3.75rem;  /* 60px */
    line-height: 4.5rem; /* 72px */
    font-weight: 700;
}

.site-sports h2 {
    font-size: 3rem;      /* 48px */
    line-height: 3.75rem; /* 60px */
    font-weight: 700;
}

.site-sports h3 {
    font-size: 2.5rem; /* 40px */
    line-height: 3rem; /* 48px */
    font-weight: 700;
}

@media (max-width: 48rem) {
    .site-sports h1 {
        font-size: 3rem;       /* 48px */
        line-height: 3.375rem; /* 54px */
    }

    .site-sports h2 {
        font-size: 2.375rem;   /* 38px */
        line-height: 2.875rem; /* 46px */
    }

    .site-sports h3 {
        font-size: 2rem;     /* 32px */
        line-height: 2.5rem; /* 40px */
    }
}

/* ==========================================================================
   SPORTS - Button Styles
   Maps to ButtonStyleSelectionFactory values:
   btn-primary, btn-secondary, btn-outline-primary, btn-outline-secondary
   ========================================================================== */

.btn-sports-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: 1px solid var(--color-primary);
}

.btn-sports-primary:hover,
.btn-sports-primary:active {
    background-color: var(--color-primary-hover);
    color: var(--color-white);
}

.btn-sports-primary:visited {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.btn-sports-secondary {
    background-color: var(--color-white);
    color: var(--color-primary);
    border: 2px solid #D0D5DD;
}

.btn-sports-secondary:hover,
.btn-sports-secondary:active {
    background-color: var(--color-white);
    color: var(--color-primary);
}

.btn-sports-secondary:visited {
    background-color: var(--color-white);
    color: var(--color-primary);
}

.btn-sports-orange {
    background-color: var(--color-orange);
    color: var(--color-white);
    border: 1px solid var(--color-orange);
}

.btn-sports-orange:hover,
.btn-sports-orange:visited,
.btn-sports-orange:active {
    background-color: var(--color-orange);
    color: var(--color-white);
}

.btn-sports-outline-primary {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-sports-outline-primary:hover,
.btn-sports-outline-primary:active {
    background: transparent;
    color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.btn-sports-outline-primary:visited {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-sports-outline-secondary {
    background: transparent;
    color: var(--color-white);
    border: 2px solid var(--color-white);
}

.btn-sports-outline-secondary:hover,
.btn-sports-outline-secondary:visited,
.btn-sports-outline-secondary:active {
    background: transparent;
    color: var(--color-white);
}

/* ==========================================================================
   SPORTS - Navigation overrides (ViewComponent nav: nav-primary__*)
   The shared nav variables resolve through --color-primary, but override
   explicitly here to ensure sports orange always wins regardless of
   variable resolution order.
   ========================================================================== */

/* Link hover / focus */
.site-sports .nav-primary__link:hover,
.site-sports .nav-primary__link:focus {
    color: var(--color-primary);
}

/* Active / current page */
.site-sports .nav-primary__item--active > .nav-primary__link,
.site-sports .nav-primary__item--ancestor > .nav-primary__link,
.site-sports .nav-primary__link.is-active {
    color: var(--color-primary);
}

/* Dropdown top-border accent */
.site-sports .nav-primary__dropdown::before {
    background-color: var(--color-primary);
}

/* Dropdown link hover */
.site-sports .nav-primary__dropdown-link:hover,
.site-sports .nav-primary__dropdown-link:focus {
    color: var(--color-primary);
    background-color: #fff4f0;
}

/* Dropdown active link */
.site-sports .nav-primary__dropdown-link.is-active,
.site-sports .nav-primary__dropdown-link[aria-current="page"] {
    color: var(--color-primary);
}
.site-sports .nav-primary__dropdown-link.is-active::before,
.site-sports .nav-primary__dropdown-link[aria-current="page"]::before {
    background-color: var(--color-primary);
}