/*
Theme Name: WIDVI
Theme URI: https://wattsindevi.live
Description: Watts In De VI — community-first child theme of Twenty Twenty-Five. Brand tokens, fonts, and patterns baked in; mobile-first, trilingual-ready, WCAG AA. Brand identity lives in theme.json; this file carries only the flourishes theme.json can't express.
Author: WIDVI
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: widvi
*/

/* ============================================================
   Flourishes theme.json cannot express.
   Everything else (palette, fonts, spacing, button/link styles)
   lives in theme.json. Keep this file minimal.
   ============================================================ */

/* Sunrise hero: warm gradient ground + a Flamboyant-Red horizon line,
   echoing the logo. Used by the widvi/hero pattern. */
.widvi-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--wp--preset--color--sunrise-peach) 0%, var(--wp--preset--color--cream) 70%);
}
.widvi-hero::after {              /* the horizon line */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(226, 64, 28, .5), transparent);
}
.widvi-hero::before {             /* soft radial sunrise glow above the horizon */
  content: "";
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, 70vw);
  aspect-ratio: 2 / 1;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 179, 71, .55), rgba(255, 179, 71, 0) 70%);
  pointer-events: none;
}
.widvi-hero > * { position: relative; }   /* keep content above the glow */

/* Logos baked on a cream plate: multiply drops the near-white plate on light surfaces. */
.widvi-logo-blend { mix-blend-mode: multiply; }

/* Per-pillar color cue: a 4px top border carries the pillar's identity.
   Cue is set by a modifier class (survives editor round-trips, unlike inline custom props). */
.widvi-pillar {
  border-top: 4px solid var(--widvi-cue, var(--wp--preset--color--caribbean-teal));
  border-right: 1px solid var(--wp--preset--color--hairline);
  border-bottom: 1px solid var(--wp--preset--color--hairline);
  border-left: 1px solid var(--wp--preset--color--hairline);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(27, 54, 93, .06);
  height: 100%;
  transition: transform .14s ease, box-shadow .14s ease;
}
.widvi-pillar:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(27, 54, 93, .14); }
.widvi-pillar--learn   { --widvi-cue: var(--wp--preset--color--palm-green); }
.widvi-pillar--reach   { --widvi-cue: var(--wp--preset--color--sunrise-gold); }
.widvi-pillar--connect { --widvi-cue: var(--wp--preset--color--caribbean-teal); }
.widvi-pillar--faith   { --widvi-cue: var(--wp--preset--color--coral); }
.widvi-pillar .widvi-ptag { color: var(--wp--preset--color--ink-muted); }   /* italic tagline — AA on pearl-white */

/* Persona chips: a colored identity dot + label. Dot color set per chip by a modifier class.
   Gold/coral dots carry navy ink (Light-Carries-Navy); navy/teal/green dots carry white. */
.widvi-dot {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%;
  display: grid; place-items: center; line-height: 1;
  font-family: var(--wp--preset--font-family--montserrat); font-weight: 700; font-size: .85rem;
  background: var(--widvi-cue, var(--wp--preset--color--teal-strong));
  color: var(--widvi-cue-ink, var(--wp--preset--color--pearl-white));
}
.widvi-chip--irie     { --widvi-cue: var(--wp--preset--color--deep-navy); }
.widvi-chip--ms       { --widvi-cue: var(--wp--preset--color--teal-strong); }
.widvi-chip--uncle    { --widvi-cue: var(--wp--preset--color--sunrise-gold); --widvi-cue-ink: var(--wp--preset--color--deep-navy); }
.widvi-chip--official { --widvi-cue: var(--wp--preset--color--deep-navy); }
.widvi-chip--teacher  { --widvi-cue: var(--wp--preset--color--green-strong); }
.widvi-chip--cuz      { --widvi-cue: var(--wp--preset--color--sunrise-gold); --widvi-cue-ink: var(--wp--preset--color--deep-navy); }
.widvi-chip--brother  { --widvi-cue: var(--wp--preset--color--coral); --widvi-cue-ink: var(--wp--preset--color--deep-navy); }
/* Connect directory listing: square avatar + vetted badge. */
.widvi-avatar {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: 12px;
  display: grid; place-items: center; line-height: 1;
  font-family: var(--wp--preset--font-family--montserrat); font-weight: 700;
  background: var(--wp--preset--color--teal-strong); color: var(--wp--preset--color--pearl-white);
}
.widvi-badge {
  display: inline-block; vertical-align: middle; margin-left: .4rem;
  padding: .12em .5em; border-radius: 999px; font-size: .7rem; font-weight: 700;
  background: var(--wp--preset--color--green-strong); color: var(--wp--preset--color--pearl-white);
}

/* Charcoal footer link/text colors (theme link token is teal; footer sits on dark).
   Derived from the pearl-white token so no off-palette hue is introduced. */
.widvi-footer a,
.widvi-footer .widvi-footer-muted { color: color-mix(in srgb, var(--wp--preset--color--pearl-white), transparent 22%); }
.widvi-footer a:hover { color: var(--wp--preset--color--pearl-white); }

/* Language-switcher slot — Weglot injects its switcher here (point Weglot at #weglot-switcher
   in its dashboard; default-floating otherwise). ponytail: empty slot until Weglot is configured. */
.widvi-lang-slot:empty { min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}