/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.site-logo {
    position: fixed;   /* stays in the same spot when scrolling */
    top: 10px;         /* distance from top of page */
    left: 10px;        /* distance from left edge */
    z-index: 1050;     /* above header (Bootstrap headers are ~1030) */
    transition: opacity 0.5s ease; /* smooth fade */
}

.site-logo img {
    height: 100px;      /* adjust size as needed */
    width: auto;
}

.site-logo.fade-out {
    opacity: 0;
    pointer-events: none; /* optional: avoids blocking clicks */
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
}

/* Default (production) */
header.env-production {
    background-color: var(--bs-primary);
}

/* Staging: orange/yellow */
header.env-staging {
    background-color: var(--bs-warning);
    color: #000; /* improve contrast on yellow */
}

/* Development: blue-gray */
header.env-development {
    background-color: var(--bs-info);
}

header .title {
    font-size: 1.25rem;
    font-weight: bold;
}

header nav a {
    margin-left: 1rem;
    text-decoration: none;
    color: #333;
}

@media (max-width: 600px) {
    header {
        flex-direction: column;
        align-items: flex-start;
    }

    header nav {
        margin-top: 0.5rem;
    }
}

/* Overlay the stamp on a card */
.stamp-overlay {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 9rem;              /* tweak size as needed */
    transform: rotate(-10deg);
    opacity: 0.9;
    mix-blend-mode: multiply; /* helps the red “sink into” the card */
    pointer-events: none;     /* don't block clicks on the card */
    z-index: 2;
}

.legend-card { position: relative; }
.legend-card .card-legend {
    position: absolute;
    top: 0; left: 1rem;              /* align with card-body padding */
    transform: translateY(-50%);     /* sit on the border line */
    background-color: var(--bs-card-bg);
    padding: 0 .5rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    line-height: 1;
}

/* Make inline SVGs inside a ratio box scale nicely */
.ratio svg { width: 100%; height: 100%; display: block; }