/*
Theme Name: Bij ons thuis
Theme URI: https://www.vdmeeren.eu
Author: Bij ons thuis
Description: Speels maar rustig gezinsthema in de vijf gezinskleuren. Werkt samen met de plugin "Bij ons thuis".
Version: 1.2.4
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: bij-ons-thuis
*/

/* Kleurstreep met de vijf gezinskleuren */
.bot-streep {
	height: 8px;
	background: linear-gradient(90deg,
		#FFC93C 0 20%, #F06AA6 20% 40%, #7B4FD0 40% 60%, #2FA86A 60% 80%, #E5484D 80% 100%);
}

/* Logo: vijf rondjes */
.bot-logo { display: inline-flex; align-items: center; }
.bot-logo span {
	width: 22px; height: 22px; border-radius: 50%;
	border: 2px solid var(--wp--preset--color--achtergrond);
	margin-left: -8px;
}
.bot-logo span:first-child { margin-left: 0; }

/* Kaarten en tegels */
.bot-kaart { border-radius: 24px; }
.bot-tegel {
	border: 2px solid var(--wp--preset--color--lijn);
	border-radius: 24px;
	background: #fff;
	transition: border-color .15s ease, transform .15s ease;
}
.bot-tegel:hover { border-color: var(--wp--preset--color--inkt); transform: translateY(-2px); }
.bot-tegel a { color: inherit; text-decoration: none; }
.bot-tegel a::after { content: ""; position: absolute; inset: 0; }
.bot-tegel { position: relative; }

.bot-label {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 14px;
}

/* Navigatie-pillen */
.bot-nav .wp-block-navigation-item__content { padding: 10px 14px; border-radius: 999px; }
.bot-nav .current-menu-item > .wp-block-navigation-item__content { background: var(--wp--preset--color--geel-licht); }
.bot-nav .bot-inloggen .wp-block-navigation-item__content {
	background: var(--wp--preset--color--paars); color: #fff;
}

/* Ingelogd als ... (naast de sitenaam) */
.bot-wie {
	display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 0.875rem;
	background: var(--wp--preset--color--geel-licht); color: #1F2233; white-space: nowrap;
}
p:has(> .bot-wie) { margin: 0; }

$1 voor toetsenbord */
:where(a, button, input, select, textarea):focus-visible {
	outline: 3px solid #7B4FD0;
	outline-offset: 2px;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--inkt);
	color: var(--wp--preset--color--inkt);
	background: transparent;
}

@media (prefers-reduced-motion: reduce) {
	.bot-tegel { transition: none; }
	.bot-tegel:hover { transform: none; }
}