/*
 * Huisstijl Harmonie Orkest Brummen — laadt NA de Kubio-stijlen (zie hob-admin.php).
 *
 * Deel 1 herdefinieert het kleurenpalet van de site. Kubio leest kleuren als
 * CSS-variabelen met KALE R,G,B-KANALEN (dus "56,85,165", géén hex of rgb()),
 * omdat blokken ze gebruiken als rgba(var(--kubio-color-N),alpha).
 *
 * Clubkleuren: blauw #3855A5 (kleur 1, stond al goed) en goud #FCBA03 (kleur 2,
 * stond al goed). Deze laag vervangt de template-restanten:
 *   kleur 4: teal/mint  → donkerblauw hover-accent (contrast met witte knoptekst)
 *   kleur 6: paars      → navy-tekstfamilie (zelfde donkerte, clubtint)
 *   kleur 7/8: bestonden niet (kapotte verwijzingen in blokken) → navy/blauw
 * Kleuren 1, 2, 3 en 5 blijven onaangeroerd.
 *
 * Bewust bijeffect: door kleur 8 te definiëren krijgt de navigatiebalk op
 * binnenpagina's een dekkende navy achtergrond (die regel bestond al in het
 * ontwerp maar was kapot door de ontbrekende variabele). Wil je de oude
 * transparante balk terug, voeg dan toe:
 *   #kubio .style-LcfRdXOzz7-outer .wp-block-kubio-navigation-section__nav:not(.h-navigation_sticky){background-color:transparent}
 */

:root {
	/* Kleur 4 — knop-hoverkleur: was teal (#16E2AF), nu donkerblauw met
	   ruim contrast (7,8:1) onder witte knoptekst */
	--kubio-color-4: 38,71,184;             /* #2647B8 */
	--kubio-color-4-variant-1: 197,211,247; /* #C5D3F7 licht */
	--kubio-color-4-variant-2: 143,169,240; /* #8FA9F0 */
	--kubio-color-4-variant-3: 38,71,184;   /* #2647B8 */
	--kubio-color-4-variant-4: 27,50,130;   /* #1B3282 donkerder */
	--kubio-color-4-variant-5: 16,31,69;    /* #101F45 zeer donker */

	/* Kleur 6 — donkere tekst/koppen: was paars (#20085E-familie), nu navy */
	--kubio-color-6: 27,41,79;              /* #1B294F */
	--kubio-color-6-variant-1: 46,75,198;   /* #2E4BC6 (was felpaars) */
	--kubio-color-6-variant-2: 74,85,112;   /* #4A5570 gedempt */
	--kubio-color-6-variant-3: 42,58,102;   /* #2A3A66 */
	--kubio-color-6-variant-4: 22,34,74;    /* #16224A */
	--kubio-color-6-variant-5: 5,7,13;      /* #05070D bijna zwart */

	/* Kleur 7 — ontbrak in het palet: clubblauw-familie */
	--kubio-color-7: 56,85,165;             /* #3855A5 */
	--kubio-color-7-variant-1: 84,128,249;
	--kubio-color-7-variant-2: 111,125,164;
	--kubio-color-7-variant-3: 56,85,165;
	--kubio-color-7-variant-4: 1,44,164;
	--kubio-color-7-variant-5: 27,41,79;

	/* Kleur 8 — ontbrak in het palet (o.a. nieuwstitels op de homepage en de
	   navigatiebalk op binnenpagina's): navy, met clubblauw als hover-variant */
	--kubio-color-8: 27,41,79;              /* #1B294F */
	--kubio-color-8-variant-1: 84,128,249;
	--kubio-color-8-variant-2: 74,85,112;
	--kubio-color-8-variant-3: 42,58,102;
	--kubio-color-8-variant-4: 56,85,165;   /* #3855A5 — hover van titels */
	--kubio-color-8-variant-5: 5,7,13;
}

/*
 * Deel 2 — afwerking. Alleen stabiele Kubio-frontendklassen; elke regel is
 * puur cosmetisch en kan geen inhoud breken. Waar dit bestand kleuren 1/2/3
 * gebruikt (die het zelf niet definieert) staat een fallback-kanaalwaarde,
 * zodat de afwerking ook zonder Kubio's palet blijft werken.
 */

/* Knoppen: voelbare hover op de zichtbare "pil" (het binnenste <a>-element) */
a.wp-block-kubio-button__link,
a.wp-block-kubio-home-button__link,
a.wp-block-kubio-read-more-button__link,
a.wp-block-kubio-pagination-nav-button__link {
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

a.wp-block-kubio-button__link:hover,
a.wp-block-kubio-home-button__link:hover,
a.wp-block-kubio-read-more-button__link:hover {
	box-shadow: 0 4px 14px rgba(27, 41, 79, .18);
}

@media (prefers-reduced-motion: no-preference) {
	a.wp-block-kubio-button__link:hover,
	a.wp-block-kubio-home-button__link:hover,
	a.wp-block-kubio-read-more-button__link:hover {
		transform: translateY(-1px);
	}
}

/* Toetsenbordfocus: tweelaags (goud + navy), zodat de ring op élke
   achtergrond ≥3:1 contrast houdt (WCAG 1.4.11) */
a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 3px solid rgba(var(--kubio-color-2, 252,186,3), .95);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px rgba(var(--kubio-color-6), 1);
}

/* Nieuws-/concertkaarten: lift op het kaartvlak (__inner), niet op de
   rasterkolom; schaduw alleen op de homepage, waar de kaarten een echte
   witte achtergrond hebben */
.wp-block-kubio-query-loop-item__inner {
	transition: transform .18s ease, box-shadow .18s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-kubio-query-loop-item:hover .wp-block-kubio-query-loop-item__inner {
		transform: translateY(-3px);
	}
}

.home .wp-block-kubio-query-loop-item:hover .wp-block-kubio-query-loop-item__inner {
	box-shadow: 0 10px 28px rgba(27, 41, 79, .14);
}

/* Datumregel die hob-admin.php aan nieuwskaarten op /nieuws/ toevoegt */
.hob-nieuws-datum {
	font-size: .82em;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(var(--kubio-color-6-variant-2), 1);
	margin-top: .35em;
}

/* Categorieënwidget in de nieuws-zijbalk: kleur staat hardcoded (#20085e,
   oud paars) in een inline style-attribuut — daarom hier !important */
.wp-block-kubio-core-categories__widget-box,
.wp-block-kubio-core-categories__widget-box a {
	color: rgba(var(--kubio-color-6), 1) !important;
}

/* Lege agenda: nette melding in plaats van kale tekst */
.hob-geen-concerten {
	background: rgba(var(--kubio-color-3, 243,248,252), 1);
	border-left: 4px solid rgba(var(--kubio-color-2, 252,186,3), 1);
	border-radius: 6px;
	padding: 1.1em 1.4em;
	color: rgba(var(--kubio-color-6), 1);
	font-style: italic;
}

/* Ledentoegang: het wachtwoordformulier als verzorgd kaartje.
   Let op: GoDaddy's mu-plugin print een "contrast-fallback"-stylesheet met
   hoge specificiteit (o.a. body .wp-site-blocks input:not([type=submit]) met
   negen :not()'s) die anders wint — vandaar de zwaardere selectors en de
   !important op het invoerveld. */
.post-password-form {
	max-width: 34rem;
	background: rgba(var(--kubio-color-3, 243,248,252), 1);
	border: 1px solid rgba(var(--kubio-color-6-variant-2), .25);
	border-radius: 10px;
	padding: 1.6em 1.8em;
}

.post-password-form input[type="password"] {
	border: 1px solid rgba(var(--kubio-color-6-variant-2), .5) !important;
	background-color: #fff !important;
	border-radius: 6px;
	padding: .5em .75em;
}

body .wp-site-blocks .post-password-form input[type="submit"] {
	background-color: rgba(var(--kubio-color-1, 56,85,165), 1);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: .55em 1.3em;
	cursor: pointer;
}

body .wp-site-blocks .post-password-form input[type="submit"]:hover {
	background-color: rgba(var(--kubio-color-1-variant-4, 1,44,164), 1);
}

/* Concertvelden (datum, locatie, ticketlink) op de concertpagina */
.wp-block-mfb-meta-field-block.is-acf-field .value {
	font-weight: 600;
	color: rgba(var(--kubio-color-6), 1);
}