/*
 * Köster theme.css
 *
 * Koppelt Gutenberg-markup aan het Köster CSS framework (koster.css).
 * Hier staat uitsluitend wat framework-klassen niet zelf kunnen afvangen:
 * core-blokmarkup, blokstijl-varianten en contentbreedte. Nieuwe styling
 * hoort in het framework; dit bestand blijft klein.
 */

/* =====================================================================
   Contentbreedte
   post-content gebruikt geen constrained layout; dit regelt breedte en
   zijruimte in één keer, inclusief brede en volle uitlijning.
   ===================================================================== */
.wp-block-post-content > :where(:not(.alignwide):not(.alignfull)) {
  max-width: var(--k-container);
  margin-inline: auto;
  padding-inline: var(--k-container-pad);
}

.wp-block-post-content > .alignwide {
  max-width: var(--k-container-wide);
  margin-inline: auto;
  padding-inline: var(--k-container-pad);
}

.wp-block-post-content > .alignfull {
  max-width: none;
  margin-inline: 0;
}

/* Post-content genest in een kolom (bijv. referentie-detail): de
   container-nabootsing hierboven is dan niet nodig, anders springt de
   tekst dubbel in en loopt hij niet gelijk met de titel ernaast. */
.wp-block-column .wp-block-post-content > :where(:not(.alignwide):not(.alignfull)) {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* =====================================================================
   Sticky header
   De template-part-wrapper vormt anders de sticky-context, waardoor
   .k-header alleen binnen de hoogte van de header-part blijft plakken
   in plaats van aan de viewport.
   ===================================================================== */
header.wp-block-template-part {
  display: contents;
}

/* =====================================================================
   Verticaal ritme binnen secties
   Blokwrappers dragen geen k-mb-*-klassen; geef ze binnen een sectie
   dezelfde ondermarge als k-mb-3 in het design. Aangrenzende marges
   vallen samen, dus fragmenten met een eigen (inline) marge blijven
   leidend.
   ===================================================================== */
.acf-innerblocks-container > [class*="wp-block-koster-"]:not(:last-child) {
  margin-bottom: 1.375rem;
}
/* Volgt er een pijl-link ("Bekijk alle ..."), dan zet die zelf de ruimte al
   (zie k-arrow-link in het framework). Anders tellen beide marges op. */
.acf-innerblocks-container > [class*="wp-block-koster-"]:has(+ p.k-arrow-link) {
  margin-bottom: 0;
}

/* =====================================================================
   Blokstijl-varianten (geregistreerd in inc/setup.php)
   ===================================================================== */

/* Knoppen */
.is-style-ghost .wp-block-button__link {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
}
.is-style-ghost .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.8);
}
.is-style-outline .wp-block-button__link {
  background: var(--k-surface);
  color: var(--k-ink);
  border: 1.5px solid var(--k-border-form);
}
.is-style-outline .wp-block-button__link:hover {
  border-color: var(--k-blue);
  color: var(--k-blue);
}

/* Sectie-groepen: zelfde banden als .k-section-varianten in het framework */
.wp-block-group.is-style-section-alt {
  background: var(--k-surface-alt);
  border-block: 1px solid #e6ecf0;
  padding-block: var(--k-space-section);
}
.wp-block-group.is-style-section-charcoal {
  background: var(--k-charcoal-grad);
  color: var(--k-on-dark-2);
  padding-block: var(--k-space-section);
}
.wp-block-group.is-style-section-navy {
  background: var(--k-navy-grad);
  color: var(--k-on-dark);
  padding-block: var(--k-space-section);
}
.wp-block-group.is-style-section-charcoal :is(h1, h2, h3, h4),
.wp-block-group.is-style-section-navy :is(h1, h2, h3, h4) {
  color: #fff;
}

/* =====================================================================
   Core navigation in de header
   Het navigation block regelt zelf de mobiele overlay; hier alleen de
   huisstijl van de links (blauwe hover met onderlijn).
   ===================================================================== */
/* Barlow Semi Condensed is een smalle letter; op 16,5px leest een hoofdmenu
   daarin krap. Vandaar 18px met een haar meer letterafstand. */
.k-header__nav {
  margin-left: auto;
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.005em;
  color: var(--k-nav);
}
/* Zelfde ruimte tussen menu-items als in het design (het core
   navigation-block heeft standaard een veel krappere gap) */
.k-header__nav .wp-block-navigation__container,
.k-header__nav ul.wp-block-navigation__container {
  gap: var(--k-space-m);
}
.k-header__nav .wp-block-navigation-item__content {
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.k-header__nav .wp-block-navigation-item__content:hover,
.k-header__nav .current-menu-item > .wp-block-navigation-item__content {
  color: var(--k-blue);
  border-bottom-color: var(--k-blue);
}
.k-header__nav .wp-block-navigation__responsive-container.is-menu-open {
  font-size: 1.1875rem;
  color: var(--k-ink);
}

/* Header-CTA: kleine knopvariant (de klasse staat op de wrapper,
   dus de maat hier op de link zelf zetten) */
.k-header__cta .wp-block-button__link {
  padding: 0.6875rem 1.375rem;
  font-size: 0.96875rem;
}

/* Tussen de nav-breakpoint en de volle containerbreedte staan zes menu-items,
   de CTA en het logo naast elkaar. Op laptopbreedtes is dat krap,
   dus wordt het geheel daar een slag compacter. */
@media (min-width: 981px) and (max-width: 1240px) {
  .k-header__inner { gap: 1rem; }
  .k-header__nav { font-size: 1.0625rem; }
  .k-header__nav .wp-block-navigation__container,
  .k-header__nav ul.wp-block-navigation__container { gap: 1.125rem; }
  .k-header__cta .wp-block-button__link {
    padding: 0.625rem 1rem;
    font-size: 0.9375rem;
  }
}

/* Mobiel: desktopmenu en CTA weg, eigen paneel neemt het over.
   !important is hier nodig omdat Gutenberg zijn layout-styles
   (display:flex per blok) na de theme-stylesheet print. */
@media (max-width: 980px) {
  .k-header__nav,
  .k-header__cta { display: none !important; }
}

/* Navigation-block in het mobiele paneel: verticale lijst in designstijl */
.k-mobile-nav .wp-block-navigation__container {
  display: block;
}
.k-mobile-nav .wp-block-navigation-item {
  display: block;
}
.k-mobile-nav .wp-block-navigation-item__content {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--k-border-soft);
  font-family: var(--k-font-head);
  font-weight: 600;
  font-size: 1.1875rem;
  color: var(--k-ink);
}
.k-mobile-nav .wp-block-navigation-item__content:hover { color: var(--k-blue); }

/* =====================================================================
   Hero via core/cover
   Cover levert de afbeelding en inner container; de gradient-overlay en
   maten komen uit de hero-tokens van het framework.
   ===================================================================== */
.wp-block-cover.k-hero {
  padding: 0;
  min-height: 0;
}
.wp-block-cover.k-hero .wp-block-cover__background {
  background: var(--k-hero-overlay);
  opacity: 1;
}
.wp-block-cover.k-hero .wp-block-cover__inner-container {
  width: 100%;
  max-width: var(--k-container);
  margin-inline: auto;
  padding-inline: var(--k-container-pad);
}

/* =====================================================================
   Query loop als kaartengrid
   post-template rendert een ul met li per bericht.
   ===================================================================== */
.wp-block-post-template.k-grid {
  list-style: none;
  padding: 0;
  margin: 0;
}
.wp-block-post-template.k-grid > li {
  display: flex;
}
.wp-block-post-template.k-grid .k-card {
  flex: 1;
}
.k-card .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.k-card__title a { color: inherit; }
.k-card__title a:hover { color: var(--k-blue); }

.wp-block-query-pagination {
  margin-top: var(--k-space-block);
  font-family: var(--k-font-head);
  font-weight: 600;
}
.wp-block-query-pagination a:hover { color: var(--k-blue); }

/* =====================================================================
   Zoekblok in de utility-balk
   ===================================================================== */
.k-utility__search .wp-block-search__input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.8125rem;
  color: #fff;
  padding: 0;
}
.k-utility__search .wp-block-search__inside-wrapper {
  border: none;
  padding: 0;
  width: 100%;
}

/* =====================================================================
   Diversen
   ===================================================================== */
ul.k-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Footerlogo: het site-logo block zet de klasse op de wrapper,
   dus maat en witruimte hier op wrapper en afbeelding regelen */
.wp-block-site-logo.k-footer__logo {
  height: auto;
  margin-bottom: var(--k-space-m);
}
.wp-block-site-logo.k-footer__logo img {
  height: 34px;
  width: auto;
}

/* Utility-linkregel: statische links + centraal beheerd telefoonnummer */
.k-utility .k-utility__links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  font-weight: 600;
}
/* De links komen uit het menublok en zijn dus een ul; de p-variant staat er nog
   voor content die de links los in een alinea zet. */
.k-utility .k-utility__links p,
.k-utility .k-utility__links ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.k-utility .k-utility__links a { color: var(--k-on-dark); }
.k-utility .k-utility__links a:hover { color: #fff; border-bottom-color: var(--k-green-bright); }
.k-utility .k-utility__links a.k-utility__phone { color: #fff; font-weight: 700; }