/* ===== RESET & VARIABLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Nunito', sans-serif;
    background: var(--bg-body);
    color: var(--text-color);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== TYPOGRAPHY ===== */
/*
   Pacifico (handschrift) blijft voor de paginatitel en het logo.
   Patrick Hand (rustig handschrift) wordt gebruikt voor h2 en h3.
   Het leest zeer prettig in hoofdletters en heeft een speelse,
   doch duidelijke uitstraling.
*/
h1, .logo a {
    font-family: 'Pacifico', cursive;
    font-weight: 400;
    letter-spacing: 0.5px;
}

h2, h3 {
    font-family: 'Patrick Hand', cursive;
    font-weight: 400;
    letter-spacing: 0.5px;
}

h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--secondary);
}

h2 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    color: var(--primary);
    position: relative;
}

h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--primary);
    margin: 0.5rem 0 0;
    border-radius: 3px;
}

a {
    color: var(--text-color);
    text-decoration-line: underline;
    text-decoration-style: solid;
}

a:hover {
    text-decoration: none;
}

/* ===== LIJSTEN & PARAGRAFEN ===== */
p {
    margin-bottom: 1.2rem;
}

p:last-child {
    margin-bottom: 0;
}

ul, ol {
    padding-left: 2rem;
    margin: 1rem 0;
}

li {
    margin-bottom: 0.5rem;
}

li:last-child {
    margin-bottom: 0;
}

/* ===== ICONS (algemeen) ===== */
/* Voor navigatie-iconen (svg-afbeeldingen) */
.nav-icon {
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
}

/* Voor de wiskunde-iconen in het contactformulier (plus en xmark) */
.math-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    display: inline-block;
}

/* ===== DONKERE MODUS: ICONEN WIT ===== */
.dark .nav-icon,
.dark .math-icon {
    filter: brightness(0.25) invert(0.7);
}

/* ===== HEADER (STICKY) ===== */
header {
    background: var(--header-bg);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 100;
    padding: 10px 0;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo a {
    font-size: 1.8rem;
    color: var(--secondary);
    text-decoration: none;
    line-height: 1.2;
}

.logo-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-light);
}

.main-nav ul {
    display: flex;
    list-style: none;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}

.main-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: transparent;
    color: var(--text-color);
    font-size: 1.5rem;
    transition: background 0.3s, color 0.3s;
    text-decoration: none;
}

.main-nav a:hover,
.main-nav a:focus {
    background: var(--primary-light);
    color: #fff;
    outline: none;
}

/* De afbeelding binnen de navigatieknop is al gestyled via .nav-icon (hierboven) */

.header-tools {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;
}

.lang-switcher {
    display: flex;
    gap: 5px;
}

.lang-btn {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 4px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-block;
    letter-spacing: 0.5px;
}

.lang-btn:hover,
.lang-btn.active {
    background: var(--primary);
    color: #fff;
}

.lang-btn:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.theme-tools {
    display: flex;
    gap: 5px;
}

.theme-btn, .color-btn, .alt-mode-btn {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.theme-btn:hover, .color-btn:hover, .alt-mode-btn:hover {
    background: var(--primary);
    color: #fff;
}

/* Afbeeldingen in thema‑knoppen worden via .nav-icon gestuurd (24x24) */
.theme-btn .nav-icon,
.color-btn .nav-icon,
.alt-mode-btn .nav-icon {
    width: 20px;  /* iets kleiner dan de standaard 24px om binnen de knop te passen */
    height: 20px;
}

/* ===== THEMA KOPPELINGEN ===== */
/* Geen onderstreping bij themaknoppen (die zijn links) */
.theme-btn, .color-btn, .alt-mode-btn {
    text-decoration: none;
}

/* In donkere modus: iconen wit maken (filter: zwart naar wit) */
.dark .theme-btn .nav-icon,
.dark .color-btn .nav-icon,
.dark .alt-mode-btn .nav-icon {
    filter: brightness(0) invert(1);
}

.color-indicator {
    font-size: 1.2rem;
}

/* Optionele ruimte direct onder header voor ademruimte */
main .container:first-of-type {
    padding-top: 1rem;
}

/* ===== HERO SECTION ===== */
.hero {
    background: var(--overlay);
    padding: 60px 0;
    text-align: center;
}

.hero h1 {
    font-size: 3.5rem;
    color: var(--secondary);
}

.hero p {
    font-size: 1.3rem;
    max-width: 700px;
    margin: 1rem auto 0;
}

/* ===== BUTTONS ===== */
.btn, .button {
    display: inline-block;
    background: var(--btn-bg);
    color: var(--btn-text, #ffffff);
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s, transform 0.3s;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin-top: 20px;
    margin-bottom: 10px;
}

.btn:hover, .button:hover {
    background: var(--btn-hover);
    transform: translateY(-2px);
}

/* ===== SERVICES SECTIE ===== */
.services {
    margin: 20px 0;
    padding: 30px;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
}

.services h2 {
    margin-top: 0;
}

/* ===== MATH CHALLENGE ===== */
.math-challenge {
    margin-bottom: 20px;
}

.math-challenge label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.math-challenge span {
    font-size: 1.2rem;
    margin-right: 10px;
}

.math-challenge input {
    width: 80px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

/* De wiskunde‑iconen worden via .math-icon gestuurd (20x20, verticaal uitgelijnd) */

/* ===== CONTACT TEASER ===== */
.contact-teaser {
    margin: 60px 0;
    padding: 30px;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
}

/* ===== CONTACT PAGINA ===== */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin: 40px 0;
}

.contact-info h3 {
    margin-bottom: 10px;
    color: var(--primary);
}

.contact-info p {
    margin-bottom: 10px;
}

.contact-info a {
    color: var(--secondary);
    text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: inherit;
    background: var(--card-bg);
    color: var(--text-color);
}

.contact-form button {
    width: 100%;
}

::placeholder {
  color: var(--text-color);
  opacity: 1; /* Firefox */
}

/* ===== OVER PAGINA MET FOTO ===== */
.about-with-photo {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
    margin: 0 0 2rem 0;   /* bovenaan 0, onderaan 2rem */
}

.about-text {
    flex: 2;
}

.about-photo {
    flex: 1;
    max-width: 300px;
}

.profile-photo {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: var(--card-shadow);
}

/* ===== FAQ ACCORDION ===== */
details {
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: var(--card-shadow);
    margin-bottom: 0.75rem;
    padding: 0.2rem 0.5rem;
    transition: box-shadow 0.2s;
}

details:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

details[open] {
    background: var(--card-bg);
}

summary {
    font-weight: 600;
    font-size: 1.1rem;
    padding: 1rem 0.5rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-color);
}

summary::-webkit-details-marker {
    display: none;
}

summary::after {
    content: '▶';
    font-size: 0.9rem;
    color: var(--primary);
    transition: transform 0.2s;
}

details[open] summary::after {
    transform: rotate(90deg);
}

.answer {
    padding: 0.5rem 1rem 1.5rem 1rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-color);
}

/* ===== PRIJSTABEL ===== */
.price-table {
    border-collapse: collapse;
    width: 100%;
    margin: 20px 0;
}

.price-table th,
.price-table td {
    padding: 12px;
    border: 1px solid var(--border-color, #ddd);
    text-align: left;
}

.price-table th {
    background-color: var(--primary-light);
    color: #fff;
}

.price-table td:last-child,
.price-table th:last-child {
    text-align: right;
}

.price-table tbody tr:not(:first-child):has(td:first-child:not(:empty)) td {
    border-top: 2px solid var(--primary);
}

.price-table tbody tr:last-child td {
    border-bottom: 2px solid var(--primary);
}

/* ===== FOOTER ===== */
footer {
    background: var(--footer-bg);
    padding: 40px 0;
    margin-top: 60px;
    text-align: center;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

.footer-left,
.footer-right {
    flex: 1 1 250px;
    margin-bottom: 0.8rem;
}

.footer-left {
    text-align: center;
}

.footer-right {
    text-align: right;
}

.footer-container .disclaimer {
    flex: 0 0 100%;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.95rem;
    font-style: italic;
    color: var(--text-color);
    opacity: 0.85;
    line-height: 1.5;
    text-align: justify;
    text-align-last: left;
}

.footer-container a {
    color: var(--secondary);
    text-decoration: none;
    margin: 0 10px;
}

.footer-container a:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .footer-left,
    .footer-right {
        flex-basis: 100%;
        text-align: center;
    }
}

/* ===== TOEGANKELIJKHEID ===== */
.skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.skip-link:focus {
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    background: #000;
    color: #fff;
    padding: 8px;
    z-index: 100;
    text-decoration: none;

    top: 0;
    left: 0;
    z-index: 200; /* hoger dan de header */   
}

a:focus, button:focus, input:focus, textarea:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        align-items: stretch;
    }

    .logo {
        justify-content: center;
    }

    .main-nav ul {
        justify-content: center;
        gap: 1rem;
    }

    .main-nav a {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .header-tools {
        justify-content: center;
        margin-left: 0;
        flex-wrap: wrap;
    }

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

    .about-with-photo {
        flex-direction: column;
    }

    .about-photo {
        max-width: 100%;
        margin-bottom: 1rem;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.7rem;
    }

    .hero h1 {
        font-size: 2.5rem;  /* was 3.5rem – past beter op tablets */
    }
}

@media (max-width: 600px) {
    .logo a {
        font-size: 1.4rem;
    }
    .logo-img {
        width: 32px;
        height: 32px;
    }

    h1 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .hero h1 {
        font-size: 2rem;    /* nog kleiner voor kleine telefoons */
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.4rem;
    }

    h2 {
        font-size: 1.1rem;
    }

    .hero h1 {
        font-size: 1.6rem;  /* compact maar leesbaar op heel klein scherm */
    }
}