/*
Theme Name: Interieur van Lies
Theme URI: https://interieurvanlies.nl
Author: MeyMedia
Author URI: https://meymedia.nl
Description: Zacht, rustig en een tikje eigenwijs. Maatwerkthema voor Interieur van Lies in de eigen huisstijl (Cormorant SC, #7C6A5D, #F3EEE4, #D3CCBE).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: interieurvanlies
*/

/* ---------- Huisstijl ---------- */
:root{
  --ink:#7C6A5D;          /* kleur lettertype */
  --ink-deep:#5B4C42;     /* donkere variant voor contrast */
  --paper:#F3EEE4;        /* achtergrond */
  --sand:#D3CCBE;         /* donkere tinten */
  --sand-soft:#E6DFD2;
  --cream:#FBF8F2;
  --serif-sc:"Cormorant SC", "Cormorant Garamond", Georgia, serif;
  --serif:"Cormorant Garamond", Georgia, serif;
  --body-font:var(--serif-sc);
  --wrap:1180px;
  --radius:4px;
  --ease:cubic-bezier(.22,.7,.2,1);
}
body.ivl-leesletter{ --body-font:var(--serif); }

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body-font);font-size:21px;line-height:1.6;font-weight:500;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--ink-deep)}
p{margin:0 0 1em}
h1,h2,h3,h4{font-family:var(--serif-sc);font-weight:500;color:var(--ink-deep);line-height:1.08;margin:0 0 .5em;letter-spacing:.01em}
h1{font-size:clamp(2.6rem,6vw,4.6rem)}           /* Kop 1 */
h2{font-size:clamp(2rem,3.6vw,3rem)}
h3{font-size:1.55rem}
h4{font-size:1.25rem}
em,.accent{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;clip:auto;z-index:999;background:var(--cream);padding:.5em 1em}
:focus-visible{outline:2px dashed var(--ink);outline-offset:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{padding:clamp(64px,9vw,120px) 0}
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font-family:var(--serif-sc);font-size:1rem;letter-spacing:.18em;color:var(--ink);margin-bottom:1.2em}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}

/* squiggle onder een woord — eigenwijs detail */
.squiggle{position:relative;white-space:nowrap}
.squiggle::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:-.12em;height:.32em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 20 2, 30 11, 48 6 S 80 2, 96 7 S 112 9, 118 4' fill='none' stroke='%237C6A5D' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}

/* ---------- Knoppen ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;font-family:var(--serif-sc);font-size:1.05rem;letter-spacing:.08em;
  padding:.85em 1.6em;border:1px solid var(--ink);border-radius:999px;text-decoration:none;
  background:var(--ink);color:var(--cream);transition:transform .35s var(--ease),background .35s,color .35s;
}
.btn:hover{background:var(--ink-deep);color:var(--cream);transform:translateY(-2px) rotate(-1deg)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--cream)}
.btn .arrow{transition:transform .35s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.link-arrow{font-family:var(--serif-sc);letter-spacing:.08em;text-decoration:none;border-bottom:1px solid var(--sand);padding-bottom:2px}
.link-arrow:hover{border-color:var(--ink)}

/* ---------- Header + dropdown ---------- */
.site-header{position:sticky;top:0;z-index:50;transition:box-shadow .3s}
.site-header::before{content:"";position:absolute;inset:0;background:rgba(243,238,228,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:-1}
.site-header.is-scrolled{box-shadow:0 1px 0 var(--sand)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:86px}
.brand{text-decoration:none;display:flex;align-items:baseline;gap:.15em;font-family:var(--serif-sc);font-size:1.7rem;color:var(--ink-deep);letter-spacing:.02em;line-height:1}
.brand .van{font-family:var(--serif);font-style:italic;font-size:.9em;color:var(--ink);padding:0 .1em}
.brand .dot{width:.28em;height:.28em;border-radius:50%;background:var(--sand);display:inline-block;margin-left:.08em;transform:translateY(-.05em)}
.brand img{max-height:56px;width:auto}

.main-nav ul{list-style:none;margin:0;padding:0}
.main-nav > ul{display:flex;gap:6px;align-items:center}
.main-nav li{position:relative}
.main-nav a{display:block;text-decoration:none;font-family:var(--serif-sc);font-size:1.12rem;letter-spacing:.06em;padding:.55em .9em;border-radius:999px;transition:background .25s}
.main-nav > ul > li > a:hover,.main-nav > ul > li.current-menu-item > a,.main-nav > ul > li.current_page_item > a,
.main-nav > ul > li.current-menu-ancestor > a,.main-nav > ul > li.current_page_ancestor > a{background:var(--sand-soft)}
.main-nav .has-sub > a{padding-right:2em}
.sub-toggle{position:absolute;right:.4em;top:50%;transform:translateY(-50%);background:none;border:0;padding:.3em;cursor:pointer;color:var(--ink);line-height:0}
.sub-toggle svg{transition:transform .3s var(--ease)}
.has-sub.open > .sub-toggle svg{transform:rotate(180deg)}
/* dropdown: werkt zowel voor menu's (.sub-menu) als paginalijst (.children) */
.main-nav .sub-menu,.main-nav .children{
  position:absolute;left:50%;top:calc(100% + 10px);min-width:270px;padding:12px;
  background:var(--cream);border:1px solid var(--sand);border-radius:14px;box-shadow:0 18px 40px -20px rgba(91,76,66,.35);
  opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .25s,transform .3s var(--ease),visibility .25s;
}
.main-nav .sub-menu::before,.main-nav .children::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.main-nav .has-sub:hover > .sub-menu,.main-nav .has-sub:hover > .children,
.main-nav .has-sub:focus-within > .sub-menu,.main-nav .has-sub:focus-within > .children,
.main-nav .has-sub.open > .sub-menu,.main-nav .has-sub.open > .children{opacity:1;visibility:visible;transform:translate(-50%,0)}
.main-nav .sub-menu a,.main-nav .children a{position:relative;border-radius:8px;padding:.55em .9em .55em 1.3em;font-size:1.05rem;white-space:nowrap;transition:background .25s,padding .3s}
.main-nav .sub-menu a:hover,.main-nav .children a:hover{background:var(--paper)}
.main-nav .sub-menu a::before,.main-nav .children a::before{content:"~";position:absolute;left:.45em;opacity:0;transition:opacity .2s}
.main-nav .sub-menu a:hover::before,.main-nav .children a:hover::before{opacity:.6}
.nav-cta{margin-left:10px}
.nav-cta a{background:var(--ink)!important;color:var(--cream)!important}
.nav-cta a:hover{background:var(--ink-deep)!important}

.menu-toggle{display:none;background:none;border:1px solid var(--ink);border-radius:999px;padding:.5em 1em;font-family:var(--serif-sc);font-size:1rem;letter-spacing:.08em;color:var(--ink);cursor:pointer;align-items:center;gap:.5em}
.menu-toggle .bars{width:18px;height:10px;position:relative;display:inline-block}
.menu-toggle .bars::before,.menu-toggle .bars::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .3s,top .3s}
.menu-toggle .bars::before{top:0}.menu-toggle .bars::after{top:8px}
.nav-open .menu-toggle .bars::before{top:4px;transform:rotate(45deg)}
.nav-open .menu-toggle .bars::after{top:4px;transform:rotate(-45deg)}

@media (max-width:900px){
  .menu-toggle{display:inline-flex}
  .main-nav{position:fixed;inset:86px 0 0 0;background:var(--paper);padding:24px;overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .3s,transform .35s var(--ease),visibility .3s}
  .nav-open .main-nav{opacity:1;visibility:visible;transform:none}
  .main-nav > ul{flex-direction:column;align-items:stretch;gap:2px}
  .main-nav a{font-size:1.6rem;padding:.45em .4em;border-radius:8px}
  .main-nav .sub-menu,.main-nav .children{position:static;transform:none;opacity:1;visibility:visible;display:none;box-shadow:none;border:0;background:transparent;padding:0 0 8px 18px;min-width:0}
  .main-nav .sub-menu::before,.main-nav .children::before{display:none}
  .main-nav .has-sub.open > .sub-menu,.main-nav .has-sub.open > .children{display:block;transform:none}
  .main-nav .has-sub:hover > .sub-menu,.main-nav .has-sub:hover > .children{transform:none}
  .main-nav .sub-menu a,.main-nav .children a{font-size:1.25rem;white-space:normal}
  .sub-toggle{top:1.1em;right:0;padding:.6em}
  .nav-cta{margin:16px 0 0}
  .nav-cta a{text-align:center;border-radius:999px}
  body.nav-open{overflow:hidden}
}

/* ---------- Foto's / placeholders ---------- */
.ph{position:relative;background:var(--sand);overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover}
.ph--empty{background:
  radial-gradient(circle at 30% 25%,rgba(251,248,242,.55) 0 18%,transparent 19%),
  linear-gradient(160deg,var(--sand-soft),var(--sand));}
.ph--empty::after{content:attr(data-label);position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-family:var(--serif-sc);letter-spacing:.2em;font-size:.85rem;color:var(--ink);opacity:.7;white-space:nowrap}
.arch{border-radius:999px 999px var(--radius) var(--radius)}

/* ---------- Hero ---------- */
.hero{padding:clamp(36px,6vw,80px) 0 clamp(64px,8vw,110px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,90px);align-items:center}
.hero h1{margin-bottom:.35em}
.hero-lead{font-size:1.35rem;max-width:30ch;margin-bottom:1.6em}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-visual{position:relative;justify-self:end;width:100%;max-width:470px}
.hero-visual .ph{aspect-ratio:4/5}
.hero-visual .ph-small{position:absolute;width:38%;aspect-ratio:1;left:-14%;bottom:-8%;border:8px solid var(--paper);border-radius:50%}
.badge{position:absolute;right:-26px;top:-26px;width:132px;height:132px;color:var(--ink-deep)}
.badge svg{width:100%;height:100%;animation:spin 22s linear infinite}
.badge .badge-center{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-size:1.9rem}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.badge svg{animation:none}}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{justify-self:center;max-width:380px;margin-top:20px}
  .badge{width:104px;height:104px;right:-8px;top:-18px}
  .hero-visual .ph-small{left:-6%}
}

/* ---------- Woordband ---------- */
.marquee{border-block:1px solid var(--sand);overflow:hidden;padding:18px 0;background:var(--paper)}
.marquee-track{display:flex;gap:2.4em;width:max-content;animation:marquee 38s linear infinite;font-family:var(--serif-sc);font-size:1.6rem;color:var(--ink)}
.marquee-track span:nth-child(even){font-family:var(--serif);font-style:italic;color:var(--ink-deep)}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ---------- Aanbod ---------- */
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:48px;flex-wrap:wrap}
.section-head h2{margin:0;max-width:18ch}
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.offer-card{position:relative;background:var(--cream);border:1px solid var(--sand);border-radius:18px;padding:34px 30px 30px;text-decoration:none;display:flex;flex-direction:column;transition:transform .45s var(--ease),box-shadow .45s}
.offer-card:nth-child(2){transform:translateY(28px)}
.offer-card:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 24px 40px -28px rgba(91,76,66,.5)}
.offer-card:nth-child(2):hover{transform:translateY(20px) rotate(.6deg)}
.offer-card .num{font-family:var(--serif);font-style:italic;font-size:3rem;line-height:1;color:var(--sand);margin-bottom:18px}
.offer-card h3{margin-bottom:.4em}
.offer-card p{font-size:1.08rem;flex:1}
.offer-card .more{font-family:var(--serif-sc);letter-spacing:.08em}
@media (max-width:860px){.offer-grid{grid-template-columns:1fr}.offer-card:nth-child(2){transform:none}.offer-card:nth-child(2):hover{transform:translateY(-6px) rotate(.6deg)}}

/* ---------- Projecten ---------- */
.projects-band{background:var(--ink);color:var(--paper)}
.projects-band h2,.projects-band h3{color:var(--cream)}
.projects-band .eyebrow{color:var(--sand)}
.projects-band .link-arrow{border-color:rgba(243,238,228,.35)}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.p-card{text-decoration:none;display:block}
.p-card .ph{aspect-ratio:4/5;border-radius:var(--radius);transition:border-radius .6s var(--ease)}
.p-card:nth-child(3n+2) .ph{border-radius:999px 999px var(--radius) var(--radius)}
.p-card:hover .ph{border-radius:40px}
.p-card .ph img{transition:transform .9s var(--ease)}
.p-card:hover .ph img{transform:scale(1.05)}
.p-card h3{margin:.8em 0 .2em;font-size:1.45rem}
.p-card p{font-size:1.02rem;opacity:.85;margin:0}
.projects-band .ph--empty{background:linear-gradient(160deg,#8d7b6e,#6b5b50)}
.projects-band .ph--empty::after{color:var(--paper)}
.empty-note{font-size:1.2rem;font-style:italic;font-family:var(--serif)}
@media (max-width:860px){.card-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.card-grid{grid-template-columns:1fr}}

/* ---------- Wie ben ik (home) ---------- */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,6vw,90px);align-items:center}
.about-photo{position:relative}
.about-photo .ph{aspect-ratio:3/4;border-radius:var(--radius) 120px var(--radius) var(--radius)}
.about-photo .note{position:absolute;right:-18px;bottom:28px;background:var(--cream);border:1px solid var(--sand);padding:.6em 1em;border-radius:10px;font-family:var(--serif);font-style:italic;font-size:1.2rem;transform:rotate(-4deg);box-shadow:0 10px 24px -16px rgba(91,76,66,.6)}
.about-text p{font-size:1.18rem}
@media (max-width:860px){.about-grid{grid-template-columns:1fr}.about-photo{max-width:420px}}

/* ---------- CTA ---------- */
.cta{text-align:center}
.cta-box{background:var(--sand-soft);border-radius:28px;padding:clamp(48px,7vw,90px) 24px;position:relative;overflow:hidden}
.cta-box::before,.cta-box::after{content:"";position:absolute;border-radius:50%;background:var(--sand);opacity:.55}
.cta-box::before{width:180px;height:180px;left:-60px;top:-60px}
.cta-box::after{width:110px;height:110px;right:8%;bottom:-50px}
.cta-box > *{position:relative}
.cta h2{max-width:20ch;margin:0 auto .4em}
.cta p{max-width:44ch;margin:0 auto 1.6em;font-size:1.2rem}

/* ---------- Pagina's ---------- */
.page-hero{padding:clamp(48px,7vw,96px) 0 clamp(32px,4vw,56px);border-bottom:1px solid var(--sand)}
.page-hero h1{max-width:20ch;margin:0}
.page-hero .intro{font-size:1.3rem;max-width:46ch;margin-top:.8em}
.page-hero.has-image .hero-grid{align-items:end}
.page-hero.has-image .ph{aspect-ratio:4/3;border-radius:999px 999px var(--radius) var(--radius)}
.breadcrumb{font-family:var(--serif-sc);letter-spacing:.12em;font-size:.95rem;margin-bottom:1.2em}
.breadcrumb a{text-decoration:none;opacity:.75}
.entry{max-width:760px;margin:0 auto}
.entry > *{margin-bottom:1.1em}
.entry h2{margin-top:1.6em;font-size:clamp(1.7rem,2.6vw,2.2rem)}
.entry h3{margin-top:1.4em}
.entry ul{padding-left:1.1em}
.entry li{margin-bottom:.35em}
.entry li::marker{content:"~  ";color:var(--sand)}
.entry blockquote{margin:2em 0;padding:0 0 0 1.2em;border-left:2px solid var(--sand);font-family:var(--serif);font-style:italic;font-size:1.5rem;line-height:1.35;color:var(--ink-deep)}
.entry img,.entry .wp-block-image img{border-radius:var(--radius)}
.entry .wp-block-gallery{margin:2em 0}
.entry .alignwide{max-width:var(--wrap);margin-left:auto;margin-right:auto}
.child-pages{margin-top:clamp(48px,6vw,80px)}
.child-pages .card-grid .p-card .ph{aspect-ratio:4/3}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,80px);max-width:var(--wrap);margin:0 auto}
.contact-details dl{margin:0}
.contact-details dt{font-family:var(--serif-sc);letter-spacing:.14em;font-size:.95rem;opacity:.8;margin-top:1.2em}
.contact-details dd{margin:0;font-size:1.3rem}
.ivl-form{background:var(--cream);border:1px solid var(--sand);border-radius:18px;padding:clamp(24px,4vw,40px)}
.ivl-form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ivl-form label{display:block;font-family:var(--serif-sc);letter-spacing:.08em;font-size:1rem;margin-bottom:.35em}
.ivl-form input,.ivl-form textarea,.ivl-form select{width:100%;font:inherit;font-family:var(--serif);font-size:1.15rem;color:var(--ink-deep);background:var(--paper);border:1px solid var(--sand);border-radius:10px;padding:.7em .9em;margin-bottom:16px;transition:border-color .25s}
.ivl-form input:focus,.ivl-form textarea:focus,.ivl-form select:focus{outline:none;border-color:var(--ink)}
.ivl-form textarea{min-height:150px;resize:vertical}
.ivl-form .hp{position:absolute;left:-9999px}
.ivl-form .privacy{font-size:.95rem;opacity:.8}
.form-msg{padding:1em 1.2em;border-radius:12px;margin-bottom:20px;font-size:1.1rem}
.form-msg.ok{background:#e6eadf;color:#4f5a45}
.form-msg.err{background:#f0dfd8;color:#7a4a3a}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}.ivl-form .row{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink-deep);color:var(--sand);padding:clamp(56px,7vw,90px) 0 28px;margin-top:clamp(40px,6vw,80px)}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--cream)}
.footer-big{font-family:var(--serif-sc);font-size:clamp(2.2rem,5vw,4rem);color:var(--paper);line-height:1.05;margin-bottom:.6em}
.footer-big em{color:var(--sand)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(211,204,190,.25)}
.footer-grid h4{color:var(--paper);font-size:1.05rem;letter-spacing:.16em;margin-bottom:1em}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid li{margin-bottom:.4em}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:24px;font-size:.98rem}
.footer-bottom a{border-bottom:1px solid rgba(211,204,190,.35)}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr}}

/* ---------- Cookiemelding ---------- */
.cookie-bar{position:fixed;left:16px;bottom:16px;max-width:400px;z-index:80;background:var(--cream);border:1px solid var(--sand);border-radius:16px;padding:20px 22px;box-shadow:0 18px 40px -20px rgba(91,76,66,.5);font-size:1.02rem;transform:translateY(140%);transition:transform .5s var(--ease)}
.cookie-bar.show{transform:none}
.cookie-bar p{margin:0 0 .8em}
.cookie-bar .btns{display:flex;gap:8px;flex-wrap:wrap}
.cookie-bar .btn{padding:.55em 1.1em;font-size:.95rem}
@media (max-width:480px){.cookie-bar{left:10px;right:10px;max-width:none}}

/* ---------- Scroll-animaties ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}
.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* WP basis */
.alignleft{float:left;margin:0 1.5em 1em 0}.alignright{float:right;margin:0 0 1em 1.5em}.aligncenter{margin-left:auto;margin-right:auto}
.wp-caption-text,figcaption{font-size:.95rem;opacity:.8;font-style:italic;font-family:var(--serif)}