/* ============================================================
   Public shell layout — reset, nav, hero, sections, footer.
   Tokens only; no palette hex.
   ============================================================ */

/* === RESET & BASE === */
html.scb-html, html.scb-html body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    -webkit-text-size-adjust: 100%;
    touch-action: pan-y;
}
.scb-public {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.scb-public *, .scb-public *::before, .scb-public *::after { box-sizing: border-box; }

/* #710 — sticky footer. Short pages (an empty bracket is the extreme case)
   used to end wherever the content ended, leaving the footer floating in the
   middle of the viewport with dead background below it. The body is the flex
   column; .scb-page (layouts/public.php) takes the slack, so the footer is
   always the last thing on the page and always at or below the fold. */
.scb-public { display: flex; flex-direction: column; min-height: 100vh; }
.scb-public > .scb-page { flex: 1 0 auto; }
.scb-public > .scb-footer { flex-shrink: 0; margin-top: auto; }

/* === NOISE OVERLAY (desktop only — perf issue on mobile) === */
@media (min-width: 768px) {
    .scb-public::after {
        content: '';
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 9999;
        opacity: 0.035;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        background-size: 256px 256px;
    }
}

/* === TYPOGRAPHY === */
.scb-heading {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.0;
    color: var(--scb-chalk);
}
.scb-label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-muted);
}

/* === NAVBAR === */
/* Non-fixed: lives in normal document flow so content never sits behind
   the navbar. Previously `position: fixed` with z-index 1050 — caused
   bracket / qualification headers and live page content to be obscured
   by the nav on scroll, requiring scattered padding-top:80px hacks in
   each affected view. */
.scb-navbar {
    background: color-mix(in srgb, var(--color-bg) 95%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.75rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 15%, transparent);
    /* #306 — backdrop-filter creates a stacking context at z-index:auto, which
       traps the language .dropdown-menu (z 1000) inside the navbar; the hero
       (.scb-hero-content z-index:2) then paints over it. Elevate the navbar's
       context above page content so the dropdown shows. Non-fixed (stays in
       flow, scrolls away) — does NOT reintroduce the old fixed-overlap bug. */
    position: relative;
    z-index: 1030;
}
.scb-navbar .container { max-width: var(--container-max); }
.scb-nav-brand {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--scb-chalk) !important;
    text-decoration: none;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: color var(--transition);
}
.scb-nav-brand span { color: var(--color-brand); }
.scb-nav-logo {
    height: 28px;
    width: auto;
    display: block;
}
.scb-nav-link {
    color: var(--color-text) !important;
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.5rem 1rem !important;
    transition: color var(--transition);
    text-decoration: none;
    position: relative;
}
.scb-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1rem;
    right: 1rem;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transition: transform var(--transition-snap);
}
.scb-nav-link:hover { color: var(--color-accent-hot) !important; }
.scb-nav-link:hover::after { transform: scaleX(1); }
.scb-nav-cta {
    background: var(--color-accent);
    color: var(--color-on-accent) !important;
    padding: 0.45rem 1.2rem !important;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: none;
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
    transition: background var(--transition), transform var(--transition-snap);
    text-decoration: none;
    display: inline-block;
}
.scb-nav-cta:hover {
    background: var(--color-accent-hot);
    transform: scale(1.03);
}
.scb-nav-lang {
    font-size: 0.75rem;
}
.scb-lang-menu {
    background: var(--color-surface);
    border-color: var(--color-border);
    --bs-dropdown-bg: var(--color-surface);
    --bs-dropdown-border-color: var(--color-border);
}
.scb-lang-item {
    color: var(--color-text) !important;
}
.scb-lang-item.active {
    color: var(--color-on-accent) !important;
    background: var(--color-accent) !important;
}
.scb-lang-chip {
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    display: inline-block;
    text-decoration: none;
}
.scb-lang-chip.is-current {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.scb-flash-wrap {
    position: relative;
    z-index: 100;
    margin-top: 1rem;
}

/* === HERO === */
.scb-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.scb-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.scb-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-bg) 40%, transparent) 0%,
        color-mix(in srgb, var(--color-bg) 60%, transparent) 40%,
        color-mix(in srgb, var(--color-bg) 85%, transparent) 75%,
        var(--color-bg) 100%
    );
}
/* Diagonal speed lines overlay */
.scb-hero-lines {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0.06;
}
.scb-hero-lines::before, .scb-hero-lines::after {
    content: '';
    position: absolute;
    width: 150%;
    height: 2px;
    background: var(--color-accent);
    transform-origin: center center;
    left: -25%;
}
.scb-hero-lines::before { top: 30%; transform: rotate(-8deg); }
.scb-hero-lines::after { top: 65%; transform: rotate(-5deg); }

.scb-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 2rem;
    max-width: 900px;
}
.scb-hero-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 10vw, 7rem);
    line-height: 0.95;
    color: var(--scb-chalk);
    text-transform: uppercase;
    font-style: italic;
    margin-bottom: 0.5rem;
    animation: scb-slam-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.scb-hero-title .scb-accent { color: var(--color-brand); }
.scb-hero-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    font-weight: 300;
    color: var(--color-text);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    opacity: 0;
    animation: scb-fade-up 0.6s 0.3s ease both;
}
.scb-hero-desc {
    font-size: 1.1rem;
    color: var(--color-text);
    max-width: 600px;
    margin: 0 auto 2rem;
    text-shadow: 0 1px 3px color-mix(in srgb, var(--color-bg) 50%, transparent);
    opacity: 0;
    animation: scb-fade-up 0.6s 0.5s ease both;
}
.scb-hero-cta {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-on-accent);
    padding: 0.9rem 2.5rem;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-decoration: none;
    clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
    transition: background var(--transition), transform var(--transition-snap);
    opacity: 0;
    animation: scb-fade-up 0.6s 0.7s ease both;
}
.scb-hero-cta:hover {
    background: var(--color-accent-hot-fill);
    color: var(--color-on-accent);
    transform: scale(1.05);
}
.scb-scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: var(--color-muted);
    font-size: 1.5rem;
    animation: scb-bounce 2s infinite;
}

/* === SECTION DIVIDERS === */
.scb-section {
    position: relative;
    padding: 5rem 0;
}
.scb-section-dark { background: var(--color-bg); }
.scb-section-alt { background: var(--color-surface); }
.scb-section-cut-top::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 80px;
    background: inherit;
    clip-path: polygon(0 0, 100% 60px, 100% 100%, 0 100%);
    z-index: 1;
}
.scb-section-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    text-transform: uppercase;
    color: var(--scb-chalk);
    margin-bottom: 0.5rem;
}
.scb-section-title .scb-accent { color: var(--color-accent); }
.scb-section-subtitle {
    color: var(--color-muted);
    font-size: 1rem;
    margin-bottom: 3rem;
}
.scb-red-line {
    width: 60px;
    height: 3px;
    background: var(--color-accent);
    margin-bottom: 1rem;
}
.scb-red-line-center { margin-left: auto; margin-right: auto; }
.scb-path-section { padding-bottom: 0; }

/* === LIVE BANNER === */
/* Per user feedback: no blinking on time-related status indicators —
   the colour + label already communicate live state. The scb-pulse-bg
   and scb-blink keyframes are kept defined for any future opt-in but
   are no longer applied here. */
.scb-live-banner {
    background: linear-gradient(90deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 55%, var(--color-bg)));
    padding: 1rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.scb-live-banner a {
    color: var(--color-on-accent);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.scb-live-banner .scb-live-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--color-on-accent);
    border-radius: 50%;
    margin-right: 0.5rem;
}

/* === ABOUT / STATS === */
.scb-stat {
    text-align: center;
    padding: 1.5rem;
}
.scb-stat-number {
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--color-accent);
    line-height: 1;
    margin-bottom: 0.25rem;
}
.scb-stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-muted);
}
.scb-about-lead {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--color-text);
}
.scb-about-more {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-muted);
}
.scb-highlight {
    background: var(--color-surface);
    border-radius: var(--radius);
    border: 1px solid color-mix(in srgb, var(--color-text) 4%, transparent);
}
.scb-highlight-icon {
    font-size: 1.5rem;
    color: var(--color-accent);
    line-height: 1;
}
.scb-highlight-title { color: var(--scb-chalk); }
.scb-highlight-desc {
    color: var(--color-text);
    font-size: 0.9rem;
}

/* === CHAMPIONS === */
.scb-champion-card {
    background: var(--color-surface);
    border: 1px solid var(--color-warn-glow);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-align: center;
    transition: transform var(--transition), box-shadow var(--transition);
}
.scb-champion-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px var(--color-warn-glow);
}
.scb-champion-name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--color-warn);
    text-transform: uppercase;
}
.scb-champion-cat {
    font-size: 0.8rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* === GALLERY === */
.scb-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.5rem;
}
.scb-gallery-item {
    overflow: hidden;
    border-radius: var(--radius);
    cursor: pointer;
    aspect-ratio: 4/3;
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
}
.scb-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.scb-gallery-item:hover img { transform: scale(1.08); }
.scb-gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, color-mix(in srgb, var(--color-bg) 60%, transparent) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s;
}
.scb-gallery-item:hover::after { opacity: 1; }

/* === LIGHTBOX === */
.scb-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: color-mix(in srgb, var(--color-bg) 95%, black);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.scb-lightbox.active { display: flex; }
.scb-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius);
}
.scb-lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    color: var(--scb-chalk);
    font-size: 2rem;
    cursor: pointer;
    background: none;
    border: none;
    line-height: 1;
}

/* === FOOTER === */
.scb-footer {
    background: var(--color-surface);
    border-top: 1px solid color-mix(in srgb, var(--color-text) 4%, transparent);
    padding: 3rem 0 1.5rem;
}
.scb-footer-brand {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--scb-chalk);
    text-transform: uppercase;
}
.scb-footer-brand span { color: var(--color-brand); }
.scb-footer-tagline {
    font-size: 0.85rem;
    color: var(--color-muted);
    font-style: italic;
}
.scb-footer-links a {
    color: var(--color-muted);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color var(--transition);
}
.scb-footer-links a:hover { color: var(--color-accent); }
.scb-footer-muted {
    color: var(--color-muted);
    font-size: 0.9rem;
}
.scb-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text);
    font-size: 1.1rem;
    text-decoration: none;
    transition: all var(--transition);
}
.scb-social-link:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.scb-footer-bottom {
    margin-top: 2rem;
    padding-top: 1.5rem;
    padding-bottom: env(safe-area-inset-bottom, 0);
    border-top: 1px solid color-mix(in srgb, var(--color-text) 4%, transparent);
    text-align: center;
    color: var(--color-muted);
    font-size: 0.8rem;
}

/* === ANIMATIONS === */
@keyframes scb-slam-in {
    0% { opacity: 0; transform: translateY(40px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes scb-fade-up {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes scb-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}
@keyframes scb-pulse-bg {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}
@keyframes scb-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Scroll-triggered animations */
.scb-animate { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.scb-animate.visible { opacity: 1; transform: translateY(0); }
.scb-animate-delay-1 { transition-delay: 0.1s; }
.scb-animate-delay-2 { transition-delay: 0.2s; }
.scb-animate-delay-3 { transition-delay: 0.3s; }

/* === EVENT DETAIL HERO === */
.scb-event-hero {
    position: relative;
    min-height: 350px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding: 3rem 0;
}
.scb-event-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.scb-event-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        var(--color-bg) 0%,
        color-mix(in srgb, var(--color-bg) 60%, transparent) 60%,
        color-mix(in srgb, var(--color-bg) 30%, transparent) 100%
    );
}

/* === MOBILE NAV === */
.scb-mobile-toggle {
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius);
    font-size: 1.2rem;
    cursor: pointer;
}
.scb-mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: color-mix(in srgb, var(--color-bg) 98%, transparent);
    z-index: 1060;
    padding: 5rem 2rem 2rem;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.scb-mobile-menu.open { display: flex; }
.scb-mobile-menu .scb-nav-link {
    font-size: 1.3rem;
    letter-spacing: 0.12em;
}
.scb-mobile-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 2rem;
    cursor: pointer;
}

/* Home visitor paths / event list helpers */
.scb-path-card-body { padding: 1rem 1.25rem; gap: 1rem; }
/* #1607 — two cards to a row on a phone left the label beside the icon
   about 60 px: at 360 px "Registruokis" (88 px) ran 4 px past the card's
   edge, which cut it. Below sm the icon sits above the label, which then has
   the card's whole width, and a word that still does not fit breaks instead
   of being cut. */
.scb-path-text { min-width: 0; overflow-wrap: break-word; }
@media (max-width: 575.98px) {
    .scb-path-card-body { flex-direction: column; gap: 0.5rem; padding: 1rem; }
}
.scb-path-icon { color: var(--color-accent); font-size: 1.4rem; }
.scb-path-label { color: var(--color-text); font-weight: 600; }
.scb-path-desc { color: var(--color-muted); font-size: 0.85rem; }
.scb-card-banner-fallback {
    background: linear-gradient(135deg, var(--color-surface-2), var(--color-bg));
}
.scb-card-banner-fallback-icon {
    font-size: 3rem;
    opacity: 0.1;
    color: var(--color-accent);
}
.scb-card-excerpt { color: var(--color-muted); font-size: 0.9rem; }
.scb-card-live {
    border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
    overflow: hidden;
    position: relative;
}
.scb-card-live-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.15;
    z-index: 0;
}
.scb-card-live-body { position: relative; z-index: 1; }
.scb-card-past { opacity: 0.85; }
.scb-card-banner-sm { height: 160px; }
.scb-card-banner-archived { filter: grayscale(40%); }
.scb-card-banner-archived-fallback {
    background: linear-gradient(135deg, var(--color-bg), var(--color-surface-2));
}
.scb-card-banner-archived-icon {
    font-size: 2.5rem;
    opacity: 0.1;
    color: var(--color-muted);
}
.scb-card-title-sm { font-size: 1.1rem; }
.scb-empty-icon {
    font-size: 4rem;
    opacity: 0.15;
    color: var(--color-muted);
}
.scb-empty-text { color: var(--color-muted); font-size: 1.1rem; }

/* === RESPONSIVE === */
@media (max-width: 991.98px) {
    .scb-hero-title { font-size: clamp(2.5rem, 8vw, 4.5rem); }
    .scb-section { padding: 3.5rem 0; }
    .scb-stat-number { font-size: 2.2rem; }
}
@media (max-width: 767.98px) {
    .scb-hero-title { font-size: clamp(2.2rem, 12vw, 3.5rem); }
    .scb-hero-subtitle { font-size: 0.85rem; letter-spacing: 0.1em; }
    .scb-hero-desc { font-size: 0.9rem; }
    .scb-hero-content { padding: 1.5rem; }
    .scb-hero-cta { padding: 0.75rem 2rem; font-size: 0.85rem; }
    .scb-section { padding: 2.5rem 0; }
    .scb-section-title { font-size: 1.6rem; }
    .scb-card-body { padding: 1rem; }
    .scb-card-banner { height: 160px; }
    .scb-card-title { font-size: 1.1rem; }
    .scb-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 0.35rem; }
    .scb-footer { padding: 2rem 0 1rem; }
    .scb-footer-brand { font-size: 1.2rem; }
    .scb-navbar { padding: 0.75rem 0; }
    .scb-navbar.scrolled { padding: 0.5rem 0; }
    .scb-nav-brand { font-size: 1.1rem; }
    .scb-stat-number { font-size: 2rem; }
    .scb-stat { padding: 1rem; }
    .scb-champion-card { padding: 1rem; }
    .scb-champion-name { font-size: 1rem; }
    .scb-live-banner a { font-size: 0.9rem; }
    .scb-event-hero { min-height: 280px; padding: 2rem 0; }
    /* Prevent any overflow from inner elements */
    .scb-hero, .scb-section, .scb-footer, .scb-event-hero { overflow-x: hidden; }
}
/* #1767 — the top bar holds its links on one line only from 1200 px (EN and LT,
   with Register next to Log in); below that it wrapped them or, in LT under
   900 px, ran them off the screen. Below 1200 the drawer carries every link. */
@media (max-width: 1199.98px) {
    .scb-nav-desktop { display: none !important; }
}
@media (min-width: 1200px) {
    .scb-mobile-toggle { display: none !important; }
}
@media (max-width: 575.98px) {
    .scb-gallery-grid { grid-template-columns: 1fr; }
    .scb-hero { min-height: 90vh; }
    .scb-hero-title { font-size: 2.5rem; }
    .scb-hero-desc { font-size: 0.85rem; padding: 0 0.5rem; }
    .scb-section-title { font-size: 1.4rem; }
    .scb-card-meta { font-size: 0.8rem; }
    .container { padding-left: 1rem; padding-right: 1rem; }
}

/* === BOOTSTRAP TABLE DARK OVERRIDE === */
.scb-public .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--color-text);
    --bs-table-border-color: color-mix(in srgb, var(--color-text) 4%, transparent);
}

/* #294 — legibility fix. Bootstrap's default .text-muted / .text-body-secondary
   and .text-dark / .text-black are dark greys/near-black and become invisible on
   this dark theme (body bg var(--color-bg)). Remap to legible, theme-appropriate
   colours. Scoped to .scb-public so only the public layout is affected. */
.scb-public .text-muted,
.scb-public .text-body-secondary,
.scb-public small.text-muted {
    color: color-mix(in srgb, var(--color-text) 62%, transparent) !important;
}
.scb-public .text-dark,
.scb-public .text-black,
.scb-public .text-body {
    color: var(--color-text) !important;
}