/*
Theme Name: Fris Edam
Theme URI: https://frisedam.nl
Description: Eigen block theme voor Fris Springlevend! 75 jaar Fris Edam. Zonder page builder, met standaard WordPress-blokken en lokaal gehost lettertype (Roboto).
Author: Bas
Version: 1.0.16
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: fris-edam
*/

/* ---------- Kopbalk ---------- */
.fris-topbar {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	/* Zelfde zijkanten als de menubalk en het witte blok eronder */
	padding: 16px max(clamp(12px, 4vw, 58px), calc((100% - 1408px) / 2));
	gap: 16px;
	align-items: center;
	justify-content: space-between;
}
.fris-topbar .wp-block-site-title {
	margin: 0;
	text-transform: uppercase;
	font-weight: 500;
	font-size: 1.25rem;
	letter-spacing: 0.01em;
	line-height: 1.2;
}
.fris-topbar .wp-block-site-title a,
.fris-topbar .wp-block-site-title a:hover {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

/* Zoekveld */
.fris-search {
	max-width: 100%;
}
.fris-search .wp-block-search__inside-wrapper {
	border: 0;
	padding: 0;
	gap: 0;
}
.fris-search .wp-block-search__input {
	background: var(--wp--preset--color--field);
	color: var(--wp--preset--color--text);
	border: 0;
	border-radius: 3px 0 0 3px;
	padding: 9px 12px;
	font-size: 1rem;
	min-width: 0;
}
.fris-search .wp-block-search__button {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 0 3px 3px 0;
	margin: 0;
	padding: 9px 11px;
}
.fris-search .wp-block-search__button:hover,
.fris-search .wp-block-search__button:focus-visible {
	background: #8f380d;
}

/* ---------- Menubalk ---------- */
/* Witte menubalk: even breed en uitgelijnd met het hero-/inhoudsblok eronder */
.fris-navbar {
	background: var(--wp--preset--color--base);
	box-sizing: border-box;
	width: min(1408px, calc(100% - 2 * clamp(12px, 4vw, 58px)));
	margin-inline: auto;
	padding: 20px 16px;
	justify-content: center;
}
.fris-navbar .wp-block-navigation {
	font-size: 1.125rem;
	gap: 0.5rem 1.4rem;
}
.fris-navbar .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
	text-transform: uppercase;
	font-weight: 500;
	text-decoration: none;
}
.fris-navbar .wp-block-navigation-item__content:hover,
.fris-navbar .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.fris-navbar .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content,
.fris-navbar .wp-block-navigation .wp-block-navigation-submenu:has(.current-menu-item) > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}
.fris-navbar .wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: 0;
	padding: 0;
	min-width: 240px;
}
.fris-navbar .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--base);
	text-transform: none;
	font-weight: 400;
	padding: 18px 18px;
}
.fris-navbar .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.fris-navbar .wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--base);
	background: rgba(255, 255, 255, 0.12);
}
/* Hoofditem blijft oranje zolang het dropdown-menu open is */
.fris-navbar .wp-block-navigation-submenu:hover > .wp-block-navigation-item__content,
.fris-navbar .wp-block-navigation-submenu:focus-within > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
}
/* Mobiel menu: blauwe achtergrond, witte tekst, ook in de submenu's */
.fris-navbar .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.fris-navbar .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--base) !important;
	background: transparent !important;
}
.fris-navbar .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	min-width: 0;
	padding-left: 0.75rem;
}
.fris-navbar .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 10px 0;
}
.fris-navbar .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.fris-navbar .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: #ffd2b8 !important;
}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--ink);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--base);
}

/* ---------- Inhoud ---------- */
.fris-main {
	padding: 24px clamp(12px, 4vw, 58px) 24px;
}
.fris-card {
	--fris-pad-x: clamp(16px, 4vw, 57px);
	--fris-pad-y: clamp(20px, 4vw, 56px);
	background: var(--wp--preset--color--base);
	max-width: 1408px;
	margin-inline: auto;
	padding: var(--fris-pad-y) var(--fris-pad-x);
}
.fris-card > * + * {
	margin-block-start: 1.25rem;
}
/* Brede afbeelding bovenaan: over de volle breedte, met een blauwe rand eronder (zoals op de oude site) */
.fris-card .wp-block-post-content > .wp-block-image.alignwide:first-child {
	margin: calc(var(--fris-pad-y) * -1) calc(var(--fris-pad-x) * -1) 0 !important;
	max-width: none !important;
	border-bottom: 24px solid var(--wp--preset--color--primary);
}
.fris-card .wp-block-post-content > .wp-block-image.alignwide:first-child img {
	display: block;
	width: 100%;
	height: auto;
}
.fris-card .wp-block-post-title {
	margin-top: 0;
}
.fris-card .wp-block-post-date {
	font-size: 0.95rem;
	opacity: 0.75;
}
.fris-card .wp-block-query .wp-block-post-title a {
	text-decoration: none;
}
.fris-card .wp-block-query .wp-block-post-title a:hover {
	text-decoration: underline;
}
.fris-card .wp-block-post-template {
	padding: 0;
}
.fris-card .wp-block-post-template > li {
	border-top: 1px solid #e3e6ea;
	padding-block: 1.25rem;
}
.fris-card .wp-block-post-template > li:first-child {
	border-top: 0;
	padding-top: 0;
}

/* Afbeeldingen in de inhoud: niet groter dan 640px (behalve de brede kopfoto) */
.fris-card .wp-block-post-content .wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.fris-card .wp-block-post-content .wp-block-column .wp-block-image {
	max-width: min(100%, 640px);
	margin-inline: auto;
}
.fris-card .wp-block-post-content .wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) img,
.fris-card .wp-block-post-content .wp-block-column .wp-block-image img {
	width: auto;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}
.fris-card .wp-block-post-content .wp-block-image.alignwide:not(:first-child) {
	max-width: min(100%, 640px) !important;
	margin-inline: auto !important;
}
.fris-card .wp-block-post-content .wp-block-image figcaption {
	text-align: center;
}

/* Kop of blok begint onder eventuele zwevende afbeeldingen */
.fris-card .wp-block-post-content .fris-clear {
	clear: both;
}

/* Afbeeldingen naast de tekst (links/rechts) en vaste formaten */
.fris-card .wp-block-post-content::after {
	content: "";
	display: block;
	clear: both;
}
.fris-card .wp-block-post-content .wp-block-image.alignleft,
.fris-card .wp-block-post-content .wp-block-image.alignright {
	margin-top: 0.4rem;
	margin-bottom: 1rem;
	max-width: 100%;
}
.fris-card .wp-block-post-content .wp-block-image.alignleft {
	float: left;
	margin-right: 2rem;
	margin-left: 0;
}
.fris-card .wp-block-post-content .wp-block-image.alignright {
	float: right;
	margin-left: 2rem;
	margin-right: 0;
}
.fris-card .wp-block-post-content .wp-block-image.fris-img-sm { width: 300px; }
.fris-card .wp-block-post-content .wp-block-image.fris-img-md { width: 420px; }
.fris-card .wp-block-post-content .wp-block-image.fris-img-lg { width: 46%; }
.fris-card .wp-block-post-content .wp-block-image[class*="fris-img-"] img {
	width: 100%;
	height: auto;
}
.fris-card .wp-block-post-content .wp-block-image.fris-img-full {
	max-width: 100% !important;
	width: 100%;
}
.fris-card .wp-block-post-content .wp-block-image.fris-img-full img {
	width: 100%;
	height: auto;
}
/* Raster met foto's van gelijke grootte */
.fris-card .wp-block-post-content .fris-grid-img {
	max-width: 100% !important;
	margin: 0 0 0.5rem !important;
}
.fris-card .wp-block-post-content .fris-grid-img img {
	width: 100% !important;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: contain;
}
.fris-grid-col p {
	font-size: 0.95rem;
	margin-top: 0.25rem;
}
.fris-grid-row {
	gap: 1.5rem 2rem;
	margin-bottom: 1.5rem;
}
/* Video's */
.fris-card .wp-block-video {
	max-width: 100%;
}
.fris-card .wp-block-video video {
	width: 100%;
	height: auto;
	display: block;
}
.fris-card .wp-block-video.fris-video-right {
	margin-left: auto;
	margin-right: 0;
	max-width: 480px;
}
.fris-card .wp-block-video.fris-video-md {
	max-width: 560px;
	margin-inline: auto;
}
@media (max-width: 600px) {
	.fris-card .wp-block-post-content .wp-block-image.alignleft,
	.fris-card .wp-block-post-content .wp-block-image.alignright {
		float: none;
		margin-inline: auto;
		width: 100% !important;
	}
}

/* Nieuwsoverzicht: raster met afbeelding bovenaan */
.fris-news .wp-block-post-template {
	gap: 2.25rem 2rem;
}
.fris-news .wp-block-post-featured-image {
	margin: 0;
}
.fris-news .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: contain !important;
	display: block;
}
.fris-news .wp-block-post-featured-image {
	background: var(--wp--preset--color--base);
}
.fris-news .wp-block-post-template > li,
.fris-card .fris-news .wp-block-post-template > li {
	border: 0;
	padding: 0;
}
.fris-news .wp-block-post-date {
	opacity: 0.7;
	margin: 0 0 0.5rem;
}
.fris-news .wp-block-post-excerpt__excerpt {
	margin: 0 0 0.5rem;
}
.fris-news .wp-block-post-excerpt__more-link {
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
}
@media (max-width: 781px) {
	.fris-news .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr;
	}
}

/* Logo's onderaan de pagina's */
.fris-card .wp-block-columns .wp-block-image img {
	height: auto;
}
.wp-block-gallery.has-nested-images figure.wp-block-image img {
	object-fit: contain;
}

/* ---------- Footer ---------- */
.fris-footer {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	padding: 0 clamp(12px, 4vw, 58px) 32px;
}
/* Footer-blokken: zelfde breedte als het witte blok en dicht eronder */
.fris-footer > .wp-block-columns {
	max-width: 1408px !important;
	margin-inline: auto !important;
	padding: 8px clamp(16px, 4vw, 57px);
	gap: 2rem;
}
.fris-footer a,
.fris-footer a:hover {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}
.fris-footer-title {
	font-size: clamp(1.75rem, 4vw, 3rem);
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.1;
	margin: 0;
}
.fris-footer-text {
	font-size: 1.125rem;
	font-weight: 300;
	letter-spacing: 0.05em;
	line-height: 1.5;
	margin: 0;
}

/* ---------- Toegankelijkheid en mobiel ---------- */
:where(a, button, input):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}
@media (max-width: 781px) {
	.fris-topbar {
		flex-direction: column;
		align-items: flex-start;
	}
	.fris-topbar .wp-block-search,
	.fris-search {
		width: 100%;
	}
	.fris-topbar .wp-block-site-title {
		font-size: 1.05rem;
	}
	.fris-navbar {
		padding: 14px 16px;
		justify-content: flex-end;
	}
	.fris-footer {
		padding-bottom: 24px;
	}
	.fris-footer > .wp-block-columns {
		gap: 1rem;
	}
}