/* ========================================================================== */
/* Copyright (c) 2025-2026 Greg Ames/Ames & Associates. All Rights Reserved.  */
/* Project:  Karaoke Dreamz / A&R Guru                                        */
/* Filename: static/css/templates/shared/content_ribbon.css                   */
/*                                                                            */
/* [demo-band-stamp] Diagonal provenance corner ribbon — DEMO / LEGACY.       */
/*                                                                            */
/* BOOTSTRAP EXCEPTION (narrow, approved 2026-07-25): Bootstrap 5 has no      */
/* diagonal corner-ribbon component, so the rotation + corner clipping must   */
/* be hand-written. Everything else — spacing, typography, the host element's */
/* positioning — uses Bootstrap utilities, and both ribbon colours are        */
/* Bootstrap theme variables. Do not grow this file beyond the ribbon.        */
/*                                                                            */
/* Markup lives in templates/includes/_content_ribbon.html (single source);   */
/* the variant class is driven by the record's content_class field.           */
/* ========================================================================== */

.content-ribbon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    overflow: hidden;
    /* Above card bodies and images, far below Bootstrap's dropdown (1000),
       sticky header (1020), modal (1055) and tooltip (1080) layers. */
    z-index: 3;
    /* Purely informational — must never swallow a click on the card beneath. */
    pointer-events: none;
}

.content-ribbon__band {
    position: absolute;
    display: block;
    /* Geometry: a bar wider than the box diagonal (100 * sqrt(2) = 141.4),
       centred horizontally ((100 - 142) / 2 = -21px) then rotated -45deg
       about its own centre so it crosses the top-left corner cleanly. */
    width: 142px;
    top: 26px;
    left: -21px;
    transform: rotate(-45deg);
    text-align: center;
    padding: 0.2rem 0;

    font-family: var(--bs-body-font-family, inherit);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.25;
    text-transform: uppercase;
    text-decoration: none;

    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.35);
    /* Keeps the band's edge visible against a light card AND a dark one. */
    border-top: 1px solid rgba(0, 0, 0, 0.18);
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);

    /* Both variants use a fixed dark ink. --bs-warning and --bs-info hold the
       same value in light and dark mode, so one dark ink clears AA on both;
       the *-text-emphasis tokens would flip to light-on-amber in dark mode
       and fail. */
    color: #1a1a1a;
}

/* DEMO — amber. Reads as "caution, this is not real". */
.content-ribbon--demo .content-ribbon__band {
    background: var(--bs-warning, #ffc107);
}

/* LEGACY — cyan. Deliberately a different hue AND a different word from DEMO
   so the two are never confused at a glance: DEMO means invented, LEGACY
   means a real historical act that is not a platform user. */
.content-ribbon--legacy .content-ribbon__band {
    background: var(--bs-info, #0dcaf0);
    letter-spacing: 0.08em;
}

/* Standalone host. Use when a page has no card or photo corner to hang the
   ribbon on: it supplies the positioned, clipped box itself AND reserves its
   own height in the flow, so the ribbon sits above the page heading rather
   than on top of it. */
.content-ribbon-host {
    position: relative;
    overflow: hidden;
    height: 100px;
}

/* Mobile (≤575.98px — Bootstrap's xs/sm breakpoint): shrink so the ribbon
   never eats the corner of a full-width stacked card at 390px. */
@media (max-width: 575.98px) {
    .content-ribbon {
        width: 76px;
        height: 76px;
    }

    .content-ribbon__band {
        width: 108px;
        top: 19px;
        left: -16px;
        font-size: 0.6rem;
        letter-spacing: 0.1em;
    }

    .content-ribbon--legacy .content-ribbon__band {
        font-size: 0.52rem;
        letter-spacing: 0.04em;
    }

    .content-ribbon-host {
        height: 76px;
    }
}

/* Windows/Edge forced-colours mode: keep the ribbon legible without colour. */
@media (forced-colors: active) {
    .content-ribbon__band {
        border: 1px solid CanvasText;
        forced-color-adjust: none;
        background: Canvas;
        color: CanvasText;
    }
}

/* ========================================================================== */
/* End of File - static/css/templates/shared/content_ribbon.css               */
/* Copyright (c) 2025-2026 Greg Ames/Ames & Associates. All Rights Reserved.  */
/* ========================================================================== */