/* ===========================================================
   ACAMAR — Design tokens
   Associação de Catadores de Materiais Recicláveis
   de Capão Bonito/SP
   =========================================================== */

:root{
  --background:#F7FBF6;          /* off-white esverdeado */
  --foreground:#0E1F14;          /* texto principal */
  --primary:#1F9A4D;             /* verde ACAMAR (do logo) */
  --primary-glow:#8BD84A;        /* lima da seta do logo */
  --primary-deep:#0F5F2E;        /* verde floresta */
  --lime:#B7F26A;                /* lima clara */
  --forest:#0B3D1F;              /* verde escuríssimo */
  --cream:#FBF8EE;               /* creme */
  --border:#E3ECE3;
  --muted:#5B6B60;
  --card:#FFFFFF;

  --gradient-primary: linear-gradient(120deg, var(--primary-deep) 0%, var(--primary) 45%, var(--primary-glow) 100%);
  --gradient-forest:  linear-gradient(160deg, var(--forest) 0%, var(--primary-deep) 60%, var(--primary) 100%);
  --gradient-lime:    linear-gradient(135deg, var(--primary) 0%, var(--lime) 100%);

  --shadow-soft:   0 12px 40px -14px rgba(31,154,77,.45);
  --shadow-strong: 0 28px 70px -22px rgba(31,154,77,.55);
  --shadow-glow:   0 0 60px -10px rgba(139,216,74,.60);

  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
}

*{ -webkit-tap-highlight-color: transparent; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Manrope',ui-sans-serif,system-ui,sans-serif;
  color:var(--foreground);
  background:var(--background);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Sora',ui-sans-serif,system-ui,sans-serif;
  letter-spacing:-.02em;
  font-weight:700;
}

/* ---------- Gradientes utilitários ---------- */
.bg-gradient-primary{ background-image:var(--gradient-primary); }
.bg-gradient-forest { background-image:var(--gradient-forest); }
.bg-gradient-lime   { background-image:var(--gradient-lime); }

.text-gradient{
  background-image:var(--gradient-lime);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ---------- Padrões de fundo sutis ---------- */
.pattern-grid{
  background-image:
    linear-gradient(to right, rgba(31,154,77,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(31,154,77,.07) 1px, transparent 1px);
  background-size:44px 44px;
}
.pattern-dots{
  background-image:radial-gradient(rgba(31,154,77,.16) 1.4px, transparent 1.4px);
  background-size:22px 22px;
}
.pattern-grid-light{
  background-image:
    linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:52px 52px;
}

/* ---------- Foco visível (acessibilidade) ---------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--primary);
  outline-offset:3px;
  border-radius:.5rem;
}
.on-dark a:focus-visible,
.on-dark button:focus-visible{
  outline-color:var(--lime);
}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--primary); color:#fff;
  padding:.85rem 1.4rem; border-radius:0 0 1rem 0; font-weight:700;
}
.skip-link:focus{ left:0; }

/* ---------- Navbar dropdown (hover + teclado) ---------- */
.nav-item > .nav-panel{
  opacity:0; visibility:hidden; transform:translateY(.5rem);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-item:hover > .nav-panel,
.nav-item:focus-within > .nav-panel{
  opacity:1; visibility:visible; transform:translateY(0);
}
.nav-item:hover > button .nav-chevron,
.nav-item:focus-within > button .nav-chevron{ transform:rotate(180deg); }
.nav-chevron{ transition:transform .18s ease; }

/* ---------- Acordeão mobile ---------- */
details.acc > summary{ list-style:none; cursor:pointer; }
details.acc > summary::-webkit-details-marker{ display:none; }
details.acc[open] > summary .acc-chevron{ transform:rotate(180deg); }
.acc-chevron{ transition:transform .2s ease; }

/* ---------- Abas (Transparência) ---------- */
.tab-btn[aria-selected="true"]{
  background-image:var(--gradient-lime);
  color:#0B3D1F;
  box-shadow:var(--shadow-soft);
}

/* ---------- Imagens ---------- */
img{ max-width:100%; height:auto; }
.media{ background:linear-gradient(135deg,#EAF6E9,#DFF2D6); }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.is-visible{
  opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- Impressão ---------- */
@media print{
  header, footer, .no-print{ display:none !important; }
  body{ background:#fff; }
}

/* ---------- Scrollbar da timeline horizontal ---------- */
.scroll-x{ scrollbar-width:thin; scrollbar-color:var(--primary) var(--border); }
.scroll-x::-webkit-scrollbar{ height:8px; }
.scroll-x::-webkit-scrollbar-track{ background:var(--border); border-radius:99px; }
.scroll-x::-webkit-scrollbar-thumb{ background:var(--primary); border-radius:99px; }

/* ---------- Marquee (faixa da cadeia produtiva) ---------- */
.marquee{ overflow:hidden; }
.marquee-track{
  display:flex; width:max-content;
  animation:marquee 28s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
}

/* ===========================================================
   CRITICAL HEADER CSS — evita FOUC do Tailwind Play CDN
   Estas regras são CSS puro (não geradas pelo Tailwind), então
   valem IMEDIATAMENTE no primeiro paint, antes do script do
   CDN carregar/processar as classes utilitárias. Isso impede
   que o cabeçalho "desmonte" (menu, logo e itens se sobrepondo)
   durante a fração de segundo em que o Tailwind ainda não rodou.

   IMPORTANTE: nenhuma regra aqui usa seletor de ID sozinho com
   alta especificidade fora de media query — isso evitaria que
   o Tailwind (quando carregar) conseguisse sobrescrever depois.
   =========================================================== */
header{
  display:block;
  position:sticky;
  top:0;
  z-index:9999;
  background:#ffffff;
  border-bottom:1px solid #E3ECE3;
  isolation:isolate;
  width:100%;
}
header > div:first-child{
  max-width:1500px;
  margin-left:auto;
  margin-right:auto;
  padding-left:1.25rem;
  padding-right:1.25rem;
  height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
@media (min-width:768px){
  header > div:first-child{
    padding-left:2.5rem;
    padding-right:2.5rem;
  }
}
header img{
  height:2.5rem;
  width:auto;
  object-fit:contain;
  display:block;
}
header a{ text-decoration:none; }

/* Menu desktop: escondido por padrão, some no wide */
header nav{
  display:none;
  align-items:center;
  gap:1.75rem;
}

/* Botão hambúrguer: visível por padrão (mobile-first) */
header button#menuBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.5rem;
  border-radius:.75rem;
  background:transparent;
  border:none;
  cursor:pointer;
}

/* A partir de 1024px: inverte — mostra o menu, esconde o botão.
   Esta media query vem por ÚLTIMO de propósito, para que, na
   mesma especificidade, a última regra declarada (a dela) vença
   a cascata em telas largas — e para o Tailwind, quando carregar,
   sobrescrever tudo isso sem conflito (nenhuma regra acima usa ID
   isolado de alta especificidade fora desta media query). */
@media (min-width:1024px){
  header nav{ display:flex; }
  header button#menuBtn{ display:none; }
}

#mobileMenu{ width:100%; background:#ffffff; }

/* Reserva de espaço: garante que o <main> sempre fique numa
   camada de empilhamento abaixo do header, mesmo antes do
   Tailwind aplicar z-index/posicionamento das seções internas. */
main{ position:relative; z-index:1; }

/* ===========================================================
   GALERIA DE IMAGENS SOLTAS DENTRO DO CONTEÚDO DO POST
   Agrupa sequências de <img> (que não são [gallery] do WP) num
   grid com corte/zoom + lightbox em tamanho original ao clicar.
   =========================================================== */
.acamar-content-gallery{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin:2rem 0;
}
.acamar-gallery-icon{
  width:100%;
  height:260px;
  border-radius:16px;
  overflow:hidden;
  position:relative;
  background:var(--border);
}
.acamar-gallery-icon img{
  position:absolute;
  top:50%; left:50%;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  image-rendering:auto;
  transform:translate(-50%,-50%);
  transition:transform .35s ease;
  border-radius:0 !important;
  margin:0 !important;
}
.acamar-gallery-icon:hover img{ transform:translate(-50%,-50%) scale(1.06); }

@media (max-width:900px){
  .acamar-content-gallery{ grid-template-columns:repeat(2, 1fr); }
  .acamar-gallery-icon{ height:220px; }
}
@media (max-width:560px){
  .acamar-content-gallery{ grid-template-columns:1fr; gap:10px; }
  .acamar-gallery-icon{ height:240px; border-radius:12px; }
}

.acamar-gallery-modal{
  display:none; position:fixed; inset:0; z-index:9999;
  background:rgba(7,43,21,.94); backdrop-filter:blur(6px);
  align-items:center; justify-content:center; padding:1.5rem;
}
.acamar-gallery-modal.active{ display:flex; }
.acamar-gallery-modal img{
  max-width:94vw; max-height:90vh;
  width:auto; height:auto;
  border-radius:14px;
  box-shadow:0 0 80px rgba(0,0,0,.55);
  image-rendering:auto;
}
.acamar-gallery-modal-close{
  position:absolute; top:1.25rem; right:1.25rem;
  width:2.75rem; height:2.75rem; border-radius:50%;
  background:rgba(255,255,255,.14); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition:background .15s ease;
}
.acamar-gallery-modal-close:hover{ background:rgba(255,255,255,.28); }