/* ============================================================
   MOBILE.CSS - Alle aanpassingen voor Tablet & Mobiel
   ============================================================ */

/* --- TABLET (tussen 768px en 900px) EN KLEINER --- */
@media (max-width: 900px) {
    /* Toon Hamburger Menu */
    .menu-toggle { display: block; z-index: 1001; }
    
    /* Uitschuifmenu. Was een kaal wit vlak met vijf zwevende woorden; nu een
       perkamentkleurig paneel met haarlijnen ertussen, net als de vragenlijst.
       De items staan links uitgelijnd: op een telefoon lees je van links, en zo
       is er ruimte voor het streepje dat aangeeft waar je bent. */
    .nav-list {
        position: fixed; 
        top: 0; 
        right: -100%; 
        width: 82%; 
        max-width: 320px; 
        height: 100vh;
        background-color: var(--color-bg);
        box-shadow: -18px 0 40px rgba(59, 35, 19, .18);
        flex-direction: column; 
        justify-content: center; 
        align-items: stretch;
        gap: 0;
        /* Alleen wegschuiven met right:-100% haalt de links niet uit de tabvolgorde:
           ze bleven zichtbaar volgens de browser, dus een toetsenbordgebruiker liep
           eerst langs vijf links buiten beeld terwijl aria-expanded="false" zei dat
           het menu dicht was. visibility:hidden haalt ze er wel uit; de vertraging
           zorgt dat het paneel eerst netjes uitschuift en pas daarna verdwijnt. */
        visibility: hidden;
        transition: right 0.4s ease, visibility 0s linear 0.4s;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    /* Navigatie actief */
    .nav-list.active { right: 0; visibility: visible;
                       transition: right 0.4s ease, visibility 0s; }
}

/* --- MOBIEL (onder 768px) --- */
@media (max-width: 768px) {
    
    /* HEADER */
    header { position: sticky; top: 0; }
    .menu-toggle { display: block; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
    .nav-list { top: 90px; height: calc(100vh - 90px); padding-top: 8px; justify-content: flex-start;
                border-top: 1px solid rgba(59, 35, 19, .14); }
    .nav-list li { margin: 0; border-bottom: 1px solid rgba(59, 35, 19, .12); }
    .nav-list a { display: block; padding: 20px 22px 20px 26px; font-size: 17px; }

    /* Waar je bent: een gouden balkje aan de kop van de regel en een iets warmer
       vlak. Het streepje onder het woord werkt hier niet, want in een lijst leest
       een onderstreping als een scheiding. */
    .nav-list a::after { display: none; }
    .nav-list a[aria-current] { background: rgba(210, 166, 121, .22); color: #241407; }
    .nav-list a[aria-current]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
                                        width: 4px; background: var(--color-gold); }
    
    /* HERO */
    .hero h1 { font-size: 2.5rem; }
    .hero p { font-size: 1.1rem; }
    /* Hero hoogte kleiner op mobiel */
    .hero { min-height: 450px; } 
    
    .standard-mode h1, .action-mode-centered h2 { font-size: 2rem; margin-bottom: 5px; }
    .standard-mode p, .action-mode-centered .action-body-text { font-size: 1rem; margin-bottom: 15px; }
    .action-mode-centered .action-subtitle { font-size: 1.2rem; margin-bottom: 5px; }
    .action-badge { margin-bottom: 10px; padding: 4px 10px; font-size: 0.8rem; }

    /* OVER MIJ */
    .about-container { flex-direction: column; text-align: center; box-shadow: 0 10px 30px rgba(59, 35, 19, 0.1); }
    .about-image img { max-width: 100%; box-shadow: 8px 8px 0 var(--color-gold); }
    .about-image { min-height: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 240px; min-height: 180px; }
    .about-text { padding: 30px 20px; }
    
    /* CONTACT - DE GROTE FIX */
    .contact-grid {
        display: flex;
        flex-direction: column; /* Alles onder elkaar */
        gap: 20px;
    }

    /* 1. Tekst en Knoppen BOVENAAN */
    .contact-info-column {
        order: 1; 
        width: 100%;
    }

    /* 2. Kaart ONDERAAN */
    .map-wrapper {
        order: 2; 
        width: 100%;
        height: 300px;
        min-height: auto;
    }

    /* Knoppen styling voor mobiel */
    .buttons-wrapper {
        flex-direction: row; 
        width: 100%;
        gap: 10px;
        flex-wrap: wrap; 
    }

    /* FOOTER */
    .footer-content { flex-direction: column; gap: 10px; } 
    .footer-content p:not(:last-child)::after { content: ""; margin: 0; } 

    /* PRIJZEN */
    .price-tabs { gap: 10px; }
    .category-title { font-size: 1.6rem; margin-bottom: 20px; }
    .treatment-name { margin-bottom: 8px; font-size: 1.3rem; width: 100%; border-bottom: 1px solid #efe5da; padding-bottom: 5px; color: var(--color-gold); }
    .price-col { display: flex; justify-content: space-between; width: 100%; padding: 4px 0; font-weight: 600; font-size: 1.1rem; }
    .price-col::before { content: attr(data-label); font-weight: 800; color: var(--color-dark); opacity: 0.6; margin-right: 10px; }
    .price-col:empty { display: none; }
    .hide-on-mobile { display: none !important; }
}