@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap');

body {
    font-family: 'Inter', system-ui, sans-serif;
    background-color: #f0f5f0;
}

.modal {
    animation: modalPop 0.2s ease-out;
}

@keyframes modalPop {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.font-display {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 600;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.hero-slide.active {
    opacity: 1;
}

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.equipment-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.equipment-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.nav-link {
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: #177a42;
}

.category-header {
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: #177a42;
}

/* ------------------------------------------------------------------
   Mobile hero fixes (added 10 Sep 2026)
   Three collisions that only appear on narrow screens.
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
    /* The carousel arrows are vertically centred, which on a phone puts
       them straight through the headline text. The dots and the 15-second
       auto-advance already cover navigation. */
    [onclick^="heroCarousel.prev"],
    [onclick^="heroCarousel.next"] {
        display: none;
    }

    /* The photo credit is pinned top-right, where it collides with the
       "ML-I FACILITY" badge. Move it clear, above the dots. */
    .hero-slide > div:last-child {
        top: auto;
        right: auto;
        bottom: 3.25rem;
        left: 1.25rem;
        font-size: 0.6875rem;
    }
}

/* The stats panel sets a row gap but no column gap, so its two columns
   touch on phones. Invisible on desktop, where four columns have room. */
.bg-white.rounded-3xl.grid.grid-cols-2 {
    column-gap: 1.5rem;
}

/* ==========================================================================
   Dark mode
   --------------------------------------------------------------------------
   The site is built from hardcoded Tailwind utility classes, so there are no
   colour tokens to flip. Instead we re-point the handful of utilities that
   actually carry colour. !important is required because Tailwind's play CDN
   injects its stylesheet AFTER this file.

   Deliberately untouched:
     - text-white and white/xx      : sit on coloured buttons and dark heroes
     - bg-teal-700 / 800            : brand buttons, already work on dark
     - the green gradient sections  : already dark
     - bg-zinc-900 (How to Use)     : already dark
   Every pair below was checked against WCAG AA.
   ========================================================================== */

html.dark {
    color-scheme: dark;
}

/* --- page + surfaces --- */
html.dark body                    { background-color: #0d1410 !important; }
html.dark .bg-white               { background-color: #141c17 !important; }
html.dark .bg-zinc-50             { background-color: #111814 !important; }
html.dark .bg-zinc-100            { background-color: #1b241e !important; }
html.dark .bg-zinc-200            { background-color: #232e26 !important; }
html.dark .hover\:bg-zinc-50:hover  { background-color: #1b241e !important; }
html.dark .hover\:bg-zinc-100:hover { background-color: #232e26 !important; }
html.dark .hover\:bg-zinc-200:hover { background-color: #2b3830 !important; }

/* --- text --- */
html.dark .text-zinc-900 { color: #e9f0ea !important; }
html.dark .text-zinc-800 { color: #dde6df !important; }
html.dark .text-zinc-700 { color: #cbd6cd !important; }
html.dark .text-zinc-600 { color: #aab8ad !important; }
html.dark .text-zinc-500 { color: #8f9d92 !important; }
html.dark .text-zinc-400 { color: #818f84 !important; }
html.dark .text-zinc-300 { color: #7c8a7f !important; }
html.dark .text-green-900 { color: #0d1410 !important; }   /* sits on a white button */

/* --- borders --- */
html.dark .border-zinc-100 { border-color: #233029 !important; }
html.dark .border-zinc-200 { border-color: #2c3a32 !important; }
html.dark .border-t,
html.dark .border-b { border-color: #233029 !important; }

/* --- brand accents: lift so they read on a dark ground --- */
html.dark .text-teal-700 { color: #3fbe76 !important; }
html.dark .text-teal-600 { color: #35b86c !important; }
html.dark .text-teal-800 { color: #3fbe76 !important; }
html.dark .hover\:text-teal-800:hover { color: #5ad18d !important; }
html.dark .hover\:text-teal-700:hover { color: #5ad18d !important; }
html.dark .nav-link:hover { color: #3fbe76 !important; }
html.dark .category-header { color: #3fbe76 !important; }

/* Pale chips become dark chips. These MUST change together with the text
   colours above, or a light chip would end up with light text on it. */
html.dark .bg-teal-100  { background-color: #16301f !important; }
html.dark .bg-teal-50   { background-color: #121f16 !important; }
html.dark .border-teal-100 { border-color: #1e3a26 !important; }
html.dark .bg-amber-100 { background-color: #3a2c12 !important; }
html.dark .text-amber-700 { color: #e0b055 !important; }

/* --- equipment cards lift on hover; soften the shadow on dark --- */
html.dark .equipment-card:hover {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4) !important;
}
html.dark .shadow-sm { box-shadow: 0 1px 2px rgb(0 0 0 / 0.4) !important; }

/* --- logos --- */
/* The UT / TechMed logo is black artwork on transparency: invisible on a dark
   navbar. Render it white instead. Same for the two partner marks in the
   footer. The BIC logo is green and reads fine either way. */
html.dark img[alt*="University of Twente"],
html.dark img[alt="NL-BioImaging"],
html.dark img[alt="Analis"] {
    filter: brightness(0) invert(1);
    opacity: 0.75;
}


/* --------------------------------------------------------------------------
   Exceptions: white pill buttons that sit ON a dark hero, the green panels or
   the dark "How to Use" band. The generic .bg-white rule above would turn them
   dark-on-dark and make them vanish. Identified by the dark text colour they
   carry - a white button on a LIGHT surface pairs bg-white with text-zinc-700
   instead, and correctly goes dark with everything else.
   -------------------------------------------------------------------------- */
html.dark .bg-white.text-green-900,
html.dark .bg-white.text-teal-800,
html.dark .bg-white.text-zinc-900 { background-color: #ffffff !important; }

html.dark .bg-white.text-green-900 { color: #0d1410 !important; }
html.dark .bg-white.text-teal-800  { color: #136034 !important; }
html.dark .bg-white.text-zinc-900  { color: #0d1410 !important; }

html.dark .bg-white.text-green-900:hover,
html.dark .bg-white.text-teal-800:hover,
html.dark .bg-white.text-zinc-900:hover { background-color: #eaf6ee !important; }

/* BIC logo: swap to the dark-background artwork instead of filtering the light one
   (the light PNG has a white glow baked in, which a brightness filter amplifies) */
.bic-logo--dark { display: none; }
html.dark .bic-logo--light { display: none; }
html.dark .bic-logo--dark { display: block; }
/* --------------------------------------------------------------------------
   Theme switch
   A two-position pill. The active side carries icon + label; the inactive side
   shows only its icon, so the control always states the mode you are in.
   Driven entirely by the html.dark class - no JS beyond the class toggle.
   -------------------------------------------------------------------------- */
.theme-switch {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: .2rem;
    border-radius: 999px;
    background: #eef1ee;
    border: 1px solid #e0e6e1;
    line-height: 1;
    transition: background-color .4s ease, border-color .4s ease;
}
.theme-switch:hover { border-color: #c9d4cb; }
.theme-switch:focus-visible { outline: 2px solid #177a42; outline-offset: 2px; }

.ts-opt {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .65rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    color: #7b8a80;
    transition: background-color .4s ease, color .4s ease, box-shadow .4s ease;
}
.ts-label { display: none; }

/* Light is the active side until the visitor chooses otherwise. */
.theme-switch .ts-light {
    background: #ffffff;
    color: #177a42;
    box-shadow: 0 1px 2px rgba(13, 20, 16, .12);
}
.theme-switch .ts-light .ts-label { display: inline; }

/* Dark active. */
html.dark .theme-switch { background: #141c17; border-color: #233029; }
html.dark .theme-switch:hover { border-color: #3a4a40; }
html.dark .theme-switch:focus-visible { outline-color: #3fbe76; }
html.dark .theme-switch .ts-light {
    background: transparent;
    color: #818f84;
    box-shadow: none;
}
html.dark .theme-switch .ts-light .ts-label { display: none; }
html.dark .theme-switch .ts-dark {
    background: #0d1410;
    color: #3fbe76;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
html.dark .theme-switch .ts-dark .ts-label { display: inline; }

@media (prefers-reduced-motion: reduce) {
    .theme-switch, .ts-opt { transition: none; }
}

/* Which switch shows where. Declared here rather than with Tailwind's
   hidden / sm: utilities, because Tailwind's CDN stylesheet is injected at
   runtime and the resulting cascade order is not reliable. */
.theme-switch--bar { display: none; }
.ts-row { display: flex; }

@media (min-width: 640px) {
    .theme-switch--bar { display: inline-flex; }
    .ts-row { display: none; }
}

/* --------------------------------------------------------------------------
   Colour cross-fade when switching modes.
   Added by toggleTheme() for the duration of the change and then removed, so
   a site-wide colour transition never slows hover states, card lifts, or the
   first paint of the page.
   -------------------------------------------------------------------------- */
.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
    transition: background-color .6s ease,
                color .6s ease,
                border-color .6s ease,
                box-shadow .6s ease,
                filter .6s ease !important;
}

@media (prefers-reduced-motion: reduce) {
    .theme-transition,
    .theme-transition *,
    .theme-transition *::before,
    .theme-transition *::after { transition: none !important; }
}