/* Drivetrain Accessibility Modal — full-height, cookie-consent-style, theme colors inherited */
:root {
  --font-a11y: system-ui;
  --cc-muted-fg: color-mix(in srgb, currentColor 65%, transparent);
  --cc-muted-border: color-mix(in srgb, currentColor 45%, transparent);
  --a11y-focus-ring-color: var(--outline-color, currentColor);
  --a11y-focus-ring-width: var(--outline-size, 3px);
  --a11y-focus-ring-offset: var(--outline-offset, 4px);
  --a11y-readable-width: 70ch;
  --a11y-target-size: 44px;
  --a11y-text-scale: 1;
}

/* ===== Container & Panel ===== */
#a11yModal[hidden],
#a11yModal[aria-hidden="true"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.a11y {
  position: fixed;
  inset: 0;
  z-index: 99999999999;
  display: block;
}

.a11y * {
  font-family: var(--font-a11y);
}

.a11y.a11y--hidden {
  display: none !important;
}

.a11y.a11y--opening .a11y__panel {
  animation: dt-slide-in-left 250ms ease both;
}

.a11y.a11y--closing .a11y__panel {
  animation: dt-slide-out-left 250ms ease both;
}

.a11y__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 11px;
  align-items: start;
}

/* Inline select (Text size / Line height) */
.a11y__control-inline select {
  font-size: 14px;
  border: 1px solid var(--clr-border);
  border-radius: 6px;
}

/* Disabled selects when their enable-switch is off */
#a11y_zoom[disabled],
#a11y_lh[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* ===== Global data-* hooks ===== */
/* High contrast is color-only. It does not force light mode and does not disable motion. */
html[data-high-contrast="true"] {
  --a11y-focus-ring-color: var(--outline-color, currentColor);
  --outline-size: max(var(--outline-size, 2px), 3px);
  --outline-offset: max(var(--outline-offset, 3px), 4px);
  --focus-ring-width: var(--outline-size);
  --focus-ring-offset: var(--outline-offset);
  --clr-border: currentColor;
  --border-color: currentColor;
  --button-border-color: currentColor;
  --form-border-color: currentColor;
}

html[data-high-contrast="true"] body {
  color: var(--text-body, currentColor);
  background-color: var(--site-bg, var(--bg-body, Canvas));
}

html[data-high-contrast="true"] :where(a) {
  text-decoration-thickness: max(2px, 0.12em);
  text-underline-offset: 0.18em;
}

html[data-high-contrast="true"] :where(button, .button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"]) {
  border-color: currentColor;
}

html[data-high-contrast="true"] :where(input, textarea, select) {
  border-color: currentColor;
}

html[data-theme="light"][data-high-contrast="true"],
html[data-color-scheme="light"][data-high-contrast="true"],
html.light[data-high-contrast="true"],
html.theme-light[data-high-contrast="true"] {
  --a11y-focus-ring-color: #000;
  --outline-color: #000;
  --focus-ring-color: #000;
}

html[data-theme="dark"][data-high-contrast="true"],
html[data-color-scheme="dark"][data-high-contrast="true"],
html.dark[data-high-contrast="true"],
html.theme-dark[data-high-contrast="true"],
html[data-high-contrast="true"] body.dark,
html[data-high-contrast="true"] body.theme-dark {
  --a11y-focus-ring-color: #fff;
  --outline-color: #fff;
  --focus-ring-color: #fff;
}

html[data-underline-links="true"] body a:not(.button):not(.btn):not(.ui-fill-btn):not([role="button"]):not(.skip-link):not(#wpadminbar *):not(.a11y *) {
  text-decoration-line: underline !important;
  text-decoration-thickness: max(2px, 0.11em);
  text-underline-offset: 0.18em;
}

html[data-text-zoom="110"] {
  --a11y-text-scale: 1.1;
}

html[data-text-zoom="120"] {
  --a11y-text-scale: 1.2;
}

html[data-text-zoom="130"] {
  --a11y-text-scale: 1.3;
}

html[data-text-zoom="110"] :where(p, li, label, input, textarea, select, button, .button),
html[data-text-zoom="120"] :where(p, li, label, input, textarea, select, button, .button),
html[data-text-zoom="130"] :where(p, li, label, input, textarea, select, button, .button) {
  font-size: calc(1em * var(--a11y-text-scale));
}

html[data-line-height="loose"] :where(p, li, blockquote, label, input, textarea, select, button, .button) {
  line-height: 1.7;
}

html[data-reduce-motion="true"] *,
html[data-reduce-motion="true"] *::before,
html[data-reduce-motion="true"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.001ms !important;
}

/* Strong focus outline
   - Default framework focus should use :focus-visible.
   - This preference intentionally expands the visible ring to any focused control.
*/
html[data-strong-focus="true"] {
  --outline-size: 4px;
  --outline-offset: 5px;
  --a11y-focus-ring-width: var(--outline-size);
  --a11y-focus-ring-offset: var(--outline-offset);
}

html[data-strong-focus="true"] body :where(
  a[href],
  button,
  input:not([type="hidden"]),
  textarea,
  select,
  summary,
  [role="button"],
  [role="tab"],
  [role="link"],
  [tabindex]:not([tabindex="-1"])
):not(.a11y *):not(#wpadminbar *):focus {
  outline: var(--a11y-focus-ring-width) solid var(--a11y-focus-ring-color) !important;
  outline-offset: var(--a11y-focus-ring-offset) !important;
  box-shadow: none !important;
}

html[data-readable-width="true"] body :where(
  .prose,
  .entry-content,
  .wysiwyg,
  .rich-text,
  .text-content,
  .copy-content,
  .component-content,
  .content-block__body,
  [data-readable-content]
) :where(p, ul, ol, blockquote):not(.a11y *) {
  inline-size: min(100%, var(--a11y-readable-width));
  max-inline-size: var(--a11y-readable-width);
}

/* Larger controls
   - Applies to action controls and navigation-style links.
   - Avoids inline paragraph links and the accessibility panel itself.
*/
html[data-large-targets="true"] body :where(
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="checkbox"],
  input[type="radio"],
  select,
  textarea
):not(.a11y *):not(#wpadminbar *) {
  min-block-size: var(--a11y-target-size);
}

html[data-large-targets="true"] body :where(
  input[type="checkbox"],
  input[type="radio"]
):not(.a11y *):not(#wpadminbar *) {
  min-inline-size: var(--a11y-target-size);
}

html[data-large-targets="true"] body :where(
  .button,
  .btn,
  .ui-fill-btn,
  [data-fill-btn],
  nav a,
  .site-header a,
  .site-footer a,
  .menu a,
  .nav-menu a,
  .pagination a,
  .carousel-controls a,
  .carousel-controls button
):not(.a11y *):not(#wpadminbar *) {
  min-block-size: var(--a11y-target-size);
  min-inline-size: var(--a11y-target-size);
}

html[data-large-targets="true"] body :where(
  .button,
  .btn,
  .ui-fill-btn,
  [data-fill-btn],
  .pagination a,
  .carousel-controls a,
  .carousel-controls button
):not(.a11y *):not(#wpadminbar *) {
  align-items: center;
  justify-content: center;
}

html[data-large-targets="true"] body :where(
  .button,
  .btn,
  .ui-fill-btn,
  [data-fill-btn],
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
):not(.a11y *):not(#wpadminbar *) {
  padding-inline: max(0.875rem, 1.2vw);
}

/* Keep the accessibility preferences panel stable while site-level preferences are previewed. */
html[data-large-targets="true"] body .a11y :where(a, button, input, select, textarea, [role="button"]) {
  min-block-size: revert !important;
  min-inline-size: revert !important;
}

/* Stable controls inside the accessibility panel. */
.a11y .panel-btn,
html[data-large-targets="true"] body .a11y .panel-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: 44px !important;
  min-inline-size: 0 !important;
  padding: 8px 16px !important;
  text-align: center;
}

html[data-large-targets="true"] body .a11y .panel-switch,
html[data-large-targets="true"] body .a11y .panel-option {
  min-block-size: auto !important;
  min-inline-size: 0 !important;
}



/* Accessibility panel controls should also respect the user's active preferences. */
html[data-text-zoom="110"] .a11y {
  --a11y-panel-text-scale: 1.1;
}

html[data-text-zoom="120"] .a11y {
  --a11y-panel-text-scale: 1.2;
}

html[data-text-zoom="130"] .a11y {
  --a11y-panel-text-scale: 1.3;
}

html[data-text-zoom="110"] .a11y :where(.panel-title, .panel-intro, .panel-switch__label, .desc, .panel-btn, .panel-close, select),
html[data-text-zoom="120"] .a11y :where(.panel-title, .panel-intro, .panel-switch__label, .desc, .panel-btn, .panel-close, select),
html[data-text-zoom="130"] .a11y :where(.panel-title, .panel-intro, .panel-switch__label, .desc, .panel-btn, .panel-close, select) {
  font-size: calc(1em * var(--a11y-panel-text-scale, 1));
}

html[data-line-height="loose"] .a11y :where(.panel-intro, .panel-switch__text, .desc) {
  line-height: 1.85;
}

html[data-large-targets="true"] body .a11y :where(.panel-btn, .panel-close) {
  min-block-size: var(--a11y-target-size) !important;
  min-inline-size: var(--a11y-target-size) !important;
}

html[data-large-targets="true"] body .a11y .panel-btn {
  min-inline-size: 0 !important;
  inline-size: 100%;
}

html[data-strong-focus="true"] .a11y :where(button, input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])):focus {
  outline: var(--a11y-focus-ring-width) solid var(--a11y-focus-ring-color) !important;
  outline-offset: var(--a11y-focus-ring-offset) !important;
  box-shadow: none !important;
}

html[data-strong-focus="true"] .a11y .panel-switch input[type="checkbox"]:focus + .panel-switch__slider {
  outline: var(--a11y-focus-ring-width) solid var(--a11y-focus-ring-color) !important;
  outline-offset: var(--a11y-focus-ring-offset) !important;
  box-shadow: none !important;
}

html[data-strong-focus="true"] .a11y .panel-close:focus {
  outline: none !important;
  box-shadow: inset 0 0 0 var(--a11y-focus-ring-width) var(--a11y-focus-ring-color) !important;
}

html[data-strong-focus="true"] .a11y .panel-close:focus::after {
  opacity: 0 !important;
}


/* Keep panel switch dimensions fixed so text scaling / focus / larger-controls do not distort the track. */
.a11y .panel-switch__slider,
html[data-large-targets="true"] body .a11y .panel-switch__slider,
html[data-strong-focus="true"] body .a11y .panel-switch__slider {
  flex: 0 0 44px !important;
  inline-size: 44px !important;
  min-inline-size: 44px !important;
  max-inline-size: 44px !important;
  block-size: 24px !important;
  min-block-size: 24px !important;
  max-block-size: 24px !important;
  overflow: hidden;
}

.a11y .panel-switch__slider::after,
html[data-large-targets="true"] body .a11y .panel-switch__slider::after,
html[data-strong-focus="true"] body .a11y .panel-switch__slider::after {
  inline-size: 18px !important;
  block-size: 18px !important;
}

.a11y .panel-switch input[type="checkbox"]:checked + .panel-switch__slider::after {
  transform: translateX(20px) !important;
}

html[data-strong-focus="true"] .a11y .panel-switch input[type="checkbox"]:focus {
  outline: none !important;
  box-shadow: none !important;
}

html[data-text-weight="true"] body {
  font-variant-numeric: normal;
  font-weight: 500;
}

html[data-reduce-transparency="true"] :where(.glass, [data-glass="true"], .frosted, .backdrop) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-color: currentColor !important;
  opacity: 1 !important;
}

html[data-highlight-links="true"] a {
  text-decoration: underline;
  text-decoration-thickness: 0.11em;
  text-underline-offset: 0.18em;
}

html[data-pause-autoplay="true"] * {
  animation-play-state: paused !important;
}

html[data-tabular-nums="true"] body {
  font-variant-numeric: tabular-nums;
}

/* Forced-colors (Windows High Contrast) */
@media (forced-colors: active) {
  html[data-strong-focus="true"] body :where(
    a[href],
    button,
    input:not([type="hidden"]),
    textarea,
    select,
    summary,
    [role="button"],
    [role="tab"],
    [role="link"],
    [tabindex]:not([tabindex="-1"])
  ):not(.a11y *):not(#wpadminbar *):focus {
    outline: 2px solid Highlight !important;
    outline-offset: 2px !important;
  }
}
/*# sourceMappingURL=a11y.css.map */