/* The Board Insight — editorial/executive-media theme
   Tailwind (CDN, play-config) handles layout/utility classes.
   This file only holds what Tailwind utilities can't express. */

/* ---------- Theme tokens (light default, .dark override) ----------
   Values are space-separated RGB triplets, not hex — this is required so
   Tailwind's opacity modifiers (e.g. bg-secondary/40) work on top of a CSS
   variable. Each token is wired into tailwind.config as:
     "name": "rgb(var(--color-name) / <alpha-value>)"
   Tailwind substitutes <alpha-value> at class-generation time, so this only
   works with the triplet format — a plain hex or #fff string here would
   silently break every /NN opacity utility used with these colors. */
:root {
  --color-background: 250 250 248;
  --color-surface: 250 250 248;
  --color-on-background: 17 24 39;
  --color-on-surface: 17 24 39;
  --color-on-surface-variant: 91 98 112;
  --color-surface-container-lowest: 255 255 255;
  --color-surface-container-low: 255 255 255;
  --color-surface-container: 245 245 242;
  --color-surface-container-high: 240 240 236;
  --color-surface-container-highest: 232 232 227;
  --color-surface-bright: 255 255 255;
  --color-surface-dim: 239 238 233;
  --color-primary: 17 24 39;
  --color-secondary: 74 108 247;
  --color-secondary-fixed-dim: 53 82 196;
  --color-on-secondary: 255 255 255;
  --color-on-secondary-container: 44 63 143;
  --color-secondary-container: 232 236 253;
  --color-outline: 199 198 192;
  --color-outline-variant: 226 225 218;
  --color-inverse-surface: 17 24 39;
  --color-inverse-on-surface: 250 250 248;
  --color-tertiary: 91 98 112;
}

html.dark {
  --color-background: 10 14 26;
  --color-surface: 10 14 26;
  --color-on-background: 242 243 245;
  --color-on-surface: 242 243 245;
  --color-on-surface-variant: 154 161 176;
  --color-surface-container-lowest: 5 7 13;
  --color-surface-container-low: 13 17 28;
  --color-surface-container: 17 21 31;
  --color-surface-container-high: 22 27 40;
  --color-surface-container-highest: 28 33 48;
  --color-surface-bright: 35 40 56;
  --color-surface-dim: 5 7 13;
  --color-primary: 242 243 245;
  --color-secondary: 74 108 247;
  --color-secondary-fixed-dim: 125 155 255;
  --color-on-secondary: 255 255 255;
  --color-on-secondary-container: 184 198 255;
  --color-secondary-container: 22 33 61;
  --color-outline: 42 48 64;
  --color-outline-variant: 32 36 47;
  --color-inverse-surface: 242 243 245;
  --color-inverse-on-surface: 10 14 26;
  --color-tertiary: 154 161 176;
}

html {
  background-color: rgb(var(--color-background));
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

#top, #insights, #ia, #dados, #lideranca, #lideranca-adaptativa, #tendencias, #contato {
  scroll-margin-top: 100px;
}

.shadow-gold-hover:hover {
  box-shadow: 0 14px 32px -14px rgba(74, 108, 247, 0.35);
}

/* ---------- Language toggle active state ---------- */
.lang-btn {
  color: rgb(var(--color-on-surface-variant));
  background: transparent;
}
.lang-btn.is-active {
  color: rgb(var(--color-on-secondary));
  background: rgb(var(--color-secondary));
}
.lang-btn:not(.is-active):hover {
  color: rgb(var(--color-on-surface));
  background: rgb(var(--color-surface-container-high));
}

/* ---------- Theme (light/dark) toggle button ----------
   Scoped by class, not #theme-toggle's id, because the mobile-menu drawer
   has a second instance of this button (same .theme-toggle-btn class, no
   id) — scoping by id left that one with both icons always visible. */
.theme-toggle-btn .icon-dark { display: none; }
html.dark .theme-toggle-btn .icon-light { display: none; }
html.dark .theme-toggle-btn .icon-dark { display: inline-block; }

/* ---------- Wordmark icon (light/dark logo swap) ---------- */
.logo-icon-dark { display: none; }
html.dark .logo-icon-light { display: none; }
html.dark .logo-icon-dark { display: inline-block; }

/* ---------- Mobile drag carousel ("Principais Análises") ----------
   #insights-grid is a flex/scroll-snap row below md (see index.html) and a
   regular grid at md+. .no-scrollbar only matters in the carousel state —
   at md+ the container isn't scrollable so it's a no-op. .dragging is
   toggled from script.js while a pointer/mouse drag is in progress, to
   pause snapping so the card doesn't fight the manual scrollLeft update. */
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
#insights-grid.dragging {
  scroll-snap-type: none;
  cursor: grabbing;
}

/* ---------- Search overlay ---------- */
#search-panel {
  transform-origin: top right;
}
#search-results a + a {
  border-top: 1px solid rgb(var(--color-outline-variant));
}

/* ---------- Article body: sources credit line ---------- */
.article-sources,
.article-sources em {
  font-size: 12.5px;
  font-style: italic;
  color: rgb(var(--color-on-surface-variant) / 0.8);
  margin-top: 2.5rem !important;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(var(--color-outline-variant));
}
.article-sources a {
  color: rgb(var(--color-on-surface-variant) / 0.9);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}
.article-sources a:hover {
  color: rgb(var(--color-secondary));
}

/* ---------- Cookie consent banner ---------- */
#cookie-banner {
  transition: transform 0.4s ease, opacity 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}