/*
Theme Name: JNS Binnenschrijnwerk
Theme URI: https://jnsbinnenschrijnwerk.be
Author: JNS Binnenschrijnwerk
Description: Strak en modern thema voor JNS Binnenschrijnwerk — volledig compatibel met Elementor
Version: 4.0
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600&family=DM+Sans:wght@300;400;500&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;max-width:100%;overflow-x:hidden;}
:root{
  --wit:#ffffff;
  --offwhite:#f9f7f4;
  --lichtgrijs:#f2efe9;
  --rand:#e8e3db;
  --tekst:#1a1814;
  --muted:#8a8278;
  --goud:#b8942a;
  --goud-donker:#8a6d1a;
  --goud-licht:#d4ae4e;
  --donker:#0a0a0a;
}
html{scroll-behavior:smooth;}
body{font-family:'DM Sans',sans-serif;background:var(--wit);color:var(--tekst);}

/* Mobiele menu overlay ─────────────────────────────────────────────────── */







/* ═══════════════════════════════════════
   NAVIGATIE
═══════════════════════════════════════ */
/* nav stijlen staan in header.php */
.logo-nav{display:flex;align-items:center;gap:0.75rem;text-decoration:none;}
.logo-letters{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:600;color:var(--goud);letter-spacing:0.05em;}
.logo-sub{font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);}









/* ═══════════════════════════════════════
   HERO — ACHTERGRONDAFBEELDING
═══════════════════════════════════════ */
.hero{
  position:relative;
  min-height:92vh;
  display:flex;align-items:flex-end;
  background:var(--donker) center center / cover no-repeat;
  overflow:hidden;
}
/* Donkere overlay (dikte wordt via inline CSS ingesteld via WP-admin) */
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.45) 50%, rgba(10,10,10,0.25) 100%);
  opacity:0.9;
  z-index:1;
}
.hero-inner{
  position:relative;z-index:2;
  width:100%;
  display:flex;justify-content:space-between;align-items:flex-end;
  padding:5rem 4rem;
  gap:3rem;
}
.hero-content{max-width:580px;}
.hero-logo {
  height: 100px;
  width: auto;
  display: block;
  margin-bottom: 2rem;
  filter: drop-shadow(0 4px 24px rgba(184,148,42,0.25));
}
.hero-eyebrow{
  font-size:0.7rem;letter-spacing:0.25em;text-transform:uppercase;
  color:var(--goud-licht);margin-bottom:1.5rem;
  display:flex;align-items:center;gap:0.75rem;
}
.hero-eyebrow::before{content:'';display:block;width:32px;height:1px;background:var(--goud-licht);}
.hero h1{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(3.2rem,6vw,5.5rem);
  line-height:1.05;font-weight:300;
  color:var(--wit);
  margin-bottom:1.5rem;
}
.hero h1 em{font-style:italic;color:var(--goud-licht);}
.hero-desc{
  font-size:0.95rem;font-weight:300;line-height:1.85;
  color:rgba(255,255,255,0.75);max-width:460px;margin-bottom:2.5rem;
}
.cta-row{display:flex;gap:1rem;flex-wrap:wrap;}
.btn-primary{
  display:inline-block;padding:0.9rem 2.2rem;
  background:var(--goud);color:var(--wit);
  text-decoration:none;font-size:0.78rem;font-weight:500;
  letter-spacing:0.12em;text-transform:uppercase;transition:all 0.2s;
}
.btn-primary:hover{background:var(--goud-donker);}
.btn-outline{
  display:inline-block;padding:0.9rem 2.2rem;
  background:transparent;color:var(--wit);
  text-decoration:none;font-size:0.78rem;font-weight:400;
  letter-spacing:0.12em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,0.4);transition:all 0.2s;
}
.btn-outline:hover{border-color:var(--goud-licht);color:var(--goud-licht);}

.hero-stats{
  display:flex;flex-direction:column;gap:1.5rem;
  min-width:180px;padding-bottom:0.5rem;
}
.hero-stat{border-left:2px solid var(--goud);padding-left:1.25rem;}
.hero-stat span{
  font-family:'Cormorant Garamond',serif;font-size:2.8rem;
  font-weight:300;color:var(--wit);line-height:1;display:block;
}
.hero-stat p{font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-top:0.2rem;}

/* ═══════════════════════════════════════
   DIENSTEN
═══════════════════════════════════════ */
.diensten{padding:7rem 4rem;background:var(--wit);}
.section-label{font-size:0.68rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--goud);margin-bottom:0.75rem;}
.section-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,4vw,3.2rem);font-weight:300;line-height:1.1;margin-bottom:3.5rem;color:var(--tekst);}
.diensten-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--rand);}
.dienst-card{padding:2.5rem;border-right:1px solid var(--rand);border-bottom:1px solid var(--rand);transition:background 0.2s;display:flex;flex-direction:column;}
.dienst-card:nth-child(3n){border-right:none;}
.dienst-card:nth-child(4),.dienst-card:nth-child(5),.dienst-card:nth-child(6){border-bottom:none;}
.dienst-card:hover{background:var(--offwhite);}
.dienst-nr{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:300;color:var(--goud-licht);margin-bottom:1rem;opacity:0.6;}
.dienst-card h3{font-size:1rem;font-weight:500;margin-bottom:0.6rem;color:var(--tekst);}
.dienst-card p{font-size:0.85rem;line-height:1.75;color:var(--muted);font-weight:300;flex:1;}
.dienst-link{display:inline-block;margin-top:1rem;font-size:0.78rem;color:var(--goud);text-decoration:none;letter-spacing:0.05em;transition:color 0.2s;}
.dienst-link:hover{color:var(--goud-donker);}

/* ═══════════════════════════════════════
   OVER ONS
═══════════════════════════════════════ */
.over{padding:7rem 4rem;background:var(--lichtgrijs);display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;}
.over-label-line{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;}
.over-label-line::after{content:'';flex:1;height:1px;background:var(--rand);}
.over-left p{font-size:0.92rem;line-height:1.85;color:var(--muted);margin-bottom:1.25rem;font-weight:300;}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--rand);}
.stat span{font-family:'Cormorant Garamond',serif;font-size:2.8rem;font-weight:300;color:var(--goud);display:block;line-height:1;}
.stat p{font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-top:0.35rem;}
.over-right{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rand);}
.over-card{background:var(--wit);padding:2rem;display:flex;flex-direction:column;gap:0.5rem;}
.over-card-icon{font-size:1.5rem;color:var(--goud);margin-bottom:0.5rem;}
.over-card h4{font-size:0.9rem;font-weight:500;color:var(--tekst);}
.over-card p{font-size:0.8rem;color:var(--muted);line-height:1.6;margin:0;}

/* ═══════════════════════════════════════
   PORTFOLIO
═══════════════════════════════════════ */
.portfolio{padding:7rem 4rem;background:var(--wit);}
.portfolio-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:3rem;}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.portfolio-item{aspect-ratio:4/3;position:relative;overflow:hidden;cursor:pointer;}
.portfolio-wide{grid-column:span 2;}
.portfolio-overlay{position:absolute;inset:0;background:rgba(26,24,20,0.55);display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem;opacity:0;transition:opacity 0.3s;}
.portfolio-item:hover .portfolio-overlay{opacity:1;}
.portfolio-overlay h4{color:var(--wit);font-size:0.95rem;font-weight:500;}
.portfolio-overlay p{color:var(--goud-licht);font-size:0.78rem;margin-top:0.2rem;}
.portfolio-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:300;color:rgba(26,24,20,0.3);letter-spacing:0.1em;}
.portfolio-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.4s ease;}
.portfolio-item:hover img{transform:scale(1.03);}

/* ═══════════════════════════════════════
   CONTACT CTA
═══════════════════════════════════════ */
.contact-cta{
  padding:6rem 4rem;
  background:var(--donker);
  text-align:center;
}
.contact-cta-inner{max-width:600px;margin:0 auto;}
.contact-cta h2{
  font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,4vw,3rem);
  font-weight:300;color:var(--wit);margin:1rem 0 1.5rem;line-height:1.2;
}
.contact-cta p{font-size:0.95rem;color:rgba(255,255,255,0.6);margin-bottom:2.5rem;font-weight:300;}

/* ═══════════════════════════════════════
   CONTACT PAGINA
═══════════════════════════════════════ */
.contact{padding:7rem 4rem;background:var(--offwhite);display:grid;grid-template-columns:1fr 1fr;gap:6rem;}
.contact-info .section-title{margin-bottom:1.5rem;}
.contact-info>p{font-size:0.9rem;color:var(--muted);line-height:1.8;font-weight:300;margin-bottom:2rem;}
.contact-detail{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.25rem;}
.contact-icon{width:32px;height:32px;border:1px solid var(--rand);display:flex;align-items:center;justify-content:center;color:var(--goud);font-size:0.85rem;flex-shrink:0;}
.contact-detail-text{font-size:0.88rem;color:var(--tekst);line-height:1.5;}
.contact-detail-text small{display:block;font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-bottom:0.15rem;}
.form-group{margin-bottom:1rem;}
.form-group label{display:block;font-size:0.68rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);margin-bottom:0.4rem;}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:0.8rem 1rem;background:var(--wit);border:1px solid var(--rand);color:var(--tekst);font-family:'DM Sans',sans-serif;font-size:0.88rem;transition:border-color 0.2s;appearance:none;}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--goud);}
.form-group textarea{resize:vertical;min-height:110px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.submit-btn{width:100%;padding:0.95rem;background:var(--goud);color:var(--wit);border:none;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:0.78rem;font-weight:500;letter-spacing:0.15em;text-transform:uppercase;transition:background 0.2s;margin-top:0.5rem;}
.submit-btn:hover{background:var(--goud-donker);}

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.site-footer{background:var(--donker);color:var(--wit);padding:4rem 4rem 2rem;}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:4rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,0.08);}
.footer-logo{display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;gap:0.15rem;margin-bottom:1.25rem;}
.footer-logo-mark{display:inline-flex;align-items:center;border:2px solid #ffffff;border-radius:6px;padding:0.05rem 0.55rem 0.05rem 0.4rem;line-height:1;}
.footer-logo-mark span{font-family:'DM Sans',sans-serif;font-weight:800;font-size:1.8rem;letter-spacing:-0.02em;}
.footer-logo-j,.footer-logo-n,.footer-logo-s{color:#ffffff;}
.footer-logo-domain{font-family:'DM Sans',sans-serif;font-size:0.6rem;font-weight:400;letter-spacing:0.04em;color:rgba(255,255,255,0.45);padding-left:0.1rem;}
.footer-brand>p{font-size:0.85rem;color:rgba(255,255,255,0.45);line-height:1.8;font-weight:300;max-width:280px;}
.footer-col h4{font-size:0.68rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--goud);margin-bottom:1.25rem;}
.footer-col ul{list-style:none;}
.footer-col ul li{margin-bottom:0.6rem;}
.footer-col ul li a,.footer-col address a{color:rgba(255,255,255,0.5);text-decoration:none;font-size:0.85rem;font-weight:300;transition:color 0.2s;}
.footer-col ul li a:hover,.footer-col address a:hover{color:var(--goud);}
.footer-col address{font-style:normal;font-size:0.85rem;color:rgba(255,255,255,0.5);line-height:1.9;font-weight:300;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:1.75rem;}
.footer-bottom p{font-size:0.75rem;color:rgba(255,255,255,0.25);}
.footer-btw{font-size:0.72rem;color:rgba(255,255,255,0.2);letter-spacing:0.05em;}

/* ═══════════════════════════════════════
   ANIMATIE
═══════════════════════════════════════ */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
.hero-content>*{animation:fadeUp 0.6s ease both;}
.hero-eyebrow{animation-delay:0.1s;}.hero h1{animation-delay:0.2s;}.hero-desc{animation-delay:0.3s;}.cta-row{animation-delay:0.4s;}

/* ═══════════════════════════════════════
   RESPONSIVE — TABLET (max 1024px)
═══════════════════════════════════════ */
@media(max-width:1024px){
  #main-nav,.diensten,.over,.portfolio,.contact,.contact-cta,.site-footer{padding-left:2.5rem;padding-right:2.5rem;}
  .hero-inner{padding:4rem 2.5rem;}
  .footer-top{grid-template-columns:1fr 1fr;gap:2.5rem;}
  .footer-brand{grid-column:span 2;}
}

/* ═══════════════════════════════════════
   RESPONSIVE — MOBIEL (max 768px)
═══════════════════════════════════════ */
@media(max-width:768px){
  /* Nav balk — blijft wit, normaal gedrag */
  /* nav stijlen staan in header.php */
  /* Hamburger knop tonen */
  .nav-toggle{display:flex;z-index:1001;}
  /* Desktop nav-links verbergen op mobiel */
  .nav-links,#nav-links-desktop{display:none !important;}

  /* Hero */
  .hero{min-height:85vh;align-items:flex-end;}
  .hero-inner{flex-direction:column;align-items:flex-start;padding:3rem 1.5rem;}
  .hero-stats{flex-direction:row;gap:1.5rem;width:100%;border-top:1px solid rgba(255,255,255,0.15);padding-top:1.5rem;}
  .hero-stat{flex:1;border-left:none;border-top:2px solid var(--goud);padding-left:0;padding-top:0.75rem;}
  .hero-stat span{font-size:2rem;}

  /* Secties */
  .diensten,.portfolio,.over,.contact{padding:4rem 1.5rem;}
  .contact-cta{padding:4rem 1.5rem;}
  .diensten-grid{grid-template-columns:1fr;}
  .dienst-card:nth-child(n){border-right:none;border-bottom:1px solid var(--rand);}
  .dienst-card:last-child{border-bottom:none;}
  .over{grid-template-columns:1fr;gap:3rem;}
  .over-right{display:none;}
  .portfolio-grid{grid-template-columns:1fr 1fr;}
  .portfolio-wide{grid-column:span 2;}
  .contact{grid-template-columns:1fr;gap:3rem;}
  .form-grid{grid-template-columns:1fr;}
  .portfolio-header{flex-direction:column;align-items:flex-start;gap:1rem;}

  /* Footer */
  .site-footer{padding:3rem 1.5rem 1.5rem;}
  .footer-top{grid-template-columns:1fr;gap:2rem;}
  .footer-brand{grid-column:span 1;}
  .footer-bottom{flex-direction:column;gap:0.5rem;text-align:center;}
}

@media(max-width:480px){
  .portfolio-grid{grid-template-columns:1fr;}
  .portfolio-wide{grid-column:span 1;}
  .hero-stats{flex-wrap:wrap;}
  .stat-row{grid-template-columns:1fr 1fr;}
}

/* ═══════════════════════════════════════
   ELEMENTOR COMPATIBILITEIT
═══════════════════════════════════════ */

/* Verwijder standaard margin/padding die Elementor verstoort */
.elementor-page .page-content,
.elementor-page #content{padding:0;margin:0;}

/* Full-width secties zonder thema-padding */
.elementor-section-full_width > .elementor-container{max-width:100%;}

/* Elementor Canvas: geen header/footer */
body.elementor-template-canvas #main-nav,
body.elementor-template-canvas .site-footer{display:none;}

/* Zorg dat Elementor-knoppen de JNS-stijl kunnen gebruiken */
.elementor-button.jns-btn-primary,
.elementor-button.elementor-button-jns{
  background:var(--goud);color:var(--wit);
  letter-spacing:0.1em;text-transform:uppercase;
  font-size:0.78rem;font-weight:500;
  border:none;transition:background 0.2s;
}
.elementor-button.jns-btn-primary:hover{background:var(--goud-donker);}