/*
    CrossCourt web app styles.
    Brand palette matches CrossCourt.Admin (crosscourt-theme.css):
        Sunset Yellow #FFB400 | Black #000000 | Grey #BDBDBD | White #FFFFFF
    All colours defined once as CSS variables — never hardcode below.
*/
:root {
    --cc-yellow: #FFB400;
    --cc-yellow-active: #E09E00; /* hover / pressed */
    --cc-yellow-light: #FFF6E0; /* subtle tint */
    --cc-black: #000000;
    --cc-grey: #BDBDBD;
    --cc-white: #FFFFFF;
    --cc-body-bg: #F9F9F9;
    /* Black on yellow: 11.7:1 contrast (white fails WCAG AA) */
    --cc-on-yellow: #000000;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

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

body {
    margin-bottom: 60px;
    background-color: var(--cc-body-bg);
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* --- Bootstrap re-skin via variables --- */
.btn-primary {
    background-color: var(--cc-yellow);
    border-color: var(--cc-yellow);
    color: var(--cc-on-yellow);
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active,
    .btn-primary:first-child:active, .btn-primary.active {
        background-color: var(--cc-yellow-active);
        border-color: var(--cc-yellow-active);
        color: var(--cc-on-yellow);
    }

    .btn-primary:disabled {
        background-color: var(--cc-grey);
        border-color: var(--cc-grey);
        color: var(--cc-black);
    }

a {
    color: var(--cc-yellow-active);
}

    a:hover {
        color: var(--cc-black);
    }

/* --- Header / footer --- */
.cc-navbar {
    background-color: var(--cc-black) !important;
    border-bottom: 3px solid var(--cc-yellow);
}

    .cc-navbar .navbar-brand img {
        height: 36px;
    }

    .cc-navbar .nav-link {
        color: var(--cc-white);
    }

        .cc-navbar .nav-link:hover,
        .cc-navbar .nav-link.active {
            color: var(--cc-yellow);
        }

    .cc-navbar .navbar-toggler {
        border-color: var(--cc-grey);
    }

    .cc-navbar .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
    background-color: var(--cc-black);
    color: var(--cc-grey);
}

    .footer a {
        color: var(--cc-yellow);
        text-decoration: none;
    }

        .footer a:hover {
            color: var(--cc-white);
        }

/* --- Landing page --- */
.cc-hero {
    background-color: var(--cc-black);
    color: var(--cc-white);
    border-radius: 1rem;
    padding: 4rem 2rem;
    text-align: center;
}

    .cc-hero .cc-hero-logo {
        height: 84px;
        margin-bottom: 1.5rem;
    }

    .cc-hero h1 {
        font-weight: 700;
    }

    .cc-hero .cc-accent {
        color: var(--cc-yellow);
    }

    .cc-hero p.lead {
        color: var(--cc-grey);
        max-width: 640px;
        margin: 1rem auto 2rem;
    }

.cc-feature-card {
    border: 1px solid var(--cc-grey);
    border-top: 4px solid var(--cc-yellow);
    border-radius: .75rem;
    background: var(--cc-white);
    height: 100%;
    padding: 1.5rem;
}

    .cc-feature-card h3 {
        font-size: 1.1rem;
        font-weight: 600;
    }

    .cc-feature-card p {
        color: #555;
        margin-bottom: 0;
    }

.cc-store-badges {
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
}

    .cc-store-badges img {
        height: 48px;
    }

/* Hide the footer when a fixed bottom bar (scoring leaderboard) is active */
body.cc-has-leaderboard .footer {
    display: none;
}

body.cc-has-leaderboard {
    margin-bottom: 0; /* reclaim the 60px reserved for the footer */
}