/**
 * "Kapcsolat" oldal — Figma node 183:1911.
 *
 * A tervben az űrlap 569px széles (x 379), mellette 1012-től a térkép és alatta,
 * hézag nélkül a teal elérhetőség-kártya. A tartalomsáv 379–1491 = 1112px.
 *
 * Az űrlap mezőit a Contact Form 7 adja; a kétoszlopos elrendezést a
 * `mu-plugins/dev-scripts/set-contact-form.php` által beírt `urlap__*`
 * burkolók teszik lehetővé. A mezők méretei mind a tervből valók.
 */

.kapcsolat { padding: 32px 0 90px; }

.kapcsolat__inner { max-width: 1112px; }

/* 183:1930 */
.kapcsolat__title {
	margin: 0;
	font-size: 50px;
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	text-align: left;
	color: var(--color-teal);
}

/* 183:1989 */
.kapcsolat__lead {
	max-width: 568px;
	margin: 9px 0 0;
	font-size: 17.915px;
	line-height: 1.204;
	color: var(--color-teal);
}

.kapcsolat__grid {
	display: grid;
	grid-template-columns: 569px minmax(0, 479px);
	gap: 64px;
	margin-top: 48px;                 /* Figma: a bevezető alja 236, az űrlap 284 */
}

/* -- Űrlap (Contact Form 7) -- */

.kapcsolat__form .urlap__mezok {
	display: flex;
	flex-direction: column;
	gap: 21.84px;
}

/* A tervben két 273.402px-es oszlop, 22.195px köze — együtt a teljes 569px. */
.kapcsolat__form .urlap__sor {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22.195px;
}

.kapcsolat__form .urlap__mezo { margin: 0; }

/* A CF7 a mezőt inline `span`-be teszi, és az `wpcf7_autop` minden sortörésből
   `<br>`-t csinál — együtt ez ~32px-re tolta szét a címkét és a mezőt a tervbeli
   4.519px helyett. A `<br>`-eknek itt nincs jelentésük, ezért elrejtjük. */
.kapcsolat__form .wpcf7-form-control-wrap { display: block; }

.kapcsolat__form .urlap__mezok br,
.kapcsolat__form .urlap__jelolok br { display: none; }

/* 183:1944 */
.kapcsolat__form label {
	display: block;
	margin-bottom: 4.519px;
	font-size: 20.334px;
	line-height: 1.204;
	font-weight: var(--weight-bold);
	color: var(--color-teal);
}

/* 183:1945 */
.kapcsolat__form input[type="text"],
.kapcsolat__form input[type="email"],
.kapcsolat__form input[type="tel"],
.kapcsolat__form textarea {
	display: block;
	width: 100%;
	padding: 14.309px 15.815px;
	font-family: inherit;
	font-size: 13.115px;
	line-height: 1.204;
	color: var(--color-teal-dark);
	background: rgba(0, 137, 127, .08);
	border: .753px solid #f5ebff;
	border-radius: 0;
	transition: border-color .15s ease;
}

.kapcsolat__form input:focus,
.kapcsolat__form textarea:focus {
	outline: none;
	border-color: var(--color-teal);
}

/* 183:1962 */
.kapcsolat__form textarea {
	height: 167px;
	padding: 29.257px 18.827px 12.803px 21.186px;
	resize: vertical;
}

.kapcsolat__form input::placeholder,
.kapcsolat__form textarea::placeholder { color: #477f7a; }

/* -- Hozzájárulási jelölők (183:1966, 183:1971) -- */

.kapcsolat__form .urlap__jelolok {
	display: flex;
	flex-direction: column;
	margin-top: 16px;
}

/* A CF7 minden jelölőt saját `p`-be zár, alapból 18px margóval; a tervben a két
   sor közvetlenül egymás alatt áll, csak a 7.465px belső margójukkal. */
.kapcsolat__form .urlap__jelolok p { margin: 0; }

.kapcsolat__form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }

.kapcsolat__form .wpcf7-acceptance .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0;
	padding: 7.465px 0;
	font-size: 12px;
	line-height: 1.204;
	font-weight: 400;
	color: var(--color-teal);
}

.kapcsolat__form .wpcf7-acceptance input[type="checkbox"] {
	flex: 0 0 auto;
	width: 16.423px;
	height: 16.423px;
	margin: 0;
	background: #ebf6f5;
	border: 0;
	border-radius: 4px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.kapcsolat__form .wpcf7-acceptance input[type="checkbox"]:checked {
	background: var(--color-teal);
	/* Pipa: a jelölő közepén, saját SVG nélkül. */
	background-image: linear-gradient(45deg, transparent 42%, #fff 42%, #fff 55%, transparent 55%),
	                  linear-gradient(-45deg, transparent 55%, #fff 55%, #fff 68%, transparent 68%);
	background-size: 60% 60%, 60% 60%;
	background-position: 32% 62%, 22% 55%;
	background-repeat: no-repeat;
}

.kapcsolat__form .wpcf7-acceptance input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--color-teal);
	outline-offset: 2px;
}

.kapcsolat__form .wpcf7-acceptance .wpcf7-list-item-label { display: block; }

/* 183:1976 */
.kapcsolat__form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 106.364px;
	height: 33.239px;
	margin-top: 16px;
	padding: 0 18px;
	font-family: inherit;
	font-size: 16.364px;
	font-weight: var(--weight-bold);
	color: #fff;
	background: var(--color-green);
	border: 0;
	cursor: pointer;
	transition: background-color .15s ease;
}

.kapcsolat__form input[type="submit"]:hover { background: var(--color-teal-dark); }

.kapcsolat__form .wpcf7-not-valid-tip {
	margin-top: 4px;
	font-size: 12px;
	color: #c0392b;
}

.kapcsolat__form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 10px 14px;
	font-size: 14px;
	border-width: 1px;
}

/* -- Térkép és elérhetőség-kártya -- */

/* A tervben 471x278; a kártya közvetlenül alatta ül, hézag nélkül. */
.kapcsolat__map {
	position: relative;
	aspect-ratio: 479 / 278;
	background: var(--color-surface);
}

.kapcsolat__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* 183:2015 — 537x239 a tervben, itt a jobb hasáb szélességében. */
/* A jobb alsó sarok le van vágva, hogy a felhajtott sarok MÖGÖTT a lap háttere
   látszódjon, ne teal. A vágás vonala a sárga háromszög hosszú éle: a -45 fokos
   forgatásból kiszámolva a kártya jobb szélét (100%, 100%-49px)-nél, az alját
   (100%-90px, 100%)-nél metszi. Így a háromszögből semmi nem vész el, a mögötte
   maradó teal viszont eltűnik.

   A vágás 2px-rel beljebb fut a számítottnál: pontosan a háromszög élén hagyva a
   kerekítés és az élsimítás miatt egy hajszálnyi teal csík maradt a sárga mellett. */
.kapcsolat__card {
	position: relative;
	overflow: hidden;
	min-height: 239px;
	padding: 38px 40px 34px 44px;
	color: #fff;
	background: var(--color-teal);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 51px), calc(100% - 93px) 100%, 0 100%);
}

/* 183:2016 — sárga sarok jobb alul, pontosan a terv szerint.
   A tervben egy 104.5px-es doboz ül a kártya jobb alsó sarkában úgy, hogy 20px-rel
   LELÓG a kártya aljáról; benne a "Polygon 1" (97.58 x 50.20, csúcsai 63.639,0 –
   97.58,50.20 – 0,20.51) -45 fokkal elforgatva. A látható alak tehát a háromszög
   és a kártya metszete — a kártya `overflow: hidden`-je vágja le. */
.kapcsolat__card-corner {
	position: absolute;
	right: 0;
	bottom: -20px;
	width: 104.5px;
	height: 104.5px;
}

.kapcsolat__card-corner::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 97.581px;
	height: 50.205px;
	margin: -25.102px 0 0 -48.79px;
	background: var(--color-yellow);
	transform: rotate(-45deg);
	clip-path: polygon(65.2% 0, 100% 100%, 0 40.85%);
}

/* 183:2018 */
.kapcsolat__card-name {
	margin: 0;
	font-size: 33.41px;
	line-height: 1.1;
	font-weight: var(--weight-demi);
}

/* 183:2020 */
.kapcsolat__card-sub {
	margin: 11px 0 0;
	font-size: 18.561px;
	line-height: 1.204;
	font-weight: var(--weight-medium);
	color: #fff;
}

.kapcsolat__list {
	position: relative;
	z-index: 1;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2.078px;
}

/* 183:2022 — a sorok a tervben 6.928px függőleges belső margót kapnak. */
.kapcsolat__list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6.928px 6.928px 6.928px 0;
	font-size: 14.849px;
	line-height: 1.204;
}

.kapcsolat__list img { width: 20px; height: auto; flex-shrink: 0; }
/* A tervben csak az e-mail van aláhúzva, a telefonszám nem. */
.kapcsolat__list a { color: #fff; text-decoration: none; }
.kapcsolat__list a[href^="mailto:"] { text-decoration: underline; }

@media (max-width: 1150px) {
	.kapcsolat__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.kapcsolat__aside { max-width: 569px; }
}

@media (max-width: 720px) {
	.kapcsolat { padding: 28px 0 64px; }
	.kapcsolat__title { font-size: 34px; }
	.kapcsolat__form .urlap__sor { grid-template-columns: minmax(0, 1fr); }
	.kapcsolat__card { padding: 30px 28px; }
	.kapcsolat__card-name { font-size: 26px; }
}