/* =========================================================================
   Contactpagina — Figma-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);
}

/* Klantfeedback: adres op één regel + klikbaar naar Google Maps.
   In het Figma-design (482:10339) staat het adres ook op één regel. */
.sellabees-contact__address {
	white-space: nowrap;
}

.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;
}

/* Keureparatie-tekst hoort bij de Zaterdag-openingstijd en staat op één regel
   (Figma 482:10364, vierde regel onder "10.00 - 14.00 uur"). Op desktop dwingen
   we één regel af; op smal mobiel (Figma 487:36170) mag hij netjes afbreken. */
.sellabees-contact__hours-note {
	font-size: 14px;
	line-height: 16px;
	display: inline-block;
	white-space: nowrap;
}

.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; /* Figma 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 (Figma 487:35845, 393px) ------------------------------------ */
@media (max-width: 981px) {
	/* 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;
	}

	/* Op smal mobiel past de keureparatie-tekst niet op één regel (Figma
	   487:36170 breekt hem ook af) — laat hem dus netjes afbreken. */
	.sellabees-contact__hours-note {
		white-space: normal;
	}

	/* Adres mag op mobiel afbreken als de schermbreedte het dwingt. */
	.sellabees-contact__address {
		white-space: normal;
	}

	/* 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%;
	}
}

/* =========================================================================
   Contactpagina via PAGINABLOKKEN (Figma 482:10111).
   De pagina rendert: paginakop (grijze hero) + tekst (intro) + een 2-koloms
   rij [contact_info | formulier]. page-contact.php wikkelt de twee kolom-
   blokken in .sellabees-contact__cols; hieronder de layout daarvoor.
   ALLES gescoped onder .sellabees-contact-blocks → raakt geen andere pagina
   (contact_info wordt elders, bv. onze-showroom, als kaarten getoond).
   ========================================================================= */

/* --- Grijze hero: titel (paginakop) + intro (tekst) als één grijze balk --- */
.sellabees-contact-blocks > .sellabees-block--paginakop {
	display: block;            /* flex-centrering uit → titel bovenaan */
	min-height: 0;
	padding-top: 50px;         /* Figma: titel ~50px onder de balk-bovenkant */
	padding-bottom: 0;
}
.sellabees-contact-blocks > .sellabees-block--tekst {
	background: var(--sellabees-search-bg);   /* zelfde grijs → één doorlopende hero */
	padding-top: 8px;          /* kleine ruimte titel → intro */
	padding-bottom: 50px;
}
/* Intro-typografie 1:1 met Figma 482:10379: Avenir 45 Book 14px, regelhoogte 26px,
   en GEEN witruimte tussen de drie alinea's (in de design staan ze met `mb-0`
   direct onder elkaar → de hele tekstblok is 3 × 26 = 78px hoog). Stond hier op
   16px/1.6 mét 16px alinea-marge, waardoor het blok 109px werd: te grote letter
   én de regels te ver uit elkaar (klantfeedback). Alleen binnen
   .sellabees-contact-blocks — het `tekst`-blok staat óók op Algemene voorwaarden,
   Privacy en Over Brock, en die houden hun eigen leesbare 16px/1.6. */
.sellabees-contact-blocks > .sellabees-block--tekst .sellabees-block__body {
	max-width: none;           /* intro vol-breedte (Figma 1417px) */
	font-size: 14px;
	line-height: 26px;
	color: var(--sellabees-text);
}
.sellabees-contact-blocks > .sellabees-block--tekst .sellabees-block__body > * {
	margin-block: 0;
}

/* --- 2-koloms rij: contactgegevens (links) + formulier (rechts) ---------- */
/* Figma: sectie 104px ingesprongen binnen de 1410-content → info-kolom ~431px,
   gap 28px, formulier-kolom 743px. De grid-cellen zijn de twee blok-secties. */
.sellabees-contact__cols-grid {
	display: grid;
	/* PROPORTIONEEL (Figma-ratio info 431 : formulier 743) i.p.v. een vaste 743px,
	   zodat beide kolommen samen krimpen en het formulier NOOIT over de info-kolom
	   heen loopt op smallere schermen. minmax(0,…fr) staat krimpen onder content-min toe. */
	grid-template-columns: minmax(0, 431fr) minmax(0, 743fr);
	column-gap: 28px;
	align-items: start;
	padding-inline: calc(var(--sellabees-gutter) + 104px);
	padding-block: 50px;       /* ruimte onder de hero (Figma ~51px) */
}
/* Onder ~1280px is de 104px-inspringing te veel (info-kolom wordt te krap) →
   terug naar alleen de gutter, zodat de 2 kolommen ademruimte houden. */
@media (max-width: 1280px) {
	.sellabees-contact__cols-grid {
		padding-inline: var(--sellabees-gutter);
		column-gap: 32px;
	}
}
/* Kolom-blokken vullen hun cel: eigen container + sectiepadding uitschakelen. */
.sellabees-contact__cols-grid > .sellabees-block {
	padding-block: 0;
	min-width: 0;
}
.sellabees-contact__cols-grid > .sellabees-block > .sellabees-container {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
	width: 100%;
}

/* --- Contactgegevens 1:1 (Figma 482:10111): icoon-lijst + openingstijden-tabel --- */
.sellabees-contact__cols .sellabees-block--contact_info__grid {
	display: flex;
	flex-direction: column;
	gap: 0;
}
/* Adres/telefoon/e-mail: icoon links + waarde op één regel; geen kaart, geen label. */
.sellabees-contact__cols .sellabees-block--contact_info__card {
	flex-direction: row;
	align-items: center;
	gap: 14px;
	border: 0;
	border-radius: 0;
	background: none;
	padding: 0;
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 14px;
	line-height: 30px;
	color: var(--sellabees-black);
}
.sellabees-contact__cols .sellabees-block--contact_info__icon {
	flex: 0 0 19px;
	width: 19px;
	height: 19px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	color: var(--sellabees-red);
	margin: 0;
}
/* Figma-iconen op natuurlijke maat (pin 14×19, telefoon/mail 19×19): hoogte vast,
   breedte naar verhouding. */
.sellabees-contact__cols .sellabees-block--contact_info__icon-svg {
	width: auto;
	height: 19px;
	display: block;
}
/* Adres op één regel (Figma 482:10339) — geldt ook voor de adres-link. */
.sellabees-contact__cols .sellabees-block--contact_info__card--location .sellabees-block--contact_info__text,
.sellabees-contact__cols .sellabees-block--contact_info__card--location .sellabees-block--contact_info__value {
	white-space: nowrap;
}
.sellabees-contact__cols .sellabees-block--contact_info__body {
	gap: 0;
	/* De body is een flex-kind en kromp om zijn inhoud (401px in een kaart van
	   431px), waardoor de openingstijden-tabel 30px ruimte liet liggen en de
	   toelichting-regel precies 1px te kort kwam voor één regel. `align-self`
	   is hier de werkzame eigenschap, niet flex-grow: de kaart is een kolom-flex,
	   dus de breedte komt van de kruis-as. */
	flex: 1 1 auto;
	align-self: stretch;
	min-width: 0;
}
.sellabees-contact__cols .sellabees-block--contact_info__text,
.sellabees-contact__cols .sellabees-block--contact_info__value {
	margin: 0;
	font-size: 14px;
	line-height: 30px;
	font-weight: 300;
	color: var(--sellabees-black);
	text-decoration: none;
}
.sellabees-contact__cols a.sellabees-block--contact_info__value:hover {
	color: var(--sellabees-red);
}
/* Openingstijden + gesloten: GÉÉN icoon → kop links uitgelijnd met de iconenrand. */
.sellabees-contact__cols .sellabees-block--contact_info__card--clock {
	flex-direction: column;
	align-items: flex-start;
	margin-top: 38px;
}
.sellabees-contact__cols .sellabees-block--contact_info__card--clock .sellabees-block--contact_info__icon {
	display: none;
}
/* Subkop ("Openingstijden showroom:" / "Gesloten ivm feestdagen:") — Impact uppercase. */
.sellabees-contact__cols .sellabees-block--contact_info__subheading {
	margin: 0 0 14px;
	font-family: var(--sellabees-font-heading);
	font-weight: 400;
	font-size: 20px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--sellabees-black);
}
.sellabees-contact__cols .sellabees-block--contact_info__subheading--sm {
	font-size: 16px;
	margin-top: 30px;
}
/* Openingstijden-tabel: dag | tijd (th 130px). */
.sellabees-contact__cols .sellabees-block--contact_info__hours {
	border-collapse: collapse;
	/* 431px = breedte van de info-kolom in Figma. Als percentage (niet vast), zodat
	   de tabel op smalle schermen meekrimpt i.p.v. buiten de kolom te lopen. Dat
	   werkt alleen doordat de body hierboven op stretch staat — anders krimpt die
	   om zijn inhoud en valt de tabel terug op 401px, waardoor de toelichting-regel
	   1px te kort kwam voor één regel. */
	width: 100%;
	max-width: 431px;
	margin: 0;
}
.sellabees-contact__cols .sellabees-block--contact_info__hours th,
.sellabees-contact__cols .sellabees-block--contact_info__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;
}
/* 103px = Figma-afstand tussen de dag- en tijdkolom (dagen op x=359 in node
   482:10362, tijden op x=462 in 482:10364). Stond op 130px, waardoor de
   tijdkolom 27px te smal werd en de toelichting hieronder afbrak. */
.sellabees-contact__cols .sellabees-block--contact_info__hours th {
	width: 103px;
	padding-right: 16px;
}
/* Toelichting tussen haakjes: eigen regel, krappere regelafstand.
   Figma 482:10364 zet de tijden op leading 30px en deze regel op 16px. */
.sellabees-contact__cols .sellabees-block--contact_info__hours-note {
	display: block;
	line-height: 16px;
}
/* Gesloten-dagen (op aparte regels). */
.sellabees-contact__cols .sellabees-block--contact_info__note {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	font-weight: 300;
	color: var(--sellabees-black);
}

/* --- Formulier vult de rechterkolom (743px) ------------------------------ */
.sellabees-contact__cols .sellabees-block--formulier__form {
	max-width: none;
}
.sellabees-contact__cols .sellabees-block--formulier .sellabees-block__title {
	margin-top: 0;
}

/* --- Responsive: kolommen onder elkaar (≤981px) -------------------------- */
@media (max-width: 981px) {
	.sellabees-contact__cols-grid {
		grid-template-columns: 1fr;
		row-gap: 36px;
		padding-inline: clamp(14px, 5vw, 22px);
		padding-block: 32px;
	}
	.sellabees-contact-blocks > .sellabees-block--paginakop {
		padding-top: 32px;
	}
	.sellabees-contact-blocks > .sellabees-block--tekst {
		padding-bottom: 32px;
	}
}