/* PBK global accessibility preferences and floating tools. */

:root {
  --pbk-user-text-scale: 1;
}

html[data-pbk-text-scale="0"] { font-size: 100%; }
html[data-pbk-text-scale="1"] { font-size: 110%; }
html[data-pbk-text-scale="2"] { font-size: 120%; }
html[data-pbk-text-scale="3"] { font-size: 130%; }
html[data-pbk-text-scale="4"] { font-size: 140%; }
html[data-pbk-text-scale="5"] { font-size: 150%; }

.pbk-a11y-tools {
  --pbk-test-version-badge-space: 0px;
  position: fixed;
  z-index: 9995;
  inset-inline-start: max(1rem, env(safe-area-inset-left, 0px));
  inset-block-end: max(
    calc(1rem + var(--pbk-test-version-badge-space)),
    calc(1rem + env(safe-area-inset-bottom, 0px) + var(--pbk-test-version-badge-space))
  );
  color: var(--pbk-color-text, #0f172a);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
}

body.pbk-has-test-version-badge .pbk-a11y-tools {
  /* No-JavaScript fallback. The runtime replaces it with the measured height. */
  --pbk-test-version-badge-space: 3.75rem;
}

.pbk-a11y-tools [hidden] {
  display: none !important;
}

.pbk-a11y-tools button {
  font: inherit;
}

.pbk-a11y-tools__fab,
.pbk-a11y-popover__close,
.pbk-a11y-popover__action {
  -webkit-tap-highlight-color: transparent;
}

.pbk-a11y-tools__fab {
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--pbk-color-action, #1d4ed8) 80%, #000 20%);
  border-radius: 9999px;
  background: var(--pbk-color-action, #1d4ed8);
  box-shadow: 0 0.75rem 2rem rgb(15 23 42 / 24%);
  color: var(--pbk-color-on-action, #fff);
  cursor: pointer;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.pbk-a11y-tools__fab:hover {
  background: var(--pbk-color-action-hover, #1e3a8a);
  transform: translateY(-1px);
}

.pbk-a11y-tools__fab > svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 2;
}

.pbk-a11y-tools :focus-visible {
  outline: 3px solid var(--pbk-color-focus, #3b82f6);
  outline-offset: 3px;
}

.pbk-a11y-popover {
  width: min(19rem, calc(100vw - 2rem));
  overflow: hidden;
  border: 1px solid var(--pbk-color-border, #e2e8f0);
  border-radius: 0.75rem;
  background: var(--pbk-color-surface-raised, #fff);
  box-shadow: 0 1rem 3rem rgb(15 23 42 / 22%);
  color: var(--pbk-color-text, #0f172a);
}

.pbk-a11y-popover__header {
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  background: var(--pbk-color-surface-strong, #f1f5f9);
}

.pbk-a11y-popover__title {
  margin: 0;
  color: var(--pbk-color-text-strong, #020617);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
}

.pbk-a11y-popover__close {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: currentColor;
  cursor: pointer;
}

.pbk-a11y-popover__close:hover,
.pbk-a11y-popover__action:hover {
  background: var(--pbk-color-surface-strong, #f1f5f9);
}

.pbk-a11y-popover__close > svg,
.pbk-a11y-popover__icon,
.pbk-a11y-popover__check {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  stroke-width: 2;
}

.pbk-a11y-popover__list {
  display: block;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
}

.pbk-a11y-popover__item {
  margin: 0;
  padding: 0;
}

.pbk-a11y-popover__action {
  display: flex;
  width: 100%;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--pbk-color-text, #0f172a);
  text-align: start;
  cursor: pointer;
}

.pbk-a11y-popover__label {
  min-width: 0;
  flex: 1 1 auto;
  font-weight: 500;
}

.pbk-a11y-popover__check {
  visibility: hidden;
  color: var(--pbk-color-action, #1d4ed8);
}

.pbk-a11y-popover__action[aria-pressed="true"] {
  background: var(--pbk-color-action-soft, #eff6ff);
  color: var(--pbk-color-text-strong, #020617);
}

.pbk-a11y-popover__action[aria-pressed="true"] .pbk-a11y-popover__check {
  visibility: visible;
}

.pbk-a11y-popover__action[aria-disabled="true"] {
  opacity: 0.46;
  cursor: not-allowed;
}

.pbk-a11y-popover__separator {
  height: 1px;
  margin: 0.5rem 0.75rem;
  background: var(--pbk-color-border, #e2e8f0);
}

/* Only page content is filtered. The fixed tool remains readable and usable. */
html[data-pbk-color-mode="grayscale"] [data-pbk-a11y-effect-target] {
  filter: grayscale(1);
}

html[data-pbk-color-mode="negative"] [data-pbk-a11y-effect-target] {
  filter: invert(1) hue-rotate(180deg);
}

html[data-pbk-color-mode="negative"] [data-pbk-a11y-effect-target] :is(img, video, iframe, canvas, embed, object) {
  filter: invert(1) hue-rotate(180deg);
}

/* High contrast uses one complete black/yellow pair. Tokens are the primary
 * contract; the role-based compatibility layer also corrects native blocks
 * with saved Gutenberg classes or inline colour declarations. PBK custom
 * blocks can be migrated to the same contract independently. */
html[data-pbk-color-mode="high-contrast"] {
  --wp--preset--color--canvas: #000;
  --wp--preset--color--surface: #000;
  --wp--preset--color--surface-strong: #000;
  --wp--preset--color--text: #ff0;
  --wp--preset--color--text-strong: #ff0;
  --wp--preset--color--text-muted: #ff0;
  --wp--preset--color--border: #ff0;
  --wp--preset--color--action: #ff0;
  --wp--preset--color--action-soft: #000;
  --wp--preset--color--on-action: #000;
  --wp--preset--color--dark: #000;
  --wp--preset--color--on-dark: #ff0;
  --wp--style--color--link: #ff0;

  --wp--custom--pbk--color--canvas: #000;
  --wp--custom--pbk--color--surface: #000;
  --wp--custom--pbk--color--surface-raised: #000;
  --wp--custom--pbk--color--surface-strong: #000;
  --wp--custom--pbk--color--text: #ff0;
  --wp--custom--pbk--color--text-strong: #ff0;
  --wp--custom--pbk--color--text-muted: #ff0;
  --wp--custom--pbk--color--border: #ff0;
  --wp--custom--pbk--color--action: #ff0;
  --wp--custom--pbk--color--action-hover: #ff0;
  --wp--custom--pbk--color--action-soft: #000;
  --wp--custom--pbk--color--term-chip-background: #000;
  --wp--custom--pbk--color--term-chip-background-hover: #000;
  --wp--custom--pbk--color--on-action: #000;
  --wp--custom--pbk--color--focus: #ff0;
  --wp--custom--pbk--color--danger: #ff0;
  --wp--custom--pbk--color--on-danger: #000;
  --wp--custom--pbk--color--success: #ff0;
  --wp--custom--pbk--color--on-success: #000;
  --wp--custom--pbk--color--warning: #ff0;
  --wp--custom--pbk--color--on-warning: #000;
  --wp--custom--pbk--color--dark: #000;
  --wp--custom--pbk--color--on-dark: #ff0;

  --pbk-color-canvas: #000;
  --pbk-color-surface: #000;
  --pbk-color-surface-raised: #000;
  --pbk-color-surface-strong: #000;
  --pbk-color-text: #ff0;
  --pbk-color-text-strong: #ff0;
  --pbk-color-text-muted: #ff0;
  --pbk-color-border: #ff0;
  --pbk-color-action: #ff0;
  --pbk-color-action-hover: #ff0;
  --pbk-color-action-soft: #000;
  --pbk-color-term-chip-background: #000;
  --pbk-color-term-chip-background-hover: #000;
  --pbk-color-on-action: #000;
  --pbk-color-focus: #ff0;
  --pbk-color-danger: #ff0;
  --pbk-color-on-danger: #000;
  --pbk-color-success: #ff0;
  --pbk-color-on-success: #000;
  --pbk-color-warning: #ff0;
  --pbk-color-on-warning: #000;
  --pbk-color-dark: #000;
  --pbk-color-on-dark: #ff0;

  --pbk-content-canvas: #000;
  --pbk-content-surface: #000;
  --pbk-content-surface-strong: #000;
  --pbk-content-text: #ff0;
  --pbk-content-text-strong: #ff0;
  --pbk-content-text-muted: #ff0;
  --pbk-content-border: #ff0;
  --pbk-content-action: #ff0;
  --pbk-content-action-hover: #ff0;
  --pbk-content-term-chip-background: #000;
  --pbk-content-term-chip-background-hover: #000;
  --pbk-content-focus: #ff0;
  --pbk-content-dark: #000;
  --pbk-content-on-dark: #ff0;
  --pbk-content-danger: #ff0;
  color-scheme: dark;
}

html[data-pbk-color-mode="high-contrast"] body,
html[data-pbk-color-mode="high-contrast"] .pbk-layout {
  background-color: #000;
  color: #ff0;
}

html[data-pbk-color-mode="high-contrast"] .pbk-layout :is(.bg-white, .bg-slate-50, .bg-slate-100, .bg-slate-900, .bg-slate-950, .bg-blue-50, .bg-blue-950) {
  background-color: #000 !important;
}

html[data-pbk-color-mode="high-contrast"] .pbk-layout :is(.bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-blue-800, .bg-blue-900) {
  background-color: #ff0 !important;
  color: #000 !important;
}

html[data-pbk-color-mode="high-contrast"] .pbk-layout :is(.bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-blue-800, .bg-blue-900) :is(.text-white, .text-slate-50, .text-black),
html[data-pbk-color-mode="high-contrast"] .pbk-layout :is(.bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-blue-800, .bg-blue-900):is(.text-white, .text-slate-50, .text-black) {
  color: #000 !important;
}

html[data-pbk-color-mode="high-contrast"] .pbk-layout :is(.text-slate-400, .text-slate-500, .text-slate-600, .text-slate-700, .text-slate-800, .text-slate-900, .text-slate-950, .text-zinc-400, .text-zinc-500, .text-zinc-600, .text-zinc-700, .text-zinc-800, .text-zinc-900, .text-black) {
  color: #ff0 !important;
}

html[data-pbk-color-mode="high-contrast"] .pbk-layout :is(.text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800, .text-blue-900),
html[data-pbk-color-mode="high-contrast"] .pbk-layout a:not([class*="bg-"]):not(.kt-btn):not(.wp-element-button):not(.wp-block-button__link):not(.cn-navigation-menu-link):not(.cn-tree-link):not(.pbk-language-switcher__link) {
  color: #ff0 !important;
}

/* Button-like anchors keep their semantic pair: background bound to the
 * action token, label and icons bound to on-action. */
html[data-pbk-color-mode="high-contrast"] .pbk-layout .kt-btn:not(.kt-btn-ghost):not(.kt-btn-outline):not(.kt-btn-secondary):not(.kt-btn-dim):not(.kt-btn-destructive) {
  background-color: var(--pbk-color-action, #ff0);
  color: var(--pbk-color-on-action, #000);
}

/* Submenu link content follows the state pair of its link (yellow on black,
 * black on yellow when hovered/active) instead of the forced palette fixes. */
html[data-pbk-color-mode="high-contrast"] .pbk-layout .cn-navigation-menu-content .cn-navigation-menu-link :is(span, .text-slate-500) {
  color: inherit !important;
}

html[data-pbk-color-mode="high-contrast"] .pbk-layout :is([class*="border-slate-"], [class*="border-blue-"]) {
  border-color: #ff0 !important;
}

html[data-pbk-color-mode="high-contrast"] :focus-visible {
  outline: 3px solid #ff0 !important;
  outline-offset: 3px;
}

/* Native text roles. The exception keeps the current custom PBK blocks out of
 * this migration while fixing headings and metadata emitted by core blocks. */
html[data-pbk-color-mode="high-contrast"] .pbk-layout :is(
  h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption, caption,
  th, td, summary, label, legend, time, address, cite
):not([class*="wp-block-pbk-"] *),
html[data-pbk-color-mode="high-contrast"] .pbk-layout :is(
  .wp-block-post-title,
  .wp-block-post-excerpt,
  .wp-block-post-date,
  .wp-block-post-terms,
  .wp-block-query-title,
  .wp-block-comment-content,
  .wp-block-comment-author-name,
  .wp-block-comment-date,
  .wp-block-latest-comments__comment-excerpt,
  .wp-block-latest-comments__comment-meta,
  .wp-block-search__label
):not([class*="wp-block-pbk-"] *) {
  color: #ff0 !important;
}

html[data-pbk-color-mode="high-contrast"] .pbk-layout :is(
  .has-text-color,
  [style*="color:"]
):not([class*="wp-block-pbk-"] *) {
  color: #ff0 !important;
}

html[data-pbk-color-mode="high-contrast"] .pbk-layout :is(
  .has-background,
  [style*="background-color"]
):not([class*="wp-block-pbk-"] *) {
  background-color: #000 !important;
}

html[data-pbk-color-mode="high-contrast"] .pbk-layout :is(
  .has-border-color,
  [style*="border-color"]
):not([class*="wp-block-pbk-"] *) {
  border-color: #ff0 !important;
}

html[data-pbk-color-mode="high-contrast"] .pbk-layout :is(
  .wp-element-button,
  .wp-block-button__link,
  .wp-block-search__button,
  .wp-block-file__button
) {
  border-color: #ff0 !important;
  background: #ff0 !important;
  color: #000 !important;
  box-shadow: none !important;
}

html[data-pbk-color-mode="high-contrast"] .pbk-layout :is(
  input:not([type="button"]):not([type="submit"]):not([type="reset"]),
  select,
  textarea
) {
  border-color: #ff0 !important;
  background: #000 !important;
  color: #ff0 !important;
  box-shadow: none !important;
  accent-color: #ff0;
}

html[data-pbk-color-mode="high-contrast"] .pbk-layout ::placeholder {
  color: #ff0 !important;
  opacity: 1;
}

html[data-pbk-color-mode="high-contrast"] .pbk-layout :is(
  table, th, td, pre, code, blockquote, details,
  .wp-block-calendar table,
  .wp-block-table table
):not([class*="wp-block-pbk-"] *) {
  border-color: #ff0 !important;
}

html[data-pbk-color-mode="high-contrast"] .pbk-layout :is(pre, code):not([class*="wp-block-pbk-"] *) {
  background: #000 !important;
  color: #ff0 !important;
}

html[data-pbk-color-mode="high-contrast"] .pbk-layout mark {
  background: #ff0 !important;
  color: #000 !important;
}

html[data-pbk-color-mode="high-contrast"] .pbk-layout :is(.lucide, [data-lucide]) {
  color: currentColor;
  stroke: currentColor !important;
}

html[data-pbk-color-mode="high-contrast"] .pbk-layout :disabled,
html[data-pbk-color-mode="high-contrast"] .pbk-layout [aria-disabled="true"] {
  opacity: 0.7;
}

html[data-pbk-color-mode="high-contrast"] ::selection {
  background: #ff0;
  color: #000;
}

/* A stored choice can override the operating-system motion preference. */
html[data-pbk-motion="reduced"] *,
html[data-pbk-motion="reduced"] *::before,
html[data-pbk-motion="reduced"] *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0ms !important;
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-pbk-motion="allowed"]) *,
  html:not([data-pbk-motion="allowed"]) *::before,
  html:not([data-pbk-motion="allowed"]) *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

@media (max-width: 30rem) {
  .pbk-a11y-tools {
    inset-inline-start: max(0.75rem, env(safe-area-inset-left, 0px));
    inset-block-end: max(
      calc(0.75rem + var(--pbk-test-version-badge-space)),
      calc(0.75rem + env(safe-area-inset-bottom, 0px) + var(--pbk-test-version-badge-space))
    );
  }

  .pbk-a11y-popover {
    width: min(19rem, calc(100vw - 1.5rem));
  }
}

@media (forced-colors: active) {
  html[data-pbk-color-mode="grayscale"] [data-pbk-a11y-effect-target],
  html[data-pbk-color-mode="negative"] [data-pbk-a11y-effect-target],
  html[data-pbk-color-mode="negative"] [data-pbk-a11y-effect-target] :is(img, video, iframe, canvas, embed, object) {
    filter: none !important;
  }

  .pbk-a11y-tools__fab,
  .pbk-a11y-popover,
  .pbk-a11y-popover__action[aria-pressed="true"] {
    border-color: ButtonText;
    background: ButtonFace;
    color: ButtonText;
    forced-color-adjust: auto;
  }

  .pbk-a11y-popover__action[aria-pressed="true"] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}

/* Template heroes in high contrast: the navy panels swap to the action pair
 * (yellow surface, black content). These rules live here — after the generic
 * yellow-text rules for native text roles — because the heading/paragraph
 * rule above wins with !important against any earlier stylesheet; text placed
 * directly on the yellow hero surface must counter it with the same weight.
 * The search card inside the studies hero stays a black surface with yellow
 * text through its own kt-card tokens and the form-control rules, so its
 * descendants are excluded here. Decorative photo layers of the studies hero
 * are removed in this mode: the colour-dodge blend against a yellow surface
 * would produce arbitrary colours, and the image is aria-hidden decoration.
 */
html[data-pbk-color-mode="high-contrast"] .pbk-layout .pbk-posts-archive-hero,
html[data-pbk-color-mode="high-contrast"] .pbk-layout .pbk-posts-archive-hero__content,
html[data-pbk-color-mode="high-contrast"] .pbk-layout .pbk-study-archive-hero {
  background: #ff0 !important;
  color: #000 !important;
}

html[data-pbk-color-mode="high-contrast"] .pbk-layout .pbk-study-archive-hero-bg {
  display: none !important;
}

html[data-pbk-color-mode="high-contrast"] .pbk-layout
  :is(.pbk-posts-archive-hero, .pbk-study-archive-hero)
  :is(h1, h2, h3, h4, p, li, time, label, legend, figcaption):not(.kt-card *) {
  color: #000 !important;
}

/* Outline badges on the hero use literal white utilities; on the yellow
 * surface they pair with black like the rest of the hero content. */
html[data-pbk-color-mode="high-contrast"] .pbk-layout
  :is(.pbk-posts-archive-hero, .pbk-study-archive-hero) .kt-badge:not(.kt-card *) {
  border-color: #000 !important;
  color: #000 !important;
}

/* Select chevron: the compiled kt-select arrow is a data-URI with a fixed
 * zinc stroke, invisible against black form controls. Repaint it yellow. */
html[data-pbk-color-mode="high-contrast"] .pbk-layout select.kt-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffff00' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") !important;
}