/**
 * The menu has 2 layouts:
 * - default: full page header height block with a full link block width top or bottom border line
 * - simple: Regular link, thick underline on active, focus & hover
 */

.page-header__menu__link {
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 0.875em);
    font-weight: var(--font-weight, bold);
    font-style: var(--font-style, normal);
    line-height: var(--line-height, inherit);
}

.page-header__menu__text {
    color: var(--color-text, black);
}

.page-header__menu__link[aria-current="page"] .page-header__menu__text {
    color: var(--color-text__active, black);
}

.page-header__menu__link:not([aria-current="page"]):hover .page-header__menu__text,
.page-header__menu__link:not([aria-current="page"]):focus .page-header__menu__text {
    color: var(--color-text__hover, black);
}

.page-header__menu__link-icon {
    fill: var(--color-icon-arrow-small, #aaa)
}

/* Responsive */
@media (max-width: 61.999rem) {
    .page-header__menu__link {
        border-top-color: var(--color-border-horizontal-small, #d9d9d9)
    }

    .page-header__menu__link[aria-current="page"] {
        border-left-color: var(--color-border-vertical-small__active, #aaa);
    }

    .page-header__menu__link:last-child {
        border-bottom-color: var(--color-border-horizontal-small, #d9d9d9);
    }

    .page-header__menu__link:focus:not([aria-current="page"]),
    .page-header__menu__link:hover:not([aria-current="page"]) {
        border-left-color: var(--color-border-vertical-small__interactive, #aaa);
    }
}

@media (min-width: 62rem) {
    .page-header__menu__link::before {
        height: var(--height, 5rem);
        border-top-color: var(--color-border-horizontal-wide, #022979);
        border-right-color: var(--color-border-vertical-wide, transparent);
        border-bottom-color: var(--color-border-horizontal-wide, #022979);
        border-left-color: var(--color-border-vertical-wide, transparent);
        background-color: var(--color-background, transparent);
    }

    .page-header__menu__link[aria-current="page"]::before,
    .page-header__menu__link:hover::before,
    .page-header__menu__link:focus::before {
        transform: translateY(calc(-1 * var(--condition-border-horizontal-position__interactive, -1) * 0.188rem));
    }

    .page-header__menu__link[aria-current="page"]::before {
        border-top-color: var(--color-border-horizontal-wide__active, #022979);
        border-bottom-color: var(--color-border-horizontal-wide__active, #022979);
        background-color: var(--color-background__active, transparent);
    }

    .page-header__menu__link:hover:not([aria-current="page"])::before,
    .page-header__menu__link:focus:not([aria-current="page"])::before {
        background-color: var(--color-background__hover, transparent);
    }

    .page-header__menu__text {
        border-right-color: var(--color-border-vertical-wide, transparent);
        border-left-color: var(--color-border-vertical-wide, transparent);
        padding-left: var(--padding-horizontal, 1rem);
        padding-right: var(--padding-horizontal, 1rem);
    }
}

/* Simple layout */
.page-header__menu__link--simple:focus,
.page-header__menu__link--simple:hover {
    text-decoration-color: var(--color-border-horizontal-wide, black);
}

.page-header__menu__link--simple:active,
.page-header__menu__link--simple[aria-current="page"] {
    text-decoration-color: var(--color-border-horizontal-wide__active, black);
}

.page-header__menu__link--simple .page-header__menu__link-icon {
    fill: transparent;
}

/* Responsive */
@media (max-width: 61.999rem) {
    .page-header__menu__link--simple {
        border-top-color: transparent;
    }

    .page-header__menu__link--simple:focus,
    .page-header__menu__link--simple:hover {
        text-decoration-color: var(--color-border-vertical-small__interactive, black);
    }

    .page-header__menu__link--simple:active,
    .page-header__menu__link--simple[aria-current="page"] {
        text-decoration-color: var(--color-border-vertical-small__active, black);
    }

    .page-header__menu__link--simple[aria-current="page"] {
        border-left-color: transparent;
    }

    .page-header__menu__link--simple:last-child {
        border-bottom-color: transparent;
    }

    .page-header__menu__link--simple:focus:not([aria-current="page"]),
    .page-header__menu__link--simple:hover:not([aria-current="page"]) {
        border-left-color: transparent;
    }
}

@media (min-width: 62rem) {
    .page-header__menu__link--simple::before {
        border-top-color: transparent;
        border-bottom-color: transparent;
    }

    .page-header__menu__link--simple[aria-current="page"]::before {
        border-top-color: transparent;
        border-bottom-color: transparent;
    }
}