/* ============================================================
   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; 
        transition: right 0.4s ease; 
        box-shadow: -5px 0 15px rgba(0,0,0,0.1); 
        z-index: 1000;
    }
    
    /* Navigatie actief */
    .nav-list.active { right: 0; }
}

/* --- 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;
    }

    /* Mobiele tekst (adres/tel/mail) zichtbaar maken */
    .mobile-contact-details {
        display: block; 
        margin-bottom: 20px;
    }

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

    .contact-card {
        width: auto;
        flex: 1; 
        padding: 12px 5px; 
        height: auto;
        flex-direction: column; 
        text-align: center;
        /* Op mobiel icoon links en tekst rechts? Nee, in jouw voorbeeld is het kolom. */
        /* Als je op mobiel de icoon naast tekst wilt: */
        flex-direction: row; 
        gap: 20px; 
        text-align: left; 
        padding: 15px 25px;
    }
    
    .contact-card i { font-size: 1.8rem; margin-bottom: 0; }
    .contact-card h3 { font-size: 0.85rem; margin-bottom: 0; }
    .contact-card span { display: none; } /* Detail tekst weg */
    .contact-card div { display: flex; flex-direction: column; }

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

    /* PRIJZEN */
    .price-tabs { gap: 10px; }
    .tab-btn { padding: 10px 20px; font-size: 1rem; }
    .price-table { padding: 20px; }
    .category-title { font-size: 1.6rem; margin-bottom: 20px; }
    .price-row-header { display: none; }
    .price-row { display: flex; flex-direction: column; align-items: flex-start; padding: 20px 0; border-bottom: 1px dashed rgba(59, 35, 19, 0.2); }
    .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; }
}