/*
 * JournalMap branding for the Django admin, in both colour schemes.
 *
 * Loaded after the admin's own base.css and dark_mode.css (base_site.html's
 * extrastyle block), and mirrors their selectors so it wins in each case:
 * the OS preference via the media query, and the header's theme toggle via
 * html[data-theme]. Colours are chosen for WCAG AA against the text the
 * admin draws on them (white on --primary, --button-bg, --breadcrumbs-bg).
 */

:root,
html[data-theme="light"] {
    --primary: #3d7a2a;            /* JournalMap green, darkened for white text (5.2:1) */
    --secondary: #212121;          /* header */
    --accent: #8fd16f;
    --header-link-color: #ffffff;
    --breadcrumbs-bg: #47639f;     /* JournalMap blue (5.9:1 with white) */
    --link-fg: #2f5f98;
    --link-hover-color: #1d3f6b;
    --link-selected-fg: #1d3f6b;
    --button-bg: #3d7a2a;
    --button-hover-bg: #2d5c1f;
    --default-button-bg: #47639f;
    --default-button-hover-bg: #34497a;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary: #3d7a2a;
        --secondary: #161616;
        --accent: #8fd16f;
        --header-link-color: #ffffff;
        --breadcrumbs-bg: #2f4470;
        --link-fg: #8fb4e8;
        --link-hover-color: #b9d2f5;
        --link-selected-fg: #b9d2f5;
        --button-bg: #3d7a2a;
        --button-hover-bg: #2d5c1f;
        --default-button-bg: #2f4470;
        --default-button-hover-bg: #3c5790;
    }
}

html[data-theme="dark"] {
    --primary: #3d7a2a;
    --secondary: #161616;
    --accent: #8fd16f;
    --header-link-color: #ffffff;
    --breadcrumbs-bg: #2f4470;
    --link-fg: #8fb4e8;
    --link-hover-color: #b9d2f5;
    --link-selected-fg: #b9d2f5;
    --button-bg: #3d7a2a;
    --button-hover-bg: #2d5c1f;
    --default-button-bg: #2f4470;
    --default-button-hover-bg: #3c5790;
}

#branding img { max-height: 56px; width: auto; display: block; }
#branding { display: flex; align-items: center; gap: 10px; }
/* The release (VERSION), beside the logo. */
.jm-version { font-size: 0.75rem; opacity: 0.8; color: var(--header-color, #fff); white-space: nowrap; }

@media (max-width: 767px) {
    #branding img { max-height: 40px; }
}