/* Accessibility fixes for the mirrored WordPress header and footer (WCAG 2.1 AA).
 *
 * Added 06.09.2026. Voluntary quality work; the BFSG does not apply to JABA
 * (§ 1 Abs. 3 BFSG, see docs/BARRIEREFREIHEIT.md).
 *
 * This is deliberately a SEPARATE file. wp-style-neu.css, wp-apccss.css,
 * custom.css and custom-mobile-nav.css are copied over from the WordPress
 * theme whenever the site changes, so anything written into them is lost on
 * the next transfer. This file is owned by the Kundenlogin and is loaded
 * after them, which is the same role the WordPress child theme plays there.
 *
 * Focus colours follow the existing convention of customer-area.css:
 * 2px outline, 2px offset, #31679e on light ground and #ffffff on dark.
 * The brand colour #4382c3 stays untouched; it only reaches 4.0:1 on white
 * and is therefore unusable for text or focus rings.
 *
 * Measured grounds (06.09.2026): #masthead and the top level of
 * #site-navigation are white; the desktop dropdown, #mobile-nav and
 * #middle-footer are #4382c3; #bottom-footer is black.
 *
 * Corrected 20.09.2026: the desktop dropdown is white since the navigation
 * was taken over anew (wp-navigation.css). Its entry moved out of the
 * white-outline group below, where it would have drawn white on white.
 *
 * Later the same day the website moved the navigation's accent onto the
 * brand colour, so #4382c3 now does draw a focus ring there -- 3px, and the
 * ring is wp-navigation.css's, not this file's. That is not a contradiction
 * of the paragraph above: 4.0:1 fails the 4.5:1 that text needs and passes
 * the 3:1 that SC 1.4.11 asks of a focus indicator. What it does not carry
 * is the 14px "Alle Produkte ansehen" at the foot of the dropdown, which is
 * text in the same colour on white. It is left as the website has it --
 * rule 1 in CLAUDE.md puts the chrome on the website's own styles, and
 * repainting it here would make the Kundenlogin the odd one out on exactly
 * the element that was just brought into line.
 */

/* --- 1. Desktop submenus must open on keyboard focus, not only on hover.
       Mirrors .main-navigation li:hover ul (wp-style-neu.css:392).

       Since 20.09.2026 wp-navigation.css does this itself, with heavier
       selectors that win. The two rules stay as the floor: if the mirrored
       navigation is ever rolled back, the keyboard must not lose the
       submenus with it. --- */

.main-navigation li:focus-within > ul {
    opacity: 1;
    visibility: visible;
    top: 160%;
}

/* Third level, mirroring .main-navigation ul ul li:hover ul (wp-style-neu.css:436). */
.main-navigation ul ul li:focus-within > ul {
    visibility: visible;
    left: 100%;
    opacity: 1;
}

/* --- 2. Restore the keyboard focus indicator that the mirrored stylesheets
       switch off globally (wp-style-neu.css:64/69/347, wp-apccss.css:9,
       custom.css:526, custom-mobile-nav.css:70).
       :focus-visible keeps it off for plain mouse clicks, which was the
       original reason for disabling it. --- */

#masthead a:focus-visible,
#masthead button:focus-visible,
#colophon a:focus-visible,
#colophon button:focus-visible,
#mobile-nav a:focus-visible,
#mobile-nav button:focus-visible {
    outline: 2px solid #31679e;
    outline-offset: 2px;
}

/* Dark grounds: the mobile menu and both dark footers. The desktop dropdown
   used to belong here and does not any more — it is white now, and its own
   focus ring comes from wp-navigation.css. */
#mobile-nav a:focus-visible,
#mobile-nav button:focus-visible,
#middle-footer a:focus-visible,
#bottom-footer a:focus-visible,
#bottom-footer button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* The hamburger sits on #4382c3 (wp-style-neu.css:1970). */
#top .nav-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* --- 3. The submenu toggle in the mobile menu is a real <button> next to the
       link now, so "Produkte" stays a link and keeps leading to /produkte/. --- */

#mobile-nav .untermenue-schalter {
    float: right;
    width: 44px;
    height: 44px;
    margin: -10px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #ffffff;
    font: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

/* The caret turns to point down once the submenu is open. */
#mobile-nav .untermenue-schalter::before {
    content: "\203A";
    display: inline-block;
    transition: transform 0.2s ease;
}

#mobile-nav li.open > .untermenue-schalter::before {
    transform: rotate(90deg);
}