/*
Theme Name: Digital Fronteer
Theme URI: https://digitalfronteer.nl
Author: Jordy Willems
Author URI: https://digitalfronteer.nl
Description: Een licht, modern blokthema (Full Site Editing) voor WordPress. Geschikt als startpunt voor maatwerk.
Version: 0.9.1
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: digital-fronteer
Tags: full-site-editing, block-styles, custom-menu, featured-images, threaded-comments, translation-ready, wide-blocks
*/

/*
 * In een blokthema wordt de styling primair beheerd via theme.json en de
 * site-editor. Dit bestand is alleen nodig voor de themakop hierboven en voor
 * eventuele extra CSS die je niet via theme.json kunt regelen.
 */

/*
 * Core zet tussen alle blokken op het hoogste niveau een blockgap, ook tussen
 * main en de footer. Het template-part-blok kent geen spacing-ondersteuning,
 * dus dat is niet in het template zelf weg te halen.
 */
.page-template-page-full-width .wp-site-blocks > footer {
	margin-top: 0;
}

/*
 * In dit template plakt alleen een sectie over de volle breedte tegen de header
 * of de footer; dat is waar het template voor bedoeld is. Begint of eindigt de
 * pagina met gewone inhoud, dan houdt die zijn ruimte. De :empty-uitzondering is
 * voor de lege alinea die de editor nogal eens achterlaat; die zou anders ruimte
 * maken onder een sectie die juist tegen de footer hoort te staan.
 */
.page-template-page-full-width
	.entry-content
	> :first-child:not(.alignfull):not(:empty) {
	margin-top: var(--wp--preset--spacing--50);
}

.page-template-page-full-width
	.entry-content
	> :last-child:not(.alignfull):not(:empty) {
	margin-bottom: var(--wp--preset--spacing--50);
}

/* theme.json kent geen transition-eigenschap; de kleuren zelf staan daar wel. */
:where(.wp-element-button, .wp-block-button__link) {
	transition:
		background-color 0.15s ease-in-out,
		border-color 0.15s ease-in-out,
		color 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
	:where(.wp-element-button, .wp-block-button__link) {
		transition: none;
	}
}

/*
 * De topbar scrolt weg doordat de header precies zijn hoogte boven de rand
 * mag uitsteken; assets/sticky-header.js meet die hoogte. Op smalle schermen
 * scrolt de adminbalk zelf mee weg, dus dan geen ruimte voor hem.
 */
.df-sticky-header .wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: calc(var(--df-adminbalk, 0px) - var(--df-topbar-hoogte, 0px));
	z-index: 100;
}

.admin-bar.df-sticky-header {
	--df-adminbalk: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	.admin-bar.df-sticky-header {
		--df-adminbalk: initial;
	}
}