/**
 * Components the site and the exam both use, and the few custom ones (at-*).
 * The exam keeps its own button colours inside .exam-theme; the site's are in
 * _theme.css. Every custom class is registered in docs/design-system.md.
 */

/* Square corners for the exam's answers and buttons */
.nav-btn,
.answer-option,
.header-icon-btn {
    border-radius: 0;
}

/* The site menu sticks to the top from md up; on a phone it scrolls away (one row of 44 px is a quarter of the
   screen when it stays). Above the exam it is fixed over a 30 px body offset, as the exam's layout was built. */
@media (min-width: 768px) {
    #site-nav {
        position: sticky;
        top: 0;
        z-index: 1020;
    }
}

.exam-theme #site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040;
}

/* The exam's headings inherit their colour, as they did before the site theme */
.exam-theme :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    color: inherit;
}

/* The exam app's CBR-style button colours (its variables, see .exam-theme in _variables.css) */
.exam-theme .btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary-hover);
    --bs-btn-hover-border-color: var(--bs-primary-hover);
    --bs-btn-active-bg: var(--bs-primary-hover);
    --bs-btn-active-border-color: var(--bs-primary-hover);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.exam-theme .btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
}

.exam-theme .btn-secondary {
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-bg: var(--bs-secondary-hover);
    --bs-btn-hover-border-color: var(--bs-secondary-hover);
    --bs-btn-active-bg: var(--bs-secondary-hover);
    --bs-btn-active-border-color: var(--bs-secondary-hover);
    --bs-btn-disabled-bg: var(--bs-secondary);
    --bs-btn-disabled-border-color: var(--bs-secondary);
}

.exam-theme .btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
}

.exam-theme .btn-info {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary-hover, var(--quiz-info-hover));
    --bs-btn-hover-border-color: var(--bs-primary-hover, var(--quiz-info-hover));
    --bs-btn-color: var(--bs-white);
    --bs-btn-hover-color: var(--bs-white);
}

.exam-theme .btn-success {
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-bg: var(--bs-secondary-hover);
    --bs-btn-hover-border-color: var(--bs-secondary-hover);
}

.exam-theme .btn-warning {
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-bg: var(--bs-secondary-hover);
    --bs-btn-hover-border-color: var(--bs-secondary-hover);
    --bs-btn-color: var(--bs-white);
    --bs-btn-hover-color: var(--bs-white);
}

/* Accessibility (the exam's own skip link, and the touch targets it needs) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    padding: 0.75rem 1.5rem;
    background: var(--bs-primary);
    color: var(--bs-white);
    border-radius: 0 0 var(--bs-border-radius-lg) var(--bs-border-radius-lg);
    text-decoration: none;
    font-weight: 600;
}

.skip-link:focus {
    top: 0;
    color: var(--bs-white);
}

.btn-lg,
#back-btn,
#next-btn,
#restart-btn {
    min-height: var(--quiz-touch-target);
}

#admin-navbar .btn-sm {
    min-height: 31px;
    min-width: auto;
}

:where(.btn, .form-control, .form-select, .list-group-item, .image-drop-zone, .draggable-number):focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Reduced motion: the !important overrides every animation and transition */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Navigation bar. Above the exam it is 30 px high, as the exam's layout was built for. */
.navbar {
    flex-wrap: nowrap;
}


.site-tier-icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex-shrink: 0;
}

.exam-theme .navbar {
    height: var(--site-nav-height);
    padding-block: 0;
    font-size: .75rem;
    --bs-navbar-brand-font-size: .8rem;
    --bs-navbar-brand-padding-y: 0;
}

.exam-theme .navbar-nav {
    --bs-nav-link-padding-y: 0;
}

/* Outside the exam the site menu is one row on every width: on a phone the brand and the two short links
   share it at a smaller size. The exam menu stays one 30 px row. */
@media (max-width: 575.98px) {
    body:not(.exam-theme) #site-nav {
        --bs-navbar-padding-y: .25rem;
        --bs-navbar-brand-font-size: 1.1rem;
    }

    body:not(.exam-theme) #site-nav .nav-link {
        font-size: .875rem;
        --bs-nav-link-padding-y: .5rem;
    }
}

/* Admin toolbar */
.admin-type-filter,
.admin-tier-select,
.admin-input-group {
    width: auto;
}

.admin-search-input {
    width: 150px;
}

.admin-question-select {
    width: auto;
    max-width: 300px;
}

/* Search modal */
#search-results .list-group-item {
    border: none;
    border-bottom: 1px solid var(--bs-border-color);
    padding: 0.75rem 1rem;
}

#search-results .list-group-item:last-child {
    border-bottom: none;
}

#search-results .list-group-item:hover {
    background-color: var(--bs-light);
}

#search-results .list-group-item strong {
    color: var(--bs-primary);
    margin-right: 0.5rem;
}

/* Traffic sign images (exam) */
.sign-image-thumb {
    cursor: pointer;
    border-radius: var(--bs-border-radius-sm);
    vertical-align: middle;
    margin: 0 0.15em;
    transition: transform var(--quiz-transition-speed) var(--quiz-transition-easing, ease);
}

.sign-image-thumb:hover,
.sign-image-thumb:focus {
    transform: scale(1.1);
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.sign-image-large {
    display: block;
    border-radius: var(--bs-border-radius);
}

.popover-body .sign-image-large {
    margin: 0 auto;
}

/* Site components with no Bootstrap equivalent */

/* A screenshot of the exam app in a frame: a phone below md, a browser window from md up */
.at-screen {
    max-width: 16rem;
    margin-inline: auto;
    overflow: hidden;
    border: .5rem solid var(--at-ink);
    border-radius: 2.25rem;
    background-color: var(--at-ink);
    box-shadow: var(--bs-box-shadow-lg);
}

.at-screen::before {
    content: "";
    display: block;
    height: 1.25rem;
    background: radial-gradient(ellipse 1.6rem .28rem at 50% 50%, var(--at-navy-line) 96%, transparent 100%), var(--at-ink);
}

@media (min-width: 768px) {
    .at-screen {
        max-width: none;
        border: var(--bs-border-width) solid var(--bs-border-color);
        border-radius: var(--bs-border-radius-xl);
        background-color: var(--bs-tertiary-bg);
    }

    .at-screen::before {
        height: 2rem;
        border-bottom: var(--bs-border-width) solid var(--bs-border-color);
        background:
            radial-gradient(circle 5px at 1rem 50%, var(--at-dot) 96%, transparent 100%),
            radial-gradient(circle 5px at 2rem 50%, var(--at-dot) 96%, transparent 100%),
            radial-gradient(circle 5px at 3rem 50%, var(--at-dot) 96%, transparent 100%),
            var(--bs-secondary-bg);
    }
}

/* Tablet (768-991 px): the captures that exist as tablet screens sit in a portrait tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
    .at-screen-tablet {
        max-width: 28rem;
        border: .6rem solid var(--at-ink);
        border-radius: 2rem;
        background-color: var(--at-ink);
    }

    .at-screen-tablet::before {
        display: none;
    }
}

/* Price bars: a native <progress>, so its width comes from the value and not from inline CSS */
.at-bar {
    appearance: none;
    display: block;
    width: 100%;
    height: .875rem;
    border: 0;
    border-radius: var(--bs-border-radius-pill);
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    overflow: hidden;
}

.at-bar::-webkit-progress-bar { background-color: var(--bs-secondary-bg); }
.at-bar::-webkit-progress-value { background-color: var(--bs-secondary-color); border-radius: var(--bs-border-radius-pill); }
.at-bar::-moz-progress-bar { background-color: var(--bs-secondary-color); border-radius: var(--bs-border-radius-pill); }
.at-bar-ours::-webkit-progress-value { background-color: var(--bs-primary); }
.at-bar-ours::-moz-progress-bar { background-color: var(--bs-primary); }

/* A table that keeps every column readable (it scrolls inside .table-responsive) */
.at-table :is(th, td) { min-width: 9rem; }

/* A summary of three lines (no Bootstrap equivalent for line clamping) */
.at-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* The phone CTA bar: always there on phones, slides in after the hero where scroll-driven animation exists */
.at-cta-bar {
    padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
}

@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .at-cta-bar {
            animation: at-cta-in linear both;
            animation-timeline: scroll(root);
            animation-range: 360px 520px;
        }
    }
}

@keyframes at-cta-in {
    from { transform: translateY(100%); visibility: hidden; }
    to { transform: none; visibility: visible; }
}

/* Podium above a school list (rijscholen/templates/podium.php): three steps on a floor, the first in
   the middle and highest, the school standing on its step with a cup on the edge. The steps differ
   in height by their bottom padding, so the content keeps one size and the floor stays level. */
.at-podium {
    background: linear-gradient(180deg, var(--bs-primary-bg-subtle), var(--bs-body-bg) 90%);
    border-bottom: 6px solid var(--at-navy);
}

.at-podium-step {
    background: linear-gradient(180deg, var(--bs-primary), var(--at-blue-ink));
    box-shadow: inset 0 3px 0 rgba(var(--at-white-rgb), .35);
    padding-top: 1.9rem;   /* the cup stands on the top edge */
    transition: transform .15s ease;
}

.at-podium-step:has(.stretched-link:hover),
.at-podium-step:has(.stretched-link:focus-visible) { transform: translateY(-3px); }

.at-podium-step-1 { padding-bottom: 2rem; }
.at-podium-step-2 { padding-bottom: 1.3rem; }
.at-podium-step-3 { padding-bottom: .7rem; }

.at-podium-cup {
    position: absolute;
    top: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    line-height: 0;
}

.at-podium-cup svg {
    width: 2.75rem;
    height: 2.75rem;
    filter: drop-shadow(0 3px 4px rgba(var(--at-ink-rgb), .35));
}

.at-podium-logo { height: 44px; max-width: 100%; }

/* No logo: the school's name on the tile. The tile is 95 px wide on a phone, so a long word
   ("Verkeersschool") gets a hyphen (lang="nl") instead of a break in the middle. */
.at-podium-logo-name {
    height: auto;
    min-height: 44px;
    padding: .35rem .3rem;
    box-shadow: 0 2px 10px rgba(var(--at-ink-rgb), .1);
}

.at-podium-tile-name {
    font-size: .72rem;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;   /* only words of 10+ letters, 4 on each side: "Verkeers-school", never "Po-lat" */
}

.at-podium-name {
    font-size: .8rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 768px) {
    .at-podium-step { padding-top: 2.4rem; }
    .at-podium-step-1 { padding-bottom: 2.4rem; }
    .at-podium-step-2 { padding-bottom: 1.5rem; }
    .at-podium-step-3 { padding-bottom: .8rem; }
    .at-podium-cup { top: -1.9rem; }
    .at-podium-cup svg { width: 3.5rem; height: 3.5rem; }
    .at-podium-logo { height: 48px; max-width: 180px; }
    .at-podium-logo-name { min-height: 48px; padding: .4rem .6rem; }
    .at-podium-tile-name, .at-podium-name { font-size: .95rem; }
}

/* The trophy card on a school page (rijscholen/templates/school-podium.php): a metal edge and a ring around the cup */
.at-trophy { border-left: 6px solid var(--at-gold); }
.at-trophy-silver { border-left-color: var(--at-silver); }
.at-trophy-bronze { border-left-color: var(--at-bronze); }

.at-trophy-cup {
    width: 6rem;
    height: 6rem;
    box-shadow: 0 0 0 5px var(--at-gold), var(--bs-box-shadow);
}

.at-trophy-silver .at-trophy-cup { box-shadow: 0 0 0 5px var(--at-silver), var(--bs-box-shadow); }
.at-trophy-bronze .at-trophy-cup { box-shadow: 0 0 0 5px var(--at-bronze), var(--bs-box-shadow); }
.at-trophy-cup svg { width: 4rem; height: 4rem; }

/* The pass-rate ring on a school page (rijscholen/templates/school-results.php): an SVG circle whose
   dash offset is the percentage. Bootstrap's progress bar is a straight bar; the ring reads at a glance. */
.at-ring { position: relative; width: 120px; height: 120px; }
.at-ring svg { transform: rotate(-90deg); }
.at-ring circle { fill: none; stroke-width: 8; }
.at-ring-track { stroke: var(--bs-secondary-border-subtle); }
.at-ring-value { stroke: var(--at-accent-deep); stroke-linecap: round; }
.at-ring-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.75rem; color: var(--at-accent-deep); }   /* 28px bold: 3:1 is the bar, 3.3:1 is what it has */

@media (forced-colors: active) {
    .at-ring-value { stroke: Highlight; }
}

/* The search suggestions (rijscholen): a bounded list that scrolls inside itself, so keyboard selection never
   scrolls the page and the search field stays in view. Bootstrap has no max-height utility. */
.at-suggest { max-height: min(400px, 50vh); }