/* ==========================================================================
   CHENARELE, UNIFORM PE TOT SITE-UL

   Tiparul exista deja, dar doar in trei locuri: cardurile de articol, blocurile
   de pe paginile de continut si formatele de eveniment. In rest, cutiile erau
   dreptunghiuri gri identice: cifrele din „Cine suntem", jaloanele, contactele,
   marturiile, acordeoanele, invitatii, produsele din magazin. Cu douasprezece
   cutii la fel pe o pagina, ochiul n-are de ce sa se agate si lista citeste ca
   un tabel.

   Aici se aduna tot: aceeasi rotatie de trei culori, aceeasi dunga de 6 px sus,
   acelasi chenar colorat la trecerea mausului.

   De ce dunga si nu bordura groasa: o bordura ar trage continutul cu cativa
   pixeli fata de celelalte carduri daca vreodata dispare.

   Lista de selectoare e aceeasi in toate cele cinci reguli, litera cu litera.
   Cand se adauga o cutie noua, se adauga in toate cinci. CSS-ul nu stie sa tina
   o lista de selectoare intr-o variabila, iar un preprocesor doar ca sa scurtam
   asta ar aduce un pas de build pentru o singura tema.

   Fisierul se incarca ultimul, dupa toate celelalte, fiindca unele componente
   isi declarasera deja un hover propriu, cu violet fix. La specificitate egala
   castiga cine vine mai tarziu.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BAZA

   `border` se scrie si aici, nu doar in fisierele componentelor: cateva cutii
   n-aveau chenar deloc, doar fundal (fisele si intrebarile de pe paginile de
   certificare, cardurile de board). Asa ajung toate la acelasi punct de plecare.
   -------------------------------------------------------------------------- */
:is(
	.pmi-fapte li,
	.pmi-jaloane li,
	.pmi-contacte li,
	.pmi-marturii li,
	.pmi-echipa li,
	.pmi-roluri details,
	.pmi-faq details,
	.pmi-fisa > li,
	.pmi-404__destinatii .pmi-card,
	.pmi-lista-carduri a.pmi-card,
	.pmi-blog-acasa > li,
	.pmi-ev-card,
	.pmi-ev-detalii,
	.pmi-ev-invitati li,
	.pmi-ev-triunghi li,
	.woocommerce ul.products li.product
) {
	--ton: var(--pmi-violet-500);
	--ton-fundal: var(--pmi-violet-50);

	position: relative;
	overflow: hidden;
	border: 1px solid var(--pmi-linie);
	border-radius: var(--pmi-raza-lg);
	transition: border-color var(--pmi-tranzitie);
}

/* --------------------------------------------------------------------------
   2. ROTATIA

   Aceleasi trei culori, in aceeasi ordine, ca pe cardurile de articol si pe
   blocurile de continut. Site-ul ramane coerent intre sectiuni.

   La triunghiurile PDU rotatia nu e intamplatoare: ordinea din pagina e Ways of
   Working, Power Skills, Business Acumen, exact ordinea culorilor de mai jos,
   deci dunga fiecarui chenar iese pe culoarea categoriei lui.
   -------------------------------------------------------------------------- */
:is(
	.pmi-fapte li,
	.pmi-jaloane li,
	.pmi-contacte li,
	.pmi-marturii li,
	.pmi-echipa li,
	.pmi-roluri details,
	.pmi-faq details,
	.pmi-fisa > li,
	.pmi-404__destinatii .pmi-card,
	.pmi-lista-carduri a.pmi-card,
	.pmi-blog-acasa > li,
	.pmi-ev-card,
	.pmi-ev-detalii,
	.pmi-ev-invitati li,
	.pmi-ev-triunghi li,
	.woocommerce ul.products li.product
):nth-child(3n+1) {
	--ton: var(--pmi-aqua-300);
	--ton-fundal: var(--pmi-aqua-50);
}

:is(
	.pmi-fapte li,
	.pmi-jaloane li,
	.pmi-contacte li,
	.pmi-marturii li,
	.pmi-echipa li,
	.pmi-roluri details,
	.pmi-faq details,
	.pmi-fisa > li,
	.pmi-404__destinatii .pmi-card,
	.pmi-lista-carduri a.pmi-card,
	.pmi-blog-acasa > li,
	.pmi-ev-card,
	.pmi-ev-detalii,
	.pmi-ev-invitati li,
	.pmi-ev-triunghi li,
	.woocommerce ul.products li.product
):nth-child(3n+2) {
	--ton: var(--pmi-tangerine-300);
	--ton-fundal: var(--pmi-tangerine-50);
}

:is(
	.pmi-fapte li,
	.pmi-jaloane li,
	.pmi-contacte li,
	.pmi-marturii li,
	.pmi-echipa li,
	.pmi-roluri details,
	.pmi-faq details,
	.pmi-fisa > li,
	.pmi-404__destinatii .pmi-card,
	.pmi-lista-carduri a.pmi-card,
	.pmi-blog-acasa > li,
	.pmi-ev-card,
	.pmi-ev-detalii,
	.pmi-ev-invitati li,
	.pmi-ev-triunghi li,
	.woocommerce ul.products li.product
):nth-child(3n) {
	--ton: var(--pmi-violet-500);
	--ton-fundal: var(--pmi-violet-50);
}

/* --------------------------------------------------------------------------
   3. DUNGA DE SUS
   -------------------------------------------------------------------------- */
:is(
	.pmi-fapte li,
	.pmi-jaloane li,
	.pmi-contacte li,
	.pmi-marturii li,
	.pmi-echipa li,
	.pmi-roluri details,
	.pmi-faq details,
	.pmi-fisa > li,
	.pmi-404__destinatii .pmi-card,
	.pmi-lista-carduri a.pmi-card,
	.pmi-blog-acasa > li,
	.pmi-ev-card,
	.pmi-ev-detalii,
	.pmi-ev-invitati li,
	.pmi-ev-triunghi li,
	.woocommerce ul.products li.product
)::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 6px;
	background-color: var(--ton);
	z-index: 1;
}

/* --------------------------------------------------------------------------
   4. CHENARUL COLORAT LA MAUS

   `:focus-visible` si `:focus-within` merg alaturi de `:hover`: cine navigheaza
   cu tastatura vede acelasi lucru. Pe cutiile care nu se pot focaliza regula nu
   se aplica niciodata, deci nu strica nimic.
   -------------------------------------------------------------------------- */
:is(
	.pmi-fapte li,
	.pmi-jaloane li,
	.pmi-contacte li,
	.pmi-marturii li,
	.pmi-echipa li,
	.pmi-roluri details,
	.pmi-faq details,
	.pmi-fisa > li,
	.pmi-404__destinatii .pmi-card,
	.pmi-lista-carduri a.pmi-card,
	.pmi-blog-acasa > li,
	.pmi-ev-card,
	.pmi-ev-detalii,
	.pmi-ev-invitati li,
	.pmi-ev-triunghi li,
	.woocommerce ul.products li.product
):is(:hover, :focus-visible, :focus-within) {
	border-color: var(--ton);
}

/* --------------------------------------------------------------------------
   5. CUTIILE FARA FRATI

   Antetul evenimentului e singur in pagina, deci `nth-child` l-ar prinde mereu
   pe prima pozitie si i-ar da aqua din intamplare, nu din alegere. Primeste
   violetul de brand, explicit, dupa rotatie.
   -------------------------------------------------------------------------- */
.pmi-ev-detalii {
	--ton: var(--pmi-violet-500);
	--ton-fundal: var(--pmi-violet-50);
}

/* --------------------------------------------------------------------------
   6. CUTIILE CU CONTINUT PANA LA MARGINE

   Dunga sta peste marginea de sus a cardului. Unde primul lucru din card e o
   imagine lipita de margine, ii trebuie loc, altfel dunga taie din poza.
   -------------------------------------------------------------------------- */
.pmi-blog-acasa > li,
.woocommerce ul.products li.product {
	padding-block-start: max(var(--pmi-sp-5), 6px);
}

/* --------------------------------------------------------------------------
   7. CE RAMANE NEATINS

   Nu tot ce are chenar e un card:

   - `.pmi-cont__mesaj` si `.pmi-form__mesaj` isi iau culoarea din inteles,
     verde la reusita si rosu la eroare. O dunga aqua peste un mesaj de eroare
     ar spune exact pe dos.
   - campurile de formular, care au chenarul lor de `--pmi-neutral-300` si o
     stare de focalizare proprie.
   - celulele tabelelor din paginile juridice.
   - `.pmi-carusel__buton`, care e buton, nu cutie.
   -------------------------------------------------------------------------- */