/*
Theme Name: Klik Onderwijs
Theme URI: https://klikonderwijs.nl
Author: Klik Onderwijs
Description: Eigen blokthema voor Klik Onderwijs, gebouwd voor de standaard Gutenberg-editor (Site Editor). Gebaseerd op het Canva-design: van visie naar impact.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.9
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: klik-onderwijs
Tags: block-theme, full-site-editing, block-patterns, education
*/

/* ---------------------------------------------------------------
   Aanvullende styling bovenop theme.json
   --------------------------------------------------------------- */

/* Pilvormige knoppen */
.wp-block-button__link {
	box-shadow: 0 2px 6px rgba(65, 98, 126, 0.12);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(65, 98, 126, 0.2);
}

/* Outline-knop (kernstijl "outline") in navy */
.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--contrast);
}

.is-style-outline > .wp-block-button__link:not(.has-border-color) {
	border-color: var(--wp--preset--color--contrast);
	border-width: 2px;
}

/* Witte outline-knop voor op donkere vlakken */
.is-style-klik-outline-wit > .wp-block-button__link {
	background: transparent;
	border: 2px solid #ffffff;
	color: #ffffff;
}

.is-style-klik-outline-wit > .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.15);
}

/* "Meer lezen"-links (core/read-more) als pilvormige knop */
.wp-block-read-more {
	display: inline-block;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 999px;
	padding: 0.45rem 1.5rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wp-block-read-more:hover {
	background: var(--wp--preset--color--contrast);
	color: #ffffff;
}

/* Witte variant voor op gekleurde vlakken */
.wp-block-read-more.is-style-klik-outline-wit,
.has-peach-background-color .wp-block-read-more,
.has-primary-background-color .wp-block-read-more {
	border-color: #ffffff;
	color: #ffffff;
}

.wp-block-read-more.is-style-klik-outline-wit:hover,
.has-peach-background-color .wp-block-read-more:hover,
.has-primary-background-color .wp-block-read-more:hover {
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
}

/* Oranje gevulde variant voor "Downloaden" op witte kaarten */
.has-white-background-color .wp-block-read-more {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #ffffff;
}

.has-white-background-color .wp-block-read-more:hover {
	background: #D67C05;
	border-color: #D67C05;
}

/* Zachte kaartschaduw */
.is-style-klik-kaart {
	box-shadow: 0 6px 24px rgba(65, 98, 126, 0.08);
}

/* Organische blobvorm voor beelden (zoals de homepagina-hero) */
.is-style-klik-blob img {
	border-radius: 46% 54% 52% 48% / 44% 46% 54% 56%;
}

/* Navigatie: actieve pagina en hover in oranje */
.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-item.current-menu-item > a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* Featured images in querykaarten netjes afronden */
.wp-block-post-featured-image img {
	border-radius: 12px;
}

/* Koppen iets ronder en vriendelijker */
h1, h2, h3, h4, h5, h6 {
	letter-spacing: -0.01em;
}