/* =============================================================
   spartan-traxx-child — live-site CSS overrides

   Loaded by spartan_traxx_child_enqueue() AFTER the parent's last
   stylesheet, so cascade wins here without !important gymnastics.

   Sections:
     1. Mobile a11y-widget hoist  --  keep the Equalize Digital
        Accessibility Checker highlight panel (editors only) from
        covering the site-footer ribbon once the visitor scrolls to the
        bottom on a narrow viewport. The AudioEye CTA used to be lifted
        the same way; since 2026-09 it stays at its bottom-left anchor
        and the parent footer.css reserves a left gutter on the ribbon
        instead (see `.site-footer__ribbon-inner` under 900px), so the
        badge sits beside the copyright / Accessibility Statement text
        rather than on top of it -- or on top of the "Open Map" pill
        when the lift overshot.
     2. AudioEye consent toolbar  --  style the "Manage Consent
        Preferences" link (AudioEye Aegis `<cmp-toolbar>` shadow host)
        like the other Legal-menu links once overrides.js has moved it
        into `.site-footer__legal ul`; centre it on phones if the JS
        never ran and it is still a stray row under the footer.

   Pair this file with assets/js/overrides.js -- the JS writes the
   --spartan-a11y-lift custom property on <html> based on how much of
   the footer ribbon is currently in the viewport.
   ============================================================= */

/* ---------- 1. Mobile a11y-widget hoist ---------- */

/*
 * The Equalize Digital Accessibility Checker panel (`.edac-highlight-
 * panel`, plugins/accessibility-checker, logged-in editors only)
 * anchors itself to the bottom of the viewport with position: fixed.
 * On phones it collides with `.site-footer__ribbon-inner` (copyright +
 * the Accessibility Statement entry in the utility menu) the moment the
 * ribbon scrolls into view.
 *
 * The companion overrides.js measures how much of the ribbon is
 * currently visible and writes that number to --spartan-a11y-lift on
 * <html>. The transform below shifts the panel upward by that amount
 * so the ribbon stays readable. When the ribbon is off-screen the JS
 * clears the property and the transform resolves to translateY(0).
 *
 * Scoped to (max-width: 899px) to match the mobile breakpoint used by
 * the parent theme's footer.css. transform is used (not `bottom`) so
 * we do not have to guess the plugin's anchor value or fight its own
 * !important rules.
 */
@media (max-width: 899px) {
  .edac-highlight-panel {
    transform: translateY(calc(-1 * var(--spartan-a11y-lift, 0px))) !important;
    transition: transform 180ms ease-out;
  }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .edac-highlight-panel {
    transition: none;
  }
}

/* ---------- 2. AudioEye consent toolbar ---------- */

/*
 * AudioEye's Aegis consent manager (aegis.audioeye.com/assets/index.js,
 * loaded by aem.js) appends a `<cmp-toolbar>` custom element after the
 * footer. Everything visible -- `<div id="CMP_toolbar">` with a bare
 * `<a href="#">Manage Consent Preferences</a>` as its direct child --
 * lives inside that element's *shadow root*, so page CSS cannot select
 * `#CMP_toolbar` or the link at all. What does cross the boundary is
 * inheritance, and Aegis's own shadow stylesheet leans on it:
 * `:host a { color: inherit; text-decoration-line: inherit;
 * font-size: inherit }`. So everything below is set on the light-DOM
 * host and flows down to the link.
 *
 * 2a. Hoisted (normal case). overrides.js moves the host into the
 *     footer Legal menu as `li.site-footer__legal-consent > cmp-toolbar`
 *     so it sits beside "Accessibility Statement" instead of forming a
 *     row of its own under the ribbon. Mirror `.site-footer__legal a`
 *     from the parent footer.css: muted ink at rest (#464646 on cream
 *     8.0:1), slate-2 + underline on hover / keyboard focus.
 *
 *     State comes from the classes overrides.js toggles on the host
 *     (`.is-hover`, `.is-focus-visible`), not from :hover /
 *     :focus-within: the consent dialog (#aegis_tb, fixed) renders in
 *     the same shadow root, so host pseudo-classes would also fire
 *     while the visitor is inside the dialog. A shadow host does not
 *     match :focus-visible for a focused shadow descendant in Chromium,
 *     so the parent's global `:focus-visible` ring never reaches it --
 *     the ring is re-declared here (2.5px slate, 6.38:1 on cream; the
 *     ribbon remaps --focus-ring-dark to --link). The link keeps the
 *     UA default ring inside the shadow root as well; that is a
 *     doubling, not a suppression, so WCAG 2.4.7 still holds when JS
 *     has not run.
 */
.site-footer__legal-consent cmp-toolbar {
  display: inline;
  color: var(--ink-muted);
  text-decoration-line: none;
}

.site-footer__legal-consent cmp-toolbar.is-hover,
.site-footer__legal-consent cmp-toolbar.is-focus-visible {
  color: var(--slate-blue-2);
  text-decoration-line: underline;
  text-underline-offset: 3px;
}

.site-footer__legal-consent cmp-toolbar.is-focus-visible {
  outline: 2.5px solid var(--focus-ring-dark);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/*
 * 2b. Fallback (JS disabled / failed). The host is still a direct
 *     child of <body> after </footer>. Below 900px make it a centred
 *     full-width block so it reads as part of the centred ribbon stack
 *     and clears the AudioEye CTA badge (24px + 44px, bottom-left); the
 *     inline padding keeps the link off the badge on very narrow phones
 *     where centring alone might not.
 */
@media (max-width: 899px) {
  body > cmp-toolbar {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding-inline: 72px;
    text-align: center;
  }
}