/* =========================================
   FONTS
========================================= */

/* Navigatie altijd Quicksand */
nav a {
    font-family: "Quicksand", sans-serif !important;
}

/* Sectie-tekst altijd Cormorant Garamond */
section,
section p,
section li,
.contact-info,
.contact-intro,
table,
td,
th {
    font-family: "Cormorant Garamond", serif !important;
}

/* Formulieren */
label,
input,
textarea,
input::placeholder,
textarea::placeholder {
    font-family: "Quicksand", sans-serif !important;
}

/* Footer */
footer {
    font-family: "Quicksand", sans-serif !important;
}

/* =========================================
   BASIS
========================================= */
* { box-sizing: border-box; }

body {
    margin: 0;
    background-color: #faf7ef;
    color: #4b5148;
    font-size: 16px;
}

/* =========================================
   HEADER
========================================= */
header {
    min-height: 390px;
    padding: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.header-content {
    padding: 18px 32px 20px;
    transform: translate(0, -20px);
}

.header-home { background-image: url("index_duin.jpeg"); }
.header-watiscst { background-image: url("watiscst_web.jpeg"); }
.header-overmij { background-image: url("overmij_zee.jpg"); }
.header-sensitiviteit { background-image: url("sensitiviteit_duin.jpeg"); }
.header-hoewerkik { background-image: url("hoewerkik_tafel.jpg"); }
.header-contact { background-image: url("contact_kamille.jpeg"); }

/* Header title */
.header-title {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.1em;
    color: #738c4a;
    position: absolute;
    left: 750%;
    top: 350%;
    transform: translate(-50%, -50%);
    text-shadow: 0 2px 4px rgba(0,0,0,0.25);
    white-space: nowrap;
}

/* =========================================
   NAVIGATIE
========================================= */
nav {
    padding: 0 10px;
    background-color: #eaeeef;
    border-bottom: 1px solid #ddd8c8;
    position: relative;
    height: 40px;
}

.nav-inner {
    height: 100%;
    max-width: 1020px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-left: 320px;
}

.nav-links a::first-letter {
    font-weight: 1000;
}

.nav-foto {
    position: absolute;
    left: -200px;
    top: 25%;
    width: 180px;
    height: auto;
    object-fit: cover;
    border: 1px solid #3A3A3A;
    pointer-events: none;
}

.nav-tagline {
    position: absolute;
    right: 785px;
    top: 43%;
    transform: translateY(-80%);
    font-family: "Allura", cursive;
    font-size: 1.2em;
    color: #d4b44a;
    white-space: nowrap;
}

nav a {
    color: #738c4a;
    font-size: 0.95em;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

nav a:hover {
    color: #a08354;
}

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
}

.hamburger span {
    width: 22px;
    height: 2px;
    background-color: #68705f;
}

/* =========================================
   HOME — FOTO MET TEKST
========================================= */
.foto-met-tekst-blok {
    position: relative;
    width: 55%;
    max-width: 1020px;
    margin: 40px auto;
    display: block;
}

.foto-achtergrond {
    width: 100%;
    margin: 0 auto;
    height: auto;
    display: block;
    border-radius: 6px;
    object-fit: cover;
}

.foto-tekst {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 0.95em;
    font-family: "Allura", cursive;
    text-align: center;
    text-shadow: 0 2px 6px rgba(0,0,0,0.35);
    padding: 10px 20px;
}

/* =========================================
   HOME — FOTO + TEKST BLOK
========================================= */
.foto-tekst-blok {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1020px;
    margin: 0 auto;
    padding: 25px 25px 10px;
}

.foto-links {
    width: 50%;
    border-radius: 6px;
    margin-right: 40px;
}

.tekst-rechts {
    width: 140%;
    font-size: 1.1em;
    font-family: "Cormorant Garamond", serif;
    color: #4e5946;
    text-align: center;
    line-height: 1.3;
    padding: 20px 10px;
    border: 1px solid #d8d2c2;
    border-radius: 12px;
    background-color: #d8ebef;
}

/* =========================================
   SECTION (ALLE PAGINA’S)
========================================= */
section {
    width: 100%;
    max-width: 1020px;
    margin: 0 auto;
    padding: 25px 25px 5px;
    font-size: 1.18em;
    line-height: 1.75;
    color: #55594f;
}


.section-kleine-foto {
    width: 100%;
    max-width: 1020px;
    margin: 0 auto;
    position: relative;
    padding-top: 50px; /* ruimte boven */
}

.section-kleine-foto img {
    width: 80px;              /* kleine foto */
    border-radius: 6px;
    position: absolute;
    top: 0;
    left: 50%;                /* centreren */
    transform: translateX(-50%); /* centreren */
}

section p {
    margin: 0 0 25px;
}

/* Titel van section */
section p:first-of-type {
    font-size: 1.3em;
    color: #68745f;
    text-align: center;
}

/* Overmij: tekst naast foto nooit centreren */
.tekst-met-foto-rechts p:first-child {
    text-align: left !important;
}

/* Overmij: beide paragrafen dezelfde regelafstand */
.tekstblok p {
    font-size: 1.15em !important;
    line-height: 1.75 !important;
}

/* ALLE andere paragrafen links */
section p:not(:first-child) {
    text-align: left !important;
}

.extra-kader-onderaan {
    max-width: 620px;
    margin: 35px auto 55px;
    padding: 10px 26px;
    background-color: #faf7ef;          /* zachte zandkleur */
    border: 2px solid #edc454;          /* subtiel kader */
    border-radius: 12px;                /* afgeronde hoeken */
    font-family: "Cormorant Garamond", serif;
    font-size: 1.12em;
    color: #68745f;
    line-height: 1.38;
    text-align: center;
}

.cranio-inline {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cranio-inline-img {
    width: 52px;
    height: auto;
    display: inline-block;
}

section a {
    text-decoration: none;
}
section a:hover {
    color: #a08354;
}

.eerste-regel {
    color: #edc454;   /* jouw zachte goud/brons tint */
    font-weight: 600;      /* elegant vet, niet te schreeuwerig */
    font-size: 1.5em;
}

section p:first-of-type {
    text-align: center !important;
}
/* =========================================
   OVER MIJ — FOTO RECHTS + TEKST
========================================= */
.tekst-met-foto-rechts {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1020px;
    margin: 25px auto;
    gap: 30px;
    font-size: 1rem;
    font-family: "Cormorant Garamond", serif;
}

.tekstblok {
    flex: 1;
    text-align: left;
    font-family: "Cormorant Garamond", serif;
    font-size: 1em;
    line-height: 1.45;
    color: #68745f;
}

.tekstblok p {
    font-size: 1.15em;
    text-align: left;
    line-height: 1.45;
    margin-bottom: 1.2em;
    color: #68745f;
}

.foto-rechts {
    width: 250px;
    height: auto;
    border-radius: 10px;
    display: block;
}

.foto-kast {
    width: 150px;
    height: 150px;
    border-radius: 10px;
    margin-top: 46px;
    display: block;
}

/* =========================================
   CONTACT / TABEL / FORMULIER
========================================= */
.contact-flex {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    max-width: 1020px;
    margin: 0 auto;
    padding: 20px 25px 60px;
}

.contact-links { flex: 1; margin-top: -40px; }
.contact-rechts { flex: 1; max-width: 480px; margin-top: -50px; }

table {
    border-collapse: collapse;
    width: 100%;
    max-width: 500px;
}

table td, table th {
    font-family: "Quicksand", sans-serif;
    font-size: 1.15em;
    color: #6b7166;
    padding: 12px 16px;
}

table th {
    background-color: #d4b44a;
    color: white;
    font-weight: 600;
}

th, td {
    border: 1px solid #e6b800;
    padding: 12px;
}

form {
    max-width: 480px;
}

label {
    display: block;
    margin-top: 15px;
    font-weight: bold;
}

input, textarea {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #e6b800;
    border-radius: 4px;
}

input[type="submit"] {
    background-color: #d4b44a;
    color: white;
    font-weight: bold;
    border: none;
    cursor: pointer;
    margin-top: 15px;
}

input[type="submit"]:hover {
    background-color: #e6b800;
}

/* =========================================
   FOOTER
========================================= */
footer {
    padding: 22px 10px;
    background-color: #dfe3d7;
    color: #6c7465;
    font-size: 0.85em;
    text-align: center;
    position: relative;
}

.extra-foto {
    position: absolute;  /* fixed geeft vaste positie op scherm */
    right: 0px;
    bottom: 20px;
    width: 220px;
    z-index: 999;
    pointer-events: none;
}
/* DESKTOP */
@media (min-width: 601px) {
    .foto-achtergrond {
        height: 480px;        /* kies jouw ideale hoogte */
        object-fit: cover;    /* vult mooi zonder vervormen */
        width: 60%;
        display: block;
    }
}
/* =========================================
   MOBIEL
========================================= */
@media (max-width: 600px) {

    /* ---------------- HEADER ---------------- */

    .header-title {
        font-family: "Cormorant Garamond", serif;
        font-size: 0.95em !important;
        color: #57965b;
        position: absolute !important;
        left: 66% !important;              /* jouw 2/3 rechts */
        top: 240% !important;               /* iets onder het midden */
        transform: translate(-50%) !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.25) !important;
        white-space: nowrap !important;
    }

    /* ---------------- NAVIGATIE ---------------- */

    .nav-inner {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100%;
        padding: 0 12px !important;
    }

    /* Hamburger zichtbaar en klikbaar */
    .hamburger {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 32px;               /* klikbare zone */
        height: 24px;
        cursor: pointer;
        position: relative;
        z-index: 9999;
        margin-right: 12px !important;
    }

    .hamburger span {
        width: 100%;
        height: 3px;
        background-color: #68705f;
        border-radius: 2px;
    }

    /* Mobiel menu */
    .nav-links {
        position: absolute;
        top: 100%;
        left: 20% !important;              /* centreren */
        transform: translateX(-50%) !important;
        width: 45% !important;             /* minder breed */
        max-width: 380px !important;       /* mooie rustige breedte */
        background-color: #dfe3d7; 
        color: #edc454;       
        flex-direction: column;
        align-items: center !important;  /* centreren */
        gap: 12px;
        padding: 12px 0;
        display: none;
        white-space: nowrap;

        margin-left: 0 !important;       /* desktop-margin verwijderen */
        text-align: center !important;   /* tekst centreren */
    }

    nav.open .nav-links {
        display: flex !important;
    }

    /* Links zelf ook centreren */
    .nav-links a {
        width: 100% !important;          /* volledige breedte per item */
        text-align: center !important;   /* tekst exact in het midden */
    }
    .nav-foto {
        width: 55px;
        margin-right: 10px;
    }

    .nav-tagline {
        font-size: 1em;
        margin-right: 10px;
    }


    /* ---------------- FOTO + TEKST BLOK ---------------- */

    .foto-met-tekst-blok {
        position: relative !important;
        overflow: visible !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .foto-achtergrond {
        width: 115% !important;         /* groter dan container */
        margin-left: -7.5% !important;  /* optisch centreren */
        display: block !important;
        height: auto !important;
    }

    .foto-tekst {
        position: absolute !important;
        top: -5px !important;           /* hoger op de foto */
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90% !important;
        text-align: center !important;
        color: white !important;
        font-size: 0.50em !important;
        line-height: 1.15 !important;
        padding: 0 10px !important;
        font-family: "Allura", "Quicksand", cursive !important;
        -webkit-font-smoothing: antialiased !important;
        font-smooth: always !important;
    }


    /* ---------------- ALGEMENE SECTIONS ---------------- */

    section {
        padding: 45px 22px 60px;
        font-size: 1.1em;
    }

    .contact-flex {
        flex-direction: column;
        gap: 30px;
    }
}


@media (max-width: 700px) {
        .nav-links {
        width: 100%;
        gap: 10px;              /* kleinere ruimte tussen links */
        white-space: nowrap;    /* voorkomt afbreken */
        justify-content: center;
    }

    .nav-links a {
        font-size: 0.85em;      /* kleiner zodat alles op 1 regel past */
        display: inline-block;
        -webkit-text-size-adjust: 100%;
    }
}

/* Overmij - Mobiel fix: foto boven, tekst onder */
@media (max-width: 700px) {

    .overmij-container {
        display: flex;
        flex-direction: column !important;   /* foto boven, tekst onder */
        gap: 20px;                            /* mooie ruimte ertussen */
    }

    .overmij-foto {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto;                       /* mooi gecentreerd */
    }

    .overmij-tekst {
        width: 100% !important;
        padding: 0 10px;                      /* ademruimte links/rechts */
        font-size: 1em;                       /* rustiger op mobiel */
        line-height: 1.4;
    }
}

/* Landscape fix voor header + titel */
@media (max-width: 900px) and (orientation: landscape) {

    header {
        justify-content: center !important;   /* blijft centreren */
        align-items: center !important;
        text-align: center !important;
    }

}

/* Landscape reset voor header-title */
@media (max-width: 900px) and (orientation: landscape) {

    .header-title {
        position: static !important;      /* schakelt absolute desktop positioning uit */
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;       /* verwijdert translate(-50%) */

        display: block !important;
        width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;

        font-size: 0.9em !important;
        white-space: nowrap !important;
    }
}
@media (max-width: 900px) and (orientation: landscape) {
    .header-title {
        margin-top: 295px !important;   /* lager */
    }
}
@media (max-width: 900px) and (orientation: landscape) {

    .foto-tekst {
        font-size: 0.7em !important;      /* kleiner zodat het binnen de foto past */
        line-height: 1.3 !important;      /* compacter */
        white-space: normal !important;   /* tekst breekt netjes af */
        text-align: center !important;
        margin-top: 10px !important;      /* nette afstand onder de foto */
    }
}
@media (max-width: 900px) and (orientation: landscape) {
    .foto-tekst {
        width: 90% !important;        /* breder tekstblok */
        max-width: none !important;   /* voorkomt beperking */
        left: 50% !important;         /* gecentreerd */
        transform: translateX(-50%) !important;
        text-align: center !important;    
        top: 0% !important;   /* hoger */
    }

    .foto-met-tekst-blok {
        width: 50% !important;        /* breder blok */
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .foto-achtergrond {
        width: 100% !important;       /* foto vult het bredere blok */
        height: auto !important;
        object-fit: cover !important; /* voorkomt vervorming */
    }
}
@media (max-width: 768px) {
  .tekst-met-foto-rechts {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .tekst-met-foto-rechts img {
    width: 45%;
    height: auto;
    margin-bottom: 1rem;
    margin-left: 5rem;
  }

  .tekstblok {
    width: 100%;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
    nav {
        width: 100% !important;
        max-width: none !important;
    }
}
@media (max-width: 900px) and (orientation: landscape) {
    .nav-links a {
        padding: 2px 4px !important;   /* compacter */
        font-size: 0.75em !important;  /* kleiner */
        white-space: nowrap !important;
    }
}
@media (max-width: 900px) and (orientation: landscape) {
    .nav-links {
        gap: 2px !important;   /* kleiner gap */
        margin-left: 120px !important;
    }
}
@media (max-width: 900px) and (orientation: landscape) {
    .nav-tagline {
        right: 500px !important;   /* iets verder naar rechts */
        font-size: 0.75em !important;   /* iets kleiner */
        margin-top: 20px !important;
    }
}
/* Samsung A-series fix */
@supports (-webkit-touch-callout: none) {
    .foto-tekst {
        top: 64%; /* iets hoger zodat hij niet wegvalt */
    }
}
/* Samsung S8+ definitieve fix */
@media screen and (-webkit-min-device-pixel-ratio: 1) and (max-width: 600px) {
    .foto-tekst {
        font-size: 0.44em !important;
        line-height: 1.20;
        white-space: normal;
    }
}
/* Samsung S8+ landscape fix */
@media screen and (orientation: landscape) and (max-width: 900px) and (-webkit-min-device-pixel-ratio: 1) {
    .foto-tekst {
        top: -2% !important;   /* iets hoger in landscape */
        font-size: 0.48em !important;  /* jouw werkende waarde */
        line-height: 1.20 !important;
        white-space: normal !important;
    }
}