/**
 * boalabs.io — typographic corrections per script.
 *
 * Carried over from the pre-kit plugin's i18n.css. The parts that generalized —
 * the pre-paint hold, the per-script font stacks, the letter-spacing blanket
 * and the blanket text-transform reset — now live in core and in the generated
 * stylesheet. What is left here is everything that names boalabs' own classes.
 *
 * The blanket is scoped to #labs, so anything restoring a value AFTER it must
 * also carry #labs or it loses on specificity and silently does nothing. That
 * mistake was made on this site once and cost an afternoon; it is the reason
 * the selectors below look more verbose than they need to.
 */

/* ── small uppercase labels ───────────────────────────────────────────────
   Once the blanket removes the tracking, a 0.7rem label has lost its only
   size cue. Give a little of it back as type size. */
html[data-script="hans"] .lp-eyebrow,  html[data-script="hang"] .lp-eyebrow,  html[data-script="jpan"] .lp-eyebrow,  html[data-script="deva"] .lp-eyebrow,
html[data-script="hans"] .lp-eyebrow2, html[data-script="hang"] .lp-eyebrow2, html[data-script="jpan"] .lp-eyebrow2, html[data-script="deva"] .lp-eyebrow2 { font-size: .78rem; }
html[data-script="hans"] .lp-card__role, html[data-script="hang"] .lp-card__role, html[data-script="jpan"] .lp-card__role, html[data-script="deva"] .lp-card__role { font-size: .74rem; }
html[data-script="hans"] .lp-scrollcue, html[data-script="hang"] .lp-scrollcue, html[data-script="jpan"] .lp-scrollcue, html[data-script="deva"] .lp-scrollcue { font-size: .8rem; }

/* ── the wordmark ─────────────────────────────────────────────────────────
   Always Latin whatever the page language, so it keeps its tracking. The
   #labs here is load-bearing — see the note at the top of this file. */
html[data-script="hans"] #labs .lp-nav .lp-logo,
html[data-script="hang"] #labs .lp-nav .lp-logo,
html[data-script="jpan"] #labs .lp-nav .lp-logo,
html[data-script="deva"] #labs .lp-nav .lp-logo { letter-spacing: .12em; }

/* ── display headline ─────────────────────────────────────────────────────*/
html[data-script="hans"] .lp-title,
html[data-script="jpan"] .lp-title,
html[data-script="hang"] .lp-title { letter-spacing: normal; line-height: 1.06; }
/* Devanagari needs the most room: matras sit above the headstroke and the
   conjunct stack sits below it, so 0.92 collides on both sides. */
html[data-script="deva"] .lp-title { letter-spacing: normal; line-height: 1.34; }
html[data-script="deva"] .lp-you   { transform: translateY(.30em); }
html[data-script="deva"] .lp-you.in { transform: none; }

/* Longer-running Latin languages. Spanish, French and Haitian Creole run
   roughly 20-25% longer than English, enough to push the headline onto a third
   line at the top of the clamp and collide with the ticker. Trim the maximum,
   not the minimum: small screens are already fluid. */
html[lang="es"] .lp-title,
html[lang="fr"] .lp-title,
html[lang="ht"] .lp-title { font-size: clamp(2.4rem, 8.1vw, 5.5rem); }

/* CJK and Hangul are denser per character and can take the full size back. */
html[data-script="hans"] .lp-title,
html[data-script="jpan"] .lp-title,
html[data-script="hang"] .lp-title { font-size: clamp(2.5rem, 8.4vw, 6rem); }
html[data-script="deva"] .lp-title { font-size: clamp(2.1rem, 7vw, 4.9rem); }

/* ── buttons and pills that were sized for English ────────────────────────*/
html:not([lang="en"]) .lp-cta-book,
html:not([lang="en"]) .lp-consult,
html:not([lang="en"]) .lp-lab,
html:not([lang="en"]) .lp-visit,
html:not([lang="en"]) .lp-form-send {
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  hyphens: auto;
}
html[lang="es"] .lp-cta-book, html[lang="fr"] .lp-cta-book, html[lang="ht"] .lp-cta-book,
html[lang="es"] .lp-consult,  html[lang="fr"] .lp-consult,  html[lang="ht"] .lp-consult {
  letter-spacing: .06em;
}

/* Card titles are demo proper names and stay English, but the role label above
   them runs long once translated ("Therapy Practice" -> "Cabinet de thérapie").
   Let it wrap instead of clipping the card. */
html:not([lang="en"]) .lp-card__role { white-space: normal; }

/* Body copy: CJK and Devanagari both want more leading than a Latin 1.5. */
html[data-script="hans"] #labs, html[data-script="hang"] #labs,
html[data-script="jpan"] #labs { line-height: 1.75; }
html[data-script="deva"] #labs { line-height: 1.85; }
html[data-script="deva"] .lp-case p, html[data-script="deva"] .lp-about-p { line-height: 1.95; }

/* ── the switcher ─────────────────────────────────────────────────────────
   Sits beside the existing dark/light pill and matches its shape, so the two
   read as one control cluster rather than two bolted-on widgets. The legacy
   .bl-lang class is still emitted (see compat in site.json), so these rules
   keep matching without any change to them. */
.bl-lang {
  --bik-sw-bg: rgba(255, 255, 255, .72);
  --bik-sw-fg: #1a1a1a;
  --bik-sw-border: rgba(120, 120, 120, .35);
  --bik-sw-accent: var(--color-accent, #ff4f1f);
  --bik-sw-right: 92px;
  --bik-sw-bottom: 22px;
}
html[data-theme="dark"] .bl-lang {
  --bik-sw-bg: rgba(20, 20, 20, .72);
  --bik-sw-border: rgba(200, 200, 200, .28);
  --bik-sw-fg: #f4f1ea;
}

/* On a phone the two pills side by side reach far enough left to sit on top of
   the hero's centred scroll cue — measured at 390px, the cue ends at x=223 and
   the language pill started at x=217. Stack the language pill ABOVE the theme
   toggle instead of beside it, so the corner stays one cluster and the cue
   keeps the middle of the screen. Measured against हिन्दी, not English: the
   non-Latin autonyms are wider at the same point size. */
@media (max-width: 560px) {
  .bl-lang { --bik-sw-bottom: 62px; --bik-sw-right: 22px; }
}

/* ── Lab Mode (/vibe/) ────────────────────────────────────────────────────
   A standalone full-bleed 3D page served as static HTML, outside the theme.
   Two defaults are wrong there. It never gets html[data-theme="dark"], so the
   switcher wears its LIGHT skin on a near-black canvas; and it holds the 92px
   gap for a dark/light pill that page never draws, so it floats short of the
   corner. Dress it dark, put it in the corner, and let it rest low so it stops
   competing with the orbs — full strength on hover, on focus, and while the
   native menu is open (.is-pointer, set by the switcher's own script).

   The resting fade is inside @media (hover: hover) on purpose: a touch device
   has no hover to bring it back, so it stays fully visible there. */
body.lab-mode .bl-lang {
  --bik-sw-right: 22px;
  --bik-sw-bg: rgba(12, 9, 24, .42);
  --bik-sw-border: rgba(236, 233, 245, .20);
  --bik-sw-fg: #ece9f5;
  box-shadow: none;
  transition: opacity .28s ease, background .3s, border-color .3s;
}
@media (hover: hover) {
  body.lab-mode .bl-lang { opacity: .3; }
  body.lab-mode .bl-lang:hover,
  body.lab-mode .bl-lang:focus-within,
  body.lab-mode .bl-lang.is-pointer {
    opacity: 1;
    --bik-sw-bg: rgba(12, 9, 24, .85);
    --bik-sw-border: rgba(236, 233, 245, .38);
  }
}