/* Thema Serge Das Billiards – nagebouwd naar de WordPress-site (Khand + Roboto, goud op donkergrijs) */
@font-face{font-family:'Khand';src:url('assets/khand-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Khand';src:url('assets/khand-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Khand';src:url('assets/khand-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Roboto';src:url('assets/roboto-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Roboto';src:url('assets/roboto-400.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  --sp-primary:#dd9343;          /* goud – knoppen, footer, accenten */
  --sp-primary-dark:#aa661d;     /* donkerder goud – menulinks */
  --sp-secondary:#3f3f3f;        /* donkergrijs – tekst en donkere secties */
  --sp-surface:#f7f8f9;
  --sp-line:#e6e8ea;
  --sp-font:'Roboto',system-ui,sans-serif;
  --sp-font-heading:'Khand',system-ui,sans-serif;
  --sp-radius:5px;
  --sp-header-h:72px;
}

body{font-family:var(--sp-font);font-weight:300;font-size:16px;line-height:1.5;color:var(--sp-secondary);background:var(--sp-surface)}
h1,h2,h3,h4,h5,h6{font-family:var(--sp-font-heading);font-weight:400;color:var(--sp-secondary);line-height:1}
h1{font-size:72px}
h2{font-size:50px}
h3{font-size:36px}
h4{font-size:26px}
h5{font-size:22px}
h6{font-size:16px;letter-spacing:1px;text-transform:uppercase;font-weight:300}
p{margin:0 0 1rem}
a{color:var(--sp-primary-dark)}
.sp-scheme-light h1,.sp-scheme-light h2,.sp-scheme-light h3,.sp-scheme-light h4,.sp-scheme-light h5,.sp-scheme-light h6,.sp-scheme-light p,.sp-scheme-light li{color:#fff}

/* knoppen – Khand, goud, licht afgerond */
.sp-btn{font-family:var(--sp-font-heading);font-weight:300;font-size:16px;line-height:1;letter-spacing:1px;padding:15px 30px;border-radius:var(--sp-radius);border:0;transition:background .2s,color .2s}
.sp-btn-primary{background:var(--sp-primary);color:#fff}
.sp-btn-primary:hover{background:var(--sp-primary-dark);color:#fff}
.sp-btn-secondary,.sp-btn-outline{background:rgba(255,255,255,.85);color:var(--sp-secondary)}
.sp-btn-secondary:hover,.sp-btn-outline:hover{background:#fff}

/* koptekst */
.site-header{position:sticky;top:var(--sp-adminbar-h,0px);z-index:100;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:var(--sp-header-h);gap:2rem}
.site-logo{flex:none;display:flex;align-items:center}
.site-logo img{height:34px;width:auto;display:block}
.header-right{display:flex;align-items:center;gap:2rem;margin-left:auto}
.site-nav .sp-menu{display:flex;gap:2.5rem;list-style:none;margin:0;padding:0}
.site-nav .sp-menu a{font-family:var(--sp-font-heading);font-weight:300;font-size:18px;letter-spacing:1px;text-transform:uppercase;color:var(--sp-primary-dark);text-decoration:none;padding:26px 0;display:block;border-bottom:3px solid transparent}
.site-nav .sp-menu a:hover{color:var(--sp-primary)}
.site-nav .sp-menu .is-active>a,.site-nav .sp-menu .current>a{border-bottom-color:var(--sp-primary)}
.header-cta{white-space:nowrap}
.menu-btn{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.menu-btn span{width:26px;height:3px;background:var(--sp-secondary);border-radius:2px}

/* binnenpagina-kop: de originele site zet de paginatitel in de eerste sectie, dus geen extra balk */
.page-hero{display:none}

/* de twee knoppen in de hero stonden in WordPress naast elkaar */
.hero-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.hero-knoppen>.sp-widget{width:100%}
.hero-knoppen>.sp-w-button{width:auto}

/* de witte kaart die op de homepage over de hero schuift */
.kaart-overlap{position:relative;z-index:2;margin-top:-90px;background:#fff;padding:3.5rem 4rem;box-shadow:0 10px 40px rgba(0,0,0,.08)}
.kaart-overlap h2{margin-top:0;text-align:center}
.kaart-overlap p{text-align:center;margin-bottom:0}

/* witte tekstkaart in de testimonial-sectie */
.kaart-wit{background:#fff;padding:2.5rem}
.sp-scheme-light .kaart-wit,.sp-scheme-light .kaart-wit *{color:var(--sp-secondary)}
.sp-scheme-light .kaart-wit a,.sp-scheme-light .kaart-wit a *{color:var(--sp-primary-dark)}
.kaart-wit img{display:inline;vertical-align:-2px}

/* contactpagina: het formulier zit in WordPress in een witte kaart over de hero */
.kaart-formulier{background:#fff;padding:3rem;margin-top:-140px;position:relative;z-index:2;box-shadow:0 10px 40px rgba(0,0,0,.08)}
.kaart-formulier .sp-heading{color:var(--sp-secondary)}
.sp-form input:not([type=checkbox]):not([type=radio]),.sp-form select,.sp-form textarea{background:#e2e8f0;border-color:transparent;border-radius:4px}
.sp-form input:not([type=checkbox]):not([type=radio]):focus,.sp-form select:focus,.sp-form textarea:focus{background:#fff;border-color:var(--sp-primary);outline:none}
.sp-social a{background:#262042;color:#fff;border-radius:4px}
.sp-social a:hover{background:var(--sp-primary)}

/* voettekst */
.site-footer{background:var(--sp-primary);color:#fff;padding:4rem 0 1.5rem;font-family:var(--sp-font)}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.footer-top{display:flex;gap:4rem;align-items:flex-start;flex-wrap:wrap}
.footer-merk{flex:1 1 380px;max-width:460px}
.footer-merk img{max-width:100%;height:auto;display:block;margin-bottom:1.25rem}
.footer-merk p{color:#fff;margin:0}
.footer-kolom h2{font-size:22px;color:#fff;margin:0 0 .75rem}
.footer-kolom .sp-menu,.footer-kolom ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.footer-onder{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:3rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.45)}
.footer-legal{display:flex;gap:1rem;flex-wrap:wrap;font-size:14px}
.footer-socials{display:flex;gap:.5rem}
.footer-socials a{width:30px;height:30px;border-radius:4px;background:#262042;color:#fff;display:flex;align-items:center;justify-content:center}
.footer-socials svg{width:15px;height:15px;fill:currentColor}

/* galerij met filterknoppen (portfolio) */
.sp-gallery-filters{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem}
.sp-gallery-filter{font-family:var(--sp-font-heading);font-weight:300;font-size:16px;letter-spacing:1px;padding:10px 26px;border-radius:var(--sp-radius);border:1px solid var(--sp-primary);background:transparent;color:var(--sp-primary-dark);cursor:pointer;transition:background .2s,color .2s}
.sp-gallery-filter:hover{background:rgba(221,147,67,.12)}
.sp-gallery-filter.is-actief{background:var(--sp-primary);color:#fff;border-color:var(--sp-primary)}
.sp-scheme-light .sp-gallery-filter{color:#fff;border-color:#fff}
.sp-scheme-light .sp-gallery-filter.is-actief{background:var(--sp-primary);border-color:var(--sp-primary)}

@media(max-width:1100px){
  h1{font-size:54px}h2{font-size:40px}
  .kaart-overlap{padding:2.5rem}
}
@media(max-width:900px){
  /* het uitgeschoven menu staat buiten beeld; zonder dit rekt het de pagina horizontaal op */
  html,body{overflow-x:hidden}
  h1{font-size:40px}h2{font-size:30px}h3{font-size:26px}
  .menu-btn{display:flex;order:3}
  .header-right{gap:1rem}
  .header-cta{display:none}
  .site-nav{position:fixed;top:calc(var(--sp-header-h) + var(--sp-adminbar-h,0px));left:0;right:0;bottom:0;background:#fff;padding:1rem;transform:translateX(100%);visibility:hidden;transition:transform .25s,visibility .25s;z-index:99;overflow-y:auto}
  .site-nav.is-open{transform:none;visibility:visible}
  .site-nav .sp-menu{flex-direction:column;gap:0}
  .site-nav .sp-menu a{padding:1rem 0;border-bottom:1px solid var(--sp-line)}
  .kaart-overlap{margin-top:-40px;padding:2rem 1.25rem}
  .kaart-formulier{margin-top:-40px;padding:1.5rem 1.25rem}
  .footer-top{gap:2rem}
  .footer-onder{flex-direction:column;align-items:flex-start}
}