/* ==========================================================================
   Nastavitve dostopnosti

   Two halves. The first is the panel's own appearance; the second is what the
   preference classes do to the rest of the portal.

   The second half is deliberately small. Every switch is a class on <html> and
   nothing else, so a preference cannot reach into a component, and the whole
   feature can be removed by deleting one stylesheet and one script. The
   contrast switch in particular does not restyle anything: it redefines the
   design tokens, and the components follow because they were already built on
   them.
   ========================================================================== */

/* ------------------------------------------------------------- launcher -- */

/* WHERE THE BUTTON LIVES — finding B11 of docs/PREGLED-UX-19-09.md, closed
   21. 9. 2026.

   Until then the launcher was a tab fixed to the right edge at every width.
   On a wide screen that edge is empty margin: .wrap is 1140px with 20px of
   padding, so text never comes closer than (viewport - 1100) / 2 to the edge.
   On a phone the margin is 20px and the tab is 50px, so it sat over the end of
   whatever line scrolled past it — measured, not guessed: 457 distinct text
   runs and controls under it across seven pages at 320, 375 and 400px,
   including the hero's "…ali poiščite storitev" and the homepage's
   "…24 ur na dan." A fixed box over a page that scrolls under it will always
   cover something at some scroll position; there is no offset that fixes it.

   So the button now has two homes, and the choice between them is arithmetic,
   not taste:

     - IN THE TOP BAR, below 1440px. It is printed as the first item of
       .topbar-in (header.php), which is still the second tab stop after the
       skip link, and the header is sticky, so it is on screen at every scroll
       position — as reachable as the floating tab was, and now with its word
       "Dostopnost" printed beside the icon instead of revealed on hover.
       It sits in flow, so it cannot lie over anything.

     - ON THE RIGHT EDGE, from 1440px. The tab opens to about 150px on hover
       or focus; at 1440 the empty margin is 170px, so even opened it clears
       the text. Below that the resting tab would fit but the opened one would
       not, and a control that covers text the moment you point at it has the
       same defect with better manners.

   Positioned fixed inside the sticky header is safe: position:sticky is not a
   containing block for a fixed box (only transform, filter, contain and
   will-change are, and .site-head has none of them). */

.a11y-launcher{
  display:inline-flex; align-items:center; gap:var(--s-2);
  margin-right:auto;                 /* first in the row, pinned left */
  /* 32px, not the burger's 44: the top bar's rows are 28px and a taller
     button makes the sticky header taller on every page, which is the very
     band of screen this change is meant to give back. 32 x 44 is still well
     above the 24px of 2.5.8. */
  min-height:32px; min-width:44px; padding:2px var(--s-3) 2px var(--s-2);
  border:1px solid rgb(var(--band-veil) / .65); border-radius:10px;   /* as .burger */
  background:none; color:var(--band-ink);
  font:600 var(--step--1)/1 var(--font-body);
  cursor:pointer;
}
.a11y-launcher svg{display:block; flex:none; width:20px; height:20px}
.a11y-launcher:hover{background:rgb(var(--band-veil) / .16)}
.a11y-launcher-txt{white-space:nowrap}

/* On the narrowest phones the word would push the booking number onto a row
   of its own. The name is still there for assistive technology; the icon is
   the one every accessibility control on the web uses. */
@media (max-width:359px){
  .a11y-launcher{padding-inline:var(--s-2)}
  .a11y-launcher-txt{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
}

@media (min-width:1440px){
  .a11y-launcher{
    position:fixed; right:0; top:50%; transform:translateY(-50%);
    z-index:600;
    margin:0; min-height:52px; min-width:0; padding:var(--s-3);
    border:0; border-radius:var(--r) 0 0 var(--r);
    background:var(--teal); color:var(--on-brand);
    box-shadow:0 2px 12px rgb(0 0 0 / .22);
  }
  .a11y-launcher svg{width:26px; height:26px}
  .a11y-launcher:hover{background:var(--teal-deep)}

  /* The label is present for assistive technology at all times and appears
     for sighted readers on hover or focus. */
  .a11y-launcher-txt{
    max-width:0; overflow:hidden;
    transition:max-width .18s ease;
  }
  .a11y-launcher:hover .a11y-launcher-txt,
  .a11y-launcher:focus-visible .a11y-launcher-txt,
  .a11y-launcher[aria-expanded="true"] .a11y-launcher-txt{max-width:10rem}

  /* Standing on the page, not on the band, so the page's ring, not the
     header's white one that .site-head :focus-visible would otherwise give. */
  .site-head .a11y-launcher:focus-visible{
    outline:3px solid var(--accent); outline-offset:3px; box-shadow:none;
  }
}

/* ---------------------------------------------------------------- panel -- */

.a11y-panel[hidden]{display:none}

/* The dialog says aria-modal="true", so the rest of the page is inert to
   assistive technology and the Tab key. The scrim is how a sighted reader is
   told the same thing — without it the drawer reads as the page being clipped
   rather than as something opened on top of it. */
.a11y-scrim{
  position:fixed; inset:0; z-index:690;
  background:rgb(var(--scrim-panel) / .42);
}
.a11y-scrim[hidden]{display:none}

.a11y-panel{
  position:fixed; right:0; top:0; z-index:700;
  width:min(23rem, 100%); height:100%;
  overflow-y:auto; overscroll-behavior:contain;
  padding:var(--s-5);
  background:var(--card); color:var(--ink);
  border-left:2px solid var(--teal);
  box-shadow:-6px 0 28px rgb(0 0 0 / .24);
}
.a11y-panel:focus{outline:none}     /* it is focused programmatically, not tabbed to */

.a11y-head{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-3)}
.a11y-head h2{margin:0; font-size:var(--step-1); color:var(--teal-deep)}

.a11y-close{
  flex:none; width:40px; height:40px;
  display:grid; place-items:center;
  border:1px solid var(--line-strong); border-radius:10px;
  background:var(--card); color:var(--ink); cursor:pointer;
}
.a11y-close:hover{background:var(--tint)}
.a11y-close:focus-visible{outline:3px solid var(--accent); outline-offset:2px}

.a11y-intro{margin:var(--s-3) 0 var(--s-5); color:var(--muted); font-size:var(--step--1)}

/* ----------------------------------------------------------- text sizes -- */

.a11y-sizes{margin:0 0 var(--s-5); padding:0; border:0}
.a11y-sizes legend{
  padding:0; margin-bottom:var(--s-2);
  font:700 var(--step--1)/1.3 var(--font-body); color:var(--ink);
}
.a11y-size-row{display:flex; gap:var(--s-2)}
.a11y-size{
  flex:1; min-height:44px;
  border:1px solid var(--line-strong); border-radius:10px;
  background:var(--card); color:var(--ink); cursor:pointer;
  font:700 var(--step-0)/1 var(--font-body);
}
.a11y-size:hover{background:var(--tint)}
.a11y-size:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.a11y-size[aria-pressed="true"]{
  background:var(--teal); border-color:var(--teal); color:var(--on-brand);
}

/* -------------------------------------------------------------- toggles -- */

.a11y-list{list-style:none; margin:0 0 var(--s-4); padding:0}
.a11y-list li + li{margin-top:var(--s-3)}

.a11y-toggle{
  display:flex; align-items:center; gap:var(--s-3);
  width:100%; min-height:44px; padding:var(--s-2) var(--s-3);
  border:1px solid var(--line-strong); border-radius:10px;
  background:var(--card); color:var(--ink); cursor:pointer;
  text-align:left;
  font:600 var(--step-0)/1.3 var(--font-body);
}
.a11y-toggle:hover{background:var(--tint)}
.a11y-toggle:focus-visible{outline:3px solid var(--accent); outline-offset:2px}

/* The state is carried by aria-pressed, and the mark is the sighted reader's
   version of the same fact — not a second, separate source of truth. */
.a11y-mark{
  flex:none; width:22px; height:22px;
  border:2px solid var(--line-strong); border-radius:6px;
  background:var(--card);
  position:relative;
}
.a11y-toggle[aria-pressed="true"] .a11y-mark{
  background:var(--teal); border-color:var(--teal);
}
.a11y-toggle[aria-pressed="true"] .a11y-mark::after{
  content:""; position:absolute; left:6px; top:2px;
  width:5px; height:10px;
  border:solid var(--on-brand); border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg);
}
.a11y-toggle[aria-pressed="true"]{border-color:var(--teal); background:var(--tint)}

.a11y-hint{
  display:block; margin:var(--s-1) 0 0 calc(22px + var(--s-3) + var(--s-3));
  color:var(--muted); font-size:var(--step--1); line-height:1.4;
}

/* ---------------------------------------------------------------- reset -- */

.a11y-reset{
  width:100%; min-height:44px; margin-bottom:var(--s-5);
  border:2px solid var(--teal-deep); border-radius:10px;
  background:var(--card); color:var(--teal-deep); cursor:pointer;
  font:700 var(--step--1)/1 var(--font-body);
}
.a11y-reset:hover{background:var(--tint2)}
.a11y-reset:focus-visible{outline:3px solid var(--accent); outline-offset:2px}

/* --------------------------------------------------------- keys + links -- */

.a11y-keys{border-top:1px solid var(--line); padding-top:var(--s-4); margin-bottom:var(--s-4)}
.a11y-keys h3{margin:0 0 var(--s-2); font-size:var(--step--1); color:var(--ink)}
.a11y-keys dl{display:grid; grid-template-columns:auto 1fr; gap:var(--s-2) var(--s-3);
  margin:0; font-size:var(--step--1)}
.a11y-keys dt{margin:0}
.a11y-keys dd{margin:0; color:var(--muted)}
.a11y-keys kbd{
  display:inline-block; padding:2px 6px;
  border:1px solid var(--line-strong); border-radius:5px;
  background:var(--paper); color:var(--ink);
  font:600 .85em/1 var(--font-body);
}

.a11y-doclinks{list-style:none; margin:0; padding:0; font-size:var(--step--1)}
.a11y-doclinks li + li{margin-top:var(--s-2)}
.a11y-doclinks a{color:var(--teal-deep)}      /* 10.97 : 1 on card */

/* ------------------------------------------------------- narrow screens -- */

/* Below 560px the drawer becomes the whole screen. A 23rem panel on a 320px
   viewport would be the panel's own reflow failure. */
@media (max-width:560px){
  .a11y-panel{width:100%; border-left:0; padding:var(--s-4)}
}

@media (prefers-reduced-motion:reduce){
  .a11y-launcher-txt{transition:none}
}

/* ==========================================================================
   THE PREFERENCES

   Everything below is switched on by a class on <html>, set before the first
   paint by the inline script in inc/dostopnost.php.
   ========================================================================== */

/* ---- text size ---------------------------------------------------------
   The type scale is already expressed in rem, so moving the root size moves
   the whole scale — headings, spacing and the panel itself — in proportion.
   Nothing needs a second set of values. */
html.a11y-big { font-size:112.5%; }
html.a11y-huge{ font-size:125%;   }

/* ---- weight ------------------------------------------------------------ */
html.a11y-bold body{font-weight:600}
html.a11y-bold h1, html.a11y-bold h2, html.a11y-bold h3,
html.a11y-bold h4, html.a11y-bold strong, html.a11y-bold b{font-weight:800}

/* ---- spacing -----------------------------------------------------------
   The values are the ones named in WCAG 2.2 success criterion 1.4.12, which
   the portal is already tested against — so this switch cannot break a layout
   that tools/a11y-keyboard.mjs does not already cover. */
html.a11y-spacing body{
  line-height:1.6; letter-spacing:.05em; word-spacing:.1em;
}
html.a11y-spacing p{margin-bottom:1.6em}

/* ---- links -------------------------------------------------------------
   Every link in the content and the footer, except the ones that already have
   a shape of their own — buttons, chips, the 112 number. Those read as
   interactive without a line under them, and underlining a filled button just
   looks like a mistake.

   An earlier version of this rule listed the text elements a link could sit
   inside (p, li, dd, td...). It looked more careful and was in fact worse: the
   home page's cards are laid out in a <ul>, so their titles matched through
   the <li> while the identical department headings in a plain <div> grid did
   not. The reader would have seen half the cards underlined. A rule that
   depends on the markup an editor happened to produce is not a rule. */
html.a11y-links :is(main, .site-foot) a:not(.btn):not(.chip):not(.urgent-num){
  text-decoration:underline;
  text-underline-offset:.16em;
  text-decoration-thickness:from-font;
}

/* ---- contrast ----------------------------------------------------------
   No component is restyled. The tokens are redefined and every component that
   was built on them follows — which is the whole reason the palette is a set
   of custom properties in the first place.

   These five values are FIXED — the same under every palette — while the
   surfaces they sit on are not. That makes them the pairs most likely to be
   broken by a lighter palette, and the least likely to be noticed, because a
   reviewer looking at a palette is looking at it in its normal state. So
   tools/kontrast.php re-measures each of them against every palette's
   surfaces (the pairs marked HC) and tools/gates.sh fails the build if one
   drops below AA. The numbers are no longer written here, for the same reason
   they are no longer written in tokens.css: a hand-kept ratio outlives the
   change that invalidated it. Run: php tools/kontrast.php */
html.a11y-contrast{
  --muted:        #2f3b39;
  --line:         #8a9a97;
  --line-strong:  #45534f;
  --band-ink-soft:#eef7f6;
  --band-ink-muted:#e6f2f1;
  /* Added 19. 9. 2026. components.css says over .herit that the heritage
     band's quiet tier was NOT lifted here "because the palette mechanism had
     to ship as a provable no-op" — a reason that expired the day the palette
     layer shipped, and a reader who asks for more contrast should not still be
     paying for it. Same value as --band-ink-muted, which is the tier it stands
     in for inside that band. The two light-band palettes override it back in
     their own html.a11y-contrast:root block, where near-white would be
     unreadable, and tools/kontrast.php measures the merged result. */
  --band-ink-lift:#e6f2f1;
}

/* ---- cursor ------------------------------------------------------------
   A 32px arrow, white with a black outline, so it stays visible over the
   photographs in the hero as well as over the paper background. Inline SVG:
   no extra request, and nothing to lose in a deploy. */
html.a11y-cursor,
html.a11y-cursor *{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 3l17 13-7.2.9 4.2 8.6-3.6 1.8-4.2-8.7-5.2 4.9z' fill='%23fff' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, auto;
}
/* Text fields keep an I-beam. The universal rule above would hand them the
   arrow, so switching ON the preference that exists to make the pointer easier
   to track would remove the one cue that says "you can type here" — including
   in the site's own search box. */
html.a11y-cursor input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]),
html.a11y-cursor textarea{
  cursor:text;
}

html.a11y-cursor a,
html.a11y-cursor button,
html.a11y-cursor summary,
html.a11y-cursor [role="button"]{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M12 3.5c1.4 0 2.5 1.1 2.5 2.5v7.5h1V12c0-1.2 1-2.2 2.2-2.2s2.3 1 2.3 2.2v1.5h1V13c0-1.2 1-2.2 2.2-2.2S25.5 11.8 25.5 13v7.5c0 4.4-2.8 8-7.5 8-5 0-8.5-3.4-8.5-8.2V6c0-1.4 1.1-2.5 2.5-2.5z' fill='%23fff' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 10 3, pointer;
}

/* ---- stop motion -------------------------------------------------------
   The same end state as prefers-reduced-motion, reached by choice rather than
   by an operating-system setting — a reader on a shared or public computer
   often cannot change that setting. */
html.a11y-still .slide{animation:none !important}
html.a11y-still .slide:nth-child(1){opacity:1}
html.a11y-still .slide:nth-child(2),
html.a11y-still .slide:nth-child(3){opacity:0}
html.a11y-still *,
html.a11y-still *::before,
html.a11y-still *::after{
  animation-duration:.001ms !important; animation-iteration-count:1 !important;
  transition-duration:.001ms !important; scroll-behavior:auto !important;
}