/* Jakob Hub – gemeinsame Accessibility-/Usability-Härtung. */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html {
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html[data-theme='light'] {
  /* Kleine Meta-Texte und Link-Akzente bleiben auf hellem Grund AA-tauglich. */
  --hub-faint: #636366;
  --hub-accent: #0066cc;
  --hub-accent-hover: #005bb5;
}

body {
  padding-bottom: env(safe-area-inset-bottom);
}

:where(section[id], [id='featured'], [id='tools'], [id='lab'], [id]:target) {
  scroll-margin-top: 92px;
}

:where(.site-nav a, .header-action, .button, .favorite, .filter-chip, .tool-shell-back, .tool-shell-action, .tool-action, .game-shell__back, .game-shell__button, .hub-dialog__button) {
  min-height: 44px;
}

:where(.favorite, .game-shell__back, .game-shell__button) {
  min-width: 44px;
}

.filter-chip {
  min-height: 44px;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--hub-focus, #64a8ff);
  outline-offset: 3px;
}

.catalog-card:has(.catalog-card__link:focus-visible) {
  outline: 3px solid var(--hub-focus, #64a8ff);
  outline-offset: 3px;
}

.catalog-card__link:focus-visible {
  outline: none;
}

.project-status {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--hub-line, rgba(0,0,0,.12));
  border-radius: 999px;
  color: var(--hub-muted, #6e6e73);
  background: var(--hub-surface-soft, rgba(127,127,127,.08));
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
}

#catalogStatus {
  min-height: 1.35em;
  margin: 12px 0 0;
  color: var(--hub-muted, #6e6e73);
  font-size: .9rem;
}

/* Fixe Spielsteuerungen duerfen fokussierte Bedienelemente nicht verdecken. */
body.has-hub-game-shell :where(button, a, input, select, textarea, [tabindex]) {
  scroll-margin-top: 92px;
  scroll-margin-bottom: 100px;
}

@media (prefers-contrast: more) {
  :root {
    --hub-line: rgba(255,255,255,.34);
    --hub-line-strong: rgba(255,255,255,.58);
    --hub-muted: #d1d1d6;
    --hub-faint: #b4b4ba;
  }

  html[data-theme='light'] {
    --hub-line: rgba(0,0,0,.34);
    --hub-line-strong: rgba(0,0,0,.58);
    --hub-muted: #3a3a3c;
    --hub-faint: #515154;
    --hub-accent: #005bb5;
  }

  :where(.catalog-card, .project-card, .tool-panel, .hub-game-shell, .hub-dialog__panel, .button, .filter-chip, .favorite, input, select, textarea) {
    border-width: 2px;
  }
}

@media (forced-colors: active) {
  :root,
  html[data-theme='light'] {
    --hub-bg: Canvas;
    --hub-surface: Canvas;
    --hub-surface-raised: Canvas;
    --hub-surface-soft: Canvas;
    --hub-text: CanvasText;
    --hub-muted: CanvasText;
    --hub-faint: CanvasText;
    --hub-line: ButtonBorder;
    --hub-line-strong: ButtonText;
    --hub-accent: LinkText;
    --hub-accent-hover: LinkText;
    --hub-on-accent: Canvas;
    --hub-accent-fill: LinkText;
    --hub-accent-fill-hover: LinkText;
    --hub-focus: Highlight;
  }

  .site-header,
  .tool-shell-header,
  .hub-game-shell,
  .hub-dialog::backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  :where(.catalog-card, .project-card, .tool-panel, .hub-game-shell, .hub-dialog__panel, .button, .filter-chip, .favorite, .tool-shell-back, .tool-shell-action, .tool-action, .game-shell__back, .game-shell__button) {
    border: 1px solid CanvasText !important;
    box-shadow: none !important;
  }

  :where(.button--primary, .filter-chip[aria-pressed='true'], .tool-action--primary, .hub-dialog__button--primary, .hub-dialog__button--danger) {
    forced-color-adjust: none;
    background: Highlight !important;
    color: HighlightText !important;
    border-color: Highlight !important;
  }

  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 3px !important;
  }
}

@media (max-width: 720px) {
  html {
    scroll-padding-top: 76px;
  }

  :where(section[id], [id='featured'], [id='tools'], [id='lab'], [id]:target) {
    scroll-margin-top: 76px;
  }

  body.has-hub-game-shell :where(button, a, input, select, textarea, [tabindex]) {
    scroll-margin-bottom: 108px;
  }
}

@media (max-width: 420px) {
  .project-status {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}