/* Aanvullingen voor WordPress: login-knop in de kop, avatars, rugnummers per ploeg, afgelaste ritten, ritgegevens. */

/* login of ledenzone in de kop */
.lz-me { flex: none; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; min-width: 44px; padding: 0 0.35rem; border-radius: 999px; color: #fff; text-decoration: none; font-family: var(--f-display); font-weight: 700; font-size: 0.9rem; background: rgb(255 255 255 / 0.1); justify-content: center; }
.lz-me:hover { background: rgb(255 255 255 / 0.18); color: #fff; }
.lz-me.lz-in { padding: 0 0.8rem 0 0.6rem; }
.lz-me svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
@media (max-width: 1600px) { .lz-me-n { display: none; } .lz-me.lz-in { padding: 0; width: 44px; } }

/* avatar met ploegkleur */
.lz-av { --c: var(--g-b); flex: none; display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--asphalt-2); color: #fff; font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: 1rem; box-shadow: inset 0 0 0 3px var(--c); overflow: hidden; }
.lz-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; padding: 3px; }
.lz-av[data-g="a"] { --c: var(--g-a); } .lz-av[data-g="b2"] { --c: var(--g-b2); } .lz-av[data-g="c"] { --c: var(--g-c); }
.lz-av-s { width: 2.2rem; height: 2.2rem; font-size: 0.78rem; box-shadow: inset 0 0 0 2px var(--c); }

/* rugnummer met de streep van de ploeg */
.lz-bib { --c: var(--g-b); box-shadow: inset 0 -5px 0 var(--c), 0 0 0 1px rgb(0 0 0 / 0.08); }
.lz-bib[data-g="a"] { --c: var(--g-a); } .lz-bib[data-g="b2"] { --c: var(--g-b2); } .lz-bib[data-g="c"] { --c: var(--g-c); }
.event[data-group="b2"] .ev-top .bib { box-shadow: inset 0 -5px 0 var(--g-b2), 0 0 0 1px rgb(0 0 0 / 0.08); }

/* afgelaste ritten in de kalender */
.ride.is-off .r-path, .ride.is-off .r-date { text-decoration: line-through; text-decoration-color: var(--red-ink); }
.r-off { display: inline-block; margin: 0 0 var(--space-2); padding: 0.15em 0.6em; border-radius: 999px; background: var(--red-ink); color: #fff; font-family: var(--f-display); font-weight: 750; font-size: 0.8rem; }
.rb-t.is-off { opacity: 0.35; }
.kal-empty { padding: var(--space-7) 0; color: var(--muted); }

/* ritpagina */
.ev-off { display: inline-block; margin-left: 0.5rem; padding: 0.1em 0.55em; border-radius: 999px; background: var(--red-ink); color: #fff; font-family: var(--f-display); font-weight: 750; font-size: 0.8rem; vertical-align: 0.15em; }
.ev-facts { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin: 0 0 var(--space-5); }
.ev-facts div { position: relative; padding-top: 10px; display: flex; flex-direction: column-reverse; }
.ev-facts div::before { content: ""; position: absolute; left: 0; top: 0; width: 1.8rem; height: 3px; background: var(--gold); }
.ev-facts dt { color: var(--muted); font-size: 0.86rem; }
.ev-facts dd { margin: 0; font-family: var(--f-display); font-weight: 850; font-stretch: 118%; font-size: 1.7rem; line-height: 1.05; }
.ev-lint { font-size: 1.08rem; margin: 0 0 var(--space-6); max-width: 70ch; }
.ev-aanw { margin: var(--space-6) 0; padding-top: var(--space-5); border-top: 1px solid var(--line); }
.ev-aanw h2 { font-size: var(--step-2); margin: 0 0 var(--space-4); }
.ev-aanw-l { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.ev-aanw-l li { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.ev-aanw-l .lz-av { width: 2.2rem; height: 2.2rem; font-size: 0.72rem; }
.lz-edit { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5) 0; }
.lz-edit .btn { margin: 0; }
.lz-note { color: var(--muted); font-size: 0.92rem; }

/* aanwezighedenoverzicht (shortcode) */
.lz-att .sr { grid-template-columns: 3rem minmax(0, 1fr) auto; }
.lz-att .sr-tot small { color: var(--muted); font-weight: 600; }

/* afbeeldingen in overgenomen inhoud */
.prose img { max-width: 100%; height: auto; }
.wp-caption { max-width: 100%; }

/* rit die uit de kalender en een oude ritpagina samengevoegd is: de oude tekst ingeklapt */
.ev-oud { margin: var(--space-5) 0; border: 1px solid var(--line); border-radius: var(--r-m); padding: 0 var(--space-4); }
.ev-oud summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-family: var(--f-display); font-weight: 700; color: var(--ink-2); }
.ev-oud[open] { padding-bottom: var(--space-4); }

/* hoogteprofiel met hellingen (uit GPX) */
.ev-hp { margin: var(--space-6) 0; }
.ev-hp h2 { font-size: var(--step-2); margin: 0 0 var(--space-3); }
.hp { margin: var(--space-3) 0 var(--space-4); }
.hp-svg { display: block; width: 100%; height: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); }
.hp-grid { stroke: var(--line); stroke-width: 1; }
.hp-ax { font: 600 13px var(--f-body); fill: var(--muted); }
.hp-area { fill: color-mix(in srgb, var(--blue) 14%, transparent); }
.hp-line { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; }
.hp-klim { fill: color-mix(in srgb, var(--red) 45%, transparent); }
.hp-nr circle { fill: var(--red-ink); }
.hp-nr text { fill: #fff; font: 800 12px var(--f-display); }
.hp-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 4px; }
.hp-list li { display: grid; grid-template-columns: 1.7rem auto minmax(0, 1fr); gap: 0.6rem; align-items: baseline; padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.hp-i { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--red-ink); color: #fff; font: 800 0.75rem var(--f-display); align-self: center; }
.hp-n { font-family: var(--f-display); font-weight: 800; color: var(--red-ink); }
.hp-d { color: var(--ink-2); font-size: 0.92rem; }
.hp-cap { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-3); color: var(--muted); font-size: 0.86rem; }
.hp-cap .btn { margin: 0; }
.hp-cap svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
@media (max-width: 600px) { .hp-list li { grid-template-columns: 1.7rem minmax(0, 1fr); } .hp-d { grid-column: 2; } }