/* =============================================
 * VK Decorative Motifs — coherent svg theme system
 * ---------------------------------------------
 * One iconic shape per page, plus a brand-wide leaf.
 *
 * Usage:
 *   <span class="vk-motif vk-motif--cal vk-motif--corner"
 *         aria-hidden="true"></span>
 *
 * Variants:
 *   --leaf      organic curl (brand identity)
 *   --cal       calendar/star (begivenheder)
 *   --pin       map-pin/storefront (butikker)
 *   --quote     quote-mark (nyheder)
 *   --seal      laurel-wreath/seal (mfu)
 *   --people    3-dot people-cluster (medlemmer)
 *   --envelope  envelope (kontakt)
 *
 * Position helpers:
 *   --corner    top-right hero corner, large + soft
 *   --float     mid-section floating accent
 *   --marker    inline before-CTA marker (small)
 *
 * All variants colour-flexible via currentColor (mask-image)
 * so they inherit `color` from parent context.
 * ============================================= */

.vk-motif {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  display: block;
  background-color: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  color: var(--vk-sage);
}

/* ── Position helpers ───────────────────── */

/* Big, soft corner accent — top-right of a hero */
.vk-motif--corner {
  top: 18px;
  right: 18px;
  width: clamp(56px, 9vw, 110px);
  height: clamp(56px, 9vw, 110px);
  opacity: .12;
  z-index: 1;
}

/* Mid-section floating accent — a bit smaller, offset */
.vk-motif--float {
  width: clamp(28px, 3vw, 44px);
  height: clamp(28px, 3vw, 44px);
  opacity: .35;
  animation: vkMotifDrift 9s ease-in-out infinite;
}

/* Tiny inline marker — flows with text/CTAs */
.vk-motif--marker {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  opacity: .7;
  vertical-align: -2px;
  margin-right: 4px;
}

/* Optional placement modifiers used alongside --float */
.vk-motif--tl { top: 8%;  left: 6%;  animation-delay: -2s; }
.vk-motif--tr { top: 14%; right: 8%; animation-delay: -4s; }
.vk-motif--bl { bottom: 18%; left: 12%; animation-delay: -6s; }
.vk-motif--br { bottom: 22%; right: 10%; animation-delay: -8s; }

/* Optional brand colour overrides (apply on the element) */
.vk-motif--red    { color: var(--vk-red); }
.vk-motif--sage   { color: var(--vk-sage); }
.vk-motif--amber  { color: #C99354; }
.vk-motif--teal   { color: var(--vk-teal); }
.vk-motif--cream  { color: var(--vk-cream); }

/* ── SVG mask sources (inline data: URIs) ──
 * Each mask is monochrome — colour comes from parent.
 * Strokes converted to fills where possible for crispness on small sizes.
 */

/* leaf — organic curl matching forside .leaf-accent */
.vk-motif--leaf {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'><path d='M12 50 C 18 20, 44 10, 58 14 C 56 36, 38 54, 16 54 C 22 44, 30 38, 42 32'/><path d='M18 50 C 24 30, 40 22, 54 20'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'><path d='M12 50 C 18 20, 44 10, 58 14 C 56 36, 38 54, 16 54 C 22 44, 30 38, 42 32'/><path d='M18 50 C 24 30, 40 22, 54 20'/></svg>");
}

/* calendar — page-flip with star spark */
.vk-motif--cal {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='10' y='14' width='44' height='42' rx='5' fill='none' stroke='black' stroke-width='3'/><path d='M10 26 L54 26' stroke='black' stroke-width='3'/><path d='M22 10 L22 18 M42 10 L42 18' stroke='black' stroke-width='3' stroke-linecap='round'/><path d='M32 34 l2.6 5.4 5.9.8-4.3 4.1 1 5.9-5.2-2.8-5.2 2.8 1-5.9-4.3-4.1 5.9-.8z' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='10' y='14' width='44' height='42' rx='5' fill='none' stroke='black' stroke-width='3'/><path d='M10 26 L54 26' stroke='black' stroke-width='3'/><path d='M22 10 L22 18 M42 10 L42 18' stroke='black' stroke-width='3' stroke-linecap='round'/><path d='M32 34 l2.6 5.4 5.9.8-4.3 4.1 1 5.9-5.2-2.8-5.2 2.8 1-5.9-4.3-4.1 5.9-.8z' fill='black'/></svg>");
}

/* pin — map pin / storefront marker */
.vk-motif--pin {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M32 4 C 18 4 8 14 8 28 C 8 44 32 60 32 60 C 32 60 56 44 56 28 C 56 14 46 4 32 4 Z' fill='black'/><circle cx='32' cy='26' r='8' fill='white'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M32 4 C 18 4 8 14 8 28 C 8 44 32 60 32 60 C 32 60 56 44 56 28 C 56 14 46 4 32 4 Z' fill='black'/><circle cx='32' cy='26' r='8' fill='white'/></svg>");
}

/* quote — large display quotation mark */
.vk-motif--quote {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M14 14 h16 v16 c0 12 -6 18 -16 22 v-8 c6 -2 10 -6 10 -14 h-10 z M36 14 h16 v16 c0 12 -6 18 -16 22 v-8 c6 -2 10 -6 10 -14 h-10 z' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M14 14 h16 v16 c0 12 -6 18 -16 22 v-8 c6 -2 10 -6 10 -14 h-10 z M36 14 h16 v16 c0 12 -6 18 -16 22 v-8 c6 -2 10 -6 10 -14 h-10 z' fill='black'/></svg>");
}

/* seal — laurel wreath around a star/heart, ties to MFU "Est. 2023" badge */
.vk-motif--seal {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><path d='M16 18 C 10 28 10 40 18 50'/><path d='M48 18 C 54 28 54 40 46 50'/><path d='M18 22 q 2 4 6 4 M16 30 q 3 4 7 4 M16 38 q 3 4 7 4 M18 46 q 3 3 6 3'/><path d='M46 22 q -2 4 -6 4 M48 30 q -3 4 -7 4 M48 38 q -3 4 -7 4 M46 46 q -3 3 -6 3'/><path d='M32 22 l2.4 5 5.4.7-4 3.7 1 5.4-4.8-2.6-4.8 2.6 1-5.4-4-3.7 5.4-.7z' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><path d='M16 18 C 10 28 10 40 18 50'/><path d='M48 18 C 54 28 54 40 46 50'/><path d='M18 22 q 2 4 6 4 M16 30 q 3 4 7 4 M16 38 q 3 4 7 4 M18 46 q 3 3 6 3'/><path d='M46 22 q -2 4 -6 4 M48 30 q -3 4 -7 4 M48 38 q -3 4 -7 4 M46 46 q -3 3 -6 3'/><path d='M32 22 l2.4 5 5.4.7-4 3.7 1 5.4-4.8-2.6-4.8 2.6 1-5.4-4-3.7 5.4-.7z' fill='black'/></svg>");
}

/* people — three-figure cluster */
.vk-motif--people {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='20' cy='22' r='7' fill='black'/><circle cx='44' cy='22' r='7' fill='black'/><circle cx='32' cy='14' r='7' fill='black'/><path d='M6 54 c 0 -10 8 -16 14 -16 s 14 6 14 16 z' fill='black'/><path d='M30 54 c 0 -10 8 -16 14 -16 s 14 6 14 16 z' fill='black'/><path d='M18 46 c 0 -10 8 -16 14 -16 s 14 6 14 16 z' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='20' cy='22' r='7' fill='black'/><circle cx='44' cy='22' r='7' fill='black'/><circle cx='32' cy='14' r='7' fill='black'/><path d='M6 54 c 0 -10 8 -16 14 -16 s 14 6 14 16 z' fill='black'/><path d='M30 54 c 0 -10 8 -16 14 -16 s 14 6 14 16 z' fill='black'/><path d='M18 46 c 0 -10 8 -16 14 -16 s 14 6 14 16 z' fill='black'/></svg>");
}

/* envelope — letter with flap */
.vk-motif--envelope {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round'><rect x='6' y='14' width='52' height='36' rx='3'/><path d='M6 18 L32 36 L58 18'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round'><rect x='6' y='14' width='52' height='36' rx='3'/><path d='M6 18 L32 36 L58 18'/></svg>");
}

/* ── Subtle drift animation for floating motifs ── */
@keyframes vkMotifDrift {
  0%, 100% { transform: translate(0, 0) rotate(-4deg); }
  50%      { transform: translate(6px, -8px) rotate(4deg); }
}

/* Slow pulse for corner motifs (very subtle) */
.vk-motif--corner {
  animation: vkMotifPulse 14s ease-in-out infinite;
}
@keyframes vkMotifPulse {
  0%, 100% { opacity: .10; transform: scale(1); }
  50%      { opacity: .16; transform: scale(1.04); }
}

/* ── Backwards-compat: keep .ph-dot legacy class working ──
 * begivenheder still renders these in HTML; we let the new
 * page-begivenheder.css ph-dot rules continue to apply, but
 * we also accept .vk-motif siblings inside the same hero.
 */

/* ── Reduced motion ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .vk-motif--float,
  .vk-motif--corner { animation: none; }
}

/* =============================================
 * Brand-wide leaf accents (cross-page)
 * Used in: footer brand-line, newsletter card corner.
 * Tied into existing footer-brand / fn-card markup.
 * ============================================= */

.footer-brand .footer-logo { position: relative; }
.footer-brand .footer-logo::after {
  content: "";
  position: absolute;
  top: -10px;
  right: -22px;
  width: 26px;
  height: 26px;
  background-color: var(--vk-sage);
  opacity: .35;
  pointer-events: none;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'><path d='M12 50 C 18 20, 44 10, 58 14 C 56 36, 38 54, 16 54 C 22 44, 30 38, 42 32'/><path d='M18 50 C 24 30, 40 22, 54 20'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'><path d='M12 50 C 18 20, 44 10, 58 14 C 56 36, 38 54, 16 54 C 22 44, 30 38, 42 32'/><path d='M18 50 C 24 30, 40 22, 54 20'/></svg>");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  transform: rotate(20deg);
  animation: vkLeafSway 8s ease-in-out infinite;
}

/* Newsletter (footer + forside) — subtle leaf in top-right corner */
.footer-newsletter-card,
.newsletter-card {
  position: relative;
}
.footer-newsletter-card::after,
.newsletter-card::after {
  content: "";
  position: absolute;
  top: -8px;
  right: 18px;
  width: 36px;
  height: 36px;
  background-color: var(--vk-sage);
  opacity: .22;
  pointer-events: none;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'><path d='M12 50 C 18 20, 44 10, 58 14 C 56 36, 38 54, 16 54 C 22 44, 30 38, 42 32'/><path d='M18 50 C 24 30, 40 22, 54 20'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'><path d='M12 50 C 18 20, 44 10, 58 14 C 56 36, 38 54, 16 54 C 22 44, 30 38, 42 32'/><path d='M18 50 C 24 30, 40 22, 54 20'/></svg>");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  transform: rotate(-12deg);
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .footer-brand .footer-logo::after { animation: none; }
}