/*
Theme Name: CV Onderhoud Ede
Theme URI: https://cvonderhoudede.nl/
Author: CV Onderhoud Ede
Description: Thema voor CV Onderhoud Ede, gespecialiseerd in cv-onderhoud, storingen, cv-ketel vervangen en loodgieterswerk in Ede en omgeving. Rendert alle pagina-inhoud uit JSON in postmeta, met een eigen SEO-kop, een JSON-LD-graph en een leadformulier met bijlagen. Geen pagebuilder, geen externe fonts, geen jQuery.
Version: 3.0.0
Requires at least: 6.2
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cvoe
Tags: dienstensite, lokaal, nederlands
*/

/* De opmaak staat in assets/css/factory.css. Dat is de stylesheet van factory-pilot,
   het ontwerp dat de eigenaar op zijn andere sites gebruikt,
   ongewijzigd overgenomen zodat deze site er niet ongeveer zo uitziet maar precies zo.
   functions.php laadt dat bestand.

   Hieronder alleen wat van DEZE site is en nergens anders hoort. Houd het kort: elke
   regel die hier bij komt is een plek waar de twee sites uit elkaar kunnen gaan lopen. */

/* Het merkteken in de kop is een SVG met eigen kleuren; het ontwerp gaat uit van een
   vierkant beeldmerk van 64 bij 64. */
.c-brand__mark {
	border-radius: 10px;
}

/* Tabellen. Het ontwerp heeft ze niet, want cvonderhouddenbosch.nl gebruikt nergens
   een tabel. Deze site wel: foutcodes, keteltypes en repareren tegen vervangen lezen
   als tabel beter dan als lopende tekst. Opgebouwd uit de tokens van het ontwerp, zodat
   hij er niet als een vreemde eend bij staat. */
.p-tabel {
	margin-top: var(--s-6);
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	/*
	 * Op een telefoon past een tabel van drie kolommen niet en schuift hij opzij. Dat
	 * werkte al, maar je zag het niet: de derde kolom liep gewoon het scherm uit. Deze
	 * schaduw aan de rand staat er alleen zolang er nog iets naast staat, dankzij
	 * background-attachment local voor de dekkende vlakken en scroll voor de schaduw.
	 */
	background-image:
		linear-gradient(to right, var(--paper) 30%, rgba(255, 255, 255, 0)),
		linear-gradient(to left, var(--paper) 30%, rgba(255, 255, 255, 0)),
		radial-gradient(farthest-side at 0 50%, rgba(16, 37, 54, 0.14), rgba(16, 37, 54, 0)),
		radial-gradient(farthest-side at 100% 50%, rgba(16, 37, 54, 0.14), rgba(16, 37, 54, 0));
	background-position: 0 0, 100% 0, 0 0, 100% 0;
	background-repeat: no-repeat;
	background-size: 44px 100%, 44px 100%, 15px 100%, 15px 100%;
	background-attachment: local, local, scroll, scroll;
}

.p-tabel table {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-size: 0.92rem;
	line-height: 1.5;
}

.p-tabel th,
.p-tabel td {
	padding: var(--s-3) var(--s-5);
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--line);
}

.p-tabel thead th {
	font-size: var(--t-micro);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ember-700);
	background: var(--paper-sunk);
	white-space: nowrap;
}

.p-tabel tbody th {
	font-weight: 700;
	color: var(--soot-800);
}

.p-tabel td {
	color: var(--text-muted);
}

.p-tabel tr:last-child th,
.p-tabel tr:last-child td {
	border-bottom: 0;
}

/* De skiplink hoort er te zijn en pas zichtbaar te worden bij toetsenbordfocus. */
.p-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: 12px 18px;
	background: var(--soot-900);
	color: var(--text-on-dark);
	text-decoration: none;
}

.p-skip:focus {
	left: 0;
}

/* Een tekstblok zonder zijkaart. Het ontwerp zet de leeskolom dan links en laat de
   rechterhelft leeg, want daar hoort normaal de kaart. Op pagina's met meer dan twee
   tekstblokken is die kaart er niet meer, en dan staat de tekst scheef in het beeld.
   Centreren maakt er een bewuste leeskolom van in plaats van een gat. */
.c-prose-block--reading-column .c-prose-block__main {
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
 * Ruimte onder de hero met formulier
 *
 * Het formulierpaneel in de hero hangt onder de hero uit: 98 pixels op breed
 * scherm en 125 pixels tussen 701 en 1050 pixels. De sectie eronder krijgt die
 * ruimte erbij, anders loopt het paneel over de eerste regels heen. Onder de 700
 * pixels staat het paneel gewoon in de stroom en is er niets nodig. De balk met
 * punten is geen p-section en staat daarom apart genoemd.
 * ------------------------------------------------------------------------ */
@media (width > 700px) {
	.c-leadhero--split-form + .p-section,
	.c-leadhero--split-form + .c-trust {
		padding-top: calc(98px + var(--s-5));
	}
}

@media (width > 700px) and (width <= 1050px) {
	.c-leadhero--split-form + .p-section,
	.c-leadhero--split-form + .c-trust {
		padding-top: calc(125px + var(--s-5));
	}
}

/* --------------------------------------------------------------------------
 * Telefoonnummers breken niet af
 *
 * Midden in een lopende zin brak het nummer af na het netnummer, waardoor het eerste
 * deel op de ene regel stond en de rest op de volgende. Een telefoonnummer lees je
 * als een geheel.
 * ------------------------------------------------------------------------ */
a[href^="tel:"] {
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * Tabellen op een telefoon
 *
 * Drie kolommen passen niet op 390 pixels. De tabel schoof opzij, maar dat zag je
 * niet: de laatste kolom liep het scherm uit en er was niets dat uitnodigde om te
 * vegen. Onder de 700 pixels staat elke rij daarom als een blokje onder elkaar, met
 * het kolomlabel voor de waarde.
 * ------------------------------------------------------------------------ */
@media (width <= 700px) {
	.p-tabel {
		overflow-x: visible;
		background-image: none;
	}

	.p-tabel table {
		min-width: 0;
	}

	.p-tabel thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.p-tabel tr {
		display: block;
		padding: var(--s-4) var(--s-5);
		border-bottom: 1px solid var(--line);
	}

	.p-tabel tr:last-child {
		border-bottom: 0;
	}

	.p-tabel th,
	.p-tabel td {
		display: block;
		padding: 0;
		border-bottom: 0;
	}

	.p-tabel tbody th {
		font-size: 1rem;
		margin-bottom: var(--s-2);
	}

	.p-tabel td + td,
	.p-tabel th + td {
		margin-top: var(--s-2);
	}

	.p-tabel td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 2px;
		font-size: var(--t-label);
		font-weight: 800;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--ember-700);
	}
}

/* --------------------------------------------------------------------------
 * Beeld in de hero en in de prijsband loopt door tot de schermrand
 *
 * Twee secties hebben een gesplitste achtergrond die over de volle breedte loopt:
 * de hero (warm wit links, koel grijs rechts) en de prijsband (donkerblauw links,
 * grijs rechts). De foto ernaast staat in de rechterkolom van de container en die
 * is 1180 pixels breed. Op een scherm van 1440 pixels blijft daardoor 110 pixels
 * grijs over aan de rechterkant, op 1900 pixels 340 en op 2560 pixels 670. Dat
 * leest niet als een marge maar als een foto die is afgesneden.
 *
 * Hieronder loopt de foto door tot de rand. De tekstkolom houdt precies de breedte
 * die hij in het ontwerp heeft (0,465 van de container in de hero, 0,525 in de
 * prijsband), de foto krijgt alles wat er rechts nog over is, en de formulierkaart
 * blijft uitgelijnd op de container in plaats van op de schermrand.
 *
 * Waarom 100% en niet 100vw: 100vw telt de verticale schrolbalk mee en dan steekt
 * het blok een paar pixels buiten het scherm, met een horizontale schrolbalk als
 * gevolg. De sectie zelf is al zo breed als het scherm, dus 100% erbinnen klopt.
 *
 * Onder 1221 pixels is er naast de container geen ruimte meer en verandert er niets.
 * Onder 1050 pixels staat alles onder elkaar; die stapeling blijft zoals hij was.
 * ------------------------------------------------------------------------ */
@media (width >= 1221px) {
	.c-leadhero--split-form,
	.c-leadhero--split-media,
	.c-price--split-photo {
		--rand: calc((100% - var(--container) - var(--gutter) * 2) / 2);
	}

	/* De grens tussen warm en koel schuift mee met de tekstkolom, anders komt er op
	   zeer brede schermen een grijze strook tussen de tekst en de foto. */
	.c-leadhero--split-form,
	.c-leadhero--split-media {
		background: linear-gradient(
			90deg,
			#fbfaf8 0 calc(var(--rand) + var(--gutter) + var(--container) * 0.465),
			var(--split-cool) 0 100%
		);
	}

	.c-leadhero--split-form .c-leadhero__inner,
	.c-leadhero--split-media .c-leadhero__inner,
	.c-price--split-photo .c-price__grid {
		width: 100%;
		max-width: none;
		padding-left: calc(var(--rand) + var(--gutter));
		padding-right: 0;
	}

	.c-leadhero--split-form .c-leadhero__inner,
	.c-leadhero--split-media .c-leadhero__inner {
		grid-template-columns: calc(var(--container) * 0.465) minmax(0, 1fr);
	}

	.c-price--split-photo .c-price__grid {
		grid-template-columns: calc(var(--container) * 0.525) minmax(0, 1fr);
	}

	.c-leadhero--split-form .c-leadhero__card {
		right: calc(var(--rand) + 10px);
	}
}

/* De knop in de kop. Het ontwerp gaat uit van "Storing melden": veertien tekens die
   op een telefoon op een regel passen. Deze site heeft "Offerte aanvragen", drie
   tekens langer, en dan breekt de knop op 390 pixels over twee regels en duwt hij het
   merk opzij. De vaste balk onderaan heeft dezelfde knop, dus onder 560 pixels kan
   hij hier weg zonder dat er een oproep tot actie verdwijnt. */
@media (width <= 560px) {
	.c-header__cta {
		display: none;
	}
}

/* Het contactblok op de contactpagina staat in het kaartraster van het ontwerp. Vier
   korte kaarten naast elkaar worden anders vier smalle kolommen met een woord per
   regel; op drie kolommen blijven adres en openingstijden leesbaar. */
.p-contactkaarten .c-svccard__grid--n4 {
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/* Tikdoelen. Het aangeleverde ontwerp haalt op een telefoon de eis van 44 bij 44 niet:
   de invoervelden en de keuzelijst zijn 40 pixels hoog, de kruisknop van het menu is
   27 breed, en de links in kaarten en voet zijn 14 tot 21 pixels hoog waar 24 de eis
   is. Dat is een harde regel, ook als het ontwerp hem breekt. Deze regels raken alleen
   de hoogte en de binnenmarge, niet de vorm of de kleur, dus het ontwerp blijft heel. */
.c-form input[type="text"],
.c-form input[type="email"],
.c-form input[type="tel"],
.c-form select,
.c-form textarea,
.p-field input,
.p-field select,
.p-field textarea,
input.p-input,
select.p-select {
	min-height: 44px;
}

.c-sheet__close {
	min-width: 44px;
	min-height: 44px;
}

.c-brand {
	min-height: 44px;
}

.c-svccard__link,
.c-footer__meer,
.p-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 24px;
}

.c-footer a,
.c-footer__bottom a {
	display: inline-block;
	padding-block: 5px;
}

.c-footer__acties a,
.c-footer__tel {
	padding-block: 0;
}

/* Vier dienstkaarten. Het ontwerp zet elk compact kaartraster op drie kolommen
   (.c-svccard--compact-grid wint van de n-klasse), en dan blijft de vierde kaart
   alleen op een tweede rij staan. Deze site heeft vier secties met precies vier
   kaarten. Boven 1050 pixels krijgt de n-klasse hier voorrang, zodat vier kaarten
   op een rij staan zoals de vier zekerheden erboven. Onder die breedte houden de
   responsieve regels van het ontwerp het over. */
@media (width >= 1051px) {
	.c-svccard--compact-grid .c-svccard__grid--n1 {
		grid-template-columns: minmax(0, 420px);
	}

	.c-svccard--compact-grid .c-svccard__grid--n2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.c-svccard--compact-grid .c-svccard__grid--n4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---------------------------------------------------------------------------
 * Voet: uitlijning
 *
 * Vier dingen liepen in de voet niet netjes, in alle drie de sites op dit
 * ontwerp. Het zijn geen smaakkwesties maar uitlijnfouten, en ze zijn hier
 * gecorrigeerd zonder aan factory.css te komen:
 *
 * 1. Een tweede h3 in dezelfde kolom (Kennisbank onder de knoppen) had
 *    margin-top 0 en plakte tegen het blok erboven.
 * 2. De knoppen in de voet stonden op display:block, waardoor het pijltje
 *    achter de tekst op een tweede regel viel.
 * 3. "Het hele werkgebied" brak om dezelfde reden af.
 * 4. De werkgebiedlijst stond in twee kolommen van 146 pixels. Daar past geen
 *    enkele plaatsnaam op een regel, dus alles brak af en de rijen liepen uit
 *    elkaar. Nu een kolom, met zes plaatsen, even hoog als de dienstenkolom.
 * ------------------------------------------------------------------------- */

.c-footer__col ul + h3,
.c-footer__col .c-footer__acties + h3 {
	margin-top: var(--s-6);
}

.c-footer__col .c-footer__btn {
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	display: inline-flex;
}

.c-footer__col .c-footer__addr + .c-footer__acties {
	margin-top: var(--s-5);
}

.c-footer__col .c-footer__acties + .c-footer__cert {
	margin-top: var(--s-5);
}

.c-footer__col .c-footer__meer {
	align-items: center;
	flex-wrap: nowrap;
	gap: 7px;
	white-space: nowrap;
	width: max-content;
	max-width: 100%;
	display: inline-flex;
}

.c-footer__col .c-footer__meer svg,
.c-footer__col .c-footer__btn svg {
	flex: none;
	display: block;
}

.c-footer__col--area ul {
	grid-template-columns: 1fr;
}

@media (width <= 700px) {
	/* Op een telefoon blijven de pillen van het ontwerp staan. */
	.c-footer__col--area ul {
		flex-wrap: wrap;
		gap: 8px;
		display: flex;
	}

	.c-footer__col .c-footer__btn {
		justify-content: center;
		width: 100%;
	}

	/*
	 * Op een telefoon was het telefoonnummer de opvallende oranje knop van het
	 * ontwerp. Dat nummer staat er niet meer, dus neemt de belknop die rol over.
	 */
	.c-footer__col .c-footer__btn[href^="tel:"] {
		background: var(--ember-600);
		border-color: transparent;
		min-height: 52px;
		font-size: 1.08rem;
	}

	.c-footer__col .c-footer__btn[href^="tel:"]:hover {
		background: var(--ember-700);
	}
}

/* De hulpregel onder het bijlageveld stond op de browserstandaard: 13,3 pixels in de
   volle tekstkleur, dus groter en donkerder dan het label erboven. Daardoor trok de
   uitleg meer aandacht dan de vraag zelf. Nu is hij een stille voetnoot bij het veld. */
.p-field small,
.c-leadform__files small {
	display: block;
	margin-top: 6px;
	font-size: 0.72rem;
	line-height: 1.45;
	color: var(--text-muted);
}

/* De kop van de leadhero staat in het ontwerp op hyphens:auto en op max-width 18ch.
   "CV onderhoud Ede" past daar net niet in en werd afgebroken tot "CV onder-houd Ede".
   Een merknaam hoort niet met een koppelteken doormidden. Afbreken uit, en breken op
   de spatie laten gebeuren; overflow-wrap blijft staan voor het geval er ooit een
   plaatsnaam komt die op zichzelf al te lang is. */
.c-leadhero__title,
.c-hero__title,
.p-display {
	hyphens: none;
	-webkit-hyphens: none;
}