/*
Theme Name: Jeugdbieb
Description: Vrolijk, toegankelijk en onderhoudsarm blokthema voor een kleine non-profit jeugdbibliotheek. Alles is aan te passen in de Site Editor. Geen externe lettertypes of scripts (AVG-vriendelijk).
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jeugdbieb
*/

/* ------------------------------------------------------------------
   Basis
------------------------------------------------------------------ */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}

/* Duidelijke focusrand voor toetsenbordgebruikers */
:where(a, button, input, select, textarea, summary, .wp-element-button):focus-visible {
	outline: 3px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
	border-radius: 0.25rem;
}

main.wp-block-group {
	min-height: 50vh;
}

/* ------------------------------------------------------------------
   Header en footer
------------------------------------------------------------------ */
.jb-header::after {
	content: "";
	display: block;
	height: 0.5rem;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--blue) 0 20%,
		var(--wp--preset--color--sun) 20% 40%,
		var(--wp--preset--color--coral) 40% 60%,
		var(--wp--preset--color--green) 60% 80%,
		var(--wp--preset--color--deep-blue) 80% 100%
	);
}

.jb-footer {
	border-top: 0.5rem solid var(--wp--preset--color--sun);
}

.jb-footer a {
	color: var(--wp--preset--color--sun);
}

.jb-footer a:hover {
	color: var(--wp--preset--color--paper);
}

.jb-footer :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--sun);
}

.jb-footer h2,
.jb-footer h3 {
	color: var(--wp--preset--color--paper);
}

/* ------------------------------------------------------------------
   Kaarten
------------------------------------------------------------------ */
.jb-card {
	background: var(--wp--preset--color--paper);
	border-radius: 1.25rem;
	box-shadow: var(--wp--preset--shadow--soft);
	padding: var(--wp--preset--spacing--50);
	height: 100%;
	box-sizing: border-box;
}

.jb-card > :first-child {
	margin-top: 0;
}

/* Lange woorden (zoals "Voorleesochtend") netjes afbreken op smalle schermen */
.jb-card :where(h2, h3),
.jb-cards :where(.wp-block-post-title) {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Lijst met berichten als kaarten */
.jb-cards .wp-block-post-template > li {
	background: var(--wp--preset--color--paper);
	border-radius: 1.25rem;
	box-shadow: var(--wp--preset--shadow--soft);
	overflow: hidden;
	padding-bottom: var(--wp--preset--spacing--50);
}

.jb-cards .wp-block-post-template > li > :not(.wp-block-post-featured-image) {
	padding-inline: var(--wp--preset--spacing--50);
}

.jb-cards .wp-block-post-featured-image {
	margin-top: 0;
}

.jb-cards .wp-block-post-featured-image img {
	border-radius: 0;
}

/* ------------------------------------------------------------------
   Hero met kleurrijke boekenrug-illustratie (puur CSS, geen afbeelding)
------------------------------------------------------------------ */
.jb-hero {
	overflow: hidden;
}

.jb-books {
	min-height: 16rem;
	border-bottom: 0.5rem solid var(--wp--preset--color--ink);
	background:
		linear-gradient(var(--wp--preset--color--blue), var(--wp--preset--color--blue)) 5% 100% / 14% 66% no-repeat,
		linear-gradient(var(--wp--preset--color--sun), var(--wp--preset--color--sun)) 24% 100% / 14% 86% no-repeat,
		linear-gradient(var(--wp--preset--color--coral), var(--wp--preset--color--coral)) 43% 100% / 14% 74% no-repeat,
		linear-gradient(var(--wp--preset--color--deep-blue), var(--wp--preset--color--deep-blue)) 62% 100% / 14% 94% no-repeat,
		linear-gradient(var(--wp--preset--color--green), var(--wp--preset--color--green)) 81% 100% / 14% 60% no-repeat;
}

/* ------------------------------------------------------------------
   Openingstijden
------------------------------------------------------------------ */
.jb-uren {
	border-bottom: 2px dotted rgba(28, 37, 65, 0.25);
	padding-block: 0.5rem;
}

.jb-uren:last-child {
	border-bottom: 0;
}

.jb-uren p {
	margin: 0;
}

.jb-uren p:first-child {
	font-weight: 700;
}

/* ------------------------------------------------------------------
   Kleine details
------------------------------------------------------------------ */
.wp-block-search__button {
	border-radius: 999px;
}

.wp-block-post-featured-image img {
	border-radius: 1rem;
}