/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

html {
  overflow-y: scroll; /* Always show scrollbar to prevent layout shifts */
  transition: background-color 0.3s ease;
}

body {
  font-family: "Geist", sans-serif;
  font-optical-sizing: auto;
  list-style: none;
  color: #111111;
  background-color: #ffffff;
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* Dark theme styles */
html.dark {
  background-color: #1a1a1a;
}

html.dark body {
  background-color: #1a1a1a;
  color: #e5e5e5;
}

/* Dark theme for text elements */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
  color: #f5f5f5;
}

html.dark p {
  color: #d1d1d1;
}

/* Fix strong/bold text readability in dark mode */
html.dark strong,
html.dark b {
  color: #000000;
  background-color: #fbbf24;
  padding: 2px 4px;
  border-radius: 3px;
}

/* Logo switching */
.light-logo {
  display: block;
}

.dark-logo {
  display: none;
}

html.dark .light-logo {
  display: none;
}

html.dark .dark-logo {
  display: block;
}

/* Dark theme for links */
html.dark a {
  color: #60a5fa;
}

html.dark a:hover {
  color: #93c5fd;
}

/* Dark theme for specific components */
html.dark .text-gray-500 {
  color: #9ca3af !important;
}

html.dark .text-gray-600 {
  color: #6b7280 !important;
}

html.dark .text-gray-700 {
  color: #4b5563 !important;
}

html.dark .text-gray-900 {
  color: #f9fafb !important;
}

html.dark .bg-white {
  background-color: #374151 !important;
}

html.dark .bg-gray-50 {
  background-color: #1f2937 !important;
}

/* Fix newsletter callout in dark mode */
html.dark .bg-gray-50.border-l-4.border-blue-300 {
  background-color: #111827 !important;
  border-color: #1e40af !important;
}

/* Fix newsletter signup gradient in dark mode */
html.dark .bg-gradient-to-br.from-blue-50.to-indigo-100 {
  background: linear-gradient(to bottom right, #1e3a8a, #1e1b4b) !important;
}

/* Apply subtle gradient to course cards in light mode */
.bg-white.rounded-xl.border.border-gray-200.shadow-lg {
  background: linear-gradient(to bottom right, #ffffff, #f8fafc) !important;
}

/* Apply same gradient style to course cards in dark mode */
html.dark .bg-white.rounded-xl.border.border-gray-200.shadow-lg {
  background: linear-gradient(to bottom right, #1e3a8a, #1e1b4b) !important;
  border-color: #1e40af !important;
}

html.dark .text-gray-700 {
  color: #d1d5db !important;
}

html.dark .bg-blue-50 {
  background-color: #1e3a8a !important;
}

html.dark .border-gray-200 {
  border-color: #4b5563 !important;
}

html.dark .border-blue-200 {
  border-color: #1e40af !important;
}

/* Dark theme for cards and containers */
html.dark .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15) !important;
}

html.dark .shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.15) !important;
}

/* Theme toggle button */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

html.dark .theme-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.theme-toggle:hover svg {
  transform: scale(1.1);
}

/* Theme toggle icons */
.sun-icon {
  display: block;
  color: #f59e0b;
}

.moon-icon {
  display: none;
  color: #6366f1;
}

html.dark .sun-icon {
  display: none;
  color: #fbbf24;
}

html.dark .moon-icon {
  display: block;
  color: #818cf8;
}
header.site-header {
  font-family: "Geist";
  font-weight: 500;
  font-size: 22px;
}

nav {
  font-family: "Geist";
  font-weight: 500;
  font-size: 18px;
}
nav a {
  margin: 0px 0px 0px 25px;
  font-weight: 300;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Style button_to forms to look like links */
form.inline {
  display: inline;
  margin: 0;
  padding: 0;
}

button.link-button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
  margin: 0 0 0 25px;
  font-weight: 300;
  text-decoration: none;
  display: inline;
}

button.link-button:hover {
  text-decoration: underline;
}