/* ECHO Romania: dark purple theme layered over Bootstrap 5.3.
   Loaded after the Bootstrap CDN so these overrides win. */

html { scroll-behavior: smooth; }

/* --header-h is the sticky header's height: measured and kept current by
   app.js, with a fallback close to the real value for no-JS visitors. */
:root { --header-h: 3.5rem; }

/* keep anchored sections clear of the sticky navbar */
section[id] { scroll-margin-top: calc(var(--header-h) + 0.5rem); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

:root {
    --echo-purple: #7B2FFF;
    --echo-purple-mid: #9B5FFF;
    --echo-purple-light: #C49AFF;
    --echo-glow: rgba(123, 47, 255, 0.16);
    --echo-border: rgba(255, 255, 255, 0.09);
    --echo-surface: rgba(255, 255, 255, 0.025);
}

[data-bs-theme="dark"] {
    --bs-body-bg: #0A0A14;
    --bs-body-bg-rgb: 10, 10, 20;
    /* All body text is a solid light grey, never translucent. */
    --bs-body-color: #DEDEDE;
    --bs-body-color-rgb: 222, 222, 222;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: #DEDEDE;
    --bs-secondary-color-rgb: 222, 222, 222;
    --bs-tertiary-color: #DEDEDE;
    --bs-tertiary-color-rgb: 222, 222, 222;
    --bs-tertiary-bg: #101020;
    --bs-tertiary-bg-rgb: 16, 16, 32;
    --bs-border-color: var(--echo-border);
    --bs-border-color-translucent: var(--echo-border);
    --bs-primary: #7B2FFF;
    --bs-primary-rgb: 123, 47, 255;
    --bs-link-color: #C49AFF;
    --bs-link-color-rgb: 196, 154, 255;
    --bs-link-hover-color: #ffffff;
    --bs-link-hover-color-rgb: 255, 255, 255;
    --bs-heading-color: #ffffff;
    --bs-card-bg: var(--echo-surface);
    --bs-card-border-color: var(--echo-border);
    --bs-card-cap-bg: rgba(255, 255, 255, 0.02);
}

/* ─── Typography ─── */
/* Placeholders stay solid but dimmer than real input text, so empty fields
   don't look filled in. */
.form-control::placeholder { color: #8E8E9A; }

body {
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: 'Syne', system-ui, sans-serif;
    letter-spacing: -0.02em;
    color: var(--bs-emphasis-color);
}

.lead { font-weight: 300; }

.gradient-text {
    background: linear-gradient(135deg, var(--echo-purple-mid), var(--echo-purple-light) 60%, #E8CFFF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-label {
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--echo-purple-mid);
    font-weight: 600;
}

.line-accent {
    display: inline-block;
    width: 40px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--echo-purple), var(--echo-purple-mid));
}

/* ─── Buttons (Bootstrap 5.3 per-component vars) ─── */
.btn-primary {
    --bs-btn-bg: var(--echo-purple);
    --bs-btn-border-color: var(--echo-purple);
    --bs-btn-hover-bg: var(--echo-purple-mid);
    --bs-btn-hover-border-color: var(--echo-purple-mid);
    --bs-btn-active-bg: #6a22e6;
    --bs-btn-active-border-color: #6a22e6;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: 123, 47, 255;
}

.btn-outline-light {
    --bs-btn-border-color: var(--echo-border);
    --bs-btn-color: var(--echo-purple-light);
    --bs-btn-hover-bg: var(--echo-glow);
    --bs-btn-hover-border-color: var(--echo-purple-mid);
    --bs-btn-hover-color: #fff;
}

/* 3D press effect: a darker solid ledge under every button (a box-shadow, so
   it doesn't change layout) that the button sinks into while pressed.
   Variants set --btn-edge; --btn-glow keeps any extra shadow alongside it.
   :where() keeps specificity at one class so component rules can override. */
.btn:where(:not(.btn-close, .btn-link)) {
    --btn-depth: 3px;
    --btn-edge: rgba(0, 0, 0, 0.45);
    --btn-glow: 0 0 #0000;
    box-shadow: 0 var(--btn-depth) 0 var(--btn-edge), var(--btn-glow);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
                border-color 0.15s ease-in-out, box-shadow 0.08s ease, transform 0.08s ease;
}
.btn:where(:not(.btn-close, .btn-link)):focus-visible {
    box-shadow: 0 var(--btn-depth) 0 var(--btn-edge), var(--bs-btn-focus-box-shadow);
}
.btn:where(:not(.btn-close, .btn-link)):active {
    transform: translateY(var(--btn-depth));
    box-shadow: 0 0 0 var(--btn-edge), var(--btn-glow);
}

.btn-primary {
    --btn-edge: #4b14ad;
    --btn-glow: 0 8px 30px -10px rgba(123, 47, 255, 0.6);
}
.btn-success { --btn-edge: #0f5132; }
.btn-info    { --btn-edge: #087990; }
.btn-danger  { --btn-edge: #842029; }
.btn[class*="btn-outline-"] { --btn-edge: rgba(255, 255, 255, 0.12); }
.btn.btn-outline-danger { --btn-edge: rgba(220, 53, 69, 0.45); }

/* ─── Navbar ─── */
/* Slides up out of view while scrolling down, back in on scroll up
   (toggled by public/js/app.js). */
.site-header {
    transition: transform 0.25s ease;
    will-change: transform;
}
.site-header.is-hidden { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
    .site-header { transition: none; }
}

.navbar {
    --bs-navbar-color: #DEDEDE;
    --bs-navbar-active-color: #DEDEDE;
    background: rgba(10, 10, 20, 0.8) !important;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--echo-border);
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.navbar-brand { display: inline-flex; align-items: center; gap: 0.55rem; }

/* The current page isn't highlighted in the menu, and hovering never adds a
   background: undo Bootstrap's active/hover styles for links and dropdown items. */
.navbar-nav .nav-link.active:not(:hover):not(:focus-visible) { color: var(--bs-navbar-color); }
.navbar .dropdown-menu {
    --bs-dropdown-link-hover-bg: transparent;
    --bs-dropdown-link-active-bg: transparent;
    --bs-dropdown-link-active-color: var(--bs-dropdown-link-color);
}
.navbar .dropdown-item.active:hover,
.navbar .dropdown-item.active:focus-visible { color: #fff; }

/* Primary nav sits left, just after the brand; account/lang controls
   are pushed right (lg+ only — the mobile menu stays stacked). */
@media (min-width: 992px) {
    .navbar > .container { position: relative; }

    .navbar-nav-main { margin-left: 1.5rem; }

    /* Main menu and right-hand account/lang items share the same spacing. */
    .navbar-nav-main,
    .navbar-nav-account { column-gap: 0.85rem; }

    .navbar-nav-main .nav-link,
    .navbar-nav-account .nav-link { padding-left: 1.5rem; padding-right: 1.5rem; }

    /* Keep the last item (language) flush with the container's right edge. */
    .navbar-nav-account > .nav-item:last-child > .nav-link { padding-right: 0; }

    /* Hover only brightens the text; no background pill. */
    .navbar-nav .nav-link {
        border-radius: 10px;
        transition: color 0.15s ease;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus-visible,
    .navbar-nav .nav-item.dropdown:hover > .nav-link,
    .navbar-nav .nav-item.dropdown:focus-within > .nav-link {
        color: #fff;
    }

    /* Open dropdowns on hover (and keep them open via keyboard focus).
       Clicking still works as a fallback. */
    .navbar-nav .nav-item.dropdown:hover > .dropdown-menu,
    .navbar-nav .nav-item.dropdown:focus-within > .dropdown-menu {
        display: block;
    }

    /* Float the menu a touch below the pill, with an invisible bridge filling
       the gap so the hover doesn't drop while the cursor crosses into it.
       Toggles carry data-bs-display="static" so click and hover share this
       same CSS-driven position (no Popper jump). */
    .navbar-nav .nav-item.dropdown > .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 0.5rem;
    }

    /* Right-hand dropdowns (portal, language) open aligned to their right edge. */
    .navbar-nav .nav-item.dropdown > .dropdown-menu-end { left: auto; right: 0; }

    .navbar-nav .nav-item.dropdown > .dropdown-menu::before {
        content: "";
        position: absolute;
        top: -0.5rem;
        left: 0;
        right: 0;
        height: 0.5rem;
    }
}

/* ─── Search page ─── */
.search-form .input-group-text {
    background: var(--echo-surface);
    border-color: var(--echo-border);
    color: var(--echo-purple-light);
}
.search-form .form-control { border-color: var(--echo-border); }
.search-form .form-control:focus {
    border-color: var(--echo-purple-mid);
    box-shadow: 0 0 0 0.2rem rgba(123, 47, 255, 0.25);
}

.search-group-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.15rem;
    padding-bottom: 0.6rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--echo-border);
}
.search-group-title .badge {
    background: var(--echo-glow);
    color: var(--echo-purple-light);
    font-weight: 500;
}

.search-result {
    padding: 1rem 0;
    border-bottom: 1px solid var(--echo-border);
}
.search-result:last-child { border-bottom: 0; }

.search-result--person { display: flex; gap: 1rem; align-items: flex-start; }
.search-result-body { min-width: 0; }
.search-result-photo {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.search-result-title {
    font-weight: 600;
    font-size: 1.05rem;
    color: #fff;
    text-decoration: none;
}
.search-result-title:hover,
.search-result-title:focus-visible { color: var(--echo-purple-light); text-decoration: underline; }

.search-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin-top: 0.2rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.search-result-text {
    margin: 0.35rem 0 0;
    font-size: 0.925rem;
    color: var(--bs-secondary-color);
    overflow-wrap: anywhere;
}

.search-results mark {
    padding: 0 0.1em;
    border-radius: 3px;
    background: rgba(123, 47, 255, 0.35);
    color: #fff;
}

/* ─── Hero ─── */
.hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--echo-border);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(123, 47, 255, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(123, 47, 255, 0.18) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%);
    opacity: 0.5;
    pointer-events: none;
}

.hero::after {
    content: "";
    position: absolute;
    top: -180px;
    left: 50%;
    width: 620px;
    height: 420px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(123, 47, 255, 0.22), transparent 65%);
    filter: blur(40px);
    pointer-events: none;
}

.hero > * { position: relative; }

/* Social links lifted out of the hero so they straddle its lower edge,
   half over the hero backdrop and half into the section below. */
.hero-social {
    position: relative;
    z-index: 4;
    margin-top: -1.9rem;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: center;
    padding-inline: 1rem;
}

/* On the home hero the bar lives inside the content, so cancel the lift-out
   offset and give it normal spacing under the copy. */
.hero .hero-social {
    margin-top: 1.75rem;
    margin-bottom: 0;
}

.hero-social-bar {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
}

/* Each link is its own separate bubble straddling the hero edge. */
.hero-social-bar .btn {
    margin: 0;
    padding: 0.7rem 1.4rem;
    background: rgba(16, 16, 32, 0.92);
    border: 1px solid var(--echo-border);
    border-radius: 50rem;
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.85);
    --btn-depth: 0px; /* floating bubbles: no 3D ledge */
}

.hero-social-bar .btn:hover {
    border-color: var(--echo-purple-mid);
    background: rgba(16, 16, 32, 0.92);
}

/* Compact hero — same animated backdrop as the home hero, in a shorter band
   for interior page headers. Height comes from the modifier so the inner
   .container stays padding-free (unlike the taller home hero). */
.hero--compact {
    padding-block: 3rem;
}

@media (min-width: 992px) {
    .hero--compact {
        padding-block: 4.5rem;
    }
}

/* Calm the map a touch on the shorter band so the heading stays legible. */
.hero--compact > .hero-map {
    opacity: 0.5;
}

/* Full-height home hero — fills the viewport on load (less the sticky
   header), capped so it never gets unwieldy on very tall screens and
   floored so the content always fits comfortably on short ones. The copy
   is centred vertically within the band. */
.hero--full {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: clamp(560px, calc(100vh - var(--header-h)), 940px);
    min-height: clamp(560px, calc(100svh - var(--header-h)), 940px);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--echo-glow);
    border: 1px solid rgba(155, 95, 255, 0.25);
    color: var(--echo-purple-light);
    border-radius: 50rem;
    padding: 0.35rem 0.95rem;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.eyebrow .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--echo-purple-mid);
}

/* ─── Cards ─── */
.card { transition: transform 0.25s ease, border-color 0.25s ease; }

.card-hover:hover {
    transform: translateY(-4px);
    border-color: rgba(155, 95, 255, 0.35) !important;
}

/* Home events carousel: one horizontally scrolling row that snaps card by
   card (swipe, trackpad or the arrow buttons; auto-advances in app.js).
   Vertical padding leaves room for the card hover lift, which the scroll
   container would otherwise clip. */
.event-track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-top: 0.5rem;
    padding-bottom: 0.75rem;
    margin-top: -0.5rem;
}
.event-track::-webkit-scrollbar { display: none; }
.event-track > * { scroll-snap-align: start; }
.event-track:focus-visible { outline: 2px solid var(--echo-purple-mid); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
    .event-track { scroll-behavior: auto; }
}

.icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: var(--echo-purple-light);
    background: var(--echo-glow);
    border: 1px solid rgba(155, 95, 255, 0.25);
}

/* ─── Impact timeline (layered progression, no icons) ─── */
.impact-timeline {
    list-style: none;
    max-width: 46rem;
    margin: 0 auto;
    padding: 0;
}

.impact-step {
    position: relative;
    display: grid;
    grid-template-columns: 3rem 1fr;
    column-gap: 1.5rem;
    padding-bottom: 2.75rem;
}

.impact-step:last-child { padding-bottom: 0; }

.impact-step-rail {
    position: relative;
    display: flex;
    justify-content: center;
}

/* Connector running from each numbered marker down to the next. */
.impact-step:not(:last-child) .impact-step-rail::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 3rem;
    bottom: -2.75rem;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(var(--echo-purple-mid), rgba(155, 95, 255, 0.12));
}

.impact-step-num {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: 'Syne', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--echo-purple-light);
    background: var(--bs-tertiary-bg);
    border: 1px solid rgba(155, 95, 255, 0.35);
    box-shadow: 0 0 16px rgba(123, 47, 255, 0.22);
}

.impact-step-panel {
    background: var(--echo-surface);
    border: 1px solid var(--echo-border);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.impact-step-panel:hover {
    transform: translateY(-4px);
    border-color: rgba(155, 95, 255, 0.35);
}

@media (max-width: 575.98px) {
    .impact-step {
        grid-template-columns: 2.5rem 1fr;
        column-gap: 1rem;
        padding-bottom: 2.25rem;
    }
    .impact-step-num { width: 2.5rem; height: 2.5rem; font-size: 0.85rem; }
    .impact-step:not(:last-child) .impact-step-rail::before { top: 2.5rem; bottom: -2.25rem; }
    .impact-step-panel { padding: 1rem 1.15rem; border-radius: 14px; }
}

/* ─── Event status badges ─── */
.badge-soon {
    background: rgba(123, 47, 255, 0.2);
    color: var(--echo-purple-light);
    border: 1px solid rgba(155, 95, 255, 0.3);
}

.badge-open {
    background: rgba(30, 200, 120, 0.15);
    color: #6EE7B7;
    border: 1px solid rgba(110, 231, 183, 0.3);
}

.badge-date {
    background: var(--echo-glow);
    color: var(--echo-purple-light);
    border: 1px solid rgba(155, 95, 255, 0.25);
    font-weight: 500;
}

/* ─── Forms ─── */
.form-control, .form-select {
    background-color: rgba(255, 255, 255, 0.035);
    border-color: var(--echo-border);
}

.form-control:focus, .form-select:focus {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--echo-purple-mid);
    box-shadow: 0 0 0 0.2rem rgba(123, 47, 255, 0.18);
}

/* ─── Tables ─── */
.table { --bs-table-bg: transparent; }

.table > thead {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--bs-secondary-color);
}

/* ─── Edition page: content column + sticky on-page index ─── */
.edition-section {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid var(--echo-border);
}

/* Headings jumped to from the index clear the sticky header. */
.edition-main [id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

.edition-toc-item a {
    display: block;
    padding: 0.3rem 0 0.3rem 0.75rem;
    border-left: 2px solid var(--echo-border);
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.edition-toc-item--2 a { padding-left: 1.5rem; font-size: 0.85rem; }
.edition-toc-item a:hover { color: #fff; }
.edition-toc-item a.is-active {
    color: #fff;
    border-left-color: var(--echo-purple-mid);
}

/* lg+: the index follows the page down (stopping where the two-column block
   ends, before mentors) and scrolls itself when taller than the viewport.
   It moves up into the header's space while the header is slid away. */
@media (min-width: 992px) {
    .edition-toc {
        position: sticky;
        top: calc(var(--header-h) + 1rem);
        max-height: calc(100vh - var(--header-h) - 2rem);
        overflow-y: auto;
        scrollbar-width: thin;
        transition: top 0.25s ease, max-height 0.25s ease;
    }
    body:has(.site-header.is-hidden) .edition-toc {
        top: 1rem;
        max-height: calc(100vh - 2rem);
    }
}

/* ─── Team ─── */
.team-photo {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 2px solid rgba(155, 95, 255, 0.45);
}

/* Mentor / mentee avatars on the dashboard. */
.team-photo-sm {
    width: 56px;
    height: 56px;
}

/* Long bios on team cards: clamped to ~5 lines with a fade, expanded via
   the "Read more" toggle. Only applied by app.js, so without JS the full
   bio shows. */
.bio-clamp.is-collapsed {
    max-height: 7.5em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
    mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

.bio-toggle { text-decoration: none; }

.text-accent { color: var(--echo-purple-light) !important; }

/* ─── Footer ─── */
footer a { text-decoration: none; }

.site-footer { background: rgba(16, 16, 32, 0.35); }

.footer-heading {
    color: var(--bs-secondary-color);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.footer-links { display: grid; gap: 0.55rem; }

.footer-links a {
    color: var(--bs-secondary-color);
    transition: color 0.15s ease;
}

.footer-links a:hover,
.footer-links a:focus-visible { color: var(--bs-emphasis-color); }

.footer-links .bi { color: var(--echo-purple-light); margin-right: 0.35rem; }

.site-footer-bottom { border-top: 1px solid var(--echo-border); }

/* Brand column: large logo with the name underneath, centred both ways. */
.footer-brand {
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer-brand-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Syne', system-ui, sans-serif;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    color: var(--bs-emphasis-color);
}
.footer-logo { width: 88px; height: 88px; display: block; }

/* Side-by-side columns (lg+) get vertical dividers that run from the
   footer's top border down to the bottom bar's divider. */
@media (min-width: 992px) {
    .footer-col { padding-top: 2.25rem; padding-bottom: 3rem; }
    .footer-col + .footer-col { border-left: 1px solid var(--echo-border); }

    /* Side lines on the bottom bar only (the columns above have no outer
       lines). The row drops its negative margins so its edges line up with
       the bottom bar's. */
    .footer-bottom-inner {
        border-left: 1px solid var(--echo-border);
        border-right: 1px solid var(--echo-border);
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Collaborator / partner logos — both rendered white on the dark footer.
   The Consulate emblem ships on a solid white background, so a keyed
   white-on-transparent version (consulate-manchester-white.png) is used
   to match the white LSRS mark. */
.footer-collab-link {
    display: inline-flex;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.footer-collab-link:hover,
.footer-collab-link:focus-visible { opacity: 1; }

.footer-collab-logo {
    width: auto;
    display: block;
}

.footer-collab-logo--consulate { height: 112px; }
.footer-collab-logo--lsrs { height: 78px; }

/* ─── Media ─── */
.media-asset-card {
    border: 1px solid var(--echo-border);
    border-radius: 16px;
    overflow: hidden;
}

.media-asset-card--dark { background: #080810; }
.media-asset-card--light { background: #f7f7f4; }

.media-asset-preview {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: clamp(15rem, 32vw, 21rem);
    padding: 2.5rem;
}

.media-logo { display: block; max-height: 13rem; max-width: min(100%, 19rem); }

.media-asset-card--light .section-label { color: #5d25bd; }
.media-asset-card--light h2 { color: #161622; }
.media-asset-card--light .text-body-secondary { color: #565664 !important; }

.media-asset-download {
    color: var(--echo-purple-light);
    font-size: 0.9rem;
    font-weight: 600;
}

.media-asset-card--light .media-asset-download { color: #5d25bd; }

/* ─── Mobile menu ─── */
.navbar-toggler {
    border-color: var(--echo-border);
    padding: 0.4rem 0.55rem;
}

.navbar-toggler:focus { box-shadow: 0 0 0 0.2rem rgba(123, 47, 255, 0.3); }

@media (max-width: 991.98px) {
    /* Anchor the menu to the bar so it overlays the page instead of pushing
       the content below it down when it opens. */
    .navbar > .container { position: relative; }

    .navbar-collapse {
        position: absolute;
        top: calc(100% + 0.5rem);
        left: 0;
        right: 0;
        z-index: 1030;
        padding: 0.75rem;
        background: rgba(10, 10, 20, 0.97);
        backdrop-filter: blur(16px);
        border: 1px solid var(--echo-border);
        border-radius: 14px;
        box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.85);
        max-height: calc(100svh - 5rem);
        overflow-y: auto;
    }

    .navbar-nav .nav-item { width: 100%; }

    .navbar-nav .nav-link {
        width: 100%;
        text-align: left;
        padding: 0.65rem 0.75rem;
        border-radius: 9px;
    }

    .navbar-nav .nav-link:hover { color: #fff; }

    .navbar-nav .nav-item.dropdown .dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Flatten the admin dropdown into an indented sub-list. */
    .navbar-nav .dropdown-menu {
        margin: 0;
        padding: 0.15rem 0 0.15rem 0.85rem;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .navbar-nav .dropdown-item {
        padding: 0.55rem 0.75rem;
        border-radius: 9px;
    }

    .navbar-nav .dropdown-item:hover { color: #fff; }

    /* Logout sits inside a form; the register CTA goes full width. */
    .navbar-nav form { width: 100%; }
    .navbar-nav .btn-primary { width: 100%; margin: 0.35rem 0 0; }
}

/* ─── Hero connection map (UK ↔ Romania backdrop) ─── */
.hero { isolation: isolate; }

.hero > .hero-map {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.7;
    -webkit-mask-image: radial-gradient(ellipse 80% 74% at 56% 42%, #000 50%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 74% at 56% 42%, #000 50%, transparent 100%);
    transform: translate3d(0, var(--hero-parallax-slow, 0), 0);
}

/* keep the hero copy above the map */
.hero > .container { z-index: 2; }

/* Fit to width and center vertically so the full UK→RO span stays in
   frame on every viewport. (cover/slice cropped the sides off on phones.) */
.hero-map svg {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: auto;
    transform: translateY(-50%);
}

.hero-map .land {
    fill: rgba(255, 255, 255, 0.025);
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 0.7;
    stroke-linejoin: round;
}

.hero-map .arc {
    fill: none;
    stroke: url(#arcGrad);
    stroke-width: 1;
    stroke-linecap: round;
    opacity: 0.32;
    filter: drop-shadow(0 0 2px rgba(155, 95, 255, 0.35));
}

.hero-map .pulse {
    fill: none;
    stroke: var(--echo-purple-mid);
    stroke-width: 1.1;
}

.hero-map .core {
    fill: #E8CFFF;
    filter: drop-shadow(0 0 4px rgba(196, 154, 255, 0.9));
}

.hero-map .flow {
    fill: #ffffff;
    filter: drop-shadow(0 0 5px rgba(196, 154, 255, 0.95));
}

/* Dynamic UK↔RO links (drawn by JS into .flyways). The whole link group's
   opacity is faded out by the script at the end of each cycle. */
.hero-map .flyway {
    fill: none;
    stroke: url(#arcGrad);
    stroke-width: 1.2;
    stroke-linecap: round;
    opacity: 0.5;
    filter: drop-shadow(0 0 2px rgba(155, 95, 255, 0.45));
}

.hero-map .flyway-dot {
    fill: #ffffff;
    filter: drop-shadow(0 0 5px rgba(196, 154, 255, 0.95));
}

@media (prefers-reduced-motion: no-preference) {
    /* When JS is active it draws the live connections into .flyways, so hide
       the pre-baked static arcs and looping flow dots (kept for no-JS). */
    .js .hero-map .arcs,
    .js .hero-map .nodes,
    .js .hero-map .flows { display: none; }

    .hero-map .arc {
        stroke-dasharray: var(--len);
        stroke-dashoffset: var(--len);
        animation: echoDraw 2.2s ease forwards;
        animation-delay: var(--delay, 0s);
    }

    @keyframes echoDraw { to { stroke-dashoffset: 0; } }
}

/* Freeze the SMIL flow dots / pulses for reduced-motion visitors. */
@media (prefers-reduced-motion: reduce) {
    .hero-map .pulse, .hero-map .flow, .hero-map .flyway, .hero-map .flyway-dot { display: none; }
}

/* ─── Motion: hero parallax ─── */

@media (prefers-reduced-motion: no-preference) {
    /* Subtle parallax on the hero backdrop, driven by JS-set custom props.
       Falls back to the static transforms for reduced-motion users. */
    .hero::before { transform: translate3d(0, var(--hero-parallax, 0), 0); }
    .hero::after  { transform: translate(-50%, var(--hero-parallax-slow, 0)); }
}

/* ─── Mentoring page ─── */
.mentoring-chip {
    padding: 0.4rem 0.95rem;
    border: 1px solid var(--echo-border);
    border-radius: 50rem;
    background: var(--echo-surface);
    font-size: 0.88rem;
}

/* When the highlight chips straddle the hero edge they become floating
   bubbles, matching the home page's social bar. */
.hero-social-bar .mentoring-chip {
    padding: 0.7rem 1.4rem;
    background: rgba(16, 16, 32, 0.92);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.85);
}

.text-emphasis { color: var(--bs-emphasis-color); }

.reward-item {
    background: var(--echo-surface);
    border: 1px solid var(--echo-border);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.reward-item:hover {
    transform: translateY(-3px);
    border-color: rgba(155, 95, 255, 0.35);
}

.reward-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: var(--echo-purple-light);
    background: var(--echo-glow);
    border: 1px solid rgba(155, 95, 255, 0.25);
}

/* ─── Mentoring role flip cards ───
   Each role card flips to reveal its details on hover (pointer devices), on
   keyboard focus, or on click/tap (which pins it open — the path touch uses).
   The 3D flip is built only when the page has the `js` class (set inline in
   the <head>), so without JS the two faces stack and every detail stays
   readable. */
.flip-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
}

.flip-hint i { font-size: 0.9rem; }

/* No-JS fallback: hide the (non-functional) hint; faces render as plain cards. */
.flip-hint { display: none; }
.flip-card-front { margin-bottom: 1rem; }

.js .flip-hint { display: inline-flex; }
.js .flip-card-front { margin-bottom: 0; }

.js .flip-card {
    height: 24rem;
    perspective: 1400px;
    cursor: pointer;
    outline: none;
}

.js .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}

/* Reveal the back on click/tap (persists), keyboard focus, or — on devices
   that truly hover — pointer hover. Touch keeps :hover off so it never sticks. */
.js .flip-card.is-flipped .flip-card-inner,
.js .flip-card:focus-visible .flip-card-inner { transform: rotateY(180deg); }

@media (hover: hover) and (pointer: fine) {
    .js .flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
}

.js .flip-card-front,
.js .flip-card-back {
    position: absolute;
    inset: 0;
    margin: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.js .flip-card-back {
    transform: rotateY(180deg);
    overflow-y: auto;
}

/* Glow the border of whichever face is showing while active. */
.js .flip-card:hover .flip-card-front,
.js .flip-card:hover .flip-card-back,
.js .flip-card.is-flipped .flip-card-back {
    border-color: rgba(155, 95, 255, 0.35);
}

.js .flip-card:focus-visible .flip-card-front,
.js .flip-card:focus-visible .flip-card-back {
    border-color: rgba(155, 95, 255, 0.6);
    box-shadow: 0 0 0 0.2rem rgba(123, 47, 255, 0.18);
}

/* Slim themed scrollbar for the longer backs (e.g. responsibilities). */
.js .flip-card-back::-webkit-scrollbar { width: 6px; }
.js .flip-card-back::-webkit-scrollbar-thumb {
    background: rgba(155, 95, 255, 0.35);
    border-radius: 3px;
}

/* Nested 3D transforms make per-item hover lifts flicker; keep them flat here. */
.js .flip-card .reward-item:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .js .flip-card-inner { transition: none; }
}

/* ─── Rich text (Markdown rendered from admin descriptions) ─── */
/* Bootstrap's Reboot already styles p / ul / headings / links; these rules
   trim stray edge margins and theme the GFM extras (code, quotes, tables). */
.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text :is(h1, h2, h3, h4, h5, h6) { margin-top: 1.5rem; }
.rich-text img { max-width: 100%; height: auto; border-radius: 10px; }

.rich-text :not(pre) > code { color: var(--echo-purple-light); }

.rich-text pre {
    background: var(--echo-surface);
    border: 1px solid var(--echo-border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    overflow-x: auto;
}

.rich-text blockquote {
    margin-left: 0;
    padding-left: 1rem;
    border-left: 3px solid var(--echo-purple-mid);
    color: var(--bs-secondary-color);
}

/* Markdown tables render with Bootstrap's .table.table-bordered (added in
   Markdown::toHtml), as do the AI policy tables: a full grid of lines like
   GitHub's Markdown tables, with a faint header row. */
.table-bordered > :not(caption) > * > * { border-color: rgba(255, 255, 255, 0.16); }
.table-bordered > thead > tr > * { background: rgba(255, 255, 255, 0.03); }

/* ─── FAQ accordion ─── */
/* Bootstrap's accordion (5.3 component vars) re-skinned for the dark purple
   theme: every Q&A is its own glassy card with a purple chevron and a hover
   glow, matching the site's cards. No extra JS — the Bootstrap bundle drives
   the collapse. */
.faq-accordion {
    --bs-accordion-color: var(--bs-body-color);
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: var(--echo-border);
    --bs-accordion-border-width: 1px;
    --bs-accordion-border-radius: 16px;
    --bs-accordion-inner-border-radius: 16px;
    --bs-accordion-btn-padding-x: 1.35rem;
    --bs-accordion-btn-padding-y: 1.2rem;
    --bs-accordion-btn-color: var(--bs-emphasis-color);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-btn-focus-border-color: rgba(155, 95, 255, 0.5);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(123, 47, 255, 0.18);
    --bs-accordion-active-color: var(--bs-emphasis-color);
    --bs-accordion-active-bg: rgba(123, 47, 255, 0.07);
    --bs-accordion-body-padding-x: 1.35rem;
    --bs-accordion-body-padding-y: 1.1rem;
}

/* Each item is a standalone rounded card with room to breathe between them. */
.faq-accordion .accordion-item {
    background: var(--echo-surface);
    border: 1px solid var(--echo-border);
    border-radius: 16px;
    margin-bottom: 0.85rem;
    transition: border-color 0.25s ease;
}

.faq-accordion .accordion-item:last-child { margin-bottom: 0; }

.faq-accordion .accordion-item:hover { border-color: rgba(155, 95, 255, 0.35); }

.faq-accordion .accordion-button {
    font-family: 'Syne', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.02rem;
    letter-spacing: -0.01em;
    border-radius: 16px;
}

/* Open header: keep the rounded top, square the join with the body, and drop
   Bootstrap's inset divider shadow. */
.faq-accordion .accordion-button:not(.collapsed) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none;
}

.faq-accordion .accordion-button:focus { position: relative; z-index: 2; }

/* Recolour the chevron to the brand purple in both states (set the image
   directly so it wins over Bootstrap's dark-mode icon variables). The 180°
   flip on open is left to Bootstrap's default transform. */
.faq-accordion .accordion-button::after,
.faq-accordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23C49AFF'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

.faq-accordion .faq-icon {
    color: var(--echo-purple-light);
    font-size: 1.15rem;
    margin-right: 0.85rem;
    flex-shrink: 0;
}

.faq-accordion .accordion-body {
    color: var(--bs-secondary-color);
    padding-top: 0.25rem;
}

.faq-accordion .accordion-body a {
    color: var(--echo-purple-light);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.faq-accordion .accordion-body a:hover { color: #fff; }

/* ─── Auth split (login / register) ───
   Full-screen, chrome-free two-pane layout: a branded panel on the left and
   the form on the right, each filling the viewport. Collapses to a single
   stacked column below lg, where the brand panel becomes a slim header. */
.auth-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100svh;
}

.auth-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
    padding: clamp(2rem, 4vw, 4rem);
    border-right: 1px solid var(--echo-border);
    background:
        radial-gradient(130% 90% at 0% 0%, rgba(123, 47, 255, 0.20), transparent 55%),
        linear-gradient(165deg, rgba(22, 16, 45, 0.55), rgba(10, 10, 20, 0));
}

/* Grid backdrop masked toward the top-left, echoing the home hero. */
.auth-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(123, 47, 255, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(123, 47, 255, 0.16) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 85% 75% at 15% 15%, #000, transparent 75%);
    mask-image: radial-gradient(ellipse 85% 75% at 15% 15%, #000, transparent 75%);
    opacity: 0.55;
    pointer-events: none;
}

.auth-brand > * { position: relative; z-index: 1; }

.auth-feature-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--echo-purple-light);
    background: var(--echo-glow);
    border: 1px solid rgba(155, 95, 255, 0.25);
}

/* Right pane: utility row pinned to the top, form centred in the rest. */
.auth-form-panel {
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
}

.auth-form-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.auth-form-center {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-form-inner {
    width: 100%;
    max-width: 25rem;
    margin-inline: auto;
    padding-block: 1.5rem;
}

/* Flash messages (e.g. after a password reset) float at the top centre. */
.auth-status {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1080;
    width: min(92vw, 32rem);
}

.auth-status .alert { margin-bottom: 0; }

/* Same floating flash message on regular pages, sitting just under the
   sticky header (--header-h) instead of pushing the page down. */
.site-status {
    position: fixed;
    top: calc(var(--header-h) + 0.75rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1025; /* above the sticky header (1020), below modals/dropdowns */
    width: min(92vw, 32rem);
}

.site-status .alert { margin-bottom: 0; }

@media (max-width: 991.98px) {
    .auth-split {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .auth-brand {
        gap: 1.25rem;
        border-right: 0;
        border-bottom: 1px solid var(--echo-border);
    }

    .auth-form-panel { min-height: 60svh; }
}

/* ─── Edition resources ─── */

/* Lets the truncating title/meta shrink inside its flex row. */
.resource-label { min-width: 0; }

/* Public download cards. */
.resource-card { color: inherit; }
.resource-card:hover .bi-download { color: var(--echo-purple-mid) !important; }

.resource-card-icon {
    font-size: 1.75rem;
    line-height: 1;
    color: var(--echo-purple-mid);
}

/* Admin list: the grip is a JS-only affordance, so it stays hidden when the
   `js` class was never set — the up/down buttons work regardless. */
.resource-drag { display: none; }

html.js .resource-drag {
    display: inline-flex;
    cursor: grab;
    touch-action: none;
}

html.js .resource-drag:active { cursor: grabbing; }

.resource-item.is-dragging {
    opacity: 0.45;
    background: var(--bs-tertiary-bg);
}