/*
 * Public layer (phone, screens, QR screen), on top of Bootstrap 5.
 * Custom on purpose: brand colours, the photo background, the top bar and the sizes of the big numbers.
 * Layout itself is done with Bootstrap classes in the templates.
 */
:root {
    --wr-brand: #0161bd;
    --wr-brand-dark: #00448b;
    --wr-accent: #e8962e;
    /* overlay over the photo = colour (r,g,b) + opacity, so a company house style can set both (public-brand.css) */
    --wr-overlay-color-rgb: 0, 68, 139;
    --wr-overlay-alpha: .80;
    --wr-overlay: rgba(var(--wr-overlay-color-rgb), var(--wr-overlay-alpha));
    --wr-overlay-deep-color-rgb: 0, 40, 90;
    --wr-overlay-deep-alpha: .88;
    --wr-overlay-deep: rgba(var(--wr-overlay-deep-color-rgb), var(--wr-overlay-deep-alpha));
    --wr-photo: url("/img/bg-waiting-line.jpg");
}

/* screens and QR screen: everything grows with the screen width (16px on an iPad, 24px on full HD) */
html:has(body.wr-deep),
html:has(body.wr-photo-qr) {
    font-size: clamp(16px, 1.25vw, 32px);
}

/* standing QR screen (kiosk, 1080x1920): the width is the limit, so grow faster with it (21.6px at 1080, as 24px on
   a full HD landscape screen); an iPad (768) stays at 16px */
@media (orientation: portrait) {
    html:has(body.wr-photo-qr) {
        font-size: clamp(16px, 2vw, 32px);
    }
}

/* font: Montserrat (static/fonts), or the one of the house style (--wr-font, StyleFont) */
body.wr-public {
    --bs-body-font-family: var(--wr-font, 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif);
    font-family: var(--bs-body-font-family);
    /* digits as high as capitals (SW001): some fonts (Corpid) have old-style figures by default */
    font-variant-numeric: lining-nums;
    min-height: 100vh;
    min-height: 100dvh;
    color: #fff;
    background-color: var(--wr-brand-dark);
}

/* photo with blue overlay; a fixed layer instead of background-attachment: fixed (not supported on iOS) */
body.wr-public::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(var(--wr-overlay), var(--wr-overlay)), var(--wr-photo) center / cover no-repeat;
}

body.wr-public.wr-photo-qr {
    --wr-photo: url("/img/bg-qr-scan.jpg");
}

body.wr-public.wr-deep {
    --wr-overlay: var(--wr-overlay-deep);
}

.text-brand {
    color: var(--wr-brand-dark) !important;
}

/* text on the accent colour: dark on the standard orange (white has too little contrast, WCAG 1.4.3); with a house style
   the text colour that contrasts best (--wr-accent-text, CompanyStyleService) */
.text-bg-accent {
    color: var(--wr-accent-text, #212529) !important;
    background-color: var(--wr-accent) !important;
}

/* ---------- top bar: logo or company name, optional subtitle and clock ----------
   --wr-logo-h = height of the logo: standard 3.25rem, or a % of the screen height (house style of the company,
   --wr-topbar-height, e.g. 0.11 = 11vh as in v1 of the Tweede Kamer), at most 10rem. The bar is the logo plus a margin. */
.wr-topbar {
    --wr-logo-h: clamp(3.25rem, calc(var(--wr-topbar-height, 0) * 100vh), 10rem);
    min-height: calc(var(--wr-logo-h) + 1.5rem);
    color: var(--wr-brand-dark);
}

.wr-logo {
    display: block;
    width: auto;
    height: auto;
    max-height: var(--wr-logo-h, 3.25rem);
    /* never wider than the screen (with a larger text size the rem height grows, WCAG 1.4.10) */
    max-width: min(calc(var(--wr-logo-h, 3.25rem) * 4), 100%);
}

/* logo in the "Powered by" line: a mask, so it takes a colour (standard white; house style: the text on the photo) */
.wr-powered-logo {
    display: inline-block;
    height: 1.25rem;
    aspect-ratio: 168 / 100;
    background-color: var(--wr-public-text, #ffffff);
    -webkit-mask: url("/img/logo-wachtrijtje-transparent-white-2x.png") center / contain no-repeat;
    mask: url("/img/logo-wachtrijtje-transparent-white-2x.png") center / contain no-repeat;
}

/* screens: in rem, so it grows with the screen (60px high on an iPad) */
.wr-topbar-lg {
    --wr-logo-h: clamp(3.75rem, calc(var(--wr-topbar-height, 0) * 100vh), 10rem);
    min-height: calc(var(--wr-logo-h) + 1.75rem);
}

.wr-clock {
    font-variant-numeric: tabular-nums lining-nums;
    font-size: 2.4rem;
    line-height: 1;
}

/* ---------- phone: ticket card ---------- */
.wr-card-col {
    max-width: 32rem;
}

/* never wider than its card: the size follows the width of the card (container units), so with a larger text size or
   wider letter spacing (browser or phone setting, WCAG 1.4.4 / 1.4.12) a number keeps fitting; it is far above
   any minimum size already */
.card-body:has(> .wr-ticket-number) {
    container-type: inline-size;
}

.wr-ticket-number {
    font-size: min(20cqi, 4.6rem);
    font-weight: 900;
    line-height: 1.05;
    /* one word, so on one line; only a very wide number with extra letter spacing goes to the next line rather than
       being cut off */
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--wr-brand-dark);
}

.wr-stats > div + div {
    border-left: 1px solid var(--bs-border-color);
}

.wr-stats svg {
    color: var(--wr-brand);
}

.wr-stat-value {
    font-size: 1.25rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- screen: now serving + desk list ---------- */
.wr-now-number {
    font-size: min(12vw, 22vh);
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums lining-nums;
}

.wr-screen-solo .wr-now-number {
    font-size: min(17vw, 30vh);
}

.wr-desk-row {
    background-color: rgba(255, 255, 255, .13);
}

/* latest called desk: accent colour with white text, like .text-bg-accent (the house style checks the accent colour
   against white text, StyleKey PUB_ACCENT Text.WHITE_LARGE); the line, waiting time and number follow it */
.wr-desk-row.wr-latest {
    background-color: var(--wr-accent);
    color: #fff;
}

.wr-desk-row.wr-inactive {
    opacity: .55;
}

.wr-desk-number {
    font-size: min(3.2vw, 5vh);
    font-weight: 800;
    font-variant-numeric: tabular-nums lining-nums;
    white-space: nowrap;
}

.wr-desk-list-compact .wr-desk-number {
    font-size: min(2.4vw, 3.6vh);
}

/* ---------- QR screen ---------- */
.wr-qr-img {
    width: 100%;
    max-width: 22rem;
    height: auto;
    image-rendering: pixelated;
}

/* ---------- waiting time trend (messages ps.message.waitingline.*) ---------- */
.highlight-up {
    color: #dc3545;
}

.highlight-down {
    color: #198754;
}

.highlight-same {
    color: inherit;
}

/* capacity management: the QR code is replaced by a grey non-scannable code with FULL over it; the size of the text is
   a share of the width of the code (cqw, set per line) */
.wr-qr-box {
    container-type: inline-size;
    width: 100%;
    max-width: 22rem;
}

.wr-qr-box .wr-qr-img {
    display: block;
    max-width: 100%;
    margin-inline: auto;
}

.wr-qr-full-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    line-height: 1;
    /* one line, made smaller by the page script when it does not fit */
    white-space: nowrap;
    letter-spacing: .02em;
    text-shadow: 0 0 .08em #fff, 0 0 .16em #fff;
}

.wr-qr-grid-1 {
    max-width: 26rem;
}

.wr-qr-grid-2 {
    max-width: 46rem;
}

/* printing a QR page: no photo, no buttons */
@media print {
    body.wr-public::before {
        display: none;
    }

    body.wr-public {
        background: #fff;
        color: #000;
    }

    .wr-topbar {
        box-shadow: none !important;
    }

    .btn,
    footer {
        display: none !important;
    }
}

/* language flags: static/css/flags/base.css (and the sets of flags there) */

/* ---------- front pages (login, password, error): photo + white form panel ---------- */
body.wr-front {
    --bs-body-font-family: var(--wr-font, 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif);
    font-family: var(--bs-body-font-family);
    font-variant-numeric: lining-nums;
}

.wr-front-photo {
    min-height: 11rem;
    background: linear-gradient(var(--wr-overlay), var(--wr-overlay)), url("/img/bg-qr-scan.jpg") center / cover no-repeat;
}

.wr-front-logo {
    width: auto;
    height: 5.25rem;
}

.wr-front-form {
    max-width: 24rem;
}

/* light or dark logo (data-wr-logo-tone, service.LogoTone) on a background of the same tone: a small plate behind it.
   Standard colours: white top bar, dark colour layer over the photo; other colours: rules in the company and
   installation stylesheets (LogoTone.rules), loaded after this file */
.wr-topbar .wr-logo[data-wr-logo-tone="light"] {
    background-color: var(--wr-brand-dark);
    padding: .25rem .5rem;
    border-radius: .375rem;
}

.wr-front-photo .wr-front-logo[data-wr-logo-tone="dark"] {
    background-color: #fff;
    padding: .25rem .5rem;
    border-radius: .375rem;
}

@media (max-width: 767.98px) {
    .wr-front-logo {
        height: 3.5rem;
    }
}

/* capacity management: "I left" on the phone page, a details element (second step to confirm without script) */
.wr-leave > summary {
    list-style: none;
}

.wr-leave > summary::-webkit-details-marker {
    display: none;
}

/* keyboard focus on these buttons: the shadow (shadow-sm) hides the Bootstrap focus ring, so an outline in the colour of
   the text on the photo (WCAG 2.4.7) */
.wr-leave > summary:focus-visible {
    outline: .2rem solid var(--wr-public-text, #fff);
    outline-offset: .2rem;
}

/* "Powered by" line: readable on the photo (WCAG 1.4.3; was 50% white) */
body.wr-public footer.wr-powered {
    color: rgba(255, 255, 255, .85);
}