/* ============================================================
   Psiquê Trívia — Global Styles
   ============================================================ */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Plus+Jakarta+Sans:wght@300;400;500;600&display=swap');

/* ---------- CSS Custom Properties ---------- */
:root {
  /* Brand Colours */
  --color-primary: #260403;
  --color-primary-container: #421713;
  --color-secondary: #805440;
  --color-secondary-accent: #a97762;
  --color-on-primary: #ffffff;
  --color-on-surface: #311208;
  --color-on-surface-variant: #524341;
  --color-surface: #fff8f6;
  --color-surface-bright: #fbf7f5;
  --color-surface-warm: #fdfbfa;
  --color-surface-container: #f7f2ef;
  --color-surface-alt: #f3eae6;
  --color-surface-muted: #ede0da;
  --color-border: #f0e6e2;
  --color-border-hover: #ebdcd6;
  --color-border-accent: #dfc5bb;
  --color-text-body: #6d4336;
  --color-error: #ba1a1a;

  /* Typography */
  --font-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-garamond: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --font-brand: 'Cinzel Decorative', 'Playfair Display', serif;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.75rem;
  --space-xl: 3rem;
  --gutter: 1.5rem;
  --gutter-mobile: 1rem;
  --margin: 3.5rem;
  --margin-mobile: 1.25rem;
}

/* ---------- Base Reset & Globals ---------- */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.625;
  color: var(--color-on-surface);
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
}

::selection {
  background-color: var(--color-surface-alt);
  color: var(--color-on-surface);
}

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

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

/* ---------- Utility Classes ---------- */
.font-brand { font-family: var(--font-brand); }
.font-serif { font-family: var(--font-serif); }
.font-garamond { font-family: var(--font-garamond); }
.font-sans { font-family: var(--font-sans); }

.text-primary { color: var(--color-primary); }
.text-primary-container { color: var(--color-primary-container); }
.text-secondary { color: var(--color-secondary); }
.text-secondary-accent { color: var(--color-secondary-accent); }
.text-on-surface { color: var(--color-on-surface); }
.text-on-surface-variant { color: var(--color-on-surface-variant); }
.text-body { color: var(--color-text-body); }

.bg-surface { background-color: var(--color-surface); }
.bg-surface-bright { background-color: var(--color-surface-bright); }
.bg-surface-warm { background-color: var(--color-surface-warm); }
.bg-surface-container { background-color: var(--color-surface-container); }
.bg-surface-alt { background-color: var(--color-surface-alt); }

/* ---------- Scrollbar Hide ---------- */
::-webkit-scrollbar { display: none; }
html { scrollbar-width: none; }

/* ---------- Consent Banner ---------- */
#cookie-banner {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
#cookie-banner.hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

/* ---------- WhatsApp FAB ---------- */
.whatsapp-fab {
  box-shadow: 0 12px 36px -8px rgba(66, 23, 19, 0.2);
  transition: all 0.2s ease;
}
.whatsapp-fab:hover {
  background-color: var(--color-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -8px rgba(66, 23, 19, 0.25);
}

/* ---------- FAQ Accordion ---------- */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.faq-content.open {
  max-height: 500px;
}

/* ---------- Mobile Menu Overlay ---------- */
.mobile-menu-overlay {
  transition: opacity 0.3s ease;
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs a:hover {
  color: var(--color-primary-container);
}

/* ---------- Print ---------- */
@media print {
  header, footer, .whatsapp-fab, #cookie-banner { display: none !important; }
  body { font-size: 12pt; color: #000; }
}