/* =============================================================================
   Hinke. Trendstore — blok "contactblok" (node 2201:9407, "Contact").

   Ontwerp op canvas 1920, binnen de 1320-container (x=300 … 1620):
     kolomkop        DM Serif Display 30 in #efc2bd, h=41, 21px boven de inhoud
     gegevens  x=299 breed 376 — icoon 17–18px + tekst 14/19, rijafstand 39
     tijden    x=300 dagen w=72 · x=412 tijden w=86 — 7 rijen van 29 = 203
     formulier x=744 breed 877 — velden 877×44 (afstand 60), vlak 877×122,
                     knop 314×44 rechts uitgelijnd op x=1307 (#d3bb6c)
                     velden zijn VLAKKEN: vulling #f5f5f5, GEEN rand, GEEN radius
                     (nodes 2201:9587–9590), tekst erin Outfit 14/30 in #4e4e4e

     376 + 67 + 877 = 1320 → de kolomafstand is 67px.
   ========================================================================== */

.hinke-contact__intro {
	max-width: 671px;
	margin: 0 auto 42px;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 26px;
	color: var(--hinke-body);
	text-align: center;
}

.hinke-contact__intro p {
	margin: 0;
}

.hinke-contact {
	display: grid;
	grid-template-columns: 376px minmax(0, 1fr);
	column-gap: 67px;
	align-items: start;
}

.hinke-contact__kop {
	margin: 0 0 21px;
	font-family: var(--hinke-font-heading);
	font-weight: 400;
	font-size: 30px;
	line-height: 41px;
	color: var(--hinke-pink);
}

/* De openingstijden staan 32px onder de laatste contactregel. */
.hinke-contact__kop--tijden {
	margin-top: 32px;
}

/* -----------------------------------------------------------------------------
   Contactgegevens — icoon + tekst, rijafstand 39 (19 tekst + 20 ruimte)
   -------------------------------------------------------------------------- */

.hinke-contact__lijst {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hinke-contact__rij {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 19px;
	color: var(--hinke-body);
}

.hinke-contact__rij + .hinke-contact__rij {
	margin-top: 20px;
}

.hinke-contact__icoon {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	object-fit: contain;
}

.hinke-contact__rij a {
	color: inherit;
	text-decoration: none;
}

.hinke-contact__rij a:hover,
.hinke-contact__rij a:focus-visible {
	color: var(--hinke-gold);
}

/* -----------------------------------------------------------------------------
   Openingstijden — 2 kolommen, rijhoogte 29
   -------------------------------------------------------------------------- */

/* Automatische tabelindeling: met table-layout: fixed negeert Chrome de opgegeven
   kolombreedtes en verdeelt 198px gelijk (2 × 99). */
.hinke-contact__tijden {
	width: 198px;
	border-collapse: collapse;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 29px;
	color: var(--hinke-body);
}

.hinke-contact__dag,
.hinke-contact__tijd {
	padding: 0;
	font-weight: 400;
	text-align: left;
	white-space: nowrap;
}

/* 112 = 72 tekst + 40 kolomafstand, zodat de tijden op x=412 beginnen. */
.hinke-contact__dag {
	width: 112px;
	padding-right: 40px;
}

.hinke-contact__tijd {
	width: 86px;
}

/* -----------------------------------------------------------------------------
   Formulier — de veldnamen zijn die van sellabees-shops-core/inc/contact.php
   -------------------------------------------------------------------------- */

/* De meldingen van de core-handler (?contact=sent|invalid|error) staan niet in het
   ontwerp. Ze volgen daarom de vormtaal van de velden: hetzelfde grijze vlak zonder
   rand, met links een accentbalk in de huisstijlkleur zodat "verzonden" en "er ging
   iets mis" ook zonder de tekst te lezen te onderscheiden zijn. */
.hinke-contact__melding {
	margin: 0 0 16px;
	padding: 11px 16px;
	border: 0;
	border-left: 3px solid var(--hinke-pink);
	background: var(--hinke-band);
	font-family: var(--hinke-font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 22px;
	color: var(--hinke-body);
}

.hinke-contact__melding--sent {
	border-left-color: var(--hinke-gold);
}

.hinke-contact__veld {
	margin: 0 0 16px; /* 44 + 16 = rijafstand 60 uit het ontwerp. */
}

/* De invoervelden zijn in het ontwerp gevulde grijze vlakken zonder rand: nodes
   2201:9587–9590 hebben fill #f5f5f5 en geen stroke (de hoekpixels van de export
   zijn dekkend grijs, dus ook geen hoekradius). #f5f5f5 is exact --hinke-band, dus
   het bestaande token in plaats van een losse hexwaarde.
   Hoogte 44 = 7 + 30 + 7: het ontwerp zet de tekst (h=30) op y=502 in een vlak dat
   op y=495 begint, dus 7px boven en onder — zonder rand telt de padding volledig mee. */
.hinke-contact__form input,
.hinke-contact__form textarea {
	display: block;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 7px 12px;
	border: 0;
	border-radius: 0;
	background: var(--hinke-band);
	box-shadow: none;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 30px;
	color: var(--hinke-body);
	-webkit-appearance: none;
	appearance: none;
}

/* Tekstvlak 877×122 (node 2201:9590); de tekst begint op y=684 in een vlak op
   y=675, dus 9px boven in plaats van 7. */
.hinke-contact__form textarea {
	height: 122px;
	padding: 9px 12px;
	resize: vertical;
}

/* Chrome kleurt automatisch ingevulde velden lichtgeel en negeert background-color;
   alleen een inset-schaduw over de hele hoogte houdt het grijze vlak overeind. */
.hinke-contact__form input:-webkit-autofill,
.hinke-contact__form input:-webkit-autofill:hover,
.hinke-contact__form input:-webkit-autofill:focus {
	-webkit-box-shadow: inset 0 0 0 44px var(--hinke-band);
	box-shadow: inset 0 0 0 44px var(--hinke-band);
	-webkit-text-fill-color: var(--hinke-body);
}

/* Het ontwerp kent geen focustoestand, maar zonder rand is er niets meer te zien
   voor wie met het toetsenbord werkt. Een outline met negatieve offset valt binnen
   het vlak, dus de veldmaat en de rijafstand van 60 blijven exact gelijk. */
.hinke-contact__form input:focus-visible,
.hinke-contact__form textarea:focus-visible {
	outline: 2px solid var(--hinke-gold);
	outline-offset: -2px;
}

/* In het ontwerp staan de labels als tekst ín het vlak in #4e4e4e (node 2201:9591),
   dezelfde kleur als een ingevulde waarde — dus --hinke-body, niet --hinke-muted. */
.hinke-contact__form ::placeholder {
	color: var(--hinke-body);
	opacity: 1;
}

.hinke-contact__actie {
	display: flex;
	justify-content: flex-end;
	margin: 16px 0 0;
}

.hinke-contact__verzend {
	width: 314px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--hinke-gold);
	font-family: var(--hinke-font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 44px;
	color: var(--hinke-white);
	text-transform: uppercase;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.hinke-contact__verzend:hover,
.hinke-contact__verzend:focus-visible {
	background: var(--hinke-pink);
}

/* -----------------------------------------------------------------------------
   Smal — kolommen onder elkaar
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

	.hinke-contact {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
	}

	.hinke-contact__kop {
		font-size: clamp(22px, 3vw, 30px);
		line-height: 1.35;
	}

	.hinke-contact__verzend {
		width: 100%;
	}
}

/* -----------------------------------------------------------------------------
   Aanraakapparaat — veldtekst 16px en echte aanraakdoelen

   De voorwaarde is hier bewust `(pointer: coarse)` naast de breedte, en niet
   alleen de breedte: een tablet van 1024 is óók een aanraakapparaat, en daar gold
   de vorige versie van deze regels niet (gemeten op 1024 met touch: de tel:- en
   mailto:-links waren daar nog 18px hoog). Andersom blijft een muisapparaat het
   ontwerp precies volgen, ook in een smal venster.
   -------------------------------------------------------------------------- */

@media (max-width: 900px), (pointer: coarse) {

	/* iOS Safari zoomt bij focus automatisch in op een veld met een font-size onder
	   16px en schuift daarmee de hele pagina scheef; terugzoomen moet de bezoeker
	   zelf doen. Het ontwerp zet de veldtekst op 14px (node 2201:9591) en dat gold
	   dus ook op mobiel — gemeten 14px op alle drie de velden én het tekstvlak.
	   De veldhoogte verandert niet: alleen de font-size gaat omhoog, de line-height
	   blijft 30, dus 7 + 30 + 7 = 44 blijft staan. */
	.hinke-contact__form input,
	.hinke-contact__form textarea {
		font-size: 16px;
	}

	/* De contactregels zijn in het ontwerp 19px hoge tekstregels, en het telefoon-
	   en e-mailadres zijn daarin echte links (tel: / mailto:) — precies wat je op
	   een telefoon aantikt. Gemeten was dat aanraakdoel 18px hoog: te klein, WCAG
	   2.5.5 vraagt 44×44. De link wordt een blok van 44px hoog met de tekst
	   verticaal in het midden; de tekst zelf blijft 14/19 zoals in het ontwerp. De
	   rijafstand gaat daarom van 20 naar 8px, zodat het ritme niet uit elkaar valt
	   én twee opeenvolgende aanraakdoelen niet aan elkaar plakken. */
	.hinke-contact__rij {
		align-items: center;
	}

	.hinke-contact__rij a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.hinke-contact__rij + .hinke-contact__rij {
		margin-top: 8px;
	}
}