/* ============================================================
   A11Y-SCMS — Able Player v barvah spletišča

   Able Player 5 vse svoje barve pelje skozi spremenljivke `--able-*`, zato
   knjižnice ni treba popravljati: tu jih preslikamo v žetone, ki jih izriše
   CMS (/theme.css). Nalaga se ZA `vendor/ableplayer/ableplayer.min.css`.

   Izbrane so **samo tiste kombinacije, ki jih Videz → Barve že meri**
   (App\Core\Theme::rules()), da predvajalnik ne uvede razmerja, ki ga poročilo
   o kontrastu ne pozna:

     - upravljalna vrstica: --primary + --on-primary   (4,5 : 1, kritično)
     - velik gumb za predvajanje čez sliko: --scrim + --on-scrim  (4,5 : 1)
     - okna (nastavitve, prepis, znakovni jezik): --surface + --text + --border
     - prepis in poglavja: --surface-alt + --text, trenutno poglavje --primary
     - fokusni obroč: --focus-outer / --focus-inner (isti dvojni obroč kot povsod)

   Namenoma NISO potemnjeni **podnapisi in besedilo zvočnega opisa** (belo na
   črnem): to sta odčitka čez sliko, kjer je berljivost odvisna od posnetka in
   ne od palete spletišča, obiskovalec pa si ju lahko nastavi sam v nastavitvah
   predvajalnika. Barvna shema (svetla/temna) pride sama, ker so žetoni tisti,
   ki se ob preklopu zamenjajo.
   ============================================================ */

.able-modal-overlay,
.able-playlist,
.able-search-results,
.able-chapters-div,
.able-modal-dialog,
.able-transcript-area,
.able-wrapper {
  /* Upravljalna vrstica in gumbi */
  --able-color: var(--on-primary);
  --able-controller-background: var(--primary);
  --able-control-background: var(--primary);
  --able-control-color: var(--on-primary);
  --able-control-label-color: var(--on-primary);
  --able-separator-color: var(--on-primary);
  --able-statusbar-background: var(--primary);
  --able-statusbar-color: var(--on-primary);
  --able-now-playing-background: var(--primary);
  --able-now-playing-color: var(--on-primary);

  /* Gumb »predvajaj« čez naslovno sličico leži na senčenju, ne na sliki */
  --able-big-play-background: var(--scrim);

  /* Časovnica: predvajani del je --on-primary na --primary (4,5 : 1), zato je
     meja med predvajanim in nepredvajanim vidna tudi brez zaznavanja barve. */
  --able-seekbar-background: color-mix(in srgb, var(--on-primary) 18%, var(--primary));
  --able-seekbar-loaded: color-mix(in srgb, var(--on-primary) 45%, var(--primary));
  --able-seekbar-played: var(--on-primary);
  --able-seekbar-head: var(--on-primary);
  --able-seekbar-border: var(--on-primary);

  /* Glasnost */
  --able-volume-background: var(--surface);
  --able-volume-outline: var(--border);

  /* Meniji (hitrost, poglavja, jezik podnapisov) */
  --able-menu-background: var(--surface);
  --able-menu-color: var(--text);
  --able-menu-border: var(--border);
  --able-menu-outline: var(--border);
  --able-menu-focus-background: var(--primary);
  --able-menu-focus-color: var(--on-primary);

  /* Okna: nastavitve, prepis, znakovni jezik */
  --able-modal-background: var(--surface);
  --able-modal-color: var(--text);
  --able-modal-border: 2px solid var(--border);
  --able-modal-overlay: color-mix(in srgb, var(--scrim) 60%, transparent);
  --able-sign-background: var(--surface);
  --able-sign-border: var(--border);
  --able-resizable-color: var(--text-muted);
  --able-tooltip-background: var(--surface);
  --able-tooltip-color: var(--text);
  --able-tooltip-border: var(--border);
  --able-alert-background: var(--warning-soft);
  --able-alert-button-color: var(--text);

  /* Prepis in poglavja */
  --able-transcript-background: var(--surface-alt);
  --able-chapter-background: transparent;
  --able-chapter-color: var(--text);
  --able-current-chapter-background: var(--primary);
  --able-current-chapter-color: var(--on-primary);
  --able-cue-highlighted-background: var(--primary-soft);
  --able-cue-highlighted-color: var(--text);
  --able-cue-interacting-background: var(--accent-soft);
  --able-cue-interacting-color: var(--text);
  --able-cue-audio-description-background: var(--info-soft);
  --able-cue-audio-description-color: var(--text);
  --able-description-border: var(--border);
  --able-search-term-background: var(--accent-soft);
  --able-search-term-color: var(--text);
  --able-search-results-button-background: var(--surface);
  --able-search-results-button-color: var(--text);
  --able-playlist-item-background: var(--surface);
  --able-playlist-item-color: var(--text);
  --able-playlist-item-button-color: var(--text);
  --able-playlist-current-background: var(--primary-soft);
  --able-playlist-current-border: var(--primary-line);
  --able-playlist-current-outline: var(--primary-line);
  --able-playlist-current-active-background: var(--primary-soft);
  --able-playlist-current-active-color: var(--text);

  /* Obroči */
  --able-focus-outline: var(--focus-outer);
  --able-hover-outline: var(--on-primary);
  --able-drag-outline: var(--focus-outer);

  font-family: var(--font-body, var(--font));
}

/* Zunaj upravljalne vrstice (poglavja, prepis, okna) obroč ob prehodu miške
   ne leži na glavni barvi, zato tam --on-primary ne bi bil viden. */
.able-chapters-div,
.able-transcript-area,
.able-modal-dialog,
.able-playlist,
.able-search-results {
  --able-hover-outline: var(--primary-line);
}

/* Dvojni fokusni obroč, kot ga ima ostalo spletišče (main.css → :focus-visible).
   Able Player barva obroč sam prek --able-focus-outline, notranjega roba pa ne
   pozna; dodamo ga s senco, da je obroč viden na svetli in na temni podlagi. */
.able-wrapper button:focus-visible,
.able-wrapper [role="button"]:focus-visible,
.able-wrapper input:focus-visible,
.able-wrapper select:focus-visible,
.able-chapters-div button:focus-visible,
.able-transcript-area button:focus-visible,
.able-modal-dialog button:focus-visible,
.able-modal-dialog input:focus-visible,
.able-modal-dialog select:focus-visible {
  outline: var(--focus-w, 3px) solid var(--focus-outer);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-inner);
}

/* Oblika: predvajalnik naj sledi zaobljenosti ostalih ploskev. Okna se ne
   režejo (overflow ostane viden), ker so premakljiva in ležijo čez rob. */
.able-wrapper .able-controller { border-radius: 0 0 var(--radius) var(--radius); }
.able-audio-wrapper { border-radius: var(--radius) var(--radius) 0 0; }
.able-modal-dialog, .able-chapters-div { border-radius: var(--radius); }

/* Seznam poglavij pod predvajalnikom. Able Player vsebniku, ki mu ga podamo
   (data-chapters-div), prepiše razred v `able-chapters-div` — naš `block-media__chapters`
   torej obstaja samo, dokler se predvajalnik ne zgradi (tedaj ga main.css skrije, ker je
   prazen). Zato odmik in velikost tipke vežemo na razred, ki ostane. */
.block-media > .able-chapters-div { margin-top: .8rem; padding: 0; }
.block-media > .able-chapters-div ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.block-media > .able-chapters-div li button {
  min-height: 44px;                 /* velikost tipke (SC 2.5.8) */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: .4rem .8rem;
  cursor: pointer;
}
.block-media > .able-chapters-div li.able-current-chapter button {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}

/* Vgrajeni predvajalnik ne sme pobegniti iz širine bloka. */
.able-wrapper { max-width: 100%; }