/* =========================================================================
   Mega Menu by SWEB
   Toate culorile folosesc variabilele globale Elementor (pe :root), cu
   fallback hardcodat ca pluginul să arate bine și fără Elementor.
   Namespace: .smm / .smm-card  -> nu intră în coliziune cu nimic.
   ========================================================================= */

.smm{
	--smm-offset: 12px;
	--smm-cols: 4;
	--smm-width: 880px;
	position: relative;
	display: inline-block;
	font-family: Inter, sans-serif;
}
.smm *,
.smm *::before,
.smm *::after{ box-sizing: border-box; }

/* ---------- Butonul "Categorii" (scoped sub .smm ca tema să nu-l suprascrie) ---------- */
.smm .smm__toggle{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 16px;
	border: 0;
	border-radius: 8px;
	background: var(--white-bg, #FAFCFF) !important;
	color: #056E9B !important;
	font-family: Inter, sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none !important;
	text-decoration: none !important;
}
/* toate stările: aceeași culoare/bg (tema nu mai poate suprascrie), doar weight 500 -> 600 */
.smm .smm__toggle:hover,
.smm .smm__toggle:focus,
.smm .smm__toggle:focus-visible,
.smm .smm__toggle:active,
.smm.is-open .smm__toggle{
	background: var(--white-bg, #FAFCFF) !important;
	color: #056E9B !important;
	font-weight: 600;
	outline: none !important;
}
.smm .smm__toggle-icon{ display: inline-flex; width: 20px; height: 20px; }
.smm .smm__toggle-icon svg{ width: 100%; height: 100%; }
.smm .smm__toggle-caret{ display: inline-flex; width: 16px; height: 16px; transition: transform .2s ease; }
.smm .smm__toggle-caret svg{ width: 100%; height: 100%; }
.smm.is-open .smm__toggle-caret{ transform: rotate(180deg); }

/* ---------- Panoul ---------- */
.smm__panel{
	position: absolute;
	top: calc(100% + var(--smm-offset));
	left: 0;
	width: var(--smm-width);
	max-width: 92vw;
	padding: 16px;
	background: var(--pure-white, #ffffff);
	border: 1px solid var(--light-gray, #C4D2D7);
	border-radius: 12px;
	box-shadow: 0 18px 50px rgba(10, 67, 92, .18);
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.smm.is-open > .smm__panel{
	opacity: 1;
	visibility: visible;
	transform: none;
}
/* Punte invizibilă peste spațiul buton-panou, ca hover-ul să nu „cadă" în gol */
.smm__panel::before{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(-1 * var(--smm-offset));
	height: var(--smm-offset);
}

/* ---------- View-uri (nivel 1 / nivel 2) ---------- */
.smm__view{ display: none; }
.smm__view.is-active{ display: block; animation: smm-fade .18s ease; }
@keyframes smm-fade{ from{ opacity: 0; transform: translateY(4px);} to{ opacity: 1; transform: none; } }

.smm__panel .smm__back{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	background: transparent !important;
	color: var(--green-text-fill, #0A435C) !important;
	font-family: Inter, sans-serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 1;
	letter-spacing: -0.02em;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none !important;
	text-decoration: none !important;
}
/* hover/activ: bg rămâne transparent, text + svg (currentColor) rămân verzi (tema nu mai suprascrie) */
.smm__panel .smm__back:hover,
.smm__panel .smm__back:focus,
.smm__panel .smm__back:focus-visible,
.smm__panel .smm__back:active{
	background: transparent !important;
	color: var(--green, #239278) !important;   /* verde deschis pe hover/activ */
	outline: none !important;
}
.smm__panel .smm__back-icon{ display: inline-flex; width: 28px; height: 28px; }
.smm__panel .smm__back-icon svg{ width: 100%; height: 100%; }

/* ---------- Grila de carduri ---------- */
.smm__grid{
	display: grid;
	grid-template-columns: repeat(var(--smm-cols), 1fr);
	/* gap identic cu grila de categorii de pe homepage (computed: 20px) */
	gap: 20px;
}
@media (max-width: 900px){
	.smm__grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Cardul (copie 1:1 a cardului de pe homepage) ---------- */
.smm-card{
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0;
	border: 1px solid var(--light-gray, #C4D2D7);
	border-radius: 8px;
	overflow: hidden;
	/* gradientul barei = fundalul cardului (ca în original) */
	background: linear-gradient(90deg, #14A5A9 0%, #013465 100%);
	text-decoration: none;
	text-align: left;
	font: inherit;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	position: relative;
}
/* Hover = fundalul devine verde, cu fade lin 300ms. Fără ridicare/umbră.
   (gradient -> culoare nu se poate anima direct, deci folosim un strat verde cu opacity) */
.smm-card::before{
	content: "";
	position: absolute;
	inset: 0;
	background: var(--green, #239278);
	opacity: 0;
	transition: opacity 300ms ease;
	z-index: 0;
	pointer-events: none;
}
.smm-card > *{ position: relative; z-index: 1; }
.smm__panel .smm-card:hover::before,
.smm__panel .smm-card:focus-visible::before{ opacity: 1; }
.smm-card:focus-visible{ outline: none; }

.smm-card__img{
	display: block;
	width: 100%;
	aspect-ratio: 321 / 246;   /* identic cu imaginile cardurilor de pe homepage (~1.30) */
	object-fit: cover;
}
.smm-card__img--ph{
	background: radial-gradient(120% 120% at 30% 20%, var(--medium-cyan, #D9F3FF), var(--light-gray, #C4D2D7));
}

.smm-card__bar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 2px 2px 2px 16px;
}
.smm-card__title{
	font-family: Inter, sans-serif;
	font-weight: 500;
	font-size: clamp(0.875rem, 0.8333rem + 0.1852vw, 1rem);
	color: var(--white, #FBFCFF);
	letter-spacing: 0.02em;
	line-height: 1.2;
}
/* Săgeata = SVG-ul pus direct (cutia albă e în SVG). Dimensionat ca pe homepage. */
.smm-card__arrow{
	flex: 0 0 auto;
	display: block;
	width: clamp(2rem, 1.75rem + 1.1111vw, 2.75rem);
	height: auto;
	line-height: 0;
}

/* Wrapper interior: în mod normal e 100%; în mod fullwidth se boxează. */
.smm__inner{ width: 100%; }

/* =========================================================================
   MOD FULLWIDTH — overlay de sticlă pe toată pagina, conținut boxat la 1344px.
   Panoul e mutat din JS la <body> (clasa .smm__panel--full) ca backdrop-filter
   să poată estompa TOATĂ pagina (altfel e blocat de stacking-context-ul header-ului).
   Efect din Figma: overlay colorat #FAFCFF la 90% + blur 24px peste pagina din spate.
   ========================================================================= */
.smm__panel--full{
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	max-width: none;
	bottom: 0;                 /* se întinde până jos => estompează toată pagina */
	/* top setat din JS = exact sub header */
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	z-index: 9999;
	background: rgba(250, 252, 255, 0.9);            /* overlay colorat: #FAFCFF la 90% */
	-webkit-backdrop-filter: blur(24px);             /* blur-ul de sub overlay */
	backdrop-filter: blur(24px);
	overflow-y: auto;
}
.smm__panel--full.is-open{ opacity: 1; visibility: visible; transform: none; }
.smm__panel--full::before{ display: none; }          /* puntea nu mai e necesară */
.smm__panel--full .smm__inner{
	/* grila e EXACT cât pe homepage (1344px), fără padding lateral care să o îngusteze;
	   pe ecrane mai mici lasă 24px gutter de fiecare parte */
	width: min(var(--smm-inner, 1344px), 100% - 48px);
	max-width: none;
	margin-inline: auto;
	padding: clamp(20px, 2.5vw, 32px) 0 40px;
}
/* fallback dacă browserul nu suportă backdrop-filter: overlay aproape opac */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
	.smm__panel--full{ background: rgba(250, 252, 255, 0.97); }
}

/* Pe touch / ecrane mici: panoul nu iese din viewport.
   (Versiunea off-canvas dedicată mobile vine ca shortcode separat.) */
@media (max-width: 640px){
	.smm:not(.smm--full) .smm__panel{
		left: 0;
		width: 92vw;
	}
}


/* ---------- Grila de categorii standalone: [sweb_categories] ---------- */
.smm-cats .smm-card:hover::before,
.smm-cats .smm-card:focus-visible::before{ opacity: 1; }