/* ==========================================================================
   PAGINA DE CONTACT

   Se asortează cu restul site-ului: aceleași secțiuni (.cs-sectiune,
   .cs-interior), aceleași butoane, aceeași paletă. Nimic nou ca limbaj vizual —
   doar componentele de formular, care nu existau până acum.

   Toate culorile au nuanța uneia dintre cele nouă din paletă (toleranță 2°).
   Vezi _analiza/00-README.md pentru regulă.

   Contraste verificate:
     etichete #0d2e2e pe alb          14,51:1
     text în câmp #264a4a pe alb       9,72:1
     text ajutător #4a6b6b pe alb      5,82:1
     marcaj obligatoriu #c6008c        5,56:1
     bordura câmpului #678484          4,03:1  (prag 3:1, WCAG 1.4.11)
     buton: #0d2e2e pe #efb014         7,52:1
     cardul teal: alb pe #003a3a      12,60:1
   ========================================================================== */

/* ------------------------------------------------------ 1. Așezarea paginii */

.cs-contact__grila {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

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

/* ------------------------------------------------------------ 2. Formularul */

.cs-formular__intro {
	margin: 0 0 26px;
	max-width: 56ch;
	font-size: 1.04rem;
	line-height: 1.65;
	color: #264a4a;
}

/*
 * Câmpurile stau într-o grilă de două coloane pe ecrane late: numele lângă
 * e-mail, telefonul lângă „cine ești". Mesajul ocupă toată lățimea.
 */
.cs-camp-rand {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 22px;
}

@media (max-width: 620px) {
	.cs-camp-rand { grid-template-columns: 1fr; }
}

.cs-camp {
	margin: 0 0 18px;
}

.cs-camp--lat { grid-column: 1 / -1; }

.cs-camp > label,
.cs-camp .cs-eticheta {
	display: block;
	margin-bottom: 6px;
	font-family: 'Manrope', sans-serif;
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.35;
	color: #0d2e2e;
}

/* Marcajul câmpurilor obligatorii — culoare ȘI simbol, niciodată doar culoare. */
.cs-obligatoriu {
	color: #c6008c;
	font-weight: 700;
}

.cs-ajutor {
	display: block;
	margin-top: 5px;
	font-size: .88rem;
	line-height: 1.5;
	color: #4a6b6b;
}

/* ---- Controalele propriu-zise ---- */

.cs-contact input[type="text"],
.cs-contact input[type="email"],
.cs-contact input[type="tel"],
.cs-contact select,
.cs-contact textarea {
	display: block;
	width: 100%;
	min-height: 52px;              /* ținta de atingere: peste 44px */
	padding: 13px 16px;
	border: 2px solid #678484;     /* 4,03:1 — conturul unui câmp e componentă UI */
	border-radius: 8px;
	background: #ffffff;
	font-family: 'Inter', Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	color: #264a4a;
	box-shadow: none;
}

.cs-contact textarea {
	min-height: 168px;
	resize: vertical;
}

.cs-contact select {
	appearance: none;
	padding-right: 44px;
	/* Săgeata, desenată în SVG ca să nu depindem de o pictogramă a temei. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M2 2l8 8 8-8' fill='none' stroke='%230d2e2e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 14px 9px;
}

.cs-contact input::placeholder,
.cs-contact textarea::placeholder {
	color: #4a6b6b;                /* 5,82:1 — substituenții trebuie citiți, nu ghiciți */
	opacity: 1;
}

.cs-contact input:hover,
.cs-contact select:hover,
.cs-contact textarea:hover {
	border-color: #527272;
}

.cs-contact input:focus,
.cs-contact select:focus,
.cs-contact textarea:focus {
	border-color: #008080;
	outline: 3px solid #008080;
	outline-offset: 1px;
}

/* ---- Consimțământul ---- */

/*
 * Bifa NU e prebifată și nu poate fi. Consimțământul prebifat nu e consimțământ
 * (Regulamentul general privind protecția datelor, considerentul 32).
 */
.cs-consimtamant {
	margin: 26px 0 22px;
	padding: 18px 20px;
	border: 2px solid #e0dcd3;
	border-left: 4px solid #008080;
	border-radius: 0 8px 8px 0;
	background: #f1e6d2;
}

.cs-consimtamant label,
.cs-consimtamant .wpcf7-list-item-label {
	display: block;
	font-size: .95rem;
	line-height: 1.6;
	font-weight: 400;
	color: #0d2e2e;                /* 11,74:1 pe crem */
}

.cs-consimtamant input[type="checkbox"] {
	width: 22px;
	height: 22px;
	margin: 2px 10px 0 0;
	accent-color: #008080;
	flex: 0 0 auto;
	cursor: pointer;
}

.cs-consimtamant .wpcf7-list-item {
	display: flex;
	align-items: flex-start;
	margin: 0;
}

.cs-consimtamant a {
	color: #006666;                /* 5,49:1 pe crem */
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cs-consimtamant a:hover,
.cs-consimtamant a:focus-visible { color: #7a2a55; }

/* ---- Capcana anti-spam ---- */

/*
 * Câmp invizibil pentru oameni, completat de roboți. Nu folosim reCAPTCHA:
 * ar trimite datele vizitatorilor către Google, pe un site public de campanie
 * unde exact asta trebuie evitat.
 *
 * „display:none" nu e suficient — unii roboți îl detectează. Îl scoatem din
 * flux și îl ascundem și de cititoarele de ecran.
 */
.cs-capcana {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ---- Butonul și stările ---- */

.cs-contact input[type="submit"],
.cs-contact .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	min-height: 54px;
	padding: 14px 34px;
	border: 2px solid transparent;
	border-radius: 8px;
	background: #efb014;
	color: #0d2e2e;                /* 7,52:1 — niciodată alb pe galben */
	font-family: 'Manrope', sans-serif;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	width: auto;
}

.cs-contact input[type="submit"]:hover,
.cs-contact .wpcf7-submit:hover,
.cs-contact input[type="submit"]:focus-visible,
.cs-contact .wpcf7-submit:focus-visible {
	background: #ffc538;
	color: #0d2e2e;
}

.cs-contact .wpcf7-submit:focus-visible {
	outline: 3px solid #0d2e2e;
	outline-offset: 2px;
}

/* Mesajul de eroare de sub un câmp */
.cs-contact .wpcf7-not-valid-tip {
	display: block;
	margin-top: 7px;
	font-size: .9rem;
	font-weight: 700;
	line-height: 1.45;
	color: #a3006f;                /* 7,54:1 pe alb */
}

.cs-contact .wpcf7-not-valid {
	border-color: #a3006f;
}

/* Mesajul general al formularului */
.cs-contact .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 15px 18px;
	border: 2px solid #678484;
	border-left-width: 5px;
	border-radius: 0 8px 8px 0;
	font-size: .98rem;
	line-height: 1.6;
	color: #0d2e2e;
	background: #ffffff;
}

.cs-contact form.invalid .wpcf7-response-output,
.cs-contact form.unaccepted .wpcf7-response-output,
.cs-contact form.failed .wpcf7-response-output,
.cs-contact form.aborted .wpcf7-response-output {
	border-color: #a3006f;
	background: #fbe8f5;
	color: #7a2a55;                /* 6,45:1 pe roz pal */
}

.cs-contact form.sent .wpcf7-response-output {
	border-color: #1f7a0a;
	background: #eaf4e7;
	color: #145505;                /* 7,98:1 pe verde pal */
}

.cs-contact .wpcf7-spinner {
	background-color: #008080;
}

/* ------------------------------------------------- 3. Cardul cu date */

.cs-date-contact {
	padding: 30px 28px;
	border-radius: 14px;
	background: #003a3a;
	color: #ffffff;
}

.cs-date-contact__titlu {
	margin: 0 0 20px;
	font-family: 'Manrope', sans-serif;
	font-size: 1.3rem;
	font-weight: 800;
	line-height: 1.25;
	color: #ffffff;
}

.cs-date-contact dl {
	margin: 0;
}

.cs-date-contact dt {
	margin-top: 18px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #a8c8c8;                /* 7,06:1 pe teal închis */
}

.cs-date-contact dt:first-child { margin-top: 0; }

.cs-date-contact dd {
	margin: 5px 0 0;
	font-size: 1.02rem;
	line-height: 1.55;
	color: #ffffff;
}

.cs-date-contact a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: #efb014;
	text-decoration-thickness: 2px;
}

.cs-date-contact a:hover,
.cs-date-contact a:focus-visible {
	color: #efb014;                /* 6,54:1 */
}

.cs-date-contact a:focus-visible {
	outline: 3px solid #efb014;
	outline-offset: 3px;
}

/* Marcajul datelor care lipsesc încă — se vede că e de completat, nu inventat. */
.cs-de-completat {
	display: inline-block;
	padding: 2px 9px;
	border: 1px dashed #efb014;
	border-radius: 4px;
	font-size: .86em;
	font-weight: 700;
	letter-spacing: .04em;
	color: #efb014;
}

/* Cardul secundar, sub cel principal */
.cs-raspuns {
	margin-top: 20px;
	padding: 22px 24px;
	border: 2px solid #e0dcd3;
	border-radius: 14px;
	background: #f1e6d2;
}

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

.cs-raspuns p {
	margin: 0;
	font-size: .96rem;
	line-height: 1.6;
	color: #264a4a;                /* 7,86:1 pe crem */
}

/* --------------------------------------------- 4. Cărțile de îndrumare */

.cs-rute {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.cs-ruta {
	display: flex;
	flex-direction: column;
	padding: 26px 24px;
	border-radius: 12px;
	background: #ffffff;
	border: 2px solid #e0dcd3;
}

.cs-ruta__titlu {
	margin: 0 0 8px;
	font-family: 'Manrope', sans-serif;
	font-size: 1.12rem;
	font-weight: 800;
	line-height: 1.3;
	color: #0d2e2e;
}

.cs-ruta p {
	margin: 0 0 14px;
	font-size: .97rem;
	line-height: 1.6;
	color: #264a4a;
}

.cs-ruta__legatura {
	margin-top: auto;
	font-weight: 700;
	color: #008080;                /* 4,77:1 pe alb */
	text-decoration: none;
}

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

.cs-ruta__legatura:hover,
.cs-ruta__legatura:focus-visible {
	color: #7a2a55;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------ 5. Nota despre date */

.cs-nota-date {
	max-width: 74ch;
	margin: 0 auto;
	padding: 20px 24px;
	border-left: 4px solid #008080;
	background: #ffffff;
	font-size: .95rem;
	line-height: 1.65;
	color: #264a4a;
}

.cs-nota-date a {
	color: #008080;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cs-nota-date a:hover,
.cs-nota-date a:focus-visible { color: #7a2a55; }