/* ==========================================================================
   pmi.ro — header, navigație, mega-meniu, footer
   --------------------------------------------------------------------------
   Se încarcă după tokens.css și folosește exclusiv variabilele de acolo.
   Nicio culoare și nicio dimensiune scrisă direct.

   Structura vine din GeneratePress + modulul Secondary Nav (bara utilitară).
   Meniurile rămân editabile normal din Aspect → Meniuri — de asta nu am
   construit header-ul ca bloc static: un meniu în cod e un meniu pe care
   nimeni nu-l mai actualizează.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HEADER — logo stânga, utilitare dreapta, pe același rând
   Ca pe pmi.org. Linkurile utilitare stau în zona de widget-uri „Antet"
   (un widget de meniu care afișează meniul „Utilitar"), nu într-o bară
   separată deasupra: acolo ocupau un rând întreg pentru trei linkuri.
   -------------------------------------------------------------------------- */
.site-header {
	background-color: var(--pmi-fundal);
	border-block-end: 1px solid var(--pmi-linie);
}

.site-header .inside-header {
	max-width: var(--pmi-lat-continut);
	margin-inline: auto;
	padding: var(--pmi-sp-4) var(--pmi-sp-5);
	display: flex;
	align-items: center;
	gap: var(--pmi-sp-5);
}

.site-logo {
	margin: 0;
	flex: 0 0 auto;
}

.site-logo img {
	display: block;
	height: auto;
}

/* Zona de widget-uri din antet: împinsă la dreapta, pe același rând. */
.site-header .header-widget {
	margin-inline-start: auto;
	flex: 0 0 auto;
	padding: 0;
}

.site-header .header-widget .widget {
	margin: 0;
	padding: 0;
}

.site-header .header-widget ul {
	display: flex;
	align-items: center;
	gap: var(--pmi-sp-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header .header-widget ul li {
	margin: 0;
}

.site-header .header-widget ul li a {
	display: block;
	padding: var(--pmi-sp-2) var(--pmi-sp-3);
	font-size: var(--pmi-text-2xs);
	line-height: var(--pmi-lh-2xs);
	font-weight: var(--pmi-greutate-accent);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pmi-text-secundar);
	text-decoration: none;
	border-radius: var(--pmi-raza-plin);
	transition: color var(--pmi-tranzitie), background-color var(--pmi-tranzitie);
}

.site-header .header-widget ul li a:hover,
.site-header .header-widget ul li a:focus-visible {
	color: var(--pmi-ink);
	background-color: var(--pmi-fundal-alternativ);
}

/* Ultimul element — „Autentificare" — primește tratament de buton, ca
   „Register" pe pmi.org. E acțiunea pe care o vrem apăsată. */
.site-header .header-widget ul li:last-child a {
	color: var(--pmi-violet-500);
	border: 2px solid var(--pmi-violet-500);
	padding-inline: var(--pmi-sp-4);
	margin-inline-start: var(--pmi-sp-2);
}

.site-header .header-widget ul li:last-child a:hover,
.site-header .header-widget ul li:last-child a:focus-visible {
	background-color: var(--pmi-violet-500);
	color: var(--pmi-alb);
}

@media (max-width: 768px) {
	.site-header .inside-header {
		flex-wrap: wrap;
		justify-content: center;
	}

	.site-header .header-widget {
		margin-inline-start: 0;
		inline-size: 100%;
	}

	.site-header .header-widget ul {
		justify-content: center;
		flex-wrap: wrap;
	}
}

/* --------------------------------------------------------------------------
   3. NAVIGAȚIA PRINCIPALĂ
   -------------------------------------------------------------------------- */
.main-navigation {
	background-color: var(--pmi-fundal);
	border-block: 1px solid var(--pmi-linie);
}

.main-navigation .inside-navigation {
	max-width: var(--pmi-lat-continut);
	margin-inline: auto;
	padding-inline: var(--pmi-sp-5);
}

.main-navigation .main-nav > ul > li > a {
	padding: var(--pmi-sp-4) var(--pmi-sp-4);
	font-size: var(--pmi-text-sm);
	line-height: var(--pmi-lh-sm);
	font-weight: var(--pmi-greutate-accent);
	color: var(--pmi-ink);
	background: none;
	position: relative;
}

/* Sublinierea de hover crește din centru. Fără mișcare de layout —
   un border care apare la hover împinge textul cu un pixel și se vede. */
.main-navigation .main-nav > ul > li > a::after {
	content: "";
	position: absolute;
	inset-inline: var(--pmi-sp-4);
	inset-block-end: 0;
	block-size: 3px;
	background-color: var(--pmi-violet-500);
	transform: scaleX(0);
	transition: transform var(--pmi-tranzitie);
}

.main-navigation .main-nav > ul > li:hover > a::after,
.main-navigation .main-nav > ul > li:focus-within > a::after,
.main-navigation .main-nav > ul > li[class*="current-menu"] > a::after {
	transform: scaleX(1);
}

.main-navigation .main-nav > ul > li[class*="current-menu"] > a {
	color: var(--pmi-violet-500);
}

/* --------------------------------------------------------------------------
   4. MEGA-MENIU
   Se aplică doar pe elementul de nivel 1 care are clasa `mega`, adăugată
   manual în Aspect → Meniuri → Clase CSS. Restul submeniurilor rămân
   dropdown-uri normale.

   Construit din structura de meniu pe trei niveluri: nivelul 2 devine coloană
   (titlu de grup), nivelul 3 devine lista de linkuri din coloană.
   -------------------------------------------------------------------------- */
.main-navigation .main-nav ul li.mega {
	position: static;
}

.main-navigation .main-nav ul li.mega > ul.sub-menu {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: var(--pmi-sp-4) var(--pmi-sp-6);

	inset-inline: 0;
	inline-size: 100%;
	max-inline-size: none;

	/* Blocul de referință e `.inside-navigation`, care e deja limitat la
	   --pmi-lat-continut. Deci padding simplu: orice calcul cu `100vw` aici
	   se dublează cu limitarea containerului și strânge grila la o coloană. */
	padding: var(--pmi-sp-7) var(--pmi-sp-5);
	background-color: var(--pmi-alb);
	border-block-end: 1px solid var(--pmi-linie);
	box-shadow: none;
}

/* Coloanele: nivelul 2 */
.main-navigation .main-nav ul li.mega > ul.sub-menu > li {
	inline-size: auto;
	display: flex;
	flex-direction: column;
}

/* Titlul de coloană. Antetele de grup sunt linkuri către `#`, deci le scoatem
   din ordinea de tabulare — altfel utilizatorul de tastatură parcurge cinci
   ținte care nu duc nicăieri. */
.main-navigation .main-nav ul li.mega > ul.sub-menu > li > a {
	padding: 0 0 var(--pmi-sp-3);
	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-text-secundar);
	background: none;
	cursor: default;
	pointer-events: none;
	border-block-end: 1px solid var(--pmi-linie);
	margin-block-end: var(--pmi-sp-3);
}

/* Ultimul element de nivel 2 e „Parteneri autorizați" — un link real, nu un
   antet de grup. Îl recunoaștem după faptul că nu are submeniu. */
.main-navigation .main-nav ul li.mega > ul.sub-menu > li:not(.menu-item-has-children) > a {
	pointer-events: auto;
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
	font-size: var(--pmi-text-sm);
	color: var(--pmi-violet-500);
	border-block-end: 0;
}

/* Linkurile din coloană: nivelul 3 */
.main-navigation .main-nav ul li.mega > ul.sub-menu ul.sub-menu {
	position: static;
	display: flex;
	flex-direction: column;
	gap: var(--pmi-sp-1);
	inline-size: auto;
	opacity: 1;
	visibility: visible;
	background: none;
	box-shadow: none;
	/* Regula generală de dropdown de mai jos pune chenar și rotunjire pe orice
	   `ul ul`. În mega-meniu asta desenează cutii în jurul fiecărei coloane. */
	border: 0;
	border-radius: 0;
	padding: 0;
	transform: none;
	pointer-events: auto;
	height: auto;
}

.main-navigation .main-nav ul li.mega > ul.sub-menu ul.sub-menu > li > a {
	padding: var(--pmi-sp-1) 0;
	font-size: var(--pmi-text-sm);
	line-height: var(--pmi-lh-sm);
	font-weight: var(--pmi-greutate-text);
	color: var(--pmi-ink);
	background: none;
}

.main-navigation .main-nav ul li.mega > ul.sub-menu ul.sub-menu > li > a:hover,
.main-navigation .main-nav ul li.mega > ul.sub-menu ul.sub-menu > li > a:focus-visible {
	color: var(--pmi-violet-500);
}

/* Săgeata de dropdown n-are sens pe antetele de grup din mega-meniu. */
.main-navigation .main-nav ul li.mega > ul.sub-menu .dropdown-menu-toggle {
	display: none;
}

/* --------------------------------------------------------------------------
   5. DROPDOWN-URI NORMALE (celelalte patru poziții)
   -------------------------------------------------------------------------- */
.main-navigation .main-nav ul ul {
	background-color: var(--pmi-alb);
	border: 1px solid var(--pmi-linie);
	border-radius: 0 0 var(--pmi-raza-md) var(--pmi-raza-md);
	padding-block: var(--pmi-sp-2);
	box-shadow: none;
}

.main-navigation .main-nav ul li:not(.mega) ul li a {
	padding: var(--pmi-sp-2) var(--pmi-sp-4);
	font-size: var(--pmi-text-sm);
	font-weight: var(--pmi-greutate-text);
	color: var(--pmi-ink);
	background: none;
}

.main-navigation .main-nav ul li:not(.mega) ul li a:hover,
.main-navigation .main-nav ul li:not(.mega) ul li a:focus-visible {
	color: var(--pmi-violet-500);
	background-color: var(--pmi-neutral-50);
}

/* --------------------------------------------------------------------------
   6. MOBIL
   Sub 1024 px mega-meniul devine o listă verticală obișnuită — cinci coloane
   nu au unde încăpea, iar încercarea de a le păstra e sursa clasică de meniuri
   care nu se pot închide pe telefon.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.main-navigation .main-nav ul li.mega > ul.sub-menu {
		display: block;
		padding: 0;
		border-block-end: 0;
	}

	.main-navigation .main-nav ul li.mega > ul.sub-menu > li > a {
		padding: var(--pmi-sp-3) var(--pmi-sp-5);
		margin-block-end: 0;
		border-block-end: 0;
	}

	.main-navigation .main-nav ul li.mega > ul.sub-menu ul.sub-menu > li > a {
		padding: var(--pmi-sp-2) var(--pmi-sp-5) var(--pmi-sp-2) var(--pmi-sp-8);
	}

	.secondary-navigation .inside-navigation {
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   7. CONȚINUT
   GeneratePress pune tot conținutul într-o cutie albă. Pe pmi.org fundalul e
   cremul, iar secțiunile își aduc propriul fundal — deci containerul rămâne
   transparent, altfel cremul nu se vede nicăieri în afară de margini.
   -------------------------------------------------------------------------- */
/* Lățimea containerului o deține tokenul, nu setarea din GeneratePress.
   GP o scrie inline corect, dar `main.min.css` o suprascrie pe ordine cu 1200 px
   — iar o setare care există în două locuri și nu se aplică e mai rea decât una
   care nu există. Sursa de adevăr rămâne `--pmi-lat-continut`. */
.grid-container {
	max-width: var(--pmi-lat-continut);
}

/* Atenție: clasa `.site` e pusă de GeneratePress pe mai multe elemente, nu doar
   pe wrapper-ul principal — inclusiv pe `.footer-widgets`. O regulă scrisă doar
   pe `.site.container` lasă footer-ul cu fundal alb, iar textul alb de acolo
   devine invizibil. De asta le enumerăm pe toate. */
.site.container,
.site.footer-widgets,
.separate-containers .inside-article,
.one-container .site-content {
	background-color: transparent;
}

.inside-article > .entry-content > :where(p, ul, ol, h2, h3, h4, blockquote) {
	max-width: var(--pmi-lat-text);
}

/* --------------------------------------------------------------------------
   7b. CĂUTAREA DIN NAVIGAȚIE
   Inclusă în GeneratePress — nu e nevoie de plugin. Se deschide la click pe
   lupă. Ascunsă până atunci: altfel câmpul stă permanent deschis în bara de
   navigație și arată a element rătăcit.
   -------------------------------------------------------------------------- */
.navigation-search {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	block-size: 100%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--pmi-tranzitie);
	z-index: 20;
}

/* GeneratePress pune `nav-search-active` PE formular, nu pe un părinte — deci
   selectorul trebuie să fie pe același element, nu descendent. Cu `.x .y` regula
   nu se potrivește niciodată, câmpul rămâne ascuns și clickul pe lupă pare mort. */
.navigation-search.nav-search-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.navigation-search input[type="search"],
.navigation-search input[type="search"]:focus {
	block-size: 100%;
	inline-size: 100%;
	padding-inline: var(--pmi-sp-5);
	background-color: var(--pmi-alb);
	border: 0;
	border-block-end: 2px solid var(--pmi-violet-500);
	border-radius: 0;
	font-size: var(--pmi-text-md);
	color: var(--pmi-text);
	outline: none;
}

/* Lupa se aliniază la dreapta, ca pe pmi.org. */
.main-navigation .menu-bar-items {
	margin-inline-start: auto;
}

.main-navigation .menu-bar-item > a {
	padding-inline: var(--pmi-sp-4);
	color: var(--pmi-ink);
}

.main-navigation .menu-bar-item > a:hover {
	color: var(--pmi-violet-500);
}

/* --------------------------------------------------------------------------
   8. MENIU LIPICIOS
   Modulul Menu Plus face funcționalitatea; aici doar aspectul.
   -------------------------------------------------------------------------- */
.main-navigation.is_stuck,
.main-navigation.sticky-enabled.is_stuck {
	background-color: var(--pmi-fundal);
	border-block-start: 0;
	box-shadow: 0 1px 12px rgb(32 15 59 / 0.08);
}

/* Ancorele din pagină nu trebuie să ajungă sub bara lipicioasă. */
:target {
	scroll-margin-block-start: 6rem;
}

/* --------------------------------------------------------------------------
   9. BUTONUL „ÎNAPOI SUS"
   -------------------------------------------------------------------------- */
.generate-back-to-top {
	inset-block-end: var(--pmi-sp-5);
	inset-inline-end: var(--pmi-sp-5);
	inline-size: 48px;
	block-size: 48px;
	line-height: 48px;
	border-radius: var(--pmi-raza-plin);
	background-color: var(--pmi-ink);
	color: var(--pmi-alb);
	font-size: var(--pmi-text-md);
	box-shadow: 0 2px 12px rgb(32 15 59 / 0.2);
	transition: background-color var(--pmi-tranzitie), opacity var(--pmi-tranzitie);
}

.generate-back-to-top:hover,
.generate-back-to-top:focus-visible {
	background-color: var(--pmi-violet-500);
	color: var(--pmi-alb);
}

/* --------------------------------------------------------------------------
   10. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
	background-color: var(--pmi-fundal-inchis);
	color: var(--pmi-text-pe-inchis);
}

/* GeneratePress pune 40 px de padding pe containerul de subsol și compensează
   cu o margine negativă de 40 px pe interior. Cele două se anulează pe
   orizontală, dar pe verticală padding-ul se adună peste al nostru, iar marginea
   negativă scoate prima coloană cu 40 px în afara coloanei de conținut. */
.site-footer .footer-widgets-container {
	padding-block: 0;
}

/* 40 px, cât are și interiorul articolului: coloanele din subsol trebuie să
   înceapă exact sub textul de deasupra lor, altfel se vede o treaptă. */
.site-footer .inside-footer-widgets,
.site-footer .inside-site-info {
	max-width: var(--pmi-lat-continut);
	margin-inline: auto;
	padding-inline: var(--pmi-sp-7);
}

/* Subsolul e navigație de rezervă, nu o secțiune de sine stătătoare. Cu 64 px
   sus și jos ocupa mai mult decât ultima secțiune reală a paginii. */
.site-footer .footer-widgets {
	padding-block: var(--pmi-sp-7);
}

/* GeneratePress pune un `padding-bottom` pe fiecare widget, gândit pentru
   subsoluri în coloane flotante. Într-o grilă cu `gap` propriu, el doar adaugă
   spațiu gol sub ultimul rând. */
.site-footer .footer-widgets .widget {
	padding: 0;
	margin: 0;
}

.site-footer .footer-widgets .widget > :last-child {
	margin-block-end: 0;
}

.site-footer .widget-title {
	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-neutral-300);
	margin-block: 0 var(--pmi-sp-4);
}

.site-footer :where(p, li, .widget) {
	font-size: var(--pmi-text-xs);
	line-height: var(--pmi-lh-xs);
	color: var(--pmi-neutral-200);
}

.site-footer a {
	color: var(--pmi-text-pe-inchis);
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: var(--pmi-link-pe-inchis);
	text-decoration: underline;
}

.site-footer .footer-widgets-container .inside-footer-widgets {
	display: grid;
	grid-template-columns: 1.7fr 1fr 1fr 1.4fr;
	gap: var(--pmi-sp-6) var(--pmi-sp-7);
	align-items: start;
}

/* Prima coloană — descrierea și rețelele sociale */
.pmi-footer-intro {
	max-width: 40ch;
}

/* Selectorul e lung intenționat: regula de mai jos care face listele din footer
   coloane verticale e mai specifică decât `.pmi-social` simplu și ar așeza
   iconițele una sub alta. */
.site-footer .footer-widgets .widget ul.pmi-social {
	display: flex;
	flex-direction: row;
	gap: var(--pmi-sp-2);
	list-style: none;
	margin: var(--pmi-sp-4) 0 0;
	padding: 0;
}

.pmi-social li {
	margin: 0;
}

.pmi-social a {
	display: grid;
	place-items: center;
	inline-size: 36px;
	block-size: 36px;
	border-radius: var(--pmi-raza-plin);
	background-color: rgb(255 255 255 / 0.08);
	color: var(--pmi-text-pe-inchis);
	transition: background-color var(--pmi-tranzitie), color var(--pmi-tranzitie);
}

.pmi-social a:hover,
.pmi-social a:focus-visible {
	background-color: var(--pmi-alb);
	color: var(--pmi-ink);
	text-decoration: none;
}

/* Iconițele vin din CSS, ca măști, nu ca `<svg>` în widget: WordPress curăță
   marcajul din widget-ul „HTML personalizat" prin `wp_kses_post()`, care scoate
   `<svg>` cu totul. Masca lasă și culoarea pe `currentColor`, deci se inversează
   corect la hover. */
.pmi-social a::before {
	content: "";
	inline-size: 20px;
	block-size: 20px;
	background-color: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.pmi-social a[href*="linkedin"] {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3zM9 9h3.8v1.7h.05c.53-1 1.83-2.05 3.75-2.05C20.3 8.65 21 11 21 14.1V21h-4v-6.1c0-1.45-.03-3.3-2-3.3-2 0-2.3 1.57-2.3 3.2V21H9z'/%3E%3C/svg%3E");
}

.pmi-social a[href*="facebook"] {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5H16.7V3.6c-.29-.04-1.28-.13-2.44-.13-2.4 0-4.06 1.47-4.06 4.17V9.9H7.5V13h2.7v8z'/%3E%3C/svg%3E");
}

.pmi-social a[href*="youtube"] {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.6 7.2s-.2-1.4-.8-2c-.75-.8-1.6-.8-2-.85C16 4.2 12 4.2 12 4.2s-4 0-6.8.2c-.4.05-1.25.05-2 .85-.6.6-.8 2-.8 2S2.2 8.8 2.2 10.5v1.6c0 1.65.2 3.3.2 3.3s.2 1.4.8 2c.75.8 1.75.77 2.2.85 1.6.15 6.8.2 6.8.2s4 0 6.8-.21c.4-.05 1.25-.05 2-.85.6-.6.8-2 .8-2s.2-1.65.2-3.3v-1.6c0-1.65-.2-3.3-.2-3.3zM9.9 14.1V8.4l5.15 2.86z'/%3E%3C/svg%3E");
}

.pmi-footer-nota {
	color: var(--pmi-neutral-400);
}

/* Listele de linkuri din coloane */
.site-footer .footer-widgets .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--pmi-sp-2);
}

.site-footer .footer-widgets .widget ul li {
	margin: 0;
}

/* Bara de jos: legal la stânga, copyright la dreapta */
.site-info {
	background-color: var(--pmi-violet-950);
	border-block-start: 1px solid rgb(255 255 255 / 0.1);
	padding-block: var(--pmi-sp-4);
	font-size: var(--pmi-text-2xs);
	color: var(--pmi-neutral-300);
}

.site-info .inside-site-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pmi-sp-4);
}

.site-info .footer-bar ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pmi-sp-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-info .footer-bar ul li {
	margin: 0;
}

.site-info .footer-bar a {
	font-size: var(--pmi-text-2xs);
	color: var(--pmi-neutral-300);
}

.site-info .footer-bar a:hover {
	color: var(--pmi-alb);
}

@media (max-width: 1024px) {
	.site-footer .footer-widgets-container .inside-footer-widgets {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 768px) {
	.site-footer .inside-footer-widgets,
	.site-footer .inside-site-info {
		padding-inline: var(--pmi-sp-5);
	}
}

@media (max-width: 640px) {
	.site-footer .footer-widgets-container .inside-footer-widgets {
		grid-template-columns: 1fr;
		gap: var(--pmi-sp-6);
	}

	.site-info .inside-site-info {
		justify-content: center;
		text-align: center;
	}
}