/*
 * Main theme styles.
 *
 * Every .css file in assets/css/ is auto-enqueued on the front-end by
 * Theme::autoEnqueueStyles() (handle: theme-<filename>, version = filemtime).
 *
 * Colors, typography, buttons, fields, header and layouts are configured in
 * Impreza (Theme Options, Header Builder, Page Templates, Grid Layouts) — see
 * `wp sjors setup`. This file only holds what Impreza has no setting for.
 */

/* Eyebrow / bovenkop (Text element, class "eyebrow") */
.eyebrow {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-content-link);
}
.color_alternate .eyebrow,
.l-section.color_alternate .eyebrow {
	color: var(--color-content-primary);
}
@media (max-width: 600px) {
	.eyebrow { font-size: 13px; }
}

/* Text link button style ("Tekstlink" in Theme Options → Button Styles) */
.w-btn.btn-textlink {
	padding: 0 0 4px;
	border-bottom: 2px solid var(--color-content-primary);
	border-radius: 0;
}
.btn-plain .w-btn.btn-textlink,
.w-btn.btn-textlink.btn-plain {
	border-bottom: 0;
	padding: 6px;
}

/* Header top bar icons in yellow */
.l-subheader.at_top .w-text-value > i,
.l-subheader.at_top .w-text i {
	color: var(--color-content-primary);
}

/* Hero: vertical overlay on small screens so the text stays readable */
@media (max-width: 760px) {
	.l-section.hero > .l-section-overlay {
		background: linear-gradient(180deg, rgba(28, 35, 38, .72) 0%, rgba(28, 35, 38, .9) 100%) !important;
	}
}

/* Welkom image with yellow corner accent */
.img-accent {
	position: relative;
	overflow: visible !important;
}
.img-accent::after {
	content: "";
	position: absolute;
	left: -12px;
	bottom: -12px;
	width: 38%;
	height: 38%;
	border-left: 12px solid var(--color-content-primary);
	border-bottom: 12px solid var(--color-content-primary);
	border-bottom-left-radius: 14px;
	pointer-events: none;
}

/* USP icon boxes: title in body font */
.w-iconbox.usp .w-iconbox-title,
.w-iconbox.contact-box .w-iconbox-title {
	font-family: var(--font-family);
	letter-spacing: 0;
}
.w-iconbox.usp .w-iconbox-title {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 4px;
}
.w-iconbox.contact-box .w-iconbox-title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-content-faded);
	margin-bottom: 2px;
}
.w-iconbox.contact-box .w-iconbox-text {
	font-size: 17px;
	line-height: 1.5;
	word-break: break-word;
}
.w-iconbox.contact-box .contact-big {
	font-family: var(--h1-font-family);
	font-weight: 700;
	font-size: 24px;
}
.w-iconbox.contact-box a {
	color: var(--color-content-heading);
}

/* Home services grid: the Post List cards and the dark CTA card share one grid */
.svc-grid > .vc_column-inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.svc-grid .w-grid.us_post_list,
.svc-grid .w-grid.us_post_list > .w-grid-list {
	display: contents !important;
}
.svc-grid .w-grid.us_post_list > .g-preloader {
	display: none !important;
}
@media (max-width: 1024px) {
	.svc-grid > .vc_column-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.svc-grid > .vc_column-inner { grid-template-columns: minmax(0, 1fr); }
}

/* Service cards (Grid Layout "Dienst – kaart") */
.svc-grid .w-grid-item-h {
	box-shadow: 0 1px 0 #E0DACD;
	transition: transform .2s ease, box-shadow .2s ease;
}
.no-touch .svc-grid .w-grid-item-h:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px -18px rgba(28, 35, 38, .35);
}

/* Service list (Grid Layout "Dienst – lijst"): alternate image side, stack on mobile */
.svc-list .w-grid-item-h {
	box-shadow: 0 1px 0 #E0DACD;
}
@media (min-width: 601px) {
	.svc-list .w-grid-item:nth-child(even) .w-hwrapper {
		flex-direction: row-reverse;
	}
}

/* Service detail gallery */
.svc-gallery .w-gallery-item-img {
	border-radius: 8px;
	overflow: hidden;
}

/* Service sidebar: active item + arrow */
.svc-menu .menu-item > a::after {
	content: "→";
	float: right;
	color: var(--color-content-link);
}
.svc-menu .menu-item > a {
	border-radius: 6px;
}

/* Lowercase service title in the sidebar CTA ("Offerte voor houtrot?") */
.cta-title .w-text-value > span {
	text-transform: lowercase;
}

/* 404 */
.big-404 .w-text-value > span {
	color: var(--color-content-primary);
}
.pill-menu .menu-item > a {
	border: 1px solid #E0DACD;
	border-radius: 999px;
}
.pill-menu .menu {
	justify-content: center;
}

/* Timeline (Over mij) and opening hours (footer) */
.timeline table,
.hours table {
	width: auto;
	border: 0;
	margin: 0;
}
.timeline th,
.timeline td,
.hours td {
	border: 0;
	padding: 5px 16px 5px 0;
	vertical-align: top;
	background: none;
	text-align: left;
}
.timeline th {
	font-weight: 700;
	color: var(--color-content-link);
}
.nowrap-email {
	white-space: nowrap;
}