/* ============================================================================
   AMC — navigation, mega menu and mobile off-canvas             v8.3, 2026-09-19
   Shipped by the AMC Menu Styles plugin. Do not paste into Additional CSS.

   v8.1: desktop bar stays DARK slate (#363C4C) with white uppercase items and
   an orange underline on hover/current; light grey mega panel with white hover
   tiles; flags side by side behind a hairline divider. MOBILE unchanged from v6.

   IMPORTANT: a v6 copy of this file was also pasted into BeTheme > Theme
   Options > Custom CSS (it shows up as <style id="mfn-custom-inline-css">).
   Delete that paste — it duplicates every rule here and will fight this file.

   Palette sampled from the logo file itself: charcoal #181818, orange #E86C00.
   Typeface Nunito (the site's Elementor global).

   Two menu widgets exist in the header template:
     .elementor-element-44d92a3  DESKTOP menu, on the #363C4C dark slate bar
     .elementor-element-e6dad53  MOBILE off-canvas menu, on white
   They need opposite text colours, so each is addressed by its own widget id.
   If the header template is rebuilt those ids change: View Source, find
   id="menu-menuing", and read the nearest elementor-element-XXXXX above it.

   Desktop breakpoint 1025px, matching the widget's data-responsive-breakpoint.
   ============================================================================ */

:root {
  --amc-orange:       #E86C00;  /* logo orange - on light surfaces */
  --amc-orange-dark:  #C25A00;
  --amc-orange-light: #FF9433;  /* on the dark bar, for contrast - see note */
  --amc-orange-tint:  #FFF4EA;
  --amc-charcoal:     #181818;
  --amc-bar:          #363C4C;
  --amc-body:         #4A4540;
  --amc-muted:        #8A817A;
  --amc-line:         #ECE5DE;
  --amc-panel:        #FFFFFF;
  --amc-sub:          #FAF7F4;
  --amc-shadow:       0 1px 2px rgba(24,24,24,.05), 0 24px 48px -24px rgba(24,24,24,.28);
}

/* Two oranges, deliberately. On the #363C4C bar the logo orange measures
   3.45:1, under the 4.5:1 WCAG AA floor for normal text. #FF9433 measures
   5.0:1 there and still reads as the brand. The logo orange is used wherever
   it sits on white, where it measures 4.6:1. */

/* == 1. Shared top-level geometry ========================================== */

.elementskit-navbar-nav > li > a {
  display: flex !important;
  align-items: center !important;
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  background-color: transparent !important;
  padding: 0 16px !important;
  position: relative;
  transition: color .18s ease;
}

.elementskit-navbar-nav > li > a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 50%;
  margin-top: 12px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}

.elementskit-navbar-nav > li:hover > a::after,
.elementskit-navbar-nav > li.current-menu-item > a::after,
.elementskit-navbar-nav > li.current-menu-ancestor > a::after {
  transform: scaleX(1);
}

.elementskit-navbar-nav a:focus-visible {
  outline: 2px solid var(--amc-orange-light);
  outline-offset: 3px;
  border-radius: 3px;
}

/* == 2. Colour, per widget ================================================= */

/* 2a. Desktop menu — v8.3: dark slate bar, 44px tall. Items are white,
   uppercase pills; hover = soft white tint pill, current = orange tint pill. */
.elementor-element-44d92a3 .elementskit-navbar-nav > li > a {
  color: #FFFFFF !important;
  font-size: 13px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  margin: 0 1px !important;
  padding: 0 13px !important;
  min-height: 0;
  height: 32px !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transition: color .18s ease, background-color .18s ease;
}

.elementor-element-44d92a3 .elementskit-navbar-nav > li > a::after {
  display: none !important;
}

.elementor-element-44d92a3 .elementskit-navbar-nav > li:hover > a,
.elementor-element-44d92a3 .elementskit-navbar-nav > li > a:hover,
.elementor-element-44d92a3 .elementskit-navbar-nav > li > a:focus {
  color: #FFFFFF !important;
  background-color: rgba(255, 255, 255, .14) !important;
}

.elementor-element-44d92a3 .elementskit-navbar-nav > li.current-menu-item > a,
.elementor-element-44d92a3 .elementskit-navbar-nav > li.current-menu-ancestor > a {
  color: var(--amc-orange-light) !important;
  background-color: rgba(255, 148, 51, .16) !important;
}

.elementor-element-44d92a3 .elementskit-navbar-nav a:focus-visible {
  outline-color: var(--amc-orange);
}

/* 2b. Mobile off-canvas on white: charcoal, hover orange. */
.elementor-element-e6dad53 .elementskit-navbar-nav > li > a { color: var(--amc-charcoal) !important; }

.elementor-element-e6dad53 .elementskit-navbar-nav > li:hover > a,
.elementor-element-e6dad53 .elementskit-navbar-nav > li > a:hover,
.elementor-element-e6dad53 .elementskit-navbar-nav > li > a:focus,
.elementor-element-e6dad53 .elementskit-navbar-nav > li.current-menu-item > a,
.elementor-element-e6dad53 .elementskit-navbar-nav > li.current-menu-ancestor > a {
  color: var(--amc-orange) !important;
}

/* == 2c. Desktop bar (v8.1) =================================================
   The desktop menu bar is Elementor section 560ebcee in header template 297
   (sticky, stretched). It stays the dark slate #363C4C; v8.1 only adds a
   soft cast shadow so the sticky bar separates from page content. If the
   header template is rebuilt, View Source and read the id of the
   <nav class="elementor-section ..."> that wraps .elementor-element-44d92a3. */

.elementor-297 .elementor-element.elementor-element-560ebcee,
.elementor-297 .elementor-element.elementor-element-560ebcee:not(.elementor-motion-effects-element-type-background),
.elementor-297 .elementor-element.elementor-element-560ebcee > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: var(--amc-bar) !important;
  background-image: none !important;
  border-bottom: 0 !important;
  box-shadow: 0 12px 28px -20px rgba(0, 0, 0, .55) !important;
}

.elementor-297 .elementor-element.elementor-element-560ebcee > .elementor-container {
  min-height: 0 !important;
}

.elementor-297 .elementor-element.elementor-element-560ebcee .elementskit-menu-container,
.elementor-297 .elementor-element.elementor-element-560ebcee .elementskit-navbar-nav > li {
  height: 44px !important;
  min-height: 0 !important;
  align-items: center !important;
}

.elementor-297 .elementor-element.elementor-element-560ebcee .elementskit-menu-container {
  display: flex !important;
  align-items: center !important;
}

.elementor-297 .elementor-element.elementor-element-560ebcee .elementskit-navbar-nav {
  display: flex !important;
  align-items: center !important;
}

.elementor-297 .elementor-element.elementor-element-560ebcee .elementskit-navbar-nav > li {
  display: flex !important;
}

.elementor-element-44d92a3 > .elementor-widget-wrap {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* The round effect: the nav list is a slim glass capsule inside the bar. */
.elementor-element-44d92a3 .elementskit-navbar-nav {
  height: 38px !important;
  min-height: 0 !important;
  background: rgba(255, 255, 255, .08) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 4px 14px -8px rgba(0, 0, 0, .5);
  padding: 0 3px !important;
  margin: 0 !important;
}

/* == 3. Chevron ============================================================ */
/* float:none is the load-bearing line: ElementsKit ships the indicator as
   "display:block; float:right", and a floated box aligns to the TOP of its
   line box. That is why it sat high. */

.elementskit-navbar-nav > li > a .elementskit-submenu-indicator,
.elementskit-navbar-nav > li > a .ekit-submenu-indicator-icon,
.elementskit-navbar-nav-default .elementskit-dropdown-has > a .elementskit-submenu-indicator,
.elementskit-navbar-nav-default .elementskit-dropdown-has > a .ekit-submenu-indicator-icon {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  position: relative !important;
  top: 0 !important;
  right: auto !important;
  padding: 0 !important;
  margin: 0 0 0 7px !important;
  border: 0 !important;
  font-size: 9px !important;
  line-height: 1 !important;
  height: auto !important;
  width: auto !important;
  color: currentColor !important;
  fill: currentColor !important;
  transition: transform .22s ease;
}

/* == 4. Desktop mega panel ================================================= */

@media (min-width: 1025px) {

  .elementskit-navbar-nav,
  .elementskit-menu-container,
  .elementskit-navbar-nav > li { position: relative; }

  .elementskit-navbar-nav > li:hover > a .elementskit-submenu-indicator,
  .elementskit-navbar-nav > li:hover > a .ekit-submenu-indicator-icon {
    transform: rotate(180deg);
  }

  .elementskit-navbar-nav > li.elementskit-dropdown-has > .elementskit-submenu-panel {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(6px) !important;
    width: min(1080px, calc(100vw - 48px)) !important;
    min-width: 0 !important;
    max-height: min(72vh, 640px);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 999999 !important;
    background: var(--amc-sub) !important;
    border: 1px solid var(--amc-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--amc-shadow) !important;
    padding: 28px 32px !important;
    columns: 3;
    column-gap: 34px;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    scrollbar-width: thin;
    scrollbar-color: var(--amc-line) transparent;
  }

  /* v7: a slim accent line along the top edge of the panel — the one place
     the flood-orange rule is relaxed to a 1px mark, matching the pill accent
     used on the bar above it. */
  .elementskit-navbar-nav > li.elementskit-dropdown-has > .elementskit-submenu-panel::before {
    content: "";
    position: absolute;
    top: 0; left: 18px; right: 18px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--amc-orange), var(--amc-orange-light));
  }

  .elementskit-navbar-nav > li.elementskit-dropdown-has:hover > .elementskit-submenu-panel,
  .elementskit-navbar-nav > li.elementskit-dropdown-has:focus-within > .elementskit-submenu-panel {
    transform: translateX(-50%) translateY(0) !important;
  }

  .elementskit-navbar-nav > li > .elementskit-submenu-panel::-webkit-scrollbar { width: 8px; }
  .elementskit-navbar-nav > li > .elementskit-submenu-panel::-webkit-scrollbar-thumb {
    background: var(--amc-line); border-radius: 8px;
  }

  .elementskit-navbar-nav > li.elementskit-dropdown-has
    > .elementskit-submenu-panel:not(:has(.elementskit-submenu-panel)) {
    width: 300px !important;
    columns: 1;
    padding: 12px !important;
  }

  .elementskit-navbar-nav > li > .elementskit-submenu-panel > li {
    display: block !important;
    width: 100% !important;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 18px;
  }

  .elementskit-navbar-nav > li > .elementskit-submenu-panel > li.menu-item-has-children > a {
    font-family: "Nunito", system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: var(--amc-muted) !important;
    padding: 0 10px 8px !important;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--amc-line);
  }

  .elementskit-navbar-nav > li > .elementskit-submenu-panel > li.menu-item-has-children > a:hover {
    color: var(--amc-orange) !important;
  }

  .elementskit-navbar-nav > li > .elementskit-submenu-panel > li > a .elementskit-submenu-indicator,
  .elementskit-navbar-nav > li > .elementskit-submenu-panel > li > a .ekit-submenu-indicator-icon {
    display: none !important;
  }

  .elementskit-navbar-nav > li > .elementskit-submenu-panel .elementskit-submenu-panel {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-height: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    columns: 1;
  }

  .elementskit-navbar-nav .elementskit-submenu-panel li:not(.menu-item-has-children) > a,
  .elementskit-navbar-nav .elementskit-submenu-panel .elementskit-submenu-panel > li > a {
    display: block !important;
    font-family: "Nunito", system-ui, sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    color: var(--amc-body) !important;
    padding: 8px 10px !important;
    border-radius: 7px !important;
    border: 1px solid transparent !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
  }

  .elementskit-navbar-nav .elementskit-submenu-panel li > a:hover,
  .elementskit-navbar-nav .elementskit-submenu-panel li > a:focus,
  .elementskit-navbar-nav .elementskit-submenu-panel li.current-menu-item > a {
    background-color: var(--amc-panel) !important;
    border-color: var(--amc-line) !important;
    color: var(--amc-orange-dark) !important;
    box-shadow: 0 2px 6px rgba(24, 24, 24, .06) !important;
    transform: translateX(2px);
  }

  .elementskit-navbar-nav .elementskit-submenu-panel a {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}

/* == 5. Mobile off-canvas ================================================== */
/* The panel is white and full height. Submenus open on tap via ElementsKit's
   submenu-click-on-icon, so the CHEVRON is the control and needs a real target:
   these are 44px, the accessibility minimum. Tapping the label still navigates. */

@media (max-width: 1024px) {

  .elementor-element-e6dad53 .elementskit-menu-container {
    background: var(--amc-panel) !important;
  }

  /* SCROLLING. ElementsKit makes the <ul> the scroll container
     (.ekit_menu_responsive_tablet ... .elementskit-navbar-nav{overflow-y:auto}),
     but a scroll container only scrolls if an ancestor bounds its height.
     v4 set height:auto on this wrapper, which removed that bound - so opening a
     submenu pushed the list past the bottom of the screen with nothing to scroll.
     Here the WRAPPER is made the scroll container instead, on an explicit height.
     dvh is used because 100vh does not account for the mobile address bar and
     leaves the last item permanently under it; vh is kept as the fallback. */
  .elementor-element-e6dad53 .elementskit-menu-offcanvas-elements {
    background: var(--amc-panel) !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 56px !important;
  }

  /* The inner list must NOT also scroll, or you get a pane inside a pane. */
  .elementor-element-e6dad53 .elementskit-navbar-nav {
    overflow-y: visible !important;
    max-height: none !important;
    height: auto !important;
  }

  /* ElementsKit ships "transition: max-height 5s ease-out" on an opening submenu.
     Five seconds reads as the menu having frozen. */
  .elementor-element-e6dad53 .elementskit-dropdown,
  .elementor-element-e6dad53 .elementskit-dropdown.elementskit-dropdown-open {
    transition: max-height .32s ease-out !important;
  }

  /* Top-level rows: real height, a divider, no white pill behind the text. */
  .elementor-element-e6dad53 .elementskit-navbar-nav > li {
    border-bottom: 1px solid var(--amc-line);
  }

  .elementor-element-e6dad53 .elementskit-navbar-nav > li > a {
    background-color: transparent !important;
    min-height: 52px;
    padding: 13px 18px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  .elementor-element-e6dad53 .elementskit-navbar-nav > li > a::after { display: none; }

  /* Chevron: hard right, 44px target, brand ring. Section 3 stripped the pill
     for the desktop bar; on a touch surface it is the tap affordance. */
  .elementor-element-e6dad53 .elementskit-navbar-nav .elementskit-submenu-indicator,
  .elementor-element-e6dad53 .elementskit-navbar-nav .ekit-submenu-indicator-icon {
    margin: 0 0 0 auto !important;
    min-width: 44px;
    min-height: 44px;
    padding: 0 !important;
    font-size: 10px !important;
    border: 1px solid var(--amc-line) !important;
    border-radius: 50% !important;
    color: var(--amc-charcoal) !important;
    background: var(--amc-panel);
  }

  .elementor-element-e6dad53 .elementskit-navbar-nav li.active > a .elementskit-submenu-indicator {
    transform: rotate(180deg);
    border-color: var(--amc-orange) !important;
    color: var(--amc-orange) !important;
  }

  /* Level two: tinted and indented, so the hierarchy is visible at a glance. */
  .elementor-element-e6dad53 .elementskit-submenu-panel {
    background: var(--amc-sub) !important;
    border-top: 1px solid var(--amc-line);
    box-shadow: none !important;
  }

  .elementor-element-e6dad53 .elementskit-submenu-panel > li > a {
    padding: 12px 18px 12px 32px !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: var(--amc-body) !important;
    white-space: normal !important;
    border-bottom: 1px solid rgba(236,229,222,.7);
  }

  /* Level three: indented again, on a slightly deeper tint. */
  .elementor-element-e6dad53 .elementskit-submenu-panel .elementskit-submenu-panel {
    background: #F5F0EA !important;
  }

  .elementor-element-e6dad53 .elementskit-submenu-panel .elementskit-submenu-panel > li > a {
    padding-left: 46px !important;
    font-size: 14px !important;
  }

  .elementor-element-e6dad53 .elementskit-submenu-panel > li > a:hover,
  .elementor-element-e6dad53 .elementskit-submenu-panel > li > a:focus,
  .elementor-element-e6dad53 .elementskit-submenu-panel > li.current-menu-item > a {
    color: var(--amc-orange) !important;
    background: var(--amc-orange-tint) !important;
  }

  /* Current page, top level. */
  .elementor-element-e6dad53 .elementskit-navbar-nav > li.current-menu-item > a,
  .elementor-element-e6dad53 .elementskit-navbar-nav > li.current-menu-ancestor > a {
    color: var(--amc-orange) !important;
    box-shadow: inset 3px 0 0 var(--amc-orange);
  }

  .elementskit-menu-hamburger {
    border: 0 !important;
    padding: 10px !important;
  }

  .elementskit-menu-hamburger .elementskit-menu-hamburger-icon {
    background-color: var(--amc-charcoal) !important;
    height: 2px !important;
  }

  .elementskit-menu-close {
    color: var(--amc-charcoal) !important;
    font-size: 22px !important;
  }
}

/* == 6. Language flag switcher — the white slab on the dark bar ============= */
/* The two flags sit in their own Elementor column at the right-hand end of the
   #363C4C bar. The header template itself puts background-color:#FFFFFF on that
   column, plus a 2px #7E7E7E border top and bottom — see
   /wp-content/uploads/elementor/css/post-297.css, element a05e4b8.
   That is the white block, not the flag graphics: the flag SVGs are opaque
   edge-to-edge and carry only a 0.55-unit transparent margin inside their own
   viewBox, which the bar colour now shows through cleanly.

   Elementor writes the colour onto > .elementor-widget-wrap, so it has to be
   overridden on that same element — putting a background on the column itself
   does nothing, the wrap paints over it.

   If the header template is rebuilt this id changes: View Source, find the two
   <svg> flags, and read the elementor-element-XXXXX of the column above them. */

.elementor-297 .elementor-element.elementor-element-a05e4b8 > .elementor-widget-wrap,
.elementor-297 .elementor-element.elementor-element-a05e4b8 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: transparent !important;
}

.elementor-297 .elementor-element.elementor-element-a05e4b8 > .elementor-element-populated {
  border: 0 !important;
}

/* Keep the flags optically centred in the bar once the slab and its borders are
   gone, and give the linked flag a visible hover state it never had.
   v7 also adds a thin divider ahead of the flag group (a common way to set
   a utility control apart from the primary nav items) and a small lift/scale
   on hover so each flag reads as its own tappable control rather than a
   flat icon pair. */

.elementor-297 .elementor-element.elementor-element-a05e4b8 > .elementor-element-populated {
  display: flex !important;
  align-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  padding-left: 14px !important;
  margin-left: 6px !important;
  border-left: 1px solid rgba(255, 255, 255, .18) !important;
}

.elementor-297 .elementor-element.elementor-element-a05e4b8 .elementor-icon-list-items {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}

.elementor-297 .elementor-element.elementor-element-a05e4b8 .elementor-icon-list-item {
  width: auto !important;
}

.elementor-297 .elementor-element.elementor-element-a05e4b8 .elementor-icon-list-item a {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  opacity: .8;
  transform: scale(1);
  transition: opacity .18s ease, transform .18s ease;
}

.elementor-297 .elementor-element.elementor-element-a05e4b8 .elementor-icon-list-item a:hover,
.elementor-297 .elementor-element.elementor-element-a05e4b8 .elementor-icon-list-item a:focus-visible {
  opacity: 1;
  transform: scale(1.12);
}

/* == 7. Housekeeping ======================================================= */

@media (prefers-reduced-motion: reduce) {
  .elementskit-navbar-nav > li > a::after,
  .elementskit-navbar-nav .elementskit-submenu-indicator,
  .elementskit-navbar-nav .ekit-submenu-indicator-icon,
  .elementskit-navbar-nav .elementskit-submenu-panel,
  .elementskit-navbar-nav .elementskit-submenu-panel a {
    transition: none !important;
  }
}

/* OPTIONAL — the orange CTA button.
   Add BOOK A CONSULTATION to the desktop menu, set that item's CSS class to
   "amc-cta" (Screen Options > tick "CSS Classes"), then uncomment.

.elementskit-navbar-nav > li.amc-cta > a {
  background: var(--amc-orange) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 11px 20px !important;
  margin-left: 10px;
}
.elementskit-navbar-nav > li.amc-cta > a:hover {
  background: var(--amc-orange-light) !important;
  color: #fff !important;
}
.elementskit-navbar-nav > li.amc-cta > a::after { display: none; }
*/