:root {
    /* Blue, not red — red reads as danger/stop, which is the wrong
       message for "this is selected/highlighted". Reuses the site's own
       heading blue (#1f487e) so buttons/tabs/highlights match the rest
       of the brand. Real error/warning states use --danger (the site's
       old red) instead, kept separate so this swap can't accidentally
       soften an actual error. */
    --accent: #1f487e;
    --accent-tint: #e7eef6;
    --danger: #c0392b;
    --danger-tint: #fbeae7;
    --text: #232323;
    --muted: #6b6b6b;
    --border: #e5e5e5;
    --surface-soft: #f6f7f5;
    /* Rendered height of the fixed .site-header (see there) plus its top
       offset — body's padding-top and .page-hero.has-bg's margin-top both
       key off this single value so they can't drift apart. */
    --header-offset: 96px;
}

* { box-sizing: border-box; }

h1, h2, h3, h4, h5 { color: #1f487e; }

/* Reserves room for the fixed header (see .site-header) so ordinary page
   content never starts underneath it. .page-hero.has-bg cancels this out
   with a matching negative margin, since the hero photo is SUPPOSED to
   run behind the floating header, not stop above it. */
body {
    margin: 0;
    font-family: "Helvetica Neue", Arial, sans-serif;
    color: var(--text);
    line-height: 1.6;
    padding-top: var(--header-offset);
}

/* Floating banner — fixed (not sticky: sticky only stays pinned within
   its own parent's scroll range, and would also push page content down
   instead of letting the hero photo run behind it) — inset from the
   viewport edges, and coloured with the same dark navy as the logo's own
   backdrop chip, so header and logo read as one solid piece instead of a
   dark chip sitting inside a separate white/photo bar. */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: .85rem 1.5rem;
    background: #071523;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
    position: fixed;
    top: .75rem;
    left: 1rem;
    right: 1rem;
    z-index: 50;
}

.logo { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: #fff; font-weight: 700; }
.logo img { height: 40px; display: block; }

.main-nav ul { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; align-items: center; }
.main-nav a { text-decoration: none; color: #fff; font-weight: 500; }
.main-nav a:hover { color: var(--accent-tint); }
.logout-form { display: inline; }

/* "Mínar upplýsingar" nav dropdown (see base.html) — clicking it never
   navigates, it only opens this panel with the account actions. */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
}
.nav-dropdown-toggle:hover { color: var(--accent-tint); }
/* Same dark navy as the floating header banner, so the dropdown reads as
   part of it rather than a separate, unrelated white popup. */
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: .6rem;
    background: #071523;
    border: none;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
    padding: .75rem;
    min-width: 200px;
    z-index: 40;
}
.nav-dropdown-menu.open { display: block; }
.nav-dropdown-label { margin: 0 0 .5rem; font-size: .85rem; color: rgba(255, 255, 255, .7); white-space: nowrap; }
.nav-dropdown-link {
    display: block;
    width: 100%;
    text-align: left;
    padding: .4rem 0;
    background: none;
    border: none;
    color: #fff;
    text-decoration: none;
    font-size: .95rem;
    font-family: inherit;
    cursor: pointer;
}
.nav-dropdown-link:hover { color: var(--accent-tint); }

main#content { max-width: 900px; margin: 0 auto; padding: 3rem 5%; }

/* .hero used to inherit its width from main#content; now it sits inside
   .page-hero (see base.html), outside main#content, so it needs its own
   max-width/centering to keep the same text measure as before. */
.hero { text-align: center; max-width: 900px; margin: 0 auto; padding: 3rem 5%; }
.hero h1 { font-size: 2.25rem; margin-bottom: .5rem; }

/* Homepage header + hero background image (see .page-hero in base.html).
   Gradient is strongest at the top (behind the nav) and bottom (behind the
   heading text), lighter in the middle, so the photo itself stays visible
   instead of being flattened by one uniform tint. */
.page-hero.has-bg {
    /* Cancels out body's padding-top (reserved for the fixed header) so
       the photo runs all the way up behind the header instead of
       stopping below it — the header floats on top via z-index. */
    margin-top: calc(-1 * var(--header-offset));
    background-image: linear-gradient(
            180deg,
            rgba(0, 0, 0, .55) 0%,
            rgba(0, 0, 0, .15) 30%,
            rgba(0, 0, 0, .25) 65%,
            rgba(0, 0, 0, .6) 100%
        ),
        url("../images/hero-hringtorg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: clamp(340px, 52vh, 520px);
    display: flex;
    flex-direction: column;
}
/* .site-header now sits before .page-hero, not inside it (needed for the
   floating header to stay stuck across the whole page — position:sticky
   only sticks within its own parent's scroll range, and .page-hero on its
   own is too short a box for that to work across a full page scroll).
   .hero is .page-hero's only child now, vertically centred within it. */
.page-hero.has-bg .hero {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 8rem;
    padding-bottom: 4rem;
    color: #fff;
}
.page-hero.has-bg .hero h1 { color: #fff; }
.page-hero.has-bg .hero .rich-text { color: #f0f0f0; }

/* Hamburger toggle, hidden on wide screens where the nav fits inline. */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
}
.nav-toggle span { display: block; width: 100%; height: 2px; background: #fff; }

@media (max-width: 860px) {
    .nav-toggle { display: flex; }
    /* Same navy as the floating header banner, and inset/rounded to
       match it too, so the opened mobile menu reads as a second floating
       panel that belongs with the header instead of a flush, square
       dropdown bolted underneath it. */
    .main-nav {
        display: none;
        position: absolute;
        top: calc(100% + .5rem);
        left: 1rem;
        right: 1rem;
        background: #071523;
        padding: 1.25rem 5%;
        border-radius: 14px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
        z-index: 30;
    }
    .main-nav.nav-open { display: block; }
    .main-nav ul { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .main-nav a { color: #fff; }
    .nav-dropdown { width: 100%; }
    .nav-dropdown-toggle { color: #fff; }
    .nav-dropdown-menu {
        display: none;
        position: static;
        margin: .5rem 0 0;
        background: rgba(255, 255, 255, .06);
        border-top: 1px solid rgba(255, 255, 255, .15);
        border-radius: 8px;
        box-shadow: none;
    }
    .nav-dropdown-menu.open { display: block; }
    .nav-dropdown-label { color: rgba(255, 255, 255, .7); }
    .nav-dropdown-link { color: #fff; }
}

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }

/* Homepage teaser cards: always one row of 4, narrowing on small screens. */
.home-cards { grid-template-columns: repeat(4, 1fr); }
.home-cards .card { text-align: center; }
.home-cards .card:hover { background-color: #dae3e5; }
@media (max-width: 700px) {
    .home-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
    .home-cards { grid-template-columns: 1fr; }
}
.card {
    display: block;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    transition: box-shadow .15s ease, transform .15s ease;
}
.card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-2px); }
.card h5 { margin: 0 0 .4rem; }
.card p { margin: 0; color: var(--muted); font-size: .95rem; }

/* "Réttindaflokkar í boði" — reads straight from LicenseCategory.enabled
   (home/models.py), so a category unchecked in the admin disappears here
   automatically, same as it does from every other selector in the system.
   description/tag_1/tag_2 are editable per category in Wagtail. */
.license-categories { margin: 2rem 0; }
.license-categories-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: 1.25rem;
}
.license-categories-header h2 { margin: 0; }
.license-categories-count {
    font-size: .85rem;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-tint);
    padding: .3rem .75rem;
    border-radius: 999px;
    white-space: nowrap;
}
.license-category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (max-width: 600px) {
    .license-category-grid { grid-template-columns: 1fr; }
}
.license-category-card {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: background-color .15s ease;
    text-decoration: none;
    color: inherit;
}
/* Same blue as the active step tab (.steps-tab.active, see the "Ferlið"
   section on each flokkur's own LicenseCategoryPage), so a hover here
   reads as the same "selected" cue. Cards render as <a> once the category
   has a live page to link to (see home_page.html), plain <div> otherwise. */
.license-category-card:hover { background: var(--accent-tint); }
.license-category-card img {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 6px;
}
.license-category-body { flex: 1 1 auto; min-width: 0; }
.license-category-title { margin: 0 0 .4rem; font-size: 1.05rem; }
.license-category-description { margin: 0 0 .6rem; color: var(--muted); font-size: .9rem; }
.license-category-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.license-category-tag {
    font-size: .8rem;
    color: var(--muted);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    padding: .2rem .6rem;
    border-radius: 999px;
}

/* Homepage CTA pair below "Hvar byrja ég?" — same unified button look as
   .button-primary/.button-secondary elsewhere on the site (see there),
   just sized up for a homepage call-to-action instead of an inline form
   action. */
.home-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin: 3rem 0;
}
.home-cta-button {
    /* Padding + line-height land this at ~38px tall — shorter than the
       ~46px it was, but still comfortably above a touch-friendly minimum
       (WCAG's 24px floor, Material's 36dp "dense" button) for mobile/tablet. */
    padding: .55rem 1.75rem;
    line-height: 1.2;
    border-radius: 6px;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease;
}
.home-cta-button:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-2px); }
.home-cta-primary, .home-cta-secondary, .home-cta-secondary:visited {
    background: var(--accent); color: #fff; border: none;
}

.content-page h1 { font-size: 2rem; }
.content-page h4 { margin-top: 2rem; }

/* Homepage "Hvar byrja ég?" steps — each heading+paragraph pair from the
   body StreamField (see HomePage.get_context's body_steps grouping).
   Two views of the same steps exist in the markup (home_page.html);
   only one is ever displayed, switched by the min-width: 1025px query
   near the bottom of this block — a row of Excel-sheet-style tabs is
   fine on a full desktop window, but doesn't fit phones or tablets
   (portrait or landscape — 1025px clears a landscape iPad's 1024px). */
.home-steps { margin: 1rem 0 2rem; }
.steps-tabs-view { display: none; }

.step-number {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.step-icon { flex: 0 0 auto; width: 1.1em; height: 1.1em; color: currentColor; }
.step-icon svg { width: 100%; height: 100%; display: block; }

/* Phone/tablet: a plain vertical accordion — the first step open on load,
   the rest showing only number + heading until clicked (see the exclusive-
   open click handler in home_page.html). */
.steps-accordion-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.step-card { border-radius: 10px; background: var(--surface-soft); overflow: hidden; }
.step-card:nth-child(even) { background: var(--accent-tint); }
.step-summary {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    font-size: 1rem;
    color: #1f487e;
}
.step-summary::-webkit-details-marker { display: none; }
.step-summary .step-heading-text { flex: 1 1 auto; }
.step-toggle {
    flex: 0 0 auto;
    width: .6em;
    height: .6em;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(45deg);
    transition: transform .15s ease;
}
.step-card[open] .step-toggle { transform: rotate(-135deg); }
.step-content { padding: 0 1.25rem 1.25rem; }
.step-content .rich-text:last-child { margin-bottom: 0; }
/* Bottom arrow that closes this one step — see the .step-close click
   handler in home_page.html. */
.step-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: .5rem auto 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}
.step-close-arrow {
    width: .55em;
    height: .55em;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(-135deg);
}
@media (max-width: 560px) {
    .step-summary { gap: .6rem; padding: .85rem 1rem; }
    .step-content { padding: 0 1rem 1rem; }
}

/* Ökukennarar list (instructors_list.html) — reuses .step-card/.step-summary/
   .step-toggle/.step-content above for the accordion shell, just adds the
   thumbnail + region label in the summary and the photo grid inside. */
.instructors-filter {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1.5rem;
}
.instructors-filter select { padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 4px; }
.instructors-accordion { display: flex; flex-direction: column; gap: 1rem; }
.instructor-summary img {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}
.instructor-summary-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: .15rem; }
.instructor-name { font-weight: 600; }
.instructor-region { font-weight: 500; font-size: .85rem; color: var(--muted); }
.instructor-photos {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: .75rem;
}
.instructor-photos img { width: 150px; height: 150px; object-fit: cover; border-radius: 8px; }
.instructor-contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem 1.25rem;
    margin: .75rem 0 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
}

/* Desktop: swap the accordion for the tab strip. Closed tabs show only
   their number badge (compact, so all of them fit without scrolling where
   possible); the active one shows number + icon + heading. */
@media (min-width: 1025px) {
    .steps-accordion-view { display: none; }
    .steps-tabs-view { display: block; }
    .steps-tablist {
        display: flex;
        gap: .35rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-bottom: 2px solid var(--border);
        margin-bottom: 1.5rem;
    }
    .steps-tab {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .5rem .85rem;
        border: none;
        background: var(--surface-soft);
        border-radius: 8px 8px 0 0;
        cursor: pointer;
        font: inherit;
        font-weight: 600;
        font-size: .95rem;
        color: var(--muted);
        white-space: nowrap;
    }
    .steps-tab.active { background: var(--accent-tint); color: #1f487e; padding: .5rem 1.1rem; }
    .steps-tab:not(.active) .step-icon,
    .steps-tab:not(.active) .step-heading-text { display: none; }
    .steps-panel { display: none; padding: 0 .25rem; }
    .steps-panel.active { display: block; }
    .steps-panel .rich-text:last-child { margin-bottom: 0; }
}

/* Fallback graphic shown by {% image_or_placeholder %} (core_tags.py)
   when an Image row's source file is missing from disk. No width/height
   HTML attributes are set on it (unlike a real Wagtail rendition), so
   without this it would render at the source SVG's native 700x900 size
   in any container that doesn't already constrain plain <img> tags. */
.missing-image-placeholder { display: block; max-width: 100%; height: auto; }

/* Content sections with an image beside the text instead of stacked
   full-width (see content-page--media-left in flex_page.html — applied
   directly on the .content-blocks section, not an ancestor). */
.content-blocks.content-page--media-left {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 2rem;
}
.content-page--media-left .content-image { order: -1; flex: 0 0 320px; max-width: 320px; }
.content-page--media-left .content-image img { display: block; width: 100%; height: auto; border-radius: 8px; }
.content-page--media-left .content-text { flex: 1 1 320px; }
.content-page--media-left .content-text h4:first-child { margin-top: 0; }
/* A section with no image of its own (e.g. "Verð fyrir bílprófið" — see
   HomePage's price step, copied onto this page) would otherwise stretch
   to the full row width, breaking the two-column rhythm the rest of the
   page has. Constraining it to the same width as a text column that DOES
   sit beside a 320px image, and pushing it to that column's position,
   keeps it visually consistent with the sections above it. */
.content-page--media-left .content-text:only-child {
    max-width: 400px;
    margin-left: auto;
}
.content-blocks.content-page--media-top { align-items: flex-start; }
@media (max-width: 700px) {
    .content-page--media-left .content-image { flex-basis: 100%; max-width: 100%; }
    .content-page--media-left .content-text:only-child { max-width: none; margin-left: 0; }
}

.youtube-embed { margin: 2rem 0; }
.youtube-caption { font-weight: 600; margin-bottom: .5rem; }
.youtube-embed-frame { position: relative; padding-bottom: 56.25%; height: 0; }
.youtube-embed-frame iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

.site-footer {
    text-align: center;
    padding: 2rem 5%;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: .9rem;
}

/* Student progress panel on the "Fyrir ökunema" hub page */
.progress-block { margin-bottom: 2rem; }
.progress-block h3 { margin-bottom: .75rem; }
.contact-form { display: flex; flex-direction: column; gap: .25rem; max-width: 480px; }
.info-row { display: flex; gap: 1.5rem; margin-bottom: .75rem; }
.info-field { flex: 1; min-width: 140px; }
@media (max-width: 420px) {
    .info-row { flex-direction: column; gap: .75rem; }
}
.info-field label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .25rem; }
.info-field .readonly-value { margin: 0; padding: .5rem 0; font-weight: 600; }
.contact-form input { width: 100%; padding: .5rem; border: 1px solid var(--border); border-radius: 4px; box-sizing: border-box; }
.totals { font-weight: 600; margin-bottom: .5rem; }
.lesson-dates { padding-left: 1.25rem; }
.stage-heading { margin-top: 1.25rem; margin-bottom: .4rem; font-size: 1rem; }
.checklist-progress { list-style: none; padding: 0; margin: 0; }
.checklist-progress li {
    display: flex; justify-content: space-between; align-items: center;
    padding: .5rem 0; border-bottom: 1px solid var(--border);
}
/* display:block lets the table scroll horizontally within its own box on
   narrow screens, instead of forcing the whole page to scroll sideways —
   verified this still keeps header/body columns aligned. */
.checklist-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.checklist-table th, .checklist-table td {
    padding: .5rem .75rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle;
}
/* The "Mat ökumanns"/"Mat ökukennara" header text is longer than either
   column's actual content (a one-digit badge, a short select) ever needs
   — left to auto-layout, the unwrapped header text alone was forcing
   both columns wide enough that the instructor's rating <select> fell
   off the right edge of the screen at common phone widths (e.g. 412px),
   still technically reachable via the table's own overflow-x:auto but
   not obviously so. Wrapping the header onto two lines instead lets both
   columns shrink to fit their actual content's width. */
.assessment-rating-table th:nth-child(2),
.assessment-rating-table th:nth-child(3) {
    max-width: 70px;
    white-space: normal;
    font-size: .8rem;
}
.checklist-category { background: var(--accent-tint, #eef2f6); font-weight: 700; text-transform: uppercase; font-size: .85rem; letter-spacing: .02em; padding: .5rem .75rem; }
.checklist-stage { background: #f7f7f7; font-weight: 700; padding: .5rem .75rem; }
.level-select { padding: .3rem .5rem; border: 1px solid var(--border); border-radius: 4px; }
.flag-btn {
    padding: .3rem .6rem; border: 1px solid #1f487e; border-radius: 4px;
    background: #fff; color: #1f487e; cursor: pointer; font-size: .85rem; font-weight: 600;
}
.flag-btn.on { background: #1f487e; color: #fff; }
.flag-btn:disabled { opacity: .5; cursor: default; }
/* "Sækja stöðu" — Gr driven by a real Konto/Payday invoice status instead
   of the plain manual toggle; distinct from .on (which stays the site's
   blue accent) so unpaid/paid/other read clearly at a glance. Full
   opacity even though disabled, unlike the generic :disabled rule above.
   Rautt (ógreitt) / Grænt (greitt) / Gult (aðrar orsakir — hætt við eða
   kreditfært) — matches DrivingLesson.invoice_status ("sent" = enn
   ógreitt þrátt fyrir nafnið, "paid", "cancelled"). */
.flag-btn.sent, .flag-btn.sent:disabled {
    background: var(--danger); color: #fff; border-color: var(--danger); opacity: 1;
}
.flag-btn.paid, .flag-btn.paid:disabled {
    background: #2e7d32; color: #fff; border-color: #2e7d32; opacity: 1;
}
.flag-btn.cancelled, .flag-btn.cancelled:disabled {
    background: #f0ad4e; color: #3b2f00; border-color: #f0ad4e; opacity: 1;
}
.delete-btn {
    padding: .3rem .6rem; border: 1px solid #1f487e; border-radius: 4px;
    background: #fff; color: #1f487e; cursor: pointer; font-size: .85rem;
}
.level-badge { padding: .2rem .6rem; border-radius: 12px; font-size: .8rem; font-weight: 600; color: #222; }
.rating-badge { padding: .2rem .6rem; border-radius: 12px; font-size: .85rem; font-weight: 600; color: #222; }
.rating-badge.rating-1 { background: #f5b7b1; }
.rating-badge.rating-2 { background: #f8c471; }
.rating-badge.rating-3 { background: #f7e79e; }
.rating-badge.rating-4 { background: #c2e8b0; }
.rating-badge.rating-5 { background: #7dcb6a; }
.level-badge.level-0 { background: #f5b7b1; }
.level-badge.level-1 { background: #f8c471; }
.level-badge.level-2 { background: #f7e79e; }
.level-badge.level-3 { background: #c2e8b0; }

/* Shared confirmation/warning popups */
.modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45);
    align-items: center; justify-content: center; z-index: 100;
}
.modal-overlay.open { display: flex; }
.modal-box {
    background: #fff; border-radius: 8px; padding: 1.5rem; max-width: 420px;
    width: 90%; box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.modal-box p { margin: 0 0 1.25rem; }
.modal-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

/* Instructor dashboard */
.instructor-dashboard { max-width: 700px; }
/* Same breakpoint the homepage's steps-accordion switches to a tab strip
   at (see steps-tabs-view above) — this page has no such alternate
   layout, just a single reading column, so on an actual desktop monitor
   700px left most of the window empty. Dropping the cap here (rather
   than picking a wider fixed number) lets it fill whatever main#content
   actually offers — that's the real ceiling (max-width:900px, padding
   3rem 5%, see near the top of this file), so any fixed number here
   above ~800px would just be unreachable dead weight, and one below it
   would re-impose the same narrow-column problem this is fixing.
   dash-card/dash-form cap their own width independently (see .dash-form
   below) and so don't stretch awkwardly wide just because their
   container did. */
@media (min-width: 1025px) {
    .instructor-dashboard { max-width: none; }
}
.dash-section { margin-bottom: 2.5rem; }
.dash-section h3 { margin-bottom: .75rem; }
.dash-card {
    border: 1px solid var(--border); border-radius: 8px; padding: 1rem;
    margin-bottom: .75rem; display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; justify-content: space-between;
}
/* "Mínir nemendur" list only (_tab_nemendur.html) — smaller box than the
   shared .dash-card default, and its one action button vertically
   centered next to the two-line name/info text instead of bottom-aligned
   with it (align-items: flex-end, the shared default), since a plain
   name+info card doesn't need the wider padding other .dash-card lists
   (akstursmat/flutningsbeiðnir/umsóknir, which carry more actions) use. */
.dash-card--student { padding: .65rem .85rem; align-items: center; }
.dash-card-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 2rem; }
.new-student-details summary {
    display: inline-block;
    list-style: none;
    cursor: pointer;
}
.new-student-details summary::-webkit-details-marker { display: none; }
.new-student-body { margin-top: 1rem; }
.dash-form { display: flex; flex-direction: column; gap: .5rem; max-width: 400px;
    border: 1px solid var(--border); border-radius: 8px; padding: 1rem; }
.dash-form label { font-size: .85rem; color: var(--muted); }
.dash-form input, .dash-form select { padding: .5rem; border: 1px solid var(--border); border-radius: 4px; font-size: .95rem; }
/* The "Leita eftir nafni eða kennitölu..." box above every searchable
   .dash-card list (Mínir nemendur/Æfingaakstur/Í hléi/Lokið) — shared so
   a visual tweak is one rule instead of four synced inline styles. */
.dash-search-input {
    width: 100%; max-width: 320px; padding: .5rem; border: 1px solid var(--border);
    border-radius: 4px; margin-bottom: .75rem; box-sizing: border-box;
}

/* Long forms (e.g. "Sækja um ökunám") — each logical section gets its own
   framed, tinted box instead of just a heading, so a form with several
   unrelated groups of fields (nemandi/forráðamaður/öryggisstaðfesting)
   reads as distinct steps rather than one long unbroken list of inputs
   (see Til skoðunar, "Hönnunar-/útlitsúrbætur" atriði 4). Widened past the
   shared .dash-form's 400px since each section now needs room to breathe
   on its own. */
.apply-form { max-width: 520px; gap: 1.25rem; border: none; padding: 0; }
.apply-section {
    display: flex; flex-direction: column; gap: .5rem;
    margin: 0; border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface-soft); padding: .25rem 1.25rem 1.25rem;
}
.apply-section legend {
    padding: 0 .5rem; margin-left: -.5rem;
    font-weight: 700; font-size: 1.1rem; color: #1f487e;
}
.dash-inline-form { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.dash-inline-form select {
    height: 2.5rem;
    padding: 0 .5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: .95rem;
    max-width: 100%;
}
.dash-inline-form .button-secondary {
    height: 2.5rem;
    margin-top: 0;
    display: inline-flex;
    align-items: center;
}
.button-primary, .button-secondary, .button-decline, .button-wagtail {
    /* Padding + line-height land this at ~34px — compact, but still
       above a touch-friendly minimum (WCAG's 24px floor, Material's 36dp
       "dense" button) for mobile/tablet. */
    padding: .4rem 1.1rem; line-height: 1.3; border: none; border-radius: 6px; cursor: pointer; font-size: .95rem; margin-top: .5rem; font-weight: normal;
}
/* One consistent look for every "do this" action — .button-secondary used
   to be an outline variant of .button-primary, but the two read as too
   similar to tell apart at a glance (see Til skoðunar, "Hönnunar-/
   útlitsúrbætur" atriði 1/8). .button-decline is the one deliberate
   exception — cancel/close/reject actions (Hætta við, Hafna, Loka, Nei)
   stay visually distinct so they're never mistaken for the action they're
   backing out of. */
.button-primary, .button-secondary, .button-secondary:visited {
    background: var(--accent); color: #fff; border: none;
}
.button-decline, .button-decline:visited {
    background: var(--danger-tint); color: var(--danger); border: 1px solid var(--danger);
}
/* Wagtail's own admin accent colour (#007D7E) — used for links that take
   you back into the Wagtail admin, so they read as distinct from the
   site's own blue action buttons. */
.button-wagtail, .button-wagtail:visited { background: #007d7e; color: #fff; }

/* Quiz */
.quiz-score {
    background: #fdf3e7;
    border: 1px solid #f0d9b5;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
}
.quiz-progress { color: var(--muted); font-weight: 600; margin-bottom: 1rem; }
/* One question shown at a time (see take_quiz.html's JS) — Fyrri/Næsta
   toggle which .quiz-question is visible; Skila svörum only shows on the
   last one. */
.quiz-nav { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.quiz-nav .button-secondary { margin-top: 0; }
.quiz-question {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}
.quiz-question-text { font-weight: 600; margin-bottom: .75rem; }
/* One question can carry several images now (up to 6, see
   InlinePanel max_num on QuizQuestionImage), laid out side by side
   (Mynd 1 first, in order — see take_quiz.html) rather than stacked.
   flex: 1 1 90px shrinks images together to share the row, but the
   90px floor plus flex-wrap keeps them from shrinking past legibility
   on narrow phones — extra images wrap onto a second row instead.
   max-width caps them from getting too large when there's only one or
   two on a wide screen. */
.quiz-question-images {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
    margin: 0 auto .75rem;
}
.quiz-question-image {
    flex: 1 1 90px;
    min-width: 90px;
    max-width: 200px;
    text-align: center;
}
/* width: 100% + height: auto (rather than relying on the image's own
   intrinsic size) guarantees the browser scales both dimensions
   together — never stretches — even before the image itself has
   loaded, and lets it shrink to fill whatever share of the row
   .quiz-question-image above gives it. */
.quiz-question-image img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 6px;
}
.quiz-question-image-label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: .3rem;
}
.quiz-option { display: block; margin: .4rem 0; cursor: pointer; }
.quiz-option input { margin-right: .5rem; }
/* Rétt/Rangt — the two options are inherently mutually exclusive
   opposites, so side by side and centered reads as one choice rather
   than a list; fjölvalsspurningar (.quiz-option outside this wrapper)
   keep the stacked one-per-line layout above, since those can have any
   number of options and centering a variable-length list looks odd. */
.quiz-options-tf {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}
.quiz-options-tf .quiz-option { margin: .4rem 0; }
.quiz-feedback { margin-top: .75rem; font-weight: 600; }
.quiz-feedback-incorrect { color: var(--danger); }
.quiz-explanation {
    margin-top: .5rem;
    padding: .75rem 1rem;
    background: var(--surface-soft);
    border-radius: 6px;
    font-weight: normal;
}
.quiz-submit {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: .8rem 1.75rem;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
}
.quiz-submit:hover { opacity: .9; }

/* Login */
.login-page { max-width: 400px; margin: 0 auto; }
.login-page input[type="text"], .login-page input[type="password"] {
    width: 100%; padding: .5rem; border: 1px solid var(--border); border-radius: 4px;
}
.login-error { color: var(--danger); font-weight: 600; }