/* ═══════════════════════════════════════════════════════════════
   HARBOR51.COM - GEDEELDE TOKENS, UTILITIES EN RESETS
   Sitewide geladen: paginatitel/afstanden, huisstijl-variabelen en
   -knoppen, en de algemene resets.
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   PAGINATITEL EN AFSTANDEN
══════════════════════════════════════════════ */
h1.entry-title, .entry-header .entry-title, .page-header,
.entry-header { display: none !important; }

/* Astra zet hier drie lagen witruimte boven de eerste sectie: #content met een
   ID-selector, article met padding, en .content-area met 60px marge op desktop.
   Alle drie uit, zodat een sectie over de volle breedte tegen de header aansluit. */
body #content.site-content { padding-top: 0 !important; padding-bottom: 0 !important; }
.site-main article.page, .site-main article.post, .site-main .ast-article-single { padding: 0 !important; }
.site-content .content-area, #primary.content-area { margin-top: 0 !important; margin-bottom: 0 !important; }
.site-content, #content, .content-area, .entry-content, .site-main, #main {
  padding-bottom: 0 !important; margin-bottom: 0 !important;
}

/* ══════════════════════════════════════════════
   HUISSTIJL, GEDEELD MET SHOP.HARBOR51.COM
══════════════════════════════════════════════ */
:root {
  --h51-blue: #4192d3;
  --h51-blue-d: #2c7ab7;
  --h51-deep: #0b1221;
  --h51-fg1: #0f172a;
  --h51-fg2: #475569;
  --h51-fg3: #64748b;
  --h51-muted: #94a3b8;
  --h51-border: #e2e8f0;
  --h51-bg: #f8fafc;
  --h51-groen: #22c55e;
}

/* Knoppen die je in Elementor of in een HTML-blok kunt gebruiken */
.h51-knop {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--h51-blue); color: #fff !important;
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 16px 28px; border-radius: 9999px;
  text-decoration: none !important; border: 0;
  box-shadow: 0 8px 24px rgba(65,146,211,.25);
  transition: background .15s;
}
.h51-knop:hover { background: var(--h51-blue-d); }
.h51-knop-licht {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; color: var(--h51-fg1) !important;
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 15px 28px; border-radius: 9999px;
  text-decoration: none !important; border: 1.5px solid var(--h51-border);
  transition: border-color .15s;
}
.h51-knop-licht:hover { border-color: var(--h51-blue); }

/* Volle breedte losbreken uit de contentkolom. Zonder 100vw, want dat rekent
   de scrollbalk mee en geeft horizontaal scrollen. */
.h51-vol {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: auto !important; max-width: none !important;
}

/* ══════════════════════════════════════════════
   ALGEMEEN
══════════════════════════════════════════════ */
html, body { margin: 0 !important; padding: 0 !important; overflow-x: hidden; scrollbar-gutter: stable; }
html { scroll-behavior: smooth; }
body .footer-wrapper, body footer, body .page-wrapper, body #wrapper, body #main {
  margin-bottom: 0 !important; padding-bottom: 0 !important;
}