html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* 23 Sports footer – DARK */
.footer-23 {
    background: #000; /* pure black */
    color: #fff; /* white text */
}

    .footer-23 .footer-title {
        color: #fff;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: .04em;
        margin-bottom: .25rem;
    }

    .footer-23 .footer-list li {
        margin: 2px 0;
    }

    .footer-23 a {
        color: #f1f1f1; /* near-white links */
        text-decoration: none;
    }

        .footer-23 a:hover,
        .footer-23 a:focus {
            color: #ffffff; /* full white on hover */
            text-decoration: underline;
        }

    .footer-23 .border-top {
        border-top: 1px solid rgba(255,255,255,.25) !important; /* light divider */
    }

    /* optional: slightly dim small text under the divider */
    .footer-23 small {
        color: rgba(255,255,255,.85);
    }

    /* optional: if any icon is pure black (e.g., X logo), invert it on dark bg */
    .footer-23 img.icon-invert {
        filter: invert(1) brightness(1.25);
    }

/* Modal header gradient + brand logo */
.comingsoon .modal-hero {
    background: radial-gradient(1000px 300px at 20% -20%, rgba(255,255,255,.18), transparent), linear-gradient(135deg, #111 0%, #222 40%, #000 100%);
    min-height: 120px;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}

.comingsoon .cs-brand {
    height: 28px; /* adjust to taste */
    width: auto;
}

/* Image container that ALWAYS fills (no black bars) */
.cs-media {
    --ar: 4/3; /* aspect ratio: set to 1/1 if you prefer a square tile */
    aspect-ratio: var(--ar);
    width: 100%;
    border-radius: .5rem;
    overflow: hidden;
    background: #111; /* fallback while image loads */
}

    .cs-media > img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* <— key: fills the box, cropping if needed */
        display: block;
    }
/* site.css */
a.coming-soon {
    cursor: pointer;
}

/* Category grid styling */
.category-card {
    border: 0;
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
    transition: transform .18s ease, box-shadow .18s ease;
}

    .category-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(0,0,0,.12);
    }

/* Square image with clean crop, no black bars */
.category-img {
    aspect-ratio: 1 / 1;
    width: 100%;
    object-fit: cover;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}
/* Category grid */
.category-card {
    border: 0;
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
    transition: transform .18s ease, box-shadow .18s ease;
}

    .category-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(0,0,0,.12);
    }
/* Square images, no black bars */
.category-img {
    aspect-ratio: 1 / 1;
    width: 100%;
    object-fit: cover;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}


:root {
    --brand: #08c26b; /* brand accent green - tweak */
    --ink: #0f172a; /* dark text */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-heading: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Modern hero title */
.hero-title {
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .01em;
    margin: 12px auto 24px;
    text-wrap: balance;
    font-size: clamp(28px, 2.5vw + 1rem, 56px);
}

    /* Variant A: gradient text */
    .hero-title.is-gradient {
        background: linear-gradient(90deg, var(--ink) 0%, #3b82f6 40%, var(--brand) 90%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    /* Variant B: underline accent (solid text) */
    .hero-title.is-underline {
        color: var(--ink);
        position: relative;
    }

        .hero-title.is-underline::after {
            content: "";
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: -10px;
            width: clamp(120px, 16vw, 260px);
            height: 6px;
            border-radius: 999px;
            background: linear-gradient(90deg, #3b82f6, var(--brand));
        }

/* Optional: make "23 Sports NZ" not wrap */
.nowrap {
    white-space: nowrap;
}

/* --- Full-bleed helper: break out of .container and span the viewport --- */
.full-bleed {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
}

body {
    overflow-x: hidden;
}
/* avoid horizontal scrollbar on some browsers */

/* --- Brand Marquee --- */
.brand-marquee {
    background: #0f1115; /* dark strip */
    color: #fff;
    padding: 16px 0 12px;
    margin-top: 16px;
}

.brand-heading {
    font: 700 clamp(16px,1.4vw,20px)/1.2 "Inter", system-ui, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0 0 6px;
}

.marquee {
    overflow: hidden;
    position: relative;
}

.marquee-track {
    display: flex;
    align-items: center;
    gap: clamp(36px, 6vw, 90px);
    min-width: max-content;
    list-style: none; /* ✅ no dots */
    margin: 0; /* ✅ remove default UL margin */
    padding: 0 clamp(12px, 2vw, 24px);
    animation: marquee-scroll var(--marquee-duration, 28s) linear infinite;
}

.marquee:hover .marquee-track {
    animation-play-state: paused;
}

.marquee-item {
    list-style: none;
}

    .marquee-item img {
        height: clamp(28px, 4.5vw, 60px);
        width: auto;
        display: block;
        filter: grayscale(100%) contrast(1.1) opacity(.88);
        transition: filter .2s ease, transform .2s ease;
    }

        .marquee-item img:hover {
            filter: none;
            transform: translateY(-2px);
        }

@keyframes marquee-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
    /* because we duplicated the list */
}
/* Bigger, responsive navbar logo */
.brand-logo {
    height: clamp(36px, 3.5vw + 8px, 56px); /* ← tweak max if you want even bigger */
    width: auto;
    display: block; /* prevents vertical misalignment */
}

/* Optional: tidy up brand text next to the logo */
.brand-text {
    font-weight: 700;
    letter-spacing: .2px;
}

/* If the taller logo makes the bar too tall, slightly reduce navbar padding */
.navbar {
    padding-top: .4rem;
    padding-bottom: .4rem;
}