/* ============================================================
   TOPHAT VIP — Brand Color Patch (v5)
   Page header + home hero: #000325 base, gradient top #000344.
   Loads LAST. Uses explicit hex + split background-* (no gradient vars).
   ============================================================ */

:root {
    --brand-deep: #000325;
    --brand-header-light: #000344;
    --brand-deep-rgb: 0, 3, 37;
}

/* White page canvas; padding-top reserves space for fixed nav */
body {
    background-color: #fff;
    padding-top: 4rem !important;
}

main {
    background-color: #fff;
}

/* Marketing pages: white background (header strips keep brand gradient separately) */
.page-section:not(.spa-page):not(#page-members-login):not(#page-members-register):not(#page-members) {
    background-color: #fff;
}

/* Shared header gradient — color + image kept separate so shorthand never clears fill */
.page-section:not(.spa-page) > .bg-navy.text-center,
#page-contact > .bg-navy.text-center,
#page-booking-request-submitted > .bg-navy.text-center,
#page-members-login.page-section,
#page-members-register.page-section,
#page-members.page-section {
    background-color: #000325 !important;
    background-image: linear-gradient(
        to bottom,
        #000344 0,
        #000325 30px,
        #000325 100%
    ) !important;
}

/* Bleed headers under fixed nav (header bg covers nav gap — no white bar) */
.page-section:not(.spa-page) > .bg-navy.text-center:first-child,
#page-contact > .bg-navy.text-center:first-child,
#page-booking-request-submitted > .bg-navy.text-center:first-child {
    margin-top: -4rem;
    padding-top: calc(5rem + 4rem) !important;
}

@media (min-width: 768px) {
    .page-section:not(.spa-page) > .bg-navy.text-center:first-child,
    #page-contact > .bg-navy.text-center:first-child,
    #page-booking-request-submitted > .bg-navy.text-center:first-child {
        padding-top: calc(7rem + 4rem) !important;
    }
}

#page-members-login.page-section,
#page-members-register.page-section,
#page-members.page-section {
    margin-top: -4rem;
    padding-top: calc(5rem + 4rem) !important;
}

/* Dashboard/member app pages: keep full-page navy shell */
.spa-page.page-section {
    background-color: #0A1628 !important;
    background-image: none !important;
}

/* ── Replace black utility backgrounds project-wide ── */
.bg-black {
    background-color: #170282 !important;
}

.bg-black\/20 {
    background-color: rgba(23, 2, 130, 0.2) !important;
}

.bg-black\/30 {
    background-color: rgba(23, 2, 130, 0.3) !important;
}

.from-black\/40 {
    --gradient-from: rgba(23, 2, 130, 0.4);
    --gradient-stops: var(--gradient-from), var(--gradient-to, rgba(23, 2, 130, 0));
}

.via-black\/100 {
    --gradient-stops: var(--gradient-from), rgba(23, 2, 130, 1), var(--gradient-to, rgba(23, 2, 130, 1));
}

.to-black\/100 {
    --gradient-to: rgba(23, 2, 130, 1);
}

.bg-gradient-to-b.from-black\/40 {
    background-color: #170282 !important;
    background-image: linear-gradient(
        to bottom,
        rgba(23, 2, 130, 0.4),
        rgba(23, 2, 130, 0.85),
        #170282
    ) !important;
}

/* ── Home hero: compact 50px padding, brand header gradient ── */
#page-home .hero-diagonal,
#page-home .hero-diagonal.bg-black {
    min-height: unset !important;
    height: auto !important;
    margin-top: -4rem;
    padding-top: calc(50px + 4rem) !important;
    padding-bottom: 50px !important;
    background-color: #000325 !important;
    background-image: linear-gradient(
        to bottom,
        #000344 0,
        #000325 30px,
        #000325 100%
    ) !important;
}

#page-home .hero-diagonal.min-h-\[100vh\],
#page-home .hero-diagonal.md\:min-h-screen {
    min-height: unset !important;
}

#page-home .hero-diagonal::before {
    opacity: 0.35;
}

/* Remove custom.css 120px white bottom wash (white bar below hero) — fade handled in site-visual-refinements.css */

/* Photo slot + gradient overlay: solid brand fill (utility hero-diagonal is transparent) */
#page-home .hero-diagonal > .absolute.inset-0 {
    background-color: #000325 !important;
}

#page-home .hero-diagonal > .absolute.bg-gradient-to-b {
    background-color: transparent !important;
    background-image: linear-gradient(
        to bottom,
        rgba(0, 3, 37, 0.25),
        rgba(0, 3, 37, 0.75),
        #000325
    ) !important;
    opacity: 1 !important;
}