/*
 * brand-theme.css — TJC Partners
 * ──────────────────────────────────────────────────────────
 * Light background design. Oxford Blue used for hero + accent sections only.
 *
 * Brand palette
 *   Oxford Blue   #001b3d
 *   Champagne     #eee0cb
 *   Bittersweet   #fb7264  (primary accent / CTA)
 *   Navy Blue     #003170  (secondary accent)
 */


/* ══════════════════════════════════════════════════
   1. PAGE BACKGROUND — warm off-white
   ══════════════════════════════════════════════════ */

main.overflow-hidden {
    background-color: #faf8f5 !important;
    background-image: none !important;
}

/* Section wrappers: let white/light backgrounds through */
[class*="isolate"][class*="bg-white"] {
    background-color: transparent !important;
}

/* Remove gradient-to-white overlays that were designed for dark bg */
[class*="from-white"][class*="bg-gradient-to-b"] {
    background: transparent !important;
}

/* Hide the dark decorative blobs — designed for dark bg, look wrong on light */
[class*="blur-3xl"][class*="rounded-full"] {
    display: none !important;
}


/* ══════════════════════════════════════════════════
   2. DARK SECTIONS — hero, orb, CTA panels
   Mark sections with data-theme="dark" in HTML
   ══════════════════════════════════════════════════ */

[data-theme="dark"] {
    background-color: #001b3d !important;
}

/* Step 3 — Hero: radial glow top-right breaks up flat darkness */
section[data-theme="dark"]:first-of-type {
    background: radial-gradient(
        ellipse 120% 65% at 78% 8%,
        #002d62 0%,
        #001b3d 52%,
        #000c1c 100%
    ) !important;
}

/* Step 3 — Orb section: subtle deepening gradient differentiates from hero */
section[data-theme="dark"]:not(:first-of-type) {
    background: linear-gradient(
        180deg,
        #001b3d 0%,
        #001225 55%,
        #000d1b 100%
    ) !important;
}

/* Text inside dark sections → white / champagne */
[data-theme="dark"] [class*="text-[#192532]"] { color: rgba(255,255,255,0.95) !important; }
[data-theme="dark"] [class*="text-[#303b47]"] { color: rgba(255,255,255,0.88) !important; }
[data-theme="dark"] [class*="text-[#4d5560]"] { color: rgba(255,255,255,0.72) !important; }
[data-theme="dark"] [class*="text-[#646b74]"] { color: rgba(255,255,255,0.58) !important; }
[data-theme="dark"] [class*="text-[#90959b]"] { color: rgba(255,255,255,0.45) !important; }
[data-theme="dark"] [class*="text-[#00134d]"] { color: #eee0cb !important; }
[data-theme="dark"] [class*="text-[#00379d]"] { color: #fb7264 !important; }

/* Cards inside dark sections → glass */
[data-theme="dark"] [class*="bg-white/70"],
[data-theme="dark"] [class*="bg-white/75"],
[data-theme="dark"] [class*="bg-white/60"],
[data-theme="dark"] div[class*=" bg-white "],
[data-theme="dark"] div[class$=" bg-white"] {
    background-color: rgba(255,255,255,0.09) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.28),
                inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Borders inside dark sections */
[data-theme="dark"] [class*="border-black/10"] {
    border-color: rgba(255,255,255,0.15) !important;
}
[data-theme="dark"] [class*="border-black/20"] {
    border-color: rgba(255,255,255,0.22) !important;
}

/* Section headings inside dark sections → white */
[data-theme="dark"] h1[class*="text-[88px]"],
[data-theme="dark"] h1[class*="text-[64px]"],
[data-theme="dark"] h1[class*="text-[44px]"] { color: #ffffff !important; }
[data-theme="dark"] h2[class*="text-3xl"],
[data-theme="dark"] h2[class*="text-4xl"],
[data-theme="dark"] h2[class*="text-5xl"],
[data-theme="dark"] h2[class*="text-6xl"] { color: #ffffff !important; }

/* Ghost buttons inside dark sections */
[data-theme="dark"] a[class*="bg-white/70"],
[data-theme="dark"] a[class*="bg-white/70"][class*="backdrop-blur"] {
    background-color: rgba(238,224,203,0.10) !important;
    border-color: rgba(238,224,203,0.32) !important;
    color: #eee0cb !important;
    transition: all 0.18s ease !important;
}
[data-theme="dark"] a[class*="bg-white/70"]:hover {
    background-color: rgba(238,224,203,0.18) !important;
    border-color: rgba(238,224,203,0.55) !important;
    transform: translateY(-1px) !important;
}

/* Input fields inside dark sections */
[data-theme="dark"] input[class*="bg-white"],
[data-theme="dark"] textarea[class*="bg-white"] {
    background-color: rgba(255,255,255,0.10) !important;
    border-color: rgba(255,255,255,0.18) !important;
    color: rgba(255,255,255,0.92) !important;
}
[data-theme="dark"] input[class*="bg-white"]::placeholder,
[data-theme="dark"] textarea[class*="bg-white"]::placeholder {
    color: rgba(255,255,255,0.38) !important;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus {
    border-color: #fb7264 !important;
    outline-color: rgba(251,114,100,0.35) !important;
}
[data-theme="dark"] label[class*="text-[#303b47]"] { color: rgba(255,255,255,0.78) !important; }
[data-theme="dark"] p[class*="text-[#646b74]"] { color: rgba(255,255,255,0.50) !important; }

/* Contact info cards in dark sections */
[data-theme="dark"] [class*="bg-black/[0.02]"],
[data-theme="dark"] [class*="bg-black/[0.03]"] {
    background-color: rgba(238,224,203,0.08) !important;
}
/* status dot — Bittersweet coral, on-brand */
[data-theme="dark"] span[class*="bg-[#fb7264]"] {
    background-color: #fb7264 !important;
}

/* Tinted icon containers in dark sections */
[data-theme="dark"] [class*="bg-[#00379d]/10"],
[data-theme="dark"] [class*="bg-[#336dff]/10"] {
    background-color: rgba(251,114,100,0.16) !important;
}
[data-theme="dark"] [class*="bg-[#00379d]/10"] i,
[data-theme="dark"] [class*="bg-[#336dff]/10"] i {
    color: #fb7264 !important;
}


/* ══════════════════════════════════════════════════
   3. TEXT — light sections (Tailwind defaults are dark, just a few overrides)
   ══════════════════════════════════════════════════ */

/* ✦ markers, links, eyebrow dots → Bittersweet coral accent */
[class*="text-[#00379d]"]  { color: #fb7264 !important; }

/* h1/h2 headings on light sections → Oxford Blue */
h1[class*="text-[88px]"],
h1[class*="text-[64px]"],
h1[class*="text-[44px]"] { color: #001b3d !important; }

h2[class*="text-3xl"],
h2[class*="text-4xl"],
h2[class*="text-5xl"] { color: #001b3d !important; }


/* ══════════════════════════════════════════════════
   4. CTA BUTTONS — bg-[#00134d] → Bittersweet
   ══════════════════════════════════════════════════ */

a[class*="bg-[#00134d]"],
button[class*="bg-[#00134d]"] {
    background-color: #fb7264 !important;
    color: #001b3d !important;
    box-shadow: 0 2px 10px rgba(251,114,100,0.22) !important;
    transition: background-color 0.18s ease,
                transform 0.14s ease,
                box-shadow 0.18s ease !important;
}
a[class*="bg-[#00134d]"]:hover,
button[class*="bg-[#00134d]"]:hover {
    background-color: #fc8474 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(251,114,100,0.38) !important;
}
a[class*="bg-[#00134d]"]:active,
button[class*="bg-[#00134d]"]:active {
    background-color: #e95e4e !important;
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(251,114,100,0.18) !important;
}
a[class*="bg-[#00134d]"]:focus-visible,
button[class*="bg-[#00134d]"]:focus-visible {
    outline: 2px solid #fb7264 !important;
    outline-offset: 3px !important;
}

/* Small icon containers with bg-[#00134d] → light tinted */
div[class*="bg-[#00134d]"][class*="h-11"],
div[class*="bg-[#00134d]"][class*="h-12"] {
    background-color: rgba(0,49,112,0.10) !important;
}
div[class*="bg-[#00134d]"][class*="h-11"] i,
div[class*="bg-[#00134d]"][class*="h-12"] i {
    color: #003170 !important;
}

/* Other dark divs (contact location card etc.) */
div[class*="bg-[#00134d]"]:not([class*="h-11"]):not([class*="h-12"]):not(a) {
    background-color: #001b3d !important;
}


/* ══════════════════════════════════════════════════
   5. SECONDARY GHOST BUTTONS — light sections
   ══════════════════════════════════════════════════ */

a[class*="bg-white/70"][class*="backdrop-blur"],
a[class*="bg-white/70"][class*="border"] {
    background-color: rgba(0,27,61,0.06) !important;
    border-color: rgba(0,27,61,0.22) !important;
    color: #001b3d !important;
    transition: all 0.18s ease !important;
}
a[class*="bg-white/70"][class*="backdrop-blur"]:hover,
a[class*="bg-white/70"][class*="border"]:hover {
    background-color: rgba(0,27,61,0.11) !important;
    border-color: rgba(0,27,61,0.38) !important;
    transform: translateY(-1px) !important;
}


/* ══════════════════════════════════════════════════
   6. ACCENT BACKGROUNDS
   ══════════════════════════════════════════════════ */

[class*="bg-[#00379d]"]:not([class*="blur-3xl"]) {
    background-color: #003170 !important;
}
[class*="bg-[#336dff]"]:not([class*="blur-3xl"]) {
    background-color: #003170 !important;
}
[class*="bg-[#ff7264]"] {
    background-color: #fb7264 !important;
}

/* Dot indicators */
span[class*="h-2"][class*="w-2"][class*="bg-[#00379d]"],
span[class*="h-2"][class*="w-2"][class*="bg-[#336dff]"] {
    background-color: #003170 !important;
}


/* ══════════════════════════════════════════════════
   7. FORM INPUTS — light sections
   ══════════════════════════════════════════════════ */

input[class*="bg-white"],
textarea[class*="bg-white"],
select[class*="bg-white"] {
    background-color: #ffffff !important;
    border-color: rgba(0,27,61,0.15) !important;
    color: #001b3d !important;
}
input[class*="bg-white"]::placeholder,
textarea[class*="bg-white"]::placeholder {
    color: rgba(0,27,61,0.38) !important;
}
input[class*="bg-white"]:focus,
textarea[class*="bg-white"]:focus {
    border-color: #fb7264 !important;
    outline-color: rgba(251,114,100,0.35) !important;
}


/* ══════════════════════════════════════════════════
   8. NAVIGATION BAR
   ══════════════════════════════════════════════════ */

/* Steps 1+2 — Always show nav pill, even on initial transparent state.
   Logo (Oxford Blue mark) is invisible against the dark hero — forcing the
   pill on load keeps it visible and nav links readable from the first frame. */
#navShell.bg-transparent {
    background-color: rgba(250, 248, 245, 0.95) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(0, 27, 61, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 27, 61, 0.06) !important;
}

/* Nav link text in forced-pill / transparent state */
#navShell.bg-transparent [class*="text-[#303b47]"],
#navShell.bg-transparent [class*="text-[#192532]"],
#navShell.bg-transparent [class*="text-[#646b74]"] {
    color: #001b3d !important;
}
#navShell.bg-transparent [class*="text-[#00134d]"] {
    color: #001b3d !important;
}

/* Scrolled state — light frosted glass */
#navShell[class*="bg-white"] {
    background-color: rgba(250,248,245,0.95) !important;
    border-color: rgba(0,27,61,0.10) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
}

/* Nav link text on scrolled (light) nav */
#navShell[class*="bg-white"] [class*="text-[#303b47]"],
#navShell[class*="bg-white"] [class*="text-[#192532]"],
#navShell[class*="bg-white"] [class*="text-[#646b74]"] {
    color: #001b3d !important;
}
#navShell[class*="bg-white"] [class*="text-[#00134d]"] {
    color: #001b3d !important;
}

/* Nav CTA button */
#navShell a[class*="bg-[#00134d]"] {
    background-color: #fb7264 !important;
    color: #001b3d !important;
}

/* Mobile menu panel */
#navShell [class*="bg-white/60"],
#navShell [class*="bg-white/75"] {
    background-color: rgba(250,248,245,0.98) !important;
    border-color: rgba(0,27,61,0.10) !important;
}


/* ══════════════════════════════════════════════════
   9. FOOTER — light background (transparent, sits on #faf8f5)
   Footer.js uses no bg class on the outer element → page bg shows through.
   All text must therefore be dark, not white.
   ══════════════════════════════════════════════════ */

/* Primary text — headings, nav links, contact items */
#footer [class*="text-[#192532]"],
#footer [class*="text-[#00134d]"] {
    color: #001b3d !important;
}

/* Secondary / muted text — address, copyright, bottom links */
#footer [class*="text-[#4d5560]"],
#footer [class*="text-[#646b74]"] {
    color: rgba(0, 27, 61, 0.50) !important;
}

/* Hover — Bittersweet coral, readable on light bg */
#footer a[class*="text-[#00134d]"]:hover,
#footer a[class*="text-[#192532]"]:hover {
    color: #fb7264 !important;
}

/* LinkedIn icon button — subtle dark-tinted glass */
#footer [class*="bg-white/70"] {
    background-color: rgba(0, 27, 61, 0.06) !important;
    border-color: rgba(0, 27, 61, 0.12) !important;
}
#footer [class*="bg-white/70"] i {
    color: #001b3d !important;
}


/* ══════════════════════════════════════════════════
   10. BORDERS — light sections (fine as default)
   ══════════════════════════════════════════════════ */

/* Accent border / ring for focused inputs */
[class*="border-[#00379d]"] {
    border-color: #fb7264 !important;
}
[class*="ring-[#00379d]"] {
    --tw-ring-color: rgba(251,114,100,0.45) !important;
}


/* ══════════════════════════════════════════════════
   11. CHAMPAGNE CTA BAND — white background
   Apply via data-theme="champagne" on the section
   ══════════════════════════════════════════════════ */

[data-theme="champagne"] {
    background-color: #ffffff !important;
}

/* H2 inside champagne band → dark Oxford Blue (same as light sections, override the general h2 rule) */
[data-theme="champagne"] h2[class*="text-3xl"],
[data-theme="champagne"] h2[class*="text-4xl"],
[data-theme="champagne"] h2[class*="text-5xl"] {
    color: #001b3d !important;
}


/* ══════════════════════════════════════════════════
   12. RECRUITMENT PAGE — same light treatment
   Apply dark to the hero section via data-theme="dark"
   ══════════════════════════════════════════════════ */

/* recruitment.html page background */
main.overflow-hidden.bg-white {
    background-color: #faf8f5 !important;
}