/* =============================================
   UNIVERSAL FIXES v10.3.0
   CRITICAL: Light background = Black text, Dark background = White text + Tighter Spacing + EXTRA Compact Header
   FIX: Added exceptions for .highlight-box and .visual-item (dark containers within light sections)
   v10.3.0: Made header even more compact (12px padding, smaller logo/nav)
   ============================================= */

/* =============================================
   RULE #1: FORCE BLACK TEXT ON ALL LIGHT BACKGROUNDS
   ============================================= */

section.section-light,
section.section-light *,
section.section-light h1,
section.section-light h2,
section.section-light h3,
section.section-light h4,
section.section-light h5,
section.section-light h6,
section.section-light p,
section.section-light li,
section.section-light span,
section.section-light div,
section.section-light strong,
section.section-light em,
section.section-light a,
section.section-light label {
    color: #000000 !important;
}

/* Exceptions: buttons and code */
section.section-light .btn-primary-icsn {
    color: #1A2332 !important;
}

section.section-light .btn-secondary-icsn {
    color: #C9A854 !important;
}

section.section-light code,
section.section-light .chain-badge {
    color: #00BCD4 !important;
}

/* CRITICAL EXCEPTION: Dark containers within light sections MUST have white text */
section.section-light .highlight-box,
section.section-light .highlight-box *,
section.section-light .visual-item,
section.section-light .visual-item * {
    color: #FFFFFF !important;
}

/* Gold accent for highlight-box headers */
section.section-light .highlight-box h4 {
    color: #C9A854 !important;
}

/* =============================================
   RULE #2: ALL TEXT ON DARK BACKGROUNDS IS WHITE
   ============================================= */

/* Any section with dark/navy background gets white text */
.section-dark,
.section-dark *,
.section-principles,
.section-principles *,
.section-infrastructure,
.section-infrastructure *,
.section-classification,
.section-classification *,
.section-partners,
.section-partners *,
.hero-section,
.hero-section *,
.hero-bank,
.hero-bank *,
.hero-capital,
.hero-capital *,
.cta-section,
.cta-section *,
.main-footer,
.main-footer *,
.footer,
.footer * {
    color: #FFFFFF !important;
}

/* Exception: Keep button colors consistent - white text on navy buttons */
.btn-primary,
.btn-primary:hover,
.btn-capital,
.btn-capital:hover,
.btn-bank,
.btn-bank:hover,
.btn-cta,
.btn-cta:hover {
    color: #FFFFFF !important; /* Always white text on buttons */
}

/* Keep original colors for badges */
.hero-badge,
.hero-badge-bank,
.section-eyebrow,
.classification-badge {
    color: inherit !important; /* Let the original badge colors stay */
}

/* Links on dark backgrounds - cyan by default, white on hover */
.section-dark a:not(.btn):not(.btn-primary):not(.btn-capital):not(.btn-bank):not(.btn-cta),
.section-principles a:not(.btn):not(.btn-primary):not(.btn-capital):not(.btn-bank):not(.btn-cta),
.section-infrastructure a:not(.btn):not(.btn-primary):not(.btn-capital):not(.btn-bank):not(.btn-cta),
.section-classification a:not(.btn):not(.btn-primary):not(.btn-capital):not(.btn-bank):not(.btn-cta),
.section-partners a:not(.btn):not(.btn-primary):not(.btn-capital):not(.btn-bank):not(.btn-cta),
.hero-section a:not(.btn):not(.btn-primary):not(.btn-capital):not(.btn-bank):not(.btn-cta),
.hero-bank a:not(.btn):not(.btn-primary):not(.btn-capital):not(.btn-bank):not(.btn-cta),
.hero-capital a:not(.btn):not(.btn-primary):not(.btn-capital):not(.btn-bank):not(.btn-cta),
.cta-section a:not(.btn):not(.btn-primary):not(.btn-capital):not(.btn-bank):not(.btn-cta),
.main-footer a:not(.btn):not(.btn-primary):not(.btn-capital):not(.btn-bank):not(.btn-cta),
.footer a:not(.btn):not(.btn-primary):not(.btn-capital):not(.btn-bank):not(.btn-cta) {
    color: #00BCD4 !important;
}

.section-dark a:not(.btn):not(.btn-primary):not(.btn-capital):not(.btn-bank):not(.btn-cta):hover,
.section-principles a:not(.btn):not(.btn-primary):not(.btn-capital):not(.btn-bank):not(.btn-cta):hover,
.section-infrastructure a:not(.btn):not(.btn-primary):not(.btn-capital):not(.btn-bank):not(.btn-cta):hover,
.section-classification a:not(.btn):not(.btn-primary):not(.btn-capital):not(.btn-bank):not(.btn-cta):hover,
.section-partners a:not(.btn):not(.btn-primary):not(.btn-capital):not(.btn-bank):not(.btn-cta):hover,
.hero-section a:not(.btn):not(.btn-primary):not(.btn-capital):not(.btn-bank):not(.btn-cta):hover,
.hero-bank a:not(.btn):not(.btn-primary):not(.btn-capital):not(.btn-bank):not(.btn-cta):hover,
.hero-capital a:not(.btn):not(.btn-primary):not(.btn-capital):not(.btn-bank):not(.btn-cta):hover,
.cta-section a:not(.btn):not(.btn-primary):not(.btn-capital):not(.btn-bank):not(.btn-cta):hover,
.main-footer a:not(.btn):not(.btn-primary):not(.btn-capital):not(.btn-bank):not(.btn-cta):hover,
.footer a:not(.btn):not(.btn-primary):not(.btn-capital):not(.btn-bank):not(.btn-cta):hover {
    color: #FFFFFF !important;
}

/* =============================================
   RULE #2: TIGHTENED SPACING
   ============================================= */

/* Section padding - reduced for tighter rhythm */
.section-light,
.section-dark,
.section-principles,
.section-assets,
.section-adjudication,
.section-who-for,
.section-services,
.section-partners-network,
.section-compliance,
.section-disclosure,
.section-infrastructure,
.section-classification,
.about-section,
.foundation-section,
.platform-selection,
.cta-section {
    padding: 3rem 0 !important; /* 48px - tighter spacing */
}

/* Even tighter for compact sections */
.section-compact {
    padding: 2.5rem 0 !important; /* 40px */
}

/* Section headers - reduced bottom margin */
.text-center-section,
.section-intro,
.section-header-center {
    margin-bottom: 1.5rem !important; /* 24px - tighter header spacing */
}

/* Grid gaps - tighter */
.platform-grid,
.principles-grid,
.principles-bank-grid,
.services-grid,
.assets-grid,
.adjudication-grid,
.audience-grid,
.compliance-features,
.partners-grid,
.classification-grid,
.network-grid,
.foundation-role-grid,
.infrastructure-grid {
    gap: 1.25rem !important; /* 20px - tighter grid spacing */
}

/* Typography normalization */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 1rem 0 !important;
}

p {
    margin: 0 0 1rem 0 !important;
}

/* =============================================
   RULE #3: RESPONSIVE ADJUSTMENTS
   ============================================= */

@media (max-width: 768px) {
    .section-light,
    .section-dark,
    .section-principles,
    .section-assets,
    .section-adjudication,
    .section-who-for,
    .section-services,
    .section-partners-network,
    .section-compliance,
    .section-infrastructure,
    .section-classification {
        padding: 2.5rem 0 !important; /* 40px on mobile - tighter */
    }
    
    .section-compact {
        padding: 1.5rem 0 !important; /* 24px on mobile */
    }
}

/* =============================================
   RULE #4: UNIVERSAL SUBTITLE STANDARD
   NO EXCEPTIONS - EVERY SUBTITLE FOLLOWS THIS
   ============================================= */

/* ALL subtitle/subheader elements - light backgrounds */
.hero-subtitle,
.section-description,
.section-subtitle,
.foundation-text,
.cta-subtitle,
.section-intro p,
.section-intro.text-center p,
p.section-subtitle,
p.section-description,
.hero-description-capital,
section.section-light .hero-subtitle,
section.section-light p.section-subtitle,
section.section-light p.section-description {
    font-size: 1.125rem !important;
    color: #6B7280 !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    line-height: 1.8 !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    display: block !important;
}

/* =============================================
   RULE #5: COMPACT HEADER HEIGHT (v2 - EXTRA COMPACT)
   ============================================= */

/* All headers across the site - extra compact */
.site-header,
.main-header,
header {
    padding: 0.75rem 0 !important; /* 12px - extra compact (was 16px) */
}

/* Logo section - tighter spacing */
.logo-section {
    gap: 0.2rem !important;
}

.logo,
.logo-text {
    font-size: 1.35rem !important; /* Slightly smaller (was 1.5rem) */
    line-height: 1.1 !important;
}

.logo-subtitle {
    font-size: 0.6rem !important; /* Smaller subtitle (was 0.65rem) */
    line-height: 1.1 !important;
    opacity: 0.7 !important;
    margin-top: 0.35rem !important; /* Add space between logo and tagline */
}

/* Navigation links - tighter spacing */
.main-nav {
    gap: 1.25rem !important; /* Tighter gap (was 1.5rem) */
}

.nav-link {
    padding: 0.4rem 0 !important; /* Less vertical padding (was 0.5rem) */
    font-size: 0.85rem !important; /* Slightly smaller (was 0.875rem) */
}

/* Header content - reduce spacing */
.header-content {
    min-height: auto !important;
    padding: 0 !important;
}

/* ALL subtitle/subheader elements - dark backgrounds */
.section-dark .hero-subtitle,
.section-dark .section-description,
.section-dark .section-subtitle,
.section-dark .cta-subtitle,
.section-principles .section-subtitle-white,
.section-infrastructure .section-subtitle-white,
.hero-section .hero-subtitle,
.hero-bank .hero-subtitle,
.hero-capital .hero-description-capital,
.cta-section .cta-subtitle,
p.section-subtitle-white,
p.section-description-white,
.section-description-white,
.section-subtitle-white,
.hero-content-contact .hero-subtitle {
    font-size: 1.125rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    line-height: 1.8 !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    display: block !important;
}

/* =============================================
   RULE #5: COMPACT HEADER HEIGHT (v2 - EXTRA COMPACT)
   ============================================= */

/* All headers across the site - extra compact */
.site-header,
.main-header,
header {
    padding: 0.75rem 0 !important; /* 12px - extra compact (was 16px) */
}

/* Logo section - tighter spacing */
.logo-section {
    gap: 0.2rem !important;
}

.logo,
.logo-text {
    font-size: 1.35rem !important; /* Slightly smaller (was 1.5rem) */
    line-height: 1.1 !important;
}

.logo-subtitle {
    font-size: 0.6rem !important; /* Smaller subtitle (was 0.65rem) */
    line-height: 1.1 !important;
    opacity: 0.7 !important;
    margin-top: 0.35rem !important; /* Add space between logo and tagline */
}

/* Navigation links - tighter spacing */
.main-nav {
    gap: 1.25rem !important; /* Tighter gap (was 1.5rem) */
}

.nav-link {
    padding: 0.4rem 0 !important; /* Less vertical padding (was 0.5rem) */
    font-size: 0.85rem !important; /* Slightly smaller (was 0.875rem) */
}

/* Header content - reduce spacing */
.header-content {
    min-height: auto !important;
    padding: 0 !important;
}