html {
  -webkit-text-size-adjust: none;
  touch-action: pan-y;
  height: 100%;
  /* Ensure HTML takes full height */
  width: 100%;
  /* Ensure HTML takes full width */
  margin: 0;
  /* Added: Remove default margin */
  padding: 0;
  /* Added: Remove default padding */
}
* {
  transition: background-color 500ms linear, color 500ms linear;
}
html.dark body {
  background-color: #111827;
  color: #f9fafb;
}
html.dark #sidebar {
  background-color: #1f2937;
}
html.dark #sidebar h3 {
  color: #ffffff;
}
html.dark footer,
html.dark .rounded-lg.shadow-lg.p-6 {
  background-color: #1f2937;
}
html.dark dialog {
  background-color: #1f2937;
}
html.dark dialog::-webkit-backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}
html.dark dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}
html.dark h1 a,
html.dark h2 {
  color: #f9fafb;
}
html.dark p {
  color: #d1d5db;
}
html.dark .nav-link {
  color: #d1d5db;
}
html.dark .nav-link:hover {
  background-color: #374151;
}
html.dark .nav-link.hover\:text-gray-900.dark\:hover\:text-white:hover,
html.dark .modal-close-btn:hover,
html.dark #theme-toggle:hover,
html.dark #menu-toggle:hover,
html.dark #clear-search:hover {
  color: #ffffff;
}
html.dark a[href^="mailto:"],
html.dark .mt-4.inline-block.hover\:underline {
  color: #60a5fa;
}
html.dark footer p,
html.dark footer a {
  color: #d1d5db;
}
html.dark input[type=text] {
  border-color: #4b5563;
  background-color: #374151;
  color: #f9fafb;
}
html.dark input[type=text]::-moz-placeholder {
  color: #9ca3af;
}
html.dark input[type=text]:-ms-input-placeholder {
  color: #9ca3af;
}
html.dark input[type=text]::placeholder {
  color: #9ca3af;
}
html.dark input[type=text] + svg,
html.dark #clear-search,
html.dark #theme-toggle,
html.dark #menu-toggle,
html.dark .modal-close-btn {
  color: #9ca3af;
}
html.dark .headroom {
  position: fixed;
  top: 0 !important;
  /* Added !important */
  left: 0;
  right: 0;
  width: 100%;
  transition: transform 0.3s ease-in-out, background-color 0.3s ease, box-shadow 0.3s ease;
  z-index: 30 !important;
  background-color: #1f2937;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}
html.dark nav {
  z-index: 30;
}
html.dark .pill {
  background-color: #4f46e5;
  color: #e0e7ff;
}
html.dark li.rounded-lg.shadow-lg.p-6:hover {
  border-color: #4b5563;
}

body {
  background-color: #f3f4f6;
  color: #1f2937;
  transition: background-color 0.3s ease, color 0.3s ease;
  height: 100%;
  /* Ensure body takes full height */
  width: 100%;
  /* Ensure body takes full width */
  margin: 0;
  /* Added: Remove default margin */
  padding: 0;
  /* Added: Remove default padding */
  /* Removed: padding-top: 64px; from body */
}

#sidebar,
footer,
.rounded-lg.shadow-lg.p-6 {
  background-color: #ffffff;
  transition: background-color 0.3s ease;
}

dialog {
  border: none;
  padding: 0;
  margin: auto;
  background-color: #ffffff;
  transition: background-color 0.3s ease;
}
dialog::-webkit-backdrop {
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-transition: background-color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease-in-out;
}

h1 a,
h2 {
  color: #1f2937;
  transition: color 0.3s ease;
}

p {
  color: #4b5563;
  transition: color 0.3s ease;
}

.nav-link {
  color: #4b5563;
  transition: color 0.3s ease, background-color 0.3s ease;
}
.nav-link:hover {
  background-color: #f3f4f6;
}

.nav-link.hover\:text-gray-900.dark\:hover\:text-white:hover,
.modal-close-btn:hover,
#theme-toggle:hover,
#menu-toggle:hover,
#clear-search:hover {
  color: #111827;
}

a[href^="mailto:"],
.mt-4.inline-block.hover\:underline {
  color: #2563eb;
  transition: color 0.3s ease;
}

footer p,
footer a {
  color: #4b5563;
  transition: color 0.3s ease;
}

input[type=text] {
  border-color: #d1d5db;
  background-color: #e5e7eb;
  color: #1f2937;
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
input[type=text]::-moz-placeholder {
  color: #6b7280;
  -moz-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
input[type=text]:-ms-input-placeholder {
  color: #6b7280;
  -ms-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
input[type=text]::placeholder {
  color: #6b7280;
  transition: color 0.3s ease;
}

input[type=text] + svg,
#clear-search,
#theme-toggle,
#menu-toggle,
.modal-close-btn {
  color: #6b7280;
  transition: color 0.3s ease;
}

.item-card-heading {
  display: flex;
  align-items: center;
}
.item-card-heading h2 {
  font-size: 1.25rem;
}

.item-card-heading svg {
  width: 32px;
  height: 32px;
  margin-right: 1rem;
  flex-shrink: 0;
  transition: color 0.3s ease;
}

/* Ensure the li is a flex container for consistent height */
li.rounded-lg.shadow-lg.p-6 {
  border: 1px solid transparent;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
li.rounded-lg.shadow-lg.p-6.card-striped-top {
  border-top-width: 0.5rem !important;
}
li.rounded-lg.shadow-lg.p-6:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-color: #d1d5db;
}
li.rounded-lg.shadow-lg.p-6 article {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
li.rounded-lg.shadow-lg.p-6 .card-content-clickable {
  flex-grow: 1;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
li.rounded-lg.shadow-lg.p-6 .card-content-clickable p {
  font-size: 1.125rem;
  font-weight: bold;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 0;
  margin-bottom: 1.5rem;
}
li.rounded-lg.shadow-lg.p-6 a.card-learn-more-link {
  margin-top: auto;
}

.headroom {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  transition: transform 0.3s ease-in-out, background-color 0.3s ease, box-shadow 0.3s ease;
  z-index: 30 !important;
  background-color: #ffffff;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.headroom--unpinned {
  transform: translateY(-100%);
}

.headroom--pinned {
  transform: translateY(0%);
}

nav {
  z-index: 30;
  transition: background-color 0.3s ease, filter 0.3s ease;
  /* Added filter transition */
}

#sidebar-overlay {
  z-index: 40;
}

/* Updated #page-content-wrapper for layout and blur */
#page-content-wrapper {
  width: 100%;
  min-height: 100vh;
  /* Ensure it covers the viewport height */
  display: flex;
  /* Make it a flex container for its children */
  flex-direction: column;
  /* Arrange children vertically */
  position: relative;
  /* Establish positioning context for z-index */
  z-index: 1;
  /* Place it below fixed overlays/sidebar */
  transition: filter 0.3s ease-in-out;
  padding-top: 64px;
  /* Added padding-top here instead of body */
}

#page-content-wrapper.blurred {
  filter: blur(5px) !important;
  transform: translateZ(0);
  /* Force hardware acceleration */
}

/* Sidebar specific styles */
#sidebar {
  transition: transform 0.3s ease-in-out;
  filter: none !important;
  /* Ensure no blur inside sidebar */
}

#sidebar.sidebar-open {
  /* New class for open state */
  transform: translateX(0) !important;
  /* Explicitly ensure no horizontal translation when open */
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  background-color: #e0e7ff;
  color: #4f46e5;
  transition: background-color 0.3s ease, color 0.3s ease;
  gap: 0.25rem;
}
.pill .pill-flag img {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}

.headroom--unpinned {
  transform: translateY(-100%) !important;
}

.headroom--pinned {
  transform: translateY(0%) !important;
}

.loader {
  border: 4px solid #f3f3f3;
  /* Light grey for light mode */
  border-top: 4px solid #3498db;
  /* Blue for light mode */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
}

/* Dark mode styles for the spinner */
html.dark .loader {
  border: 4px solid #4a5568;
  /* Dark grey for dark mode background */
  border-top: 4px solid #63b3ed;
  /* Lighter blue for dark mode active part */
}

@-webkit-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Adjust spacing for the heading lines */
.item-card-heading .organization {
  /* If you need to adjust spacing above "organization", do it here, e.g., margin-top: -0.25rem; */
}

.item-card-heading .branch {
  margin-top: -0.5rem;
  /* Adjust this value as needed. -0.25rem = -4px */
  /* No need for display: inline-block here, as it's no longer forced inline by BR */
}
.keywords {
    opacity: 0.01;
    font-size: 0.25px;
}