/*
        ========================================
        CSS Custom Properties (Base Theme)
        ========================================
        */
        :root {
            --color-background: #ffffff;
            --color-surface: #f8f9fa; /* For menu background */
            --color-text-primary: #212529;
            --color-text-secondary: #495057;
            --color-primary: #0056b3;
            --color-border: #e9ecef;
            --font-family-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            --font-weight-bold: 600;
            --navbar-height: 80px;
            --navbar-padding: 1.5rem;
            --container-width: 1200px;
            --border-radius: 8px;
            --transition-speed: 0.3s;
        }
        
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
        
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; font-family: var(--font-family-sans-serif); line-height: 1.6; }
        .content { height: 200vh; max-width: var(--container-width); margin: 0 auto; padding: 120px var(--navbar-padding); }
        ul { list-style: none; margin: 0; padding: 0; }
        a { text-decoration: none; color: var(--color-text-secondary); transition: color var(--transition-speed) ease; }
        a:hover, a:focus { color: var(--color-primary); }
 .search-form { display: flex; align-items: center; justify-content: flex-end; position: relative; }
        .search-form__input { width: 0; padding: 0.75rem 0; border: none; background: transparent; font-size: 1rem; opacity: 0; visibility: hidden; transition: all var(--transition-speed) ease; }
        .search-form__input:focus { outline: none; }
        .search-form__submit { background: transparent; border: none; cursor: pointer; padding: 0.5rem; display: flex; }
        .search-form__submit svg { width: 24px; height: 24px; color: var(--color-text-secondary); }
        .search-form.is-open .search-form__input { width: 240px; padding-right: 1rem; opacity: 1; visibility: visible; background-color: var(--color-input-bg); border-radius: var(--border-radius); padding-left: 1rem; }




        .navbar { position: sticky; top: 0; z-index: 1000; height: var(--navbar-height); display: flex; align-items: center; background-color: var(--color-background); box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
        .navbar__container { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 var(--navbar-padding); }
        .navbar__brand { font-size: 1.75rem; font-weight: var(--font-weight-bold); color: var(--color-text-primary); }
        .navbar__toggle { display: block; border: 1px solid var(--color-border); border-radius: 4px; padding: 0.25rem 0.75rem; background: transparent; cursor: pointer; }
        .navbar__toggle .bar { display: block; width: 22px; height: 2px; margin: 6px 0; background-color: var(--color-text-primary); transition: transform var(--transition-speed) ease; }
        .navbar__toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
        .navbar__toggle.is-active .bar:nth-child(2) { opacity: 0; }
        .navbar__toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
        
        .navbar__menu { display: none; }
        .navbar__menu.is-active { display: block; position: absolute; top: var(--navbar-height); left: 0; width: 100%; background-color: var(--color-background); box-shadow: 0 8px 16px rgba(0,0,0,0.1); }
        
        .navbar__item > .navbar__link { display: flex; align-items: center; padding: 1.25rem var(--navbar-padding); font-weight: var(--font-weight-bold); }
        .navbar__item:not(:last-child) { border-bottom: 1px solid var(--color-border); }
        
        :is(.navbar__toggle, .navbar__link):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
        
        /* Mobile Accordion Styles */
        .mega-menu-toggle { justify-content: space-between; width: 100%; }
        .mega-menu-toggle::after { content: '›'; font-size: 1.5em; transform: rotate(90deg); transition: transform var(--transition-speed) ease; }
        .mega-menu-item.is-active > .mega-menu-toggle::after { transform: rotate(-90deg); }
        .mega-menu { max-height: 0; overflow: hidden; background-color: var(--color-surface); transition: max-height var(--transition-speed) ease-in-out; }
        .mega-menu-item.is-active > .mega-menu { max-height: 1000px; }
        .mega-menu__list { padding: 0.5rem var(--navbar-padding); }
        .mega-menu__list li a { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: var(--border-radius); }
        .mega-menu__list li a:hover { background-color: #e9ecef; }
        .mega-menu__list .icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-primary); }
        .mega-menu__heading { display: none; }
        .mega-menu__feature { display: none; }
        
        @media (min-width: 992px) {
            .navbar__toggle { display: none; }
            .navbar__menu { display: flex; align-items: center; position: static; width: auto; background: none; box-shadow: none; }
            .navbar__list { display: flex; align-items: center; gap: 0.5rem; }
            .navbar__item, .navbar__item:not(:last-child) { border: none; }
            .navbar__item > .navbar__link { padding: 0.5rem 1rem; }
            .mega-menu-toggle::after { content: '25BE'; margin-left: 0.5em; transform: rotate(0); }
            
            /* --- The Definitive Positioning Fix --- */
            .mega-menu-item {
                /* FIX #1: Make the parent LI static on desktop. */
                /* This forces the child .mega-menu to anchor to the full-width .navbar. */
                position: static;
            }
            .mega-menu {
                /* FIX #2: Position the menu relative to the full viewport/navbar. */
                display: block; position: absolute;
                top: calc(var(--navbar-height) - 5px); /* Appears just below the navbar */
                left: 50%;
                transform: translateX(-50%);
                width: 90vw; max-width: 900px;
                background-color: var(--color-background); border: 1px solid var(--color-border);
                border-radius: var(--border-radius); box-shadow: 0 10px 30px rgba(0,0,0,0.1);
                opacity: 0; visibility: hidden;
                transition: opacity var(--transition-speed) ease, visibility var(--transition-speed) ease;
                max-height: none;
            }
            .mega-menu-item:hover > .mega-menu, .mega-menu-item:focus-within > .mega-menu { opacity: 1; visibility: visible; }
            /* --- End of Fix --- */
            
            .mega-menu__content { padding: 1.5rem; }
            .mega-menu__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
            .mega-menu__list { padding: 0; }
            .mega-menu__heading { display: block; font-size: 0.9rem; font-weight: var(--font-weight-bold); text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 1rem; padding: 0 0.75rem; }
            .mega-menu__feature { display: block; border-radius: var(--border-radius); overflow: hidden; }
            .mega-menu__feature img { display: block; width: 100%; height: auto; }
            .mega-menu__feature-content { padding: 1rem; background-color: var(--color-surface); }
            .mega-menu__feature-content h4 { margin: 0 0 0.5rem; }
            .mega-menu__feature-content p { font-size: 0.9rem; margin: 0 0 1rem; }
            .mega-menu__cta { display: inline-block; padding: 0.5rem 1rem; background-color: var(--color-primary); color: #fff; font-weight: var(--font-weight-bold); border-radius: var(--border-radius); }
        }