/*
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.2.5
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). Until Weglot is configured the slot sits empty
   and the "coming soon" placeholder below stands in its place. */
.widvi-lang-slot:empty { min-width: 0; }

/* Trilingual "coming soon" placeholder.
   Self-retiring: the moment Weglot injects anything into #weglot-switcher the slot stops
   matching :empty, and this placeholder hides itself. No cleanup step needed at launch. */
.widvi-lang-wrap { display: flex; align-items: center; gap: .6rem; }

.widvi-lang-soon {
  margin: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: .82rem;
  line-height: 1.3;
  color: var(--wp--preset--color--ink-muted);
}
.widvi-lang-list { white-space: nowrap; }
.widvi-lang-tag {
  white-space: nowrap;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .15rem .45rem;
  border-radius: 999px;
  border: 1px solid var(--wp--preset--color--hairline);
  color: var(--wp--preset--color--ink-muted);
}

/* Weglot live -> placeholder retires. */
.widvi-lang-slot:not(:empty) + .widvi-lang-soon { display: none; }

@media (max-width: 600px) {
  .widvi-lang-soon { font-size: .76rem; gap: .35rem; }
}

/* ============================================================
   v2 — image-led direction (hero, mission, islands, tiles, voices)
   ============================================================ */

/* Shared accents for inline emphasis inside headings. */
.widvi-accent     { color: var(--wp--preset--color--sunrise-gold);  font-style: normal; }
.widvi-accent-red { color: var(--wp--preset--color--flamboyant-red); font-style: normal; }

/* ---------- Hero (full-bleed photo Cover) ---------- */
.widvi-hero { position: relative; }
/* Replace the flat dim with a left-weighted navy scrim so left-aligned text stays legible. */
.widvi-hero .wp-block-cover__background {
  opacity: 1 !important;
  background:
    linear-gradient(95deg,
      color-mix(in srgb, var(--wp--preset--color--navy-deep) 94%, transparent) 0%,
      color-mix(in srgb, var(--wp--preset--color--navy-deep) 66%, transparent) 42%,
      color-mix(in srgb, var(--wp--preset--color--navy-deep) 18%, transparent) 75%,
      transparent 100%),
    linear-gradient(0deg,
      color-mix(in srgb, var(--wp--preset--color--navy-deep) 80%, transparent) 0%,
      transparent 42%) !important;
}
.widvi-hero-inner { max-width: 46rem; }
.widvi-hero-inner h1 {
  color: var(--wp--preset--color--pearl-white);
  font-size: clamp(2.7rem, 1.6rem + 5.2vw, 5.4rem);
  font-weight: 800; line-height: 1.04;
}
.widvi-hero .widvi-greeting { color: var(--wp--preset--color--sunrise-gold); }
/* Flamboyant-Red → Gold → Teal → Green horizon stripe along the bottom. */
.widvi-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; z-index: 2;
  background: linear-gradient(90deg,
    var(--wp--preset--color--flamboyant-red) 0 22%,
    var(--wp--preset--color--sunrise-gold) 22% 46%,
    var(--wp--preset--color--caribbean-teal) 46% 72%,
    var(--wp--preset--color--palm-green) 72% 100%);
}

/* ---------- Mission band (drenched navy) ---------- */
.widvi-mission :where(h1,h2,h3) { color: var(--wp--preset--color--pearl-white); }
.widvi-mission .widvi-credo {
  font-family: var(--wp--preset--font-family--playfair);
  font-style: italic; color: var(--wp--preset--color--sunrise-gold);
}

/* ---------- Three islands ---------- */
.widvi-iso .wp-block-cover { border-radius: 14px; overflow: hidden; }
.widvi-iso .wp-block-cover__image-background { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.widvi-iso .wp-block-cover:hover .wp-block-cover__image-background { transform: scale(1.06); }

/* ---------- Pillar tiles (duotone photo Covers, asymmetric) ---------- */
.widvi-tiles { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; }
.widvi-tile { border-radius: 14px; overflow: hidden; min-height: 230px; }
.widvi-tile--learn { grid-row: span 2; }
.widvi-tile .wp-block-cover__image-background { filter: grayscale(1) contrast(1.05) brightness(.95); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.widvi-tile:hover .wp-block-cover__image-background { transform: scale(1.05); }
.widvi-tile .wp-block-cover__background { mix-blend-mode: multiply; opacity: .82 !important; }
.widvi-tile :where(h3,p) { color: var(--wp--preset--color--pearl-white); text-shadow: 0 1px 8px color-mix(in srgb, var(--wp--preset--color--charcoal) 55%, transparent); }
.widvi-tile .widvi-ptag { font-family: var(--wp--preset--font-family--playfair); font-style: italic; color: var(--wp--preset--color--pearl-white); opacity: .95; }
@media (max-width: 820px) {
  .widvi-tiles { grid-template-columns: 1fr; }
  .widvi-tile--learn { grid-row: auto; }
}

/* ---------- Voices / heritage ---------- */
.widvi-voices .wp-block-columns { align-items: center; }
.widvi-voices figure.wp-block-image,
.widvi-voices .wp-block-image img { border-radius: 14px; }

/* ---------- Trade Hawk ask box (Learn front door) ---------- */
.th-ask { display: flex; flex-direction: column; gap: 1rem; }
.th-panel {
  display: flex; flex-direction: column; gap: .6rem;
  background: var(--wp--preset--color--pearl-white);
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: 14px; padding: 1.3rem;
}
.th-panel[hidden] { display: none; }
.th-label {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 600; font-size: .95rem; color: var(--wp--preset--color--deep-navy);
}
.th-input {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: .7rem .9rem;
  font: inherit; font-size: 1rem; /* 16px min — stops iOS zooming the page on focus */
  color: var(--wp--preset--color--charcoal);
  background: var(--wp--preset--color--pearl-white);
  border: 1px solid var(--wp--preset--color--hairline); border-radius: 10px;
}
.th-input:focus-visible {
  outline: 3px solid var(--wp--preset--color--green-strong); outline-offset: 1px; border-color: transparent;
}
.th-input--code { letter-spacing: .35em; font-size: 1.35rem; text-align: center; max-width: 11ch; }
.th-input--area { resize: vertical; min-height: 96px; }
.th-btn {
  min-height: 48px; padding: .7rem 1.4rem; align-self: flex-start;
  font-family: var(--wp--preset--font-family--montserrat); font-weight: 600; font-size: 1rem;
  color: var(--wp--preset--color--pearl-white);
  background: var(--wp--preset--color--green-strong);
  border: 0; border-radius: 999px; cursor: pointer;
  transition: background .2s ease;
}
.th-btn:hover { background: var(--wp--preset--color--deep-navy); }
.th-btn:focus-visible { outline: 3px solid var(--wp--preset--color--deep-navy); outline-offset: 2px; }
.th-btn[disabled] { opacity: .6; cursor: default; }
.th-help { margin: .2rem 0 0; font-size: .9rem; color: var(--wp--preset--color--ink-muted); }
.th-link {
  color: var(--wp--preset--color--green-strong); font: inherit; font-size: inherit;
  background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer;
}
.th-msg {
  margin: 0; padding: .8rem 1rem; border-radius: 10px; font-size: .95rem;
  color: var(--wp--preset--color--deep-navy);
  background: color-mix(in srgb, var(--wp--preset--color--palm-green) 14%, transparent);
}
.th-msg[hidden] { display: none; }
.th-msg.is-error {
  color: var(--wp--preset--color--error-red);
  background: color-mix(in srgb, var(--wp--preset--color--error-red) 10%, transparent);
}
.th-answer {
  padding: 1.4rem 1.3rem; border-radius: 14px;
  background: var(--wp--preset--color--cream);
  border: 1px solid var(--wp--preset--color--hairline);
}
.th-answer[hidden] { display: none; }
.th-answer p { margin: 0 0 .9rem; }
.th-answer p:last-child { margin-bottom: 0; }

/* Quiz mode — Irie asks, you answer */
.th-quiz-filters { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.th-quiz-filters .th-label { flex-basis: 100%; }
.th-input--select { width: auto; flex: 1 1 12ch; }
.th-quiz-q {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 600; font-size: 1.05rem; line-height: 1.5;
  color: var(--wp--preset--color--deep-navy);
  margin-top: .4rem;
}
.th-quiz-q[hidden] { display: none; }
.th-quiz-opts { display: flex; flex-direction: column; gap: .5rem; }
.th-quiz-opts:empty { display: none; }
.th-quiz-opt {
  min-height: 48px; padding: .7rem .9rem; text-align: left;
  font: inherit; font-size: 1rem; line-height: 1.45;
  color: var(--wp--preset--color--charcoal);
  background: var(--wp--preset--color--pearl-white);
  border: 1px solid var(--wp--preset--color--hairline); border-radius: 10px;
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.th-quiz-opt:hover:not([disabled]) { border-color: var(--wp--preset--color--green-strong); }
.th-quiz-opt:focus-visible { outline: 3px solid var(--wp--preset--color--green-strong); outline-offset: 1px; }
.th-quiz-opt[disabled] { cursor: default; opacity: .85; }
.th-quiz-opt.is-right {
  border-color: var(--wp--preset--color--green-strong);
  background: color-mix(in srgb, var(--wp--preset--color--palm-green) 16%, transparent);
  opacity: 1;
}
.th-quiz-opt.is-wrong {
  border-color: var(--wp--preset--color--error-red);
  background: color-mix(in srgb, var(--wp--preset--color--error-red) 8%, transparent);
  opacity: 1;
}
.th-quiz-score { margin: .2rem 0 0; font-size: .9rem; color: var(--wp--preset--color--ink-muted); }
.th-quiz-score[hidden] { display: none; }
.th-daily-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.th-daily-row .th-input { flex: 1 1 16ch; width: auto; }

/* Reader vocabulary — "that is not the word we use." Closed until wanted. */
.th-term {
  background: var(--wp--preset--color--pearl-white);
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: 14px; padding: .5rem 1.3rem;
}
.th-term[open] { padding-bottom: 1.3rem; }
.th-term > summary {
  display: flex; align-items: center; gap: .5rem;
  min-height: 44px; /* touch target */
  cursor: pointer; list-style: none;
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 600; font-size: .95rem;
  color: var(--wp--preset--color--green-strong);
}
.th-term > summary::-webkit-details-marker { display: none; }
.th-term > summary::before { content: "\270E"; font-size: 1.05rem; line-height: 1; }
.th-term > summary:focus-visible {
  outline: 3px solid var(--wp--preset--color--green-strong); outline-offset: 2px; border-radius: 8px;
}
.th-term-form { display: flex; flex-direction: column; gap: .6rem; margin-top: .4rem; }
.th-term-form .th-input--area { min-height: 64px; }
.th-term-msg {
  margin: .2rem 0 0; padding: .7rem .9rem; border-radius: 10px; font-size: .92rem;
  color: var(--wp--preset--color--deep-navy);
  background: color-mix(in srgb, var(--wp--preset--color--palm-green) 14%, transparent);
}
.th-term-msg[hidden] { display: none; }
.th-term-msg.is-error {
  color: var(--wp--preset--color--error-red);
  background: color-mix(in srgb, var(--wp--preset--color--error-red) 10%, transparent);
}

/* ---- Instructions, for a man who has never met us ----------------------------
   Two contractors got the paper worksheet and could not tell what was being asked.
   These three rules carry the fix on the page: a second line on the closed panel so
   he knows whether to open it, a worked example, and the fine print that says what
   happens to his word. All of it sits INSIDE <details>, so a reader who never opens
   the panel pays nothing for it. */
.th-term > summary, .th-wb > summary { flex-wrap: wrap; }
.th-sum-sub {
  flex: 0 0 100%;
  margin-top: .15rem;
  font-weight: 400; font-size: .84rem; line-height: 1.45;
  color: var(--wp--preset--color--ink-muted);
  white-space: normal;
}
.th-fine {
  margin: .1rem 0 0;
  font-size: .82rem; line-height: 1.5;
  color: var(--wp--preset--color--ink-muted);
}
.th-eg {
  margin: .2rem 0 0; padding: .7rem .9rem;
  border-left: 3px solid var(--wp--preset--color--green-strong);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--wp--preset--color--palm-green) 10%, transparent);
  font-size: .88rem; line-height: 1.5;
}

/* ---- The send bar rides with him -------------------------------------------------
   The send button used to sit under the whole card list — 143 cards with "show all"
   off — and its label follows the page language, so on a Kreyòl page a man was
   hunting for "Voye mo mwen yo" somewhere below the fold. It now sticks to the
   bottom of the panel with the progress count beside it, so the way out of the job
   and the sense of how far he has got are both always on screen.
   Negative side margins let the bar's background span the panel's full width. */
.th-wb-bar {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: .45rem;
  margin: .4rem -1.3rem 0; padding: .75rem 1.3rem .45rem;
  background: var(--wp--preset--color--pearl-white);
  border-top: 1px solid var(--wp--preset--color--hairline);
}
.th-wb-bar .th-btn { align-self: flex-start; }
.th-wb-bar .th-wb-progress { margin: 0; }
.th-wb-none { margin-top: .6rem; }

/* The termbase worksheet — 250 words, filled on the page */
.th-wb {
  background: var(--wp--preset--color--pearl-white);
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: 14px; padding: .5rem 1.3rem;
}
.th-wb[open] { padding-bottom: 1.3rem; }
.th-wb > summary {
  display: flex; align-items: center; gap: .5rem;
  min-height: 44px; cursor: pointer; list-style: none;
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 600; font-size: .95rem;
  color: var(--wp--preset--color--green-strong);
}
.th-wb > summary::-webkit-details-marker { display: none; }
.th-wb > summary::before { content: "\2605"; font-size: 1.05rem; line-height: 1; }
.th-wb > summary:focus-visible {
  outline: 3px solid var(--wp--preset--color--green-strong); outline-offset: 2px; border-radius: 8px;
}
.th-wb-body { display: flex; flex-direction: column; gap: .7rem; margin-top: .4rem; }
.th-wb-controls { display: flex; gap: .8rem; flex-wrap: wrap; }
.th-wb-ctl { display: flex; flex-direction: column; gap: .3rem; flex: 1 1 14rem; }
.th-wb-toggle {
  display: flex; align-items: center; gap: .5rem;
  min-height: 44px; font-size: .95rem; cursor: pointer;
}
.th-wb-toggle input { width: 20px; height: 20px; }
.th-wb-progress {
  margin: 0; font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 600; font-size: .9rem; color: var(--wp--preset--color--ink-muted);
}
/* Capped so the list scrolls inside the panel instead of burying the send button */
.th-wb-list {
  display: flex; flex-direction: column; gap: .7rem;
  max-height: 60vh; overflow-y: auto;
  padding: .2rem; margin: 0 -.2rem;
}
.th-wb-sec {
  margin: .8rem 0 0; font-family: var(--wp--preset--font-family--montserrat);
  font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wp--preset--color--green-strong);
}
.th-wb-sec:first-child { margin-top: 0; }
.th-wb-card {
  display: flex; flex-direction: column; gap: .4rem;
  padding: .8rem .9rem; border-radius: 10px;
  background: var(--wp--preset--color--cream);
  border: 1px solid var(--wp--preset--color--hairline);
}
.th-wb-term {
  margin: 0; font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 700; font-size: 1rem; color: var(--wp--preset--color--deep-navy);
}
.th-wb-sense, .th-wb-have {
  margin: 0; font-size: .88rem; color: var(--wp--preset--color--ink-muted);
}
.th-wb-have { color: var(--wp--preset--color--charcoal); }
.th-wb-caution {
  margin: 0; padding: .5rem .7rem; border-radius: 8px; font-size: .88rem;
  color: var(--wp--preset--color--error-red);
  background: color-mix(in srgb, var(--wp--preset--color--error-red) 9%, transparent);
}
.th-wb-yn { display: flex; gap: .5rem; flex-wrap: wrap; }
.th-wb-ynbtn {
  min-height: 40px; padding: .4rem .9rem; font: inherit; font-size: .9rem;
  color: var(--wp--preset--color--charcoal);
  background: var(--wp--preset--color--pearl-white);
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: 999px; cursor: pointer;
}
.th-wb-ynbtn:focus-visible { outline: 3px solid var(--wp--preset--color--green-strong); outline-offset: 1px; }
.th-wb-ynbtn.is-on {
  color: var(--wp--preset--color--pearl-white);
  background: var(--wp--preset--color--green-strong);
  border-color: var(--wp--preset--color--green-strong); font-weight: 600;
}
.th-wb-word { min-height: 44px; }
.th-wb-noteinput { min-height: 40px; font-size: .9rem; }

@media (max-width: 520px) {
  .th-btn { align-self: stretch; text-align: center; }
}

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