/* =====================================================
   CSS VARIABLES
===================================================== */
:root {
    /* Brand colors */
    --gov-blue: #003476;
    --hover-color: #02ADEF;

    /* UI colors */
    --active-bg: #ffffff;
    --active-text: #003476;
    --text-dark: #1f2937;
    --border-light: #e5e7eb;
    --white: #ffffff;

    /* Typography */
    --font: system-ui, -apple-system, BlinkMacSystemFont,
            "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* =====================================================
   RESET & BASE STYLES
===================================================== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Roboto', "Poppins", Arial, Helvetica, sans-serif;
}

/* =====================================================
   SLUG / BREADCRUMB STYLES
===================================================== */
.slugLink a,
.slugLink a:hover {
    color: #414141;
    text-decoration: none;
}

.slugLink li:hover {
    background-color: #f5f5f6;
}

.slugLink li.active {
    background-color: var(--gov-blue) !important;
    color: #ffffff;
}

.breadcrumbTaxo {
    background-color: #f5f5f6 !important;
}

/* =====================================================
   HEADER LAYOUT
===================================================== */

/* Outer header */
.sub-header {
    background-color: #ffffff;
    border-bottom: 1px solid var(--border-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    position: relative;
}

/* Inner container */
.main-header {
    background-color: #ffffff;
    padding: 0 5px;
    position: relative;

    display: flex;
    align-items: center;
    flex-wrap: wrap;     /* critical */
    overflow: visible;  /* critical */
}

/* =====================================================
   BURGER MENU
===================================================== */
.burger {
    display: none;
    margin-left: auto;
    font-size: 26px;
    padding: 12px;
    cursor: pointer;
}

/* =====================================================
   MENU LINKS – BASE STYLE
===================================================== */
.header-right a {
    color: #414141;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 14px;
    border-radius: 6px;

    display: flex;
    align-items: center;

    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Hover */
.header-right a:hover {
    background-color: #f2f2f2;
    color: #016EC5;
}

/* Active */
.header-right a.active {
    background-color: var(--gov-blue);
    color: #ffffff;
}

/* =====================================================
   GENERIC HEADER STATES (if still needed)
===================================================== */
.header a:hover {
    background-color: #ddd;
}

.header a.active {
    background-color: dodgerblue;
    color: white;
}

/* =====================================================
   MEDIA QUERIES (END ONLY)
===================================================== */

/* DESKTOP ONLY */
@media (min-width: 769px) {
    .header-right {
        display: flex;
        gap: 6px;
        margin-left: auto;
    }
}

/* MOBILE ONLY */
@media (max-width: 768px) {

    .burger {
        display: block;
    }

    .header-right {
        display: none;
        width: 100%;
        flex-direction: column;
        margin-top: 10px;
    }

    .header-right.show {
        display: flex;
    }

    .header-right a {
        width: 100%;
        display: block;
        text-align: left;
        padding: 14px 18px;
        border-radius: 0;
    }

    .header-right a.active {
        margin: 6px 10px;
        padding: 12px 14px;
        border-radius: 6px;
    }
}