/* ============================================================
   MARATONA DO ALGARVE, Dorsal v2, fase 4, família 1: elementos comuns
   Barra de topo, cabeçalho, menu móvel, rodapé e botão fixo do telemóvel,
   iguais nas 75 páginas. Só redesenha estes elementos: mantém as classes e a
   estrutura atuais (o main.js e o tracking.js dependem delas) e não mexe no
   corpo das páginas, que muda família a família.
   Carregada no includes/header.php, depois do style.css e do dorsal.css.
   ============================================================ */

@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/anton-latin.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/roboto-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/roboto-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/roboto-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Tokens do Dorsal v2 (docs/refresh-2026/linha-grafica/mockups/css/tokens.css) */
  --v2-noite: #051726;
  --v2-noite-2: #0C2639;
  --v2-vivo: #0092DB;
  --v2-sinal: #09B4E3;
  --v2-vivo-texto: #00679B;
  --v2-bruma: #A9BECB;
  --v2-linha: #D3DEE6;
  --v2-display: 'Anton', 'Arial Narrow', sans-serif;
  --v2-corpo: 'Roboto', system-ui, sans-serif;
  --v2-raio: 4px;
  --v2-sair: cubic-bezier(0.22, 1, 0.36, 1);
  /* Todas as páginas já estão no sistema: as letras antigas do style.css (Space Grotesk e Manrope)
     deixam de ser usadas, incluindo o aviso e o painel de cookies. O body.dorsal redefine-as à parte. */
  --font-display: var(--v2-corpo);
  --font-body: var(--v2-corpo);
}

.announce-bar, .header, .mobile-nav, .footer, .sticky-cta, .skip-link { font-family: var(--v2-corpo); }

/* ---------- Barra de topo ---------- */
.announce-bar { background: var(--v2-noite-2); box-shadow: none; border-bottom: 1px solid rgba(255,255,255,.08); }
.announce-bar__link { color: var(--v2-bruma); font-weight: 400; justify-content: space-between; max-width: 1240px; margin: 0 auto; }
.announce-bar__icon { display: none; }
.announce-bar__text { color: var(--v2-bruma); }
.announce-bar__text strong { color: #fff; font-weight: 500; }
.announce-bar__action { background: none; border-radius: 0; padding: 0; color: var(--v2-sinal); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.announce-bar__link:hover .announce-bar__action { background: none; color: #fff; }

/* ---------- Cabeçalho escuro ---------- */
.header, .header.scrolled { background: var(--v2-noite); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: none; }
.header__logo img { height: 40px; }
.nav__link { color: #fff; opacity: .86; border-radius: var(--v2-raio); padding: 8px 12px; font-size: .9rem; }
.nav__link:hover { color: #fff; opacity: 1; background: rgba(255,255,255,.06); }
.nav__link[aria-current="page"] { color: #fff; opacity: 1; font-weight: 500; box-shadow: inset 0 -2px 0 var(--v2-sinal); border-radius: 0; }
.nav__cta { background: var(--v2-sinal); color: var(--v2-noite) !important; border-radius: var(--v2-raio); box-shadow: none; padding: 12px 20px; font-weight: 700; }
.nav__cta::after { display: none; }
.nav__cta:hover { transform: none; box-shadow: none; background: #3BC4EA; }
.nav__dropdown { border-radius: var(--v2-raio); transition-duration: .2s; transition-timing-function: var(--v2-sair); }
.nav__link, .nav__cta, .lang-switch__opt { transition-duration: .12s; transition-timing-function: var(--v2-sair); }
@media (prefers-reduced-motion: reduce) { .nav__dropdown { transition-property: opacity, visibility; } }
.nav__dropdown::before { display: none; }
.nav__dropdown a { color: var(--v2-noite); border-radius: var(--v2-raio); }
.nav__dropdown a:hover { color: var(--v2-vivo-texto); padding-left: 16px; }
.lang-switch__opt { color: var(--v2-bruma); border-radius: var(--v2-raio); }
.lang-switch__opt:hover { color: #fff; }
.lang-switch__opt.is-active { color: #fff; background: rgba(255,255,255,.1); }
.lang-switch__sep { color: rgba(255,255,255,.3); }
.menu-toggle span { background: #fff; }

/* ---------- Menu móvel ---------- */
.mobile-nav { background: var(--v2-noite); color: #fff; }
/* O menu entra por transform e não por "right" (P2-12: animar o layout custa mais e salta) */
.mobile-nav { right: 0; transform: translateX(105%); transition: transform .3s var(--v2-sair); }
.mobile-nav.open { right: 0; transform: none; }
@media (prefers-reduced-motion: reduce) { .mobile-nav { transition: none; } }
.mobile-nav__link { color: #fff; border-bottom-color: rgba(255,255,255,.1); font-weight: 500; }
.mobile-nav__link[aria-current="page"] { color: var(--v2-sinal); }
.mobile-nav__sub a { color: var(--v2-bruma); border-bottom-color: rgba(255,255,255,.06); }
.mobile-nav__cta { background: var(--v2-sinal); color: var(--v2-noite); border-radius: var(--v2-raio); box-shadow: none; font-weight: 700; }
.mobile-nav__lang, .mobile-nav__lang a { color: var(--v2-bruma); }

/* ---------- Rodapé ---------- */
.footer { background: var(--v2-noite-2); color: var(--v2-bruma); }
.footer__logo { height: 40px; width: auto; }
.footer__desc { color: var(--v2-bruma); }
.footer__social a { border-radius: var(--v2-raio); background: rgba(255,255,255,.06); color: #fff; }
.footer__social a:hover { background: var(--v2-sinal); color: var(--v2-noite); transform: none; }
.footer__col-title { color: #fff; letter-spacing: .12em; }
.footer__col a { color: var(--v2-bruma); }
.footer__col a:hover { color: #fff; }
.footer__partners-label { color: var(--v2-bruma); }
/* Os logótipos dos parceiros passam a branco sobre o fundo escuro, sem pastilhas */
.footer__partners .logo-chip { background: transparent; border: 0; border-radius: 0; padding: 8px 12px 8px 0; height: auto; box-shadow: none; }
.footer__partners .logo-chip:hover { transform: none; box-shadow: none; }
.footer__partners .logo-chip img { filter: brightness(0) invert(1); opacity: .78; height: 28px; }
.footer__partners .logo-chip--tall img { height: 36px; }
/* O logótipo da GlobalSport tem fundo opaco: fica numa pastilha branca pequena */
.footer__partners .logo-chip:has(img[alt="GlobalSport"]) { background: #fff; border-radius: var(--v2-raio); padding: 6px 10px; margin-right: 12px; }
.footer__partners .logo-chip img[alt="GlobalSport"] { filter: none; opacity: 1; }
/* O chip de cronometragem do dorsal, como filete antes da linha legal */
.footer__bottom { border-top: 0; position: relative; padding-top: 40px; }
.footer__bottom::before { content: ''; position: absolute; left: 0; right: 0; top: 12px; height: 14px; opacity: .3; background: repeating-linear-gradient(90deg, var(--v2-bruma) 0 2px, transparent 2px 5px, var(--v2-bruma) 5px 6px, transparent 6px 9px); }
.footer__legal a, .footer__legal .cc-reopen { color: var(--v2-bruma); }
.footer__legal a:hover { color: #fff; }
/* "Desenvolvido por": o branco a 45% do desenho antigo fica abaixo de 4,5:1 sobre o noite-2 */
.footer__credit span, .footer__bottom p { color: var(--v2-bruma); }

/* ---------- Botão fixo do telemóvel ---------- */
.sticky-cta { background: var(--v2-noite); box-shadow: none; border-top: 1px solid rgba(255,255,255,.12); }
.sticky-cta__btn, body.dorsal .sticky-cta__btn { background: var(--v2-sinal); color: var(--v2-noite); border-radius: var(--v2-raio); font-weight: 700; }

/* ---------- Saltar para o conteúdo ---------- */
.skip-link { background: var(--v2-sinal); color: var(--v2-noite); border-radius: var(--v2-raio); font-weight: 700; }

@media (max-width: 600px) {
  .announce-bar__link { justify-content: center; text-align: left; }
}

/* Correções de UX (29 set 2026): alvos de toque de 44 px no logótipo e no rodapé (WCAG 2.5.5, Baymard),
   e a ação da barra do topo como ação com seta e não como texto sublinhado. */
.header__logo { display: inline-flex; align-items: center; min-height: 44px; }
.footer__col li { margin-bottom: 0; }
.footer__col a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__legal a, .footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.announce-bar__action { text-decoration: none; }
.announce-bar__action::after { content: ' →'; }