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

:root{
  --bg:#f2ede4;
  --cream:#f2ede4;
  --card:#f8f4eb;
  --surface:#f7f2e9;
  --border:rgba(92,80,67,.18);
  --text:#2f2923;
  --muted:#5a5248;
  --muted2:#6a6158;
  --danger:#b95b54;
  --ok:#3f6a47;
  --mint:#dfe9d7;
  --sky:#e4e9df;
  --sand:#dac8b2;
  --primary:#667a57;
  --primary-dark:#556648;
  --shadow:0 10px 24px rgba(42,35,28,.08);
  --shadow-hover:0 16px 28px rgba(42,35,28,.14);
  --radius:18px;
}

*{box-sizing:border-box}

html,body{
  background:var(--bg);
  color:var(--text);
}

body{
  margin:0;
  font-family:"Manrope", "Avenir Next", "Segoe UI", sans-serif;
  line-height:1.6;
  background-image:none !important;
}

.container{width:min(1140px,calc(100% - 48px)) !important}

h1,h2,h3,
.hero h1,
.lead h2,
.tab-title,
.modal-title,
.stat-value{
  font-family:"Cormorant Garamond", Georgia, serif !important;
  color:var(--text);
  letter-spacing:0;
  line-height:1.05;
}

h1{font-size:clamp(1.9rem,3.4vw,2.9rem) !important}
h2{font-size:clamp(2rem,3.8vw,3.2rem) !important}

p,li,label,small,input,select,textarea,button,a{
  font-family:"Manrope", "Avenir Next", "Segoe UI", sans-serif;
}

a{color:#5d7551}
a:hover{color:#4c6143}

header,main,section,.section,.section-alt,.cta-band,
.login-card,.card,.panel,.stat,.table-wrap,.modal-card,.detail-box,.no-access,.form-card,.photo-card{
  background-image:none !important;
}

.section-alt,.cta-band{background:#eee7dc !important}

.card,
.login-card,
.panel,
.stat,
.no-access,
.form-card,
.table-wrap,
.modal-card,
.detail-box,
.photo-card,
.step{
  background:var(--card) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow) !important;
}

.check{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.hero{
  min-height:unset !important;
  color:var(--text) !important;
  padding:48px 0 32px !important;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

.hero .container{
  display:grid;
  grid-template-columns:minmax(360px,1fr) minmax(280px,520px);
  align-items:center;
  gap:48px;
}

.hero .container::after{
  content:"";
  display:block;
  width:100%;
  aspect-ratio:4/5;
  border-radius:22px;
  background:url('paard-met-trainer-optimized.jpg') center/cover no-repeat;
  border:1px solid rgba(78,67,56,.18);
  box-shadow:var(--shadow);
}

.hero-copy{max-width:680px !important}
.hero p{color:var(--muted) !important;font-size:1.1rem;max-width:48ch}
.hero-top{top:22px !important;right:26px !important}

.btn,
.btn-primary,
.btn-join,
.chip,
button,
input[type="submit"],
input[type="button"],
a.btn,
a.button,
button[type="submit"]{
  border-color:transparent !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark)) !important;
  color:#fff !important;
  font-family:"Manrope",sans-serif !important;
  font-weight:700 !important;
  box-shadow:none;
}

.btn::before,
.btn-primary::before,
.btn-join::before,
.chip::before,
button::before,
a.btn::before,
a.button::before{
  background:linear-gradient(135deg,#748766,#5f7053) !important;
}

.home-btn,
.login-btn{
  border-radius:999px !important;
  border:1px solid rgba(71,65,59,.22) !important;
  background:#f6f1e7 !important;
  color:#4a433b !important;
}

.home-btn::before,
.login-btn::before{background:#ebe3d6 !important}

input,select,textarea{
  border:1px solid rgba(125,113,98,.35) !important;
  background:#fcfaf6 !important;
  border-radius:12px !important;
  color:var(--text);
}

input:focus,select:focus,textarea:focus{
  border-color:#8f9f80 !important;
  box-shadow:0 0 0 4px rgba(142,158,129,.18) !important;
}

.flash,.notice,.alert{
  border:1px solid rgba(131,121,108,.28) !important;
  border-radius:12px !important;
}

/* Compactere provinciebalken in aanmelden dropdown */
.dropdown-menu .dropdown-item{
  width:calc(100% - 12px) !important;
  margin:3px 6px !important;
  padding:8px 12px !important;
  min-height:0 !important;
  font-size:.92rem !important;
}

@media (max-width:980px){
  .container{width:min(1140px,calc(100% - 28px)) !important}
  .hero .container{grid-template-columns:1fr;gap:24px}
  .hero .container::after{max-width:560px;justify-self:center}
}