/* ==========================================================================
   Accessible Navigation — icons do NOT swap
   ========================================================================== */

:root { --a11y-outline:#0a84ff; }


/* Make the logo link focusable and clearly outlined like other menu items */
.custom-logo-link { display: inline-block; }         /* so the outline wraps the image */
.custom-logo-link:focus-visible {
  outline: 2px solid #0a84ff;
  outline-offset: 3px;
  border-radius: 4px;                                /* optional, to match your style */
}

/* If your theme zeroes outlines globally, undo it for the logo link */
.custom-logo-link:focus { outline: 2px solid #0a84ff; outline-offset: 3px; }

/* Optional: remove the inline gap around the image so the ring looks tight */
.custom-logo { display: block; }                     /* WordPress gives <img class="custom-logo"> */

/* A11y visibility: [hidden] is the source of truth */
#primary-menu-list[hidden],
.primary-navigation ul.sub-menu[hidden]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Prevent legacy hover CSS from reopening hidden menus */
.primary-navigation li:hover > ul.sub-menu[hidden],
.primary-navigation li:focus-within > ul.sub-menu[hidden]{
  display:none !important;
}

/* JS class fallback (styling aid) */
.primary-navigation li.menu-item-has-children > ul.sub-menu{ display:none; }
.primary-navigation li.menu-item-has-children.is-open > ul.sub-menu{ display:block; }

/* Sibling fallback tied to aria-expanded (in case parent CSS loads after) */
.primary-navigation > .primary-menu-container ul > li
  .sub-menu-toggle[aria-expanded="false"] ~ ul{ display:none !important; }
.primary-navigation > .primary-menu-container ul > li
  .sub-menu-toggle[aria-expanded="true"]  ~ ul{ display:block !important; }

/* Toggle button (no icon swapping) */
.sub-menu-toggle{
  background:transparent;border:0;cursor:pointer;line-height:1;
  padding:3px 5px;margin-left:.25rem;
}
.primary-navigation > .primary-menu-container ul > li.is-open .sub-menu-toggle[aria-expanded="true"] ~ ul{
    opacity: 1;
    visibility: visible;
    height: auto;
    display: block !important;
}
.primary-navigation > .primary-menu-container ul > li.is-open .sub-menu-toggle[aria-expanded="true"] ~ ul a{
  display: block!important;
}
/* Keep icons stable: always show plus, never show minus */
.primary-navigation .sub-menu-toggle .d-none{ display:inline-block !important; } /* neutralize framework */
.primary-navigation .sub-menu-toggle .icon-plus  { display:none !important; }
.primary-navigation .sub-menu-toggle .icon-minus { display:none !important; }

/* Focus rings */
.primary-navigation a:focus-visible,
.primary-navigation .sub-menu-toggle:focus-visible,
#primary-menu-toggle:focus-visible{
  outline:2px solid var(--a11y-outline);
  outline-offset:3px;border-radius:4px;
}

/* Layout defaults (adjust to your theme) */
@media (min-width:1024px){
  #site-navigation { position:relative; }
  #primary-menu-list{ display:flex; align-items:center; gap:1rem; }
  .primary-navigation li.menu-item-has-children{ position:relative; }
  .primary-navigation ul.sub-menu{
    position:absolute; top:100%; left:0; z-index:1000;
    margin-top:.5rem; min-width:12rem; list-style:none;
  }
}
@media (max-width:1023px){
  #primary-menu-list{ display:block; padding:1rem 0; }
  .primary-navigation ul.sub-menu{
    position:static; margin:.25rem 0 0; padding-left:1rem;
  }
    #primary-menu-list[hidden], .primary-navigation ul.sub-menu[hidden] {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: none !important;
  }
}