/*
Theme Name: Kantelberg Arquitectos
Theme URI: https://kantelbergarquitectos.com
Author: Kantelberg Arquitectos
Description: Maatwerkthema voor Kantelberg Arquitectos — mediterrane villa's aan de Costa Blanca. Sand/gold galerij-ontwerp, webcopy v8.25.
Version: 2.0
License: GPL-2.0-or-later
Text Domain: kantelberg
*/

:root{--zwart:#f6f3ec;--paneel:#eae3d3;--tekst:#2b2a26;--zacht:#5c574d;--goud:#705e3a;--goudzacht:rgba(125,104,64,.4);--lijn:rgba(190,162,109,.35)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Georgia,'Times New Roman',serif;background:var(--zwart);color:var(--tekst);line-height:1.7}
h1,h2,h3,nav,.k,.btn,label,button{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px}
img{max-width:100%}

/* Toetsenbordbediening: zichtbare focus en een sla-de-navigatie-over-link.
   De link staat buiten beeld tot hij focus krijgt. */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--goud);outline-offset:3px;border-radius:2px}
.naar-inhoud{position:absolute;left:-9999px;top:0;z-index:60;background:var(--zwart);color:var(--tekst);border:1px solid var(--goud);padding:12px 20px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.naar-inhoud:focus{left:16px;top:16px}

/* HEADER / NAV — gedeeld op alle pagina's */
header{position:fixed;top:0;left:0;right:0;z-index:20;background:rgba(246,243,236,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--lijn);transition:transform .35s ease,background .3s ease,border-color .3s ease}
header.vast{background:rgba(246,243,236,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--lijn)}
header.verborgen{transform:translateY(-100%)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:84px}
.logo img{height:48px;width:auto;display:block;max-width:none;margin-left:-18px}
.logo .goudlogo{display:block}.logo .witlogo{display:none}
nav a{color:var(--tekst);text-decoration:none;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;margin-left:34px}
nav a:hover,nav a.actief{color:var(--goud)}

/* Taalkeuze — NL/ES-schakelaar (segment-pil, actieve taal goud) */
.taalkeuze{display:inline-flex;align-items:stretch;margin-left:34px;border:1px solid currentColor;border-radius:999px;overflow:hidden;color:var(--tekst)}
.taalkeuze a,.taalkeuze .taal-nu{margin:0;padding:6px 13px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;line-height:1.1;display:flex;align-items:center;text-decoration:none}
.taalkeuze .taal-nu{background:var(--goud);color:#fff;font-weight:700}
.taalkeuze a{color:inherit;transition:background .3s,color .3s}
.taalkeuze a:hover{background:rgba(125,104,64,.22);color:inherit}
body.pagina-home header .taalkeuze{color:#fff}
body.pagina-home header.vast .taalkeuze{color:var(--tekst)}
header.menu-open .taalkeuze{color:var(--tekst)}

/* Homepage-header is transparant over de hero */
body.pagina-home header{background:transparent;border-bottom:1px solid transparent}
/* geen blur/scrim over de hero zolang de balk transparant is (blur keert terug bij scrollen = .vast) */
body.pagina-home header:not(.vast):not(.menu-open){-webkit-backdrop-filter:none;backdrop-filter:none}
body.pagina-home header nav a{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.35)}
body.pagina-home header.vast nav a{color:var(--tekst);text-shadow:none}
body.pagina-home header.vast nav a:hover,body.pagina-home header nav a:hover{color:var(--goud)}
body.pagina-home .logo .witlogo{display:block}
body.pagina-home .logo .goudlogo{display:none}
body.pagina-home header.vast .logo .witlogo{display:none}
body.pagina-home header.vast .logo .goudlogo{display:block}

/* Kop voor interior pagina's (Projecten/Bureau/Contact/Legal) */
.intro{padding:180px 0 70px;text-align:center}
.k{display:block;font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:var(--goud);margin-bottom:22px;font-weight:500}
.intro h1{font-weight:300;font-size:clamp(1.9rem,3.6vw,2.7rem);letter-spacing:-.01em;color:#1c1b18;
/* Zelfde tekstbreedte als de alinea eronder, zodat een lange kop netjes in
   twee regels breekt in plaats van met een enkel woord op de tweede regel. */
  max-width:760px;margin-left:auto;margin-right:auto}
.intro p{color:var(--zacht);max-width:58ch;margin:12px auto 0}

section{padding:90px 0}
h2{font-weight:300;font-size:clamp(1.6rem,3vw,2.1rem);letter-spacing:-.01em;color:#1c1b18;margin-bottom:30px}
.midden{text-align:center}
.midden h2,.midden p{margin-left:auto;margin-right:auto}
section p{color:var(--zacht)}

/* Knop */
.btn{display:inline-block;margin-top:36px;border:1px solid var(--goud);color:var(--goud);text-decoration:none;
  padding:17px 46px;font-size:.75rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;transition:all .3s;background:transparent;cursor:pointer}
.btn:hover{background:var(--goud);color:#fff}

/* Scroll-reveal (gedeeld) */
@media (prefers-reduced-motion: no-preference){
  html.js .onthul{opacity:0;transform:translateY(30px);transition:opacity 1s ease,transform 1s ease}
  html.js .onthul.zichtbaar{opacity:1;transform:none}
}

/* Footer — gedeeld */
footer{border-top:1px solid var(--lijn);padding:56px 0;font-size:.82rem;color:var(--zacht)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}
footer a{color:var(--tekst);text-decoration:none}

@media(max-width:860px){
  nav a{margin-left:16px;font-size:.68rem}
  .intro{padding:150px 0 50px}
  section{padding:60px 0}
}

/* ---- Mobiel menu (hamburger) ---- */
.menu-knop{display:none}
@media(max-width:860px){
  .menu-knop{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:11px 7px;border:0;background:transparent;cursor:pointer;position:relative;z-index:30}
  .menu-knop span{display:block;height:2px;width:100%;border-radius:2px;background:var(--tekst);transition:transform .3s ease,opacity .25s ease,background .3s ease}
  body.pagina-home header:not(.vast):not(.menu-open) .menu-knop span{background:#fff}
  header.vast .menu-knop span,header.menu-open .menu-knop span{background:var(--tekst)}
  header.menu-open{transform:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
  header.menu-open .menu-knop span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  header.menu-open .menu-knop span:nth-child(2){opacity:0}
  header.menu-open .menu-knop span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  header nav{position:fixed;top:0;right:0;width:min(82vw,310px);height:100vh;background:rgba(246,243,236,.98);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:92px 34px;margin:0;transform:translateX(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);box-shadow:-24px 0 60px -24px rgba(0,0,0,.45);z-index:25}
  header.menu-open nav{transform:translateX(0)}
  header nav a{margin:0 !important;width:100%;padding:15px 0;font-size:1.05rem !important;letter-spacing:.14em !important;color:var(--tekst) !important;text-shadow:none !important;border-bottom:1px solid var(--lijn)}
  header nav a:last-child{border-bottom:0}
  header nav .taalkeuze{width:auto;margin:18px 0 0;padding:0;border:1px solid currentColor;color:var(--tekst)}
  header nav .taalkeuze a{width:auto;padding:8px 18px;border-bottom:0 !important;font-size:.8rem !important;letter-spacing:.16em !important}
  header nav .taalkeuze .taal-nu{padding:8px 18px;font-size:.8rem}
}