/*
 * Wrapped in Tailwind's own "base" cascade layer (not left unlayered) so
 * utility classes like font-mono still win: an unlayered rule always beats
 * a layered one regardless of selector specificity, so a bare `* { ... }`
 * here was silently overriding every font-mono/font-sans utility site-wide.
 */
@layer base {
    * {
        font-family: 'Inter', sans-serif;
    }
}

/*
 * Smooth cross-fade between page navigations (this is a server-rendered
 * multi-page app, no client-side router). Purely progressive enhancement:
 * unsupported browsers just do a normal navigation, nothing breaks.
 */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

    .tab-content {
        display: none;
    }

    .tab-content.active {
        display: block;
    }

    .tab-item.active {
        border-color: #1d4ed8; /* Custom color for active tab */
        color: #1d4ed8; /* Custom color for active tab text */
    }

    /* Add maximum height and overflow for scrolling */
    .max-h-[calc(100vh-144px)] {
        max-height: calc(100vh - 144px); /* Adjust the height as necessary */
    }

    .modal {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        max-height: 100vh; /* Ensure the modal takes up the full viewport height */
        margin-top: 72px; /* Height of the fixed header */
    }

    .modal-content {
        max-height: 80vh; /* Set the modal content height to be less than the viewport height */
    }

    .modal-active {
        display: flex !important;
    }

    .modal:fullscreen {
        width: 100%;
        height: 100%;
    }

    .modal:fullscreen .bg-white {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
    }

    .modal:fullscreen .p-4 {
        height: calc(100% - 3.5rem); /* Adjust for header/footer padding */
        overflow-y: auto;
    }


/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.video-container-yt {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.video-container-yt iframe,
.video-container-yt object,
.video-container-yt embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

table tr td .is_active {
    width: 10px !important;
}

.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Soft elevated shadow for the floating candidate photos. */
.shadow-float {
  box-shadow: 0 20px 40px -12px rgba(220, 38, 38, 0.18), 0 8px 16px -8px rgba(0, 0, 0, 0.1);
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes float-fast {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.float-slow {
  animation: float-slow 6s ease-in-out infinite;
}

.float-fast {
  animation: float-fast 4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .float-slow, .float-fast {
    animation: none;
  }
}