/* Radzen Panel Menu - Complete styling for black background and white text */
.rz-panel-menu {
    background-color: #000 !important;
}

.rz-panel-menu-item,
.rz-panel-menu-item-wrapper,
.rz-navigation-item,
.rz-navigation-item-wrapper {
    background-color: #000 !important;
}

/* All text in menu items - white (NOT yellow by default) */
.rz-panel-menu-item,
.rz-panel-menu-item-text,
.rz-navigation-item,
.rz-navigation-item-text,
.rz-panel-menu .rz-navigation-item-link,
.rz-panel-menu-item-wrapper .rz-panel-menu-item-text {
    color: #fff !important;
}

/* Hover states - keep background black, change ONLY hovered item text to yellow */
.rz-panel-menu-item:hover,
.rz-navigation-item:hover,
.rz-panel-menu-item-wrapper:hover {
    background-color: #000 !important;
    color: var(--nss-accent) !important;
}

/* Only direct text of hovered item turns yellow, not children */
.rz-panel-menu-item:hover > .rz-panel-menu-item-text,
.rz-panel-menu-item-wrapper:hover > .rz-panel-menu-item-text,
.rz-navigation-item:hover > .rz-navigation-item-text {
    color: var(--nss-accent) !important;
}

/* Prevent child items from inheriting yellow color */
.rz-panel-menu-item:hover .rz-panel-menu-item-children .rz-panel-menu-item,
.rz-panel-menu-item:hover .rz-panel-menu-item-children .rz-panel-menu-item-text {
    color: #fff !important;
}

/* Icons in menu - white, yellow on hover */
.rz-panel-menu-item .rz-panel-menu-item-icon,
.rz-navigation-item .material-icons,
.rz-panel-menu-item .material-icons {
    color: #fff !important;
}

.rz-panel-menu-item:hover > .rz-panel-menu-item-icon,
.rz-navigation-item:hover > .material-icons,
.rz-panel-menu-item:hover > .material-icons {
    color: var(--nss-accent) !important;
}

/* Sub-panel (expanded) items - keep white by default */
.rz-panel-menu-item-children,
.rz-panel-menu-item-children-wrapper {
    background-color: #000 !important;
}

.rz-panel-menu-item-children .rz-panel-menu-item,
.rz-panel-menu-item-children .rz-panel-menu-item-text {
    color: #fff !important;
    background-color: #000 !important;
}

/* Active/selected state */
.rz-panel-menu-item.rz-state-active,
.rz-navigation-item.rz-state-active {
    background-color: #2a2a2a !important;
    color: #fff !important;
}

/* ALL links inside panel menu - override all other link styles */
.rz-panel-menu a,
.rz-panel-menu a:link,
.rz-panel-menu a:visited,
.rz-panel-menu a:active,
.rz-panel-menu a:hover {
    color: #fff !important;
    text-decoration: none !important;
}

/* Links turn yellow when parent menu item is hovered */
.rz-panel-menu-item:hover > a,
.rz-panel-menu-item:hover > div > a,
.rz-panel-menu-item:hover a {
    color: var(--nss-accent) !important;
    text-decoration: none !important;
}

/* HR separator */
.rz-panel-menu hr {
    border-color: #000 !important;
}

/* Radzen Panel - Always black background */
.rz-panel,
.rz-panel-content,
.rz-panel-titlebar {
    background-color: #000 !important;
}

body {
    background-color: #000 !important;
    color: #fff !important;
    /* Site content font. Declared here (synchronous stylesheet) so prose is in
       the right typeface from the first prerendered frame, rather than waiting
       for the async material-dark-base.css rule
       `:root:has(.rz-layout) body { font-family: var(--rz-text-font-family) }`.
       Both resolve to Special Elite; the variable is set in App.razor. */
    font-family: "Special Elite", sans-serif;
}

.rz-body {
    background-color: #000 !important;
}

.rz-body-content {
    background-color: #000 !important;
}

.rz-sidebar {
    background-color: #000 !important;
}

.rz-navigation {
    background-color: #000 !important;
}

.rz-panel-menu {
    background-color: #000 !important;
}

/* Force white text for all paragraphs, lists, and list items */
p, ul, ol, li {
    color: #fff !important;
}

/* Force white text inside Radzen body */
.rz-body p,
.rz-body ul,
.rz-body ol,
.rz-body li {
    color: #fff !important;
}

/* Header wordmark colour. Declared here rather than in responsive.css so the
   mark is correctly coloured on the first paint: both stylesheets load
   synchronously, but app.css is first and this never changes per breakpoint. */
:root {
    --nss-mark-face: #fff;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Special Elite", sans-serif;
}

/* ========================================
   INLINE "NSS" WORDMARK
   Pioneer BT letterforms wherever NSS appears
   inside running text or a heading.
   ======================================== */

/* Pioneer BT cannot be a webfont — the file sets fsType 0x000E (Restricted
   License embedding) and lacks the cmap/name records a browser needs. See
   NSSWorld.Client/Components/NssWordmark.razor. So every inline "NSS" is the
   same converted outlines, drawn here as a MASK over the element's own colour.

   A mask rather than a background-image, which is the whole trick: the mark
   picks up currentColor, so one artwork file serves white headings, white
   footer text and the Bio's red lead-in without a per-colour copy of the SVG.
   A mask uses the source's alpha, so the fill inside the file is irrelevant.

   The literal text "NSS" stays in the DOM and is pushed out of view with
   text-indent — not `color: transparent`, because colour is what paints the
   mask now. Find-in-page, copy-paste and screen readers all keep working.

   overflow: hidden is load-bearing, not tidiness. It makes the inline-block
   take its baseline from its bottom margin edge rather than from the text
   inside it; the artwork is cropped to the letter baseline, so the mark then
   sits exactly on the text baseline with no vertical-align correction. It also
   clips the indented text.

   Everything is gated behind @supports. Without mask support the declarations
   below would paint a solid currentColor rectangle — far worse than doing
   nothing — so unsupported browsers simply keep the plain Special Elite word. */
@supports ((mask-image: url("/images/nss-mark-inline.svg")) or (-webkit-mask-image: url("/images/nss-mark-inline.svg"))) {
    .nss-mark {
        --nss-mark-height: 0.72em;
        display: inline-block;
        overflow: hidden;
        text-indent: -100em;
        height: var(--nss-mark-height);
        /* 2.7724 is the artwork's own width:height ratio — keep the two in step. */
        width: calc(var(--nss-mark-height) * 2.7724);
        background-color: currentColor;
        -webkit-mask-image: url("/images/nss-mark-inline.svg");
        mask-image: url("/images/nss-mark-inline.svg");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: left center;
        mask-position: left center;
        -webkit-mask-size: contain;
        mask-size: contain;
        /* The artwork is cropped to its ink, which is what lets it sit flush at
           the start of a line — but that also discards the final S's right
           sidebearing, so following text would touch the glyph. 0.1172 is that
           sidebearing (170 of the artwork's 1450 units), added back so text
           after the mark is spaced as if it were real type. */
        margin-right: calc(var(--nss-mark-height) * 0.1172);
    }

    /* The panel menu is the one place the mark is a flex item rather than an
       inline one, so its own box - not a line box - drives the row height, and
       a cap-height box leaves the NSS row about 5px shorter than its siblings.
       Restoring the height the text label would have had (its inherited line
       box, 24px here) puts the rows back in step. The artwork itself does not
       grow: mask-size: contain fits it to the width, and mask-position centres
       it vertically in the taller box. */
    .rz-panel-menu .nss-mark {
        height: 1.72em; /* fallback for browsers without the lh unit */
        height: 1lh;
        /* As a flex item the mark would otherwise shrink below its own width
           when the drawer is narrow, and mask-size: contain would letterbox
           the artwork rather than crop it - so it would silently get smaller
           instead of staying put. A wordmark should never be squashed. */
        flex-shrink: 0;
    }
}

/* ========================================
   BRAND MARKS
   Self-hosted service logos (Spotify, YouTube, ...)
   drawn monochrome in the site's own colour.
   ======================================== */

/* The discography cards render these same files as full-colour <img> (see
   StreamingLinks.razor). The nav drawer wants the opposite: every other row
   there is a white Material Symbol that turns accent-yellow on hover, and a
   block of full-colour logos would read as a foreign object dropped into an
   otherwise monochrome menu.

   So the artwork is painted as a MASK over currentColor, exactly as .nss-mark
   does above - one file serves both treatments, and the mark takes the row's
   colour for free rather than needing a second, white copy of each SVG. If the
   menu's colours are ever restyled the logos follow on their own. The fill
   declared inside each file is irrelevant here; a mask uses only the alpha.

   Which file to paint comes from --brand-mark-src, set per element at the call
   site, so this one class serves every service.

   Gated behind @supports for the same reason .nss-mark is: without mask support
   these declarations would paint a solid currentColor square. Unsupported
   browsers get no glyph at all, which is the right way to fail - the element
   holds no text, so it simply collapses and the label still reads. */
@supports ((mask-image: url("/images/brands/spotify.svg")) or (-webkit-mask-image: url("/images/brands/spotify.svg"))) {
    .brand-mark {
        display: inline-block;
        width: 1.5rem;
        height: 1.5rem;
        /* A flex item would otherwise shrink below its own size in a narrow
           drawer, and mask-size: contain would quietly scale the logo down
           with it rather than letting the row scroll. */
        flex-shrink: 0;
        background-color: currentColor;
        -webkit-mask-image: var(--brand-mark-src);
        mask-image: var(--brand-mark-src);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        /* The source files are square (viewBox 0 0 24 24) and already carry
           their own padding, so contain fits the whole glyph without cropping
           and the six marks end up optically the same weight as each other. */
        -webkit-mask-size: contain;
        mask-size: contain;
    }
}

/* External links (http/https) to blue - EXCLUDE menu links */
a[href^="http"]:not(.rz-panel-menu a):not(.rz-navigation a), 
a[href^="https"]:not(.rz-panel-menu a):not(.rz-navigation a) {
    color: #0d6efd !important;
    text-decoration: none !important;
}

a[href^="http"]:hover:not(.rz-panel-menu a):not(.rz-navigation a),
a[href^="https"]:hover:not(.rz-panel-menu a):not(.rz-navigation a) {
    color: #0a58ca !important;
    text-decoration: none !important;
}

/* Internal links keep red color - EXCLUDE menu links */
a:not([href^="http"]):not([href^="https"]):not(.rz-panel-menu a):not(.rz-navigation a), 
a:visited:not([href^="http"]):not([href^="https"]):not(.rz-panel-menu a):not(.rz-navigation a), 
a:active:not([href^="http"]):not([href^="https"]):not(.rz-panel-menu a):not(.rz-navigation a) {
    color: var(--nss-alert) !important;
    text-decoration: none !important;
}

a:not([href^="http"]):not([href^="https"]):hover:not(.rz-panel-menu a):not(.rz-navigation a) {
    color: var(--nss-alert) !important;
    text-decoration: underline !important;
}

.special-elite-regular {
    font-family: "Special Elite", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.saira-condensed-regular {
    font-family: "Saira Condensed", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.saira-condensed-bold {
    font-family: "Saira Condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
}

/* ── Data-grid font exception ──────────────────────────────────────────────
   The site font is Special Elite (see body / --rz-text-font-family), a
   proportional typewriter face. It is deliberately wide and irregular, which
   reads well for prose and headings but poorly for dense tabular data — long
   grids get noticeably wider and harder to scan column-to-column.

   So grids opt back out to Saira Condensed. The whole grid is scoped, not just
   the rows, so headers, cells, footers, filter inputs, and the pager all read
   as one unit.

   Radzen's DataGrid renders both class names; .rz-datatable is the legacy one
   still emitted alongside .rz-data-grid. Neither carries a font-family of its
   own in material-dark-base.css (only the unused .rz-pivot-data-grid does), so
   both grids simply inherit from body — and a rule here in the synchronously
   loaded app.css beats that inheritance from the first frame, with no need to
   wait for (or out-specify) the async Radzen stylesheet.

   Headings inside a grid keep Special Elite: the h1-h6 rule above declares the
   font directly on the element, and a direct declaration always beats an
   inherited one regardless of selector specificity. */
.rz-data-grid,
.rz-datatable {
    font-family: "Saira Condensed", sans-serif;
}

/* ── Data-grid header row ──────────────────────────────────────────────────
   Out of the box the header shares the rows' background and is barely bolder,
   so it read as just another row.  It now matches the site's tab strip:
   bold, uppercase, letter-spaced labels on a lighter bar over a red accent
   underline.  Saira Condensed has a real 700 cut, so the bold isn't synthetic.

   Set through Radzen's own header variables, declared on the grid element
   itself.  Radzen declares them on :root, and a value on the element beats an
   inherited one whatever order the async stylesheets arrive in, so there's no
   load-order race (the trap theme-overrides.css has with :root variables).
   The bar is opaque on purpose: the header is sticky and rows scroll under it
   (see responsive.css). */
.rz-data-grid {
    --rz-grid-header-background-color: #2a2a2a;
    --rz-grid-header-sorted-background-color: #3a3a3a;
    --rz-grid-header-color: #fff;
    --rz-grid-header-font-weight: 700;
    --rz-grid-header-text-transform: uppercase;
    --rz-grid-header-cell-border-bottom: 2px solid var(--nss-accent);
}

/* Kept small: uppercase is already wider, and column widths are fixed, so a
   title that no longer fits ends in an ellipsis.  0.04em clipped Concerts
   Attended's 104 px "Headliner" statistics column by a pixel. */
.rz-data-grid thead .rz-column-title-content {
    letter-spacing: 0.02em;
}

    /* Icon headers (CD Collection's Autographed / EP / Custom columns) are
       ligatures: uppercased text would break them into a raw word.  Radzen's
       .rzi rule resets this, but it loads async, so guard it here too. */
    .rz-data-grid thead .rzi {
        text-transform: none;
        letter-spacing: normal;
    }

/* ── Data-grid rows ────────────────────────────────────────────────────────
   Radzen's dark stripes (#1e1e1e / #121212) and row lines (#2e2e2e) were too
   close to tell rows apart, so it was easy to lose track of which row a
   Notes / Songs / Edit button belonged to.  Lighter alternate rows, a visible
   line under each row, and a red tint on the row under the pointer fix that.
   Striping needs AllowAlternatingRows on the grid (Radzen's default is on).
   Same variables-on-the-element approach as the header above. */
.rz-data-grid {
    --rz-grid-stripe-odd-background-color: #1e1e1e;
    --rz-grid-stripe-background-color: #2b2b2b;
    --rz-grid-cell-border: 1px solid #444;
}

    .rz-data-grid .rz-grid-table tbody > tr.rz-data-row:hover > td {
        background-color: #4a2222;
    }

/* Every header and cell sits in the vertical middle of its row, so text lines
   up with the buttons beside it, and short cells stay centred when another
   cell in the row wraps or expands (Concerts' Headliner / Opener lists). */
.rz-data-grid .rz-grid-table > thead > tr > th,
.rz-data-grid .rz-grid-table > tbody > tr > td {
    vertical-align: middle;
}

:root {
    /* ── NSS World red palette ───────────────────────────────────────────
       Standardised red accent system (modelled on Baphomet's Lounge).
       --nss-accent is the single token that replaced the old gold (#FFD700)
       used for titles, links, hover borders, and focus rings across the
       site. --nss-grad / --nss-glow give the layered "synthwave" treatment
       on headings and hover states. */
    --nss-red-bright: #ff1f1f;   /* primary accent — links, titles, hover */
    --nss-red-mid:    #cc0808;
    --nss-red-deep:   #8b0000;
    --nss-red-warm:   #ff5533;   /* warm accent — e.g. "autographed" badge */
    --nss-grad:       linear-gradient(135deg, #ff1f1f 0%, #cc0808 50%, #8b0000 100%);
    --nss-glow:       0 0 18px rgba(255, 31, 31, 0.55);
    --nss-accent:     var(--nss-red-bright);

    --nss-alert: #D60202;

    /* --rz-text-font-family is NOT set here; it lives only in App.razor's
       inline html:root rule (see the note in theme-overrides.css). */

    /* Primary color - controls progress bars, buttons, etc. */
    --rz-primary: #D60202;
    --rz-primary-light: #e94984;
    --rz-primary-lighter: rgba(214, 2, 2, 0.12);
    --rz-primary-dark: #b61651;
    --rz-primary-darker: #9a1345;
    
    /* Secondary color */
    --rz-secondary: #D60202;
    --rz-secondary-light: #e94984;
    --rz-secondary-lighter: rgba(227, 28, 101, 0.12);
    --rz-secondary-dark: #b61651;
    --rz-secondary-darker: #9a1345;
}

/* Override Info button style to use red theme */
.rz-button.rz-button-info,
.rz-button.rz-info {
    background-color: #D60202 !important;
    border-color: #D60202 !important;
}

.rz-button.rz-button-info:hover,
.rz-button.rz-info:hover {
    background-color: #b61651 !important;
    border-color: #b61651 !important;
}