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

html { scroll-behavior: smooth; }

/* keep anchored sections clear of the sticky navbar */
section[id] { scroll-margin-top: 80px; }

@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;
    --bs-body-color: #C2C2D6;
    --bs-body-color-rgb: 194, 194, 214;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: rgba(194, 194, 214, 0.7);
    --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 ─── */
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;
    box-shadow: 0 8px 30px -10px rgba(123, 47, 255, 0.6);
}

.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;
}

/* ─── Navbar ─── */
.navbar {
    background: rgba(10, 10, 20, 0.8) !important;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--echo-border);
}

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

.brand-logo {
    height: 26px;
    width: auto;
    display: block;
}

/* Taller bar with the primary nav centred between the brand and the
   account/lang controls (lg+ only — the mobile menu stays stacked). */
@media (min-width: 992px) {
    .navbar { padding-top: 1.05rem; padding-bottom: 1.05rem; }

    .navbar > .container { position: relative; }

    .navbar-nav-center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        column-gap: 0.85rem;
    }

    .navbar-nav-center .nav-link { padding-left: 1.85rem; padding-right: 1.85rem; }

    /* Rounded "pill" highlight on every top-level item. */
    .navbar-nav .nav-link {
        border-radius: 10px;
        transition: background-color 0.15s ease, 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,
    .navbar-nav .nav-link.active {
        background: var(--echo-glow);
        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;
    }

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

/* ─── 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);
}

.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 - 4.5rem), 940px);
    min-height: clamp(560px, calc(100svh - 4.5rem), 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;
}

.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);
}

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

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

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

/* ─── 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,
    .navbar-nav .nav-link.active {
        background: var(--echo-glow);
        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 { background: var(--echo-glow); color: #fff; }

    /* Logout sits inside a form; the register CTA and lang picker go full width. */
    .navbar-nav form { width: 100%; }
    .navbar-nav .btn-primary { width: 100%; margin: 0.35rem 0 0; }
    .navbar .form-select { width: 100% !important; margin-top: 0.35rem; }
}

/* ─── 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) {
    .hero > .hero-map { animation: echoMapIn 1.2s ease both; }

    /* 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 echoMapIn { from { opacity: 0; } to { opacity: 0.7; } }
    @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: scroll reveal + hero parallax ─── */
:root { --animate-duration: 0.8s; }

@media (prefers-reduced-motion: no-preference) {
    /* Hide reveal targets until the observer fires, only when JS is active,
       so no-JS visitors still see everything. */
    .js [data-reveal] { opacity: 0; }
    .js [data-reveal].is-revealed { opacity: 1; }

    /* 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);
    opacity: 0.55;
}

.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 class (added in Markdown::toHtml). */

/* ─── 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-brand-logo { height: 40px; width: auto; display: block; }

.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; }

@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; }
}