/* Margas — stiluri suplimentare peste theme.json */

:root {
	--margas-transition: cubic-bezier(0.2, 0.7, 0.2, 1);
}

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Header sticky cu blur */
.wp-block-template-part[data-type="header"],
header.site-header,
.margas-header {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: saturate(1.2) blur(14px);
	-webkit-backdrop-filter: saturate(1.2) blur(14px);
	background: rgba(255, 255, 255, 0.72);
	border-bottom: 1px solid var(--wp--preset--color--border);
	transition: background 0.35s var(--margas-transition), box-shadow 0.35s var(--margas-transition);
}

.margas-header.is-scrolled {
	background: rgba(11, 42, 74, 0.94);
	box-shadow: 0 8px 30px rgba(11, 42, 74, 0.15);
}
.margas-header.is-scrolled .margas-nav a {
	color: var(--wp--preset--color--base-2);
}
.margas-header.is-scrolled .margas-brand img {
	filter: brightness(0) invert(1);
}

/* Brand logo */
.margas-brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}
.margas-brand img {
	display: block;
	max-height: 50px;
	width: auto;
	transition: filter 0.3s var(--margas-transition);
}

/* Nav principal — pill hover, fara underlines */
.margas-nav {
	display: flex !important;
	gap: 0.35rem !important;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.margas-nav a {
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 0.88rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.01em !important;
	color: var(--wp--preset--color--contrast) !important;
	text-decoration: none !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	padding: 0.55rem 0.9rem !important;
	border-radius: 999px !important;
	transition: background 0.2s var(--margas-transition), color 0.2s var(--margas-transition);
	white-space: nowrap;
}
.margas-nav a:hover,
.margas-nav a:focus {
	background: rgba(11, 42, 74, 0.08) !important;
	color: var(--wp--preset--color--primary) !important;
	text-decoration: none !important;
}
.margas-nav a.is-active,
.margas-nav a[aria-current="page"] {
	color: var(--wp--preset--color--accent) !important;
	background: rgba(0, 178, 169, 0.12) !important;
}

/* Header scrolled — nav alb pe fundal inchis */
.margas-header.is-scrolled .margas-nav a {
	color: rgba(255, 255, 255, 0.9) !important;
}
.margas-header.is-scrolled .margas-nav a:hover {
	background: rgba(255, 255, 255, 0.12) !important;
	color: #fff !important;
}

/* Mobile nav — scrollable row sub logo */
@media (max-width: 980px) {
	.margas-header > .wp-block-group > .wp-block-group {
		flex-wrap: wrap !important;
		gap: 0.75rem !important;
	}
	.margas-nav {
		order: 3;
		width: 100%;
		gap: 0.25rem !important;
		font-size: 0.82rem !important;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.25rem !important;
		flex-wrap: nowrap !important;
	}
	.margas-nav a {
		padding: 0.45rem 0.7rem !important;
	}
}

/* Butoane — micro-interacțiuni */
.wp-block-button__link {
	transition: transform 0.25s var(--margas-transition),
	            box-shadow 0.25s var(--margas-transition),
	            background-color 0.25s var(--margas-transition);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	box-shadow: 0 6px 20px rgba(0, 178, 169, 0.25);
}
.wp-block-button__link:hover {
	transform: translateY(-2px);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	box-shadow: 0 12px 30px rgba(11, 42, 74, 0.25);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1.5px solid currentColor;
	box-shadow: none;
}

/* Header scrolled — butonul din header isi pierde stilul default pe fundal inchis */
.margas-header.is-scrolled .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base-2);
	box-shadow: 0 6px 20px rgba(0, 178, 169, 0.35);
}

/* Carduri — utilitar reutilizabil */
.margas-card {
	background: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 20px;
	padding: clamp(1.5rem, 1rem + 1.2vw, 2.25rem);
	transition: transform 0.35s var(--margas-transition),
	            box-shadow 0.35s var(--margas-transition),
	            border-color 0.35s var(--margas-transition);
}
.margas-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--card);
	border-color: transparent;
}

/* Hero */
.margas-hero {
	color: var(--wp--preset--color--base-2);
	margin-top: 0 !important;
}
.margas-page-hero {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.margas-hero h1 {
	color: #fff;
}
.margas-hero .wp-block-cover__inner-container {
	max-width: 1100px;
}

/* Bar cu stats */
.margas-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1px;
	background: var(--wp--preset--color--border);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 24px;
	overflow: hidden;
}
.margas-stats > * {
	background: var(--wp--preset--color--base-2);
	padding: 2rem 1.5rem;
	text-align: center;
}
.margas-stats strong {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.25rem, 1.5rem + 2vw, 3.5rem);
	font-weight: 500;
	color: var(--wp--preset--color--primary);
	letter-spacing: -0.03em;
	line-height: 1;
}
.margas-stats span {
	display: block;
	margin-top: 0.5rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Eyebrow — text simplu, centrare/stanga respecta natural has-text-align-* */
p.margas-eyebrow,
.margas-eyebrow {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.15em !important;
	color: var(--wp--preset--color--accent) !important;
	line-height: 1.2 !important;
	margin-top: 0 !important;
	margin-bottom: 1rem !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
p.margas-eyebrow.has-text-align-center,
.margas-eyebrow.has-text-align-center,
.has-text-align-center.margas-eyebrow {
	text-align: center !important;
}

/* Galerie masonry ușor */
.margas-masonry {
	column-count: 3;
	column-gap: 1.25rem;
}
.margas-masonry > * {
	break-inside: avoid;
	margin-bottom: 1.25rem;
	border-radius: 18px;
	overflow: hidden;
}
@media (max-width: 900px) { .margas-masonry { column-count: 2; } }
@media (max-width: 560px) { .margas-masonry { column-count: 1; } }

/* Animatii aparitie — fallback complet (no-js, fara IO, safety timeout) */
.margas-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
	html.js .margas-reveal {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity 0.9s var(--margas-transition), transform 0.9s var(--margas-transition);
	}
	html.js .margas-reveal.is-visible {
		opacity: 1;
		transform: none;
	}
}

/* Titluri si text pentru continutul paginilor interioare — reduce scale-ul agresiv din theme.json */
main.margas-main-flush .wp-block-post-content h1,
main.margas-main-flush .wp-block-post-content .wp-block-heading.is-h1 {
	font-size: clamp(1.85rem, 1.45rem + 1.6vw, 2.5rem) !important;
	line-height: 1.15 !important;
	margin-top: 2.25rem !important;
	margin-bottom: 1rem !important;
}
main.margas-main-flush .wp-block-post-content h2 {
	font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem) !important;
	line-height: 1.2 !important;
	margin-top: 2rem !important;
	margin-bottom: 0.85rem !important;
}
main.margas-main-flush .wp-block-post-content h3 {
	font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem) !important;
	line-height: 1.25 !important;
	margin-top: 1.6rem !important;
	margin-bottom: 0.7rem !important;
}
main.margas-main-flush .wp-block-post-content h4 {
	font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem) !important;
	line-height: 1.3 !important;
	font-weight: 600 !important;
}
main.margas-main-flush .wp-block-post-content p,
main.margas-main-flush .wp-block-post-content li {
	font-size: clamp(1rem, 0.98rem + 0.2vw, 1.1rem) !important;
	line-height: 1.7 !important;
}
main.margas-main-flush .wp-block-post-content ul,
main.margas-main-flush .wp-block-post-content ol {
	padding-left: 1.5rem;
}
main.margas-main-flush .wp-block-post-content li {
	margin-bottom: 0.4rem;
}
main.margas-main-flush .wp-block-post-content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

/* Main flush — TOATE paginile (home + interior) lipite de header si footer */
main#content,
main.margas-main-flush {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
main#content > *:first-child {
	margin-top: 0 !important;
}
main#content > *:last-child {
	margin-bottom: 0 !important;
}
main.margas-main-flush > *:first-child {
	margin-top: 0 !important;
}
main.margas-main-flush > *:last-child {
	margin-bottom: 0 !important;
}
/* Cover-ul CTA final — lipit de footer, zero padding in jos pe main */
main.margas-main-flush > .wp-block-cover:last-child {
	margin-bottom: 0 !important;
}
/* Reset wrapper template-part (WP il insereaza automat) */
.wp-block-template-part {
	margin: 0 !important;
	padding: 0 !important;
}

/* Footer — lipit de CTA */
footer.margas-footer,
footer.margas-footer.wp-block-template-part {
	margin: 0 !important;
	padding: 0 !important;
	background: var(--wp--preset--color--primary) !important;
}
.margas-footer-inner {
	background: var(--wp--preset--color--primary) !important;
}

/* CTA final lipit de footer */
.margas-cta-final {
	margin-bottom: 0 !important;
}

/* Dropdown nav */
.margas-nav-item {
	position: relative;
}
.margas-nav-item > a::after {
	content: "▾";
	display: inline-block;
	margin-left: 0.35rem;
	font-size: 0.7em;
	transform: translateY(-1px);
	opacity: 0.7;
}
.margas-nav-submenu {
	position: absolute;
	top: calc(100% + 0.35rem);
	left: 0;
	min-width: 260px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 20px 50px rgba(11, 42, 74, 0.18);
	padding: 0.6rem;
	list-style: none;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s var(--margas-transition), transform 0.2s var(--margas-transition), visibility 0s 0.2s;
	z-index: 200;
}
.margas-nav-item:hover > .margas-nav-submenu,
.margas-nav-item:focus-within > .margas-nav-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.2s var(--margas-transition), transform 0.2s var(--margas-transition);
}
.margas-nav-submenu li {
	list-style: none;
	margin: 0;
}
.margas-nav-submenu a {
	display: block !important;
	padding: 0.65rem 0.95rem !important;
	border-radius: 10px !important;
	font-size: 0.88rem !important;
	color: var(--wp--preset--color--contrast) !important;
	white-space: normal !important;
	line-height: 1.35 !important;
	text-decoration: none !important;
}
.margas-nav-submenu a:hover {
	background: rgba(0, 178, 169, 0.1) !important;
	color: var(--wp--preset--color--primary) !important;
}
.margas-header.is-scrolled .margas-nav-submenu {
	background: #fff;
}
.margas-header.is-scrolled .margas-nav-submenu a {
	color: var(--wp--preset--color--contrast) !important;
}
@media (max-width: 980px) {
	.margas-nav-item > a::after { display: none; }
	.margas-nav-submenu { display: none !important; }
}

/* Skip to content */
.skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	background: var(--wp--preset--color--contrast);
	color: #fff;
	padding: 0.75rem 1.25rem;
	text-decoration: none;
	font-weight: 600;
	z-index: 1000;
}
.skip-link:focus {
	left: 1rem;
	top: 1rem;
}

/* Stats bar — pe mobil renuntam la overlap negativ */
@media (max-width: 781px) {
	.margas-reveal > .margas-stats {
		margin-top: 0 !important;
	}
}

/* Masonry — 4 coloane pe ecrane foarte mari */
@media (min-width: 1400px) { .margas-masonry { column-count: 4; } }

/* Parteneri — grayscale uniform, hover la culoare */
.margas-partner-logo img {
	filter: grayscale(100%);
	opacity: 0.6;
	transition: filter 0.3s var(--margas-transition), opacity 0.3s var(--margas-transition);
}
.margas-partner-logo:hover img {
	filter: grayscale(0);
	opacity: 1;
}

/* Calculator */
.margas-calculator {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 2.5rem;
	background: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 24px;
	padding: clamp(1.5rem, 1.2rem + 1vw, 2.5rem);
	box-shadow: var(--wp--preset--shadow--soft);
	max-width: 1100px;
	margin: 2rem auto;
}
@media (max-width: 860px) { .margas-calculator { grid-template-columns: 1fr; } }
.margas-calc__row { margin-bottom: 1.5rem; }
.margas-calc__row > label {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--accent);
	margin-bottom: 0.6rem;
}
.margas-calc__row input[type="number"] {
	width: 100%;
	padding: 0.9rem 1rem;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: 12px;
	font-size: 1.1rem;
	font-weight: 500;
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	transition: border-color 0.2s var(--margas-transition);
}
.margas-calc__row input[type="number"]:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	background: #fff;
}
.margas-calc__hint {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
}
.margas-calc__pills {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 0.6rem;
}
.margas-calc__pill {
	position: relative;
	cursor: pointer;
}
.margas-calc__pill input { position: absolute; opacity: 0; pointer-events: none; }
.margas-calc__pill > span {
	display: block;
	padding: 0.9rem 1rem;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	transition: all 0.2s var(--margas-transition);
	text-align: left;
}
.margas-calc__pill > span strong {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}
.margas-calc__pill > span small {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted);
}
.margas-calc__pill input:checked + span {
	border-color: var(--wp--preset--color--accent);
	background: rgba(0, 178, 169, 0.08);
	box-shadow: 0 4px 14px rgba(0, 178, 169, 0.18);
}
.margas-calc__pill input:checked + span strong {
	color: var(--wp--preset--color--primary);
}
.margas-calc__checks {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.margas-calc__check {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.7rem 0.9rem;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: var(--wp--preset--color--base);
	font-size: 0.92rem;
	cursor: pointer;
	transition: border-color 0.2s var(--margas-transition), background 0.2s var(--margas-transition);
}
.margas-calc__check:hover { border-color: var(--wp--preset--color--accent); }
.margas-calc__check input { accent-color: var(--wp--preset--color--accent); width: 18px; height: 18px; }
.margas-calc__check input:checked ~ * { color: var(--wp--preset--color--primary); font-weight: 600; }

/* Result panel */
.margas-calc__result {
	background: var(--wp--preset--gradient--panel);
	color: #fff;
	border-radius: 20px;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.margas-calc__label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #00B2A9;
	margin-bottom: 0.5rem;
}
.margas-calc__price {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.5rem, 1.8rem + 2.5vw, 3.5rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.03em;
	color: #fff;
	margin-bottom: 1.25rem;
}
.margas-calc__price small {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.45em;
	font-weight: 500;
	letter-spacing: 0.05em;
	color: #a9b7ca;
}
.margas-calc__breakdown { margin-bottom: 1rem; }
.margas-calc__line {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0;
	border-top: 1px solid rgba(255,255,255,0.1);
	font-size: 0.85rem;
}
.margas-calc__line:first-child { border-top: 0; }
.margas-calc__line span { color: #a9b7ca; flex: 1; }
.margas-calc__line strong { color: #fff; font-weight: 600; white-space: nowrap; }
.margas-calc__note {
	font-size: 0.78rem;
	color: #8a97a8;
	line-height: 1.5;
	margin: 0.75rem 0 1rem;
}
.margas-calc__cta {
	display: inline-block;
	background: var(--wp--preset--color--accent);
	color: #fff !important;
	padding: 0.9rem 1.5rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.92rem;
	text-decoration: none !important;
	text-align: center;
	transition: transform 0.2s var(--margas-transition), box-shadow 0.2s var(--margas-transition);
}
.margas-calc__cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(0, 178, 169, 0.35);
}

/* Footer — background primary ca sa continue vizual din CTA */
footer.site-footer,
.margas-footer {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base);
}
.margas-footer a,
.margas-footer a:link,
.margas-footer a:visited {
	color: var(--wp--preset--color--base) !important;
	text-decoration: none !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
	background-image: none !important;
}
.margas-footer a:hover,
.margas-footer a:focus {
	color: var(--wp--preset--color--accent) !important;
	text-decoration: none !important;
}
.margas-footer ul { list-style: none; padding: 0; margin: 0; }
.margas-footer ul li { padding: 0.25rem 0; }
.margas-brand--footer img { max-height: 54px; filter: brightness(0) invert(1); }