/* Maison Du Bois — shared site behaviour styles (nav, carousels, filters, responsive).
   Loaded after colors_and_type.css + styles.css on every page. */

/* ---- nav (replaces the React scroll-state logic) ---- */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;border-bottom:1px solid transparent;transition:all .3s var(--ease-calm);}
.site-nav.scrolled{background:rgba(250,246,241,0.90);backdrop-filter:saturate(120%) blur(10px);-webkit-backdrop-filter:saturate(120%) blur(10px);border-bottom-color:var(--line);}
.nav-link{font-size:14px;font-weight:500;white-space:nowrap;color:var(--ink-soft);border-bottom:1px solid transparent;padding-bottom:2px;transition:color .2s;}
.nav-link:hover{color:var(--accent);}
.nav-link.active{color:var(--accent);border-bottom-color:var(--accent);}
.nav-toggle{display:none;background:none;border:none;padding:8px;color:var(--ink);}
.nav-mobile{display:none;}

/* ---- carousel dots ---- */
.dot{height:8px;width:8px;border-radius:999px;border:none;transition:all .3s var(--ease-calm);cursor:pointer;padding:0;}
.philo .dot{background:var(--linen-deep);}
.philo .dot.on{width:28px;background:var(--accent);}
.testi .dot{background:rgba(250,246,241,0.28);}
.testi .dot.on{width:28px;background:var(--brass-soft);}

/* ---- werk filter chips ---- */
.filter-btn{font-family:var(--font-sans);font-weight:600;font-size:13px;padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink-soft);transition:all .2s var(--ease-calm);cursor:pointer;}
.filter-btn:hover{border-color:var(--accent);color:var(--accent);}
.filter-btn.on{border-color:var(--accent);background:var(--accent);color:#fff;}

/* ---- responsive layer (prototypes were desktop-only) ---- */
@media (max-width:920px){
  .hero-grid,.over-hero-grid{grid-template-columns:1fr !important;gap:40px !important;}
  .hero-grid .arch-line,.over-hero-grid .arch-line{max-width:440px;}
  .values-grid{grid-template-columns:1fr !important;}
  .values-grid > div{border-left:none !important;border-top:1px solid var(--line);}
  .values-grid > div:first-child{border-top:none;}
  .grid-3{grid-template-columns:1fr 1fr !important;}
  .vakman-grid,.workshop-grid,.contact-grid,.project-body-grid{grid-template-columns:1fr !important;gap:40px !important;}
  .steps-grid{grid-template-columns:1fr 1fr !important;}
  .footer-grid{grid-template-columns:1fr 1fr !important;}
}
@media (max-width:680px){
  .nav-links,.nav-cta{display:none !important;}
  .nav-toggle{display:inline-flex;}
  .nav-mobile{display:none;flex-direction:column;gap:4px;padding:8px 32px 22px;border-top:1px solid var(--line);background:rgba(250,246,241,0.97);}
  .nav-mobile.open{display:flex;}
  .nav-mobile a{padding:10px 0;font-size:16px;color:var(--ink-soft);font-weight:500;}
  .hero-h1{font-size:42px !important;}
  .grid-3{grid-template-columns:1fr !important;}
  .steps-grid,.mottos-grid{grid-template-columns:1fr !important;}
  .philo-quote{font-size:28px !important;}
  .testi-quote{font-size:25px !important;}
  .footer-grid{grid-template-columns:1fr !important;gap:32px !important;}
  .form-row{grid-template-columns:1fr !important;}
  section{padding:64px 0 !important;}
}