/*
Theme Name: Jouwtuin
Template: twentytwentyfive
Description: Child theme voor jouwtuin.nl.
Version: 0.6.0
Requires at least: 6.7
Requires PHP: 8.1
Text Domain: jouwtuin
*/

/* Tekstlogo in de header: kleuren blijven vast, ook bij hover. */
.jouwtuin-logo {
	margin: 0;
	line-height: 1.2;
}

.jouwtuin-logo a,
.jouwtuin-logo a:hover {
	color: var(--wp--preset--color--diepgroen);
	text-decoration: none;
}

.jouwtuin-logo a:focus-visible {
	outline: 2px solid var(--wp--preset--color--diepgroen);
	outline-offset: 4px;
	border-radius: 2px;
}

/*
 * Header: zwevende balk met logo, zoekveld en menu.
 * Tot 900px breed is het menu een menuknop; daaronder past alles niet naast elkaar.
 * De standaard van WordPress (600px) wordt daarom tussen 600 en 900px overschreven.
 */
.jouwtuin-header__bar .jouwtuin-logo {
	flex-shrink: 0;
	white-space: nowrap;
}

.jouwtuin-header__search {
	flex: 1 1 auto;
	max-width: 26rem;
}

.jouwtuin-header .wp-block-search .wp-block-search__inside-wrapper {
	background-color: var(--wp--preset--color--creme);
	border: 1px solid var(--wp--preset--color--middengroen);
	border-radius: 9999px;
	padding: 0;
}

.jouwtuin-header .wp-block-search .wp-block-search__inside-wrapper .wp-block-search__input {
	background: transparent;
	border: 0;
	padding-left: 1rem;
	color: var(--wp--preset--color--tekst);
}

.jouwtuin-header .wp-block-search .wp-block-search__inside-wrapper .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--tekst);
	opacity: 0.7;
}

.jouwtuin-header .wp-block-search .wp-block-search__inside-wrapper .wp-block-search__input:focus {
	outline: none;
}

/* Compacte ronde zoekknop die het veld rechts afsluit, 44px hoog om goed te kunnen tikken. */
.jouwtuin-header .wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button {
	display: flex;
	align-items: center;
	margin-left: 0;
	padding: 0.625rem;
}

.jouwtuin-header .wp-block-search .wp-block-search__inside-wrapper:focus-within {
	outline: 2px solid var(--wp--preset--color--diepgroen);
	outline-offset: 2px;
}

.jouwtuin-header__nav a {
	color: var(--wp--preset--color--tekst);
	text-decoration: none;
}

.jouwtuin-header__nav a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Menuknop en sluitknop minimaal 44 bij 44 px om goed te kunnen tikken. */
.jouwtuin-header .wp-block-navigation__responsive-container-open,
.jouwtuin-header .wp-block-navigation__responsive-container-close {
	min-width: 2.75rem;
	min-height: 2.75rem;
	align-items: center;
	justify-content: center;
}

.jouwtuin-header .wp-block-navigation__responsive-container-close {
	display: flex;
}

.jouwtuin-header__nav a:focus-visible,
.jouwtuin-header .wp-block-navigation__responsive-container-open:focus-visible,
.jouwtuin-header .wp-block-navigation__responsive-container-close:focus-visible {
	outline: 2px solid var(--wp--preset--color--diepgroen);
	outline-offset: 4px;
	border-radius: 2px;
}

/* Zoekveld in het uitgeklapte menu over de volle breedte. */
.jouwtuin-header__search--menu {
	width: 100%;
	max-width: none;
	margin-bottom: var(--wp--preset--spacing--20);
}

@media (max-width: 899.98px) {
	.jouwtuin-header__bar > .jouwtuin-header__search {
		display: none;
	}
}

@media (min-width: 600px) and (max-width: 899.98px) {
	.jouwtuin-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.jouwtuin-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (min-width: 900px) {
	.jouwtuin-header__search--menu {
		display: none;
	}
}

/* Footer: affiliatemelding niet over de volle breedte, zodat hij leesbaar blijft. */
.jouwtuin-footer__affiliate {
	max-width: 40rem;
}

.jouwtuin-footer__nav a {
	color: var(--wp--preset--color--tekst);
	text-underline-offset: 0.2em;
}

.jouwtuin-footer__nav a:focus-visible {
	outline: 2px solid var(--wp--preset--color--diepgroen);
	outline-offset: 4px;
	border-radius: 2px;
}