/* =========================================
   SENEDD HEADER / NAV
   Mega menus aligned to the RIGHT EDGE OF THE HEADER/NAV CONTAINER
   + desktop fade in/out animation
   Matches Header ViewComponent markup in
   Views/Shared/Components/Header/Default.cshtml
   ========================================= */

:root {
    --senedd-pink: #c2187a;
    --senedd-dark: #232323;
    --senedd-dark-2: #3c3c3c;
    --senedd-grey-1: #f3f3f3;
    --senedd-grey-2: #d8d8d8;
    --senedd-grey-3: #8f8f8f;
    --senedd-grey-4: #666666;
    --senedd-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
}

/* =========================================
   BASE HEADER
   ========================================= */
header[role="banner"] {
    background: #fff;
    position: relative;
    z-index: 1000;
}

    header[role="banner"] .header.container,
    header[role="banner"] .header.header--subHeader.container {
        max-width: 1280px;
    }

.header__site-controls-container {
    justify-content: flex-end;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}

.header__site-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
}

.site-controls__item {
    position: relative;
    font-size: 0.875rem;
}

    .site-controls__item .link,
    .link--language {
        color: var(--senedd-dark);
        text-decoration: none;
        background: none;
        border: none;
        font-size: 0.88rem;
        font-weight: 600;
        line-height: 1.2;
        padding: 0;
    }

        .link--language:hover {
            border-bottom: 2px solid #c9187e;
            padding-bottom: 2px;
        }

    .site-controls__item a:hover,
    .site-controls__item button:hover {
        color: #000;
    }

    .site-controls__item a:focus {
        box-shadow: none;
        outline: 2px solid #c9187e;
        outline-offset: 2px;
    }

.material-icons--tiny {
    font-size: 1rem !important;
    vertical-align: middle;
}

.material-icons-align-sub {
    vertical-align: sub;
}

#siteControlsHelpButton:focus {
    border: 2px solid #c9187e;
    outline: none !important;
    padding: 2px;
}
/* =========================================
   MAIN HEADER ROW
   ========================================= */
.header__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding: 0.6rem 0 0.9rem;
    position: relative;
}

/* =========================================
   LOGOS
   ========================================= */
.header__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex: 0 0 auto;
}

.header__logo--desktop {
    display: inline-flex;
}

.header__logo--mobile {
    display: none;
}

.header__logo--desktop .senedd-logo {
    max-width: 360px;
    height: auto;
    display: block;
}

.header__logo--mobile .senedd-logo {
    max-width: 120px;
    height: auto;
    display: block;
}

/* =========================================
   RIGHT SIDE: SEARCH + NAV
   ========================================= */
.header__search-nav-container {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.85rem;
    min-width: 0;
}

.header__search {
    width: 100%;
    max-width: 300px;
}

.site-search__form {
    display: flex;
    width: 100%;
}

.site-search-input-container {
    flex: 1 1 auto;
}

.site-search__input-box {
    width: 100%;
    height: 32px;
    border: 1px solid var(--senedd-grey-3);
    background: #fff;
    color: var(--senedd-dark);
    padding: 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
}

    .site-search__input-box:focus {
        outline: none;
        border-color: var(--senedd-pink);
        box-shadow: 0 0 0 0.16rem rgba(194, 24, 122, 0.12);
    }

.site-search-button-container {
    flex: 0 0 auto;
}

.button--site-search {
    width: 36px;
    height: 32px;
    border: none;
    background: var(--senedd-pink);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* =========================================
   DESKTOP NAV
   ========================================= */
.header__nav {
    position: relative;
    width: auto;
}

.site-navigation {
    position: relative;
    width: auto;
    padding: 0;
    margin: 0;
}

.site-navigation__inner {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 2.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .site-navigation__inner > li,
    .site-navigation__category {
        list-style: none;
        margin: 0;
        padding: 0;
        width: auto !important;
        flex: 0 0 auto;
    }

/* IMPORTANT: static so mega menu anchors to .site-navigation / .header__nav, not each LI */
.site-navigation__category {
    position: static;
    display: flex;
    align-items: center;
    padding-bottom: 0.25rem;
}

.site-navigation__category-title-button {
    background: none;
    border: 2px solid transparent;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    color: var(--senedd-dark);
    white-space: nowrap;
}

.site-navigation__category-title {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--senedd-dark);
}

.site-navigation__category-title-button:focus {
    box-shadow: none;
    outline: solid #c9187e !important;
    outline-offset: 3px;
}

.site-navigation__category-title-button:hover {
    border-bottom: 2px solid #3C3C3B;
}

    .site-navigation__category-title-button:hover .site-navigation__category-title,
    .site-navigation__category-title:hover {
        color: #000;
    }

.site-navigation__category-title-button::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    display: inline-block;
    margin-left: 0.1rem;
    transition: transform 0.18s ease;
}

.site-navigation__category.is-open .site-navigation__category-title-button::after {
    transform: rotate(-135deg) translateY(-1px);
}

/* =========================================
   DESKTOP MEGA MENU
   aligned to the RIGHT EDGE OF THE HEADER/NAV CONTAINER
   + fade in/out
   ========================================= */
.category-menu {
    position: absolute;
    top: calc(100% + 0.95rem);
    right: 0;
    left: auto;
    background: #fff;
    border: 1px solid #d8d8d8;
    box-shadow: var(--senedd-shadow);
    padding: 1.15rem 1.25rem 1.35rem;
    z-index: 1300;
    width: max-content;
    min-width: 650px;
    max-width: min(1040px, calc(100vw - 40px));
    /* animation base state */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.site-navigation__category.is-open .category-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}

.category-menu__title {
    margin: 0 0 0.85rem;
    font-size: 1.3rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--senedd-dark);
}

    .category-menu__title .link,
    .category-menu__title a {
        color: var(--senedd-dark);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
    }


.category-menu .link:focus {
    box-shadow: none;
    outline: solid #c9187e !important;
    outline-offset: 3px;
}

.horizontal-rule {
    height: 1px;
    background: #999;
    margin: 0 0 1rem;
}

.horizontal-rule--no-margin {
    margin: 0 0 1rem;
}

.category-menu__column-container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 300px);
    gap: 2rem;
    align-items: start;
}

.category-menu__column {
    min-width: 0;
}

.category-menu__sub-categories,
.sub-category__links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sub-categories__sub-category {
    margin-bottom: 3rem;
}

    .sub-categories__sub-category:last-child {
        margin-bottom: 0;
    }

.sub-category__title {
    margin: 0 0 0.45rem;
    font-size: 1.1rem;
    line-height: 1.28;
    font-weight: 700;
    color: var(--senedd-dark);
}

    .sub-category__title a,
    .sub-category__title--link a {
        color: var(--senedd-dark);
        text-decoration: none;
    }

        .sub-category__title--link a:hover,
        .sub-category__link-title:hover {
            color: #000;
        }

.sub-category__link {
    margin-bottom: 0.45rem;
}

    .sub-category__link:last-child {
        margin-bottom: 0;
    }

.sub-category__link-title {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.95rem;
    line-height: 1.35;
    color: #3f3f3f;
    text-decoration: none;
}

.sub-category__reusable-rich-text {
    font-size: 0.93rem;
    color: #555;
}

.button__icon {
    vertical-align: middle;
}

.button__icon--small {
    font-size: 1rem !important;
}

.button__icon--medium {
    font-size: 1.05rem !important;
}

.button__icon--no-margin {
    margin-left: 0.1rem !important;
}

/* =========================================
   HELP DROPDOWN
   ========================================= */
.site-controls__item--help .site-controls__help-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    /*    min-width: 220px;*/
    background: #fff;
    border: 1px solid #d5d5d5;
    border-radius: 7px;
    box-shadow: var(--senedd-shadow);
    /*    list-style: none;*/
    /*    margin: 0;*/
    padding: 0.35rem 0;
    z-index: 1400;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
    display: flex;
    flex-flow: row wrap;
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
}

.site-controls__item--help.is-open .site-controls__help-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0s;
}

.help-menu__item {
    list-style: none;
    padding: 10px;
    text-align: left;
}

.help-menu__item-title {
    background-color: #fff;
    color: #3c3c3b;
    font-size: 0.8rem;
    font-weight: 400;
    text-decoration: none;
}

    .help-menu__item-title:focus {
        box-shadow: none;
        outline-color: #c9187e;
        outline: 2px solid #c9187e;
        outline-offset: 2px;
    }

/* =========================================
   BREADCRUMB (if enabled later)
   ========================================= */
.header--subHeader {
    padding-bottom: 0.75rem;
}

.site-breadcrumbs__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumb {
    list-style: none;
    font-size: 0.95rem;
    color: #333;
}

    .breadcrumb + .breadcrumb::before {
        content: ">";
        color: #666;
        margin-right: 0.3rem;
    }

    .breadcrumb a {
        color: #333;
        text-decoration: none;
    }

/* =========================================
   HAMBURGER BUTTON
   ========================================= */
.hamburger {
    display: none;
    border: none;
    background: none;
    padding: 0.25rem;
    margin-left: auto;
    position: relative;
    z-index: 1500;
}

.hamburger-box {
    width: 36px;
    height: 28px;
    display: inline-block;
    position: relative;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 36px;
    height: 4px;
    background: #000;
    border-radius: 2px;
    position: absolute;
    left: 0;
    content: "";
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.hamburger-inner {
    top: 12px;
}

    .hamburger-inner::before {
        top: -10px;
    }

    .hamburger-inner::after {
        top: 10px;
    }

.hamburger.is-active .hamburger-inner {
    transform: rotate(45deg);
}

    .hamburger.is-active .hamburger-inner::before {
        opacity: 0;
    }

    .hamburger.is-active .hamburger-inner::after {
        transform: rotate(-90deg) translateX(10px);
    }

/* =========================================
   MOBILE NAV
   ========================================= */
.hamburger__container {
    display: none;
}

    .hamburger__container.is-open {
        display: block;
        position: fixed;
        inset: 0;
        overflow-y: auto;
        z-index: 1450;
    }

.hamburger__nav {
    margin-top: 100px;
    background: #3c3c3b;
}

    .hamburger__nav a {
        text-decoration: none;
    }

        .hamburger__nav a:focus {
            outline-color: #c9187e;
            outline-style: solid;
            outline-width: 2px;
        }

    .hamburger__nav button:focus {
        outline-color: #c9187e;
        outline-style: solid;
        outline-width: 2px;
    }

    .hamburger__nav a:hover {
        color: #232323
    }

.site-navigation__hamburger {
    width: 100%;
}

.site-hamburger__inner {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-hamburger__category {
    list-style: none;
    margin-right: 11px;
    margin-left: 11px;
}

.button__icon--down {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.site-hamburger__category-title-button {
    width: 100%;
    background: #3c3c3c;
    color: #fff;
    border-bottom: 1px solid white;
    border-top: none;
    border-right: none;
    border-left: none;
    padding: 0.9rem 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
}

    .site-hamburger__category-title-button .button__icon--down {
        transition: transform .25s ease-in-out;
    }

.site-hamburger__category.is-open .button__icon--down {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    transition: transform .25s ease-in-out;
}

.site-hamburger__category-title {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 700;
    color: #fff;
}

.site-hamburger__category-title--main-link {
    display: block;
    background: #3c3c3c;
    color: #fff;
    text-decoration: none;
    padding: 0.9rem 0.85rem;
    font-size: 1rem;
    font-weight: 700;
}

.hamburger__category-menu {
    display: none;
    padding: 0.2rem 0;
    background: white;
    margin-left: -10px;
    margin-right: -10px;
}

.site-hamburger__category.is-open > .hamburger__category-menu {
    display: block;
}

.site-hamburger__category.is-open .hamburger-sub-category__links {
    display: block;
}

.hamburger-category-menu__title {
    margin: 0 10px;
    padding: 0.85rem 10px;
    border-bottom: 1px solid #707070;
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 700;
    justify-content: space-between;
}

.hamburger-category-menu__title-link {
    color: var(--senedd-dark);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

    .hamburger-category-menu__title-link.link {
        display: flex;
        justify-content: space-between;
    }


.hamburger-category-menu__sub-categories-wrapper {
    display: block;
}

ul.hamburger-category-menu__sub-categories {
    padding-left: unset;
}

.hamburger-sub-categories__sub-category {
    list-style: none;
    padding: 0.85rem 10px;
    margin: 0 10px;
    border-bottom: 1px solid #707070;
}

.hamburger-sub-category__title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--senedd-dark);
}

.hamburger-sub-category__title--with-subCategories {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.hamburger-sub-category__links {
    display: none;
    list-style: none;
    margin: 0.7rem 0 0;
    padding: 0;
}

.hamburger-sub-categories__sub-category.is-open > .hamburger-sub-category__links {
    display: block;
}

.hamburger-sub-category__link {
    margin-bottom: 0.55rem;
}

    .hamburger-sub-category__link:last-child {
        margin-bottom: 0;
    }

.hamburger-sub-category__link-title {
    color: #333;
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1.35;
}

.hamburger__search-container {
    display: none;
}

body.nav-open {
    overflow: hidden;
}

/* =========================================
   MOBILE BREAKPOINT
   ========================================= */
@media (max-width: 991.98px) {
    .site-controls__item--help {
        display: none;
    }

    .header__logo--desktop,
    .header__search-nav-container,
    .header__nav {
        display: none;
    }

    .header__logo--mobile {
        display: inline-flex;
    }

    .header__inner {
        align-items: center;
        padding: 0.7rem 0;
    }

    .hamburger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .hamburger__search-container {
        display: block;
        background-color: #3c3c3b;
    }

    .hamburger__search {
        padding: 10px;
    }

    .header--subHeader {
        display: none;
    }
}


span.site-navigation__category-title {
    font-size: 1.1rem;
    font-weight: 600;
}

@media (min-width: 1200px) {
    li.site-navigation__category {
        margin: 0px 45px 0px 45px !important;
    }
}


@media (min-width: 900px) {
    .site-navigation__category:last-child {
        margin-right: 0 !important;
    }
}