:root {
    /* 15px */
    --header-nav-font-size: 0.9375rem;
    /* 11px - also available as fs-7 */
    --header-toolbar-font-size: 0.6875rem;
}

.header-icon-container {
    width: 16px;
    height: 16px;
}

.icon-svg {
    color: var(--color-gray-medium);
    transition: color 0.2s ease;
}

/* Unified icon hover/focus styles */
.accessibility-link:hover .icon-svg,
.accessibility-link:focus .icon-svg,
.header-icon-container:hover .icon-svg,
.header-icon-container:focus .icon-svg,
.header-nav-home:hover .icon-svg,
.header-nav-home:focus .icon-svg {
    color: var(--color-primary-blue);
}

/* Small devices (landscape phones, 576px and up) */
.mobile-header {
    background-color: var(--color-white);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    position: sticky;
    top: 0;
    left: 0;
    height: 85px !important;
    width: 100%;
    z-index: 10000;
}

.mobile-menu-toggle {
    cursor: pointer;
    transition: color 0.2s ease;
}

.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus {
    color: var(--color-primary-blue);
    outline: none;
}

.mobile-menu-toggle svg {
    width: 24px;
    height: 24px;
}

/* Hide hamburger icon, show by default */
.mobile-menu-toggle .hamburger-icon {
    display: block;
}

.mobile-menu-toggle .close-icon {
    display: none;
}

/* When menu is open, show X icon instead of hamburger */
.mobile-menu-toggle[aria-expanded="true"] .hamburger-icon {
    display: none;
}

.mobile-menu-toggle[aria-expanded="true"] .close-icon {
    display: block;
}

.mobile-header-content {
    min-width: 0;
}

.mobile-logo-left img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.mobile-logo-right img {
    height: 50px;
    width: auto;
    object-fit: contain;
}

.mobile-title {
    font-family: 'Open Sans', sans-serif;
    /* fs-6 - rounded from 17px to 16px */
    font-size: 1rem;
    line-height: 1.6em;
    color: var(--color-black);
    min-width: 0;
    overflow-wrap: break-word;
}

/* ========================================
   MOBILE MENU OVERLAY STYLES (Bootstrap Offcanvas)
   ======================================== */

/* Override Bootstrap Offcanvas defaults to match custom design */
.mobile-menu-overlay.offcanvas {
    position: fixed;
    left: 0;
    right: 0;
    background-color: var(--color-white);
    /* Below mobile header (z-index: 10000) */
    z-index: 9998;
    border: none;
    width: 100%;
    max-width: 100%;
    transition: transform 0.3s ease;
    /* Position below mobile header - set in media query */
    top: 85px !important;
    bottom: 0;
    height: auto;
}

/* Hidden state - offcanvas is translated left (off-screen) */
.mobile-menu-overlay.offcanvas.offcanvas-start {
    transform: translateX(-100%);
}

/* Showing state - animating in */
.mobile-menu-overlay.offcanvas.offcanvas-start.showing {
    transform: translateX(0);
}

/* Visible state */
.mobile-menu-overlay.offcanvas.offcanvas-start.show {
    transform: translateX(0);
}

/* Hiding state - animating out */
.mobile-menu-overlay.offcanvas.offcanvas-start.hiding {
    transform: translateX(-100%);
}

.mobile-menu-content {
    /* Remove padding since offcanvas now starts below header */
    padding-top: 0;
    min-height: 100%;
    overflow-y: auto;
}

/* Mobile menu items */
.mobile-menu-item {
    border-bottom: 1px solid var(--color-border-light);
}

.mobile-menu-item--search,
.mobile-menu-item--action {
    /* py-6 px-4 */
    padding: 2rem 1.5rem;
}

/* Shared mobile menu link base styles */
.mobile-menu-overlay .mobile-menu-link-base {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6em;
    color: var(--color-text-dark);
    text-decoration: none;
    transition: color 0.2s ease;
    border-bottom: 1px solid var(--color-border-light);
}

.mobile-menu-overlay .mobile-menu-link-base:hover,
.mobile-menu-overlay .mobile-menu-link-base:focus {
    color: var(--color-primary-blue);
}

/* Mobile menu navigation wrapper */
.mobile-menu-nav .header-nav-item {
    border-bottom: 1px solid var(--color-border-light);
    margin: 0;
    padding: 0;
    position: relative !important;
    list-style-type: none;
}

.mobile-menu-nav .header-nav-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* py-6 px-4 */
    padding: 2rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-menu-nav .header-nav-link::after {
    display: none;
}

/* Mobile navigation with mega-menu (expandable) */
.mobile-menu-nav .header-nav-item--has-mega .header-nav-link.show {
    color: var(--color-link-active);
}

/* Dropdown arrows in mobile menu - same SVG as desktop, sized for mobile */
.mobile-menu-nav .dropdown-arrow {
    width: 32px;
    height: 32px;
    color: currentColor;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    display: block;
}

/* Rotate arrow when menu item is expanded */
.mobile-menu-nav .header-nav-link[aria-expanded="true"] .dropdown-arrow,
.mobile-menu-nav .show .dropdown-arrow {
    transform: rotate(180deg);
}

/* Change arrow color when item is active/expanded */
.mobile-menu-nav .header-nav-link[aria-expanded="true"] {
    color: var(--color-link-active);
}

/* Mobile mega-menu panel */
.mobile-menu-nav .dropdown-menu.mega-menu {
    position: static !important;
    transform: none !important;
    width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    background: var(--color-bg-subtle);
    margin: 0;
}

.mobile-menu-nav .mega-menu-content {
    display: flex;
    gap: 0;
    grid-auto-flow: row;
    grid-template-rows: unset;
    grid-template-columns: unset;
}

.mobile-menu-nav .mega-menu-column-left {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mobile-menu-nav .mega-menu-column-right {
    display: none !important;
}

.mobile-menu-nav .mega-menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* pt-6 pe-4 pb-6 ps-5 */
    padding: 2rem 1.5rem 2rem 3rem;
    background: none;
    border: none;
    cursor: pointer;
    margin: 0;
}

/* Mobile: Hide right arrow, show dropdown arrow */
.mobile-menu-nav .mega-menu-item .mega-menu-arrow-right {
    display: none;
}

.mobile-menu-nav .mega-menu-item .dropdown-arrow {
    display: block;
    width: 32px;
    height: 32px;
    color: currentColor;
    transition: transform 0.3s ease;
    transform: rotate(0deg);
    flex-shrink: 0;
}

/* Hide arrow for items without sub-items */
.mobile-menu-nav .mega-menu-item:not([data-has-subitems]) .dropdown-arrow {
    display: none;
}

/* Mobile mega menu item with sub-items - clickable */
.mobile-menu-nav .mega-menu-item[data-has-subitems] {
    cursor: pointer;
}

/* Rotate arrow when expanded */
.mobile-menu-nav .mega-menu-item[data-has-subitems].expanded .dropdown-arrow {
    transform: rotate(180deg);
}

/* Change color when expanded */
.mobile-menu-nav .mega-menu-item[data-has-subitems].expanded {
    color: var(--color-link-active);
}

/* Mobile sub-items container */
.mobile-menu-nav .mega-menu-subitems {
    display: none;
    flex-direction: column;
    gap: 0;
    background: var(--color-bg-subtle);
}

.mobile-menu-nav .mega-menu-subitems.show {
    display: flex;
}

.mobile-menu-nav .mega-menu-subitem {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 2rem 1.5rem 2rem 4.5rem;
    background: none;
    border: none;
    cursor: pointer;
    margin: 0;
}

.mobile-menu-nav .mega-menu-subitem:last-child {
    border-bottom: none;
}

/* Mobile menu search - all styles handled by Bootstrap utilities d-flex align-items-center gap-3 */

.mobile-search-icon {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
    color: var(--color-gray-medium);
}

.mobile-search-input {
    outline: none;
    font-family: 'Open Sans', sans-serif;
    /* fs-6 */
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6em;
    color: var(--color-text-dark);
}

.mobile-search-input::placeholder {
    color: var(--color-text-dark);
    opacity: 1;
}

/* Mobile menu link content wrapper */
.mobile-menu-link-content {
    display: flex;
    align-items: center;
    /* gap-3 - rounded from 12px to 16px */
    gap: 1rem;
}

.mobile-menu-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: currentColor;
}

.mobile-menu-nav .mega-menu-subitems.collapse,
.mobile-menu-nav .mega-menu-subitems.collapsing {
    transition: none !important;
}

.dropdown-item.mega-menu-item,
.dropdown-item.mega-menu-subitem {
    white-space: normal;
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

    /* Force hide mobile offcanvas menu on desktop/tablet */
    .mobile-menu-overlay.offcanvas {
        visibility: hidden !important;
        transform: translateX(-100%) !important;
    }

    /* Force hide the backdrop */
    .offcanvas-backdrop {
        display: none !important;
    }

    .main-header {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 170px;
        background-color: var(--color-white);
        box-shadow: 0px 4px 4px -1px rgba(12, 12, 13, 0.05),
            0px 4px 4px -1px rgba(12, 12, 13, 0.1);
        justify-content: center;
    }

    .header-content {
        padding: 0 2rem;
    }

    .header-logo-link {
        display: inline-block;
        border-radius: 4px;
        outline: none;
    }

    .header-logo-link:focus-visible {
        outline: 2px solid var(--color-primary-blue);
        outline-offset: 2px;
    }

    .gda-logo {
        width: 55px;
        object-fit: contain;
    }

    .state-emblem {
        width: 89px;
        object-fit: contain;
    }

    .header-center {
        display: flex;
        flex-direction: column;
        /* px-3 - rounded from 12px to 16px */
        padding: 0 1rem;
        flex: 1;
    }

    .accessibility-link:hover,
    .accessibility-link:focus {
        color: var(--color-primary-blue);
    }

    .accessibility-link span {
        display: none;
    }

    .header-toolbar .dropdown-menu {
        --bs-dropdown-font-size: 11px;
    }

    /* Global dropdown item styles - shared by toolbar dropdowns and mega menu items */
    .dropdown-item {
        text-decoration: none;
        color: var(--color-black);
        border-radius: 4px;
        transition: color 0.2s ease;
    }

    .dropdown-item:hover,
    .dropdown-item:focus {
        color: var(--color-primary-blue);
    }

    .dropdown-item.active {
        color: var(--color-primary-blue);
    }

    /* Toolbar dropdown styles */
    .header-toolbar-left .dropdown,
    .header-toolbar-right .dropdown {
        position: relative;
    }

    .header-toolbar-left .dropdown-toggle,
    .header-toolbar-right .dropdown-toggle {
        text-decoration: none;
        color: var(--color-black);
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
    }

    .header-toolbar-left .dropdown-toggle::after,
    .header-toolbar-right .dropdown-toggle::after {
        display: none;
    }

    .header-toolbar-left .dropdown-toggle:hover,
    .header-toolbar-left .dropdown-toggle:focus,
    .header-toolbar-right .dropdown-toggle:hover,
    .header-toolbar-right .dropdown-toggle:focus {
        color: var(--color-primary-blue);
    }

    .header-toolbar-left .dropdown-toggle:hover .icon-svg,
    .header-toolbar-left .dropdown-toggle:focus .icon-svg,
    .header-toolbar-left .dropdown-toggle:hover .dropdown-arrow,
    .header-toolbar-left .dropdown-toggle:focus .dropdown-arrow,
    .header-toolbar-right .dropdown-toggle:hover .icon-svg,
    .header-toolbar-right .dropdown-toggle:focus .icon-svg,
    .header-toolbar-right .dropdown-toggle:hover .dropdown-arrow,
    .header-toolbar-right .dropdown-toggle:focus .dropdown-arrow {
        color: var(--color-primary-blue);
    }

    .header-toolbar-left .dropdown-toggle[aria-expanded="true"] .dropdown-arrow,
    .header-toolbar-right .dropdown-toggle[aria-expanded="true"] .dropdown-arrow {
        transform: rotate(180deg);
    }

    .header-toolbar-right {
        /* gap-3 */
        gap: 1rem;
    }

    .header-toolbar-link {
        text-decoration: none;
        color: var(--color-black);
        /* fs-7 - 11px */
        font-size: 0.6875rem;
    }

    .header-toolbar-link:hover,
    .header-toolbar-link:focus {
        color: var(--color-primary-blue);
    }

    .header-divider {
        width: 100%;
        height: 1px;
        background-color: var(--color-gray-medium);
        /* mt-1 - rounded from 3px to 4px */
        margin-top: 0.25rem;
    }

    .header-nav-home {
        width: 24px;
        height: 24px;
    }

    .header-nav-item {
        position: initial !important;
    }

    .header-nav-item--has-mega {
        position: static;
    }

    /* Bootstrap nav-link compatibility */
    .nav-link.header-nav-link {
        display: flex;
        align-items: center;
        /* gap-2 */
        gap: 0.5rem;
        /* py-1 px-2 - rounded from 4px/6px to 4px/8px */
        padding: 0.25rem 0.5rem;
        text-decoration: none;
        color: #000000;
        /* 15px */
        font-size: 0.9375rem;
        border-radius: 4px;
        transition: all 0.2s ease;
        background: none;
        border: none;
        font: inherit;
        cursor: pointer;
        position: relative;
    }

    .nav-link.header-nav-link span {
        transition: color 0.2s ease;
    }

    /* Hide Bootstrap's default dropdown caret */
    .dropdown-toggle.header-nav-link::after {
        display: none;
    }

    /* Legacy support for non-Bootstrap class */
    .header-nav-link:not(.nav-link) {
        display: flex;
        align-items: center;
        /* gap-2 */
        gap: 0.5rem;
        /* py-1 px-2 - rounded from 4px/6px to 4px/8px */
        padding: 0.25rem 0.5rem;
        text-decoration: none;
        color: #000000;
        /* 15px */
        font-size: 0.9375rem;
        border-radius: 4px;
        transition: all 0.2s ease;
        background: none;
        border: none;
        font: inherit;
        cursor: pointer;
        position: relative;
    }

    .header-nav-link:hover::after,
    .header-nav-item:focus-within .header-nav-link::after {
        content: '';
        position: absolute;
        bottom: -12px;
        left: 8px;
        right: 8px;
        height: 2px;
        z-index: 1001;
    }

    .header-nav-link:focus-visible {
        outline: 2px solid var(--color-primary-blue);
        outline-offset: 2px;
    }

    .dropdown-arrow {
        width: 16px;
        height: 16px;
        color: var(--color-gray-medium);
        transition: transform 0.3s ease, color 0.2s ease;
    }

    .header-nav-link:hover span,
    .header-nav-link:hover .dropdown-arrow,
    .header-nav-link:focus-within span,
    .header-nav-item:focus-within .dropdown-arrow {
        color: var(--color-primary-blue);
    }

    /* Bootstrap dropdown open state */
    .header-nav-item--has-mega .show .dropdown-arrow {
        transform: rotate(180deg);
    }

    .header-nav-search {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        position: relative;
    }

    .header-search-input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }

    .header-search-input {
        width: 90px;
        background: none;
        border: none;
        outline: none;
        /* py-1 pe-4 ps-1 */
        padding: 0.25rem 1.5rem 0.25rem 0.25rem;
        /* fs-6 */
        font-size: 1rem;
        font-family: 'Open Sans', sans-serif;
        color: var(--color-black);
    }

    .header-search-input::placeholder {
        color: var(--color-gray-medium);
    }

    .header-search-button {
        position: absolute;
        right: 0;
        background: none;
        border: none;
        padding: 0.25rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header-search-icon {
        color: var(--color-gray-medium);
        transition: color 0.2s ease;
    }

    .header-search-input:hover~.header-search-button .header-search-icon,
    .header-search-input:focus~.header-search-button .header-search-icon,
    .header-search-button:hover .header-search-icon,
    .header-search-button:focus .header-search-icon {
        color: var(--color-primary-blue);
    }

    .header-search-underline {
        width: 90px;
        height: 1px;
        background-color: var(--color-gray-medium);
        /* Keep 1px as very small */
        margin-top: 0.0625rem;
    }

    .header-nav-search:focus-within .header-search-underline {
        background-color: var(--color-primary-blue);
    }

    /* Bootstrap dropdown-menu overrides for mega-menu */
    .dropdown-menu.mega-menu {
        position: absolute !important;
        top: calc(100% + 7px) !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100%;
        background-color: var(--color-white);
        border: 1px solid var(--color-secondary-blue);
        border-radius: 4px;
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
        margin: 0;
        z-index: 1000;
        animation: slideDown 0.3s ease forwards;
    }


    .mega-menu-content {
        display: flex;
        align-items: flex-start;
    }

    .mega-menu-column-left {
        display: flex;
        flex-direction: column;
        flex: 1 1 0%;
        min-width: 0;
    }

    .mega-menu-column-right {
        display: flex;
        flex-direction: column;
        flex: 1 1 0%;
        min-width: 0;
    }

    .mega-menu-subitems {
        display: none;
        flex-direction: column;
    }

    .mega-menu-subitems.active {
        display: flex;
    }

    .mega-menu-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
    }

    /* Desktop/Tablet: Right arrow icon */
    .mega-menu-item .mega-menu-arrow-right {
        flex-shrink: 0;
        color: var(--color-black);
        transition: color 0.2s ease;
    }

    .mega-menu-item:hover .mega-menu-arrow-right {
        color: var(--color-primary-blue);
    }

    .mega-menu-item.active .mega-menu-arrow-right {
        color: var(--color-primary-blue);
    }

    /* Desktop/Tablet: Hide dropdown arrow */
    .mega-menu-item .dropdown-arrow {
        display: none;
    }

    /* Desktop/Tablet: Hide arrows for items without sub-items */
    .mega-menu-item:not([data-has-subitems]) .mega-menu-arrow-right {
        display: none;
    }

    .mega-menu-subitem {
        display: flex;
        align-items: center;
    }

    .gda-logo {
        width: 66px;
    }

    .state-emblem {
        width: 108px;
    }

    .header-center {
        /* px-3 - rounded from 15px to 16px */
        padding: 0 1rem;
    }

    .header-toolbar-right {
        /* gap-4 - rounded from 20px to 24px */
        gap: 1.5rem;
    }

    .accessibility-link {
        font-size: var(--header-toolbar-font-size);
    }

    .accessibility-link span {
        display: inline;
    }

    /* Toolbar dropdown responsive styles */
    .header-toolbar-left .dropdown-toggle,
    .header-toolbar-right .dropdown-toggle {
        font-size: var(--header-toolbar-font-size);
    }

    .nav-link.header-nav-link,
    .header-nav-link:not(.nav-link) {
        font-size: var(--header-nav-font-size);
        /* py-1 px-2 - rounded from 4px/6px to 4px/8px */
        padding: 0.25rem 0.5rem;
    }

    .header-search-input {
        width: 110px;
    }

    .header-search-underline {
        width: 110px;
    }

    .mega-menu-item {
        font-size: 0.9375rem;
        /* 15px */
    }

    .mega-menu-subitem {
        font-size: 0.9375rem;
        /* 15px */
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .main-title {
        /* fs-2 - rounded from 36px to 32px */
        font-size: 2rem;
    }

    .header-center {
        /* px-4 - rounded from 20px to 24px */
        padding: 0 1.5rem;
    }

    .header-toolbar-right {
        /* gap-4 */
        gap: 1.5rem;
    }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    :root {
        /* fs-6 - 16px */
        --header-nav-font-size: 1rem;
        /* 12px */
        --header-toolbar-font-size: 0.75rem;
    }

    .header-content {
        max-width: 1440px;
        /* px-7 custom - 120px */
        padding: 0 7.5rem;
    }

    .gda-logo {
        width: 78px;
    }

    .state-emblem {
        width: 127px;
    }

    .header-center {
        /* px-4 - rounded from 25px to 24px */
        padding: 0 1.5rem;
    }

    .header-toolbar-right {
        /* gap-5 - rounded from 33px to 48px */
        gap: 3rem;
    }

    .header-toolbar .dropdown-menu {
        --bs-dropdown-font-size: var(--header-toolbar-font-size);
    }

    .accessibility-link {
        font-size: var(--header-toolbar-font-size);
    }

    .header-toolbar-link {
        font-size: var(--header-toolbar-font-size);
    }

    /* Toolbar dropdown responsive styles */
    .header-toolbar-left .dropdown-toggle,
    .header-toolbar-right .dropdown-toggle {
        font-size: var(--header-toolbar-font-size);
    }

    .main-title {
        /* fs-1 - 40px */
        font-size: 2.5rem;
        /* Keep 40px as 2.5rem for consistency with font-size */
        margin-top: 2.5rem;
    }

    .nav-link.header-nav-link,
    .header-nav-link:not(.nav-link) {
        font-size: var(--header-nav-font-size);
        /* py-1 px-2 */
        padding: 0.25rem 0.5rem;
    }

    .header-search-input {
        width: 128px;
    }

    .header-search-underline {
        width: 128px;
    }

    .mega-menu-item {
        font-size: var(--header-nav-font-size);
    }

    .mega-menu-subitem {
        font-size: var(--header-nav-font-size);
    }
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}