/*
* public-portal.css
* Components for the redesigned public patient flow. Load AFTER public-tokens.css,
* both from . Every rule is scoped under `.pf`.
*
* Two constraints shape this file:
*
* 1. Two of the three chrome variants still extend templates/base.html, which loads
* Bootstrap 3. `{% block extra_css %}` sits after those s, so equal
* specificity wins -- but only if component selectors stay at ONE class. Bootstrap
* sets body font, `a` colour, `label` weight and heading sizes globally, so
* anything it would otherwise win is restated here rather than assumed.
* 2. Mobile-first. The portal and clinic pages switch between the phone and the
* desktop artboard at 720px, the boundary the v3 handoff recommends; the order
* forms keep their 640px, and the booking frame's fallback its 1024px (tied to the
* SPA's own layout). NOT Bootstrap's 767/991, and no hidden-xs/visible-xs in new
* markup -- those helpers do not exist on the standalone shell.
*
* Interactive borders use --pf-line-strong (3:1+), decorative rules use --pf-line.
* See the token file for why those are two tokens.
*/
/* ---------- Shell ---------- */
/* `overflow: clip`, NOT `hidden`, and the directory's pickers depend on it. `overflow: hidden` makes
the shell a scroll container, and a `position: sticky` descendant sticks to its nearest scroll
container -- which for the shell never scrolls, so the two pickers simply scrolled away with the
page. `clip` clips to the rounded corners exactly as `hidden` did without creating one. The
`hidden` line stays first as the fallback for an engine that predates `clip` (Safari < 16): there
the declaration below is dropped, the corners are still clipped, and the pickers merely do not
stick. */
.pf-shell {
max-width: var(--pf-shell);
margin: 0 auto;
background: var(--pf-card);
border: 1px solid var(--pf-card-line);
border-radius: 22px;
overflow: hidden;
overflow: clip;
box-shadow: 0 20px 60px rgba(5, 60, 62, 0.12);
}
/* The brand strip across the top of the frame; the footer carries its mirror image. */
.pf-shell::before {
content: "";
display: block;
height: 4px;
background: linear-gradient(90deg, var(--pf-p700) 0%, var(--pf-p500) 55%, var(--pf-p200) 100%);
}
.pf-body {
margin: 0;
/* Unconditional, as in the mockup: ~11px of ground around the card at 375px. */
padding: clamp(0px, 3vw, 40px);
background: var(--pf-ground);
}
@media (min-width: 720px) {
.pf-shell {
border-radius: var(--pf-radius);
box-shadow: var(--pf-shadow);
}
.pf-shell::before {
height: 5px;
}
}
/* ---------- Header ----------
* The phone artboard is two rows -- identity, then "Kontakt" and the language box side by side --
* and the desktop one is a single row with the name on the left and the language box and "Kontakt"
* pushed to the right. Mobile-first: the base rules are the phone, 720px switches to desktop, the
* boundary the handoff recommends ("prelom pri ~720 px").
*/
.pf-header {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px 16px;
border-bottom: 2px solid var(--pf-line);
background: var(--pf-card);
}
.pf-header__identity {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
/* The logo's home link. It wraps only the logo/initial box, so it must not pick up the header's
own spacing or the underline `.pf a:hover` adds -- there is no text here to underline, and a rule
under a 44px image reads as a rendering fault. `flex: none` keeps it from being squeezed when the
organisation name is long. */
.pf-header__home {
display: inline-flex;
align-items: center;
flex: none;
border-radius: var(--pf-radius-s);
}
.pf-header__logo {
max-height: 42px;
max-width: 180px;
width: auto;
object-fit: contain;
flex: none;
}
/* 2 of 2 359 providers have a logo, so this initial box is the DEFAULT state of the
header, not a fallback for an edge case. Sized to match the logo slot, and drawn like the
artboards' LOGO tile: a soft gradient tile on the phone, a flat --pf-p100 one on desktop. */
.pf-header__mark {
width: 42px;
height: 42px;
flex: none;
border-radius: var(--pf-radius-s);
background: linear-gradient(150deg, var(--pf-p100) 0%, var(--pf-p50) 100%);
color: var(--pf-p700);
display: grid;
place-items: center;
font: 800 18px/1 var(--pf-font);
}
.pf-header__name {
/* `normal`, as the artboards' `font` shorthand leaves it. */
font: 800 17px/normal var(--pf-font);
letter-spacing: -0.02em;
margin: 0;
min-width: 0;
}
/* Phone row two: "Kontakt" fills the row and the language box sits at its end. The DOM order is
the DESKTOP order (language, then "Kontakt" -- see _site_header.html), so `order` puts the nav
first here. `flex-wrap` stays as the failure mode for a very narrow screen: `.pf-shell` clips,
so `nowrap` would push the language box off the side with no way to reach it. */
.pf-header__tools {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.pf-header__tools .pf-nav {
order: -1;
}
.pf-nav {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
}
.pf-nav__link {
position: relative;
flex: 1 1 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--pf-tap);
padding: 0 12px;
border-radius: 10px;
/* --pf-line, the artboards' own border. The pill is a link with a visible text label, and
WCAG 1.4.11 does not ask for a 3:1 boundary on a control its text already identifies. */
border: 2px solid var(--pf-line);
background: var(--pf-card);
color: var(--pf-ink);
font: 600 17px/1.2 var(--pf-font);
text-align: center;
transition: background-color 0.16s;
}
/* The desktop hover underline: a 3px bar that grows in from the left. Drawn here so the rule
exists at every width, and switched on only in the 720px block -- the phone pill has no bar. */
.pf-nav__link::after {
content: "";
position: absolute;
left: 16px;
right: 16px;
bottom: 7px;
height: 3px;
border-radius: 999px;
background: var(--pf-p500);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.18s;
}
@media (min-width: 720px) {
.pf-header {
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 16px;
padding: 14px clamp(16px, 4vw, 44px);
}
.pf-header__identity {
gap: 12px;
}
.pf-header__logo {
max-height: 44px;
}
.pf-header__mark {
width: 44px;
height: 44px;
background: var(--pf-p100);
}
.pf-header__name {
font-size: clamp(18px, 2.4vw, 21px);
}
.pf-header__tools {
margin-left: auto;
gap: 16px;
}
.pf-header__tools .pf-nav {
order: 0;
}
.pf-nav {
flex: none;
}
/* The desktop artboard's nav is a plain padded anchor -- the bordered pill is the phone's. */
.pf-nav__link {
flex: none;
padding: 12px 16px;
border-color: transparent;
background: transparent;
font-size: 18px;
}
.pf-nav__link:hover {
background: var(--pf-p50);
}
.pf-nav__link:hover::after {
transform: scaleX(1);
}
}
/* ---------- Language selector ----------
* The two artboards differ MORE here than anywhere else in the header, and the base
* rules below are the MOBILE control (icon only, tight): gap 6, padding 0 8px, a 20px
* globe, a 44px 16px select, radius 10. The 720px block swaps in the desktop control:
* a wider pill, the word "Jezik", a 22px globe and a 40px 18px select.
*
* The BORDER is on .pf-lang__box (the