/*
Theme Name: iBUILDiT Child
Theme URI: https://iplanit.ie
Description: Child theme for iBUILDiT
Author: iPLANiT Ltd.
Author URI: https://iplanit.ie
Template: iBUILDiT
Version: 1.0.3
Text Domain: ibuildit-child
*/


/* body #page{
    overflow: hidden;
} */
/* ==========================================================
   SMART STICKY HEADER GROUP
   Announcement bar and navigation move together
   ========================================================== */

.site-header-group {
    position: sticky;
    z-index: 9000;
    top: 0;
    width: 100%;
    transform: translate3d(0, 0, 0);
    transition:
        transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 200ms ease;
    will-change: transform;
}

.site-header-group.is-scrolled {
    box-shadow: 0 7px 22px rgba(35, 36, 38, 0.12);
}

.site-header-group.is-header-hidden {
    transform: translate3d(0, calc(-100% - 2px), 0);
}

.site-header-group .site-header,
.site-header-group .site-header--fixed {
    position: relative;
    top: auto;
}

body.mobile-menu-open .site-header-group {
    transform: translate3d(0, 0, 0);
}


/* ==========================================================
   HEADER AND PRIMARY NAVIGATION
   ========================================================== */

.site-header {
    --header-split-position: 24.5%;
    --header-diagonal-width: 9px;
    --desktop-menu-row-height: 46px;

    position: relative;
    z-index: 1000;
    isolation: isolate;
    width: 100%;
    padding: 0 !important;
    border-bottom: 0;
    background-color: #ffffff;
}

.site-header--fixed {
    position: relative;
    top: auto;
}

.site-header,
.site-header * {
    box-sizing: border-box;
}


/* Charcoal navigation background */

.site-header::before {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: calc(
        var(--header-split-position) +
        var(--header-diagonal-width)
    );
    background: linear-gradient(
        110deg,
        #232426 0%,
        #1d1e20 100%
    );
    clip-path: polygon(
        var(--header-diagonal-width) 0,
        100% 0,
        100% 100%,
        0 100%
    );
    content: "";
    pointer-events: none;
}


/* Red diagonal transition */

.site-header::after {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: var(--header-split-position);
    width: calc(
        var(--header-diagonal-width) * 2
    );
    background-color: #b02020;
    clip-path: polygon(
        var(--header-diagonal-width) 0,
        100% 0,
        var(--header-diagonal-width) 100%,
        0 100%
    );
    content: "";
    pointer-events: none;
}

.site-header__inner {
    position: relative;
    z-index: 2;
    display: flex;
    width: 80%;
    max-width: 1500px;
    min-height: calc(
        var(--desktop-menu-row-height) * 2
    );
    margin: 0 auto;
    align-items: center;
}


/* ==========================================================
   BRANDING
   ========================================================== */

.site-header .site-branding {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    padding-right: 45px;
}

.site-header .site-logo {
    display: inline-flex;
    align-items: center;
}

.site-header .site-logo img {
    display: block;
    width: auto;
    height: auto;
    max-height: 68px;
}

.site-header .site-title {
    color: #232426;
    font-weight: 800;
    text-decoration: none;
}

.site-header .site-logo:focus-visible,
.site-header .site-title:focus-visible {
    outline: 3px solid #b02020;
    outline-offset: 4px;
}


/* ==========================================================
   TWO-ROW DESKTOP NAVIGATION
   ========================================================== */

.site-header .desktop-navigation {
    position: relative;
    display: flex;
    min-width: 0;
    margin-left: auto;
    padding-left: 38px;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

.site-header .desktop-navigation__row {
    position: relative;
    width: 100%;
    min-height: var(--desktop-menu-row-height);
}

.site-header .desktop-navigation__row--one {
    z-index: 2;
}

.site-header .desktop-navigation__row--two {
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-header .desktop-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-header .desktop-navigation
    .primary-menu--desktop {
    display: flex;
    width: 100%;
    min-height: var(--desktop-menu-row-height);
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.site-header .desktop-navigation li {
    position: relative;
    margin: 0;
    padding: 0;
}

.site-header .desktop-navigation
    .primary-menu--desktop > li > a {
    position: relative;
    display: flex;
    min-height: var(--desktop-menu-row-height);
    padding: 8px 17px;
    align-items: center;
    color: #ffffff;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition:
        color 180ms ease,
        opacity 180ms ease;
}

.site-header .desktop-navigation
    .primary-menu--desktop > li > a::before {
    position: absolute;
    right: 17px;
    bottom: 2px;
    left: 17px;
    height: 3px;
    background-color: #d3242a;
    content: "";
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 180ms ease;
}

.site-header .desktop-navigation
    .primary-menu--desktop > li:hover > a::before,
.site-header .desktop-navigation
    .primary-menu--desktop > li:focus-within > a::before,
.site-header .desktop-navigation
    .primary-menu--desktop > .current-menu-item > a::before,
.site-header .desktop-navigation
    .primary-menu--desktop > .current-menu-parent > a::before,
.site-header .desktop-navigation
    .primary-menu--desktop > .current-menu-ancestor > a::before {
    transform: scaleX(1);
}

.site-header .desktop-navigation
    .primary-menu--desktop > li:hover > a,
.site-header .desktop-navigation
    .primary-menu--desktop > li:focus-within > a {
    color: #ffffff;
}

.site-header .desktop-navigation a:focus-visible {
    z-index: 3;
    outline: 3px solid #ffffff;
    outline-offset: -3px;
}


/* ==========================================================
   ROOT SUBMENU INDICATOR
   ========================================================== */

.site-header .desktop-navigation
    .primary-menu--desktop >
    .menu-item-has-children > a {
    gap: 10px;
}

.site-header .desktop-navigation
    .primary-menu--desktop >
    .menu-item-has-children > a::after {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    content: "";
    transform: rotate(45deg);
    transition: transform 180ms ease;
}

.site-header .desktop-navigation
    .primary-menu--desktop >
    .menu-item-has-children:hover > a::after,
.site-header .desktop-navigation
    .primary-menu--desktop >
    .menu-item-has-children:focus-within > a::after {
    margin-top: 4px;
    transform: rotate(225deg);
}


/* ==========================================================
   FIRST-LEVEL DROPDOWN
   ========================================================== */

.site-header .desktop-navigation
    .primary-menu--desktop > li > .sub-menu {
    position: absolute;
    z-index: 50;
    top: calc(100% - 3px);
    left: 17px;
    width: 260px;
    padding: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    border-left: 5px solid #b02020;
    background-color: #ffffff;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.22);
    transform: translateY(12px);
    transition:
        opacity 180ms ease,
        visibility 180ms ease,
        transform 180ms ease;
}

.site-header .desktop-navigation
    .primary-menu--desktop >
    li:not(.menu-item--mega):hover > .sub-menu,
.site-header .desktop-navigation
    .primary-menu--desktop >
    li:not(.menu-item--mega):focus-within > .sub-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.site-header .desktop-navigation
    .sub-menu li {
    width: 100%;
}

.site-header .desktop-navigation
    .primary-menu--desktop >
    li > .sub-menu > li {
    border-bottom: 1px solid #e2e2e2;
}

.site-header .desktop-navigation
    .primary-menu--desktop >
    li > .sub-menu > li:last-child {
    border-bottom: 0;
}

.site-header .desktop-navigation
    .sub-menu a {
    display: flex;
    width: 100%;
    min-height: 48px;
    padding: 14px 20px;
    align-items: center;
    justify-content: space-between;
    color: #232426;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    white-space: normal;
    transition:
        background-color 180ms ease,
        color 180ms ease,
        padding-left 180ms ease;
}

.site-header .desktop-navigation
    .sub-menu a:hover,
.site-header .desktop-navigation
    .sub-menu a:focus-visible {
    padding-left: 25px;
    background-color: #f5f3f0;
    color: #b02020;
}

.site-header .desktop-navigation
    .primary-menu--desktop >
    li > .sub-menu > li > a::after {
    flex: 0 0 auto;
    margin-left: 18px;
    color: #b02020;
    content: "\2192";
    opacity: 0;
    transform: translateX(-7px);
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.site-header .desktop-navigation
    .primary-menu--desktop >
    li > .sub-menu > li:hover > a::after,
.site-header .desktop-navigation
    .primary-menu--desktop >
    li > .sub-menu > li:focus-within > a::after,
.site-header .desktop-navigation
    .primary-menu--desktop >
    li > .sub-menu >
    .current-menu-item > a::after {
    opacity: 1;
    transform: translateX(0);
}


/* ==========================================================
   NESTED DESKTOP SUBMENUS
   ========================================================== */

.site-header .desktop-navigation
    .sub-menu .sub-menu {
    position: static;
    width: 100%;
    max-height: none;
    padding: 4px 0 9px;
    overflow: visible;
    visibility: inherit;
    opacity: 1;
    pointer-events: inherit;
    border-left: 0;
    background-color: #f5f3f0;
    box-shadow: none;
    transform: none;
    transition: none;
}


/* Second-level children */

.site-header .desktop-navigation
    .sub-menu .sub-menu > li > a {
    position: relative;
    min-height: 42px;
    padding-left: 48px;
    font-weight: 500;
}

.site-header .desktop-navigation
    .sub-menu .sub-menu > li > a:hover,
.site-header .desktop-navigation
    .sub-menu .sub-menu > li > a:focus-visible {
    padding-left: 53px;
}


/* Subtle L-shaped hierarchy marker */

.site-header .desktop-navigation
    .sub-menu .sub-menu > li > a::before {
    position: absolute;
    top: 50%;
    left: 20px;
    width: 13px;
    height: 13px;
    border-bottom: 1px solid rgba(176, 32, 32, 0.28);
    border-left: 1px solid rgba(176, 32, 32, 0.28);
    content: "";
    transform: translateY(-70%);
    pointer-events: none;
}


/* Third-level children */

.site-header .desktop-navigation
    .sub-menu .sub-menu
    .sub-menu > li > a {
    padding-left: 66px;
}

.site-header .desktop-navigation
    .sub-menu .sub-menu
    .sub-menu > li > a:hover,
.site-header .desktop-navigation
    .sub-menu .sub-menu
    .sub-menu > li > a:focus-visible {
    padding-left: 71px;
}


/* Keep every L marker the same size */

.site-header .desktop-navigation
    .sub-menu .sub-menu
    .sub-menu > li > a::before {
    left: 38px;
    width: 13px;
    height: 13px;
}


/* Current nested page */

.site-header .desktop-navigation
    .sub-menu .sub-menu
    .current-menu-item > a {
    background-color: #ffffff;
    color: #232426;
}

.site-header .desktop-navigation
    .sub-menu .sub-menu
    .current-menu-item > a::before {
    border-color: rgba(176, 32, 32, 0.55);
}


/* ==========================================================
   DESKTOP / MOBILE VISIBILITY
   ========================================================== */

.site-header .menu-toggle {
    display: none;
}

.site-menu-overlay {
    display: none;
}




@media only screen and (max-width: 2000px) {
    .site-header {
        --header-split-position: 22.5%;
    }
}


/* ==========================================================
   LARGE AND MEDIUM DESKTOP
   ========================================================== */

/*
 * Header split (dark panel + red diagonal) on wide screens
 * ---------------------------------------------------------
 * Problem: the split was a % of the full screen width, but the logo sits
 * inside .site-header__inner, which is centred and capped at 1500px.
 * Above about 2000px the percentage fell behind the logo and the dark
 * panel covered it.
 *
 * Fix: position the split from the container's left edge instead.
 *
 *   Container width     = min(80%, 1500px)   (width: 80%; max-width: 1500px)
 *   Container left edge = (100% - container width) / 2   (margin: 0 auto)
 *   Split               = container left edge + 200px
 *
 * Why 200px: logo (170px) + 30px gap before the diagonal.
 * This matches the old 22.5% value exactly at 1600px and 2000px.
 * If the logo width changes, update 200px (logo width + 30px).
 *
 * Example at 2560px: (2560 - 1500) / 2 + 200 = 730px
 * The logo ends at 700px and the menu starts at 745px.
 *
 * Applies from 1441px up only. Below that, the container width changes
 * (90% / 95% / 97%), so those breakpoints keep their own values.
 */
   
 @media only screen and (min-width: 1441px) {
  .site-header {
    --header-split-position: calc((100% - min(80%, 1500px)) / 2 + 200px);
  }
}  

@media only screen and (max-width: 1440px) {
    .site-header {
        --header-split-position: 27.5%;
    }
}

@media only screen and (max-width: 1360px) {
    .site-header__inner {
        width: 90%;
    }
    .site-header .site-branding {
        padding-right: 0;
    }
    .site-header {
        --header-split-position: 16.5%;
    }
    .site-header .desktop-navigation .primary-menu--desktop {
        gap: 12px;
    }
    .site-header .desktop-navigation .primary-menu--desktop > li > a {
        padding: 8px 9px;
        font-weight: 400;
        font-size: 15px;
    }
    .site-header .site-logo img{
        max-width: 150px !important;
    }
}

/* ==========================================================
   COMPACT DESKTOP
   ========================================================== */

@media only screen and (max-width: 1150px) {
    .site-header {
        --header-split-position: 17%;
    }

    .site-header__inner {
        width: 95%;
    }

    .site-header .site-branding {
        padding-right: 25px;
    }

    .site-header .desktop-navigation
        .primary-menu--desktop {
        gap: 2px;
    }

    .site-header .desktop-navigation
        .primary-menu--desktop > li > a {
        padding-right: 9px;
        padding-left: 9px;
        font-size: 14px;
    }

    .site-header .desktop-navigation
        .primary-menu--desktop > li > a::before {
        right: 9px;
        left: 9px;
    }

    .site-header .desktop-navigation
        .primary-menu--desktop > li > .sub-menu {
        left: 9px;
    }
}


@media only screen and (max-width: 1040px) {
    .site-header .desktop-navigation {
        padding-left: 0;
    }
    .site-header__inner {
        width: 97%;
    }
}



/* Existing hamburger icon background */

.menu-toggle__icon {
    background: #ffffff !important;
}


/* ==========================================================
   MOBILE NAVIGATION
   ========================================================== */

@media only screen and (max-width: 970px) {
    .site-header {
        border-bottom: 1px solid #eeeeee;
    }

    .site-header::before,
    .site-header::after {
        display: none;
    }

    .site-header__inner {
        width: 90%;
        min-height: 86px;
    }

    .site-header .site-branding {
        padding-right: 0;
    }

    .site-header .site-logo img {
        max-height: 65px;
    }

    .site-header .desktop-navigation {
        display: none;
    }


    /* Hamburger
       ====================================================== */

    .site-header .menu-toggle {
        display: inline-flex;
        min-width: 48px;
        min-height: 48px;
        margin-left: auto;
        padding: 8px;
        border: 0;
        appearance: none;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background-color: transparent;
        color: #232426;
        font: inherit;
        font-weight: 700;
        cursor: pointer;
    }

    .site-header .menu-toggle:focus-visible {
        outline: 3px solid #b02020;
        outline-offset: 3px;
    }

    .site-header .menu-toggle__icon {
        position: relative;
        display: block;
        width: 24px;
        height: 16px;
        border-top: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
    }

    .site-header .menu-toggle__icon::before {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: currentColor;
        content: "";
        transform: translateY(-50%);
    }


    /* Full-screen overlay
       ====================================================== */

    .site-menu-overlay {
        position: fixed;
        z-index: 10000;
        inset: 0;
        display: flex;
        width: 100%;
        height: 100%;
        padding: 0;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        background-color: rgba(35, 36, 38, 0.96);
        backdrop-filter: blur(12px);
        color: #ffffff;
        transition:
            opacity 220ms ease,
            visibility 220ms ease;
    }

    .site-menu-overlay.is-open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .site-menu-overlay__inner {
        display: flex;
        width: 100%;
        height: 100%;
        padding: 24px 7% 40px;
        overflow-y: auto;
        flex-direction: column;
    }

    .site-menu-overlay__bar {
        display: flex;
        width: 100%;
        min-height: 64px;
        align-items: center;
        justify-content: space-between;
        flex: 0 0 auto;
    }

    .site-menu-overlay__branding .site-logo {
        display: inline-flex;
        align-items: center;
    }

    .site-menu-overlay__branding .site-logo img {
        display: block;
        width: auto;
        height: auto;
        max-width: 190px;
        max-height: 64px;
        filter: brightness(0) invert(1);
    }

    .site-menu-overlay__branding .site-title {
        color: #ffffff;
        font-weight: 800;
        text-decoration: none;
    }

    .site-menu-overlay .menu-close {
        display: inline-flex;
        width: 48px;
        height: 48px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.4);
        appearance: none;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        color: #ffffff;
        font: inherit;
        font-size: 34px;
        line-height: 1;
        cursor: pointer;
    }

    .site-menu-overlay .menu-close:hover {
        border-color: #ffffff;
        background-color: #ffffff;
        color: #232426;
    }

    .site-menu-overlay .menu-close:focus-visible {
        outline: 3px solid #ffffff;
        outline-offset: 4px;
    }


    /* Mobile menu list
       ====================================================== */

    .site-menu-overlay .mobile-navigation {
        width: 100%;
        max-width: 720px;
        margin: 45px auto 0;
    }

    .site-menu-overlay .mobile-navigation ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .site-menu-overlay
        .primary-menu--mobile > li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    }

    .site-menu-overlay
        .mobile-navigation li {
        position: relative;
        margin: 0;
    }

    .site-menu-overlay
        .mobile-navigation a {
        display: block;
        padding: 18px 58px 18px 0;
        color: #ffffff;
        font-weight: 700;
        line-height: 1.25;
        text-decoration: none;
    }

    .site-menu-overlay
        .primary-menu--mobile > li > a {
        font-size: 25px;
    }

    .site-menu-overlay
        .mobile-navigation a:hover {
        color: #e64848;
    }

    .site-menu-overlay
        .mobile-navigation a:focus-visible {
        outline: 3px solid #ffffff;
        outline-offset: -3px;
    }

    .site-menu-overlay
        .mobile-navigation .current-menu-item > a {
        color: #e64848;
    }


    /* Mobile submenu toggle
       ====================================================== */

    .site-menu-overlay .submenu-toggle {
        position: absolute;
        z-index: 2;
        top: 8px;
        right: 0;
        display: inline-flex;
        width: 48px;
        height: 48px;
        padding: 0;
        border: 0;
        appearance: none;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        color: #ffffff;
        cursor: pointer;
    }

    .site-menu-overlay .submenu-toggle::before {
        display: block;
        width: 10px;
        height: 10px;
        margin-top: -5px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        content: "";
        transform: rotate(45deg);
        transition: transform 200ms ease;
    }

    .site-menu-overlay
        .menu-item-has-children.is-submenu-open
        > .submenu-toggle::before {
        margin-top: 5px;
        transform: rotate(225deg);
    }

    .site-menu-overlay
        .submenu-toggle:hover {
        color: #e64848;
    }

    .site-menu-overlay
        .submenu-toggle:focus-visible {
        outline: 3px solid #ffffff;
        outline-offset: -3px;
    }


    /* Mobile submenus
       ====================================================== */

    .site-menu-overlay
        .mobile-navigation .sub-menu {
        max-height: 0;
        padding: 0 0 0 22px;
        overflow: hidden;
        visibility: hidden;
        opacity: 0;
        border-left: 2px solid rgba(255, 255, 255, 0.25);
        transition:
            max-height 260ms ease,
            opacity 200ms ease,
            visibility 260ms ease;
    }

    .site-menu-overlay
        .mobile-navigation
        .menu-item-has-children.is-submenu-open
        > .sub-menu {
        visibility: visible;
        opacity: 1;
    }

    .site-menu-overlay
        .mobile-navigation .sub-menu li {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .site-menu-overlay
        .mobile-navigation .sub-menu a {
        padding-top: 14px;
        padding-bottom: 14px;
        font-size: 18px;
        font-weight: 500;
    }

    .site-menu-overlay
        .mobile-navigation
        .sub-menu .sub-menu {
        margin-left: 18px;
        padding-left: 18px;
    }

    .site-menu-overlay
        .mobile-navigation
        .sub-menu .sub-menu a {
        font-size: 16px;
    }


    /* Search
       ====================================================== */

    .site-menu-overlay__search {
        width: 100%;
        max-width: 720px;
        margin: 44px auto 0;
        padding-top: 28px;
        border-top: 1px solid rgba(255, 255, 255, 0.22);
    }

    .site-menu-overlay__search .search-form {
        display: flex;
        width: 100%;
        gap: 10px;
    }

    .site-menu-overlay__search .search-field {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        padding: 11px 14px;
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 0;
        background-color: transparent;
        color: #ffffff;
        font: inherit;
    }

    .site-menu-overlay__search
        .search-field::placeholder {
        color: rgba(255, 255, 255, 0.75);
    }

    .site-menu-overlay__search
        .search-field:focus {
        border-color: #ffffff;
        outline: 3px solid #ffffff;
        outline-offset: 2px;
    }

    .site-menu-overlay__search .search-submit {
        min-height: 48px;
        padding: 11px 20px;
        border: 1px solid #b02020;
        background-color: #b02020;
        color: #ffffff;
        font: inherit;
        font-weight: 700;
        cursor: pointer;
    }

    .site-menu-overlay__search
        .search-submit:hover {
        border-color: #ffffff;
        background-color: #ffffff;
        color: #232426;
    }

    .site-menu-overlay__search
        .search-submit:focus-visible {
        outline: 3px solid #ffffff;
        outline-offset: 3px;
    }

    body.mobile-menu-open {
        overflow: hidden;
    }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .site-header .desktop-navigation
        .primary-menu--desktop > li > a::before,
    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item-has-children > a::after,
    .site-header .desktop-navigation
        .primary-menu--desktop > li > .sub-menu,
    .site-header .desktop-navigation
        .sub-menu .sub-menu,
    .site-header .desktop-navigation
        .sub-menu a,
    .site-menu-overlay,
    .site-menu-overlay .submenu-toggle::before,
    .site-menu-overlay
        .mobile-navigation .sub-menu {
        transition: none;
    }

    .site-header-group {
        transition: none;
    }
}



/* ==========================================================
   DESKTOP MEGA MENU
   ========================================================== */

@media only screen and (min-width: 971px) {

    /*
     * Position the mega menu relative to the complete
     * desktop navigation area.
     */

    .site-header .desktop-navigation {
        position: relative;
        flex: 1 1 auto;
        align-self: stretch;
    }

    /*
     * Prevent the first navigation row and the root menu
     * item from becoming positioning contexts.
     */

    .site-header .desktop-navigation
        .desktop-navigation__row--one,
    .site-header .desktop-navigation
        .primary-menu--desktop-row-1,
    .site-header .desktop-navigation
        .menu-item--mega {
        position: static;
    }
 

    /* Mega-menu panel
       ====================================================== */

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega > .sub-menu {
        position: absolute;
        z-index: 100;
        top: var(--desktop-menu-row-height, 46px);
        right: 0;
        left: 0;
        display: flex;
        width: 100%;
        max-height: calc(100vh - 140px);
        box-sizing: border-box;
        padding: 18px 16px 22px;
        overflow-x: hidden;
        overflow-y: auto;
        align-items: flex-start;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        border-top: 0;
        border-left: 5px solid #b02020;
        background-color: #ffffff;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.22);
        transform: translateY(10px);
        transition:
            opacity 180ms ease,
            visibility 180ms ease,
            transform 180ms ease;
        scrollbar-color: #b02020 #f5f3f0;
        scrollbar-width: thin;
    }

.site-header .desktop-navigation
    .primary-menu--desktop >
    .menu-item--mega > a:hover + .sub-menu,
.site-header .desktop-navigation
    .primary-menu--desktop >
    .menu-item--mega > a:focus-visible + .sub-menu,
.site-header .desktop-navigation
    .primary-menu--desktop >
    .menu-item--mega > .sub-menu:hover,
.site-header .desktop-navigation
    .primary-menu--desktop >
    .menu-item--mega > .sub-menu:focus-within {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

    /*
     * Keep the root Services trigger and its existing
     * red underline above the mega-menu panel.
     */

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega > a {
        z-index: 101;
    }


    /* Second-level items
       ====================================================== */

    /*
     * Every direct child is a second-level sibling:
     * Services, Repairs, Steering, Suspension,
     * Wheel Alignment and Wheels and Tyres.
     */

    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu > li {
        display: flex;
        width: auto;
        min-width: 0;
        box-sizing: border-box;
        flex: 0 0 10.5%;
        flex-direction: column;
        align-self: flex-start;
        border-right: 0;
        border-bottom: 0;
        border-left: 1px solid #e2e2e2;
    }

    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu > li:first-child {
        border-left: 0;
    }

    /*
     * Groups containing children receive more space than
     * standalone second-level links.
     */

    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu >
        .menu-item-has-children {
        flex-basis: 16%;
    }

    /*
     * A group with many children can be marked as wide.
     * Its nested links will use two columns.
     */

    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu >
        .mega-menu-group--wide {
        flex-basis: 42%;
    }

    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu > li > a {
        position: relative;
        display: flex;
        width: 100%;
        min-height: 62px;
        box-sizing: border-box;
        padding: 16px 12px 22px;
        align-items: flex-start;
        justify-content: flex-start;
        color: #232426;
        background-color: transparent;
        font-size: 14px;
        font-weight: 800;
        line-height: 1.3;
        text-decoration: none;
        white-space: normal;
    }

    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu > li > a:hover,
    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu > li > a:focus-visible {
        padding-left: 12px;
        background-color: #f5f3f0;
        color: #b02020;
    }

    /*
     * Remove the existing hover arrow from all
     * second-level items.
     */

    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu > li > a::after {
        content: none;
    }

    /*
     * Only second-level items containing children receive
     * the small red decoration.
     */

    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu >
        .menu-item-has-children > a::after {
        position: absolute;
        bottom: 11px;
        left: 12px;
        display: block;
        width: 34px;
        height: 3px;
        margin: 0;
        background-color: #b02020;
        content: "";
        opacity: 1;
        transform: none;
    }


    /* Third-level lists
       ====================================================== */

    /*
     * Nested lists remain visible inside the mega menu.
     * No additional hover action is required.
     */

    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu >
        .menu-item-has-children > .sub-menu {
        position: static;
        display: flex;
        width: 100%;
        max-height: none;
        box-sizing: border-box;
        padding: 2px 8px 10px;
        overflow: visible;
        flex-wrap: wrap;

        /*
        * These values must follow the state of the parent
        * mega-menu panel. They must not remain interactive
        * while the panel is hidden.
        */

        visibility: inherit;
        opacity: 1;
        pointer-events: inherit;

        border: 0;
        background-color: transparent;
        box-shadow: none;
        transform: none;
        transition: none;
    }

    /*
    * Ensure nothing inside the closed mega menu can receive
    * pointer interaction or keyboard focus.
    */

    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu {
        visibility: hidden;
        pointer-events: none;
    }

    .site-header .desktop-navigation
        .menu-item--mega > a:hover + .sub-menu,
    .site-header .desktop-navigation
        .menu-item--mega > a:focus-visible + .sub-menu,
    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu:hover,
    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu:focus-within {
        visibility: visible;
        pointer-events: auto;
    }
    /*
     * Default groups, such as Repairs, display their
     * children in one column.
     */

    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu >
        .menu-item-has-children >
        .sub-menu > li {
        width: 100%;
        flex: 0 0 100%;
        border: 0;
    }

    /*
     * Wide groups, such as Services, display their
     * children in two columns.
     */

    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu >
        .mega-menu-group--wide >
        .sub-menu > li {
        width: 50%;
        flex: 0 0 50%;
    }

    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu >
        .menu-item-has-children >
        .sub-menu > li > a {
        position: relative;
        min-height: 42px;
        box-sizing: border-box;
        padding: 10px 12px 10px 34px;
        align-items: center;
        color: #232426;
        background-color: transparent;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.35;
    }

    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu >
        .menu-item-has-children >
        .sub-menu > li > a:hover,
    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu >
        .menu-item-has-children >
        .sub-menu > li > a:focus-visible {
        padding-left: 38px;
        background-color: #f5f3f0;
        color: #b02020;
    }


    /* Hierarchy marker
       ====================================================== */

    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu >
        .menu-item-has-children >
        .sub-menu > li > a::before {
        position: absolute;
        top: 50%;
        left: 13px;
        width: 11px;
        height: 11px;
        border-bottom: 1px solid rgba(176, 32, 32, 0.4);
        border-left: 1px solid rgba(176, 32, 32, 0.4);
        content: "";
        transform: translateY(-70%);
        pointer-events: none;
    }


    /* Current page
       ====================================================== */

    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu >
        .menu-item-has-children >
        .sub-menu > .current-menu-item > a {
        background-color: #f5f3f0;
        color: #b02020;
        font-weight: 700;
    }


    /* Keyboard focus
       ====================================================== */

    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu a:focus-visible {
        z-index: 2;
        outline: 3px solid #b02020;
        outline-offset: -3px;
    }
}


/* ==========================================================
   COMPACT DESKTOP MEGA MENU
   ========================================================== */

@media only screen and (min-width: 971px)
    and (max-width: 1150px) {

    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu {
        padding-right: 10px;
        padding-left: 10px;
    }

    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu > li > a {
        padding-right: 8px;
        padding-left: 8px;
        font-size: 12px;
    }

    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu > li > a:hover,
    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu > li > a:focus-visible {
        padding-left: 8px;
    }

    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu >
        .menu-item-has-children > a::after {
        left: 8px;
    }

    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu >
        .menu-item-has-children >
        .sub-menu > li > a {
        padding-right: 8px;
        padding-left: 29px;
        font-size: 12px;
    }

    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu >
        .menu-item-has-children >
        .sub-menu > li > a:hover,
    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu >
        .menu-item-has-children >
        .sub-menu > li > a:focus-visible {
        padding-left: 33px;
    }

    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu >
        .menu-item-has-children >
        .sub-menu > li > a::before {
        left: 9px;
    }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu,
    .site-header .desktop-navigation
        .menu-item--mega > .sub-menu a {
        transition: none;
    }
}

/* ==========================================================
   MEGA MENU VISUAL CLEANUP
   ========================================================== */

@media only screen and (min-width: 768px) {

    /*
     * Remove all inherited and custom borders from the
     * second-level mega-menu columns.
     */

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu > li,
    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu > li:first-child,
    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu > li:last-child {
        padding-right: 4px;
        padding-left: 4px;
        border: 0;
    }

    /*
     * Create a uniform top row.
     *
     * min-height is used instead of height so the links can
     * expand when text is resized or spacing is increased.
     */

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu > li > a {
        min-height: 78px;
        padding: 14px 12px 22px;
        align-items: flex-end;
    }

    /*
     * Preserve the same horizontal padding on hover and
     * keyboard focus.
     */

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu > li > a:hover,
    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu > li > a:focus-visible {
        padding-left: 12px;
    }

    /*
     * Keep the red decoration aligned consistently at the
     * bottom of Services and Repairs.
     */

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu >
        .menu-item-has-children > a::after {
        bottom: 12px;
    }

    /*
     * Ensure third-level items do not inherit any dropdown
     * separators from older menu styling.
     */

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu >
        .menu-item-has-children >
        .sub-menu > li {
        border: 0;
    }
}








/* ==========================================================
   FULL-WIDTH DESKTOP MEGA MENU
   ========================================================== */

@media only screen and (min-width: 971px) {

    /*
     * Use the centred header inner container as the
     * positioning reference for the full-width panel.
     */

    .site-header .desktop-navigation {
        position: static;
        flex: 1 1 auto;
        align-self: stretch;
    }

    .site-header .desktop-navigation
        .desktop-navigation__row--one,
    .site-header .desktop-navigation
        .primary-menu--desktop-row-1,
    .site-header .desktop-navigation
        .menu-item--mega {
        position: static;
    }

    /*
     * Full viewport-width mega-menu panel.
     */

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega > .sub-menu {
        position: absolute;
        z-index: 100;
        top: var(--desktop-menu-row-height, 46px);
        right: auto;
        left: 50%;
        display: flex;
        width: 100vw;
        max-height: calc(100vh - 140px);
        box-sizing: border-box;
        padding: 18px 10vw 22px;
        overflow-x: hidden;
        overflow-y: auto;
        align-items: flex-start;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        border-top: 0;
        border-left: 5px solid #b02020;
        background-color: #ffffff;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.22);
        transform: translate(-50%, 10px);
        transition:
            opacity 180ms ease,
            visibility 180ms ease,
            transform 180ms ease;
        scrollbar-color: #b02020 #f5f3f0;
        scrollbar-width: thin;
    }

    /*
     * Open state.
     */

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega > a:hover + .sub-menu,
    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega > a:focus-visible + .sub-menu,
    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega > .sub-menu:hover,
    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega > .sub-menu:focus-within {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, 0);
    }

    /*
     * Keep the root trigger and its red underline above
     * the expanded mega-menu panel.
     */

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega > a {
        position: relative;
        z-index: 101;
    }
}


/* ==========================================================
   COMPACT DESKTOP MEGA MENU
   ========================================================== */

@media only screen and (min-width: 971px)
    and (max-width: 1150px) {

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega > .sub-menu {
        padding-right: 5vw;
        padding-left: 5vw;
    }
}


/* ==========================================================
   LARGE DESKTOP MEGA MENU
   Keep the internal content at a maximum of 1500px
   ========================================================== */

@media only screen and (min-width: 1876px) {

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega > .sub-menu {
        padding-right: 30px;
        padding-left: 30px;
    }
}





/* ==========================================================
   MEGA MENU CARD DESIGN
   Append at the very end of header.css
   ========================================================== */

@media only screen and (min-width: 971px) {

    /* Space between the second-level menu panels */

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu {
        gap: 16px;
        align-items: flex-start;
    }


    /* Individual second-level panels */

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu > li,
    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu > li:first-child,
    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu > li:last-child {
        width: auto;
        min-width: 0;
        padding: 0;
        border: 0;
        border-top: 4px solid #b02020;
        flex: 1 1 0;
        align-self: flex-start;
        background-color: #f5f3f0;
        box-shadow: 0 7px 18px rgba(35, 36, 38, 0.07);
    }


    /* Groups containing submenu items receive more width */

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu >
        .menu-item-has-children {
        flex: 1.45 1 0;
    }


    /* The wide Services group */

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu >
        .mega-menu-group--wide {
        flex: 2.85 1 0;
    }


    /* Uniform second-level titles */

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu > li > a {
        position: relative;
        display: flex;
        width: 100%;
        min-height: 100px;
        box-sizing: border-box;
        padding: 20px 20px 18px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0;
        background-color: transparent;
        color: #232426;
        font-size: 14px;
        font-weight: 800;
        line-height: 1.3;
        text-decoration: none;
        white-space: normal;
    }


    /* Second-level title hover */

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu > li > a:hover,
    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu > li > a:focus-visible {
        padding-left: 20px;
        background-color: rgba(255, 255, 255, 0.55);
        color: #b02020;
    }


    /*
     * Short red line below every second-level title.
     * It sits close to the text and is only 2px thick.
     */

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu > li > a::after,
    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu >
        .menu-item-has-children > a::after {
        position: static;
        display: block;
        width: 36px;
        height: 2px;
        margin: 6px 0 0;
        flex: 0 0 2px;
        background-color: #b02020;
        content: "";
        opacity: 1;
        transform: none;
    }


    /* Nested submenu container */

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu >
        .menu-item-has-children >
        .sub-menu {
        position: static;
        display: flex;
        width: 100%;
        max-height: none;
        box-sizing: border-box;
        padding: 0 20px 20px;
        overflow: visible;
        flex-wrap: wrap;
        visibility: inherit;
        opacity: 1;
        pointer-events: inherit;
        border: 0;
        background-color: transparent;
        box-shadow: none;
        transform: none;
        transition: none;
    }


    /* Remove the red L-shaped submenu markers */

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu >
        .menu-item-has-children >
        .sub-menu > li > a::before,
    .site-header .desktop-navigation
        .sub-menu .sub-menu > li > a::before,
    .site-header .desktop-navigation
        .sub-menu .sub-menu
        .sub-menu > li > a::before {
        display: none;
        border: 0;
        content: none;
    }


    /* Submenu items after removing the L markers */

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu >
        .menu-item-has-children >
        .sub-menu > li > a {
        min-height: 42px;
        padding: 10px 12px 10px 0;
        align-items: center;
        background-color: transparent;
        color: #232426;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.35;
    }


    /* Submenu item hover */

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu >
        .menu-item-has-children >
        .sub-menu > li > a:hover,
    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu >
        .menu-item-has-children >
        .sub-menu > li > a:focus-visible {
        padding-left: 6px;
        background-color: rgba(255, 255, 255, 0.7);
        color: #b02020;
    }


    /* Current submenu page */

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu >
        .menu-item-has-children >
        .sub-menu >
        .current-menu-item > a {
        padding-left: 6px;
        background-color: #ffffff;
        color: #b02020;
        font-weight: 700;
    }
}


/* Compact desktop adjustments */

@media only screen and (min-width: 971px)
    and (max-width: 1150px) {

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu {
        gap: 9px;
    }

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu > li > a {
        min-height: 94px;
        padding: 16px 10px 14px;
        font-size: 12px;
    }

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu > li > a:hover,
    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu > li > a:focus-visible {
        padding-left: 10px;
    }

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu >
        .menu-item-has-children >
        .sub-menu {
        padding-right: 10px;
        padding-bottom: 14px;
        padding-left: 10px;
    }

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu >
        .menu-item-has-children >
        .sub-menu > li > a {
        padding: 9px 6px 9px 0;
        font-size: 12px;
    }

    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu >
        .menu-item-has-children >
        .sub-menu > li > a:hover,
    .site-header .desktop-navigation
        .primary-menu--desktop >
        .menu-item--mega >
        .sub-menu >
        .menu-item-has-children >
        .sub-menu > li > a:focus-visible {
        padding-left: 4px;
    }
}





/* Standard second-level panels */

.site-header .desktop-navigation
    .primary-menu--desktop >
    .menu-item--mega >
    .sub-menu > li {
    flex: 1 1 0;
}


/* Panels containing submenu items */

.site-header .desktop-navigation
    .primary-menu--desktop >
    .menu-item--mega >
    .sub-menu >
    .menu-item-has-children {
    flex: 1.45 1 0;
}


/* Wide panel containing submenu items */

.site-header .desktop-navigation
    .primary-menu--desktop >
    .menu-item--mega >
    .sub-menu >
    .menu-item-has-children.mega-menu-group--wide {
    flex: 2.85 1 0;
}