/* ===========================================================================
 * parchment.css — Hedensia parchment designelement
 *
 * Globalt designelement til karakterark, FÆRD-entries, handouts og lore-popups.
 * Baseret på teknik fra CodePen AgnusDei/NWPbOxL: SVG feTurbulence+
 * feDisplacementMap kant-effekt + vellum-base64-noise tekstur + conic-gradient
 * fold-crease.
 *
 * CSS-lag: @layer components (load-rækkefølge: tokens < base < components).
 * Tokens: --hd-parchment-base (baggrund) + --hd-parchment-glow (inset-skygge).
 * Filtre: inline SVG med IDs parchment-displace-{sm,md,lg,xl} i index.php +
 *         admin.php — ingen duplikering af SVG-definitioner her.
 *
 * Varianter:
 *   .hd-parchment--sm   sm citat/splash (scale=6,  inset=36px,  ~10-11px)
 *   .hd-parchment--md   popup/FÆRD      (scale=10, inset=70px,  ~13-14px)
 *   .hd-parchment--lg   handout/reveal  (scale=14, inset=100px, ~15-16px)
 *   .hd-parchment--xl   fuld-side       (scale=20, inset=125px)
 *   .hd-parchment--fallback  CSS-only, ingen SVG-filter (C2 perf-gate)
 *
 * Compatibility: vanilla CSS, Safari 16.6 iPadOS 16 (display target).
 * =========================================================================== */

/* === Parchment-tokens ===
 * Defineres som :root-custom-properties (ikke i @layer tokens) for at
 * undgå at forurene design-tokens.css med plan-B-specifikke værdier.
 * Kan flyttes til design-tokens.css §12 hvis parchment promoveres til
 * globalt token-system.
 * Light-tema-override giver lyst pergament på hvid baggrund: lidt varmere
 * (#fffaee) end dark-tema (#fdf6df) da light-surfaces allerede er pergament-farvede. */
:root {
  --hd-parchment-base:  #fdf6df;   /* vellum beige — default dark-tema */
  --hd-parchment-glow:  #8f5922;   /* brun inset-glow */
  --_parchment-noise: var(--hd-texture-dark-paper);   /* dark-tema default */
  --_parchment-tile: 500px 500px;                      /* matching seam/dark paper natural seam */
}

[data-theme="light"] {
  --hd-parchment-base:  #fffaee;   /* lys vellum på pergament-surface */
  --hd-parchment-glow:  #6b3d10;   /* mørkere brun for kontrast på lys baggrund */
  --_parchment-noise: var(--hd-texture-seam-paper);   /* lys-tema bruger seam-paper */
}

@layer components {

/* ---------------------------------------------------------------------------
 * .hd-parchment — base-klasse
 * Brug ALTID én størrelse-variant (.hd-parchment--sm/md/lg/xl).
 * Indhold placeres som søsken-div eller som direkte tekstnoder i forælder.
 * --------------------------------------------------------------------------- */
.hd-parchment {
  position: relative;
  background-color: var(--hd-parchment-base);
  background-image: var(--_parchment-noise);
  background-repeat: repeat;
  background-size: var(--_parchment-tile);
  color: var(--hd-parchment-text, #1a1a1a);
  border-radius: 2px;
  padding: var(--hd-space-3, 0.75rem);
  /* Drop-shadow — brun tonet, blødt */
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.55),          /* ydre drop */
    inset 0 0 var(--_parchment-inset-glow) var(--hd-parchment-glow);  /* brun inset */
}

/* fold-crease overlay via conic-gradient */
.hd-parchment::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg at 0% 100%,
    transparent 0deg,
    rgba(143, 89, 34, 0.07) 8deg,
    transparent 16deg
  );
  mix-blend-mode: multiply;
}

/* SVG-filter kant-effekt via ::before */
.hd-parchment::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  filter: var(--_parchment-filter, none);
}

/* prefers-reduced-motion: deaktivér fold-crease animation hvis den
 * i fremtiden tilføjes. CSS-effekten er statisk, men reglen er
 * klar til evt. @keyframes på ::after. */
@media (prefers-reduced-motion: reduce) {
  .hd-parchment::after {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
 * Størrelses-varianter
 * Hvert filter-ID refererer til inline SVG i index.php + admin.php.
 * --------------------------------------------------------------------------- */

/* sm — lille citat-reservoir / splash lore-uddrag */
.hd-parchment--sm {
  --_parchment-inset-glow: 36px;
  --_parchment-filter: url(#parchment-displace-sm);
  --_parchment-sm-fz: 0.6875rem;               /* ~11px — ingen canonical --hd-text-* token for denne størrelse */
  font-size: var(--_parchment-sm-fz);
  line-height: var(--hd-leading-tight, 1.3);
  padding: var(--hd-space-2, 0.5rem) var(--hd-space-3, 0.75rem);
}

/* md — popup / FÆRD-entries */
.hd-parchment--md {
  --_parchment-inset-glow: 70px;
  --_parchment-filter: url(#parchment-displace-md);
  font-size: var(--hd-text-body-small);       /* ~14px — 0.875rem */
  line-height: var(--hd-leading-base, 1.5);
}

/* lg — handout / story-reveal */
.hd-parchment--lg {
  --_parchment-inset-glow: 100px;
  --_parchment-filter: url(#parchment-displace-lg);
  font-size: var(--hd-text-base, 1rem);      /* ~15-16px */
  line-height: var(--hd-leading-relaxed, 1.6);
}

/* xl — fuld side / lazy-DM splash */
.hd-parchment--xl {
  --_parchment-inset-glow: 125px;
  --_parchment-filter: url(#parchment-displace-xl);
  font-size: var(--hd-text-base, 1rem);
  line-height: var(--hd-leading-relaxed, 1.6);
  padding: var(--hd-space-5, 1.25rem) var(--hd-space-6, 1.5rem);
}

/* ---------------------------------------------------------------------------
 * .hd-parchment--fallback — CSS-only, ingen SVG-filter
 * Bruges af C2 perf-gate og browsere uden SVG-filter-support.
 * Bevarer baggrund + inset-skygge, men ingen kant-displacement.
 * --------------------------------------------------------------------------- */
.hd-parchment--fallback {
  position: relative;
  background-color: var(--hd-parchment-base);
  background-image: var(--_parchment-noise);
  background-repeat: repeat;
  background-size: var(--_parchment-tile);
  color: var(--hd-parchment-text, #1a1a1a);
  border-radius: 3px;
  padding: var(--hd-space-3, 0.75rem);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.55),
    inset 0 0 40px var(--hd-parchment-glow);
  border: 1px solid rgba(143, 89, 34, 0.4);
}

.hd-parchment--fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg at 0% 100%,
    transparent 0deg,
    rgba(143, 89, 34, 0.05) 8deg,
    transparent 16deg
  );
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  .hd-parchment--fallback::after {
    animation: none;
  }
}

} /* end @layer components */