/*
Theme Name: TexDrop
Theme URI: https://texdrop.com
Author: TexDrop
Author URI: https://texdrop.com
Description: Tema WordPress editorial/acadêmico para loja de templates em LaTeX. Vitrine multilíngue (PT/EN) com botões de compra externos para Etsy e Hotmart. / Editorial WordPress theme for a LaTeX templates shop. Bilingual (PT/EN) showcase with external Etsy & Hotmart buy buttons.
Version: 1.6.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: texdrop
Tags: editorial, academic, portfolio, shop, bilingual, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ===================================================================
   TexDrop — Design System
   Paleta: verde-menta (#1FB890) + azul-marinho (#14202E) sobre papel
   Tipografia: Spectral (serifada editorial) + JetBrains Mono
   =================================================================== */

:root {
  /* Cores */
  --paper:        #FBFAF8;
  --paper-2:      #F4F2EC;
  --ink:          #14202E;
  --ink-soft:     #2C3A4B;
  --muted:        #6B7280;
  --mint:         #1FB890;
  --mint-dark:    #14906F;
  --mint-tint:    #E7F6F1;
  --rule:         #E4E0D7;
  --rule-strong:  #D2CDC0;
  --white:        #FFFFFF;
  --shadow:       0 1px 2px rgba(20,32,46,.05), 0 12px 32px rgba(20,32,46,.07);
  --shadow-sm:    0 1px 3px rgba(20,32,46,.08);

  /* Tipografia */
  --font-serif: "Spectral", Georgia, "Times New Roman", serif;
  --font-mono:  "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* Métricas */
  --maxw: 1180px;
  --maxw-narrow: 760px;
  --radius: 4px;
  --radius-lg: 8px;
  --gap: 28px;
}

/* ----------------------------- Reset ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--mint-dark); }
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: 1.18; color: var(--ink); margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1.1em; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
ul, ol { padding-left: 1.3em; }

/* ----------------------- Layout utilitário ----------------------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.container--narrow { max-width: var(--maxw-narrow); }
.section { padding: 84px 0; }
.section--tight { padding: 56px 0; }
.center { text-align: center; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mint-dark);
  font-weight: 500;
  margin: 0 0 1rem;
  display: inline-block;
}
.lead { font-size: 1.18rem; color: var(--ink-soft); line-height: 1.6; }
.muted { color: var(--muted); }

/* ------------------------------ Botões --------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-mono);
  font-size: .82rem; font-weight: 500;
  letter-spacing: .04em;
  padding: .85em 1.5em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .18s ease;
  text-align: center;
  line-height: 1;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn--primary { background: var(--ink); color: var(--white); }
.btn--primary:hover { background: var(--mint-dark); color: var(--white); }
.btn--mint { background: var(--mint); color: #08231B; }
.btn--mint:hover { background: var(--mint-dark); color: var(--white); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: var(--white); }
.btn--block { width: 100%; justify-content: center; }
.btn--lg { padding: 1.05em 1.9em; font-size: .9rem; }

/* Botões de marketplace */
.btn--etsy   { background: #F1641E; color: #fff; }
.btn--etsy:hover { background: #d8520f; color:#fff; }
.btn--hotmart{ background: #EF4E23; color: #fff; }
.btn--hotmart:hover { background: #d23d16; color:#fff; }
.btn--download { background: var(--mint); color: #08231B; }
.btn--download:hover { background: var(--mint-dark); color: #fff; }

/* ------------------------------ Header --------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,250,248,.88);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px; gap: 24px;
}
.site-logo { display: flex; align-items: center; }
.site-logo svg, .site-logo img { height: 34px; width: auto; }
.main-nav { display: flex; align-items: center; gap: 30px; }
.main-nav ul { list-style: none; display: flex; gap: 30px; margin: 0; padding: 0; }
.main-nav a {
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .03em;
  color: var(--ink-soft); position: relative; padding: 4px 0;
}
.main-nav a:hover { color: var(--ink); }
.main-nav .current-menu-item > a,
.main-nav a.is-active { color: var(--ink); }
.main-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
  background: var(--mint); transition: width .2s ease;
}
.main-nav a:hover::after, .main-nav .current-menu-item > a::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 14px; }

/* Toggle de idioma */
.lang-toggle {
  display: inline-flex; border: 1px solid var(--rule-strong);
  border-radius: 999px; overflow: hidden; background: var(--white);
}
.lang-toggle button {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .05em;
  border: 0; background: transparent; color: var(--muted);
  padding: .45em .85em; cursor: pointer; transition: all .15s ease;
}
.lang-toggle button.is-active { background: var(--ink); color: var(--white); }

/* Menu mobile */
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 4px 0; transition: .2s; }

/* ------------------------------- Hero ---------------------------- */
.hero { padding: 96px 0 72px; position: relative; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero h1 { margin-bottom: .35em; }
.hero h1 .accent { color: var(--mint-dark); }
.hero__lead { font-size: 1.25rem; color: var(--ink-soft); max-width: 30ch; }
.hero__cta { display: flex; gap: 14px; margin-top: 2rem; flex-wrap: wrap; }
.hero__meta { margin-top: 2.4rem; display: flex; gap: 32px; }
.hero__meta .stat strong { display: block; font-size: 1.6rem; font-weight: 600; }
.hero__meta .stat span { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* Mock de documento LaTeX no hero */
.hero__doc {
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 0; overflow: hidden; transform: rotate(-1.2deg);
}
.hero__doc-bar { background: var(--paper-2); border-bottom: 1px solid var(--rule); padding: 10px 14px; display: flex; gap: 6px; align-items: center; }
.hero__doc-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--rule-strong); display: block; }
.hero__doc-bar code { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); margin-left: 8px; }
.hero__doc-body { padding: 30px 34px 38px; }
.hero__doc-body .doc-title { font-size: 1.5rem; text-align: center; margin-bottom: .2em; }
.hero__doc-body .doc-author { text-align: center; font-size: .85rem; color: var(--muted); font-family: var(--font-mono); margin-bottom: 1.4em; }
.hero__doc-body .doc-h { font-weight: 600; font-size: 1.05rem; margin: 1.1em 0 .3em; }
.hero__doc-body .doc-line { height: 8px; border-radius: 3px; background: var(--paper-2); margin: 7px 0; }
.hero__doc-body .doc-line.w-90 { width: 90%; } .hero__doc-body .doc-line.w-75 { width: 75%; } .hero__doc-body .doc-line.w-60 { width: 60%; }
.hero__doc-body .doc-eq { background: var(--mint-tint); border-left: 3px solid var(--mint); padding: 10px 14px; font-family: var(--font-mono); font-size: .8rem; color: var(--ink-soft); border-radius: 0 4px 4px 0; margin: 14px 0; }

/* ----------------------- Faixa de logos/trust ------------------- */
.trustbar { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.trustbar__inner { display: flex; align-items: center; justify-content: center; gap: 42px; padding: 22px 0; flex-wrap: wrap; }
.trustbar span { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }

/* --------------------------- Grade de cards --------------------- */
.section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.grid { display: grid; gap: var(--gap); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--rule-strong); }
.card__thumb { aspect-ratio: 4/3; background: var(--paper-2); position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); }
.card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.card__badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase;
  background: var(--ink); color: #fff; padding: .35em .7em; border-radius: 3px;
}
.card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.card__cat { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mint-dark); margin-bottom: .5em; }
.card__title { font-size: 1.3rem; margin-bottom: .35em; }
.card__title a:hover { color: var(--mint-dark); }
.card__desc { color: var(--ink-soft); font-size: .98rem; line-height: 1.55; margin-bottom: 1.2em; flex: 1; }
.card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--rule); }
.card__price { font-family: var(--font-mono); font-weight: 600; font-size: 1.05rem; }
.card__price .from { font-size: .65rem; color: var(--muted); display: block; letter-spacing: .1em; text-transform: uppercase; }

/* Placeholder de thumbnail (mock LaTeX) */
.thumb-mock { width: 100%; height: 100%; padding: 18px 22px; display: flex; flex-direction: column; gap: 6px; background:
  linear-gradient(135deg, #fff 0%, var(--paper-2) 100%); }
.thumb-mock .tm-title { height: 12px; width: 60%; background: var(--ink); border-radius: 2px; margin: 6px auto 12px; }
.thumb-mock .tm-l { height: 6px; background: var(--rule-strong); border-radius: 2px; }
.thumb-mock .tm-l.s { width: 80%; } .thumb-mock .tm-l.m { width: 95%; } .thumb-mock .tm-l.x { width: 65%; }
.thumb-mock .tm-eq { height: 26px; background: var(--mint-tint); border-left: 3px solid var(--mint); border-radius: 0 3px 3px 0; margin: 8px 0; }

/* --------------------------- Categorias -------------------------- */
.cat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.cat-card {
  border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 26px 24px;
  background: var(--white); transition: all .2s ease; display: flex; gap: 16px; align-items: flex-start;
}
.cat-card:hover { border-color: var(--mint); background: var(--mint-tint); }
.cat-card .ico { width: 40px; height: 40px; flex: none; border-radius: 8px; background: var(--ink); color: var(--mint); display: grid; place-items: center; }
.cat-card .ico svg { width: 22px; height: 22px; }
.cat-card h3 { font-size: 1.12rem; margin-bottom: .15em; }
.cat-card p { font-size: .9rem; color: var(--muted); margin: 0; }

/* --------------------------- Passos / how ----------------------- */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 36px; counter-reset: step; }
.step { position: relative; padding-top: 18px; }
.step__num { font-family: var(--font-mono); font-size: .8rem; color: var(--mint-dark); border-top: 2px solid var(--mint); padding-top: 14px; display: inline-block; letter-spacing: .1em; }
.step h3 { margin: .5em 0 .3em; font-size: 1.2rem; }
.step p { color: var(--ink-soft); font-size: .98rem; }

/* --------------------------- Single produto --------------------- */
.product { padding: 56px 0 90px; }
.product__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
.product__gallery { position: sticky; top: 100px; }
.product__main-img { border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); box-shadow: var(--shadow-sm); }
.product__thumbs { display: flex; gap: 10px; margin-top: 12px; }
.product__thumbs img { width: 78px; height: 78px; object-fit: cover; border: 1px solid var(--rule); border-radius: 4px; cursor: pointer; }
.product__cat { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mint-dark); }
.product h1 { font-size: clamp(2rem,4vw,2.8rem); margin: .25em 0 .4em; }
.product__price { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 600; margin: .4em 0 .2em; }
.product__price .old { font-size: 1rem; color: var(--muted); text-decoration: line-through; margin-left: 10px; font-weight: 400; }
.product__buy { display: grid; gap: 12px; margin: 28px 0; padding: 24px; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper-2); }
.product__buy .note { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); text-align: center; margin: 4px 0 0; }
.product__features { list-style: none; padding: 0; margin: 24px 0; }
.product__features li { padding: 9px 0 9px 30px; position: relative; border-bottom: 1px solid var(--rule); font-size: 1rem; }
.product__features li::before { content: "✓"; position: absolute; left: 0; color: var(--mint-dark); font-weight: 700; }
.product__desc { font-size: 1.05rem; line-height: 1.75; }
.product__desc h2 { font-size: 1.5rem; margin-top: 1.6em; }
.spec-table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .95rem; }
.spec-table td { padding: 11px 0; border-bottom: 1px solid var(--rule); }
.spec-table td:first-child { font-family: var(--font-mono); font-size: .8rem; color: var(--muted); width: 38%; letter-spacing: .03em; }

/* --------------------------- Carrossel produto ------------------- */
.td-carousel__viewport { position: relative; border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-2); box-shadow: var(--shadow-sm); }
.td-carousel__track { display: flex; transition: transform .35s ease; }
.td-carousel__slide { flex: 0 0 100%; margin: 0; aspect-ratio: 4/3; background: var(--paper-2); }
.td-carousel__slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.td-carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--rule); background: rgba(255,255,255,.92); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: all .15s ease; z-index: 2; }
.td-carousel__nav:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.td-carousel__prev { left: 12px; } .td-carousel__next { right: 12px; }
.td-carousel__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.td-carousel__thumb { width: 74px; height: 74px; padding: 0; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; cursor: pointer; background: var(--paper-2); transition: border-color .15s ease, opacity .15s ease; opacity: .6; }
.td-carousel__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.td-carousel__thumb:hover { opacity: 1; }
.td-carousel__thumb.is-active { border-color: var(--mint); opacity: 1; }

/* ----------------------------- Vitrine / filtros ----------------- */
.shop-head { padding: 60px 0 30px; text-align: center; border-bottom: 1px solid var(--rule); }
.filters { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 32px 0 48px; }
.filters button {
  font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em;
  border: 1px solid var(--rule-strong); background: var(--white); color: var(--ink-soft);
  padding: .6em 1.1em; border-radius: 999px; cursor: pointer; transition: all .16s ease;
}
.filters button:hover { border-color: var(--ink); }
.filters button.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ----------------------------- CTA band -------------------------- */
.cta-band { background: var(--ink); color: #fff; border-radius: var(--radius-lg); padding: 60px 48px; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.75); max-width: 50ch; margin: 0 auto 1.8em; }
.cta-band .accent { color: var(--mint); }

/* ------------------------------ FAQ ------------------------------ */
.faq { max-width: 760px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 22px 40px 22px 0; font-family: var(--font-serif); font-size: 1.18rem; font-weight: 600; color: var(--ink); position: relative; }
.faq__q::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); color: var(--mint-dark); font-size: 1.4rem; transition: transform .2s; }
.faq__item.open .faq__q::after { content: "−"; }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq__a p { padding-bottom: 22px; color: var(--ink-soft); margin: 0; }

/* ----------------------------- Footer ---------------------------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.7); padding: 64px 0 32px; margin-top: 0; }
.site-footer a { color: rgba(255,255,255,.7); }
.site-footer a:hover { color: var(--mint); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer__brand svg, .footer__brand img { height: 30px; filter: brightness(0) invert(1); opacity: .95; }
.footer__brand p { margin-top: 16px; font-size: .95rem; max-width: 32ch; }
.footer h4 { color: #fff; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; margin-bottom: 16px; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin-bottom: 10px; font-size: .95rem; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 48px; padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer__bottom p { margin: 0; font-size: .82rem; font-family: var(--font-mono); color: rgba(255,255,255,.5); }

/* --------------------- i18n: mostrar/ocultar --------------------- */
[data-lang-pt], [data-lang-en] { display: none; }
html[lang="pt-BR"] [data-lang-pt], html[lang="pt"] [data-lang-pt] { display: revert; }
html[lang="en"] [data-lang-en], html[lang="en-US"] [data-lang-en] { display: revert; }

/* --------------------------- Page genérica ----------------------- */
.page-content { max-width: var(--maxw-narrow); margin: 0 auto; padding: 70px 0; }
.page-content h1 { margin-bottom: .6em; }
.entry-content img { border-radius: var(--radius); margin: 1.5em 0; }

/* ----------------------------- 404 ------------------------------- */
.error-404 { text-align: center; padding: 120px 0; }
.error-404 .code { font-family: var(--font-mono); font-size: 6rem; color: var(--mint); line-height: 1; }

/* --------------------------- Responsivo -------------------------- */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__doc { transform: none; max-width: 460px; }
  .product__grid { grid-template-columns: 1fr; gap: 36px; }
  .product__gallery { position: static; }
  .grid--4 { grid-template-columns: repeat(2,1fr); }
  .grid--3 { grid-template-columns: repeat(2,1fr); }
  .cat-grid, .steps { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  body { font-size: 18px; }
  .section { padding: 60px 0; }
  .main-nav { display: none; }
  .main-nav.is-open {
    display: flex; position: absolute; top: 76px; left: 0; right: 0;
    flex-direction: column; background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: 20px 28px; gap: 0;
  }
  .main-nav.is-open ul { flex-direction: column; gap: 0; width: 100%; }
  .main-nav.is-open ul li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .nav-toggle { display: block; }
  .grid--4, .grid--3, .grid--2, .cat-grid, .steps { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__meta { flex-wrap: wrap; gap: 20px; }
  .cta-band { padding: 44px 24px; }
}

/* WP core helpers */
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }
.alignwide { width: 100%; }
.wp-caption-text { font-size: .85rem; color: var(--muted); text-align: center; }
.sticky, .gallery-caption, .bypostauthor { font-size: inherit; }