/**
 * SOCKAKI ΜΙΤΑΠ SHOP — Memphis Graphics Foundation
 *
 * Reusable decorative primitives only. No page layouts here.
 *
 * Rules (MEMPHIS_GRAPHICS_KIT_v1.md):
 * - lightweight CSS / inline SVG, never giant flattened PNGs
 * - decorative only, never carries critical copy
 * - must live inside a stable wrapper (.sk-decor-wrap)
 * - must never cause horizontal overflow
 * - must never cover text, buttons, or form controls
 * - reducible/hidable on mobile
 * - respects prefers-reduced-motion
 *
 * Every primitive here is self-contained CSS or an inline data-URI SVG
 * mask, so Phase 4 introduces NO binary brand assets. Copying the
 * production Memphis/logo/mascot SVGs into the site is a Phase 5 task
 * and must not happen here.
 */

/* ═══════════════════════════════════════════════════════════════
   DECOR WRAPPER — required parent for absolute decorations
   Prevents overflow and keeps decorations behind content.
   ════════════════════════════════════════════════════════════ */

.sk-decor-wrap {
  position: relative;
  overflow: hidden;          /* hard guarantee against x-overflow */
  isolation: isolate;
}

.sk-decor-wrap > .sk-decor {
  position: absolute;
  z-index: var(--sk-z-below);
  pointer-events: none;      /* never blocks text/buttons/forms */
  user-select: none;
}

/* Content inside a decorated wrapper must sit above decoration */
.sk-decor-wrap > .sk-decor-content {
  position: relative;
  z-index: var(--sk-z-raised);
}

/* ═══════════════════════════════════════════════════════════════
   PATTERN FIELDS — pure CSS, no assets required
   ════════════════════════════════════════════════════════════ */

/* Dot field */
.sk-pattern-dots {
  background-image: radial-gradient(currentColor 2px, transparent 2px);
  background-size: 20px 20px;
  color: var(--sk-brand-black);
  opacity: 0.10;
}

.sk-pattern-dots--aqua  { color: var(--sk-brand-aqua);  opacity: 0.35; }
.sk-pattern-dots--pink  { color: var(--sk-brand-pink);  opacity: 0.35; }
.sk-pattern-dots--dense { background-size: 12px 12px; }
.sk-pattern-dots--loose { background-size: 32px 32px; }

/* Grid paper */
.sk-pattern-grid {
  background-image:
    linear-gradient(currentColor 1px, transparent 1px),
    linear-gradient(90deg, currentColor 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--sk-brand-black);
  opacity: 0.08;
}

.sk-pattern-grid--aqua { color: var(--sk-brand-aqua); opacity: 0.25; }
.sk-pattern-grid--loose { background-size: 40px 40px; }

/* ═══════════════════════════════════════════════════════════════
   GEOMETRIC PRIMITIVES — pure CSS shapes
   Sized via --sk-shape-size so one class scales anywhere.
   ════════════════════════════════════════════════════════════ */

.sk-shape {
  --sk-shape-size: 48px;
  display: block;
  width: var(--sk-shape-size);
  height: var(--sk-shape-size);
  color: var(--sk-brand-aqua);   /* drives currentColor */
}

/* Circle */
.sk-shape--circle {
  background: currentColor;
  border-radius: var(--sk-radius-full);
}

.sk-shape--circle-outline {
  background: transparent;
  border: var(--sk-border-width-lg) solid currentColor;
  border-radius: var(--sk-radius-full);
}

/* Triangle */
.sk-shape--triangle {
  width: 0;
  height: 0;
  border-left:  calc(var(--sk-shape-size) / 2) solid transparent;
  border-right: calc(var(--sk-shape-size) / 2) solid transparent;
  border-bottom: var(--sk-shape-size) solid currentColor;
}

/* Cross / plus */
.sk-shape--cross {
  position: relative;
  background: none;
}

.sk-shape--cross::before,
.sk-shape--cross::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  border-radius: var(--sk-radius-sm);
}

.sk-shape--cross::before {
  width: 100%;
  height: 22%;
  transform: translate(-50%, -50%);
}

.sk-shape--cross::after {
  width: 22%;
  height: 100%;
  transform: translate(-50%, -50%);
}

/* Color modifiers for any shape */
.sk-shape--aqua   { color: var(--sk-brand-aqua); }
.sk-shape--pink   { color: var(--sk-brand-pink); }
.sk-shape--purple { color: var(--sk-extended-purple); }
.sk-shape--yellow { color: var(--sk-extended-yellow); }
.sk-shape--black  { color: var(--sk-brand-black); }

/* Size modifiers */
.sk-shape--sm { --sk-shape-size: 24px; }
.sk-shape--lg { --sk-shape-size: 80px; }
.sk-shape--xl { --sk-shape-size: 140px; }

/* ═══════════════════════════════════════════════════════════════
   LINE PRIMITIVES — squiggle, zigzag, lightning
   Inline data-URI SVG using stroke so they stay crisp and light.
   Color is applied with a CSS mask so currentColor still works.
   ════════════════════════════════════════════════════════════ */

.sk-line {
  display: block;
  width: 120px;
  height: 24px;
  background-color: currentColor;
  color: var(--sk-brand-aqua);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

/* Squiggle / wavy accent */
.sk-line--squiggle {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpath d='M2 12c8-10 18-10 26 0s18 10 26 0 18-10 26 0 18 10 26 0' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpath d='M2 12c8-10 18-10 26 0s18 10 26 0 18-10 26 0 18 10 26 0' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Zigzag */
.sk-line--zigzag {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpath d='M2 18l14-12 14 12 14-12 14 12 14-12 14 12 14-12' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpath d='M2 18l14-12 14 12 14-12 14 12 14-12 14 12 14-12' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Hand-drawn underline — for headings */
.sk-line--underline {
  height: 12px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M3 8c20-4 40-5 60-4s34 3 54 1' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M3 8c20-4 40-5 60-4s34 3 54 1' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Lightning bolt */
.sk-line--lightning {
  width: 32px;
  height: 56px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 56'%3E%3Cpath d='M19 2L4 32h9l-3 22 18-30h-9l3-22z' fill='%23000'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 56'%3E%3Cpath d='M19 2L4 32h9l-3 22 18-30h-9l3-22z' fill='%23000'/%3E%3C/svg%3E");
}

/* Burst — promo starburst */
.sk-line--burst {
  width: 72px;
  height: 72px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cpath d='M36 2l6 14 13-8-4 15 15-2-11 11 13 7-15 4 8 13-15-5v15l-10-11-10 11V56l-15 5 8-13-15-4 13-7L2 26l15 2-4-15 13 8z' fill='%23000'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cpath d='M36 2l6 14 13-8-4 15 15-2-11 11 13 7-15 4 8 13-15-5v15l-10-11-10 11V56l-15 5 8-13-15-4 13-7L2 26l15 2-4-15 13 8z' fill='%23000'/%3E%3C/svg%3E");
}

/* Line color modifiers */
.sk-line--aqua   { color: var(--sk-brand-aqua); }
.sk-line--pink   { color: var(--sk-brand-pink); }
.sk-line--purple { color: var(--sk-extended-purple); }
.sk-line--yellow { color: var(--sk-extended-yellow); }
.sk-line--black  { color: var(--sk-brand-black); }

/* ═══════════════════════════════════════════════════════════════
   TAPE — paper tape accent behind short headings/labels
   ════════════════════════════════════════════════════════════ */

.sk-tape {
  display: inline-block;
  padding: var(--sk-space-2) var(--sk-space-4);
  background: var(--sk-brand-pink);
  color: var(--sk-text);
  font-weight: var(--sk-fw-bold);
  transform: rotate(-2deg);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.10);
}

.sk-tape--aqua   { background: var(--sk-brand-aqua); }
.sk-tape--yellow { background: var(--sk-extended-yellow); }
.sk-tape--paper  { background: var(--sk-paper); }

/* ═══════════════════════════════════════════════════════════════
   STICKER — outlined callout with comic offset shadow
   ════════════════════════════════════════════════════════════ */

.sk-sticker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sk-space-2) var(--sk-space-4);

  background: var(--sk-brand-white);
  color: var(--sk-text);
  font-family: var(--sk-font-body);
  font-weight: var(--sk-fw-bold);

  border: var(--sk-border-width-lg) solid var(--sk-brand-black);
  border-radius: var(--sk-radius-md);
  box-shadow: var(--sk-shadow-offset-black);

  transform: rotate(-1.5deg);
  transition: transform var(--sk-transition-fast);
}

.sk-sticker--aqua   { background: var(--sk-brand-aqua); }
.sk-sticker--pink   { background: var(--sk-brand-pink); }
.sk-sticker--yellow { background: var(--sk-extended-yellow); }
.sk-sticker--purple { background: var(--sk-extended-purple); color: var(--sk-brand-white); }

/* Sticker outline only (frame, no fill) */
.sk-sticker--outline {
  background: transparent;
  box-shadow: none;
  border-style: dashed;
}

/* ═══════════════════════════════════════════════════════════════
   HEADING UNDERLINE HELPER
   Applies a hand-drawn underline under an inline heading span.
   ════════════════════════════════════════════════════════════ */

.sk-underline {
  position: relative;
  display: inline-block;
}

.sk-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.35em;
  height: 0.32em;
  background-color: var(--sk-brand-aqua);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8c20-4 40-5 60-4s34 3 54 1' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8c20-4 40-5 60-4s34 3 54 1' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  pointer-events: none;
}

.sk-underline--pink::after   { background-color: var(--sk-brand-pink); }
.sk-underline--purple::after { background-color: var(--sk-extended-purple); }
.sk-underline--yellow::after { background-color: var(--sk-extended-yellow); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE REDUCTION
   Decoration must get lighter, not break, on small screens.
   ════════════════════════════════════════════════════════════ */

/*
 * These three utilities are the ONLY intentional !important in the
 * Sockaki design system. A "hide this decoration" utility must be
 * unconditional: it is opt-in, single-purpose, and exists to guarantee
 * decorative elements can always be suppressed on small screens.
 * MASTER.md §1.2 forbids !important used to WIN cascade fights; that is
 * not the case here (see the --wd-* variable bridges for how genuine
 * conflicts are resolved instead).
 */
@media (max-width: 1024px) {
  .sk-decor--hide-lg { display: none !important; }
}

@media (max-width: 767px) {
  .sk-decor--hide-md { display: none !important; }
  .sk-shape--xl { --sk-shape-size: 80px; }
  .sk-shape--lg { --sk-shape-size: 56px; }
}

@media (max-width: 480px) {
  .sk-decor--hide-sm { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .sk-sticker,
  .sk-tape,
  .sk-decor {
    transition: none;
    animation: none;
  }

  /* Neutralise decorative rotation for motion-sensitive users. */
  .sk-sticker,
  .sk-tape {
    transform: none;
  }
}