/* === Recto · blog shell · theme toggle + lang switcher + mobile burger === */
/* Variáveis fundamentais herdadas do CSS de cada post · só extras aqui */

/* Estende nav-inner pra acomodar a barra de controles direita */
.nav-controls { display: inline-flex; align-items: center; gap: 10px; }

/* Theme toggle (sun/moon) */
.theme-toggle {
  position: relative; width: 56px; height: 28px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: space-between;
  transition: 0.2s;
}
.theme-toggle:hover { border-color: rgba(255,255,255,0.25); }
.theme-toggle .tt-knob {
  position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; transition: transform 0.25s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
html[data-theme="light"] .theme-toggle .tt-knob { transform: translateX(28px); background: #1d1d1f; }
.theme-toggle .tt-icon { font-size: 11px; opacity: 0.65; padding: 0 6px; }

/* Lang switcher · colapsa pra mostrar só ativo + chevron */
.lang-switcher {
  display: inline-flex; gap: 2px; align-items: center;
  font-size: 0.72rem; padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 999px;
  cursor: pointer; transition: border-color 0.15s; user-select: none;
}
.lang-switcher:hover { border-color: rgba(255,255,255,0.25); }
.lang-switcher a {
  color: var(--silver, #86868b); padding: 2px 7px; border-radius: 999px; transition: 0.15s;
  /* Garante fallback pra emoji bandeira em todos os SOs */
  font-family: "Inter Tight", -apple-system, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
  display: inline-flex; align-items: center; gap: 4px;
}
/* Bandeira SVG inline · 16×10.7px · sempre renderiza, qualquer SO/fonte */
.lang-switcher svg.flag {
  width: 16px !important; height: 10.7px !important;
  min-width: 16px !important; min-height: 10.7px !important;
  display: inline-block !important; vertical-align: -2px;
  border-radius: 2px; box-shadow: 0 0 0 0.5px rgba(255,255,255,0.15);
  flex-shrink: 0;
}
html[data-theme="light"] .lang-switcher svg.flag { box-shadow: 0 0 0 0.5px rgba(0,0,0,0.15); }
.lang-switcher a:hover { color: var(--white, #fff); }
.lang-switcher a.active { color: var(--white, #fff); font-weight: 500; }
.lang-switcher span { color: rgba(255,255,255,0.25); }
.lang-switcher a:not(.active), .lang-switcher span { display: none; }
.lang-switcher::after { content: '▾'; margin-left: 2px; font-size: 0.7em; opacity: 0.55; transition: transform 0.2s; }
.lang-switcher.expanded a:not(.active), .lang-switcher.expanded span { display: inline-block; }
.lang-switcher.expanded::after { transform: rotate(180deg); }

/* Mobile burger */
.nav-burger {
  display: none; background: transparent; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; width: 36px; height: 32px;
  align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.nav-burger span { display: block; width: 16px; height: 1.5px; background: var(--white, #fff); position: relative; transition: 0.2s; }
.nav-burger span::before, .nav-burger span::after { content:''; position:absolute; left:0; width:16px; height:1.5px; background: var(--white, #fff); transition: 0.2s; }
.nav-burger span::before { top: -5px; }
.nav-burger span::after { top: 5px; }
.nav-burger.open span { background: transparent; }
.nav-burger.open span::before { top: 0; transform: rotate(45deg); }
.nav-burger.open span::after { top: 0; transform: rotate(-45deg); }

.nav-mobile-menu {
  display: none; position: absolute; top: 100%; left: 16px; right: 16px;
  margin-top: 8px; background: rgba(10,10,10,0.96); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 12px;
  padding: 16px; flex-direction: column; gap: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5); z-index: 60;
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-menu a { color: var(--stone, #a1a1a6); padding: 12px 14px; font-size: 0.95rem; border-radius: 8px; }
.nav-mobile-menu a:hover { background: rgba(255,255,255,0.04); color: var(--white, #fff); }

@media (max-width: 720px) {
  .nav-burger { display: inline-flex; }
  .nav-controls { gap: 8px; }
  /* Anti-overflow horizontal pro blog */
  html, body { overflow-x: hidden; max-width: 100vw; }
  img, video, iframe { max-width: 100%; height: auto; }
}
@media (max-width: 480px) {
  .nav-cta { display: none !important; }
  .lang-switcher { padding: 4px 8px; font-size: 0.68rem; }
  .theme-toggle { transform: scale(0.86); }
}

/* === Light theme · inverte cores base do blog mantendo vermelho === */
html[data-theme="light"] {
  background: #fafaf7;
}
html[data-theme="light"] body {
  background: #fafaf7; color: #1d1d1f;
}
html[data-theme="light"] .nav {
  background: rgba(250,250,247,0.85) !important;
  border-bottom-color: rgba(0,0,0,0.08) !important;
}
html[data-theme="light"] .nav-links { color: #48484a; }
html[data-theme="light"] .nav-links a { color: #48484a; }
html[data-theme="light"] .nav-links a:hover { color: #0a0a0a; }
html[data-theme="light"] .nav-cta { background: #0a0a0a !important; color: #fff !important; }
html[data-theme="light"] .recto-wordmark { color: #0a0a0a; }
html[data-theme="light"] .lang-switcher { border-color: rgba(0,0,0,0.12); }
html[data-theme="light"] .lang-switcher a { color: #86868b; }
html[data-theme="light"] .lang-switcher a.active { color: #1d1d1f; }
html[data-theme="light"] .theme-toggle { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.12); }
html[data-theme="light"] .nav-burger { border-color: rgba(0,0,0,0.12); }
html[data-theme="light"] .nav-burger span,
html[data-theme="light"] .nav-burger span::before,
html[data-theme="light"] .nav-burger span::after { background: #0a0a0a; }
html[data-theme="light"] .nav-mobile-menu { background: rgba(250,250,247,0.98); border-color: rgba(0,0,0,0.08); }
html[data-theme="light"] .nav-mobile-menu a { color: #48484a; }

/* Conteúdo do blog em light */
html[data-theme="light"] .hero h1,
html[data-theme="light"] .hero p,
html[data-theme="light"] .post-card h2,
html[data-theme="light"] .post-card p,
html[data-theme="light"] .post-card .excerpt { color: #1d1d1f; }
html[data-theme="light"] .post-card { border-top-color: rgba(0,0,0,0.08); }
html[data-theme="light"] .post-card:hover { background: rgba(0,0,0,0.02); }
html[data-theme="light"] .post-meta,
html[data-theme="light"] .caps,
html[data-theme="light"] .footer-meta,
html[data-theme="light"] .footer-links a { color: #86868b; }
html[data-theme="light"] .footer { border-top-color: rgba(0,0,0,0.08); }

/* Post content (corpo do post) em light */
html[data-theme="light"] .post-conteudo,
html[data-theme="light"] .post-conteudo p,
html[data-theme="light"] .post-conteudo h2,
html[data-theme="light"] .post-conteudo h3,
html[data-theme="light"] .post-conteudo li,
html[data-theme="light"] .post-conteudo blockquote { color: #1d1d1f; }
html[data-theme="light"] .post-conteudo blockquote { border-left-color: rgba(0,0,0,0.15); }
html[data-theme="light"] hr { border-color: rgba(0,0,0,0.1); }