/**
 * Slant accessibility styles
 *
 * Every accessibility-only style for the site lives in this one file so it can be
 * reviewed, relocated, or switched off in one place.
 *
 * Loaded by slant_enqueue_accessibility_styles() in functions.php (handle: slant-accessibility).
 * To disable everything here without deleting it, add to functions.php or a plugin:
 *     add_filter( 'slant_enable_accessibility_styles', '__return_false' );
 *
 * Rules for adding to this file:
 *  - Use :focus-visible only (keyboard focus). Never :focus or :active, so mouse and touch
 *    users never see these styles.
 *  - Do not change how anything looks for people who are not using a keyboard or assistive tech.
 *  - Keep each group commented with the pages/controls it covers.
 *
 * Contents
 *  1. Focus ring tokens
 *  2. Focus ring: inset variant (boxes, rows, cards, panels whose parents clip overflow)
 *  3. Focus ring: outset variant (links, buttons, form controls)
 *       3a. Header and navigation links
 *       3b. Registration fields
 *       3c. Dialog controls and the written-answer box
 *       3d. LearnDash buttons
 *  4. Phone form fields at 16px (companion to allowing zoom)
 *  5. No focus ring on text fields after a mouse or touch click
 *  6. Selected form fields get a 2px teal border
 *  10. Header cart count badge (darker teal behind white)
 *  11. Related-product prices on product pages (plum)
 */

/* ---------------------------------------------------------------------------
 * 1. Focus ring tokens
 * Two-tone ring (blue + white) so it stays visible on any background colour,
 * the same idea as the browser default ring.
 * ------------------------------------------------------------------------- */
:root {
    --slant-a11y-focus: #005fcc;
    --slant-a11y-focus-contrast: #ffffff;
    --slant-field-selected: #0db1c2; /* the theme's teal */
    --slant-banner-solid: #0b828e; /* replaces light green #8fc93a behind white text: 4.57:1 */
}

/* ---------------------------------------------------------------------------
 * 2. Focus ring: inset variant
 * Drawn inside the element's own edge because parent containers hide overflow
 * and would clip an outside ring.
 *   - My Uploads / assignment rows and the focusable course tab panels
 *   - WPBakery clickable column links (mega menu, resource cards)
 *   - Product image slider
 * ------------------------------------------------------------------------- */
body .ld-table-list-item-preview.js-toggle-modal:focus-visible,
body .ld-tab-content:focus-visible,
body a.column-link:focus-visible,
body .product-slider .slider:focus-visible {
    outline: 2px solid var(--slant-a11y-focus);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 4px var(--slant-a11y-focus-contrast);
}

/* ---------------------------------------------------------------------------
 * 3. Focus ring: outset variant
 * Drawn outside the element with a white gap, so it never covers text.
 * ------------------------------------------------------------------------- */

/* 3a. Header and navigation links
 *     Top bar (My Account / My Courses / Contact / Log Out), main menu and mega menu items,
 *     logo, mobile slide-out menu, and the mobile course-menu button. Salient's reset
 *     removes the outline on these. */
body #header-secondary-outer a:focus-visible,
body #header-outer a:focus-visible,
body #slide-out-widget-area a:focus-visible,
body .course-nav-toggle:focus-visible {
    outline: 2px solid var(--slant-a11y-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--slant-a11y-focus-contrast);
}

/* 3b. Registration fields
 *     The "Register Myself / on Behalf of Others" radios on group-purchase products.
 *     Gravity Forms fields are intentionally NOT listed: Gravity Forms already draws its own
 *     3px blue focus ring on every field and button. */
body .wdm_group_registration input[type="radio"]:focus-visible {
    outline: 2px solid var(--slant-a11y-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--slant-a11y-focus-contrast);
}

/* 3c. Dialog controls and the written-answer box
 *     Buttons, links and the comment box inside assignment/essay dialogs (e.g. "Submit Comment"),
 *     and the quiz essay textarea (keyboard only: with a mouse the quiz box keeps its original look),
 *     whose own focus cue is only a faint grey border. */
body .js-modal :is(input[type="submit"], button, textarea, a[href]):focus-visible,
html:not(.slant-pointer-focus) body .wpProQuiz_questionEssay:focus-visible {
    outline: 2px solid var(--slant-a11y-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--slant-a11y-focus-contrast);
}

/* 3d. LearnDash buttons
 *     "Mark as Complete / Next" and the quiz buttons. style.css removes their outline with
 *     long, highly specific :focus-visible selectors (Mark Complete ~line 1242, quiz buttons
 *     ~lines 3631-3633), so !important is needed here to restore a visible keyboard ring. */
body .learndash_mark_complete_button:focus-visible,
body .wpProQuiz_button:focus-visible,
body .wpProQuiz_button2:focus-visible,
body .ld-quiz-actions input[name="restartQuiz"]:focus-visible {
    outline: 2px solid var(--slant-a11y-focus) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px var(--slant-a11y-focus-contrast) !important;
}

/* ---------------------------------------------------------------------------
 * 4. Phone form fields at 16px (companion to allowing zoom)
 * The viewport tag used to block zoom (header.php), which also stopped iPhone Safari from zooming in
 * on a text field when you tap it. With zoom allowed, Safari zooms in on any field smaller than 16px
 * and leaves the page zoomed. Making phone form text 16px avoids that. Phones only (up to 767px);
 * desktop and tablet are unchanged.
 *   - Contact page and other Gravity Forms
 *   - Quiz answers (essay box, written-answer field)
 *   - Comment box in assignment/essay dialogs
 *   - Shop sort dropdown and the member sign-in email box
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    body .gform_wrapper :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"], [type="image"], [type="file"]), select, textarea),
    body .wpProQuiz_content :is(textarea, input[type="text"], input[type="email"], input[type="number"]),
    body .js-modal textarea,
    body .woocommerce-ordering select,
    body form.magicloginform input[type="text"],
    body form.magicloginform input[type="email"] {
        font-size: 16px;
    }
}

/* ---------------------------------------------------------------------------
 * 5. No focus ring on text fields after a mouse or touch click
 * Browsers show the focus ring on text fields even when you click them (Gravity Forms also draws its
 * own 3px ring). js/script.js adds `slant-pointer-focus` to <html> after a mouse/touch press and removes
 * it when Tab is pressed, so the ring only shows for keyboard users. Only the ring (outline) is removed:
 * other focus styling the theme gives mouse users (such as the soft glow on selects) is left alone.
 * ------------------------------------------------------------------------- */
html.slant-pointer-focus :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="image"], [type="file"], [type="range"], [type="color"]), textarea, select):is(:focus, :focus-visible) {
    outline: none !important;
}

/* ---------------------------------------------------------------------------
 * 6. Selected form fields get a 2px teal border
 * The selected state for text boxes, message boxes and dropdowns, for mouse and keyboard alike (the
 * keyboard focus ring from section 3 / the form plugin still shows when you Tab). Drawn as a 2px edge
 * (a shadow, so it works with or without an existing border and moves nothing). Quiz fields are left
 * exactly as they were.
 * Covers Gravity Forms (contact page), WooCommerce forms, the group-name field, the dialog comment box,
 * and the member sign-in box.
 * ------------------------------------------------------------------------- */
body :is(.gform_wrapper, .woocommerce form, .ldgr_group_name, .wdm_group_registration, .js-modal, form.magicloginform)
    :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="image"], [type="file"], [type="range"], [type="color"], [type="hidden"]), textarea):focus:not(.wpProQuiz_content *) {
    box-shadow: 0 0 0 2px var(--slant-field-selected) !important;
}

/* Dropdowns keep the theme's soft glow underneath the teal border. */
body :is(.gform_wrapper, .woocommerce form, .ldgr_group_name, .wdm_group_registration, .js-modal, form.magicloginform, .woocommerce-ordering)
    select:focus:not(.wpProQuiz_content *) {
    box-shadow: 0 0 0 2px var(--slant-field-selected), 0 0 10px rgba(0, 0, 0, 0.11) !important;
}


/* ---------------------------------------------------------------------------
 * 7. Large bold white text on coral (#ee6055)
 * White on #ee6055 is 3.26:1. That passes WCAG's 3:1 rule for LARGE text, which means at least 14pt bold
 * (18.67px, weight 700). The coral and the white stay exactly as designed; text on coral is raised to that
 * size and weight instead. js/script.js adds `slant-on-coral` to every text element whose real background is
 * coral (buttons, notices, status pills, plugin buttons, anything added later) and lifts any size under
 * 18.67px to 18.67px; this rule sets the white and the bold weight. The prefix with unused ids raises
 * specificity above the theme's id-based color rules without editing them.
 * ------------------------------------------------------------------------- */
html:is(#slant-a11y-1, :root):is(#slant-a11y-2, :root):is(#slant-a11y-3, :root) body .slant-on-coral {
    color: #fff !important;
    font-weight: 700 !important;
}
/* ---------------------------------------------------------------------------
 * 7b. Coral text on plum
 * Coral (#ee6055) text on the brand plums (#54114a, #4d1647) is 4.1:1. Anywhere coral text sits on a plum
 * button or background it is drawn as the lighter coral #f58077 (5.3:1). js/script.js adds
 * `slant-coral-on-plum` to every such element (including ones added later), so new content is covered.
 * ------------------------------------------------------------------------- */
html:is(#slant-a11y-1, :root):is(#slant-a11y-2, :root):is(#slant-a11y-3, :root) body .slant-coral-on-plum {
    color: #f58077 !important;
}

/* ---------------------------------------------------------------------------
 * 7c. Three more contrast fixes (js/script.js adds the classes by checking the real colors, so they cover
 * every page and anything added later)
 *   slant-coral-on-light  small (under 17px) coral (#ee6055) text on white/light grey (3.26:1) -> #c23126 (5.58:1 on white).
 *   slant-coral-large     heading-sized (17px+) coral text on WHITE keeps its color and is raised to 18.67px
 *                         bold (large text passes at 3:1). On light grey coral is under 3:1, so it gets the dark coral. Coral text already 24px+, or 18.66px+ bold, is left alone.
 *   slant-plum-on-lilac   plum text on the Success Stories tags (#b486af, 4.47:1) -> #450e3c (5.05:1)
 *   slant-bg-lilac        purple #a8729f behind white text (3.76:1) -> #9e6294 (4.52:1)
 * ------------------------------------------------------------------------- */
html:is(#slant-a11y-1, :root):is(#slant-a11y-2, :root):is(#slant-a11y-3, :root) body .slant-coral-on-light {
    color: #c23126 !important;
}

/* Post tag chips: dark coral text at rest (above), white text on the hover state (style.css gives the hover its
   dark coral background). Without this the rule above would keep the dark text on the dark chip. */
html:is(#slant-a11y-1, :root):is(#slant-a11y-2, :root):is(#slant-a11y-3, :root) body.single-post .slant-single-post-tags-outside a:hover {
    color: #fff !important;
}

html:is(#slant-a11y-1, :root):is(#slant-a11y-2, :root):is(#slant-a11y-3, :root) body .slant-coral-large {
    font-weight: 700 !important;
}

html:is(#slant-a11y-1, :root):is(#slant-a11y-2, :root):is(#slant-a11y-3, :root) body .slant-plum-on-lilac {
    color: #450e3c !important;
}

html:is(#slant-a11y-1, :root):is(#slant-a11y-2, :root):is(#slant-a11y-3, :root) body .slant-bg-lilac {
    background-color: #9e6294 !important;
}

/* ---------------------------------------------------------------------------
 * 8. Light green (#8fc93a) backgrounds behind white text, redrawn as a darker teal
 * White on #8fc93a is 1.98:1. Anywhere WPBakery paints that exact green behind content (row, column or
 * block background colors are saved as inline styles), it is drawn as the darker --slant-banner-solid
 * (4.57:1 with white) instead. Matches by the saved color, so it also covers pages not edited here.
 * ------------------------------------------------------------------------- */
html:is(#slant-a11y-1, :root):is(#slant-a11y-2, :root) body :is([style*="--row-bg-color: #8fc93a" i], [style*="background-color: #8fc93a" i], [style*="background-color:#8fc93a" i], [style*="background: #8fc93a" i], [style*="background:#8fc93a" i]) {
    --row-bg-color: var(--slant-banner-solid);
    background-color: var(--slant-banner-solid) !important;
}

/* ---------------------------------------------------------------------------
 * 9. Contact form "State" dropdown label
 * style.css hides this sub-label with `display: none !important`, which also removes it for screen readers
 * (the dropdown then has no name). Same look for everyone else: it is moved off-screen instead of removed.
 * ------------------------------------------------------------------------- */
#input_1_7_4_label {
    display: block !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---------------------------------------------------------------------------
 * 10. Header cart count badge
 * White on the badge's teal #51adbf is 2.6:1. The darker site teal (--slant-banner-solid, 4.57:1 with white)
 * is used instead. style.css sets the teal with !important, so this carries the same weight plus the id prefix.
 * ------------------------------------------------------------------------- */
html:is(#slant-a11y-1, :root):is(#slant-a11y-2, :root) body #header-outer a.cart-contents .cart-icon-wrap .cart-wrap span {
    background-color: var(--slant-banner-solid) !important;
}

/* ---------------------------------------------------------------------------
 * 11. Prices in the "related products" tiles on single product pages
 * Coral #ee6055 on the light grey page is 2.91:1. These prices use the brand plum #54114a (about 12:1).
 * ------------------------------------------------------------------------- */
html:is(#slant-a11y-1, :root):is(#slant-a11y-2, :root) body.single-product ul.products li.product .price,
html:is(#slant-a11y-1, :root):is(#slant-a11y-2, :root) body.single-product ul.products li.product .price .woocommerce-Price-amount,
html:is(#slant-a11y-1, :root):is(#slant-a11y-2, :root) body.single-product ul.products li.product .price .woocommerce-Price-currencySymbol {
    color: #54114a !important;
}

/* ---------------------------------------------------------------------------
 * 12. Buttons that were coral (#ee6055) are dark plum with white text
 * js/script.js adds `slant-button-plum` to a button whose background is the brand coral. White on coral is
 * only 3.26:1, and the old fix (bigger, bolder text) made buttons grow. Plum #54114a with white is about
 * 12:1 at the button's own original size. `slant-button-plum-edge` adds a white inset edge (a shadow, so no
 * size change) when the button sits on a plum or mid-tone band where plum alone would blend in.
 * ------------------------------------------------------------------------- */
html:is(#slant-a11y-1, :root):is(#slant-a11y-2, :root):is(#slant-a11y-3, :root) body .slant-button-plum {
    background-color: #54114a !important;
    border-color: #54114a !important;
    color: #fff !important;
}

html:is(#slant-a11y-1, :root):is(#slant-a11y-2, :root):is(#slant-a11y-3, :root) body .slant-button-plum :is(span, i, svg, strong, b) {
    color: #fff !important;
}

html:is(#slant-a11y-1, :root):is(#slant-a11y-2, :root):is(#slant-a11y-3, :root) body .slant-button-plum:is(:hover, :focus-visible) {
    background-color: #3a0c33 !important;
    border-color: #3a0c33 !important;
}

html:is(#slant-a11y-1, :root):is(#slant-a11y-2, :root):is(#slant-a11y-3, :root) body .slant-button-plum.slant-button-plum-edge {
    box-shadow: inset 0 0 0 2px #fff !important;
}

/* ---------------------------------------------------------------------------
 * 13. Large coral text on the light grey page
 * Brand coral #ee6055 on the page grey #f2f2f2 is 2.91:1, a hair under the 3:1 that large text needs
 * (on white it is 3.26:1 and passes). js/script.js adds `slant-coral-large-grey` to large coral text on grey;
 * it is drawn as #ea5b4f (3.07:1), visually the same coral. Coral text 44px or larger on ANY light background
 * (white too) gets it, so headline coral is one color; coral on dark plum is #f58077 (section 7b, any size).
 * ------------------------------------------------------------------------- */
html:is(#slant-a11y-1, :root):is(#slant-a11y-2, :root):is(#slant-a11y-3, :root) body .slant-coral-large-grey {
    color: #ea5b4f !important;
}