/* ==========================================================
   NEDERLAND COMMUNITY — KHAKI LUXURY DESIGN
   Plaats deze code ONDERAAN de originele styles.css.
   Behoud alle bestaande HTML, JavaScript en functies.
   ========================================================== */

/* 01. KLEURENPALET */

:root {
    --nc-forest: #252c20;
    --nc-forest-deep: #1b2118;
    --nc-forest-soft: #353d2b;

    --nc-olive: #777d4b;
    --nc-olive-dark: #60663b;
    --nc-khaki: #a9ad82;
    --nc-khaki-light: #d9dac2;

    --nc-cream: #f5f3eb;
    --nc-cream-dark: #ebe9dc;
    --nc-white: #fffef9;

    --nc-text: #292d24;
    --nc-muted: #73766a;
    --nc-border: rgba(37, 44, 32, 0.13);

    --nc-shadow:
        0 14px 40px rgba(37, 44, 32, 0.08);

    --nc-shadow-hover:
        0 22px 55px rgba(37, 44, 32, 0.13);

    --nc-radius-small: 8px;
    --nc-radius-medium: 14px;
    --nc-radius-large: 22px;
}

/* 02. ALGEMENE BASIS */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    color: var(--nc-text);
    background-color: var(--nc-white);
    font-family: "DM Sans", "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body,
button,
input,
textarea,
select {
    font-family: "DM Sans", "Segoe UI", Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--nc-forest);
    font-family: "Manrope", "Segoe UI", Arial, sans-serif;
    letter-spacing: -0.035em;
}

p {
    line-height: 1.8;
}

a {
    transition:
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

button {
    transition:
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

::selection {
    color: var(--nc-white);
    background: var(--nc-olive);
}

:focus-visible {
    outline: 3px solid var(--nc-khaki);
    outline-offset: 4px;
}

/* 03. PAGINABREEDTE EN CONTAINERS */

.container {
    width: min(1160px, calc(100% - 48px));
    margin-right: auto;
    margin-left: auto;
}

/* Houd de originele containerstructuur intact. */
.content {
    color: var(--nc-text);
}

/* 04. TOPBAR */

.topbar {
    color: var(--nc-cream);
    background: var(--nc-forest-deep);
    border-bottom: 1px solid rgba(245, 243, 235, 0.09);
}

.topbar a {
    color: var(--nc-khaki-light);
}

.topbar a:hover {
    color: var(--nc-white);
}

/* 05. HEADER EN NAVIGATIE */

header {
    color: var(--nc-text);
    background-color: var(--nc-white);
    border-color: var(--nc-border);
}

.navbar {
    color: var(--nc-text);
}

.brand {
    color: var(--nc-forest);
    font-weight: 800;
}

.brand:hover {
    color: var(--nc-olive-dark);
}

.nav-links {
    color: var(--nc-text);
}

.nav-links a {
    color: var(--nc-muted);
    font-weight: 600;
    text-decoration: none;
}

.nav-links a:hover {
    color: var(--nc-olive-dark);
}

.nav-links a.active,
.nav-links a[aria-current="page"] {
    color: var(--nc-forest);
}

.nav-links a.active::after,
.nav-links a[aria-current="page"]::after {
    background: var(--nc-olive);
}

/* Veelgebruikte navigatieknoppen */

.nav-links .button,
.nav-links .btn,
.nav-links .cta,
.navbar .button,
.navbar .btn {
    color: var(--nc-white);
    background: var(--nc-forest);
    border-color: var(--nc-forest);
    border-radius: var(--nc-radius-small);
}

.nav-links .button:hover,
.nav-links .btn:hover,
.nav-links .cta:hover,
.navbar .button:hover,
.navbar .btn:hover {
    color: var(--nc-white);
    background: var(--nc-olive-dark);
    border-color: var(--nc-olive-dark);
}

/* 06. HERO — BEHOUD DE BESTAANDE INDELING */

.hero {
    position: relative;
    color: var(--nc-cream);
    background-color: var(--nc-forest);
    border-color: transparent;
}

.hero h1,
.hero h2,
.hero h3 {
    color: var(--nc-cream);
}

.hero p {
    color: rgba(245, 243, 235, 0.78);
}

.hero a:not(.button):not(.btn) {
    color: var(--nc-khaki-light);
}

.hero a:not(.button):not(.btn):hover {
    color: var(--nc-white);
}

.hero-grid {
    position: relative;
}

.hero-panel {
    color: var(--nc-text);
    background: var(--nc-cream);
    border: 1px solid rgba(245, 243, 235, 0.16);
    border-radius: var(--nc-radius-large);
    box-shadow: var(--nc-shadow);
}

.hero-panel h2,
.hero-panel h3 {
    color: var(--nc-forest);
}

.hero-panel p {
    color: var(--nc-muted);
}

/* Accentkleuren in de hero */

.hero .highlight,
.hero .accent,
.hero .eyebrow {
    color: var(--nc-khaki-light);
}

/* 07. KNOPPEN — ALGEMENE HUISSTIJL */

.button,
.btn,
button.button,
button.btn {
    border-radius: var(--nc-radius-small);
    font-weight: 700;
    cursor: pointer;
}

.button-primary,
.btn-primary,
.button.primary,
.btn.primary {
    color: var(--nc-white);
    background: var(--nc-forest);
    border: 1px solid var(--nc-forest);
    box-shadow: 0 5px 15px rgba(27, 33, 24, 0.12);
}

.button-primary:hover,
.btn-primary:hover,
.button.primary:hover,
.btn.primary:hover {
    color: var(--nc-white);
    background: var(--nc-olive-dark);
    border-color: var(--nc-olive-dark);
    box-shadow: 0 9px 22px rgba(27, 33, 24, 0.18);
    transform: translateY(-2px);
}

.button-secondary,
.btn-secondary,
.button.secondary,
.btn.secondary {
    color: var(--nc-forest);
    background: transparent;
    border: 1px solid rgba(37, 44, 32, 0.23);
}

.button-secondary:hover,
.btn-secondary:hover,
.button.secondary:hover,
.btn.secondary:hover {
    color: var(--nc-white);
    background: var(--nc-forest);
    border-color: var(--nc-forest);
}

.hero .button-secondary,
.hero .btn-secondary {
    color: var(--nc-cream);
    border-color: rgba(245, 243, 235, 0.35);
}

.hero .button-secondary:hover,
.hero .btn-secondary:hover {
    color: var(--nc-forest);
    background: var(--nc-cream);
    border-color: var(--nc-cream);
}

/* Veelgebruikte losse links */

.text-link {
    color: var(--nc-olive-dark);
    font-weight: 700;
}

.text-link:hover {
    color: var(--nc-forest);
}

/* 08. HIGHLIGHT- EN ACCENTTEKST */

.highlight {
    color: var(--nc-olive-dark);
}

.accent {
    color: var(--nc-olive);
}

.eyebrow,
.section-label,
.section-kicker {
    color: var(--nc-olive-dark);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

/* 09. CONTENTSECTIES */

.content section {
    scroll-margin-top: 100px;
}

.content h2 {
    color: var(--nc-forest);
}

.content h3 {
    color: var(--nc-forest);
}

.content p {
    color: var(--nc-muted);
}

/* Wisselende lichte achtergronden */

.content .section-light,
.content .light-section {
    background: var(--nc-white);
}

.content .section-muted,
.content .muted-section {
    background: var(--nc-cream);
}

/* 10. KAARTEN EN GRID */

.grid-3 {
    gap: 22px;
}

.card {
    color: var(--nc-text);
    background: var(--nc-white);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-medium);
    box-shadow: 0 5px 20px rgba(37, 44, 32, 0.035);
    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease;
}

.card h2,
.card h3,
.card h4 {
    color: var(--nc-forest);
}

.card p {
    color: var(--nc-muted);
}

.card:hover {
    border-color: rgba(119, 125, 75, 0.42);
    box-shadow: var(--nc-shadow-hover);
    transform: translateY(-4px);
}

/* 11. UITGELICHTE KAARTEN */

.highlight {
    border-color: rgba(119, 125, 75, 0.28);
}

.card.highlight,
.highlight.card {
    background: var(--nc-cream);
    border-color: rgba(119, 125, 75, 0.25);
}

.card.highlight h2,
.card.highlight h3,
.card.highlight h4 {
    color: var(--nc-forest);
}

.card.highlight p {
    color: #666a5b;
}

/* 12. FLOATING HELPER */

.floating-helper {
    color: var(--nc-white);
    background: var(--nc-forest);
    border: 1px solid rgba(245, 243, 235, 0.12);
    border-radius: var(--nc-radius-medium);
    box-shadow: 0 15px 40px rgba(27, 33, 24, 0.23);
}

.floating-helper h2,
.floating-helper h3,
.floating-helper h4 {
    color: var(--nc-cream);
}

.floating-helper p {
    color: rgba(245, 243, 235, 0.77);
}

.floating-helper a {
    color: var(--nc-khaki-light);
}

.floating-helper a:hover {
    color: var(--nc-white);
}

/* 13. EVENTS */

.events-box {
    color: var(--nc-text);
    background: var(--nc-cream);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-large);
    box-shadow: var(--nc-shadow);
}

.events-box h2,
.events-box h3,
.events-box h4 {
    color: var(--nc-forest);
}

.events-box p {
    color: var(--nc-muted);
}

.events-box a {
    color: var(--nc-olive-dark);
    font-weight: 700;
}

.events-box a:hover {
    color: var(--nc-forest);
}

/* Eventitems indien aanwezig */

.event,
.event-card,
.events-item {
    color: var(--nc-text);
    background: var(--nc-white);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-medium);
    box-shadow: 0 5px 20px rgba(37, 44, 32, 0.04);
}

.event h3,
.event-card h3,
.events-item h3 {
    color: var(--nc-forest);
}

.event p,
.event-card p,
.events-item p {
    color: var(--nc-muted);
}

/* 14. DISCORD-SECTIE */

.discord-card {
    color: var(--nc-cream);
    background: var(--nc-forest);
    border: 1px solid rgba(245, 243, 235, 0.1);
    border-radius: var(--nc-radius-large);
    box-shadow: var(--nc-shadow);
}

.discord-card h2,
.discord-card h3,
.discord-card h4 {
    color: var(--nc-cream);
}

.discord-card p {
    color: rgba(245, 243, 235, 0.78);
}

.discord-card a {
    color: var(--nc-khaki-light);
}

.discord-card a:hover {
    color: var(--nc-white);
}

.discord-card .button,
.discord-card .btn {
    color: var(--nc-forest);
    background: var(--nc-cream);
    border-color: var(--nc-cream);
}

.discord-card .button:hover,
.discord-card .btn:hover {
    color: var(--nc-forest);
    background: var(--nc-khaki-light);
    border-color: var(--nc-khaki-light);
}

/* 15. TWEE KOLOMMEN */

.two-col {
    gap: 32px;
}

.two-col > * {
    min-width: 0;
}

/* 16. MEDEDELINGEN EN ANNOUNCEMENTS */

.announce {
    color: var(--nc-forest);
    background: var(--nc-cream);
    border: 1px solid rgba(119, 125, 75, 0.25);
    border-left: 4px solid var(--nc-olive);
    border-radius: var(--nc-radius-small);
}

.announce h2,
.announce h3,
.announce h4 {
    color: var(--nc-forest);
}

.announce p {
    color: #626658;
}

.announce a {
    color: var(--nc-olive-dark);
    font-weight: 700;
}

/* 17. FAQ */

.faq {
    color: var(--nc-text);
}

.faq details,
.faq-item {
    background: var(--nc-white);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-small);
    transition:
        border-color 180ms ease,
        background-color 180ms ease;
}

.faq details:hover,
.faq-item:hover {
    border-color: rgba(119, 125, 75, 0.45);
}

.faq summary {
    color: var(--nc-forest);
    font-weight: 700;
    cursor: pointer;
}

.faq details[open] {
    background: var(--nc-cream);
    border-color: rgba(119, 125, 75, 0.35);
}

.faq details p,
.faq-item p {
    color: var(--nc-muted);
}

/* 18. TEAM EN MEDEWERKERS */

.team-card,
.team-member,
.staff-card,
.member-card {
    overflow: hidden;
    color: var(--nc-text);
    background: var(--nc-white);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-medium);
    box-shadow: 0 5px 20px rgba(37, 44, 32, 0.04);
    transition:
        transform 200ms ease,
        box-shadow 200ms ease;
}

.team-card:hover,
.team-member:hover,
.staff-card:hover,
.member-card:hover {
    box-shadow: var(--nc-shadow-hover);
    transform: translateY(-3px);
}

.team-card h2,
.team-card h3,
.team-member h2,
.team-member h3,
.staff-card h2,
.staff-card h3,
.member-card h2,
.member-card h3 {
    color: var(--nc-forest);
}

.team-card p,
.team-member p,
.staff-card p,
.member-card p {
    color: var(--nc-muted);
}

/* 19. BADGES EN STATUSLABELS */

.badge,
.tag,
.label,
.role-tag {
    color: var(--nc-olive-dark);
    background: var(--nc-cream-dark);
    border: 1px solid rgba(119, 125, 75, 0.15);
    border-radius: 999px;
    font-weight: 700;
}

.status-dot {
    background: #929b62;
    box-shadow: 0 0 0 4px rgba(146, 155, 98, 0.15);
}

/* 20. FORMULIEREN */

input,
textarea,
select {
    max-width: 100%;
    color: var(--nc-text);
    background: var(--nc-white);
    border: 1px solid rgba(37, 44, 32, 0.2);
    border-radius: var(--nc-radius-small);
}

input::placeholder,
textarea::placeholder {
    color: #929487;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--nc-olive);
    outline: 3px solid rgba(119, 125, 75, 0.12);
}

label {
    color: var(--nc-forest);
    font-weight: 600;
}

/* 21. FOOTER */

footer {
    color: var(--nc-cream);
    background: var(--nc-forest-deep);
    border-color: rgba(245, 243, 235, 0.12);
}

footer h2,
footer h3,
footer h4 {
    color: var(--nc-cream);
}

footer p {
    color: rgba(245, 243, 235, 0.68);
}

footer a {
    color: #c6c9b8;
}

footer a:hover {
    color: var(--nc-white);
}

footer .brand {
    color: var(--nc-cream);
}

/* 22. EVENTUELE EXTRA INFORMATIEBLOKKEN */

.info-card,
.notice,
.panel,
.content-box {
    color: var(--nc-text);
    background: var(--nc-cream);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-medium);
}

.info-card h2,
.info-card h3,
.notice h2,
.notice h3,
.panel h2,
.panel h3,
.content-box h2,
.content-box h3 {
    color: var(--nc-forest);
}

/* 23. SCHEIDINGSLIJNEN */

hr {
    height: 1px;
    border: 0;
    background: var(--nc-border);
}

.card hr,
.panel hr {
    background: rgba(37, 44, 32, 0.1);
}

/* 24. AFBEELDINGEN EN MEDIA */

img {
    max-width: 100%;
}

.card img,
.team-card img,
.team-member img,
.staff-card img {
    display: block;
    max-width: 100%;
}

/* 25. SUBTIELE HOVER-EFFECTEN */

.card a,
.events-box a,
.discord-card a {
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.card a:hover {
    text-decoration-color: var(--nc-khaki);
}

/* 26. RESPONSIVE — TABLET */

@media (max-width: 980px) {
    .container {
        width: min(100% - 40px, 900px);
    }

    .grid-3 {
        gap: 17px;
    }

    .hero-grid {
        gap: 28px;
    }

    .two-col {
        gap: 25px;
    }
}

/* 27. RESPONSIVE — KLEINERE TABLETS */

@media (max-width: 900px) {
    .two-col {
        grid-template-columns: 1fr;
    }

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-panel {
        max-width: 100%;
    }
}

/* 28. RESPONSIVE — MOBIEL */

@media (max-width: 700px) {
    .container {
        width: calc(100% - 32px);
    }

    .grid-3 {
        grid-template-columns: 1fr;
    }

    .card {
        border-radius: var(--nc-radius-medium);
    }

    .hero {
        padding-top: 45px;
        padding-bottom: 45px;
    }

    .hero h1 {
        letter-spacing: -0.04em;
    }

    .hero-panel {
        padding: 22px;
    }

    .events-box,
    .discord-card {
        border-radius: var(--nc-radius-medium);
    }

    .two-col {
        gap: 20px;
    }

    .floating-helper {
        max-width: calc(100vw - 32px);
    }

    footer {
        padding-top: 35px;
    }

    .button,
    .btn {
        max-width: 100%;
    }
}

/* 29. EXTRA KLEINE SCHERMEN */

@media (max-width: 420px) {
    .container {
        width: calc(100% - 26px);
    }

    .hero h1 {
        overflow-wrap: break-word;
    }

    .card {
        padding: 18px;
    }

    .hero-panel {
        padding: 18px;
    }

    .nav-links {
        gap: 10px;
    }
}

/* 30. TOEGANKELIJKHEID */

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================
   EINDE KHAKI LUXURY THEME
   De oorspronkelijke HTML en functionaliteit blijven staan.
   ========================================================== */