/* ============================================
   PARLATORIUM - Design System Global
   Editorial Moderno | Escola para Psicólogos
   ============================================ */

/* === Fontes === */

/* Recoleta (título "Parlatorium") - self-hosted
   Baixar de: https://www.dafont.com/pt/recoleta.font
   Colocar arquivos .woff2/.woff em assets/fonts/ */
@font-face {
  font-family: 'Recoleta';
  src: url('../fonts/Recoleta-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'RecoletaAlt';
  src: url('../fonts/RecoletaAlt-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* Tiempos Headline (Klim Type Foundry) - self-hosted
   12 variantes: 6 pesos (Light 300, Regular 400, Medium 500,
   Semibold 600, Bold 700, Black 900) × 2 estilos (normal | italic).
   Família agregada (resolve por font-weight + font-style) +
   famílias individuais (cada nome único, para o seletor de fonte
   no editor mudar variante via execCommand fontName). */

/* === Família agregada === */
@font-face { font-family: 'Tiempos Headline'; src: url('../fonts/TiemposHeadline-Light.woff2') format('woff2'), url('../fonts/TiemposHeadline-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Tiempos Headline'; src: url('../fonts/TiemposHeadline-LightItalic.woff2') format('woff2'), url('../fonts/TiemposHeadline-LightItalic.otf') format('opentype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Tiempos Headline'; src: url('../fonts/TiemposHeadline-Regular.woff2') format('woff2'), url('../fonts/TiemposHeadline-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Tiempos Headline'; src: url('../fonts/TiemposHeadline-RegularItalic.woff2') format('woff2'), url('../fonts/TiemposHeadline-RegularItalic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Tiempos Headline'; src: url('../fonts/TiemposHeadline-Medium.woff2') format('woff2'), url('../fonts/TiemposHeadline-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Tiempos Headline'; src: url('../fonts/TiemposHeadline-MediumItalic.woff2') format('woff2'), url('../fonts/TiemposHeadline-MediumItalic.otf') format('opentype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Tiempos Headline'; src: url('../fonts/TiemposHeadline-Semibold.woff2') format('woff2'), url('../fonts/TiemposHeadline-Semibold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Tiempos Headline'; src: url('../fonts/TiemposHeadline-SemiboldItalic.woff2') format('woff2'), url('../fonts/TiemposHeadline-SemiboldItalic.otf') format('opentype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Tiempos Headline'; src: url('../fonts/TiemposHeadline-Bold.woff2') format('woff2'), url('../fonts/TiemposHeadline-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Tiempos Headline'; src: url('../fonts/TiemposHeadline-BoldItalic.woff2') format('woff2'), url('../fonts/TiemposHeadline-BoldItalic.otf') format('opentype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Tiempos Headline'; src: url('../fonts/TiemposHeadline-Black.woff2') format('woff2'), url('../fonts/TiemposHeadline-Black.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Tiempos Headline'; src: url('../fonts/TiemposHeadline-BlackItalic.woff2') format('woff2'), url('../fonts/TiemposHeadline-BlackItalic.otf') format('opentype'); font-weight: 900; font-style: italic; font-display: swap; }

/* === Famílias individuais (alias para o seletor de fonte do editor) === */
@font-face { font-family: 'Tiempos Headline Light';         src: url('../fonts/TiemposHeadline-Light.woff2') format('woff2'),         url('../fonts/TiemposHeadline-Light.otf') format('opentype');         font-display: swap; }
@font-face { font-family: 'Tiempos Headline Light Italic';  src: url('../fonts/TiemposHeadline-LightItalic.woff2') format('woff2'),  url('../fonts/TiemposHeadline-LightItalic.otf') format('opentype');  font-display: swap; }
@font-face { font-family: 'Tiempos Headline Regular';       src: url('../fonts/TiemposHeadline-Regular.woff2') format('woff2'),       url('../fonts/TiemposHeadline-Regular.otf') format('opentype');       font-display: swap; }
@font-face { font-family: 'Tiempos Headline Regular Italic'; src: url('../fonts/TiemposHeadline-RegularItalic.woff2') format('woff2'), url('../fonts/TiemposHeadline-RegularItalic.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Tiempos Headline Medium';        src: url('../fonts/TiemposHeadline-Medium.woff2') format('woff2'),        url('../fonts/TiemposHeadline-Medium.otf') format('opentype');        font-display: swap; }
@font-face { font-family: 'Tiempos Headline Medium Italic'; src: url('../fonts/TiemposHeadline-MediumItalic.woff2') format('woff2'), url('../fonts/TiemposHeadline-MediumItalic.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Tiempos Headline Semibold';      src: url('../fonts/TiemposHeadline-Semibold.woff2') format('woff2'),      url('../fonts/TiemposHeadline-Semibold.otf') format('opentype');      font-display: swap; }
@font-face { font-family: 'Tiempos Headline Semibold Italic'; src: url('../fonts/TiemposHeadline-SemiboldItalic.woff2') format('woff2'), url('../fonts/TiemposHeadline-SemiboldItalic.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Tiempos Headline Bold';          src: url('../fonts/TiemposHeadline-Bold.woff2') format('woff2'),          url('../fonts/TiemposHeadline-Bold.otf') format('opentype');          font-display: swap; }
@font-face { font-family: 'Tiempos Headline Bold Italic';   src: url('../fonts/TiemposHeadline-BoldItalic.woff2') format('woff2'),   url('../fonts/TiemposHeadline-BoldItalic.otf') format('opentype');   font-display: swap; }
@font-face { font-family: 'Tiempos Headline Black';         src: url('../fonts/TiemposHeadline-Black.woff2') format('woff2'),         url('../fonts/TiemposHeadline-Black.otf') format('opentype');         font-display: swap; }
@font-face { font-family: 'Tiempos Headline Black Italic';  src: url('../fonts/TiemposHeadline-BlackItalic.woff2') format('woff2'),  url('../fonts/TiemposHeadline-BlackItalic.otf') format('opentype');  font-display: swap; }

/* === Design Tokens === */
:root {
  /* Cores */
  --color-primary: #1A1A1A;
  --color-bone: #F4F2EE;
  --color-gold: #ffc600;
  --color-gold-hover: #e6b300;
  --color-gold-light: #ffd640;
  --color-white: #FFFFFF;
  --color-surface: #FFFFFF;

  /* Backgrounds */
  --color-bg-light: #F4F2EE;
  --color-bg-dark: #1A1A1A;
  --color-bg-surface: #FFFFFF;
  --color-bg-card: #FFFFFF;
  --color-bg-elevated: #F9F8F5;
  --color-bg-sidebar: #141414;

  /* Borders */
  --color-border: #E5E5E5;
  --color-border-subtle: rgba(0, 0, 0, 0.06);
  --color-border-gold: rgba(255, 198, 0, 0.3);

  /* Text */
  --color-text-primary: #2D2D2D;
  --color-text-secondary: #6B7280;
  --color-text-muted: #8C8C8C;
  --color-text-white: #FFFFFF;
  --color-text-gold: #ffc600;

  /* Semantic */
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error: #9B2C2C;
  --color-info: #3B82F6;

  /* Typography */
  --font-brand: 'Recoleta', Georgia, serif;
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Source Serif 4', Georgia, serif;
  --font-ui: 'Outfit', 'Inter', sans-serif;

  /* Shadows */
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-elevated: 0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-gold: 0 4px 14px rgba(255, 198, 0, 0.2);

  /* Spacing */
  --nav-height: 72px;
  --sidebar-width: 280px;
}

/* === Base === */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-ui);
  background: var(--color-bg-light);
  color: var(--color-text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === Typography Classes === */
.font-brand { font-family: var(--font-brand); }
.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }
.font-ui { font-family: var(--font-ui); }

/* === Glass Morphism (para áreas públicas) === */
.glass-morphism {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(229, 229, 229, 1);
}

/* === Glass Card (para áreas internas - sidebar dark context) === */
.glass-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

/* Em contexto dark (sidebar, nav, hero) */
.dark-context .glass-card,
.bg-primary .glass-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* === Navigation === */
.glass-nav {
  background: rgba(26, 26, 26, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* === Sidebar (stays dark) === */
.glass-sidebar {
  background: var(--color-bg-sidebar);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* === Gold === */
.gold-gradient {
  background: linear-gradient(135deg, #ffc600 0%, #d9a800 100%);
}

.gold-gradient-text {
  background: linear-gradient(to right, #ffc600, #ffd640);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gold-border-glow {
  border: 1px solid rgba(255, 198, 0, 0.3);
  box-shadow: 0 0 15px rgba(255, 198, 0, 0.08);
}

/* === Scrollbar === */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }

/* === Nav Link === */
.nav-link {
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  transition: color 0.2s;
  text-decoration: none;
}
.nav-link:hover, .nav-link.active {
  color: #FFFFFF;
}

/* === Cards === */
.card-hover {
  transition: transform 0.3s, box-shadow 0.3s;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}

/* === Buttons === */
.btn-gold {
  background: var(--color-gold);
  color: var(--color-primary);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.btn-gold:hover { background: var(--color-gold-hover); }
.btn-gold:active { transform: scale(0.98); }

.btn-primary {
  background: var(--color-bg-surface);
  color: var(--color-primary);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.75rem 2rem;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.btn-primary:hover { background: var(--color-gold); color: white; }

.btn-outline {
  background: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: background 0.2s;
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.1); }

/* === Text Shadow === */
.text-shadow-sm { text-shadow: 0 2px 4px rgba(0,0,0,0.3); }

/* === Animations === */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 198, 0, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(255, 198, 0, 0); }
}

.animate-fade-in { animation: fadeIn 0.5s ease-out; }
.animate-slide-in { animation: slideInLeft 0.3s ease-out; }
.animate-pulse-gold { animation: pulse-gold 2s infinite; }

/* === Loading Skeleton === */
.skeleton {
  background: linear-gradient(90deg, #e8e6e1 25%, #f0eee9 50%, #e8e6e1 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === Toast Notifications === */
.toast-container {
  position: fixed;
  top: calc(var(--nav-height) + 1rem);
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toast {
  padding: 1rem 1.5rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  animation: fadeIn 0.3s ease-out;
  max-width: 400px;
  font-family: var(--font-ui);
}

.toast-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.toast-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.toast-warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.toast-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }

/* === Editorial: Tiempos Headline em notícias e textos editoriais ===
   Aplicado APENAS no artigo (página individual da notícia), não nos
   cards de listagem/home — cards ficam com fonte sans-serif legível
   pra escaneamento rápido. */
.news-article-title,
.editorial-headline,
.tiempos-headline {
  font-family: 'Tiempos Headline', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 600 !important;
}

.editorial-lead,
.tiempos-italic {
  font-family: 'Tiempos Headline', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

.news-article-content blockquote {
  font-family: 'Tiempos Headline', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

/* === Cards de notícia (home + listagem) ===
   Sem itálico, fonte legível, capa com cantos arredondados, meta em
   cinza escuro (não preto). */
.news-card {
  border-radius: 0.75rem;
  overflow: hidden;
}
.news-card-cover {
  border-radius: 0.75rem 0.75rem 0 0;
  overflow: hidden;
}
.news-card-cover img,
.card-cover-img {
  border-radius: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-card-title {
  font-family: 'Inter', 'Outfit', sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
}
.news-card-excerpt {
  font-family: 'Source Serif 4', Georgia, serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
}
.news-card-meta,
.news-card-meta span {
  color: #4B5563 !important; /* cinza escuro */
}

/* === Selection === */
::selection { background: rgba(255, 198, 0, 0.3); }

/* === Campos de preenchimento (padrão global) ===
   Fundo preto, fonte Courier Prime, texto amarelo bem vivo.
   Aplicado a inputs de texto, textarea e select em todas as páginas. */
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');

/* Editor de notícia (.title-input, .excerpt-input, .editor-content-input,
   .toolbar-font-select, .form-input) e qualquer elemento marcado com .no-cli-style
   ficam de fora desta estética terminal-CLI — o editor precisa do visual editorial. */
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']):not([type='file']):not([type='range']):not([type='color']):not([type='image']):not(.title-input):not(.excerpt-input):not(.editor-content-input):not(.toolbar-font-select):not(.form-input):not(.no-cli-style),
textarea:not(.title-input):not(.excerpt-input):not(.editor-content-input):not(.toolbar-font-select):not(.form-input):not(.no-cli-style),
select:not(.toolbar-font-select):not(.form-input):not(.no-cli-style) {
  background-color: #000000 !important;
  color: #FFFF00 !important;
  font-family: 'Courier Prime', monospace !important;
  caret-color: #FFFF00;
}

input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']):not([type='file']):not(.title-input):not(.excerpt-input):not(.editor-content-input):not(.toolbar-font-select):not(.form-input):not(.no-cli-style)::placeholder,
textarea:not(.title-input):not(.excerpt-input):not(.editor-content-input):not(.toolbar-font-select):not(.form-input):not(.no-cli-style)::placeholder {
  color: rgba(255, 255, 0, 0.45) !important;
  font-family: 'Courier Prime', monospace !important;
}

input:focus:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']):not([type='file']):not(.title-input):not(.excerpt-input):not(.editor-content-input):not(.toolbar-font-select):not(.form-input):not(.no-cli-style),
textarea:focus:not(.title-input):not(.excerpt-input):not(.editor-content-input):not(.toolbar-font-select):not(.form-input):not(.no-cli-style),
select:focus:not(.toolbar-font-select):not(.form-input):not(.no-cli-style) {
  outline: 2px solid rgba(255, 255, 0, 0.5);
  outline-offset: 1px;
}

/* Auto-fill do navegador pisa em cima de qualquer regra; força os mesmos tokens */
input:-webkit-autofill:not(.title-input):not(.excerpt-input):not(.editor-content-input):not(.toolbar-font-select):not(.form-input):not(.no-cli-style),
textarea:-webkit-autofill:not(.title-input):not(.excerpt-input):not(.editor-content-input):not(.toolbar-font-select):not(.form-input):not(.no-cli-style),
select:-webkit-autofill:not(.toolbar-font-select):not(.form-input):not(.no-cli-style) {
  -webkit-box-shadow: 0 0 0 1000px #000000 inset !important;
  -webkit-text-fill-color: #FFFF00 !important;
  caret-color: #FFFF00 !important;
}

/* === Responsive === */
@media (max-width: 768px) {
  :root {
    --nav-height: 60px;
    --sidebar-width: 100%;
  }
}

/* === Print === */
@media print {
  .no-print { display: none !important; }
  body { background: white; color: black; }
}