/* GORJE-126: text size and the version for partially sighted visitors (behaviour in vid.js).
   1. the «Aa» button in the header and its panel; 2. html[data-vid] - black on white / yellow on black, chosen by the
   visitor; 3. @media (prefers-contrast: more) - the device asks for more contrast; 4. forced-colors - Windows contrast themes.
   Colours here only from the brand tokens or the two version pairs below, every pair at least 7 : 1 in the version
   (check: node audit/kontrasti-126/kontrasti.mjs, project folder). */

/* ---------- 1. the button and the panel ---------- */
.vid-gumb { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; flex: none; border-radius: var(--r-gumb);
  font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; color: var(--noc); transition: color calc(var(--cas-odziv) * var(--k)) ease; }
.vid-gumb .vid-a { font-size: .78em; }
.vid-gumb[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--noc); }
@media (hover: hover) and (pointer: fine) { .vid-gumb:hover { color: var(--jezero); } }

.vid-plosca { position: fixed; inset: auto; top: calc(env(safe-area-inset-top, 0px) + var(--glava-h) + 0.5rem); right: max(1rem, calc((100vw - var(--vsebina-max)) / 2));
  width: min(23rem, calc(100vw - 2rem)); max-height: calc(100dvh - var(--glava-h) - 1.5rem); overflow: auto; margin: 0; padding: 1.25rem 1.25rem 1rem;
  border: 0; border-radius: var(--r-kartica); background: var(--bela); color: var(--noc); box-shadow: var(--senca-okno); font-family: var(--f-tekst); font-size: var(--t-base); line-height: 1.5; }
.vid-plosca { display: grid; gap: 0.75rem; }
.vid-plosca:not(:popover-open) { display: none; }
@supports not selector(:popover-open) { .vid-plosca { display: none; } .vid-plosca.je-odprta { display: grid; } }
.vid-plosca .oznaka { color: var(--megla); }
.vid-plosca .oznaka + * { margin-top: -0.25rem; }
.vid-velikost { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.vid-velikost button { display: flex; align-items: center; justify-content: center; min-height: 3rem; border-radius: var(--r-polje); box-shadow: inset 0 0 0 1.5px var(--crta);
  font-weight: 700; color: var(--noc); line-height: 1; transition: box-shadow calc(var(--cas-odziv) * var(--k)) ease; }
.vid-velikost [data-vel="-"] { font-size: 0.9375rem; }
.vid-velikost [data-vel="0"] { font-size: 1.125rem; }
.vid-velikost [data-vel="+"] { font-size: 1.375rem; }
.vid-velikost button[aria-disabled="true"] { color: var(--megla); box-shadow: inset 0 0 0 1px var(--crta); cursor: default; }
@media (hover: hover) and (pointer: fine) { .vid-velikost button:not([aria-disabled="true"]):hover { box-shadow: inset 0 0 0 1.5px var(--noc); } }
.vid-zdaj { font-size: var(--t-sm); color: var(--megla); }
.vid-zdaj strong { color: var(--noc); font-family: var(--f-glas); font-size: var(--t-stevilka); font-weight: 600; font-variant-numeric: tabular-nums; }
.vid-izbire { display: grid; gap: 0.5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.vid-izbire label { display: flex; align-items: center; gap: 0.75rem; min-height: 3rem; padding: 0.375rem 0.75rem; border-radius: var(--r-polje); box-shadow: inset 0 0 0 1.5px var(--crta); cursor: pointer; }
.vid-izbire label:has(input:checked) { box-shadow: inset 0 0 0 2px var(--noc); font-weight: 600; }
.vid-izbire input { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; accent-color: var(--noc); }
.vid-vzorec { display: inline-grid; place-items: center; width: 2.25rem; height: 1.75rem; margin-left: auto; flex: none; border-radius: 0.375rem; font-weight: 700; font-size: 0.9375rem; line-height: 1; }
.vid-vzorec--obicajno { background: var(--sneg); color: var(--noc); box-shadow: inset 0 0 0 1px var(--crta); }
.vid-vzorec--crno { background: #FFFFFF; color: #000000; box-shadow: inset 0 0 0 1.5px #000000; }
.vid-vzorec--rumeno { background: #000000; color: #FFE600; }
.vid-opomba { font-size: var(--t-xs); color: var(--megla); }
/* big letters on a narrow screen: a button wraps its words instead of running off the screen (WCAG 1.4.10);
   at the normal size every button text fits on one line, so nothing changes there */
.gumb { white-space: normal; height: auto; min-height: 3rem; padding-block: 0.5rem; text-align: center; max-width: 100%; }
.gumb--majhen { min-height: 2.5rem; padding-block: 0.25rem; }
/* long words never push the page sideways; one-column grids may shrink below their longest word */
.gorje { overflow-wrap: break-word; }
:where(.naslov-strani, .sport-glava, .sport-glava .besedilo, .koledar-orodja, .clanek-glava) { grid-template-columns: minmax(0, 1fr); } /* :where = no weight, the components' own wide layouts win */
select.vnos { max-width: 100%; min-width: 0; }
.tema { min-width: 0; max-width: 100%; }
/* a phone with big letters: the display headings stop at the screen's width (body text keeps growing) */
@container (max-width: 30rem) {
  .t-5xl { font-size: min(var(--t-5xl), 14.5vw); }
  .t-4xl { font-size: min(var(--t-4xl), 13.5vw); }
  .t-3xl { font-size: min(var(--t-3xl), 11vw); }
  .t-2xl { font-size: min(var(--t-2xl), 9vw); }
}
/* narrower than 360 px of normal letters (a 390 phone at 200 %, a 320 phone): rows stack */
@container (max-width: 22.4375rem) {
  .gumb { line-height: 1.2; } /* a wrapped button label gets room between its lines */
  .sekcija--svizec { grid-template-columns: minmax(0, 1fr) 1.5rem; }
  .sekcija--svizec > div { grid-column: 1; grid-row: 2; }
  .sekcija--svizec .pu { grid-column: 2; grid-row: 2; }
  .vrstica-sport { flex-wrap: wrap; }
  .vrstica-sport > span, .vrstica-sport > .vrstica-svizec + span { flex: 1 1 10rem; min-width: 0; }
  .mreza-pokr { grid-template-columns: minmax(0, 1fr); }
  .segment { flex-wrap: wrap; border-radius: var(--r-polje); }
  .koledar-premik { flex-wrap: wrap; }
  .polje--ozko { min-width: 0; flex-basis: 100%; }
}
/* the header on a narrow screen with big letters: Vpis waits in the menu (its button stays at the bottom of the menu) */
@container (max-width: 22.4375rem) {
  .glava .gumb--majhen { display: none; }
  .glava .meni-gumb { font-size: 0; gap: 0; padding: 0; width: 2.75rem; justify-content: center; } /* the word «Meni» stays its name, only the icon shows */
  .glava .logo { width: min(8.5rem, 40vw); height: auto; flex: none; }
}

/* ---------- 2. the version for partially sighted visitors ---------- */
html[data-vid] { --gib: 0; scroll-behavior: auto; }
html[data-vid="crno"] {
  --vid-o: #FFFFFF; --vid-b: #000000;
  --sneg: #FFFFFF; --bela: #FFFFFF; --led: #FFFFFF; --crta: #000000; --noc: #000000; --megla: #000000; --jezero: #000000; --ivje: #FFFFFF;
  --napaka: #9B0F0F; --uspeh: #0B5A2A; --fokus-temno: #FFFFFF; --podlaga-okna: rgba(0, 0, 0, .72);
  --dogodek-tekma: #FFFFFF; --dogodek-nasi: #FFFFFF; --dogodek-drustvo: #FFFFFF; --gradient-1: #000000; --gradient-2: #000000; --gradient-3: #000000;
}
/* yellow on black only on screen: printed, the page stays black on white (no black ink sheet) */
@media screen {
  html[data-vid="rumeno"] {
    --vid-o: #000000; --vid-b: #FFE600;
    --sneg: #000000; --bela: #000000; --led: #000000; --crta: #FFE600; --noc: #FFE600; --megla: #FFE600; --jezero: #FFE600; --ivje: #000000;
    --napaka: #FF9C8F; --uspeh: #7CF2A6; --fokus-temno: #000000; --podlaga-okna: rgba(0, 0, 0, .8);
    --dogodek-tekma: #000000; --dogodek-nasi: #000000; --dogodek-drustvo: #000000; --gradient-1: #FFE600; --gradient-2: #FFE600; --gradient-3: #FFE600;
    color-scheme: dark;
  }
}
html[data-vid] { --senca-kartica: none; --senca-dvig: none; --senca-okno: 0 0 0 3px var(--vid-b); background: var(--vid-o); }
/* the card edge is drawn inside the card (an outer ring would be cut off in the sideways rows) */
html[data-vid] .kartica { outline: 2px solid var(--vid-b); outline-offset: -2px; }
html[data-vid] body { background: var(--vid-o); color: var(--vid-b); }
/* no photos, gradients or patterns under text; no glass */
html[data-vid] *, html[data-vid] *::before, html[data-vid] *::after { background-image: none !important; text-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
html[data-vid] :is(.prvi, .kartica-sport, .prvi-pavza, .prvi .gumb--drugotni, .hitro-iskanje .vnos, .okno-foto, .okno-foto-gumb, .noga-crta) { background-color: var(--vid-o) !important; }
html[data-vid] :where(.prvi, .prvi *, .kartica-sport, .kartica-sport *, .okno-foto-slika figcaption) { color: var(--vid-b) !important; }
html[data-vid] .kartica-sport { box-shadow: inset 0 0 0 2px var(--vid-b); }
html[data-vid] :is(.prvi-ozadje, .kartica-sport img, canvas.sneg) { display: none !important; }
html[data-vid] .prvi { min-height: 0; }
html[data-vid] .kartica-sport { aspect-ratio: auto; min-height: 12rem; }
html[data-vid] .noga-crta { background-color: var(--vid-b) !important; }
html[data-vid] :is(.osnutek-trak, .vprasaj-klub, .ton-najdeno, .k-oznaka, .md-stanje--placano, .md-stanje--odprto) { background-color: var(--vid-o); color: var(--vid-b); box-shadow: inset 0 0 0 2px var(--vid-b); }
html[data-vid] mark { background-color: var(--vid-b); color: var(--vid-o); }
/* bigger, heavier, calmer type */
html[data-vid] body { line-height: 1.65; }
html[data-vid] :is(h1, h2, h3, h4, .t-3xl, .t-4xl, .t-5xl, .t-2xl, .t-xl) { font-weight: 700; letter-spacing: 0; }
html[data-vid] :is(.t-xs, .oznaka) { font-size: max(var(--t-sm), 0.9375rem); }
html[data-vid] .oznaka { letter-spacing: .04em; }
/* the main button: solid, no gradient; every button with a visible edge */
html[data-vid] .gumb--glavni { background-color: var(--vid-b); }
html[data-vid] :is(.gumb--glavni, .gumb--glavni *) { color: var(--vid-o) !important; }
/* --ivje is quiet text on the dark sections, so in the version it is the light colour; its few edges on light ground follow the text */
html[data-vid] :is(.profil, .jezik-sl) { border-color: currentColor; }
html[data-vid] .stikalo-tir { background-color: transparent; box-shadow: inset 0 0 0 2px currentColor; }
html[data-vid] .stikalo-tir::after { background-color: currentColor; }
html[data-vid] .gumb--drugotni { box-shadow: inset 0 0 0 2px currentColor; }
html[data-vid] :is(.k-celica.je-danes .k-st) { background-color: var(--vid-b); color: var(--vid-o); }
html[data-vid] :is(.teden-dan.je-danes, .k-teden-dan.je-danes) { box-shadow: inset 0.25rem 0 0 var(--vid-b); }
html[data-vid] .vnos { box-shadow: inset 0 0 0 2px var(--vid-b); }
html[data-vid] ::placeholder { color: var(--vid-b); opacity: .85; }
/* links are underlined, the focus ring is thick */
html[data-vid] main :is(p, li, dd, td, figcaption, .povezava) a:not(.gumb), html[data-vid] .povezava, html[data-vid] .noga a, html[data-vid] .pot a {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
html[data-vid] .glava-meni a[aria-current] { border-bottom-width: 4px; border-bottom-color: currentColor; }
html[data-vid] :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 4px solid var(--vid-b) !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px var(--vid-o) !important; }
/* no inverted blocks in the version: the dark sections (results, history, footer) take the page's own pair, with an edge
   on top; cards inside them get the page pair back (inside .temno the tokens are swapped once more) */
html[data-vid] .temno { --noc: var(--vid-o); --bela: var(--vid-b); --ivje: var(--vid-b); --megla: var(--vid-b); --jezero: var(--vid-b); --sneg: var(--vid-o); --led: var(--vid-o);
  --fokus-temno: var(--vid-b); background-color: var(--vid-o); color: var(--vid-b); box-shadow: inset 0 3px 0 var(--vid-b); }
html[data-vid] .temno :is(.kartica, .kartica-rezultat, .kartica-zgodovina) { --noc: var(--vid-b); --bela: var(--vid-o); --megla: var(--vid-b); --ivje: var(--vid-b); --jezero: var(--vid-b); }
html[data-vid] .temno :is(a, button):focus-visible { outline-color: var(--vid-b) !important; box-shadow: 0 0 0 7px var(--vid-o) !important; }
/* the logo: black on white, white on black (one colour, like the brand's own one-colour versions) */
html[data-vid="crno"] :is(img.logo, .noga-logo) { filter: brightness(0); }
html[data-vid="rumeno"] :is(img.logo, .noga-logo) { filter: brightness(0) invert(1); }
html[data-vid] .vid-vzorec--obicajno { background: #F7F8FA; color: #1E3444; box-shadow: inset 0 0 0 1px #586973; }
html[data-vid] :is(.vid-velikost button, .vid-izbire label) { box-shadow: inset 0 0 0 2px var(--vid-b); }
html[data-vid] .vid-izbire label:has(input:checked) { box-shadow: inset 0 0 0 4px var(--vid-b); }
/* the panel itself on a narrow screen with big letters: less padding, no colour samples */
@container (max-width: 22.4375rem) { .vid-plosca { padding: 0.75rem; } .vid-izbire label { padding-inline: 0.5rem; gap: 0.5rem; } .vid-vzorec { display: none; } }

/* ---------- 3. the device asks for more contrast (macOS, iOS, Android «Increase contrast») ---------- */
@media (prefers-contrast: more) {
  html:not([data-vid]) { --megla: #3E4C55; --crta: #586973; --jezero: #0B5670; } /* --ivje is quiet text on dark ground: it stays */
  html:not([data-vid]) main :is(p, li, dd, td) a:not(.gumb) { text-decoration: underline; text-underline-offset: .2em; }
  html:not([data-vid]) .gumb--drugotni { box-shadow: inset 0 0 0 2px var(--noc); }
}

/* ---------- 4. Windows contrast themes: the system colours win, keep the edges that carried meaning ---------- */
@media (forced-colors: active) {
  .gumb, .vid-velikost button, .vid-izbire label, .kartica, .vnos, .segment button, .rubrike button, .zavihki button { border: 1px solid ButtonText; }
  .gumb--glavni { forced-color-adjust: none; background: ButtonText; color: ButtonFace; }
  .stikalo-tir, .tema .kvadrat, .soglasje .kvadrat { border: 1px solid ButtonText; }
  .tema input:checked + .kvadrat, .soglasje input:checked + .kvadrat { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .stikalo-tir::after { background: ButtonText; forced-color-adjust: none; }
  .k-celica.je-danes .k-st, .segment button[aria-pressed="true"], .rubrike button[aria-pressed="true"], .zavihki button[aria-selected="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid Highlight; }
  .pu, svg { forced-color-adjust: auto; }
}
/* the version: a step that cannot go further is dimmed (disabled controls are outside the contrast rule) */
html[data-vid] .vid-velikost button[aria-disabled="true"] { opacity: .55; }