/*
Theme Name: 6 Uurs MTB Race Sleen
Theme URI: https://mtb6uurs.nl
Author: Bush Bikers Sleen
Description: Blokthema voor de 6 uurs MTB Race Drenthe (Sleen). Alle inhoud is in het beheerpaneel aan te passen via de site-editor, blokken en patronen. Donkere Drentse huisstijl in rood, zwart en wit.
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: mtb6uurs
Tags: block-patterns, full-site-editing, sports, event, one-column
*/

/* Alleen wat theme.json niet dekt. Kleuren en typografie: zie theme.json. */

.mtb-marquee { overflow: hidden; }
.mtb-marquee__track {
  display: flex;
  width: max-content;
  gap: 38px;
  animation: mtb-marquee 28s linear infinite;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: 25px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@keyframes mtb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mtb-marquee__track { animation: none; } }

.mtb-countdown { display: flex; flex-wrap: wrap; gap: clamp(14px, 3vw, 40px); }
.mtb-countdown__unit { text-align: center; min-width: 62px; }
.mtb-countdown__value {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 900;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1;
}
.mtb-countdown__unit:last-child .mtb-countdown__value { color: var(--wp--preset--color--rood); }
.mtb-countdown__label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wp--preset--color--grijs);
  margin-top: 4px;
}

.mtb-flagbar {
  height: 6px;
  background: linear-gradient(90deg, var(--wp--preset--color--rood) 0 33.3%, var(--wp--preset--color--wit) 33.3% 66.6%, var(--wp--preset--color--rood) 66.6%);
}

.mtb-faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 600; }
.mtb-faq summary::-webkit-details-marker { display: none; }
.mtb-faq details { border-top: 1px solid rgba(244,241,234,0.16); }
.mtb-faq details:last-child { border-bottom: 1px solid rgba(244,241,234,0.16); }

.wp-block-post-title a:hover, .wp-block-navigation a:hover { color: var(--wp--preset--color--rood); }