/* ==========================================================================
   BAZA — tipografia si valorile implicite ale intregului site
   Se incarca pe TOATE paginile, dupa reset.css al temei parinte.

   De ce exista acest fisier:
   Tema parinte lasa in reset.css un font de sistem pe <body> si o scara de
   titluri generica (2.5 / 2 / 1.75 / 1.5 rem). Fonturile proprii ale
   magazinului sunt aplicate de Elementor PER WIDGET, deci orice element care
   nu trece prin Elementor — sabloane WooCommerce, blocuri scrise de noi in
   PHP sau HTML, formulare, e-mailuri — mostenea fontul de sistem. Pe Android
   si Chrome acela e Roboto. Asa a ajuns blocul de recomandari din cos sa
   arate altfel decat restul paginii.

   Regulile de aici folosesc selectoare de ELEMENT, cu specificitate minima.
   Consecinta importanta: orice widget Elementor care isi declara singur
   fontul sau marimea castiga in continuare. Nu ne batem cu Elementor —
   completam ce lasa el descoperit.

   Marimile de titlu sunt cele din reset.css, pastrate intentionat: schimbarea
   lor ar muta toate paginile construite pana acum. Acum insa sunt declarate
   intr-un singur loc, deci scara se poate schimba cand vrem, dintr-o singura
   modificare.
   ========================================================================== */

:root{
  /* Familiile de fonturi, aceleasi ca in setul global Elementor.
     Scrise ca variabile, ca sa nu le mai repetam in fiecare fisier. */
  --font-titlu:'Teutonic', Georgia, serif;
  --font-text:'Metallophile Sp8 Medium', Georgia, serif;
  --font-buton:'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Scara de titluri. Valorile vin din tema si sunt pastrate ca atare;
     de acum se schimba de aici, nu din reset.css. */
  --h1:40px;
  --h2:32px;
  --h3:28px;
  --h4:24px;

  /* Marimea textului de baza. 16px era prea mic pentru fonturile astea:
     Metallophile are litera mica scunda, deci la aceeasi marime nominala se
     citeste mai marunt decat un font obisnuit.

     De aici se schimba TOT ce nu are marime proprie — body, paragrafele,
     listele, meniul, titlurile de card. E singura pârghie pentru textul de
     citit: setarea „body” din kitul Elementor a fost scoasa tocmai ca sa nu
     existe doua locuri care spun acelasi lucru si sa se contrazica intr-o zi. */
  --text:18px;

  --rand-titlu:1.2;
  --rand-text:1.6;
}

/* Pe ecrane mici se intoarce la 16px.
   18px e o marime pentru citit de la distanta de birou; pe un telefon tinut la
   30 cm, acelasi text ocupa cu un sfert mai multa latime si rup randurile in
   doua. Pragul e cel al Elementor-ului (tableta incepe sub 1024px), ca sa nu
   avem doua sisteme de praguri pe acelasi site. */
@media (max-width:1024px){
  :root{ --text:16px; }
}

/* ---------- Textul de baza ----------------------------------------------- */
body{
  font-family:var(--font-text);
  font-size:var(--text);
  line-height:var(--rand-text);
}

/* Elementele de formular NU mostenesc font-family de la parinte — e o
   particularitate veche a browserelor. Fara randul asta, campurile de
   comanda si casutele de cautare raman pe fontul de sistem. */
input, select, textarea, button, optgroup{
  font-family:inherit;
  /* font-size NU se mosteneste aici: campurile de cautare si butoanele din
     antet isi au marimile lor, stabilite in Elementor. Cu font-size:inherit
     le-am fortat la 16px si au aparut enorme. Preluam doar familia. */
}

/* Butoanele au fontul lor in setul Elementor; il pastram si in afara lui. */
button, .button, input[type="submit"], .wp-element-button{
  font-family:var(--font-buton);
}

/* ---------- Titlurile ----------------------------------------------------- */
h1, h2, h3, h4, h5, h6{
  font-family:var(--font-titlu);
  line-height:var(--rand-titlu);
}

h1{ font-size:var(--h1); }
h2{ font-size:var(--h2); }
h3{ font-size:var(--h3); }
h4{ font-size:var(--h4); }

/* ---------- Paragraful ----------------------------------------------------
   Nu avea nicio regula in tot site-ul: mostenea din body si atat. Il
   declaram, ca sa avem un loc unde se regleaza spatiul dintre paragrafe. */
p{
  font-size:var(--text);
  line-height:var(--rand-text);
  margin:0 0 1em;
}
p:last-child{ margin-bottom:0; }

/* ---------- Liste si tabele ----------------------------------------------
   Aceeasi problema ca la formulare: WooCommerce randeaza multe tabele,
   iar ele nu preiau intotdeauna stilul din body. */
ul, ol, li, table, th, td, dl, dt, dd{
  font-family:inherit;
}
th, td{ line-height:var(--rand-text); }

/* ---------- Marimile din tabele ------------------------------------------
   `reset.css` al temei parinte nu da tabelelor o marime, ci o REDUCERE:
       table              font-size:.9em
       table thead/tfoot th   font-size:1em
       table table        font-size:.8em
   `em` inseamna „fata de parinte”, deci valoarea finala se schimba singura
   ori de cate ori se schimba altceva deasupra. Cat body a fost 16px, tabelele
   ieseau la 14,4px; de cand e 18px, ies la 16,2px. Nimeni n-a ales vreodata
   nici 14,4 nici 16,2 — au iesit dintr-o inmultire.

   Aici sunt scrise in px, deci nu mai plutesc: ce scrie e ce se vede.
   Selectoarele sunt aceleasi ca in reset.css, iar fisierul asta se incarca
   dupa el (vezi prioritatea 20 din functions.php), deci castiga la egalitate. */
table{ font-size:18px; }
table thead th, table tfoot th{ font-size:20px; }
table table{ font-size:17px; }

/* ---------- Legaturi ------------------------------------------------------ */
a{ font-family:inherit; }

/* ---------- Butonul de cos din antet -------------------------------------
   Totalul se scria maro peste verde si abia se distingea.

   Elementor NU pune culoarea direct pe element, ci printr-o variabila:
       color: var(--toggle-button-text-color, #69727d)
   Asa ca o regula obisnuita de "color" pierde — variabila e recitita de
   fiecare data. Solutia e sa schimbam chiar variabila, pe widget. La fel
   pentru pictograma cosului si pentru starea de hover. */
.elementor-widget-woocommerce-menu-cart{
  --toggle-button-text-color:#E7DFC8;
  --toggle-button-hover-text-color:#fff;
  --toggle-button-icon-color:#E7DFC8;
  --toggle-button-icon-hover-color:#fff;
}

/* ==========================================================================
   CANTITATEA DE PE PAGINA DE PRODUS

   Se vedea o singura cifra. Doua cauze care se adunau:
     - WooCommerce da campului `width:3.631em` (58px), masura potrivita pentru
       umplutura LUI;
     - tema parinte (hello-elementor/assets/css/reset.css) pune pe TOATE
       campurile `padding:.5rem 1rem`, adica 16px de fiecare parte.
   Raman 24px pentru cifre, din care sagetile native ale lui `type="number"`
   mai iau vreo 17 — asa ca a doua cifra ajungea sub ele.

   Nu atingem regula temei parinte: se pierde la prima actualizare, si e
   scrisa pentru toate campurile, nu pentru asta.

   Coșul NU intra aici: acolo cantitatea e o pastila cu butoane proprii
   (`.cart-pastila`, in cart.css), cu umplutura ei si latimea ei.
   ========================================================================== */
.woocommerce div.product form.cart .quantity .qty{
  width:4.5em;
  padding-left:.5rem;
  padding-right:.5rem;
}

/* ---------- Meniul din antet ----------------------------------------------
   Scris la nivelul H3, cu aceleasi trei valori si aceleasi praguri ca in kitul
   Elementor: 1.75 / 1.625 / 1.5 rem. Nu prin setarea widgetului, ca sa ramana
   o singura sursa — daca H3 se schimba vreodata, se schimba si aici, in acelasi
   fisier, nu prin Elementor. */
.elementor-nav-menu a.elementor-item{ font-size:1.5rem; }

@media (max-width:1024px){
  .elementor-nav-menu a.elementor-item{ font-size:1.625rem; }
}
@media (max-width:767px){
  .elementor-nav-menu a.elementor-item{ font-size:1.5rem; }
}

/* ---------- Antet: cautarea si butonul de cos ------------------------------
   Masurat inainte: cautarea 56px inaltime / litera 16px, butonul de cos 65px /
   litera 15px. Le aducem la aceeasi inaltime, 65px, si crestem litera cu 2px
   in fiecare, apoi normalizate amandoua la 19px (1.1875rem) — scrise in rem,
   ca sa urmeze setarea de font a vizitatorului. */
.elementor-widget-search input[type="search"]{
  font-size:1.1875rem;    /* 19px */
  min-height:65px;
}

.elementor-menu-cart__toggle .elementor-button{
  font-size:1.1875rem;    /* 19px */
  min-height:65px;
}

/* Pictograma „Contul meu” din antet, la aceeasi inaltime cu cautarea si cosul.
   Era 35x45px, singura mai scunda din rand. */
/* `!important` aici nu e de fudulie: Elementor genereaza pentru widget regula
   `.elementor-2310 .elementor-element.elementor-element-94cd686 .elementor-icon`
   — patru clase — care bate orice selector rezonabil scris de noi. Masurat:
   fara el, iconul ramanea la 35px. */
.elementor-element-94cd686 .elementor-icon{
  font-size:65px !important;
  line-height:1 !important;
}
.elementor-element-94cd686 .elementor-icon svg{
  height:65px !important;
  width:auto !important;
}

/* Submeniurile care se desfasoara: 18px. Nivelul 1 ramane la 1.5rem — vezi mai
   sus. Clasa e alta (`elementor-sub-item`), deci nu se prind cu acelasi
   selector. */
.elementor-nav-menu a.elementor-sub-item{
  font-size:1.25rem;
}

/* ---------- Titlul animat de pe prima pagina ------------------------------
   Widgetul Animated Headline. Aceleasi trei valori si aceleasi praguri ca H1
   din kitul Elementor: 3 / 2.5 / 2 rem. */
/* Doua clase, nu una: kitul il prinde ca titlu, cu `.elementor-kit-63 h3`
   (o clasa + o eticheta), care bate un simplu `.elementor-headline`. */
.elementor-widget-animated-headline .elementor-headline{ font-size:3rem; }

@media (max-width:1024px){
  .elementor-widget-animated-headline .elementor-headline{ font-size:2.5rem; }
}
@media (max-width:767px){
  .elementor-widget-animated-headline .elementor-headline{ font-size:2rem; }
}