/* ==========================================================================
   Apatkuti — organic shapes (site-only layer on top of hixokami-theme)
   Modernised take on the sulihonlap blobs: soft colour washes, blob-masked
   photos, smooth wave edges. Colours come from Design System tokens, so a
   palette remix carries over. Purely decorative: pseudo-elements only.
   ========================================================================== */

:root {
  --apk-blob-1: 62% 38% 54% 46% / 52% 44% 56% 48%;
  --apk-blob-2: 44% 56% 40% 60% / 58% 40% 60% 42%;
  --apk-wave-h: clamp(36px, 5vw, 72px);
  /* Wave: fill below a gentle double curve (viewBox 0 0 1440 80). */
  --apk-wave-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 48C240 8 480 8 720 40s480 40 720 0V80H0Z'/%3E%3C/svg%3E");
  --apk-wave-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 32C240 72 480 72 720 40S1200 0 1440 40V0H0Z'/%3E%3C/svg%3E");
}

/* ---- Hero: drifting colour washes over the photo + wave into the page ---- */
.block-hxo-hero {
  overflow: hidden;
  isolation: isolate;
}
.block-hxo-hero::before {
  content: "";
  position: absolute;
  inset: 0; /* stays inside the hero: an overflowing, transformed layer drew a hairline at the hero's sub-pixel bottom */
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(34% 40% at 82% 22%, color-mix(in srgb, var(--color-secondary) 38%, transparent), transparent 70%),
    radial-gradient(30% 38% at 12% 88%, color-mix(in srgb, var(--color-primary) 42%, transparent), transparent 70%),
    radial-gradient(22% 26% at 58% 96%, color-mix(in srgb, var(--color-tertiary) 30%, transparent), transparent 70%);
  background-size: 140% 140%;
  background-repeat: no-repeat;
  mix-blend-mode: screen; /* no filter here: blur + blend hides the photo in Chrome */
  animation: apk-drift 26s ease-in-out infinite alternate; /* moves background-position, not transform */
}
.block-hxo-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px 0;
  height: calc(var(--apk-wave-h) + 2px);
  /* Above the photo and the decorative images (z 5) so everything ends exactly on the curve;
     below the text/buttons (z 10). */
  z-index: 6;
  pointer-events: none;
  background: var(--color-background);
  /* Wave + a solid strip at the very bottom: the mask's anti-aliased last row otherwise lets a
     hairline of the photo show through at sub-pixel hero heights. */
  -webkit-mask: var(--apk-wave-down) top / 100% calc(100% - 2px) no-repeat, linear-gradient(#000 0 0) bottom / 100% 4px no-repeat;
          mask: var(--apk-wave-down) top / 100% calc(100% - 2px) no-repeat, linear-gradient(#000 0 0) bottom / 100% 4px no-repeat;
}

/* ---- Header & main menu ----
   Frosted bar, bigger logo, pill-shaped menu items (current section = soft turquoise pill),
   a chevron on items with a submenu, rounded dropdown panels, pill CTA.
   Theme nav rules sit in a layer with !important colour/weight, so colour is steered through
   --header-link*, and the weight stays the theme's. */
.site-header {
  /* Tint only the outer header; the bar inside (inline background) is cleared below — two stacked 86% layers
     were ~98% opaque, so there was nothing left for the blur to show (most visible in Safari).
     --header-bg itself stays solid: the mobile drawer uses it and must not be see-through. */
  background-color: color-mix(in srgb, var(--color-background) 78%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
          backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
}
.site-header__bar { background-color: transparent !important; } /* beats the bar's inline background */
.site-header__brand img { height: 46px; }

.hxo-nav--simple { gap: 2px; }
.hxo-nav--simple > li > a {
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  letter-spacing: 0.01em;
  transition: background-color 200ms ease, color 200ms ease;
}
.hxo-nav--simple > li > a:hover,
.hxo-nav--simple > li:focus-within > a,
.hxo-nav--simple > li.menu-item-has-children:hover > a {
  --header-link: var(--color-primary-dark);
  --header-link-hover: var(--color-primary-dark);
  background: var(--color-primary-lighter);
}
.hxo-nav--simple > li:is(.current-menu-item, .current-menu-ancestor, .current_page_item, .current_page_ancestor, .current-page-ancestor) > a {
  --header-link: var(--color-primary-dark);
  background: color-mix(in srgb, var(--color-primary-light) 45%, transparent);
}
/* the theme's sliding underline → a small chevron on items with a submenu */
.hxo-nav--simple > li > a::after { display: none; }
.hxo-nav--simple > li.menu-item-has-children > a { padding-right: 32px; }
.hxo-nav--simple > li.menu-item-has-children > a::after {
  display: block;
  content: "";
  left: auto;
  right: 15px;
  top: 50%;
  bottom: auto;
  width: 6px;
  height: 6px;
  background: none;
  margin-top: -2px; /* sits on the lowercase x-height centre (measured), not the line box centre */
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform-origin: 50% 50%; /* the theme's underline set it to left → rotated off-centre */
  transform: translateY(-1.5px) rotate(45deg); /* optical centre: the v's weight sits low */
  transition: transform 200ms ease;
}
.hxo-nav--simple > li.menu-item-has-children:hover > a::after,
.hxo-nav--simple > li.menu-item-has-children:focus-within > a::after {
  transform: translateY(1.5px) rotate(-135deg);
}

/* dropdown panel */
.hxo-nav--simple > li > .sub-menu {
  top: calc(100% + 12px);
  min-width: 250px;
  padding: 10px;
  background: #fff;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgb(35 38 47 / 0.05), 0 24px 48px -16px rgb(35 38 47 / 0.25);
}
.hxo-nav--simple > li > .sub-menu::before { /* hover bridge across the 12px gap */
  content: "";
  position: absolute;
  inset: -14px 0 auto 0;
  height: 14px;
}
.hxo-nav--simple .sub-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.9375rem;
  transition: background-color 150ms ease, color 150ms ease;
}
.hxo-nav--simple .sub-menu a::after { display: none; }
.hxo-nav--simple .sub-menu a:hover,
.hxo-nav--simple .sub-menu a:focus-visible {
  --header-link: var(--color-primary-dark);
  --header-link-hover: var(--color-primary-dark);
  background: var(--color-primary-lighter);
}
.hxo-nav--simple .sub-menu li:is(.current-menu-item, .current_page_item) > a {
  --header-link: var(--color-primary-dark);
  background: color-mix(in srgb, var(--color-primary-light) 35%, transparent);
}

/* CTA */
.site-header__cta a {
  --text-sm: 0.9375rem; /* the CTA uses the layered !text-sm utility */
  padding: 10px 22px;
}

/* Every filled turquoise button (bg-primary-dark: header CTA, heroes, cards, banners, Letöltés,
   Regisztráció, the contact band…) gets the header CTA's look: pill, soft turquoise glow, small lift. */
:is(a, button)[class~="bg-primary-dark"] {
  border-radius: 999px;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--color-primary-dark) 70%, transparent);
  transition: transform 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
}
:is(a, button)[class~="bg-primary-dark"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--color-primary-dark) 80%, transparent);
}

/* ---- Docx bullet lists (apk_bullets_to_list turns "• " lines into <ul class="apk-list">) ----
   Hanging indent, air between items, small organic bullets cycling through the brand colours. */
.apk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7em;
}
.apk-list > li {
  position: relative;
  padding-left: 1.7em;
  text-wrap: pretty;
}
.apk-list > li::before {
  content: "";
  position: absolute;
  left: 0.25em;
  top: 0.52em;
  width: 0.62em;
  height: 0.62em;
  border-radius: 62% 38% 54% 46% / 52% 44% 56% 48%;
  background: var(--color-primary);
}
.apk-list > li:nth-child(4n + 2)::before { background: var(--color-secondary); border-radius: 44% 56% 40% 60% / 58% 40% 60% 42%; }
.apk-list > li:nth-child(4n + 3)::before { background: var(--color-error); }
.apk-list > li:nth-child(4n + 4)::before { background: var(--color-tertiary); border-radius: 44% 56% 40% 60% / 58% 40% 60% 42%; }
/* on dark sections the pale tones read better */
:is(.block-hxo-feature-cards.bg-neutral-900, .block-hxo-text-columns.bg-neutral-700) .apk-list > li::before { background: var(--color-primary-light); }
:is(.block-hxo-feature-cards.bg-neutral-900, .block-hxo-text-columns.bg-neutral-700) .apk-list > li:nth-child(4n + 2)::before { background: var(--color-secondary-light); }
:is(.block-hxo-feature-cards.bg-neutral-900, .block-hxo-text-columns.bg-neutral-700) .apk-list > li:nth-child(4n + 3)::before { background: var(--color-error-light); }
:is(.block-hxo-feature-cards.bg-neutral-900, .block-hxo-text-columns.bg-neutral-700) .apk-list > li:nth-child(4n + 4)::before { background: var(--color-tertiary-light); }

/* ---- Iskolánk subpages: previous / next navigation (apatkuti-organic.php) ---- */
.apk-pagenav {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: var(--space-6) var(--space-6) var(--space-10); /* the section above already ends with its own padding */
}
.apk-pagenav__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-6);
}
.apk-pagenav__link {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-6) var(--space-4) var(--space-4);
  background: #fff;
  border-radius: 32px 12px 32px 32px;
  box-shadow: 0 1px 2px rgb(35 38 47 / 0.04), 0 12px 32px -18px rgb(35 38 47 / 0.22);
  text-decoration: none !important;
  color: var(--color-text);
  transition: translate 300ms var(--easing-out, ease-out), box-shadow 300ms var(--easing-out, ease-out);
}
.apk-pagenav__link:hover {
  translate: 0 -3px;
  box-shadow: 0 1px 2px rgb(35 38 47 / 0.04), 0 22px 40px -20px rgb(35 38 47 / 0.3);
}
.apk-pagenav__link--next {
  flex-direction: row-reverse;
  text-align: right;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
  border-radius: 12px 32px 32px 32px;
}
.apk-pagenav__thumb {
  flex: none;
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: var(--apk-blob-1);
}
.apk-pagenav__link--next .apk-pagenav__thumb { border-radius: var(--apk-blob-2); }
.apk-pagenav__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.apk-pagenav__label {
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--color-primary-dark);
}
.apk-pagenav__link--prev .apk-pagenav__label::before { content: "←"; display: inline-block; margin-right: 0.4em; transition: translate 200ms ease; }
.apk-pagenav__link--next .apk-pagenav__label::after { content: "→"; display: inline-block; margin-left: 0.4em; transition: translate 200ms ease; }
.apk-pagenav__link--prev:hover .apk-pagenav__label::before { translate: -3px 0; }
.apk-pagenav__link--next:hover .apk-pagenav__label::after { translate: 3px 0; }
.apk-pagenav__title {
  font-family: var(--font-family-heading);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  font-weight: 600;
  line-height: 1.25;
}
.apk-pagenav__all {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-text-secondary) !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.apk-pagenav__all:hover {
  background: var(--color-primary-lighter);
  border-color: var(--color-primary-lighter);
  color: var(--color-primary-dark) !important;
}
/* slim version under the hero: one light row of text pills, no thumbnails */
.apk-pagenav--compact { padding: var(--space-2) var(--space-6) 0; }
.apk-pagenav--compact .apk-pagenav__link {
  gap: 0;
  padding: 8px 18px;
  background: transparent;
  border-radius: 999px;
  box-shadow: none;
}
.apk-pagenav--compact .apk-pagenav__link:hover {
  translate: none;
  box-shadow: none;
  background: var(--color-primary-lighter);
}
.apk-pagenav--compact .apk-pagenav__link--prev { justify-self: start; }
.apk-pagenav--compact .apk-pagenav__link--next { justify-self: end; }
.apk-pagenav--compact .apk-pagenav__text { flex-direction: row; align-items: baseline; gap: 0.5em; }
.apk-pagenav--compact .apk-pagenav__link--next { flex-direction: row; } /* reads "Következő → Csapatunk" */
.apk-pagenav--compact .apk-pagenav__label { font-size: 0.8125rem; }
.apk-pagenav--compact .apk-pagenav__title { font-family: var(--font-family-sans); font-size: 0.9375rem; font-weight: 500; }
@media (max-width: 767px) {
  .apk-pagenav:not(.apk-pagenav--compact) .apk-pagenav__inner { grid-template-columns: 1fr; }
  .apk-pagenav--compact .apk-pagenav__inner { grid-template-columns: 1fr 1fr; }
  .apk-pagenav--compact .apk-pagenav__all { display: none; }
  .apk-pagenav--compact .apk-pagenav__label { display: none; }
  .apk-pagenav__all { justify-self: center; order: 3; }
  .apk-pagenav__spacer { display: none; }
}

/* ---- Timelines: a soft seasonal blob behind each entry's date (season from apk_timeline_seasons) ----
   autumn = orange, winter = cool blue, spring = fresh green, summer = sunny yellow, no month = turquoise. */
.apk-tl-entry { --apk-season: var(--color-primary-light); isolation: isolate; }
.apk-tl-entry.apk-season--autumn { --apk-season: var(--color-secondary-light); }
.apk-tl-entry.apk-season--winter { --apk-season: var(--color-info-light); }
.apk-tl-entry.apk-season--spring { --apk-season: var(--color-success-light); }
.apk-tl-entry.apk-season--summer { --apk-season: var(--color-warning-light); }
.apk-tl-entry h3:first-of-type { position: relative; }
.apk-tl-entry h3:first-of-type::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -0.6em;
  width: clamp(92px, 9vw, 128px);
  aspect-ratio: 1;
  translate: 0 -50%;
  z-index: -1;
  border-radius: var(--apk-blob-1);
  background: color-mix(in srgb, var(--apk-season) 40%, transparent);
  animation: apk-morph 16s ease-in-out infinite alternate;
  pointer-events: none;
}
.apk-tl-entry:nth-child(even) h3:first-of-type::before { border-radius: var(--apk-blob-2); animation-delay: -7s; }
/* entries on the left half are right-aligned on desktop: blob hugs the right end of the date */
@media (min-width: 1024px) {
  .apk-tl-entry [class~="lg:text-right"] h3:first-of-type::before { left: auto; right: -0.6em; }
}

/* ---- Gallery: columns end level ----
   Images go round-robin into the columns and each column has its own tile shapes, so the middle column of
   the 3-column variant (wide bands) always ends shorter. On desktop, stretch the columns to equal height and
   let a column's tiles share the leftover space (photos are object-fit: cover, so they just crop a bit taller). */
@media (min-width: 1024px) {
  .block-hxo-gallery [class~="lg:flex-row"] { align-items: stretch; }
  .block-hxo-gallery [class~="lg:flex-row"] > div > div { flex: 1 1 auto; }
}

/* ---- 404 page (apatkuti-organic.php) ---- */
.error404 main > div:first-child:not([class*="block-"]):not(.apk-404) { display: none; } /* theme's empty alert box */
.apk-404 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: clamp(48px, 8vw, 96px) var(--space-6) clamp(64px, 9vw, 120px);
  text-align: center;
}
/* soft seasonal blobs in the background */
.apk-404::before,
.apk-404::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: var(--apk-blob-1);
  animation: apk-morph 18s ease-in-out infinite alternate;
  pointer-events: none;
}
.apk-404::before {
  width: clamp(220px, 30vw, 420px); aspect-ratio: 1;
  top: 6%; left: -6%;
  background: color-mix(in srgb, var(--color-secondary-light) 45%, transparent);
}
.apk-404::after {
  width: clamp(200px, 26vw, 360px); aspect-ratio: 1;
  bottom: -8%; right: -4%;
  border-radius: var(--apk-blob-2);
  background: color-mix(in srgb, var(--color-success-light) 45%, transparent);
  animation-delay: -8s;
}
.apk-404__leaf {
  position: absolute;
  z-index: -1;
  width: clamp(120px, 16vw, 230px);
  height: auto;
  pointer-events: none;
  opacity: 0.9;
}
.apk-404__leaf--a { top: 4%; right: 3%; rotate: 12deg; }
.apk-404__leaf--b { bottom: 6%; left: 3%; rotate: -8deg; }
.apk-404__inner { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.apk-404__code {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.5vw, 20px);
  font-family: var(--font-family-heading);
  font-weight: 600;
  font-size: clamp(6rem, 4rem + 9vw, 12rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-primary-dark);
  /* at this size Fraunces' automatic optical size picks its hairline display cut; a text-size cut is sturdier */
  font-optical-sizing: none;
  font-variation-settings: "opsz" 36;
}
.apk-404__zero {
  position: relative;
  display: grid;
  place-items: center;
  width: 0.78em;
  aspect-ratio: 1;
}
.apk-404__zero::before { /* the blob the emblem sits on */
  content: "";
  position: absolute;
  inset: -4%;
  z-index: -1;
  border-radius: var(--apk-blob-2);
  background: var(--color-primary-lighter);
  animation: apk-morph 12s ease-in-out infinite alternate;
}
.apk-404__emblem {
  width: 78%;
  height: auto;
  animation: apk-404-float 5s ease-in-out infinite alternate;
}
@keyframes apk-404-float { from { translate: 0 -4%; rotate: -3deg; } to { translate: 0 4%; rotate: 3deg; } }
.apk-404__title {
  margin: var(--space-7) 0 var(--space-4);
  font-family: var(--font-family-heading);
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-text);
}
.apk-404__text {
  margin: 0 0 var(--space-8);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  text-wrap: pretty;
}
.apk-404__home {
  display: inline-flex;
  padding: 14px 30px;
  color: #fff !important;
  font-size: 1rem;
  text-decoration: none !important;
}
.apk-404__more {
  margin: var(--space-9) 0 var(--space-4);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--color-text-tertiary);
}
.apk-404__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.apk-404__pill {
  padding: 9px 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(35 38 47 / 0.05), 0 8px 20px -14px rgb(35 38 47 / 0.3);
  color: var(--color-text) !important;
  font-size: 0.9375rem;
  text-decoration: none !important;
  transition: background-color 200ms ease, color 200ms ease, translate 200ms ease;
}
.apk-404__pill:hover { background: var(--color-primary-lighter); color: var(--color-primary-dark) !important; translate: 0 -2px; }
@media (prefers-reduced-motion: reduce) {
  .apk-404__emblem, .apk-404__zero::before, .apk-404::before, .apk-404::after { animation: none; }
}

/* ---- Numbered steps (hxo-numbered-list): soft cards, coloured numbers on blobs, tagline as a tag ---- */
.block-hxo-numbered-list [class~="gap-[var(--space-11)]"] { gap: var(--space-6); }
.block-hxo-numbered-list [class~="lg:grid-cols-[170px_1fr]"] {
  --apk-c: var(--color-primary-dark);
  --apk-c-soft: var(--color-primary-lighter);
  align-items: center;
  padding: var(--space-7) var(--space-8);
  background: #fff;
  border-radius: 36px 12px 36px 36px;
  box-shadow: 0 1px 2px rgb(35 38 47 / 0.04), 0 14px 36px -20px rgb(35 38 47 / 0.22);
}
.block-hxo-numbered-list [class~="lg:grid-cols-[170px_1fr]"]:nth-child(3n + 2) {
  --apk-c: var(--color-secondary-dark); --apk-c-soft: var(--color-secondary-lighter);
  border-radius: 12px 36px 36px 36px;
}
.block-hxo-numbered-list [class~="lg:grid-cols-[170px_1fr]"]:nth-child(3n + 3) {
  --apk-c: var(--color-error-dark); --apk-c-soft: var(--color-error-lighter);
  border-radius: 36px 36px 12px 36px;
}
.block-hxo-numbered-list [class~="lg:grid-cols-[170px_1fr]"] > p:first-child {
  --color-text-tertiary: var(--apk-c);
  position: relative;
  isolation: isolate;
  justify-self: center;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 36; /* sturdier than the hairline display cut at this size */
}
.block-hxo-numbered-list [class~="lg:grid-cols-[170px_1fr]"] > p:first-child::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 1.15em;
  aspect-ratio: 1;
  translate: -50% -50%;
  z-index: -1;
  border-radius: var(--apk-blob-1);
  background: var(--apk-c-soft);
  animation: apk-morph 16s ease-in-out infinite alternate;
}
.block-hxo-numbered-list [class~="lg:grid-cols-[170px_1fr]"]:nth-child(even) > p:first-child::before { border-radius: var(--apk-blob-2); animation-delay: -6s; }
/* the small line above the title → turquoise tag */
.block-hxo-numbered-list [class~="lg:grid-cols-[170px_1fr]"] > div > p:first-child:has(+ :is(h2, h3)) {
  --color-text-tertiary: var(--color-primary-dark);
  width: fit-content;
  padding: 0.25em 0.9em;
  border-radius: 999px;
  background: var(--color-primary-lighter);
  font-size: 0.8125rem;
}
.block-hxo-numbered-list [class~="lg:grid-cols-[170px_1fr]"] > div a:not([class~="bg-primary-dark"]) {
  --color-text: var(--color-primary-dark);
  font-weight: 500;
}

/* ---- Icon cards whose titles are dates (meeting dates): white cards with a seasonal blob behind the date ---- */
.block-hxo-feature-cards article.apk-tl-entry {
  isolation: isolate;
  overflow: hidden; /* the seasonal blob stays inside the card */
  padding: var(--space-8) var(--space-6) var(--space-7);
  background: #fff;
  border-radius: 32px 12px 32px 32px;
  box-shadow: 0 1px 2px rgb(35 38 47 / 0.04), 0 12px 32px -18px rgb(35 38 47 / 0.22);
  transition: translate 300ms var(--easing-out, ease-out), box-shadow 300ms var(--easing-out, ease-out);
}
.block-hxo-feature-cards article.apk-tl-entry:nth-child(even) { border-radius: 12px 32px 32px 32px; }
.block-hxo-feature-cards article.apk-tl-entry:hover { translate: 0 -3px; }
.block-hxo-feature-cards article.apk-tl-entry h3:first-of-type::before,
.block-hxo-feature-cards article.apk-tl-entry h2:first-of-type::before {
  left: 50%;
  translate: -50% -50%;
  width: clamp(84px, 7vw, 104px);
  background: color-mix(in srgb, var(--apk-season) 45%, transparent);
}
.block-hxo-feature-cards article.apk-tl-entry h2:first-of-type { position: relative; }

/* ---- Text + Media: blob-shaped photo with a colour blob behind it ---- */
.block-hxo-text-media [class~="lg:order-1"]:has(> .overflow-hidden),
.block-hxo-text-media [class~="lg:order-2"]:has(> .overflow-hidden) {
  position: relative;
  isolation: isolate;
}
.block-hxo-text-media [class~="lg:order-1"]:has(> .overflow-hidden)::before,
.block-hxo-text-media [class~="lg:order-2"]:has(> .overflow-hidden)::before {
  content: "";
  position: absolute;
  inset: 7% -5% -6% 9%;
  z-index: -1;
  border-radius: var(--apk-blob-2);
  background: var(--color-tertiary-light);
  animation: apk-morph 16s ease-in-out infinite alternate-reverse;
}
/* Image on the left → turquoise blob, offset the other way. */
.block-hxo-text-media [class~="lg:order-1"]:has(> .overflow-hidden)::before {
  inset: 9% 9% -6% -5%;
  background: var(--color-primary-light);
}
.block-hxo-text-media .overflow-hidden:has(> img),
.block-hxo-text-media .overflow-hidden:has(> picture) {
  border-radius: var(--apk-blob-1);
  animation: apk-morph 18s ease-in-out infinite alternate;
}

/* ---- Stats: each number sits on a pale blob ---- */
.block-hxo-stats .grid > div {
  position: relative;
  isolation: isolate;
}
.block-hxo-stats .grid > div::before {
  content: "";
  position: absolute;
  top: -1.25rem;
  left: 50%;
  width: clamp(140px, 16vw, 200px);
  aspect-ratio: 1;
  translate: -50% 0;
  z-index: -1;
  border-radius: var(--apk-blob-1);
  background: var(--color-primary-lighter);
  animation: apk-morph 14s ease-in-out infinite alternate;
}
.block-hxo-stats .grid > div:nth-child(3n + 2)::before {
  border-radius: var(--apk-blob-2);
  background: var(--color-tertiary-light);
  animation-delay: -5s;
}
.block-hxo-stats .grid > div:nth-child(3n + 3)::before {
  background: var(--color-secondary-lighter);
  animation-delay: -9s;
}

/* ---- Dark sections (Feature Cards, Text Columns): wavy top/bottom caps + faint glow ----
   The waves are caps drawn OUTSIDE the box (in the section's margin), never cut out of it, so
   content can't run into a curve whatever padding the block has. Joins are handled so two waves
   never meet: after the hero the hero's own wave turns dark; dark+dark and dark+footer join flat. */
.block-hxo-text-columns.bg-neutral-700 { background-color: var(--color-neutral-900); }
:is(.block-hxo-feature-cards.bg-neutral-900, .block-hxo-text-columns.bg-neutral-700) {
  --apk-dark: var(--color-neutral-900);
  /* Body text/taglines here use neutral-200/300, which are warm beige in this palette and clash with the
     slate; inside the dark bands they become cool off-whites mixed from the slate itself. */
  --color-neutral-200: color-mix(in srgb, #fff 88%, var(--color-neutral-900));
  --color-neutral-300: color-mix(in srgb, #fff 78%, var(--color-neutral-900));
  position: relative;
  margin-block: var(--apk-wave-h);
  /* closest-side: each glow is fully transparent before it reaches an edge, so it never ends in a
     hard line against the flat-coloured caps or the hero's wave. */
  background-image:
    radial-gradient(closest-side at 82% 38%, color-mix(in srgb, var(--color-primary) 24%, transparent), transparent),
    radial-gradient(closest-side at 16% 64%, color-mix(in srgb, var(--color-secondary) 16%, transparent), transparent);
}
:is(.block-hxo-feature-cards.bg-neutral-900, .block-hxo-text-columns.bg-neutral-700)::before,
:is(.block-hxo-feature-cards.bg-neutral-900, .block-hxo-text-columns.bg-neutral-700)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--apk-wave-h) + 1px);
  pointer-events: none;
  background: var(--apk-dark);
}
:is(.block-hxo-feature-cards.bg-neutral-900, .block-hxo-text-columns.bg-neutral-700)::before {
  bottom: calc(100% - 1px);
  -webkit-mask: var(--apk-wave-down) top / 100% calc(100% - 2px) no-repeat, linear-gradient(#000 0 0) bottom / 100% 3px no-repeat;
          mask: var(--apk-wave-down) top / 100% calc(100% - 2px) no-repeat, linear-gradient(#000 0 0) bottom / 100% 3px no-repeat;
}
:is(.block-hxo-feature-cards.bg-neutral-900, .block-hxo-text-columns.bg-neutral-700)::after {
  top: calc(100% - 1px);
  -webkit-mask: var(--apk-wave-up) bottom / 100% calc(100% - 2px) no-repeat, linear-gradient(#000 0 0) top / 100% 3px no-repeat;
          mask: var(--apk-wave-up) bottom / 100% calc(100% - 2px) no-repeat, linear-gradient(#000 0 0) top / 100% 3px no-repeat;
}
:is(.block-hxo-feature-cards.bg-neutral-900, .block-hxo-text-columns.bg-neutral-700) > * {
  position: relative;
}
/* Scroll-reveal: the dark band itself (with its wave caps) stays put, only its content fades/lifts in,
   so its joins with the hero, the footer or another dark band never drift apart mid-animation. */
:is(.block-hxo-feature-cards.bg-neutral-900, .block-hxo-text-columns.bg-neutral-700) {
  opacity: 1;
  transform: none;
  transition: none;
}
@media (prefers-reduced-motion: no-preference) {
  :is(.block-hxo-feature-cards.bg-neutral-900, .block-hxo-text-columns.bg-neutral-700) > * {
    opacity: 0;
    translate: 0 14px;
    transition: opacity 520ms cubic-bezier(0.22, 0.61, 0.36, 1), translate 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  :is(.block-hxo-feature-cards.bg-neutral-900, .block-hxo-text-columns.bg-neutral-700)[data-visible="true"] > * {
    opacity: 1;
    translate: 0 0;
  }
}
/* Right after the hero: one wave only — the hero's, painted dark. */
.block-hxo-hero:has(+ :is(.block-hxo-feature-cards.bg-neutral-900, .block-hxo-text-columns.bg-neutral-700))::after {
  background: var(--color-neutral-900);
}
.block-hxo-hero + :is(.block-hxo-feature-cards.bg-neutral-900, .block-hxo-text-columns.bg-neutral-700) { margin-top: -2px; } /* overlap the hero's dark strip: no sub-pixel hairline */
.block-hxo-hero + :is(.block-hxo-feature-cards.bg-neutral-900, .block-hxo-text-columns.bg-neutral-700)::before { display: none; }
/* Two dark sections in a row: one continuous dark band. */
:is(.block-hxo-feature-cards.bg-neutral-900, .block-hxo-text-columns.bg-neutral-700):has(+ :is(.block-hxo-feature-cards.bg-neutral-900, .block-hxo-text-columns.bg-neutral-700)) { margin-bottom: 0; }
:is(.block-hxo-feature-cards.bg-neutral-900, .block-hxo-text-columns.bg-neutral-700):has(+ :is(.block-hxo-feature-cards.bg-neutral-900, .block-hxo-text-columns.bg-neutral-700))::after { display: none; }
:is(.block-hxo-feature-cards.bg-neutral-900, .block-hxo-text-columns.bg-neutral-700) + :is(.block-hxo-feature-cards.bg-neutral-900, .block-hxo-text-columns.bg-neutral-700) { margin-top: 0; }
:is(.block-hxo-feature-cards.bg-neutral-900, .block-hxo-text-columns.bg-neutral-700) + :is(.block-hxo-feature-cards.bg-neutral-900, .block-hxo-text-columns.bg-neutral-700)::before { display: none; }
/* Next to a CTA photo banner: no cream strip — the dark wave curves straight into the photo. */
:is(.block-hxo-feature-cards.bg-neutral-900, .block-hxo-text-columns.bg-neutral-700):has(+ .block-hxo-cta) { margin-bottom: 0; z-index: 2; }
.block-hxo-cta + :is(.block-hxo-feature-cards.bg-neutral-900, .block-hxo-text-columns.bg-neutral-700) { margin-top: 0; z-index: 2; }
/* Last section before the footer: the footer's own wave does the transition. */
main > :is(.block-hxo-feature-cards.bg-neutral-900, .block-hxo-text-columns.bg-neutral-700):last-child { margin-bottom: 0 !important; }
main > :is(.block-hxo-feature-cards.bg-neutral-900, .block-hxo-text-columns.bg-neutral-700):last-child::after { display: none; }

/* ---- Footer: wave rising into the CTA above + soft corner glow ---- */
.site-footer::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--apk-wave-h) + 2px) 0 auto 0;
  height: var(--apk-wave-h);
  z-index: 1;
  pointer-events: none;
  background: var(--footer-bg);
  /* solid strip at the bottom so the wave fuses with the footer without a hairline */
  -webkit-mask: var(--apk-wave-down) top / 100% calc(100% - 2px) no-repeat, linear-gradient(#000 0 0) bottom / 100% 4px no-repeat;
          mask: var(--apk-wave-down) top / 100% calc(100% - 2px) no-repeat, linear-gradient(#000 0 0) bottom / 100% 4px no-repeat;
}
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: min(45%, 520px);
  pointer-events: none;
  /* closest-side: fully transparent before any edge, so no visible box line */
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent);
}
.site-footer > * {
  position: relative;
  z-index: 1;
}

/* ---- News cards (home Latest Posts block + the Hírek / category listings): editorial cards instead of boxed ones ----
   The blog-card partial uses Tailwind `!` utilities that read CSS variables
   (var(--text-md), var(--font-weight-bold), var(--color-text) …), so we
   restyle by redefining those variables locally rather than fighting !important. */
:is(.block-hxo-latest-posts, body.blog, body.archive) .grid:has(> article) {
  gap: var(--space-9) var(--space-7);
}
:is(.block-hxo-latest-posts, body.blog, body.archive) .grid > article:not(.bg-surface) {
  background: none;
  box-shadow: none;
  border-radius: 0;
  gap: var(--space-5);
}
:is(.block-hxo-latest-posts, body.blog, body.archive) .grid > article:not(.bg-surface) > a > div {
  border-radius: 36px 12px 36px 36px;
  isolation: isolate;
}
:is(.block-hxo-latest-posts, body.blog, body.archive) .grid > article:not(.bg-surface):nth-child(3n + 2) > a > div { border-radius: 12px 36px 36px 36px; }
:is(.block-hxo-latest-posts, body.blog, body.archive) .grid > article:not(.bg-surface):nth-child(3n + 3) > a > div { border-radius: 36px 36px 12px 36px; }
:is(.block-hxo-latest-posts, body.blog, body.archive) .grid > article:not(.bg-surface) img {
  transition: transform 600ms var(--easing-out, ease-out);
}
:is(.block-hxo-latest-posts, body.blog, body.archive) .grid > article:not(.bg-surface):hover img {
  transform: scale(1.05);
}
/* Text column: align with the image edge, fill height so meta rows line up. */
:is(.block-hxo-latest-posts, body.blog, body.archive) .grid > article:not(.bg-surface) > div {
  flex: 1;
  padding-inline: 0;
  padding-bottom: 0;
  gap: var(--space-5);
}
:is(.block-hxo-latest-posts, body.blog, body.archive) .grid > article:not(.bg-surface) > div > div:first-child {
  gap: var(--space-3);
}
/* Category → small turquoise tag. */
:is(.block-hxo-latest-posts, body.blog, body.archive) .grid > article:not(.bg-surface) > div > div:first-child > p:first-child {
  --color-text-tertiary: var(--color-primary-dark);
  --text-sm: 0.8125rem;
  width: fit-content;
  padding: 0.2em 0.85em;
  border-radius: 999px;
  background: var(--color-primary-lighter);
  letter-spacing: 0.02em;
}
/* Title in the heading face, like every other section. */
:is(.block-hxo-latest-posts, body.blog, body.archive) .grid > article:not(.bg-surface) :is(h2, h3) {
  --text-md: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --font-weight-bold: 600;
  font-family: var(--font-family-heading);
}
:is(.block-hxo-latest-posts, body.blog, body.archive) .grid > article:not(.bg-surface) :is(h2, h3) a {
  transition: color var(--duration-normal, 200ms);
}
:is(.block-hxo-latest-posts, body.blog, body.archive) .grid > article:not(.bg-surface):hover :is(h2, h3) a {
  --color-text: var(--color-primary-dark);
}
/* Meta: drop avatar + "admin", keep date · read time, pinned to the bottom. */
:is(.block-hxo-latest-posts, body.blog, body.archive) .grid > article:not(.bg-surface) > div > div:last-child {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
:is(.block-hxo-latest-posts, body.blog, body.archive) .grid > article:not(.bg-surface) > div > div:last-child > .shrink-0,
:is(.block-hxo-latest-posts, body.blog, body.archive) .grid > article:not(.bg-surface) > div > div:last-child > div > p:first-child {
  display: none;
}
:is(.block-hxo-latest-posts, body.blog, body.archive) .grid > article:not(.bg-surface) > div > div:last-child {
  --color-text-secondary: var(--color-text-tertiary);
}

/* ---- Feature Cards (image cards, light or dark): same editorial style as the news cards ---- */
.block-hxo-feature-cards article:has(> div[style*="aspect-ratio"]) {
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  gap: var(--space-5);
}
.block-hxo-feature-cards.bg-neutral-900 article:has(> div[style*="aspect-ratio"]) {
  --color-text: #fff;
  --color-text-secondary: var(--color-neutral-300);
}
.block-hxo-feature-cards .grid:has(> article > div[style*="aspect-ratio"]) {
  gap: var(--space-9) var(--space-7);
}
.block-hxo-feature-cards article > div[style*="aspect-ratio"] {
  border-radius: 36px 12px 36px 36px;
  isolation: isolate;
}
.block-hxo-feature-cards .grid > article:nth-child(3n + 2) > div[style*="aspect-ratio"] { border-radius: 12px 36px 36px 36px; }
.block-hxo-feature-cards .grid > article:nth-child(3n + 3) > div[style*="aspect-ratio"] { border-radius: 36px 36px 12px 36px; }
.block-hxo-feature-cards article > div[style*="aspect-ratio"] img {
  transition: transform 600ms var(--easing-out, ease-out);
}
.block-hxo-feature-cards article:hover > div[style*="aspect-ratio"] img {
  transform: scale(1.05);
}
.block-hxo-feature-cards article:has(> div[style*="aspect-ratio"]) > div:last-child {
  padding: 0;
  gap: var(--space-3);
}
/* Tagline → turquoise tag (light: pale turquoise; dark: translucent turquoise). */
.block-hxo-feature-cards article:has(> div[style*="aspect-ratio"]) > div:last-child > p:first-child:has(+ :is(h2, h3)) {
  --color-text-tertiary: var(--color-primary-dark);
  --text-base: 0.8125rem;
  width: fit-content;
  padding: 0.2em 0.85em;
  border-radius: 999px;
  background: var(--color-primary-lighter);
  letter-spacing: 0.02em;
}
.block-hxo-feature-cards.bg-neutral-900 article:has(> div[style*="aspect-ratio"]) > div:last-child > p:first-child:has(+ :is(h2, h3)) {
  --color-text-tertiary: var(--color-primary-light);
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.block-hxo-feature-cards article:has(> div[style*="aspect-ratio"]) :is(h2, h3) {
  --text-md: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --font-weight-bold: 600;
  font-family: var(--font-family-heading);
}
/* Card link ("Tovább" etc.) sits at the bottom so rows line up. */
.block-hxo-feature-cards article:has(> div[style*="aspect-ratio"]) > div:last-child { flex: 1; }
.block-hxo-feature-cards article:has(> div[style*="aspect-ratio"]) > div:last-child > a:last-child {
  margin-top: auto;
}

/* ---- Feature Cards "dark-cards" variant (numbered checklists: goals, application pack) ----
   Soft white cards with an organic corner, the 01/02… tagline as a big coloured numeral on a pale
   morphing blob; colours cycle through the brand palette. */
.block-hxo-feature-cards article.bg-surface {
  --apk-c: var(--color-primary-dark);
  --apk-c-soft: var(--color-primary-lighter);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-7) var(--space-7);
  background: #fff;
  border: 0;
  border-radius: 32px 12px 32px 32px;
  box-shadow: 0 1px 2px rgb(35 38 47 / 0.04), 0 12px 32px -18px rgb(35 38 47 / 0.18);
  transition: translate 300ms var(--easing-out, ease-out), box-shadow 300ms var(--easing-out, ease-out);
}
.block-hxo-feature-cards article.bg-surface:hover {
  translate: 0 -4px;
  box-shadow: 0 1px 2px rgb(35 38 47 / 0.04), 0 22px 40px -20px rgb(35 38 47 / 0.28);
}
.block-hxo-feature-cards .grid > article.bg-surface:nth-child(4n + 2) {
  --apk-c: var(--color-secondary-dark); --apk-c-soft: var(--color-secondary-lighter);
  border-radius: 12px 32px 32px 32px;
}
.block-hxo-feature-cards .grid > article.bg-surface:nth-child(4n + 3) {
  --apk-c: var(--color-error-dark); --apk-c-soft: var(--color-error-lighter);
  border-radius: 32px 32px 12px 32px;
}
.block-hxo-feature-cards .grid > article.bg-surface:nth-child(4n + 4) {
  --apk-c: var(--color-tertiary-dark); --apk-c-soft: var(--color-tertiary-lighter);
  border-radius: 32px 32px 32px 12px;
}
/* pale blob behind the numeral */
.block-hxo-feature-cards article.bg-surface::before {
  content: "";
  position: absolute;
  top: -28px;
  left: -24px;
  width: 132px;
  aspect-ratio: 1;
  z-index: -1;
  border-radius: var(--apk-blob-1);
  background: var(--apk-c-soft);
  animation: apk-morph 16s ease-in-out infinite alternate;
}
.block-hxo-feature-cards .grid > article.bg-surface:nth-child(even)::before {
  border-radius: var(--apk-blob-2);
  animation-delay: -7s;
}
/* Theme utilities are layered !important (they beat ours), so steer them through their variables. */
.block-hxo-feature-cards article.bg-surface > div > p:first-child:has(+ :is(h2, h3)) {
  --text-sm: 2.75rem;
  --font-weight-semibold: 600;
  --leading-normal: 1;
  --color-text-tertiary: var(--apk-c);
  font-family: var(--font-family-heading);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}
.block-hxo-feature-cards article.bg-surface :is(h2, h3) {
  --text-lg: 1.125rem;
  --font-weight-semibold: 600;
  --leading-snug: 1.4;
}

/* Leave room for the footer wave under the last section (the CTA photo is meant to meet it). */
main > :last-child:not(.block-hxo-cta) {
  margin-bottom: var(--apk-wave-h);
}

/* Headings: break between words, not inside them ("szem-lélet", "el-képzelésből");
   overflow-wrap:anywhere from the theme still prevents overflow on very long words. */
:is(h1, h2, h3, h4) {
  hyphens: manual;
  text-wrap: balance;
}

/* ---- Motion ---- */
@keyframes apk-drift {
  from { background-position: 0% 100%; }
  to   { background-position: 100% 0%; }
}
@keyframes apk-morph {
  to { border-radius: var(--apk-blob-2); }
}
@media (prefers-reduced-motion: reduce) {
  .block-hxo-hero::before,
  .block-hxo-text-media *,
  .block-hxo-text-media *::before,
  .block-hxo-stats .grid > div::before {
    animation: none;
  }
}

/* ---- Portraits: keep faces in frame (photos are landscape, faces sit in the upper third) ---- */
.block-hxo-team img,
.block-hxo-text-media img {
  object-position: 50% 25%;
}

/* ---- FAQ accordion (used for staff bios): readable paragraphs, heading-face row titles ---- */
.block-hxo-faq details p + p {
  margin-top: 0.9em;
}
.block-hxo-faq summary > p {
  --text-md: clamp(1.125rem, 1rem + 0.4vw, 1.3rem);
  --font-weight-bold: 600;
  font-family: var(--font-family-heading);
}
.block-hxo-faq summary {
  cursor: pointer;
}
.block-hxo-faq details[open] > summary > p {
  --color-text: var(--color-primary-dark);
}

/* ---- Csapatunk: portrait cards + bio pop-up (apatkuti-team.js) ---- */
/* Portrait frames so faces never get cut (the theme's inline 320/200 frame is landscape). */
#munkatarsaink article > div[style*="aspect-ratio"] {
  aspect-ratio: 4 / 5 !important;
  position: relative;
}
#munkatarsaink article img {
  object-position: 50% 18%;
}
.apk-bio__initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-family-heading);
  font-size: clamp(2.5rem, 2rem + 2vw, 4rem);
  font-weight: 600;
  color: var(--color-primary-dark);
  background: var(--color-primary-lighter);
}
.apk-bio-card { cursor: pointer; }
.apk-bio-card:hover h3 { --color-text: var(--color-primary-dark); }
/* With JS the accordion is replaced by the pop-up (it stays as the no-JS fallback). */
.apk-bio-js #bemutatkozasok { display: none; }
.apk-bio-open { overflow: hidden; }

.apk-bio {
  margin: auto; /* Tailwind preflight zeroes margins, which un-centres a modal <dialog> */
  inset: 0;
  width: min(960px, calc(100vw - 32px));
  max-height: min(86vh, 760px);
  padding: 0;
  border: 0;
  border-radius: 36px 12px 36px 36px;
  background: var(--color-background);
  color: var(--color-text);
  box-shadow: var(--shadow-xlarge);
  overflow: hidden;
}
.apk-bio[open] {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  animation: apk-bio-in 280ms var(--easing-out, ease-out);
}
.apk-bio::backdrop {
  background: color-mix(in srgb, var(--color-neutral-900) 72%, transparent);
  backdrop-filter: blur(4px);
}
.apk-bio__media {
  position: relative;
  min-height: 100%;
  background: var(--color-tertiary-light);
}
.apk-bio__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}
.apk-bio__text {
  overflow-y: auto;
  max-height: min(86vh, 760px);
  padding: clamp(28px, 4vw, 56px);
}
.apk-bio__role {
  width: fit-content;
  margin: 0 0 var(--space-4);
  padding: 0.2em 0.85em;
  border-radius: 999px;
  background: var(--color-primary-lighter);
  color: var(--color-primary-dark);
  font-size: 0.8125rem;
  font-weight: 600;
}
.apk-bio__name {
  margin: 0 0 var(--space-6);
  font-family: var(--font-family-heading);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  line-height: 1.15;
  color: var(--color-text);
}
.apk-bio__body p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.7;
}
.apk-bio__body p + p { margin-top: 1em; }
.apk-bio__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-background) 88%, transparent);
  color: var(--color-text);
  cursor: pointer;
}
.apk-bio__close:hover { background: var(--color-primary-lighter); }
.apk-bio__close:focus-visible { outline: 2px solid var(--color-primary-dark); outline-offset: 2px; }
@media (max-width: 720px) {
  .apk-bio[open] { grid-template-columns: 1fr; grid-template-rows: 38vh auto; }
  .apk-bio__text { max-height: calc(86vh - 38vh); }
}
@keyframes apk-bio-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
}
@media (prefers-reduced-motion: reduce) {
  .apk-bio[open] { animation: none; }
}

/* Bio pop-up: subtle scrollbar — thin, invisible until hover, plus a soft fade at the bottom
   so it's still obvious the text continues. */
.apk-bio__text {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color var(--duration-normal, 200ms);
  -webkit-mask: linear-gradient(#000 calc(100% - 48px), transparent);
          mask: linear-gradient(#000 calc(100% - 48px), transparent);
}
.apk-bio__text:hover,
.apk-bio__text:focus-within {
  scrollbar-color: color-mix(in srgb, var(--color-primary-dark) 35%, transparent) transparent;
}
.apk-bio__text::-webkit-scrollbar { width: 6px; }
.apk-bio__text::-webkit-scrollbar-track { background: transparent; }
.apk-bio__text::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
.apk-bio__text:hover::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-primary-dark) 35%, transparent);
}

/* Bio pop-up polish: focus lands on the text (no ring on open), scrollbar kept clear of the
   rounded corner, close button given room. Keyboard users still get the ring via Tab. */
.apk-bio__text {
  margin: 14px 8px 14px 0;
  max-height: calc(min(86vh, 760px) - 28px);
  padding-top: clamp(22px, 3.2vw, 42px);
}
.apk-bio__text:focus { outline: none; }
.apk-bio__close {
  top: 20px;
  right: 26px;
  width: 40px;
  height: 40px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-neutral-900) 12%, transparent);
}
.apk-bio__close:focus:not(:focus-visible) { outline: none; }
@media (max-width: 720px) {
  .apk-bio__text { max-height: calc(86vh - 38vh - 28px); }
}
/* Fade both edges so scrolled text doesn't run hard into the close button (top padding keeps the role tag clear at rest). */
.apk-bio__text {
  -webkit-mask: linear-gradient(transparent, #000 20px, #000 calc(100% - 48px), transparent);
          mask: linear-gradient(transparent, #000 20px, #000 calc(100% - 48px), transparent);
}

/* ---- Photo heroes: centred composition (emblem → title → subtitle → button) ----
   The emblem is placed via each hero block's Decorative images field (top-center, 40px down;
   180px wide on sub-pages, 260px on the home page). The image-overlay variant has no alignment
   option, so centring the text and reserving room under the emblem is done here. */
.block-hxo-hero--image-overlay {
  --apk-emblem-space: calc(40px + 208px + 24px); /* offset + emblem height (180px wide → 208px) + gap */
}
.home .block-hxo-hero--image-overlay {
  --apk-emblem-space: calc(40px + 300px + 32px); /* 260px wide → 300px */
}
.block-hxo-hero--image-overlay > .relative.z-10 {
  padding-top: var(--apk-emblem-space);
  /* reserve only what the wave needs under the content (its surface sits at about half its band
     height); the block's Padding Bottom field (32px) then adds the breathing room */
  padding-bottom: calc(var(--apk-wave-h) * 0.5 + 32px);
  align-items: flex-start; /* content sits right under the emblem */
}
.block-hxo-hero--image-overlay > .relative.z-10 > .w-full > div {
  align-items: center;
  margin-inline: auto;
  text-align: center;
}
.block-hxo-hero--image-overlay > .relative.z-10 > .w-full > div > div:first-child {
  align-items: center;
}
.block-hxo-hero--image-overlay > .relative.z-10 > .w-full > div > div:last-child {
  justify-content: center;
}

/* ---- Events (theme hxo-events block): Apatkuti look on top of the generic base ---- */
/* List: open rows with hairline separators instead of beige boxes. */
.block-hxo-events--list .hxo-event {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  padding-inline: 0;
  column-gap: var(--space-7);
}
.block-hxo-events--list .hxo-event:last-child { border-bottom: 0; }
/* Date badge → organic turquoise blob, like the rest of the site's shapes. */
.block-hxo-events .hxo-event__badge {
  --color-text: var(--color-primary-dark);
  --color-text-secondary: var(--color-primary-dark);
  min-width: 84px;
  aspect-ratio: 1;
  border-radius: var(--apk-blob-1);
  background: var(--color-primary-lighter);
  transition: border-radius 600ms var(--easing-out, ease-out);
}
.block-hxo-events .hxo-event:hover .hxo-event__badge { border-radius: var(--apk-blob-2); }
.block-hxo-events .hxo-event h3 a { transition: color var(--duration-normal, 200ms); }
.block-hxo-events .hxo-event:hover h3 a { --color-text: var(--color-primary-dark); }
/* Cards: same editorial treatment as the news / feature cards. */
.block-hxo-events--cards .hxo-event {
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.block-hxo-events--cards .hxo-event > a > div {
  border-radius: 36px 12px 36px 36px;
}
.block-hxo-events--cards .hxo-event > div { padding-inline: 0; }
.block-hxo-events .hxo-event__date {
  --color-text-secondary: var(--color-primary-dark);
}

/* Single event "Időpont / Helyszín" box: warm surface with an organic corner. */
.hxo-event-details {
  border: 0;
  border-radius: 28px 10px 28px 28px;
  background: var(--color-primary-lighter);
}
.hxo-event-details__row dt { color: var(--color-primary-dark); }

/* Single event: the theme's post header shows a "Blog" breadcrumb and author + publish date,
   which read as the event date. The "Időpont / Helyszín" box carries the real date instead. */
.single-hxo_event .block-hxo-blog-post header nav[aria-label="Breadcrumbs"],
.single-hxo_event .block-hxo-blog-post header h1 + div > div:first-child {
  display: none;
}
.single-hxo_event .block-hxo-blog-post header h1 + div { justify-content: flex-end; }

/* Heading-outline repair (apatkuti-seo.php) promotes skipped levels, e.g. article subheadings H3 → H2;
   keep their original look. */
.hxo-prose h2[data-apk-level="3"] {
  font-size: var(--font-size-lg);
  line-height: 1.3;
}
.hxo-prose > * + h2[data-apk-level="3"] { margin-top: var(--space-9); }