/* SBT Portal — base layer.
 * Tokens come from tokens.css. Nothing here hard-codes a colour. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
     font-family:var(--font-body);font-size:var(--step-0);line-height:1.6;
     -webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);line-height:1.15;
     text-wrap:balance;margin:0 0 var(--s-4)}
h1{font-size:var(--step-5);font-weight:800}
h2{font-size:var(--step-3);font-weight:700}
h3{font-size:var(--step-2);font-weight:700}
img,svg,video{max-width:100%;height:auto}

/* Without !important, portal-wide filters count correctly and hide nothing:
   .wait-item{display:grid} beats the browser default for [hidden]. */
[hidden]{display:none !important}

/* 2.4.11 Focus Not Obscured. The old theme had ONE scroll-margin-top in the
   whole codebase, so every anchor landed under the sticky header. */
:target,[id]{scroll-margin-top:calc(var(--header-h) + var(--s-4))}

/* No single colour clears 3:1 on both the light surfaces and the dark teal
   header, so the ring is two-tone. */
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;
     box-shadow:0 0 0 4px var(--card)}
.site-head :focus-visible,.site-foot :focus-visible{outline-color:var(--band-ink);
     box-shadow:0 0 0 4px var(--band-deep)}

.skip{position:absolute;left:-9999px;top:0;z-index:999;padding:var(--s-3) var(--s-4);
     background:var(--card);color:var(--ink);border-radius:0 0 var(--r) 0}
.skip:focus{left:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}

/* Every interactive border uses the accessible token (1.4.11). */
input,select,textarea{border:1px solid var(--line-strong);border-radius:var(--r);
     padding:var(--s-3) var(--s-4);font:inherit;color:var(--ink);background:var(--card)}

/* 2.5.8 Target Size */
/* Base link colour.
 *
 * There was none. Every component coloured its own anchors and anything that
 * did not match one of those selectors fell through to the browser default
 * (#0000EE, and #551A8B once visited). Measured across eight pages before this
 * rule existed: 45 links in the news directory, 11 on the o-bolnisnici tiles,
 * 10 on the patient tiles, 7 in the unit list, 6 on the waiting-times cards,
 * plus pagination and the source note. Every dark-background anchor
 * (.topbar, .main-nav, .mega, .breadcrumbs, .urgent-txt, .site-foot,
 * .qa-primary) carries its own higher-specificity colour and is unaffected.
 *
 * --teal, not the sample's --teal-bright: 7:1 on paper against 4.3:1. */
a{color:var(--teal);text-underline-offset:.18em}
a:hover{color:var(--teal-deep)}
/* The masthead logo sits on the dark header. */
.brand{color:var(--band-ink)}

/* A form control sizes to its content — a <select> to its longest option — and
   will happily exceed its container and scroll the whole page sideways on a
   phone. Two components hit this (the waiting-times filter and the catalogue
   filter) before the rule existed, both with real department names in the
   options. This is the floor; components still set their own widths. */
/* Long unbroken tokens — a document filename in a link, an e-mail address,
   a URL — otherwise push past the viewport and scroll the page sideways. The
   site map hit this with an uploaded PDF's escaped filename. */
body{overflow-wrap:break-word}
a{overflow-wrap:anywhere}

:is(input,select,textarea){max-width:100%}

a,button,[role="button"],summary{min-height:24px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;
    scroll-behavior:auto !important}
}