@font-face {
    font-family: "Syne";
    src: url("/assets/fonts/syne-latin-wght-normal.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Expletus Sans";
    src: url("/assets/fonts/expletus-sans-latin-wght-normal.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* Huisstijlwijzer aand8! (Positief Gezond Werkgeverschap): Expletus Sans for headings and
   short texts, Syne for body text. Primary colours Zorg blauw and Gezond groen, secondary
   Positief geel. The values are the ones the magazine PDF uses on screen (the guide says
   #282459 / #87b96e / #e6af34); the creme, lila and dark green come from the magazine itself.
   The reader is one fixed brand surface, so there is no separate dark theme. */
:root {
    --zorg-blauw: #272658;
    --gezond-groen: #87ba6d;
    --positief-geel: #e6af32;
    --creme: #fdf9f4;
    --lila: #877bb8;
    --lila-licht: #d4d0e9;
    --donkergroen: #48774a;
    --lichtgroen: #b8dab1;

    --blue: var(--zorg-blauw);
    --blue-stage: var(--zorg-blauw);
    --paper: var(--creme);
    --ink: var(--zorg-blauw);
    --ink-muted: rgb(39 38 88 / 0.66);
    --accent: var(--gezond-groen);
    --focus: var(--positief-geel);
    --on-blue: var(--creme);
    --on-blue-muted: rgb(253 249 244 / 0.74);
    --surface-hover: rgb(255 255 255 / 0.1);
    --surface-active: rgb(255 255 255 / 0.18);
    --font-heading: "Expletus Sans", system-ui, sans-serif;
    --font-body: "Syne", system-ui, sans-serif;
    --bar-height: 60px;
    --radius: 999px;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    color-scheme: dark;
}

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

html,
body {
    height: 100%;
    margin: 0;
}

body {
    background: var(--blue-stage);
    color: var(--on-blue);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.icon {
    width: 20px;
    height: 20px;
    flex: none;
}

[hidden] {
    display: none !important;
}

/* App shell ---------------------------------------------------------------- */

.app {
    display: grid;
    grid-template-rows: var(--bar-height) minmax(0, 1fr) var(--bar-height);
    height: 100vh;
    height: 100dvh;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background:
        radial-gradient(ellipse 70% 60% at 50% 48%, rgb(255 255 255 / 0.07) 0%, transparent 100%),
        var(--blue-stage);
    overflow: hidden;
}

.topbar,
.toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    min-width: 0;
}

.topbar {
    position: relative;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    flex: none;
    border-radius: 6px;
}

/* The aand8! logo as it stands on the back cover, in creme, cut from the magazine PDF.
   The topbar uses the mark and the wordmark without the "positief gezond werkgeverschap" line. */
.brand-logo {
    display: block;
    width: auto;
    height: 38px;
}

.brand-logo-large {
    height: 150px;
}

.brand-meta {
    font-size: 13px;
    font-weight: 400;
    color: var(--on-blue-muted);
}

.crumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(46vw, 640px);
}

.crumb-kicker {
    max-width: 100%;
    overflow: hidden;
    font-size: 12px;
    font-weight: 400;
    color: var(--on-blue-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crumb-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 500;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-actions,
.toolbar-end {
    display: flex;
    align-items: center;
    gap: 4px;
}

.toolbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
}

.toolbar-end {
    justify-content: flex-end;
}

/* Step indicator ------------------------------------------------------------- */

.toolbar-start {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.step {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--on-blue-muted);
    font-size: 13px;
    white-space: nowrap;
}

/* The numbered green circles of the route through the learning programme (page 9). */
.step-nr {
    display: grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--zorg-blauw);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.step-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Buttons ------------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 160ms ease, transform 160ms var(--ease-out), opacity 160ms ease;
}

.btn:active {
    transform: scale(0.96);
}

.btn:disabled {
    opacity: 0.35;
    cursor: default;
    transform: none;
}

.btn-icon {
    width: 40px;
    padding: 0;
}

.btn-meta {
    font-weight: 400;
    color: var(--on-blue-muted);
    font-variant-numeric: tabular-nums;
}

.btn-solid {
    background: var(--accent);
    color: var(--zorg-blauw);
    padding: 0 20px;
    min-height: 48px;
}

@media (hover: hover) and (pointer: fine) {
    .btn:not(:disabled):hover {
        background: var(--surface-hover);
    }

    .btn-solid:hover {
        background: #9fc98a;
    }
}

.toolbar-start .btn {
    flex: none;
}

.credit {
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--on-blue-muted);
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    transition: color 160ms ease;
}

.credit strong {
    font-weight: 700;
    color: var(--on-blue);
}

@media (hover: hover) and (pointer: fine) {
    .credit:hover {
        color: var(--on-blue);
    }

    .credit:hover strong {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

/* Pager -------------------------------------------------------------------- */

.pager {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pager-label {
    min-width: 9.5em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.pager-total {
    color: var(--on-blue-muted);
}

/* Stage + book ------------------------------------------------------------- */

.stage {
    position: relative;
    min-height: 0;
}

/* .stage > .book outranks the .stf__parent rule page-flip injects after this file. */
.stage > .book {
    position: absolute;
    inset: 12px 84px 20px;
    /* page-flip sets these inline from its settings; the stage decides instead. */
    min-width: 0 !important;
    min-height: 0 !important;
    opacity: 0;
    transition: opacity 400ms ease;
}

.book.is-ready {
    opacity: 1;
}

.book .stf__wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.book .page:not(.stf__item) {
    display: none;
}

.page {
    background: var(--paper);
    overflow: hidden;
    box-shadow: 0 18px 40px -12px rgb(8 8 36 / 0.6);
}

.page img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

/* Spine shading where two pages meet. */
.page.--left::after,
.page.--right::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 7%;
    pointer-events: none;
}

.page.--left::after {
    right: 0;
    background: linear-gradient(to left, rgb(0 0 0 / 0.16), rgb(0 0 0 / 0.04) 40%, transparent);
}

.page.--right::after {
    left: 0;
    background: linear-gradient(to right, rgb(0 0 0 / 0.16), rgb(0 0 0 / 0.04) 40%, transparent);
}

.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 2px solid rgb(255 255 255 / 0.18);
    border-top-color: var(--on-blue);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

.book.is-ready + .loading {
    display: none;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-top: -26px;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.08);
    color: var(--on-blue);
    cursor: pointer;
    transition: background-color 160ms ease, transform 160ms var(--ease-out), opacity 200ms ease;
}

.nav .icon {
    width: 26px;
    height: 26px;
}

.nav-prev {
    left: 16px;
}

.nav-next {
    right: 16px;
}

.nav:active {
    transform: scale(0.94);
}

.nav:disabled {
    opacity: 0;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .nav:hover {
        background: var(--surface-active);
    }
}

.flat {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: 16px;
    display: grid;
    gap: 16px;
    justify-items: center;
}

.flat img {
    width: min(100%, 720px);
    height: auto;
}

/* Table of contents -------------------------------------------------------- */

.menu {
    position: fixed;
    inset: 0;
    z-index: 20;
}

.menu-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(14 13 40 / 0.6);
    animation: fade-in 200ms ease both;
}

.menu-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: min(420px, 92vw);
    background: var(--paper);
    color: var(--ink);
    color-scheme: light;
    box-shadow: 24px 0 60px -20px rgb(8 8 36 / 0.5);
    animation: slide-in 260ms var(--ease-out) both;
}

.menu.is-closing .menu-backdrop {
    animation: fade-out 160ms ease both;
}

.menu.is-closing .menu-panel {
    animation: slide-out 180ms ease-in both;
}

@keyframes fade-in {
    from { opacity: 0; }
}

@keyframes fade-out {
    to { opacity: 0; }
}

@keyframes slide-in {
    from { transform: translateX(-100%); }
}

@keyframes slide-out {
    to { transform: translateX(-100%); }
}

.menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(14px, env(safe-area-inset-top)) 12px 6px 24px;
}

.menu-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 500;
}

.menu-panel .btn:hover {
    background: rgb(39 38 88 / 0.08);
}

.menu-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 12px max(24px, env(safe-area-inset-bottom));
}

.menu-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px 0 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--blue);
    color: var(--on-blue);
    text-decoration: none;
    transition: background-color 160ms ease;
}

.menu-cta:hover {
    background: #3a3972;
}

.menu-cta > span {
    display: flex;
    flex-direction: column;
}

.menu-cta strong {
    font-weight: 700;
}

.menu-cta span span {
    font-size: 13px;
    font-weight: 400;
    color: var(--on-blue-muted);
}

.menu-extras {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 8px;
    padding: 0 12px;
    list-style: none;
}

.menu-extras a {
    display: inline-flex;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--radius);
    background: rgb(39 38 88 / 0.07);
    text-decoration: none;
    font-size: 14px;
    transition: background-color 160ms ease;
}

.menu-extras a:hover {
    background: rgb(39 38 88 / 0.13);
}

.menu-extras span {
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

.menu-list-title {
    margin: 20px 12px 8px;
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.15;
}

.menu-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-row {
    position: relative;
    display: flex;
    align-items: center;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 12px;
    text-decoration: none;
    transition: background-color 160ms ease;
}

.menu-item:hover {
    background: rgb(39 38 88 / 0.06);
}

.menu-item img {
    width: 48px;
    height: 68px;
    flex: none;
    border-radius: 3px;
    background: var(--paper);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
    object-fit: cover;
}

.menu-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.menu-item-title {
    font-weight: 600;
    line-height: 1.3;
    text-wrap: pretty;
}

.menu-item-byline {
    font-size: 13px;
    line-height: 1.3;
}

.menu-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-top: 2px;
    font-size: 12px;
    color: var(--ink-muted);
}

.menu-item-step {
    padding: 1px 8px;
    border-radius: var(--radius);
    background: var(--lichtgroen);
    color: var(--zorg-blauw);
    font-weight: 600;
}

.menu-item[aria-current] {
    background: var(--lila-licht);
    box-shadow: inset 4px 0 0 var(--lila);
}

.menu-item-link {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-right: 4px;
    border-radius: 50%;
    color: var(--ink-muted);
    transition: background-color 160ms ease, color 160ms ease;
}

.menu-item-link .icon {
    width: 18px;
    height: 18px;
}

.menu-item-link:hover {
    background: rgb(39 38 88 / 0.08);
    color: var(--ink);
}

/* Zoom --------------------------------------------------------------------- */

.zoom {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgb(20 19 50 / 0.97);
    animation: fade-in 180ms ease both;
}

.zoom-viewport {
    position: absolute;
    inset: 0;
    overflow: auto;
    overscroll-behavior: contain;
    cursor: grab;
    touch-action: pan-x pan-y;
}

.zoom-viewport.is-dragging {
    cursor: grabbing;
}

.zoom-canvas {
    display: flex;
    margin: auto;
    padding: 24px;
    width: max-content;
    min-width: 100%;
    min-height: 100%;
    align-items: center;
    justify-content: center;
}

.zoom-canvas img {
    display: block;
    flex: none;
    user-select: none;
    -webkit-user-drag: none;
    background: var(--paper);
}

.zoom-controls {
    position: absolute;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--radius);
    background: rgb(39 38 88 / 0.94);
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
}

/* Toast -------------------------------------------------------------------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--bar-height) + 16px + env(safe-area-inset-bottom));
    z-index: 40;
    padding: 10px 18px;
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    font-weight: 500;
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.3);
    transform: translate(-50%, 12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 220ms var(--ease-out);
}

.toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* 404 ---------------------------------------------------------------------- */

.notfound {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    min-height: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 32px 16px;
}

.notfound h1 {
    margin: 24px 0 0;
    font-family: var(--font-heading);
    font-size: clamp(32px, 6vw, 48px);
    font-weight: 500;
    line-height: 1.1;
}

.notfound p {
    margin: 0 0 8px;
    color: var(--on-blue-muted);
    font-size: 17px;
}

/* Small screens ------------------------------------------------------------ */

@media (max-width: 900px) {
    .brand-meta,
    .topbar .btn-meta,
    .step {
        display: none;
    }

    .stage > .book {
        inset: 8px 68px 12px;
    }

    .nav-prev {
        left: 8px;
    }

    .nav-next {
        right: 8px;
    }
}

@media (max-width: 640px) {
    :root {
        --bar-height: 56px;
    }

    .topbar,
    .toolbar {
        padding: 0 6px;
        gap: 4px;
    }

    .brand {
        padding-left: 8px;
    }

    .brand-logo {
        height: 32px;
    }

    .topbar .btn-label,
    .toolbar .btn-label {
        display: none;
    }

    .topbar .btn-text {
        width: 40px;
        padding: 0;
    }

    .crumb {
        position: static;
        transform: none;
        flex: 1;
        align-items: flex-start;
        text-align: left;
        max-width: none;
        padding-left: 8px;
    }

    .crumb-title {
        font-size: 14px;
    }

    .stage > .book {
        inset: 6px 8px;
    }

    .nav {
        display: none;
    }

    .pager-label {
        min-width: 7.5em;
    }

    .pager-total,
    .topbar [data-action="fullscreen"] {
        display: none !important;
    }

    /* Two short lines fit beside the pager where one long line does not. */
    .credit {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding: 6px;
        font-size: 11px;
        line-height: 1.2;
    }

    .credit strong {
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        transition-duration: 1ms !important;
    }
}