/*
Theme Name:   MGH
Description:  Een op maat gemaakte theme voor MGH op solide basis van Astra theme.
Author:       JKCP
Template:     astra
Version:      1.0.4
Text Domain:  astra-child
*/

/**
 * Sticky primary header
 * Astra gebruikt #masthead met o.a. .site-header / .ast-primary-header.
 * Pas background-color aan als die van je site afwijkt.
 */
#masthead.site-header {
	position: sticky;
	top: 0;
	z-index: 99999;
	background-color: #ffffff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
	opacity: 1;
	transform: translateY(0);
	transition:
		box-shadow 0.2s ease,
		opacity 0.65s ease,
		transform 0.65s ease,
		visibility 0.65s ease;
	visibility: visible;
}

/**
 * Sitebreed: menubalk verdwijnt na idle scroll (below-header-on-scroll.js).
 */
body.mgh-header-idle-hidden #masthead.site-header {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	pointer-events: none;
}

/* Ingelogd: header plakt onder de WordPress adminbalk */
body.admin-bar #masthead.site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar #masthead.site-header {
		top: 46px;
	}
}

/* Donkere header in Customizer? Zet hier dezelfde achtergrond als je header. */

/* ── Entry content: geen horizontale padding op core layout-blokken ─────── */
.entry-content > .wp-block-group,
.entry-content > .wp-block-cover,
.entry-content > .wp-block-columns {
	padding-left: 0;
	padding-right: 0;
}

/* ── Core: Nieuwste berichten block ────────────────────────────────────── */
.wp-block-latest-posts.wp-block-latest-posts__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Elke post als kaart */
.wp-block-latest-posts.wp-block-latest-posts__list li {
	display: grid;
	grid-template-columns: 96px 1fr;
	grid-template-rows: auto auto 1fr auto;
	gap: 0 1rem;
	background: #F4F6FE;
	border-radius: 12px;
	padding: 1.1rem;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.wp-block-latest-posts.wp-block-latest-posts__list li:hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

/* Afbeelding: span alle rijen, links */
.wp-block-latest-posts__featured-image {
	grid-column: 1;
	grid-row: 1 / -1;
	width: 96px;
	height: 96px;
	border-radius: 8px;
	overflow: hidden;
	flex-shrink: 0;
}

.wp-block-latest-posts__featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 8px;
}

/* Titel */
.wp-block-latest-posts__post-title {
	grid-column: 2;
	grid-row: 1;
	font-size: 0.975rem;
	font-weight: 700;
	color: #1a202c;
	text-decoration: none !important;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wp-block-latest-posts__post-title:hover {
	color: #2b6cb0;
}

/* Datum */
.wp-block-latest-posts__post-date {
	grid-column: 2;
	grid-row: 2;
	font-size: 0.73rem;
	color: #a0aec0;
	margin-top: 0.2rem;
}

/* Excerpt */
.wp-block-latest-posts__post-excerpt {
	grid-column: 2;
	grid-row: 3;
	font-size: 0.82rem;
	color: #4a5568;
	line-height: 1.55;
	margin-top: 0.4rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Lees meer link */
.wp-block-latest-posts__read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.82rem;
	font-weight: 700;
	color: #1a202c !important;
	text-decoration: none !important;
}

.wp-block-latest-posts__read-more::after {
	content: '↗';
	font-size: 0.75rem;
}

/* Geen afbeelding: grid teruggezet naar 1 kolom */
.wp-block-latest-posts.wp-block-latest-posts__list li:not(:has(.wp-block-latest-posts__featured-image img)) {
	grid-template-columns: 1fr;
}

@media screen and (max-width: 480px) {
	.wp-block-latest-posts.wp-block-latest-posts__list li {
		grid-template-columns: 72px 1fr;
	}

	.wp-block-latest-posts__featured-image {
		width: 72px;
		height: 72px;
	}
}

/* ── Globale border-radius voor alle buttons ────────────────────────────── */
.ast-button,
.ast-custom-button,
.menu-item .button,
.wp-block-button__link,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
a.button,
.button {
	border-radius: 7px !important;
}

.ast-header-button-1[data-section*="section-hb-button-"] .ast-builder-button-wrap .ast-custom-button {
	padding-left: 15px !important;
	padding-right: 15px !important;
	white-space: nowrap;
}

/**
 * Header-logo's:
 * - .mgh-logo-menu (Customizer): standaard / na scroll
 * - .mgh-logo-hero (assets/images/mgh-logo-donker.png): alleen boven foto-hero
 */
.custom-logo-link {
	display: inline-flex;
	align-items: center;
}

/* Standaard: menu-logo, hero-logo verborgen */
.custom-logo-link .mgh-logo-hero {
	display: none;
}

.custom-logo-link .mgh-logo-menu {
	display: block;
	height: 88px;
	width: auto;
	max-height: 88px;
}

/* Foto-hero: hero-logo tonen i.p.v. menu-logo (alleen als hero-logo aanwezig is) */
body.page-template-page-template-home:not(.ast-child-header-scrolled) .custom-logo-link:has(.mgh-logo-hero) .mgh-logo-menu,
body.page-template-page-template-brand:not(.ast-child-header-scrolled) .custom-logo-link:has(.mgh-logo-hero) .mgh-logo-menu,
body.mgh-news-archive:not(.ast-child-header-scrolled) .custom-logo-link:has(.mgh-logo-hero) .mgh-logo-menu {
	display: none;
}

body.page-template-page-template-home:not(.ast-child-header-scrolled) .custom-logo-link .mgh-logo-hero,
body.page-template-page-template-brand:not(.ast-child-header-scrolled) .custom-logo-link .mgh-logo-hero,
body.mgh-news-archive:not(.ast-child-header-scrolled) .custom-logo-link .mgh-logo-hero {
	display: block;
	height: auto;
	width: auto;
	max-height: 100%;
}

/**
 * Submenu-links: niet overschrijven naar wit op transparante header.
 */
body:not(.ast-child-header-scrolled) #masthead .main-header-menu .sub-menu a,
body:not(.ast-child-header-scrolled) #masthead .main-header-menu .sub-menu .menu-link,
body:not(.ast-child-header-scrolled) #masthead .main-navigation .sub-menu a {
	color: var(--ast-global-color-3) !important;
	opacity: 1;
}

/**
 * Below-header (top bar): korte fade + inklap vanaf ~100px scroll.
 * Class: ast-child-header-scrolled (below-header-on-scroll.js)
 */
.ast-below-header-wrap {
	overflow: hidden;
	opacity: 1;
	max-height: 600px;
	transition:
		opacity 0.22s ease,
		max-height 0.28s ease,
		margin-top 0.28s ease,
		margin-bottom 0.28s ease,
		padding-top 0.28s ease,
		padding-bottom 0.28s ease;
}

body.ast-child-header-scrolled .ast-below-header-wrap {
	opacity: 0;
	max-height: 0;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	pointer-events: none;
}