/* Funna — Orbital hub block.
   Everything lives in one 600-unit field (.funna-ohub__field / __domains / __orbits),
   all scaled by --ohub-s and centered, so globe, rings, cards and pills line up
   identically across every style. --glass-blur is block-owned since 2.59.1
   (the sticky/glass header chrome — the last other consumer — was removed
   from theme.css) — and the accent colour is block-owned: --funna-ohub-accent is
   set inline per block instance (funna_render_orbital_hub(), inc/blocks.php)
   from the block's own "accentColor" attribute, not a global theme.json/
   funna_settings token. --funna-ohub-accent-glow/-soft/-bright below are
   derived from that one instance value via color-mix, same technique the
   theme-wide --accent-glow/--accent-soft used to use. Card radius is a plain
   12px literal, same as the rest of the theme's card-like components. */

.funna-ohub {
  /* 14px was de theme-brede --glass-blur-waarde; hier gepind toen de token
     block-owned werd (2.59.1) zodat de render identiek bleef. */
  --glass-blur: 14px;
  --funna-ohub-accent-glow:   color-mix(in srgb, var(--funna-ohub-accent, #cf4501) 40%, transparent);
  --funna-ohub-accent-soft:   color-mix(in srgb, var(--funna-ohub-accent, #cf4501) 10%, transparent);
  --funna-ohub-accent-bright: color-mix(in srgb, var(--funna-ohub-accent, #cf4501) 85%, white);
  position: relative; overflow: hidden; padding: clamp(2.5rem, 6vw, 72px) clamp(1rem, 4vw, 2.5rem); color: #b9c7e1; --ohub-s: 1; container: funna-ohub / inline-size;
}
.funna-ohub.has-section-bg {
  background:
    radial-gradient(900px 560px at 50% -4%, rgba(185,199,225,.12), transparent 60%),
    radial-gradient(680px 520px at 86% 104%, color-mix(in srgb, var(--funna-ohub-accent, #cf4501) 8%, transparent), transparent 62%),
    linear-gradient(180deg,
      var(--funna-surface-dark, #000c1f) 0%,
      color-mix(in srgb, var(--funna-surface-dark, #000c1f) 97.2%, white) 34%,
      color-mix(in srgb, var(--funna-surface-dark, #000c1f) 97.2%, white) 72%,
      color-mix(in srgb, var(--funna-surface-dark, #000c1f) 95.5%, white) 100%);
}

/* Flat background grid, faded toward the edges. */
.funna-ohub__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .6;
  background-image:
    linear-gradient(rgba(185,199,225,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185,199,225,.07) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 0%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 46%, #000 0%, transparent 78%);
}
.funna-ohub:not(.has-section-bg) .funna-ohub__grid { display: none; }

.funna-ohub--size-compact { --ohub-s: .84; }
.funna-ohub--size-tall    { --ohub-s: 1.18; }
/* Scale the orbital to its own width (column or section): fills a narrow 2-column
   slot or a phone without clipping, fuller on mobile. */
@container funna-ohub (max-width: 900px) { .funna-ohub__stage { --ohub-s: .88; } }
@container funna-ohub (max-width: 640px) {
  .funna-ohub__stage { --ohub-s: .78; }
}
@container funna-ohub (max-width: 480px) {
  .funna-ohub__stage { --ohub-s: .72; }
}
@container funna-ohub (max-width: 380px) {
  .funna-ohub__stage { --ohub-s: .6; }
}

/* Narrow (e.g. a 2-column slot or phone): focus stacks — hub on top, the
   featured card below; ghosts/systems/field hidden. */
/* Collapse to hub + featured only when "Orbit op mobiel" is OFF (no --mobile-orbit). */
@container funna-ohub (max-width: 540px) {
  .funna-ohub--style-focus:not(.funna-ohub--mobile-orbit) .funna-ohub__field,
  .funna-ohub--style-focus:not(.funna-ohub--mobile-orbit) .funna-ohub__orbits--logos { display: none; }
  .funna-ohub--style-focus:not(.funna-ohub--mobile-orbit) .funna-ohub__stage { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 360px; }
  .funna-ohub--style-focus:not(.funna-ohub--mobile-orbit) .funna-ohub__hub { position: relative; top: auto; left: auto; transform: none; width: clamp(180px, 64cqw, 240px); height: clamp(180px, 64cqw, 240px); }
  .funna-ohub--style-focus:not(.funna-ohub--mobile-orbit) .funna-ohub__domains { position: static; transform: none; width: 100%; height: auto; }
  .funna-ohub--style-focus:not(.funna-ohub--mobile-orbit) .funna-ohub__domain { display: none; }
  .funna-ohub--style-focus:not(.funna-ohub--mobile-orbit) .funna-ohub__domain.is-featured { display: block; position: static !important; left: auto !important; top: auto !important; transform: none !important; width: 100% !important; }
}

.funna-ohub__stage { position: relative; z-index: 1; width: 100%; aspect-ratio: 1 / 1; margin: 0 auto; max-width: calc(760px * var(--ohub-s)); }

.funna-ohub__glow {
  position: absolute; top: 50%; left: 50%; width: 60%; height: 60%; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle, rgba(185,199,225,.12), transparent 70%);
  filter: blur(22px); animation: funna-ohub-glow 8s ease-in-out infinite; pointer-events: none;
}

/* The overlay containers share one geometry. */
.funna-ohub__field, .funna-ohub__domains, .funna-ohub__orbits {
  position: absolute; top: 50%; left: 50%; width: 600px; height: 600px;
  transform: translate(-50%, -50%) scale(var(--ohub-s, 1)); transform-origin: center;
}
.funna-ohub__field { z-index: 1; pointer-events: none; overflow: visible; }
.funna-ohub__domains { z-index: 4; list-style: none; margin: 0; padding: 0; }
.funna-ohub__orbits { z-index: 4; pointer-events: none; }

/* Moving dotted spokes (dots march inward to the hub) + dotted outer ring + bright satellites. */
.funna-ohub__spoke-line { fill: none; stroke: color-mix(in srgb, var(--funna-ohub-accent, #cf4501) 55%, transparent); stroke-width: 1.7; stroke-dasharray: 1.6 7; stroke-linecap: round; animation: funna-ohub-march 1.5s linear infinite; }
.funna-ohub__perimeter { stroke: rgba(185,199,225,0.42); stroke-width: 1.6; stroke-dasharray: 2 10; stroke-linecap: round; animation: funna-ohub-march-p 3.2s linear infinite; }
/* Orbit-dot fill/glow read the same block-scoped --funna-ohub-accent(-bright)
   tokens as everything else in this file, so a per-instance accentColor
   change (editor.js "Podium" panel) reaches this dot too. Not part of the
   deliberate glass-panel rgba exclusion noted below (that's about
   hub/card/tag/chip/logo *backgrounds*, not this dot). */
.funna-ohub__orbit-dot { fill: var(--funna-ohub-accent-bright, #fd6528); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--funna-ohub-accent, #cf4501) 90%, transparent)); }

/* Hub (scales with the field).
   The rgba() border/shadow tints below (hub, cards, tags, chips, logo pills)
   are deliberately hardcoded, not tokenized: they're structural glass-panel
   depth/contrast effects (white-on-navy hairlines, black drop shadows), not
   brand-configurable values, so they're excluded from the navy-token audit
   by design — not an oversight to flag later. */
.funna-ohub__hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5;
  width: calc(196px * var(--ohub-s)); height: calc(196px * var(--ohub-s)); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 14px;
  background: rgba(0,34,70,.72); border: 1px solid color-mix(in oklab, var(--funna-ohub-accent, #cf4501) 45%, transparent);
  transition: box-shadow .5s, border-color .5s;
}
.funna-ohub.has-hub-glow .funna-ohub__hub { box-shadow: 0 0 40px -8px var(--funna-ohub-accent-glow, rgba(207,69,1,.45)); }
.funna-ohub__hub-glow { position: absolute; inset: 0; border-radius: 50%; background: var(--funna-ohub-accent-soft, color-mix(in srgb, var(--funna-ohub-accent, #cf4501) 10%, transparent)); filter: blur(28px); z-index: -1; transition: opacity .5s; }
.funna-ohub__hub-icon { font-size: calc(70px * var(--ohub-s)); color: var(--funna-ohub-accent, #cf4501); font-variation-settings: 'FILL' 1; line-height: 1; }
.funna-ohub__hub-title { font-size: calc(13px * var(--ohub-s)); font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #b9c7e1; margin-top: calc(6px * var(--ohub-s)); }
.funna-ohub__hub-desc { font-size: calc(12.5px * var(--ohub-s)); color: #9fb2d0; margin-top: calc(5px * var(--ohub-s)); max-width: calc(150px * var(--ohub-s)); min-height: 2.4em; }
.funna-ohub.is-domain-active .funna-ohub__hub { box-shadow: none; border-color: rgba(255,255,255,.14); }
.funna-ohub.is-domain-active.has-hub-glow .funna-ohub__hub-glow { opacity: 0; }

/* Domain cards. */
.funna-ohub__domain { position: absolute; transform: translate(-50%, -50%); width: 196px; }
.funna-ohub__card {
  display: block; width: 100%; text-align: left; cursor: pointer; font: inherit; text-decoration: none;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(0,34,70,.66); border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(var(--glass-blur, 8px)); -webkit-backdrop-filter: blur(var(--glass-blur, 8px));
  color: inherit; transition: border-color .4s, box-shadow .4s, transform .4s;
}
.funna-ohub__card:focus-visible { outline: 2px solid var(--funna-ohub-accent, #cf4501); outline-offset: 2px; }
.funna-ohub__domain.is-active .funna-ohub__card {
  border-color: color-mix(in oklab, var(--funna-ohub-accent, #cf4501) 55%, transparent);
  box-shadow: 0 0 26px -4px var(--funna-ohub-accent-glow, rgba(207,69,1,.45));
}
.funna-ohub__card-icon { font-size: 24px; color: var(--funna-ohub-accent, #cf4501); display: block; margin-bottom: 7px; line-height: 1; }
.funna-ohub__card-title { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #cdd8ea; display: block; }
.funna-ohub__card-desc { font-size: 12px; color: #9fb2d0; margin-top: 3px; display: block; line-height: 1.35; }
.funna-ohub__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.funna-ohub__tag { font-size: 0.6875rem; font-weight: 700; padding: 2px 9px; border-radius: 20px; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.06); color: #b9c7e1; white-space: nowrap; }
.funna-ohub--tags-active .funna-ohub__tags { display: none; }
.funna-ohub--tags-active .funna-ohub__domain.is-active .funna-ohub__tags { display: flex; }

/* Focus style: one featured card, prominent and using the space; the rest sit
   ghosted small in the background. Static — no cycling, no text switching. */
.funna-ohub--style-focus .funna-ohub__card { opacity: .2; transform: scale(.66); pointer-events: none; }
.funna-ohub--style-focus .funna-ohub__card .funna-ohub__tags { display: none; }
/* Give the broad featured card room: trim the hub a touch in focus. */
.funna-ohub--style-focus .funna-ohub__hub { width: calc(178px * var(--ohub-s)); height: calc(178px * var(--ohub-s)); }
.funna-ohub--style-focus .funna-ohub__domain.is-featured { left: 83% !important; top: 50% !important; width: 200px; z-index: 6; }
.funna-ohub--style-focus .funna-ohub__domain.is-featured .funna-ohub__card {
  opacity: 1; transform: none; pointer-events: auto; padding: 18px 20px;
  border-color: color-mix(in oklab, var(--funna-ohub-accent, #cf4501) 55%, transparent);
  box-shadow: 0 18px 50px -18px rgba(0,0,0,.6), 0 0 30px -6px var(--funna-ohub-accent-glow, rgba(207,69,1,.5));
}
.funna-ohub--style-focus .funna-ohub__domain.is-featured .funna-ohub__card-icon { font-size: 30px; }
.funna-ohub--style-focus .funna-ohub__domain.is-featured .funna-ohub__card-title { font-size: 16px; }
.funna-ohub--style-focus .funna-ohub__domain.is-featured .funna-ohub__card-desc { font-size: 13.5px; }
.funna-ohub--style-focus .funna-ohub__domain.is-featured .funna-ohub__tags { display: flex; }
/* Tech-logos as a decorative orbit behind the cards (any style). */
.funna-ohub__orbits--logos { z-index: 3; }

/* Orbit style: pills + tech logos travel the field's rings. */
.funna-ohub__pill, .funna-ohub__logo {
  position: absolute; top: 0; left: 0; offset-rotate: 0deg; offset-anchor: 50% 50%; offset-distance: var(--start, 0%);
  animation: funna-ohub-orbit var(--dur, 40s) linear infinite; animation-delay: var(--delay, 0s);
}
/* --dur staat hier expliciet en niet als fallback op de regel hierboven: tot
   3.2.0 zette niets ooit --dur voor een pill, dus de omlooptijd leefde alleen in
   die fallback. Wijzig je 'm, wijzig dan ook de 40 in funna_ohub_orbit_domains()
   (inc/blocks.php) — die rekent er de negatieve animation-delay mee uit die elke
   pill op z'n eigen plek langs de baan zet. Zelfde koppeling geldt voor de 54s
   van __logo hieronder. */
.funna-ohub__pill { offset-path: path('M 62,300 A 238,150 0 1,1 538,300 A 238,150 0 1,1 62,300'); pointer-events: all; --dur: 40s; }
/* .funna-ohub__pill also carries .funna-ohub__domain (width:196px;
   transform:translate(-50%,-50%) — the base rule near the top of this file,
   meant for the left/top %-positioned CARDS). offset-anchor:50% 50% above
   already centers the pill on its own offset-path point; the inherited
   width+transform added a fixed extra shift AND a fixed box size on top of
   that, throwing the whole ring off-centre from the hub instead of it
   riding evenly around it. Reset both so offset-path is the only thing
   positioning the pill. */
.funna-ohub__pill { transform: none; width: auto; }
/* Same path as the orange pulse dots (inc/blocks.php $perim, rx282/ry260) —
   logos ride the same ring the pulse dots travel, kept outside the static
   orange ring (r:250, which in turn clears the pill ring's rx:238 — see the
   nesting comment above funna_ohub_field() in inc/blocks.php). Opposite
   direction + slower duration so they still pass the dots rather than
   moving in lockstep. */
.funna-ohub__logo { offset-path: path('M 18,300 A 282,260 0 1,1 582,300 A 282,260 0 1,1 18,300'); animation-direction: reverse; --dur: 54s; }
/* Responsive pill-ring overrides MUST come after the base declaration above:
   same selector + specificity, so source order decides the winner, and a
   @container block earlier in the file loses to a plain rule later in the
   file regardless of which container currently matches. (This is why the
   equivalent 2.47.1 mobile widening silently never applied — it sat above
   this base rule.) --ohub-s doesn't have this problem since .funna-ohub__stage
   has no competing later declaration for it. Logos have no breakpoint
   variant — the pulse-dot ring they now share doesn't have one either. */
@container funna-ohub (max-width: 640px) {
  .funna-ohub__pill { offset-path: path('M 62,300 A 238,185 0 1,1 538,300 A 238,185 0 1,1 62,300'); }
}
@container funna-ohub (max-width: 480px) {
  .funna-ohub__pill { offset-path: path('M 62,300 A 238,205 0 1,1 538,300 A 238,205 0 1,1 62,300'); }
}
@container funna-ohub (max-width: 380px) {
  .funna-ohub__pill { offset-path: path('M 62,300 A 238,225 0 1,1 538,300 A 238,225 0 1,1 62,300'); }
}
.funna-ohub.is-paused .funna-ohub__pill, .funna-ohub.is-paused .funna-ohub__logo { animation-play-state: paused; }
.funna-ohub__chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; cursor: pointer; font: inherit; text-decoration: none;
  background: rgba(0,34,70,.85); border: 1px solid rgba(255,255,255,.12); white-space: nowrap;
  backdrop-filter: blur(var(--glass-blur, 8px)); -webkit-backdrop-filter: blur(var(--glass-blur, 8px));
  box-shadow: 0 6px 20px -8px rgba(0,0,0,.55); color: inherit; transition: border-color .45s, box-shadow .45s;
}
.funna-ohub__chip:focus-visible { outline: 2px solid var(--funna-ohub-accent, #cf4501); outline-offset: 2px; }
.funna-ohub__chip-icon { font-size: 18px; color: var(--funna-ohub-accent, #cf4501); line-height: 1; }
.funna-ohub__chip-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #cdd8ea; }
/* Pill text off: icon-only pills (label kept for screen readers). The domain name
   still shows in the hub as each pill becomes active. */
.funna-ohub--no-pill-text .funna-ohub__chip { gap: 0; padding: 9px; }
.funna-ohub--no-pill-text .funna-ohub__chip-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.funna-ohub__pill.is-active .funna-ohub__chip {
  border-color: color-mix(in oklab, var(--funna-ohub-accent, #cf4501) 65%, transparent);
  box-shadow: 0 0 26px -2px var(--funna-ohub-accent-glow, rgba(207,69,1,.45)), 0 6px 20px -8px rgba(0,0,0,.55);
}
.funna-ohub__logo { display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 999px; white-space: nowrap; background: rgba(0,22,46,.8); border: 1px solid color-mix(in oklab, var(--c, #9fb2d0) 42%, transparent); font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--c, #cdd8ea); }

/* Combo style: a centred globe with orbiting domain pills + tech-logos, flanked by
   the domain cards in the left/right gutters of the (wide) block — two cards down
   each side — so the side space is used and the orbit stays clear. The cards layer
   is rendered OUTSIDE the square stage (full block width); the orbit + globe live
   in the centred stage behind it. Each domain is still both a card and a pill,
   paired by data-domain. */
.funna-ohub--style-combo .funna-ohub__domains--cards {
  position: absolute; inset: 0; z-index: 6; transform: none; width: auto; height: auto;
  margin: 0; padding: clamp(20px, 5vh, 4rem) clamp(12px, 3vw, 48px);
  display: grid; grid-template-columns: repeat(2, clamp(168px, 17vw, 230px));
  justify-content: space-between; align-content: center;
  row-gap: clamp(18px, 7vh, 80px); pointer-events: none;
}
.funna-ohub--style-combo .funna-ohub__domains--cards .funna-ohub__domain {
  position: static; transform: none; width: 100%; pointer-events: auto;
}
/* The grid item (.funna-ohub__domain) already stretches to its row's tallest
   sibling by default (grid's initial align-items:stretch) — but the card
   itself only sizes to its own content, so a domain with fewer/no tags (e.g.
   "Systemen", which has none) renders visibly shorter than its row-mate
   instead of matching it. */
.funna-ohub--style-combo .funna-ohub__domains--cards .funna-ohub__card {
  height: 100%;
}
/* Connector lines from each flank card toward the central hub (full-block-width
   overlay; endpoints %-matched to the card grid). Replaces the corner spokes, which
   point at the old in-stage positions and are hidden in combo. */
.funna-ohub--style-combo .funna-ohub__spoke-line { display: none; }
.funna-ohub--style-combo .funna-ohub__links {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none;
}
.funna-ohub--style-combo .funna-ohub__links line {
  stroke: color-mix(in srgb, var(--funna-ohub-accent, #cf4501) 45%, transparent); stroke-width: 1.4; stroke-dasharray: 2 7; stroke-linecap: round;
  vector-effect: non-scaling-stroke; animation: funna-ohub-march 1.5s linear infinite;
}

/* Not enough width to flank the globe (tablet/phone): drop the absolute flanks and
   let the cards flow as a grid below the orbital stage; the connectors don't apply. */
@media (max-width: 1024px) {
  .funna-ohub--style-combo .funna-ohub__domains--cards {
    position: static; transform: none; padding: 0; margin-top: clamp(20px, 4vw, 32px);
    grid-template-columns: 1fr 1fr; justify-content: stretch; align-content: start;
    gap: 12px; max-width: 720px; margin-left: auto; margin-right: auto;
  }
  .funna-ohub--style-combo .funna-ohub__links { display: none; }
}
/* Keep 2×2 on phones too; only collapse to a single column when it's truly too
   narrow for two cards side by side. */
@media (max-width: 400px) {
  .funna-ohub--style-combo .funna-ohub__domains--cards { grid-template-columns: 1fr; }
}

@keyframes funna-ohub-orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes funna-ohub-march { to { stroke-dashoffset: -8.6; } }
@keyframes funna-ohub-march-p { to { stroke-dashoffset: -12; } }
@keyframes funna-ohub-glow { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .6; } 50% { transform: translate(-50%, -50%) scale(1.05); opacity: .95; } }

/* Mobile: positioned styles drop the field and stack the cards — unless a focus
   block has "Orbit op mobiel" on (.funna-ohub--mobile-orbit), which keeps the
   scaled orbital. */
@media (max-width: 780px) {
  .funna-ohub:not(.funna-ohub--style-orbit):not(.funna-ohub--mobile-orbit) .funna-ohub__field,
  .funna-ohub:not(.funna-ohub--style-orbit):not(.funna-ohub--mobile-orbit) .funna-ohub__orbits--logos,
  .funna-ohub:not(.funna-ohub--style-orbit):not(.funna-ohub--mobile-orbit) .funna-ohub__glow { display: none; }
  .funna-ohub:not(.funna-ohub--style-orbit):not(.funna-ohub--mobile-orbit) .funna-ohub__stage { aspect-ratio: auto; max-width: 540px; display: flex; flex-direction: column; gap: 20px; align-items: center; }
  .funna-ohub:not(.funna-ohub--style-orbit):not(.funna-ohub--mobile-orbit) .funna-ohub__hub { position: relative; top: auto; left: auto; transform: none; width: clamp(180px, 60vw, 240px); height: clamp(180px, 60vw, 240px); }
  .funna-ohub--style-cards .funna-ohub__domains { position: static; transform: none; width: 100%; height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .funna-ohub--style-cards .funna-ohub__domain { position: static; transform: none; width: auto; }
  /* Combo cards already stack below the orbital from 1024px down (see above). Here
     we just drop the moving orbit by default; "Orbit op mobiel" keeps it. */
  .funna-ohub--style-combo:not(.funna-ohub--mobile-orbit) .funna-ohub__orbits { display: none; }
  /* Focus on mobile (Orbit op mobiel OFF): just the hub + the featured card. */
  .funna-ohub--style-focus:not(.funna-ohub--mobile-orbit) .funna-ohub__orbits--logos { display: none; }
  .funna-ohub--style-focus:not(.funna-ohub--mobile-orbit) .funna-ohub__domain:not(.is-featured) { display: none; }
  .funna-ohub--style-focus:not(.funna-ohub--mobile-orbit) .funna-ohub__domains { position: static; transform: none; width: 100%; height: auto; }
  .funna-ohub--style-focus:not(.funna-ohub--mobile-orbit) .funna-ohub__domain.is-featured { position: static !important; left: auto !important; top: auto !important; width: 100%; max-width: 320px; }
}
@media (max-width: 520px) {
  .funna-ohub--style-cards .funna-ohub__domains { grid-template-columns: 1fr; }
}

/* Standalone override (tot 2.60.0 in theme.css): geneste orbital-hub met
   sectionBackground uit — geen sectie-padding, en laat de orbit uitlopen
   i.p.v. hard te clippen. Specificity (0,2,0) wint van .funna-ohub (0,1,0)
   ongeacht volgorde. */
.funna-ohub:not(.has-section-bg) { padding: 0; overflow: visible; }

@media (prefers-reduced-motion: reduce) {
  .funna-ohub__pill, .funna-ohub__logo, .funna-ohub__glow, .funna-ohub__spoke-line, .funna-ohub__perimeter,
  .funna-ohub__links line { animation: none; }
}

/* ── Material Symbols ───────────────────────────────────────────────────────
   Verhuisd uit assets/css/theme.css in 3.0.0. Dit blok is de enige
   overgebleven consument: funna_render_orbital_hub() rendert de class
   server-side op de domain-, chip- en hub-iconen (inc/blocks.php). Omdat
   deze stylesheet alleen laadt op pagina's mét het blok, laadt het iconfont
   dat nu ook — voorheen kreeg elke pagina van elke site het mee. */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal;
  font-size: 1.25em; line-height: 1;
  letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap;
  word-wrap: normal; direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}