/* Volunteering Ukraine FAQ — Base Styles
 *
 * Palette and typography are taken from volunteeringukraine.com so the FAQ
 * reads as part of the same site. Their tokens, verbatim:
 *
 *   --slate-blue     #474eff    primary
 *   --organge        #ffc700    accent (their spelling)
 *   --black          #1c1c1c
 *   --bg-light-blue  #f0f1ff
 *   --light-grey     #d9d9d9
 *
 * Typeface is e-Ukraine, Ukraine's official state typeface and the font that
 * site sets on nearly everything. Self-hosted below rather than loaded from
 * their CDN: the Content-Security-Policy allows fonts only from this origin,
 * and hotlinking someone else's assets is not ours to do.
 */

@font-face {
    font-family: 'e-Ukraine';
    src: url('../vendor/fonts/e-Ukraine-UltraLight.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'e-Ukraine';
    src: url('../vendor/fonts/e-Ukraine-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'e-Ukraine';
    src: url('../vendor/fonts/e-Ukraine-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'e-Ukraine';
    src: url('../vendor/fonts/e-Ukraine-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'e-Ukraine';
    src: url('../vendor/fonts/e-Ukraine-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Brand tokens, matching volunteeringukraine.com */
    --brand-blue: #474eff;
    --brand-blue-dark: #343ad6;
    --brand-yellow: #ffc700;
    --brand-black: #1c1c1c;
    --brand-tint: #f0f1ff;
    --brand-grey: #d9d9d9;

    /* Aliases kept so existing rules keep working */
    --primary-blue: var(--brand-blue);
    --accent-yellow: var(--brand-yellow);

    /* Status colours are darkened until white text on them clears WCAG AA
       (4.5:1). The obvious brighter greens and ambers do not — #1f9254 lands
       at 3.96:1. Verified, not eyeballed. */
    --success: #18773f;
    --warning: #96681a;
    --danger: #c62f2f;
    --info: var(--brand-blue);

    --primary-text: var(--brand-black);
    --secondary-text: #55555f;
    --muted-text: #75757f;
    --border-color: var(--brand-grey);
    --background-light: #ffffff;
    --surface: #ffffff;
    --white: #ffffff;

    --shadow-sm: 0 1px 2px rgba(28, 28, 28, 0.05);
    --shadow-md: 0 2px 10px rgba(28, 28, 28, 0.07);
    --shadow-lg: 0 8px 30px rgba(71, 78, 255, 0.12);

    /* They use tight radii on controls and generous ones on cards */
    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 10px;
    --radius-xl: 20px;

    --font-ui: 'e-Ukraine', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ============================================================
   Base Layout
   ============================================================ */
body {
    font-family: var(--font-ui);
    background-color: var(--background-light);
    color: var(--primary-text);
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-ui);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--primary-text);
}

/* ============================================================
   Header
   The upstream header was a hard blue/yellow flag gradient with yellow
   display type. volunteeringukraine.com is the opposite: white ground,
   near-black type, blue used sparingly as accent. This follows theirs,
   keeping the flag only as a thin rule so the identity survives.
   ============================================================ */
.header {
    background: var(--surface);
    border-bottom: 1px solid var(--border-color);
    padding: 28px 20px 22px;
    margin-bottom: 0;
    text-align: center;
    position: relative;
}

.header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--brand-blue) 0%,
        var(--brand-blue) 50%,
        var(--brand-yellow) 50%,
        var(--brand-yellow) 100%
    );
}

/* Inline flag, used instead of the 🇺🇦 emoji because Windows ships no flag
   glyphs and renders the emoji as the letters "UA". Sized in em so it tracks
   whatever the surrounding type is doing. */
.ua-flag {
    display: inline-block;
    width: 1.15em;
    height: calc(1.15em * 2 / 3);
    vertical-align: -0.08em;
    margin-right: 0.15em;
    border-radius: 2px;
    /* A hairline keeps the yellow half from bleeding into a white page and
       the blue half from vanishing into a dark one. */
    box-shadow: 0 0 0 1px rgba(28, 28, 28, 0.18);
}

[data-theme="dark"] .ua-flag {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.header-title {
    color: var(--primary-text);
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
    font-size: 2rem;
    line-height: 1.15;
}

.header-subtitle {
    background: none;
    color: var(--secondary-text);
    font-weight: 300;
    padding: 0;
    display: inline-block;
    font-size: 1rem;
    margin-bottom: 0;
}

/* ============================================================
   Navigation
   ============================================================ */
.nav {
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    background: var(--surface);
    padding: 10px 16px 12px;
    border-bottom: 1px solid var(--border-color);
}

.nav .nav-link {
    padding: 8px 14px;
    text-decoration: none;
    background: none;
    color: var(--secondary-text) !important;
    border: none;
    border-radius: var(--radius-md);
    transition: color 0.18s ease, background-color 0.18s ease;
    font-weight: 400;
    font-size: 0.95rem;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav .nav-link:hover,
.nav .nav-link:active {
    background-color: var(--brand-tint);
    color: var(--brand-blue) !important;
}

.nav .nav-link.active {
    background: none;
    color: var(--brand-blue) !important;
    font-weight: 500;
    box-shadow: inset 0 -2px 0 var(--brand-blue);
    border-radius: 0;
}

.nav .dropdown-toggle {
    font-family: var(--font-ui);
}

.nav .dropdown-menu {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    font-size: 0.95rem;
}

.nav .dropdown-item:active,
.nav .dropdown-item:focus,
.nav .dropdown-item:hover {
    background-color: var(--brand-tint);
    color: var(--brand-blue);
}

/* Theme toggle button */
.theme-toggle {
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    background: none;
    border: none;
}

.theme-icon-dark { display: none; }
[data-theme="dark"] .theme-icon-dark { display: inline; }
[data-theme="dark"] .theme-icon-light { display: none; }

/* ============================================================
   Main Content
   ============================================================ */
.main-content {
    min-height: calc(100vh - 200px);
    padding-top: 28px;
    padding-bottom: 56px;
    /* Full-bleed content stretched section headers across the whole viewport
       and pushed body copy past 100 characters a line. Header and nav stay
       edge-to-edge; everything you actually read is contained. */
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
}

/* Flash messages sit outside .main-content but should share its measure. */
body > .container.mt-3 {
    max-width: 1040px;
}

/* Prose gets a tighter measure than the cards holding it. */
.faq-entry-content {
    max-width: 74ch;
}

/* ============================================================
   FAQ Search Bar
   ============================================================ */
.faq-search-form {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.faq-search-input {
    font-size: 1rem;
}

/* ============================================================
   Access Banner
   ============================================================ */
.faq-access-banner {
    border: 1px solid var(--brand-grey);
    border-left: 3px solid var(--brand-blue);
    border-radius: var(--radius-md);
    background: var(--brand-tint);
    color: var(--primary-text);
}

/* ============================================================
   Tag Section Accordion
   ============================================================ */
.tag-section {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.tag-section-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    cursor: pointer;
    font-weight: 500;
    font-size: 1.05rem;
    border-left: none;
    background: var(--brand-tint);
    user-select: none;
    list-style: none;
}

.tag-section-summary::-webkit-details-marker {
    display: none;
}

.tag-section-summary::before {
    content: '+';
    font-weight: 500;
    font-size: 1.15rem;
    color: var(--brand-blue);
    min-width: 18px;
    text-align: center;
    transition: transform 0.2s ease;
}

details.tag-section[open] > .tag-section-summary::before {
    content: '-';
}

.tag-section-name {
    flex: 1;
    color: var(--primary-text);
}

.tag-section-count {
    font-size: 0.8rem;
}

.tag-section-body {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
}

/* ============================================================
   FAQ Entry Cards
   ============================================================ */
.faq-entry {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface);
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.faq-entry:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--brand-blue);
}

.faq-entry-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.faq-entry-summary::-webkit-details-marker {
    display: none;
}

.faq-entry-title {
    font-weight: 500;
    color: var(--primary-text);
    font-size: 0.97rem;
}

.faq-entry-snippet {
    font-size: 0.85rem;
    color: var(--muted-text);
}

.faq-entry-content {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border-color);
    font-size: 0.95rem;
    line-height: 1.6;
}

.faq-entry-content p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   Expand/Collapse controls
   ============================================================ */
.faq-expand-controls {
    flex-wrap: wrap;
}

/* ============================================================
   Empty state
   ============================================================ */
.faq-empty {
    text-align: center;
    color: var(--muted-text);
    padding: 48px 24px;
    font-size: 1.05rem;
}

/* Visibility badges and tag badges were removed here: they were dead CSS
   inherited from the upstream app, still using its public/prospect/accepted
   tier names. This system uses public/gated/draft and renders those with
   Bootstrap badge classes, themed further down. */

/* ============================================================
   Admin Table
   ============================================================ */
.admin-table th {
    border-bottom: 2px solid var(--primary-blue);
    color: var(--primary-blue);
    font-weight: 600;
    white-space: nowrap;
}

.admin-table td {
    vertical-align: middle;
}

/* ============================================================
   Cards
   ============================================================ */
.card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    background: var(--white);
}

.card-header {
    background: var(--white);
    border-bottom: 2px solid var(--primary-blue);
    font-weight: 600;
    color: var(--primary-blue);
    padding: 14px 20px;
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
    background: var(--white);
    border-top: 1px solid var(--border-color);
    padding: 24px 0;
    margin-top: 40px;
}

.footer a {
    color: var(--primary-blue);
    text-decoration: none;
}

.footer a:hover {
    color: #004494;
    text-decoration: underline;
}

/* ============================================================
   Alert overrides (custom left-border style)
   ============================================================ */
.alert {
    border: none;
    border-radius: var(--radius-lg);
    padding: 14px 20px;
    margin-bottom: 20px;
    border-left: 4px solid;
}

/* These carried the upstream teal/olive text colours, which put a colour
   outside the palette on the most prominent banner on the page. Text is now
   the normal body colour; the left rule carries the meaning. */
.alert-success {
    background: rgba(24, 119, 63, 0.08);
    border-left-color: var(--success);
    color: var(--primary-text);
}

.alert-danger {
    background: rgba(198, 47, 47, 0.08);
    border-left-color: var(--danger);
    color: var(--primary-text);
}

.alert-info {
    background: var(--brand-tint);
    border-left-color: var(--brand-blue);
    color: var(--primary-text);
}

.alert-warning {
    background: rgba(255, 199, 0, 0.12);
    border-left-color: var(--brand-yellow);
    color: var(--primary-text);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
    .main-content {
        padding-left: 14px;
        padding-right: 14px;
    }

    .tag-section-summary {
        font-size: 0.98rem;
        padding: 12px 14px;
    }

    .admin-table {
        font-size: 0.85rem;
    }

    /* Nav wraps to two rows on a phone. Tighten it so the second row is
       less likely, and so the rows sit closer together when it happens. */
    .nav {
        padding: 6px 8px 8px;
        gap: 2px;
    }

    .nav .nav-link {
        padding: 8px 10px;
        font-size: 0.9rem;
        min-height: 38px;
    }

    .header {
        padding: 20px 16px 16px;
    }
}

@media (max-width: 576px) {
    .header-title {
        font-size: 1.4rem;
    }

    .faq-search-form {
        width: 100%;
    }

    .faq-expand-controls .btn {
        font-size: 0.85rem;
    }

    /* Three levels of nesting — container, section body, entry card — each
       with its own padding, left roughly a third of a 360px screen as
       margin. Reclaim it; the text needs the room more than the chrome does.
       12px is the floor: Bootstrap rows carry a -12px gutter margin, so
       anything less and the row overflows the viewport horizontally. */
    .main-content {
        padding-left: 12px;
        padding-right: 12px;
    }

    .tag-section-body {
        padding: 8px 8px;
    }

    .faq-entry-summary,
    .faq-entry-content {
        padding-left: 12px;
        padding-right: 12px;
    }

    .alert {
        padding: 12px 14px;
    }

    /* Full-width tap targets read better than centred ones on a phone. */
    .faq-expand-controls .btn {
        flex: 1;
    }
}

/* Updated or New pseudo-tag */
.tag-section-summary-updated {
    border-left-color: #ffc933 !important;
    background: rgba(255, 201, 51, 0.06) !important;
}

[data-theme="dark"] .tag-section-summary-updated {
    border-left-color: #ffc933 !important;
    background: rgba(255, 201, 51, 0.08) !important;
}

/* ============================================================
   "What's new" markers — driven entirely by localStorage in faq.js.
   ============================================================ */

.recently-updated > .faq-entry-summary .faq-entry-title::after {
    content: "updated";
    margin-left: 0.5rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 3px;
    background: var(--brand-blue);
    color: #fff;
    vertical-align: middle;
}

.whats-new {
    padding: 0.7rem 1.1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--brand-yellow);
    border-left: 3px solid var(--brand-yellow);
    background: rgba(255, 199, 0, 0.10);
    color: var(--primary-text);
    border-radius: var(--radius-md);
}

.visibility-badge {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

/* Admin quiz editor */
.quiz-editor .existing-question ol .correct {
    font-weight: 600;
}

.quiz-editor .existing-question ol .correct::after {
    content: " ✓";
    color: var(--success);
}

.access-code-display code {
    font-size: 1.25rem;
    padding: 0.45rem 0.8rem;
    border-radius: var(--radius-md);
    background: var(--brand-tint);
    color: var(--brand-blue);
    border: 1px solid var(--brand-grey);
    user-select: all;
    letter-spacing: 0.02em;
}


/* ============================================================
   Bootstrap component overrides
   volunteeringukraine.com's buttons are solid blue, uppercase, tightly
   tracked, with a near-square radius (their .button uses 1-2px). These
   bring Bootstrap's defaults onto that.
   ============================================================ */
.btn {
    font-family: var(--font-ui);
    border-radius: var(--radius-sm);
    font-weight: 400;
    letter-spacing: 0.04em;
    padding: 12px 24px;
    transition: background-color 0.18s ease, color 0.18s ease,
                border-color 0.18s ease;
}

.btn-primary,
.btn-primary:focus {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #fff;
    text-transform: uppercase;
}

.btn-primary:hover,
.btn-primary:active {
    background-color: var(--brand-blue-dark) !important;
    border-color: var(--brand-blue-dark) !important;
    color: #fff !important;
}

.btn-outline-primary {
    color: var(--brand-blue);
    border-color: var(--brand-blue);
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: #fff !important;
}

.btn-outline-secondary {
    color: var(--secondary-text);
    border-color: var(--brand-grey);
}

.btn-outline-secondary:hover {
    background-color: var(--brand-tint) !important;
    border-color: var(--brand-grey) !important;
    color: var(--primary-text) !important;
}

.btn-sm {
    padding: 7px 14px;
    font-size: 0.85rem;
}

a {
    color: var(--brand-blue);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--brand-blue-dark);
}

.form-control,
.form-select {
    font-family: var(--font-ui);
    border-radius: var(--radius-md);
    border-color: var(--brand-grey);
    padding: 11px 14px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(71, 78, 255, 0.15);
}

.card {
    border-radius: var(--radius-xl);
    border-color: var(--border-color);
}

.badge.bg-secondary {
    background-color: var(--brand-tint) !important;
    color: var(--brand-blue) !important;
    font-weight: 400;
}

.badge.bg-success {
    background-color: var(--success) !important;
    font-weight: 400;
}

.badge.bg-warning {
    background-color: var(--brand-yellow) !important;
    color: var(--brand-black) !important;
    font-weight: 400;
}

/* Auth cards sit alone on a wide page; give them room and lift. */
.auth-card {
    margin-top: 2.5rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.auth-card .card-body {
    padding: 2rem;
}