/* ====== RESET & BASE ====== */
*{margin:0;padding:0;box-sizing:border-box}
:root{ --nav-h:60px; }

/* Enforce minimum layout width of 400px */
html{ min-width:400px; }

body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:#333;
  line-height:1.6;
  overflow-x:auto;            /* allow horizontal scroll if viewport < 400px */
  position:relative;
  background:#f5f5f5;         /* fallback under the blurred bg */
  min-width:400px;            /* stop layout shrinking below 400px */
}

/* Single blurred background that starts BELOW navbar (no split) */
body::before{
  content:'';
  position:fixed;
  top:var(--nav-h);      /* push background below the navbar */
  left:0; right:0; bottom:0;
  background-image:url('./images/back.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:blur(3px);
  z-index:-1;
}

/* ====== NAVBAR ====== */
.navbar{
  position:fixed; top:0; left:0; right:0;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px;
  background:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,.1);
  z-index:1000;
}
.logo{display:flex;align-items:center}
.logo-img{height:40px;width:auto}
.nav-links{flex:1;text-align:center}
.nav-links .active{color:#e10600;font-weight:600;font-size:1.1rem}

/* Search with icon + expanding input */
.search{position:relative;display:flex;align-items:center;gap:8px}
.search-icon{width:22px;height:22px;cursor:pointer;flex:0 0 auto;transition:transform .2s}
.search-icon:hover{transform:scale(1.06)}
.search input{
  width:0 !important; opacity:0; pointer-events:none;
  border:1px solid #ddd; border-radius:20px;
  padding:.5rem 1rem; font-size:.9rem; background:#fff;
  transition:width .28s ease, opacity .28s ease;
  position:relative; z-index:1100;
}
.search input.is-open{ width:220px !important; opacity:1; pointer-events:auto }

/* ====== HERO (title band) ====== */
main{ margin-top:var(--nav-h); }

.hero{
  position:relative;
  padding: 48px 16px;   /* mobile-first spacing */
  text-align:center;
  color:#fff;
}
.hero::before{
  content:''; position:absolute; inset:0; background:rgba(0,0,0,.5); z-index:1;
}
.hero h1{
  position:relative; z-index:2;
  font-size:2rem; line-height:1.2; margin: 8px 0;
  text-shadow:2px 2px 4px rgba(0,0,0,.5);
}

/* Tighter on desktop (your request) */
@media (min-width: 768px){
  .hero{ padding: 28px 16px; }
  .hero h1{ font-size:2.2rem; margin:6px 0; }
}

/* ====== WRAPPER & GRID ====== */
.container{ max-width:1300px; margin:0 auto; padding:0 10px; text-align:center; margin-top:22px }
.race-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:20px;
  padding:20px;
}
@media (max-width:1024px){ .race-list{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:768px){ .race-list{ grid-template-columns:1fr; padding:10px 0 } }

/* ====== RACE CARD ====== */
.race-card{
  position:relative;
  background:#fff;
  border-radius:10px;
  padding:20px;
  margin:10px;
  box-shadow:0 2px 4px rgba(0,0,0,.1);
  transition:transform .2s, box-shadow .2s;
}
.race-card:hover{ transform:translateY(-5px); box-shadow:0 8px 20px rgba(0,0,0,.2) }

.race-card.past-race{
  opacity:.7; filter:grayscale(80%);
  box-shadow:0 2px 5px rgba(0,0,0,.05);
}

.race-title{ font-size:1.5rem; font-weight:600; color:#222; margin:0 0 10px; text-align:center }
.round-number{ color:#666; font-size:1rem; text-align:center; margin-bottom:15px }

/* Logos F1/F2/F3 aligned (same height) */
.logo-container{
  display:flex; justify-content:center; align-items:center;
  gap:10px; margin:10px 0; min-height:28px;
}
.series-logo{ height:26px; width:auto; object-fit:contain; display:block }
.f1-logo, .f2-logo, .f1a-logo, .f3-logo{ height:26px; width:auto; object-fit:contain }

/* Round + Date line */
.race-info{
  display:flex; justify-content:center; align-items:center;
  gap:15px; margin:5px 0;
}
.race-info h3{ margin:0; font-size:1.2rem; font-weight:600; color:#444 }
.race-card h3{ margin:10px 0; font-size:1.2rem; font-weight:700; color:#111 }
.race-card p{ margin:5px 0; font-size:1rem; color:#333 }
.session-time{ font-weight:bold }

/* ====== Switch (time) ====== */
.time-switch-container{ display:flex; align-items:center; justify-content:center; margin:15px auto; gap:10px }
.time-switch{ position:relative; width:60px; height:34px }
.time-switch input{ opacity:0; width:0; height:0 }
.time-switch label{
  position:absolute; inset:0; background:#fff; border:2px solid #fff;
  border-radius:34px; cursor:pointer;
}
.time-switch label::before{
  content:''; position:absolute; top:50%; right:2px; width:30px; height:30px;
  background:#e00707; border-radius:50%; transform:translateY(-50%); transition:transform .3s;
}
.time-switch input:checked + label::before{ transform:translate(-28px,-50%) }
.time-switch-container .label-left, .time-switch-container .label-right{ font-size:.9rem; color:#333 }

/* ====== Filter (F1 only) ====== */
.filter-toggle-container{ display:flex; align-items:center; justify-content:center; margin:10px 0; gap:10px }
.filter-toggle{ position:relative; width:60px; height:34px }
.filter-toggle input{ opacity:0; width:0; height:0 }
.filter-toggle label{
  position:absolute; inset:0; background:#fff; border:2px solid #fff;
  border-radius:34px; cursor:pointer;
}
.filter-toggle label::before{
  content:''; position:absolute; top:50%; left:2px; width:30px; height:30px;
  background:#d80027; border-radius:50%; transform:translateY(-50%); transition:transform .3s;
}
.filter-toggle input:checked + label::before{ transform:translate(28px,-50%) }
.filter-label-left, .filter-label-right{ font-size:.9rem; color:#333 }

/* ====== Sessions ====== */
.session{
  margin:10px 0; background:#f9f9f9; border:1px solid #ddd;
  border-radius:8px; padding:10px; box-shadow:0 2px 5px rgba(0,0,0,.05);
}
.past-session{ opacity:.5; filter:grayscale(100%) }

/* Constrain session logos so they never explode in size */
.session-f1-logo, .session-f2-logo, .session-f1a-logo, .session-f3-logo{
  width:35px; height:15px; margin-right:15px; object-fit:contain; vertical-align:middle;
}

/* === Ações da sessão (para alinhar o botão X embaixo, à direita) === */
.session-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:8px;
}

/* === Botão X === */
.share-x-btn{
  margin-top: 8px;
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
  border-radius:4px;
  cursor:pointer;
  font-weight:700;
  line-height:1;
  padding:4px 8px;
  font-size:13px;
  color:#111;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  float: right;
}
.share-x-btn:hover{
  transform:scale(1.06);
  box-shadow:0 2px 8px rgba(0,0,0,.2);
  background:#f3f3f3;
}
.share-x-btn:active{ transform:scale(0.98) }
.x-glyph{ font-size:14px; pointer-events:none; }

/* ====== Optional highlight for next race ====== */
.race-card.next-race{
  outline:3px solid #e10600;
  box-shadow:0 0 20px rgba(225,6,0,.25);
}
/* Selo "RACE WEEK" no topo do card */
.race-card.next-race::before {
  content: "RACE WEEK";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  font-weight: bold;
  font-size: 0.85rem;
  color: white;
  background-color: #4CAF50;
  border-radius: 4px;
  animation: blink 1s infinite;
  z-index: 5;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ====== FOOTER ====== */
footer{ background:#333; color:#fff; padding:1rem; text-align:center; margin-top:2rem }
footer p{ font-size:.9rem; color:#ccc; padding:20px 10px }

/* ====== MOBILE fine-tuning ====== */
@media (max-width:768px){
  :root{ --nav-h:56px; }               /* slightly shorter navbar */
  .logo-img{ height:34px }
  .hero{ padding:48px 14px }           /* keep comfy on mobile */
  .race-card{ padding:15px }
  .race-info{ flex-direction:column; gap:6px }
}

/* === Tema forçado via botão (tem que ficar no FINAL do CSS) === */
body[data-theme="dark"] {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

/* Navbar / cartões / textos no modo escuro forçado */
body[data-theme="dark"] .navbar {
  background-color: #2a2a2a;
  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .race-card {
  background: rgba(42,42,42,0.92);
  box-shadow: 0 5px 15px rgba(255,255,255,0.08);
}

body[data-theme="dark"] .race-card:hover {
  box-shadow: 0 8px 20px rgba(255,255,255,0.14);
}

body[data-theme="dark"] .race-card h2,
body[data-theme="dark"] .race-card h3 { color: #e0e0e0; }

body[data-theme="dark"] .race-card p { color: #c0c0c0; }

body[data-theme="dark"] .session {
  background: rgba(51,51,51,0.9);
  border: 1px solid #555;
  box-shadow: 0 2px 5px rgba(255,255,255,0.05);
}

body[data-theme="dark"] .time-switch-container .label-left,
body[data-theme="dark"] .time-switch-container .label-right,
body[data-theme="dark"] .filter-toggle-container .filter-label-left,
body[data-theme="dark"] .filter-label-right { color: #e0e0e0; }

body[data-theme="dark"] .filter-toggle label,
body[data-theme="dark"] .time-switch label { background-color: #2a2a2a; border-color: #555; }

body[data-theme="dark"] .filter-toggle input:checked + label,
body[data-theme="dark"] .time-switch input:checked + label { background-color: #2a2a2a; }

/* Tema claro forçado */
body[data-theme="light"] {
  background-color: #f5f5f5;
  color: #333;
}
body[data-theme="light"] .navbar { background: #fff; }
body[data-theme="light"] .race-card { background: #ffffff; }

/* Top Bar position search */
.top-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: var(--bg-secondary);
    padding: 5px 0; /* Remove padding lateral */
    margin: 0;
}

/* Container dos botões */
.top-bar .controls {
    display: flex;
    align-items: center;
    gap: 5px; /* Espaço entre botões */
    padding-right: 0;
    margin-right: 0;
}

/* Botões de idioma e ícones */
.lang-btn, .icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 5px;
}

.lang-btn:hover, .icon-btn:hover {
    background-color: rgba(0,0,0,0.1);
    border-radius: 4px;
}
/* === Flush actions to the right edge (no right gap) === */
.navbar {
  padding-right: 0 !important;   /* remove the default right padding */
}

.navbar .actions {
  margin-left: auto;             /* push actions to the far right */
  padding-right: 0 !important;   /* no internal right padding */
  margin-right: 0 !important;    /* no external right margin */
  gap: 8px;                      /* keep spacing between icons/buttons */
}

.navbar .search { padding-right: 0 !important; margin-right: 0 !important; }

/* If the search icon has any default margin, kill it */
.navbar .search-icon { margin-right: 0 !important; }

/* Aparência padrão (desktop): mantém GB / BR / ES */
.lang-btn {
  background: transparent;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.lang-btn:hover { transform: scale(1.06); box-shadow: 0 0 6px rgba(0,0,0,.15); }

/* ---- Mobile: trocar texto por emoji de bandeira ---- */
@media (max-width: 768px) {
  .lang-btn {
    font-size: 0; /* esconde o texto "GB/BR/ES" sem mexer no HTML */
    padding: 3px 5px;
    width: 32px;   /* largura mínima para toque confortável */
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .lang-btn::before { font-size: 18px; line-height: 1; }
  .lang-btn[data-lang="en"]::before { content: "🇬🇧"; }
  .lang-btn[data-lang="pt"]::before { content: "🇧🇷"; }
  .lang-btn[data-lang="es"]::before { content: "🇪🇸"; }
}

/* (opcional) garantir que a área de ações encoste na borda direita */
.navbar { padding-right: 0 !important; }
.navbar .actions { margin-left: auto; padding-right: 0 !important; margin-right: 0 !important; gap: 8px; }
.navbar .search, .navbar .search-icon { margin-right: 0 !important; padding-right: 0 !important; }

.tz-badge { margin-left: 8px; font-size: 12px; opacity: .7; }

/* Standings dropdown trigger */
.menu-btn {
  background: transparent;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 14px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.menu-btn:hover { transform: scale(1.06); box-shadow: 0 0 6px rgba(0,0,0,.15); }
@media (max-width: 768px) {
  .menu-btn {
    font-size: 14px;
    padding: 4px 8px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}