/* style.css — tinto.red
   H1 ligado corretamente à variável --red
   Spacer esquerdo, tipografia grande, anti-inversion
*/

/* -----------------------------
   Variáveis globais
   ----------------------------- */
:root{
  --red: #ab0000;
  --black: #181818;
  --white: #ffffff;
  --base-size: 20px;     /* 1rem = 20px */
  --spacer-left: 120px;  /* largura do gutter à esquerda */
}

/* -----------------------------
   Fontes locais (ajusta caminhos)
   ----------------------------- */
@font-face{
  font-family: 'Parking';
  src: url('../fonts/Parking.woff2') format('woff2'),
       url('../fonts/Parking.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'IBMPlexSans';
  src: url('../fonts/IBMPlexSans-Regular.woff2') format('woff2'),
       url('../fonts/IBMPlexSans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -----------------------------
   Reset e base
   ----------------------------- */
html{
  font-size: var(--base-size) !important;
  -webkit-text-size-adjust: 100% !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  height: 100% !important;
  background: var(--white) !important;
  color: var(--black) !important;
  box-sizing: border-box !important;
  forced-color-adjust: none !important;
  color-scheme: light !important;
}
*, *::before, *::after { box-sizing: inherit !important; }

/* -----------------------------
   Container principal e spacer
   ----------------------------- */
html, body { margin: 0 !important; padding: 0 !important; height: 100% !important; }
#page{
  position: relative !important;
  min-height: 100vh !important;
  background: var(--white) !important;
  color: var(--black) !important;
  isolation: isolate !important;
  mix-blend-mode: normal !important;
  forced-color-adjust: none !important;
  overflow-x: hidden !important;
}

/* spacer fixo à esquerda — garante gutter mesmo se UA ignorar padding */
.left-spacer{
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: var(--spacer-left) !important;
  pointer-events: none !important;
  background: transparent !important;
  z-index: 9999 !important;
}

/* conteúdo principal compensado pelo spacer */
#content{
  box-sizing: border-box !important;
  padding-top: 56px !important;
  padding-right: 56px !important;
  padding-bottom: 56px !important;
  padding-left: calc(56px + var(--spacer-left)) !important;
  margin: 0 !important;
  color: var(--black) !important;
  background: transparent !important;
}

/* -----------------------------
   Tipografia global
   ----------------------------- */
body{
  font-family: 'IBMPlexSans', sans-serif !important;
  font-size: 1rem !important; /* 1rem = var(--base-size) */
  line-height: 1.45 !important;
  color: inherit !important;
}

/* -----------------------------
   Título — ligação explícita à --red
   cobre h1.title, .title, header .title, links e SVGs
   ----------------------------- */
h1.title,
.title,
header .title {
  font-family: 'Parking', sans-serif !important;
  font-size: 6rem !important;           /* 6 * base-size = 120px */
  line-height: 0.95 !important;
  margin: 0 !important;
  letter-spacing: -1px !important;
  word-break: keep-all !important;

  /* ligação explícita à variável e múltiplos mecanismos */
  color: var(--red) !important;
  -webkit-text-fill-color: var(--red) !important;
  fill: var(--red) !important;          /* para SVG inline */
  stroke: none !important;
  mix-blend-mode: normal !important;
  isolation: isolate !important;
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  text-shadow: none !important;
  background: transparent !important;
  forced-color-adjust: none !important;
}

/* se o título for link ou tiver pseudo-elementos */
h1.title a,
.title a,
.title::before,
.title::after {
  color: var(--red) !important;
  -webkit-text-fill-color: var(--red) !important;
  forced-color-adjust: none !important;
}

/* se o título contiver SVG */
h1.title svg,
.title svg,
.title svg * {
  fill: var(--red) !important;
  stroke: none !important;
  color: var(--red) !important;
  forced-color-adjust: none !important;
}

/* -----------------------------
   Byline, subtitle e restantes
   ----------------------------- */
.byline,
header,
.subtitle,
.entry h3,
.entry .en,
.entry .def,
footer {
  color: var(--black) !important;
  -webkit-text-fill-color: var(--black) !important;
  forced-color-adjust: none !important;
}

/* subtítulo e entradas */
.subtitle { font-size: 1.5rem !important; margin: 40px 0 64px 0 !important; }
.entry { margin-bottom: 40px !important; }
.entry h3 { font-size: 1.375rem !important; font-weight: 600 !important; margin: 0 0 8px 0 !important; }
.entry .en { font-size: 1.125rem !important; margin: 6px 0 !important; }
.entry .def { font-size: 1.0625rem !important; margin: 6px 0 !important; }
footer { margin-top: 80px !important; font-size: 1rem !important; }

/* -----------------------------
   Imagens / SVG / media
   ----------------------------- */
img, svg, picture { max-width: 100% !important; height: auto !important; filter: none !important; mix-blend-mode: normal !important; forced-color-adjust: none !important; }

/* -----------------------------
   Media queries responsivas
   ----------------------------- */
@media (max-width: 1200px){
  :root { --spacer-left: 96px; }
  h1.title, .title { font-size: 5rem !important; }
  #content { padding-left: calc(48px + var(--spacer-left)) !important; padding: 48px !important; }
}
@media (max-width: 900px){
  :root { --spacer-left: 72px; }
  html { font-size: 18px !important; }
  h1.title, .title { font-size: 4.5rem !important; }
  #content { padding-left: calc(36px + var(--spacer-left)) !important; padding: 36px !important; }
}
@media (max-width: 720px){
  :root { --spacer-left: 48px; }
  html { font-size: 16px !important; }
  h1.title, .title { font-size: 3.5rem !important; }
  .byline { font-size: 1rem !important; }
  .subtitle { font-size: 1.125rem !important; margin: 24px 0 36px 0 !important; }
  #content { padding-left: calc(24px + var(--spacer-left)) !important; padding: 28px !important; padding-top: 28px !important; padding-bottom: 28px !important; }
}

/* -----------------------------
   Fallbacks e protecções finais
   ----------------------------- */
/* força cor do texto em elementos inline que o UA possa inverter */
[style], html[style], body[style] {
  background: var(--white) !important;
  color: var(--black) !important;
  forced-color-adjust: none !important;
}

/* evita overflow horizontal causado por fontes grandes */
html, body, #page, #content { overflow-x: hidden !important; }

/* garante herança de cor e evita overrides globais */
* { color: inherit !important; background-color: transparent !important; }