/* site/assets/site.css — gedeelde stijl van de publieke website (biedtrainer.nl / bidtrainer.eu).
   De opmaak per element staat inline, zoals op de canvas; hier alleen wat de canvas in <helmet> zette,
   het zelf gehoste lettertype en een paar mobiele vangnetten. Kleuren: zie de huisstijlregels. */

@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(./fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(./fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Zoals op de canvas: breedtes zijn inclusief rand en padding (anders schuift o.a. de telefoon-mockup op de home). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #FAF6EF; overflow-x: hidden; }
a { color: #A8380C; }
a:hover { color: #7A2908; }
summary { cursor: pointer; }
input:focus, textarea:focus, button:focus-visible, a:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible { outline: 3px solid #F2B79C; outline-offset: 1px; }
img { max-width: 100%; }

/* Live-puntje bij "Madeira live" in de kop */
.bt-live { position: relative; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #C9302C; margin-right: 8px; flex: none; }
.bt-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #C9302C; animation: bt-pulse 1.6s ease-out infinite; }
@keyframes bt-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bt-live::after { animation: none; } }

/* Mobiel (390 px): tabellen en lange woorden mogen nooit de pagina breder maken */
main, section, header, footer { min-width: 0; }
h1, h2, h3 { overflow-wrap: break-word; }

/* Madeira: op een smalle kaart alleen het accounticoon, zodat de spelersnamen ruimte hebben */
@media (max-width: 480px) { .mad-account > span { display: none; } }

/* Home, "in cijfers": drie kolommen getallen van 9 tekens passen niet op 390 px → twee kolommen */
@media (max-width: 560px) { section[aria-label="Biedtrainer in cijfers"] > div, section[aria-label="BidTrainer in numbers"] > div { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* Tikvlakken minimaal 44 px (overdracht: klaar-als). Het ontwerp gebruikt 36–40 px in de kop. */
header nav a, header a[aria-label$="naar de home"], header a[aria-label$="to the home page"], main a[href^="/app/"] { min-height: 44px; }
header [role="group"] { height: auto !important; padding: 0 3px 0 0 !important; }
header [role="group"] a { min-height: 44px; }
[data-eiland="rondleiding"] [role="tab"] { min-height: 44px; }
nav[aria-label="Voor wie"] a, nav[aria-label="Who it's for"] a, [data-eiland="bijdragen"] button, [data-eiland="bijdragen"] input { min-height: 44px; }
/* Losse tekstlinks ("Lees waarom we dit doen →"): groter tikvlak zonder dat de opmaak verschuift */
main a:not(p a, li a, [style*="height"], [style*="display"], [style*="padding"]) { padding-block: 13px; margin-block: -13px; }
/* "Inloggen"/"Log in" en het menu niet afbreken; de accountknop mag wel over twee regels (390 px). */
header nav a, header a[href="/inloggen"], header a[href="/login"], header [role="group"] a { white-space: nowrap; }

/* Home, cijfers: icoon in de kleur van het symbool + getal dat oploopt (site/assets/tellers.js) */
.bt-stat { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.bt-stat-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; transition: transform .4s ease; }
.bt-stat-n { font-size: clamp(24px, 3.2vw, 32px); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bt-stat.bt-klaar .bt-stat-ic { transform: scale(1.12); }
@media (max-width: 560px) { .bt-stat { flex-direction: column; gap: 8px; } .bt-stat-n { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { .bt-stat-ic { transition: none; } .bt-stat.bt-klaar .bt-stat-ic { transform: none; } }

/* Kop op mobiel (wens Dafydd 30-10-2026): logo · [naam van de actieve pagina ☰]; alles staat in het hamburgermenu
   (site/assets/menu.js). Zonder JavaScript: logo, taal en Inloggen op één rij, het menu als scrollrij. */
.bt-hamb, .bt-menu { display: none; }
@media (max-width: 640px) {
  header > div:first-child { padding: 10px 16px !important; gap: 6px 10px !important; }
  header > div:first-child > a:first-child { font-size: 17px !important; gap: 8px !important; }
  header > div:first-child > a:first-child > span { width: 34px !important; height: 34px !important; font-size: 17px !important; }
  /* zonder JS */
  header > div:first-child a[href="/inloggen#nieuw"], header > div:first-child a[href="/login#nieuw"] { display: none !important; }
  header > div:first-child [role="group"] svg { display: none; }
  header > div:first-child > nav { margin: 0 -16px !important; padding: 0 10px 2px; scrollbar-width: none; }
  header > div:first-child > nav::-webkit-scrollbar { display: none; }
  /* met JS: hamburger */
  .bt-js header > div:first-child > div, .bt-js header > div:first-child > nav { display: none !important; }
  .bt-js .bt-hamb { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 14px; border-radius: 10px;
    border: 1px solid #D9CCBA; background: #fff; color: #1E1A16; font: 600 16px 'Space Grotesk', system-ui, sans-serif; cursor: pointer; max-width: 60vw; }
  .bt-hamb-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bt-hamb.open { background: #1E1A16; color: #fff; border-color: #1E1A16; }
  .bt-hamb path { transition: transform .2s ease, opacity .2s ease; transform-origin: 12px 12px; }
  .bt-hamb.open .bt-h1 { transform: translateY(5px) rotate(45deg); }
  .bt-hamb.open .bt-h2 { opacity: 0; }
  .bt-hamb.open .bt-h3 { transform: translateY(-5px) rotate(-45deg); }
  .bt-js .bt-menu:not([hidden]) { display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 50; background: #FAF6EF;
    border-bottom: 1px solid #E8DFD2; box-shadow: 0 16px 30px rgba(30,26,22,.14); padding: 8px 16px 18px; max-height: calc(100vh - 64px); overflow-y: auto; }
  .bt-menu-lijst { display: flex; flex-direction: column; }
  .bt-menu-lijst a { display: flex; align-items: center; min-height: 52px; padding: 0 6px; border-bottom: 1px solid #EFE7DB;
    color: #1E1A16; text-decoration: none; font-size: 18px; font-weight: 500; }
  .bt-menu-lijst a[aria-current="page"] { color: #A8380C; font-weight: 700; box-shadow: inset 4px 0 0 #C9430F; padding-left: 14px; }
  .bt-menu-lijst a.bt-menu-live { color: #C9430F; font-weight: 700; }
  .bt-menu-acties { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; align-items: center; }
  .bt-menu-nieuw, .bt-menu-login { flex: 1 1 100%; text-align: center; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 16px; text-decoration: none; }
  .bt-menu-nieuw { background: #C9430F; color: #fff !important; }
  .bt-menu-login { background: #fff; border: 1px solid #D9CCBA; color: #1E1A16 !important; }
  .bt-menu-taal { margin: 4px auto 0; }
  .bt-menu-taal svg { display: inline !important; }
}
@media (max-width: 359px) { header > div:first-child > a:first-child { font-size: 0 !important; } }

/* Bedankvenster + confetti na een bijdrage (site/assets/bedankt.js, 30-10-2026) */
.bt-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 1001; }
.bt-dank-open, .bt-dank-open body { overflow: hidden; }
.bt-dank { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; font-family: 'Space Grotesk', system-ui, sans-serif; }
.bt-dank-scrim { position: absolute; inset: 0; background: rgba(30,26,22,.55); }
.bt-dank-kaart { position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: #FAF6EF; border-radius: 24px;
  padding: 28px 24px 22px; box-shadow: 0 24px 60px rgba(30,26,22,.35); color: #1E1A16; animation: bt-dank-in .35s ease-out; }
@keyframes bt-dank-in { from { transform: translateY(18px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bt-dank-kaart { animation: none; } }
.bt-dank-x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; background: none; font-size: 28px; color: #6B625A; cursor: pointer; border-radius: 12px; }
.bt-dank-suits { display: flex; gap: 10px; font-size: 28px; justify-content: center; }
.bt-dank h2 { margin: 6px 0 8px; text-align: center; font-size: clamp(32px, 7vw, 44px); line-height: 1.05; color: #1E7A45; }
.bt-dank-lead { margin: 0; text-align: center; font-size: 17px; line-height: 1.55; color: #3D3731; }
.bt-dank-lead b { color: #1E1A16; }
.bt-dank-stop { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: #3D3731; background: #fff; border: 1px solid #E8DFD2; border-radius: 12px; padding: 10px 12px; overflow-wrap: anywhere; }
.bt-dank-form { margin-top: 18px; border-top: 1px solid #E8DFD2; padding-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.bt-dank-form h3 { margin: 0; font-size: 20px; }
.bt-dank-form p { margin: 0; font-size: 15px; line-height: 1.5; color: #3D3731; }
.bt-dank-form label { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 600; }
.bt-dank-form input[type="email"], .bt-dank-form input[name="naam"] { height: 52px; border-radius: 12px; border: 1px solid #D9CCBA; padding: 0 14px; font: inherit; font-size: 17px; font-weight: 400; background: #fff; color: #1E1A16; }
.bt-dank-form .bt-dank-check { flex-direction: row; align-items: center; gap: 10px; font-weight: 500; min-height: 44px; }
.bt-dank-check input { width: 22px; height: 22px; accent-color: #1E7A45; }
.bt-dank-fout { font-size: 15px; font-weight: 600; color: #C9302C; min-height: 0; }
.bt-dank-knop { height: 54px; border: 0; border-radius: 12px; background: #1E7A45; color: #fff; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; width: 100%; }
.bt-dank-knop:disabled { opacity: .7; cursor: default; }
.bt-dank-nee { height: 44px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: #A8380C; cursor: pointer; }
.bt-dank-klein { font-size: 13px !important; color: #6B625A !important; text-align: center; }
.bt-dank-klaar { margin-top: 18px; text-align: center; display: flex; flex-direction: column; gap: 14px; }
.bt-dank-klaar p { margin: 0; font-size: 19px; font-weight: 700; color: #1E7A45; }
.bt-sup-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bt-sup-lijst li { background: #fff; border: 1px solid #E8DFD2; border-radius: 999px; padding: 6px 12px; font-size: 16px; font-weight: 600; }
.bt-sup-lijst small { font-weight: 500; color: #6B625A; }

.bt-dank [hidden] { display: none !important; }
.bt-dank-melding { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1002; max-width: calc(100vw - 32px);
  background: #1E7A45; color: #fff; font: 700 16px 'Space Grotesk', system-ui, sans-serif; padding: 14px 20px; border-radius: 14px;
  box-shadow: 0 12px 30px rgba(30,26,22,.25); transition: opacity .35s ease; }
.bt-dank-melding.weg { opacity: 0; }

/* Taalkeuze (site/assets/taal.js, 26 talen) — knop met vlag + paneel met vlaggen (31-10-2026) */
header .bt-taal, .bt-taal { position: relative; display: inline-flex; padding: 0 !important; border: 0; background: none; }
.bt-taal-knop { height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; border-radius: 10px;
  border: 1px solid #D9CCBA; background: #fff; color: #1E1A16; font: 600 15px 'Space Grotesk', system-ui, sans-serif; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease; }
.bt-taal-knop:hover { border-color: #C9B79F; box-shadow: 0 2px 8px rgba(30,26,22,.08); }
.bt-taal-knop:focus-visible { outline: 3px solid #F2B79C; outline-offset: 2px; }
.bt-taal.open .bt-taal-knop { border-color: #C2410C; box-shadow: 0 0 0 3px rgba(194,65,12,.12); }
.bt-vlag { flex: none; width: 24px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(30,26,22,.14); overflow: hidden; display: block; }
.bt-taal-code { display: none; letter-spacing: .04em; }
.bt-taal-pijl { color: #6B625A; transition: transform .2s ease; }
.bt-taal.open .bt-taal-pijl { transform: rotate(180deg); }
.bt-taal-lijst { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1100; width: 440px; max-width: calc(100vw - 24px);
  max-height: min(78vh, 640px); overflow: auto; background: #fff; border: 1px solid #E8DFD2; border-radius: 16px;
  box-shadow: 0 18px 44px rgba(30,26,22,.18), 0 2px 6px rgba(30,26,22,.06); padding: 8px; animation: btTaalIn .16s ease-out; }
.bt-taal-lijst[hidden] { display: none; }
.bt-taal-lijst.boven { top: auto; bottom: calc(100% + 8px); }
.bt-taal-lijst.links { right: auto; left: 0; }
@keyframes btTaalIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.bt-taal-lijst ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.bt-taal-lijst a { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 10px; border-radius: 10px;
  color: #1E1A16; text-decoration: none; font: 500 15px 'Space Grotesk', system-ui, sans-serif; }
.bt-taal-lijst a span { flex: 1; }
.bt-taal-lijst a:hover, .bt-taal-lijst a:focus-visible { background: #F7F1E8; outline: none; }
.bt-taal-lijst a[aria-current] { background: #FBEDE4; color: #9A3412; font-weight: 700; }
.bt-taal-vink { color: #C2410C; flex: none; }
@media (max-width: 640px) {
  .bt-taal-naam { display: none; }
  .bt-taal-code { display: inline; }
  .bt-taal-lijst { width: 300px; }
  .bt-taal-lijst ul { grid-template-columns: 1fr; }
}
/* In het mobiele hamburgermenu: volle breedte, naam zichtbaar, paneel klapt in de stroom open. */
header .bt-menu .bt-taal, .bt-menu .bt-taal { width: 100%; flex: 1 1 100%; flex-direction: column; align-items: stretch; }
.bt-menu .bt-taal-knop { width: 100%; height: 50px; justify-content: center; font-size: 17px; }
.bt-menu .bt-taal-naam { display: inline; }
.bt-menu .bt-taal-code { display: none; }
.bt-menu .bt-taal-lijst { position: static; width: auto; max-width: none; max-height: 50vh; margin-top: 8px; box-shadow: 0 6px 18px rgba(30,26,22,.10); }
.bt-menu .bt-taal-lijst ul { grid-template-columns: 1fr 1fr; }
@media (prefers-reduced-motion: reduce) { .bt-taal-lijst { animation: none; } .bt-taal-pijl { transition: none; } }