/*
Theme Name: Vinoir
Theme URI: https://github.com/webdatalytics/Vinoir-website
Author: Webdatalytics
Author URI: https://webdatalytics.nl
Description: Blokthema voor Vinoir wijntastings. Alle secties zijn opgebouwd als patronen, zodat je pagina's in de site-editor kunt samenstellen en aanpassen zonder code. Functionaliteit (agenda, arrangementen, reserveringen) zit in de plugin Vinoir Core.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vinoir
Tags: full-site-editing, block-patterns, one-column, custom-colors, editor-style, wide-blocks
*/

/* ---------------------------------------------------------------------------
   Vinoir — aanvullende stijlen
   Bijna alles staat in theme.json. Hier alleen wat blokken niet kunnen:
   hovers, scrollbars, formuliervelden en een paar responsive correcties.
   --------------------------------------------------------------------------- */

/* --- Ankerlinks: rustig scrollen i.p.v. springen -------------------------- */

html {
	scroll-behavior: smooth;
}

/*
 * Ruimte vrijhouden onder de vaste kopbalk, anders landt een sectiekop
 * erachter. scroll-padding-top geldt voor al het scrollen naar een anker,
 * ook dat van de browser zelf.
 */
:root {
	--vinoir-header-height: 5.25rem;

	scroll-padding-top: calc( var( --vinoir-header-height ) + 1.5rem );
}

:where( [id] ) {
	scroll-margin-top: 1rem;
}

@media ( max-width: 781px ) {
	:root {
		--vinoir-header-height: 8.5rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}
}

::selection {
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--contrast );
}

/* --- Blokstijl: omlijnde knop (var(--wp--custom--outline-border)) ---------- */

.wp-block-button.is-style-vinoir-outline > .wp-block-button__link {
	background: transparent;
	border: 1px solid var( --wp--custom--outline-border );
	color: var( --wp--preset--color--contrast );
}

.wp-block-button.is-style-vinoir-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-vinoir-outline > .wp-block-button__link:focus-visible {
	background: var( --wp--custom--accent-soft );
	border-color: var( --wp--preset--color--accent );
}

/* --- Blokstijl: kaart ----------------------------------------------------- */

.wp-block-group.is-style-vinoir-card {
	background: var( --wp--preset--color--card );
	border: 1px solid var( --wp--custom--accent-softer );
	border-radius: var( --wp--custom--radius-large );
}

/* --- Blokstijl: haarlijn boven -------------------------------------------- */

.is-style-vinoir-hairline {
	border-top: 1px solid var( --wp--custom--hairline );
}

/* --- Header --------------------------------------------------------------- */

.vinoir-header {
	border-bottom: 1px solid var( --wp--custom--hairline );
}

/*
 * De balk blijft bovenin staan.
 *
 * Let op waar dit staat: `position: sticky` mag nooit buiten zijn eigen ouder.
 * Op de groep hieronder zou het niets doen, want die zit in een
 * template-part-wrapper die precies even hoog is als de balk zelf. Vandaar de
 * wrapper — die is een direct kind van `.wp-site-blocks` en dus zo hoog als de
 * pagina. De offset houdt rekening met de WordPress-adminbalk.
 */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 20;
	/* De wrapper draagt de achtergrond, anders schijnt de pagina erdoorheen. */
	background: var( --wp--preset--color--surface );
}

/*
 * Ingelogd houden we ruimte voor de WordPress-adminbalk — maar alleen boven
 * 782px. Daaronder staat die balk `absolute` in plaats van `fixed` en scrollt
 * hij gewoon mee; een offset zou daar een gat laten waar de pagina doorheen
 * schuift.
 */
@media screen and ( min-width: 783px ) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 32px;
	}
}

.vinoir-header .wp-block-site-title a,
.vinoir-brand {
	font-family: var( --wp--preset--font-family--display );
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --wp--preset--color--contrast );
	text-decoration: none;
}

/* Navigatie-items als omlijnde pillen, precies zoals het ontwerp. */
.vinoir-header .wp-block-navigation .wp-block-navigation-item__content {
	padding: 9px 18px;
	border: 1px solid var( --wp--custom--outline-border );
	border-radius: var( --wp--custom--radius );
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.2;
	text-decoration: none;
}

.vinoir-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.vinoir-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	border-color: var( --wp--preset--color--accent );
	background: var( --wp--custom--accent-soft );
	text-decoration: none;
}

.vinoir-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	border-color: var( --wp--preset--color--accent );
	background: rgba( 138, 39, 52, 0.15 );
}

/* De tweede navigatiegroep (Aan huis / Op locatie) krijgt een scheidingslijn. */
.vinoir-header-secondary {
	padding-left: 22px;
	border-left: 1px solid rgba( 234, 220, 208, 0.16 );
}

/* Binnen de overlay (mobiel menu) vervallen pillen en scheidingslijn. */
.vinoir-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	border: 0;
	padding: 0;
	font-size: var( --wp--preset--font-size--large );
}

.wp-block-navigation__responsive-container.is-menu-open {
	background: var( --wp--preset--color--surface );
	padding-top: clamp( 4rem, 12vw, 8rem );
}

@media ( max-width: 781px ) {
	/*
	 * Mobiel: logo en hamburger op de eerste regel, de twee knoppen daaronder
	 * over de volle breedte — zoals het mobiele ontwerp. `display: contents`
	 * haalt de tussenliggende groep uit de flexrij, zodat de hamburger een
	 * directe buur van het logo wordt.
	 */
	.vinoir-header .wp-block-group > .wp-block-group:not( .vinoir-header-secondary ) {
		display: contents;
	}

	.vinoir-header .vinoir-header-secondary {
		display: block;
		width: 100%;
		padding-left: 0;
		border-left: 0;
	}

	.vinoir-header .vinoir-header-secondary .wp-block-navigation,
	.vinoir-header .vinoir-header-secondary .wp-block-navigation__container {
		width: 100%;
	}

	.vinoir-header .vinoir-header-secondary .wp-block-navigation__container {
		display: flex;
		gap: 10px;
	}

	.vinoir-header .vinoir-header-secondary .wp-block-navigation-item {
		flex: 1 1 0;
	}

	.vinoir-header .vinoir-header-secondary .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		text-align: center;
		white-space: nowrap;
	}
}

/* --- Hero ----------------------------------------------------------------- */

/*
 * Het verloop ligt hier in CSS en niet in de dekking van het cover-blok:
 * core zet `has-background-dim-0` op `opacity:0`, waardoor een verloop in het
 * blok zelf onzichtbaar zou blijven. Zo houdt het cover-blok bovendien exact
 * de opmaak die de editor verwacht, en blijft het bewerkbaar zonder herstel.
 */
.vinoir-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(
		180deg,
		rgba( 35, 20, 21, 0 ) 0%,
		rgba( 35, 20, 21, 0 ) 38%,
		rgba( 35, 20, 21, 0.18 ) 58%,
		rgba( 35, 20, 21, 0.5 ) 78%,
		rgba( 35, 20, 21, 0.7 ) 100%
	);
	pointer-events: none;
	/* Boven de foto, onder de tekst. */
	z-index: 1;
}

/*
 * De tekst moet hier expliciet bovenop.
 *
 * Core regelt dit normaal zelf, maar met een selector die `body`, een `:not()`
 * en een `:has()` combineert en daarmee zwaarder weegt dan wat je er redelijk
 * tegenover kunt zetten. Vertrouwen op die regel bleek niet te werken: de
 * titel en vooral de accentknop kwamen onder het verloop uit, waardoor het
 * dieprood verwaste. Vandaar `!important` — hier is dat geen luiheid maar de
 * enige nette manier om één corregel te overstemmen.
 */
.vinoir-hero.wp-block-cover .wp-block-cover__inner-container {
	position: relative;
	width: 100%;
	z-index: 2 !important;
}

@media ( max-width: 781px ) {
	.vinoir-hero {
		min-height: 560px !important;
	}

	.vinoir-hero::after {
		background: linear-gradient(
			180deg,
			rgba( 35, 20, 21, 0 ) 0%,
			rgba( 35, 20, 21, 0 ) 30%,
			rgba( 35, 20, 21, 0.25 ) 55%,
			rgba( 35, 20, 21, 0.6 ) 78%,
			rgba( 35, 20, 21, 0.78 ) 100%
		);
	}
}

/* --- Sfeerbeelden: horizontale scroller -----------------------------------
 * Core's galerij-CSS gebruikt `figure.wp-block-image:not(#individual-image)`
 * en wint daarmee op specificiteit. Deze regels matchen dat niveau, anders
 * valt de strook terug op een rasterweergave die afbreekt.
 * ------------------------------------------------------------------------- */

.wp-block-gallery.vinoir-sfeer-scroll.has-nested-images {
	display: flex;
	flex-wrap: nowrap;
	gap: var( --wp--preset--spacing--30 );
	overflow-x: auto;
	padding-block: var( --wp--preset--spacing--40 );
	scrollbar-color: var( --wp--preset--color--accent ) var( --wp--preset--color--surface );
	scrollbar-width: thin;
	scroll-snap-type: x proximity;
}

.wp-block-gallery.vinoir-sfeer-scroll.has-nested-images figure.wp-block-image:not( #individual-image ) {
	flex: 0 0 auto;
	width: 220px;
	height: 293px;
	margin: 0;
	scroll-snap-align: start;
}

.wp-block-gallery.vinoir-sfeer-scroll.has-nested-images figure.wp-block-image:not( #individual-image ) img,
.wp-block-gallery.vinoir-sfeer-scroll.has-nested-images.is-cropped figure.wp-block-image:not( #individual-image ) img {
	width: 100%;
	height: 293px;
	flex: none;
	object-fit: cover;
	border-radius: var( --wp--custom--radius-large );
}

.vinoir-sfeer-scroll::-webkit-scrollbar {
	height: 8px;
}

.vinoir-sfeer-scroll::-webkit-scrollbar-track {
	background: var( --wp--preset--color--surface );
	border-radius: var( --wp--custom--radius );
}

.vinoir-sfeer-scroll::-webkit-scrollbar-thumb {
	background: var( --wp--preset--color--accent );
	border-radius: var( --wp--custom--radius );
}

@media ( max-width: 781px ) {
	.wp-block-gallery.vinoir-sfeer-scroll.has-nested-images figure.wp-block-image:not( #individual-image ) {
		width: 150px;
		height: 200px;
	}

	.wp-block-gallery.vinoir-sfeer-scroll.has-nested-images figure.wp-block-image:not( #individual-image ) img,
	.wp-block-gallery.vinoir-sfeer-scroll.has-nested-images.is-cropped figure.wp-block-image:not( #individual-image ) img {
		height: 200px;
	}
}

/* --- Twee manieren: beeld boven de tekst op mobiel ------------------------ */

@media ( max-width: 781px ) {
	.vinoir-media-row {
		flex-direction: column;
		align-items: stretch;
	}

	.vinoir-media-row > .wp-block-image,
	.vinoir-media-row > .wp-block-image img {
		width: 100% !important;
		height: 180px !important;
	}
}

/* --- Formuliervelden ------------------------------------------------------ */

.vinoir-field {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--10 );
}

.vinoir-field > label {
	color: var( --wp--preset--color--muted );
	font-size: var( --wp--preset--font-size--xs );
	letter-spacing: 0.05em;
}

.vinoir-input,
.vinoir-field input[ type='text' ],
.vinoir-field input[ type='email' ],
.vinoir-field input[ type='tel' ],
.vinoir-field input[ type='number' ],
.vinoir-field input[ type='date' ],
.vinoir-field input[ type='time' ],
.vinoir-field textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--medium );
	background: var( --wp--preset--color--card );
	border: 1px solid var( --wp--custom--field-border );
	border-radius: var( --wp--custom--radius );
	padding: 14px 16px;
	color: var( --wp--preset--color--contrast );
}

.vinoir-field textarea {
	resize: vertical;
	min-height: 7rem;
}

.vinoir-input:focus-visible,
.vinoir-field input:focus-visible,
.vinoir-field textarea:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 1px;
}

input::placeholder,
textarea::placeholder {
	color: var( --wp--preset--color--muted );
	opacity: 1;
}

/* --- Toegankelijkheid ----------------------------------------------------- */

.skip-link:focus {
	background: var( --wp--preset--color--card );
	color: var( --wp--preset--color--contrast );
	padding: 12px 20px;
	z-index: 100000;
}

:where( a, button, input, textarea, summary ):focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 2px;
}

.vinoir-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}