/* Griffoenen: Bootstrap 5.3 variabelen + eigen componenten */
:root{
  --gr-navy:#0c2340;--gr-ball:#f5c542;--gr-surface:#fff;--gr-head:'Bricolage Grotesque','Trebuchet MS',sans-serif;
  --bs-primary:#1d5fc4;--bs-primary-rgb:29,95,196;
  --bs-link-color:#1d5fc4;--bs-link-color-rgb:29,95,196;--bs-link-hover-color:#174d9f;--bs-link-hover-color-rgb:23,77,159;
  --bs-body-bg:#f4f8fc;--bs-body-bg-rgb:244,248,252;--bs-body-color:#0c2340;--bs-body-color-rgb:12,35,64;
  --bs-secondary-color:#4a5f7a;--bs-secondary-color-rgb:74,95,122;--bs-border-color:#d3dfec;
  --bs-body-font-family:'Figtree','Segoe UI',Arial,sans-serif;--bs-body-font-size:1.0625rem;
}
[data-bs-theme=dark]{
  --gr-navy:#07111f;--gr-surface:#112440;
  --bs-primary:#6aa3f5;--bs-primary-rgb:106,163,245;--bs-link-color:#6aa3f5;--bs-link-color-rgb:106,163,245;--bs-link-hover-color:#9cc2fa;--bs-link-hover-color-rgb:156,194,250;
  --bs-body-bg:#0a1626;--bs-body-bg-rgb:10,22,38;--bs-body-color:#eaf1fa;--bs-body-color-rgb:234,241,250;
  --bs-secondary-color:#9bb0ca;--bs-secondary-color-rgb:155,176,202;--bs-border-color:#223a5c;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.display-1,.display-2,.display-3,.display-4,.display-5,.display-6{font-family:var(--gr-head);letter-spacing:-.02em}
:focus-visible{outline:3px solid var(--gr-ball)!important;outline-offset:3px}

/* Hulpklassen */
.bg-navy{background:var(--gr-navy)!important}
.bg-ball{background:var(--gr-ball)!important;color:#0c2340!important}
.bg-surface{background:var(--gr-surface)!important}
.text-ball{color:var(--gr-ball)!important}
.border-ball{border-color:var(--gr-ball)!important}
.gr-dashed{border-style:dashed!important}
.card{--bs-card-bg:var(--gr-surface);--bs-card-border-color:var(--bs-border-color)}
.btn-ball{--bs-btn-color:#0c2340;--bs-btn-bg:var(--gr-ball);--bs-btn-border-color:var(--gr-ball);--bs-btn-hover-color:#0c2340;--bs-btn-hover-bg:#e6b82f;--bs-btn-hover-border-color:#e6b82f;--bs-btn-active-color:#0c2340;--bs-btn-active-bg:#d9aa22;--bs-btn-active-border-color:#d9aa22;--bs-btn-focus-shadow-rgb:245,197,66;font-weight:600}
.btn{--bs-btn-padding-x:1.4rem;--bs-btn-padding-y:.8rem;--bs-btn-border-radius:.6rem}

/* Navbar */
.navbar-brand{font-family:var(--gr-head);font-weight:800}
.gr-mark{width:2.8rem;height:2.8rem;border-radius:50%;background:#f4f8fc;display:inline-flex;align-items:center;justify-content:center;flex:none}
.gr-mark img{height:2rem;width:auto}
.navbar .nav-link{font-weight:600;border-radius:99px;padding-inline:.8rem!important}
.navbar .nav-link.active,.navbar .nav-link:hover{background:rgba(255,255,255,.14)}
.navbar .btn-ball{padding:.45rem 1rem;border-radius:99px}
@media (min-width:992px){.navbar .dropdown:hover>.dropdown-menu{display:block;margin-top:0}}
.dropdown-menu{--bs-dropdown-border-radius:.8rem;box-shadow:0 14px 34px -10px rgba(0,0,0,.45)}

/* Titelbalk */
.gr-thead h1{font-size:clamp(2.6rem,8vw,5.5rem);font-weight:800;letter-spacing:-.03em}
.gr-thead .breadcrumb{--bs-breadcrumb-divider-color:#b9cde6;--bs-breadcrumb-item-active-color:#b9cde6}
.gr-thead .breadcrumb a{color:#b9cde6;text-decoration:none}.gr-thead .breadcrumb a:hover{text-decoration:underline}

/* Hero met Bootstrap-carousel */
.gr-hero{min-height:32rem;display:flex;align-items:center}
.gr-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,35,64,.92) 20%,rgba(12,35,64,.45))}
.gr-hero h1{font-size:clamp(3.4rem,12vw,9rem);font-weight:800;letter-spacing:-.04em;line-height:1;max-width:9ch}
.gr-hero h1 span{display:block;color:var(--gr-ball)}

/* Ons dna */
.gr-dna h3{min-width:7.5rem}

/* Wedstrijden */
.gr-match{border-left-width:.4rem!important}
.gr-match .gr-time{font-family:var(--gr-head);font-weight:800;font-size:1.2rem}
.gr-day{font-family:var(--gr-head);font-weight:800}

/* Ploegen en bestuur */
.gr-team{transition:transform .2s}.gr-team:hover{transform:translateY(-4px)}
.gr-team-img{background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:.8rem}
.gr-team-img span{background:rgba(12,35,64,.75);color:#fff;font-size:.9rem;padding:.25rem .7rem;border-radius:99px}
.gr-ph{background:linear-gradient(135deg,#1d5fc4,#0c2340);display:flex;align-items:flex-end;padding:1.25rem;color:#fff}
.gr-ph span{background:rgba(12,35,64,.78);padding:.35rem .8rem;border-radius:99px;font-size:.92rem}
.gr-photo{margin-top:-1.5rem;max-width:900px}
.gr-photo figcaption{position:absolute;left:1rem;bottom:1rem;background:rgba(12,35,64,.78);color:#fff;padding:.35rem .8rem;border-radius:99px;font-size:.92rem}
.gr-facts dt{font-size:.85rem;color:var(--bs-secondary-color);text-transform:uppercase;letter-spacing:.06em;font-weight:400}
.gr-facts dd{font-family:var(--gr-head);font-weight:800;font-size:1.2rem}
.gr-avatar{width:3.2rem;height:3.2rem;flex:none;background:var(--gr-navy);color:var(--gr-ball);font-family:var(--gr-head);font-weight:800}
.table tr.gr-me>*{background-color:rgba(245,197,66,.25);font-weight:600}

/* Sponsors */
.gr-tier h3::before{content:"";display:inline-block;width:.9rem;height:.9rem;border-radius:50%;background:var(--c)}
.gr-logo{width:210px;height:130px;color:#0c2340;font-family:var(--gr-head);font-weight:800;font-size:1.4rem;line-height:1.1;text-align:center}
.gr-logo img{max-width:100%;max-height:100%;object-fit:contain}
.gr-logo:hover{border-color:var(--bs-primary)!important}

/* Tekstinhoud uit de editor */
.gr-entry>*+*{margin-top:1.1rem}
.gr-entry h2{margin-top:2.2rem}.gr-entry h3{margin-top:1.6rem}
.gr-entry img{max-width:100%;height:auto;border-radius:.8rem}
.gr-entry .wp-block-button__link{display:inline-block;padding:.8rem 1.4rem;border-radius:.6rem;font-weight:600;text-decoration:none;background:var(--gr-ball);color:#0c2340}

/* Formulier en footer */
.gr-hp{position:absolute;left:-9999px}
.gr-footer a{color:#d6e3f3;text-decoration:none}.gr-footer a:hover{text-decoration:underline}
.gr-footer h3{color:var(--gr-ball);font-size:1.05rem}
.gr-footer li{margin:.3rem 0}
.gr-legal{border-top:1px solid rgba(255,255,255,.18);color:#9bb0ca;font-size:.88rem}
@media (prefers-reduced-motion:reduce){.gr-team:hover{transform:none}}
.bg-blue{background:#1d5fc4!important}

/* Fotoslider (eigen, fade) */
.gr-slides{position:absolute;inset:0}
.gr-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .9s}
.gr-slide.on{opacity:1}
.gr-ctrl{position:absolute;right:1.25rem;bottom:1.25rem;z-index:3;color:#fff;font-size:.9rem}
.gr-arr{width:2.4rem;height:2.4rem;padding:0;border:0;background:rgba(255,255,255,.9);color:#0c2340;font-size:1.3rem;line-height:1}
.gr-arr:hover{background:#fff;color:#0c2340}
.gr-dots button{width:.75rem;height:.75rem;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.45)}
.gr-dots button[aria-current=true]{background:var(--gr-ball)}
@media (prefers-reduced-motion:reduce){.gr-slide{transition:none}}