/* =========================================================
   ACE OVERLAP HEADER
   ---------------------------------------------------------
   Markup:   template-parts/site-header.php
   Colours:  Appearance > Customize > Ace Header
             (--ace-nav-active / --ace-nav-line / --ace-sticky-bg)
   Menu:     Max Mega Menu, location "Primary Menu" (#mega-menu-wrap-primary)

   MMM prints its own CSS with ID selectors, so the menu rules
   below are prefixed with  .ace-header #mega-menu-wrap-primary
   to win on specificity without a pile of !important.
   ========================================================= */

:root {
    --ace-nav-active: #ea671b;
    --ace-nav-line:   #81be46;
    --ace-sticky-bg:  #ffffff;
    --ace-header-h:   140px;      /* space the hero reserves for the overlap header */
}

body.ace-no-topbar { --ace-header-h: 96px; }

@media (max-width: 991.98px) {
    :root,
    body.ace-no-topbar { --ace-header-h: 84px; }
}


/* ---------------------------------------------------------
   HEADER SHELL  (sits ON TOP of the hero / page banner)
   --------------------------------------------------------- */
.ace-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    transition: background-color .3s ease, box-shadow .3s ease;
}

body.admin-bar .ace-header { top: 32px; }

@media (max-width: 782px) {
    body.admin-bar .ace-header { top: 46px; }
}

.ace-header a { text-decoration: none; }

/* soft dark fade behind the transparent header so white text stays readable
   even over a light photo (removed once the bar turns white) */
.ace-header:not(.is-stuck)::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: -36px;
    left: 0;
    z-index: -1;
    background: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, 0));
    pointer-events: none;
}

/* same content width as the hero below */
.ace-header .container { max-width: 1200px; }


/* ---------------------------------------------------------
   TOP BAR
   --------------------------------------------------------- */
.ace-topbar {
    max-height: 70px;
    overflow: hidden;
    transition: max-height .3s ease, opacity .25s ease;
}

.ace-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 20px 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .33);
    font-size: 14px;
    line-height: 1.2;
}

.ace-topbar__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    color: #fff;
    white-space: nowrap;
    transition: color .2s ease;
}

.ace-topbar__link + .ace-topbar__link { border-left: 1px solid #fff; }
.ace-topbar__link:last-child { padding-right: 0; }

.ace-topbar__link:hover,
.ace-topbar__link:focus { color: var(--ace-nav-line); }

.ace-ico {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    fill: currentColor;
}

@media (max-width: 991.98px) {
    .ace-topbar { display: none; }
}


/* ---------------------------------------------------------
   MAIN BAR
   --------------------------------------------------------- */
.ace-mainbar { position: relative; }

.ace-mainbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding: 12px 0;
}

/* Logo (two images, swapped when the header sticks) */
.ace-logo {
    display: block;
    flex: 0 0 auto;
    width: 265px;
    max-width: 55vw;
    line-height: 0;
}

.ace-logo__img {
    display: block;
    width: 100%;
    height: auto;
}

.ace-logo__img--dark { display: none; }

@media (max-width: 991.98px) {
    .ace-logo { width: 190px; }
}

@media (max-width: 575.98px) {
    .ace-logo { width: 165px; }
}


/* ---------------------------------------------------------
   NAV  (Max Mega Menu)
   --------------------------------------------------------- */
.ace-nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
    min-width: 0;
}

.ace-header #mega-menu-wrap-primary {
    background: transparent;
    border: 0;
    border-radius: 0;
}

.ace-header #mega-menu-wrap-primary #mega-menu-primary {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    justify-content: flex-end;
}

/* Top-level links */
.ace-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    height: 56px;
    padding: 0 15px;
    background-color: transparent;
    background-repeat: no-repeat;
    border: 0;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 52px;
    letter-spacing: .2px;
    text-transform: uppercase;
    transition: color .2s ease;
}

/* Hover / open / current */
.ace-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:hover > a.mega-menu-link,
.ace-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
.ace-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus,
.ace-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
.ace-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
.ace-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
.ace-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
    background-color: transparent;
    color: var(--ace-nav-active);
}

/* Current-item underline (drawn as a background so it never clashes
   with MMM's menu-icon pseudo elements) */
.ace-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
.ace-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
.ace-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
    background-image: linear-gradient(var(--ace-nav-line), var(--ace-nav-line));
    background-size: calc(100% - 30px) 4px;
    background-position: 15px 100%;
}

/* Dropdown chevron — pure CSS, no icon font needed */
.ace-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link > span.mega-indicator:after,
.ace-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link > span.mega-indicator:after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 4px 8px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    font-family: inherit;
    font-size: 0;
    line-height: 0;
    vertical-align: middle;
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.ace-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link > span.mega-indicator:after {
    transform: rotate(-135deg);
    margin-bottom: -2px;
}


/* Dropdowns (fly-out + mega panels) */
.ace-header #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu {
    min-width: 260px;
    padding: 0;
    background: #fff;
    border: 0;
    border-top: 3px solid var(--ace-nav-line);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
}

.ace-header #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
    display: block;
    height: auto;
    padding: 11px 18px;
    background: #fff;
    border-bottom: 1px dotted #cce7b6;
    color: #5f6368;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    text-transform: none;
    letter-spacing: 0;
}

.ace-header #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu li.mega-menu-item:hover > a.mega-menu-link,
.ace-header #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover,
.ace-header #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:focus,
.ace-header #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu li.mega-menu-item.mega-current-menu-item > a.mega-menu-link {
    background: var(--ace-nav-line);
    color: #fff;
}


/* ---------------------------------------------------------
   WHATSAPP / CALL BLOCK
   --------------------------------------------------------- */
.ace-wa {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 11px;
    padding: 0;
    border: none;
    background: none;
    color: #fff;
    cursor: pointer;
}

.ace-wa__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    background: #25d366;
    transition: transform .2s ease, box-shadow .2s ease;
}

.ace-wa__icon svg {
    width: 28px;
    height: 28px;
    fill: #fff;
}

.ace-wa:hover .ace-wa__icon {
    transform: scale(1.06);
    box-shadow: 0 6px 16px rgba(37, 211, 102, .45);
}

.ace-wa__text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    text-align: left;
    gap: 5px;
    white-space: nowrap;
}

.ace-wa__label {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, .62);
}

.ace-wa__number {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .2px;
    color: #fff;
}

/* tablet: keep the number, drop the small label */
@media (max-width: 1199.98px) {
    .ace-wa__label { display: none; }
    .ace-wa__number { font-size: 16px; }
}

/* mobile: icon only, sits next to the menu button */
@media (max-width: 991.98px) {
    /* order on phones/tablets:  logo  ·····  [WhatsApp icon  Email icon]  menu button */
    .ace-logo { order: 1; }
    .ace-nav  { order: 4; }
    .ace-wa   { order: 2; margin-left: auto; }
    .ace-email-mobile { order: 3; display: flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #b94d0b; color: #fff; margin-left: 8px; transition: transform .2s ease, box-shadow .2s ease; text-decoration: none; }
    .ace-email-mobile:hover { transform: scale(1.06); box-shadow: 0 6px 16px rgba(185, 77, 11, .45); }
    .ace-email-mobile svg { width: 22px; height: 22px; fill: #fff; }
    .ace-wa__text { display: none; }
    .ace-wa__icon { width: 40px; height: 40px; flex-basis: 40px; }
    .ace-wa__icon svg { width: 24px; height: 24px; }
}

/* Hide email icon on desktop */
.ace-email-mobile { display: none; }


/* ---------------------------------------------------------
   STICKY STATE  (class toggled by js/ace-header.js)
   --------------------------------------------------------- */
.ace-header.is-stuck {
    position: fixed;
    background: var(--ace-sticky-bg);
    box-shadow: 0 4px 22px rgba(0, 0, 0, .14);
}

body.admin-bar .ace-header.is-stuck { top: 32px; }

@media (max-width: 782px) {
    body.admin-bar .ace-header.is-stuck { top: 46px; }
}

.ace-header.is-stuck .ace-topbar {
    max-height: 0;
    opacity: 0;
}

.ace-header.is-stuck .ace-mainbar__inner { padding: 6px 0; }
.ace-header.is-stuck .ace-logo { width: 200px; }

.ace-header.is-stuck .ace-logo__img--light { display: none; }
.ace-header.is-stuck .ace-logo__img--dark  { display: block; }

.ace-header.is-stuck #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    color: #2b3036;
}

.ace-header.is-stuck #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:hover > a.mega-menu-link,
.ace-header.is-stuck #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
.ace-header.is-stuck #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
.ace-header.is-stuck #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
.ace-header.is-stuck #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link {
    color: var(--ace-nav-active);
}

.ace-header.is-stuck .ace-wa__label  { color: #7a838b; }
.ace-header.is-stuck .ace-wa__number { color: #1d2227; }

@media (max-width: 991.98px) {
    .ace-header.is-stuck .ace-logo { width: 165px; }
}


/* ---------------------------------------------------------
   MOBILE MENU  (Max Mega Menu toggle + open panel)

   Set  Mega Menu > Menu Themes > Mobile Menu > Responsive
   Breakpoint  to  991px  so MMM switches at the same width
   as this header.

   The open-panel rules only apply while MMM has put
   .mega-menu-open on the toggle, so they can never affect the
   desktop layout.
   --------------------------------------------------------- */
.ace-header #mega-menu-wrap-primary .mega-menu-toggle {
    background: transparent;
}

.ace-header #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block {
    margin: 0;
}

.ace-header #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-animated-inner,
.ace-header #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-animated-inner:before,
.ace-header #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-animated-inner:after {
    background-color: #fff;
}

.ace-header.is-stuck #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-animated-inner,
.ace-header.is-stuck #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-animated-inner:before,
.ace-header.is-stuck #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-animated-inner:after {
    background-color: #2b3036;
}

@media (max-width: 991.98px) {

    /* let the opened list anchor to the full-width bar, not the narrow toggle */
    .ace-nav,
    .ace-header #mega-menu-wrap-primary {
        position: static;
    }

    .ace-nav { flex: 0 0 auto; margin-left: 0; }

    .ace-header #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open + #mega-menu-primary {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100vh - var(--ace-header-h));
        overflow-y: auto;
        padding: 8px 20px 16px;
        background: #0f2438;
        box-shadow: 0 14px 28px rgba(0, 0, 0, .3);
    }

    /* open-panel links: always light on the dark panel, even when stuck */
    .ace-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
    .ace-header.is-stuck #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
        height: auto;
        padding: 0 14px;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        color: #fff;
        line-height: 48px;
        background-image: none;
    }

    .ace-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
    .ace-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
    .ace-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link,
    .ace-header.is-stuck #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
    .ace-header.is-stuck #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link {
        background-image: none;                       /* no desktop underline in the panel… */
        color: var(--ace-nav-active);
        box-shadow: inset 4px 0 0 var(--ace-nav-line); /* …a left bar instead */
    }

    .ace-header #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu {
        border-top: 0;
        border-radius: 0;
        box-shadow: none;
        background: rgba(255, 255, 255, .06);
    }

    .ace-header #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
        background: transparent;
        color: rgba(255, 255, 255, .88);
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        padding-left: 28px;
    }
}


/* ---------------------------------------------------------
   FALLBACK MENU  (only when no menu is assigned / MMM inactive)
   --------------------------------------------------------- */
.ace-menu-fallback,
.ace-menu-fallback ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ace-menu-fallback { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.ace-menu-fallback li { position: relative; }

.ace-menu-fallback a {
    display: block;
    padding: 14px 14px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
}

.ace-menu-fallback a:hover,
.ace-menu-fallback .current_page_item > a { color: var(--ace-nav-active); }

.ace-menu-fallback ul {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    min-width: 240px;
    background: #fff;
    border-top: 3px solid var(--ace-nav-line);
}

.ace-menu-fallback li:hover > ul { display: block; }
.ace-menu-fallback ul a { color: #5f6368; text-transform: none; }

.ace-header.is-stuck .ace-menu-fallback > li > a { color: #2b3036; }

@media (prefers-reduced-motion: reduce) {
    .ace-header,
    .ace-topbar,
    .ace-wa__icon { transition: none; }
}