/* ============================================================
   BASE - reset, tokens, tipografia, utilitários
   Todos os valores de identidade estão isolados em :root
   para serem substituídos na fase de identidade visual.
   ============================================================ */

:root {
  /* ---------- Cor - identidade XXV Fórum Nacional de Apicultura ------
     Valores retirados de assets/fotos/identidade visual.png.
     Os nomes são de papel, não de matiz, para o layout não depender
     da cor concreta.
       #E59A2C mel        #B26A15 mel escuro   #F4C85C mel claro
       #FBF5E9 creme      #F4E6C6 creme quente
       #98A483 verde      #2A2520 tinta                             */
  --c-sage:        #f4e6c6;   /* fundo secundário / creme quente      */
  --c-off:         #fbf5e9;   /* fundo alternado / creme claro        */
  --c-deep:        #2a2520;   /* tinta principal / escuro             */
  --c-accent:      #e59a2c;   /* acento - botões e destaques          */
  --c-accent-dark: #b26a15;   /* acento escuro - hover e gradientes   */
  --c-accent-soft: #f4c85c;   /* acento claro - realces               */
  --c-green:       #98a483;   /* verde natural - apoio                */
  --c-white:       #ffffff;
  --c-black:       #000000;
  --c-ink:         #2a2520;

  --c-deep-60:     rgba(42, 37, 32, .60);
  --c-deep-10:     rgba(42, 37, 32, .10);
  --c-white-10:    rgba(255, 255, 255, .10);
  --c-white-20:    rgba(255, 255, 255, .20);
  --c-hairline:    rgba(42, 37, 32, .12);

  /* sombras e véus derivados da tinta, para não introduzir cinzentos */
  --shadow-soft:   0 16px 40px rgba(42, 37, 32, .14);
  --shadow-btn:    0 10px 30px rgba(42, 37, 32, .14);

  /* ---------- Tipografia ----------
     Meroche (fonte da logo) é comercial e não está disponível como
     webfont livre: fica primeiro na pilha para funcionar assim que
     for instalada, com Jost - geométrica, do mesmo registo - como
     substituta. Outfit é a fonte de texto da identidade.            */
  --font-display: 'Meroche', 'Jost', system-ui, sans-serif;
  --font-sans:    'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-h1: clamp(2.5rem, 1.3rem + 4.6vw, 3.875rem);   /* 40 → 62px */
  --fs-h2: clamp(2rem,   1.1rem + 3.4vw, 3.25rem);    /* 32 → 52px */
  --fs-h3: clamp(1.75rem, 1.1rem + 2.4vw, 2.625rem);  /* 28 → 42px */
  --fs-h4: clamp(1.5rem, 1.1rem + 1.5vw, 2rem);       /* 24 → 32px */
  --fs-h5: clamp(1.25rem, 1.05rem + .7vw, 1.5rem);    /* 20 → 24px */
  --fs-h6: clamp(1.0625rem, .98rem + .35vw, 1.25rem); /* 17 → 20px */
  --fs-20: clamp(1rem, .93rem + .3vw, 1.25rem);
  --fs-18: 1.125rem;
  --fs-16: 1rem;
  --fs-14: .875rem;
  --fs-12: .75rem;

  /* tracking mais aberto que o do template original: as geométricas
     ficam apertadas com -.06em */
  --ls-tight:  -.02em;
  --ls-normal: -.005em;
  --ls-h5:     -.015em;

  --lh-title: 1.15;
  --lh-h2:    1.2;
  --lh-body:  1.6;

  /* ---------- Layout ---------- */
  --container:   1320px;
  --header-pill: 1320px;   /* largura cheia: o menu tem 7 entradas */
  --gutter:      30px;
  --section-y:  120px;
  --gap-card:   24px;

  /* ---------- Forma ---------- */
  --r-xs:  8px;
  --r-sm:  12px;
  --r-md:  16px;
  --r-lg:  20px;
  --r-pill: 999px;

  /* ---------- Movimento ---------- */
  --e-out:    cubic-bezier(.16, 1, .3, 1);
  --e-inout:  cubic-bezier(.65, 0, .35, 1);
  --t-fast:   .25s;
  --t-base:   .45s;
  --t-slow:   .9s;

  --header-h: 128px;
}

/* ------------------------------------------------------------
   Reset
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

/* NOTA: nunca aplicar overflow-x:hidden/clip a html ou body - quebra position:fixed e position:sticky no mobile.
   O overflow é contido localmente em cada componente. */

body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-normal);
  color: var(--c-deep);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked { overflow: hidden; }

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

button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  text-wrap: balance;
}

:focus-visible {
  outline: 2px solid var(--c-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--c-accent); color: var(--c-deep); }

/* ------------------------------------------------------------
   Escala tipográfica
   ------------------------------------------------------------ */
.h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-display); }

.h1 { font-size: var(--fs-h1); line-height: var(--lh-title); letter-spacing: var(--ls-tight); font-weight: 500; }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-h2);   letter-spacing: var(--ls-tight); font-weight: 500; }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-h2);   letter-spacing: var(--ls-tight); font-weight: 500; }
.h4 { font-size: var(--fs-h4); line-height: var(--lh-h2);   letter-spacing: var(--ls-tight); font-weight: 500; }
.h5 { font-size: var(--fs-h5); line-height: 1.3;            letter-spacing: var(--ls-h5);   font-weight: 500; }
.h6 { font-size: var(--fs-h6); line-height: 1.4;            letter-spacing: var(--ls-normal); font-weight: 500; }

.t-20 { font-size: var(--fs-20); line-height: 1.5; }
.t-18 { font-size: var(--fs-18); line-height: var(--lh-body); }
.t-16 { font-size: var(--fs-16); line-height: var(--lh-body); }
.t-14 { font-size: var(--fs-14); line-height: 1.5; }
.t-12 { font-size: var(--fs-12); line-height: 1.5; }

/* ------------------------------------------------------------
   Utilitários
   ------------------------------------------------------------ */
.c-white { color: var(--c-white); }
.c-deep  { color: var(--c-deep); }
.o-70    { opacity: .7; }
.ta-c    { text-align: center; }

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 1000;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  background: var(--c-deep);
  color: var(--c-white);
  transition: top var(--t-fast) var(--e-out);
}
.skip-link:focus { top: 16px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}