/* ============================================================
   pagina.css - invelisul de continut, in limbajul paginii
   principale. Se incarca DUPA matted.css si nu redefineste
   niciun token: culorile, fonturile si ritmul vin de acolo.
   Continutul din baza de date nu are nicio clasa, deci tot
   ce e aici se agata de elemente, nu de nume inventate.
   ============================================================ */

/* ---------- bara de progres a citirii ---------- */
.prog{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:120;
  background:linear-gradient(90deg,var(--gold-d),var(--gold),var(--gold-l));
  transform-origin:0 50%;transform:scaleX(0);
}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .prog{animation:prog linear both;animation-timeline:scroll(root block)}
  }
}

/* ---------- capul articolului ---------- */
.doc-head{padding-block:clamp(120px,15vw,190px) 0}
.doc-head .wrap{max-width:calc(var(--wrap) - 120px)}
.doc-head h1{
  font-family:var(--disp);font-weight:500;
  font-size:clamp(2.3rem,5.6vw,4.6rem);line-height:1.04;
  letter-spacing:-.022em;color:var(--tx);margin:0;max-width:21ch;
  text-wrap:balance;
}
.doc-head h1 em{font-style:italic;color:var(--gold);font-weight:400}
.doc-head .lede{margin:clamp(22px,3vw,34px) 0 0;max-width:60ch}

.doc-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  margin:clamp(26px,3.4vw,40px) 0 0;padding-top:22px;
  border-top:1px solid var(--div);
  font-family:var(--body);font-size:.76rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--tx3);
}
.doc-meta b{color:var(--gold);font-weight:700}
.doc-meta span::before{content:"";display:inline-block;width:3px;height:3px;
  border-radius:50%;background:var(--gold);margin-right:12px;vertical-align:middle}

/* ---------- doua coloane: cuprins lipit, text ---------- */
.doc{padding-block:clamp(52px,7vw,88px) var(--pad)}
.doc .wrap{max-width:calc(var(--wrap) - 120px)}
.doc-grid{display:block}
@media (min-width:1060px){
  .doc-grid{
    display:grid;grid-template-columns:minmax(0,232px) minmax(0,1fr);
    gap:clamp(40px,5.6vw,86px);align-items:start;
  }
}

/* ---------- cuprinsul ---------- */
.toc{display:none}
@media (min-width:1060px){
  .toc{
    display:block;position:sticky;top:clamp(96px,14vh,132px);
    max-height:calc(100vh - 180px);overflow-y:auto;
    padding-right:6px;
  }
  .toc::-webkit-scrollbar{width:2px}
  .toc::-webkit-scrollbar-thumb{background:var(--div3)}
}
.toc-t{
  font-family:var(--body);font-size:.64rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  margin:0 0 18px;
}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
.toc li{counter-increment:t;margin:0 0 2px}
.toc a{
  display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:baseline;
  padding:8px 0;color:var(--tx3);text-decoration:none;
  font-family:var(--body);font-size:.83rem;line-height:1.42;
  border-left:1px solid transparent;padding-left:14px;margin-left:-15px;
  transition:color var(--t-fast) var(--e-in),border-color var(--t-fast) var(--e-in);
}
.toc a::before{
  content:counter(t,decimal-leading-zero);
  font-family:var(--num);font-size:.68rem;font-weight:600;
  color:var(--gold-d);letter-spacing:.02em;
}
.toc a:hover{color:var(--tx);border-left-color:var(--gold)}
.toc a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- corpul: numai selectori de element ---------- */
.doc-body{max-width:68ch;counter-reset:h}

.doc-body>*{margin:0 0 clamp(17px,1.6vw,21px)}
.doc-body>*:last-child{margin-bottom:0}

.doc-body p{
  font-family:var(--body);font-size:clamp(1rem,1.16vw,1.075rem);
  line-height:1.78;color:var(--tx2);
}
.doc-body p strong,.doc-body li strong{color:var(--tx);font-weight:700}
.doc-body b{color:var(--tx);font-weight:700}

.doc-body h2{
  counter-increment:h;
  font-family:var(--disp);font-weight:500;
  font-size:clamp(1.72rem,3.15vw,2.5rem);line-height:1.14;
  letter-spacing:-.018em;color:var(--tx);
  margin:clamp(52px,6.4vw,86px) 0 clamp(16px,1.9vw,24px);
  padding-top:clamp(26px,3.2vw,38px);
  position:relative;scroll-margin-top:clamp(84px,12vh,116px);
}
.doc-body h2::before{
  content:counter(h,decimal-leading-zero);
  display:block;font-family:var(--num);font-weight:700;
  font-size:.78rem;letter-spacing:.16em;color:var(--gold);
  margin-bottom:14px;
}
.doc-body h2::after{
  content:"";position:absolute;top:0;left:0;width:100%;height:1px;
  background:var(--div);
}
.doc-body h2:first-child{margin-top:0;padding-top:0}
.doc-body h2:first-child::after{display:none}

.doc-body h3{
  font-family:var(--disp);font-weight:500;
  font-size:clamp(1.22rem,1.85vw,1.45rem);line-height:1.28;
  color:var(--gold-l);letter-spacing:-.008em;
  margin:clamp(32px,3.8vw,46px) 0 clamp(10px,1.2vw,14px);
  scroll-margin-top:clamp(84px,12vh,116px);
}

.doc-body a{
  color:var(--gold);text-decoration:none;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  padding-bottom:1px;
  transition:background-size var(--t-fast) var(--e-in),color var(--t-fast) var(--e-in);
}
.doc-body a:hover{color:var(--gold-l);background-size:100% 2px}
.doc-body a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

.doc-body ul,.doc-body ol{padding-left:0;list-style:none}
.doc-body li{
  font-family:var(--body);font-size:clamp(.97rem,1.1vw,1.04rem);
  line-height:1.72;color:var(--tx2);
  padding-left:30px;position:relative;margin-bottom:12px;
}
.doc-body li:last-child{margin-bottom:0}
.doc-body ul>li::before{
  content:"";position:absolute;left:6px;top:.72em;
  width:5px;height:5px;border-radius:50%;background:var(--gold);
}
.doc-body ol{counter-reset:li}
.doc-body ol>li{counter-increment:li}
.doc-body ol>li::before{
  content:counter(li);position:absolute;left:0;top:.06em;
  font-family:var(--num);font-size:.8rem;font-weight:700;color:var(--gold);
}

.doc-body blockquote{
  margin:clamp(30px,3.6vw,44px) 0;padding:2px 0 2px clamp(20px,2.6vw,30px);
  border-left:1px solid var(--gold);
}
.doc-body blockquote p{
  font-family:var(--disp);font-style:italic;font-weight:400;
  font-size:clamp(1.16rem,1.85vw,1.42rem);line-height:1.5;color:var(--tx);
}
.doc-body blockquote p:last-child{margin-bottom:0}

/* ---------- rezumatul de deschidere ----------
   Toate cele 13 pagini incep la fel: un paragraf care are ca unic copil un
   <strong> ("In brief" la ghiduri, "Last updated: ..." la cele legale), apoi
   rezumatul, apoi la ghiduri randul cu autorul. Regula se recunoaste singura
   prin :has(), deci nu am nevoie de nicio clasa in text si nici de vreun
   semnal din PHP. Daca vreodata o pagina nu are forma asta, nu se strica
   nimic: paragrafele raman paragrafe. */
.doc-body>p:first-child:has(>strong:only-child),
.doc-body>p:first-child:has(>strong:only-child)+p{
  background:var(--bg2);border-left:1px solid var(--gold);
  padding-inline:clamp(20px,2.6vw,32px);margin:0;
}
.doc-body>p:first-child:has(>strong:only-child){
  padding-top:clamp(22px,2.8vw,30px);padding-bottom:10px;
}
.doc-body>p:first-child:has(>strong:only-child)>strong{
  font-family:var(--body);font-size:.66rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
.doc-body>p:first-child:has(>strong:only-child)+p{
  padding-bottom:clamp(24px,3vw,32px);
  margin-bottom:clamp(30px,3.6vw,42px);
}
.doc-body>p:first-child:has(>strong:only-child)+p>strong{
  font-family:var(--body);font-weight:500;color:var(--tx);
  font-size:clamp(1.02rem,1.32vw,1.14rem);line-height:1.66;
}
/* randul cu autorul, numai la ghiduri: paginile legale au <h2> pe locul asta */
.doc-body>p:first-child:has(>strong:only-child)+p+p{
  font-size:.86rem;line-height:1.7;color:var(--tx3);
  padding-bottom:clamp(24px,3vw,32px);margin-bottom:clamp(34px,4vw,48px);
  border-bottom:1px solid var(--div2);
}

/* ---------- tabele ---------- */
.doc-body table{
  width:100%;border-collapse:collapse;
  margin:clamp(28px,3.4vw,40px) 0;
  font-family:var(--body);font-size:clamp(.86rem,1vw,.95rem);
}
.doc-body th{
  text-align:left;padding:12px 16px 12px 0;
  border-bottom:1px solid var(--gold);
  color:var(--gold);font-weight:700;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;
}
.doc-body td{
  padding:15px 16px 15px 0;border-bottom:1px solid var(--div2);
  color:var(--tx2);line-height:1.62;vertical-align:top;
}
.doc-body tbody tr:last-child td{border-bottom:none}
.doc-body td strong{color:var(--tx)}
@media (max-width:660px){
  .doc-body thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .doc-body table,.doc-body tbody,.doc-body tr,.doc-body td{display:block;width:100%}
  .doc-body tr{padding:16px 0;border-bottom:1px solid var(--div2)}
  .doc-body tr:last-child{border-bottom:none}
  .doc-body td{padding:3px 0;border:0}
  .doc-body td:first-child{color:var(--tx);font-weight:700;margin-bottom:4px}
}

/* ---------- chemarea de la final ---------- */
.doc-end{
  max-width:68ch;
  margin-top:clamp(56px,7vw,92px);padding-top:clamp(34px,4vw,50px);
  border-top:1px solid var(--div);
}
.doc-end h2{
  font-family:var(--disp);font-weight:500;
  font-size:clamp(1.6rem,2.9vw,2.25rem);line-height:1.14;
  color:var(--tx);margin:0 0 14px;letter-spacing:-.018em;max-width:20ch;
}
.doc-end h2 em{font-style:italic;color:var(--gold);font-weight:400}
.doc-end p{
  font-family:var(--body);font-size:clamp(.97rem,1.1vw,1.04rem);
  line-height:1.72;color:var(--tx2);margin:0 0 clamp(24px,3vw,32px);max-width:54ch;
}

/* ---------- miscarea: fara nicio linie de JS ---------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .doc-body>*,.doc-end>*{
      animation:rise linear both;animation-timeline:view();
      animation-range:entry 2% cover 17%;
    }
    .doc-body h2{animation-range:entry 0% cover 15%}
    .doc-head .eyebrow,.doc-head h1,.doc-head .lede,.doc-head .doc-meta{
      animation:rise .78s var(--e) both;
    }
    .doc-head h1{animation-delay:.06s}
    .doc-head .lede{animation-delay:.14s}
    .doc-head .doc-meta{animation-delay:.2s}
  }
}

/* ---------- textul care intra sub meniu ----------
   Meniul e o pastila care pluteste peste continut. Pe pagina principala
   sectiunile au fundalul lor si nu se vede nimic pe langa ea. Pe o pagina
   de text dens, randurile trec chiar pe langa marginea pastilei si arata
   dezordonat. Un degrade fix, sub meniu si peste text, le stinge inainte
   sa ajunga acolo. Nu prinde clicuri si nu misca nimic din pagina. */
body.matted-doc::before{
  content:"";position:fixed;inset:0 0 auto 0;
  height:clamp(76px,10.5vh,112px);z-index:78;pointer-events:none;
  background:linear-gradient(to bottom,var(--bg) 22%,rgba(15,15,15,.9) 52%,rgba(15,15,15,0));
}

/* ---------- sectiunea in care esti ---------- */
.toc a.aici{color:var(--tx);border-left-color:var(--gold)}
.toc a.aici::before{color:var(--gold)}

/* ---------- ce facea GSAP pe pagina principala ----------
   Bara care coboara la incarcare si legaturile din meniul mobil care
   intra in trepte. Pe pagina principala le face gsap; aici nu se
   incarca gsap, deci le face CSS. Aceleasi durate si acelasi ritm. */
@media (prefers-reduced-motion: no-preference){
  body.matted-doc .nav{animation:nav-jos .9s cubic-bezier(.16,1,.3,1) .2s both}
  @keyframes nav-jos{from{transform:translate3d(0,-110px,0);opacity:0}to{transform:none;opacity:1}}

  body.matted-doc .menu.open a{animation:menu-in .55s var(--e) both}
  body.matted-doc .menu.open a:nth-child(1){animation-delay:.05s}
  body.matted-doc .menu.open a:nth-child(2){animation-delay:.105s}
  body.matted-doc .menu.open a:nth-child(3){animation-delay:.16s}
  body.matted-doc .menu.open a:nth-child(4){animation-delay:.215s}
  body.matted-doc .menu.open a:nth-child(5){animation-delay:.27s}
  body.matted-doc .menu.open a:nth-child(6){animation-delay:.325s}
  body.matted-doc .menu.open a:nth-child(7){animation-delay:.38s}
  body.matted-doc .menu.open a:nth-child(8){animation-delay:.435s}
  body.matted-doc .menu.open a:nth-child(9){animation-delay:.49s}
  body.matted-doc .menu.open a:nth-child(n+10){animation-delay:.545s}
  @keyframes menu-in{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
}

/* legaturile din cuprins duc lin, si se opresc sub bara, nu sub ea */
@media (prefers-reduced-motion: no-preference){
  body.matted-doc{scroll-behavior:smooth}
}

/* ---------- liniile ornamentale, scoase la cerere ----------
   .doc-body h2::after era linia gri pe toata latimea coloanei, desenata
   deasupra fiecarui H2 din cele 13 ghiduri. E cea mai lunga linie
   decorativa de pe sait. Se stinge, nu se sterge: regula veche ramane
   vizibila mai sus si se aprinde inapoi dintr-un singur rand.
   Spatiul de deasupra titlului se pastreaza, el separa sectiunile. */
.doc-body h2::after{display:none}