/* ============================================================================
   SHARED CHROME — rules the compiled bundle does not carry (issue #101)
   ----------------------------------------------------------------------------
   Standalone rather than part of the SCSS pipeline, for the reason documented in
   hero-search.css and capabilities.css: compiling the pipeline needs Node, which not every
   dev machine has, and the committed customerportal.min.css is several modules stale.
   Loaded by both layouts after that bundle. These are rules shared across areas, so they
   do not belong in any one page's stylesheet.
   ============================================================================ */

/* ── The inner hero band ──────────────────────────────────────────────────────
   .cp-inner-hero-content is used by 15 views and was defined nowhere: the theme names
   this rule .cp-inner-hero-inner (Styles/modules/_industrial.scss), and no view uses that
   name. Without it the content is a static box, so .cp-inner-hero-grid — absolutely
   positioned over the whole band — paints its grid lines on top of the title and body
   text instead of behind them. Found while giving chat's hero the same treatment as the
   rest of the portal; it fixes the band everywhere it is used. */
.cp-inner-hero-content {
    position: relative;
    z-index: 1;
}

/* ── Hero navigation conventions (issue #150) ─────────────────────────────────
   Backwards navigation is always a real link to a concrete page — never a JS back,
   whose behaviour depends on how the reader arrived (the page-components guide opens
   in a new tab, where a JS back has no history and silently does nothing). It always
   sits in the hero's top-left corner, first in the content wrapper, ahead of the
   badge/eyebrow. A page with no reasonable parent shows no back link at all.
   Interaction buttons (Create/Update/Publish/...) right-align in the title row.

   Lives here, not in site.css, because it applies to both hero families —
   .cp-inner-hero on customer pages and .inner-page-hero on admin screens. */
.cp-hero-back {
    /* Block-level so the badge starts its own line, fit-content so the click
       target is only as wide as the label. */
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 7px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    text-decoration: none;
    margin-bottom: 14px;
}

.cp-hero-back:hover,
.cp-hero-back:focus {
    color: var(--accent, #3db8f5);
    text-decoration: none;
}

/* Centred heroes (the chat boards) centre their content column, so a back link in
   normal flow would float at that column's edge mid-band; pin it to the band's real
   corner instead. Both hero bands are position:relative. */
.cp-hero-back--corner {
    position: absolute;
    top: 18px;
    left: 24px;
    margin-bottom: 0;
    z-index: 2;
}

/* The title row is plain flex (no space-between); this pushes the action cluster to
   the right edge regardless of title length. */
.cp-hero-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── The shared module grid's optional card bits ──────────────────────────────
   Views/Shared/_HubModuleGrid.cshtml gained three optional per-card fields so that
   Visibility Chat's board index could use the same grid the Documentation and Visibility
   University hubs use: a Description line, a free-text Meta line in place of the article
   count, and a Badge. Only the description needs styling the compiled visu-module-* rules
   do not already provide — Meta reuses .visu-module-count and Badge reuses .conf-badge. */

.visu-module-desc {
    font-size: 0.82rem;
    line-height: 1.5;
    color: #475569;
    /* Two lines, so one wordy board cannot make its card twice the height of its
       neighbours and break the grid's rhythm. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The count is the card's baseline, so it sits last however the fields are ordered. */
.visu-module-card .visu-module-count {
    margin-top: auto;
    padding-top: 4px;
}

.visu-module-card .conf-badge {
    margin-top: 8px;
    font-size: 10px;
}

/* ── Header dropdown item legibility (issue #285) ────────────────────────────
   The bundle sets .cp-navbar .dropdown-item at 13px, weight 500. Barlow's i-dot sits
   one pixel above its stem, and at 13px on a 1x display the anti-aliasing merges the
   two into a bar the height of the ascenders — the same bar Barlow draws for a capital
   I — so "Visibility Users" read as "VIsIbIlIty Users". Compared side by side on the
   rendered page: at 13px the dot fuses at weight 500 and 600 alike; at 14px it
   separates at both. So the size is the fix, and 600 is the requester's weight.

   Same specificity as the bundle's rule; this file loads after the bundle in both
   layouts, which is what makes it win. AdminNavTests pins the order. */
.cp-navbar .dropdown-item {
    font-size: 14px;
    font-weight: 600;
}