/* Thema Your Secret Pics — donkere fotografieportfolio, 1-op-1 nagebouwd naar de WordPress-site (Elementor + Qi Addons). */
@font-face{font-family:'Saira Condensed';src:url('assets/saira-condensed-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Saira Condensed';src:url('assets/saira-condensed-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Roboto';src:url('assets/roboto-400.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  --sp-container:1188px;          /* 1140 inhoud + 2x24 marge, zoals de Elementor-container */
  --sp-narrow:820px;
  --sp-gutter:24px;
  --sp-gap:40px;
  --sp-bg:#0B0C0C;
  --sp-surface:#191B1D;
  --sp-text:rgba(245,248,255,.79);
  --sp-primary:#D2C1AF;
  --sp-primary-contrast:#0B0C0C;
  --sp-secondary:#fff;
  --sp-muted:#7D8590;
  --sp-line:rgba(255,255,255,.24);
  --sp-radius:0;
  --sp-btn-radius:0;
  --sp-shadow:none;
  --sp-font:'Roboto',Arial,sans-serif;
  --sp-font-heading:'Saira Condensed','Arial Narrow',sans-serif;
  --kop-h:120px;
  --sp-adminbar-h:0px;
}

/* ---------- basis ---------- */
body{background:var(--sp-bg);color:var(--sp-text);font:16px/1.6 var(--sp-font)}
h1,h2,h3,h4,h5,h6{font-family:var(--sp-font-heading);color:var(--sp-secondary);text-transform:uppercase;margin:0 0 .4em}
h1{font-size:72px;font-weight:700;line-height:1.3;letter-spacing:0}
h2{font-size:40px;font-weight:700;line-height:1.2}
h3{font-size:24px;font-weight:700;line-height:1.4;letter-spacing:.6px}
h4{font-size:16px;font-weight:600;line-height:1.4}
p{margin:0 0 1.8em}
a{color:var(--sp-secondary);text-decoration:none}
a:hover{color:var(--sp-primary)}
.sp-skip{position:absolute;left:-9999px;top:0;background:var(--sp-primary);color:#000;padding:.6rem 1rem;z-index:3000}
.sp-skip:focus{left:8px;top:8px}
::selection{background:var(--sp-primary);color:#0B0C0C}

/* ---------- kop ---------- */
.kop{position:absolute;top:var(--sp-adminbar-h,0px);left:0;right:0;z-index:60}
.kop-binnen{display:flex;align-items:center;height:var(--kop-h)}
.kop-merk{flex:none;display:block;line-height:0}
.kop-merk img{width:205px;height:auto;display:block}
.kop-nav{margin:0 auto}
.kop-nav .sp-menu{gap:10px}
.kop-nav .sp-menu a{font-family:var(--sp-font-heading);font-size:17px;font-weight:600;line-height:1;letter-spacing:.4px;
  text-transform:uppercase;color:var(--sp-text);padding:15px 10px;border-radius:0}
.kop-nav .sp-menu a:hover,.kop-nav .sp-menu li.is-active>a{color:var(--sp-primary)}
.kop-nav .sp-menu li.has-children>a::after{content:'';display:inline-block;width:.5em;height:.5em;margin-left:.5em;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.15em) rotate(45deg)}
.kop-nav .sp-menu-sub{background:var(--sp-bg);border:1px solid var(--sp-line);border-radius:0;box-shadow:none;padding:8px 0;min-width:220px}
.kop-nav .sp-menu-sub a{font-size:15px;padding:10px 24px;color:var(--sp-text)}
@media(min-width:901px){.kop-nav .sp-menu li.has-children:hover>.sp-menu-sub{display:flex}}
.kop-cta{flex:none;display:inline-flex;align-items:center;gap:.6em;padding:13px 46px;border:1px solid rgba(245,248,255,.45);
  font-family:var(--sp-font-heading);font-size:17px;font-weight:600;line-height:1;letter-spacing:.2px;text-transform:uppercase;color:var(--sp-primary)}
.kop-cta:hover{border-color:var(--sp-primary);color:var(--sp-secondary)}
.kop-cta .sp-icon{width:16px;height:16px}
.kop-knop-menu{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer;margin-left:auto}
.kop-knop-menu span{width:26px;height:2px;background:var(--sp-secondary)}

/* ---------- secties ---------- */
#inhoud>.sp-section:first-child{padding-top:calc(var(--kop-h) + 20px);padding-bottom:100px;min-height:540px}
#inhoud>.sp-section:first-child.sp-pad-xl,#inhoud>.sp-section:first-child.sp-pad-l{padding-top:calc(var(--kop-h) + 20px);padding-bottom:100px}
.sp-scheme-light{color:var(--sp-text)}
.sp-scheme-light a:not(.sp-btn){color:var(--sp-secondary)}

/* startpagina: de hero vult het scherm, de slider staat tegen de onderrand */
body.is-home #inhoud>.sp-section:first-child{min-height:100vh;justify-content:flex-end;padding-bottom:0;padding-top:var(--kop-h)}
body.is-home #inhoud>.sp-section:first-child>.sp-container{max-width:none;padding:0}
body.is-home #inhoud>.sp-section:first-child .sp-widget{margin-bottom:0}
body.is-home #inhoud>.sp-section:first-child .sp-widget:first-child{margin-bottom:120px}

/* ---------- koptekst-widget ---------- */
.sp-heading{margin-bottom:.3em}
.sp-heading-accent{color:var(--sp-primary)}
.sp-subtitle{font-family:var(--sp-font-heading);font-size:20px;font-weight:600;line-height:1.2;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--sp-text);margin:0}
.sp-text-center .sp-subtitle{text-align:center}

/* ---------- knoppen ---------- */
.sp-btn{font-family:var(--sp-font-heading);font-size:17px;font-weight:600;line-height:1;letter-spacing:.2px;
  text-transform:uppercase;padding:14px 36px;border-radius:0;border-width:2px}
.sp-btn-primary{background:transparent;color:var(--sp-primary);border-color:var(--sp-muted)}
.sp-btn-primary:hover{background:transparent;color:var(--sp-secondary);border-color:var(--sp-primary);filter:none;transform:none}
.sp-btn-outline{background:transparent;color:var(--sp-primary);border-color:var(--sp-muted)}
.sp-btn-outline:hover{background:transparent;color:var(--sp-secondary);border-color:var(--sp-primary)}
.sp-btn-secondary{background:var(--sp-primary);color:#0B0C0C;border-color:var(--sp-primary)}
.sp-btn-link{padding:0;border:0;color:var(--sp-primary);text-transform:none;text-decoration:underline;text-underline-offset:6px}
.sp-btn-link:hover{color:var(--sp-secondary)}

/* ---------- kaart = "interactive banner" van Qi ---------- */
.sp-card{background:var(--sp-surface);border:0;border-radius:0;padding:6px;box-shadow:none;
  display:flex;flex-direction:row-reverse;align-items:center;min-height:208px}
.sp-card .sp-post-img{width:194px;flex:none;aspect-ratio:1/1;background:transparent}
.sp-card .sp-post-body{padding:0 12px 0 24px;gap:0;justify-content:center}
.sp-card .sp-post-title{font-family:var(--sp-font-heading);font-size:24px;font-weight:700;line-height:1.4;letter-spacing:.6px;
  text-transform:uppercase;color:var(--sp-primary);margin:0}
.sp-card .sp-post-title a{color:inherit}
.sp-card .sp-post-title a:hover{color:var(--sp-secondary)}
.sp-card .sp-post-excerpt{display:none}
.sp-card .sp-post-link{font-family:var(--sp-font-heading);font-size:17px;font-weight:600;letter-spacing:.2px;text-transform:uppercase;
  color:var(--sp-primary);text-decoration:underline;text-underline-offset:6px;margin-top:22px}
.sp-card .sp-post-link .sp-icon{width:14px;height:14px}
.sp-card:hover .sp-post-img img{transform:scale(1.05)}
.sp-card .sp-post-img img{transition:transform .5s}

/* ---------- slider met beelden (volle breedte, vierkant) ---------- */
.sp-slider-images{--sp-slider-gap:0px}
.sp-slider-images .sp-slide-figuur img{border-radius:0}
.sp-slider-pijl{background:transparent;border:0;color:#fff;opacity:.9}

/* ---------- formulier ---------- */
.sp-form label,.sp-form .sp-field>span{font-family:var(--sp-font-heading);font-size:17px;font-weight:600;letter-spacing:.2px;
  text-transform:uppercase;color:var(--sp-text)}
.sp-form input:not([type=checkbox]):not([type=radio]),.sp-form select,.sp-form textarea{background:var(--sp-surface);
  border:1px solid var(--sp-line);border-radius:0;color:var(--sp-secondary);padding:.8em .9em}
.sp-form input:focus,.sp-form textarea:focus,.sp-form select:focus{border-color:var(--sp-primary);outline:none}
.sp-form .sp-req{color:var(--sp-text)}
.sp-form .sp-field label{font-family:var(--sp-font-heading);font-size:17px;font-weight:600;letter-spacing:.2px;
  text-transform:uppercase;color:var(--sp-text);margin-bottom:.6rem}
.sp-form .sp-btn{width:100%}

/* ---------- oproepblok onderaan elke pagina ---------- */
.cta{background:var(--sp-surface);padding:80px 0;text-align:center}
.cta-titel{font-size:40px;font-weight:700;line-height:1.2;color:var(--sp-primary);margin:0 0 16px}
.cta-tekst{margin:0 0 50px}
.cta-actie{margin:0}

/* ---------- voettekst ---------- */
.voet{padding:80px 0}
.voet-binnen{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;align-items:start}
.voet-merk img{width:245px;height:auto;display:block}
.voet-titel{font-size:24px;font-weight:700;line-height:1.4;letter-spacing:.6px;color:var(--sp-secondary);margin:0 0 30px}
.voet-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px}
.voet-lijst li{display:flex;align-items:center;gap:8px}
.voet-lijst .sp-icon{width:16px;height:16px;color:var(--sp-primary);flex:none}
.voet-lijst a{color:var(--sp-text);letter-spacing:.4px}
.voet-lijst a:hover{color:var(--sp-primary)}
.voet-sociaal{display:flex;gap:15px;margin:0 0 30px}
.voet-sociaal a{width:50px;height:50px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:#262626;color:#fff}
.voet-sociaal a:first-child{background:#3B5998}
.voet-sociaal a:hover{background:var(--sp-primary);color:#0B0C0C}
.voet-sociaal .sp-icon{width:20px;height:20px}
.voet-copy{display:flex;align-items:center;gap:8px;margin:0;font-size:15px}
.voet-copy .sp-icon{width:16px;height:16px;flex:none}

/* ---------- album ---------- */
.album-kop{position:relative;min-height:620px;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:calc(var(--kop-h) + 20px) 0 100px;background:var(--sp-bg) center/cover no-repeat;background-attachment:fixed}
.album-kop::before{content:'';position:absolute;inset:0;background:rgba(11,12,12,.8)}
.album-kop h1{position:relative;margin:0;color:var(--sp-primary)}
.album-tekst{padding:80px 0}
.album-tekst-binnen{display:grid;grid-template-columns:45% 55%;gap:0}
.album-tekst-binnen>div:last-child{padding-left:5px}
.album-galerij{padding:0 60px 0}
.album-galerij .sp-gallery{--cols:3;gap:60px;column-gap:60px}
.album-galerij .sp-gallery-item{margin-bottom:60px}

/* ---------- leeftijdscontrole ---------- */
.sp-leeftijd{--sp-leeftijd-bg:#000;--sp-leeftijd-tekst:#fff}
.sp-leeftijd .sp-btn{border-color:rgba(255,255,255,.45)}

/* ---------- responsief ---------- */
@media(max-width:1024px){
  .voet-binnen{grid-template-columns:repeat(2,1fr);gap:48px 40px}
  .sp-card{min-height:0;flex-direction:column;align-items:stretch}
  .sp-card .sp-post-img{width:100%;aspect-ratio:4/3}
  .sp-card .sp-post-body{padding:24px}
  .album-tekst-binnen{grid-template-columns:1fr}
  .album-galerij .sp-gallery{--cols:2;gap:30px;column-gap:30px}
  .album-galerij .sp-gallery-item{margin-bottom:30px}
}
@media(max-width:900px){
  :root{--kop-h:90px}
  .kop-merk img{width:150px}
  .kop-cta{display:none}
  .kop-knop-menu{display:flex}
  /* dicht = echt weg: een paneel dat enkel naast het scherm geschoven staat, maakt de pagina breder dan het scherm */
  .kop-nav{position:fixed;inset:var(--kop-h) 0 0 0;background:var(--sp-bg);padding:1.5rem;margin:0;
    z-index:59;overflow-y:auto;display:none}
  .kop-nav.is-open{display:block}
  .kop-nav .sp-menu{flex-direction:column;align-items:stretch;gap:0}
  .kop-nav .sp-menu a{padding:14px 4px;font-size:20px}
  .kop-nav .sp-menu-sub{position:static;display:flex;border:0;padding:0 0 0 20px;min-width:0}
  .kop-nav .sp-menu li.has-children>a::after{display:none}
  .kop-nav .sp-menu-toggle{display:block;position:absolute;right:0;top:8px;width:40px;height:40px;background:none;border:0;cursor:pointer}
  .kop-nav .sp-menu-toggle::after{content:'';display:block;width:.5em;height:.5em;margin:0 auto;
    border-right:2px solid var(--sp-secondary);border-bottom:2px solid var(--sp-secondary);transform:rotate(45deg)}
}
@media(max-width:768px){
  h1{font-size:52px;overflow-wrap:break-word}
  h2{font-size:32px}
  .cta-titel{font-size:32px}
  .voet-binnen{grid-template-columns:1fr;gap:40px}
  .album-galerij{padding:0 24px}
  .album-galerij .sp-gallery{--cols:1;gap:20px}
  .album-galerij .sp-gallery-item{margin-bottom:20px}
  #inhoud>.sp-section:first-child{min-height:0;padding-bottom:60px}
  .cta,.voet{padding:56px 0}
  .sp-subtitle{font-size:16px;letter-spacing:2px}
}
@media(max-width:480px){
  h1{font-size:36px}
  h2{font-size:28px}
  .cta-titel{font-size:28px}
  .voet-titel{font-size:20px}
}