/* ============================================================
   TCB — COMPONENTE
   Clase pe care le pui în câmpul "CSS Classes" al widget-urilor
   și container-elor Elementor. Fiecare are notat unde se aplică.

   Regulă: dacă un stil se poate seta din widget, setează-l din
   widget. Aici stau doar lucrurile pe care Elementor nu le poate
   face nativ.
   ============================================================ */


/* ------------------------------------------------------------
   ACCENTUL ITALIC
   Widget Heading → în câmpul de text scrii direct:
     Someone whose <span class="it">entire job</span> is your event.
   Elementor acceptă HTML acolo.
   ------------------------------------------------------------ */
.it{
  font-family:var(--tcb-serif);
  font-weight:400;
  font-style:italic;
  letter-spacing:-.01em;
  font-size:1.06em;   /* serif-ul are ochiul mai mic; compensăm */
}

/* Eyebrow — widget Heading, tag p, class "eyebrow"
   Regula de mai jos acoperă markupul scris de mână (widget HTML).
   Pentru widgetul Heading e nevoie de specificitate mai mare —
   vezi secțiunea OVERRIDE PESTE WIDGETUL HEADING. */
.eyebrow{
  font-size:var(--tcb-fs-micro);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:var(--tcb-ls-wide);
  color:var(--tcb-blue);
  margin:0 0 18px;
}
.on-dark .eyebrow,
.card--accent .eyebrow{color:var(--tcb-yellow)}


/* ------------------------------------------------------------
   OVERRIDE PESTE WIDGETUL HEADING  ← citește asta înainte să
   debug-ezi vreun titlu care „nu ascultă"

   PROBLEMA
   Widgetul Heading din Elementor scrie tipografia globală
   *Primary* pe ORICE heading, indiferent de tagul ales:

     .elementor-widget-heading .elementor-heading-title{
       font-family: var(--e-global-typography-primary-font-family);
       font-size:   var(--e-global-typography-primary-font-size);
       color:       var(--e-global-color-primary);
     }

   Specificitatea aia e 0-2-0. Regulile pe element din base.css
   (`h2`, `h3`) sunt 0-0-1 și pierd mereu — nu contează ordinea de
   încărcare, nu contează prioritatea la enqueue. Rezultatul: un H3
   arată ca un H1, iar un <p> folosit ca eyebrow arată tot ca un H1.

   SOLUȚIA
   Aceleași două clase PLUS tagul = 0-2-1. Câștigă curat, fără
   !important, și înseamnă că un widget Heading arată corect doar
   pentru că i-ai ales tagul potrivit. Zero setări pe widget.

   Alternativa nativă ar fi să deschizi fiecare widget Heading și
   să-i legi manual Typography la Global Font-ul corect. Funcționează,
   dar e o decizie repetată de câteva zeci de ori, iar la venue finder
   devine de câteva sute. De asta o rezolvăm o dată, aici.

   `color: inherit` e intenționat: titlul ia culoarea din containerul
   părinte. Pe fundal deschis moștenește --tcb-ink din body, pe .hero
   și .meet moștenește albul. Un singur mecanism pentru ambele contexte.
   ------------------------------------------------------------ */

.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading h4.elementor-heading-title,
.elementor-widget-heading h5.elementor-heading-title,
.elementor-widget-heading h6.elementor-heading-title,
.elementor-widget-heading p.elementor-heading-title,
.elementor-widget-heading div.elementor-heading-title,
.elementor-widget-heading span.elementor-heading-title{
  font-family:var(--tcb-sans);
  color:inherit;
}

.elementor-widget-heading h1.elementor-heading-title{
  font-size:var(--tcb-fs-h1);
  font-weight:800;
  line-height:var(--tcb-lh-tight);
  letter-spacing:var(--tcb-ls-tight);
}
.elementor-widget-heading h2.elementor-heading-title{
  font-size:var(--tcb-fs-h2);
  font-weight:800;
  line-height:var(--tcb-lh-tight);
  letter-spacing:var(--tcb-ls-h2);
}
.elementor-widget-heading h3.elementor-heading-title{
  font-size:var(--tcb-fs-h3);
  font-weight:800;
  line-height:1.25;
  letter-spacing:var(--tcb-ls-h3);
}
.elementor-widget-heading h4.elementor-heading-title{
  font-size:1.05rem;
  font-weight:700;
  line-height:1.35;
  letter-spacing:var(--tcb-ls-h3);
}

/* Heading widget folosit ca text simplu (tag p / div / span):
   nu primește greutate de titlu. */
.elementor-widget-heading p.elementor-heading-title,
.elementor-widget-heading div.elementor-heading-title,
.elementor-widget-heading span.elementor-heading-title{
  font-size:var(--tcb-fs-body);
  font-weight:400;
  line-height:var(--tcb-lh-body);
  letter-spacing:0;
}

/* ---- CLASELE NOASTRE PE WIDGETUL HEADING -------------------
   Clasa din câmpul "CSS Classes" ajunge pe WRAPPER, adică pe
   același element care are .elementor-widget-heading. Combinate,
   dau 0-3-0 și bat regula Elementor.

   Fără prefixul .elementor-widget-heading, `.eyebrow` singur e
   0-1-0 și pierde — exact motivul pentru care "COMING SOON"
   apărea la dimensiune de titlu.                                */

.elementor-widget-heading.eyebrow .elementor-heading-title{
  font-size:var(--tcb-fs-micro);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:var(--tcb-ls-wide);
  line-height:1.4;
  color:var(--tcb-blue);
}
.hero .elementor-widget-heading.eyebrow .elementor-heading-title,
.meet .elementor-widget-heading.eyebrow .elementor-heading-title,
.card--accent .elementor-widget-heading.eyebrow .elementor-heading-title{
  color:var(--tcb-yellow);
}

.elementor-widget-heading.datecard__label .elementor-heading-title{
  font-size:var(--tcb-fs-micro);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:var(--tcb-ls-wide);
  line-height:1.4;
  color:var(--tcb-yellow);
}
.elementor-widget-heading.datecard__d .elementor-heading-title{
  font-size:clamp(2.6rem,5.4vw,3.9rem);
  font-weight:800;
  letter-spacing:-.04em;
  line-height:.95;
}
.elementor-widget-heading.datecard__m .elementor-heading-title{
  font-family:var(--tcb-serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.5rem,2.7vw,2rem);
  line-height:1.1;
  letter-spacing:-.01em;
}
.elementor-widget-heading.stat__n .elementor-heading-title{
  font-size:1.6rem;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.1;
  color:var(--tcb-yellow);
}

/* Contextele întunecate stabilesc culoarea pe care titlurile o
   moștenesc prin `color: inherit` de mai sus. */
.hero,
.meet,
.card--accent{color:#fff}


/* ------------------------------------------------------------
   HEADER  — container header, class "hdr"
   Sticky-ul îl faci nativ: Advanced → Motion Effects → Sticky Top.
   Blur-ul nu e nativ.
   ------------------------------------------------------------ */
.hdr{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--tcb-line);
}
@media (max-width:900px){
  /* Ascundem meniul pe clasa NOASTRĂ, nu pe cea internă Elementor.
     .elementor-nav-menu--main e markup intern și se poate schimba
     la un update. .nav e a noastră și nu se schimbă. */
  .nav{display:none}
}


/* ------------------------------------------------------------
   MENIU — widget Nav Menu, class "nav"

   Nativ setezi: Layout Horizontal, Space Between 26px,
   Pointer: Underline. Aici doar ce nu se poate din widget.
   ------------------------------------------------------------ */
.nav .elementor-nav-menu .elementor-item{
  font-size:.9rem;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--tcb-ink-60);
}
.nav .elementor-nav-menu .elementor-item:hover,
.nav .elementor-nav-menu .elementor-item.elementor-item-active{
  color:var(--tcb-blue);
}

/* Linia de sub link e GALBENĂ, textul e albastru — două culori
   diferite, pe care panoul Pointer nu le separă întotdeauna.
   De aici regula. Setează întâi nativ Pointer: Underline. */
.nav .e--pointer-underline .elementor-item:after{
  background-color:var(--tcb-yellow);
  height:2px;
}


/* ------------------------------------------------------------
   HERO  — container, class "hero"
   Gradientul: Elementor dă doar 2 stopuri, noi vrem 3.
   Trama de puncte: Background Overlay cu dot-tile.svg, repeat,
   opacity .16 — masca de fade nu e nativă, e mai jos.
   ------------------------------------------------------------ */
.hero{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:linear-gradient(118deg,
    var(--tcb-blue-ink) 0%,
    var(--tcb-blue-deep) 46%,
    #0068D0 100%);
}
.hero .elementor-background-overlay{
  -webkit-mask-image:linear-gradient(105deg,#000 8%,transparent 62%);
          mask-image:linear-gradient(105deg,#000 8%,transparent 62%);
}
.hero__p{
  font-size:var(--tcb-fs-lede);
  line-height:1.6;
  color:var(--tcb-on-dark);
  max-width:60ch;
}


/* ------------------------------------------------------------
   SIGNATURE — schimbul first / only
   Widget HTML în hero. Markup-ul exact:

   <h1 class="hero-title">
     Romania's
     <span class="swap" aria-hidden="true"><span>first</span><span>only</span></span><span class="swap__static" aria-hidden="true">first and only</span>
     <span class="tcb-sr-only">first and only</span>
     convention bureau.<br>Ask us anything.
   </h1>

   Trei lucruri de care depinde și pe care e ușor să le strici:

   1. inline-grid + grid-area:1/1 pe ambii copii
      Cuvintele stau în ACEEAȘI celulă, deci slotul are lățimea
      celui mai lung. Fără asta, "convention bureau" sare la
      fiecare schimb.

   2. opacity:0 pe bază + animation-fill-mode: both
      Fără ele, în primele 1.6s de la load ambele cuvinte apar
      suprapuse, pentru că al doilea span încă n-a intrat în
      animație și își folosește stilul normal. Ăsta e bug-ul pe
      care îl reintroduce oricine rescrie blocul din memorie.

   3. span-urile animate sunt aria-hidden, fraza completă e
      livrată separat prin .tcb-sr-only
   ------------------------------------------------------------ */
.hero-title{
  font-family:var(--tcb-sans);
  font-weight:800;
  font-size:var(--tcb-fs-h1);
  line-height:var(--tcb-lh-tight);
  letter-spacing:var(--tcb-ls-tight);
  color:#fff;
  margin:0 0 26px;
}
.swap{
  display:inline-grid;
  vertical-align:baseline;
  color:var(--tcb-yellow);
  font-family:var(--tcb-serif);
  font-weight:400;
  font-style:italic;
  letter-spacing:-.01em;
}
.swap > span{
  grid-area:1 / 1;
  text-align:left;
  opacity:0;
  animation:tcb-swap var(--tcb-swap-cycle) var(--tcb-ease) infinite both;
}
.swap > span:nth-child(2){animation-delay:var(--tcb-swap-half)}

@keyframes tcb-swap{
  0%       {opacity:0;transform:translateY( .42em) rotate( 1.2deg)}
  6%, 44%  {opacity:1;transform:translateY(0)      rotate(0)}
  50%,100% {opacity:0;transform:translateY(-.42em) rotate(-1.2deg)}
}

.swap__static{
  display:none;
  color:var(--tcb-yellow);
  font-family:var(--tcb-serif);
  font-weight:400;
  font-style:italic;
}

@media (prefers-reduced-motion: reduce){
  .swap{display:none}
  .swap__static{display:inline}
}


/* ------------------------------------------------------------
   RIBBON — container class "ribbon", background Yellow
   Punctul: widget HTML cu <span class="ribbon__dot"></span>
   ------------------------------------------------------------ */
.ribbon__dot{
  display:inline-block;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--tcb-ink);
  animation:tcb-pulse 2.4s ease-in-out infinite;
}
@keyframes tcb-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%    {opacity:.35;transform:scale(.75)}
}


/* ------------------------------------------------------------
   CARDURI — "Live now"
   Container părinte: class "grid2", Align Items: Stretch
   Carduri: class "card", respectiv "card card--accent"
   ------------------------------------------------------------ */
.card{
  background:#fff;
  border:1px solid var(--tcb-line);
  border-radius:var(--tcb-r);
}
.card--accent{
  background:var(--tcb-blue);
  border-color:var(--tcb-blue);
  color:#fff;
}
.card--accent p{color:var(--tcb-on-dark)}

/* Adresa de mail scoasă în evidență, nu ca link albastru banal */
.mail{
  display:inline-block;
  font-weight:700;
  color:var(--tcb-blue);
  text-decoration:none;
  border-bottom:2px solid var(--tcb-yellow);
  padding-bottom:1px;
}
.card--accent .mail{color:#fff}


/* ------------------------------------------------------------
   ROADMAP — "Coming soon"
   Numerotarea ar fi fost decorativă aici: cititorul nu are nevoie
   de ordine, are nevoie de CÂND. De asta structura e chip de
   perioadă + titlu, nu 01 / 02 / 03.

   Wrapper: class "road"
   Fiecare rând: container orizontal, class "road__row", 175px + 1fr
   Chip: widget HTML
     <span class="chip"><span class="chip__dot"></span>Fall 2026</span>
   Când ceva devine live: class="chip chip--live"
   ------------------------------------------------------------ */
.road{border-top:1px solid var(--tcb-line)}
.road__row{border-bottom:1px solid var(--tcb-line)}

.chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:var(--tcb-fs-micro);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  padding:6px 13px;
  border-radius:var(--tcb-r-pill);
  border:1px solid var(--tcb-line);
  color:var(--tcb-ink-60);
  background:#fff;
  white-space:nowrap;
}
.chip--live{
  background:var(--tcb-yellow);
  border-color:var(--tcb-yellow);
  color:var(--tcb-ink);
}
.chip__dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.chip--live .chip__dot{animation:tcb-pulse 2.4s ease-in-out infinite}


/* ------------------------------------------------------------
   EMAIL CAPTURE — container class "capture"
   Formularul e widget Elementor Form. !important e necesar:
   Elementor scrie inline styles pe input-uri.
   ------------------------------------------------------------ */
.capture{
  background:var(--tcb-yellow-soft);
  border-radius:var(--tcb-r);
}
.capture input[type=email]{
  border-radius:var(--tcb-r-pill) !important;
  padding:13px 20px !important;
  border:1px solid var(--tcb-line) !important;
  background:#fff !important;
}
.capture input[type=email]:focus{
  border-color:var(--tcb-blue) !important;
  box-shadow:0 0 0 3px rgba(0,115,230,.16) !important;
}


/* ------------------------------------------------------------
   MEET TIMIȘOARA — container class "meet", background Blue Ink
   Aceeași tramă de puncte, mască oglindită.
   ------------------------------------------------------------ */
.meet .elementor-background-overlay{
  -webkit-mask-image:linear-gradient(255deg,#000 5%,transparent 55%);
          mask-image:linear-gradient(255deg,#000 5%,transparent 55%);
}
.datecard{
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--tcb-r);
  background:rgba(255,255,255,.05);
}
.datecard__d{
  font-size:clamp(2.6rem,5.4vw,3.9rem);
  font-weight:800;
  letter-spacing:-.04em;
  line-height:.95;
}
.datecard__m{
  font-family:var(--tcb-serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.5rem,2.7vw,2rem);
  line-height:1.1;
}
.stats{
  border-top:1px solid var(--tcb-on-dark-rule);
  padding-top:22px;
}
.stat__n{
  font-size:1.6rem;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--tcb-yellow);
}
.stat__l{
  font-size:.8rem;
  color:var(--tcb-on-dark-dim);
  line-height:1.3;
  max-width:13ch;
}


/* ------------------------------------------------------------
   THREE THINGS — fiecare coloană primește class "thing"
   ------------------------------------------------------------ */
.thing{
  border-top:3px solid var(--tcb-yellow);
  padding-top:22px;
}


/* ------------------------------------------------------------
   IMAGINI ȘI CAPTIONS
   Caption-ul face o treabă, nu decorează: spune ce dovedește poza.
   Bara galbenă din stânga e același gest editorial ca în ghidul
   tipărit.
   !important pentru că Elementor scrie inline pe figcaption.
   ------------------------------------------------------------ */
.elementor-widget-image img{border-radius:var(--tcb-r)}

.elementor-widget-image figcaption{
  margin-top:12px !important;
  font-size:var(--tcb-fs-small) !important;
  color:var(--tcb-ink-60) !important;
  line-height:1.45 !important;
  text-align:left !important;
  padding-left:14px;
  border-left:3px solid var(--tcb-yellow);
}


/* ------------------------------------------------------------
   PASTILE DE CONTACT — CTA final, widget HTML
   ------------------------------------------------------------ */
.person{
  background:#fff;
  border:1px solid var(--tcb-line);
  border-radius:var(--tcb-r-pill);
  padding:9px 20px 9px 12px;
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-size:.92rem;
  text-decoration:none;
  color:var(--tcb-ink);
  transition:border-color var(--tcb-t-fast), transform var(--tcb-t-fast);
}
.person:hover{border-color:var(--tcb-blue);transform:translateY(-2px)}
.person__av{
  width:30px;height:30px;
  border-radius:50%;
  background:var(--tcb-yellow);
  display:grid;place-items:center;
  font-size:.75rem;font-weight:800;
  color:var(--tcb-ink);
}
.person__n{font-weight:700}
.person__r{color:var(--tcb-ink-60)}


/* ------------------------------------------------------------
   BUTOANE

   Butonul PRIMAR (galben) nu are nevoie de nicio clasă. Vine gata
   stilizat din Site Settings → Theme Style → Buttons. Dacă te
   trezești scriind CSS pentru butonul galben, înseamnă că n-ai
   setat Theme Style — întoarce-te și fă asta întâi.

   Aici stau doar VARIANTELE.

   CAPCANA: clasa pe care o scrii în câmpul "CSS Classes" ajunge pe
   WRAPPERUL widgetului, nu pe elementul <a>. De asta fiecare regulă
   de mai jos are descendentul .elementor-button. Fără el, nu prinde
   nimic și pierzi o oră căutând de ce.
   ------------------------------------------------------------ */

/* Contur albastru pe fundal deschis — CTA-ul secundar din final */
.btn--ghost .elementor-button{
  background:transparent;
  color:var(--tcb-blue);
  border:2px solid currentColor;
}
.btn--ghost .elementor-button:hover{
  background:var(--tcb-blue);
  border-color:var(--tcb-blue);
  color:#fff;
}

/* Contur alb pe fundal albastru — hero, cardul accent, Meet Timișoara */
.btn--onblue .elementor-button{
  background:transparent;
  color:#fff;
  border:2px solid rgba(255,255,255,.55);
}
.btn--onblue .elementor-button:hover{
  background:#fff;
  border-color:#fff;
  color:var(--tcb-blue-deep);
}

/* Compact — butonul din header */
.btn--sm .elementor-button{
  padding:10px 20px;
  font-size:.87rem;
}

/* Săgeata se împinge la hover.
   Iconița o adaugi NATIV: Button → Content → Icon, After, spacing 8px.
   Nu o scrie în textul butonului ca text — un screen reader ar citi-o. */
.elementor-button .elementor-button-icon{
  transition:transform var(--tcb-t-fast);
}
.elementor-button:hover .elementor-button-icon{
  transform:translateX(3px);
}