/*
 * SITE CHROME CSS (flag: site-chrome).
 *
 * Loaded by x-app-layout AFTER styles.css, and ONLY when the default-OFF
 * 'site-chrome' flag is on — so with the flag off, styles.css is untouched
 * and the site's CSS is byte-for-byte unchanged.
 *
 * 1. --bs-border-color changes to #E1E2E3 for the default (light) scheme.
 *    The prefers-color-scheme: dark value must stay UNCHANGED; because this
 *    sheet loads after styles.css, the dark block below re-asserts the
 *    existing dark value (#303336, exactly as in styles.css) so the light
 *    override cannot leak into dark mode.
 * 2. The .grid-cell-footnote and .lfre-profile-btn rules are the client's
 *    CSS, verbatim.
 */

:root {
  --bs-border-color: #E1E2E3;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Unchanged dark value — same as styles.css. */
    --bs-border-color: #303336;
  }
}

/* Designer's header background class (used on the sticky site header).
   Not a Bootstrap utility — Bootstrap only ships the VARIABLE --bs-body-bg —
   so we define it here. Because styles.css sets --bs-body-bg per
   prefers-color-scheme (white in light mode, #202326 in dark mode), the
   sticky header stays opaque and correct in BOTH colour schemes. */
.bg-body-bg {
   background: var(--bs-body-bg);
}

/* Mobile horizontal-scroll fix. The header's row uses gx-5 (−24px side
   margins) but sits in a .container with only 12px side padding, so the
   row's EMPTY gutter overhangs the viewport by 12px each side — making
   every page scroll horizontally on phones (a narrow blank gap appears to
   the right of the page). Clip the overhang: it is empty gutter space, so
   nothing visible is cut, and the offcanvas menu lives outside <header>
   so it is unaffected. (overflow-x: hidden is the fallback for browsers
   without `clip`.) */
header.sticky-top > .container {
    overflow-x: hidden;
    overflow-x: clip;
}

.grid-cell-footnote {
    font-size: 12px;
    color: var(--lfre-highlight-color);
    line-height: normal;
    display: block;
}

/* Platinum/Gold listing cards: highlighted border + a light primary tint
   (designer's listing-card spec). */
.grid-cell.grid-cell-tiered {
    border-color: var(--lfre-highlight-color);
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

/* Membership-tier labels (client feedback, Sep 2026 — Forum prep): the WORD
   and the CROWN icon are painted in a metallic gradient — gold for Gold,
   platinum for Platinum. The client's CSS, verbatim. Because the gradient is
   background-clipped to the text, it colours every glyph in the span —
   including the FontAwesome crown, which is a font glyph. */

/* gold text */
span[data-tier-badge="gold"] {
    color: transparent;
    background-image: linear-gradient(-15deg, rgb(173, 136, 97), rgb(201, 209, 152), rgb(173, 136, 97));
    background-clip: text;
    -webkit-background-clip: text;
    font-weight: 500;
}

/* platinum text */
span[data-tier-badge="platinum"] {
    color: transparent;
    background-image: linear-gradient(-15deg,rgb(98, 130, 130), rgb(160, 189, 186), rgb(98, 130, 130), rgb(160, 189, 186), rgb(98, 130, 130));
    background-clip: text;
    -webkit-background-clip: text;
    font-weight: 500;
}

.lfre-profile-btn {
    width: 32px;
    height: 32px;
}

@media (min-width: 768px) {
    .lfre-profile-btn {
    width: 36px;
    height: 36px;
}
}

/* Disabled inputs (e.g. a signed-in enquirer's locked identity fields) keep
   the page's own background instead of the grey disabled tint. */
.form-control:disabled {
    background-color: var(--bs-body-bg);
}