/*
Theme Name: Schildersbedrijf John
Theme URI: https://schildersbedrijfjohn.nl
Author: Pol-iT
Description: Eigen blokthema voor Schildersbedrijf John. Zwart en goud, zoals de bus.
Version: 1.0.1
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: schildersbedrijf-john
*/

/* Alles wat in theme.json past, staat in theme.json. Hier alleen wat daar niet kan. */

:root {
	--sbj-focus: var(--wp--preset--color--ink);
}

/* Toetsenbordfocus: altijd zichtbaar */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-element-button:focus-visible {
	outline: 3px solid var(--sbj-focus);
	outline-offset: 2px;
}
.has-ink-background-color a:focus-visible,
.has-ink-background-color .wp-element-button:focus-visible,
.sbj-dark a:focus-visible {
	--sbj-focus: var(--wp--preset--color--paper);
}

/* Woordmerk: "Schildersbedrijf" goud, "John" licht */
.sbj-wordmark {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 1.625rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.01em;
	margin: 0;
}
.sbj-wordmark a {
	color: var(--wp--preset--color--gold);
	text-decoration: none;
}
.sbj-wordmark .sbj-wordmark__john {
	color: var(--wp--preset--color--paper);
}

/* Voettekst */
.sbj-footer-title {
	font-family: var(--wp--preset--font-family--source-sans) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	color: var(--wp--preset--color--paper);
}
.sbj-plain-list {
	list-style: none;
	padding-left: 0;
}
.sbj-plain-list li + li {
	margin-top: 0.3em;
}
.sbj-dark a:not(.wp-element-button) {
	color: inherit;
	text-decoration: none;
}
.sbj-dark a:not(.wp-element-button):hover {
	color: var(--wp--preset--color--gold);
	text-decoration: underline;
}
.sbj-dark .sbj-wordmark a,
.sbj-dark .sbj-wordmark a:hover {
	color: var(--wp--preset--color--gold);
	text-decoration: none;
}

/* Het label van de bus: prijskaartje met gaatje */
.sbj-label {
	display: inline-flex !important;
	align-items: center;
	gap: 0.6em;
	width: fit-content;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink) !important;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.2;
	padding: 0.55em 1.1em 0.55em 1.6em !important;
	clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
}
.sbj-label::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--ink);
}

/* Kleine kop boven een sectiekop */
.sbj-eyebrow {
	font-size: var(--wp--preset--font-size--label) !important;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark);
}
.has-ink-background-color .sbj-eyebrow {
	color: var(--wp--preset--color--gold);
}

/* Secundaire knop (rand) */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border-width: 2px;
	padding-top: calc(1rem - 2px);
	padding-bottom: calc(1rem - 2px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink) !important;
	border-color: var(--wp--preset--color--paper);
}
.has-paper-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.has-white-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper) !important;
	border-color: var(--wp--preset--color--ink);
}

/* Dienstkaarten: foto staand, link onderstreept in goud, pijl schuift */
.sbj-card .wp-block-image img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
}
.sbj-card__more a {
	text-decoration: none;
	border-bottom: 2px solid var(--wp--preset--color--gold);
	font-weight: 700;
}
.sbj-card__more a::after {
	content: " →";
	display: inline-block;
	transition: transform 0.15s;
}
.sbj-card__more a:hover::after {
	transform: translateX(4px);
}

/* Projectfoto's: staand en gelijk */
.sbj-projects .wp-block-image img,
.sbj-gallery .wp-block-image img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	width: 100%;
}
.sbj-projects figcaption,
.sbj-gallery figcaption {
	text-align: left;
	color: var(--wp--preset--color--stone);
	font-size: var(--wp--preset--font-size--small);
	margin-top: 0.6em;
}

/* Heldfoto met bijschrift op de foto */
.sbj-hero-photo {
	position: relative;
}
.sbj-hero-photo img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
}
.sbj-hero-photo figcaption {
	position: absolute;
	left: 20px;
	bottom: 20px;
	margin: 0;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--small);
	padding: 0.6em 0.9em;
	border-radius: 4px;
	text-align: left;
}

/* Grote cijfers in de werkwijze */
.sbj-step-number {
	font-family: var(--wp--preset--font-family--fraunces);
	font-weight: 800;
	font-size: 3.5rem !important;
	line-height: 0.9 !important;
	color: var(--wp--preset--color--gold);
	-webkit-text-stroke: 1px var(--wp--preset--color--ink);
	min-width: 1.2ch;
}

/* Lijst met citaten van klanten */
.sbj-quotes > .wp-block-column {
	border-top: 2px solid var(--wp--preset--color--ink);
	padding-top: var(--wp--preset--spacing--40);
}

/* Contactgegevens met iconen */
.sbj-contact-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.sbj-contact-list li {
	padding-left: 2.1rem;
	background-repeat: no-repeat;
	background-size: 1.35rem;
	background-position: 0 0.15em;
}
.sbj-contact-list .sbj-i-phone { background-image: url("assets/icons/phone.svg"); }
.sbj-contact-list .sbj-i-mail  { background-image: url("assets/icons/mail.svg"); }
.sbj-contact-list .sbj-i-clock { background-image: url("assets/icons/clock.svg"); }
.sbj-contact-list .sbj-i-pin   { background-image: url("assets/icons/map-pin.svg"); }
.sbj-contact-list .sbj-phone a {
	font-weight: 700;
	font-size: 1.375rem;
	text-decoration: none;
}

/* Kop van de site: blijft bovenaan */
.sbj-header {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .sbj-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}
.sbj-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* Vaste actiebalk op de telefoon */
.sbj-callbar {
	display: none;
}
@media (max-width: 781px) {
	.sbj-callbar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		gap: 10px;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: var(--wp--preset--color--ink);
		border-top: 1px solid var(--wp--preset--color--ink-2);
		box-shadow: 0 -8px 24px rgb(0 0 0 / 0.35);
	}
	.sbj-callbar a {
		flex: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 52px;
		border-radius: 4px;
		font-weight: 700;
		text-decoration: none;
	}
	.sbj-callbar .sbj-callbar__call {
		background: var(--wp--preset--color--gold);
		color: var(--wp--preset--color--ink);
	}
	.sbj-callbar .sbj-callbar__quote {
		border: 2px solid var(--wp--preset--color--paper);
		color: var(--wp--preset--color--paper);
	}
	body {
		padding-bottom: 80px;
	}
	.sbj-header .sbj-header__phone {
		display: none;
	}
}

/* Recent werk: 4 foto's naast elkaar, op tablet 2 + 2 (nooit 3 + 1) */
@media (max-width: 1100px) {
	.sbj-projects {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* Formulier (WPForms) in de huisstijl: velden over de volle breedte */
.sbj-form .wpforms-container .wpforms-field input:not([type="checkbox"]):not([type="radio"]),
.sbj-form .wpforms-container .wpforms-field textarea,
.sbj-form .wpforms-container .wpforms-field select,
.sbj-form .wpforms-container .wpforms-field-row {
	max-width: 100% !important;
	width: 100% !important;
}
.sbj-form .wpforms-container .wpforms-field-row .wpforms-one-half {
	width: calc(50% - 10px) !important;
}
.sbj-form .wpforms-container input[type="text"],
.sbj-form .wpforms-container input[type="email"],
.sbj-form .wpforms-container input[type="tel"],
.sbj-form .wpforms-container textarea {
	font: inherit;
	border: 1px solid var(--wp--preset--color--stone-light) !important;
	border-radius: 4px !important;
	min-height: 48px;
	background: var(--wp--preset--color--white) !important;
}
.sbj-form .wpforms-container .wpforms-field-label {
	font-weight: 600 !important;
	color: var(--wp--preset--color--ink) !important;
}
.sbj-form .wpforms-container button[type="submit"] {
	background: var(--wp--preset--color--gold) !important;
	color: var(--wp--preset--color--ink) !important;
	font-weight: 700 !important;
	font-size: 1.125rem !important;
	border-radius: 4px !important;
	min-height: 52px;
	padding: 0 1.75rem !important;
	border: 0 !important;
}
.sbj-form .wpforms-container button[type="submit"]:hover {
	background: var(--wp--preset--color--gold-hover) !important;
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}