/* ===== CLAIM.CAFE COMPONENTS =====
   Gedeelde stijlen voor nav, footer en knoppen.
   Geladen door alle publieke pagina's via <link rel="stylesheet" href="components.css">.
   Wijzigingen hier gelden direct voor de hele site.
*/

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:.9rem 2rem;display:flex;align-items:center;justify-content:space-between;background:rgba(254,250,243,.93);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);}
.nav-logo{font-family:'Jost',sans-serif;font-weight:700;font-size:1.1rem;color:var(--espresso);display:flex;align-items:center;gap:.4rem;}
.nav-links{display:flex;list-style:none;gap:1.8rem;margin:0;padding:0;}
.nav-links a{text-decoration:none;font-size:.9rem;font-weight:500;color:var(--coffee);transition:color .2s;}
.nav-links a:hover{color:var(--caramel);}
.nav-cta{display:flex;align-items:center;gap:.8rem;}
.mob-menu-btn{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;border-radius:8px;border:none;background:transparent;}
.mob-menu-btn span{display:block;width:22px;height:2px;background:var(--espresso);border-radius:2px;transition:all .3s;}
.mob-only{display:none;}
#mob-toggle:checked ~ .nav-links{display:flex !important;flex-direction:column;position:fixed;top:58px;left:0;right:0;background:white;border-bottom:2px solid var(--border);padding:16px 0;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:99;}
#mob-toggle:checked ~ .nav-links .mob-only{display:block;}
#mob-toggle:checked ~ .nav-links a{padding:12px 24px;font-size:1rem;}
#mob-toggle:checked + ul + .nav-cta{display:none;}
#mob-toggle:checked ~ .mob-menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg);}
#mob-toggle:checked ~ .mob-menu-btn span:nth-child(2){opacity:0;}
#mob-toggle:checked ~ .mob-menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
[data-theme="dark"] #mob-toggle:checked ~ .nav-links{background:#2a1e16;}
@media(max-width:768px){
  .mob-menu-btn{display:flex;}
  .nav-links{display:none;}
  .nav-cta{display:none;}
}
@media(max-width:900px){
  .nav-links{gap:1rem;}
  .nav-links a{font-size:.82rem;}
}

/* ── KNOPPEN ── */
.btn-ghost{padding:.5rem 1.2rem;border-radius:50px;border:1.5px solid var(--border);background:transparent;font-family:'DM Sans',sans-serif;font-size:.88rem;font-weight:500;color:var(--coffee);cursor:pointer;transition:all .2s;text-decoration:none;display:inline-block;}
.btn-ghost:hover{border-color:var(--caramel);color:var(--caramel);}
.btn-primary,.btn-nav{padding:.5rem 1.4rem;border-radius:50px;border:none;background:var(--caramel);color:white;font-family:'DM Sans',sans-serif;font-size:.88rem;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none;display:inline-block;}
.btn-primary:hover,.btn-nav:hover{background:var(--espresso);}

/* ── FOOTER ── */
footer{background:var(--espresso);color:rgba(255,255,255,.6);padding:3rem 2rem 1.5rem;margin-top:4rem;}
.footer-inner{max-width:1200px;margin:0 auto;}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:1.5rem;}
.footer-brand{font-family:'Jost',sans-serif;font-size:1.2rem;font-weight:700;color:var(--latte);margin-bottom:.7rem;display:flex;align-items:center;gap:.4rem;}
.footer-desc{font-size:.85rem;line-height:1.7;font-weight:300;}
.footer-col-title{font-size:.78rem;font-weight:600;color:white;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.9rem;}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:.5rem;}
.footer-col a{font-size:.85rem;color:rgba(255,255,255,.45);text-decoration:none;transition:color .2s;}
.footer-col a:hover{color:var(--latte);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;}
.footer-bottom p{font-size:.8rem;}
.footer-links{display:flex;gap:1.5rem;}
.footer-links a{font-size:.8rem;color:rgba(255,255,255,.4);text-decoration:none;transition:color .2s;}
.footer-links a:hover{color:var(--latte);}
@media(max-width:768px){
  .footer-top{grid-template-columns:1fr 1fr;gap:1.5rem;}
  .footer-bottom{flex-direction:column;text-align:center;}
}
@media(max-width:480px){
  .footer-top{grid-template-columns:1fr;}
}