/* ==================== CORE THEME TOKENS ==================== */
:root {
    --bg-cream: #fdfbf7;
    --text-main: #2d3525;
    --font-serif: 'Cormorant Garamond', Georgia, serif;
    --font-sans: 'Inter', system-ui, sans-serif;
    /* Strict WCAG 4.5:1 Target Contrast Adjustments */
    --color-sage-600: #4a563d; /* Enhanced from old #5d6d4b to pass AA checks */
    --color-sage-700: #3d4633;
    --color-sage-800: #2d3525;
    --color-warm-700: #96593c;
}

/* ==================== LAYOUT FRAMEWORK BREAKOUTS ==================== */
html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevents unwanted horizontal shifting on large displays */
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-cream);
    color: var(--text-main);
}

/* CRITICAL FIX: Forces the .container and main block elements to break out 
   of the layout-injected fixed width constraint and span edge-to-edge.
*/
.container,
main[role="main"],
main {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Force all major sections to fill the newly opened full viewport tracking space */
section, footer, header {
    display: block;
    width: 100% !important;
    clear: both;
    box-sizing: border-box;
}

/* ==================== GLOBAL LAYOUT MODIFIERS ==================== */
.font-serif {
    font-family: var(--font-serif);
}

/* Skip Link for Screen Readers */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 0;
    background: #4a563d;
    color: white;
    padding: 10px 20px;
    z-index: 100;
    transition: top 0.2s ease;
}

    .skip-to-content:focus {
        top: 0;
    }

/* Interactivity Navigation Underlines */
.nav-link {
    position: relative;
}

    .nav-link::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background-color: var(--color-sage-600);
        transition: width 0.3s ease;
    }

    .nav-link:hover::after,
    .nav-link:focus::after {
        width: 100%;
    }

/* Intersection Observer Animations */
.fade-in {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .fade-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==================== ACCESSIBILITY PLUGIN WIDGET OVERLAYS ==================== */
#accessibility-widget {
    position: fixed;
    bottom: 25px;
    left: 25px;
    z-index: 50;
}

#acc-widget-toggle {
    background: #2d3525;
    color: #fdfbf7;
    border: 2px solid white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    cursor: pointer;
}

#acc-widget-menu {
    position: absolute;
    bottom: 60px;
    left: 0;
    background: white;
    border: 1px solid #d1d7c7;
    border-radius: 12px;
    padding: 16px;
    width: 260px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.acc-option-btn {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 6px;
    transition: background 0.2s;
}

    .acc-option-btn:hover, .acc-option-btn:focus {
        background: #f6f7f4;
        outline: 2px solid #4a563d;
    }

/* ==================== ADA RENDERING OVERRIDES ==================== */
body.high-contrast {
    background-color: #000000 !important;
    color: #ffffff !important;
}

    body.high-contrast main,
    body.high-contrast header,
    body.high-contrast section,
    body.high-contrast footer {
        background-color: #000000 !important;
        color: #ffffff !important;
        border-color: #ffffff !important;
    }

    /* Target element overlays specifically to prevent layout block issues */
    body.high-contrast #accessibility-widget,
    body.high-contrast #acc-widget-menu,
    body.high-contrast form,
    body.high-contrast .testimonial-card,
    body.high-contrast select,
    body.high-contrast input,
    body.high-contrast textarea {
        background-color: #000000 !important;
        color: #ffffff !important;
        border: 1px solid #ffffff !important;
    }

    body.high-contrast a,
    body.high-contrast button,
    body.high-contrast label,
    body.high-contrast h1,
    body.high-contrast h2,
    body.high-contrast h3,
    body.high-contrast h4,
    body.high-contrast p,
    body.high-contrast span,
    body.high-contrast li {
        color: #ffff00 !important;
    }

body.large-text p,
body.large-text span,
body.large-text li,
body.large-text label,
body.large-text a,
body.large-text button {
    font-size: 125% !important;
    line-height: 1.8 !important;
}

body.large-text h1 {
    font-size: 3.5rem !important;
}

body.large-text h2 {
    font-size: 2.5rem !important;
}

body.dyslexic-friendly {
    font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif !important;
}

/* Responsive Mobile Navigation Drawer Utilities */
@media (max-width: 767px) {
    .mobile-menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .mobile-menu.open {
            max-height: 400px;
        }
}