/* ================================================================================================
 * SCL Portal Components — shared portal design primitives (PORTAL_UNIFIED_SHELL_V1, Workstream F).
 * ONE canonical home for the reusable branded button, icon button, focus ring and portal media/surface
 * primitives. Consumed by the portal shell AND the Social overlay (loaded on both), so there is no
 * per-surface / one-off gradient. Tokens are registered via SCL_Preset_Renderer::emit_portal_css() (:root);
 * the fallbacks below equal those canonical values so the components still render where the token block is
 * absent (e.g. a plain wp_footer page carrying only the overlay). Fallback == canonical brand gradient — it
 * is the shared component's default, NOT a competing definition.
 * ============================================================================================== */

/* ── Shared branded (rainbow) button — "Zur Schnappnot Landingpage" et al. ── */
.scl-btn-brand {
  --_grad: var(--scl-gradient-brand, linear-gradient(90deg,#ff2fd0,#8a5cff,#43d6ff,#40e59b,#ffcf47,#ff2fd0));
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; box-sizing: border-box;
  min-height: 48px; padding: 12px 20px;
  border-radius: 14px;
  border: 1px solid var(--scl-brand-btn-border, rgba(255,255,255,.38));
  background: var(--_grad); background-size: 200% 100%; background-position: 0% 50%;
  color: var(--scl-brand-btn-fg, #ffffff);
  font: inherit; font-weight: 800; letter-spacing: .01em; line-height: 1.15;
  text-decoration: none; text-align: center; cursor: pointer;
  text-shadow: 0 1px 2px rgba(10,8,24,.45);
  box-shadow: 0 8px 26px rgba(138,92,255,.28), inset 0 1px 0 rgba(255,255,255,.22);
  transition: background-position .5s ease, transform .16s ease, box-shadow .2s ease, filter .2s ease;
}
.scl-btn-brand:hover { background-position: 100% 50%; transform: translateY(-1px); filter: saturate(1.08); box-shadow: 0 12px 32px rgba(138,92,255,.38), inset 0 1px 0 rgba(255,255,255,.28); }
.scl-btn-brand:active { transform: translateY(0); }
.scl-btn-brand__icon { display: inline-flex; width: 20px; height: 20px; flex: 0 0 auto; }
.scl-btn-brand__icon svg { width: 100%; height: 100%; display: block; }

/* ── Shared icon-only button — social profile row (min 44×44) ── */
.scl-portal-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto; box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(255,255,255,.14));
  background: var(--surface, rgba(255,255,255,.05));
  color: var(--text, #e8e8f0);
  text-decoration: none; cursor: pointer;
  transition: transform .16s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.scl-portal-icon-btn:hover { transform: translateY(-1px); background: rgba(138,92,255,.16); border-color: rgba(138,92,255,.5); }
.scl-portal-icon-btn svg { width: 20px; height: 20px; display: block; }
.scl-portal-icon-btn__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Shared visible focus ring (keyboard) ── */
.scl-btn-brand:focus-visible,
.scl-portal-icon-btn:focus-visible,
.scl-focusable:focus-visible {
  outline: var(--scl-focus-ring-width, 3px) solid var(--scl-focus-ring-color, #8a5cff);
  outline-offset: var(--scl-focus-ring-offset, 2px);
}

/* ── Shared portal media aspect wrapper (prevents layout shift) ── */
.scl-portal-media { position: relative; width: 100%; aspect-ratio: var(--scl-media-aspect-portal, 16 / 9); overflow: hidden; border-radius: 14px; background: rgba(255,255,255,.04); }
.scl-portal-media > img, .scl-portal-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Shared portal surface content wrapper (single width SSOT) ── */
.scl-portal-surface { width: min(var(--scl-width-standard, 1080px), 94vw); margin-inline: auto; box-sizing: border-box; }

/* ── Reduced motion: no gradient animation / transforms ── */
@media (prefers-reduced-motion: reduce) {
  .scl-btn-brand, .scl-portal-icon-btn { transition: none; }
  .scl-btn-brand:hover, .scl-portal-icon-btn:hover { transform: none; background-position: 0% 50%; }
}

/* ================================================================================================
 * Unified portal shell (PORTAL_UNIFIED_SHELL_V1 §3/§8/§9) — surface header + navigation.
 * Shared by Portalstart and every registered portal subpage (one component family, two nav modes).
 * ============================================================================================== */

/* Visually-hidden utility (a11y: e.g. the surface <h1> when a media hero carries no visible heading). */
.scl-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Surface header wrapper (shared geometry). SCL_PORTAL_SURFACE_HEADER_..._V1 (§3): the header aligns to ONE
 * shared portal-surface frame token so it never appears accidentally narrower than the page content below it.
 * Default = standard frame (1080, matches forum/academy content). Surfaces whose page content uses the WIDE
 * shell frame (--scl-width-wide 1320, e.g. /musik/, /creators/) carry .scl-pu-header--wide (server-set via the
 * render_top frame opt) so the header widens to the SAME frame as that surface's content — no independent narrow
 * max-width, no page-specific selector. */
.scl-pu-header { width: min(var(--scl-portal-surface-frame-max, var(--scl-width-standard, 1080px)), 94vw); margin: 14px auto 0; box-sizing: border-box; }
.scl-pu-header--wide { --scl-portal-surface-frame-max: var(--scl-width-wide, 1320px); }
/* §4: the configured media fills the full shared frame width within its aspect/rendering contract (no distortion,
 * no second nested frame, no arbitrary lateral margins). */
.scl-pu-header--media > .scl-pg-hero { width: 100%; }

/* Compact branded title header — the DISABLED / INVALID / no-media fallback (never an empty hero frame). */
.scl-pu-header--title { display: flex; align-items: center; gap: 14px; padding: 20px 22px; border-radius: 16px;
  border: 1px solid var(--okd-border, rgba(255,255,255,.12));
  background: radial-gradient(900px 360px at 12% -80px, rgba(138,92,255,.22), transparent 60%), rgba(255,255,255,.03); }
.scl-pu-header__accent { flex: 0 0 auto; width: 8px; align-self: stretch; min-height: 40px; border-radius: 999px;
  background: var(--scl-gradient-brand, linear-gradient(180deg,#ff2fd0,#8a5cff,#43d6ff,#40e59b,#ffcf47)); }
.scl-pu-header__titles { min-width: 0; }
.scl-pu-header__title { margin: 0; font-size: clamp(1.3rem, 3.2vw, 1.9rem); font-weight: 900; letter-spacing: .01em;
  color: var(--okd-text, #e8e8f0); line-height: 1.12; }
.scl-pu-header__subtitle { margin: 4px 0 0; color: var(--okd-muted, #a8a5c2); font-size: .92rem; }
.scl-pu-header__warn { margin: 8px 0 0; color: #f7b955; font-size: .82rem; font-weight: 700; }

/* NOTE: the unified NAVIGATION component is the shared .scl-okd-tabnav / .scl-okd-tab* family in
 * portal-okidoki.css (approved LEDs + geometry), rendered by SCL_Portal_Unified_Shell::render_nav() in both
 * MODE A (Portalstart tabs) and MODE B (subpage links). There is intentionally NO separate .scl-pu-nav style
 * here — one nav component, one CSS source (PORTAL_NAV_SHARED_CSS_COMPONENT_COUNT=1). */

/* PORTAL_UNIFIED_SHELL_V1 sticky-behavior parity (addendum): on subpages the shared nav wrapper uses
 * display:contents so the <nav.scl-okd-tabnav> lifts into the TALL <main> flow (exactly like Portalstart's
 * .scl-okd container) — position:sticky then has room and the nav sticks below the fixed portal bar via the
 * SAME shared offset --scl-sticky-secondary-top. The wrapper still carries the .scl-okd token/offset
 * definitions (custom properties inherit through display:contents), but its box (incl. the .scl-okd hero-card
 * styling) is NOT rendered — no hero card around the nav. Width/centering mirror Portalstart's .scl-okd. */
.scl-okd--subnav { display: contents; }
.scl-okd--subnav > .scl-okd-tabnav { width: min(1200px, 94vw); margin-inline: auto; margin-top: 6px; }