/* Header
 *
 * Fixed, because it floats over the hero on every template, and it stays
 * pinned for the whole page on desktop and mobile alike (client request; the
 * original Figma note had the bar hide on the way down). The only scroll state
 * is .is-stuck, set by scripts/tgc-motion.js, which gives it a cream ground.
 */
.site-header {
    position: fixed;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background-color: transparent;
}

.header-container {
    position: relative;
    max-width: var(--tgc-container);
    margin: 0 auto;
    padding: calc(23 * var(--tgc-u)) var(--tgc-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(40 * var(--tgc-u));
}

.site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(40 * var(--tgc-u));
    flex: 1;
}

.site-header__cta {
    flex: none;
}

/*
 * Once off the opener the bar is over live content, so it needs a ground of
 * its own — otherwise the nav lands on top of whatever happens to be there.
 */
.site-header.is-stuck {
    background-color: var(--tgc-cream);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.site-header.is-stuck .site-header__cta .arrow-button__arrow {
    background-color: transparent;
}

/* Scrolled away from a violet hero, the bar is back on cream: ink, not white. */
.site-header.is-stuck .wordmark,
.site-header.is-stuck .main-nav .nav-menu a,
.site-header.is-stuck .nav-toggle {
    color: var(--tgc-ink);
}

.site-header.is-stuck .wordmark {
    --tgc-wordmark-dot: var(--tgc-violet);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: calc(50 * var(--tgc-u));
    margin-left: auto;
}

.main-nav .nav-menu {
    display: flex;
    align-items: center;
    gap: calc(50 * var(--tgc-u));
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav .nav-menu li {
    position: relative;
}

.main-nav .nav-menu a {
    display: inline-flex;
    align-items: center;
    color: var(--tgc-ink);
    font-size: calc(16 * var(--tgc-ut));
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
    transition: color 0.2s ease;
}

.main-nav .nav-menu a:hover,
.main-nav .nav-menu .current-menu-item > a,
.main-nav .nav-menu .current_page_item > a {
    color: var(--tgc-violet);
}

/*
 * Parent items get the Figma chevron (images/icons/chevron-down.svg) as a mask
 * so the artwork is exact and still takes the link colour. No markup change,
 * which keeps wp_nav_menu output untouched.
 */
.main-nav .nav-menu .menu-item-has-children > a::after {
    content: "";
    display: block;
    width: 9.9px;
    height: 5.66px;
    margin-left: 8px;
    background-color: currentColor;
    -webkit-mask: url("../images/icons/chevron-down.svg") no-repeat center / contain;
    mask: url("../images/icons/chevron-down.svg") no-repeat center / contain;
    transition: transform 0.2s ease;
}

.main-nav .nav-menu .menu-item-has-children:hover > a::after,
.main-nav .nav-menu .menu-item-has-children:focus-within > a::after,
.main-nav .nav-menu .menu-item-has-children.is-open > a::after {
    transform: rotate(180deg);
}

/* No href on this one, so it needs to look clickable on its own. */
.main-nav .nav-menu__disclosure {
    cursor: pointer;
}

.main-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: calc(-18 * var(--tgc-u));
    z-index: 20;
    min-width: calc(210 * var(--tgc-u));
    margin: 0;
    padding: calc(12 * var(--tgc-u)) 0;
    list-style: none;
    border-radius: var(--tgc-radius);
    background-color: var(--theme-white);
    box-shadow: 0 14px 34px rgba(20, 22, 28, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.main-nav .menu-item-has-children:hover > .sub-menu,
.main-nav .menu-item-has-children:focus-within > .sub-menu,
.main-nav .menu-item-has-children.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-nav .sub-menu a {
    display: block;
    padding: 8px calc(20 * var(--tgc-u));
}

/* Mobile toggle */
.nav-toggle {
    display: none;
    width: calc(42 * var(--tgc-u));
    height: calc(42 * var(--tgc-u));
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block;
    width: calc(20 * var(--tgc-u));
    height: 1.5px;
    margin: 0 auto;
    background-color: var(--tgc-ink);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: "";
    position: relative;
}

.nav-toggle__bars::before {
    top: -6px;
}

.nav-toggle__bars::after {
    top: 4.5px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
    background-color: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
    transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
    transform: translateY(-4.5px) rotate(-45deg);
}

@media (max-width: 968px) {
    .header-container {
        padding: 16px 20px;
        flex-wrap: wrap;
    }

    .site-header__bar {
        flex-wrap: wrap;
        flex: 1 1 100%;
    }

    /*
     * A proper touch target: the fluid 42 comes out at 28px down here. The
     * negative margin keeps the bars where they sat against the gutter, and
     * 37px matches the bar's first row so it does not grow the header.
     */
    .nav-toggle {
        display: block;
        width: 44px;
        height: 37px;
        margin-left: auto;
        margin-right: -12px;
    }

    .nav-toggle__bars,
    .nav-toggle__bars::before,
    .nav-toggle__bars::after {
        width: 20px;
    }

    /*
     * Contact sits on the bar, immediately left of the menu button, instead of
     * dropping to a second row. It is absolutely placed because it lives
     * outside the bar, which wraps to take the open menu underneath.
     * 20 gutter + 44 button - 12 overhang + 8 gap.
     */
    .site-header__cta {
        position: absolute;
        top: 16px;
        right: 60px;
        display: flex;
        align-items: center;
        /* The height of the bar's first row: the 72px lockup at 91:47. */
        height: 37px;
    }

    .main-nav {
        order: 3;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        display: none;
        padding: 14px 0 8px;
    }

    .main-nav.is-open {
        display: flex;
    }

    /*
     * With the menu down the header is a solid panel on every template: cream
     * ground, ink type. The violet-hero pages' white treatment stands down for
     * it (see styles/blocks/service-hero.css), and a long menu scrolls inside
     * the panel rather than running off the bottom of the screen.
     */
    .site-header.is-menu-open {
        background-color: var(--tgc-cream);
        box-shadow: 0 16px 32px rgba(20, 22, 28, 0.12);
    }

    .site-header.is-menu-open .main-nav {
        max-height: calc(100vh - var(--tgc-header-h) - 16px);
        max-height: calc(100dvh - var(--tgc-header-h) - 16px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .main-nav .nav-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
    }

    .main-nav .nav-menu a {
        display: flex;
        padding: 10px 0;
        font-size: 16px;
    }

    /*
     * Services is always expanded down here, so it reads as the group's label
     * rather than a control: no chevron promising a dropdown that never moves.
     */
    .main-nav .nav-menu .menu-item-has-children > a::after {
        display: none;
    }

    .main-nav .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding: 0 0 4px 16px;
        min-width: 0;
        border-radius: 0;
        background-color: transparent;
    }

    .main-nav .sub-menu a {
        padding: 8px 0;
    }
}

/* Header height is the hook the templates use to clear the fixed bar. */
:root {
    --tgc-header-h: calc(93 * var(--tgc-u));
}

@media (max-width: 968px) {
    :root {
        --tgc-header-h: 75px;
    }
}