/* ==========================================================================
   Begs Pelo Mundo — shared stylesheet
   Consolidates the per-page <style> blocks and style-hover="" rules from the
   original Claude Design (.dc.html) source into real, reusable CSS.
   ========================================================================== */

/* ---- base / reset ------------------------------------------------------ */
html { scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
::selection { background: #e0a15c; color: #17140f; }

/* ---- nav burger (shared by product pages + simple pages) --------------- */
.nav-burger { display: none; }
@media (max-width: 760px) {
  .nav-links { display: none !important; }
  .nav-burger { display: flex !important; }
}

/* Simple pages (Sobre, Contato, legal pages): pure-CSS mobile menu via
   the #mnav-toggle checkbox + label pattern (no JS required). */
#mnav-toggle:checked ~ div .mobile-nav-panel { display: flex !important; }

/* Unused in the shipped markup (no element currently carries this class),
   but kept from the original source in case a future price table reuses it. */
@media (max-width: 640px) {
  .price-table { font-size: 13px !important; }
  .price-table td, .price-table th { padding: 10px 8px !important; }
}

/* ---- marquee (Home continuous carousel) --------------------------------- */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---- data-reveal (fade + translateY on scroll into view) ---------------- */
/* Base state is applied by site.js before the IntersectionObserver fires,
   so no CSS is required here beyond the transition, which JS also sets
   inline to match the original component's exact easing per element. */

/* ---- image-slot placeholder (used where the source image could not be
   recovered from the Claude Design project — see README "Pendências") ---- */
.img-placeholder {
  width: 100%;
  height: 100%;
  background: #4d4536;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  box-sizing: border-box;
}
.img-placeholder span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: rgba(247, 243, 236, 0.55);
}

/* ---- FAQ accordion (Alertas de Passagens, Roteiros Personalizados,
   Guias de Viagem) — identical inline styling repeated 10-15x per page in
   the original source, consolidated here. See site.js initFaqAccordion(). */
.faq-item { border-top: 1px solid rgba(23, 20, 15, 0.12); }
.faq-toggle {
  all: unset;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
  cursor: pointer;
}
.faq-toggle span { font-size: 16px; font-weight: 700; }
.faq-chevron { flex-shrink: 0; transition: transform 0.3s; color: #17140f; }
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
  overflow: hidden;
}
.faq-panel > div { min-height: 0; }
.faq-panel p { font-size: 15px; line-height: 1.65; color: rgba(23, 20, 15, 0.65); margin: 0 0 16px; }
.faq-panel p:last-child { margin-bottom: 24px; }
.faq-panel ul { margin: 0 0 16px; padding-left: 20px; }
.faq-panel li { font-size: 15px; line-height: 1.65; color: rgba(23, 20, 15, 0.65); }

/* ---- pricing period toggle (Alertas de Passagens "Mensal / Anual") ----- */
.period-toggle-btn {
  border: none;
  cursor: pointer;
  padding: 10px 22px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Manrope', sans-serif;
  background: transparent;
  color: rgba(247, 243, 236, 0.7);
}
.period-toggle-btn.is-active { background: #e0a15c; color: #17140f; }

/* ==========================================================================
   style-hover="" replacements
   Grouped by rule value (not by element) to keep this file small — every
   element that had the same style-hover="" string in the source now shares
   one of the classes below.
   ========================================================================== */

/* style-hover="color:#f7f3ec;" — light-cream text on hover (dark-theme nav
   links, footer links, social icons text, etc.) */
.hover-fg-cream:hover { color: #f7f3ec; }

/* style-hover="color:#17140f;" — charcoal text on hover (light-theme nav
   links) */
.hover-fg-charcoal:hover { color: #17140f; }

/* style-hover="border-color:#e0a15c;color:#e0a15c;" — amber border + text
   (outlined buttons, social icons, instagram badge on dark pages) */
.hover-border-amber:hover { border-color: #e0a15c; color: #e0a15c; }

/* style-hover="border-color:#a86a2e;color:#a86a2e;" — darker amber border +
   text (instagram badge on light-theme pages) */
.hover-border-amber-dark:hover { border-color: #a86a2e; color: #a86a2e; }

/* style-hover="border-color:#e0a15c;transform:translateY(-4px);" — highlight
   cards on the Home page */
.hover-lift-amber:hover { border-color: #e0a15c; transform: translateY(-4px); }

/* style-hover="background:#f0b676;" — filled amber CTA buttons */
.hover-bg-amber-light:hover { background: #f0b676; }

/* style-hover="background:#2c261c;" — filled charcoal CTA buttons */
.hover-bg-charcoal2:hover { background: #2c261c; }

/* style-hover="color:#a86a2e;" — Contato page e-mail link */
.hover-fg-amber-dark:hover { color: #a86a2e; }

/* style-hover="background:#1ebe5a;" — Contato page WhatsApp button */
.hover-bg-whatsapp-dark:hover { background: #1ebe5a; }