/* My Finance Solutions - permanent responsive accessible header dropdowns.
   Only targets the bespoke header.php. No Elementor/page content is changed. */
#my-header { position:relative; z-index:1000; background:#fff; }
#my-header .columns.flex-inline { display:flex; align-items:center; gap:24px; }
#my-header .col.logo { flex:0 1 275px; min-width:180px; }
#my-header .col.logo a { display:block; line-height:0; }
#my-header .col.logo img { display:block; max-width:100%; width:100%; height:auto; }
#my-header .col.nav-menu { flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:flex-end; }
/* Phone is already a WordPress menu item. Hide the second hardcoded duplicate. */
#my-header .col.nav-menu > a.phone { display:none !important; }

/* Desktop top-level navigation: one neat row. */
#my-header .col.nav-menu > .mfs-desktop-nav { display:block !important; }
#my-header .col.nav-menu > .mfs-desktop-nav > ul.menu {
  display:flex !important; flex-wrap:nowrap; align-items:center;
  gap:clamp(14px,1.75vw,32px); list-style:none;
  padding:0 !important; margin:0 !important;
}
#my-header .mfs-desktop-nav li { list-style:none; position:relative; margin:0; padding:0; }
#my-header .mfs-desktop-nav > ul.menu > li { display:flex; align-items:center; white-space:nowrap; }
#my-header .mfs-desktop-nav > ul.menu > li > a {
  display:inline-flex; align-items:center; min-height:44px; padding:8px 0;
  font:500 clamp(13px,.97vw,15px)/1.4 'Work Sans',sans-serif;
  color:#312f30; text-decoration:none;
}
#my-header .mfs-desktop-nav li > a:hover,
#my-header .mfs-desktop-nav li > a:focus-visible,
#my-header .mfs-desktop-nav li.current-menu-item > a { color:#df0613; }
#my-header .mfs-desktop-nav .menu-item-has-children > a { padding-right:1px; }
#my-header .mfs-dropdown-toggle {
  width:29px; height:40px; min-width:29px; border:0; border-radius:6px;
  background:transparent; color:#312f30; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  margin:0 0 0 1px; padding:0; box-shadow:none; line-height:1;
}
#my-header .mfs-dropdown-toggle::after {
  content:""; display:block; width:7px; height:7px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg); transition:transform .18s ease;
}
#my-header li.mfs-submenu-open > .mfs-dropdown-toggle::after,
#my-header .mfs-desktop-nav li.menu-item-has-children:hover > .mfs-dropdown-toggle::after,
#my-header .mfs-desktop-nav li.menu-item-has-children:focus-within > .mfs-dropdown-toggle::after { transform:translateY(2px) rotate(225deg); }
#my-header .mfs-dropdown-toggle:hover { color:#df0613; background:#f8f3f3; }
#my-header .mfs-dropdown-toggle:focus-visible,
#my-header .mfs-desktop-nav a:focus-visible,
#my-header .mfs-mobile-nav a:focus-visible { outline:2px solid #df0613 !important; outline-offset:2px; }

/* True overlay dropdowns; submenus no longer stretch the header or show bullets. */
#my-header .mfs-desktop-nav ul.sub-menu {
  display:block !important; visibility:hidden; opacity:0; pointer-events:none;
  position:absolute; left:0; top:100%; z-index:1010;
  width:max-content; min-width:275px; max-width:min(380px,90vw);
  background:#fff; padding:10px 0 !important; margin:0 !important;
  list-style:none !important; border-top:3px solid #df0613;
  border-radius:0 0 12px 12px;
  box-shadow:0 16px 38px rgba(25,20,20,.16);
  transition:opacity .14s ease,visibility .14s ease;
}
#my-header .mfs-desktop-nav ul.sub-menu li { display:block !important; list-style:none !important; }
#my-header .mfs-desktop-nav ul.sub-menu li::marker { content:""; }
#my-header .mfs-desktop-nav ul.sub-menu a {
  display:block; padding:12px 18px; font:500 14px/1.45 'Work Sans',sans-serif;
  white-space:normal; color:#312f30; text-decoration:none;
}
#my-header .mfs-desktop-nav ul.sub-menu a:hover,
#my-header .mfs-desktop-nav ul.sub-menu a:focus-visible { background:#fff0f1; color:#c60914; }
#my-header .mfs-desktop-nav li.menu-item-has-children:hover > ul.sub-menu,
#my-header .mfs-desktop-nav li.menu-item-has-children:focus-within > ul.sub-menu,
#my-header .mfs-desktop-nav li.menu-item-has-children.mfs-submenu-open > ul.sub-menu {
  visibility:visible; opacity:1; pointer-events:auto;
}
/* Rightmost submenus stay on screen. */
#my-header .mfs-desktop-nav > ul.menu > li:last-child > ul.sub-menu,
#my-header .mfs-desktop-nav > ul.menu > li:nth-last-child(2) > ul.sub-menu { left:auto; right:0; }
#my-header #mobile-main-nav { visibility:hidden; }
#my-header #responsive-menu-btn { display:none !important; }

/* Tablet and mobile: existing slide-out drawer + explicit submenu toggle buttons. */
@media (max-width:1100px) {
  #my-header { padding:14px 0 !important; }
  #my-header .columns.flex-inline { display:flex !important; align-items:center; gap:10px; }
  #my-header .col.logo { flex:0 0 auto; max-width:220px; }
  #my-header .col.logo img { width:100%; max-width:220px; height:auto; }
  #my-header .col.nav-menu { flex:1; min-width:0; }
  #my-header .col.nav-menu > .mfs-desktop-nav { display:none !important; }
  #my-header #responsive-menu-btn {
    display:block !important; position:relative; top:auto !important; right:auto !important;
    flex:0 0 42px; max-width:42px; height:42px; margin:0 0 0 auto;
    z-index:1031;
  }
  #my-header #mobile-main-nav {
    visibility:hidden; pointer-events:none; display:block !important; position:fixed;
    top:0; left:-110% !important; width:min(380px,90vw) !important;
    max-width:90vw; height:100dvh; z-index:1030;
    padding:68px 16px 24px; overflow-y:auto;
    background:#fff; box-shadow:0 10px 40px rgba(0,0,0,.18);
    transition:left .25s ease;
  }
  #my-header #mobile-main-nav.mobile-nav-show { left:0 !important; visibility:visible; pointer-events:auto; }
  #my-header #mobile-main-nav .mfs-mobile-nav { display:block !important; width:100%; }
  #my-header #mobile-main-nav .mfs-mobile-nav ul.menu {
    display:block !important; width:100%; padding:0 !important; margin:0 !important;
    list-style:none; gap:0;
  }
  #my-header #mobile-main-nav .mfs-mobile-nav li {
    display:flex; flex-wrap:wrap; align-items:center;
    list-style:none !important; margin:0; padding:0;
    border-bottom:1px solid #efeaea;
  }
  #my-header #mobile-main-nav .mfs-mobile-nav li::marker { content:""; }
  #my-header #mobile-main-nav .mfs-mobile-nav li > a {
    display:block; flex:1 1 0; min-width:0; padding:14px 9px !important;
    font:500 15px/1.4 'Work Sans',sans-serif;
    color:#312f30 !important; text-decoration:none;
  }
  #my-header #mobile-main-nav .mfs-mobile-nav .mfs-dropdown-toggle {
    flex:0 0 42px; min-width:42px; width:42px; height:42px;
  }
  html.mfs-nav-ready #my-header #mobile-main-nav .mfs-mobile-nav ul.sub-menu {
    display:none !important; flex:1 0 100%; width:100%;
    position:static; visibility:visible; opacity:1; pointer-events:auto;
    margin:0 !important; padding:0 0 10px 15px !important;
    background:#faf8f8; box-shadow:none; border:0; border-radius:0;
    list-style:none !important;
  }
  html.mfs-nav-ready #my-header #mobile-main-nav .mfs-mobile-nav li.mfs-submenu-open > ul.sub-menu { display:block !important; }
  #my-header #mobile-main-nav .mfs-mobile-nav ul.sub-menu li { border-bottom:0; }
  #my-header #mobile-main-nav .mfs-mobile-nav ul.sub-menu a { font-size:14px !important; padding:11px 9px !important; }
}
@media (max-width:480px) {
  #my-header .col.logo { max-width:190px; }
  #my-header .col.logo img { max-width:190px; }
}
@media (prefers-reduced-motion:reduce) {
  #my-header .mfs-desktop-nav ul.sub-menu,
  #my-header #mobile-main-nav { transition:none; }
}