/* Michelman Brand Colors */
:root {
    --michelman-purple: #221c35;
    --michelman-purple-light: #3d3554;
    --michelman-orange: #ff671f;
    --michelman-blue: #005eb8;
}

/* Header styling */
#header {
    background: var(--michelman-purple) url('https://www.michelman.com/site/assets/files/116024/reset_hero-flexiblepackaging-1600w.jpg') center center / cover no-repeat;
    color: #fff;
    position: relative;
}

#header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(34, 28, 53, 0.85), rgba(34, 28, 53, 0.6));
    z-index: 0;
}

#header > * {
    position: relative;
    z-index: 1;
}

#branding h1, #branding h1 a:link, #branding h1 a:visited {
    color: #fff;
}

#site-name a {
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
}

#site-name a img {
    /* White logo now works directly against dark background */
}

#site-name a:hover {
    color: var(--michelman-purple-light);
}

/* Module headers */
.module h2, .module caption, .inline-group h2 {
    background: var(--michelman-purple);
}

/* Links */
a:link, a:visited {
    color: var(--michelman-purple);
}

a:focus, a:hover {
    color: var(--michelman-purple-light);
}

a:active {
    color: var(--michelman-orange);
}

/* Buttons */
.button, input[type=submit], input[type=button], .submit-row input, button {
    background: var(--michelman-purple);
    border-color: var(--michelman-purple);
}

.button:active, input[type=submit]:active, input[type=button]:active, .button:focus, input[type=submit]:focus, input[type=button]:focus, .button:hover, input[type=submit]:hover, input[type=button]:hover {
    background: var(--michelman-purple-light);
}

.button.default, input[type=submit].default, .submit-row input.default {
    background: var(--michelman-orange);
    border-color: var(--michelman-purple);
}

.button.default:hover, input[type=submit].default:hover {
    background: var(--michelman-purple);
}

/* Selected items */
.selector-chosen h2 {
    background: var(--michelman-purple);
}

/* Calendar and clock */
.calendarbox h2 {
    background: var(--michelman-purple) !important;
}

.calendar td.selected a {
    background: var(--michelman-purple);
}

.calendar td a:focus, .timelist a:focus {
    background: var(--michelman-purple-light);
}

.calendar td a:hover, .timelist a:hover {
    background: var(--michelman-purple);
}

/* Breadcrumbs */
div.breadcrumbs {
    background: var(--michelman-purple-light);
    color: #fff;
}

div.breadcrumbs a {
    color: #fff;
}

div.breadcrumbs a:focus, div.breadcrumbs a:hover {
    color: var(--michelman-orange);
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
    /* Use orange for links in dark mode for better visibility */
    a:link, a:visited {
        color: var(--michelman-orange);
    }

    a:focus, a:hover {
        color: #ff8a4d; /* Lighter orange on hover */
    }

    a:active {
        color: #ffb380; /* Even lighter orange when active */
    }

    /* Breadcrumbs in dark mode */
    div.breadcrumbs a {
        color: var(--michelman-orange);
    }

    div.breadcrumbs a:focus, div.breadcrumbs a:hover {
        color: #ff8a4d;
    }
}

/* Force dark mode styles when user selects dark mode */
[data-theme="dark"] {
    /* Use orange for links in dark mode for better visibility */
    a:link, a:visited {
        color: var(--michelman-orange);
    }

    a:focus, a:hover {
        color: #ff8a4d; /* Lighter orange on hover */
    }

    a:active {
        color: #ffb380; /* Even lighter orange when active */
    }

    /* Breadcrumbs in dark mode */
    div.breadcrumbs a {
        color: var(--michelman-orange);
    }

    div.breadcrumbs a:focus, div.breadcrumbs a:hover {
        color: #ff8a4d;
    }
}