/* VSB-2026 — extras.css
 *
 * Things theme.json + core blocks can't express cleanly, kept small on purpose.
 * Loaded both on the front-end and inside the editor (via add_editor_style). */

/* ---- focus ring on every focusable element ---- */
*:focus-visible {
  outline: none;
  box-shadow: var(--wp--custom--focus-ring);
  border-radius: var(--wp--custom--radius--sm);
}

/* ---- header nav (paragraphs styled as inline nav links) ---- */
header.wp-block-template-part .wp-block-paragraph,
header.wp-block-template-part p {
  margin: 0 !important;
}
header.wp-block-template-part p a {
  display: inline-block;
  padding: 0.5rem 0.85rem;
  text-decoration: none;
  color: var(--wp--preset--color--text-on-dark);
  border-radius: var(--wp--custom--radius--pill);
  transition: background var(--wp--custom--duration--fast) var(--wp--custom--easing--standard);
}
header.wp-block-template-part p a:hover {
  background: rgba(255,255,255,0.10);
}
header.wp-block-template-part p.vsb-nav-cta a {
  background: var(--wp--preset--color--accent);
  color: #fff;
  font-weight: 600;
}
header.wp-block-template-part p.vsb-nav-cta a:hover {
  background: #c14b1c;
}

/* Same CTA pill, but for the wp:navigation block — className "vsb-nav-cta"
   on a navigation-link lands on the <li>, the actual link is the inner
   <a class="wp-block-navigation-item__content">. */
header.wp-block-template-part .wp-block-navigation li.vsb-nav-cta > a.wp-block-navigation-item__content {
  background: var(--wp--preset--color--accent);
  color: #fff;
  font-weight: 600;
  padding: 0.5rem 0.85rem;
  border-radius: var(--wp--custom--radius--pill);
  transition: background var(--wp--custom--duration--fast) var(--wp--custom--easing--standard);
}
header.wp-block-template-part .wp-block-navigation li.vsb-nav-cta > a.wp-block-navigation-item__content:hover {
  background: #c14b1c;
}

/* ---- skip link (accessibility) ---- */
.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--bg-alt);
  font-weight: 600;
  border-radius: 0 0 var(--wp--custom--radius--md) var(--wp--custom--radius--md);
  text-decoration: none;
}
.skip-link:focus { left: var(--wp--preset--spacing--gutter); }

/* ---- hero (full-bleed image with overlay + bottom-anchored content) ----
 *
 * Sizing + text colours are registered as a Cover block style in
 * functions.php (vsb-hero). That keeps the per-variant CSS co-located with
 * the registration call and avoids the !important war we used to fight
 * against theme.json's auto-generated .has-text-color rule.
 *
 * The bits below are layout/decoration only (gradient overlay + bottom
 * anchoring) — those are independent of WP's text-colour cascade, so
 * they stay here.
 */
.is-style-vsb-hero {
  position: relative;
  isolation: isolate;
}
.is-style-vsb-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(10, 43, 67, 0.30) 0%,
    rgba(10, 43, 67, 0.15) 35%,
    rgba(10, 43, 67, 0.65) 100%);
  pointer-events: none;
}
.is-style-vsb-hero > * { position: relative; z-index: 2; }

/* ---- glass-effect chip used inside the hero ---- */
.wp-block-button.is-style-vsb-chip-hero .wp-block-button__link {
  background: rgba(255,255,255,0.95);
  color: var(--wp--preset--color--primary);
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.6);
  backdrop-filter: blur(4px);
  border-radius: var(--wp--custom--radius--pill);
  padding: 0.85rem 1.4rem;
}
.wp-block-button.is-style-vsb-chip-hero .wp-block-button__link:hover {
  background: var(--wp--preset--color--bg-alt);
}

/* ---- persona / news / event cards: hover lift ---- */
.is-style-vsb-card {
  background: var(--wp--preset--color--bg-alt);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--lg);
  overflow: hidden;
  transition:
    transform var(--wp--custom--duration--base) var(--wp--custom--easing--standard),
    box-shadow var(--wp--custom--duration--base) var(--wp--custom--easing--standard);
  /* Equal-height inside flex/grid columns: stretch to the column's height
     and let the body push the CTA paragraph to the bottom. */
  height: 100%;
  display: flex;
  flex-direction: column;
}
.is-style-vsb-card > .wp-block-image,
.is-style-vsb-card > figure { flex: 0 0 auto; }
.is-style-vsb-card > .wp-block-group:last-child { flex: 1 1 auto; }
.is-style-vsb-card:hover { transform: translateY(-3px); box-shadow: var(--wp--preset--shadow--md); }
.is-style-vsb-card a { text-decoration: none; }
/* The columns the cards sit inside also need to stretch their items. */
.wp-block-columns:has(.is-style-vsb-card) { align-items: stretch; }
.wp-block-columns:has(.is-style-vsb-card) > .wp-block-column {
  display: flex;
  flex-direction: column;
}

/* ---- news-grid (vsb-2026/news-grid block) ---- */
.vsb-news-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(var(--vsb-news-cols, 3), 1fr);
}
@media (max-width: 720px) {
  .vsb-news-grid { grid-template-columns: 1fr; }
}
.vsb-news-card.is-style-vsb-card { padding: 0; gap: 0; }
.vsb-news-card__media {
  display: block;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  background: var(--wp--preset--color--bg-muted);
}
.vsb-news-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--wp--custom--duration--slow) var(--wp--custom--easing--standard);
}
.vsb-news-card:hover .vsb-news-card__media img { transform: scale(1.03); }
.vsb-news-card__body {
  display: grid;
  gap: 0.4rem;
  padding: 1.25rem;
}
.vsb-news-card__date {
  font-size: 0.85rem;
  color: var(--wp--preset--color--text-muted);
}
.vsb-news-card__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.25;
  margin: 0;
}
.vsb-news-card__title a {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}
.vsb-news-card:hover .vsb-news-card__title a { text-decoration: underline; }
.vsb-news-card__excerpt {
  font-size: 0.95rem;
  color: var(--wp--preset--color--text-muted);
  line-height: 1.45;
  margin: 0;
}

/* ---- partner wall: greyscale → colour on hover ---- */
.is-style-vsb-partner-wall .wp-block-image {
  filter: grayscale(1);
  opacity: 0.85;
  transition:
    filter var(--wp--custom--duration--base) var(--wp--custom--easing--standard),
    opacity var(--wp--custom--duration--base) var(--wp--custom--easing--standard),
    transform var(--wp--custom--duration--base) var(--wp--custom--easing--standard);
}
.is-style-vsb-partner-wall .wp-block-image:hover {
  filter: grayscale(0);
  opacity: 1;
  transform: translateY(-2px);
}

/* ---- small subtitle above section H2s ---- */
.is-style-vsb-eyebrow {
  font-family: var(--wp--preset--font-family--body);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--wp--preset--color--text-muted);
  margin-bottom: 0.4em;
}

/* ---- "lead" pull-paragraph ---- */
.is-style-vsb-lead {
  font-family: var(--wp--preset--font-family--display) !important;
  font-style: italic;
  font-size: var(--wp--preset--font-size--xl) !important;
  color: var(--wp--preset--color--primary-soft);
  max-width: 60ch;
}

/* ---- check-card used on the gæster page ---- */
.is-style-vsb-check-card {
  background: var(--wp--preset--color--bg-alt);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--md);
  padding: 1.4rem 1.5rem;
}
.is-style-vsb-check-card__num {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--wp--custom--radius--md);
  background: var(--wp--preset--color--accent-soft);
  color: var(--wp--preset--color--primary-deep);
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700;
  margin-bottom: 0.6rem;
}

/* ---- harbour-map placeholder block ---- */
.is-style-vsb-map-placeholder {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--wp--custom--radius--lg);
  border: 1px dashed var(--wp--preset--color--border-strong);
  background:
    repeating-linear-gradient(135deg,
      var(--wp--preset--color--bg-muted) 0 12px,
      var(--wp--preset--color--bg) 12px 24px);
  display: grid; place-items: center;
  color: var(--wp--preset--color--text-muted);
  font-style: italic;
}
.is-style-vsb-map-placeholder::before {
  content: "Havnekort — erstattes af et OSM/statisk-kort i Phase 4";
  padding: 0 2rem; text-align: center; max-width: 80%;
}

/* ---- events list (used until The Events Calendar block replaces it) ---- */
.vsb-year { margin-bottom: 1.5rem; }
.vsb-year:last-child { margin-bottom: 0; }
.vsb-year__label {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--wp--preset--color--primary);
  margin: 0 0 0.6rem;
  letter-spacing: -0.01em;
}

.vsb-events {
  display: grid;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--md);
  background: var(--wp--preset--color--bg-alt);
  overflow: hidden;
}
.vsb-event {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--wp--preset--color--border);
  text-decoration: none;
  color: inherit;
  transition: background var(--wp--custom--duration--fast) var(--wp--custom--easing--standard);
}
.vsb-event:last-child { border-bottom: none; }
.vsb-event:hover { background: var(--wp--preset--color--bg-muted); }
.vsb-event__date {
  width: 4.4rem;
  border-right: 1px solid var(--wp--preset--color--border);
  padding-right: 1.25rem;
  text-align: center;
  font-family: var(--wp--preset--font-family--display);
  line-height: 1;
}
.vsb-event__date .month {
  display: block; font-size: 0.78rem;
  color: var(--wp--preset--color--text-muted);
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.vsb-event__date .day {
  display: block; font-size: 1.85rem; font-weight: 500;
  color: var(--wp--preset--color--primary);
}
.vsb-event__body { display: grid; gap: 0.2rem; min-width: 0; }
.vsb-event__body strong {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  font-size: 1.15rem;
}
.vsb-event__body span {
  color: var(--wp--preset--color--text-muted);
  font-size: 0.9rem;
  line-height: 1.4;
}
/* Sub-lines (excerpt + when) clip to one line each so cards stay tidy.
 * Both share the same font/size so the body looks like one coherent block. */
.vsb-event__body .vsb-event__when,
.vsb-event__body .vsb-event__excerpt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-size: 0.9rem;
}
.vsb-event__body .vsb-event__when {
  font-variant-numeric: tabular-nums;
}
.vsb-event__chevron {
  color: var(--wp--preset--color--primary);
  font-weight: 700;
}
@media (max-width: 559px) {
  .vsb-event { grid-template-columns: auto 1fr; padding: 1rem; }
  .vsb-event__chevron { display: none; }
  .vsb-event__date { padding-right: 1rem; }
}

/* ---- single-event layout: all blocks share the same column ----
   WP's is-layout-constrained CSS sets max-width:68ch on children, but
   the `ch` unit resolves against the *element's own* font size — on
   <h1> with display-font that becomes ~2660px instead of the ~680px
   the body paragraphs get. Override with rem (root-font-relative) so
   title, event-meta, post-content and event-nav share the same width.
   40rem ≈ 680px at our base font size, matching body 68ch. */
.tribe_events-template-default main.wp-block-group > .wp-block-post-title,
.tribe_events-template-default main.wp-block-group > .wp-block-vsb-2026-event-meta,
.tribe_events-template-default main.wp-block-group > .wp-block-post-content,
.tribe_events-template-default main.wp-block-group > .wp-block-vsb-2026-event-nav,
.single-post main.wp-block-group > .wp-block-post-title,
.single-post main.wp-block-group > .wp-block-vsb-2026-news-meta,
.single-post main.wp-block-group > .wp-block-post-featured-image,
.single-post main.wp-block-group > .wp-block-post-content,
.single-post main.wp-block-group > .wp-block-vsb-2026-news-nav {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  /* event-meta's wrapper has 1.25rem padding which would otherwise push
     the outer box 2.5rem wider than title/content. Border-box pulls the
     padding inside the max-width so all blocks share the same outer
     edges. */
  box-sizing: border-box;
}

/* Same fix for section pages (/medlemmer/, /om/, /havnen/): the H1 sits
   in .vsb-section-main alongside the constrained post-content but isn't
   itself constrained — and 68ch on h1 blows up due to display-font ch. */
.vsb-section-main > .wp-block-post-title {
  max-width: 40rem;
  margin-left: 0;
  margin-right: auto;
}

/* ---- single-event meta panel ---- */
.vsb-event-meta {
  margin: 1.5rem 0 0.5rem;
  padding: 1rem 1.25rem;
  background: var(--wp--preset--color--bg-muted);
  border-left: 3px solid var(--wp--preset--color--primary);
  border-radius: var(--wp--custom--radius--sm);
}
.vsb-event-meta__row {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
}
.vsb-event-meta__row + .vsb-event-meta__row { margin-top: 0.5rem; }
.vsb-event-meta__row strong {
  color: var(--wp--preset--color--text-muted);
  font-weight: 500;
}

/* ---- single-event nav (back link + prev/next siblings) ---- */
.vsb-event-nav__back { margin-bottom: 0; }
.vsb-event-nav__back a { color: var(--wp--preset--color--text-muted); text-decoration: none; }
.vsb-event-nav__back a:hover { color: var(--wp--preset--color--primary); text-decoration: underline; }

.vsb-event-nav__siblings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--wp--preset--color--border-soft);
}
.vsb-event-nav__siblings a {
  display: grid;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  background: var(--wp--preset--color--bg-muted);
  border-radius: var(--wp--custom--radius--sm);
  text-decoration: none;
  color: inherit;
  transition: background var(--wp--custom--duration--fast) var(--wp--custom--easing--standard);
}
.vsb-event-nav__siblings a:hover { background: var(--wp--preset--color--bg-alt); }
.vsb-event-nav__next { text-align: right; }
.vsb-event-nav__dir {
  font-size: 0.85rem;
  color: var(--wp--preset--color--text-muted);
}
.vsb-event-nav__title { font-weight: 500; }
@media (max-width: 559px) {
  .vsb-event-nav__siblings { grid-template-columns: 1fr; }
  .vsb-event-nav__next { text-align: left; }
}

/* ---- news-list pagination ---- */
.vsb-news-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--wp--preset--color--border-soft);
  font-size: 0.95rem;
}
.vsb-news-pagination__prev { justify-self: start; }
.vsb-news-pagination__next { justify-self: end; }
.vsb-news-pagination__count { color: var(--wp--preset--color--text-muted); }

/* ---- gæster checklist ---- */
.vsb-checklist {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .vsb-checklist { grid-template-columns: repeat(2, 1fr); } }
.vsb-checklist .is-style-vsb-check-card h4 {
  margin: 0 0 0.3rem;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
}
.vsb-checklist .is-style-vsb-check-card p {
  margin: 0;
  color: var(--wp--preset--color--text-muted);
  font-size: 0.95rem;
}
.vsb-checklist .is-style-vsb-check-card p + p { margin-top: 0.5rem; }

/* ---- partner wall ----
 * Capped at 3 columns on desktop. With 12 partners that's 4 clean rows.
 * Sits in a narrower lane than the rest of the section so logos breathe
 * a little; less "wall of sponsors", more "featured partners". */
.vsb-partners {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: 920px;
  margin: 0 auto 2rem;
}
@media (min-width: 720px) {
  .vsb-partners { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.vsb-partners__cta { max-width: 920px; margin-inline: auto; }

.vsb-partners__cta {
  display: block;
  clear: both;
  margin: 0;
  padding-top: 1rem;
  font-size: 1rem;
  color: var(--wp--preset--color--text);
  max-width: 60ch;
}
.vsb-partners__cta a {
  color: var(--wp--preset--color--primary) !important;
  font-weight: 600;
  text-decoration-color: var(--wp--preset--color--accent);
  text-underline-offset: 0.18em;
}
.vsb-partners__cta a:hover { color: var(--wp--preset--color--primary-soft) !important; }

.vsb-partner-tile {
  aspect-ratio: 3 / 2;
  display: grid; place-items: center;
  background: var(--wp--preset--color--bg-alt);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--md);
  padding: 1rem;
  filter: grayscale(1);
  opacity: 0.85;
  transition:
    filter var(--wp--custom--duration--base) var(--wp--custom--easing--standard),
    opacity var(--wp--custom--duration--base) var(--wp--custom--easing--standard),
    transform var(--wp--custom--duration--base) var(--wp--custom--easing--standard);
}
.vsb-partner-tile:hover { filter: grayscale(0); opacity: 1; transform: translateY(-2px); }
.vsb-partner-tile img   { max-width: 100%; max-height: 80%; width: auto; }

/* ---- site-header darkening on scroll (one of the few JS-light touches) ---- */
header.wp-block-template-part {
  transition: background var(--wp--custom--duration--base) var(--wp--custom--easing--standard);
}

/* ---- footer contrast (override link color on dark surface) ----
 * theme.json sets all links to var(--color-primary) (fjord blue), which
 * disappears on the deep-blue footer. Lift to text-on-dark for the
 * footer template part + bump the all-caps headings to a higher opacity. */

footer.wp-block-template-part a,
footer.wp-block-template-part .wp-block-list a,
footer.wp-block-template-part .wp-block-paragraph a,
footer.wp-block-template-part p a,
footer.wp-block-template-part li a {
  color: var(--wp--preset--color--text-on-dark) !important;
  text-decoration: none;
  opacity: 0.92;
  transition: opacity var(--wp--custom--duration--fast) var(--wp--custom--easing--standard);
}
footer.wp-block-template-part a:hover {
  opacity: 1;
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--accent);
  text-underline-offset: 0.18em;
}
footer.wp-block-template-part h4,
footer.wp-block-template-part .wp-block-heading {
  color: var(--wp--preset--color--text-on-dark) !important;
  opacity: 0.95;
}

/* ---- section hub: 2-col shell with sticky sub-nav sidebar ----
 * Used by /havnen/, /medlemmer/ and any future "hub with sub-pages"
 * page. The sidebar is rendered by the section-sidebar pattern; this
 * just lays it out. */

.vsb-section-shell {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
  align-items: start;
  margin-top: 1rem;
}
@media (min-width: 900px) {
  .vsb-section-shell { grid-template-columns: 240px 1fr; }
}

.vsb-section-nav { position: relative; }
@media (min-width: 900px) {
  .vsb-section-nav {
    position: sticky;
    top: calc(var(--wp--custom--header--height, 76px) + 1rem);
    align-self: start;
  }
}
.vsb-section-nav__label {
  font-family: var(--wp--preset--font-family--body);
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--wp--preset--color--text-muted);
  margin: 0 0 0.6rem 0.85rem;
}
.vsb-section-nav ul {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 0.15rem;
  border-left: 2px solid var(--wp--preset--color--border);
}
.vsb-section-nav li { padding: 0; }
.vsb-section-nav a {
  display: block;
  padding: 0.55rem 0.85rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  text-decoration: none;
  color: var(--wp--preset--color--text);
  font-weight: 500;
  font-size: 0.95rem;
  transition: color var(--wp--custom--duration--fast) var(--wp--custom--easing--standard),
              border-color var(--wp--custom--duration--fast) var(--wp--custom--easing--standard),
              background var(--wp--custom--duration--fast) var(--wp--custom--easing--standard);
  border-radius: 0 var(--wp--custom--radius--sm) var(--wp--custom--radius--sm) 0;
}
.vsb-section-nav a:hover {
  background: var(--wp--preset--color--bg-muted);
  color: var(--wp--preset--color--primary);
}
.vsb-section-nav a.is-active,
.vsb-section-nav a[aria-current="page"] {
  border-left-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--primary);
  font-weight: 600;
}

/* Nested 3rd-level sub-items, shown when their parent is in the active chain.
   The selectors below intentionally use double-class specificity
   (.vsb-section-nav .vsb-section-nav__sub) so they win against the more
   specific `.vsb-section-nav ul { padding: 0 }` rule above — that's the
   bug that previously kept sub-items at the same x as their parent. */
.vsb-section-nav .vsb-section-nav__sub {
  list-style: none;
  margin: 0.3rem 0 0.6rem 2.5rem;   /* sub-rail sits 2.5rem right of parent */
  padding-left: 1.25rem;            /* gap between sub-rail and sub link */
  display: grid;
  gap: 0.05rem;
  border-left: 2px solid var(--wp--preset--color--border-strong);
}
.vsb-section-nav .vsb-section-nav__sub a {
  padding: 0.45rem 0.85rem;
}
.vsb-section-nav__sub li { padding: 0; }
.vsb-section-nav__sub a {
  display: block;
  padding: 0.4rem 0.85rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  border-radius: 0 var(--wp--custom--radius--sm) var(--wp--custom--radius--sm) 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--wp--preset--color--text-muted);
  text-decoration: none;
  transition: color var(--wp--custom--duration--fast) var(--wp--custom--easing--standard),
              border-color var(--wp--custom--duration--fast) var(--wp--custom--easing--standard),
              background var(--wp--custom--duration--fast) var(--wp--custom--easing--standard);
}
.vsb-section-nav__sub a:hover {
  background: var(--wp--preset--color--bg-muted);
  color: var(--wp--preset--color--primary);
}
.vsb-section-nav__sub a.is-active,
.vsb-section-nav__sub a[aria-current="page"] {
  border-left-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--primary);
  font-weight: 600;
}

.vsb-section-main { display: grid; gap: 1.5rem; min-width: 0; }
.vsb-section-main > h1:first-child {
  margin: 0 0 0.4em;
}

/* ---- legacy: single-page member dashboard (page-member-area template)
 * Kept around in case anyone still uses the old anchored layout. */

.vsb-member-shell {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
  align-items: start;
  margin-top: 1rem;
}
@media (min-width: 900px) {
  .vsb-member-shell { grid-template-columns: 220px 1fr; }
}
.vsb-member-nav,
.vsb-member-nav__label,
.vsb-member-nav ul,
.vsb-member-nav li,
.vsb-member-nav a,
.vsb-member-main,
.vsb-member-section { /* aliased to vsb-section-* via the same rules */ }

.vsb-member-section {
  scroll-margin-top: calc(var(--wp--custom--header--height, 76px) + 1rem);
}
.vsb-member-section h2 {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  font-size: var(--wp--preset--font-size--xl);
  margin: 0 0 1rem;
}

/* ---- takster table (kontingenter og gebyrer) ---- */
.vsb-takster {
  width: 100%;
  max-width: 56rem;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: 0.95rem;
}
.vsb-takster th,
.vsb-takster td {
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--wp--preset--color--border);
  vertical-align: top;
}
.vsb-takster thead th {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--bg-alt);
  font-weight: 600;
  text-align: left;
}
.vsb-takster thead th.vsb-takster__year {
  text-align: right;
  width: 4.5rem;
}
.vsb-takster .vsb-takster__group th {
  background: var(--wp--preset--color--bg-muted);
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  text-align: left;
}
.vsb-takster td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 500;
}
.vsb-takster tr.note td {
  color: var(--wp--preset--color--text-muted);
  font-size: 0.85rem;
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.vsb-takster tbody tr:hover { background: var(--wp--preset--color--bg-muted); }
.vsb-takster .vsb-takster__group:hover th { background: var(--wp--preset--color--bg-muted); }

/* ---- udvalg: list of committees with members + bestyrelseskontakt ---- */
.vsb-udvalg-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin: 1.5rem 0 2rem;
}

.vsb-udvalg-card {
  background: var(--wp--preset--color--bg-alt);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--md);
  padding: 1rem 1.2rem;
  display: grid;
  gap: 0.35rem;
  /* When the parent grid stretches all cards to the row's tallest height,
     keep the text at the top and let any extra space sit at the bottom. */
  align-content: start;
}
.vsb-udvalg-card h3 {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.2;
  color: var(--wp--preset--color--primary);
}
.vsb-udvalg-card h3 a {
  color: inherit;
  text-decoration: none;
}
.vsb-udvalg-card h3 a:hover { text-decoration: underline; }
.vsb-udvalg-card__desc {
  margin: 0;
  color: var(--wp--preset--color--text-muted);
  font-size: 0.9rem;
}
.vsb-udvalg-card__members {
  margin: 0;
  font-size: 0.95rem;
}
.vsb-udvalg-card__kontakt {
  margin: 0;
  font-size: 0.85rem;
  color: var(--wp--preset--color--text-muted);
}

/* ---- bestyrelse: structured board-member grid ---- */
.vsb-board {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin: 1.5rem 0 2rem;
}
@media (min-width: 600px) { .vsb-board { grid-template-columns: repeat(2, 1fr); } }

.vsb-board-member {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1rem 1.1rem;
  background: var(--wp--preset--color--bg-alt);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--md);
}
/* When a portrait is present, switch to 2-col layout. VSL board has no
   portraits yet, so cards render as single-column. */
.vsb-board-member:has(> img) { grid-template-columns: 96px 1fr; }
.vsb-board-member > img {
  width: 96px; height: 96px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--wp--preset--color--border);
}
.vsb-board-member__body { min-width: 0; }
.vsb-board-member h3 {
  margin: 0 0 0.15rem;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.2;
}
.vsb-board-member__role {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--accent);
  text-transform: uppercase;
}
.vsb-board-member__resp {
  margin: 0;
  font-size: 0.92rem;
  color: var(--wp--preset--color--text-muted);
  line-height: 1.45;
}
.vsb-board-member__udvalg {
  list-style: disc inside;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  color: var(--wp--preset--color--text);
  line-height: 1.4;
}
.vsb-board-member__udvalg li {
  margin: 0 0 0.15rem;
  padding: 0;
}
.vsb-board-member__udvalg li:last-child { margin-bottom: 0; }

/* ---- Fluent Forms Send-knap — VSB primary palette ----
   FF's default button has a generic light-blue style; override globally
   so all VSB-rendered FF forms (Kontakt, Klubhus-booking) match the
   site's primary CTA appearance. Matches the navy treatment from the
   /om/kontakt/ design reference. */
.fluentform .ff-btn-submit,
.fluentform button[type="submit"].ff_btn_style {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: #fff;
  padding: 0.65rem 1.6rem;
  font-weight: 500;
  border-radius: var(--wp--custom--radius--sm);
  transition: background var(--wp--custom--duration--fast) var(--wp--custom--easing--standard);
}
.fluentform .ff-btn-submit:hover,
.fluentform button[type="submit"].ff_btn_style:hover {
  background: var(--wp--preset--color--primary-deep, #0a2c43);
  border-color: var(--wp--preset--color--primary-deep, #0a2c43);
  color: #fff;
}

/* ---- klubhus booking form (Fluent Forms — uses plugin's default visual) ---- */
.vsb-booking-form { max-width: 36rem; margin: 1.75rem 0 0; }
/* Inline-asterisk for required checkbox options where the field-label is
   intentionally empty (e.g. lejebetingelser — the option text is enough).
   Color matches Fluent Forms' built-in --fluentform-danger so it's visually
   identical to the regular field-level asterisks. */
.vsb-booking-form .vsb-required-mark {
  color: #f56c6c;
  margin-left: 0.15rem;
}
.vsb-booking-form__title {
  margin: 0 0 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--wp--preset--color--border);
}
/* Tighten the gap between consecutive checkbox groups (fadøl + lejebetingelser
   sit next to each other; default FF spacing makes them look unrelated). */
.vsb-booking-form .ff-el-group.ff-el-form-check_inline + .ff-el-group.ff-el-form-check_inline {
  margin-top: -0.6rem;
}

/* ---- back-to-parent breadcrumb (rendered above page title) ---- */
.vsb-back-link {
  margin: 0 0 0.25rem;
  font-size: 0.9rem;
  font-family: var(--wp--preset--font-family--body);
  color: var(--wp--preset--color--text-muted);
}
.vsb-back-link a {
  color: var(--wp--preset--color--text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.vsb-back-link a:hover,
.vsb-back-link a:focus-visible {
  color: var(--wp--preset--color--primary);
  border-bottom-color: currentColor;
}
.vsb-back-link span { margin-right: 0.25rem; }

/* ---- inline rule sub-headings ("Gruppe 1." etc) ----
   The PDF treats these as bold body-font labels above each list, not as
   display-typography sub-sections. Setting them as body-font + slightly
   larger + bold + tight margins matches the source intent. */
.vsb-rules-subhead {
  margin: 1.5rem 0 0.4rem;
  font-family: var(--wp--preset--font-family--body);
  font-size: 1.05rem;
}

/* ---- page eyebrow (small italic muted label above body content) ----
   Used when the page title doesn't fully describe the section it lives in
   (e.g. /om/ titled "Historie" but appears under "Om VSB" in nav). Renders
   right below the H1 in body content. */
.vsb-page-eyebrow {
  margin: -0.5rem 0 1rem;
  font-size: 0.95rem;
  color: var(--wp--preset--color--text-muted);
}

/* ---- "missing document" list-item (no link, red marker) ----
   For document indexes where a row should appear but the file isn't in
   the archive (e.g. a missing indkaldelse). The whole line is plain
   text — no anchor, no hover state — to make it visually obvious
   nothing is clickable. */
.vsb-list-item--missing {
  color: #b32d1f;
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}