/* =========================================================
   Formula 1 Statistics & Historical Results - visual "Heritage"
   - .f1-ad / .f1-side : cabecalho (matriz.asp), todas as paginas
   - body.f1         : estrutura comum (menu lateral, anuncio, rodape)
   - body.home       : grade da pagina principal (default.asp)
   - body.f1-inner   : paginas internas (tabelas antigas reestilizadas)
   - body:not(.f1)   : estilos antigos, para paginas ainda nao convertidas
   ========================================================= */

:root {
	--f1-navy: #0B1F3A;
	--f1-navy-2: #102A4C;
	--f1-navy-3: #163257;
	--f1-navy-line: #2B4A75;
	--f1-red: #C8102E;
	--f1-link: #A50E25;
	--f1-paper: #F5F2EA;
	--f1-ink: #1C1C1C;
	--f1-muted: #5A5446;
	--f1-card-line: #E2DCCB;
	--f1-row-line: #E8E3D6;
	--f1-hover: #FBF4E4;
	--f1-side-text: #DCE3EE;
	--f1-side-muted: #A9B6C9;
	--f1-cond: "Barlow Condensed", "Arial Narrow", sans-serif;
	--f1-sans: Barlow, "Segoe UI", Arial, sans-serif;
}

/* ---------- Estilos antigos (demais paginas) ---------- */
body:not(.f1) a:link,
body:not(.f1) a:visited { color: FireBrick; text-decoration: none; font-family: Verdana; font-size: 8pt; }
body:not(.f1) a:hover { color: darkblue; text-decoration: underline; font-family: Verdana; font-size: 8pt; }
body:not(.f1) td { border-bottom: DarkSlateGrey 1px solid; }
body:not(.f1) select,
body:not(.f1) input { font-family: Verdana; font-size: 8pt; }
body:not(.f1) h1 { font-family: Verdana; color: White; font-size: 8pt; }

/* ---------- Utilitarios ---------- */
.f1-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.f1-flag { height: 10px; background: repeating-conic-gradient(var(--f1-ink) 0 25%, #FFFFFF 0 50%) 0 0 / 10px 10px; }

/* ---------- Anuncio (tamanho fixo por largura de tela) ---------- */
.f1-ad { text-align: center; line-height: 0; }
.f1-adslot { width: 728px; height: 90px; }

/* ---------- Cabecalho / menu (todas as paginas) ---------- */
.f1-side { background: var(--f1-navy); color: #FFFFFF; font-family: var(--f1-sans); box-sizing: border-box; }
.f1-side *, .f1-side *::before, .f1-side *::after { box-sizing: border-box; }

body .f1-side a.f1-brand:link,
body .f1-side a.f1-brand:visited { display: block; color: #FFFFFF; text-decoration: none; font-family: var(--f1-sans); font-size: 13px; }
.f1-brand-name { display: block; font-family: var(--f1-cond); font-weight: 800; font-size: 30px; line-height: .95; letter-spacing: .01em; text-transform: uppercase; color: #FFFFFF; }
.f1-brand-sub { display: block; margin-top: 6px; font-size: 13px; color: var(--f1-side-muted); }

.f1-season { display: flex; gap: 8px; margin: 0; }
body .f1-season select {
	flex: 1; min-width: 0; height: 44px; padding: 0 12px; border-radius: 8px;
	border: 1px solid var(--f1-navy-line); background: var(--f1-navy-2); color: #FFFFFF;
	font-family: var(--f1-sans); font-size: 16px; font-weight: 600; cursor: pointer;
}
body .f1-season input[type="submit"] {
	height: 44px; padding: 0 16px; border-radius: 8px; border: 0;
	background: var(--f1-red); color: #FFFFFF; font-family: var(--f1-sans); font-size: 15px; font-weight: 600; cursor: pointer;
}
body .f1-season input[type="submit"]:hover { background: #A50E25; }

.f1-nav { display: flex; flex-direction: column; gap: 2px; }
.f1-nav-group { font-family: var(--f1-cond); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--f1-side-muted); padding: 14px 12px 4px; }
.f1-nav-group:first-child { padding-top: 4px; }
.f1-nav-sep { height: 1px; background: #23406A; margin: 12px 0; }
body .f1-side .f1-nav a:link,
body .f1-side .f1-nav a:visited {
	display: block; color: var(--f1-side-text); font-family: var(--f1-sans); font-size: 15px;
	padding: 10px 12px; border-radius: 8px; text-decoration: none;
}
body .f1-side .f1-nav a:hover,
body .f1-side .f1-nav a:focus-visible { background: var(--f1-navy-3); color: #FFFFFF; text-decoration: none; }

/* Demais paginas: cabecalho em barra horizontal com a mesma altura
   aproximada do cabecalho antigo (os blocos dessas paginas usam posicoes fixas). */
body:not(.f1) .f1-ad { height: 90px; overflow: hidden; }
body:not(.f1) .f1-side {
	height: 96px; overflow: hidden; margin: 0 -8px; padding: 8px 16px 0;
	display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: 44px 40px; column-gap: 20px; align-items: center;
}
body:not(.f1) .f1-brand { grid-column: 1; grid-row: 1; }
body:not(.f1) .f1-brand-name { font-size: 22px; line-height: 1; }
body:not(.f1) .f1-brand-name br { display: none; }
body:not(.f1) .f1-brand-sub { display: none; }
body:not(.f1) .f1-side > .f1-flag { grid-column: 2; grid-row: 1; height: 8px; opacity: .9; }
body:not(.f1) .f1-season { grid-column: 3; grid-row: 1; }
body:not(.f1) .f1-season select { flex: none; width: 110px; height: 36px; font-size: 14px; }
body:not(.f1) .f1-season input[type="submit"] { height: 36px; font-size: 14px; }
body:not(.f1) .f1-nav { grid-column: 1 / -1; grid-row: 2; flex-direction: row; align-items: center; overflow-x: auto; white-space: nowrap; }
body:not(.f1) .f1-nav-group { display: none; }
body:not(.f1) .f1-nav-sep { width: 1px; height: 18px; margin: 0 6px; flex: none; }
body:not(.f1) .f1-side .f1-nav a:link,
body:not(.f1) .f1-side .f1-nav a:visited { font-size: 13px; padding: 7px 7px; white-space: nowrap; }

/* =========================================================
   Pagina principal
   ========================================================= */
body.f1 {
	margin: 0; background: var(--f1-paper); color: var(--f1-ink);
	font-family: var(--f1-sans); font-size: 14px; line-height: 1.4;
	display: grid; grid-template-columns: 280px minmax(0, 1fr);
	grid-template-areas: "side ad" "side main" "side footer";
	grid-template-rows: auto 1fr auto; min-height: 100vh;
}
body.f1 *, body.f1 *::before, body.f1 *::after { box-sizing: border-box; }
body.f1 a { color: var(--f1-link); text-decoration: none; }
body.f1 a:hover { color: var(--f1-navy); text-decoration: underline; }

body.f1 .f1-side { grid-area: side; padding: 24px 16px; display: flex; flex-direction: column; gap: 20px; }
body.f1 .f1-side > .f1-flag { border-radius: 2px; }
body.f1 .f1-ad { grid-area: ad; padding: 24px 28px 0; }
body.home .f1-main,
body.f1 .f1-page { grid-area: main; }
body.f1 .f1-footer { grid-area: footer; }

/* Grade de conteudo */
.f1-main {
	padding: 24px 28px 40px; display: grid; gap: 24px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-areas:
		"title       learn"
		"drivers     constructors"
		"review      review"
		"calendar    news";
	align-items: start;
}
.f1-title { grid-area: title; align-self: end; }
.f1-drivers { grid-area: drivers; }
.f1-constructors { grid-area: constructors; }
.f1-review { grid-area: review; }
.f1-calendar { grid-area: calendar; }
.f1-news { grid-area: news; }
.f1-learn { grid-area: learn; }

.f1-eyebrow { margin: 0 0 2px; font-family: var(--f1-cond); font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--f1-link); }
body.home h1 { margin: 0; font-family: var(--f1-cond); font-size: 52px; font-weight: 800; line-height: .95; text-transform: uppercase; color: var(--f1-navy); }

/* Os blocos antigos tinham posicao/tamanho fixos no atributo style:
   aqui eles passam a fluir na grade. */
.f1-main .f1-card,
.f1-main .f1-learn {
	position: static !important; width: auto !important; height: auto !important;
	left: auto !important; top: auto !important; min-width: 0;
}
.f1-main .f1-card {
	background: #FFFFFF !important; border: 1px solid var(--f1-card-line) !important;
	border-radius: 6px; overflow: auto !important; max-height: 420px;
}
.f1-main .f1-review { max-height: 480px; }
.f1-main .f1-news { max-height: 520px; }
.f1-main .f1-calendar { max-height: 520px; }

/* Tabelas */
.f1-table { width: 100%; border-collapse: collapse; font-family: var(--f1-sans); font-size: 14px; color: var(--f1-ink); }
.f1-table td { padding: 9px 12px; border-bottom: 1px solid var(--f1-row-line); vertical-align: middle; }
.f1-table tbody tr:hover td { background: var(--f1-hover); }
.f1-table tbody tr:last-child td { border-bottom: 0; }

.f1-cardhead td {
	position: sticky; top: 0; z-index: 2; height: 46px; padding: 0 14px;
	background: var(--f1-navy); color: #FFFFFF; border-bottom: 0;
	font-family: var(--f1-cond); font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; text-align: left;
}
.f1-cardhead-red td { background: var(--f1-red); }
.f1-cols td {
	position: sticky; top: 46px; z-index: 1; background: #FFFFFF;
	font-family: var(--f1-cond); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #4A4A4A;
	border-bottom: 2px solid var(--f1-ink); padding: 8px 12px;
}
.f1-c { text-align: center; }
.f1-r { text-align: right; }
.f1-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.f1-gp a { font-weight: 600; }

.f1-pos { width: 44px; font-family: var(--f1-cond); font-size: 20px; font-weight: 800; color: var(--f1-navy); text-align: center; }
.f1-standings tbody tr:first-child .f1-pos { color: var(--f1-red); }
.f1-standings a { font-weight: 500; }
.f1-pts { text-align: right; font-family: var(--f1-cond); font-size: 18px; font-weight: 700; white-space: nowrap; }
.f1-empty { padding: 40px 16px !important; text-align: center; color: var(--f1-muted); font-weight: 600; }

/* Calendario */
.f1-cal { padding: 0 !important; }
.f1-cal a { display: flex; gap: 14px; align-items: baseline; padding: 10px 14px; color: var(--f1-ink) !important; }
.f1-cal a:hover { text-decoration: none !important; }
.f1-cal a:hover .f1-cal-name { text-decoration: underline; }
.f1-cal-date { flex: none; min-width: 84px; font-family: var(--f1-cond); font-size: 16px; font-weight: 700; color: var(--f1-link); }
.f1-cal-name { font-size: 14px; }

/* Saiba mais / aniversariantes */
.f1-main .f1-learn {
	background: transparent !important; border: 0 !important; overflow: visible !important;
	align-self: end; text-align: right; font-size: 14px; line-height: 1.6;
}
.f1-learn p { margin: 0; }
.f1-learn a { font-weight: 600; }
.f1-bday:empty { display: none; }

/* Noticias (HTML gerado pelo ASP a partir do RSS) */
.f1-news tbody td { padding: 14px; line-height: 1.45; }
.f1-news tbody td > a { font-size: 15px; font-weight: 600; line-height: 1.35; }
.f1-news tbody font { display: block; margin: 6px 0; font-family: var(--f1-sans); font-size: 13px; color: #4A4A4A; }
.f1-news tbody td { color: var(--f1-muted); font-size: 12px; }
.f1-news tbody hr { display: none; }
.f1-news tbody img { max-width: 100%; height: auto; }

/* Rodape */
.f1-footer { padding: 0 28px 28px; }
.f1-footer p { margin: 12px 0 0; font-size: 13px; color: var(--f1-muted); }

/* ---------- Telas medias ---------- */
@media (max-width: 1100px) {
	.f1-main {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "title" "learn" "drivers" "constructors" "review" "calendar" "news";
	}
	.f1-main .f1-learn { text-align: left; }
}
@media (min-width: 761px) and (max-width: 1099px) {
	body.f1 .f1-adslot { width: 468px; height: 60px; }
}
@media (min-width: 1100px) and (max-width: 1400px) {
	.f1-main { grid-template-areas: "title title" "learn learn" "drivers constructors" "review review" "calendar news"; }
	.f1-main .f1-learn { text-align: left; }
}

/* ---------- Celular ---------- */
@media (max-width: 760px) {
	body.f1 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "ad" "main" "footer"; grid-template-rows: auto; }
	body.f1 .f1-side { padding: 16px; gap: 14px; }
	.f1-brand-name { font-size: 24px; }
	.f1-brand-name br { display: none; }
	body.f1 .f1-nav { flex-direction: row; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
	body.f1 .f1-nav::-webkit-scrollbar { display: none; }
	body.f1 .f1-nav-group { display: none; }
	body.f1 .f1-nav-sep { width: 1px; height: 22px; margin: 0 4px; flex: none; align-self: center; }
	body.f1 .f1-side .f1-nav a:link,
	body.f1 .f1-side .f1-nav a:visited { white-space: nowrap; background: var(--f1-navy-2); font-size: 14px; }
	body.f1 .f1-ad { padding: 16px 16px 0; }
	body.f1 .f1-adslot { width: 320px; height: 100px; }
	.f1-main { padding: 16px 16px 32px; gap: 16px; }
	body.home h1 { font-size: 38px; }
	.f1-table td { padding: 8px 10px; }
	.f1-opt { display: none; }
	.f1-cardhead td { font-size: 20px; height: 42px; }
	.f1-cols td { top: 42px; }
	.f1-footer { padding: 0 16px 24px; }
}

/* =========================================================
   Paginas internas (body.f1-inner)
   As tabelas antigas mantem os atributos e estilos inline gerados
   pelo ASP; aqui eles sao sobrepostos.
   ========================================================= */
.f1-page { padding: 24px 28px 40px; min-width: 0; font-size: 14px; line-height: 1.5; }
.f1-page > .f1-tw, .f1-page > .f1-box-wide { margin-bottom: 20px; }

/* Blocos lado a lado (antes tinham posicao absoluta) */
.f1-boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; margin-bottom: 20px; }

/* Voltar + titulo */
.f1-page > .f1-back { margin-bottom: 12px; }
body.f1 a.f1-back {
	display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
	border: 1px solid var(--f1-card-line); border-radius: 999px; background: #FFFFFF;
	color: var(--f1-navy); font-size: 14px; font-weight: 600; text-decoration: none;
}
body.f1 a.f1-back:hover { background: var(--f1-navy); border-color: var(--f1-navy); color: #FFFFFF; }
body.f1-inner h1 {
	margin: 12px 0 8px; padding-bottom: 12px; border-bottom: 2px solid var(--f1-ink);
	font-family: var(--f1-cond); font-size: 44px; font-weight: 800; line-height: 1;
	text-transform: uppercase; color: var(--f1-navy);
}

/* Cartao que envolve cada tabela principal (rola na horizontal no celular) */
.f1-tw {
	background: #FFFFFF; border: 1px solid var(--f1-card-line); border-radius: 6px;
	overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.f1-tw:empty { display: none; }

/* Blocos que antes tinham posicao absoluta */
.f1-page .f1-box {
	position: static !important; width: auto !important; height: auto !important;
	left: auto !important; top: auto !important; box-sizing: border-box;
	max-height: 460px; overflow: auto !important;
	background: #FFFFFF !important; border: 1px solid var(--f1-card-line) !important; border-radius: 6px;
}
.f1-page .f1-box-wide { max-height: none; }
.f1-box .f1-tw { border: 0; border-radius: 0; overflow: visible; }

/* Tabelas */
.f1-page table {
	width: 100% !important; float: none !important; margin: 0 !important;
	border: 0 !important; border-collapse: collapse;
	font-family: var(--f1-sans) !important; font-size: 14px !important; color: var(--f1-ink) !important;
	background: #FFFFFF;
}
.f1-page table[style*="7pt"] { font-size: 13px !important; }
.f1-page td, .f1-page th {
	padding: 8px 10px; border: 0 !important; border-bottom: 1px solid var(--f1-row-line) !important;
	font-family: var(--f1-sans) !important; line-height: 1.35; vertical-align: middle;
}
.f1-page table table td { padding: 4px 6px; }
.f1-page tr { height: auto !important; }
.f1-page tbody tr:hover > td { background: var(--f1-hover); }

/* Fundo padrao das celulas (neutraliza bgcolor antigo) */
.f1-page td { background-color: #FFFFFF; }

/* Linha de titulo / cabecalho escuro */
.f1-page tr.f1-dk > td {
	background: var(--f1-navy) !important; color: #FFFFFF !important;
	font-family: var(--f1-cond) !important; font-size: 14px !important; font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase; border-bottom: 0 !important;
}
.f1-page tr.f1-dk > td[colspan] {
	font-size: 22px !important; letter-spacing: .01em; padding: 12px 14px; text-align: left;
}
.f1-page tr.f1-dk a { color: #FFFFFF !important; text-decoration: underline; }
.f1-page tr.f1-dk img { vertical-align: middle; }

/* Linha de cabecalho clara (nomes das colunas) */
.f1-page tr.f1-hd > td {
	background: #FFFFFF !important; color: #4A4A4A !important;
	font-family: var(--f1-cond) !important; font-size: 13px !important; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase;
	border-bottom: 2px solid var(--f1-ink) !important; white-space: nowrap;
}
.f1-box tr.f1-hd > td { white-space: normal; }
/* Linhas de informacao (ex.: Winner / Pole / Fastest lap) */
.f1-page tr.f1-hd > td[colspan] {
	background: #FAF7F0 !important; color: var(--f1-ink) !important; border-bottom: 1px solid var(--f1-row-line) !important;
	font-family: var(--f1-sans) !important; font-size: 14px !important; font-weight: 400;
	letter-spacing: 0; text-transform: none; white-space: normal;
}
.f1-page tr.f1-hd a { color: var(--f1-link); }
/* Subtitulo claro */
.f1-page tr.f1-sub > td {
	background: #EFE9DA !important; color: var(--f1-navy) !important; border-bottom: 0 !important;
	font-family: var(--f1-cond) !important; font-size: 20px !important; font-weight: 700;
	text-transform: uppercase; padding: 10px 14px; text-align: left;
}
/* Linha em destaque */
.f1-page tr.f1-hl > td { background: #F1EBDC !important; font-weight: 600; }
/* Cores alternadas geradas pelo ASP */
.f1-page tr[bgcolor="LightGrey"] > td, .f1-page tr[bgcolor=LightGrey] > td { background: #FAF7F0; }
.f1-page tr[bgcolor="Silver"] > td { background: #F1EBDC; font-weight: 600; }
.f1-page td[style*="background-color: White"] { background: #FFFFFF !important; }

/* Links, imagens e textos */
body.f1-inner .f1-page a { color: var(--f1-link); text-decoration: none; }
body.f1-inner .f1-page a:hover { color: var(--f1-navy); text-decoration: underline; }
.f1-page td img[width="25"] { vertical-align: -2px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.f1-page td:has(> img[width="25"]) { white-space: nowrap; }
.f1-page b { font-weight: 700; }
.f1-page hr { border: 0; border-top: 1px solid var(--f1-row-line); }
.f1-page iframe { max-width: 100%; }

/* Formularios dentro das paginas */
body.f1-inner .f1-page select,
body.f1-inner .f1-page input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]) {
	height: 40px; max-width: 100%; padding: 0 10px; border-radius: 8px;
	border: 1px solid #CFC7B3 !important; background: #FFFFFF; color: var(--f1-ink) !important;
	font-family: var(--f1-sans) !important; font-size: 14px !important;
}
body.f1-inner .f1-page input[type="submit"],
body.f1-inner .f1-page input[type="button"] {
	height: 40px; padding: 0 16px; border-radius: 8px; border: 0;
	background: var(--f1-red); color: #FFFFFF !important; font-family: var(--f1-sans) !important; font-size: 14px !important; font-weight: 600; cursor: pointer;
}
.f1-page td > select { margin: 6px 0; }

@media (max-width: 760px) {
	.f1-page { padding: 16px 16px 32px; }
	.f1-boxes { grid-template-columns: minmax(0, 1fr); }
	body.f1-inner h1 { font-size: 32px; }
	.f1-page table { font-size: 13px !important; }
	.f1-page td, .f1-page th { padding: 7px 8px; }
	.f1-page tr.f1-dk > td[colspan] { font-size: 19px !important; }
	body.f1-inner .f1-page select { width: 100%; }
}