/*
 * public-tokens.css
 * The design tokens, reset and accessibility primitives for the redesigned public
 * patient flow (the provider portal, the clinic page, the public order forms).
 * Load this FIRST, then `public-portal.css`, both from <head>.
 *
 * Everything is namespaced `--pf-*` / `.pf-*`. The prefix is not cosmetic:
 * `Dispensary.public_page_additional_head` / `_body` are provider-authored HTML
 * rendered with |safe on the clinic page, so a bare `--p500` could be clobbered by
 * a provider's own <style> blob.
 *
 * This file does NOT carry the older `rp-*` system. That lives on in
 * `public-modern.css`, which is frozen and now serves only the /service/file-share/
 * flow -- keep the two apart.
 *
 * ---------------------------------------------------------------------------
 * The palette is FIXED, and every value below is measured, not eyeballed.
 *
 * `ServiceProvider.color` ("Barva zavoda") is deliberately NOT the seed: it is
 * '#FFFFFF' on 2 356 of 2 359 rows and its one real value has ~1.1:1 contrast
 * against white, so a per-organisation ramp would render identically everywhere
 * and be unreadable in the one place it did not.
 *
 * The mockup computed its ramp at runtime from #007576. That is worse than the
 * hand-authored ramp it shipped as a fallback: #007576 already sits at 5.52:1 on
 * white, so its `accessibleOnWhite(base, 4.5)` and `(base, 3)` both break on the
 * first iteration and collapse p500/p600/p700 into one colour, flattening every
 * hover state. These are the three-step values.
 *
 * Contrast against #ffffff:  p500 5.52  p600 6.59  p700 8.14  p900 12.19
 *                            ink 17.28  ink2 8.99
 * #fff on the filled surfaces: 5.52 / 6.59 / 8.14 / 12.19 -- so --pf-onp is #fff
 * on all four, and the mockup's conditional flip to dark ink is dead at this seed.
 * booking/tests/test_public_tokens.py re-derives all of this from THIS file, so a
 * later tweak that drops below AA fails a test rather than shipping.
 * ---------------------------------------------------------------------------
 */

/* ---------- Manrope ----------
 *
 * The artboards' typeface, and its 800 weight is load-bearing: every heading, the organisation
 * name, the section heads and the panel head are 800, and system stacks routinely stop at 700 --
 * so those were being SYNTHESISED (the browser smears the 700 outline) rather than drawn.
 *
 * SELF-HOSTED, NOT GOOGLE FONTS, and that is not a preference. A `<link>` to fonts.googleapis.com
 * makes every page in this flow contact Google before the visitor does anything -- the exact
 * transfer the map embed was rebuilt to avoid in this same change. Self-hosting also drops the
 * cross-origin handshake, so it is faster besides.
 *
 * ONE VARIABLE FONT per subset covers 400-800, so every weight the design uses comes from one
 * 25KB file rather than four static cuts. Only `latin` and `latin-ext` are shipped: Slovenian's
 * c/s/z carons are U+010D / U+0161 / U+017E, all inside latin-ext. Google serves four more subsets
 * (cyrillic, cyrillic-ext, greek, vietnamese); none is reachable from this UI's two languages, and
 * `unicode-range` means a browser downloads a file only when the page actually uses a character
 * from it, so the two here cost nothing when unused.
 *
 * `font-display: swap` renders the fallback immediately and repaints when Manrope arrives -- on a
 * public healthcare page, text that is readable late is better than text that is invisible early.
 *
 * Licence: SIL Open Font License 1.1, copied verbatim to fonts/manrope/OFL.txt. Self-hosting is
 * what the OFL is for; the only obligation is to keep that notice with the files.
 *
 * The `url()`s are relative to THIS file, which is what lets ManifestStaticFilesStorage rewrite
 * them to hashed names during collectstatic. An absolute /static/... path would be left alone and
 * would 404 under the manifest. */
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/manrope/manrope-latin-ext.6d36d5bdedfa.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/manrope/manrope-latin.938c6e8019b6.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
        U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
        U+FFFD;
}

:root {
    /* Type */
    /* The system stack stays as the fallback, so the page is readable during `swap` and if the
       woff2 fails to load. */
    --pf-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --pf-fs: 18px;
    --pf-lh: 1.6;
    --pf-lh-head: 1.15;
    --pf-ls-head: -0.015em;

    /* Brand ramp (Gospodar zdravja) */
    --pf-p50: #f0f8f8;
    --pf-p100: #dcefef;
    --pf-p200: #b9dedd;
    --pf-p500: #007576;
    --pf-p600: #00686a;
    --pf-p700: #00595b;
    --pf-p900: #053c3e;
    --pf-onp: #ffffff;

    /* Ink and surfaces */
    --pf-ink: #101d1d;
    --pf-ink2: #3d4c4c;
    --pf-ground: #ececeb;
    --pf-card: #ffffff;
    --pf-card-line: rgba(0, 0, 0, 0.12);

    /* Two line tokens.
       --pf-line is the mockup's own --line and is used everywhere the mockup uses
       it: card borders, section rules, table separators. At 1.44:1 that is fine
       there -- WCAG 1.4.11 asks for 3:1 on "visual information required to identify
       a component", and a card carrying a heading, body copy and a "->" affordance
       is identified by its content, not its outline. Its ACTIVE state is carried by
       --pf-p700 (8.14:1) plus a tint, so the state indication clears the bar.
       --pf-line-strong is 4.00:1 on white, 3.72:1 on --pf-p50, 3.39:1 on
       --pf-ground. It is for controls where the border genuinely IS the only thing
       identifying the control: bare form inputs, selects and textareas. */
    --pf-line: #cfd9d8;
    --pf-line-strong: #6f8382;
    /* Focus ring for the p900 bands (footer, cookie bar). The default ring is --pf-p700,
       which is 1.50:1 there -- invisible. 12.19:1 on p900, 11.73:1 on the SoaPrevent p900. */
    --pf-focus-on-dark: #ffffff;

    /* Geometry */
    --pf-radius: 20px;
    --pf-radius-m: 16px;
    --pf-radius-s: 12px;
    --pf-shadow: 0 20px 60px rgba(5, 60, 62, 0.10);
    --pf-shadow-hover: 0 10px 26px rgba(5, 60, 62, 0.13);
    --pf-shell: 1180px;

    /* Minimum interactive target. Hero and primary actions go to 56-60px. */
    --pf-tap: 48px;
}

/* SoaPrevent. Same markup, same component rules, different literals -- so no
   partial has to be forked for the company-facing pages that share one.
   #017475 is the colour public-soaprevent.css already re-points rp-* to.
   Contrast vs white: p500 5.59  p600 6.59  p700 7.59  p900 11.73. */
.pf-theme-soaprevent {
    --pf-p50: #f0f7f7;
    --pf-p100: #dbecec;
    --pf-p200: #9ecacb;
    --pf-p500: #017475;
    --pf-p600: #016869;
    --pf-p700: #015e5f;
    --pf-p900: #043f40;
}

/* Animate in-page fragment jumps instead of snapping: the skip link to #pf-main, the hero CTA and
 * the header/footer nav to #ambulante / #kontakt.
 *
 * UNSCOPED, and it has to be. `scroll-behavior` is read from the SCROLLING ELEMENT, which for the
 * document is <html> -- putting it on `.pf` (which sits on <body>) would do nothing. This is the
 * second deliberate unscoped rule in this file, after `[hidden]` below.
 *
 * The blast radius is bounded by where this stylesheet is loaded, i.e. only the public patient
 * flow's three chromes -- but within those pages it governs EVERY scroll the browser performs,
 * including `scrollIntoView()` and the scroll that `.focus()` causes. That is wanted here:
 * wireOpenPanel focuses the booking panel's <summary>, and that movement now eases too.
 *
 * No duration: CSS does not expose one, so the browser chooses (Chrome's is distance-dependent and
 * noticeably longer than 100ms). That is the trade for deleting the rAF tween this replaced --
 * along with the tween's manual focus handling, which the browser now does natively again, since
 * the fragment navigation is no longer intercepted. */
html {
    scroll-behavior: smooth;
}

/* ---------- Base ---------- */
/* Scoped under .pf so nothing leaks into the pages that still load Bootstrap 3.
   On the two chrome variants that keep templates/base.html these rules land after
   bootstrap.min.css, which sets body font, `a` colour, `label` weight and heading
   sizes globally -- so component selectors stay at one class and restate what
   Bootstrap would otherwise win. */
.pf {
    font: var(--pf-fs) / var(--pf-lh) var(--pf-font);
    color: var(--pf-ink);
    background: var(--pf-ground);
    -webkit-font-smoothing: antialiased;
}

.pf *,
.pf *::before,
.pf *::after {
    box-sizing: border-box;
}

.pf h1,
.pf h2,
.pf h3,
.pf h4 {
    font-family: var(--pf-font);
    line-height: var(--pf-lh-head);
    letter-spacing: var(--pf-ls-head);
    color: var(--pf-ink);
    margin: 0 0 0.5em;
}

.pf p {
    margin: 0 0 0.75em;
}

.pf a {
    color: var(--pf-p700);
    text-decoration: none;
}

.pf a:hover {
    color: var(--pf-p600);
    text-decoration: underline;
}

.pf img {
    max-width: 100%;
}

/* THE `hidden` ATTRIBUTE HAS TO BE MADE TO WORK, and `!important` is not optional here.
 *
 * The browser's own `[hidden] { display: none }` lives in the USER-AGENT origin, so it loses to
 * any author declaration at all -- and `.pf-cliniccard`, `.pf-field`, `.pf-clinicgrid`,
 * `.pf-alert` and a dozen more all declare `display`. Without this rule `el.hidden = true` set
 * an attribute and changed nothing:
 *
 *   - the location filter marked three clinic cards hidden and all three kept rendering at
 *     `display: flex`, 1090x218 each (measured, not inferred);
 *   - "Nimam elektronske pošte" disabled and cleared the e-mail field but left its row on screen;
 *   - the "no clinics at this location" warning could never be hidden, so it showed on every
 *     directory;
 *   - `.pf-lang__go` and the help-panel "Več..." button, both hidden by public-portal.js, stayed.
 *
 * Raising specificity instead of using `!important` does not work either: at equal specificity
 * source order decides, and public-portal.css loads after this file, so every component `display`
 * would still win. This is the one place in the two sheets where `!important` is correct -- it is
 * restoring a platform behaviour the component layer accidentally overrides, not winning an
 * argument with another rule.
 *
 * Unscoped on purpose. `.pf [hidden]` would miss the `.pf` element itself and anything the JS
 * appends to `document.body`. */
[hidden] {
    display: none !important;
}

/* ---------- Accessibility primitives ---------- */

/* NO `border-radius` here. It was 6px, copied from the artboard's own reset -- where it is
   harmless because every artboard radius is an inline style, which beats any selector. Here
   `.pf a:focus-visible` is (0,2,1) and every component rule is one class, (0,1,0), so the 6px won:
   focusing a service tile (16px), a clinic card (16px) or a button (12px) snapped its ring to a
   near-square, and `.pf-skip` -- which only ever exists while focused -- was drawn at 6px instead
   of its own radius. Browsers already follow each element's border-radius when drawing an outline,
   so removing the declaration gives every component its designed shape and leaves a bare inline
   link with a rectangular ring, which is correct. */
.pf a:focus-visible,
.pf button:focus-visible,
.pf select:focus-visible,
.pf input:focus-visible,
.pf textarea:focus-visible,
.pf summary:focus-visible {
    outline: 3px solid var(--pf-p700);
    outline-offset: 3px;
}

/* THE RING NEEDS A SECOND COLOUR FOR THE DARK BANDS. --pf-p700 on --pf-p900 is 1.50:1
   (1.55:1 in the SoaPrevent scope), i.e. no visible focus indicator at all -- and everything in
   those two bands is a control: the five footer nav links, the "Želim brezplačno urejati..."
   link, the two links in the powered-by row, and both cookie-bar buttons. --pf-onp is 12.19:1 on
   p900 (11.73:1 on the SoaPrevent p900), so one inverse token covers both themes.

   `outline-offset: 3px` puts the ring clear of the element edge, so it lands on the p900 band even
   for the white-filled accept button and does not merge into it.

   (0,2,1) each, matching the primitive above and winning on file order. */
.pf-footer a:focus-visible,
.pf-cookiebar a:focus-visible,
.pf-cookiebar button:focus-visible {
    outline-color: var(--pf-focus-on-dark);
}

/* Visually hidden but reachable by assistive tech. Bootstrap's .sr-only is not
   available on the standalone shell, which loads no Bootstrap. */
.pf-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link: first focusable element in the body, target <main id="pf-main">. */
.pf-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 12px 20px;
    min-height: var(--pf-tap);
    display: inline-flex;
    align-items: center;
    background: var(--pf-card);
    color: var(--pf-p700);
    font: 700 var(--pf-fs) / 1.2 var(--pf-font);
    border: 2px solid var(--pf-p700);
    border-radius: 0 0 var(--pf-radius-s) 0;
}

.pf-skip:focus {
    left: 0;
}

/* `html` IS LISTED SEPARATELY AND IS NOT OPTIONAL. The three selectors below are `.pf *`, i.e.
 * DESCENDANTS of the element carrying `.pf` -- and `.pf` is on <body>, so <html> is its ANCESTOR and
 * matches none of them. Without this first line the `scroll-behavior: smooth` set on <html> above
 * would survive `prefers-reduced-motion: reduce`, and smooth scrolling is exactly the kind of
 * vestibular trigger that setting exists to switch off. The `.pf *` rules kept their own
 * `scroll-behavior: auto` for any nested scroll container inside the page. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    .pf *,
    .pf *::before,
    .pf *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}
