/*
Theme Name: Betuwe Express Schade
Theme URI: https://betuweexpress.debuschauffeur.nl
Description: Basisthema voor het schadeportaal van Betuwe Express. Kleuren en lettertypen staan als losse instellingen bovenaan dit bestand (--kleur-... variabelen) - zodra de echte huisstijl (kleurenpalet, lettertype, logo) binnen is, hoeven alleen die regels aangepast te worden.
Author: Betuwe Express
Version: 0.2.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: betuwe-express-schade
*/

/* ==========================================================================
   HUISSTIJL-INSTELLINGEN (tijdelijke waarden - hier past de echte branding)
   ========================================================================== */
:root{
  --kleur-donker:   #12233D;  /* hoofdkleur / koptekst */
  --kleur-middel:   #2C4A6E;  /* accent / knoppen hover */
  --kleur-accent:   #C98A2C;  /* accentstreep / call-to-action */
  --kleur-achtergrond: #FAFAF7;
  --kleur-achtergrond-dim: #F1EFE8;
  --kleur-lijn:     #DAD5C8;
  --kleur-tekst:    #22201B;
  --kleur-tekst-dim:#6b6656;
  --kleur-wit:      #FFFFFF;

  --lettertype-koppen: Georgia, 'Times New Roman', serif;
  --lettertype-tekst:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   BASIS
   ========================================================================== */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--kleur-achtergrond);
  color:var(--kleur-tekst);
  font-family:var(--lettertype-tekst);
  font-size:16px;
  line-height:1.6;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--kleur-middel); }
h1,h2,h3,h4,h5,h6{ font-family:var(--lettertype-koppen); color:var(--kleur-donker); line-height:1.25; margin:0 0 .5em 0; }
.container{ max-width:1100px; margin:0 auto; padding:0 24px; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{ background:var(--kleur-wit); border-bottom:1px solid var(--kleur-lijn); position:sticky; top:0; z-index:50; }
.site-header-inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1100px; margin:0 auto; }
.site-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.site-logo img{ max-height:40px; width:auto; }
.site-logo-text{ font-family:var(--lettertype-koppen); font-weight:700; font-size:20px; color:var(--kleur-donker); }
.site-nav ul{ list-style:none; display:flex; gap:28px; margin:0; padding:0; }
.site-nav a{ color:var(--kleur-tekst); text-decoration:none; font-size:14.5px; font-weight:500; }
.site-nav a:hover{ color:var(--kleur-middel); }
.btn-schade-melden{ display:inline-block; background:var(--kleur-donker); color:#fff !important; padding:10px 20px; border-radius:7px; font-size:14px; font-weight:600; text-decoration:none !important; }
.btn-schade-melden:hover{ background:var(--kleur-middel); }
.menu-toggle{ display:none; background:none; border:none; font-size:26px; color:var(--kleur-donker); cursor:pointer; }

@media (max-width:780px){
  .site-nav{ display:none; }
  .menu-toggle{ display:block; }
}

/* ==========================================================================
   HERO / LANDINGSPAGINA
   ========================================================================== */
.hero{ background:var(--kleur-donker); color:#fff; padding:80px 24px; text-align:center; position:relative; }
.hero::after{ content:''; display:block; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--kleur-accent); }
.hero h1{ color:#fff; font-size:36px; margin-bottom:14px; }
.hero p{ color:#C9D2E0; font-size:17px; max-width:600px; margin:0 auto 32px auto; }
.hero .btn-groot{ display:inline-block; background:var(--kleur-accent); color:var(--kleur-donker); padding:14px 32px; border-radius:8px; font-weight:700; font-size:16px; text-decoration:none; }
.hero .btn-groot:hover{ opacity:.9; }

.sectie{ padding:64px 24px; }
.sectie h2{ font-size:26px; text-align:center; margin-bottom:36px; }
.kaart-rij{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:24px; max-width:1100px; margin:0 auto; }
.kaart{ background:#fff; border:1px solid var(--kleur-lijn); border-radius:12px; padding:26px; }
.kaart h3{ font-size:17px; margin-bottom:8px; }
.kaart p{ font-size:14px; color:var(--kleur-tekst-dim); margin:0; }

/* ==========================================================================
   GEWONE PAGINA'S
   ========================================================================== */
.page-content{ max-width:800px; margin:0 auto; padding:60px 24px; }
.page-content h1{ font-size:30px; margin-bottom:20px; }
.page-content-full{ width:100%; margin:0; padding:0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--kleur-donker); color:#C9D2E0; padding:36px 24px; margin-top:60px; }
.site-footer-inner{ max-width:1100px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:13px; }
.site-footer a{ color:#C9D2E0; }

/* ==========================================================================
   LOGINSCHERM VAN DE SCHADEPORTAAL-PLUGIN (zelfde huisstijl)
   ========================================================================== */
.sp-login-wrap{ min-height:60vh; display:flex; align-items:center; justify-content:center; background:var(--kleur-achtergrond); padding:60px 16px; }
.sp-login-box{ width:360px; max-width:100%; background:#fff; border:1px solid var(--kleur-lijn); border-radius:12px; padding:28px; }