/* ─────────────────────────────────────────────────────────────────────
   Accessibility toolbar — styles
   ─────────────────────────────────────────────────────────────────────
   Extracted verbatim from the <style> block that materijali-za-ucenje.html
   and the new resources page each carried a copy of. One file, one cache
   entry, and a change to the toolbar can no longer land on one page only.
   ───────────────────────────────────────────────────────────────────── */
      /* ── Skip-to-content link ── */
      .a11y-skip-link {
        position: absolute; top: -100px; left: 0;
        padding: 12px 20px; background: #0057b8; color: #fff;
        font-size: 1rem; font-weight: bold; z-index: 99999;
        text-decoration: none; border-radius: 0 0 6px 6px; transition: top 0.2s;
      }
      .a11y-skip-link:focus { top: 0; outline: 3px solid #ffd700; outline-offset: 2px; }

      /* ── Language accesskey links (visually hidden, shown on focus) ── */
      #a11y-lang-accesskeys {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
      }
      .a11y-accesskey-link {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
        white-space: nowrap;
        font-size: 0.9rem;
      }
      .a11y-accesskey-link:focus {
        position: fixed !important;
        top: 0 !important; left: 50% !important;
        transform: translateX(-50%);
        width: auto !important; height: auto !important;
        overflow: visible !important;
        padding: 8px 18px !important;
        background: #0057b8 !important; color: #fff !important;
        border-radius: 0 0 8px 8px !important;
        z-index: 100000 !important;
        outline: 3px solid #ffd700 !important;
        text-decoration: none !important;
        font-weight: bold !important;
      }
      body.a11y-text-only #a11y-lang-accesskeys,
      body.a11y-text-only .a11y-accesskey-link {
        position: static !important;
        width: auto !important; height: auto !important;
        overflow: visible !important;
        display: inline-block !important;
        margin: 2px 4px !important;
        padding: 4px 8px !important;
        background: #f0f0f0 !important; color: #000 !important;
        border: 1px solid #999 !important;
        border-radius: 4px !important;
        font-size: 0.8rem !important;
        text-decoration: none !important;
      }

      /* ── Toolbar ── */
      #a11y-toolbar {
        position: fixed; bottom: 20px; right: 20px; z-index: 99998;
        display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
      }
      #a11y-toolbar-toggle {
        width: 52px; height: 52px; border-radius: 50%;
        background: #0057b8; color: #fff; border: none; font-size: 1.4rem;
        cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.35);
        display: flex; align-items: center; justify-content: center;
        transition: background 0.2s;
      }
      #a11y-toolbar-toggle:focus { outline: 3px solid #ffd700; outline-offset: 3px; }
      #a11y-toolbar-toggle:hover { background: #003f8a; }

      #a11y-panel {
        background: #fff; border: 2px solid #0057b8; border-radius: 12px;
        padding: 18px 16px; box-shadow: 0 6px 24px rgba(0,0,0,0.18);
        min-width: 250px; display: none;
      }
      #a11y-panel.open { display: block; }
      #a11y-panel h2 {
        font-size: 0.9rem; font-weight: 700; color: #0057b8;
        margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid #dde5f0;
        text-transform: uppercase; letter-spacing: 0.05em;
      }
      .a11y-section-label {
        font-size: 0.72rem; font-weight: 700; color: #555;
        text-transform: uppercase; letter-spacing: 0.06em;
        margin: 10px 0 5px; display: block;
      }
      .a11y-font-controls { display: flex; gap: 6px; align-items: center; }
      .a11y-font-controls button {
        flex: 1; padding: 7px 4px; font-size: 0.85rem; font-weight: 700;
        background: #f0f4fb; border: 2px solid #b0c4e8;
        border-radius: 6px; cursor: pointer; color: #0057b8;
        transition: background 0.15s, border-color 0.15s;
      }
      .a11y-font-controls button:hover, .a11y-font-controls button:focus {
        background: #0057b8; color: #fff; border-color: #0057b8;
        outline: 3px solid #ffd700; outline-offset: 2px;
      }
      .a11y-toggle-btn {
        display: flex; align-items: center; justify-content: space-between;
        width: 100%; padding: 8px 10px; font-size: 0.82rem; font-weight: 600;
        background: #f0f4fb; border: 2px solid #b0c4e8;
        border-radius: 7px; cursor: pointer; color: #222;
        margin-bottom: 5px; transition: background 0.15s; text-align: left;
      }
      .a11y-toggle-btn:hover, .a11y-toggle-btn:focus {
        background: #dde8f8; outline: 3px solid #ffd700; outline-offset: 2px;
      }
      .a11y-toggle-btn.active { background: #0057b8; color: #fff; border-color: #0057b8; }
      .a11y-pill {
        font-size: 0.62rem; font-weight: 700; padding: 2px 7px;
        border-radius: 20px; background: rgba(0,0,0,0.12);
        margin-left: 8px; min-width: 30px; text-align: center;
      }
      .a11y-toggle-btn.active .a11y-pill { background: rgba(255,255,255,0.3); }

      /* ── State classes ── */
      body.a11y-large-pointer, body.a11y-large-pointer * {
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='48'%3E%3Cpath d='M4 4L4 38L12 30L18 44L22 42L16 28L28 28Z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 4 4, pointer !important;
      }
      body.a11y-dyslexia, body.a11y-dyslexia * {
        font-family: 'OpenDyslexic','Comic Sans MS','Arial',sans-serif !important;
        line-height: 1.85 !important; word-spacing: 0.25em !important;
      }
      body.a11y-letter-spacing, body.a11y-letter-spacing * {
        letter-spacing: 0.13em !important; word-spacing: 0.22em !important;
      }
      body.a11y-highlight-links a, body.a11y-highlight-links a:visited {
        text-decoration: underline !important; text-underline-offset: 3px !important;
        background: #fff176 !important; color: #000 !important;
        padding: 1px 3px !important; border-radius: 2px !important;
        outline: 1px solid #c8a000 !important;
      }
      body.a11y-text-only *:not(script):not(style):not(#a11y-toolbar):not(#a11y-toolbar *) {
        background: #fff !important; color: #000 !important;
        border: none !important; box-shadow: none !important;
        text-shadow: none !important; filter: none !important;
        font-family: Georgia, serif !important;
        max-width: 100% !important; float: none !important; position: static !important;
      }
      body.a11y-text-only img { display: none !important; }

      /* ── Text-only: keep language menu visible as plain text ── */
      body.a11y-text-only #languages { display: block !important; }
      body.a11y-text-only #languages * { display: inline !important; background: #fff !important; color: #000 !important; position: static !important; }
      body.a11y-text-only #languages img { display: none !important; }
      body.a11y-text-only #languages ul,
      body.a11y-text-only #languages li { display: inline !important; list-style: none !important; margin: 0 4px !important; padding: 0 !important; }
      body.a11y-text-only #languages .language { display: inline !important; }
      body.a11y-text-only #languages .triangle { display: none !important; }
      body.a11y-text-only #languages .sl-flag { display: none !important; }

      /* ── Language menu: always keyboard-navigable ── */
      #languages .language { cursor: pointer; }
      #languages .language:focus,
      #languages .language[tabindex="0"]:focus {
        outline: 3px solid #0057b8 !important;
        outline-offset: 2px !important;
        background: #e8f0fc !important;
        border-radius: 3px !important;
      }

      /* ── Lang shortcuts panel ── */
      #a11y-lang-shortcuts {
        background: #f0f4fb;
        border: 1px solid #b0c4e8;
        border-radius: 6px;
        padding: 8px 10px;
        font-size: 0.75rem;
        color: #333;
        margin-top: 4px;
      }

      /* ── Dropdown keyboard accessibility ── */
      .dropdown { position: relative; }
      .js-dropdown-list { list-style: none; padding: 0; margin: 0; }
      .js-dropdown-list[aria-hidden="true"] { display: none; }
      /* The colour has to be restated, not just the background.
         pages.css styles `.dropdown li:focus` as white on orange. This rule has
         the same specificity and loads later, so it won this pair's background
         but not its colour — leaving white text on a pale blue focus ring,
         which is roughly 1.5:1 contrast and effectively unreadable. Setting
         both here keeps the two files from half-overriding each other. */
      .js-dropdown-list li[tabindex="0"]:focus,
      .js-dropdown-list li:focus {
        outline: 3px solid #0057b8;
        background: #e8f0fc;
        color: #16233b;
      }

      /* The option matching the active filter, so the open list shows what is
         currently applied. Dark on a light tint for the same reason. */
      .js-dropdown-list li[aria-selected="true"] {
        background: #f0f4fb;
        color: #16233b;
        font-weight: 700;
      }
      .js-dropdown-list li[aria-selected="true"]:hover {
        background: #f4750f;
        color: #fff;
      }

      /* ── Loading spinner description ── */
      .spiner-status { position: absolute; left: -9999px; }

      /* ── Global focus ring ── */
      :focus-visible { outline: 3px solid #0057b8 !important; outline-offset: 3px !important; border-radius: 2px !important; }