/* ==========================================================================
   pmi.ro — șabloane de conținut: articol, arhivă, căutare, 404
   --------------------------------------------------------------------------
   Se încarcă după tokens.css și header.css. Folosește exclusiv variabilele
   din tokens.css.

   Astea sunt tipurile de pagini, nu paginile individuale. Paginile construite
   în Elementor își aduc propriul design — aici stabilim cum arată ce generează
   WordPress singur.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ARTICOL
   -------------------------------------------------------------------------- */
.single-post .entry-header {
	margin-block-end: var(--pmi-sp-6);
}

.single-post .entry-title {
	font-size: var(--pmi-text-2xl);
	line-height: var(--pmi-lh-2xl);
	max-width: 22ch;
}

.single-post .entry-meta,
.archive .entry-meta,
.search .entry-meta {
	font-size: var(--pmi-text-2xs);
	line-height: var(--pmi-lh-2xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pmi-text-secundar);
}

.single-post .entry-meta a,
.archive .entry-meta a,
.search .entry-meta a {
	color: var(--pmi-text-secundar);
	text-decoration: none;
}

.single-post .entry-meta a:hover {
	color: var(--pmi-violet-500);
}

.single-post .post-image,
.single-post .featured-image {
	margin-block: 0 var(--pmi-sp-6);
}

/* Imaginea reprezentativă se decupează la o înălțime fixă. Fără asta, o poză
   verticală ocupă tot primul ecran și împinge titlul sub linia de plutire —
   cititorul nu vede despre ce e articolul fără să deruleze. */
.single-post .post-image img,
.single-post .featured-image img {
	inline-size: 100%;
	block-size: clamp(220px, 34vw, 420px);
	object-fit: cover;
	display: block;
}

.single-post .post-image img,
.single-post .featured-image img,
.entry-content img {
	border-radius: var(--pmi-raza-lg);
}

/* Ritmul textului. `--pmi-lat-text` limitează rândul la ~68 caractere —
   rândurile lungi se citesc prost, indiferent cât de lat e ecranul. */
.single-post .entry-content > :where(p, ul, ol, blockquote, h2, h3, h4) {
	max-width: var(--pmi-lat-text);
}

.single-post .entry-content h2 {
	margin-block-start: var(--pmi-sp-8);
}

.single-post .entry-content h3 {
	margin-block-start: var(--pmi-sp-6);
}

.single-post .entry-content > p {
	font-size: var(--pmi-text-md);
	line-height: 1.7;
}

/* Navigarea între articole */
.post-navigation {
	margin-block-start: var(--pmi-sp-9);
	padding-block-start: var(--pmi-sp-5);
	border-block-start: 1px solid var(--pmi-linie);
}

.post-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	gap: var(--pmi-sp-5);
	flex-wrap: wrap;
}

.post-navigation a {
	font-size: var(--pmi-text-sm);
	font-weight: var(--pmi-greutate-accent);
}

/* --------------------------------------------------------------------------
   2. ARHIVĂ ȘI REZULTATE DE CĂUTARE
   Aceeași carte de vizită: card, imagine sus, titlu, extras, meta.
   -------------------------------------------------------------------------- */
.blog .site-main,
.archive .site-main,
.search-results .site-main {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--pmi-sp-6);
	align-items: start;
}

/* Titlul arhivei ocupă tot rândul, nu o celulă de grilă. */
.blog .site-main > .page-header,
.archive .site-main > .page-header,
.search-results .site-main > .page-header,
.blog .site-main > .paging-navigation,
.archive .site-main > .paging-navigation,
.search-results .site-main > .paging-navigation {
	grid-column: 1 / -1;
}

.page-header {
	margin-block-end: var(--pmi-sp-4);
	padding-block-end: var(--pmi-sp-4);
	border-block-end: 1px solid var(--pmi-linie);
}

.page-header .page-title {
	font-size: var(--pmi-text-xl);
	line-height: var(--pmi-lh-xl);
	margin: 0;
}

.blog .site-main > article,
.archive .site-main > article,
.search-results .site-main > article {
	display: flex;
	flex-direction: column;
	background-color: var(--pmi-fundal-card);
	border-radius: var(--pmi-raza-lg);
	overflow: hidden;
	block-size: 100%;
}

.blog .site-main > article .inside-article,
.archive .site-main > article .inside-article,
.search-results .site-main > article .inside-article {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--pmi-sp-5);
	gap: var(--pmi-sp-3);
}

/* Imaginea iese din padding-ul cardului, până la margini.
   `order: -1` o urcă în capul cardului indiferent unde o pune GeneratePress în
   marcaj — fără el, marginea negativă de sus o trage peste linia de dată. */
.blog .site-main > article .post-image,
.archive .site-main > article .post-image,
.search-results .site-main > article .post-image {
	order: -1;
	margin: calc(var(--pmi-sp-5) * -1) calc(var(--pmi-sp-5) * -1) var(--pmi-sp-2);
}

.blog .site-main > article .post-image img,
.archive .site-main > article .post-image img,
.search-results .site-main > article .post-image img {
	inline-size: 100%;
	block-size: 200px;
	object-fit: cover;
	border-radius: 0;
	display: block;
}

.blog .site-main > article .entry-title,
.archive .site-main > article .entry-title,
.search-results .site-main > article .entry-title {
	font-size: var(--pmi-text-md);
	line-height: var(--pmi-lh-md);
	margin: 0;
}

.blog .site-main > article .entry-title a,
.archive .site-main > article .entry-title a,
.search-results .site-main > article .entry-title a {
	color: var(--pmi-ink);
	text-decoration: none;
}

.blog .site-main > article .entry-title a:hover,
.archive .site-main > article .entry-title a:hover {
	color: var(--pmi-violet-500);
}

.blog .site-main > article .entry-summary,
.archive .site-main > article .entry-summary,
.search-results .site-main > article .entry-summary {
	font-size: var(--pmi-text-xs);
	line-height: var(--pmi-lh-xs);
	color: var(--pmi-text-secundar);
	margin: 0;
}

.blog .site-main > article .entry-summary p {
	max-width: none;
	margin: 0;
}

/* „Citește mai departe" stă la baza cardului, oricât text e deasupra. */
.blog .site-main > article .read-more-container,
.archive .site-main > article .read-more-container,
.search-results .site-main > article .read-more-container {
	margin-block-start: auto;
	padding-block-start: var(--pmi-sp-2);
}

.read-more-container a {
	font-size: var(--pmi-text-xs);
	font-weight: var(--pmi-greutate-accent);
	color: var(--pmi-violet-500);
	text-decoration: none;
}

.read-more-container a:hover {
	text-decoration: underline;
}

/* Paginare */
.paging-navigation .nav-links {
	display: flex;
	gap: var(--pmi-sp-2);
	flex-wrap: wrap;
	margin-block-start: var(--pmi-sp-6);
}

.paging-navigation .page-numbers {
	display: grid;
	place-items: center;
	min-inline-size: 40px;
	block-size: 40px;
	padding-inline: var(--pmi-sp-2);
	border-radius: var(--pmi-raza-plin);
	font-size: var(--pmi-text-sm);
	color: var(--pmi-ink);
	text-decoration: none;
}

.paging-navigation .page-numbers:hover {
	background-color: var(--pmi-fundal-alternativ);
}

.paging-navigation .page-numbers.current {
	background-color: var(--pmi-ink);
	color: var(--pmi-alb);
}

/* Când nu există rezultate */
.no-results {
	grid-column: 1 / -1;
	max-width: var(--pmi-lat-text);
}

/* --------------------------------------------------------------------------
   3. FORMULARUL DE CĂUTARE (în pagină, nu cel din navigație)
   -------------------------------------------------------------------------- */
.pmi-404__cautare .search-form,
.no-results .search-form {
	display: flex;
	gap: var(--pmi-sp-2);
	max-width: 460px;
}

.pmi-404__cautare .search-field,
.no-results .search-field {
	flex: 1;
	min-block-size: 48px;
	padding-inline: var(--pmi-sp-4);
	background-color: var(--pmi-alb);
	border: 1px solid var(--pmi-neutral-300);
	border-radius: var(--pmi-raza-plin);
	font: inherit;
	font-size: var(--pmi-text-sm);
	color: var(--pmi-text);
}

.pmi-404__cautare .search-submit,
.no-results .search-submit {
	min-block-size: 48px;
	padding-inline: var(--pmi-sp-5);
	background-color: var(--pmi-ink);
	color: var(--pmi-alb);
	border: 0;
	border-radius: var(--pmi-raza-plin);
	font: inherit;
	font-size: var(--pmi-text-sm);
	font-weight: var(--pmi-greutate-accent);
	cursor: pointer;
}

.pmi-404__cautare .search-submit:hover,
.no-results .search-submit:hover {
	background-color: var(--pmi-violet-500);
}

/* --------------------------------------------------------------------------
   4. PAGINA 404
   -------------------------------------------------------------------------- */
.pmi-404 {
	padding-block: var(--pmi-sp-10);
}

.pmi-404__cod {
	font-size: var(--pmi-text-2xs);
	line-height: var(--pmi-lh-2xs);
	font-weight: var(--pmi-greutate-accent);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pmi-violet-500);
	margin-block-end: var(--pmi-sp-3);
}

.pmi-404__titlu {
	font-size: var(--pmi-text-2xl);
	line-height: var(--pmi-lh-2xl);
	margin-block-end: var(--pmi-sp-4);
}

.pmi-404__text {
	font-size: var(--pmi-text-md);
	line-height: var(--pmi-lh-md);
	max-width: 54ch;
	margin-block-end: var(--pmi-sp-6);
}

.pmi-404__cautare {
	margin-block-end: var(--pmi-sp-9);
}

.pmi-404__destinatii {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--pmi-sp-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pmi-404__destinatii li {
	margin: 0;
}

.pmi-404__destinatii .pmi-card {
	block-size: 100%;
	gap: var(--pmi-sp-2);
	text-decoration: none;
	border: 1px solid var(--pmi-linie);
	transition: border-color var(--pmi-tranzitie), transform var(--pmi-tranzitie);
}

.pmi-404__destinatii .pmi-card:hover,
.pmi-404__destinatii .pmi-card:focus-visible {
	border-color: var(--pmi-violet-500);
}

.pmi-404__destinatie-titlu {
	font-size: var(--pmi-text-md);
	line-height: var(--pmi-lh-md);
	font-weight: var(--pmi-greutate-titlu);
	color: var(--pmi-ink);
}

.pmi-404__destinatie-text {
	font-size: var(--pmi-text-xs);
	line-height: var(--pmi-lh-xs);
	color: var(--pmi-text-secundar);
}

@media (max-width: 768px) {
	.single-post .entry-title,
	.pmi-404__titlu {
		font-size: var(--pmi-text-xl);
		line-height: var(--pmi-lh-xl);
	}
}

/* --------------------------------------------------------------------------
   5. LINIA DE AUTOR
   Metadatele generate de WordPress sunt ascunse peste tot (vezi functions.php),
   dar articolele recuperate din arhivă sunt semnate de membri ai comunității.
   Atribuirea aia rămâne: e a lor, nu a organizației.
   -------------------------------------------------------------------------- */
.pmi-autor {
	font-size: var(--pmi-text-xs);
	line-height: var(--pmi-lh-xs);
	color: var(--pmi-text-secundar);
	margin-block-end: var(--pmi-sp-6);
	padding-block-end: var(--pmi-sp-4);
	border-block-end: 1px solid var(--pmi-linie);
	max-width: var(--pmi-lat-text);
}

.pmi-autor a {
	color: var(--pmi-violet-500);
	font-weight: var(--pmi-greutate-accent);
}

/* --------------------------------------------------------------------------
   PREȚUL PENTRU MEMBRI

   Nota de sub preț, din `mu-plugins/pmi-preturi.php`. Un preț care se schimbă
   singur, fără explicație, arată a greșeală; nota spune de ce e atât.
   -------------------------------------------------------------------------- */
.pmi-pret-nota {
	display: block;
	margin-block-start: var(--pmi-sp-2);
	font-size: var(--pmi-text-xs);
	line-height: var(--pmi-lh-xs);
	font-weight: var(--pmi-greutate-text);
	color: var(--pmi-text-secundar);
}

.pmi-pret-nota--activ {
	color: var(--pmi-succes);
	font-weight: var(--pmi-greutate-accent);
}

.pmi-pret-nota .amount {
	font-weight: var(--pmi-greutate-accent);
	color: var(--pmi-ink);
}

/* --------------------------------------------------------------------------
   CARDURILE DE ARTICOL

   Fiecare card primește pe rând una dintre cele trei culori PMI, ca dungă sus.
   Cu opt carduri identice, ochiul n-are de ce să se agațe și lista citește ca
   un tabel. Aceeași rotație ca pe paginile de conținut, deci site-ul rămâne
   coerent între secțiuni.
   -------------------------------------------------------------------------- */
.blog .site-main > article,
.archive .site-main > article,
.search-results .site-main > article {
	--ton: var(--pmi-violet-500);

	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: border-color var(--pmi-tranzitie);
}

.blog .site-main > article:nth-child(3n+1),
.archive .site-main > article:nth-child(3n+1) { --ton: var(--pmi-aqua-300); }

.blog .site-main > article:nth-child(3n+2),
.archive .site-main > article:nth-child(3n+2) { --ton: var(--pmi-tangerine-300); }

.blog .site-main > article:nth-child(3n),
.archive .site-main > article:nth-child(3n) { --ton: var(--pmi-violet-500); }

.blog .site-main > article::before,
.archive .site-main > article::before,
.search-results .site-main > article::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 6px;
	background-color: var(--ton);
	z-index: 1;
}

.blog .site-main > article:hover,
.archive .site-main > article:hover {
	border-color: var(--ton);
}

/* Butonul stă jos, în dreapta. Jos, ca să rămână pe aceeași linie la toate
   cardurile dintr-un rând, indiferent cât de lung e rezumatul. În dreapta,
   fiindcă acolo se termină cititul. */
.pmi-articol__actiune {
	margin: auto 0 0;
	padding-block-start: var(--pmi-sp-4);
	display: flex;
	justify-content: flex-end;
}

.pmi-articol__buton {
	display: inline-flex;
	align-items: center;
	gap: var(--pmi-sp-2);
	min-block-size: 40px;
	padding-inline: var(--pmi-sp-5);
	border: 2px solid var(--ton, var(--pmi-violet-500));
	border-radius: var(--pmi-raza-plin);
	font-size: var(--pmi-text-xs);
	font-weight: var(--pmi-greutate-accent);
	color: var(--pmi-ink);
	text-decoration: none;
	transition: background-color var(--pmi-tranzitie), color var(--pmi-tranzitie);
}

.pmi-articol__buton::after {
	content: "→";
	line-height: 1;
}

.pmi-articol__buton:hover {
	background-color: var(--ton, var(--pmi-violet-500));
	color: var(--pmi-alb);
}

/* Rezumatul nu mai are nevoie de spațiul de dedesubt: îl dă acum butonul. */
.blog .site-main > article .entry-summary,
.archive .site-main > article .entry-summary {
	margin-block-end: 0;
}

/* Butonul se lipește de baza cardului doar dacă are pe ce. Marcajul e
   `article > .inside-article > .entry-summary > buton`, deci lanțul de
   containere trebuie să se întindă tot, altfel `margin-top: auto` nu are
   distanță pe care să o umple. */
.blog .site-main > article .inside-article,
.archive .site-main > article .inside-article,
.search-results .site-main > article .inside-article {
	display: flex;
	flex-direction: column;
	block-size: 100%;
}

/* Rezumatul absoarbe spațiul liber, ca butonul să ajungă la baza cardului.

   `flex-grow: 1`, nu prescurtarea `flex: 1`. A doua înseamnă și
   `flex-basis: 0`, adică rezumatul pornește de la înălțime zero și crește de
   acolo. Cu ea, textul se aduna la mijloc și butonul plutea sub el. Cu
   `flex-grow` singur, rezumatul își păstrează înălțimea proprie și doar
   întinde ce rămâne. */
.blog .site-main > article .entry-summary,
.archive .site-main > article .entry-summary,
.search-results .site-main > article .entry-summary {
	flex-grow: 1;
}

/* --------------------------------------------------------------------------
   PAGINI JURIDICE

   Termeni și condiții, politica de confidențialitate. Textul rămâne cuvânt cu
   cuvânt cum e; se schimbă doar felul în care se citește. Erau într-o coloană
   îngustă, centrată, cu rânduri rupte la întâmplare, adică exact felul în care
   arată un text pe care nu-l citește nimeni.

   Lățime mai mare decât la un articol, fiindcă aici sunt liste numerotate și
   tabele, nu proză.
   -------------------------------------------------------------------------- */
/* Textul juridic a fost lipit din Word și avea spații neîntreruptibile între
   aproape fiecare cuvânt. Fraze întregi ajungeau astfel un singur „cuvânt", pe
   care `overflow-wrap: break-word` îl rupea la mijloc, fără cratimă. Curățarea
   s-a făcut în conținut, nu aici; regula globală a temei rămâne bună, fiindcă
   textul chiar are URL-uri lungi. */
/* Fără limită de lățime: textul umple containerul de 1200 px. Rândul iese astfel
   mai lung decât optimul de lizibilitate, și merită spus limpede — pentru un
   articol ar fi o greșeală. Aici nu: documentele astea se scanează după un
   paragraf anume, nu se citesc de la un capăt la altul, iar coloana de 400 px
   goală din dreapta le făcea să pară neterminate. Alinierea la ambele margini
   și despărțirea în silabe, mai jos, țin rândul lung în frâu. */
.pmi-legal {
	max-inline-size: none;
}

/* Politica de cookie-uri e generată de Complianz, care își înfășoară documentul
   într-un container cu `max-width: 800px` și `font-size: 14px`. Fără rândurile
   de mai jos, pagina aceea rămânea îngustă și cu litera mai mică în timp ce
   celelalte două se lățeau: trei documente juridice arătând fiecare altfel.

   Selectorul lui e `#cmplz-document`, cu ID, nu cu clasă. O clasă, oricâte
   niveluri ar avea, pierde în fața unui ID; de aceea potrivirea de aici e tot
   pe ID, ca să câștige fără `!important`. */
.pmi-legal #cmplz-document {
	max-width: none;
	font-size: inherit;
}

.pmi-legal #cmplz-document :where(p, li, td) {
	font-size: inherit;
}

.pmi-legal > :where(h2, h3, h4) {
	margin-block: var(--pmi-sp-7) var(--pmi-sp-3);
	font-weight: var(--pmi-greutate-titlu);
	color: var(--pmi-ink);
	scroll-margin-block-start: var(--pmi-sp-8);
}

.pmi-legal > h2 {
	font-size: var(--pmi-text-xl);
	line-height: var(--pmi-lh-xl);
}

.pmi-legal > h3 {
	font-size: var(--pmi-text-lg);
	line-height: var(--pmi-lh-lg);
	padding-block-start: var(--pmi-sp-5);
	border-block-start: 1px solid var(--pmi-linie);
}

/* Primul titlu nu are nevoie de linie deasupra: nu desparte nimic. */
.pmi-legal > :where(h2, h3):first-child {
	margin-block-start: 0;
	padding-block-start: 0;
	border-block-start: 0;
}

/* Aliniat la ambele margini, ca într-un contract tipărit. Despărțirea în silabe
   nu e un moft aici: fără ea, justify pe rânduri lungi lasă găuri între cuvinte.
   Are nevoie de `lang` pe document, iar WordPress îl scrie („ro-RO"). Unde
   dicționarul lipsește din browser, textul rămâne justify fără cratime, ceea ce
   e tot acceptabil. */
.pmi-legal p,
.pmi-legal li {
	line-height: var(--pmi-lh-lg);
	color: var(--pmi-text);
	/* Lățirea containerului de mai sus nu ajunge: `p` are în tokens.css o limită
	   proprie de 68 de caractere, care rămânea în picioare. */
	max-width: none;
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}

/* Sub 900 px rândul e oricum scurt, iar justify pe rânduri scurte face exact
   găurile pe care le evita mai sus. Se revine la aliniere simplă la stânga. */
@media (max-width: 900px) {
	.pmi-legal p,
	.pmi-legal li {
		text-align: start;
	}
}

.pmi-legal :where(ul, ol) {
	margin-block: var(--pmi-sp-3);
	padding-inline-start: var(--pmi-sp-6);
}

.pmi-legal li {
	margin-block-end: var(--pmi-sp-2);
}

/* Tabelele din text au nevoie de o coloană de derulare proprie pe ecrane mici,
   altfel împing toată pagina în lateral. */
.pmi-legal table {
	display: block;
	overflow-x: auto;
	inline-size: 100%;
	border-collapse: collapse;
	font-size: var(--pmi-text-sm);
	margin-block: var(--pmi-sp-4);
}

.pmi-legal :where(td, th) {
	border: 1px solid var(--pmi-linie);
	padding: var(--pmi-sp-3);
	vertical-align: top;
}

/* --------------------------------------------------------------------------
   ANPC ÎN SUBSOL

   Informarea consumatorului despre ANPC și despre soluționarea alternativă a
   litigiilor e o obligație, nu o curtoazie.

   Fără banner SOL: platforma europeană de soluționare online a fost închisă la
   20 iulie 2025, prin Regulamentul (UE) 2024/3228. Bannerul ăla, pe care încă
   îl afișează multe magazine românești, duce azi într-o pagină moartă.
   -------------------------------------------------------------------------- */
/* Pictograma oficială, luată din `Anexa-2-pictograma-2.docx` de pe anpc.ro —
   ANPC o distribuie doar ca document Word, nu ca fișier de imagine. Formatul
   cerut e 250 × 50; imaginea e la 500 × 124, adică dublu, pentru ecranele
   dense, și e afișată la jumătate. */
.pmi-anpc {
	margin-block-start: var(--pmi-sp-4);
}

.pmi-anpc a {
	display: inline-block;
	border-radius: var(--pmi-raza-sm);
	transition: opacity var(--pmi-tranzitie);
}

.pmi-anpc img {
	display: block;
	inline-size: 250px;
	max-inline-size: 100%;
	block-size: auto;
}

.pmi-anpc a:hover {
	opacity: 0.85;
}

/* --------------------------------------------------------------------------
   POLITICA DE COOKIE-URI, FĂRĂ SERTARE

   `mu-plugins/pmi-cookies.php` deschide fiecare `<details>` din start. Aici se
   scot semnele care mai promiteau un clic: săgeata, cursorul de mână și
   fundalul de buton al capului de grup. Ce rămâne e o listă, cum și trebuie.
   -------------------------------------------------------------------------- */
.pmi-legal #cmplz-document .cmplz-dropdown > summary {
	cursor: default;
	background-color: transparent;
	padding-inline: 0;
	pointer-events: none;
}

.pmi-legal #cmplz-document .cmplz-dropdown > summary div::after {
	display: none;
}

.pmi-legal #cmplz-document .cmplz-dropdown {
	background-color: transparent;
	margin-block-end: var(--pmi-sp-6);
}

/* Capul de grup devine un titlu obișnuit, nu un rând de tabel. */
.pmi-legal #cmplz-document .cmplz-dropdown > summary h3 {
	padding-inline: 0;
	font-size: var(--pmi-text-lg);
	line-height: var(--pmi-lh-lg);
	font-weight: var(--pmi-greutate-titlu);
	color: var(--pmi-ink);
}

.pmi-legal #cmplz-document .cmplz-dropdown :where(p, h4, ul) {
	padding-inline: 0;
}