/* =========================================================================
   Contactpagina — ontwerp-node 482:10111
   Body-content (header/footer komen uit get_header()/get_footer()).
   ========================================================================= */

.sellabees-contact {
	font-family: var(--sellabees-font-body);
	color: var(--sellabees-black);
}

/* --- Hero / introblok (grijze balk) ------------------------------------- */
.sellabees-contact__hero {
	background: var(--sellabees-search-bg);
	padding: 48px 0 56px;
}

.sellabees-contact__title {
	font-family: var(--sellabees-font-heading);
	font-weight: 400;
	font-size: 64px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--sellabees-black);
	margin: 0 0 18px;
}

.sellabees-contact__intro {
	max-width: 1040px;
}

.sellabees-contact__intro p {
	font-family: var(--sellabees-font-body);
	font-weight: 300; /* Avenir 45 Book */
	font-size: 14px;
	line-height: 26px;
	margin: 0;
	color: var(--sellabees-black);
}

/* --- Hoofdsectie: info + formulier -------------------------------------- */
.sellabees-contact__main {
	background: #fff;
	padding: 50px 0 50px;
}

.sellabees-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
	gap: 60px 80px;
	align-items: start;
}

.sellabees-contact__heading {
	font-family: var(--sellabees-font-heading);
	font-weight: 400;
	font-size: 36px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--sellabees-black);
	margin: 0 0 24px;
}

/* Contactgegevens-lijst */
.sellabees-contact__details {
	list-style: none;
	margin: 0 0 38px;
	padding: 0;
}

.sellabees-contact__details li {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	line-height: 30px;
	font-weight: 300;
}

.sellabees-contact__details a {
	color: var(--sellabees-black);
	text-decoration: none;
}

.sellabees-contact__details a:hover {
	color: var(--sellabees-red);
}

.sellabees-contact__icon {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--sellabees-red);
}

/* Openingstijden */
.sellabees-contact__subheading {
	font-family: var(--sellabees-font-heading);
	font-weight: 400;
	font-size: 20px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--sellabees-black);
	margin: 0 0 14px;
}

.sellabees-contact__subheading--sm {
	font-size: 16px;
	margin-top: 30px;
}

.sellabees-contact__hours {
	border-collapse: collapse;
	width: 100%;
	max-width: 420px;
}

.sellabees-contact__hours th,
.sellabees-contact__hours td {
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 14px;
	line-height: 30px;
	text-align: left;
	vertical-align: top;
	padding: 0;
}

.sellabees-contact__hours th {
	width: 130px;
	padding-right: 16px;
}

.sellabees-contact__hours-note {
	font-size: 14px;
	line-height: 16px;
	display: inline-block;
}

.sellabees-contact__closed {
	font-size: 14px;
	line-height: 20px;
	font-weight: 300;
	margin: 0;
}

/* --- Formulier ----------------------------------------------------------- */
.sellabees-contact__form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px 27px; /* ontwerp 482:10111: kolom-gap 27px (358px-velden), rij-gap 24px */
}

.sellabees-contact__field {
	display: flex;
	flex-direction: column;
}

.sellabees-contact__field--full {
	grid-column: 1 / -1;
}

.sellabees-contact__field label {
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 14px;
	line-height: 30px;
	color: var(--sellabees-black);
	margin-bottom: 6px;
}

.sellabees-contact__field input,
.sellabees-contact__field textarea {
	background: var(--sellabees-search-bg);
	border: 0;
	border-radius: 0;
	font-family: var(--sellabees-font-body);
	font-size: 14px;
	color: var(--sellabees-black);
	padding: 0 16px;
	width: 100%;
	box-sizing: border-box;
}

.sellabees-contact__field input {
	height: 44px;
}

.sellabees-contact__field textarea {
	min-height: 122px;
	padding: 13px 16px;
	resize: vertical;
	line-height: 1.4;
}

.sellabees-contact__field input:focus,
.sellabees-contact__field textarea:focus {
	outline: 2px solid var(--sellabees-red);
}

.sellabees-contact__actions {
	grid-column: 1 / -1;
	display: flex;
	justify-content: flex-end;
}

.sellabees-contact__submit {
	background: var(--sellabees-red);
	color: #fff;
	border: 0;
	cursor: pointer;
	min-width: 153px;
	height: 40px;
	padding: 0 24px;
	font-family: var(--sellabees-font-heading);
	font-weight: 400;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.sellabees-contact__submit:hover {
	background: var(--sellabees-red-dark);
}

.sellabees-contact__notice {
	grid-column: 1 / -1;
	font-size: 14px;
	font-weight: 400;
	padding: 12px 16px;
	margin: 0 0 20px;
}

.sellabees-contact__notice--ok {
	background: #e7f4e8;
	border-left: 4px solid #2e7d32;
	color: #1f5d23;
}

.sellabees-contact__notice--err {
	background: #fbeaec;
	border-left: 4px solid var(--sellabees-red);
	color: var(--sellabees-red-dark);
}

/* USP-strip met cirkels staat globaal boven de footer
   (template-parts/page-usps.php) — niet hier dupliceren. */

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 960px) {
	.sellabees-contact__grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}
}

/* --- Mobiel (ontwerp 487:35845, 393px) ------------------------------------ */
@media (max-width: 900px) {
	/* Inhoud op ~49px zijmarge zoals het mobiele design (24px gutter + 25px). */
	.sellabees-contact__hero .sellabees-container,
	.sellabees-contact__grid {
		padding-inline: 49px;
	}

	.sellabees-contact__hero {
		padding: 36px 0 40px;
	}
	.sellabees-contact__title {
		font-size: 35px;
		margin-bottom: 16px;
	}
	.sellabees-contact__intro p {
		line-height: 26px;
	}

	.sellabees-contact__main {
		padding: 40px 0;
	}
	.sellabees-contact__grid {
		gap: 40px;
	}
	/* Koppen "Contactgegevens" / "Neem contact op" = Impact 30px op mobiel. */
	.sellabees-contact__heading {
		font-size: 30px;
		margin-bottom: 20px;
	}

	/* Formulier één kolom, knop full-width. */
	.sellabees-contact__form {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.sellabees-contact__actions {
		justify-content: stretch;
	}
	.sellabees-contact__submit {
		width: 100%;
	}
}