/* ==========================================================================
   base.css — Estilos globais
   - Ponte tokens → Bootstrap 5.3.3
   - Tipografia base
   - Container do projeto (.tp-ds-container)
   - Acessibilidade (foco, skip link)
   Não estilizar módulos aqui.
   ========================================================================== */

/* ---------- @font-face — SOMENTE PROTÓTIPO (não migrar) ----------
   No Umbraco, as fontes já vêm de /css/fonts/fonts.css com estes MESMOS nomes de família.
   Arquivos copiados de https://www.tp.com/webfonts/tpsans/ para assets/fonts/tpsans/. */
@font-face { font-family: "Tp Sans Thin";       src: url("../fonts/tpsans/tpsans-thin.woff2") format("woff2");       font-display: swap; }
@font-face { font-family: "Tp Sans UltraLight"; src: url("../fonts/tpsans/tpsans-ultralight.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Tp Sans ExtraLight"; src: url("../fonts/tpsans/tpsans-extralight.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Tp Sans Light";      src: url("../fonts/tpsans/tpsans-light.woff2") format("woff2");      font-display: swap; }
@font-face { font-family: "Tp Sans Regular";    src: url("../fonts/tpsans/tpsans-regular.woff2") format("woff2");    font-display: swap; }
@font-face { font-family: "Tp Sans Medium";     src: url("../fonts/tpsans/tpsans-medium.woff2") format("woff2");     font-display: swap; }
@font-face { font-family: "Tp Sans Bold";       src: url("../fonts/tpsans/tpsans-bold.woff2") format("woff2");       font-display: swap; }

/* ---------- Ponte tokens → Bootstrap ---------- */
:root {
  --bs-body-font-family: var(--tp-ds-font-family-base);
  --bs-body-font-size: var(--tp-ds-fs-body);
  --bs-body-font-weight: normal; /* peso vem da família (token), nunca de font-weight */
  --bs-body-line-height: var(--tp-ds-lh-base);
  --bs-body-color: var(--tp-ds-color-text);
  --bs-body-bg: var(--tp-ds-color-bg);
  --bs-heading-color: var(--tp-ds-color-heading);
  --bs-secondary-color: var(--tp-ds-color-text-muted);
  --bs-border-color: var(--tp-ds-color-border);
  --bs-border-width: var(--tp-ds-border-width);
  --bs-border-radius: var(--tp-ds-radius-md);
  --bs-border-radius-sm: var(--tp-ds-radius-sm);
  --bs-border-radius-lg: var(--tp-ds-radius-lg);
  --bs-border-radius-pill: var(--tp-ds-radius-pill);
  --bs-box-shadow-sm: var(--tp-ds-shadow-sm);
  --bs-box-shadow: var(--tp-ds-shadow-md);
  --bs-box-shadow-lg: var(--tp-ds-shadow-lg);
  --bs-focus-ring-color: color-mix(in srgb, var(--tp-ds-color-focus) 25%, transparent);
}

/* ---------- Layout com header fixo ----------
   O header é position: fixed. Por padrão o body reserva o espaço dele;
   páginas cujo primeiro módulo fica sob o header usam body.tp-ds-header-overlay. */
body {
  padding-top: var(--tp-ds-header-height);
}

body.tp-ds-header-overlay {
  padding-top: 0;
}

/* Trava o scroll da página (ex.: menu mobile aberto) — classe aplicada no <html> */
.tp-ds-scroll-lock,
.tp-ds-scroll-lock body {
  overflow: hidden;
}

/* ---------- Base ---------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

/* Links (o Bootstrap 5.3 usa --bs-link-color-rgb; definimos direto pelos tokens) */
a {
  color: var(--tp-ds-color-link);
  transition: color var(--tp-ds-duration-fast) var(--tp-ds-ease-standard);
}

a:hover {
  color: var(--tp-ds-color-link-hover);
}

/* ---------- Tipografia ----------
   Cada peso da fonte é uma família própria: font-weight fica sempre "normal"
   para o navegador não sintetizar negrito. */
b,
strong {
  font-family: var(--tp-ds-font-family-strong);
  font-weight: normal;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--tp-ds-font-family-heading);
  font-weight: normal;
  line-height: var(--tp-ds-lh-heading);
  letter-spacing: var(--tp-ds-ls-normal);
  color: var(--tp-ds-color-heading);
}

h1, .h1 { font-size: var(--tp-ds-fs-h1); }
h2, .h2 { font-size: var(--tp-ds-fs-h2); }
h3, .h3 { font-size: var(--tp-ds-fs-h3); }
h4, .h4 { font-size: var(--tp-ds-fs-h4); }
h5, .h5 { font-size: var(--tp-ds-fs-h5); }
h6, .h6 { font-size: var(--tp-ds-fs-h6); }

/* ---------- Container do projeto ----------
   Usar .tp-ds-container (e não .container do Bootstrap), pois as larguras
   seguem os breakpoints do projeto. .row / .col-* funcionam dentro dele. */
.tp-ds-container {
  width: 100%;
  max-width: calc(var(--tp-ds-container-max) + 2 * var(--tp-ds-container-padding));
  margin-inline: auto;
  padding-inline: var(--tp-ds-container-padding);
}

/* ---------- Acessibilidade ---------- */
:focus-visible {
  outline: 2px solid var(--tp-ds-color-focus);
  outline-offset: 2px;
}

.tp-ds-skip-link:focus {
  position: fixed;
  top: var(--tp-ds-space-2);
  left: var(--tp-ds-space-2);
  z-index: calc(var(--tp-ds-z-header) + 1);
  padding: var(--tp-ds-space-2) var(--tp-ds-space-4);
  background: var(--tp-ds-color-bg);
  color: var(--tp-ds-color-primary);
  border-radius: var(--tp-ds-radius-sm);
  box-shadow: var(--tp-ds-shadow-md);
}

/* Âncoras não ficam escondidas atrás do header */
:target {
  scroll-margin-top: var(--tp-ds-header-height);
}