/* ========================================
   Snuffelbug - stylesheet
   Mobile first
======================================== */

/* ---------- Kleuren ---------- */

:root{
    --accent-rood: #da282c;
}


/* ---------- Basis ---------- */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:"Segoe UI", Arial, sans-serif;
    background:#ffffff;
    color:#000;
    line-height:1.6;
}


/* ---------- Navigatie ---------- */

.topnav{

    position:sticky;
    top:0;
    z-index:1000;

    background:#333;

}

/* gewone links */

.topnav a{

    color:#fff;
    text-decoration:none;
    text-align:center;
    padding:16px;
    transition:.3s;

}

.topnav a:hover{

    background:var(--accent-rood);
    color:#fff;

}

.topnav a.active{

    background:#B71C1F;

}

/* hamburger */

.menu-toggle{

    display:none;

    background:#333;
    color:#fff;

    border:none;

    padding:16px 22px;

    font-size:1.8rem;

    cursor:pointer;

    transition:.3s;

}

.menu-toggle:hover{

    background:var(--accent-rood);

}

/* ---------- Pagina ---------- */

.container{
    width:90%;
    max-width:1100px;
    margin:auto;
    padding:25px 0;
}

/* ---------- Pagina-navigatie ---------- */

.page-nav{
    background:#f5f5f5;
    border-left:4px solid var(--accent-rood);
    padding:1rem;
    border-radius:8px;
    margin:2rem 0;
}

.page-nav strong{
    display:block;
    margin-bottom:.5rem;
    color:var(--accent-rood);
}

.page-nav a{
    display:inline-block;
    margin:.3rem .8rem .3rem 0;
    text-decoration:none;
}

.page-nav a:hover{
    text-decoration:underline;
}


/* ---------- Contactkaart ---------- */

.contact-card{
    max-width:600px;
    margin:2rem auto;
    padding:2rem;

    background:#f5f5f5;
    border-left:4px solid var(--accent-rood);
    border-radius:8px;
}

.contact-card h2{
    margin-top:0;
}

.contact-card hr{
    border:none;
    border-top:1px solid #d9d9d9;
    margin:1.5rem 0;
}

.icon{
    color: var(--accent-rood);
    display:inline-block;
    width:24px;
}

.button-contact{
    display:inline-block;
    margin-top:1rem;
    padding:12px 28px;

    background:var(--accent-rood);
    color:#fff;

    text-decoration:none;
    font-weight:600;

    border-radius:6px;
    transition:.2s;
}

.button-contact:hover{
    opacity:.9;
}

/* ---------- Gratis puppyles ---------- */

.puppy-aanbod{
    max-width:650px;
    margin:2.5rem auto;
    padding:2rem 1.5rem;

    background:var(--accent-rood);
    color:#fff;

    border-radius:12px;
    text-align:center;

    box-shadow:0 3px 10px rgba(0,0,0,0.12);
}

/* Wit label bovenaan */

.puppy-aanbod .puppy-label{
    display:inline-block;
    margin-bottom:1.2rem;
    padding:5px 12px;

    background:#fff;
    color:var(--accent-rood);

    border-radius:20px;

    font-size:0.8rem;
    font-weight:700;
    letter-spacing:.05em;
}

/* Hoofdtitel */

.puppy-aanbod h3{
    margin:0 0 10px 0;

    color:#fff;

    font-family:"Segoe UI Semibold","Segoe UI",sans-serif;
    font-size:1.5rem;
    line-height:1.25;
}

/* Introductietekst */

.puppy-aanbod p{
    color:#fff;
    font-size:1.05rem;
    margin-bottom:15px;
}

/* Witte badge met gratis aanbod */

.puppy-aanbod .gratis-badge{
    margin:1.5rem 0;
    padding:1rem;

    background:#fff;
    color:var(--accent-rood);

    border-radius:8px;
}

.puppy-aanbod .gratis-badge strong{
    display:block;

    font-family:"Segoe UI Black","Segoe UI",sans-serif;
    font-size:1.6rem;
    line-height:1.1;
}

.puppy-aanbod .gratis-badge span{
    display:block;
    margin-top:3px;

    font-size:1rem;
    font-weight:600;
}

/* Leeftijdsgrens */

.puppy-aanbod .puppy-leeftijd{
    font-size:.95rem;
    margin-bottom:18px;
}

/* Contactknop */

.puppy-aanbod .button-contact{
    background:#333;
    color:#fff;
    margin-top:0;
    padding:12px 28px;

    font-weight:600;
    border-radius:6px;
}

.puppy-aanbod .button-contact:hover{
    background:#222;
    color:#fff;
}


/* ---------- Teksten ---------- */

h1{
    color:#000;
    font-family:"Segoe UI Black","Segoe UI",sans-serif;
    font-size:2.5rem;
    margin-bottom:15px;
}

.tagline{
    font-family:"Segoe UI Semibold","Segoe UI",sans-serif;
    font-size:1.3rem;
    font-style:italic;
    color:var(--accent-rood);
    margin-top:0;
    margin-bottom:20px;
}

h2{
    color:var(--accent-rood);
    font-family:"Segoe UI Semibold","Segoe UI",sans-serif;
    font-size:1.6rem;
    margin-top:40px;
    margin-bottom:15px;

    scroll-margin-top: 80px;
}

h3{
    color:var(--accent-rood);
    font-family:"Segoe UI Semibold","Segoe UI",sans-serif;
    font-size:1.4rem;
    margin-top:40px;
    margin-bottom:15px;

    scroll-margin-top: 70px;
}


p{
    font-family:"Segoe UI",sans-serif;
    font-size:1.1rem;
    margin-bottom:20px;
}

.toelichting{
    font-family:"Segoe UI",sans-serif;
    font-size:0.95rem;
    color:#666;
    margin-top:-10px;
}

/* ---------- Uitklapbare FAQ ---------- */

details{
    margin-bottom:15px;
}

summary{
    color:var(--accent-rood);
    font-family:"Segoe UI Semibold","Segoe UI",sans-serif;
    font-size:1.4rem;
    font-weight:600;
    cursor:pointer;
    margin-top:25px;
}

details p{
    margin-top:10px;
}


/* Opsommingen */

ul{
    margin-left:60px;
    margin-bottom:20px;
    font-family:"Segoe UI",sans-serif;
    font-size:1.1rem;
}

li{
    margin-bottom:10px;
}

li::marker {
    color: var(--accent-rood);
}

/* Opsomming met vinkjes */

ul.checklist {
    list-style: none;
    margin-left: 60px;
    padding-left: 0;
}

ul.checklist li {
    position: relative;
    padding-left: 30px;
}

ul.checklist li::before {
    content: "✔";
    color: var(--accent-rood);
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Genummerde lijst styling */

ol.custom-list {
    list-style: none;
    margin-left: 60px;
    padding-left: 0;
    counter-reset: lijst-teller;
    
    /* Zorgt voor hetzelfde lettertype en dezelfde grootte als de p-tag */
    font-family: "Segoe UI", sans-serif;
    font-size: 1.1rem;
}

ol.custom-list li {
    position: relative;
    padding-left: 30px;
    counter-increment: lijst-teller;
    margin-bottom: 10px; /* Optioneel: geeft wat ademruimte tussen de regels */
}

ol.custom-list li::before {
    content: counter(lijst-teller) ".";
    color: var(--accent-rood);
    font-weight: bold;
    position: absolute;
    left: 0;
    /* Het cijfer neemt nu automatisch de 'Segoe UI' en '1.1rem' over, maar blijft dikgedrukt en rood */
}

/* Planning cursussen */

.planning{
    display:flex;
    gap:30px;
    flex-wrap:wrap;
    margin:30px 0;
}

.planning-kaart{
    flex:1;
    min-width:300px;
    background:#f5f5f5;
    border-left:4px solid var(--accent-rood);
    border-radius:12px;
    padding:25px;
    box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.planning-kaart h3{
    margin-top:0;
    margin-bottom:5px;
}

.planning-tijd{
    font-weight:600;
    color:var(--accent-rood);
    margin-bottom:15px;
}

/* Mooie uitlijning van de lijst in de kaart */

.planning-kaart ul{
    margin-left:25px;
    margin-bottom:0;
}


/* ---------- Algemene voorwaarden ---------- */

.voorwaarden-titel{
    color:var(--accent-rood);
    font-weight:700;
}

.voorwaarden-lijst{
    color:var(--accent-rood);
    margin-left:60px;
    margin-bottom:20px;
    font-family:"Segoe UI",sans-serif;
    font-size:1.1rem;
}

.voorwaarden-lijst li{
    color:#000;
}

.voorwaarden-definitie{
    color:#000;
    font-weight:700;
}

/* Rode tekst binnen een alinea */

.rood{
    color:var(--accent-rood);
}


/* ---------- Afbeeldingen ---------- */

/* Standaard afbeelding */

img{
    max-width:100%;
    height:auto;
    display:block;
    margin:20px auto;
    border-radius:8px;
}


/* Kleine afbeelding links van tekst */

.img-left{
    float:left;
    width:240px;
    max-width:35%;
    margin:0 25px 15px 0;
}

/* Medium afbeelding links van tekst */

.img-left-half{
    float:left;
    width:420px;
    max-width:50%;
    margin:0 25px 15px 0;
}

/* Grote afbeelding links van tekst */

.img-left-large{
    float:left;
    width:360px;
    max-width:35%;
    margin:0 25px 15px 0;
}


/* Kleine afbeelding rechts van tekst */

.img-right{
    float:right;
    width:240px;
    max-width:35%;
    margin:0 0 15px 25px;
}

/* Klein logo rechts van tekst */

.img-right-logo{
    float:right;
    width:240px;
    max-width:35%;
    margin:0 0 15px 25px;
}

/* Grote afbeelding rechts van tekst */

.img-right-large{
    float:right;
    width:360px;
    max-width:35%;
    margin:0 25px 15px 0;
}


/* Grote foto */

.img-full{
    width:100%;
}

/* Figuur met onderschrift */

figure {
    margin: 0;
}

figcaption {
    font-size: 0.9em;
    color: #666;
    text-align: center;   /* of left */
    margin-top: 5px;
}


/* Eventueel float beëindigen */

.clear{
    clear:both;
}


/* ---------- Links ---------- */

a{
    color:var(--accent-rood);
}

a:hover{
    color:#cc0000;
}


/* ---------- Desktop ---------- */

@media (min-width:768px){

    .topnav{

    display:flex;

    justify-content:center;

    align-items:stretch;

}

.topnav a{

    flex:1;

    max-width:220px;

}

.menu-toggle{

    display:none;

}

    h1{
        font-size:3rem;
    }

    h2{
        font-size:2rem;
    }

    h3{
        font-size:1.4rem;
    }

    summary{
        font-size:1.4rem;
    }

    p{
        font-size:1.2rem;
    }

}


/* ---------- Kleine telefoons ---------- */

@media (max-width:600px){

    .img-left,
    .img-right,
    .img-left-half,
    .img-left-large,
    .img-right-large{
        float:none;
        width:100%;
        max-width:100%;
        margin:20px auto;
    }

}

@media (max-width:767px){

    .topnav{

        display:flex;
        flex-wrap:wrap;

    }

    .topnav>a:first-child{

        flex:1;

        max-width:none;

    }

    .menu-toggle{

        display:block;

    }

    .topnav>a:not(:first-child){

        display:none;

        width:100%;

        max-width:none;

    }

    .topnav.open a{

    display:block;
    width:100%;
    max-width:none;

}

.topnav.open a:first-of-type{

    width:auto;
    flex:1;

}

}


/* ---------- Footer ---------- */

footer{
    margin-top:80px;
    padding:18px 0;
    background:#f5f5f5;
    border-top:4px solid var(--accent-rood);
}

.footer-content{
    width:90%;
    max-width:1100px;
    margin:auto;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.footer-left{
    color:#666;
    font-size:0.95rem;
}

.footer-right{
    display:flex;
    gap:25px;
    flex-wrap:wrap;
}

.footer-right a{
    color:#555;
    text-decoration:none;
    transition:0.25s;
}

.footer-right a:hover{
    color:var(--accent-rood);
}

@media (max-width:768px){

    .footer-content{
        flex-direction:column;
        text-align:center;
    }

    .footer-right{
        justify-content:center;
        gap:18px;
    }

}