/*
Theme Name: Bij Haar Zit Je Goed
Template: avalon
Author: Merlin
Author URI: https://wijzijnmerlin.nl
Description: Child theme van Avalon voor Bij Haar Zit Je Goed.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: bijhaar
*/

/* 1. Header: belknop naast de CTA ---------------------------------------- */

.av-header__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}
.bijhaar-call {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--av-btn-dark-bg, var(--av-secondary));
	color: var(--av-btn-dark-color, #fff);
	transition: background-color .2s ease;
}
.bijhaar-call:hover,
.bijhaar-call:focus-visible {
	background: var(--av-primary);
	color: #fff;
}
.bijhaar-call svg {
	width: 18px;
	height: 18px;
}

/* 2. Prijzentabel --------------------------------------------------------- */

.bijhaar-prices table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
.bijhaar-prices td {
	padding: 4px 0;
	border: 0;
	vertical-align: top;
}
.bijhaar-prices td:last-child {
	text-align: right;
	white-space: nowrap;
	padding-left: 16px;
}
.bijhaar-prices tr:has(b) td,
.bijhaar-prices tr:has(strong) td {
	padding-top: 14px;
	color: var(--av-color-heading);
}
.bijhaar-prices tr:first-child td {
	padding-top: 0;
}
.bijhaar-prices img {
	width: 100%;
	height: auto;
	border-radius: var(--av-radius);
}

/* 3. Portfolio-kaarten: staande foto's ------------------------------------ */

.av-gridcard__media img {
	height: 320px;
}

/* 4. Contact: formulier + contactpersoon ---------------------------------- */

.bijhaar-contact {
	gap: 48px;
}
.bijhaar-contact h2 {
	margin-top: 0;
}

/* 5. Header: belknop direct naast de CTA ---------------------------------- */

.av-header__actions {
	margin-left: auto;
}

/* 6. Hero: bovenregel leesbaar op een foto -------------------------------- */

.av-hero .av-eyebrow {
	color: #fff;
	opacity: .85;
}

/* 7. Portfolio: kop en kaarten dichter bij elkaar ------------------------- */

.av-centered:has(+ .av-gridcards) {
	padding-bottom: 8px;
}
.av-centered + .av-gridcards {
	padding-top: 24px;
}

/* 8. Prijzen en contact: zelfde breedte als de container ------------------ */

.av-content > .alignwide.bijhaar-prices,
.av-content > .alignwide.bijhaar-contact {
	max-width: var(--av-container-max, 1180px);
	padding-left: var(--av-gutter, 40px);
	padding-right: var(--av-gutter, 40px);
	margin-top: 64px;
	margin-bottom: 64px;
}
@media (max-width: 900px) {
	.av-content > .alignwide.bijhaar-prices,
	.av-content > .alignwide.bijhaar-contact {
		padding-left: var(--av-gutter-mobile, 22px);
		padding-right: var(--av-gutter-mobile, 22px);
		margin-top: 40px;
		margin-bottom: 40px;
	}
}

/* 9. Footer: contactgegevens onder elkaar --------------------------------- */

.av-footer__col--contact .av-contact__grid {
	grid-template-columns: minmax(0, 1fr);
}