Home

/* ============================================ Corecții pe prima pagină */

/*
 * Tema afișează un bloc de titlu cu <h1>Home</h1> deasupra conținutului.
 * Pe prima pagină el este:
 *   a) greșit ca text — „Home", netradus;
 *   b) un AL DOILEA <h1> pe pagină, peste cel din hero.
 *
 * Două titluri de nivel 1 încurcă cititoarele de ecran și diluează structura
 * pentru motoarele de căutare (WCAG 1.3.1). „display: none" îl scoate și din
 * arborele de accesibilitate, nu doar vizual.
 */
.home .sc_layouts_title,
.frontpage .sc_layouts_title {
	display: none;
}

/* Prima pagină are secțiuni pe toată lățimea; bara laterală nu are ce căuta. */
.home .content_wrap > .content,
.frontpage .content_wrap > .content {
	width: 100%;
}

.home .sidebar,
.frontpage .sidebar {
	display: none;
}

/* ==========================================================================
   PAGINA PRINCIPALĂ — „Carieră sigură, viitor independent"

   Structura urmează macheta din „model desing.png", cu două corecții de
   contrast obligatorii (vezi _analiza/04-contrast-si-paleta-accesibila.md):

     1. Titlul galben pe teal era 2,48:1 — sub pragul de 3:1 chiar și pentru
        text mare. Zona de text din hero primește un fundal mai închis
        (#004d4d), unde galbenul ajunge la 5,02:1.
     2. Cardul galben avea text alb, 1,93:1. Textul devine închis: 7,87:1.

   Secțiunile ies pe toată lățimea ecranului cu tehnica „100vw", ca să nu
   depindem de un șablon de pagină anume al temei.
   ========================================================================== */

/* ------------------------------------------------------------ Fundamente */

.cs-sectiune {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 72px 0;
}

.cs-interior {
	width: min(1200px, calc(100vw - 48px));
	margin: 0 auto;
}

.cs-sectiune__titlu {
	margin: 0 0 8px;
	font-family: 'Manrope', sans-serif;
	font-size: clamp(1.7rem, 3.4vw, 2.4rem);
	font-weight: 800;
	line-height: 1.15;
	color: var(--theme-color-text_dark, #0d2e2e);
}

.cs-sectiune__intro {
	margin: 0 0 32px;
	max-width: 62ch;
	font-size: 1.06rem;
	line-height: 1.65;
	color: var(--theme-color-text, #264a4a);
}

.cs-antet-rand {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 26px;
}

.cs-antet-rand .cs-sectiune__titlu { margin-bottom: 0; }

.cs-legatura-toate {
	font-weight: 700;
	color: var(--theme-color-text_link, #008080);
	text-decoration: none;
	white-space: nowrap;
}

.cs-legatura-toate:hover,
.cs-legatura-toate:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.cs-legatura-toate::after { content: " \2192"; }

/* Butoane */

.cs-buton {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 14px 30px;
	border: 2px solid transparent;
	border-radius: 8px;
	font-family: 'Manrope', sans-serif;
	font-size: 1.02rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.cs-buton--principal {
	background: #efb014;
	color: #0d2e2e;              /* 7,87:1 — NICIODATĂ alb pe galben */
}

.cs-buton--principal:hover,
.cs-buton--principal:focus-visible { background: #ffc538; color: #0d2e2e; }

.cs-buton--contur {
	border-color: #ffffff;
	background: transparent;
	color: #ffffff;
}

.cs-buton--contur:hover,
.cs-buton--contur:focus-visible { background: #ffffff; color: #003a3a; }

.cs-buton--verde { background: #1f7a0a; color: #ffffff; }   /* 5,46:1 */
.cs-buton--verde:hover, .cs-buton--verde:focus-visible { background: #003a3a; color: #ffffff; }

/* ==================================================================== HERO */

.cs-hero {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	overflow: hidden;
	background: linear-gradient(115deg, #003a3a 0%, #008080 48%, #09a0a9 100%);
	color: #ffffff;
}

.cs-hero__grila {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	align-items: center;
	width: min(1200px, calc(100vw - 48px));
	margin: 0 auto;
}

.cs-hero__continut {
	position: relative;
	z-index: 2;
	padding: 72px 44px 72px 0;
}

/*
 * Stratul întunecat din spatele textului. Fără el, galbenul titlului cade pe
 * partea deschisă a degradeului și scade sub pragul de contrast.
 */
.cs-hero__continut::before {
	content: "";
	position: absolute;
	inset: -40px -60px -40px calc(50% - 50vw);
	z-index: -1;
	background: linear-gradient(90deg, #003a3a 0%, #004d4d 72%, rgba(0, 77, 77, 0) 100%);
}

.cs-hero__supratitlu {
	margin: 0 0 18px;
	font-family: 'Manrope', sans-serif;
	font-size: .88rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #a8c8c8;              /* 7,35:1 pe #003a3a */
}

.cs-hero__titlu {
	margin: 0 0 22px;
	font-family: 'Manrope', sans-serif;
	font-size: clamp(2.3rem, 5.6vw, 4.1rem);
	font-weight: 800;
	line-height: 1.04;
	color: #ffffff;
}

.cs-hero__titlu em {
	display: block;
	font-style: normal;
	color: #efb014;              /* 5,02:1 pe #004d4d */
}

.cs-hero__text {
	margin: 0 0 30px;
	max-width: 46ch;
	font-size: 1.1rem;
	line-height: 1.6;
	color: #e8f2f2;
}

.cs-hero__butoane {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 40px;
}

.cs-hero__beneficii {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 34px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-hero__beneficii li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #cfe4e4;              /* 10:1 pe #003a3a */
}

.cs-hero__beneficii li::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #efb014;
}

.cs-hero__media {
	position: relative;
	align-self: stretch;
	min-height: 440px;
}

.cs-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cs-hero__slogan {
	position: absolute;
	right: 18px;
	bottom: 26px;
	z-index: 3;
	max-width: 15ch;
	font-family: 'Caveat', cursive;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	font-weight: 700;
	line-height: 1.12;
	text-align: right;
	color: #ffffff;

	/*
	 * Fundal propriu, nu doar umbră de text.
	 *
	 * Sloganul stă peste imaginea din hero, iar imaginea o alege beneficiarul.
	 * Dacă pune o fotografie luminoasă, albul dispare. WCAG spune explicit că o
	 * umbră NU înlocuiește contrastul (1.4.3), tocmai pentru că nu se poate
	 * garanta.
	 *
	 * Cu 82% opacitate, chiar și peste o imagine complet albă fundalul ajunge la
	 * #31595d, unde albul are 7,73:1 — sigur, indiferent ce fotografie urmează.
	 */
	padding: 10px 16px 12px;
	border-radius: 10px;
	background: rgba(4, 53, 58, .82);
	text-shadow: none;
}

@media (max-width: 900px) {
	.cs-hero__grila { grid-template-columns: 1fr; }
	.cs-hero__continut { padding: 52px 0 40px; }
	.cs-hero__continut::before { inset: -30px calc(50% - 50vw); background: #003a3a; }
	.cs-hero__media { min-height: 260px; margin: 0 calc(50% - 50vw); }
	.cs-hero__slogan { right: 24px; }
}

/* ================================================== Carduri de navigare */

.cs-navigare {
	width: min(1200px, calc(100vw - 48px));
	margin: -44px auto 0;
	position: relative;
	z-index: 5;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	padding: 0;
	list-style: none;
}

.cs-nav-card > a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 26px 24px;
	border-radius: 12px;
	text-decoration: none;
	box-shadow: 0 6px 22px rgba(4, 53, 58, .16);
}

.cs-nav-card__titlu {
	font-family: 'Manrope', sans-serif;
	font-size: 1.18rem;
	font-weight: 800;
	line-height: 1.2;
}

.cs-nav-card__sub { font-size: .92rem; line-height: 1.4; }

.cs-nav-card--teal    > a { background: #008080; color: #ffffff; }   /* 4,77:1 */
.cs-nav-card--verde   > a { background: #1f7a0a; color: #ffffff; }   /* 5,46:1 */
.cs-nav-card--galben  > a { background: #efb014; color: #0d2e2e; }   /* 7,87:1 — text închis */
.cs-nav-card--magenta > a { background: #c6008c; color: #ffffff; }   /* 5,56:1 */

.cs-nav-card > a:hover,
.cs-nav-card > a:focus-visible { transform: translateY(-3px); }

.cs-nav-card > a { transition: transform .18s ease; }

@media (prefers-reduced-motion: reduce) {
	.cs-nav-card > a { transition: none; }
}

@media (max-width: 1024px) { .cs-navigare { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cs-navigare { grid-template-columns: 1fr; margin-top: 28px; } }

/* ======================================================== Două coloane */

.cs-doua-coloane {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 48px;
	align-items: start;
}

@media (max-width: 900px) {
	.cs-doua-coloane { grid-template-columns: 1fr; gap: 44px; }
}

/* ================================================== Bandă „Împreună…" */

.cs-banda { background: #f1e6d2; }

.cs-banda__grila {
	display: grid;
	grid-template-columns: .9fr 1.25fr .9fr;
	gap: 36px;
	align-items: center;
}

.cs-banda__slogan {
	font-family: 'Caveat', cursive;
	font-size: clamp(1.8rem, 3.2vw, 2.6rem);
	font-weight: 700;
	line-height: 1.12;
	color: #0d2e2e;              /* 11,74:1 pe crem */
}

.cs-banda__puncte {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.cs-banda__puncte li {
	font-family: 'Manrope', sans-serif;
	font-size: .82rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #0d2e2e;
}

.cs-banda__puncte li::before {
	content: "";
	display: block;
	width: 42px;
	height: 42px;
	margin: 0 auto 10px;
	border: 3px solid #008080;
	border-radius: 50%;
}

.cs-banda__apel {
	padding: 30px 26px;
	border-radius: 12px;
	background: #1f7a0a;
	color: #ffffff;
	text-align: center;
}

.cs-banda__apel p {
	margin: 0 0 16px;
	font-family: 'Caveat', cursive;
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.15;
}

@media (max-width: 1024px) {
	.cs-banda__grila { grid-template-columns: 1fr; text-align: center; }
	.cs-banda__puncte { grid-template-columns: repeat(2, 1fr); }
}

/* ===================================================== Despre proiect */

.cs-proiect { background: var(--theme-color-alter_bg_color, #f1e6d2); }

.cs-proiect__grila {
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: 44px;
	align-items: start;
}

.cs-proiect__date {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
	margin: 0;
}

.cs-proiect__date > div {
	padding-left: 16px;
	border-left: 4px solid #efb014;
}


/* ==========================================================================
   TEAL PE FUNDAL CREM

   Teal-ul exact din paletă, #008080, dă pe alb 4,77:1 — trece. Pe crem
   #f1e6d2 dă însă doar 3,86:1, sub pragul de 4,5:1 pentru text normal.

   Nu schimbăm culoarea, ci luminozitatea ei: #006666 este același teal
   amestecat cu 20% negru — nuanța rămâne 180,0, identică cu #008080 — și
   urcă la 5,49:1 pe crem.

   Regula proiectului: culoarea exactă din paletă oriunde trece pragul, o
   variantă mai închisă A ACELEIAȘI culori doar unde nu trece.
   ========================================================================== */

.cs-proiect__date dt,
.cs-sectiune--crem .cs-legatura-toate,
.cs-banda .cs-legatura-toate,
.cs-proiect .cs-legatura-toate,
.cs-sectiune--crem a:not(.cs-buton),
.cs-banda a:not(.cs-buton),
.cs-proiect a:not(.cs-buton) {
	color: #006666;              /* 5,49:1 pe crem */
}

.cs-proiect__date dt {
	margin-bottom: 4px;
	font-family: 'Manrope', sans-serif;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #008080;
}

.cs-proiect__date dd {
	margin: 0;
	font-size: .97rem;
	line-height: 1.5;
	color: var(--theme-color-text_dark, #0d2e2e);
}

@media (max-width: 900px) {
	.cs-proiect__grila { grid-template-columns: 1fr; gap: 32px; }
	.cs-proiect__date { grid-template-columns: 1fr; }
}

/* ============================================== Bandă cu trei coloane */

.cs-trei {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 0;
	list-style: none;
}

.cs-trei > li { padding: 54px 40px; }

.cs-trei__titlu {
	margin: 0 0 8px;
	font-family: 'Manrope', sans-serif;
	font-size: 1.32rem;
	font-weight: 800;
	color: #ffffff;
}

.cs-trei__text { margin: 0 0 20px; line-height: 1.55; }

.cs-trei--teal    { background: #008080; color: #e8f2f2; }
.cs-trei--verde   { background: #1f7a0a; color: #eaf4e7; }
.cs-trei--magenta { background: #c6008c; color: #fbe8f5; }   /* 4,75:1 */

.cs-socialuri {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-socialuri a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 2px solid rgba(255, 255, 255, .55);
	border-radius: 50%;
	color: #ffffff;
	font-size: .78rem;
	font-weight: 700;
	text-decoration: none;
}

.cs-socialuri a:hover,
.cs-socialuri a:focus-visible { background: #ffffff; color: #003a3a; border-color: #ffffff; }

@media (max-width: 900px) { .cs-trei { grid-template-columns: 1fr; } }

/* ====================================================== Ajustări mici */

.cs-sectiune--crem { background: var(--theme-color-alter_bg_color, #f1e6d2); }

.cs-spot { margin: 0; }

.cs-spot__ramă {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	aspect-ratio: 16 / 9;
	background: #003a3a;
}

.cs-spot__ramă img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Lipirea conținutului de meniu

   Tema pune spațiu generos deasupra conținutului, ca să respire titlul paginii.
   Pe prima pagină titlul e ascuns, iar sliderul trebuie sa inceapa imediat sub
   meniu — altfel ramane un dreptunghi alb de cateva sute de pixeli.

   Anulam spatierea pe TOATE nivelurile de ambalaj ale temei, pentru ca fiecare
   isi adauga propriul padding: page_content_wrap → content_wrap → content →
   article → post_content.
   ========================================================================== */

.home .page_content_wrap,
.frontpage .page_content_wrap {
	margin-top: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	background: transparent !important;
}

.home .page_content_wrap > .content_wrap,
.frontpage .page_content_wrap > .content_wrap {
	width: 100%;
	max-width: none;
	margin: 0 !important;
	padding: 0 !important;
}

.home .page_content_wrap .content,
.frontpage .page_content_wrap .content {
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
}

.home article.post_item_single,
.frontpage article.post_item_single,
.home .post_item_single .post_content,
.frontpage .post_item_single .post_content {
	margin: 0 !important;
	padding: 0 !important;
}

/* Spatiile pe care le adauga editorul de blocuri intre blocuri */
.home .post_content > *:first-child,
.frontpage .post_content > *:first-child {
	margin-top: 0 !important;
}

.home .post_content > *:last-child,
.frontpage .post_content > *:last-child {
	margin-bottom: 0 !important;
}

/* Sliderul e primul element: nicio distanta fata de meniu. */
.home .cs-slider,
.frontpage .cs-slider {
	margin-top: 0;
}

/* Ultima banda se lipeste de subsol. */
.home .cs-trei,
.frontpage .cs-trei {
	margin-bottom: 0;
}