/*
Theme Name: Vespa Club Brugge
Theme URI: https://www.vespa-club-brugge.be/
Description: Divi child theme voor Vespa Club Brugge.
Author: Vespa Club Brugge
Template: Divi
Version: 1.0.1
Text Domain: vespa-club-brugge
*/

:root {
  --vcb-red: #a61f2b;
  --vcb-red-dark: #74141d;
  --vcb-gold: #f1bc42;
  --vcb-navy: #172a4a;
  --vcb-ink: #17191f;
  --vcb-muted: #646a73;
  --vcb-cream: #fbf7ef;
  --vcb-paper: #ffffff;
  --vcb-line: rgba(23, 25, 31, 0.12);
  --vcb-shadow: 0 18px 50px rgba(23, 25, 31, 0.12);
  --vcb-radius: 20px;
}

body {
  color: var(--vcb-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.75;
}

h1,
h2,
h3,
h4,
h5,
h6,
.et_pb_button,
#top-menu a {
  font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(3.1rem, 8vw, 7.2rem); line-height: 0.94; }
h2 { font-size: clamp(2.3rem, 4vw, 4rem); line-height: 1.04; }
h3 { font-size: clamp(1.45rem, 2vw, 2rem); line-height: 1.18; }

a { color: var(--vcb-red); }
a:hover { color: var(--vcb-red-dark); }

#main-header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--vcb-line);
  box-shadow: none;
  backdrop-filter: blur(14px);
}

#main-header.et-fixed-header { box-shadow: 0 8px 28px rgba(23, 25, 31, 0.08) !important; }
#logo { max-height: 72%; }
#top-menu li { padding-right: 18px; }
#top-menu a { color: var(--vcb-ink); font-size: 15px; letter-spacing: 0.025em; text-transform: uppercase; }
#top-menu li.current-menu-item > a,
#top-menu li.current_page_item > a,
#top-menu a:hover { color: var(--vcb-red) !important; opacity: 1; }

.mobile_menu_bar::before { color: var(--vcb-red); }
.et_mobile_menu { border-color: var(--vcb-red); }

.vcb-section { padding: clamp(72px, 9vw, 128px) 0 !important; }
.vcb-section-tight { padding: clamp(48px, 6vw, 84px) 0 !important; }
.vcb-cream { background: var(--vcb-cream); }
.vcb-dark { background: var(--vcb-ink); color: #fff; }
.vcb-dark h1,
.vcb-dark h2,
.vcb-dark h3,
.vcb-dark h4 { color: #fff; }

.vcb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--vcb-red);
  font-size: 0.77rem;
  font-weight: 850;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.vcb-eyebrow::before {
  width: 32px;
  height: 3px;
  content: "";
  background: var(--vcb-gold);
  border-radius: 4px;
}

.vcb-dark .vcb-eyebrow { color: var(--vcb-gold); }
.vcb-lead { max-width: 780px; color: var(--vcb-muted); font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
.vcb-dark .vcb-lead { color: rgba(255,255,255,.76); }

.vcb-hero {
  display: flex;
  min-height: min(820px, 86vh);
  align-items: flex-end;
  padding: 130px 0 80px !important;
  background-position: center 58%;
}

.vcb-hero::before,
.vcb-page-hero::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(11, 16, 25, .89) 0%, rgba(11, 16, 25, .58) 48%, rgba(11, 16, 25, .17) 100%),
              linear-gradient(0deg, rgba(11, 16, 25, .66) 0%, transparent 46%);
}

.vcb-hero .et_pb_row,
.vcb-page-hero .et_pb_row { z-index: 2; }
.vcb-hero h1 { max-width: 890px; margin-bottom: 24px; color: #fff; text-shadow: 0 8px 28px rgba(0,0,0,.28); }
.vcb-hero p { max-width: 710px; color: rgba(255,255,255,.9); font-size: clamp(1.08rem, 1.8vw, 1.35rem); }
.vcb-hero .vcb-eyebrow { color: var(--vcb-gold); }

.vcb-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.vcb-btn,
.et_pb_button.vcb-btn {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 13px 24px !important;
  border: 2px solid var(--vcb-red) !important;
  border-radius: 999px !important;
  background: var(--vcb-red) !important;
  color: #fff !important;
  font-size: .9rem !important;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.25 !important;
  text-transform: uppercase;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.vcb-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(166,31,43,.25); }
.vcb-btn-outline { border-color: rgba(255,255,255,.75) !important; background: transparent !important; }
.vcb-btn-light { border-color: #fff !important; background: #fff !important; color: var(--vcb-ink) !important; }

.vcb-page-hero {
  min-height: 420px;
  padding: 150px 0 76px !important;
  background-position: center;
  background-size: cover;
}
.vcb-page-hero h1 { margin: 0; color: #fff; font-size: clamp(3.2rem, 7vw, 6rem); }
.vcb-page-hero p { max-width: 700px; color: rgba(255,255,255,.85); font-size: 1.2rem; }

.vcb-grid { display: grid; gap: 24px; }
.vcb-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vcb-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vcb-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.vcb-card {
  height: 100%;
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--vcb-line);
  border-radius: var(--vcb-radius);
  background: var(--vcb-paper);
  box-shadow: 0 10px 32px rgba(23,25,31,.06);
}
.vcb-card h3 { margin-bottom: 12px; }
.vcb-card p:last-child { padding-bottom: 0; }
.vcb-number { display:block; margin-bottom: 14px; color: var(--vcb-red); font-size: 2.3rem; font-weight: 900; line-height: 1; }

.vcb-split { display: grid; align-items: center; gap: clamp(38px, 7vw, 92px); grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); }
.vcb-frame { overflow: hidden; border-radius: 28px; box-shadow: var(--vcb-shadow); }
.vcb-frame img { display: block; width: 100%; }
.vcb-logo-strip { display: grid; align-items:center; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vcb-logo-strip img { width: 100%; max-height: 105px; object-fit: contain; }

.vcb-calendar-card {
  overflow: hidden;
  border-radius: 24px;
  background: var(--vcb-navy);
  box-shadow: var(--vcb-shadow);
}
.vcb-calendar-card img { display:block; width:100%; }
.vcb-calendar-card-content { padding: 24px 28px 28px; color:#fff; }
.vcb-calendar-card-content h3 { color:#fff; }

.vcb-stat-grid { display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr)); margin:28px 0; }
.vcb-stat { padding: 22px; border-radius:16px; background:rgba(255,255,255,.08); }
.vcb-stat strong { display:block; color:var(--vcb-gold); font-size:1.65rem; }

.vcb-media-grid,
.vcb-shop-grid,
.vcb-event-grid { display:grid; gap:22px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.vcb-media-card,
.vcb-shop-grid figure,
.vcb-event-grid figure { overflow:hidden; margin:0; border:1px solid var(--vcb-line); border-radius:18px; background:#fff; box-shadow:0 10px 30px rgba(23,25,31,.07); }
.vcb-media-card img { width:100%; aspect-ratio: 4/3; object-fit:cover; }
.vcb-media-card div { padding:18px 20px 22px; }
.vcb-media-card h3 { font-size:1.22rem; }

.vcb-shop-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.vcb-shop-grid figure { display:flex; align-items:center; justify-content:center; min-height:290px; padding:18px; }
.vcb-shop-grid figure:first-child { grid-column:1 / -1; min-height:auto; }
.vcb-shop-grid img { display:block; width:100%; height:auto; }

.vcb-event-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.vcb-event-grid figure { display:flex; flex-direction:column; }
.vcb-event-grid img { width:100%; aspect-ratio:3/4; object-fit:contain; background:#f4f2ed; }
.vcb-event-grid figcaption { padding:18px 20px 22px; font-weight:800; }

.vcb-albums { display:grid; gap:14px; }
.vcb-albums details { border:1px solid var(--vcb-line); border-radius:16px; background:#fff; }
.vcb-albums summary { cursor:pointer; padding:18px 22px; color:var(--vcb-ink); font-size:1.15rem; font-weight:850; list-style:none; }
.vcb-albums summary::-webkit-details-marker { display:none; }
.vcb-albums summary::after { float:right; content:"+"; color:var(--vcb-red); font-size:1.5rem; }
.vcb-albums details[open] summary::after { content:"−"; }
.vcb-album-links { display:grid; gap:10px; padding:0 22px 22px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.vcb-album-links a { display:block; padding:10px 14px; border-radius:10px; background:var(--vcb-cream); color:var(--vcb-ink); font-weight:650; }
.vcb-album-links a:hover { background:#f1e8d8; color:var(--vcb-red); }

.vcb-prose { max-width:860px; margin-inline:auto; }
.vcb-prose h2,
.vcb-prose h3 { margin-top:1.4em; }
.vcb-prose p { margin-bottom:1em; padding-bottom:0; }
.vcb-prose img { max-width:100%; height:auto; margin:20px auto; border-radius:14px; }
.vcb-prose blockquote { margin:28px 0; padding:22px 26px; border-left:5px solid var(--vcb-gold); background:var(--vcb-cream); }

.vcb-callout { padding: clamp(28px, 5vw, 56px); border-radius:28px; background:var(--vcb-red); color:#fff; }
.vcb-callout h2,
.vcb-callout h3 { color:#fff; }
.vcb-callout a:not(.vcb-btn) { color:#fff; text-decoration:underline; }

.vcb-form { display:grid; gap:20px; }
.vcb-form-grid { display:grid; gap:18px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.vcb-form label { display:block; color:var(--vcb-ink); font-weight:750; }
.vcb-form .vcb-help { display:block; color:var(--vcb-muted); font-size:.88rem; font-weight:400; }
.vcb-form input:not([type="checkbox"]):not([type="radio"]),
.vcb-form select,
.vcb-form textarea {
  width:100%;
  margin-top:7px;
  padding:13px 15px;
  border:1px solid #cfd2d8;
  border-radius:10px;
  background:#fff;
  color:var(--vcb-ink);
  font:inherit;
}
.vcb-form input:focus,
.vcb-form select:focus,
.vcb-form textarea:focus { outline:3px solid rgba(166,31,43,.13); border-color:var(--vcb-red); }
.vcb-form fieldset { margin:0; padding:22px; border:1px solid var(--vcb-line); border-radius:14px; }
.vcb-form legend { padding:0 8px; color:var(--vcb-ink); font-weight:850; }
.vcb-choice { display:flex !important; align-items:flex-start; gap:10px; font-weight:500 !important; }
.vcb-choice input { margin-top:7px; }
.vcb-hp { position:absolute !important; left:-10000px !important; }
.vcb-notice { margin-bottom:24px; padding:16px 18px; border-radius:12px; background:#e9f7ef; color:#17603a; font-weight:700; }
.vcb-notice-error { background:#fff0f0; color:#8b1c24; }

.vcb-contact-list { list-style:none !important; padding:0 !important; }
.vcb-contact-list li { margin:0 0 10px; }
.vcb-contact-list strong { display:inline-block; min-width:90px; }

/* De standaard Divi-footerwidgets en social bar worden niet gebruikt. */
#main-footer { display: none !important; }

@media (max-width: 980px) {
  .vcb-grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vcb-grid-3,
  .vcb-media-grid,
  .vcb-shop-grid,
  .vcb-event-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vcb-split { grid-template-columns:1fr; }
  .vcb-hero { min-height:720px; }
}

@media (max-width: 680px) {
  body { font-size:16px; }
  .vcb-grid-2,
  .vcb-grid-3,
  .vcb-grid-4,
  .vcb-media-grid,
  .vcb-shop-grid,
  .vcb-event-grid,
  .vcb-form-grid,
  .vcb-logo-strip,
  .vcb-stat-grid,
  .vcb-album-links { grid-template-columns:1fr; }
  .vcb-hero { min-height:680px; padding-top:110px !important; }
  .vcb-page-hero { min-height:360px; }
  .vcb-actions { align-items:stretch; flex-direction:column; }
  .vcb-btn { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}