/*
Theme Name: IAM Theme (Original Colors)
Description: IAM theme with original iamn.org colors and design
Version: 2.0.0
*/

/* =====================================================
 * ORIGINAL IAM COLOR SCHEME
 * ===================================================== */
:root {
    --iam-gold: #E3A14C;
    --iam-light-gold: #FDF3D0;
    --iam-beige: #F8E3B6;
    --iam-dark-beige: #F4D6A1;
    --iam-cream: #EFD7AA;
    --iam-dark-text: #3D5561;
    --iam-black: #1d1d1d;
    --iam-gray: #505050;
    --iam-green: #8aee8d;
    --iam-red: #C54949;
    --iam-yellow: #ffc107;
    --iam-white: #FFFFFF;
}


/* Toggle Button Style */
/* Toggle Button Style */
.mode-toggle-c {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: background 0.3s;
}

.mode-toggle-c:hover {
    background: rgba(255, 255, 255, 0.1);
}

#iam-theme-toggle {
    cursor: pointer;
    transition: color 0.3s;
    font-size: 20px !important;
    /* color is handled inline in PHP but we should override it here to be safe and dynamic */
    color: #ffffff;
}


/* Ensure global variable application */
body,
.site-header-wrap,
.top-bar {
    transition: background-color 0.3s ease, color 0.3s ease;
}


/* =====================================================
 * GLOBAL STYLES
 * ===================================================== */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--iam-dark-text);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background: var(--iam-white);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Remove container padding in header */
.site-header-wrap .container {
    padding: 0;
    max-width: 100%;
}

/* Links */
a {
    color: var(--iam-gold);
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: var(--iam-dark-beige);
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--iam-black);
    font-weight: 700;
    line-height: 1.2;
    margin-top: 0;
}

h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
}

h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    text-align: center;
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

h4 {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
}

h5 {
    font-size: clamp(1.1rem, 2vw, 1.25rem);
}

h6 {
    font-size: clamp(1rem, 1.5vw, 1rem);
}

h2::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: var(--iam-gold);
    margin: 20px auto 0;
}

/* =====================================================
 * BUTTONS - GOLD PRIMARY
 * ===================================================== */
.wp-block-button__link,
.kb-button,
.button,
button:not(.btn):not(.mya-tab-btn):not(.accordion-button):not(.navbar-toggler):not(.btn-close),
input[type="submit"],
input[type="button"],
.iamn-btn,
a.button {
    background: var(--iam-gold) !important;
    background-color: var(--iam-gold) !important;
    color: var(--iam-white) !important;
    padding: clamp(10px, 2vw, 14px) clamp(16px, 3vw, 28px) !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
    font-size: clamp(14px, 1.5vw, 16px) !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.wp-block-button__link:hover,
.kb-button:hover,
.button:hover,
button:not(.btn):not(.mya-tab-btn):not(.accordion-button):not(.navbar-toggler):not(.btn-close):hover,
input[type="submit"]:hover,
.iamn-btn:hover {
    background: var(--iam-dark-beige) !important;
    background-color: var(--iam-dark-beige) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(227, 161, 76, 0.3);
}

/* =====================================================
 * TOP UTILITY BAR
 * ===================================================== */
.top-bar {
    background: var(--iam-white);
    border-bottom: 1px solid var(--iam-beige);
    padding: 10px 0;
    font-size: 13px;
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-right {
    display: flex;
    gap: 20px;
}

.top-bar-right a {
    color: var(--iam-dark-text);
    text-decoration: none;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
    position: relative;
    transition: color 0.3s;
}

.top-bar-right a:hover {
    color: var(--iam-gold);
}

.top-bar-right a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--iam-gold);
    transition: width 0.3s;
}

.top-bar-right a:hover::after {
    width: 100%;
}

/* =====================================================
 * HEADER & NAVIGATION
 * ===================================================== */
.site-header-wrap {
    background: var(--iam-light-gold);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.site-branding {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}

.site-title {
    margin: 0;
    font-size: 24px;
}

.site-title a {
    color: var(--iam-black);
    text-decoration: none;
}

/* Animated Logo */
.site-branding img,
.custom-logo,
.custom-logo-link img {
    animation: logoFloat 3s ease-in-out infinite;
    max-height: 60px;
    width: auto;
    display: block;
    margin: 0;
}

@keyframes logoFloat {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }
}

.logo-dark {
    display: none !important;
}
.logo-light {
    display: block !important;
}

/* Banner hero heading — light mode defaults (inline style color removed) */
.banner-data-c h1,
.banner-cc h1 {
    color: var(--iam-dark-text);
}
.banner-data-c p.tag,
.banner-cc p.tag,
.banner-data-c .tag {
    color: #6b7280;
}

/* Navigation Menu */
.main-navigation {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
}

.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 5px;
    align-items: center;
}

.nav-menu li {
    margin: 0;
    position: relative;
}

.nav-menu a,
.main-navigation a {
    color: var(--iam-dark-text) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
    padding: 10px 15px !important;
    text-decoration: none !important;
    display: block !important;
    transition: all 0.3s !important;
    border-radius: 4px !important;
}

.nav-menu a:hover,
.main-navigation a:hover,
.nav-menu .current-menu-item>a,
.main-navigation .current-menu-item>a {
    color: var(--iam-white) !important;
    background: var(--iam-gold) !important;
}

/* =====================================================
 * HERO / BANNER SECTION
 * ===================================================== */
.hero-section,
.iamn-hero,
.wp-block-cover {
    background: linear-gradient(135deg, var(--iam-beige) 0%, var(--iam-cream) 100%);
    color: var(--iam-dark-text);
    padding: 100px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-section h1 {
    font-size: 56px;
    font-weight: 800;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: var(--iam-black);
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5);
}

.hero-section p {
    font-size: 20px;
    margin-bottom: 30px;
    color: var(--iam-dark-text);
}

/* Banner Slider */
.iamn-hero {
    position: relative;
    min-height: 500px;
    background: linear-gradient(135deg, var(--iam-beige) 0%, var(--iam-cream) 100%);
    overflow: hidden;
}

.iamn-hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    min-height: 500px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
}

.iamn-hero-slide h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--iam-black);
    text-transform: uppercase;
    letter-spacing: 2px;
    max-width: 900px;
}

.iamn-hero-slide p {
    font-size: 22px;
    margin-bottom: 30px;
    color: var(--iam-dark-text);
    max-width: 700px;
    line-height: 1.6;
}

/* =====================================================
 * CARDS & CONTENT BLOCKS
 * ===================================================== */
.iamn-card,
.iamn-event-card,
.iamn-member-card,
.wp-block-group {
    background: var(--iam-white);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 30px;
    transition: all 0.3s ease;
    border-left: 4px solid var(--iam-gold);
}

.iamn-card:hover,
.iamn-event-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border-left-color: var(--iam-dark-beige);
}

/* Primary Card - Gold Gradient */
.iamn-card-primary {
    background: linear-gradient(135deg, var(--iam-gold) 0%, var(--iam-dark-beige) 100%);
    color: var(--iam-white);
    border-left: none;
}

/* =====================================================
 * MEMBERSHIP SECTION
 * ===================================================== */
.iamn-membership-wrapper {
    padding: 80px 20px;
    background: var(--iam-light-gold);
}

.iamn-tag {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.iamn-tag.gold {
    background: var(--iam-gold);
    color: var(--iam-white);
}

/* =====================================================
 * ACCOUNT DASHBOARD
 * ===================================================== */
.iamn-account-wrapper {
    background: linear-gradient(135deg, var(--iam-beige) 0%, var(--iam-cream) 100%);
    border-radius: 20px;
    padding: 30px;
    margin: 40px auto;
    max-width: 1200px;
}

.iamn-avatar {
    background: var(--iam-gold);
    color: var(--iam-white);
}

.iamn-tab {
    background: rgba(227, 161, 76, 0.2);
    color: var(--iam-dark-text);
}

.iamn-tab.active {
    background: var(--iam-gold);
    color: var(--iam-white);
}

/* Status Badges */
.status-active {
    background: var(--iam-green);
    color: var(--iam-black);
}

.status-expired {
    background: var(--iam-red);
    color: var(--iam-white);
}

/* =====================================================
 * FOOTER
 * ===================================================== */
.site-footer {
    background: var(--iam-dark-text);
    color: var(--iam-white);
    padding: 60px 20px 20px;
}

.site-footer a {
    color: var(--iam-white);
    opacity: 0.8;
}

.site-footer a:hover {
    opacity: 1;
    color: var(--iam-gold);
}

/* =====================================================
 * FORMS
 * ===================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
    border: 2px solid var(--iam-beige);
    border-radius: 4px;
    padding: 12px;
    font-size: 16px;
    width: 100%;
    transition: border-color 0.3s;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--iam-gold);
    outline: none;
    box-shadow: 0 0 0 3px rgba(227, 161, 76, 0.1);
}

/* =====================================================
 * RESPONSIVE
 * ===================================================== */
@media (max-width: 768px) {
    .top-bar-cc {
        display: none !important;
    }

    body {
        padding-bottom: 80px; /* Prevent chat bubble overlap */
    }

    .iamn-hero {
        min-height: 400px;
        padding: 60px 20px;
    }

    .iamn-hero-slide h1 {
        font-size: 32px;
    }

    .iamn-hero-slide p {
        font-size: 18px;
    }

    .hero-section h1 {
        font-size: 36px;
    }

    .site-header {
        flex-direction: column;
        gap: 20px;
    }

    .main-navigation {
        width: 100%;
        justify-content: center;
    }

    .nav-menu {
        flex-direction: column;
        width: 100%;
        gap: 0;
    }
}

/* Search Modal Styles */
#searchModal .asl_m {
    width: 60% !important;
    max-width: 800px !important;
    min-width: 300px !important;
    margin: 0 auto !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Container Box - FORCE WHITE BACKGROUND */
#searchModal .asl_m .probox {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    padding: 8px 15px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Input Field - Remove any colored backgrounds */
#searchModal .asl_m .probox input.orig {
    font-family: 'Playfair Display', serif !important;
    font-size: 22px !important;
    color: #3D5561 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    height: 100% !important;
    padding-left: 15px !important;
    width: calc(100% - 50px) !important;
}

#searchModal .asl_m .probox input.orig::placeholder {
    color: #9ca3af !important;
    opacity: 0.7;
    font-style: italic;
}

/* Magnifier Container - The Right Side Icon - Bulletproof Orange Background Removal */
#searchModal .asl_m .probox .promagnifier,
#ajaxsearchlite1 .probox .promagnifier,
div.asl_w .probox .promagnifier,
div.asl_m .probox .promagnifier,
.asl_m .probox .promagnifier {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    width: 44px !important;
    height: 44px !important;
    order: 2 !important;
    /* Move to right */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
}

#searchModal .asl_m .probox .promagnifier:hover,
#ajaxsearchlite1 .probox .promagnifier:hover,
div.asl_w .probox .promagnifier:hover,
div.asl_m .probox .promagnifier:hover,
.asl_m .probox .promagnifier:hover {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Hide default SVG/Icons */
#searchModal .asl_m .probox .promagnifier .innericon svg,
#searchModal .asl_m .probox .promagnifier svg {
    display: none !important;
}

/* Add Favicon as Custom Search Icon */
#searchModal .asl_m .probox .promagnifier .innericon {
    background-image: url('img/favicon.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 36px !important;
    height: 36px !important;
    display: block !important;
    opacity: 1 !important;
    transition: transform 0.2s;
    margin: 0 !important;
}

#searchModal .asl_m .probox .promagnifier:hover .innericon {
    transform: scale(1.1);
}

/* Reset / Close Icon inside search bar - Hide it */
#searchModal .asl_m .probox .proclose {
    display: none !important;
}

/* Hide Layout Settings */
#searchModal .asl_m .probox .prosettings,
#searchModal .asl_m .probox .proloading {
    display: none !important;
}

/* Modal Close Button (Top Right of Modal) */
#searchModal .btn-close {
    background-color: #fff;
    opacity: 0.8;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
}

#searchModal .btn-close:hover {
    opacity: 1;
    transform: rotate(90deg);
    background-color: #f8f9fa;
}

.search-trigger {
    cursor: pointer;
}

/* =====================================================
 * NESTED MENU STYLES (FLYOUT)
 * ===================================================== */
.nav-dropdown {
    position: relative;
}

/* Hide submenus by default */
.nav-submenu {
    display: none;
    position: absolute;
    background: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 250px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    border-radius: 4px;
    border: 1px solid #eee;
}

/* Show submenu on hover */
.nav-dropdown:hover>.nav-submenu {
    display: block;
}

/* Level 2 Position (Standard Dropdown) */
.nav-menu>.nav-dropdown>.nav-submenu,
.navbar-nav>.nav-dropdown>.nav-submenu {
    top: 100%;
    left: 0;
}

/* Level 3+ Position (Stacked Vertically) */
.nav-submenu .nav-dropdown>.nav-submenu {
    top: auto;
    left: auto;
    margin-top: 0;
    margin-left: 0;
    position: relative;
    /* Stack inside parent */
    box-shadow: none;
    /* Remove shadow for inner menu */
    border: none;
    /* Remove border for inner menu */
    width: 100%;
    /* take full width */
    min-width: unset;
}

/* Indent nested items */
.nav-submenu .nav-dropdown>.nav-submenu li a {
    padding-left: 30px !important;
    background: #f9f9f9;
    /* Slightly different bg for contrast */
    color: #555 !important;
    font-size: 13px !important;
}

.nav-submenu .nav-dropdown>.nav-submenu li a:hover {
    background: #f0f0f0 !important;
    color: #000 !important;
}

/* Styling for submenu items */
.nav-submenu li a {
    padding: 12px 20px !important;
    /* Override core padding if needed */
    display: block !important;
    color: #333 !important;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px !important;
    text-transform: capitalize !important;
    /* Avoid all-caps for submenus */
    font-weight: 500 !important;
    white-space: nowrap !important;
    /* Prevent text wrapping */
    width: max-content !important;
    /* Ensure box expands to fit text */
    min-width: 200px;
    /* Minimum width */
}

.nav-submenu li:last-child a {
    border-bottom: none;
}

.nav-submenu li a:hover {
    background: #fdf3d0 !important;
    /* IAM Light Gold */
    color: #000 !important;
    padding-left: 25px !important;
    /* Hover effect */
}

/* =====================================================
 * CUSTOM DROPDOWN (More Dropdown & My Account)
 * ===================================================== */

/* Target the specific "More" menu item (ID 441) AND "My Account" (.account-submenu) */
#menu-item-441 .nav-submenu,
.account-submenu {
    width: 280px !important;
    /* Standard width */
    padding: 15px 0 !important;
    /* Vertical padding only */
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    /* Remove gap, use padding/border */
    left: auto !important;
    right: 0 !important;
    top: 100% !important;
    /* Ensure below parent */
    transform: none !important;
    border: 1px solid rgba(227, 161, 76, 0.2) !important;
    visibility: hidden;
    /* Hidden by default, shown on hover/focus handled by core/js */
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s !important;
}

/* Show on Hover - existing Core CSS handles this but enforcing */
#menu-item-441:hover .nav-submenu,
.account-dropdown:hover .account-submenu {
    visibility: visible !important;
    opacity: 1 !important;
}

#menu-item-441,
.account-dropdown {
    position: relative !important;
}

/* Base Style for All Items */
#menu-item-441 .nav-submenu>li,
.account-submenu>li {
    width: 100% !important;
    border-bottom: 1px solid #f5f5f5 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

#menu-item-441 .nav-submenu>li:last-child,
.account-submenu>li:last-child {
    border-bottom: none !important;
}

/* 
   Reorder: 
   GRC (ID 450) -> Top (Order -1)
   Others -> Bottom (Order 1)
*/
#menu-item-441 .nav-submenu>li:not(#menu-item-450) {
    order: 1 !important;
}

#menu-item-450 {
    order: -1 !important;
    /* Top */
    background: transparent !important;
    /* Unified background */
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid #f5f5f5 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Link Styling (Common) */
#menu-item-441 .nav-submenu a,
.account-submenu a {
    display: block !important;
    width: 100% !important;
    padding: 12px 20px !important;
    /* Large clickable area */
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--iam-dark-text) !important;
    text-decoration: none !important;
    transition: background 0.2s, color 0.2s !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-align: left !important;
}

#menu-item-441 .nav-submenu a:hover,
.account-submenu a:hover {
    background: rgba(227, 161, 76, 0.1) !important;
    color: var(--iam-gold) !important;
    padding-left: 25px !important;
    /* Gentle slide */
}

/* Account Dropdown Arrow (Replacing Text Arrow) */
.account-dropdown>a::after {
    content: " ▼" !important;
    font-size: 10px !important;
    float: right !important;
    margin-top: 2px !important;
    margin-left: 5px !important;
    opacity: 0.5;
}

/* Specific GRC Link Styling (Highlight Text Only) */
#menu-item-450>a {
    color: var(--iam-gold) !important;
    /* Highlight color */
    font-weight: 700 !important;
}

/* Nested Submenu (Know Your Rights) - Simple Indented */
#menu-item-450 .nav-submenu {
    position: static !important;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fafafa !important;
    /* Slightly darker for nested area */
    box-shadow: none !important;
    border: none !important;
    border-top: 1px solid #f0f0f0 !important;
}

#menu-item-450 .nav-submenu li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

#menu-item-450 .nav-submenu a {
    padding: 10px 20px 10px 35px !important;
    /* Indented */
    font-size: 13px !important;
    color: #666 !important;
    font-weight: 500 !important;
    background: transparent !important;
    text-transform: none !important;
    /* Optional: Keep nested items mixed case */
}

#menu-item-450 .nav-submenu a:hover {
    color: var(--iam-gold) !important;
    background: rgba(227, 161, 76, 0.05) !important;
    padding-left: 40px !important;
}

/* =====================================================
 * MOBILE SUBMENU OVERRIDES (must match ID specificity)
 * ===================================================== */
@media (max-width: 991px) {

    /* Override the desktop ID-based styles for MORE submenu */
    #menu-item-441 .nav-submenu,
    .account-submenu {
        position: static !important;
        display: block !important;
        opacity: 0 !important;
        visibility: hidden !important;
        max-height: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-width: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        width: 100% !important;
        min-width: 100% !important;
        transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease, height 0.3s ease;
    }

    /* When toggled open */
    #menu-item-441.open .nav-submenu,
    .nav-dropdown.open .nav-submenu,
    .account-dropdown.open .account-submenu {
        opacity: 1 !important;
        visibility: visible !important;
        max-height: 600px !important;
        height: auto !important;
        background: #f8f9fa !important;
        background-color: #f8f9fa !important;
        padding: 5px 0 !important;
        display: block !important;
    }

    /* Hide desktop hover behavior on mobile */
    #menu-item-441:hover .nav-submenu,
    .account-dropdown:hover .account-submenu {
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* But keep open class override */
    #menu-item-441.open:hover .nav-submenu,
    .nav-dropdown.open:hover .nav-submenu,
    .account-dropdown.open:hover .account-submenu {
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Remove the desktop arrow from account-dropdown (JS handles it) */
    .account-dropdown>a::after {
        content: ' ▼' !important;
        float: none !important;
        margin: 0 !important;
        font-size: 10px !important;
        opacity: 0.6;
    }

    .account-dropdown.open>a::after {
        content: ' ▲' !important;
    }

    /* Nested GRC submenu also needs mobile fix */
    #menu-item-450 .nav-submenu {
        position: static !important;
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #fafafa !important;
        box-shadow: none !important;
        border: none !important;
        border-top: 1px solid #f0f0f0 !important;
        height: auto !important;
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
    }
}

/* =====================================================
 * CUSTOM PREMIUM DARK MODE (System-Preferred)
 * ===================================================== */
html.dark-mode {
    /* Base Page & Global Overrides */
    body {
        background-color: #121820 !important;
        color: #e2e8f0 !important;
    }
    
    /* Typography — include div so inline-color divs are also overridden */
    h1, h2, h3, h4, h5, h6 {
        color: #ffffff !important;
    }
    
    p, span, li, td, th, label, small, div, blockquote, figcaption {
        color: #cbd5e1 !important;
    }
    
    /* ── Inline Color Bridge ────────────────────────────────────────────────
     * CSS attribute selectors directly target every hardcoded inline color.
     * This catches ALL elements regardless of tag (div, p, span, h2, etc.)
     * that still carry color: #3D5561 / #6b7280 / #9ca3af etc. as inline style.
     * ──────────────────────────────────────────────────────────────────── */

    /* Dark teal (#3D5561) → near-white */
    *[style*="color: #3D5561"],
    *[style*="color:#3D5561"] {
        color: #e2e8f0 !important;
    }

    /* Medium gray (#6b7280) → muted light */
    *[style*="color: #6b7280"],
    *[style*="color:#6b7280"] {
        color: #94a3b8 !important;
    }

    /* Light gray (#9ca3af) → muted light */
    *[style*="color: #9ca3af"],
    *[style*="color:#9ca3af"] {
        color: #64748b !important;
    }

    /* Blue-gray (#8898a5) → muted light */
    *[style*="color: #8898a5"],
    *[style*="color:#8898a5"] {
        color: #94a3b8 !important;
    }

    /* Dark body (#505050) → light */
    *[style*="color: #505050"],
    *[style*="color:#505050"] {
        color: #94a3b8 !important;
    }

    /* Pure black (#1d1d1d) → near-white */
    *[style*="color: #1d1d1d"],
    *[style*="color:#1d1d1d"] {
        color: #e2e8f0 !important;
    }

    /* Dark-on-dark inline text fill override */
    *[style*="-webkit-text-fill-color: #3D5561"] {
        -webkit-text-fill-color: #e2e8f0 !important;
    }
    
    /* Links & Accents */
    a:not(.button):not(.iamn-btn):not(.btn):not(.mya-tab-btn):not(.modern-btn):not(.navbar-brand):not(.top-bar-cc a):not(.top-bar-links-c a) {
        color: var(--iam-gold) !important;
    }
    a:not(.button):not(.iamn-btn):not(.btn):not(.mya-tab-btn):not(.modern-btn):not(.navbar-brand):not(.top-bar-cc a):not(.top-bar-links-c a):hover {
        color: #f8e3b6 !important;
    }
    /* Top bar links must be dark (not gold) since bg is gold */
    .top-bar-cc a,
    .top-bar-links-c a {
        color: #1a1a1a !important;
    }

    /* ── Override the broad div rule for things that should keep their own colour ── */
    .modern-btn,
    .modern-btn *,
    .iamn-btn,
    .iamn-btn *,
    .btn,
    .btn *,
    .badge,
    .section-badge,
    .section-badge *,
    .navbar-nav .nav-link,
    .nav-menu a,
    .top-bar-right a,
    .top-bar-left span,
    .sponsor-card-safe,
    .sponsor-card-safe *,
    #iam-smart-bot-container *,
    .event-date-badge,
    .lang-slide {
        color: unset;
    }
    /* Re-apply explicit colours for the above after the unset */
    .modern-btn { color: #ffffff !important; }
    .navbar-nav .nav-link,
    .nav-menu a,
    .main-navigation a { color: #e2e8f0 !important; }
    .top-bar-right a,
    .top-bar-cc a { color: #94a3b8 !important; }
    .section-badge { color: var(--iam-gold) !important; }


    /* Header, Navbar & Utility Bar */
    /* Gold top utility bar — keep gold bg, force text to dark for contrast */
    .top-bar-cc {
        background-color: #b8732a !important; /* darker gold for dark mode */
    }
    .top-bar-cc a,
    .top-bar-cc span,
    .top-bar-cc .lang-trigger,
    .top-bar-links-c a {
        color: #1a1a1a !important; /* dark text on gold bg */
        font-weight: 600 !important;
    }
    .top-bar-cc a:hover,
    .top-bar-links-c a:hover {
        color: #ffffff !important;
    }
    .top-bar {
        background-color: #0c0f14 !important;
        border-bottom: 1px solid #1e293b !important;
    }
    .top-bar-right a, .top-bar-left span {
        color: #94a3b8 !important;
    }

    /* Lang dropdown menu (appears on hover over Language ▼) */
    .lang-menu-list {
        background: #1a232e !important;
        border-color: #2a3646 !important;
    }
    .lang-menu-list a {
        color: #e2e8f0 !important;
    }
    .lang-menu-list a:hover {
        background: rgba(227, 161, 76, 0.2) !important;
        color: #ffffff !important;
    }
    
    header,
    .site-header-wrap {
        background-color: #161e29 !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    }
    .navbar-toggler {
        border-color: rgba(255, 255, 255, 0.2) !important;
    }
    .navbar-toggler-icon {
        filter: invert(1) !important;
    }
    .site-title a {
        color: #ffffff !important;
    }
    /* Logo visibility: no filters needed since logo-white.svg is enqueued dynamically in dark mode */

    
    /* Navigation Link Accents */
    .nav-menu a,
    .main-navigation a,
    .navbar-nav .nav-link {
        color: #e2e8f0 !important;
    }
    .nav-menu a:hover,
    .main-navigation a:hover,
    .navbar-nav .nav-link:hover {
        color: #ffffff !important;
        background-color: rgba(227, 161, 76, 0.15) !important;
    }

    /* Donate button — keep gold bg, use dark text */
    a.nav-link.donate-bt,
    .donate-bt {
        background-color: var(--iam-gold) !important;
        color: #1a1a1a !important;
        border-radius: 4px !important;
        padding: 4px 14px !important;
        font-weight: 700 !important;
    }
    a.nav-link.donate-bt:hover,
    .donate-bt:hover {
        background-color: #b8732a !important;
        color: #ffffff !important;
    }
    .nav-menu .current-menu-item > a,
    .main-navigation .current-menu-item > a {
        color: #ffffff !important;
        background-color: var(--iam-gold) !important;
    }

    /* Submenus & Mobile Dropdown Trays */
    .nav-submenu {
        background-color: #1a232e !important;
        border: 1px solid #2a3646 !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    }
    .nav-submenu li a {
        color: #e2e8f0 !important;
        border-bottom: 1px solid #2a3646 !important;
    }
    .nav-submenu li a:hover {
        background-color: rgba(227, 161, 76, 0.2) !important;
        color: #ffffff !important;
    }
    
    /* Mobile Submenu Expanded Trays */
    #menu-item-441.open .nav-submenu,
    .nav-dropdown.open .nav-submenu,
    .account-dropdown.open .account-submenu {
        background-color: #1a232e !important;
    }
    #menu-item-450 .nav-submenu {
        background-color: #0f141c !important;
        border-top: 1px solid #1e293b !important;
    }
    #menu-item-450 .nav-submenu a {
        color: #94a3b8 !important;
    }
    #menu-item-450 .nav-submenu a:hover {
        color: var(--iam-gold) !important;
    }

    /* Logo Visibility: Toggle display of light/dark logo tags */
    .logo-light {
        display: none !important;
    }
    .logo-dark {
        display: block !important;
    }

    /* Page Sections Overrides (neutralize white/cream bg) using shorthand background */
    .celebrating-section,
    .about-section,
    .upcoming-events-section,
    .support-mission-section,
    .initiatives-section,
    .sponsors-section,
    .news-section,
    .social-feeds-section,
    .contact-section {
        background-color: #121820 !important;
        color: #e2e8f0 !important;
    }
    
    .hero-section,
    .iamn-hero,
    .wp-block-cover,
    .language-slider-bg {
        background: linear-gradient(135deg, #161e29 0%, #0e131b 100%) !important;
        border-color: #1e293b !important;
    }
    
    /* Hero Banner (Slider) Text Contrast overrides */
    .banner-cc h1,
    .banner-data-c h1 {
        color: #ffffff !important;
    }
    .banner-cc p.tag,
    .banner-data-c p.tag {
        color: #cbd5e1 !important;
    }

    /* Language Slider Tricolor Text Gradient Contrast */
    .lang-slide {
        background: linear-gradient(to right, #FF9933 20%, #ffffff 50%, #138808 80%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }

    /* Celebrating Section (Stats Counter) Accent & Cards Contrast */
    .celebrating-section h2 span {
        background: linear-gradient(135deg, #FF9933 0%, #E3A14C 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }
    .stat-card {
        background: #1a232e !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    }
    .stat-card div:first-child {
        color: #ffffff !important;
    }
    .stat-card div:last-child {
        color: #cbd5e1 !important;
    }
    .celebrating-section .col-md-4:nth-child(2) .stat-card {
        border-bottom: 4px solid #ffffff !important;
    }

    /* Upcoming Events Section Overlay Washout Fix */
    .upcoming-events-section > div[style*="rgba(255, 255, 255, 0.4)"],
    .upcoming-events-section > div:first-child {
        background: rgba(18, 24, 32, 0.75) !important;
    }

    /* News Section (Grid & Cards) */
    .news-big-card,
    .news-small-card {
        background: #1a232e !important;
        border: 1px solid #2a3646 !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    }
    .news-big-card h3,
    .news-small-card h4 {
        color: #ffffff !important;
    }
    .news-big-card p,
    .news-small-card p {
        color: #cbd5e1 !important;
    }
    .news-read-more {
        color: var(--iam-gold) !important;
    }

    /* Social Feeds Section (Cards & Fallbacks) */
    .social-feed-card,
    .social-feed-body {
        background: #1a232e !important;
        border-color: #2a3646 !important;
    }
    .social-feed-body h4 {
        color: #ffffff !important;
    }
    .social-feed-body p {
        color: #cbd5e1 !important;
    }
    .social-feed-body span {
        color: #94a3b8 !important;
    }
    .social-feed-body div[style*="background: #f0f7ff"],
    .social-feed-body div[style*="background-color: #f0f7ff"] {
        background: #161e29 !important;
        border-color: #1877F2 !important;
    }
    .social-feed-body div[style*="background: #fff8e6"],
    .social-feed-body div[style*="background-color: #fff8e6"] {
        background: #2a2015 !important;
        border-color: #E3A14C !important;
        color: #f8e3b6 !important;
    }

    /* Sponsors Section Logo Cards */
    .sponsor-card-safe {
        background-color: #ffffff !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }
    .sponsor-card-safe span {
        color: #3D5561 !important;
    }

    /* Newsletter Form Submit Button */
    .newsletter-submit-btn {
        background: var(--iam-gold) !important;
        color: #ffffff !important;
    }
    .newsletter-submit-btn:hover {
        background: var(--iam-dark-beige) !important;
    }

    /* Subtle Background Rotating Watermark Logo Opacity — Kept default visibility */
    
    /* Cards (Events, Initiatives, Blog, Contacts) */
    .iamn-card,
    .iamn-event-card,
    .iamn-member-card,
    .event-card,
    .initiative-card,
    .news-card-large,
    .news-card-small,
    .oral-row,
    .support-card,
    .contact-info-card,
    .newsletter-card,
    .contact-form-card,
    .card {
        background-color: #1a232e !important;
        border-color: #2a3646 !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    }
    
    /* Event Card Inner Details block */
    .event-card > a + div,
    .event-card [style*="padding: 30px"] {
        background-color: #1a232e !important;
    }
    
    /* Key Initiatives bodies */
    .initiative-body {
        background-color: #1a232e !important;
        border-top: 1px solid #2a3646 !important;
    }
    .initiative-card:hover .initiative-body {
        background-color: #1e293b !important;
    }
    
    /* Form inputs and controls */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    input[type="search"],
    textarea,
    select {
        background-color: #161e29 !important;
        border-color: #2a3646 !important;
        color: #ffffff !important;
    }
    input:focus, textarea:focus, select:focus {
        border-color: var(--iam-gold) !important;
        box-shadow: 0 0 0 3px rgba(227, 161, 76, 0.25) !important;
    }
    
    /* Search Modal overlay */
    #searchModal .modal-content {
        background-color: rgba(18, 24, 32, 0.95) !important;
        backdrop-filter: blur(10px) !important;
    }
    #searchModal .asl_m .probox {
        background-color: #161e29 !important;
        border-color: #2a3646 !important;
    }
    #searchModal .asl_m .probox input.orig {
        color: #ffffff !important;
    }
    
    /* Footer */
    .site-footer {
        background-color: #0c0f14 !important;
        border-top: 1px solid #1e293b !important;
    }

    /* Virtual Assistant Chatbot */
    #iam-smart-bot-container {
        background: rgba(22, 30, 41, 0.96) !important;
        border-color: #2a3646 !important;
        color: #e2e8f0 !important;
    }
    .iam-chat-msg.bot {
        background-color: #2a3646 !important;
        color: #ffffff !important;
    }
    
    /* Form Builder forms */
    .iamn-form-wrapper {
        background-color: #1a232e !important;
        border-color: #2a3646 !important;
        color: #e2e8f0 !important;
    }
    .iamn-form-field-group label.iamn-form-label {
        color: #ffffff !important;
    }
    .iamn-form-file-container {
        background-color: #161e29 !important;
        border-color: #2a3646 !important;
    }
    .iamn-form-file-container:hover {
        border-color: var(--iam-gold) !important;
        background-color: rgba(227, 161, 76, 0.05) !important;
    }
    .iamn-form-progress-wrapper {
        background-color: #161e29 !important;
        border-color: #2a3646 !important;
    }
    
    /* Member Dashboard Page overrides */
    .mya-greeting-card, .mya-card {
        background-color: #1a232e !important;
        border-color: #2a3646 !important;
    }
    .mya-nav-menu li a {
        color: #cbd5e1 !important;
    }
    .mya-nav-menu li a.active, .mya-nav-menu li a:hover {
        background-color: rgba(227, 161, 76, 0.15) !important;
        color: #ffffff !important;
    }
    .mya-tab-pane {
        background-color: #1a232e !important;
    }

    /* ===================================================
     * GLOBAL INLINE COLOR BRIDGE
     * Targets the most common hardcoded inline colors
     * across all page templates (#3D5561, #6b7280, #9ca3af)
     * =================================================== */

    /* Banner data headings - front-page hero */
    .banner-data-c h1,
    .banner-cc h1 {
        color: #ffffff !important;
    }
    .banner-data-c p,
    .banner-cc p.tag,
    .banner-data-c .tag {
        color: #cbd5e1 !important;
    }

    /* Celebrating / Stats section */
    .celebrating-section h2 {
        color: #ffffff !important;
    }
    .celebrating-section > .container-fluid p,
    .celebrating-section .col-lg-5 p {
        color: #94a3b8 !important;
    }
    .stat-card > div[style*="color: #3D5561"],
    .stat-card > div[style*="color:#3D5561"] {
        color: #ffffff !important;
    }
    .stat-card > div[style*="color: #9ca3af"],
    .stat-card > div[style*="color:#9ca3af"] {
        color: #94a3b8 !important;
    }

    /* About section on front page */
    .about-section h2,
    .about-section .section-title-wrapper h2 {
        color: #ffffff !important;
    }
    .about-section p,
    .about-section div[style*="color: #6b7280"],
    .about-section div[style*="color:#6b7280"] {
        color: #cbd5e1 !important;
    }
    .about-section div[style*="color: #3D5561"],
    .about-section div[style*="color:#3D5561"] {
        color: #e2e8f0 !important;
    }
    .about-section .swiper-container,
    .about-section .about-slider {
        background: #1a232e !important;
    }

    /* Section title wrappers (border-left accent blocks) */
    .section-title-wrapper {
        border-color: var(--iam-gold) !important;
    }
    .section-title-wrapper h5 {
        color: var(--iam-gold) !important;
    }
    .section-title-wrapper h2 {
        color: #ffffff !important;
    }

    /* History Slider (About page) */
    .history-slider-cc,
    .history-slider-cc.modern-pattern-bg {
        background-color: #161e29 !important;
    }
    .swiper-slide[style*="background: #fff"],
    .swiper-slide[style*="background:#fff"] {
        background: #1a232e !important;
        border: 1px solid #2a3646 !important;
    }
    .yearnew {
        color: var(--iam-gold) !important;
    }
    .tag {
        color: #cbd5e1 !important;
    }

    /* Mission cards / Team Member section (About page) */
    .mission-card {
        background: #1a232e !important;
        border: 1px solid #2a3646 !important;
        color: #e2e8f0 !important;
    }
    .gallery-card {
        background: transparent !important;
    }
    .gallery-card .position,
    .gallery-card div[style*="color: #6b7280"] {
        color: #94a3b8 !important;
    }

    /* Post Archive / Blog index (index.php) */
    main[style*="background: #f8f9fa"],
    main[style*="background:#f8f9fa"] {
        background: #121820 !important;
    }
    .post-archive-card,
    div.post-archive-card[style*="background: #fff"] {
        background: #1a232e !important;
        border: 1px solid #2a3646 !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    }
    .post-card-img-container,
    div[style*="background: #f8f9fa"][style*="border-bottom"] {
        background: #161e29 !important;
        border-color: #2a3646 !important;
    }
    .post-card-body {
        background: #1a232e !important;
    }
    .post-card-body div[style*="color: #8898a5"],
    .post-card-body div[style*="color:#8898a5"] {
        color: #94a3b8 !important;
    }
    .post-card-title-link,
    a.post-card-title-link[style*="color: #3D5561"] {
        color: #e2e8f0 !important;
    }
    .post-card-title-link:hover {
        color: var(--iam-gold) !important;
    }
    .post-card-body p[style*="color: #6b7280"] {
        color: #94a3b8 !important;
    }

    /* Sidebar (index.php) */
    .col-lg-4 .card,
    aside .card,
    .sidebar .card {
        background: #1a232e !important;
        border-color: #2a3646 !important;
    }
    .col-lg-4 h5[style*="color: #3D5561"],
    aside h5[style*="color: #3D5561"] {
        color: #ffffff !important;
    }
    .widget_recent_entries ul li a {
        color: var(--iam-gold) !important;
    }
    .widget_categories ul li a {
        color: #e2e8f0 !important;
    }

    /* Breadcrumb inside-banner & Contrast Overlay */
    .inside-banner-cc:before {
        background: rgba(15, 23, 42, 0.65) !important;
        z-index: 1 !important;
    }
    .inside-banner-cc h1 {
        color: #ffffff !important;
    }
    .brdcrmb,
    .brdcrmb a,
    .brdcrmb span {
        color: #f8fafc !important;
    }
    .brdcrmb a:hover {
        color: var(--iam-gold) !important;
    }

    /* Bylaws page */
    .bylaws-section,
    section[style*="background: #f9fafb"],
    section[style*="background:#f9fafb"],
    section[style*="background-color: #f9fafb"] {
        background: #161e29 !important;
    }
    .bylaws-card,
    div[class*="bylaws"],
    .oral-laws-list li {
        background: #1a232e !important;
        border-color: #2a3646 !important;
        color: #cbd5e1 !important;
    }

    /* Events pages (archive-event.php, single-event.php) */
    .events-grid .event-card,
    .events-list .event-card {
        background: #1a232e !important;
        border-color: #2a3646 !important;
    }
    .event-card .event-date-badge {
        background: var(--iam-gold) !important;
        color: #ffffff !important;
    }
    .event-card h3 a,
    .event-card h4 a {
        color: #e2e8f0 !important;
    }
    .event-card h3 a:hover,
    .event-card h4 a:hover {
        color: var(--iam-gold) !important;
    }
    .event-card .event-meta,
    .event-card p {
        color: #94a3b8 !important;
    }

    /* Single post / news article */
    .single-post-content,
    .entry-content,
    article.post {
        color: #cbd5e1 !important;
    }
    .single-post-content h1,
    .single-post-content h2,
    .single-post-content h3,
    .entry-content h1,
    .entry-content h2,
    .entry-content h3 {
        color: #ffffff !important;
    }
    .entry-meta {
        color: #94a3b8 !important;
    }

    /* Contact page */
    .contact-section,
    section[class*="contact"] {
        background: #121820 !important;
    }
    .contact-info-card,
    .contact-detail-block {
        background: #1a232e !important;
        border-color: #2a3646 !important;
    }
    .contact-detail-block h5,
    .contact-info-card h5 {
        color: #ffffff !important;
    }
    .contact-detail-block p,
    .contact-info-card p {
        color: #94a3b8 !important;
    }
    .gform_wrapper .gfield_label,
    .wpcf7-form .form-label,
    .contact-form-card label {
        color: #e2e8f0 !important;
    }

    /* Gallery page */
    .gallery-section {
        background: #121820 !important;
    }
    .gallery-item .gallery-overlay {
        background: rgba(18, 24, 32, 0.85) !important;
    }
    .gallery-item .gallery-caption {
        color: #e2e8f0 !important;
    }

    /* Government Relations / Other inner pages */
    .modern-pattern-bg {
        background-color: #161e29 !important;
    }
    section[style*="background: linear-gradient(135deg, rgba(227, 161, 76"] {
        background: linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(14, 19, 27, 0.6) 100%) !important;
    }

    /* Pagination */
    .pagination-wrapper .page-numbers {
        background: #1a232e !important;
        color: #e2e8f0 !important;
        border-color: #2a3646 !important;
    }
    .pagination-wrapper .page-numbers.current {
        background: var(--iam-gold) !important;
        color: #ffffff !important;
    }
    .pagination-wrapper a.page-numbers:hover {
        background: rgba(227, 161, 76, 0.2) !important;
        color: var(--iam-gold) !important;
    }

    /* WP Comments section */
    #comments,
    .comment-list li,
    .comment-meta {
        color: #cbd5e1 !important;
    }
    .comment-body {
        background: #1a232e !important;
        border-color: #2a3646 !important;
    }

    /* Misc white backgrounds that get missed */
    div[style*="background: #fff;"]:not(.sponsor-card-safe),
    div[style*="background:#fff;"]:not(.sponsor-card-safe),
    section[style*="background: #fff;"]:not(.sponsor-card-safe),
    section[style*="background:#fff;"]:not(.sponsor-card-safe),
    div[style*="background-color: #fff;"]:not(.sponsor-card-safe),
    section[style*="background-color: #fff"]:not(.sponsor-card-safe) {
        background: #1a232e !important;
    }
    div[style*="background: #f8f9fa"],
    div[style*="background:#f8f9fa"],
    section[style*="background: #f8f9fa"],
    section[style*="background: #f9fafb"],
    div[style*="background-color: #f8f9fa"],
    div[style*="background-color: #f9fafb"] {
        background: #161e29 !important;
    }

    /* Section badges */
    .section-badge {
        background: rgba(227, 161, 76, 0.15) !important;
        color: var(--iam-gold) !important;
        border-color: rgba(227, 161, 76, 0.3) !important;
    }

    /* "Read more" links */
    .read-more-link,
    a.read-more-link[style*="color: #E3A14C"] {
        color: var(--iam-gold) !important;
    }

    /* No-posts fallback */
    .no-posts-fallback {
        background: #1a232e !important;
        color: #cbd5e1 !important;
    }

    /* ===================================================
     * BOOTSTRAP UTILITY CLASS DARK MODE OVERRIDES
     * The templates heavily use Bootstrap text-* and bg-*
     * utility classes — these must be remapped for dark mode.
     * =================================================== */

    /* Bootstrap text colour utilities */
    .text-dark,
    .text-black {
        color: #e2e8f0 !important;
    }
    .text-primary {
        color: #60a5fa !important;  /* bright blue readable on dark */
    }
    .text-secondary {
        color: #94a3b8 !important;
    }
    .text-muted {
        color: #64748b !important;
    }
    .text-info {
        color: #38bdf8 !important;
    }
    .text-success {
        color: #4ade80 !important;
    }
    .text-warning {
        color: var(--iam-gold) !important;
    }
    .text-danger {
        color: #f87171 !important;
    }
    .text-light {
        color: #e2e8f0 !important;
    }
    .text-white {
        color: #ffffff !important;
    }

    /* Bootstrap background utilities */
    .bg-white,
    .bg-light {
        background-color: #1a232e !important;
        border-color: #2a3646 !important;
    }
    .bg-dark {
        background-color: #0c0f14 !important;
    }
    .bg-primary {
        background-color: #1e3a5f !important;
    }
    .bg-secondary {
        background-color: #2a3646 !important;
    }

    /* Bootstrap card component */
    .card {
        background-color: #1a232e !important;
        border-color: #2a3646 !important;
        color: #e2e8f0 !important;
    }
    .card-body {
        background-color: #1a232e !important;
        color: #e2e8f0 !important;
    }
    .card-title {
        color: #ffffff !important;
    }
    .card-text {
        color: #94a3b8 !important;
    }
    .card-footer,
    .card-header {
        background-color: #161e29 !important;
        border-color: #2a3646 !important;
        color: #e2e8f0 !important;
    }

    /* Bootstrap modal */
    .modal-content {
        background-color: #1a232e !important;
        border-color: #2a3646 !important;
        color: #e2e8f0 !important;
    }
    .modal-header,
    .modal-footer {
        background-color: #161e29 !important;
        border-color: #2a3646 !important;
    }
    .modal-title {
        color: #ffffff !important;
    }
    .modal-body {
        background-color: #1a232e !important;
        color: #e2e8f0 !important;
    }
    .modal-body h3,
    .modal-body h4,
    .modal-body h5 {
        color: #ffffff !important;
    }
    .modal-body p,
    .modal-body .text-muted {
        color: #94a3b8 !important;
    }
    .modal-body .text-dark {
        color: #e2e8f0 !important;
    }
    .btn-close {
        filter: invert(1) !important;
    }

    /* Bootstrap alerts */
    .alert {
        background-color: #1e293b !important;
        border-color: #2a3646 !important;
        color: #e2e8f0 !important;
    }
    .alert-light {
        background-color: #1e293b !important;
        color: #cbd5e1 !important;
    }
    .alert strong,
    .alert .text-dark {
        color: #ffffff !important;
    }

    /* Bootstrap form controls */
    .form-control,
    .form-select {
        background-color: #161e29 !important;
        border-color: #2a3646 !important;
        color: #e2e8f0 !important;
    }
    .form-control::placeholder {
        color: #475569 !important;
    }
    .form-control:focus,
    .form-select:focus {
        background-color: #1a232e !important;
        border-color: var(--iam-gold) !important;
        color: #ffffff !important;
        box-shadow: 0 0 0 3px rgba(227, 161, 76, 0.25) !important;
    }
    .form-label {
        color: #e2e8f0 !important;
    }
    .form-label.text-muted,
    .fw-bold.small.text-uppercase.text-muted {
        color: #94a3b8 !important;
    }

    /* Bootstrap badge */
    .badge.bg-light {
        background-color: #2a3646 !important;
        color: #e2e8f0 !important;
    }

    /* Bootstrap border utility */
    .border,
    .border-top,
    .border-bottom {
        border-color: #2a3646 !important;
    }

    /* Bootstrap shadow */
    .shadow-sm {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
    }

    /* Bootstrap rounded with bg */
    .rounded-3.bg-white,
    .rounded.bg-white,
    .rounded-3.bg-light {
        background-color: #1a232e !important;
    }

    /* Event filter form (archive-event.php) */
    .event-filter-form {
        background-color: #1a232e !important;
        border-color: #2a3646 !important;
    }

    /* Holiday cards (archive-event.php) */
    .holiday-card,
    .holiday-card.card {
        background-color: #1a232e !important;
        border-color: #2a3646 !important;
    }
    .holiday-card .card-title,
    h5.card-title.text-primary {
        color: #60a5fa !important;
    }
    .holiday-card .flex-shrink-0.bg-light {
        background-color: #2a3646 !important;
    }
    .holiday-card .text-dark {
        color: #e2e8f0 !important;
    }
    .holiday-card .text-muted {
        color: #64748b !important;
    }

    /* TOC / Bylaws card */
    .toc-wrapper,
    .bylaws-content,
    div.toc-wrapper.bg-white,
    div.bylaws-content.bg-white {
        background-color: #1a232e !important;
        border-color: #2a3646 !important;
        color: #cbd5e1 !important;
    }

    /* Sidebar widgets (index.php) */
    .sidebar-widget,
    .sidebar-widget.bg-white {
        background-color: #1a232e !important;
        border-color: #2a3646 !important;
    }
    .sidebar-widget h5 {
        color: #ffffff !important;
    }
    .sidebar-widget a.text-dark {
        color: #e2e8f0 !important;
    }
    .sidebar-widget a.text-secondary {
        color: #94a3b8 !important;
    }

    /* h2/h3 Bootstrap text classes on section headings */
    h2.text-primary,
    h3.text-primary,
    h4.text-primary {
        color: #60a5fa !important;
    }
    h2.text-secondary,
    h3.text-secondary,
    .h3.text-secondary {
        color: #94a3b8 !important;
    }
    h2.text-muted,
    h3.text-muted,
    .h3.text-muted,
    .h4.text-muted {
        color: #64748b !important;
    }
    h2.text-info,
    .h4.text-info {
        color: #38bdf8 !important;
    }

    /* Modal info/note alert box */
    .alert.alert-light.border.small.text-muted {
        background: #161e29 !important;
        border-color: #2a3646 !important;
        color: #94a3b8 !important;
    }

    /* Bootstrap btn-outline overrides */
    .btn-outline-secondary {
        color: #94a3b8 !important;
        border-color: #94a3b8 !important;
    }
    .btn-outline-secondary:hover {
        background-color: #2a3646 !important;
        color: #ffffff !important;
    }

    /* page-section background */
    .page-section {
        background-color: #121820 !important;
    }

    /* ── High-Specificity Overrides for Custom Page Templates ── */

    /* 1. About, Government Relations, Know Your Rights pages */
    body .about-section {
        background-color: #121820 !important;
    }
    body .modern-pattern-bg {
        background-color: #161e29 !important;
        border-color: #1e293b !important;
    }
    body .accordion-item {
        background-color: #1a232e !important;
        border: 1px solid #2a3646 !important;
    }
    body .accordion-button {
        background-color: #161e29 !important;
        color: #ffffff !important;
        border-bottom: 1px solid #2a3646 !important;
    }
    body .accordion-button::after {
        filter: invert(1) !important;
    }
    body .accordion-button:not(.collapsed) {
        background-color: var(--iam-gold) !important;
        color: #1a1a1a !important;
    }
    body .accordion-button:not(.collapsed)::after {
        filter: invert(0) !important;
    }
    body .accordion-body {
        background-color: #1a232e !important;
    }
    body .accordion-body,
    body .accordion-body * {
        color: #cbd5e1 !important;
    }
    body .accordion-body a {
        color: var(--iam-gold) !important;
    }
    body .about-section h2,
    body .about-section h3 {
        color: #ffffff !important;
    }
    body .about-section p,
    body .about-section ul {
        color: #cbd5e1 !important;
    }

    /* 2. Indian Demographics page */
    body .hero-stats {
        background-color: #121820 !important;
        border-bottom-color: #1e293b !important;
    }
    body .big-stat {
        background-color: #1a232e !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
    }
    body .big-stat .number {
        color: #ffffff !important;
    }
    body .big-stat .label {
        color: #94a3b8 !important;
    }
    body .big-stat .sublabel {
        color: #cbd5e1 !important;
    }
    body .city-card {
        background-color: #1a232e !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
        border-color: #2a3646 !important;
    }
    body .city-card:hover {
        border-top-color: var(--iam-gold) !important;
    }
    body .city-card .city-name,
    body .city-card .city-pop {
        color: #ffffff !important;
    }
    body .city-card .city-pct {
        color: var(--iam-gold) !important;
    }
    body .growth-bar {
        background-color: #1a232e !important;
    }
    body .growth-bar .year {
        color: var(--iam-gold) !important;
    }
    body .growth-bar .bar-track {
        background-color: #2a3646 !important;
    }
    body .growth-bar .bar-fill {
        background: linear-gradient(90deg, #1e293b, var(--iam-gold)) !important;
    }
    body .fact-card {
        background-color: #1a232e !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    }
    body .fact-card h4 {
        color: #ffffff !important;
    }
    body .fact-card p {
        color: #cbd5e1 !important;
    }
    body .modern-pattern-bg-demo {
        background-color: #161e29 !important;
        border-color: #1e293b !important;
    }
    body .demo-section-title h2 {
        color: #ffffff !important;
    }
    body .demo-section {
        background-color: #121820 !important;
    }
    body .section-source {
        color: #cbd5e1 !important;
        background: rgba(255, 255, 255, 0.08) !important;
    }
    body .section-source:hover {
        color: var(--iam-gold) !important;
        background: rgba(255, 255, 255, 0.15) !important;
    }

    /* 3. Memberships page */
    body .iamn-card {
        background-color: #1a232e !important;
        border-color: #2a3646 !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
    }
    body .student-card {
        background: #161e29 !important;
        border-color: #2a3646 !important;
    }
    body .premium-card {
        background: linear-gradient(135deg, #1e2530 0%, #171d26 100%) !important;
        border-color: var(--iam-gold) !important;
    }
    body .iamn-price-wrapper {
        color: #ffffff !important;
    }
    body .iamn-price-wrapper .iamn-price {
        color: #ffffff !important;
    }
    body .thank-you-shimmer {
        background: linear-gradient(to right, #ffffff 0%, var(--iam-gold) 50%, #ffffff 100%) !important;
        background-size: 200% auto !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }
    body .iamn-note {
        background-color: #161e29 !important;
        color: #cbd5e1 !important;
    }
    body .iamn-note.warning {
        background-color: #2a2015 !important;
        color: #f8e3b6 !important;
        border-left-color: var(--iam-gold) !important;
    }
    body .iamn-btn.outline {
        background: transparent !important;
        border-color: #2a3646 !important;
        color: #cbd5e1 !important;
    }
    body .iamn-btn.outline:hover {
        border-color: var(--iam-gold) !important;
        color: #ffffff !important;
        background-color: rgba(227, 161, 76, 0.15) !important;
    }
    body .iamn-tag.gray {
        background: #2a3646 !important;
        color: #cbd5e1 !important;
    }
    body .iamn-list {
        color: #cbd5e1 !important;
    }

    /* 4. My Account page */
    body .mya-wrapper {
        background-color: #121820 !important;
    }
    body .mya-stats-row {
        background-color: #161e29 !important;
        border-bottom-color: var(--iam-gold) !important;
    }
    body .mya-stat-card {
        border-right-color: #2a3646 !important;
        background-color: transparent !important;
    }
    body .mya-stat-card:hover {
        background-color: #1a232e !important;
    }
    body .mya-stat-label {
        color: #94a3b8 !important;
    }
    body .mya-stat-value {
        color: #ffffff !important;
    }
    body .mya-tab-panels {
        background-color: #121820 !important;
    }
    body .mya-panel-inner {
        background-color: #1a232e !important;
        border: 1px solid #2a3646 !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    }
    body .mya-panel-title {
        border-bottom-color: #2a3646 !important;
        color: #ffffff !important;
    }
    body .mya-form-group label {
        color: #cbd5e1 !important;
    }
    body .mya-form-group input {
        border-color: #2a3646 !important;
        background-color: #161e29 !important;
        color: #ffffff !important;
    }
    body .mya-form-group input:focus {
        border-color: var(--iam-gold) !important;
        background-color: #1a232e !important;
    }
    body .mya-field-locked {
        background-color: #2a251e !important;
        color: var(--iam-gold) !important;
    }
    body .mya-input-locked {
        background-color: #10151c !important;
        color: #64748b !important;
        border-color: #1e293b !important;
    }
    body .mya-fc-counter {
        color: #cbd5e1 !important;
    }
    body .mya-fc-count {
        color: #ffffff !important;
    }
    body .mya-fc-bar {
        background-color: #2a3646 !important;
    }
    body .mya-family-detail {
        color: #cbd5e1 !important;
    }
    body .mya-family-delete-btn {
        border-color: #2a3646 !important;
        background-color: #1a232e !important;
        color: #f87171 !important;
    }
    body .mya-family-delete-btn:hover {
        background-color: #442323 !important;
        border-color: #f87171 !important;
    }
    body .mya-family-limit-msg {
        background-color: #1e293b !important;
        border-color: #3b82f6 !important;
    }
    body .mya-family-limit-msg p {
        color: #cbd5e1 !important;
    }
    body .mya-renewal-card {
        background: linear-gradient(135deg, #1e2530 0%, #171d26 100%) !important;
        border-color: #2a3646 !important;
    }
    body .mya-renewal-details strong {
        color: #ffffff !important;
    }
    body .mya-renewal-details p {
        color: #cbd5e1 !important;
    }
    body .mya-renewal-note {
        background-color: #161e29 !important;
        color: #cbd5e1 !important;
    }
    body .mya-partner-action-card {
        background: linear-gradient(135deg, #161e29 0%, #10151c 100%) !important;
        border-color: #2a3646 !important;
    }
    body .mya-partner-action-card:hover {
        border-color: var(--iam-gold) !important;
    }
    body .mya-partner-action-card.mya-pac-active {
        border-color: var(--iam-gold) !important;
        background: linear-gradient(135deg, #222933 0%, #1a232e 100%) !important;
    }
    body .mya-partner-action-card h5 {
        color: #ffffff !important;
    }
    body .mya-cancel-hub-btn {
        border-color: #2a3646 !important;
        color: #cbd5e1 !important;
    }
    body .mya-cancel-hub-btn:hover {
        border-color: #94a3b8 !important;
        color: #ffffff !important;
    }
    body .mya-pr-item {
        border-color: #2a3646 !important;
        background-color: #161e29 !important;
    }
    body .mya-pr-item[open] {
        background-color: #1a232e !important;
    }
    body .mya-pr-type-badge {
        background-color: #1e3a5f !important;
        color: #60a5fa !important;
    }
    body .mya-pr-subject {
        color: #ffffff !important;
    }
    body .mya-pr-message {
        background-color: #161e29 !important;
    }
    body .mya-pr-message,
    body .mya-pr-message * {
        color: #cbd5e1 !important;
    }
    body .mya-pr-reply {
        background-color: #182230 !important;
        border-left-color: #3b82f6 !important;
    }
    body .mya-pr-reply,
    body .mya-pr-reply * {
        color: #93c5fd !important;
    }
    body .mya-pr-message a,
    body .mya-pr-reply a {
        color: var(--iam-gold) !important;
    }

    /* Brighten rotating background watermarks in dark mode */
    img[src*="patter_logo.svg"],
    img[src*="big_logo.svg"],
    .inside-top-logo-bg,
    .inside-bottom-logo-bg {
        opacity: 0.85 !important;
    }
    div:has(> img[src*="patter_logo.svg"]),
    div:has(> img[src*="big_logo.svg"]) {
        opacity: 0.85 !important;
    }
    .footer-bg-logo img {
        opacity: 0.85 !important;
    }
}