/* ============================================================
 * Accessibility (WCAG 2.1 AA) overrides.
 *
 * This file is enqueued LAST (after the theme stylesheet, Bootstrap and
 * ws-actions.css) so these rules win by load order, with selector specificity
 * where a rule must beat an !important utility. It lives in its own enqueued
 * file because assets/styles/css/styles.css is NOT enqueued by the theme.
 * ============================================================ */

/* 2.4.7 Focus Visible — a visible keyboard focus ring (the theme provides none
 * and removes outlines in several places). Element-level :focus-visible
 * selectors so this beats single-class outline resets. Ring #0b5d4a clears 3:1
 * (1.4.11) on white and on the mint brand. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid #0b5d4a !important;
    outline-offset: 2px !important;
}

/* 1.4.3 Contrast — the worksheet action buttons (Save / Assign / Practice
 * Digitally, etc.) render white text on a mint/teal background (~1.45:1). The
 * teal is set either by a utility class OR an inline background-color, so cover
 * both. Scoped to elements that are BOTH green-bg AND .text-white, so plain
 * green backgrounds and legitimate white-on-dark text are untouched. */
.bg-green.text-white,
.bg-green-light.text-white,
.bg-green-dark.text-white,
[style*="background-color:#29f1c3"].text-white,
[style*="background-color: #29f1c3"].text-white,
[style*="background-color:#27f1c2"].text-white,
[style*="background-color: #27f1c2"].text-white {
    color: #07261f !important;
}

/* 1.4.1 Use of Color — underline links inside prose so they aren't distinguished
 * from body text by color alone. */
.ws-seo a,
.entry-content a {
    text-decoration: underline !important;
}

/* 2.4.1 Bypass Blocks — skip link. Hidden off-screen until focused, then it
 * slides into the top-left so keyboard users can jump past the nav to #main.
 * !important + class specificity beat the theme's global a{} reset. */
.lw-skip-link {
    position: absolute !important;
    left: -9999px;
    top: 0;
    z-index: 100000;
    display: inline-block !important;
    padding: 12px 20px;
    background: #ffffff !important;
    color: #0b5d4a !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    border: 2px solid #0b5d4a;
    border-radius: 0 0 8px 0;
}
.lw-skip-link:focus {
    left: 0 !important;
    outline: 3px solid #0b5d4a !important;
    outline-offset: 0;
}

/* 1.4.3 Contrast — the theme's gray/mint TEXT utilities fail on white. Their
 * values live in header.php's inline <style> (loaded after this file), so these
 * overrides use a `body` prefix to win on specificity rather than load order. */
body .text-gray,
body .text-gray4,
body .text-gray5 {
    color: #6c757d !important; /* were #828282 / #BDBDBD / #ADADAD (3.84 / 1.88 / 2.24:1) */
}
body .text-green,
body .text-green2 {
    color: #0f7c63 !important; /* were #51e5d3 / #29f1c3 (1.56 / 1.45:1) */
}

/* 1.4.3 — input placeholder text (was #828282, 3.84:1). */
body input::placeholder,
body textarea::placeholder {
    color: #6c757d !important;
}

/* 1.4.11 Non-text Contrast — input underline / textarea border (was #e0e0e0,
 * 1.27:1) need >= 3:1 as the field's only visible boundary. */
body .inputText {
    border-bottom-color: #767f88 !important;
}
body textarea {
    border-color: #767f88 !important;
}

/* ============================================================
 * Left sidebar page nav — show sub-pages expanded under their heading.
 * The menu (wp_nav_menu 'menu-1', Bootstrap navwalker) renders a parent that
 * has children as a hover dropdown; in the vertical sidebar we want the child
 * pages always visible, indented beneath the heading (Home / Reading / Math).
 * Scoped to the sidebar via .menu.z-depth-3, so it's inert for a flat menu.
 * ============================================================ */
.menu.z-depth-3 .dropdown-menu {
    display: block !important;
    position: static !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0.4rem 0 1.2rem !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    list-style: none !important;
}
/* Top-level items (Home / Reading / Math) read as headings. */
.menu.z-depth-3 > li > a {
    font-weight: 900 !important;
    font-size: 17px !important;
    color: #000 !important;
}
/* No dropdown caret on the headings — they're plain links to their hub pages.
 * Not keyed to a.dropdown-toggle: the menu items carry custom link classes. */
.menu.z-depth-3 .caret,
.menu.z-depth-3 > li > a::after { display: none !important; }
/* Child page links — indented under the heading, lighter weight. */
.menu.z-depth-3 .dropdown-menu > li { margin: 0 0 0.55rem !important; }
.menu.z-depth-3 .dropdown-menu > li:last-child { margin-bottom: 0 !important; }
.menu.z-depth-3 .dropdown-menu > li > a {
    display: block;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #2b2b2b !important;
    padding: 2px 0 2px 0.9rem !important;
    border-left: 2px solid #d9dee4;
}
.menu.z-depth-3 .dropdown-menu > li > a:hover,
.menu.z-depth-3 .dropdown-menu > li > a:focus {
    color: #0f5b49 !important;
    border-left-color: #29c7a0;
}
/* Third level — a group inside a section (e.g. Math → By Grade → Kindergarten).
 * The group's own link renders as a small uppercase label (its href is "#",
 * so clicks are disabled), and its pages indent one more step along the rail. */
.menu.z-depth-3 .dropdown-menu > li.menu-item-has-children > a {
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #6c757d !important;
    pointer-events: none;
    cursor: default;
}
.menu.z-depth-3 .dropdown-menu .dropdown-menu {
    margin: 0.35rem 0 1rem !important;
}
.menu.z-depth-3 .dropdown-menu .dropdown-menu > li { margin: 0 0 0.4rem !important; }
.menu.z-depth-3 .dropdown-menu .dropdown-menu > li > a {
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none;
    letter-spacing: 0;
    color: #2b2b2b !important;
    padding: 2px 0 2px 1.7rem !important;
    pointer-events: auto;
    cursor: pointer;
}

/* Nested groups everywhere else (top navbar, mobile overlay): Bootstrap has no
 * nested-dropdown support, so a third menu level would be invisible inside an
 * open dropdown. Force it to show inline, indented under its group label. */
.dropdown-menu .dropdown-menu {
    display: block !important;
    position: static !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0.2rem 0 0.4rem 1rem !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    list-style: none !important;
}
.menuMobile .dropdown-menu > li.menu-item-has-children > a {
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6c757d !important;
    pointer-events: none;
}
.menuMobile .dropdown-menu .dropdown-menu > li > a {
    text-transform: none;
    letter-spacing: 0;
    pointer-events: auto;
}
/* A grouping label that links nowhere shouldn't act like a link (top navbar
 * and anywhere else the menus render). */
.dropdown-menu > li.menu-item-has-children > a[href="#"] { pointer-events: none; cursor: default; }

/* ============================================================
 * Mobile menu overlay (.menuMobile inside .white-place) — same idea as the
 * sidebar above. The hamburger overlay rendered Reading / Math as Bootstrap
 * dropdowns; tapping one on a touch device inserted a full-screen
 * .dropdown-backdrop over the white overlay (and toggled an absolutely
 * positioned submenu), so the overlay looked like a blank page. Force the
 * section's pages to show expanded inline and neutralize the dropdown so a tap
 * on the heading does nothing destructive — the child links are right there.
 * ============================================================ */
.menuMobile .dropdown-menu {
    display: block !important;
    position: static !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0.4rem 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    list-style: none !important;
}
.menuMobile .dropdown-menu > li { margin: 0.9rem 0 !important; }
.menuMobile .dropdown-menu > li > a { font-weight: 600 !important; font-size: 16px !important; }
.menuMobile .caret,
.menuMobile > li > a::after { display: none !important; }

/* Bootstrap inserts this full-screen, fixed-position backdrop on touch when a
 * dropdown opens (to catch the next outside tap). With the menu dropdowns
 * forced open we never need it, and it was covering the mobile menu overlay. */
.dropdown-backdrop { display: none !important; }