/**
 * tokens.css — design tokens + fonturi self-hostate (thefactory-child, Task 2)
 *
 * Portat din sursa de adevar: site/src/index.css (variabilele CSS din
 * @layer base :root / .dark) si prima linie @import (familiile de fonturi).
 *
 * IMPORTANT — diferenta deliberata fata de sursa:
 * src/index.css contine, la finalul fisierului, o regula globala care
 * dezactiveaza toate tranzitiile si animatiile din site:
 *
 *   *, *::before, *::after { transition: none !important; animation: none !important; }
 *
 * Aceasta regula NU a fost portata aici. Owner-ul temei a decis ca
 * animatiile raman PORNITE pe noul site WordPress. Daca cineva o adauga
 * inapoi, orice munca ulterioara pe animatii devine invizibila si foarte
 * greu de depanat. Nu adaugati aceasta regula.
 *
 * Consecinte ale acestei decizii, gestionate mai jos:
 * - `.reduce-motion` este pastrata exact ca in sursa — cu animatiile
 *   pornite global, aceasta clasa are acum un efect real.
 * - S-a adaugat un bloc `@media (prefers-reduced-motion: reduce)` (absent
 *   din sursa) care aplica aceeasi suprimare ca `.reduce-motion`, ca prag
 *   minim de accesibilitate.
 */

/* ==========================================================================
   1. @font-face — Inter (300/400/500/600/700) + Plus Jakarta Sans (400/500/600/700/800)
   Fisiere self-hostate in assets/fonts/, subset latin + latin-ext (diacritice RO).
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/inter-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-800.woff2') format('woff2');
}

/* ==========================================================================
   2. :root — variabile CSS (portate exact din src/index.css @layer base :root)
   ========================================================================== */

:root {
  --background: 0 0% 100%;
  --foreground: 228 96% 5%;

  --card: 0 0% 100%;
  --card-foreground: 228 96% 5%;

  --popover: 0 0% 100%;
  --popover-foreground: 228 96% 5%;

  --primary: 228 96% 5%;
  --primary-foreground: 0 0% 100%;

  --secondary: 230 60% 55%;
  --secondary-foreground: 0 0% 100%;

  --muted: 220 14% 96%;
  --muted-foreground: 220 9% 46%;

  --accent: 230 60% 55%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 230 60% 55%;

  --radius: 0.5rem;

  --badge-new: 160 84% 39%;
  --badge-new-foreground: 0 0% 100%;

  --brand-navy: 228 96% 5%;
  --brand-navy-foreground: 0 0% 100%;
  --brand-lime: 75 85% 65%;
  --brand-lime-foreground: 228 96% 5%;

  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;

  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 240 5.9% 10%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 240 4.8% 95.9%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

/* ==========================================================================
   3. .dark — set complet (portat exact din src/index.css .dark)
   ========================================================================== */

.dark {
  --background: 228 50% 6%;
  --foreground: 220 14% 96%;

  --card: 228 45% 8%;
  --card-foreground: 220 14% 96%;

  --popover: 228 45% 8%;
  --popover-foreground: 220 14% 96%;

  --primary: 220 14% 96%;
  --primary-foreground: 228 50% 6%;

  --secondary: 230 60% 55%;
  --secondary-foreground: 0 0% 100%;

  --muted: 228 30% 14%;
  --muted-foreground: 220 9% 60%;

  --accent: 230 60% 55%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 62% 50%;
  --destructive-foreground: 0 0% 100%;

  --border: 228 20% 18%;
  --input: 228 20% 18%;
  --ring: 230 60% 55%;

  --badge-new: 160 84% 39%;
  --badge-new-foreground: 0 0% 100%;

  --sidebar-background: 228 45% 8%;
  --sidebar-foreground: 220 14% 90%;
  --sidebar-primary: 220 14% 96%;
  --sidebar-primary-foreground: 228 50% 6%;
  --sidebar-accent: 228 30% 14%;
  --sidebar-accent-foreground: 220 14% 96%;
  --sidebar-border: 228 20% 18%;
  --sidebar-ring: 230 60% 55%;
}

/* ==========================================================================
   4. Legaturi tipografice implicite

   body — portat din src/index.css @layer base, regula
   `body { @apply bg-background text-foreground font-body antialiased; }`.
   Initial doar font-family fusese portat aici; fara restul, fundalul si
   textul ramaneau pe valorile implicite GeneratePress (#f7f8f9 / #222222)
   in loc de tokenii de design (alb / navy). Culorile folosesc
   hsl(var(--background)) / hsl(var(--foreground)) — nu valori fixe — ca sa
   ramana corecte si sub .dark.

   font-size/line-height: regula @apply din sursa NU le contine — in React,
   16px/24 vin pur din absenta oricarei declaratii (fontul implicit de 16px
   al browserului + `html { line-height: 1.5 }` din Tailwind Preflight,
   deja portat in tailwind.css). In tema WP insa, parintele GeneratePress
   (assets/css/main.min.css) are propriul reset static
   `body,button,input,select,textarea { font-size:17px; line-height:1.5 }`,
   care castiga cascada in lipsa unei declaratii explicite aici (Preflight
   nu seteaza deloc font-size, deci nu exista nimic care sa-l concureze).
   Rezultatul, verificat pe staging: 17px/25.5 in loc de 16px/24. De aceea
   sunt setate explicit mai jos — nu inventeaza stil nou, ci restaureaza
   valoarea pe care design-ul o are deja, anuland reset-ul GP.
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  /* 1rem, nu 16px: GeneratePress hardcodeaza body{font-size:17px} si Preflight
     nu declara nimic, deci trebuie sa declaram ceva. Dar `1rem` se rezolva la
     preferinta de font a browserului (16px implicit, cat masoara si referinta),
     deci respecta un utilizator care si-a marit fontul. `16px` l-ar ignora. */
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   5. Utilitare .font-heading / .font-body
   ========================================================================== */

.font-heading {
  font-family: var(--font-heading);
}

.font-body {
  font-family: var(--font-body);
}

/* ==========================================================================
   6. High contrast mode (portat exact din sursa)
   ========================================================================== */

.high-contrast {
  --foreground: 0 0% 0%;
  --background: 0 0% 100%;
  --muted-foreground: 0 0% 20%;
  --border: 0 0% 0%;
}
.dark.high-contrast {
  --foreground: 0 0% 100%;
  --background: 0 0% 0%;
  --muted-foreground: 0 0% 85%;
  --border: 0 0% 100%;
}

/* ==========================================================================
   7. Reduced motion — clasa manuala (portata exact din sursa)
   Cu animatiile pornite global (vezi nota de la inceputul fisierului),
   aceasta clasa are acum efect real.
   ========================================================================== */

.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* NU se porteaza aici regula globala din sursa:
   *, *::before, *::after { transition: none !important; animation: none !important; }
   A se vedea nota de la inceputul fisierului — decizie deliberata a owner-ului. */

/* ==========================================================================
   8. Reveal la scroll — NOU, absent din sursa ca CSS (Task 7).
   Reconstruieste comportamentul framer-motion (initial/whileInView) din
   sursa React, care nu lasa nicio urma in HTML-ul prerandat. Elementul
   marcat cu [data-reveal] porneste ascuns si deplasat; clasa .is-revealed,
   adaugata de assets/js/reveal.js la intrarea in viewport, il aduce in
   pozitia finala. Contractul complet (valori, atribute optionale,
   provenienta din React) e documentat in README.md, "Reveal la scroll".
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: var(--reveal-duration, 0.6s);
  transition-delay: var(--reveal-delay, 0s);
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-reveal="up"]    { transform: translateY(20px); }
[data-reveal="left"]  { transform: translateX(-20px); }
[data-reveal="right"] { transform: translateX(20px); }
[data-reveal="scale"] { transform: scale(0.9); }

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Plasa de siguranta, obligatorie — fara ea, o eroare de JS sau un browser
   fara suport ar lasa pagini intregi invizibile. Clasa .tfa-js e pusa pe
   <html> de reveal.js, ca prim lucru pe care il face; pana atunci, sau daca
   JS-ul nu ruleaza deloc, nimic nu e ascuns. */
html:not(.tfa-js) [data-reveal] {
  opacity: 1;
  transform: none;
}

/* Miscare redusa: continutul apare instant, in starea finala, fara animatie. */
.reduce-motion [data-reveal],
.reduce-motion [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ==========================================================================
   9. Hexagon pattern background (portat exact din sursa)
   ========================================================================== */

.hex-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L52 17.5 L52 42.5 L30 55 L8 42.5 L8 17.5 Z' fill='none' stroke='%23e5e7eb' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 60px 60px;
}

/* ==========================================================================
   10. prefers-reduced-motion la nivel de sistem — NOU, absent din sursa.
   Sursa nu avea nevoie de acest bloc pentru ca animatiile erau deja oprite
   global. Cu ele pornite, acesta e pragul minim de accesibilitate: respecta
   preferinta de sistem a utilizatorului, la fel cum .reduce-motion o face
   manual mai sus.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   11. `[hidden]` trebuie sa castige peste utilitarele Tailwind de display
   (gasit la revizia de dinaintea Fazei 3 — capcana reala pentru accordion.js
   SI tabs.js, care ascund panouri prin atributul DOM `hidden`, nu prin clasa
   `.hidden`; nav.js/a11y.js folosesc clasa si NU sunt afectate de nimic de
   mai jos).
   ========================================================================== */

/*
 * Tailwind Preflight (varful lui assets/css/tailwind.css) emite:
 *
 *   [hidden]:where(:not([hidden=until-found])){display:none}
 *
 * — specificitate (0,1,0). Utilitarele de afisare, `.grid{display:grid}` si
 * `.flex{display:flex}` (ca sa dam doar doua exemple), au EXACT aceeasi
 * specificitate si apar mai jos in acelasi fisier (tailwind.css), deci
 * castiga la egalitate de specificitate prin ordine in sursa — regula
 * `[hidden]` de mai sus NU ascunde nimic pe un element care are deja o clasa
 * Tailwind de display.
 *
 * De ce conteaza real, nu doar teoretic: contractul `data-tfa-tabpanel` din
 * tabs.js cere sa se adauge DOAR atribute peste markup-ul deja randat de
 * React — clasele Tailwind existente raman neschimbate. Radacina reala a
 * panoului in sursa (ex. src/components/engine-optimization/ProcessTabs.tsx,
 * ~linia 84) e chiar elementul cu clasa `grid grid-cols-1 md:grid-cols-...`
 * — deci `hidden` ajunge pe EXACT acelasi element care are `.grid`, si fara
 * regula de mai jos ar pierde lupta de specificitate: panoul ar ramane
 * `display: grid` — vizibil — in ciuda atributului `hidden`. (Fixture-ul de
 * test vechi, tests/fixtures/process-tabs.html dinainte de acest fix, punea
 * `hidden` pe un `<div>` fara nicio clasa de display, ceea ce ascundea
 * problema in teste — vezi tests/tabs.spec.ts pentru cazul care o
 * demasca acum.)
 *
 * Selectorul de mai jos reproduce EXACT forma celui din Preflight —
 * `:where(...)`, nu un simplu `:not(...)` — ca specificitatea sa ramana
 * (0,1,0), data doar de `[hidden]`: `:where()` anuleaza deliberat
 * specificitatea a tot ce e in interiorul lui (asa face si Preflight;
 * un `:not([hidden="until-found"])` neinfasurat in `:where()` ar fi adaugat
 * inca un selector de atribut la specificitate — (0,2,0) — care ar castiga
 * oricum peste `.grid`/`.flex`, ascunzand adevarata problema: am fi "reparat"
 * din intamplare prin specificitate mai mare, nu prin `!important`, si
 * lectia din comentariile de mai sus (si din tabs.js) ar fi falsa).
 *
 * tokens.css se incarca INAINTEA lui tailwind.css (functions.php,
 * tfa_enqueue_styles) — deci, la specificitate cu adevarat egala (0,1,0),
 * regula de mai jos are nevoie de `!important` ca sa castige indiferent de
 * ordinea din sursa: `!important` invinge orice declaratie non-`!important`,
 * indiferent de specificitate sau ordine. Verificat explicit: eliminarea
 * temporara a lui `!important` de mai jos (cu selectorul `:where(...)` de
 * mai jos, la specificitate reala egala) face testul din tests/tabs.spec.ts
 * ("inactive panel roots carrying the `grid` display utility are truly
 * hidden…") sa esueze pe staging — vezi acel fisier pentru cazul complet.
 * Pastram exceptia `[hidden=until-found]` din Preflight (desi tema nu
 * foloseste "until-found" nicaieri azi) ca sa nu schimbam alt comportament
 * decat cel vizat.
 */
[hidden]:where(:not([hidden="until-found"])) {
  display: none !important;
}

/* ==========================================================================
   12. `blockquote` — neutralizeaza stilul GeneratePress
   (gasit la Faza 2 / Task 4, cand sablonul de pagina industrie x serviciu a
   adus pe site primul `<blockquote>` — sectiunea ClientsSay)
   ========================================================================== */

/*
 * `generatepress/assets/css/main.min.css` (enqueued INAINTEA acestui fisier,
 * ca `generate-style`) contine:
 *
 *   blockquote{border-left:5px solid rgba(0,0,0,.05);padding:20px;
 *              font-size:1.2em;font-style:italic;margin:0 0 1.5em;
 *              position:relative}
 *
 * Tailwind Preflight (varful lui assets/css/tailwind.css, incarcat DUPA)
 * atinge din toate astea o singura proprietate: `blockquote{margin:0}`.
 * Celelalte cinci nu sunt declarate nicaieri in Preflight, deci raman ale
 * GeneratePress — nu e o lupta de specificitate pe care o pierde ceva, pur
 * si simplu nimic nu le contrazice.
 *
 * In sursa React, `<blockquote className="text-foreground leading-relaxed">`
 * (src/components/shared/ClientsSay.tsx si inca un fisier — singurele doua
 * `<blockquote>` din tot designul, ambele cu EXACT aceleasi clase) NU are
 * nicio clasa de font-size, font-style, padding sau border: se randeaza cu
 * marimea mostenita de la body, drept, fara chenar. Masurat pe randarea de
 * referinta (browser real, https://work.dev-factory.ro/factory/industries/b2b/seo):
 * font-size 16px, font-style normal, padding 0, border-left 0. Pe staging,
 * fara regula de mai jos: 20.4px, italic, padding 20px, border-left 5px —
 * citatul central din ClientsSay iesea inclinat, mai mare si indentat.
 *
 * Regula de mai jos readuce exact acele cinci proprietati la valoarea pe
 * care o are elementul in sursa (initiala/mostenita), nu la o valoare de
 * design inventata aici. Fara `!important` si fara specificitate umflata:
 * selectorul e (0,0,1), acelasi cu al lui GeneratePress, si castiga prin
 * ordinea din pagina (tokens.css e enqueued dupa `generate-style`). Orice
 * clasa Tailwind pusa pe un blockquote (azi doar `text-foreground
 * leading-relaxed`) ramane deasupra, fiindca vine din tailwind.css, incarcat
 * dupa acest fisier — deci regula asta nu poate bloca o decizie de design.
 *
 * Blast radius: zero. `<blockquote>` nu apare nicaieri in shell-ul temei
 * (header.php / footer.php / index.php / 404.php) si nici in vreo pagina
 * existenta pe staging; singurele aparitii din tot proiectul sunt cele doua
 * din React, ambele cu aceleasi clase.
 */
blockquote {
  border-left: 0;
  padding: 0;
  font-size: inherit;
  font-style: normal;
  position: static;
}

/* ==========================================================================
   13. Contact Form 7 — dressing pentru formularele existente (Faza 2, Task 7)

   Sursa de adevar pentru DOM-ul CF7 real (verificat pe staging, randare
   efectiva, nu presupusa):
   - Elementele generate de CF7 pentru fiecare form-tag ies mereu ca
     `<span class="wpcf7-form-control-wrap" data-name="...">` in jurul unui
     `<input>`/`<textarea>` cu clasa `wpcf7-form-control`.
   - `p { margin: 0 }` de mai jos exista din cauza `wpautop()`: vezi
     `wp-plugin/tfa-core/README.md` (sectiunea shortcode-urilor CF7) pentru
     explicatia completa a modului in care wpautop() invelesc campurile
     formularului in `<p>` — nu repetata aici, ca sa nu ajunga dezactualizata
     in doua locuri.
   - `.wpcf7-response-output` si `.wpcf7-not-valid-tip` NU sunt ascunse
     nicaieri prin atributul `hidden` (regula globala din sectiunea 11 NU le
     poate afecta): CF7 le ascunde/arata prin propriul stylesheet
     (`contact-form-7-css`, incarcat inaintea acestui fisier — confirmat in
     `<head>`-ul paginii randate) pe baza claselor de stare puse pe `<form>`
     (`form.init/.submitting/.resetting` -> `display:none`; `form.sent` /
     `.invalid` / `.unaccepted` / `.failed` / `.spam` / `.aborted` -> vizibil,
     doar culoarea chenarului difera). Tip-ul de validare e un `<span>` creat
     dinamic de JS-ul CF7 (`includes/js/index.js`) cu text, fara atributul
     `hidden`. Concluzie verificata: NU exista aici conflictul `[hidden]`
     documentat in sectiunea 11 (acela e specific accordion.js/tabs.js, care
     chiar folosesc atributul DOM `hidden`) — dar vizibilitatea efectiva a
     fost totusi confirmata pe staging cu o trimitere reala (vezi
     .superpowers/sdd/faza2-task-7-report.md), nu doar dedusa din cod.
   - Formularele 1797/3420 ("Start your journey" / "Contact-ppc") au continut
     identic ca structura de camp si folosesc deja clasele
     `mb-clamp-16px-20px` / `mb-clamp-20px-24px` / `mt-clamp-8px-12px`
     mostenite din tema veche (`wp-content/themes/thefactory/app/css/
     framework.css`, inactiva) — pastrate exact, NU inventate aici; li se dau
     doar valorile de mai jos (identice cu clamp-urile vechi) ca sa nu ramana
     fara niciun efect vizual.
   - Formularul 179 ("Contact form") pastreaza un `<svg>` decorativ (o sageata
     identica, repetata in fiecare camp) fara echivalent in design-ul nou
     (StartJourneyForm.tsx nu are asa ceva); e ascuns explicit mai jos —
     decizie de design, documentata in raport, nu o modificare a formularului
     (markup-ul CF7 ramane neatins, doar nu mai e desenat).

   Scop: `.tfa-cf7-start-journey` (id 1797 si 3420, containere identice din
   class-forms.php) si `.tfa-cf7-contact` (id 179) — clasele containerelor
   emise de shortcode-urile din wp-plugin/tfa-core/includes/class-forms.php.
   Niciun selector de mai jos nu ar trebui sa scape de sub aceste doua clase:
   plugin-ul nu are voie sa contina CSS, deci orice regula globala de aici ar
   risca sa loveasca alt markup de pe site.
   ========================================================================== */

.tfa-cf7-start-journey p,
.tfa-cf7-contact p {
  margin: 0;
}

.tfa-cf7-start-journey .wpcf7-form,
.tfa-cf7-contact .wpcf7-form {
  margin-top: 1.5rem; /* echivalent "mt-6" din StartJourneyForm.tsx */
}

/* Input-uri / textarea generate de CF7 (nu au nicio clasa proprie de adaugat
   fara sa editam form-tag-urile — vezi nota din class-forms.php). */
.tfa-cf7-start-journey input.wpcf7-form-control,
.tfa-cf7-start-journey textarea.wpcf7-form-control,
.tfa-cf7-contact input.wpcf7-form-control,
.tfa-cf7-contact textarea.wpcf7-form-control {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem; /* py-3 px-4 */
  border-radius: 0.5rem; /* rounded-lg */
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  font-size: 0.875rem; /* text-sm */
  line-height: 1.5;
}

.tfa-cf7-start-journey input.wpcf7-form-control::placeholder,
.tfa-cf7-contact input.wpcf7-form-control::placeholder,
.tfa-cf7-start-journey textarea.wpcf7-form-control::placeholder,
.tfa-cf7-contact textarea.wpcf7-form-control::placeholder {
  color: hsl(var(--muted-foreground));
}

.tfa-cf7-start-journey input.wpcf7-form-control:focus,
.tfa-cf7-contact input.wpcf7-form-control:focus,
.tfa-cf7-start-journey textarea.wpcf7-form-control:focus,
.tfa-cf7-contact textarea.wpcf7-form-control:focus {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--secondary)); /* focus:ring-2 focus:ring-secondary */
}

.tfa-cf7-start-journey input.wpcf7-form-control.wpcf7-not-valid,
.tfa-cf7-contact input.wpcf7-form-control.wpcf7-not-valid,
.tfa-cf7-start-journey textarea.wpcf7-form-control.wpcf7-not-valid,
.tfa-cf7-contact textarea.wpcf7-form-control.wpcf7-not-valid {
  border-color: hsl(var(--destructive));
}

/* --- 1797 / 3420 ("Start your journey") --------------------------------- */

.tfa-cf7-start-journey img.mb-clamp-16px-20px {
  display: block;
  height: 2rem; /* h-8 */
  width: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(16px, 1vw, 20px);
}

.tfa-cf7-start-journey p:first-of-type {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem; /* text-xl */
  margin-top: 1rem;
  text-align: center;
  color: hsl(var(--foreground));
}

.tfa-cf7-start-journey p.mb-clamp-20px-24px {
  font-size: 0.875rem; /* text-sm */
  color: hsl(var(--muted-foreground));
  margin-top: 0.5rem;
  text-align: center;
}

.tfa-cf7-start-journey label {
  display: block;
}

.tfa-cf7-start-journey label.mt-clamp-8px-12px {
  margin-top: clamp(8px, 0.6vw, 12px);
}

/* Spatiere intre blocuri (echivalent "space-y-3" din StartJourneyForm.tsx).
   Elementul care precede efectiv `.checkbox` in DOM e un `<p>` generat de
   wpautop(), nu un `<label>` direct — detaliul complet (de ce, verificat pe
   randare reala) e in `wp-plugin/tfa-core/README.md`, nu aici. */
.tfa-cf7-start-journey p + div.checkbox,
.tfa-cf7-start-journey .checkbox + div.button-start-journey {
  margin-top: 0.75rem; /* space-y-3 */
}

/* --- Acceptance checkbox (1797, 3420 si 179 — clasa `.checkbox` comuna) -- */

.tfa-cf7-start-journey .checkbox,
.tfa-cf7-contact .checkbox {
  font-size: 0.75rem; /* text-xs */
  color: hsl(var(--muted-foreground));
}

.tfa-cf7-start-journey .checkbox .wpcf7-list-item,
.tfa-cf7-contact .checkbox .wpcf7-list-item {
  display: block;
  margin: 0;
}

.tfa-cf7-start-journey .checkbox label,
.tfa-cf7-contact .checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
  padding-top: 0.25rem;
}

.tfa-cf7-start-journey .checkbox input[type="checkbox"],
.tfa-cf7-contact .checkbox input[type="checkbox"] {
  margin-top: 0.125rem; /* mt-0.5 */
  accent-color: hsl(var(--secondary)); /* accent-secondary */
  flex-shrink: 0;
}

.tfa-cf7-start-journey .checkbox a,
.tfa-cf7-contact .checkbox a {
  text-decoration: underline;
  color: inherit;
}

.tfa-cf7-start-journey .checkbox a:hover,
.tfa-cf7-contact .checkbox a:hover {
  color: hsl(var(--foreground));
}

/* --- Buton de submit ------------------------------------------------------ */

.tfa-cf7-start-journey input.wpcf7-form-control.wpcf7-submit,
.tfa-cf7-contact input.wpcf7-form-control.wpcf7-submit {
  display: block;
  width: 100%;
  margin-top: 0.75rem; /* mt-3 */
  padding: 0.75rem 1.5rem; /* px-6 py-3 */
  border: 0;
  border-radius: 9999px; /* rounded-full */
  background-image: linear-gradient(to right, hsl(var(--secondary)), hsl(var(--accent))); /* from-secondary to-accent */
  color: hsl(var(--accent-foreground));
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.875rem; /* text-sm */
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.tfa-cf7-start-journey input.wpcf7-form-control.wpcf7-submit:hover,
.tfa-cf7-contact input.wpcf7-form-control.wpcf7-submit:hover {
  opacity: 0.9; /* hover:opacity-90 */
}

.tfa-cf7-start-journey input.wpcf7-form-control.wpcf7-submit:disabled,
.tfa-cf7-contact input.wpcf7-form-control.wpcf7-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- 179 ("Contact form") — randuri camp cu eticheta vizibila ------------ */

.tfa-cf7-contact .contact-form {
  display: block;
}

.tfa-cf7-contact .cf-form-control {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid hsl(var(--border));
  background-color: transparent;
  margin-bottom: 0.75rem;
}

.tfa-cf7-contact .cf-form-control.type-textarea {
  align-items: flex-start;
}

.tfa-cf7-contact .cf-form-control .slot-label {
  flex-shrink: 0;
  width: 4.5rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8125rem;
  color: hsl(var(--foreground));
}

.tfa-cf7-contact .cf-form-control .wpcf7-form-control-wrap {
  flex: 1 1 auto;
}

.tfa-cf7-contact .cf-form-control input.wpcf7-form-control,
.tfa-cf7-contact .cf-form-control textarea.wpcf7-form-control {
  border: 0;
  padding: 0;
  background: transparent;
}

.tfa-cf7-contact .cf-form-control input.wpcf7-form-control:focus,
.tfa-cf7-contact .cf-form-control textarea.wpcf7-form-control:focus {
  box-shadow: none;
}

/* Sageata decorativa fara echivalent in design (vezi nota de la inceputul
   sectiunii) — ascunsa, formularul CF7 ramane neschimbat. */
.tfa-cf7-contact .cf-form-control > svg {
  display: none;
}

.tfa-cf7-contact .checkbox {
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}

/* Widget-ul reCAPTCHA (`[cf7sr-simple-recaptcha]`, doar in formularul 179) —
   spatiu deasupra ca sa nu se lipeasca de checkbox. */
.tfa-cf7-contact .cf7sr-g-recaptcha {
  margin: 0.75rem 0;
}

/* --- Mesaj de raspuns si tip-uri de validare (comune, ambele containere) - */

.tfa-cf7-start-journey .wpcf7-response-output,
.tfa-cf7-contact .wpcf7-response-output {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.tfa-cf7-start-journey form.sent .wpcf7-response-output,
.tfa-cf7-contact form.sent .wpcf7-response-output {
  color: hsl(var(--foreground));
  background-color: hsl(var(--muted));
}

.tfa-cf7-start-journey form.invalid .wpcf7-response-output,
.tfa-cf7-start-journey form.unaccepted .wpcf7-response-output,
.tfa-cf7-start-journey form.failed .wpcf7-response-output,
.tfa-cf7-start-journey form.aborted .wpcf7-response-output,
.tfa-cf7-start-journey form.spam .wpcf7-response-output,
.tfa-cf7-contact form.invalid .wpcf7-response-output,
.tfa-cf7-contact form.unaccepted .wpcf7-response-output,
.tfa-cf7-contact form.failed .wpcf7-response-output,
.tfa-cf7-contact form.aborted .wpcf7-response-output,
.tfa-cf7-contact form.spam .wpcf7-response-output {
  color: hsl(var(--destructive));
  background-color: hsl(var(--destructive) / 0.08);
}

.tfa-cf7-start-journey .wpcf7-not-valid-tip,
.tfa-cf7-contact .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: hsl(var(--destructive));
}