/* Visterra Runs: Services menu for the race-style header (PT-BR, FR, DE, IT homes and the Training Camps pages).
   Native <details>: it opens and closes without JavaScript; services-menu.js only adds Escape / click-outside / Tab-out closing.
   The menu sits right after the logo, inside .header-inner. Add a new <a> to .svc-panel only when its page is published. */
.svc-menu { position: relative; margin-left: 24px; margin-right: auto; flex: none; }
.svc-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 700; white-space: nowrap; color: rgba(255, 249, 238, 0.82); }
.svc-menu > summary::-webkit-details-marker { display: none; }
.svc-menu > summary:hover, .svc-menu[open] > summary { color: var(--vr-orange-on-dark, #ff7a52); }
.svc-menu > summary:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 6px; }
.svc-menu > summary svg { flex: none; transition: transform 0.2s; }
.svc-menu[open] > summary svg { transform: rotate(180deg); }
.svc-panel { position: absolute; top: calc(100% + 8px); left: 0; min-width: 260px; background: #06101c; border: 1px solid rgba(255, 249, 238, 0.18); border-radius: 12px; padding: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); z-index: 110; }
.svc-panel a { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; padding: 0 14px; border-radius: 8px; font-size: 15px; font-weight: 700; white-space: nowrap; text-decoration: none; color: rgba(255, 249, 238, 0.92); }
.svc-panel a:hover, .svc-panel a:focus-visible { background: rgba(255, 249, 238, 0.08); color: var(--vr-orange-on-dark, #ff7a52); }
.svc-panel a[aria-current="page"] { border-left: 3px solid var(--vr-orange-btn, #f04722); }
.svc-lang { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.08em; border: 1px solid rgba(255, 249, 238, 0.4); border-radius: 4px; padding: 1px 6px; color: rgba(255, 249, 238, 0.78); }
/* phones and narrow tablets: the header already wraps (logo row, then links); the menu takes the right side of the logo row and the panel spans the header width */
@media (max-width: 640px) {
  .svc-menu { position: static; margin-left: auto; margin-right: 0; }
  .svc-menu > summary { font-size: 13px; }
  .svc-panel { left: 16px; right: 16px; top: 100%; min-width: 0; border-radius: 0 0 12px 12px; }
}
/* tablet widths: logo + menu + links no longer fit on one line, so the links drop to a second row (the same pattern the header already uses on phones).
   The breakpoint depends on the page (the home headers are shorter than the Training Camps headers, which carry a longer "request a proposal" button) and on the language (label lengths). Measured, plus a safety margin. */
@media (min-width: 641px) and (max-width: 1099px) { html[lang="pt-BR"] body[data-race$="-home"] .header-inner { flex-wrap: wrap; } html[lang="pt-BR"] body[data-race$="-home"] .header-inner > .header-links { flex: 1 1 100%; justify-content: flex-end; padding-bottom: 8px; } }
@media (min-width: 641px) and (max-width: 1099px) { html[lang^="fr"] body[data-race$="-home"] .header-inner { flex-wrap: wrap; } html[lang^="fr"] body[data-race$="-home"] .header-inner > .header-links { flex: 1 1 100%; justify-content: flex-end; padding-bottom: 8px; } }
@media (min-width: 641px) and (max-width: 1099px) { html[lang="de-DE"] body[data-race$="-home"] .header-inner { flex-wrap: wrap; } html[lang="de-DE"] body[data-race$="-home"] .header-inner > .header-links { flex: 1 1 100%; justify-content: flex-end; padding-bottom: 8px; } }
@media (min-width: 641px) and (max-width: 1059px) { html[lang="it-IT"] body[data-race$="-home"] .header-inner { flex-wrap: wrap; } html[lang="it-IT"] body[data-race$="-home"] .header-inner > .header-links { flex: 1 1 100%; justify-content: flex-end; padding-bottom: 8px; } }
/* Training Camps and Race Week Hospitality pages (six languages, six-language selector in the header; same header content widths) */
@media (min-width: 641px) and (max-width: 1130px) { html[lang="en"] body:is([data-race="training-camps"],[data-race="race-week-hospitality"],[data-race="running-club-group-travel"]) .header-inner { flex-wrap: wrap; } html[lang="en"] body:is([data-race="training-camps"],[data-race="race-week-hospitality"],[data-race="running-club-group-travel"]) .header-inner > .header-links { flex: 1 1 100%; justify-content: flex-end; padding-bottom: 8px; } }
@media (min-width: 641px) and (max-width: 1150px) { html[lang="es"] body:is([data-race="training-camps"],[data-race="race-week-hospitality"],[data-race="running-club-group-travel"]) .header-inner { flex-wrap: wrap; } html[lang="es"] body:is([data-race="training-camps"],[data-race="race-week-hospitality"],[data-race="running-club-group-travel"]) .header-inner > .header-links { flex: 1 1 100%; justify-content: flex-end; padding-bottom: 8px; } }
@media (min-width: 641px) and (max-width: 1110px) { html[lang="pt-BR"] body:is([data-race="training-camps"],[data-race="race-week-hospitality"],[data-race="running-club-group-travel"]) .header-inner { flex-wrap: wrap; } html[lang="pt-BR"] body:is([data-race="training-camps"],[data-race="race-week-hospitality"],[data-race="running-club-group-travel"]) .header-inner > .header-links { flex: 1 1 100%; justify-content: flex-end; padding-bottom: 8px; } }
@media (min-width: 641px) and (max-width: 1180px) { html[lang="fr-FR"] body:is([data-race="training-camps"],[data-race="race-week-hospitality"],[data-race="running-club-group-travel"]) .header-inner { flex-wrap: wrap; } html[lang="fr-FR"] body:is([data-race="training-camps"],[data-race="race-week-hospitality"],[data-race="running-club-group-travel"]) .header-inner > .header-links { flex: 1 1 100%; justify-content: flex-end; padding-bottom: 8px; } }
@media (min-width: 641px) and (max-width: 1140px) { html[lang="de-DE"] body:is([data-race="training-camps"],[data-race="race-week-hospitality"],[data-race="running-club-group-travel"]) .header-inner { flex-wrap: wrap; } html[lang="de-DE"] body:is([data-race="training-camps"],[data-race="race-week-hospitality"],[data-race="running-club-group-travel"]) .header-inner > .header-links { flex: 1 1 100%; justify-content: flex-end; padding-bottom: 8px; } }
@media (min-width: 641px) and (max-width: 1120px) { html[lang="it-IT"] body:is([data-race="training-camps"],[data-race="race-week-hospitality"],[data-race="running-club-group-travel"]) .header-inner { flex-wrap: wrap; } html[lang="it-IT"] body:is([data-race="training-camps"],[data-race="race-week-hospitality"],[data-race="running-club-group-travel"]) .header-inner > .header-links { flex: 1 1 100%; justify-content: flex-end; padding-bottom: 8px; } }
/* narrow tablets: the Training Camps header row (races link, request button, six-language selector) may wrap onto a third line (French is the longest) instead of overflowing */
@media (min-width: 641px) and (max-width: 760px) { body:is([data-race="training-camps"],[data-race="race-week-hospitality"],[data-race="running-club-group-travel"]) .header-inner > .header-links { gap: 4px 14px; flex-wrap: wrap; } }