/*
 * mcb.css — Missouri Council of the Blind
 * moblind.org Website Rebuild 2025
 *
 * Structure:
 *   1. CSS Custom Properties (tokens)
 *   2. Base / Reset
 *   3. Utility Bar
 *   4. Navigation
 *   5. Page Title Band
 *   6. Cards & Content Blocks
 *   7. Hero Section
 *   8. CTA Blocks
 *   9. Forms
 *  10. Footer
 *  11. Accessibility Utilities
 *  12. Dark Mode Overrides
 *  13. Large Text Mode
 *  14. Animations & Motion
 *  15. Print
 */

/* ════════════════════════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES
   All colour decisions documented with WCAG contrast ratio.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
    /* Brand palette */
    --mcb-blue:          #000000;  /* Primary — contrast 11.4:1 on white (AAA) */
    --mcb-blue-mid:      #303030;  /* Interactive hover */
    --mcb-blue-light:    #e4e4e4;  /* Tinted backgrounds */
    --mcb-gold:          #B59246;  /* Accent — used on dark bg, not as text bg */
    --mcb-gold-dark:     #866c33;  /* Gold text on white: 4.7:1 (AA large) */
    --mcb-red:           #C0392B;  /* Alert / error */
    --mcb-green:         #1B6E3A;  /* Success — 7.2:1 on white (AAA) */

    --bs-primary-rgb:    184, 146, 70;  /* Gold text on white: 4.7:1 (AA large) */
    --bs-btn-hover-bg:    #000000;  /* Override Bootstrap's default hover for .btn-outline-primary */
    --bs-btn-bg:    #000000;  /* Override Bootstrap's default hover for .btn-outline-primary */

    /* Neutral scale */
    --mcb-gray-100:      #F8F9FA;
    --mcb-gray-200:      #E9ECEF;
    --mcb-gray-500:      #6C757D;
    --mcb-gray-700:      #495057;
    --mcb-gray-900:      #212529;

    /* Typography */
    --mcb-font-body:     'Inter', 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
    --mcb-font-heading:  'Inter', 'Segoe UI', system-ui, sans-serif;
    --mcb-font-size:     1.0625rem;    /* 17px — above 16px minimum for readability */
    --mcb-line-height:   1.65;

    /* Spacing */
    --mcb-section-py:    4rem;
    --mcb-card-radius:   .75rem;
    --mcb-btn-radius:    .375rem;

    /* Transitions */
    --mcb-transition:    0.2s ease;

    /* Focus ring — highly visible for keyboard users (WCAG 2.4.7) */
    --mcb-focus-ring:    0 0 0 3px #B59246, 0 0 0 5px #000000;
}

.table {
    --bs-table-bg: #fff;  /* Remove default table row background */
    --bs-table-color: #000;
}

.table-primary {
	--bs-table-color: #000;
	--bs-table-bg: #f1f1f1;
	--bs-table-border-color: #a6b5cc;
	--bs-table-striped-bg: #f1f1f1;
	--bs-table-striped-color: #000;
	--bs-table-active-bg: #f1f1f1;
	--bs-table-active-color: #000;
	--bs-table-hover-bg: #f1f1f1;
	--bs-table-hover-color: #000;
	color: var(--bs-table-color);
}

.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: #000000;
	--bs-btn-border-color: #000000;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #000000;
	--bs-btn-hover-border-color: #000000;
	--bs-btn-focus-shadow-rgb: 49,132,253;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #000000;
	--bs-btn-active-border-color: #000000;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #000000;
	--bs-btn-disabled-border-color: #000000;
}

.alert-info {
	--bs-alert-color: #000;
	--bs-alert-bg: #fff;
	--bs-alert-border-color: #ccc;
	--bs-alert-link-color: #000;
}

/* ════════════════════════════════════════════════════════════════════════════
   2. BASE / RESET
   ════════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: var(--mcb-font-size);
}

body {
    font-family: var(--mcb-font-body);
    line-height: var(--mcb-line-height);
    color: var(--mcb-gray-900);
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.btn-outline-primary {
	--bs-btn-color: #B59246;
	--bs-btn-border-color: #B59246;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #B59246;
	--bs-btn-hover-border-color: #B59246;
	--bs-btn-focus-shadow-rgb: 13,110,253;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #B59246;
	--bs-btn-active-border-color: #B59246;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #B59246;
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: #B59246;
	--bs-gradient: none;
}

/* Global focus ring — replaces browser default with high-contrast indicator */
:focus-visible {
    outline: none;
    box-shadow: var(--mcb-focus-ring);
    border-radius: var(--mcb-btn-radius);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mcb-font-heading);
    font-weight: 700;
    line-height: 1.25;
    color: var(--mcb-blue);
}

a {
    color: var(--mcb-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--mcb-transition);
}
a:hover {
    color: var(--mcb-blue-mid);
}

img {
    max-width: 100%;
    height: auto;
}

/* Skip the animation for embedded <main> anchor */
.mcb-main-anchor {
    display: block;
    height: 0;
    overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════════════════
   3. UTILITY BAR
   ════════════════════════════════════════════════════════════════════════════ */
.mcb-utility-bar {
    background-color: var(--mcb-blue);
    color: #fff;
    font-size: .875rem;
}

.utility-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: rgba(255,255,255,.9);
    text-decoration: none;
    transition: color var(--mcb-transition);
}
.utility-link:hover {
    color: var(--mcb-gold);
    text-decoration: underline;
}

.utility-btn {
    border-color: rgba(255,255,255,.4) !important;
    color: rgba(255,255,255,.9) !important;
    padding: .15rem .5rem;
    font-size: .8rem;
}
.utility-btn:hover {
    background-color: rgba(255,255,255,.1) !important;
    color: var(--mcb-gold) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   4. NAVIGATION
   ════════════════════════════════════════════════════════════════════════════ */
.mcb-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.mcb-navbar {
    background-color: #fff;
    padding-top: .75rem;
    padding-bottom: .75rem;
    transition: padding var(--mcb-transition), box-shadow var(--mcb-transition);
}

.mcb-navbar--scrolled {
    padding-top: .4rem;
    padding-bottom: .4rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

/* Brand */
.mcb-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
}
.mcb-brand-text {
    display: flex;
    flex-direction: column;
}
.mcb-brand-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mcb-blue);
    line-height: 1.2;
}
.mcb-brand-tagline {
    font-size: .7rem;
    color: var(--mcb-gray-500);
    font-weight: 400;
}

/* Nav links */
.mcb-navbar .nav-link {
    font-weight: 500;
    color: var(--mcb-gray-900);
    padding: .5rem .75rem;
    border-radius: var(--mcb-btn-radius);
    transition: background-color var(--mcb-transition), color var(--mcb-transition);
}
.mcb-navbar .nav-link:hover,
.mcb-navbar .nav-link:focus-visible {
    background-color: var(--mcb-blue-light);
    color: var(--mcb-blue);
}
.mcb-navbar .nav-link.active {
    color: var(--mcb-blue);
    font-weight: 700;
}

/* Dropdown */
.mcb-navbar .dropdown-menu {
    border: none;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    border-radius: var(--mcb-card-radius);
    padding: .5rem;
    min-width: 220px;
}
.mcb-navbar .dropdown-item {
    border-radius: .375rem;
    padding: .5rem .75rem;
    font-weight: 500;
    transition: background-color var(--mcb-transition), color var(--mcb-transition);
}
.mcb-navbar .dropdown-item:hover,
.mcb-navbar .dropdown-item:focus {
    background-color: var(--mcb-blue-light);
    color: var(--mcb-blue);
}
.mcb-navbar .dropdown-item.active {
    background-color: var(--mcb-blue);
    color: #fff;
}

/* Donate CTA button in nav */
.mcb-nav-cta {
    background-color: var(--mcb-gold) !important;
    border-color: var(--mcb-gold) !important;
    color: var(--mcb-blue) !important;
    font-weight: 700 !important;
    padding: .4rem 1rem !important;
}
.mcb-nav-cta:hover {
    background-color: #e6ac00 !important;
    border-color: #e6ac00 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   5. PAGE TITLE BAND
   ════════════════════════════════════════════════════════════════════════════ */
.mcb-page-title {
    background: linear-gradient(135deg, var(--mcb-blue) 0%, #000000 100%);
    color: #fff;
}
.mcb-page-h1 {
    color: #fff;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    margin: 0;
}
.mcb-breadcrumb .breadcrumb {
    font-size: .875rem;
}
.mcb-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,.6);
}
.mcb-breadcrumb .breadcrumb-item a {
    color: rgba(255,255,255,.85);
    text-decoration: underline;
}
.mcb-breadcrumb .breadcrumb-item a:hover {
    color: var(--mcb-gold);
}
.mcb-breadcrumb .breadcrumb-item.active {
    color: rgba(255,255,255,.7);
}

/* ════════════════════════════════════════════════════════════════════════════
   6. CARDS & CONTENT BLOCKS
   ════════════════════════════════════════════════════════════════════════════ */
.mcb-card {
    border: 1px solid var(--mcb-gray-200);
    border-radius: var(--mcb-card-radius);
    transition: box-shadow var(--mcb-transition), transform var(--mcb-transition);
    overflow: hidden;
}
.mcb-card:hover {
    box-shadow: 0 8px 24px rgba(0,48,135,.12);
    transform: translateY(-2px);
}

.mcb-card-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: .75rem;
    background-color: #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--mcb-blue);
    flex-shrink: 0;
}

/* Section alternating background */
.mcb-section {
    padding: var(--mcb-section-py) 0;
}
.mcb-section--alt {
    background-color: var(--mcb-gray-100);
}
.mcb-section--blue {
    background: linear-gradient(135deg, var(--mcb-blue) 0%, #000000 100%);
    color: #fff;
}
.mcb-section--blue h2,
.mcb-section--blue h3 {
    color: #fff;
}

/* Testimonial blocks */
.mcb-testimonial {
    border-left: 4px solid var(--mcb-gold);
    padding-left: 1.25rem;
}
.mcb-testimonial blockquote {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--mcb-gray-700);
    margin: 0 0 .5rem 0;
}
.mcb-testimonial cite {
    font-size: .875rem;
    font-weight: 600;
    color: var(--mcb-blue);
    font-style: normal;
}

.text-white {
    color: #fff !important; 
}

.text-balance {
    text-wrap: balance; 
}
.text-mcb-blue {
    color: var(--mcb-blue);
}
.text-mcb-gray {
    color: var(--mcb-gray-700);
}
.bg-mcb-gray-200 {
    background-color: var(--mcb-gray-200);
}
.bg-mcb-gray-500 {
    background-color: var(--mcb-gray-500);
}


/* ════════════════════════════════════════════════════════════════════════════
   7. HERO SECTION (Home page)
   ════════════════════════════════════════════════════════════════════════════ */
.mcb-hero {
    background: linear-gradient(135deg, var(--mcb-blue) 0%, #000000 60%, #000000 100%);
    color: #fff;
    padding: 5rem 0 4rem;
    position: relative;
    overflow: hidden;
}
.mcb-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/assets/img/hero-pattern.svg') center / cover no-repeat;
    opacity: .05;
    pointer-events: none;
}
.mcb-hero h1 {
    color: #fff;
    font-size: clamp(1.75rem, 5vw, 3rem);
    font-weight: 800;
}
.mcb-hero .lead {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: rgba(255,255,255,.9);
    max-width: 600px;
}
.mcb-hero-badge {
    display: inline-block;
    background-color: var(--mcb-gold);
    color: var(--mcb-blue);
    font-weight: 700;
    font-size: .875rem;
    padding: .25rem .75rem;
    border-radius: 2rem;
    margin-bottom: 1rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   8. CTA BLOCKS
   ════════════════════════════════════════════════════════════════════════════ */
.btn-mcb-primary {
    background-color: var(--mcb-blue);
    border-color: var(--mcb-blue);
    color: #fff;
    font-weight: 600;
    padding: .65rem 1.5rem;
    border-radius: var(--mcb-btn-radius);
    transition: background-color var(--mcb-transition), box-shadow var(--mcb-transition);
}
.btn-mcb-primary:hover,
.btn-mcb-primary:focus-visible {
    background-color: var(--mcb-blue-mid);
    border-color: var(--mcb-blue-mid);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,48,135,.3);
}

.btn-mcb-gold {
    background-color: var(--mcb-gold);
    border-color: var(--mcb-gold);
    color: var(--mcb-blue);
    font-weight: 700;
    padding: .65rem 1.5rem;
    border-radius: var(--mcb-btn-radius);
    transition: background-color var(--mcb-transition), box-shadow var(--mcb-transition);
}
.btn-mcb-gold:hover,
.btn-mcb-gold:focus-visible {
    background-color: #e6ac00;
    border-color: #e6ac00;
    color: var(--mcb-blue);
    box-shadow: 0 4px 12px rgba(255,193,7,.4);
}

.btn-mcb-outline {
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
    font-weight: 600;
    padding: .6rem 1.5rem;
    border-radius: var(--mcb-btn-radius);
    transition: background-color var(--mcb-transition);
}
.btn-mcb-outline:hover,
.btn-mcb-outline:focus-visible {
    background-color: rgba(255,255,255,.15);
    color: #fff;
}

/* ════════════════════════════════════════════════════════════════════════════
   9. FORMS
   ════════════════════════════════════════════════════════════════════════════ */
.mcb-form label {
    font-weight: 600;
    color: var(--mcb-gray-700);
    margin-bottom: .35rem;
}

legend {
	font-size: 1rem;
}

.mcb-form .form-control,
.mcb-form .form-select {
    border-color: var(--mcb-gray-500);
    border-radius: var(--mcb-btn-radius);
    font-size: 1rem;
    padding: .6rem .85rem;
    transition: border-color var(--mcb-transition), box-shadow var(--mcb-transition);
}

.mcb-form .form-control:focus,
.mcb-form .form-select:focus {
    border-color: var(--mcb-blue);
    box-shadow: 0 0 0 3px rgba(0,48,135,.2);
}

/* Accessible required field indicator */
.mcb-form label .required-mark {
    color: var(--mcb-red);
    margin-left: .15rem;
    font-weight: 700;
}
.mcb-form .form-text {
    font-size: .85rem;
    color: var(--mcb-gray-500);
}

/* ════════════════════════════════════════════════════════════════════════════
   10. FOOTER
   ════════════════════════════════════════════════════════════════════════════ */
.mcb-footer {
    margin-top: auto;
}

.mcb-footer-main, .mcb-footer-main a {
    background-color: var(--mcb-blue);
    color: rgba(255,255,255,.9);
}

.mcb-footer-main a:hover {
    color: var(--mcb-gold);
    text-decoration: underline;
}

.mcb-footer-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
    color: #fff;
}
.mcb-footer-brand-name {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25;
}
.mcb-footer-tagline,
.mcb-footer-address {
    font-size: .875rem;
    color: rgba(255,255,255,.8);
}
.mcb-footer-501c3  {
    display: block;
    color: rgba(255,255,255,.7);
    text-decoration: none;
    text-transform: uppercase;
    font-size: .75rem;
    margin-bottom: .15rem;
    transition: color var(--mcb-transition);
}

.mcb-footer-phones a {
    display: block;
    color: rgba(255,255,255,.9);
    text-decoration: none;
    font-size: .875rem;
    margin-bottom: .15rem;
    transition: color var(--mcb-transition);
}
.mcb-footer-phones a:hover {
    color: var(--mcb-gold);
}

.mcb-footer-heading {
    font-size: .875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--mcb-gold);
    margin-bottom: .75rem;
}

.mcb-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mcb-footer-links a {
    color: rgba(255,255,255,.85);
    text-decoration: none;
    font-size: .9rem;
    display: block;
    padding: .2rem 0;
    transition: color var(--mcb-transition);
}
.mcb-footer-links a:hover {
    color: var(--mcb-gold);
    text-decoration: underline;
}

.mcb-footer-bottom {
    font-size: smaller;
    background-color: #000000;
    color: rgba(255,255,255,.7);
}

a.mcb-footer-developer {
    white-space: nowrap;
    color: rgba(255,255,255,.7);
    text-decoration: none;
    transition: color var(--mcb-transition);
}

a.mcb-footer-developer:hover {
    color: var(--mcb-gold);
    text-decoration: underline;
}   

.mcb-footer-legal a {
    color: rgba(255,255,255,.7);
    text-decoration: none;
    transition: color var(--mcb-transition);
}
.mcb-footer-legal a:hover {
    color: var(--mcb-gold);
    text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════════════════════
   11. ACCESSIBILITY UTILITIES
   ════════════════════════════════════════════════════════════════════════════ */

/* Standard Bootstrap visually-hidden — replaces deprecated sr-only */
.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* High-contrast text helper */
.text-high-contrast {
    color: var(--mcb-gray-900) !important;
    background-color: #fff !important;
}

/* Minimum touch target size — 44×44px per WCAG 2.5.5 */
.touch-target {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ════════════════════════════════════════════════════════════════════════════
   12. DARK MODE OVERRIDES (Bootstrap 5.3 data-bs-theme="dark")
   ════════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] {
    --mcb-blue-light: #000000;
}

[data-bs-theme="dark"] body {
    background-color: #000000;
    color: #e8ecf0;
}

[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4 {
    color: #ffffff;
}

[data-bs-theme="dark"] .mcb-navbar {
    background-color: #000000;
    border-bottom: 1px solid #000000;
}

[data-bs-theme="dark"] .mcb-brand-name {
    color: #ffffff;
}

[data-bs-theme="dark"] .mcb-navbar .nav-link {
    color: #e8ecf0;
}
[data-bs-theme="dark"] .mcb-navbar .nav-link:hover {
    background-color: #0d1b3e;
    color: #ffffff;
}

[data-bs-theme="dark"] .mcb-navbar .dropdown-menu {
    background-color: #1a2035;
    border: 1px solid #2d3a5a;
}
[data-bs-theme="dark"] .mcb-navbar .dropdown-item {
    color: #e8ecf0;
}
[data-bs-theme="dark"] .mcb-navbar .dropdown-item:hover {
    background-color: #0d1b3e;
    color: #ffffff;
}

[data-bs-theme="dark"] .mcb-section--alt {
    background-color: #1a2035;
}

[data-bs-theme="dark"] .mcb-card {
    background-color: #1a2035;
    border-color: #2d3a5a;
}

[data-bs-theme="dark"] .mcb-testimonial blockquote {
    color: #c8d4e8;
}

[data-bs-theme="dark"] a {
    color: #ffffff;
}
[data-bs-theme="dark"] a:hover {
    color: var(--mcb-gold);
}

/* ════════════════════════════════════════════════════════════════════════════
   13. LARGE TEXT MODE (.mcb-large-text on <html>)
   ════════════════════════════════════════════════════════════════════════════ */
html.mcb-large-text {
    font-size: 1.3rem;  /* ≈ 24px base — scales everything via rem */
}
html.mcb-large-text .mcb-brand-tagline {
    display: none; /* hide micro text in large-text mode */
}

/* ════════════════════════════════════════════════════════════════════════════
   14. ANIMATIONS & MOTION (respect prefers-reduced-motion)
   ════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Fade-in-up — only fires if motion is not reduced */
@media (prefers-reduced-motion: no-preference) {
    .mcb-animate-in {
        opacity: 0;
        transform: translateY(1.5rem);
        transition: opacity .4s ease, transform .4s ease;
    }
    .mcb-animate-in.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   15. PRINT
   ════════════════════════════════════════════════════════════════════════════ */
@media print {
    .mcb-utility-bar,
    .mcb-header,
    .skip-link,
    #mcb-theme-toggle,
    #mcb-font-toggle {
        display: none !important;
    }
    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: .85em;
        color: #555;
    }
    a[href^="tel"]::after,
    a[href^="mailto"]::after {
        content: none;
    }
}