/* ════════════════════════════════════════════════════════════════════════════
   daniel-pisau.ro — PROBĂ pe Cloudflare, 06.09.2026.
   🎨 Paleta e ALTA, cerută anume: nu violetul de acum (#7c3aed + bleumarin) și nu
      ardezia cu roz de pe pisaucompany. Aici: HÂRTIE CALDĂ + cerneală + verde adânc.
      Un blog personal cu texte lungi — se citește, nu se prezintă.
   📏 Fiecare pereche de culori e MĂSURATĂ; cifra e scrisă lângă variabilă.
   ════════════════════════════════════════════════════════════════════════════ */
:root{
  --hartie:#faf7f2;      /* fundalul paginii, hârtie caldă */
  --alb:#fff;
  --ink:#1f1d1a;         /* 15,73 pe hârtie */
  --text:#4a4640;        /*  8,77 pe hârtie */
  --muted:#6b665e;       /*  5,33 pe hârtie */
  --acc:#1f6f5c;         /*  5,64 pe hârtie · alb pe el: 6,02 */
  --acc-2:#175647;       /*  7,99 — hover */
  --ocru:#8a5a1a;        /*  5,52 — etichete de categorie */
  --linie:#e7e0d4; --linie-2:#f0eae0;
  --lat:1080px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--hartie);color:var(--text);
  font-family:Inter,system-ui,-apple-system,sans-serif;
  font-size:18px;line-height:1.72;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--lat);margin:0 auto;padding:0 24px}
.ingust{max-width:720px;margin:0 auto}
h1,h2,h3{font-family:Lora,Georgia,serif;color:var(--ink);line-height:1.25;
  margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(29px,4.2vw,42px)}
h2{font-size:clamp(23px,2.8vw,29px)}
h3{font-size:21px;font-weight:600}
p{margin:0 0 1.15em}
a{color:var(--acc);text-underline-offset:3px}
a:hover{color:var(--acc-2)}
strong{color:var(--ink);font-weight:600}
.mic{font-size:15px;color:var(--muted)}

/* ── ANTET ─────────────────────────────────────────────────────────────────── */
.sus{background:var(--hartie);border-bottom:1px solid var(--linie);position:sticky;top:0;z-index:30}
/* 🪤 `padding-block` NU e decorativ: când meniul se rupe pe două rânduri (telefon, 7 intrări),
   coada literelor `ț`/`ș` din ultimul rând cădea EXACT pe linia de jos a antetului — „Rețea"
   se citea „Retea". Se vedea doar în captura de telefon, mărită; fonturile erau în regulă
   (verificat: `ț` există în toate cele 4 greutăți). Pe desktop `min-height` ține aspectul. */
.sus .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:70px;flex-wrap:wrap;padding-top:7px;padding-bottom:7px}
.marca{font-family:Lora,Georgia,serif;font-weight:700;font-size:21px;color:var(--ink);
  text-decoration:none;letter-spacing:-.01em}
nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
/* 📌 Meniul îngroșat la cererea lui Daniel, 09.09.2026 („puțin bolduit sau chiar bold").
   600 = Inter-600, care e DEJA încărcat (îl folosește `strong`) ⇒ zero cereri în plus.
   Pagina activă rămâne deosebită prin CULOARE, nu prin greutate, fiindcă acum toate sunt 600. */
nav a{display:block;padding:8px 13px;border-radius:7px;text-decoration:none;
  color:var(--text);font-size:15px;font-weight:600}
nav a:hover{background:var(--linie-2);color:var(--ink)}
nav a.activ{color:var(--acc);font-weight:600}

/* ── BUTOANE ───────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:6px;
  text-decoration:none;font-weight:600;font-size:16px;border:1px solid transparent}
.btn-plin{background:var(--acc);color:#fff}
.btn-plin:hover{background:var(--acc-2);color:#fff}
.btn-gol{background:transparent;color:var(--ink);border-color:var(--linie)}
.btn-gol:hover{border-color:var(--acc);color:var(--acc)}
.butoane{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

section{padding:56px 0}
.fundal{background:var(--alb);border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie)}

/* ── EROU ──────────────────────────────────────────────────────────────────── */
.erou{padding:72px 0 56px}
.erou h1{max-width:15ch}
.erou .lead{font-size:20px;max-width:58ch;color:var(--text);margin-top:16px}
.supra{font-family:Lora,Georgia,serif;font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc);margin-bottom:16px;font-weight:600}

/* ── LISTA DE ARTICOLE ─────────────────────────────────────────────────────── */
.articole{display:grid;gap:34px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.art{background:var(--alb);border:1px solid var(--linie);border-radius:4px;overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s}
.art:hover{box-shadow:0 8px 26px rgba(31,29,26,.08);transform:translateY(-2px)}
.art-poza{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--linie-2)}
.art-poza img{width:100%;height:100%;object-fit:cover;display:block}
.art-corp{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
/* titlurile din carduri sunt <h2>, nu <h3>: sub <h1>-ul paginii, un salt peste <h2>
   strică ordinea titlurilor pentru cititoarele de ecran. Mărimea rămâne aceeași. */
.art h2{margin:0 0 8px;font-size:20px;line-height:1.32;font-weight:700}
.art h2 a{color:var(--ink);text-decoration:none}
.art h2 a:hover{color:var(--acc)}
.art p{font-size:15.5px;color:var(--muted);margin:0 0 14px}
.meta{font-size:13px;color:var(--muted);display:flex;gap:10px;align-items:center;
  flex-wrap:wrap;margin-bottom:10px}
.eticheta{font-family:Lora,Georgia,serif;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ocru);font-weight:600;text-decoration:none}
.eticheta:hover{color:var(--ink)}
.art .citeste{margin-top:auto;font-size:15px;font-weight:600;color:var(--acc);
  text-decoration:none}
.art .citeste:hover{color:var(--acc-2)}

/* ── ARTICOLUL ─────────────────────────────────────────────────────────────── */
.articol{padding:52px 0 64px}
.articol header{margin-bottom:32px}
.articol h1{margin-bottom:14px}
.coperta{margin:0 0 34px;border-radius:5px;overflow:hidden;border:1px solid var(--linie)}
.coperta img{width:100%;height:auto;display:block}
.text{font-size:18.5px;line-height:1.8}
.text h2{margin:2em 0 .5em;font-size:26px}
.text h3{margin:1.7em 0 .4em}
.text img{max-width:100%;height:auto;border-radius:4px}
.text figure{margin:1.8em 0}
.text figcaption{font-size:14.5px;color:var(--muted);text-align:center;margin-top:8px}
.text ul,.text ol{padding-left:22px}
.text li{margin-bottom:.5em}
.text hr{border:0;border-top:1px solid var(--linie);margin:2.2em 0}
.text blockquote{margin:1.8em 0;padding:2px 0 2px 22px;border-left:3px solid var(--acc);
  color:var(--ink);font-family:Lora,Georgia,serif;font-size:20px}
.text table{width:100%;border-collapse:collapse;margin:1.8em 0;font-size:16px;display:block;
  overflow-x:auto}
.text th,.text td{border:1px solid var(--linie);padding:9px 12px;text-align:left;
  vertical-align:top}
.text th{background:var(--linie-2);color:var(--ink);font-weight:600}
.dupa-articol{margin-top:44px;padding-top:26px;border-top:1px solid var(--linie)}

/* ── SUBSOL ────────────────────────────────────────────────────────────────── */
footer{background:var(--ink);color:#b9b2a6;padding:48px 0 30px;font-size:15.5px;
  margin-top:0}
footer a{color:#ded7ca;text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
footer .cap{font-family:Lora,Georgia,serif;color:#fff;font-size:15px;font-weight:600;
  margin:0 0 12px}
.subsol{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.subsol ul{list-style:none;margin:0;padding:0}
.subsol li{margin-bottom:7px}
.subsol-jos{margin-top:34px;padding-top:20px;border-top:1px solid #38332c;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13.5px;
  color:#8f887c}

.sari{position:absolute;left:-9999px}
.sari:focus{left:12px;top:12px;position:fixed;z-index:99;background:#fff;color:var(--ink);
  padding:10px 16px;border-radius:6px;border:2px solid var(--acc)}
a:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

@media(max-width:700px){
  body{font-size:17px}
  section{padding:42px 0}
  .erou{padding:48px 0 40px}
  .text{font-size:17.5px}
  .articole{gap:26px}
}

/* ── PAGINILE CU STRUCTURĂ PROPRIE ─────────────────────────────────────────────
   09.09.2026. Paginile venite din WordPress își poartă propriul CSS, scopat sub
   `#dp-page`, și e pus în <head> de build.py (vezi antetul lui pagini.py). Aici stau
   doar cele două punți de care are nevoie ca să se așeze în situl ăsta. */

/* 🔑 Punte 1: iconițele. Erau Font Awesome — `<i>` stilizat ca TEXT
   (`.vi i{font-size:1.6rem;color:…}`). Un <svg> obișnuit ignoră font-size și color;
   cu 1em + currentColor se purtă exact ca glifa pe care o înlocuiește. */
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.125em;flex-shrink:0}

/* Punte 2: lățimea. Paginile au grile proprii, deci NU se pun în `.ingust`. */
#dp-page{overflow-x:hidden}
#dp-page img{max-width:100%;height:auto}

/* ── DISTRIBUIRE sub articol ──────────────────────────────────────────────────
   09.09.2026. Doar linkuri + 2 butoane; niciun script terț. Vezi distribuire.py. */
/* 🪤 FĂRĂ `border-top` aici: `.dupa-articol` are deja una, iar două ieșeau ca o linie
   dublă (văzut în PNG, nu în cod). */
.distribuie{margin:4px 0 8px;padding:0 0 4px}
.dist-et{margin:0 0 12px}
.dist-lista{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:0;padding:0}
.dist{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--linie);background:var(--alb);color:var(--text);
  font:inherit;font-size:14.5px;text-decoration:none;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s}
.dist:hover{border-color:var(--acc);color:var(--acc);background:var(--linie-2)}
.dist .ico{font-size:16px;color:var(--acc)}
.dist:hover .ico{color:var(--acc-2)}
.dist:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* 🪤 `display:inline-flex` de mai sus BATE `[hidden]` din foaia browserului ⇒ butonul de
   partajare nativă, marcat `hidden`, se vedea totuși (și mort, unde `navigator.share` nu
   există). Regula asta e cea care-l ține ascuns până îl aprinde scriptul. */
.dist[hidden]{display:none}
@media(max-width:520px){.dist .et{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%)}.dist{padding:11px}}

/* ── COMENTARII ───────────────────────────────────────────────────────────────
   09.09.2026. Coapte în HTML la construcție ⇒ zero cereri, zero JS pentru citire.
   Vezi comentarii.py. */
.comentarii{margin:38px 0 0;padding-top:26px;border-top:1px solid var(--linie)}
.com-lista{list-style:none;margin:0 0 34px;padding:0}
.com{padding:18px 0;border-bottom:1px solid var(--linie-2)}
.com-cap{display:flex;align-items:baseline;gap:12px;margin-bottom:6px;flex-wrap:wrap}
.com-nume{font-weight:600;color:var(--ink)}
.com-text p{margin:0 0 .6em}
.com-text p:last-child{margin-bottom:0}

.com-form{background:var(--alb);border:1px solid var(--linie);border-radius:10px;padding:22px}
.com-r{margin:0 0 16px}
.com-r label{display:block;margin-bottom:5px;font-size:15px;font-weight:600;color:var(--ink)}
.com-r label .mic{font-weight:400}
.com-r input,.com-r textarea{width:100%;padding:10px 12px;font:inherit;font-size:16px;
  color:var(--text);background:var(--hartie);border:1px solid var(--linie);border-radius:6px}
.com-r input:focus,.com-r textarea:focus{outline:2px solid var(--acc);outline-offset:1px;
  border-color:var(--acc)}
.com-r textarea{resize:vertical;min-height:120px}
.com-acord{display:flex;margin:0 0 18px;font-size:15px}
/* 🪤 `display:flex` face din FIECARE bucată de text un element separat ⇒ linkul din frază
   sărea în altă coloană, iar punctul final la capătul rândului. Textul stă într-un `<span>`,
   deci flex-ul are exact doi copii: bifa și fraza. */
.com-acord label{display:flex;gap:9px;align-items:flex-start;line-height:1.55}
.com-acord label>span{flex:1}
.com-acord input{margin-top:4px;flex:none;width:17px;height:17px;accent-color:var(--acc)}

/* 🪤 Capcana de spam: scoasă din vedere cu CSS, NU cu `hidden`/`type=hidden` — un robot
   sare peste câmpurile ascunse DECLARAT, dar completează unul care pare normal. */
.capcana{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.com-stare{margin:0 0 18px;padding:11px 14px;border-radius:7px;font-size:15px}
.com-stare[hidden]{display:none}
.com-stare.ok{background:#eaf2ef;color:var(--acc-2);border:1px solid #c7ded6}
.com-stare.rau{background:#fdf2ec;color:#8a3a12;border:1px solid #f0d9c8}