/* ============================================
   SeniorWire — Cultural Desk Brand Themes
   Each desk has its own visual identity
   ============================================ */

/* === MATEO — Spanish / Southwest Desk === */
.desk-es {
  --desk-primary: #c05621;
  --desk-secondary: #1a6b5a;
  --desk-bg: #f5edd6;
  --desk-text: #2a1f14;
  --desk-accent: #d4853a;
  --desk-hero-gradient: linear-gradient(135deg, #3d1f0a 0%, #c05621 60%, #d4853a 100%);
  --desk-font-heading: 'Lora', Georgia, serif;
  --desk-font-body: 'Inter', system-ui, sans-serif;
}

.desk-es .nav { border-bottom-color: var(--desk-primary); }
.desk-es .nav-logo-icon { background: var(--desk-primary); }
.desk-es .nav-logo-text span { color: var(--desk-primary); }
.desk-es .nav-cta { background: var(--desk-primary); }
.desk-es .nav-cta:hover { background: #a04818; }
.desk-es .hero { background: var(--desk-hero-gradient); }
.desk-es .hero-badge { background: rgba(192,86,33,0.15); border-color: rgba(192,86,33,0.3); color: #e8915a; }
.desk-es .hero-badge::before { background: var(--desk-primary); }
.desk-es .hero-stat-number { color: var(--desk-primary); }
.desk-es .btn-primary { background: var(--desk-primary); }
.desk-es .btn-primary:hover { background: #a04818; }
.desk-es h1, .desk-es h2, .desk-es h3, .desk-es h4 { font-family: var(--desk-font-heading); color: #2a1f14; }
.desk-es .hero h1, .desk-es .hero h1 .highlight { color: #fff; }
.desk-es .hero h1 .highlight { color: var(--desk-accent); }
.desk-es .crisis-card-number { color: #2a1f14; }
.desk-es .crisis-section { background: var(--desk-bg); }
.desk-es .how-step-number { background: var(--desk-primary); }
.desk-es .article-category.plans { background: rgba(192,86,33,0.12); color: var(--desk-primary); }
.desk-es .cta-section { background: #2a1f14; }
.desk-es .footer { background: #1a1208; }
.desk-es a { color: var(--desk-primary); }
.desk-es a:hover { color: #a04818; }

/* === DR. CHEN — Chinese / Pacific Desk === */
.desk-zh {
  --desk-primary: #c41e3a;
  --desk-secondary: #2d8a4e;
  --desk-bg: #faf6ef;
  --desk-text: #1a1008;
  --desk-accent: #8b6914;
  --desk-hero-gradient: linear-gradient(135deg, #1a0808 0%, #4a0e1a 40%, #c41e3a 100%);
  --desk-font-heading: 'Noto Serif SC', 'Noto Serif TC', 'SimSun', serif;
  --desk-font-body: 'Noto Sans SC', 'Noto Sans TC', 'Microsoft YaHei', sans-serif;
}

.desk-zh .nav { border-bottom-color: var(--desk-primary); }
.desk-zh .nav-logo-icon { background: var(--desk-primary); }
.desk-zh .nav-logo-text span { color: var(--desk-primary); }
.desk-zh .nav-cta { background: var(--desk-primary); }
.desk-zh .nav-cta:hover { background: #a01830; }
.desk-zh .hero { background: var(--desk-hero-gradient); }
.desk-zh .hero-badge { background: rgba(196,30,58,0.15); border-color: rgba(196,30,58,0.3); color: #ff6b7a; }
.desk-zh .hero-badge::before { background: var(--desk-primary); }
.desk-zh .hero-stat-number { color: var(--desk-primary); }
.desk-zh .btn-primary { background: var(--desk-primary); }
.desk-zh .btn-primary:hover { background: #a01830; }
.desk-zh h1, .desk-zh h2, .desk-zh h3 { font-family: var(--desk-font-heading); }
.desk-zh .hero h1 .highlight { color: #ff6b7a; }
.desk-zh .crisis-section { background: var(--desk-bg); }
.desk-zh .how-step-number { background: var(--desk-primary); }
.desk-zh .cta-section { background: #1a0808; }
.desk-zh .footer { background: #120606; }
.desk-zh a { color: var(--desk-primary); }

/* === MAI — Vietnamese / Little Saigon Desk === */
.desk-vi {
  --desk-primary: #d4a435;
  --desk-secondary: #1a3a2a;
  --desk-bg: #f8f4ec;
  --desk-text: #1a2a1a;
  --desk-accent: #c05621;
  --desk-hero-gradient: linear-gradient(135deg, #0a1a10 0%, #1a3a2a 50%, #2d5a3a 100%);
  --desk-font-heading: 'Roboto Serif', Georgia, serif;
  --desk-font-body: 'Roboto', system-ui, sans-serif;
}

.desk-vi .nav { border-bottom-color: var(--desk-primary); }
.desk-vi .nav-logo-icon { background: var(--desk-secondary); }
.desk-vi .nav-logo-text span { color: var(--desk-primary); }
.desk-vi .nav-cta { background: var(--desk-primary); color: #1a2a1a !important; }
.desk-vi .nav-cta:hover { background: #b88a28; }
.desk-vi .hero { background: var(--desk-hero-gradient); }
.desk-vi .hero-badge { background: rgba(212,164,53,0.15); border-color: rgba(212,164,53,0.3); color: #f0d060; }
.desk-vi .hero-badge::before { background: var(--desk-primary); }
.desk-vi .hero-stat-number { color: var(--desk-primary); }
.desk-vi .btn-primary { background: var(--desk-primary); color: #1a2a1a; }
.desk-vi .btn-primary:hover { background: #b88a28; }
.desk-vi h1, .desk-vi h2, .desk-vi h3 { font-family: var(--desk-font-heading); color: var(--desk-secondary); }
.desk-vi .hero h1 .highlight { color: var(--desk-primary); }
.desk-vi .crisis-section { background: var(--desk-bg); }
.desk-vi .how-step-number { background: var(--desk-secondary); }
.desk-vi .cta-section { background: var(--desk-secondary); }
.desk-vi .footer { background: #0a1a10; }
.desk-vi a { color: var(--desk-secondary); }

/* === JEAN-PIERRE — Haitian Creole / Sunshine Desk === */
.desk-ht {
  --desk-primary: #1a5276;
  --desk-secondary: #f4d03f;
  --desk-bg: #f0f6fa;
  --desk-text: #0a1a2a;
  --desk-accent: #2e86c1;
  --desk-hero-gradient: linear-gradient(135deg, #0a1a2a 0%, #1a5276 50%, #2e86c1 100%);
  --desk-font-heading: 'Playfair Display', Georgia, serif;
  --desk-font-body: 'Open Sans', system-ui, sans-serif;
}

.desk-ht .nav { border-bottom-color: var(--desk-primary); }
.desk-ht .nav-logo-icon { background: var(--desk-primary); }
.desk-ht .nav-logo-text span { color: var(--desk-secondary); }
.desk-ht .nav-cta { background: var(--desk-secondary); color: #0a1a2a !important; }
.desk-ht .nav-cta:hover { background: #d4b030; }
.desk-ht .hero { background: var(--desk-hero-gradient); }
.desk-ht .hero-badge { background: rgba(244,208,63,0.15); border-color: rgba(244,208,63,0.3); color: #f4d03f; }
.desk-ht .hero-badge::before { background: var(--desk-secondary); }
.desk-ht .hero-stat-number { color: var(--desk-secondary); }
.desk-ht .btn-primary { background: var(--desk-secondary); color: #0a1a2a; font-weight: 800; }
.desk-ht .btn-primary:hover { background: #d4b030; }
.desk-ht h1, .desk-ht h2, .desk-ht h3 { font-family: var(--desk-font-heading); color: var(--desk-primary); }
.desk-ht .hero h1 .highlight { color: var(--desk-secondary); }
.desk-ht .crisis-section { background: var(--desk-bg); }
.desk-ht .how-step-number { background: var(--desk-primary); }
.desk-ht .cta-section { background: var(--desk-primary); }
.desk-ht .footer { background: #0a1220; }
.desk-ht a { color: var(--desk-primary); }

/* === MRS. KIM — Korean / Metro Desk === */
.desk-ko {
  --desk-primary: #1a3c8f;
  --desk-secondary: #e85d3a;
  --desk-bg: #f2efe9;
  --desk-text: #1a1a2a;
  --desk-accent: #3a6fd8;
  --desk-hero-gradient: linear-gradient(135deg, #0a0e1a 0%, #1a3c8f 50%, #2a5ab8 100%);
  --desk-font-heading: 'Noto Serif KR', 'Batang', serif;
  --desk-font-body: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

.desk-ko .nav { border-bottom-color: var(--desk-primary); }
.desk-ko .nav-logo-icon { background: var(--desk-primary); }
.desk-ko .nav-logo-text span { color: var(--desk-secondary); }
.desk-ko .nav-cta { background: var(--desk-secondary); }
.desk-ko .nav-cta:hover { background: #c84a2a; }
.desk-ko .hero { background: var(--desk-hero-gradient); }
.desk-ko .hero-badge { background: rgba(232,93,58,0.15); border-color: rgba(232,93,58,0.3); color: #ff8a6e; }
.desk-ko .hero-badge::before { background: var(--desk-secondary); }
.desk-ko .hero-stat-number { color: var(--desk-secondary); }
.desk-ko .btn-primary { background: var(--desk-secondary); }
.desk-ko .btn-primary:hover { background: #c84a2a; }
.desk-ko h1, .desk-ko h2, .desk-ko h3 { font-family: var(--desk-font-heading); color: var(--desk-primary); }
.desk-ko .hero h1 .highlight { color: var(--desk-secondary); }
.desk-ko .crisis-section { background: var(--desk-bg); }
.desk-ko .how-step-number { background: var(--desk-primary); }
.desk-ko .cta-section { background: var(--desk-primary); }
.desk-ko .footer { background: #080e1a; }
.desk-ko a { color: var(--desk-primary); }

/* === Language Switcher (Global) === */
.lang-switcher { display: none !important;
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
}

.lang-switcher-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy, #1a2744);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.lang-switcher-btn:hover {
  transform: scale(1.1);
}

.lang-switcher-menu {
  position: absolute;
  bottom: 68px;
  right: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  padding: 8px 0;
  min-width: 220px;
  display: none;
  border: 1px solid rgba(0,0,0,0.06);
}

.lang-switcher-menu.active {
  display: block;
  animation: fadeUp 0.2s ease;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  text-decoration: none;
  color: #333;
  font-weight: 600;
  font-size: 0.92rem;
  transition: background 0.15s;
}

.lang-option:hover {
  background: #f5f5f5;
}

.lang-option .flag {
  font-size: 1.3rem;
}

.lang-option .editor-name {
  font-size: 0.72rem;
  color: #888;
  font-weight: 400;
  display: block;
  margin-top: 1px;
}

.lang-option.active {
  background: rgba(232,87,58,0.06);
  color: var(--coral, #e8573a);
}

/* Desk editor byline */
.editor-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(0,0,0,0.03);
  border-radius: 8px;
  margin-bottom: 24px;
}

.editor-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--desk-primary, #1a2744);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
}

.editor-info .name {
  font-weight: 700;
  font-size: 0.9rem;
  color: #111;
}

.editor-info .desk {
  font-size: 0.78rem;
  color: #666;
}

@media (max-width: 768px) {
  .lang-switcher { bottom: 16px; right: 16px; }
  .lang-switcher-btn { width: 48px; height: 48px; }
}