/* ============================================================
   COMO4KIDS — Component & Texture Primitives
   Requires colors_and_type.css. Neobrutalist Riso building
   blocks: halftone textures, buttons, chips, cards, inputs,
   badges, dividers, wordmark.
   ============================================================ */

/* ---------- Layout helpers ---------- */
.wrap        { width: min(var(--wrap), 92vw); margin-inline: auto; }
.wrap-tight  { width: min(var(--wrap-tight), 92vw); margin-inline: auto; }
.stack       { display: flex; flex-direction: column; }
.row         { display: flex; align-items: center; }
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); } .gap-6 { gap: var(--sp-6); }

/* ---------- RISO TEXTURES ---------- */
/* Dense halftone dot grid — THE signature overlay. Place on a
   position:relative parent; dots sit above bg, below content. */
.halftone { position: relative; }
.halftone::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(circle, rgba(31,24,16,0.07) 1px, transparent 1.5px);
  background-size: 4px 4px; pointer-events: none;
}
.halftone > * { position: relative; z-index: 1; }

/* Pink-on-dark halftone (for dark panels) */
.halftone-pink::before {
  background-image: radial-gradient(circle, rgba(255,79,139,0.14) 1px, transparent 1.5px);
}

/* Soft ink glow wash — radial spot-color bloom behind content */
.ink-glow-pink   { background: radial-gradient(circle at 18% 25%, rgba(255,79,139,0.22) 0%, transparent 42%), var(--bg1); }
.ink-glow-teal   { background: radial-gradient(circle at 82% 30%, rgba(20,168,155,0.18) 0%, transparent 42%), var(--bg1); }
.ink-glow-blue   { background: radial-gradient(circle at 80% 65%, rgba(45,114,217,0.16) 0%, transparent 45%), var(--bg1); }
.ink-glow-multi  {
  background:
    radial-gradient(circle at 15% 20%, rgba(255,79,139,0.20) 0%, transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(255,182,39,0.18) 0%, transparent 40%),
    radial-gradient(circle at 60% 90%, rgba(20,168,155,0.16) 0%, transparent 45%),
    var(--bg1);
}

/* ---------- DIVIDERS ---------- */
.tape-divider {
  height: 20px;
  background: repeating-linear-gradient(-45deg, var(--pink), var(--pink) 4px, transparent 4px, transparent 12px);
  border-top: var(--bd); border-bottom: var(--bd);
}
.tape-divider.marigold { background: repeating-linear-gradient(-45deg, var(--marigold), var(--marigold) 4px, transparent 4px, transparent 12px); }
.tape-divider.teal     { background: repeating-linear-gradient(-45deg, var(--teal),     var(--teal) 4px,     transparent 4px, transparent 12px); }
.halftone-divider {
  height: 40px;
  background-image: radial-gradient(circle, var(--pink) 1px, transparent 1px);
  background-size: 8px 8px; opacity: 0.18;
}
.torn-divider {
  height: 16px; background: var(--black);
  clip-path: polygon(0% 0%,3% 80%,6% 20%,9% 60%,12% 10%,15% 70%,18% 30%,21% 90%,24% 40%,27% 80%,30% 20%,33% 70%,36% 10%,39% 60%,42% 30%,45% 80%,48% 10%,51% 60%,54% 20%,57% 70%,60% 40%,63% 80%,66% 20%,69% 60%,72% 10%,75% 70%,78% 30%,81% 90%,84% 40%,87% 80%,90% 20%,93% 60%,96% 10%,100% 50%,100% 100%,0% 100%);
}

/* ---------- EYEBROW BADGE ---------- */
.section-eyebrow {
  display: inline-block;
  background: var(--pink); color: var(--white);
  padding: 6px 14px; border: var(--bd);
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  white-space: nowrap;
}
.section-eyebrow.marigold { background: var(--marigold); color: var(--black); }
.section-eyebrow.teal     { background: var(--teal); }
.section-eyebrow.blue     { background: var(--blue); }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; cursor: pointer;
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: var(--bd); box-shadow: var(--sh-1);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  border-radius: var(--r-0);
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--sh-lift-1); }
.btn:active { transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--black); }

.btn-primary { background: var(--pink);     color: var(--white); }
.btn-primary:hover { color: var(--white); }
.btn-marigold { background: var(--marigold); color: var(--black); }
.btn-teal    { background: var(--teal-dark); color: var(--white); }
.btn-blue    { background: var(--blue);     color: var(--white); }
.btn-ghost   { background: transparent;     color: var(--black); }
.btn-ghost:hover { background: var(--pink-light); }
.btn-dark    { background: var(--black);    color: var(--white); }

.btn-sm { padding: 9px 14px; font-size: 11px; }
.btn-lg { padding: 16px 28px; font-size: 13px; }

/* ---------- CHIPS / TAGS ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border: var(--bd);
  background: var(--white); color: var(--black);
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em; cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.chip:hover { box-shadow: var(--sh-1); }
.chip[aria-pressed="true"], .chip.active { background: var(--black); color: var(--white); }

/* solid topic tag (no interaction) */
.tag {
  display: inline-block; padding: 5px 11px;
  background: var(--black); color: var(--pink);
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* meaning badge (status pills on cards) */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border: var(--bd);
  background: var(--marigold); color: var(--black);
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.badge.pink   { background: var(--pink); color: var(--white); }
.badge.teal   { background: var(--teal); color: var(--white); }
.badge.blue   { background: var(--blue); color: var(--white); }
.badge.tomato { background: var(--tomato); color: var(--white); }
.badge.ghost  { background: var(--white); color: var(--black); }

/* ---------- CARDS ---------- */
.card {
  background: var(--bg2); border: var(--bd);
  box-shadow: var(--sh-2); border-radius: var(--r-0);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--sh-lift-2); }
.card-pad { padding: var(--sp-5); }
.card-pink-shadow { box-shadow: var(--sh-pink); }
.card-feature {                 /* dark featured card */
  background: var(--black); color: var(--white);
  border: var(--bd); box-shadow: var(--sh-pink);
}
.card-feature p { color: var(--fg-on-dark-2); }
.card-cream { background: var(--cream); }

/* ---------- FORM INPUTS ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--black);
}
.input, .select {
  padding: 12px 14px; border: var(--bd); border-radius: var(--r-0);
  background: var(--white); color: var(--black);
  font-family: var(--font-body); font-size: 14px; width: 100%;
}
.input::placeholder { color: var(--muted); }
.input:focus, .select:focus { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

/* ---------- WORDMARK ---------- */
.wordmark {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1;
  display: inline-flex; align-items: baseline;
  text-shadow: 2px 0 0 rgba(255,79,139,0.45);
}
.wordmark .como  { color: var(--black); text-transform: lowercase; }
.wordmark .four  { color: var(--pink);  text-shadow: 2px 0 0 rgba(31,24,16,0.55); }
.wordmark .kids  { color: var(--black); text-transform: lowercase; }
.wordmark.on-dark .como, .wordmark.on-dark .kids { color: var(--white); }
.wordmark.on-dark { text-shadow: 2px 0 0 rgba(255,79,139,0.5); }

/* comocamps sub-brand wordmark — teal "outdoors" ink, related but distinct.
   Pairs with a square tent badge. */
.wordmark-camps {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1;
  display: inline-flex; align-items: baseline;
  text-shadow: 2px 0 0 rgba(20,168,155,0.45);
}
.wordmark-camps .como  { color: var(--black); text-transform: lowercase; }
.wordmark-camps .camps { color: var(--teal);  text-transform: lowercase; text-shadow: 2px 0 0 rgba(31,24,16,0.5); }
.wordmark-camps.on-dark .como { color: var(--white); }
.wordmark-camps.on-dark { text-shadow: 2px 0 0 rgba(20,168,155,0.55); }

/* Square tent badge that locks up before the camps wordmark */
.camps-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal); border: var(--bd); box-shadow: var(--sh-1);
  color: var(--white); flex: 0 0 auto;
}
.camps-badge svg { stroke: currentColor; }
.camps-lockup { display: inline-flex; align-items: center; gap: 14px; }

/* ---------- SCROLL REVEAL ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: .1s; }
.reveal.delay-2 { transition-delay: .2s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }