/*
 * Custom styles that complement (and selectively override) tailwind.css.
 *
 * Loaded after tailwind.css so its preflight resets can be undone for
 * specific components without touching the generated Tailwind file.
 */

/* ---------------------------------------------------------------------------
 * References list (blog_post_page.html)
 *
 * Tailwind v4 preflight strips list markers from <ol>/<ul>. The References
 * section needs visible numbered markers, so re-enable them here and style
 * the marker to match the brand orange used elsewhere on the page.
 * ------------------------------------------------------------------------ */
.references-list {
    list-style: decimal outside;
    padding-inline-start: 1.75rem;
}

.references-list > li {
    padding-inline-start: 0.25rem;
    line-height: 1.6;
}

.references-list > li + li {
    margin-top: 0.75rem;
}

.references-list > li::marker {
    color: #ff6900; /* matches Tailwind text-primary */
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Navbar scroll state text colors
 *
 * When navbar is scrolled (.nav-sticky class added by JavaScript), override
 * the template-conditional text colors to ensure proper visibility against
 * the solid white (light mode) or slate-900 (dark mode) background.
 *
 * Initial state (transparent, overlaid on hero): uses template conditional
 * for nav_light pages (white text) vs regular pages (dark text).
 *
 * Scrolled state: solid background, so text should be dark in light mode
 * and white in dark mode, regardless of nav_light setting.
 * ------------------------------------------------------------------------ */
#topnav.nav-sticky .logo span,
#topnav.nav-sticky #theme-toggle {
    color: rgb(15 23 42); /* text-slate-900 in light mode */
}

:where(.dark, .dark *) #topnav.nav-sticky .logo span,
:where(.dark, .dark *) #topnav.nav-sticky #theme-toggle {
    color: rgb(255 255 255); /* text-white in dark mode */
}

/* Keep the "Patient" word orange always */
#topnav.nav-sticky .logo .text-primary {
    color: #ff6900;
}

/* ---------------------------------------------------------------------------
 * Project Info repo URL wrapping
 *
 * Long repository URLs need to wrap properly within the Project Info box.
 * overflow-wrap: anywhere forces wrapping at any character when needed.
 * ------------------------------------------------------------------------ */
.repo-url {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ---------------------------------------------------------------------------
 * Project fallback image sizing
 *
 * When a project has no hero_image, the fallback image needs to match the
 * dimensions of processed hero images (600x600 square with object-fit cover).
 * ------------------------------------------------------------------------ */
.project-fallback-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}