/*
 * site.css — Club Design Tokens & Structural Styles
 *
 * Change the 7 variables below to match your club's colors.
 * The deployed custom.css (generated from Admin › Theme › Styles)
 * can override :root to apply club-specific values from the database.
 */

:root {
    --club-primary:        #003366;   /* Navbar, topbar background          */
    --club-primary-text:   #ffffff;   /* Text/icons on primary background   */
    --club-secondary:      #ffd700;   /* Accent: hover highlights, borders  */
    --club-secondary-text: #000000;   /* Text on secondary (accent) color   */
    --club-banner-bg:      #e8f0f8;   /* Header/banner area background      */
    --club-footer-bg:      #1a1a2e;   /* Footer background                  */
    --club-footer-text:    #f0f0f0;   /* Footer text and links              */
}

/* ── Top bar ──────────────────────────────────────────────────────────────── */
.site-topbar {
    background: var(--club-primary);
    color: var(--club-primary-text);
    font-size: 0.85rem;
}
.site-topbar a {
    color: var(--club-primary-text);
    text-decoration: none;
    opacity: 0.85;
}
.site-topbar a:hover { opacity: 1; }
.site-lang-selector strong { font-weight: 700; }

/* ── Banner ───────────────────────────────────────────────────────────────── */
.site-banner {
    background: var(--club-banner-bg);
    border-bottom: 3px solid var(--club-secondary);
}
.site-name {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--club-primary);
    line-height: 1.2;
}
.site-logo {
    max-height: 90px;
    width: auto;
}

/* ── Navigation ───────────────────────────────────────────────────────────── */
.site-nav {
    background: var(--club-primary);
    padding-top: 0;
    padding-bottom: 0;
}
.site-nav .nav-link {
    color: var(--club-primary-text) !important;
    font-weight: 500;
    padding: 0.65rem 1rem;
    border-radius: 0;
    transition: background 0.15s ease, color 0.15s ease;
}
.site-nav .nav-link:hover,
.site-nav .nav-link.active {
    background: var(--club-secondary);
    color: var(--club-secondary-text) !important;
}

/* ── Main content ─────────────────────────────────────────────────────────── */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main { flex: 1 0 auto; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer {
    background: var(--club-footer-bg);
    color: var(--club-footer-text);
    flex-shrink: 0;
}
.site-footer-link {
    color: var(--club-footer-text);
    text-decoration: none;
    font-size: 0.875rem;
}
.site-footer-link:hover { opacity: 0.8; }

/* ── Topbar dropdown — force dark text on white background ───────────────── */
.site-topbar .dropdown-menu {
    --bs-dropdown-bg:               #ffffff;
    --bs-dropdown-color:            #212529;
    --bs-dropdown-link-color:       #212529;
    --bs-dropdown-link-hover-color: #212529;
    --bs-dropdown-link-hover-bg:    rgba(0, 0, 0, 0.06);
    --bs-dropdown-link-active-bg:   var(--club-primary);
    --bs-dropdown-link-active-color: var(--club-primary-text);
}
/* Belt-and-suspenders: explicit rule for any browser not honouring the vars */
.site-topbar .dropdown-menu .dropdown-item {
    color: #212529 !important;
}
.site-topbar .dropdown-menu .dropdown-item:hover,
.site-topbar .dropdown-menu .dropdown-item:focus {
    color: #212529 !important;
    background-color: rgba(0, 0, 0, 0.06);
}

/* ── Topbar — Sign Up accent button ──────────────────────────────────────── */
.btn-signup {
    background-color: var(--club-secondary);
    color:            var(--club-secondary-text);
    border-color:     var(--club-secondary);
    font-weight: 600;
}
.btn-signup:hover,
.btn-signup:focus {
    background-color: var(--club-secondary);
    color:            var(--club-secondary-text);
    border-color:     var(--club-secondary);
    opacity: 0.85;
}

/* ── Auth cards (login / register) ───────────────────────────────────────── */
.auth-card-header {
    background-color: var(--club-primary);
    color:            var(--club-primary-text);
}
.auth-card-header h5 { color: var(--club-primary-text); }

/* ── Utility tweaks ───────────────────────────────────────────────────────── */
.form-label.required::after {
    content: ' *';
    color: #dc3545;
}