/*
 * Mega Menu Shortcode - mega-menu.css
 * Version: 3.0.0
 *
 * Key changes from v2:
 *   - Panels hidden with .is-hidden (display:none) NOT the HTML hidden attribute.
 *     This ensures Google indexes all L3 links at full weight.
 *   - L2 rail uses ARIA tab pattern (aria-selected) not aria-expanded.
 *   - .sr-only utility for visually hidden but screen-reader-accessible text.
 *   - Mobile slides use inert attribute - .mega-menu__slide[inert] rules ensure
 *     correct visual state regardless of inert support.
 */

/* ---- Custom properties --------------------------------------------------- */
.mega-menu {
    /* Dimensions */
    --mm-rail-width:          220px;
    --mm-dropdown-max-height: 680px;
    --mm-grid-cols:           4;
    --mm-grid-gap:            1rem;
    --mm-thumb-ratio:         100%;
    --mm-max-width:           1240px;

    /* Colours */
    --mm-topbar-bg:           #2d4a1e;
    --mm-topbar-mob-bg:       #ffffff;
    --mm-topbar-text:         #ffffff;
    --mm-topbar-hover-bg:     #3d6428;
    --mm-topbar-active-line:  #8cc63f;
    --mm-rail-bg:             #f4f4f5;
    --mm-rail-hover-bg:       #e4e4e7;
    --mm-rail-active-accent:  #2d4a1e;
    --mm-rail-text:           #18181b;
    --mm-panel-bg:            #ffffff;
    --mm-bg:                  #ffffff;
    --mm-border:              #e4e4e7;
    --mm-card-hover-bg:       #f8f8f8;
    --mm-card-border:         #e4e4e7;
    --mm-card-text:           #18181b;
    --mm-card-hover-text:     #2d4a1e;
    --mm-view-all-color:      #2d4a1e;
    --mm-back-color:          #3f3f46;
    --mm-burger-color:        #18181b;

    /* L3 headings (when L4 children present) */
    --mm-l3-heading-color:    #2d4a1e;
    --mm-l3-heading-size:     0.875rem;
    --mm-l3-heading-weight:   700;

    /* L4 links */
    --mm-l4-color:            #3f3f46;
    --mm-l4-hover-color:      #2d4a1e;
    --mm-l4-font-size:        0.8125rem;
    --mm-l4-font-weight:      400;

    /* Typography */
    --mm-font-l1:             0.9375rem;
    --mm-font-l2:             0.875rem;
    --mm-font-l3:             0.8125rem;
    --mm-weight-l1:           600;
    --mm-weight-l2:           500;
    --mm-weight-l3:           500;

    /* Motion */
    --mm-ease:                350ms ease;
    --mm-slide:               280ms cubic-bezier(0.4, 0, 0.2, 1);
    --mm-dropdown-in:         400ms ease;
    --mm-dropdown-out:        600ms ease;
    --mm-close-delay:         300ms;

    /* Z */
    --mm-z:                   1000;

    position:   relative;
    z-index:    var(--mm-z);
    max-width:  var(--mm-max-width);
    background: var(--mm-bg);
    margin:     0 auto;
}

/* ---- Reset --------------------------------------------------------------- */
.mega-menu *, .mega-menu *::before, .mega-menu *::after { box-sizing: border-box; margin: 0; padding: 0; }
.mega-menu ul, .mega-menu li { list-style: none; }
.mega-menu a  { color: inherit; text-decoration: none; }
.mega-menu button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }

/* ---- Screen-reader only utility ------------------------------------------ */
/* Visually hidden but fully accessible to AT and indexed by search engines.  */
.mega-menu .sr-only {
    position: absolute;
    width:    1px;
    height:   1px;
    padding:  0;
    margin:   -1px;
    overflow: hidden;
    clip:     rect(0, 0, 0, 0);
    white-space: nowrap;
    border:   0;
}

/* ---- Mobile header hidden on desktop ------------------------------------- */
.mega-menu__mobile-header { display: none; }


/* ==========================================================================
   DESKTOP  (>= 960px)
   ========================================================================== */
@media (min-width: 960px) {

    /* ---- L1 top bar ------------------------------------------------------ */
    .mega-menu__topbar {
        display:     flex;
        flex-wrap:   wrap;
        background:  var(--mm-topbar-bg);
    }

    .mega-menu__l1-item { position: relative; }

    .mega-menu__l1-btn {
        display:       flex;
        align-items:   center;
        gap:           0.35rem;
        padding:       0.875rem 1.25rem;
        font-size:     var(--mm-font-l1);
        font-weight:   var(--mm-weight-l1);
        color:         var(--mm-topbar-text) !important;
        white-space:   nowrap;
        border-bottom: 3px solid transparent;
        transition:    background var(--mm-ease), border-color var(--mm-ease);
    }

    /* Chevron - only on buttons that open a dropdown */
    .mega-menu__l1-btn:not(.mega-menu__l1-btn--link)::after {
        content:        '';
        display:        inline-block;
        width:          0;
        height:         0;
        border-left:    4px solid transparent;
        border-right:   4px solid transparent;
        border-top:     5px solid currentColor;
        opacity:        0.7;
        transition:     transform var(--mm-ease), opacity var(--mm-ease);
        flex-shrink:    0;
        margin-top:     1px;
    }

    .mega-menu__l1-item.is-active .mega-menu__l1-btn:not(.mega-menu__l1-btn--link)::after {
        transform: rotate(180deg);
        opacity:   1;
    }

    .mega-menu__l1-btn:hover,
    .mega-menu__l1-item.is-active .mega-menu__l1-btn {
        background:   var(--mm-topbar-hover-bg);
        border-color: var(--mm-topbar-active-line);
    }

    .mega-menu__l1-btn:focus-visible {
        outline:        2px solid var(--mm-topbar-active-line);
        outline-offset: -2px;
    }

    /* aria-current indicator on active page item */
    .mega-menu__l1-btn[aria-current="page"] {
        border-color: var(--mm-topbar-active-line);
    }

    /* ---- Dropdown body --------------------------------------------------- */
    .mega-menu__body { position: relative; }

    .mega-menu__dropdown {
        display:        none;
        position:       absolute;
        top:            0;
        left:           0;
        right:          0;
        z-index:        var(--mm-z);
        flex-direction: row;
        max-height:     var(--mm-dropdown-max-height);
        border:         1px solid var(--mm-border);
        border-top:     none;
        background:     var(--mm-panel-bg);
        box-shadow:     0 8px 24px rgba(0,0,0,0.10);
        animation:      mm-dropdown-in var(--mm-dropdown-in) both;
    }

    .mega-menu__dropdown.is-active { display: flex; }

    @keyframes mm-dropdown-in {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Template dropdown overrides */
    .mega-menu__dropdown--template {
        max-height:     none;
        overflow:       visible;
        flex-direction: column;
    }
    .mega-menu__dropdown--template > .elementor { width: 100%; }

    /* ---- L2 Rail - tablist ----------------------------------------------- */
    .mega-menu__rail {
        flex-shrink:  0;
        width:        var(--mm-rail-width);
        background:   var(--mm-rail-bg);
        border-right: 1px solid var(--mm-border);
        overflow-y:   auto;
    }

    .mega-menu__rail-btn {
        display:         flex;
        align-items:     center;
        justify-content: space-between;
        width:           100%;
        padding:         0.75rem 1rem;
        font-size:       var(--mm-font-l2);
        font-weight:     var(--mm-weight-l2);
        color:           var(--mm-rail-text);
        text-align:      left;
        border-left:     3px solid transparent;
        transition:      background var(--mm-ease), border-color var(--mm-ease), color var(--mm-ease);
    }

    .mega-menu__rail-btn::after {
        content:    "\203A";
        font-size:  1.1em;
        opacity:    0.4;
        transition: opacity var(--mm-ease), transform var(--mm-ease);
        flex-shrink: 0;
    }

    /* aria-selected drives the active state (tab pattern) */
    .mega-menu__rail-btn:hover,
    .mega-menu__rail-btn[aria-selected="true"] {
        background:   var(--mm-rail-hover-bg);
        border-color: var(--mm-rail-active-accent);
        color:        var(--mm-rail-active-accent);
    }

    .mega-menu__rail-btn[aria-selected="true"]::after {
        opacity:   1;
        transform: translateX(3px);
    }

    .mega-menu__rail-btn:focus-visible {
        outline:        2px solid var(--mm-rail-active-accent);
        outline-offset: -2px;
    }

    /* aria-current on the currently active page's rail item */
    .mega-menu__rail-btn[aria-current="page"] {
        font-weight: 700;
        color:       var(--mm-rail-active-accent);
    }

    /* ---- L3 Panel area --------------------------------------------------- */
    .mega-menu__panels {
        flex:       1;
        overflow-y: auto;
        overflow-x: hidden;
        position:   relative;
    }

    /* .is-hidden uses display:none NOT the hidden attribute.
       This ensures Google crawls all links at full weight.
       The hidden attribute deprioritises content in Google's index. */
    .mega-menu__panel {
        display:   none;
        padding:   1.5rem;
        animation: mm-panel-in var(--mm-dropdown-in) both;
    }

    .mega-menu__panel.is-active { display: block; }
    .mega-menu__panel.is-hidden { display: none; }

    @keyframes mm-panel-in {
        from { opacity: 0; transform: translateX(6px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    /* tabpanel focus ring - visible when focused by keyboard */
    .mega-menu__panel:focus-visible {
        outline:        2px solid var(--mm-rail-active-accent);
        outline-offset: -4px;
        border-radius:  2px;
    }

    /* Desktop only: hide mobile-only elements */
    .mega-menu__back          { display: none; }
    .mega-menu__drawer        { display: none !important; }

    /* View all */
    .mega-menu__view-all {
        display:       inline-flex;
        align-items:   center;
        gap:           0.25rem;
        margin-bottom: 1rem;
        font-size:     0.8125rem;
        font-weight:   600;
        color:         var(--mm-view-all-color);
        transition:    opacity var(--mm-ease);
    }
    .mega-menu__view-all:hover { opacity: 0.7; }

    /* ---- L3 Grid --------------------------------------------------------- */
    .mega-menu__grid {
        display:               grid;
        grid-template-columns: repeat(var(--mm-grid-cols), 1fr);
        gap:                   var(--mm-grid-gap);
    }

    .mega-menu__grid-item {
        border-radius: 6px;
        overflow:      hidden;
        border:        1px solid transparent;
        transition:    border-color var(--mm-ease), background var(--mm-ease);
    }

    .mega-menu__grid-item:hover {
        border-color: var(--mm-card-border);
        background:   var(--mm-card-hover-bg);
    }

    .mega-menu__grid-link {
        display:        flex;
        flex-direction: column;
        height:         100%;
        color:          var(--mm-card-text);
        transition:     color var(--mm-ease);
    }

    .mega-menu__grid-link:hover { color: var(--mm-card-hover-text); }

    .mega-menu__grid-link:focus-visible {
        outline:        2px solid var(--mm-rail-active-accent);
        outline-offset: 2px;
        border-radius:  4px;
    }

    /* Thumbnail aspect box */
    .mega-menu__grid-img-wrap {
        display:     block;
        width:       100%;
        padding-top: var(--mm-thumb-ratio);
        position:    relative;
        overflow:    hidden;
        background:  #f0f0f0;
        border-radius: 4px 4px 0 0;
    }

    .mega-menu__grid-img {
        position:   absolute;
        inset:      0;
        width:      100%;
        height:     100%;
        object-fit: contain;
        padding:    8px;
        transition: transform var(--mm-ease);
    }

    .mega-menu__grid-item:hover .mega-menu__grid-img { transform: scale(1.04); }

    .mega-menu__grid-label {
        display:     block;
        padding:     0.5rem 0.5rem 0.6rem;
        font-size:   var(--mm-font-l3);
        font-weight: var(--mm-weight-l3);
        line-height: 1.3;
    }

    /* ---- L3 heading (when L4 children present) --------------------------- */
    /* Renders as a clickable category heading above a list of L4 links.      */
    .mega-menu__grid-item.has-children {
        border:        none;
        border-radius: 0;
        overflow:      visible;
    }

    .mega-menu__l3-heading {
        display:       block;
        margin-bottom: 0.4rem;
        font-size:     var(--mm-l3-heading-size);
        font-weight:   var(--mm-l3-heading-weight);
        color:         var(--mm-l3-heading-color);
        line-height:   1.2;
        transition:    opacity var(--mm-ease);
    }

    a.mega-menu__l3-heading:hover { opacity: 0.75; }

    a.mega-menu__l3-heading:focus-visible {
        outline:        2px solid var(--mm-rail-active-accent);
        outline-offset: 2px;
        border-radius:  2px;
    }

    /* ---- L4 link list ---------------------------------------------------- */
    .mega-menu__l4-list {
        display:        flex;
        flex-direction: column;
        gap:            0.2rem;
        padding-left:   0;
    }

    .mega-menu__l4-link {
        display:     block;
        font-size:   var(--mm-l4-font-size);
        font-weight: var(--mm-l4-font-weight);
        color:       var(--mm-l4-color);
        padding:     0.15rem 0;
        transition:  color var(--mm-ease), transform var(--mm-ease);
    }

    .mega-menu__l4-link:hover {
        color:     var(--mm-l4-hover-color);
        transform: translateX(2px);
    }

    .mega-menu__l4-link:focus-visible {
        outline:        2px solid var(--mm-rail-active-accent);
        outline-offset: 2px;
        border-radius:  2px;
    }

    .mega-menu__l4-link[aria-current="page"] {
        font-weight: 700;
        color:       var(--mm-rail-active-accent);
    }

    /* Text-only grid items (no thumbnail) */
    .mega-menu__grid-item:not(.has-thumb) {
        border:        none;
        border-radius: 0;
    }

    .mega-menu__grid-item:not(.has-thumb) .mega-menu__grid-link {
        flex-direction: row;
        align-items:    center;
        padding:        0.3rem 0.4rem;
        border-radius:  4px;
    }

    .mega-menu__grid-item:not(.has-thumb):hover { background: var(--mm-card-hover-bg); }

    .mega-menu__grid-item:not(.has-thumb) .mega-menu__grid-label { padding: 0; }

} /* end desktop */


/* ==========================================================================
   MOBILE  (< 960px)
   Sliding track. data-depth on root drives translateX.
   Inactive slides use inert attribute + pointer-events:none as fallback.
   ========================================================================== */
@media (max-width: 959px) {

    /* ---- Burger ---------------------------------------------------------- */
    .mega-menu__mobile-header {
        display:         flex;
        align-items:     center;
        justify-content: space-between;
        padding:         6px;
        background:      var(--mm-topbar-mob-bg);
    }

    .mega-menu__burger {
        display:        flex;
        flex-direction: column;
        gap:            5px;
        align-items:    center;
        padding:        4px;
        color:          var(--mm-topbar-text);
        width:          100%;
    }

    .mega-menu__burger-bar {
        display:          block;
        width:            24px;
        height:           2px;
        background:       currentColor;
        border-radius:    2px;
        transition:       transform var(--mm-ease), opacity var(--mm-ease);
        transform-origin: center;
    }

    .mega-menu[data-mobile-open] .mega-menu__burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .mega-menu[data-mobile-open] .mega-menu__burger-bar:nth-child(2) { opacity: 0; }
    .mega-menu[data-mobile-open] .mega-menu__burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .mega-menu__burger-title {
        display:     block;
        text-align:  center;
        color:       #425D44;
        align-self:  center;
        padding-top: 8px;
        font-size:   15px !important;
        font-weight: 600 !important;
    }

    /* ---- Desktop topbar hidden on mobile --------------------------------- */
    .mega-menu__topbar { display: none; }
    .mega-menu__body   { display: none; }

    /* ---- Drawer ---------------------------------------------------------- */
    .mega-menu__drawer {
        display:    none;
        overflow:   hidden;
        background: var(--mm-panel-bg);
    }

    #mega-menu-1[data-mobile-open] {
        width: calc(100vw - 20px);
    }

    .mega-menu[data-mobile-open] .mega-menu__drawer { display: block; }

    /* ---- Sliding track --------------------------------------------------- */
    .mega-menu__track {
        display:     flex;
        width:       300%;
        transition:  transform var(--mm-slide);
        will-change: transform;
    }

    .mega-menu[data-depth="0"] .mega-menu__track,
    .mega-menu:not([data-depth]) .mega-menu__track { transform: translateX(0); }
    .mega-menu[data-depth="1"] .mega-menu__track   { transform: translateX(-33.333%); }
    .mega-menu[data-depth="2"] .mega-menu__track   { transform: translateX(-66.666%); }

    /* ---- Each slide ------------------------------------------------------ */
    .mega-menu__slide {
        flex:       0 0 33.333%;
        width:      33.333%;
        overflow-y: auto;
        max-height: 70vh;
    }

    /* Inert slides: pointer-events:none as a fallback for older browsers
       that don't support the inert attribute natively */
    .mega-menu__slide[inert] {
        pointer-events: none;
        user-select:    none;
    }

    /* ---- Back button ----------------------------------------------------- */
    .mega-menu__back {
        display:         flex;
        align-items:     center;
        gap:             0.5rem;
        width:           100%;
        padding:         0.875rem 1rem;
        font-size:       var(--mm-font-l2);
        font-weight:     700;
        color:           var(--mm-topbar-text);
        background:      var(--mm-topbar-mob-bg);
        border:          none;
        text-align:      left;
        cursor:          pointer;
    }

    .mega-menu__back::before {
        content:        '';
        display:        inline-block;
        width:          0;
        height:         0;
        border-top:     5px solid transparent;
        border-bottom:  5px solid transparent;
        border-right:   6px solid currentColor;
        flex-shrink:    0;
    }

    /* ---- L1 slide -------------------------------------------------------- */
    .mega-menu__slide--l1 { background: var(--mm-topbar-mob-bg); }

    .mega-menu__l1-btn {
        display:         flex;
        align-items:     center;
        justify-content: space-between;
        width:           100%;
        padding:         0.875rem 1rem;
        font-size:       var(--mm-font-l1);
        font-weight:     var(--mm-weight-l1);
        color:           var(--mm-topbar-text);
        text-align:      left;
        border-bottom:   1px solid rgba(255,255,255,0.1);
    }

    .mega-menu__l1-btn:not(.mega-menu__l1-btn--link)::after {
        content:       '';
        display:       inline-block;
        width:         0;
        height:        0;
        border-top:    5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left:   6px solid currentColor;
        opacity:       0.6;
        flex-shrink:   0;
    }

    /* ---- L2 slide -------------------------------------------------------- */
    .mega-menu__rail {
        display:        flex;
        flex-direction: column;
        background:     var(--mm-panel-bg);
    }

    .mega-menu__rail-btn {
        display:         flex;
        align-items:     center;
        justify-content: space-between;
        width:           100%;
        padding:         0.875rem 1rem;
        font-size:       var(--mm-font-l2);
        font-weight:     var(--mm-weight-l2);
        text-align:      left;
        border-bottom:   1px solid var(--mm-border);
        color:           var(--mm-rail-text);
    }

    .mega-menu__rail-btn:not(.mega-menu__rail-btn--link)::after {
        content:       '';
        display:       inline-block;
        width:         0;
        height:        0;
        border-top:    5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left:   6px solid currentColor;
        opacity:       0.4;
        flex-shrink:   0;
    }

    /* ---- L3 slide -------------------------------------------------------- */
    .mega-menu__panels { background: var(--mm-panel-bg); }

    /* CSS-only panel visibility (no hidden attr) */
    .mega-menu__panel           { display: none; padding: 1rem; }
    .mega-menu__panel.is-active { display: block; }
    .mega-menu__panel.is-hidden { display: none; }

    .mega-menu__view-all {
        display:       block;
        margin-bottom: 0.75rem;
        font-size:     0.875rem;
        font-weight:   600;
        color:         var(--mm-view-all-color);
    }

    /* L3 grid - text list on mobile, images hidden */
    .mega-menu__grid {
        display:        flex;
        flex-direction: column;
    }

    .mega-menu__grid-item {
        border-radius: 0;
        border:        none;
        border-bottom: 1px solid var(--mm-border);
    }

    .mega-menu__grid-img-wrap { display: none; }

    .mega-menu__grid-link {
        display:     flex;
        align-items: center;
        padding:     0.6rem 0;
        color:       var(--mm-card-text);
    }

    .mega-menu__grid-label {
        display:     block;
        padding:     0;
        font-size:   var(--mm-font-l3);
        font-weight: var(--mm-weight-l3);
        line-height: 1.3;
    }

    /* L3 heading + L4 list on mobile */
    .mega-menu__grid-item.has-children {
        border:        none;
        border-bottom: none;
        padding:       0.5rem 0;
        border-top:    1px solid var(--mm-border);
    }

    .mega-menu__l3-heading {
        display:       block;
        margin-bottom: 0.3rem;
        font-size:     var(--mm-font-l2);
        font-weight:   700;
        color:         var(--mm-rail-active-accent);
    }

    .mega-menu__l4-list {
        display:        flex;
        flex-direction: column;
        padding-left:   0.75rem;
    }

    .mega-menu__l4-link {
        display:   block;
        padding:   0.35rem 0;
        font-size: var(--mm-font-l3);
        color:     var(--mm-card-text);
        border-bottom: 1px solid var(--mm-border);
    }

} /* end mobile */