/*
Theme Name: HSV Hardegarijp
Theme URI: https://hsv-hardegarijp.nl
Author: Richard van der Meer
Author URI: https://richardvandermeer.nl
Description: Op maat gebouwd thema voor Gymnastiekvereniging HSV Hardegarijp.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: All Rights Reserved
Text Domain: hsv-hardegarijp
*/

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  --paper: #faf8f4;
  --paper-raised: #ffffff;
  --ink: #1c2740;
  --ink-soft: #4d5773;
  --muted: #7a8299;
  --line: #e2dfd6;
  --line-strong: #cfcabb;
  --accent: #cf3320;
  --accent-dark: #a8280f;
  --accent-ink: #ffffff;
  --accent-soft: #fbe6e0;
  --navy: #1c2740;
  --navy-soft: #eef0f5;
  --shadow: 0 1px 2px rgba(28,39,64,0.06), 0 8px 24px -12px rgba(28,39,64,0.16);
  --radius: 10px;
  --content-width: 1120px;
  --measure: 68ch;
  --font-display: 'Fraunces', Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; }
a:hover { color: var(--accent-dark); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  text-wrap: balance;
  margin: 0 0 0.5em;
}
p { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.3em; }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}
.screen-reader-text:focus {
  position: fixed !important;
  top: 8px; left: 8px;
  width: auto; height: auto;
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  z-index: 10000;
  border-radius: 6px;
}

.wrap {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Vertical rhythm for stacked homepage-style sections — add alongside
   .wrap (regular section) or on its own (full-bleed coloured band,
   which already gets 0 horizontal padding from .entry-content). */
.hsv-section-pad { padding-top: 64px; padding-bottom: 64px; }
.hsv-section-pad-tight { padding-top: 48px; padding-bottom: 48px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.3;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-solid { background: var(--accent); color: var(--accent-ink); }
.btn-solid:hover { background: var(--accent-dark); color: var(--accent-ink); }
.btn-outline { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn-outline:hover { border-color: var(--ink); color: var(--ink); }
.btn-outline-light { border-color: rgba(255,255,255,0.55); color: #fff; }
.btn-outline-light:hover { border-color: #fff; color: #fff; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: relative;
  z-index: 50;
  isolation: isolate;
  background: var(--paper-raised);
  border-bottom: 1px solid var(--line);
}
.site-topbar {
  background: var(--navy);
  color: #fff;
}
.site-topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 24px;
}
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.topbar-brand a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  min-width: 0;
}
.topbar-brand img.custom-logo {
  display: block;
  max-height: 40px;
  width: auto;
  border-radius: 6px;
  background: #fff;
  padding: 3px;
}
.topbar-brand .site-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}
.topbar-social { display: flex; gap: 8px; }
.topbar-social a {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: var(--navy);
  text-decoration: none;
}
.topbar-social a:hover { background: var(--accent); color: #fff; }
.topbar-social svg { width: 14px; height: 14px; fill: currentColor; }
.topbar-shop-btn {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 8px 16px;
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
}
.topbar-shop-btn:hover { background: var(--accent-dark); color: #fff; }

.primary-nav-wrap {
  border-top: 1px solid var(--line);
  position: relative;
}
.nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 14px 24px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  width: 100%;
}
.nav-toggle .bar { width: 20px; height: 2px; background: var(--ink); position: relative; display: inline-block; }
.nav-toggle .bar::before, .nav-toggle .bar::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink);
}
.nav-toggle .bar::before { top: -6px; }
.nav-toggle .bar::after { top: 6px; }

.primary-menu, .primary-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-menu {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.primary-menu > li {
  position: relative;
}
.primary-menu > li > a {
  display: block;
  padding: 14px 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current-menu-ancestor > a { color: var(--accent); }

.primary-menu .sub-menu {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  min-width: 240px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 0 0 10px 10px;
  box-shadow: var(--shadow);
  padding: 8px 0;
  z-index: 40;
}
.primary-menu li.menu-item-has-children:hover > .sub-menu,
.primary-menu li.menu-item-has-children:focus-within > .sub-menu {
  display: block;
}
.primary-menu .sub-menu a {
  display: block;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
  text-decoration: none;
}
.primary-menu .sub-menu a:hover { color: var(--accent); background: var(--navy-soft); }
.primary-menu li.menu-item-has-children > a::after {
  content: "▾";
  margin-left: 5px;
  font-size: 9px;
  vertical-align: middle;
}

/* Third level: a flyout to the right instead of stacking further down */
.primary-menu .sub-menu .sub-menu {
  top: -9px;
  left: 100%;
}
.primary-menu .sub-menu li.menu-item-has-children > a::after {
  content: "▸";
}

/* Non-interactive helper items inside a dropdown: a thin rule and a small
   section label, used to group a long submenu into readable chunks. */
.primary-menu .sub-menu .menu-item-divider {
  border-top: 1px solid var(--line);
  margin: 6px 14px;
  padding: 0;
  pointer-events: none;
}
.primary-menu .sub-menu .menu-item-divider a { display: none; }

.primary-menu .sub-menu .menu-item-label {
  pointer-events: none;
}
.primary-menu .sub-menu .menu-item-label a {
  padding: 10px 18px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: default;
}
.primary-menu .sub-menu .menu-item-label a:hover { color: var(--muted); background: none; }

/* ==========================================================================
   Homepage-style sections
   ========================================================================== */
.info-strip {
  background: var(--paper-raised);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
}
.info-strip .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.info-strip .addr { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.info-strip .addr strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 2px; }

/* ==========================================================================
   HSV block styles — used by content editors via the block inserter
   (Cover/Group "Styles" panel) to build homepage-style sections with
   nothing but core WordPress blocks.
   ========================================================================== */

/* Default HSV cover content position: bottom-left, matching the hero
   and every photo card — override per-block via the editor's own
   "position" control if a specific block needs something else. */
.wp-block-cover {
  align-items: flex-end;
  justify-content: flex-start;
}

/* Any full-width Cover block (e.g. the homepage hero) keeps its inner
   content aligned to the site's normal content column, instead of
   sitting flush against the viewport edge. */
.wp-block-cover .wp-block-cover__inner-container {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* Fotokaart: a Cover block styled as a clickable-feeling photo tile
   (Turnen, Ritmisch Gymnastiek, sponsors-with-a-logo, etc.) */
.wp-block-cover.is-style-hsv-card {
  position: relative;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.15s ease;
}
.wp-block-cover.is-style-hsv-card:hover { transform: translateY(-2px); }
.wp-block-cover.is-style-hsv-card .wp-block-cover__inner-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 16px 18px;
  width: 100%;
}
.wp-block-cover.is-style-hsv-card .wp-block-cover__inner-container > * {
  color: #fff;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}
.wp-block-cover.is-style-hsv-card .wp-block-cover__inner-container a {
  color: #fff;
  text-decoration: none;
}
.wp-block-cover.is-style-hsv-card .wp-block-cover__inner-container a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Tekstpaneel (glas): the frosted panel that holds hero text on top of
   a photo — nest this Group inside a Cover block. */
.wp-block-group.is-style-hsv-panel {
  background: rgba(10, 14, 24, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 28px 32px 32px;
  width: 600px;
  max-width: 100%;
}
.wp-block-group.is-style-hsv-panel h1,
.wp-block-group.is-style-hsv-panel h2,
.wp-block-group.is-style-hsv-panel h3,
.wp-block-group.is-style-hsv-panel p,
.wp-block-group.is-style-hsv-panel a:not(.wp-block-button__link) {
  color: #fff;
}
.wp-block-group.is-style-hsv-panel .hero-eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f2b3a8;
  margin: 0 0 12px;
}
.wp-block-group.is-style-hsv-panel h1,
.wp-block-group.is-style-hsv-panel h2 {
  font-size: clamp(28px, 4.2vw, 42px);
  margin: 0 0 14px;
}
.wp-block-group.is-style-hsv-panel p {
  font-size: 16px;
  color: rgba(255,255,255,0.86);
}
.wp-block-group.is-style-hsv-panel .wp-block-buttons { margin-top: 10px; }
.wp-block-group.is-style-hsv-panel .is-style-outline .wp-block-button__link {
  border-color: rgba(255,255,255,0.55);
  color: #fff;
}
.wp-block-group.is-style-hsv-panel .is-style-outline .wp-block-button__link:hover {
  border-color: #fff;
}

/* Sponsorvak (leeg): dashed placeholder tile for a sponsor slot */
.wp-block-group.is-style-hsv-slot {
  aspect-ratio: 3/2;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
}
.wp-block-group.is-style-hsv-slot p {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}

/* Linkrij: a bordered row linking to a related page */
.wp-block-group.is-style-hsv-link-row {
  position: relative;
  padding: 16px 44px 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-raised);
  transition: border-color 0.15s ease;
}
.wp-block-group.is-style-hsv-link-row:hover { border-color: var(--accent); }
.wp-block-group.is-style-hsv-link-row p { margin: 0; }
.wp-block-group.is-style-hsv-link-row a {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
}
.wp-block-group.is-style-hsv-link-row a:hover { color: var(--accent); }
.wp-block-group.is-style-hsv-link-row .desc {
  display: inline-block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-soft);
}
.wp-block-group.is-style-hsv-link-row::after {
  content: "→";
  position: absolute;
  right: 20px; top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-weight: 700;
}

/* Actiebalk: navy CTA banner (e.g. "naar de webshop") */
.wp-block-group.is-style-hsv-cta {
  background: var(--navy);
  border-radius: var(--radius);
  padding: 36px 40px;
}
.wp-block-group.is-style-hsv-cta > .wp-block-group__inner-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.wp-block-group.is-style-hsv-cta h3 { color: #fff; font-size: 22px; margin: 0 0 6px; }
.wp-block-group.is-style-hsv-cta p { color: rgba(255,255,255,0.75); margin: 0; max-width: 46ch; }
.wp-block-group.is-style-hsv-cta .wp-block-buttons { margin: 0; }

/* Homepage clubshop: a visual destination between news and sponsors, with the
   photograph carrying the same weight as the invitation to visit the shop. */
.home .hsv-clubshop-cta {
  overflow: hidden;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  border-radius: var(--radius);
  background: var(--navy);
  box-shadow: var(--shadow);
}
.home .hsv-clubshop-cta .wp-block-media-text__content {
  padding: 40px;
}
.home .hsv-clubshop-cta h3 { color: #fff; font-size: 25px; margin: 0 0 10px; }
.home .hsv-clubshop-cta p { max-width: 46ch; margin: 0 0 24px; color: rgba(255,255,255,.78); }
.home .hsv-clubshop-cta .wp-block-buttons { margin: 0; }
.home .hsv-clubshop-cta .wp-block-media-text__media {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 34%, rgba(165, 183, 207, .36), transparent 44%),
    #f7f5f1;
}
.home .hsv-clubshop-cta .wp-block-media-text__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 16px 12px 0;
  object-fit: contain;
  object-position: center bottom;
  mix-blend-mode: multiply;
}
.home .hsv-clubshop-cta .hsv-clubshop-categories {
  margin: 22px 0 0;
  color: rgba(255,255,255,.62);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
}

/* Grid helpers: add as an "additional CSS class" on the Group wrapping
   a set of cards/slots/link-rows, so a content editor can lay out any
   number of them without needing a fixed PHP array. The Group block
   always wraps its children in .wp-block-group__inner-container, so
   the grid/flex layout is applied there, not on the group itself. */
.hsv-grid-3 > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hsv-grid-6 > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.hsv-grid-rows > .wp-block-group__inner-container { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 900px) {
  .hsv-grid-3 > .wp-block-group__inner-container { grid-template-columns: repeat(2, 1fr); }
  .hsv-grid-6 > .wp-block-group__inner-container { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .hsv-grid-3 > .wp-block-group__inner-container { grid-template-columns: 1fr 1fr; }
  .hsv-grid-6 > .wp-block-group__inner-container { grid-template-columns: 1fr 1fr; }
}

/* Core "Latest Posts" block, used for the homepage news section.
   The block's own CSS lays this out with flex-wrap (not CSS Grid) and
   gives each <li> width:100% by default — style with it rather than
   against it, and set the per-item width ourselves. */
.wp-block-latest-posts__list.wp-block-latest-posts.is-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wp-block-latest-posts__list.wp-block-latest-posts.is-grid li {
  width: calc(33.333% - 16px);
  min-width: 0;
  margin: 0 !important;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 0 0 18px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.wp-block-latest-posts__list.wp-block-latest-posts.is-grid li:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.wp-block-latest-posts__featured-image { display: block; margin: 0 0 12px; aspect-ratio: 16/10; overflow: hidden; }
.wp-block-latest-posts__featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wp-block-latest-posts__post-title {
  display: block;
  font-family: var(--font-display);
  font-size: 16.5px;
  color: var(--ink);
  text-decoration: none;
  margin: 0 18px 8px;
}
.wp-block-latest-posts__post-title:hover { color: var(--accent); }
.wp-block-latest-posts__post-date {
  display: block;
  margin: 0 18px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}
.wp-block-latest-posts__post-excerpt { margin: 0 18px; font-size: 13.5px; color: var(--ink-soft); }
@media (max-width: 900px) { .wp-block-latest-posts__list.wp-block-latest-posts.is-grid li { width: calc(50% - 12px); } }
@media (max-width: 560px) { .wp-block-latest-posts__list.wp-block-latest-posts.is-grid li { width: 100%; } }

/* ==========================================================================
   Standard page / single content
   ========================================================================== */
.page-header {
  padding-top: 40px;
  padding-bottom: 8px;
}
.breadcrumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.page-title { font-size: 32px; margin: 0; }
.page-thumb { margin: 20px 0 0; }
.page-thumb img { width: 100%; }

.content-area { padding-top: 24px; padding-bottom: 72px; }
.entry-content {
  font-size: 16px;
}
.entry-content > * {
  max-width: var(--measure);
}
/* Structural blocks (grids, full-width section wrappers) opt out of the
   prose measure above and use the full content column instead, so their
   left edge lines up with the page title's .wrap. */
.entry-content > .wrap { max-width: var(--content-width); }
.entry-content > .hsv-grid-3,
.entry-content > .hsv-discipline-grid,
.entry-content > .hsv-grid-6,
.entry-content > .hsv-grid-rows,
.entry-content > .hsv-link-grid,
.entry-content > .hsv-person-grid,
.entry-content > .hsv-discipline-grid,
.entry-content > .hsv-contact-layout,
.entry-content > .hsv-roster-day,
.entry-content > .is-style-hsv-link-row,
.entry-content > .is-style-hsv-cta,
.entry-content > .alignwide {
  max-width: none;
}
.entry-content > .hsv-person-grid,
.entry-content > .hsv-contact-layout,
.entry-content > .hsv-roster-day { width: 100%; }
/* Audience routes stay within the same visual column as the discipline cards.
   On regular pages their own padding is removed; the parent content column
   already supplies the appropriate inset. */
.entry-content > .hsv-audience-routes {
  width: 100%;
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}
.wp-singular:not(.home) .entry-content > .hsv-audience-routes { padding-left: 0; padding-right: 0; }
.entry-content > .alignfull {
  max-width: none;
  width: 100vw;
  padding-left: 0;
  padding-right: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.entry-content > .wp-block-table.is-style-hsv-scroll-table {
  width: 100%;
  max-width: var(--content-width);
}
.entry-content h2 { font-size: 26px; margin-top: 1.6em; }
.entry-content h3 { font-size: 18px; margin-top: 1.4em; }
.wp-singular:not(.home) .entry-content > h2 { margin-top: 2.15em; margin-bottom: .65em; }
.wp-singular:not(.home) .entry-content > h3 { margin-top: 1.8em; margin-bottom: .55em; }
.wp-singular:not(.home) .entry-content > ul,
.wp-singular:not(.home) .entry-content > ol { margin: 0 0 1.5em; }
.wp-singular:not(.home) .entry-content > ul li,
.wp-singular:not(.home) .entry-content > ol li { margin-bottom: .42em; }
.entry-content img { border-radius: var(--radius); }
.entry-content a { text-decoration-color: var(--accent-soft); }
.entry-content .gallery {
  display: grid;
  grid-template-columns: repeat(var(--gallery-columns, 3), 1fr);
  gap: 10px;
  margin: 1.5em 0;
  max-width: none;
}
.entry-content .gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.entry-content table { border-collapse: collapse; width: 100%; margin: 1.5em 0; font-size: 14.5px; }
.entry-content table th, .entry-content table td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.entry-meta { font-size: 13px; color: var(--muted); margin-bottom: 24px; }

/* Core "Buttons" block, used within page content (e.g. external shop link) */
.entry-content .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  line-height: 1.3;
}
.entry-content .wp-block-button__link:hover { background: var(--accent-dark); color: var(--accent-ink); }
.entry-content .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--ink); }

/* ==========================================================================
   Homepage composition

   These rules intentionally target only the blocks on the front page.  The
   editor still owns the content, order, imagery and links; the theme merely
   gives the familiar HSV composition its spacing and proportions.
   ========================================================================== */
.home .content-area { padding: 0; overflow: hidden; }
.home .entry-content { max-width: none; }
.home .entry-content > .wrap { margin-left: auto; margin-right: auto; }
.home .entry-content > .wrap > :first-child { margin-top: 0; }
.home .entry-content > .wrap > h2 {
  font-size: 30px;
  margin-bottom: 8px;
}
.home .entry-content h2 { font-size: clamp(28px, 3vw, 32px); }
.home .entry-content > .wrap > h2 + p {
  color: var(--ink-soft);
  margin-bottom: 32px;
}

/* The editable Cover hero keeps the original 420px visual weight and the
   content panel rests above the lower edge, just like the first design. */
.home .wp-block-cover.alignfull {
  min-height: 420px !important;
  padding-top: 56px;
  align-items: flex-end;
  justify-content: center;
}
.home .wp-block-cover.alignfull .wp-block-cover__inner-container {
  width: 100%;
  margin-bottom: 40px;
}
.home .wp-block-group.is-style-hsv-panel { margin-left: 0; }
.home .wp-block-cover.alignfull .wp-block-cover__inner-container > .is-style-hsv-panel {
  margin-left: 0;
}
.home .wp-block-group.is-style-hsv-panel > .wp-block-group__inner-container > :last-child { margin-bottom: 0; }
.home .wp-block-group.is-style-hsv-panel p:not(.hero-eyebrow) { max-width: 46ch; margin-bottom: 24px; }
.home .wp-block-group.is-style-hsv-panel .wp-block-button.is-style-outline .wp-block-button__link {
  color: #fff;
  border-color: rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.08);
}
.home .wp-block-group.is-style-hsv-panel .wp-block-button.is-style-outline .wp-block-button__link:hover {
  color: var(--navy);
  background: #fff;
  border-color: #fff;
}

/* At wide viewport widths the hero is a fixed 1120px composition: the
   copy stays aligned with the normal content column and the panel keeps its
   intended reading measure instead of shrinking into a small visual island. */
@media (min-width: 1280px) {
  .home .wp-block-cover.alignfull .wp-block-cover__inner-container {
    flex: 0 0 var(--content-width);
    width: var(--content-width);
  }
}

/* The welcome block used to inherit the core 50/50 split, which made the
   photograph dominate.  This restores the calmer editorial 1.25 / 1 ratio
   from the original homepage while retaining Gutenberg's Media & Text block. */
.home .wp-block-media-text {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.home .wp-block-media-text__content { padding: 0; }
.home .wp-block-media-text__content > :last-child { margin-bottom: 0; }
.home .wp-block-media-text__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: var(--shadow);
}

/* The discipline grid accommodates the current seven disciplines as a calm
   4 + 3 rhythm on wide screens, without making individual cards too narrow. */
.hsv-discipline-grid,
.hsv-discipline-grid > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.hsv-discipline-grid > * { margin-block-start: 0 !important; }
.home .hsv-discipline-grid .wp-block-cover.is-style-hsv-card { min-height: 220px !important; }
.home .hsv-discipline-grid .wp-block-cover.is-style-hsv-card .wp-block-cover__background {
  opacity: 0.42;
}

.home .hsv-sponsors-section {
  width: 100vw;
  max-width: none !important;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 64px max(24px, calc((100vw - var(--content-width)) / 2 + 24px));
  background: #f3f5f9;
}
.home .hsv-sponsors-section > :first-child { margin-top: 0; }
.home .hsv-sponsors-section .hsv-grid-6 {
  margin-bottom: 24px;
}
.home .hsv-grid-6 + p { color: var(--ink-soft); margin-bottom: 0; }
.home .hsv-shop-section { padding-top: 32px; padding-bottom: 32px; }

/* Latest news: title and action form a single header, followed by a
   dynamically rendered grid. The regular Gutenberg link became a button so
   editors can still change its label and URL in the normal interface. */
.home .hsv-news-section > .wp-block-group__inner-container,
.home .hsv-news-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 24px;
  align-items: end;
}
.home .hsv-news-section h2 { grid-column: 1; }
.home .hsv-news-section > p,
.home .hsv-news-section > .wp-block-group__inner-container > p { grid-column: 1; }
.home .hsv-news-section .wp-block-buttons {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0 0 32px;
}
.home .hsv-news-section .wp-block-latest-posts { grid-column: 1 / -1; }
.home .hsv-news-section .wp-block-latest-posts__list { margin-top: 0; }
.home .hsv-news-grid .hsv-news-card { position: relative; }
.hsv-featured-ribbon {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: -34px;
  width: 132px;
  padding: 5px 0;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(28,39,64,0.22);
}

@media (max-width: 900px) {
  .home .wp-block-media-text { gap: 32px; }
  .home .hsv-clubshop-cta { gap: 0; }
}
@media (max-width: 680px) {
  .home .entry-content h2 { font-size: 28px; }
  .home .wp-block-cover.alignfull { min-height: 500px !important; padding-top: 32px; }
  .home .wp-block-cover.alignfull .wp-block-cover__inner-container { margin-bottom: 24px; }
  .home .wp-block-cover.alignfull .wp-block-cover__inner-container > .is-style-hsv-panel { margin-left: 0; }
  .home .wp-block-group.is-style-hsv-panel {
    width: calc(100vw - 48px);
    max-width: calc(100vw - 48px);
    padding: 24px;
  }
  .home .wp-block-media-text { grid-template-columns: 1fr; gap: 24px; }
  .home .wp-block-media-text__media { grid-column: 1; grid-row: 1; }
  .home .hsv-clubshop-cta .wp-block-media-text__content { padding: 30px 24px; }
  .home .hsv-clubshop-cta .wp-block-media-text__media { min-height: 260px; }
  .hsv-discipline-grid,
  .hsv-discipline-grid > .wp-block-group__inner-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wp-block-group.is-style-hsv-cta { padding: 28px 24px; }
  .wp-block-group.is-style-hsv-cta > .wp-block-group__inner-container { align-items: flex-start; }
  .home .hsv-news-section > .wp-block-group__inner-container,
  .home .hsv-news-section { grid-template-columns: 1fr; }
  .home .hsv-news-section .wp-block-buttons { grid-column: 1; grid-row: auto; margin: 0 0 24px; }
}

.single-news .single-news-layout { align-items: start; gap: 48px; margin-top: 32px; }
.single-news .single-news-layout .entry-content { max-width: none; }
.single-news .single-news-layout .page-thumb { margin: 0; }
.single-news .single-news-layout .page-thumb img { width: 100%; }
@media (max-width: 780px) {
  .single-news .single-news-layout { grid-template-columns: 1fr; gap: 28px; }
  .single-news .single-news-layout .page-thumb { grid-column: 1; grid-row: 1; }
}

/* News archive */
.news-list { display: flex; flex-direction: column; gap: 28px; max-width: 760px; }
.news-list-item { display: flex; gap: 20px; padding-bottom: 28px; border-bottom: 1px solid var(--line); isolation: isolate; }
.news-list-item .thumb { position: relative; z-index: 0; flex: none; width: 160px; aspect-ratio: 16/10; border-radius: 8px; overflow: hidden; background: var(--navy-soft); }
.news-list-item.is-featured .thumb { position: relative; }
.news-list-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-list-item h2 { font-size: 19px; margin: 0 0 6px; }
.news-list-item h2 a { color: var(--ink); text-decoration: none; }
.news-list-item h2 a:hover { color: var(--accent); }
.pagination { display: flex; gap: 10px; margin-top: 32px; }
.pagination a, .pagination span {
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; text-decoration: none; color: var(--ink-soft);
}
.pagination .current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--paper-raised); border-top: 1px solid var(--line); }
.footer-columns {
  padding-top: 48px;
  padding-bottom: 32px;
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 32px;
}
.footer-brand { display: flex; flex-direction: column; gap: 16px; }
.footer-brand img.custom-logo { max-height: 108px; width: auto; }
.footer-brand p { color: var(--muted); font-size: 13.5px; margin: 0; max-width: 26ch; }
.footer-col h4 {
  font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--muted); margin: 0 0 12px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-col a { color: var(--ink-soft); text-decoration: none; font-size: 14px; }
.footer-col a:hover { color: var(--accent); }

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  padding-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--muted);
}
.social-links { display: flex; gap: 8px; }
.social-links a {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--navy-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  text-decoration: none;
}
.social-links a:hover { background: var(--accent); color: #fff; }
.social-links svg { width: 15px; height: 15px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .footer-columns { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .footer-columns { grid-template-columns: 1fr 1fr; padding-top: 32px; }
  .news-list-item { flex-direction: column; }
  .news-list-item .thumb { width: 100%; aspect-ratio: 16/9; }

  .site-topbar .wrap { padding: 8px 16px; }
  .topbar-brand .site-title { display: none; }
  .topbar-actions { gap: 8px; }
  .topbar-shop-btn { padding: 7px 12px; font-size: 11.5px; }

  .nav-toggle { display: flex; }
  .primary-menu {
    display: none;
    flex-direction: column;
    padding: 0 0 16px;
  }
  .primary-nav-wrap.is-open .primary-menu { display: flex; }
  .primary-menu > li { width: 100%; }
  .primary-menu > li > a { padding: 12px 24px; }
  .primary-menu .sub-menu {
    display: block;
    position: static;
    border: none;
    box-shadow: none;
    padding: 0 0 0 12px;
    background: transparent;
  }
  .primary-menu li.menu-item-has-children:hover > .sub-menu { display: block; }

  .info-strip .wrap { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Block theme shell

   Header and footer are Template Parts.  These additions deliberately map
   core block markup to the existing HSV components, so the editor and the
   live site use the same building blocks instead of parallel PHP fragments.
   ========================================================================== */
.wp-site-blocks { overflow: clip; }
.site-header.is-layout-constrained > .site-topbar,
.site-header.is-layout-constrained > .primary-nav-wrap {
  width: 100%;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.site-header > .site-topbar,
.site-header > .primary-nav-wrap { margin-block-start: 0; }
.site-topbar .wp-block-site-logo { margin: 0; }
.topbar-brand .wp-block-site-title { margin: 0; min-width: 0; }
.topbar-brand .wp-block-site-title a {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-social.wp-block-social-links { gap: 8px; margin: 0; padding: 0; list-style: none; }
.topbar-social.wp-block-social-links .wp-social-link {
  margin: 0;
  list-style: none;
  width: 30px;
  height: 30px;
  background: transparent;
}
.topbar-social.wp-block-social-links .wp-social-link:hover { background: transparent; }
.site-topbar .topbar-social,
.site-topbar .topbar-social .wp-social-link,
.site-topbar .topbar-social .wp-social-link::marker {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-topbar .topbar-social .wp-social-link::before,
.site-topbar .topbar-social .wp-social-link::after,
.site-topbar .topbar-social a::before,
.site-topbar .topbar-social a::after {
  content: none !important;
  display: none !important;
}
.topbar-actions > .wp-block-buttons { margin: 0; }
.topbar-shop-btn { padding: 0; }
.topbar-shop-btn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 8px 16px;
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
}
.topbar-shop-btn .wp-block-button__link:hover { background: var(--accent-dark); color: #fff; }

.primary-nav-wrap .wp-block-navigation {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 24px;
  justify-content: flex-start;
}
.primary-nav-wrap .wp-block-navigation p,
.primary-nav-wrap .wp-block-navigation br { display: none; }
.primary-nav-wrap .wp-block-navigation__container {
  gap: 0;
  justify-content: flex-start;
}
.primary-nav-wrap .wp-block-navigation {
  padding-left: 12px;
}
.primary-nav-wrap .wp-block-navigation__container > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content {
  padding-left: 0;
}
.primary-nav-wrap .wp-block-navigation-item { position: relative; }
.primary-nav-wrap .wp-block-navigation-item__content {
  display: block;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.primary-nav-wrap .wp-block-navigation-item__content:hover,
.primary-nav-wrap .current-menu-item > .wp-block-navigation-item__content,
.primary-nav-wrap .current-menu-ancestor > .wp-block-navigation-item__content { color: var(--accent); }
.primary-nav-wrap .wp-block-navigation-submenu > .wp-block-navigation-item__content { padding-right: 6px; }
.primary-nav-wrap .wp-block-navigation-submenu__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 18px;
  height: 18px;
  margin: 0 8px 0 0;
  padding: 0;
  color: currentColor;
}
.primary-nav-wrap .wp-block-navigation-submenu__toggle svg {
  width: 12px;
  height: 12px;
  margin: 0;
}
.primary-nav-wrap .wp-block-navigation__submenu-container {
  min-width: 240px;
  padding: 8px 0;
  border: 1px solid var(--line);
  border-radius: 0 0 10px 10px;
  box-shadow: var(--shadow);
}
.primary-nav-wrap .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.primary-nav-wrap .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  color: var(--accent);
  background: var(--navy-soft);
}
.primary-nav-wrap .wp-block-navigation__submenu-container .menu-item-divider {
  margin: 6px 14px;
  border-top: 1px solid var(--line);
  pointer-events: none;
}
.primary-nav-wrap .wp-block-navigation__submenu-container .menu-item-divider .wp-block-navigation-item__content {
  display: none;
}
.primary-nav-wrap .wp-block-navigation__submenu-container .menu-item-label {
  pointer-events: none;
}
.primary-nav-wrap .wp-block-navigation__submenu-container .menu-item-label .wp-block-navigation-item__content {
  padding: 10px 18px 4px;
  color: var(--muted);
  background: transparent;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The category divider belongs to the label itself. This also works in the
   responsive navigation overlay, where WordPress moves submenus outside the
   header's DOM tree. */
.wp-block-navigation__submenu-container .menu-item-label {
  margin: 6px 0 0;
  padding-top: 4px;
  border-top: 1px solid var(--line);
  pointer-events: none;
}
.wp-block-navigation__submenu-container .menu-item-label .wp-block-navigation-item__content {
  padding: 6px 0 4px;
  color: var(--muted);
  background: transparent;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.info-strip .addr p,
.footer-brand p,
.footer-bottom p { margin: 0; }
.info-strip .wp-block-buttons { margin: 0; }
.info-strip .btn { padding: 0; }
.info-strip .btn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
.info-strip .btn .wp-block-button__link:hover { background: var(--accent-dark); color: #fff; }
.footer-brand .wp-block-site-logo { margin: 0; }
.footer-brand .wp-block-site-logo { margin-inline: 0 !important; }
.footer-columns > * { margin-block-start: 0 !important; }
.footer-brand .wp-block-site-logo img { max-height: 108px; width: auto; }
.footer-col .wp-block-navigation { margin: 0; }
.footer-col .wp-block-navigation__container { align-items: flex-start; gap: 8px; }
.footer-col .wp-block-navigation-item__content { color: var(--ink-soft); font-size: 14px; text-decoration: none; }
.footer-col .wp-block-navigation-item__content:hover { color: var(--accent); }
.footer-bottom .social-links.wp-block-social-links { gap: 8px; margin: 0; }
.footer-bottom .social-links .wp-social-link {
  width: 32px;
  height: 32px;
  margin: 0;
  background: var(--navy-soft);
}
.footer-bottom .social-links .wp-social-link:hover { background: var(--accent); color: #fff; }

.wp-site-blocks > .content-area.wrap {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
.wp-site-blocks > .content-area.wrap > .wp-block-post-title { margin-top: 0; }
.wp-site-blocks .page-thumb { margin: 24px 0; }
.wp-site-blocks .page-thumb img { width: 100%; border-radius: var(--radius); }
.wp-site-blocks .news-list { margin-top: 28px; }
.wp-site-blocks .news-list .thumb { position: relative; }
.wp-site-blocks .news-list .wp-block-post-excerpt { margin: 0; }
.wp-site-blocks .news-list .wp-block-post-excerpt__excerpt { margin: 0; }

/* ==========================================================================
   Editorial content components
   Reusable core-block compositions for discipline pages, people, the roster
   and helpful external links. Their classes are intentionally visible in the
   block editor, so editors can duplicate and adapt them without PHP work.
   ========================================================================== */
.entry-content .hsv-discipline-section.wp-block-media-text {
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  margin: 48px 0;
}
.entry-content .hsv-discipline-section.has-media-on-the-right { grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr); }
.entry-content .hsv-discipline-section .wp-block-media-text__content { padding: 0; }
.entry-content .hsv-discipline-section .wp-block-media-text__media { height: 100%; }
.entry-content .hsv-discipline-section .wp-block-media-text__media img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.entry-content .hsv-discipline-section h2 { margin-top: 0; }
.entry-content .hsv-discipline-section ul { margin-bottom: 0; }

/* Parent stories from the Nijntje programme. These are deliberately wider
   than prose: the photograph and quote card both need breathing room. */
.entry-content > .hsv-nijntje-stories {
  width: 100%;
  max-width: var(--content-width);
}
.hsv-nijntje-stories .hsv-discipline-section.wp-block-media-text {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: clamp(28px, 4vw, 56px);
  margin: 36px 0 56px;
  align-items: stretch;
}
.hsv-nijntje-stories .hsv-discipline-section.wp-block-media-text:not(.has-media-on-the-right) {
  grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr);
}
.hsv-nijntje-stories .hsv-discipline-section .wp-block-media-text__content {
  position: relative;
  align-self: center;
  padding: clamp(28px, 4vw, 48px);
  background: #f4f7fb;
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.hsv-nijntje-stories .hsv-discipline-section .wp-block-media-text__content::before {
  content: "“";
  display: block;
  margin: -18px 0 -10px;
  color: var(--accent);
  font-family: Georgia, serif;
  font-size: 64px;
  line-height: 1;
}
.entry-content .hsv-nijntje-stories .hsv-discipline-section h3 {
  margin: 0 0 16px;
  font-size: clamp(22px, 2.2vw, 28px);
}
.hsv-nijntje-stories .hsv-discipline-section .wp-block-media-text__content p { max-width: 64ch; }
.hsv-nijntje-stories .hsv-discipline-section .wp-block-media-text__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 0;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.hsv-nijntje-stories .hsv-discipline-section .wp-block-media-text__media img {
  display: block;
  width: auto;
  height: auto;
  min-height: 0;
  max-width: 100%;
  max-height: 560px;
  object-fit: contain;
  border-radius: calc(var(--radius) - 4px);
  box-shadow: none;
}
.hsv-nijntje-credit { max-width: 68ch; color: var(--muted); }
.hsv-practical-card {
  padding: 28px 32px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--paper-raised);
  box-shadow: var(--shadow);
}
.hsv-practical-card > :last-child { margin-bottom: 0; }

.hsv-person-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 32px 0 48px;
}
.hsv-person-grid > * { margin-block-start: 0 !important; }
.hsv-person-card {
  position: relative;
  min-height: 100%;
  padding: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-raised);
  box-shadow: var(--shadow);
}
.hsv-person-card > * + * { margin-block-start: 12px; }
.hsv-person-card__portrait {
  position: relative;
  width: 76px;
  height: 76px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--navy-soft);
}
.hsv-person-card__portrait::before {
  position: absolute;
  top: 16px;
  left: 27px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #aab2c4;
  content: "";
}
.hsv-person-card__portrait::after {
  position: absolute;
  bottom: -12px;
  left: 15px;
  width: 46px;
  height: 46px;
  border-radius: 50% 50% 0 0;
  background: #aab2c4;
  content: "";
}
.hsv-person-card__portrait img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hsv-person-card h3 { margin: 0; font-size: 20px; }
.hsv-person-card .hsv-person-role { margin: 0; color: var(--ink-soft); font-size: 14px; font-weight: 700; }
.hsv-person-card .hsv-person-contact { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.hsv-person-card .hsv-person-contact a { font-weight: 700; text-decoration: none; }

.hsv-roster-intro { margin-bottom: 28px; }
.hsv-roster-day { margin: 32px 0; }
.hsv-roster-day h2 {
  margin: 0;
  padding: 12px 18px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--navy);
  color: #fff;
  font-size: 22px;
}
.hsv-roster-day .wp-block-table { margin: 0; overflow-x: auto; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--paper-raised); }
.hsv-roster-day table { min-width: 680px; margin: 0; border: 0; }
.hsv-roster-day th { background: var(--navy-soft); color: var(--ink); font-size: 13px; }
.hsv-roster-day td, .hsv-roster-day th { border-width: 0 0 1px; padding: 12px 14px; vertical-align: top; }
.hsv-roster-day tr:last-child td { border-bottom: 0; }
.hsv-roster-day td:first-child, .hsv-roster-day th:first-child { width: 18%; white-space: nowrap; font-weight: 700; }
.hsv-roster-day td:nth-child(2), .hsv-roster-day th:nth-child(2) { width: 12%; text-align: center; }
.hsv-roster-day td:last-child, .hsv-roster-day th:last-child { width: 22%; }

.wp-block-table.is-style-hsv-scroll-table,
.hsv-fee-table {
  margin: 32px 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-raised);
  box-shadow: var(--shadow);
}
.wp-block-table.is-style-hsv-scroll-table table,
.hsv-fee-table table { min-width: 700px; margin: 0; border: 0; }
.wp-block-table.is-style-hsv-scroll-table th,
.hsv-fee-table th { background: var(--navy); color: #fff; font-size: 13px; }
.wp-block-table.is-style-hsv-scroll-table td, .wp-block-table.is-style-hsv-scroll-table th,
.hsv-fee-table td, .hsv-fee-table th { border-width: 0 0 1px; padding: 13px 14px; vertical-align: middle; }
.wp-block-table.is-style-hsv-scroll-table tr:last-child td,
.hsv-fee-table tr:last-child td { border-bottom: 0; }
.wp-block-table.is-style-hsv-scroll-table tbody tr:nth-child(even),
.hsv-fee-table tbody tr:nth-child(even) { background: #f7f8fb; }
.wp-block-table.is-style-hsv-scroll-table td:first-child,
.hsv-fee-table td:first-child { min-width: 240px; font-weight: 700; }
.wp-block-table.is-style-hsv-scroll-table td:not(:first-child), .wp-block-table.is-style-hsv-scroll-table th:not(:first-child),
.hsv-fee-table td:not(:first-child), .hsv-fee-table th:not(:first-child) { text-align: right; white-space: nowrap; }

/* Contact Form 7: a calm, readable form that follows the same visual
   language as Gutenberg's standard components. */
.wpcf7 { max-width: 720px; margin-top: 32px; }
.wpcf7 form > p { margin: 0 0 20px; }
.wpcf7 label { display: block; color: var(--ink); font-size: 15px; font-weight: 700; }
.wpcf7 input:not([type="checkbox"]),
.wpcf7 textarea,
.wpcf7 select {
  box-sizing: border-box;
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-raised);
  color: var(--ink);
  font: inherit;
  line-height: 1.5;
}
.wpcf7 textarea { height: 150px; min-height: 120px; resize: vertical; }
.wpcf7 select {
  min-height: 46px;
  padding-right: 44px;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='m2 2 6 6 6-6' fill='none' stroke='%231c2740' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  background-position: right 16px center;
  background-repeat: no-repeat;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus { outline: 3px solid rgba(217,64,44,.18); outline-offset: 1px; border-color: var(--accent); }
.wpcf7 .wpcf7-list-item { display: block; margin: 0; }
.wpcf7 .wpcf7-list-item label { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-soft); font-size: 14px; font-weight: 400; line-height: 1.5; }
.wpcf7 .wpcf7-list-item input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.wpcf7 .wpcf7-submit {
  min-height: 46px;
  padding: 11px 20px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.wpcf7 .wpcf7-submit:hover { background: #bc311f; }
.wpcf7 .wpcf7-not-valid-tip { margin-top: 6px; color: #b42318; font-size: 13px; }
.wpcf7 .wpcf7-response-output { margin: 24px 0 0; padding: 14px 16px; border: 1px solid #7bb58a; border-radius: 8px; background: #f1f8f3; color: #225c32; }
.hsv-contact-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
  margin-top: 32px;
}
.hsv-contact-layout > * { margin-block-start: 0 !important; }
.hsv-contact-layout .wpcf7 { max-width: none; margin-top: 0; }

.hsv-link-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 32px 0;
}
.hsv-link-grid > * { margin-block-start: 0 !important; }
.hsv-audience-routes { margin-top: 0; margin-bottom: 0; }
.hsv-audience-routes .hsv-link-card { padding: 22px 24px; }
.hsv-link-card {
  min-height: 100%;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-raised);
  box-shadow: var(--shadow);
}
.hsv-link-card > * + * { margin-block-start: 12px; }
.hsv-link-card h2 { margin: 0; font-size: 20px; }
.hsv-link-card p { margin: 0; color: var(--ink-soft); font-size: 14px; }
.hsv-link-card a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  text-decoration: none;
}
.hsv-link-card a::after { content: "→"; font-size: 16px; line-height: 1; }

.footer-bottom .footer-legal { margin: 0; }
.footer-bottom .footer-legal .wp-block-navigation__container { gap: 16px; }
.footer-bottom .footer-legal .wp-block-navigation-item__content { color: var(--ink-soft); font-size: 13px; text-decoration: none; }
.footer-bottom .footer-legal .wp-block-navigation-item__content:hover { color: var(--accent); }
.site-credit {
  margin: 0;
  padding-bottom: 20px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}
.site-credit a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: inherit;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 2px;
}
.site-credit img { display: block; width: 42px; height: auto; }
.site-credit a:hover { color: var(--accent); }

@media (max-width: 900px) {
  .hsv-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .entry-content .hsv-discipline-section.wp-block-media-text,
  .entry-content .hsv-discipline-section.has-media-on-the-right { grid-template-columns: 1fr; gap: 24px; }
  .entry-content .hsv-discipline-section .wp-block-media-text__media { grid-column: 1; grid-row: 1; }
  .entry-content .hsv-discipline-section .wp-block-media-text__media img { min-height: 220px; }
  .hsv-nijntje-stories .hsv-discipline-section.wp-block-media-text,
  .hsv-nijntje-stories .hsv-discipline-section.wp-block-media-text:not(.has-media-on-the-right) { grid-template-columns: 1fr; }
  .hsv-nijntje-stories .hsv-discipline-section .wp-block-media-text__media img { min-height: 0; max-height: 420px; }
  .hsv-nijntje-stories .hsv-discipline-section .wp-block-media-text__content { padding: 28px 24px; }
  .hsv-person-grid, .hsv-link-grid, .hsv-contact-layout { grid-template-columns: 1fr; }
  .hsv-practical-card { padding: 24px; }
}

@media (max-width: 680px) {
  .topbar-brand .wp-block-site-title { display: none; }
  .topbar-shop-btn .wp-block-button__link { padding: 7px 12px; font-size: 11.5px; }
  .primary-nav-wrap .wp-block-navigation {
    min-height: 54px;
    padding: 0 16px;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .primary-nav-wrap .wp-block-navigation.is-content-justification-center { justify-content: flex-start; }
  .primary-nav-wrap .wp-block-navigation__responsive-container-open {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 0;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
  }
  .primary-nav-wrap .wp-block-navigation__responsive-container-open svg { display: none; }
  .primary-nav-wrap .wp-block-navigation__responsive-container-open::before {
    content: "☰";
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
  }
  .primary-nav-wrap .wp-block-navigation__responsive-container-open::after { content: "Menu"; }
  .primary-nav-wrap .wp-block-navigation__responsive-container-close { top: 14px; right: 24px; }
  .primary-nav-wrap .wp-block-navigation__responsive-container.is-menu-open {
    background: var(--paper-raised);
    color: var(--ink);
  }
  .primary-nav-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 52px 24px 24px;
    text-align: left;
  }
  .primary-nav-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    align-items: stretch;
    justify-content: flex-start !important;
    width: 100%;
    gap: 0;
    text-align: left;
  }
  .primary-nav-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    text-align: left;
  }
  .primary-nav-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    padding: 12px 0;
    text-align: left;
  }
  .primary-nav-wrap .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    min-width: 0;
    padding: 0 0 0 12px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* WordPress 6.8+ renders Group children directly rather than through the
   former .wp-block-group__inner-container. Support both shapes: otherwise
   the cards become a vertical stack after converting the shell to blocks. */
.hsv-grid-3,
.hsv-grid-6 {
  display: grid;
}
.hsv-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hsv-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.hsv-grid-3 > *,
.hsv-grid-6 > * { margin-block-start: 0 !important; }

@media (max-width: 900px) {
  .hsv-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hsv-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hsv-grid-3,
  .hsv-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hsv-discipline-grid,
  .hsv-discipline-grid > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Core's is-layout-flow declaration can otherwise win over the single class
   selector above on pages saved by recent Gutenberg versions. */
div.wp-block-group.hsv-discipline-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px;
}
@media (max-width: 1100px) {
  div.wp-block-group.hsv-discipline-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  div.wp-block-group.hsv-discipline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}