/* ==========================================================================
   MacGillivray Injury & Insurance Law — 2026 Header
   Plain HTML + CSS implementation (vanilla JS for interactivity).
   ========================================================================== */

/* ---------- Design tokens --------------------------------------------------*/
:root {
  --color-brand-teal: #068288;
  --color-dark-teal: #004953;
  --color-white: #ffffff;
  --color-red: #E53C3C;
  --color-text-strong: #1f2937;
  --color-text-muted: #374151;

  --header-height: 80px;
  --header-top: 13px;
  --header-radius-sm: 8px;
  --header-radius-lg: 12px;


}

/* ---------- Reset / base ---------------------------------------------------*/



html
{
  margin: 0px !important; 
}



.n-header button {
  font-family: inherit;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
}

.n-header img,
.n-header svg {
  display: block;
  max-width: 100%;
}

/* ---------- Homepage / preview page layout --------------------------------
   Scoped to body.n-header-demo-page (added by inc/new-header.php only on
   templates/new-header.php + templates/new-header-dark.php): these are
   generic, un-namespaced class names (.hero especially) that collide with
   real content on almost every other page now that this stylesheet is
   enqueued site-wide, so they must not apply outside the two demo pages
   they were built for. ------------------------------------------------------*/
body.n-header-demo-page .hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background-color: var(--color-dark-teal);
}

body.n-header-demo-page .hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.n-header-demo-page .scroll-section {
  min-height: 120vh;
  padding: 80px 24px;
  background: #ffffff;
}

body.n-header-demo-page .scroll-section__inner {
  max-width: 64rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

body.n-header-demo-page .scroll-section h2 {
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--color-dark-teal);
  margin: 0;
}

body.n-header-demo-page .scroll-section p {
  font-size: 1.125rem;
  color: var(--color-text-muted);
  margin: 0;
}

body.n-header-demo-page .preview-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}

body.n-header-demo-page .preview-section--dark {
  background: var(--color-brand-teal);
  color: #ffffff;
}

body.n-header-demo-page .preview-section--light {
  background: #ffffff;
  color: #111827;
}

body.n-header-demo-page .preview-section__inner {
  max-width: 42rem;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.n-header-demo-page .preview-section h1,
body.n-header-demo-page .preview-section h2 {
  font-size: clamp(1.5rem, 2.5vw + 1rem, 2.25rem);
  font-weight: 600;
  margin: 0;
  color: white;
}

body.n-header-demo-page .preview-section--light h2 {
  color: var(--color-brand-teal);
}

body.n-header-demo-page .preview-section p {
  color: inherit;
  opacity: 0.85;
  margin: 0;
  line-height: 1.6;
}

body.n-header-demo-page .variant-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 60;
  background: var(--color-brand-teal);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 9999px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  transition: background-color 150ms ease;
}

body.n-header-demo-page .variant-toggle:hover {
  background: #036166;
}

/* ==========================================================================
   Responsive header swap (New Header templates only — this stylesheet is
   enqueued only on those templates):
     • above 1150px  -> show the new header (.n-header), hide the legacy header
     • up to 1150px  -> hide the new header, show the site's existing header.php
                        (its mobile menu) that get_header() renders.
   ========================================================================== */
@media (max-width: 1150px) {
  .n-header {
    display: none !important;
  }
}

@media (min-width: 1151px) {
  .main_header {
    display: none !important;
  }
}

/* ==========================================================================
   French-only breakpoint extension: French nav/menu labels run wider than
   English, so the new header's desktop nav needs more room before it fits
   without wrapping/overlap. Push the swap point from 1151px to 1201px for
   the French site (body.site-id-5 — see is_french()/functions.php) only,
   by re-hiding/re-showing the two headers across the extra 1151-1200px gap.
   The 1025-1150px mobile-menu-range-extension block below already covers
   this same gap for English; the matching French-scoped copy right after
   it extends that coverage through 1200px.
   ========================================================================== */
@media (min-width: 1151px) and (max-width: 1200px) {
  body.site-id-5 .n-header {
    display: none !important;
  }
  body.site-id-5 .main_header {
    display: block !important;
  }
}

/* ==========================================================================
   Mobile-menu range extension (New Header templates ONLY — this file is only
   enqueued on templates/new-header.php and templates/new-header-dark.php, so
   nothing here can leak to the rest of the site).

   The legacy header.php mobile menu (hamburger + slide-out panel) normally
   switches on at max-width:1024px, site-wide (see _header.css / style.css —
   deliberately left untouched). Since .n-header only shows above 1150px on
   these two templates, .main_header is forced visible for 1025-1150px, but
   without this block it would render ITS OWN desktop nav there (the legacy
   1024px breakpoint doesn't know about this page's different threshold).

   This reproduces the specific rules from the legacy max-width:1024px /
   min-width:1025px blocks (_header.css lines ~1073-1375, ~1384-1411,
   ~1413-2535, ~2372-2400; style.css lines ~77-93, ~6512-6520, ~6797-6801,
   ~6824-6839) at the new 1025-1150px threshold, scoped so the site-wide
   breakpoint is never touched. Cosmetic-only variants (blue_header hover
   colors, site-id-5/French sizing) are intentionally omitted — this covers
   the structural/functional pieces (nav swap, hamburger, panel, list
   styling, submenu accordion CSS, language switcher, scroll lock).
   ========================================================================== */
@media (min-width: 1025px) and (max-width: 1150px) {
  /* ---- Nav variant swap (style.css:6824-6839) ---------------------------- */
  .mobile_elem { display: block !important; }
  .desktop_elem { display: none !important; }

  /* ---- Neutralize legacy desktop-only nav CSS that isn't scoped to
     .desktop_elem and would otherwise bleed onto the now-visible mobile
     <ul> (both variants share the base .main_menu class). ------------------ */
  ul.main_menu > li:hover > ul,
  ul.main_menu > li > ul {
    position: static !important;
  }

  /* ---- Container / layout (style.css:6797-6801) -------------------------- */
  .main_header .container-lg {
    position: relative;
  }

  /* ---- Hamburger toggle button (_header.css:1613-1691, 2015-2018) -------- */
  .main_header .header .toggle_button {
    display: block !important;
    position: absolute;
    flex-direction: column;
    width: 28px;
    height: 18px;
    right: 21px !important;
    top: 0;
    bottom: 0;
    margin: auto;
    cursor: pointer;
  }
  .main_header .header .toggle_button span.line {
    width: 28px;
    height: 2px;
    margin: 0 auto;
    background-color: var(--mgld-whitebg);
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all .5s ease-in-out;
    border-radius: 4px;
    user-select: none;
  }
  .main_header .header .toggle_button span.line2 { margin-top: 9px; }
  .main_header .header .toggle_button span.line1 { margin-top: -9px; }
  .main_header .header .toggle_button.active {
    width: 26px;
    background-image: none;
    z-index: 1;
  }
  .main_header .header .toggle_button.active span.line {
    width: 24px;
    height: 2px;
    background-color: var(--mgld-text-17);
    border-radius: 2px;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
    left: 0;
    transition: all .5s ease-in-out;
  }
  .main_header .header .toggle_button.active span.line1 {
    margin-top: 0;
    transform: translateY(-50%) rotate(45deg);
  }
  .main_header .header .toggle_button.active span.line2 {
    visibility: hidden;
    opacity: 0;
  }
  .main_header .header .toggle_button.active span.line3 {
    margin-top: 0;
    transform: translateY(-50%) rotate(-45deg);
  }
  .main_header.menu-open .header .toggle_button span.line {
    background-color: #000 !important;
  }
  .main_header .header-top { display: none !important; }

  /* ---- blue_header variant (_header.css:1785-1811) — applies on
     new-header-dark.php, which functions.php's custom_body_classes() gives
     the blue_header class (new-header.php does not get this class). ------- */
  .blue_header .main_header .header .toggle_button span.line { background: #000; }
  .blue_header .main_header.fixed-header .header .toggle_button span.line { background: var(--white); }
  .blue_header .main_header.fixed-header a.search-btn { color: var(--white); }

  /* ---- Slide-out panel (_header.css:1513-1550) ---------------------------- */
  .main_header .header_right.mobile_menu {
    display: block !important;
    padding: 0;
    width: 100%;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    top: 0;
    left: 0;
    bottom: 0;
    position: fixed;
    background: var(--mgld-whitebg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: all .2s;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    margin: 0;
    text-align: left;
  }
  .main_header .header_right.navOpen {
    opacity: 1;
    visibility: visible;
    z-index: 100001;
    top: 79px;
  }
  .main_header .header-btm {
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 1100px;
    padding: 101px 0 117px;
  }
  .main_header .header-btm .header-search { display: none !important; }

  /* ---- Header container / logo sizing (_header.css:1413-1439, 2445-2447) - */
  .main_header .header {
    padding: 20px 0 18px;
    min-height: 83px;
  }
  .main_header .logo { width: 194px; }
  .main_header .logo-pos { margin-top: -4px !important; }

  /* ---- Search form (_header.css:1427-1430) -------------------------------- */
  .search_form {
    top: 83px;
    padding: 25px 30px 50px;
  }

  /* ---- Logo cross-fade on scroll (_header.css:1459-1491, 1505, 1693-1719) - */
  .main_header::before { transition-duration: 0.2s; }
  .main_header.fixed-header::before { transform: scaleY(1); }
  .main_header.menu-open::before {
    background: var(--mgld-whitebg);
    transform: scaleX(1);
  }
  .main_header.menu-open span.fixed-logo {
    opacity: 0 !important;
    visibility: hidden;
  }
  .main_header.head-active span.normal-logo { opacity: 1; visibility: visible; }
  .main_header.head-active span.fixed-logo { opacity: 0; visibility: hidden; }
  .main_header.menu-open .normal-logo,
  .main_header.fixed-header.menu-open .normal-logo {
    visibility: visible;
    opacity: 1;
  }

  /* ---- Closed-bar CTA button + search icon (_header.css:1552-1782) ------- */
  .main_header .res-navs {
    display: flex !important; /* .hide-in-desktop {display:none!important} in style.css also covers 1024-1399px */
    margin-left: auto;
    margin-right: 40px;
    margin-top: 2px !important;
  }
  .main_header .res-navs .consultation_btn { display: inline-block; }
  .main_header .res-navs .consultation_btn a {
    color: var(--white);
    border: 2px solid var(--white);
    font-size: 13px;
    padding: 9px 16px 9px 17px;
    letter-spacing: 0.2px;
    font-family: 'gilroy-bold', sans-serif;
  }
  .main_header .res-navs .consultation_btn a:hover { border: 2px solid var(--mgld-hoverbtnblue); }
  .main_header .res-navs .consultation_btn span:after { display: none; }
  .main_header .res-navs .header-search { margin-left: 32px; }
  .main_header .res-navs .header-search a.search-btn { margin-top: 0; }
  .main_header.fixed-header .res-navs .consultation_btn a {
    color: var(--white);
    border: 2px solid var(--white);
  }
  .main_header.fixed-header .res-navs .consultation_btn a:hover { border: 2px solid var(--mgld-hoverbtnblue); }
  .main_header.head-active .res-navs .consultation_btn a,
  .main_header.head-active.fixed-header .res-navs .consultation_btn a {
    border: 2px solid var(--mgld-text-17);
    color: var(--mgld-text-17);
  }
  .main_header.head-active .res-navs .consultation_btn a:hover {
    border: 2px solid var(--mgld-hoverbtnblue);
    color: var(--white);
  }
  .main_header.menu-open .res-navs .consultation_btn a,
  .main_header.fixed-header.menu-open .res-navs .consultation_btn a {
    color: var(--mgld-text-17);
    border: 2px solid var(--mgld-text-17);
    user-select: none !important;
  }
  .main_header.menu-open .res-navs .consultation_btn a:hover,
  .main_header.fixed-header.menu-open .res-navs .consultation_btn a:hover {
    border: 2px solid var(--mgld-hoverbtnblue);
    color: var(--white);
  }

  /* ---- blue_header variant (_header.css:1789-1811) ------------------------ */
  .blue_header .main_header .res-navs .consultation_btn a {
    color: #000;
    border: 2px solid #000;
  }
  .blue_header .main_header .res-navs .consultation_btn a:hover {
    border: 2px solid var(--mgld-hoverbtnblue);
    color: var(--white);
  }
  .blue_header .main_header.fixed-header .res-navs .consultation_btn a {
    color: var(--white);
    border: 2px solid var(--white);
  }
  .blue_header .main_header.fixed-header .res-navs .consultation_btn a:hover {
    border: 2px solid var(--mgld-hoverbtnblue);
    color: var(--white);
  }

  .mobile_menu {
    padding: 0 20px !important;
    width: 100%;
    display: flex !important;
    flex-wrap: wrap;
    flex-direction: column;
  }
  .menu_btn_mobile.hide-in-desktop { display: block !important; padding: 0 20px; }

  /* ---- Nav item list (_header.css:1840-1922, 2115-2123, 2485-2533) ------- */
  .mobile_menu ul.main_menu {
    margin: 0 !important;
    padding: 0 0 74px !important;
  }
  .mobile_menu ul.main_menu > li {
    display: block !important;
    margin: 0 !important;
    background: white;
  }
  .main_menu .menu-item-has-children a {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
  }
  .mobile_menu ul.main_menu li:before { display: none !important; }
  .mobile_menu ul.main_menu > li > a {
    text-transform: none;
    cursor: pointer;
    display: block;
    border: 0;
    text-decoration: none;
    font-size: 24px;
    padding-bottom: 26px;
    transition: 0.5s;
    letter-spacing: -0.432px;
    line-height: 140%;
    color: #000;
    font-family: "Gilroy-semibold" !important;
  }
  .mobile_menu ul.main_menu > li > a.active {
    font-family: "Gilroy-bold" !important;
    font-weight: 400 !important;
  }
  .mobile_menu .active {
    color: #E53C3C !important;
    font-weight: 700 !important;
  }
  .mobile_menu ul.main_menu li ul {
    display: block !important;
    margin: 0 !important;
    margin-top: -6px !important;
    margin-bottom: 6px !important;
    padding: 0 0 0 10px;
    max-height: 0;
    overflow: hidden;
    transition: 0.5s ease;
  }
  .mobile_menu ul.main_menu li ul li {
    margin-bottom: 0 !important;
    display: block !important;
  }
  .mobile_menu ul.main_menu li ul li a {
    font-size: 18px;
    color: rgba(0, 0, 0, 0.85);
    font-family: 'gilroy-medium';
    line-height: 140%;
    letter-spacing: -0.09px;
    position: relative;
    font-weight: 400 !important;
    margin-bottom: 22px;
  }
  .mobile_menu ul.main_menu li ul li.menu-item-has-children > a { display: block; }
  .mobile_menu ul.main_menu li ul li ul {
    margin: 0 !important;
    padding: 0 0 0 14.98px;
    margin-top: -6px !important;
    margin-bottom: 6px !important;
  }
  .mobile_menu ul.main_menu li ul li.menu-item-has-children > a::after { top: 10px; }
  .mobile_menu ul.main_menu li ul li.menu-item-has-children > a.active::after { top: 7px; }
  .mobile_menu .sub-menu .sub-menu li { margin-bottom: 16px !important; }
  .mobile_menu ul.main_menu li .sub-menu-open { margin-bottom: 15px !important; }
  .sub-menu .sub-menu a { margin-bottom: 16px !important; }
  .menu-plus-line { transition: transform .5s ease; transform-origin: center; }
  .active .menu-plus-line { transform: rotate(90deg); }
  .sub-menu-icon path { transition: .5s; }
  .active .sub-menu-icon path { stroke: rgba(229, 60, 60, 1); }

  /* ---- Body scroll-lock while panel is open (style.css:6512-6520) -------- */
  body.main-menu-active {
    overflow: hidden;
    height: 100%;
    position: fixed;
  }
  body.menu-animating ul.main_menu,
  body.menu-animating ul.main_menu a {
    pointer-events: none;
  }

  /* ---- Bottom CTA / phone / language switcher (_header.css:1943-2181) ---- */
  .menu-bottom-btns {
    text-align: center;
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 36px 0;
    align-items: flex-start;
    transition: all 0.75s ease-in-out;
    justify-content: space-between;
    display: flex !important;
    background: var(--mgld-whitebg);
    flex-wrap: wrap;
    border-top: 1px solid #D9D9D9;
    margin-top: 36px;
  }
  .mobile_menu .menu-bottom-btns {
    padding: 36px 20px 0 !important;
    flex-direction: column;
  }
  .menu-bottom-btns .button { min-width: 247px; padding: 14px 22px 15px 19px; }
  .menu-bottom-btns span.header_phone {
    display: flex;
    gap: 7px;
    margin: 0 0 14.76px;
  }
  .menu-bottom-btns span.header_phone a {
    color: #000;
    font-family: 'Gilroy-SemiBold';
    font-size: 18px;
    line-height: 135%;
    letter-spacing: -0.09px;
    display: contents;
  }
  .menu-bottom-btns span.header_phone:before {
    content: url('wp-content/uploads/2026/08/phone.svg');
    max-height: 28px;
  }
  .menu-bottom-btns .consultation_btn { order: 3; margin-top: 40px; }
  .header_language { color: var(--mgld-text-17); order: 1; margin-right: 0; }
  .header_language > a, .lang { color: var(--mgld-text-17); }
  .header_language > a:hover, .lang:hover { color: var(--red); }
  .header_language .lang::after { border-color: var(--mgld-text-17) transparent transparent transparent; }
  .header_language .lang {
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .header_language > a:before, .lang:before {
    content: url('/wp-content/uploads/2026/08/phone-1.svg');
    position: unset;
    background: unset;
    margin: 0;
    width: 27px;
    height: 28px;
  }
  .header_language .lang .lang-title {
    color: #000 !important;
    font-family: 'Gilroy-semibold';
    font-weight: 400 !important;
    line-height: 140%;
    font-size: 18px;
    display: flex;
    gap: 5.27px;
  }
  .lang-title:before { display: none !important; }
  .header_language .lang .lang-title:after {
    content: url('/wp-content/uploads/2026/08/Vector-32.svg');
    width: 9.828px;
    height: 100%;
    position: unset;
    font-family: unset;
    line-height: unset;
    font-size: unset;
    margin-top: -2px;
    transition: 0.5s;
  }
  .lang-title.active:after { transform: rotate(-180deg) translate(-4px, -4px); }
  .lang-menu-wrapper::before {
    content: url('/wp-content/uploads/2026/08/Polygon-2.svg');
    position: absolute;
    top: 26px;
    left: 51px;
    z-index: 11;
  }
  .language_menu {
    left: 36.04px;
    transform: unset;
    margin-top: 0;
    top: 42px;
    width: 276.604px;
    border-radius: 5px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
    filter: drop-shadow(0 0 40px rgba(0, 0, 0, 0.10));
    padding: 16.12px 0 11px 21.6px;
    box-sizing: border-box;
    overflow-y: visible;
    display: grid !important;
    grid-template-columns: auto auto;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
    column-gap: 10px;
    overflow: hidden;
  }
  .language_menu.active { opacity: 1; visibility: visible; }
  .language_menu li {
    margin-bottom: 11.12px;
    font-family: 'Gilroy-semibold';
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
    color: #068288;
  }
  .mobile_menu .mobile_menu_btn_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 55px;
    background: #068288;
    border-radius: 37px;
    padding-left: 25px;
    padding-right: 10px;
  }
  .mobile_menu .mobile_menu_btn_wrapper a {
    font-family: 'gilroy-bold';
    font-size: 18px;
    line-height: 140%;
    letter-spacing: -0.09px;
    color: #fff;
    text-decoration: none;
  }
  .mobile_menu .menu_btn_svg { display: flex; }

  /* ---- Logo sizing (_header.css:2055-2064) -------------------------------- */
  .main_header .logo a { max-width: 165px; height: 34px; width: 165px; }
  .main_header .logo img { width: 100%; height: 100%; }
}

/* ==========================================================================
   French-only copy of the 1025-1150px mobile-menu-range-extension block
   above, re-applied across the extra 1151-1200px gap opened up by the
   French breakpoint extension (see the (min-width:1151px) and
   (max-width:1200px) block above .n-header/.main_header swap). Contents are
   an exact copy of that block's rules — @scope(body.site-id-5) applies them
   only on the French site instead of requiring every selector to be
   rewritten with a "body.site-id-5 " prefix by hand.
   ========================================================================== */
@media (min-width: 1151px) and (max-width: 1200px) {
  @scope (body.site-id-5) {
    /* ---- Nav variant swap (style.css:6824-6839) ---------------------------- */
    .mobile_elem { display: block !important; }
    .desktop_elem { display: none !important; }

    /* ---- Neutralize legacy desktop-only nav CSS that isn't scoped to
       .desktop_elem and would otherwise bleed onto the now-visible mobile
       <ul> (both variants share the base .main_menu class). ------------------ */
    ul.main_menu > li:hover > ul,
    ul.main_menu > li > ul {
      position: static !important;
    }

    /* ---- Container / layout (style.css:6797-6801) -------------------------- */
    .main_header .container-lg {
      position: relative;
    }

    /* ---- Hamburger toggle button (_header.css:1613-1691, 2015-2018) -------- */
    .main_header .header .toggle_button {
      display: block !important;
      position: absolute;
      flex-direction: column;
      width: 28px;
      height: 18px;
      right: 21px !important;
      top: 0;
      bottom: 0;
      margin: auto;
      cursor: pointer;
    }
    .main_header .header .toggle_button span.line {
      width: 28px;
      height: 2px;
      margin: 0 auto;
      background-color: var(--mgld-whitebg);
      display: block;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      transition: all .5s ease-in-out;
      border-radius: 4px;
      user-select: none;
    }
    .main_header .header .toggle_button span.line2 { margin-top: 9px; }
    .main_header .header .toggle_button span.line1 { margin-top: -9px; }
    .main_header .header .toggle_button.active {
      width: 26px;
      background-image: none;
      z-index: 1;
    }
    .main_header .header .toggle_button.active span.line {
      width: 24px;
      height: 2px;
      background-color: var(--mgld-text-17);
      border-radius: 2px;
      top: 50%;
      position: absolute;
      transform: translateY(-50%);
      left: 0;
      transition: all .5s ease-in-out;
    }
    .main_header .header .toggle_button.active span.line1 {
      margin-top: 0;
      transform: translateY(-50%) rotate(45deg);
    }
    .main_header .header .toggle_button.active span.line2 {
      visibility: hidden;
      opacity: 0;
    }
    .main_header .header .toggle_button.active span.line3 {
      margin-top: 0;
      transform: translateY(-50%) rotate(-45deg);
    }
    .main_header.menu-open .header .toggle_button span.line {
      background-color: #000 !important;
    }
    .main_header .header-top { display: none !important; }

    /* ---- blue_header variant (_header.css:1785-1811) — applies on
       new-header-dark.php, which functions.php's custom_body_classes() gives
       the blue_header class (new-header.php does not get this class). ------- */
    .blue_header .main_header .header .toggle_button span.line { background: #000; }
    .blue_header .main_header.fixed-header .header .toggle_button span.line { background: var(--white); }
    .blue_header .main_header.fixed-header a.search-btn { color: var(--white); }

    /* ---- Slide-out panel (_header.css:1513-1550) ---------------------------- */
    .main_header .header_right.mobile_menu {
      display: block !important;
      padding: 0;
      width: 100%;
      height: auto;
      min-height: 100vh;
      min-height: 100dvh;
      top: 0;
      left: 0;
      bottom: 0;
      position: fixed;
      background: var(--mgld-whitebg);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      transition: all .2s;
      z-index: -1;
      opacity: 0;
      visibility: hidden;
      margin: 0;
      text-align: left;
    }
    .main_header .header_right.navOpen {
      opacity: 1;
      visibility: visible;
      z-index: 100001;
      top: 79px;
    }
    .main_header .header-btm {
      display: flex;
      flex-direction: column;
      height: 100vh;
      min-height: 1100px;
      padding: 101px 0 117px;
    }
    .main_header .header-btm .header-search { display: none !important; }

    /* ---- Header container / logo sizing (_header.css:1413-1439, 2445-2447) - */
    .main_header .header {
      padding: 20px 0 18px;
      min-height: 83px;
    }
    .main_header .logo { width: 194px; }
    .main_header .logo-pos { margin-top: -4px !important; }

    /* ---- Search form (_header.css:1427-1430) -------------------------------- */
    .search_form {
      top: 83px;
      padding: 25px 30px 50px;
    }

    /* ---- Logo cross-fade on scroll (_header.css:1459-1491, 1505, 1693-1719) - */
    .main_header::before { transition-duration: 0.2s; }
    .main_header.fixed-header::before { transform: scaleY(1); }
    .main_header.menu-open::before {
      background: var(--mgld-whitebg);
      transform: scaleX(1);
    }
    .main_header.menu-open span.fixed-logo {
      opacity: 0 !important;
      visibility: hidden;
    }
    .main_header.head-active span.normal-logo { opacity: 1; visibility: visible; }
    .main_header.head-active span.fixed-logo { opacity: 0; visibility: hidden; }
    .main_header.menu-open .normal-logo,
    .main_header.fixed-header.menu-open .normal-logo {
      visibility: visible;
      opacity: 1;
    }

    /* ---- Closed-bar CTA button + search icon (_header.css:1552-1782) ------- */
    .main_header .res-navs {
      display: flex !important; /* .hide-in-desktop {display:none!important} in style.css also covers 1024-1399px */
      margin-left: auto;
      margin-right: 40px;
      margin-top: 2px !important;
    }
    .main_header .res-navs .consultation_btn { display: inline-block; }
    .main_header .res-navs .consultation_btn a {
      color: var(--white);
      border: 2px solid var(--white);
      font-size: 13px;
      padding: 9px 16px 9px 17px;
      letter-spacing: 0.2px;
      font-family: 'gilroy-bold', sans-serif;
    }
    .main_header .res-navs .consultation_btn a:hover { border: 2px solid var(--mgld-hoverbtnblue); }
    .main_header .res-navs .consultation_btn span:after { display: none; }
    .main_header .res-navs .header-search { margin-left: 32px; }
    .main_header .res-navs .header-search a.search-btn { margin-top: 0; }
    .main_header.fixed-header .res-navs .consultation_btn a {
      color: var(--white);
      border: 2px solid var(--white);
    }
    .main_header.fixed-header .res-navs .consultation_btn a:hover { border: 2px solid var(--mgld-hoverbtnblue); }
    .main_header.head-active .res-navs .consultation_btn a,
    .main_header.head-active.fixed-header .res-navs .consultation_btn a {
      border: 2px solid var(--mgld-text-17);
      color: var(--mgld-text-17);
    }
    .main_header.head-active .res-navs .consultation_btn a:hover {
      border: 2px solid var(--mgld-hoverbtnblue);
      color: var(--white);
    }
    .main_header.menu-open .res-navs .consultation_btn a,
    .main_header.fixed-header.menu-open .res-navs .consultation_btn a {
      color: var(--mgld-text-17);
      border: 2px solid var(--mgld-text-17);
      user-select: none !important;
    }
    .main_header.menu-open .res-navs .consultation_btn a:hover,
    .main_header.fixed-header.menu-open .res-navs .consultation_btn a:hover {
      border: 2px solid var(--mgld-hoverbtnblue);
      color: var(--white);
    }

    /* ---- blue_header variant (_header.css:1789-1811) ------------------------ */
    .blue_header .main_header .res-navs .consultation_btn a {
      color: #000;
      border: 2px solid #000;
    }
    .blue_header .main_header .res-navs .consultation_btn a:hover {
      border: 2px solid var(--mgld-hoverbtnblue);
      color: var(--white);
    }
    .blue_header .main_header.fixed-header .res-navs .consultation_btn a {
      color: var(--white);
      border: 2px solid var(--white);
    }
    .blue_header .main_header.fixed-header .res-navs .consultation_btn a:hover {
      border: 2px solid var(--mgld-hoverbtnblue);
      color: var(--white);
    }

    .mobile_menu {
      padding: 0 20px !important;
      width: 100%;
      display: flex !important;
      flex-wrap: wrap;
      flex-direction: column;
    }
    .menu_btn_mobile.hide-in-desktop { display: block !important; padding: 0 20px; }

    /* ---- Nav item list (_header.css:1840-1922, 2115-2123, 2485-2533) ------- */
    .mobile_menu ul.main_menu {
      margin: 0 !important;
      padding: 0 0 74px !important;
    }
    .mobile_menu ul.main_menu > li {
      display: block !important;
      margin: 0 !important;
      background: white;
    }
    .main_menu .menu-item-has-children a {
      display: flex !important;
      justify-content: space-between;
      align-items: center;
    }
    .mobile_menu ul.main_menu li:before { display: none !important; }
    .mobile_menu ul.main_menu > li > a {
      text-transform: none;
      cursor: pointer;
      display: block;
      border: 0;
      text-decoration: none;
      font-size: 24px;
      padding-bottom: 26px;
      transition: 0.5s;
      letter-spacing: -0.432px;
      line-height: 140%;
      color: #000;
      font-family: "Gilroy-semibold" !important;
    }
    .mobile_menu ul.main_menu > li > a.active {
      font-family: "Gilroy-bold" !important;
      font-weight: 400 !important;
    }
    .mobile_menu .active {
      color: #E53C3C !important;
      font-weight: 700 !important;
    }
    .mobile_menu ul.main_menu li ul {
      display: block !important;
      margin: 0 !important;
      margin-top: -6px !important;
      margin-bottom: 6px !important;
      padding: 0 0 0 10px;
      max-height: 0;
      overflow: hidden;
      transition: 0.5s ease;
    }
    .mobile_menu ul.main_menu li ul li {
      margin-bottom: 0 !important;
      display: block !important;
    }
    .mobile_menu ul.main_menu li ul li a {
      font-size: 18px;
      color: rgba(0, 0, 0, 0.85);
      font-family: 'gilroy-medium';
      line-height: 140%;
      letter-spacing: -0.09px;
      position: relative;
      font-weight: 400 !important;
      margin-bottom: 22px;
    }
    .mobile_menu ul.main_menu li ul li.menu-item-has-children > a { display: block; }
    .mobile_menu ul.main_menu li ul li ul {
      margin: 0 !important;
      padding: 0 0 0 14.98px;
      margin-top: -6px !important;
      margin-bottom: 6px !important;
    }
    .mobile_menu ul.main_menu li ul li.menu-item-has-children > a::after { top: 10px; }
    .mobile_menu ul.main_menu li ul li.menu-item-has-children > a.active::after { top: 7px; }
    .mobile_menu .sub-menu .sub-menu li { margin-bottom: 16px !important; }
    .mobile_menu ul.main_menu li .sub-menu-open { margin-bottom: 15px !important; }
    .sub-menu .sub-menu a { margin-bottom: 16px !important; }
    .menu-plus-line { transition: transform .5s ease; transform-origin: center; }
    .active .menu-plus-line { transform: rotate(90deg); }
    .sub-menu-icon path { transition: .5s; }
    .active .sub-menu-icon path { stroke: rgba(229, 60, 60, 1); }

    /* ---- Body scroll-lock while panel is open (style.css:6512-6520) -------- */
    body.main-menu-active {
      overflow: hidden;
      height: 100%;
      position: fixed;
    }
    body.menu-animating ul.main_menu,
    body.menu-animating ul.main_menu a {
      pointer-events: none;
    }

    /* ---- Bottom CTA / phone / language switcher (_header.css:1943-2181) ---- */
    .menu-bottom-btns {
      text-align: center;
      position: relative;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 36px 0;
      align-items: flex-start;
      transition: all 0.75s ease-in-out;
      justify-content: space-between;
      display: flex !important;
      background: var(--mgld-whitebg);
      flex-wrap: wrap;
      border-top: 1px solid #D9D9D9;
      margin-top: 36px;
    }
    .mobile_menu .menu-bottom-btns {
      padding: 36px 20px 0 !important;
      flex-direction: column;
    }
    .menu-bottom-btns .button { min-width: 247px; padding: 14px 22px 15px 19px; }
    .menu-bottom-btns span.header_phone {
      display: flex;
      gap: 7px;
      margin: 0 0 14.76px;
    }
    .menu-bottom-btns span.header_phone a {
      color: #000;
      font-family: 'Gilroy-SemiBold';
      font-size: 18px;
      line-height: 135%;
      letter-spacing: -0.09px;
      display: contents;
    }
    .menu-bottom-btns span.header_phone:before {
      content: url('/wp-content/uploads/2026/08/phone.svg');
      max-height: 28px;
    }
    .menu-bottom-btns .consultation_btn { order: 3; margin-top: 40px; }
    .header_language { color: var(--mgld-text-17); order: 1; margin-right: 0; }
    .header_language > a, .lang { color: var(--mgld-text-17); }
    .header_language > a:hover, .lang:hover { color: var(--red); }
    .header_language .lang::after { border-color: var(--mgld-text-17) transparent transparent transparent; }
    .header_language .lang {
      display: flex;
      align-items: center;
      gap: 9px;
    }
    .header_language > a:before, .lang:before {
      content: url('/wp-content/uploads/2026/08/phone-1.svg');
      position: unset;
      background: unset;
      margin: 0;
      width: 27px;
      height: 28px;
    }
    .header_language .lang .lang-title {
      color: #000 !important;
      font-family: 'Gilroy-semibold';
      font-weight: 400 !important;
      line-height: 140%;
      font-size: 18px;
      display: flex;
      gap: 5.27px;
    }
    .lang-title:before { display: none !important; }
    .header_language .lang .lang-title:after {
      content: url('/wp-content/uploads/2026/08/Vector-32.svg');
      width: 9.828px;
      height: 100%;
      position: unset;
      font-family: unset;
      line-height: unset;
      font-size: unset;
      margin-top: -2px;
      transition: 0.5s;
    }
    .lang-title.active:after { transform: rotate(-180deg) translate(-4px, -4px); }
    .lang-menu-wrapper::before {
      content: url('/wp-content/uploads/2026/08/Polygon-2.svg');
      position: absolute;
      top: 26px;
      left: 51px;
      z-index: 11;
    }
    .language_menu {
      left: 36.04px;
      transform: unset;
      margin-top: 0;
      top: 42px;
      width: 276.604px;
      border-radius: 5px;
      box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
      filter: drop-shadow(0 0 40px rgba(0, 0, 0, 0.10));
      padding: 16.12px 0 11px 21.6px;
      box-sizing: border-box;
      overflow-y: visible;
      display: grid !important;
      grid-template-columns: auto auto;
      max-height: 0;
      opacity: 0;
      visibility: hidden;
      transition: 0.5s;
      column-gap: 10px;
      overflow: hidden;
    }
    .language_menu.active { opacity: 1; visibility: visible; }
    .language_menu li {
      margin-bottom: 11.12px;
      font-family: 'Gilroy-semibold';
      font-size: 16px;
      font-weight: 400;
      line-height: 140%;
      color: #068288;
    }
    .mobile_menu .mobile_menu_btn_wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 55px;
      background: #068288;
      border-radius: 37px;
      padding-left: 25px;
      padding-right: 10px;
    }
    .mobile_menu .mobile_menu_btn_wrapper a {
      font-family: 'gilroy-bold';
      font-size: 18px;
      line-height: 140%;
      letter-spacing: -0.09px;
      color: #fff;
      text-decoration: none;
    }
    .mobile_menu .menu_btn_svg { display: flex; }

    /* ---- Logo sizing (_header.css:2055-2064) -------------------------------- */
    .main_header .logo a { max-width: 165px; height: 34px; width: 165px; }
    .main_header .logo img { width: 100%; height: 100%; }
  }
}

/* ==========================================================================
   Header
   ========================================================================== */
/* <header class="n-header"> is purely the positioning shell: fixed to the
   viewport, inset from its edges. The shell itself never moves; only its
   .n-header-popup child collapses away on scroll (see below) while
   .n-header-bar stays sticky at the top throughout.
   .n-header-bar is the actual header — background colour, padding and
   corner radius all live here and react to scroll/hover state, since it's
   the element that "looks like" the header and holds the logo/nav/utilities.
   .n-header-popup sits above it, using its own matching corner radius since
   (being a sibling, not a descendant) it can't `inherit` the bar's. */
.n-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 852;

  transition: margin 300ms ease-in;
}

.n-header-bar {
  
  display: flex;
  align-items: center;
  padding: 0;
  border-radius: 12px;
  background-color: transparent;
  transition: background-color 300ms ease-in, padding 300ms ease-in, border-radius 300ms ease-in, transform 300ms ease-in-out;
}

/* Promotional popup banner (ns-popup-container). Reuses its classes for
   styling (see style.css); only the rounded top corners are added here so
   it caps the bar's own rounded shape below it. Hardcoded to the "lg" token
   rather than matching .n-header-bar's own sm/lg breakpoint switch since
   .n-header is only ever visible above that breakpoint anyway. */
.n-header-popup {

  overflow: hidden;
  transition: transform 300ms ease-in-out;
}

/* Slid away on scroll-down, restored on scroll-up (see
   updatePopupHiddenState in header-new.js) — same simple translateY
   nav-up/nav-down behaviour the whole header used to have, just scoped to
   the promo strip so the nav bar below it stays put/sticky instead of
   sliding away with it. */
.n-header-popup.is-scroll-hidden {
  transform: translateY(-100%);
}

/* Solid state (scrolled or nav/utility hovered/open). */
.n-header.is-solid .n-header-bar {
  background-color: var(--color-dark-teal);
}

/* On mobile we tighten margins once scrolled. */

.n-header.is-scrolled .n-header-bar {
  padding-left: 20px;
  padding-right: 12px;
}

@media (min-width: 1150px) {

  .n-header-bar {
    padding-left: 20px;
    padding-right: 12px;
    border-radius: 12px;
    max-height: 82px;
    padding-top: 16px;
    padding-bottom: 16px;;
  }
}

/* ---------- Logo ----------------------------------------------------------*/
.n-header__logo-link {
  display: block;
  flex-shrink: 0;
  transform: translateY(-0.5px);
}

/* Single logo image. The default src is the coloured mark; when the header
   sits on a dark surface (.is-white) CSS replaces the displayed image with the
   white mark via `content` (URL injected inline as --logo-light). */
.n-header__logo {
  width: 178px;
  height: 54px;
  display: block;
}

.n-header.is-white .n-header__logo {
  content: var(--logo-light);
}

/* ---------- Nav (desktop) -------------------------------------------------*/
.n-header-nav {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding-left: 10px;
  transform: translateY(2px);
}

@media (min-width: 1150px) {
  .n-header-nav {
    display: flex;
  }
}

.n-header-nav__item {
  position: relative;
}

.n-header-nav__button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 39px;
  padding: 0 15px 0 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: unset !important;
  letter-spacing: -0.05px;
  white-space: nowrap;
  color: var(--color-brand-teal);
  opacity: 1;
  text-decoration: none;
  transition: background-color 450ms ease-in, color 150ms ease-in, opacity 150ms ease-in;
}

/* Menu links are rendered as anchors (WordPress menu) — strip default
   link decoration so they match the original button styling. */
.n-header-dropdown__link,
.n-header-submenu__link {
  text-decoration: none;
}

.n-header-nav__button:hover{
  background-color: rgba(255, 255, 255, 0.1);
  opacity: 1;
}

.n-header-nav__button.is-current,
.n-header-nav__item.is-open .n-header-nav__button {
  background-color: rgba(255, 255, 255, 0.1);
  
}

/* Color modes applied on the header root. */
.n-header.is-white .n-header-nav__button,
.n-header.is-white .n-header-utility__text,
.n-header.is-white .n-header-utility__phone,
.n-header.is-white .n-header-utility__lang-button {
  color: var(--color-white);
}

.n-header.is-light-banner .n-header-nav__button,
.n-header.is-light-banner .n-header-utility__phone,
.n-header.is-light-banner .n-header-utility__lang-button {
  color: var(--color-dark-teal);
}

/* Active-page highlight on light banner (blue_header) pages before scroll:
   the default white overlay (see .n-header-nav__button.is-current above) is
   barely visible against this light background, so use a teal tint instead. */
.n-header.is-light-banner .n-header-nav__button.is-current {
  background-color: rgba(6, 130, 136, 0.08);
}

/* ---------- Dropdown card -------------------------------------------------*/
.n-header-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  /* Use padding (not margin) so the wrapper's hit area bridges the visual
     gap between the nav button and the card; otherwise crossing this gap
     fires mouseleave on the nav item and can leave the dropdown stuck. */
  padding-top: 12px;
  z-index: 50;
  display: none;
}

.n-header-nav__item.is-open .n-header-dropdown {
  display: block;
}

.n-header-dropdown__card {
  display: flex;
  flex-direction: column;
  width: max-content;
  min-width: 200px;
  background: #ffffff;
  border-radius: 12px;
  padding: 28px 24px 28px 22px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: dropdown-card-in 540ms cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
  transform-origin: top center;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Per-item minimum widths, mirroring NAV_ITEMS.minWidth */
.n-header-dropdown__card[data-min="practice"]   { min-width: 260px; }
.n-header-dropdown__card[data-min="firm"]       { min-width: 200px; }
.n-header-dropdown__card[data-min="resources"]  { min-width: 220px; }
.n-header-dropdown__card[data-min="cares"]      { width: max-content; }

.n-header-dropdown__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.n-header-dropdown__row {
  display: flex;
  flex-direction: column;
}

.n-header-dropdown__link {
  display: inline-flex;
  align-items: center;
  width: 100%;
  text-align: left;
  gap: 8px;
  font-size: 14px;
  font-weight: unset !Important;
  color: var(--color-text-strong);
  white-space: nowrap;
  animation: dropdown-row-in 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: color 150ms ease-in;
  line-height: 16px;
  font-family: "Gilroy-Medium";
}

.n-header-dropdown__link:hover,
.n-header-dropdown__link.is-current {
  color: var(--color-red);
}

.n-header-dropdown__link.has-sub {
  justify-content: space-between;
}

/* Plus icon — uploaded SVG applied as a mask so it inherits the link's colour
   (teal on the white dropdown card, red on hover) instead of the SVG's own fill. */
.n-header-plus-icon {
  display: block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.85;
  background-color: currentColor;
  -webkit-mask: url('/wp-content/uploads/2026/08/plus-icon-1.svg') no-repeat center / contain;
          mask: url('/wp-content/uploads/2026/08/plus-icon-1.svg') no-repeat center / contain;
  transition: transform 300ms ease-in-out;
}

/* Rotate the plus to an ✕ when its row is expanded. */
.n-header-dropdown__row.is-open .n-header-plus-icon {
  transform: rotate(45deg);
}

/* Nested submenu */
.n-header-submenu {
  margin-left: 11px;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  transition: grid-template-rows 500ms ease-in-out, opacity 500ms ease-in-out, margin-top 500ms ease-in-out;
}

.n-header-dropdown__row.is-open .n-header-submenu {
  grid-template-rows: 1fr;
  margin-top: 15px;
  opacity: 1;
}

.n-header-submenu__inner {
  min-height: 0;
}

.n-header-submenu__list {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding-bottom: 11px;
}

.n-header-submenu__link {
  text-align: left;
  font-size: 14px;
  color: var(--color-text-muted);
  transition: color 150ms ease-in;
  animation: dropdown-row-in 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
  font-family: "Gilroy-Medium";
  font-weight: unset !important;
}

.n-header-submenu__link:hover,
.n-header-submenu__link.is-current {
  color: var(--color-red);
}

/* ---------- Utilities (desktop) -------------------------------------------*/
.n-header-utility {
  display: none;
  margin-left: auto;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  transform: translateY(1px);
}

@media (min-width: 1150px) {
  .n-header-utility {
    display: inline-flex;
  }
}

.n-header-utility__lang {
  position: relative;
}

.n-header-utility__lang-button,
.n-header-utility__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 39px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-brand-teal);
  text-decoration: none;
  transition: background-color 150ms ease;
}

.n-header-utility__lang-button {
  padding: 0 10px;
}

.n-header-utility__lang-button:hover,
.n-header-utility__phone:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Icon-only pill at narrow desktop widths. */
@media (max-width: 1300px) and (min-width: 1150px) {
  .n-header-utility__lang-button,
  .n-header-utility__phone {
    width: 45px;
    min-width: 45px;
    height: 45px;
    padding: 0;
    border-radius: 9999px;
  }

  .n-header-utility__lang-button .n-header-utility__text,
  .n-header-utility__phone .n-header-utility__text {
    display: none;
  }
}

/* French-only: labels run wider than English, so the icon-only utility pill
   above needs to kick in earlier (1350px) than the site-wide 1300px swap —
   same French-breakpoint-extension pattern used for the nav swap near the
   top of this file (body.site-id-5 — see is_french()/functions.php). */
@media (max-width: 1350px) and (min-width: 1301px) {
  body.site-id-5 .n-header-utility__lang-button,
  body.site-id-5 .n-header-utility__phone {
    width: 45px;
    min-width: 45px;
    height: 45px;
    padding: 0;
    border-radius: 9999px;
  }

  body.site-id-5 .n-header-utility__lang-button .n-header-utility__text,
  body.site-id-5 .n-header-utility__phone .n-header-utility__text {
    display: none;
  }
}

.n-header-utility__icon {
  width: 15px;
  height: 15px;
}

.n-header-utility__phone .n-header-utility__icon {
  transform: translateY(1px);
}

.n-header-utility__lang-icon {
  width: 16px;
  height: 16px;
}

/* Swap icon source based on solid/white state */
.n-header-utility__icon[data-mode="dark"],
.n-header-utility__lang-icon[data-mode="dark"] {
  display: inline-block;
}
.n-header-utility__icon[data-mode="light"],
.n-header-utility__lang-icon[data-mode="light"] {
  display: none;
}

.n-header.is-white .n-header-utility__icon[data-mode="dark"],
.n-header.is-white .n-header-utility__lang-icon[data-mode="dark"] {
  display: none;
}
.n-header.is-white .n-header-utility__icon[data-mode="light"],
.n-header.is-white .n-header-utility__lang-icon[data-mode="light"] {
  display: inline-block;
}

/* ---------- Language dropdown --------------------------------------------*/
.n-header-lang-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  /* Padding (not margin) so the wrapper's hit area bridges the visual gap
     between the language button and the card. */
  padding-top: 12px;
  z-index: 50;
  display: none;
}

.n-header-utility__lang.is-open .n-header-lang-dropdown {
  display: block;
}

.n-header-lang-dropdown__card {
  background: #ffffff;
  border-radius: 16px;
  padding: 28px 22px;
  width: 222px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: dropdown-card-in 540ms cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
  transform-origin: top center;
}

.n-header-lang-dropdown__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 40px;
  row-gap: 16px;
}

.n-header-lang-option {
  width: 100%;
  text-align: left;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--color-brand-teal);
  font-weight: 500;
  white-space: nowrap;
  transition: color 150ms ease;
  animation: dropdown-row-in 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.n-header-lang-option:hover {
  color: var(--color-red);
}

.n-header-lang-option.is-active {
  color: var(--color-red);
  font-weight: 600;
}

/* ---------- Consult button (ripple) ---------------------------------------*/
.n-header-consult {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 50px;
  min-width: 142px;
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: unset !important;
  color: var(--color-brand-teal);
  background: #ffffff;
  overflow: hidden;
  outline: none;
  text-decoration: none;
  transition: color 300ms ease, background-color 300ms ease;
}

.n-header.is-light-banner .n-header-consult {
  background: var(--color-brand-teal);
  color: #ffffff;
}

.n-header-consult__ripple {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.n-header-consult__ripple-dot {
  position: absolute;
  width: 280px;
  height: 280px;
  background-color: var(--color-brand-teal);
  border-radius: 9999px;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 500ms ease-in-out;
  left: 50%;
  top: 50%;
}

.n-header-consult:hover .n-header-consult__ripple-dot {
  transform: translate(-50%, -50%) scale(1);
}

.n-header-consult__inner {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  transition: color 300ms ease;
}

.n-header-consult:hover .n-header-consult__inner {
  color: #ffffff;
}

.n-header-consult__icon-wrap {
  position: relative;
  width: 16px;
  height: 16px;
}

.n-header-consult__icon {
  position: absolute;
  inset: 0;
  transition: opacity 300ms ease;
  width: 16px;
  height: 16px;
}

.n-header-consult__icon[data-mode="default"] {
  opacity: 1;
}
.n-header-consult__icon[data-mode="hover"] {
  opacity: 0;
}

.n-header-consult:hover .n-header-consult__icon[data-mode="default"] {
  opacity: 0;
}
.n-header-consult:hover .n-header-consult__icon[data-mode="hover"] {
  opacity: 1;
}

.n-header.is-light-banner .n-header-consult__icon[data-mode="default"] {
  opacity: 0;
}
.n-header.is-light-banner .n-header-consult__icon[data-mode="hover"] {
  opacity: 1;
}

.n-header-consult__label {
  font-size: 14px;
  font-weight: unset !important;
  letter-spacing: -0.015em;
  line-height: 1;
  white-space: nowrap;
  transform: translateY(1px);
  display: inline-block;
}

/* ---------- Mobile utilities ---------------------------------------------*/
.n-header-mobile {
  display: inline-flex;
  margin-left: auto;
  align-items: center;
  gap: 8px;
}

@media (min-width: 1150px) {
  .n-header-mobile {
    display: none;
  }
}

.n-header-mobile__consult {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 39px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  background: #ffffff;
  color: var(--color-brand-teal);
  transition: background-color 300ms ease, color 300ms ease;
}

.n-header.is-light-banner .n-header-mobile__consult {
  background: var(--color-brand-teal);
  color: #ffffff;
}

.n-header-mobile__consult span {
  display: inline-block;
  transform: translateY(1px);
}

.n-header-mobile__menu {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  height: 39px;
  width: 39px;
  border-radius: 10px;
}

.n-header-mobile__menu img {
  width: 32px;
  height: 21px;
}

/* ---------- FR-language specific adjustments ------------------------------*/
/* Hide "MacGillivray Cares" nav item in French. */
.n-header[data-lang="fr"] .n-header-nav__item[data-nav="cares"] {
  display: none;
}

/* ---------- Animations ----------------------------------------------------*/
@keyframes dropdown-card-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.97);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes dropdown-row-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 5px, 0);
    margin-top: 3px;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    margin-top: 0;
  }
}




/* Demo pages only (see scoping note above) — hides the admin bar so it
   doesn't overlap the fixed preview header while designing those two pages;
   must stay scoped or it hides the admin toolbar site-wide. */
/* body.n-header-demo-page #wpadminbar
{
  display: none;
} */


body.n-header-demo-page .preview-section__inner h1
{
  color: #fff !important;
}


@media(min-width: 1150px)
{
  .n-header-bar{
    margin: 12px 12px 0px;
  }
}



@media(max-width: 1150px)
{
     .blue_header.header_language>a:before, .blue_header .lang:before {
    background: unset !important;
}
}


/* 
 */


.n-header-dropdown__row.is-open .n-header-dropdown__link
{
    color: var(--color-red) !important;
}

.n-header-nav__button span
{
  font-family: "Gilroy-SemiBold";
  font-weight: unset !important;
}

.n-header-consult__label
{
  font-family: "Gilroy-Semibold";
  font-weight: unset !important;
}

.n-header-utility__text,
n-header-utility__text
{
  font-family: "Gilroy-Medium";
  font-weight: 500;

}

.n-header-lang-option
{
  font-family: "Gilroy-Medium";
}

.n-header-lang-option.is-active
{
  font-family: "Gilroy-SemiBold";
}


@media(min-width:1025px)
{
   .n-header-consult:hover
  {
    color: #fff !important;
  }
}