/* =========================================================
   CLUBSHUB - HEADER & NAVIGATION MENU (all pages)
   Shared Components > User Interface > CSS File URLs
   ========================================================= */

:root {
    --nv-navy: #0d2530;
    --nv-navy-2: #102f3b;
    --nv-teal: #07556f;
    --nv-green: #1fa463;
    --nv-gold: #f2c14e;
}

/* ---------- Header bar ---------- */

.t-Header {
    background:
        radial-gradient(circle at 85% -120%, rgba(31, 164, 99, .25) 0, rgba(31, 164, 99, 0) 55%),
        linear-gradient(120deg, var(--nv-navy) 0%, var(--nv-navy-2) 55%, #0f3d4a 100%) !important;
    box-shadow: 0 6px 24px rgba(4, 22, 30, .25);
    transition: box-shadow .25s ease;
}

body.nv-scrolled .t-Header {
    box-shadow: 0 10px 30px rgba(4, 22, 30, .38);
}

.t-Header-logo-link img,
.t-Header-logo img {
    border-radius: 10px;
    transition: transform .3s ease, filter .3s ease;
}

.t-Header-logo-link:hover img {
    transform: rotate(-6deg) scale(1.06);
    filter: drop-shadow(0 0 10px rgba(31, 164, 99, .55));
}

/* ---------- Menu bar (no positioning: APEX places the dropdowns) ---------- */

.t-Header-nav {
    background-color: rgba(255, 255, 255, .03) !important;
    /* animated brand line along the bottom, drawn as a background */
    background-image: linear-gradient(90deg, #07556f, #1fa463, #f2c14e, #1fa463, #07556f) !important;
    background-repeat: no-repeat !important;
    background-size: 200% 2px !important;
    background-position: 0 100% !important;
    border-top: 1px solid rgba(255, 255, 255, .06);
    animation: nv-flow 12s linear infinite;
}

@keyframes nv-flow {
    from { background-position: 0 100%; }
    to   { background-position: 200% 100%; }
}

.t-Header-nav .a-MenuBar,
.t-Header-nav .a-MenuBar-items {
    background-color: transparent !important;
    border: 0 !important;
}

.t-Header-nav .a-MenuBar-item {
    border: 0 !important;
    border-radius: 12px;
    background-color: transparent !important;
    /* underline drawn as a background, grows on hover */
    background-image: linear-gradient(90deg, #1fa463, #f2c14e) !important;
    background-repeat: no-repeat !important;
    background-position: 50% calc(100% - 4px) !important;
    background-size: 0 3px !important;
    transition: background-color .2s ease, background-size .25s ease;
}

.t-Header-nav .a-MenuBar-label {
    color: rgba(255, 255, 255, .82) !important;
    font-size: 14.5px;
    font-weight: 600;
    transition: color .2s ease;
}

/* Hover / keyboard focus */
.t-Header-nav .a-MenuBar-item:hover,
.t-Header-nav .a-MenuBar-item.is-focused {
    background-color: rgba(255, 255, 255, .08) !important;
    background-size: 56% 3px !important;
}

.t-Header-nav .a-MenuBar-item:hover .a-MenuBar-label,
.t-Header-nav .a-MenuBar-item.is-focused .a-MenuBar-label {
    color: #ffffff !important;
}

/* Current page (APEX class, or nv-current set by clubshub-nav.js) */
.t-Header-nav .a-MenuBar-item.is-current,
.t-Header-nav .a-MenuBar-item.nv-current {
    background-color: rgba(255, 255, 255, .12) !important;
    background-size: 70% 3px !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}

.t-Header-nav .a-MenuBar-item.is-current .a-MenuBar-label,
.t-Header-nav .a-MenuBar-item.nv-current .a-MenuBar-label {
    color: #ffffff !important;
    font-weight: 800;
}

/* Open dropdown parent */
.t-Header-nav .a-MenuBar-item.is-expanded {
    background-color: rgba(255, 255, 255, .10) !important;
}

/* Dropdown arrow area */
.t-Header-nav .a-MenuBar-item .a-MenuBar-button {
    color: rgba(255, 255, 255, .7) !important;
    background-color: transparent !important;
    border: 0 !important;
}

/* ---------- Dropdown menus (look only, no positioning or animation) ---------- */

.a-Menu {
    border: 1px solid #e3e9ed !important;
    border-radius: 14px !important;
    background-color: #ffffff !important;
    box-shadow: 0 18px 40px rgba(4, 22, 30, .22) !important;
    overflow: hidden;
}

.a-Menu .a-Menu-label {
    color: #1d2a31 !important;
    font-size: 14px;
    font-weight: 600;
}

.a-Menu .a-Menu-item.is-focused,
.a-Menu .a-Menu-item:hover {
    background-color: #e8f2f5 !important;
}

.a-Menu .a-Menu-item.is-focused .a-Menu-label,
.a-Menu .a-Menu-item:hover .a-Menu-label {
    color: var(--nv-teal) !important;
}

/* ---------- Right side: Install App, language ---------- */

.t-Header-navBar .t-Button--header,
.t-NavigationBar .t-Button--header {
    border-radius: 12px !important;
    transition: background-color .2s ease;
}

.t-Header-navBar .t-Button--header:hover,
.t-NavigationBar .t-Button--header:hover {
    background-color: rgba(255, 255, 255, .10) !important;
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .t-Header-nav { animation: none; }
    .t-Header-nav .a-MenuBar-item { transition: none; }
}