/* ============================================================
   publiek/community.css - de Community (het forum).
   Hoort bij templates/public/community*.html en de bouwstenen in
   templates/public/delen/_community.html.

   Alle klassen beginnen met 'cm-', zodat ze niet botsen met de
   rest van de site. Van boven naar beneden:
     het kruimelpad, meldingen, de kop en de knop
     een kaart met rijen (categorieen, topics)
     de rechterkolom (cijfers, spellen, spel van de dag)
     de kop van een categorie en van een topic
     een bericht
     reageren en het formulier voor een nieuw topic
     smal scherm
   ============================================================ */

.cm { padding-top: 18px; }
.cm a { text-decoration: none; }
.cm a:hover { text-decoration: underline; }
/* het formulier voor een nieuw topic: een smalle kolom */
.cm.cm-smal { max-width: 760px; margin: 0 auto; }

/* ------------------------------------------------ het kruimelpad */
.cm-kruimel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--tekst-zacht);
}
.cm-kruimel [aria-current] { color: #fff; font-weight: 600; overflow-wrap: anywhere; }
.cm-kruimel-huis { display: grid; color: var(--paars-licht); }

/* ---------------------------------------------------- meldingen */
.cm-melding {
    margin: 0 0 14px;
    padding: 10px 14px;
    border: 1px solid;
    border-radius: var(--rond-klein);
    font-size: 14.5px;
}
.cm-melding.goed { border-color: rgba(52, 211, 153, .7); background: rgba(52, 211, 153, .12); color: #d6ffee; }
.cm-melding.fout { border-color: rgba(239, 83, 80, .7); background: rgba(239, 83, 80, .13); color: #ffd9d7; }

/* ------------------------------------------- de kop en de knop */
.cm-kop {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px 16px;
    margin: 0 0 16px;
}
.cm-kop h1 { font-size: 32px; }
.cm-kop p { margin: 6px 0 0; color: var(--tekst-zacht); font-size: 15px; }
.cm-kop p b { color: #fff; }

.cm-knop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 0;
    border-radius: var(--rond-klein);
    background: linear-gradient(90deg, #6d28d9, #7c3aed);
    color: #fff;
    font: inherit;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .15s, box-shadow .15s;
}
.cm .cm-knop:hover { text-decoration: none; filter: brightness(1.15); box-shadow: 0 0 16px rgba(124, 58, 237, .5); }
.cm-knop.klein { padding: 6px 12px; font-size: 13px; }

/* ------------------------------------------------------ een kaart */
.cm-indeling {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
}
.cm-kaart {
    margin-bottom: 18px;
    border: 1px solid var(--rand);
    border-radius: var(--rond);
    background: var(--vlak);
    overflow: hidden;
}
.cm-kaart > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 16px;
    border-bottom: 1px solid var(--rand);
    background: var(--vlak-hoog);
}
.cm-kaart > header h2 { font-size: 16px; }
.cm-kaart > header a { font-size: 13px; }

/* een rij: links waar het over gaat, dan twee getallen, dan het laatste */
.cm-rij {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 80px 80px 260px;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--rand);
}
.cm-rij:last-child { border-bottom: 0; }
.cm-rij.cm-topic { grid-template-columns: minmax(0, 1fr) 80px 80px 220px; padding-top: 12px; padding-bottom: 12px; }
.cm-rij-kop {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tekst-dof);
}
.cm-rij-kop div:nth-child(2),
.cm-rij-kop div:nth-child(3) { text-align: center; }

.cm-cat { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cm-cat > div { min-width: 0; }
.cm-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border: 1px solid var(--rand-neon);
    border-radius: 10px;
    background: linear-gradient(135deg, #1a1658, #10143c);
    color: var(--paars-licht);
}
.cm-ico.groot { width: 60px; height: 60px; }
.cm-cat h3 { font-size: 15.5px; }
.cm-cat h3 a { color: #fff; }
.cm-cat p { margin: 3px 0 0; font-size: 13px; color: var(--tekst-zacht); }

/* een getal met zijn woord eronder; het woord staat er alleen op een
   smal scherm (breed staat het in de regel met kopjes) */
.cm-getal { text-align: center; }
.cm-getal b { font-size: 16px; }
.cm-getal span { display: none; }

.cm-laatst { min-width: 0; font-size: 13px; }
.cm-laatst a, .cm-laatst b {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-weight: 700;
}
.cm-laatst span { color: var(--tekst-dof); }

/* ---------------------------------------------------- een topic in de lijst */
.cm-topic-titel { min-width: 0; }
.cm-topic-titel h3 { font-size: 15px; overflow-wrap: anywhere; }
.cm-topic-titel h3 a { color: #fff; }
.cm-topic-titel p { margin: 4px 0 0; font-size: 12.5px; color: var(--tekst-zacht); }
.cm-topic-titel p b { color: #fff; }
.cm-vast, .cm-dicht { display: inline-block; margin-right: 4px; vertical-align: -2px; }
.cm-vast { color: var(--goud); }
.cm-dicht { color: var(--tekst-dof); }
.cm-tag {
    display: inline-block;
    max-width: 100%;
    margin-right: 6px;
    padding: 1px 8px;
    border: 1px solid var(--rand-neon);
    border-radius: 20px;
    font-size: 11.5px;
    color: var(--paars-licht);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
.cm-tag.grijs { border-color: var(--rand); color: var(--tekst-zacht); }

/* ------------------------------------------------------ de regels */
.cm-regels {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 16px;
    list-style: none;
}
.cm-regels li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--tekst-zacht); }
.cm-regels .icoon { color: var(--groen); }
.cm-regels b { display: block; margin-bottom: 2px; color: #fff; font-size: 13.5px; }

/* -------------------------------------------------- de rechterkolom */
.cm-cijfers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 14px; }
.cm-cijfers div {
    display: flex;
    flex-direction: column;
    padding: 12px;
    border: 1px solid var(--rand);
    border-radius: 10px;
    background: var(--vlak-diep);
    text-align: center;
}
.cm-cijfers dd { margin: 0; font-size: 22px; font-weight: 700; }
.cm-cijfers dt { font-size: 12px; color: var(--tekst-zacht); }
.cm-cijfers .aan dd { color: var(--groen); }

.cm-stil { margin: 0; padding: 14px 16px; font-size: 13.5px; color: var(--tekst-zacht); }

.cm-cover {
    flex: none;
    display: block;
    width: 34px;
    aspect-ratio: 3 / 4;
    border-radius: 5px;
    background: linear-gradient(135deg, #2a2f7a, #5b3fd6);
    overflow: hidden;
}
.cm-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cm-cover.midden { width: 54px; border-radius: 7px; }
.cm-cover.groot { width: 72px; border-radius: 8px; }

.cm-spellen { margin: 0; padding: 6px 0; list-style: none; }
.cm-spellen a { display: flex; gap: 12px; align-items: center; padding: 9px 16px; color: inherit; }
.cm .cm-spellen a:hover { text-decoration: none; background: rgba(124, 58, 237, .10); }
.cm-spellen a > span:last-child { min-width: 0; }
.cm-spellen b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-spellen span span { font-size: 12px; color: var(--tekst-dof); }

.cm-dag { display: flex; gap: 14px; align-items: center; padding: 14px; }
.cm-dag > div { min-width: 0; }
.cm-dag b { font-size: 15px; overflow-wrap: anywhere; }
.cm-dag p { margin: 4px 0 8px; font-size: 12.5px; color: var(--tekst-zacht); }

/* ------------------------------------------ de kop van een categorie */
.cm-cathead {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 14px 16px;
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid var(--rand);
    border-radius: var(--rond);
    background: linear-gradient(180deg, #0e1238, #090c28);
}
.cm-cathead-wat { display: flex; gap: 16px; align-items: center; min-width: 0; }
.cm-cathead-wat > div { min-width: 0; }
.cm-cathead h1 { font-size: 28px; overflow-wrap: anywhere; }
.cm-cathead p { margin: 4px 0 0; color: var(--tekst-zacht); }
.cm-cathead .cm-meta { display: flex; gap: 22px; margin-top: 8px; font-size: 13px; }
.cm-meta b { margin-right: 2px; color: #fff; font-size: 15px; }

.cm-paginas { display: flex; justify-content: center; margin: 0 0 18px; }

.cm-leeg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 48px 20px;
    border: 1px dashed var(--rand-neon);
    border-radius: var(--rond);
    background: rgba(11, 15, 46, .6);
    text-align: center;
}
.cm-leeg > .icoon { color: var(--paars-licht); margin-bottom: 6px; }
.cm-leeg h2 { font-size: 19px; }
.cm-leeg p { margin: 0 0 10px; color: var(--tekst-zacht); }

/* ---------------------------------------------- de kop van een topic */
.cm-topickop { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.cm-topickop > div { min-width: 0; }
.cm-topickop h1 { font-size: 26px; overflow-wrap: anywhere; }
.cm-topickop p { margin: 5px 0 0; font-size: 13px; color: var(--tekst-zacht); }

/* ------------------------------------------------------ een bericht */
.cm-post {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    margin-bottom: 14px;
    border: 1px solid var(--rand);
    border-radius: var(--rond);
    background: var(--vlak);
    overflow: hidden;
    scroll-margin-top: 16px;
}
/* het bericht waar het adres naar wijst (#post-12) */
.cm-post:target { border-color: var(--rand-neon); box-shadow: var(--gloed); }
.cm-wie {
    padding: 16px;
    border-right: 1px solid var(--rand);
    background: var(--vlak-hoog);
    text-align: center;
}
.cm-letter {
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #38bdf8);
    font-size: 22px;
    font-weight: 800;
}
.cm-letter.weg { background: #23285f; color: var(--tekst-dof); }
.cm-wie b { display: block; font-size: 14.5px; overflow-wrap: anywhere; }
.cm-wie span { display: block; margin-top: 2px; font-size: 12px; color: var(--tekst-zacht); }
/* de letter is ook een <span>: hier weer zijn eigen vorm en maat */
.cm-wie .cm-letter { display: grid; margin-top: 0; color: #fff; font-size: 22px; }
.cm-wie .cm-letter.weg { color: var(--tekst-dof); }
.cm-wie .cm-rol {
    display: inline-block;
    margin-top: 6px;
    padding: 1px 8px;
    border: 1px solid var(--groen);
    border-radius: 20px;
    color: var(--groen);
    font-size: 11px;
}
.cm-wie .cm-rol.staf { border-color: var(--goud); color: var(--goud); }

.cm-tekst { min-width: 0; padding: 14px 18px; }
.cm-tekst p {
    margin: 0 0 10px;
    font-size: 14.5px;
    line-height: 1.6;
    color: #d8dbf6;
    white-space: pre-line;        /* een enter in de tekst blijft een enter */
    overflow-wrap: anywhere;
}
.cm-tekst p:last-child { margin-bottom: 0; }
.cm-tekst .cm-tekst-kop {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--tekst-dof);
    white-space: normal;
}
.cm-tekst-kop a { color: var(--tekst-dof); }

/* ----------------------------------------- reageren, en het formulier */
.cm-antwoord,
.cm-formulier {
    padding: 16px;
    border: 1px solid var(--rand);
    border-radius: var(--rond);
    background: var(--vlak);
}
.cm-antwoord { scroll-margin-top: 16px; }
.cm-antwoord h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 16px; }
.cm-antwoord p { margin: 0 0 12px; font-size: 14px; color: var(--tekst-zacht); }
.cm-antwoord-onder { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 13px; color: var(--tekst-zacht); }
.cm-antwoord-onder b { color: #fff; }

.cm textarea,
.cm-veld input,
.cm-veld select {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--rand);
    border-radius: var(--rond-klein);
    background: var(--vlak-diep);
    color: var(--tekst);
    font: inherit;
    font-size: 14.5px;
}
.cm textarea { min-height: 96px; margin-bottom: 12px; line-height: 1.5; resize: vertical; }
.cm textarea:focus,
.cm-veld input:focus,
.cm-veld select:focus { border-color: var(--paars-licht); outline: none; box-shadow: 0 0 0 3px rgba(124, 58, 237, .25); }
.cm ::placeholder { color: var(--tekst-dof); }

.cm-veld { margin-bottom: 15px; min-width: 0; }
.cm-veld label { display: block; margin-bottom: 5px; font-size: 13.5px; font-weight: 700; }
.cm-veld label span { margin-left: 4px; font-weight: 400; color: var(--tekst-dof); }
.cm-veld small { display: block; margin-top: 5px; font-size: 12.5px; color: var(--tekst-zacht); }
.cm-veld textarea { margin-bottom: 0; }

/* het rijtje spellen om uit te kiezen */
.cm-keuzes {
    margin: 0 0 15px;
    padding: 10px 14px 12px;
    border: 1px solid var(--rand-neon);
    border-radius: var(--rond-klein);
    background: rgba(124, 58, 237, .08);
}
.cm-keuzes legend { padding: 0 6px; font-size: 13.5px; font-weight: 700; }
.cm-keuzes label { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; font-size: 14px; cursor: pointer; }
.cm-keuzes input { flex: none; accent-color: var(--paars); }
.cm-keuzes i { font-style: normal; font-size: 12.5px; color: var(--tekst-dof); }

/* ------------------------------------------------ smaller scherm */
@media (max-width: 1180px) {
    .cm-indeling { grid-template-columns: minmax(0, 1fr); }
    /* de rechterkolom komt eronder: de drie kaarten naast elkaar */
    .cm-rechts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; align-items: start; }
    .cm-rechts .cm-kaart { margin-bottom: 0; }
}

@media (max-width: 860px) {
    .cm-regels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cm-rij { grid-template-columns: minmax(0, 1fr) 70px 70px 190px; }
    .cm-rij.cm-topic { grid-template-columns: minmax(0, 1fr) 70px 70px 160px; }
}

@media (max-width: 640px) {
    .cm-kop h1 { font-size: 26px; }
    .cm-cathead { padding: 14px; }
    .cm-cathead h1 { font-size: 22px; }
    .cm-ico.groot { width: 48px; height: 48px; }
    .cm-topickop h1 { font-size: 21px; }

    /* een rij wordt een blokje: de naam, en eronder de getallen op een regel */
    .cm-rij-kop { display: none; }
    .cm-rij,
    .cm-rij.cm-topic {
        grid-template-columns: auto auto minmax(0, 1fr);
        gap: 6px 14px;
        padding: 12px 14px;
    }
    .cm-cat, .cm-topic-titel { grid-column: 1 / -1; }
    .cm-getal { text-align: left; font-size: 12.5px; color: var(--tekst-zacht); white-space: nowrap; }
    .cm-getal b { font-size: 13px; color: #fff; }
    .cm-getal span { display: inline; }
    .cm-laatst { grid-column: 1 / -1; }
    .cm-rij .cm-laatst a, .cm-rij .cm-laatst b { display: inline; margin-right: 6px; white-space: normal; }
    .cm-rij:not(.cm-topic) .cm-laatst a { display: block; white-space: nowrap; }
    .cm-regels { grid-template-columns: minmax(0, 1fr); }

    /* een bericht: wie het schreef komt als een regel boven de tekst */
    .cm-post { grid-template-columns: minmax(0, 1fr); }
    .cm-wie {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 10px;
        padding: 10px 14px;
        border-right: 0;
        border-bottom: 1px solid var(--rand);
        text-align: left;
    }
    .cm-wie .cm-letter { width: 34px; height: 34px; margin: 0; font-size: 15px; }
    .cm-wie span, .cm-wie .cm-rol { margin-top: 0; }
    .cm-tekst { padding: 12px 14px; }
}