/* Renewable Solar System — stil comun al site-ului public.
   Consolidat din cele 8 prototipuri .dc.html; fiecare avea acest <style> repetat
   aproape identic. O singură foaie, cache-uită de browser pe toate paginile —
   vezi design/NOTE-TRANSPUNERE.md pentru principiul general. */

/* Verdele de brand, într-un singur loc — .btn-green și .btn-greenfill:hover
   îl repetau fiecare separat; o schimbare de nuanță ar fi cerut editat două
   locuri, cu riscul să rateze unul (aceeași problemă găsită și reparată în
   admin.css).

   La fel și restul paletei — bleumarinul de text/brand, galbenul, cele două
   gri de text secundar erau scrise ca literali hex de zeci de ori peste tot,
   în tot app/View/pages și partiale, fără nicio variabilă care să le
   centralizeze. Un rebrand pe oricare ar fi cerut o vânătoare manuală prin
   fiecare pagină publică. admin.css rămâne intenționat separat (alt sistem
   vizual, vezi comentariul lui de sus) — tokenii de-aici sunt doar pentru
   site-ul public. */
:root {
  --green: #17A34A;
  --green-dark: #128A3D;
  --ink: #101A2C;
  --yellow: #FFD84D;
  --muted: #5D6B80;
  --muted-light: #8494A8;
  --link: #0B4FA8;
}

/* Archivo, găzduit local (public_html/assets/fonts/archivo.woff2) — nu mai
   vine de la Google Fonts. E fontul variabil (axele wdth 75–125 și wght
   400–800, cerute de font-variation-settings mai jos și de fiecare
   font-weight folosit pe site), dar resubsetat de la Google cu parametrul
   `text=`, la exact caracterele care apar în app/View — nu cele două
   subseturi implicite „latin"/„latin-ext" (care includeau, fiecare, o groază
   de litere din alte limbi latine, niciodată folosite aici). Un singur
   fișier, un singur @font-face: primul încerc (două fișiere, câte unul per
   subset Google) fusese inutil — un text românesc amestecă mereu litere din
   „latin" (â, î) cu litere din „latin-ext" (ă, ș, ț) în aceeași propoziție,
   deci browserul tot le descărca pe amândouă la fiecare pagină. Rezultatul,
   77KB vs. 176KB pentru cele două separate.
   Câteva simboluri folosite ca text simplu (✓ ★ ▤ ▦ ✕ ＋, din admin și din
   listele de pe /servicii/ și /proiecte/) nu există în Archivo — cădeau pe
   fontul de rezervă și înainte de mutarea asta, la fel cad și acum, nu e o
   regresie introdusă aici. Dacă apare text nou cu caractere neobișnuite
   (alt simbol, o literă dintr-o altă limbă), fontul trebuie regenerat cu
   `text=` extins — altfel acel caracter cade tăcut pe system-ui. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url('/assets/fonts/archivo.woff2') format('woff2');
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Cine a cerut mișcare redusă din sistem nu vrea nicio animație de scroll —
   nici la ancore, nici la scroll-urile programatice din JS (quote-wizard.js
   se bazează pe regula de mai sus, fără nicio opțiune proprie de animație,
   tocmai ca să respecte automat preferința asta dintr-un singur loc). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body { margin: 0; background: #FFFFFF; font-family: "Archivo", system-ui, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
/* :where(a), nu doar `a` — un selector normal ar avea specificitate
   (element + :hover), mai mare decât orice clasă simplă de mai jos
   (.btn-green, .h-yellow…) pentru proprietatea `color`, deci ar câștiga
   tăcut la hover peste orice clasă care nu-și redeclară explicit culoarea.
   :where() anulează specificitatea propriului selector (rămâne doar
   :hover), deci orice clasă declarată mai jos în acest fișier — actuală sau
   viitoare — câștigă automat egalitatea, prin ordine, fără nicio disciplină
   cerută de la cine o scrie. Găsit invers (fără :where): 10 septembrie 2026,
   hover mort pe tot subsolul + bara de navigare + un buton de pe /. */
:where(a):hover { color: var(--ink); }
img { display: block; }
input, textarea, button { font-family: inherit; }

/* Hover-uri reale, în locul atributului `style-hover` din prototipuri — vezi
   design/NOTE-TRANSPUNERE.md. Folosite pe elemente care NU sunt butoane
   (linkuri de navigare, linkuri din subsol, carduri) — butoanele propriu-zise
   folosesc sistemul .btn-* de mai jos, care include deja hover-ul.

   Regulă obligatorie aici: dacă :hover schimbă o proprietate (background,
   color, border), acea proprietate NU are voie să mai apară o dată inline pe
   element — un style="..." inline câștigă mereu în fața oricărei reguli dintr-o
   foaie externă, inclusiv :hover, deci hover-ul n-ar mai avea niciun efect
   vizibil. De-aia fiecare clasă de mai jos care chiar are un stil de repaus
   (nu doar hover) îl declară tot aici, ca stare de bază — nu inline, lângă
   fiecare folosire (bug găsit exact așa: 10 septembrie 2026, hover mort pe tot
   subsolul + bara de navigare + un buton de pe /).*/
.h-yellow                { color: #AEBDD1; }
/* .h-yellow.footer-phone, nu .footer-phone singur — un selector compus, nu o
   coincidență de ordine în fișier. Specificitatea (două clase) câștigă mereu
   față de .h-yellow simplu la repaus, indiferent unde ajunge regula asta dacă
   fișierul se reordonează vreodată; la hover rămâne totuși egalitate de
   specificitate cu .h-yellow:hover (tot două clase), motiv pentru care acea
   regulă trebuie să rămână DUPĂ asta, ca să câștige ea, nu invers. */
.h-yellow.footer-phone   { color: #FFFFFF; }
.h-yellow:hover          { color: var(--yellow); }
.h-navlink          { color: #3F4E63; }
.h-navlink:hover    { background: #EEF2F7; color: var(--ink); }
.h-light            { color: var(--ink); }
.h-light:hover      { background: #EEF2F7; }
.h-yellowlt         { background: var(--yellow); color: var(--ink); }
.h-yellowlt:hover   { background: #FFE9A0; color: var(--ink); }
.h-cream            { background: #FFFFFF; border: 3px solid var(--ink); color: var(--ink); }
.h-cream:hover      { background: #FFF6D6; }

/* ── Componente reutilizate ──────────────────────────────────────────────
   Ce e identic peste tot (culoare, contur, cursor) stă aici. Dimensiunea
   exactă (padding, font-size, border-radius) diferă intenționat după rolul
   butonului pe pagină — un CTA din hero e mai mare decât unul dintr-un card —
   deci rămâne inline, lângă fiecare buton, neschimbată față de design.

   .btn se combină mereu cu o variantă de culoare: .btn-green, .btn-outline,
   .btn-light, .btn-dark, .btn-white, .btn-ghost, .btn-greenfill, .btn-invert
   — toate cu ACELAȘI comportament de bază+hover, indiferent de pagină, pentru
   că folosesc mereu aceeași clasă, nu o reimplementare per-buton. Majoritatea
   sunt `<a>`, dar nu toate — pasul „Trimite" din formularul de ofertă
   (quote-wizard.js) pune aceleași clase pe un `<button>` — nu contează pentru
   regula de mai jos, care ține oricum de :where(a):hover de mai sus, nu de
   fiecare variantă în parte.

   Fiecare variantă de :hover își repetă totuși explicit propria `color`,
   chiar când nu se schimbă față de starea de bază — nu ca apărare (asta o
   face deja :where(a):hover), ci ca documentație: cine citește .btn-green
   vede direct că rămâne alb la hover, fără să caute regula de mai sus. */
.btn { display: inline-block; font-weight: 700; cursor: pointer; text-align: center; white-space: nowrap; text-decoration: none; }
.btn-green    { background: var(--green); color: #FFFFFF; border: none; }
.btn-green:hover    { background: var(--green-dark); color: #FFFFFF; }
.btn-outline  { background: #FFFFFF; color: var(--ink); border: 3px solid var(--ink); }
.btn-outline:hover  { background: #EEF2F7; color: var(--ink); }
.btn-light    { background: #EEF2F7; color: var(--ink); border: none; }
.btn-light:hover    { background: #DDE5EF; color: var(--ink); }
.btn-dark     { background: var(--ink); color: #FFFFFF; border: none; }
/* #243352, nu #0B4FA8 (albastru) — prototipul original (design/site-public/
   index.dc.html) chiar specifica albastru aici, dar e singurul loc din tot
   site.css unde acea culoare apare ca fundal, nu doar ca text de link;
   #243352 e aceeași soluție deja folosită de .btn-dark din admin.css pentru
   exact același buton — bleumarin mai deschis, aceeași familie de culoare,
   nicio nuanță nouă introdusă. */
.btn-dark:hover     { background: #243352; color: #FFFFFF; }
.btn-white    { background: #FFFFFF; color: var(--ink); border: none; }
.btn-white:hover    { background: #EEF2F7; color: var(--ink); }
.btn-ghost    { background: transparent; color: #FFFFFF; border: 3px solid rgba(255, 255, 255, 0.6); }
.btn-ghost:hover    { background: rgba(255, 255, 255, 0.14); color: #FFFFFF; }
.btn-greenfill      { background: #FFFFFF; color: var(--ink); border: 3px solid var(--ink); }
.btn-greenfill:hover { background: var(--green); border-color: var(--green); color: #FFFFFF; }
.btn-invert   { background: #EEF2F7; color: var(--ink); border: none; }
.btn-invert:hover   { background: var(--ink); color: #FFFFFF; }

/* Card standard — bordura + colțul sunt mereu la fel; padding-ul diferă
   după conținut și rămâne inline. */
.card { border: 3px solid var(--ink); border-radius: 14px; background: #FFFFFF; }
.card-soft { background: #EEF2F7; border-radius: 14px; }

.breadcrumb { font-size: 15px; color: var(--muted); margin-bottom: 20px; }
.breadcrumb a { color: var(--muted); }

/* Cele două tipare de titlu care se repetă pe tot site-ul — 12, respectiv 24
   de folosiri, identice doar în astea două proprietăți (font-variation-settings
   e varianta din familia Archivo, nu o mărime). Font-size, line-height,
   letter-spacing, margin și culoarea diferă intenționat după rolul titlului
   pe pagină (un H1 nu e la fel de mare pe orice pagină) și rămân inline,
   lângă fiecare titlu — la fel ca la .btn-* mai sus. */
.h-display  { font-weight: 800; font-variation-settings: 'wdth' 112; }
.h2-display { font-weight: 800; font-variation-settings: 'wdth' 110; }
.h-super    { font-weight: 800; font-variation-settings: 'wdth' 118; }

/* Eticheta mică, majusculă, gen "Potrivit pentru" / "Durată obișnuită" —
   identică de 4 ori, doar margin-bottom diferă (rămâne inline). */
.eyebrow { font-size: 14px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }

@keyframes riseC {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1100px) {
  /* Pragul era 1020px — prea jos: între ~1070 și 1020 nava + butonul CTA
     nu mai încăpeau pe un rând (totul fix, inline, fără nicio reducere
     progresivă de gap/font-size), iar butonul ieșea parțial din ecran.
     1100px e calculat, nu ghicit, măsurat exact din lățimile reale ale
     glifelor din Archivo: cu textul CTA „Cere ofertă" (scurtat ulterior
     din „Cerere de ofertă"), siglă+text+nav+CTA au nevoie de ~1060px —
     pragul are acum și mai multă marjă decât strictul necesar, nu doar
     exact la limită.
     Butonul CTA rămâne vizibil (nu mai are clasă de ascundere aici) —
     Nicu a preferat să rămână lângă hamburger, fiindcă între ~640 și
     1100px încape confortabil și fără el rândul arată gol. */
  .navC { display: none !important; }
  .mobBtn { display: flex !important; }
}

@media (max-width: 1000px) {
  .gridA { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 900px) {
  .topbarC { display: none !important; }
  .colC { grid-template-columns: 1fr !important; }
  .col2C { grid-template-columns: 1fr !important; }
  .padC { padding-left: 20px !important; padding-right: 20px !important; }
  .stickyC { position: static !important; }
  .heroC { padding-top: 40px !important; }
  .ybox { position: static !important; margin-top: 18px !important; max-width: none !important; }
  .optGrid { grid-template-columns: 1fr !important; }
  .navBtns { flex-direction: column-reverse !important; align-items: stretch !important; }
}

@media (max-width: 660px) {
  .gridA { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  /* Sub 1100px, rândul din header rămâne siglă+text+CTA+hamburger (fără
     nav). Cu „Cere ofertă" (scurtat din „Cerere de ofertă"), are nevoie
     de ~589px — 640px lasă acum o marjă mai confortabilă decât strictul
     necesar. Sub prag, se ascunde textul de brand, rămân doar siglă+CTA+
     hamburger. */
  .brandTextC { display: none !important; }
}

@media (max-width: 380px) {
  /* Chiar și fără text, pe cele mai înguste telefoane reale (~360px,
     o parte din Android-urile mai vechi), siglă+CTA+hamburger aveau
     nevoie de ~375px cu textul vechi „Cerere de ofertă" — cu „Cere
     ofertă" (mai scurt) ajunge la ~337px, deci pragul ăsta nu mai e
     strict necesar pentru telefoanele obișnuite. Rămâne totuși ca
     plasă de siguranță pentru ecrane și mai mici (~320px, rare azi) —
     nu ascundem CTA-ul (Nicu vrea să rămână vizibil peste tot), doar
     îl strângem pe orizontală. Padding-ul vertical rămâne 15px, ca
     înălțimea butonului să nu coboare sub ținta de atingere de 44px. */
  .hdrCta { padding: 15px 10px !important; }
}