/**
 * Fudo A11y Starter styles.
 *
 * Override the tokens in your theme, after this file:
 *   :root { --a11y-focus: #7a3cff; }
 * Recheck contrast when you change a color (see README).
 *
 * @author Fudo
 * @date 2026-09-24
 */

/* Tokens. Defaults pass WCAG AA on white. */
:root {
  --a11y-fg: #1a1a1a;          /* 17.4:1 on white. 1.4.3 */
  --a11y-bg: #ffffff;
  --a11y-muted: #595959;       /* 7.0:1 on white. Hints, secondary text. */
  --a11y-error: #b3261e;       /* 6.5:1 on white. */
  --a11y-focus: #005fcc;       /* 6.0:1 on white. Needs 3:1. 1.4.11 */
  --a11y-focus-width: 3px;
  --a11y-focus-offset: 2px;
  --a11y-target: 44px;         /* 2.5.5 AAA size. 2.2 AA (2.5.8) needs 24px. */
}

/* Hidden attribute always wins over theme display rules. */
[hidden] {
  display: none !important;
}

/* Focus. 2.4.7 Focus Visible, 2.4.11 Focus Not Obscured (2.2). */
:focus-visible {
  outline: var(--a11y-focus-width) solid var(--a11y-focus);
  outline-offset: var(--a11y-focus-offset);
}

/* Focused elements stay clear of a sticky header. Theme sets --a11y-sticky-offset. */
html {
  scroll-padding-top: var(--a11y-sticky-offset, 0px);
}

/* Main gets tabindex="-1" so the skip link can move focus there. No ring on it. */
#main:focus {
  outline: none;
}

/* Screen reader only text. Same as WordPress core. 1.3.1 */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

/* Skip link. Hidden until focused. 2.4.1 Bypass Blocks. */
.skip-link.screen-reader-text:focus {
  background: var(--a11y-bg);
  color: var(--a11y-fg);
  clip: auto;
  clip-path: none;
  display: block;
  font-size: 1rem;
  font-weight: 700;
  height: auto;
  left: 8px;
  line-height: normal;
  padding: 12px 20px;
  position: fixed !important;
  text-decoration: none;
  top: 8px;
  width: auto;
  z-index: 100000;
}

/* Menu buttons. 2.5.5 / 2.5.8 Target Size. */
.menu-toggle,
.submenu-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  justify-content: center;
  min-height: var(--a11y-target);
  min-width: var(--a11y-target);
}

.menu-toggle {
  gap: 0.5em;
  padding: 0 12px;
}

/* Hamburger icon next to the visible "Menu" text. */
.menu-toggle::before {
  border-bottom: 2px solid currentColor;
  border-top: 2px solid currentColor;
  box-shadow: inset 0 -7px 0 -5px currentColor;
  content: "";
  height: 14px;
  width: 18px;
}

.submenu-toggle {
  padding: 0;
}

/* Chevron. Points down when closed, up when open. */
.submenu-toggle::before {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  height: 0.5em;
  transform: translateY(-25%) rotate(45deg);
  transition: transform 0.2s ease;
  width: 0.5em;
}

.submenu-toggle[aria-expanded="true"]::before {
  transform: translateY(25%) rotate(-135deg);
}

/* Menu links reach the target size too. Theme can lower --a11y-target. */
.menu-item > a {
  align-items: center;
  display: inline-flex;
  min-height: var(--a11y-target);
}

/* No-JS fallback: buttons hidden, submenus open on hover and keyboard focus. */
html:not(.a11y-js) .menu-toggle,
html:not(.a11y-js) .submenu-toggle {
  display: none;
}

html:not(.a11y-js) .menu-item-has-children > .sub-menu {
  display: none;
}

html:not(.a11y-js) .menu-item-has-children:hover > .sub-menu,
html:not(.a11y-js) .menu-item-has-children:focus-within > .sub-menu {
  display: block;
}

/* Disclosure widget ([a11y_disclosure]). 4.1.2 Name, Role, Value. */
.a11y-disclosure__heading {
  font-size: inherit;
  margin: 0;
}

.a11y-disclosure__toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-weight: 700;
  gap: 0.75em;
  justify-content: space-between;
  min-height: var(--a11y-target);
  padding: 8px 0;
  text-align: left;
  width: 100%;
}

.a11y-disclosure__toggle::after {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  flex: none;
  height: 0.5em;
  transform: translateY(-25%) rotate(45deg);
  transition: transform 0.2s ease;
  width: 0.5em;
}

.a11y-disclosure__toggle[aria-expanded="true"]::after {
  transform: translateY(25%) rotate(-135deg);
}

html:not(.a11y-js) .a11y-disclosure__toggle::after {
  display: none;
}

/* External link marker ([a11y_link new_tab="1"]). The "/ ''" hides it from screen readers. */
.a11y-external::after {
  content: "\2197";
  content: "\2197" / "";
  margin-left: 0.2em;
}

/* Forms. 1.4.1 Use of Color, 3.3.1, 3.3.2. */
.a11y-required {
  color: var(--a11y-error);
}

.a11y-field-hint {
  color: var(--a11y-muted);
  font-size: 0.9em;
  margin: 0.25em 0;
}

.a11y-field-error {
  color: var(--a11y-error);
  margin: 0.25em 0;
}

[aria-invalid="true"] {
  border-color: var(--a11y-error) !important;
  box-shadow: 0 0 0 1px var(--a11y-error);
}

/* Accessibility statement ([a11y_statement]). */
.a11y-statement dt {
  font-weight: 700;
}

.a11y-statement dd {
  margin: 0 0 0.75em;
}

/* Reduced motion. 2.3.3 Animation from Interactions (AAA), 2.2.2 Pause, Stop, Hide. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Windows High Contrast / forced colors: keep focus and chevrons visible. */
@media (forced-colors: active) {
  :focus-visible {
    outline-color: Highlight;
  }

  .menu-toggle,
  .submenu-toggle,
  .a11y-disclosure__toggle {
    border: 1px solid ButtonText;
  }
}