/* Publieke pagina's (PublicLayout): landing-look zonder game-chrome. Alle selectors
   vallen onder .cn-public of body.cn-public-body: niets mag lekken naar andere
   pagina's. Kleuren, schaduwen en radii uitsluitend via --cn-*-tokens; gedempte
   tekst en lijnen volgen de bestaande landing-rgba-patronen uit home.css. */

/* Paginabasis: vlakke dark-bg zoals de landing, met ruimte voor de vaste topnav. */
body.cn-public-body {
    margin: 0;
    background-color: var(--cn-dark-bg);
    color: var(--cn-light);
}

.cn-public {
    scroll-padding-top: 80px;
    overflow-x: hidden;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--cn-dark-bg);
    color: var(--cn-light);
}

/* Skip-link: alleen zichtbaar bij focus (toetsenbord). */
.cn-public-skip {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 2000;
    background-color: var(--cn-card-bg);
    color: var(--cn-gold);
    border: 1px solid var(--cn-gold);
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    text-decoration: none;
    transition: top 0.25s ease;
}

.cn-public-skip:focus-visible {
    top: 1rem;
    color: var(--cn-gold);
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(200, 165, 91, 0.25);
}

/* Content gecentreerd onder de vaste topnav, footer onderaan vastgepind. */
.cn-public .cn-public-main {
    flex: 1;
    padding: 6.5rem 0 3.5rem;
}

.cn-public .cn-public-container {
    max-width: 72rem;
}

/* Smalle kolom voor formulieren/kaarten (col-md-6/lg-5-achtig, card max ~30rem
   regelt .auth-page zelf). */
.cn-public .cn-public-narrow {
    max-width: 34rem;
    margin-inline: auto;
}

.cn-public .cn-public-sheet {
    max-width: 44rem;
    margin-inline: auto;
}

/* Kaartkop: display-H1 goud + subtitle, dezelfde taal als auth en de landing.
   Geen losse eyebrow of embleem. */
.cn-public .cn-public-head {
    text-align: center;
    margin-bottom: 1.75rem;
}

.cn-public .cn-public-title {
    font-family: var(--cn-font-family-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: var(--cn-gold);
    margin-bottom: 0.5rem;
}

.cn-public .cn-public-subtitle {
    font-size: 1.05rem;
    color: rgba(238, 238, 238, 0.75);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto;
}

/* Systeemkaart-look voor publieke kaarten zonder eigen feature-card. */
.cn-public .cn-public-card {
    background: var(--cn-card-bg);
    border: 1px solid var(--cn-brown);
    border-radius: 10px;
    box-shadow: var(--cn-shadow-md);
}

/* Het v1-thema kapt .card-body globaal af (max-height in de ≤768px/≤576px-
   mediaqueries voor de game-layout). Op publieke pagina's mag de kaart altijd
   meegroeien met het formulier: scopen onder .cn-public wint via specificiteit. */
.cn-public .card-body {
    max-height: none;
}

.cn-public .cn-public-card h2 {
    font-family: var(--cn-font-family-display);
    font-size: 1.15rem;
    color: var(--cn-gold);
}

.cn-public .cn-public-card p,
.cn-public .cn-public-card li {
    line-height: 1.7;
}

/* Body-links in de kaart: goud, onderstreept voor vindbaarheid; hover naar licht. */
.cn-public .cn-public-card a:not(.btn) {
    color: var(--cn-gold);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.cn-public .cn-public-card a:not(.btn):hover {
    color: var(--cn-light);
}

/* Terug-link onder de kaart (naar home). */
.cn-public .cn-public-back {
    text-align: center;
    margin-top: 1.25rem;
    font-size: 0.9rem;
}

.cn-public .cn-public-back a {
    color: rgba(238, 238, 238, 0.7);
    text-decoration: none;
    transition: color 0.25s ease;
}

.cn-public .cn-public-back a:hover {
    color: var(--cn-gold);
}

/* Tekst-links op publieke pagina's: gedempt naar goud, geen underline. */
.cn-public a.cn-public-link {
    color: rgba(238, 238, 238, 0.7);
    text-decoration: none;
    transition: color 0.25s ease;
}

.cn-public a.cn-public-link:hover {
    color: var(--cn-gold);
}

/* Labels op publieke formulieren zonder eigen feature-CSS: goud, caps. */
.cn-public .cn-public-form .form-label {
    color: var(--cn-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Zichtbare focus overal op publieke pagina's (gouden ring zoals de landing). */
.cn-public a:focus-visible,
.cn-public button:focus-visible,
.cn-public input:focus-visible,
.cn-public select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(200, 165, 91, 0.25);
}

/* Slanke publieke topnav: landing cn-topnav-patroon (vast, transparant,
   v1-jas met goud-lijn + schaduw bij scrollen). */
.cn-public .cn-topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 1px solid transparent;
}

.cn-public .cn-topnav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

.cn-public .cn-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--cn-font-family-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cn-light);
    text-decoration: none;
}

.cn-public .cn-brand i {
    color: var(--cn-gold);
    font-size: 1.5rem;
}

.cn-public .cn-brand:hover {
    color: var(--cn-gold);
}

.cn-public .cn-topnav-links {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.cn-public .cn-topnav-links a {
    color: rgba(238, 238, 238, 0.7);
    font-size: 0.92rem;
    text-decoration: none;
    transition: color 0.25s ease;
    white-space: nowrap;
}

.cn-public .cn-topnav-links a:hover {
    color: var(--cn-gold);
}

.cn-public .cn-topnav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cn-public .cn-topnav-link {
    color: rgba(238, 238, 238, 0.7);
    font-size: 0.92rem;
    text-decoration: none;
    transition: color 0.25s ease;
}

.cn-public .cn-topnav-link:hover {
    color: var(--cn-gold);
}

/* Mobiele kopie van de tekstlink (in het uitklapmenu): verborgen op desktop. */
.cn-public .cn-topnav-mobileauth {
    display: none;
}

/* Knoptekst in de topnav wikkelt nooit af. */
.cn-public .cn-topnav-actions .btn {
    white-space: nowrap;
}

/* Niet-transparante achtergrond zodra de bezoeker scrolt (JS schakelt .cn-topnav-scrolled). */
.cn-public .cn-topnav-scrolled {
    background-color: rgba(10, 10, 10, 0.92);
    border-bottom-color: rgba(200, 165, 91, 0.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Slanke publieke footer (landing cn-footer-patroon). */
.cn-public .cn-footer {
    border-top: 1px solid rgba(200, 165, 91, 0.15);
    background-color: var(--cn-shadow-black);
}

.cn-public .cn-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.cn-public .cn-footer-copy {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(238, 238, 238, 0.5);
}

.cn-public .cn-footer-links {
    display: flex;
    gap: 1.5rem;
}

.cn-public .cn-footer-links a {
    color: rgba(238, 238, 238, 0.6);
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.25s ease;
}

.cn-public .cn-footer-links a:hover {
    color: var(--cn-gold);
}

/* Hamburger op mobiel: navigatie blijft bereikbaar <767px. */
.cn-public .cn-nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--cn-brown);
    border-radius: 0.375rem;
    color: var(--cn-light);
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.375rem 0.5rem;
    cursor: pointer;
}

.cn-public .cn-nav-toggle:hover,
.cn-public .cn-nav-toggle:focus-visible {
    color: var(--cn-gold);
    border-color: var(--cn-gold);
    outline: none;
}

.cn-public .cn-nav-toggle:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(200, 165, 91, 0.25);
}

/* Tablet: topnav compacter zodat merk + links + acties op één regel blijven. */
@media (max-width: 991px) {
    .cn-public .cn-topnav-inner {
        gap: 1rem;
    }

    .cn-public .cn-topnav-links {
        gap: 1rem;
    }

    .cn-public .cn-topnav-links a {
        font-size: 0.85rem;
    }

    .cn-public .cn-topnav-actions {
        gap: 0.5rem;
    }

    .cn-public .cn-brand {
        font-size: 1.1rem;
    }
}

/* Topnav op kleinere schermen: hamburger met uitklapmenu i.p.v. verbergen.
   De tekstlink (Log in / My profile) verhuist naar het menu, zodat merk +
   hamburger + actieknop altijd op één regel passen. */
@media (max-width: 767px) {
    .cn-public .cn-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    .cn-public .cn-topnav-link {
        display: none;
    }

    .cn-public .cn-topnav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background-color: var(--cn-shadow-black);
        border-bottom: 1px solid var(--cn-brown);
        padding: 0.5rem 1rem 1rem;
    }

    .cn-public .cn-topnav-links.is-open {
        display: flex;
    }

    .cn-public .cn-topnav-links a {
        padding: 0.75rem 0.25rem;
        font-size: 1rem;
        border-top: 1px solid var(--cn-card-bg);
    }

    .cn-public .cn-topnav-links .cn-topnav-mobileauth {
        display: block;
    }

    .cn-public .cn-footer-inner {
        flex-direction: column;
        text-align: center;
    }
}

/* Mobiel: minder bovenruimte, kop compacter, topnav compacter. */
@media (max-width: 575px) {
    .cn-public .cn-public-main {
        padding: 6rem 0 2.5rem;
    }

    .cn-public .cn-public-subtitle {
        font-size: 1rem;
    }

    .cn-public .cn-topnav-inner {
        gap: 0.75rem;
    }

    .cn-public .cn-brand {
        font-size: 1.1rem;
    }

    .cn-public .cn-brand i {
        font-size: 1.25rem;
    }

    .cn-public .cn-topnav-actions {
        gap: 0.5rem;
    }

    .cn-public .cn-topnav-actions .btn-sm {
        font-size: 0.8rem;
        padding: 0.25rem 0.6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cn-public .cn-topnav,
    .cn-public .cn-public-skip,
    .cn-public .cn-topnav-links a,
    .cn-public .cn-topnav-link,
    .cn-public .cn-footer-links a,
    .cn-public .cn-public-back a {
        transition: none;
    }
}