/**
 * EFFTABS Theme Override - Navy + White + Red CTA
 * 
 * Palette:
 *   Background: White
 *   Headline/Text: Navy #0A2A66
 *   Primary CTA: Red #D32F2F (unchanged)
 *   Secondary Button: White + Navy border
 *   Header: Navy #0A2A66 background
 *
 * TO REVERT: Remove the <link> to this file from all HTML pages.
 */

/* ── Headlines & Text → Navy ─────────────────────────────────────────────── */
:root {
    --heading-color: 220, 60%, 22%; /* Navy as HSL for var() compatibility */
    --navy: #0A2A66;
}

.section-heading,
h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5,
.text-heading {
    color: #0A2A66 !important;
}

/* ── Header → Navy Background ────────────────────────────────────────────── */
.header {
    background-color: #0A2A66 !important;
}

.header.fixed-header {
    background-color: #0A2A66 !important;
}

.header .nav-menu__link,
.header .nav-menu__link:hover {
    color: #fff !important;
}

.header .logo a {
    color: #fff !important;
}

.header .toggle-mobileMenu {
    color: #fff !important;
}

/* Header inner page (product pages) */
.header-inner-page .header-box-inner {
    background-color: #0A2A66 !important;
}

.header-inner-page .nav-menu__link {
    color: #fff !important;
}

/* ── "Get Demo" button stays Red ─────────────────────────────────────────── */
/* Already using var(--main-600) which is red - no change needed */

/* ── "Become an Associate" → White + Navy border ─────────────────────────── */
.header a[href="become-an-associate"],
.header a[href*="become-an-associate"] {
    background: #fff !important;
    border: 2px solid #0A2A66 !important;
    color: #0A2A66 !important;
}

.header a[href="become-an-associate"]:hover,
.header a[href*="become-an-associate"]:hover {
    background: #0A2A66 !important;
    color: #fff !important;
}

/* Hero section "Become an Associate" button */
a[href="become-an-associate"].btn-black,
a[href*="become-an-associate"].btn-black {
    background-color: #0A2A66 !important;
    color: #fff !important;
}

a[href="become-an-associate"].btn-black:hover,
a[href*="become-an-associate"].btn-black:hover {
    background-color: #081d4a !important;
    color: #fff !important;
}

/* ── Hero "Get Demo" button → Navy background (non-header instances) ─────── */
.banner .btn-main,
.banner .btn-black {
    background-color: #0A2A66 !important;
}

/* ── All black buttons → Navy Blue ───────────────────────────────────────── */
.btn-black {
    background-color: #0A2A66 !important;
    color: #fff !important;
}

.btn-black:hover {
    background-color: #081d4a !important;
    color: #fff !important;
}

.btn-black .button__label {
    color: #fff !important;
}

.btn-black:hover .button__label {
    color: #fff !important;
}

.btn-black .button__flair::before {
    background-color: #081d4a !important;
}

/* ── Megamenu dropdown ───────────────────────────────────────────────────── */
.megamenu {
    background: #fff !important;
}

.megamenu-item__text h6 {
    color: #0A2A66 !important;
}

/* ── Footer stays dark (no change) ───────────────────────────────────────── */

/* ── Preloader → Navy dots on white background ───────────────────────────── */
.preloader {
    background-color: #fff !important;
}

.preloader .cssload-loading i {
    background: #0A2A66 !important;
}

/* ── Disable AOS animations to prevent sections hiding on some screens ───── */
[data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* ── Orbit center badge text ─────────────────────────────────────────────── */
.center-badge .years,
.center-badge .years-label {
    color: #fff !important;
}
.center-badge .years-desc {
    color: rgba(255,255,255,0.8) !important;
}

/* ── Offer section card text ─────────────────────────────────────────────── */
.offer .group-item h4 {
    color: #fff !important; /* keep white on dark cards */
}

/* ── General body text refinement ────────────────────────────────────────── */
body {
    color: #333 !important;
}

p {
    color: #4a5568 !important;
}

.text-neutral-500 {
    color: #4a5568 !important;
}

/* ── Protect white text on colored backgrounds ───────────────────────────── */
.bg-main-600 h1, .bg-main-600 h2, .bg-main-600 h3, .bg-main-600 h4, .bg-main-600 h5, .bg-main-600 h6,
.bg-main-600 .text-heading,
.bg-main-600 span,
.bg-main-600 p,
.bg-main-two-600 h1, .bg-main-two-600 h2, .bg-main-two-600 h3, .bg-main-two-600 h4, .bg-main-two-600 h5, .bg-main-two-600 h6,
.bg-main-two-600 .text-heading,
.bg-main-two-600 p,
.bg-black h1, .bg-black h2, .bg-black h3, .bg-black h4, .bg-black h5, .bg-black h6,
.bg-black .text-heading,
.bg-black span,
.bg-black p,
.bg-black .h1, .bg-black .counter,
.bg-neutral-900 h1, .bg-neutral-900 h2, .bg-neutral-900 h3, .bg-neutral-900 h4, .bg-neutral-900 h5, .bg-neutral-900 h6,
.bg-neutral-900 .text-heading,
.bg-neutral-900 span,
.bg-neutral-900 p,
.center-badge span,
.offer-card-4 h4, .offer-card-4 span, .offer-card-4 p,
.tw-min-h-184-px.bg-main-600 h3,
.tw-min-h-184-px.bg-main-600 p,
.tw-min-h-184-px.bg-main-600 .h1,
.tw-min-h-184-px.bg-black h3,
.tw-min-h-184-px.bg-black p,
.tw-min-h-184-px.bg-black .h1,
.tw-min-h-184-px.bg-black .counter {
    color: #fff !important;
}