/* Ekota News Styles */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;0,900;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --primary-red: #e11d48;
}

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

.font-serif-headline {
  font-family: 'Playfair Display', Georgia, serif;
}

.font-editorial-brand {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.15em;
}

.font-mono-code {
  font-family: 'JetBrains Mono', monospace;
}

/* Brand Logo Typography (Square Red NEWS Badge) */
.brand-news-badge {
  background-color: #e11d48 !important;
  color: #ffffff !important;
  display: inline-block;
  line-height: 1.1;
}

/* Smooth Scrolling & Custom Scrollbar */
html {
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #0f172a;
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Breaking News Ticker Animation */
.ticker-wrap {
  overflow: hidden;
  white-space: nowrap;
}

.ticker-move {
  display: inline-block;
  white-space: nowrap;
  animation: ticker 45s linear infinite;
}

.ticker-wrap:hover .ticker-move {
  animation-play-state: paused;
}

@keyframes ticker {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Pulse animation for live sync badge */
@keyframes softPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.96);
  }
}

.live-pulse {
  animation: softPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Glassmorphism helpers */
.glass-panel {
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-modal {
  background: rgba(10, 15, 29, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ==========================================================================
   DAY / LIGHT THEME SYSTEM (Flawless Visibility & Strict Contrast Rules)
   ========================================================================== */
html:not(.dark) body,
html.light body {
  background-color: #f8fafc;
  color: #0f172a;
}

html:not(.dark) .bg-\[\#0a0f1d\],
html.light .bg-\[\#0a0f1d\] {
  background-color: #ffffff;
}

html:not(.dark) .border-slate-800,
html.light .border-slate-800 {
  border-color: #e2e8f0;
}

html:not(.dark) .bg-slate-900,
html.light .bg-slate-900 {
  background-color: #ffffff;
  color: #0f172a;
}

html:not(.dark) .bg-slate-900\/70,
html:not(.dark) .bg-slate-900\/90,
html:not(.dark) .bg-slate-900\/80,
html:not(.dark) .bg-slate-900\/60,
html:not(.dark) .bg-slate-900\/50,
html.light .bg-slate-900\/70,
html.light .bg-slate-900\/90,
html.light .bg-slate-900\/80,
html.light .bg-slate-900\/60,
html.light .bg-slate-900\/50 {
  background-color: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.06);
}

html:not(.dark) .bg-slate-950,
html:not(.dark) .bg-slate-950\/80,
html:not(.dark) .bg-slate-950\/90,
html:not(.dark) .bg-slate-950\/85,
html:not(.dark) .bg-slate-950\/70,
html:not(.dark) .bg-slate-950\/40,
html:not(.dark) .bg-slate-950\/60,
html.light .bg-slate-950,
html.light .bg-slate-950\/80,
html.light .bg-slate-950\/90,
html.light .bg-slate-950\/85,
html.light .bg-slate-950\/70,
html.light .bg-slate-950\/40,
html.light .bg-slate-950\/60 {
  background-color: #f1f5f9;
  border-color: #e2e8f0;
}

/* Light Mode Text Overrides */
html:not(.dark) body,
html.light body {
  color: #0f172a;
}

html:not(.dark) p:not(button *),
html.light p:not(button *) {
  color: #334155;
}

/* Base Light Mode Text utilities (never affect buttons) */
html:not(.dark) h1:not(button *),
html:not(.dark) h2:not(button *),
html:not(.dark) h3:not(button *),
html:not(.dark) h4:not(button *),
html.light h1:not(button *),
html.light h2:not(button *),
html.light h3:not(button *),
html.light h4:not(button *) {
  color: #0f172a;
}

/* ==========================================================================
   TOP HERO SECTION BUTTONS - STRICT WHITE FONT GUARANTEE
   ========================================================================== */
#hero-section button,
#hero-section button *,
#hero-section button span,
#hero-section button svg,
#hero-section .hero-action-btn,
#hero-section .hero-action-btn *,
#hero-section .hero-read-btn,
#hero-section .hero-read-btn *,
#hero-section .hero-social-btn,
#hero-section .hero-social-btn *,
html:not(.dark) #hero-section button,
html:not(.dark) #hero-section button *,
html:not(.dark) #hero-section button span,
html:not(.dark) #hero-section button svg,
html.light #hero-section button,
html.light #hero-section button *,
html.light #hero-section button span,
html.light #hero-section button svg {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

#hero-section .hero-read-btn,
html:not(.dark) #hero-section .hero-read-btn,
html.light #hero-section .hero-read-btn {
  background-color: #e11d48 !important;
  color: #ffffff !important;
  border: 1px solid #be123c !important;
}

#hero-section .hero-social-btn,
html:not(.dark) #hero-section .hero-social-btn,
html.light #hero-section .hero-social-btn {
  background-color: #1e293b !important;
  color: #ffffff !important;
  border: 1px solid #334155 !important;
}

/* Light Mode Form Inputs & Selects */
html:not(.dark) input[type="text"],
html:not(.dark) input[type="password"],
html:not(.dark) input[type="url"],
html:not(.dark) input[type="number"],
html:not(.dark) select,
html.light input[type="text"],
html.light input[type="password"],
html.light input[type="url"],
html.light input[type="number"],
html.light select {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html:not(.dark) ::-webkit-scrollbar-track,
html.light ::-webkit-scrollbar-track {
  background: #f1f5f9;
}
html:not(.dark) ::-webkit-scrollbar-thumb,
html.light ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}

/* ==========================================================================
   BUTTON CONTRAST ARCHITECTURE:
   1. If the button has a color -> FONT MUST BE WHITE (#ffffff)
   2. If the button is white    -> FONT CAN BE BLACK (#0f172a)
   ========================================================================== */

/* --- RULE 1: COLORED BUTTONS (ALWAYS WHITE FONT ACROSS ALL THEMES) --- */

/* Rose / Red Buttons */
button.bg-rose-600,
button[class*="bg-rose"],
.bg-rose-600,
#modal-broadcast-btn,
#admin-login-submit-btn,
#save-settings-btn,
#change-password-btn,
#sync-now-btn,
#open-admin-dashboard-btn,
#accept-cookies-btn,
#manual-submit-btn,
#admin-execute-broadcast-btn,
#share-copy-link-btn,
.delete-feed-btn {
  background-color: #e11d48 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: 1px solid #be123c !important;
}
button.bg-rose-600:hover,
#modal-broadcast-btn:hover,
#admin-login-submit-btn:hover,
#save-settings-btn:hover,
#change-password-btn:hover,
#sync-now-btn:hover,
#open-admin-dashboard-btn:hover,
#accept-cookies-btn:hover,
#manual-submit-btn:hover,
#admin-execute-broadcast-btn:hover,
#share-copy-link-btn:hover,
.delete-feed-btn:hover {
  background-color: #f43f5e !important;
  color: #ffffff !important;
}

/* Blue Buttons (Facebook, LinkedIn, etc.) */
button.bg-blue-600,
button[class*="bg-blue"],
#test-fb-conn-btn,
#share-facebook-btn,
#share-linkedin-btn {
  background-color: #2563eb !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: 1px solid #1d4ed8 !important;
}
button.bg-blue-600:hover,
#test-fb-conn-btn:hover,
#share-facebook-btn:hover,
#share-linkedin-btn:hover {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
}

/* Pink Buttons (Instagram, etc.) */
button.bg-pink-600,
button[class*="bg-pink"],
#test-ig-conn-btn {
  background-color: #db2777 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: 1px solid #be185d !important;
}
button.bg-pink-600:hover,
#test-ig-conn-btn:hover {
  background-color: #ec4899 !important;
  color: #ffffff !important;
}

/* Purple Buttons (TikTok, etc.) */
button.bg-purple-600,
button[class*="bg-purple"],
#test-tt-conn-btn {
  background-color: #9333ea !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: 1px solid #7e22ce !important;
}
button.bg-purple-600:hover,
#test-tt-conn-btn:hover {
  background-color: #a855f7 !important;
  color: #ffffff !important;
}

/* Emerald / Green Buttons (Save changes, active feeds) */
button.bg-emerald-600,
button.bg-emerald-500,
#share-whatsapp-btn,
#edit-feed-submit-btn,
.toggle-feed-btn[data-enabled="true"] {
  background-color: #059669 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: 1px solid #047857 !important;
}
button.bg-emerald-600:hover,
button.bg-emerald-500:hover,
#share-whatsapp-btn:hover,
#edit-feed-submit-btn:hover,
.toggle-feed-btn[data-enabled="true"]:hover {
  background-color: #10b981 !important;
  color: #ffffff !important;
}

/* Amber / Orange Buttons (Edit Link) - FONT MUST BE WHITE */
.edit-feed-btn,
button.bg-amber-600,
button.bg-amber-500 {
  background-color: #d97706 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: 1px solid #b45309 !important;
}
.edit-feed-btn:hover,
button.bg-amber-600:hover,
button.bg-amber-500:hover {
  background-color: #ea580c !important;
  color: #ffffff !important;
}

/* Dark Slate / Charcoal Buttons (Disabled feeds, modal headers, dark controls) */
.toggle-feed-btn[data-enabled="false"],
#share-twitter-btn,
#share-native-btn,
#refresh-activity-logs-btn,
#download-activity-logs-btn {
  background-color: #334155 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: 1px solid #475569 !important;
}
.toggle-feed-btn[data-enabled="false"]:hover,
#share-twitter-btn:hover,
#share-native-btn:hover,
#refresh-activity-logs-btn:hover,
#download-activity-logs-btn:hover {
  background-color: #475569 !important;
  color: #ffffff !important;
}

/* Universal Child Overrides for All Colored Buttons */
button.bg-rose-600 *,
button[class*="bg-rose"] *,
button[class*="bg-blue"] *,
button[class*="bg-pink"] *,
button[class*="bg-purple"] *,
button[class*="bg-emerald"] *,
button[class*="bg-amber"] *,
.edit-feed-btn *,
.delete-feed-btn *,
.toggle-feed-btn * {
  color: #ffffff !important;
}

button.bg-rose-600 svg,
button[class*="bg-rose"] svg,
button[class*="bg-blue"] svg,
button[class*="bg-pink"] svg,
button[class*="bg-purple"] svg,
button[class*="bg-emerald"] svg,
button[class*="bg-amber"] svg,
.edit-feed-btn svg,
.delete-feed-btn svg,
.toggle-feed-btn svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* --- RULE 2: WHITE BUTTONS IN DAY THEME (FONT CAN BE BLACK) --- */

/* Day Theme Category Tabs (When Inactive: Crisp White Button with Black Text) */
html:not(.dark) .category-tab:not(.bg-rose-600),
html.light .category-tab:not(.bg-rose-600) {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  font-weight: 700 !important;
}
html:not(.dark) .category-tab:not(.bg-rose-600):hover,
html.light .category-tab:not(.bg-rose-600):hover {
  background-color: #f1f5f9 !important;
  color: #000000 !important;
  border-color: #94a3b8 !important;
}

/* Day Theme Theme Switcher Button */
html:not(.dark) #theme-toggle-btn,
html.light #theme-toggle-btn {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  font-weight: 700 !important;
}
html:not(.dark) #theme-toggle-btn:hover,
html.light #theme-toggle-btn:hover {
  background-color: #f1f5f9 !important;
  color: #000000 !important;
}

/* Day Theme Inactive Language Switcher */
html:not(.dark) #lang-switch-en:not(.bg-rose-600),
html:not(.dark) #lang-switch-fr:not(.bg-rose-600),
html.light #lang-switch-en:not(.bg-rose-600),
html.light #lang-switch-fr:not(.bg-rose-600) {
  background-color: #ffffff !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* Day Theme Bookmarks Filter Button */
html:not(.dark) #bookmarks-toggle-btn,
html.light #bookmarks-toggle-btn {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  font-weight: 700 !important;
}
html:not(.dark) #bookmarks-toggle-btn svg,
html.light #bookmarks-toggle-btn svg {
  stroke: #0f172a !important;
}

/* Day Theme Sources Select Dropdown */
html:not(.dark) #source-select,
html.light #source-select {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

/* Day Theme Card Action Buttons (Social Dispatch & Read Story) */
html:not(.dark) article button[onclick*="'social'"],
html.light article button[onclick*="'social'"] {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  font-weight: 700 !important;
}
html:not(.dark) article button[onclick*="'social'"]:hover,
html.light article button[onclick*="'social'"]:hover {
  background-color: #f1f5f9 !important;
  color: #000000 !important;
  border-color: #94a3b8 !important;
}

html:not(.dark) article button[onclick*="'read'"],
html.light article button[onclick*="'read'"] {
  color: #e11d48 !important;
  font-weight: 800 !important;
}
html:not(.dark) article button[onclick*="'read'"]:hover,
html.light article button[onclick*="'read'"]:hover {
  color: #be123c !important;
}

/* Day Theme Card Thumbnail Bookmark Button */
html:not(.dark) .bookmark-toggle,
html.light .bookmark-toggle {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
}
html:not(.dark) .bookmark-toggle svg:not(.fill-rose-500),
html.light .bookmark-toggle svg:not(.fill-rose-500) {
  stroke: #0f172a !important;
}

/* Day Theme Footer Admin Login Button */
html:not(.dark) #open-admin-login-btn,
html.light #open-admin-login-btn {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
  font-weight: 700 !important;
}
html:not(.dark) #open-admin-login-btn *,
html.light #open-admin-login-btn * {
  color: #0f172a !important;
}
html:not(.dark) #open-admin-login-btn svg,
html.light #open-admin-login-btn svg {
  stroke: #e11d48 !important;
}

/* ==========================================================================
   ADMIN HUB LAYOUT & TAB NAVIGATION
   ========================================================================== */
#hub-modal-header {
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 30 !important;
}

#hub-modal-tabs,
.hub-tab-nav {
  display: flex !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 20 !important;
  overflow-x: auto !important;
}

.hub-tab-btn {
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
}

/* Hub Tab Panels (Guaranteed Identical Width, Alignment and Position Across All Tabs) */
.hub-tab-panel {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
  display: block;
}
.hub-tab-panel.hidden {
  display: none !important;
}

/* Active Tab in Both Themes: Rose Red with Pure White Font */
.hub-tab-btn.active-tab,
.hub-tab-btn.bg-rose-600 {
  background-color: #e11d48 !important;
  color: #ffffff !important;
  border-color: #be123c !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.4) !important;
}
.hub-tab-btn.active-tab *,
.hub-tab-btn.bg-rose-600 * {
  color: #ffffff !important;
}

/* Inactive Tabs in Day Theme (White Button with Dark Black Text) */
html:not(.dark) .hub-tab-btn:not(.active-tab):not(.bg-rose-600),
html.light .hub-tab-btn:not(.active-tab):not(.bg-rose-600),
html:not(.dark) .legal-tab-btn:not(.active-tab):not(.bg-rose-600),
html.light .legal-tab-btn:not(.active-tab):not(.bg-rose-600) {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 700 !important;
}
html:not(.dark) .hub-tab-btn:not(.active-tab):not(.bg-rose-600):hover,
html.light .hub-tab-btn:not(.active-tab):not(.bg-rose-600):hover,
html:not(.dark) .legal-tab-btn:not(.active-tab):not(.bg-rose-600):hover,
html.light .legal-tab-btn:not(.active-tab):not(.bg-rose-600):hover {
  background-color: #f1f5f9 !important;
  color: #000000 !important;
}

/* Inactive Tabs in Dark Theme */
html.dark .hub-tab-btn:not(.active-tab):not(.bg-rose-600),
html:not(.light) .hub-tab-btn:not(.active-tab):not(.bg-rose-600) {
  background-color: rgba(30, 41, 59, 0.7) !important;
  color: #cbd5e1 !important;
  border: 1px solid #334155 !important;
}
html.dark .hub-tab-btn:not(.active-tab):not(.bg-rose-600):hover,
html:not(.light) .hub-tab-btn:not(.active-tab):not(.bg-rose-600):hover {
  background-color: #334155 !important;
  color: #ffffff !important;
}

/* Day Theme Modal Close Buttons */
html:not(.dark) #close-admin-login-btn,
html:not(.dark) #close-edit-feed-btn,
html:not(.dark) #close-article-modal-btn,
html:not(.dark) #close-legal-modal-btn,
html:not(.dark) #close-hub-btn,
html.light #close-admin-login-btn,
html.light #close-edit-feed-btn,
html.light #close-article-modal-btn,
html.light #close-legal-modal-btn,
html.light #close-hub-btn {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
html:not(.dark) #close-admin-login-btn svg,
html:not(.dark) #close-edit-feed-btn svg,
html:not(.dark) #close-article-modal-btn svg,
html:not(.dark) #close-legal-modal-btn svg,
html:not(.dark) #close-hub-btn svg,
html.light #close-admin-login-btn svg,
html.light #close-edit-feed-btn svg,
html.light #close-article-modal-btn svg,
html.light #close-legal-modal-btn svg,
html.light #close-hub-btn svg {
  stroke: #0f172a !important;
}

/* Day Theme Cancel / Essential Buttons (White Buttons with Black Text) */
html:not(.dark) #edit-feed-cancel-btn,
html:not(.dark) #decline-cookies-btn,
html:not(.dark) #footer-logout-btn,
html:not(.dark) #hub-logout-btn,
html.light #edit-feed-cancel-btn,
html.light #decline-cookies-btn,
html.light #footer-logout-btn,
html.light #hub-logout-btn {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
html:not(.dark) #edit-feed-cancel-btn:hover,
html:not(.dark) #decline-cookies-btn:hover,
html:not(.dark) #footer-logout-btn:hover,
html:not(.dark) #hub-logout-btn:hover,
html.light #edit-feed-cancel-btn:hover,
html.light #decline-cookies-btn:hover,
html.light #footer-logout-btn:hover,
html.light #hub-logout-btn:hover {
  background-color: #f1f5f9 !important;
  color: #000000 !important;
}

/* Day Theme Inactive Format Switchers in Article Modal */
html:not(.dark) #card-format-square-btn:not(.bg-rose-600),
html:not(.dark) #card-format-story-btn:not(.bg-rose-600),
html.light #card-format-square-btn:not(.bg-rose-600),
html.light #card-format-story-btn:not(.bg-rose-600) {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 700 !important;
}

/* Day Theme Feed Category Select */
html:not(.dark) .feed-category-select,
html.light .feed-category-select {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 700 !important;
}

/* Brand News Badge */
.brand-news-badge {
  background-color: #e11d48 !important;
  color: #ffffff !important;
}

/* Line clamp utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   FINAL OVERRIDE: Hero Section Action Buttons (100% Guaranteed White Font)
   ========================================================================== */
#hero-section button,
#hero-section button *,
#hero-section .hero-action-btn,
#hero-section .hero-action-btn *,
#hero-section .hero-read-btn,
#hero-section .hero-read-btn *,
#hero-section .hero-social-btn,
#hero-section .hero-social-btn *,
html:not(.dark) #hero-section button,
html:not(.dark) #hero-section button *,
html:not(.dark) #hero-section .hero-action-btn,
html:not(.dark) #hero-section .hero-action-btn *,
html.light #hero-section button,
html.light #hero-section button *,
html.light #hero-section .hero-action-btn,
html.light #hero-section .hero-action-btn * {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

#hero-section .hero-read-btn,
html:not(.dark) #hero-section .hero-read-btn,
html.light #hero-section .hero-read-btn {
  background-color: #e11d48 !important;
  color: #ffffff !important;
  border: 1px solid #be123c !important;
}

#hero-section .hero-social-btn,
html:not(.dark) #hero-section .hero-social-btn,
html.light #hero-section .hero-social-btn {
  background-color: #1e293b !important;
  color: #ffffff !important;
  border: 1px solid #334155 !important;
}