/* =========================================================================
   Itara Solutions — main.css
   Variabile CSS, reset, tipografie, layout, componente de bază, butoane.
   Mobile-first. Fără framework-uri, doar Grid + Flexbox.
   ========================================================================= */


/* ---------- 1. Variabile globale (design tokens) ---------- */
:root {
	/* Brand */
	--c-emerald: #059669;
	--c-emerald-dark: #065F46;
	--c-medium-green: #34D399;
	--c-mint-light: #6EE7B7;
	--c-mint-tint: #ECFDF5;

	/* Backgrounds */
	--c-dark: #022C22;                 /* Forest Dark */
	--c-dark-2: #043730;               /* variantă pt carduri pe dark */
	--c-white: #FFFFFF;
	--c-light-bg: #F9FAFB;             /* alt light BG */

	/* Text pe light */
	--c-title-light: #111827;
	--c-body-light: #374151;
	--c-muted-light: #6B7280;

	/* Text pe dark */
	--c-title-dark: #FFFFFF;
	--c-body-dark: #ECFDF5;
	--c-muted-dark: #6EE7B7;

	/* CTA Gold */
	--c-gold: #D97706;
	--c-amber: #F59E0B;

	/* Borders/linii */
	--c-border-light: rgba(17, 24, 39, 0.08);
	--c-border-dark: rgba(255, 255, 255, 0.1);

	/* Tipografie */
	--font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--fs-eyebrow: 0.875rem;            /* 14px */
	--fs-body: 1rem;                   /* 16px */
	--fs-lead: 1.125rem;               /* 18px */
	--fs-h6: 1rem;
	--fs-h5: 1.125rem;
	--fs-h4: 1.25rem;
	--fs-h3: 1.625rem;                 /* 26px */
	--fs-h2: clamp(2rem, 4vw, 3rem);   /* 32–48px fluid */
	--fs-h1: clamp(2.5rem, 6vw, 4.5rem); /* 40–72px fluid */

	--lh-tight: 1.1;
	--lh-heading: 1.2;
	--lh-body: 1.6;

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-extrabold: 800;

	/* Spacing scale (pasul de 4px) */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-8: 3rem;
	--sp-10: 4rem;
	--sp-12: 5rem;
	--sp-16: 6rem;
	--sp-20: 8rem;

	/* Container */
	--container: 1200px;
	--container-narrow: 820px;
	--container-pad: clamp(1rem, 4vw, 2rem);

	/* Radius */
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 14px;
	--radius-xl: 20px;
	--radius-full: 999px;

	/* Shadow */
	--shadow-sm: 0 1px 2px rgba(2, 44, 34, 0.06);
	--shadow-md: 0 10px 30px -10px rgba(2, 44, 34, 0.15);
	--shadow-lg: 0 20px 50px -15px rgba(2, 44, 34, 0.25);
	--shadow-glow: 0 0 0 4px rgba(52, 211, 153, 0.18);

	/* Animații */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
	--dur-fast: 160ms;
	--dur: 280ms;
	--dur-slow: 520ms;

	/* Header */
	--header-h: 72px;
}


/* ---------- 2. Reset minim + baze ---------- */

html,
body {
	min-height: 100%;
}

body {
	background: var(--c-white);
	color: var(--c-body-light);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
}

a {
	color: var(--c-emerald);
	text-decoration: none;
	transition: color var(--dur) var(--ease-out);
}

a:hover {
	color: var(--c-emerald-dark);
}

p {
	margin: 0 0 var(--sp-4);
}

ul, ol {
	padding-left: 1.25rem;
}

hr {
	border: 0;
	border-top: 1px solid var(--c-border-light);
	margin: var(--sp-8) 0;
}

:focus-visible {
	outline: 3px solid var(--c-medium-green);
	outline-offset: 3px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute !important;
	clip: rect(0,0,0,0);
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
}


/* ---------- 3. Tipografie ---------- */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--sp-4);
	font-family: var(--font-sans);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	color: var(--c-title-light);
	letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

/* Accent verde pe un cuvânt din titlu */
.accent {
	color: var(--c-emerald);
	position: relative;
}
.section--dark .accent {
	color: var(--c-medium-green);
}

/* Eyebrow — titlu mic deasupra H1/H2 */
.eyebrow {
	display: inline-block;
	margin-bottom: var(--sp-4);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.125em;
	text-transform: uppercase;
	color: var(--c-emerald);
}
.section--dark .eyebrow {
	color: var(--c-medium-green);
}

/* Subtitlu / lead */
.lead {
	font-size: var(--fs-lead);
	color: var(--c-body-light);
	max-width: 62ch;
}
.section--dark .lead {
	color: var(--c-body-dark);
}


/* ---------- 4. Layout — container & section ---------- */

.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding-left: var(--container-pad);
	padding-right: var(--container-pad);
}

.container--narrow {
	max-width: var(--container-narrow);
}

.section {
	padding-top: clamp(4rem, 8vw, 7rem);
	padding-bottom: clamp(4rem, 8vw, 7rem);
	position: relative;
	overflow: hidden;                    /* pentru orb-uri/blobs absolute */
}

/* Variante de background */
.section--light {
	background: var(--c-white);
	color: var(--c-body-light);
}
.section--mint {
	background: var(--c-mint-tint);
	color: var(--c-body-light);
}
.section--dark {
	background: var(--c-dark);
	color: var(--c-body-dark);
}
.section--dark-gradient {
	background: radial-gradient(circle at 20% 10%, rgba(52, 211, 153, 0.12), transparent 45%),
	            radial-gradient(circle at 90% 90%, rgba(5, 150, 105, 0.15), transparent 40%),
	            linear-gradient(145deg, #02221A 0%, var(--c-dark) 60%, #011C15 100%);
	color: var(--c-body-dark);
}
.section--center { text-align: center; }

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6,
.section--dark-gradient h1,
.section--dark-gradient h2,
.section--dark-gradient h3,
.section--dark-gradient h4,
.section--dark-gradient h5,
.section--dark-gradient h6 {
	color: var(--c-title-dark);
}

.section-head {
	max-width: 760px;
	margin: 0 auto var(--sp-10);
	text-align: center;
}
.section-head--left {
	text-align: left;
	margin-left: 0;
}


/* ---------- 5. Butoane ---------- */

.btn {
	--btn-bg: var(--c-emerald);
	--btn-color: var(--c-white);
	--btn-bg-hover: var(--c-emerald-dark);
	--btn-color-hover: var(--c-white);
	--btn-border: transparent;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: 14px 32px;
	background: var(--btn-bg);
	color: var(--btn-color);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	line-height: 1;
	border: 2px solid var(--btn-border);
	border-radius: var(--radius-md);
	cursor: pointer;
	user-select: none;
	text-decoration: none;
	transition:
		background-color var(--dur) var(--ease-out),
		color var(--dur) var(--ease-out),
		border-color var(--dur) var(--ease-out),
		transform var(--dur) var(--ease-out),
		box-shadow var(--dur) var(--ease-out);
}

.btn:hover,
.btn:focus-visible {
	background: var(--btn-bg-hover);
	color: var(--btn-color-hover);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.btn:active {
	transform: translateY(0);
}

/* Variante */
.btn--primary {
	--btn-bg: var(--c-emerald);
	--btn-bg-hover: var(--c-emerald-dark);
}

.btn--gold {
	--btn-bg: var(--c-gold);
	--btn-bg-hover: var(--c-amber);
}

.btn--outline-dark {                    /* pe BG dark */
	--btn-bg: transparent;
	--btn-color: var(--c-medium-green);
	--btn-border: var(--c-medium-green);
	--btn-bg-hover: var(--c-medium-green);
	--btn-color-hover: var(--c-dark);
}

.btn--ghost {                           /* pe BG light */
	--btn-bg: transparent;
	--btn-color: var(--c-emerald);
	--btn-border: var(--c-emerald);
	--btn-bg-hover: var(--c-emerald);
	--btn-color-hover: var(--c-white);
}

.btn--sm {
	padding: 10px 20px;
	font-size: 0.875rem;
}

.btn--lg {
	padding: 18px 40px;
	font-size: 1.05rem;
}

/* Grup de butoane */
.btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	margin-top: var(--sp-6);
}


/* ---------- 6. Card generic ---------- */

.card {
	background: var(--c-white);
	border: 1px solid var(--c-border-light);
	border-radius: var(--radius-lg);
	padding: var(--sp-6);
	transition:
		transform var(--dur) var(--ease-out),
		box-shadow var(--dur) var(--ease-out),
		border-color var(--dur) var(--ease-out);
}

.card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: transparent;
}

.section--dark .card,
.section--dark-gradient .card {
	background: var(--c-dark-2);
	border-color: var(--c-border-dark);
	color: var(--c-body-dark);
}


/* ---------- 7. Scroll reveal ---------- */

.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 800ms var(--ease-out),
		transform 800ms var(--ease-out);
	will-change: transform, opacity;
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.reveal--delay-1 { transition-delay: 100ms; }
.reveal--delay-2 { transition-delay: 200ms; }
.reveal--delay-3 { transition-delay: 300ms; }
.reveal--delay-4 { transition-delay: 400ms; }
.reveal--delay-5 { transition-delay: 500ms; }

/* Respect utilizatorii care nu vor animații */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
	.reveal {
		opacity: 1;
		transform: none;
	}
}


/* ---------- 8. Utilitare mici ---------- */

.u-text-center { text-align: center; }
.u-mt-0 { margin-top: 0 !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-flex { display: flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-items-center { align-items: center; }
.u-justify-center { justify-content: center; }
.u-gap-4 { gap: var(--sp-4); }
.u-gap-6 { gap: var(--sp-6); }

.visually-hidden {
	position: absolute !important;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px; width: 1px;
	overflow: hidden;
	white-space: nowrap;
}


/* ---------- 9. Search form ---------- */

.search-form {
	display: flex;
	gap: var(--sp-2);
	max-width: 500px;
	margin: var(--sp-6) auto 0;
}

.search-form__input {
	flex: 1;
	padding: 12px 18px;
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	border: 1px solid var(--c-border-light);
	border-radius: var(--radius-md);
	background: var(--c-white);
	color: var(--c-title-light);
}

.section--dark .search-form__input {
	background: var(--c-dark-2);
	border-color: var(--c-border-dark);
	color: var(--c-body-dark);
}


/* ---------- 10. Post / page / 404 ---------- */

.page-header {
	margin-bottom: var(--sp-10);
}

.page-title {
	margin: 0 0 var(--sp-4);
}

.page-description {
	color: var(--c-muted-light);
	max-width: 65ch;
}

.entry-content h2 { margin-top: var(--sp-8); }
.entry-content h3 { margin-top: var(--sp-6); }
.entry-content img { border-radius: var(--radius-md); margin: var(--sp-4) 0; }
.entry-content blockquote {
	margin: var(--sp-6) 0;
	padding: var(--sp-4) var(--sp-6);
	border-left: 4px solid var(--c-emerald);
	background: var(--c-mint-tint);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-style: italic;
}

/* Post grid */
.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--sp-6);
	margin-top: var(--sp-6);
}

.post-card {
	display: flex;
	flex-direction: column;
	background: var(--c-white);
	border: 1px solid var(--c-border-light);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.post-card__thumb img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
}

.post-card__body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.post-card__title a { color: var(--c-title-light); }
.post-card__title a:hover { color: var(--c-emerald); }
.post-card__meta { color: var(--c-muted-light); font-size: 0.875rem; margin-bottom: var(--sp-3); }
.post-card__excerpt { flex: 1; margin-bottom: var(--sp-4); }


/* 404 */
.error-404 {
	text-align: center;
}
.error-404__title {
	margin-bottom: var(--sp-4);
}
.error-404__desc {
	font-size: var(--fs-lead);
	color: var(--c-body-dark);
	max-width: 52ch;
	margin: 0 auto var(--sp-8);
}
.error-404__actions {
	display: flex;
	gap: var(--sp-4);
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: var(--sp-10);
}
.error-404__search p { color: var(--c-muted-dark); margin-bottom: var(--sp-2); }


/* Pagination */
.pagination, .wp-pagenavi, .nav-links {
	margin-top: var(--sp-10);
	display: flex;
	justify-content: center;
	gap: var(--sp-2);
	flex-wrap: wrap;
}
.page-numbers {
	display: inline-block;
	padding: 10px 16px;
	border: 1px solid var(--c-border-light);
	border-radius: var(--radius-md);
	color: var(--c-body-light);
	transition: all var(--dur) var(--ease-out);
}
.page-numbers.current {
	background: var(--c-emerald);
	color: var(--c-white);
	border-color: var(--c-emerald);
}
.page-numbers:hover {
	background: var(--c-mint-tint);
	color: var(--c-emerald-dark);
}