/* =========================================================
   Blok: Contact — intro + contactgegevens + optioneel formulier

   De .sellabees-contact*-classes worden uit assets/css/pages/contact.css
   hier herhaald (gescoped onder .brini-block--contact), omdat die pagina-CSS
   niet overal wordt ingeladen — zo werkt het blok op elke pagina.
   ========================================================= */
.brini-block--contact {
	padding: 56px 0;
	font-family: var(--sellabees-font-body);
	color: var(--sellabees-black, #1a1a1a);
}

/* Titel — compacte groene band over de volle breedte (zoals de titelband op brini.nl).
   Het blok krijgt dan geen bovenpadding, zodat de band tegen de header aan sluit. */
.brini-block--contact--has-head {
	padding-top: 0;
}
.brini-block--contact .brini-block--contact__head {
	background: var(--sellabees-green, #2d572c);
	padding: 26px 0;
	margin-bottom: 32px;
}
.brini-block--contact .brini-block__title {
	font-family: var(--sellabees-font-heading);
	font-weight: 400;
	font-size: 36px;
	line-height: 1.05;
	color: #fff;
	margin: 0;
}
.brini-block--contact .sellabees-contact__intro {
	max-width: 1040px;
	margin-bottom: 32px;
}
.brini-block--contact .sellabees-contact__intro p {
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 14px;
	line-height: 26px;
	margin: 0 0 12px;
	color: var(--sellabees-black, #1a1a1a);
}
.brini-block--contact .sellabees-contact__intro p:last-child {
	margin-bottom: 0;
}

/* --- Hoofdsectie: info + formulier --------------------------------------- */
.brini-block--contact .sellabees-contact__grid {
	display: grid;
	/* Smallere gegevens-kolom (die beslaat maar een paar regels) mét duidelijke lucht
	   tussen de twee kolommen; 420px + 80px gaf eerder een groot gat in het midden. */
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	gap: 40px 64px;
	align-items: start;
}
.brini-block--contact .sellabees-contact__grid--single {
	grid-template-columns: minmax(0, 720px);
}

.brini-block--contact .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, #1a1a1a);
	margin: 0 0 24px;
}

/* Contactgegevens-lijst */
.brini-block--contact .sellabees-contact__details {
	list-style: none;
	margin: 0;
	padding: 0;
}
.brini-block--contact .sellabees-contact__details li {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	line-height: 30px;
	font-weight: 300;
}
.brini-block--contact .sellabees-contact__details a {
	color: var(--sellabees-black, #1a1a1a);
	text-decoration: none;
}
.brini-block--contact .sellabees-contact__details a:hover {
	color: var(--sellabees-green, #2d572c);
}
.brini-block--contact .sellabees-contact__icon {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--sellabees-green, #2d572c);
}

/* Openingstijden (template-parts/contact-hours.php) — onder de contactgegevens:
   dag links, tijden rechts uitgelijnd, zelfde tekststijl als de gegevens-lijst. */
.brini-block--contact .sellabees-contact__hours-wrap {
	margin-top: 28px;
}
.brini-block--contact .sellabees-contact__subheading {
	font-family: var(--sellabees-font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 30px;
	color: var(--sellabees-black, #1a1a1a);
	margin: 0 0 6px;
}
.brini-block--contact .sellabees-contact__hours {
	width: 100%;
	max-width: 280px;
	border-collapse: collapse;
	font-size: 14px;
	font-weight: 300;
}
.brini-block--contact .sellabees-contact__hours th,
.brini-block--contact .sellabees-contact__hours td {
	border: 0;
	padding: 3px 0;
	line-height: 24px;
	background: none;
}
.brini-block--contact .sellabees-contact__hours th {
	font-weight: 300;
	text-align: left;
	white-space: nowrap;
}
.brini-block--contact .sellabees-contact__hours td {
	text-align: right;
	white-space: nowrap;
}
/* Gesloten dagen (feestdagen) onder de tijden. */
.brini-block--contact .sellabees-contact__subheading--sm {
	margin-top: 22px;
	font-size: 13px;
}
.brini-block--contact .sellabees-contact__closed {
	margin: 0;
	font-size: 14px;
	font-weight: 300;
	line-height: 24px;
	color: var(--sellabees-black, #1a1a1a);
}

/* --- Formulier ----------------------------------------------------------- */
.brini-block--contact .sellabees-contact__form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px 27px;
}
.brini-block--contact .sellabees-contact__field {
	display: flex;
	flex-direction: column;
}
.brini-block--contact .sellabees-contact__field--full {
	grid-column: 1 / -1;
}
.brini-block--contact .sellabees-contact__field label {
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 14px;
	line-height: 30px;
	color: var(--sellabees-black, #1a1a1a);
	margin-bottom: 6px;
}
.brini-block--contact .sellabees-contact__field input,
.brini-block--contact .sellabees-contact__field textarea {
	background: var(--sellabees-search-bg, #f4f4f4);
	border: 0;
	border-radius: 0;
	font-family: var(--sellabees-font-body);
	font-size: 14px;
	color: var(--sellabees-black, #1a1a1a);
	padding: 0 16px;
	width: 100%;
	box-sizing: border-box;
}
.brini-block--contact .sellabees-contact__field input {
	height: 44px;
}
.brini-block--contact .sellabees-contact__field textarea {
	min-height: 122px;
	padding: 13px 16px;
	resize: vertical;
	line-height: 1.4;
}
.brini-block--contact .sellabees-contact__field input:focus,
.brini-block--contact .sellabees-contact__field textarea:focus {
	outline: 2px solid var(--sellabees-green, #2d572c);
}
.brini-block--contact .sellabees-contact__actions {
	grid-column: 1 / -1;
	display: flex;
	justify-content: flex-end;
}
.brini-block--contact .sellabees-contact__submit {
	background: var(--sellabees-green, #2d572c);
	color: var(--sellabees-white, #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;
}
.brini-block--contact .sellabees-contact__submit:hover {
	background: var(--sellabees-green-dark, #1f3d1e);
}
.brini-block--contact .sellabees-contact__notice {
	grid-column: 1 / -1;
	font-size: 14px;
	font-weight: 400;
	padding: 12px 16px;
	margin: 0 0 20px;
}
.brini-block--contact .sellabees-contact__notice--ok {
	background: #e7f4e8;
	border-left: 4px solid #2e7d32;
	color: #1f5d23;
}
.brini-block--contact .sellabees-contact__notice--err {
	background: #fbeaec;
	border-left: 4px solid var(--sellabees-green, #2d572c);
	color: var(--sellabees-green-dark, #1f3d1e);
}

/* --- Achtergrondvarianten (button_group bg) ------------------------------ */
.brini-block--contact.brini-block--bg-grijs {
	background: var(--sellabees-search-bg, #f4f4f4);
}
.brini-block--contact.brini-block--bg-grijs .sellabees-contact__field input,
.brini-block--contact.brini-block--bg-grijs .sellabees-contact__field textarea {
	background: var(--sellabees-white, #fff);
}
.brini-block--contact.brini-block--bg-groen {
	background: var(--sellabees-green, #2d572c);
	color: var(--sellabees-white, #fff);
}
.brini-block--contact.brini-block--bg-groen .brini-block__title,
.brini-block--contact.brini-block--bg-groen .sellabees-contact__heading,
.brini-block--contact.brini-block--bg-groen .sellabees-contact__intro p,
.brini-block--contact.brini-block--bg-groen .sellabees-contact__field label,
.brini-block--contact.brini-block--bg-groen .sellabees-contact__details li,
.brini-block--contact.brini-block--bg-groen .sellabees-contact__details a {
	color: var(--sellabees-white, #fff);
}
.brini-block--contact.brini-block--bg-groen .sellabees-contact__icon,
.brini-block--contact.brini-block--bg-groen .sellabees-contact__details a:hover {
	color: var(--sellabees-gold, #fcc72d);
}
.brini-block--contact.brini-block--bg-groen .sellabees-contact__field input,
.brini-block--contact.brini-block--bg-groen .sellabees-contact__field textarea {
	background: var(--sellabees-white, #fff);
	color: var(--sellabees-black, #1a1a1a);
}
.brini-block--contact.brini-block--bg-groen .sellabees-contact__submit {
	background: var(--sellabees-gold, #fcc72d);
	color: var(--sellabees-ink, #2b2b2b);
}
.brini-block--contact.brini-block--bg-groen .sellabees-contact__submit:hover {
	background: #e6b41f;
}
/* Bij een volledig groen blok is de titelband onnodig (zou wegvallen tegen de
   achtergrond) — dan alleen de ruimte eronder houden. */
.brini-block--contact.brini-block--bg-groen .brini-block--contact__head {
	background: none;
	padding: 0;
}
.brini-block--contact.brini-block--bg-groen.brini-block--contact--has-head {
	padding-top: 56px;
}

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

@media (max-width: 768px) {
	/* GEEN padding-shorthand hier: die zette de bovenpadding terug en dan sluit de
	   groene titelband niet meer tegen de header aan (zie --has-head hierboven). */
	.brini-block--contact .brini-block__title {
		font-size: 28px;
	}
	.brini-block--contact .brini-block--contact__head {
		padding: 22px 0;
		margin-bottom: 28px;
	}
	.brini-block--contact .sellabees-contact__heading {
		font-size: 30px;
		margin-bottom: 20px;
	}
	.brini-block--contact .sellabees-contact__grid {
		gap: 40px;
	}
	.brini-block--contact .sellabees-contact__form {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.brini-block--contact .sellabees-contact__intro {
		margin-bottom: 24px;
	}
	.brini-block--contact .sellabees-contact__actions {
		justify-content: stretch;
	}
	.brini-block--contact .sellabees-contact__submit {
		width: 100%;
	}
}

/* Kleine telefoons (≤480px): koppen en witruimte een maat kleiner, zodat de titelband
   en de twee koppen niet het halve scherm vullen. */
@media (max-width: 480px) {
	.brini-block--contact {
		padding-bottom: 40px;
	}
	.brini-block--contact .brini-block--contact__head {
		padding: 18px 0;
		margin-bottom: 22px;
	}
	.brini-block--contact .brini-block__title {
		font-size: 24px;
	}
	.brini-block--contact .sellabees-contact__heading {
		font-size: 24px;
		margin-bottom: 16px;
	}
	.brini-block--contact .sellabees-contact__grid {
		gap: 32px;
	}
	.brini-block--contact .sellabees-contact__field textarea {
		min-height: 104px;
	}
}