/*!
 * mv-a11y-nav.css – Musikverein Wien
 * Barrierefreiheit T2 / Baustein B2
 *
 * Behebt: N4 (Fokus-Indikator sitewide), N7 (Trefferfläche Schließen-Button),
 * G2 (Skip-Link). Zusätzlich Absicherung für [hidden] und Button-Reset, damit
 * die in Oxygen auf <button> umgestellten Elemente optisch unverändert bleiben.
 *
 * Version 1.0 – 2026-08-17
 */

/* ==========================================================================
   1. Fokus-Ring-Token (N4)
   --------------------------------------------------------------------------
   Bisher existierte sitewide genau eine Fokus-Deklaration (.ccp-reopen).
   Alles andere lief auf dem Browser-Default, in Chrome #005fcc – auf dem
   Header-Blau #002f6c nur ca. 2,2:1 und damit unter der 3:1-Schwelle von
   WCAG 1.4.11. Deshalb ein eigener Ring in zwei Kontextfarben.

   Wird in T3 mit der Token-Ebene aus Audit-Befunde-Barrierefreiheit.md §C
   zusammengeführt.
   ========================================================================== */

:root {
  /* Standard: dunkles Blau auf hellen Flächen – 12,4:1 auf Beige #fcfaf6 */
  --focus-ring: #002f6c;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
}

/* Auf dunklen Flächen (Header, Flyout-Panel, Footer) invertieren –
   Beige auf #002f6c ergibt ebenfalls 12,4:1. */
.menu-section,
.push-menu,
footer,
.t-beige,
[class*="bg-blue"] {
  --focus-ring: #fcfaf6;
}

/* :focus-visible statt :focus – Maus-/Touch-Klicks hinterlassen keinen Ring.
   :where() hält die Spezifität bei 0, damit bestehende Komponenten-Styles
   nicht überschrieben werden und die Regel leicht zu übersteuern bleibt. */
:where(a[href], button, [role="button"], input, select, textarea, summary,
       [tabindex]:not([tabindex="-1"]), iframe):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: 2px;
}

/* Bisherige Einzelregel der Cookie-Pill auf das gemeinsame Token umstellen,
   damit es nur eine Quelle gibt (ersetzt outline:2px solid var(--beige)
   in cookie-banner.css). */
.ccp-reopen:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Sprungziel darf beim Anspringen keinen Ring zeigen – es ist nur
   programmatisch fokussierbar (tabindex="-1"), kein Bedienelement. */
:where(main, [role="main"], #inhalt):focus,
:where(main, [role="main"], #inhalt):focus-visible {
  outline: none;
}

/* ==========================================================================
   2. Skip-Link (G2)
   --------------------------------------------------------------------------
   Markup wird per wp_body_open in idl-functions.php ausgegeben, damit er in
   jedem Oxygen-Template das erste Element im <body> ist.
   ========================================================================== */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 0.75rem 1.25rem;
  background: #002f6c;
  color: #fcfaf6;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: underline;
  white-space: nowrap;
}

/* Nicht display:none / visibility:hidden verwenden – sonst ist der Link für
   die Tastatur gar nicht erreichbar. Er wird nur aus dem Viewport geschoben
   und bei Fokus zurückgeholt. */
.skip-link:focus,
.skip-link:focus-visible {
  left: 0.5rem;
  top: 0.5rem;
  outline: var(--focus-ring-width) solid #fcfaf6;
  outline-offset: var(--focus-ring-offset);
}

/* ==========================================================================
   3. Button-Reset  –  DERZEIT OHNE WIRKUNG, bewusst behalten
   --------------------------------------------------------------------------
   Geprüft 2026-08-17: Oxygen 4 bietet `button` nicht als Tag an (feste Liste
   von 26 Werten), das Schließen-Element ist zudem ein SVG-Icon-Element. Die
   beiden Bedienelemente bleiben deshalb <div role="button">, aufgewertet durch
   mv-a11y-nav.js.

   Dieser Block greift also aktuell nicht. Er bleibt stehen, damit die Optik
   nicht kippt, falls die Elemente später doch echte <button> werden – etwa
   nach einem Oxygen-Update oder durch einen Code-Block. Kosten: null, da die
   Selektoren ohne <button> nie matchen.
   ========================================================================== */

button.push-menu-toggle,
button.menu-close {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-transform: inherit;
  cursor: pointer;
}

/* Oxygen-Container sind Flex – nach dem Tag-Wechsel wiederherstellen. */
button.push-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   4. Trefferfläche Schließen-Button (N7)
   --------------------------------------------------------------------------
   Icon ist 20x20 px. Fläche auf mindestens 44x44 px bringen, ohne das Icon
   zu vergrößern – Padding statt Größe, damit das Layout gleich bleibt.

   ACHTUNG: Das Element trägt die Theme-Klasse `t-r` (oben rechts positioniert).
   Padding vergrößert die Box und kann das Icon dadurch optisch verschieben.
   Nach dem Deploy die Position im Panel gegenprüfen; falls es wandert, statt
   Padding mit einer ::before-Fläche arbeiten:

     .menu-close { position: relative; }
     .menu-close::before {
       content: ""; position: absolute;
       top: 50%; left: 50%; transform: translate(-50%, -50%);
       width: 44px; height: 44px;
     }

   Damit wächst nur die Trefferfläche, die Box-Geometrie bleibt unverändert.
   ========================================================================== */

.menu-close {
  box-sizing: content-box;
  min-width: 20px;
  min-height: 20px;
  padding: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.menu-close > svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

/* ==========================================================================
   5. Absicherung [hidden]
   --------------------------------------------------------------------------
   Gleiches Muster wie der Prod-Fix vom 12.08. auf der Konzertseite: Author-
   display-Regeln überschreiben das UA-Default [hidden]{display:none}. Damit
   künftige hidden-Steuerung im Panel zuverlässig greift.
   ========================================================================== */

.push-menu[hidden],
.menu-section [hidden] {
  display: none !important;
}

/* ==========================================================================
   6. Footer-Akkordeon: Button im Spaltentitel
   --------------------------------------------------------------------------
   Die Spaltentitel im Footer sind jetzt <h2 class="menu-title">. Auf Mobile
   verschiebt idl-code.js den Text in ein <button class="menu-title-btn">,
   damit Überschrift und Bedienelement gleichzeitig gültig sind
   (<h2><button aria-expanded>…</button></h2>).

   Ein <button> erbt Typografie und Farbe NICHT – ohne diesen Reset fällt der
   Titel auf die UA-Defaults zurück. Reihenfolge beachten: mv-a11y-nav.css
   lädt nach idl.css, die .menu-title-Regeln greifen also weiter am h2.
   ========================================================================== */

/* h2 bringt UA-Margin mit – die Footer-Spalten steuern ihre Abstände über
   die Oxygen-Klassen (padding-b-m/-l). */
h2.menu-title {
  margin: 0;
}

button.menu-title-btn {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: inherit;   /* Zentrierung des Titels übernehmen */
  gap: 0.5em;                 /* Abstand zum Chevron, falls als Kind vorhanden */
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;              /* Familie, Größe, Gewicht, Zeilenhöhe */
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  cursor: pointer;
}

/* PRÜFEN NACH DEM DEPLOY: Wenn der Chevron über ein ::after auf .menu-title
   erzeugt wird, sitzt er weiterhin am h2 und damit außerhalb des Buttons –
   optisch meist unauffällig, aber er ist dann nicht Teil der Trefferfläche.
   In dem Fall die Regel auf den Button umhängen:

     h2.menu-title::after { content: none; }
     button.menu-title-btn::after { <bisherige Chevron-Deklarationen> }
   ========================================================================== */

/* ==========================================================================
   7. Reduzierte Bewegung
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .push-menu,
  .push-menu * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}