/* =========================================================================
   SitePeChat — identitatea vizuala (vezi inc/brand.php)

   Doua reguli de care sa nu te abati:
   1. Culorile logo-ului sunt cele din fisierul oficial: #0F172A pentru „Site",
      #1FA463 pentru „PeChat", #64748B pentru slogan. NU sunt aceleasi cu
      variabilele temei (--ink e #1F2937), deci nu le inlocui cu var(...).
   2. Pe fundal inchis se foloseste varianta dark a iconitei (bula alba, bifa
      verde). Iconita verde pe #0F172A ar fi o pata, nu un logo.
   ========================================================================= */

/* --- lockup-ul din header ------------------------------------------------
   Iconita + numele + sloganul, pe doua randuri in dreapta iconitei. Sloganul
   e cules mai mare, proportional, decat in fisierul oficial: la marimea de
   header, proportia din fisier (20/58) l-ar duce la 5px. */
.spc-brand .main-title{margin:0;line-height:1}
.spc-lockup{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.spc-lockup__i{display:block;flex:0 0 auto;width:40px;height:40px}
.spc-lockup__t{display:flex;flex-direction:column;justify-content:center;gap:3px}
.spc-lockup__n{font-size:1.45rem;font-weight:700;letter-spacing:-.02em;line-height:1;
  color:#0F172A;white-space:nowrap}
.spc-lockup__n-b{color:#1FA463}
.spc-lockup__s{font-size:.72rem;font-weight:600;letter-spacing:.02em;line-height:1;
  color:#64748B;white-space:nowrap}
.spc-lockup:focus-visible{outline:2px solid #17804D;outline-offset:5px;border-radius:10px}

@media (max-width:768px){
  .spc-lockup{gap:10px}
  .spc-lockup__i{width:34px;height:34px}
  .spc-lockup__n{font-size:1.2rem}
  .spc-lockup__s{font-size:.66rem}
}
/* Sub 380px numele si butonul de meniu au nevoie de tot randul. Sloganul pica
   primul: e singurul lucru de acolo care se repeta in pagina. */
@media (max-width:380px){
  .spc-lockup__s{display:none}
}

/* --- marca alba in sectiunile inchise ------------------------------------
   Sectiunea de final („Vrei ca site-ul tau sa asculte de tine?") are fundal
   #0F172A. Iconita dark sta deasupra titlului, centrata, ca semn — de aceea e
   pusa din CSS: nu e continut, nu are ce sa citeasca un cititor de ecran. */
.spc-cta .spc-wrap::before{content:"";display:block;width:54px;height:54px;
  margin:0 auto 20px;background:url("brand/icon-dark.svg") center/contain no-repeat}

@media (max-width:600px){
  .spc-cta .spc-wrap::before{width:44px;height:44px;margin-bottom:16px}
}

/* --- subsolul (acelasi fundal inchis) ------------------------------------
   `.inside-site-info` e flex cu `nowrap`, deci fara cele doua ranuri de mai jos
   marca ar sta LANGA randul de copyright, nu deasupra lui: `flex-basis:100%`
   ii da rand propriu, iar `wrap` lasa copyright-ul sa coboare sub el. */
.inside-site-info{flex-wrap:wrap}
.spc-foot-brand{display:flex;align-items:center;justify-content:center;gap:10px;
  flex:0 0 100%;margin:0 0 16px}
.spc-foot-brand__i{display:block;width:38px;height:38px}
.spc-foot-brand__n{font-size:1.05rem;font-weight:700;letter-spacing:-.02em;line-height:1;
  color:#fff}
/* 5,5:1 pe #0F172A — verdele de brand se poate folosi ca text pe inchis, chiar
   daca pe alb nu (3,1:1). Vezi si nota din spc.css despre --accent-d. */
.spc-foot-brand__n-b{color:#1FA463}