/* Ensure full height and reset spacing */
html, body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}

/* Light Theme */
html[data-theme="light"] {
  background-color: #f1f5f9;
  color: #1f2937;
}

html[data-theme="light"] body {
  background-color: #f1f5f9;
  color: #1f2937;
  background-image:
    linear-gradient(to right, #e5e7eb 1px, transparent 1px),
    linear-gradient(to bottom, #e5e7eb 1px, transparent 1px);
  background-size: 32px 32px;
}

html[data-theme="light"] a {
  color: #1d4ed8;
}

html[data-theme="light"] header,
html[data-theme="light"] footer {
  background-color: #ffffff;
  color: #1f2937;
}

html[data-theme="light"] .bg-gray-50 {
  background-color: #f8fafc !important;
}

html[data-theme="light"] .card {
  background-color: #ffffff;
  color: #1f2937;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] #contact {
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  border: 1px solid #e5e7eb;
  padding: 2rem 1rem;
}

/* Add small space between contact section and footer */
#contact {
  margin-bottom: 2rem; /* Small gap (16px) */
}

/* Dark Theme */
html[data-theme="dark"] {
  background-color: #1e293b;
  color: #f8fafc;
}

html[data-theme="dark"] body {
  background-color: #1e293b;
  color: #f8fafc;
  background-image:
    linear-gradient(to right, #334155 1px, transparent 1px),
    linear-gradient(to bottom, #334155 1px, transparent 1px);
  background-size: 32px 32px;
}

html[data-theme="dark"] a {
  color: #90cdf4;
}

html[data-theme="dark"] header,
html[data-theme="dark"] footer {
  background-color: #334155;
  color: #f8fafc;
}

/* Ensure header text is always visible in both themes */
html[data-theme="light"] header h1,
html[data-theme="light"] header a,
html[data-theme="light"] header button {
  color: #111827 !important; /* text-gray-900 */
}

html[data-theme="dark"] header h1,
html[data-theme="dark"] header a,
html[data-theme="dark"] header button {
  color: #ffffff !important; /* text-white */
}

/* Force header navigation links to be visible */
html[data-theme="light"] header nav a {
  color: #111827 !important;
}

html[data-theme="dark"] header nav a {
  color: #ffffff !important;
}

/* Ensure mobile menu button is visible */
html[data-theme="light"] #mobile-menu-btn {
  color: #374151 !important;
}

html[data-theme="dark"] #mobile-menu-btn {
  color: #e5e7eb !important;
}

html[data-theme="dark"] .bg-white {
  background-color: #2d3748 !important;
}

html[data-theme="dark"] .bg-gray-200 {
  background-color: #4a5568 !important;
}

html[data-theme="dark"] .card {
  background-color: #2d3748;
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] #contact {
  background-color: #334155;
  border: 1px solid #475569;
  color: #f8fafc;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  border-radius: 1rem;
  padding: 2rem 1rem;
}

/* Ensure all text in the contact section is bright in dark mode */
html[data-theme="dark"] #contact,
html[data-theme="dark"] #contact * {
  color: #f8fafc !important; /* Bright, readable text */
}

.about-card {
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  border: 1px solid #e5e7eb;
  padding: 2rem 1rem;
}
html[data-theme="dark"] .about-card {
  background-color: #334155;
  border: 1px solid #475569;
  color: #f8fafc;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

/* Card hover effect */
.hover\\:shadow:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Uniform gallery image sizing */
.gallery-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  aspect-ratio: 1/1;
}

/* Gallery item styling for consistent height and theme matching */
.gallery-item {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.gallery-item .image-caption {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

/* Light theme caption styling */
html[data-theme="light"] .image-caption {
  background-color: #f8fafc;
  color: #1f2937;
  border: 1px solid #e5e7eb;
}

/* Dark theme caption styling */
html[data-theme="dark"] .image-caption {
  background-color: #2d3748;
  color: #f8fafc;
  border: 1px solid #475569;
}