/* ==========================================================
   ViaBill / DiviFlash accessible keyboard dropdown
   Two-tone focus indicator: works on ANY header background
   ========================================================== */


/* ----------------------------------------------------------
   0. Design tokens — change the indicator in ONE place
   ---------------------------------------------------------- */

:root {
    --focus-inner: #ffffff;   /* band adjacent to the item      */
    --focus-outer: #6338ff;   /* brand purple, outermost band   */
    --focus-band:  2px;       /* thickness of EACH band         */
    --focus-radius: 7px;
}

/*
 * Two-tone ring, drawn OUTSIDE the element:
 *   inner 2px white  +  outer 2px purple.
 *
 * White vs #6338FF = 5.9:1, so the two bands always contrast
 * with each other; whichever band matches the page background,
 * the other one stays visible (WCAG 1.4.11 / 2.4.13).
 *
 * The transparent outline is NOT decoration: in Windows High
 * Contrast / forced-colors mode box-shadows are removed, and
 * the browser repaints transparent outlines in the system
 * highlight color — so keyboard users still get an indicator.
 */


/* ----------------------------------------------------------
   1. Layout guards — never clip the focus ring
   ---------------------------------------------------------- */

#menu-top-menu-utm > li {
    position: relative !important;
    overflow: visible !important;
}

.df-menu-wrap,
.df-menu-nav,
.df-normal-menu-wrap {
    overflow: visible !important;
}

/* Breathing room so the 4px total ring doesn't collide
   with neighbouring items or the header edge */
#menu-top-menu-utm > li > a {
    padding: 4px 8px !important;
    border-radius: var(--focus-radius) !important;
}


/* ----------------------------------------------------------
   2. THE focus indicator (single source of truth)
      - top-level item focused via keyboard
      - dropdown parent while its submenu is open
   ---------------------------------------------------------- */

#menu-top-menu-utm > li > a:focus-visible,
#menu-top-menu-utm > li.menu-item-has-children:focus-within > a,
#menu-top-menu-utm > li.menu-item-has-children.a11y-menu-open > a {

    /* forced-colors fallback (visible ONLY in high-contrast mode) */
    outline: 3px solid transparent !important;
    outline-offset: 2px !important;

    box-shadow:
        0 0 0 var(--focus-band) var(--focus-inner),
        0 0 0 calc(var(--focus-band) * 2) var(--focus-outer) !important;

    border-radius: var(--focus-radius) !important;

    position: relative !important;
    z-index: 100001 !important;
}


/* ----------------------------------------------------------
   3. Force keyboard-open submenu into real dropdown position
   ---------------------------------------------------------- */

#menu-top-menu-utm
> li.menu-item-has-children.a11y-menu-open
> ul.sub-menu,

#menu-top-menu-utm
> li.menu-item-has-children:focus-within
> ul.sub-menu {

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;

    transform: none !important;

    height: auto !important;
    max-height: none !important;

    overflow: visible !important;

    flex-direction: column !important;

    z-index: 99999 !important;
}


/* ----------------------------------------------------------
   4. Submenu items behave as a vertical list
   ---------------------------------------------------------- */

#menu-top-menu-utm
> li.menu-item-has-children
> ul.sub-menu
> li {
    display: block !important;
    float: none !important;
    position: relative !important;
    width: 100% !important;
}

#menu-top-menu-utm
> li.menu-item-has-children
> ul.sub-menu
> li
> a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}


/* ----------------------------------------------------------
   5. Focused submenu child — same two-tone idea, inset so it
      isn't clipped by the dropdown panel. Purple sits at the
      edge (contrasts with the light panel), white inside it
      (contrasts if a theme ever gives the panel a dark bg).
   ---------------------------------------------------------- */

#menu-top-menu-utm
> li.menu-item-has-children
> ul.sub-menu
> li
> a:focus-visible {

    outline: 3px solid transparent !important;
    outline-offset: -3px !important;

    box-shadow:
        inset 0 0 0 var(--focus-band) var(--focus-outer),
        inset 0 0 0 calc(var(--focus-band) * 2) var(--focus-inner) !important;

    border-radius: var(--focus-radius) !important;
}


/* ----------------------------------------------------------
   6. Reduced motion
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    #menu-top-menu-utm *,
    #menu-top-menu-utm *::before,
    #menu-top-menu-utm *::after {
        transition: none !important;
        animation: none !important;
    }
}