/*
 * BCPost v2 global public components
 * Mobile-first, class-compatible with the current Django templates.
 */

/* --------------------------------------------------------------------------
   Accessibility and layout primitives
   -------------------------------------------------------------------------- */

.skip-link {
    position: fixed;
    inset-block-start: var(--bc-space-3);
    inset-inline-start: var(--bc-space-3);
    z-index: var(--bc-z-toast);
    padding: var(--bc-space-2) var(--bc-space-4);
    transform: translateY(calc(-100% - var(--bc-space-6)));
    border: var(--bc-border-width-strong) solid var(--bc-color-focus);
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-surface);
    box-shadow: var(--bc-shadow-menu);
    color: var(--bc-color-text-strong);
    font-size: var(--bc-text-sm);
    font-weight: var(--bc-weight-bold);
    text-decoration: none;
    transition: transform var(--bc-transition-fast);
}

.skip-link:focus {
    transform: translateY(var(--bc-space-0));
}

:where(.cn-sr-only, .bc-footer-sr-only, .visually-hidden, .bc-business-sr) {
    position: absolute;
    width: var(--bc-border-width);
    height: var(--bc-border-width);
    padding: var(--bc-space-0);
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: var(--bc-space-0);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--bc-focus-width) solid var(--bc-color-focus);
    outline-offset: var(--bc-focus-offset);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
    outline: none;
}

:where(.bc-container, .bcpost-container, .cn-container, .bc-page-shell, .container) {
    width: min(100% - (var(--bc-container-gutter) * 2), var(--bc-container-max));
    margin-inline: auto;
}

:where(.container-fluid, .bc-container-fluid) {
    width: 100%;
    padding-inline: var(--bc-container-gutter);
}

.site-main {
    position: relative;
    z-index: var(--bc-z-base);
    min-height: 50vh;
}

:where(.cn-section, .bcpost-section) {
    padding-block: var(--bc-section-space);
}

:where(.cn-section-muted, .bc-section-muted) {
    background: var(--bc-color-surface-muted);
}

.cn-grid {
    display: grid;
    grid-template-columns: minmax(var(--bc-space-0), 1fr);
    gap: var(--bc-grid-gap);
}

.cn-grid-2,
.cn-grid-3,
.cn-grid-4,
.bc-card-grid,
.bc-related-grid {
    display: grid;
    grid-template-columns: minmax(var(--bc-space-0), 1fr);
    gap: var(--bc-grid-gap);
}

:where(.cn-layout-main-sidebar, .bc-article-layout) {
    display: grid;
    grid-template-columns: minmax(var(--bc-space-0), 1fr);
    gap: var(--bc-section-space-compact);
}

:where(.cn-ratio-16x9, .bc-ratio-16x9) {
    aspect-ratio: var(--bc-ratio-story);
}

:where(.bc-ratio-3x2, .cn-ratio-3x2) {
    aspect-ratio: var(--bc-ratio-feature);
}

:where(.bc-ratio-4x3, .cn-ratio-4x3) {
    aspect-ratio: var(--bc-ratio-horizontal);
}

:where(.img-fluid, .bc-fluid-media) {
    max-width: 100%;
    height: auto;
}

body.has-open-menu {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Site header, search, desktop navigation, dropdowns, and mobile dialog
   -------------------------------------------------------------------------- */

:where(.site-header, .cn-site-header, .bc-site-header, .bcpost-sticky-header) {
    position: sticky;
    inset-block-start: var(--bc-space-0);
    z-index: var(--bc-z-sticky);
    width: 100%;
    background: var(--bc-color-surface);
    color: var(--bc-color-text);
}

:where(.bcpost-sticky-header.is-stuck, .bcpost-sticky-header.is-shrunk) {
    border-block-end: var(--bc-border-width) solid var(--bc-color-border);
}

:where(.cn-topbar, .bc-topbar) {
    display: none;
    background: var(--bc-color-header-utility);
    color: var(--bc-color-text-inverse);
}

.cn-topbar-inner {
    min-height: var(--bc-header-utility-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bc-space-4);
    font-size: var(--bc-text-xs);
    line-height: var(--bc-leading-snug);
}

:where(.cn-topbar-meta, .bcpost-local-widget),
.cn-topbar-links {
    min-width: var(--bc-space-0);
    display: flex;
    align-items: center;
    gap: var(--bc-space-4);
}

:where(.cn-topbar-meta, .bcpost-local-widget) > span,
.cn-topbar-links a {
    display: inline-flex;
    align-items: center;
    gap: var(--bc-space-2);
    white-space: nowrap;
}

.cn-topbar-links a {
    color: var(--bc-color-text-inverse);
    font-weight: var(--bc-weight-medium);
    text-decoration-color: var(--bc-color-transparent);
}

.cn-topbar-links a:hover {
    color: var(--bc-color-text-inverse);
    text-decoration-color: currentColor;
}

:where(.cn-brand-row, .bc-nav-wrap) {
    position: relative;
    background: var(--bc-color-surface);
    border-block-end: var(--bc-border-width) solid var(--bc-color-border);
}

.cn-brand-inner {
    min-height: var(--bc-header-brand-height-mobile);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bc-space-2);
}

:where(.cn-brand, .bc-brand) {
    min-width: var(--bc-space-0);
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    color: var(--bc-color-text-strong);
    text-decoration: none;
}

:where(.cn-brand, .bc-brand) picture {
    display: block;
}

:where(.cn-brand, .bc-brand) img {
    width: min(var(--bc-size-logo-mobile), 39vw);
    max-height: calc(var(--bc-header-brand-height-mobile) - var(--bc-space-3));
    object-fit: contain;
    object-position: left center;
}

:root[data-bs-theme="dark"] :where(.cn-brand, .bc-brand) picture {
    padding: var(--bc-space-1);
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-logo-surface);
}

:where(.cn-header-actions, .bc-header-actions) {
    min-width: var(--bc-space-0);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--bc-space-1);
}

:where(.cn-icon-button, .cn-menu-button) {
    min-width: var(--bc-size-touch);
    min-height: var(--bc-size-touch);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bc-space-2);
    padding: var(--bc-space-2);
    border: var(--bc-border-width) solid var(--bc-color-border);
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-surface);
    box-shadow: var(--bc-shadow-none);
    color: var(--bc-color-text-strong);
    font-size: var(--bc-text-sm);
    font-weight: var(--bc-weight-semibold);
    line-height: var(--bc-leading-none);
    text-decoration: none;
    transition: background-color var(--bc-transition-fast), border-color var(--bc-transition-fast), color var(--bc-transition-fast);
}

:where(.cn-icon-button, .cn-menu-button):hover,
:where(.cn-icon-button, .cn-menu-button).is-active {
    border-color: var(--bc-color-primary);
    background: var(--bc-color-primary-soft);
    color: var(--bc-color-primary-hover);
}

.cn-menu-lines {
    width: var(--bc-size-icon);
    display: grid;
    gap: var(--bc-space-1);
}

.cn-menu-lines > span {
    width: 100%;
    height: var(--bc-border-width-strong);
    border-radius: var(--bc-radius-pill);
    background: currentColor;
    transition: transform var(--bc-transition-fast), opacity var(--bc-transition-fast);
}

.cn-menu-button.is-active .cn-menu-lines > span:nth-child(1) {
    transform: translateY(calc(var(--bc-space-1) + var(--bc-border-width-strong))) rotate(45deg);
}

.cn-menu-button.is-active .cn-menu-lines > span:nth-child(2) {
    opacity: var(--bc-space-0);
}

.cn-menu-button.is-active .cn-menu-lines > span:nth-child(3) {
    transform: translateY(calc((var(--bc-space-1) + var(--bc-border-width-strong)) * -1)) rotate(-45deg);
}

:where(.cn-site-search, .bc-header-search, .bcpost-search) {
    position: absolute;
    inset-block-start: calc(100% + var(--bc-space-2));
    inset-inline: var(--bc-container-gutter);
    z-index: var(--bc-z-dropdown);
    display: none;
    align-items: stretch;
    max-width: var(--bc-size-search);
    margin-inline: auto;
    overflow: hidden;
    border: var(--bc-border-width) solid var(--bc-color-border-strong);
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-surface-raised);
    box-shadow: var(--bc-shadow-menu);
}

:where(.cn-site-search, .bc-header-search, .bcpost-search).is-open {
    display: flex;
}

:where(.cn-site-search, .bc-header-search, .bcpost-search):focus-within {
    border-color: var(--bc-color-focus);
    outline: var(--bc-focus-width) solid var(--bc-color-focus);
    outline-offset: var(--bc-focus-offset);
}

.cn-site-search-input {
    min-width: var(--bc-space-0);
    min-height: var(--bc-size-touch);
    flex: 1 1 auto;
    padding: var(--bc-space-3) var(--bc-space-4);
    border: var(--bc-space-0);
    border-radius: var(--bc-radius-none);
    background: var(--bc-color-surface);
    color: var(--bc-color-text);
    font-size: var(--bc-text-base);
    outline: none;
}

.cn-site-search-input::placeholder {
    color: var(--bc-color-text-subtle);
    opacity: 1;
}

.cn-search-button {
    min-height: var(--bc-size-touch);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bc-space-2);
    padding: var(--bc-space-2) var(--bc-space-4);
    border: var(--bc-space-0);
    border-inline-start: var(--bc-border-width) solid var(--bc-color-border);
    border-radius: var(--bc-radius-none);
    background: var(--bc-color-primary);
    color: var(--bc-color-text-inverse);
    font-size: var(--bc-text-sm);
    font-weight: var(--bc-weight-bold);
    transition: background-color var(--bc-transition-fast);
}

.cn-search-button:hover,
.cn-search-button:active {
    background: var(--bc-color-primary-hover);
}

:where(.cn-primary-nav, .bc-main-nav) {
    display: none;
    background: var(--bc-color-header-nav);
    color: var(--bc-color-text-inverse);
}

.cn-primary-nav-inner {
    min-height: var(--bc-header-nav-height);
    display: flex;
    align-items: stretch;
    gap: var(--bc-space-1);
}

.cn-nav-dropdown {
    position: relative;
    display: flex;
}

:where(.cn-nav-link, .bc-nav-link) {
    min-height: var(--bc-header-nav-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bc-space-2);
    padding: var(--bc-space-2) var(--bc-space-3);
    border: var(--bc-space-0);
    border-block-end: var(--bc-border-width-strong) solid var(--bc-color-transparent);
    border-radius: var(--bc-radius-none);
    background: var(--bc-color-transparent);
    color: var(--bc-color-text-inverse);
    font-size: var(--bc-text-sm);
    font-weight: var(--bc-weight-semibold);
    line-height: var(--bc-leading-none);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--bc-transition-fast), border-color var(--bc-transition-fast), color var(--bc-transition-fast);
}

:where(.cn-nav-link, .bc-nav-link):hover,
.cn-nav-dropdown:hover > :where(.cn-nav-link, .bc-nav-link),
.cn-nav-dropdown:focus-within > :where(.cn-nav-link, .bc-nav-link) {
    border-block-end-color: var(--bc-color-brand-sky);
    background: var(--bc-color-header-nav-hover);
    color: var(--bc-color-text-inverse);
    text-decoration: none;
}

:where(.cn-nav-link, .bc-nav-link).is-active,
:where(.cn-nav-link, .bc-nav-link).bc-nav-link-active,
:where(.cn-nav-link, .bc-nav-link)[aria-current="page"] {
    border-block-end-color: var(--bc-color-header-nav-active);
    background: var(--bc-color-header-nav-hover);
    color: var(--bc-color-text-inverse);
}

.cn-nav-button .bi-chevron-down {
    font-size: var(--bc-text-xs);
    transition: transform var(--bc-transition-fast);
}

.cn-nav-dropdown.is-open .cn-nav-button .bi-chevron-down,
.cn-nav-button[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

.bcpost-app .cn-primary-nav-inner > :is(.cn-nav-link, .bc-nav-link, .nav-link),
.bcpost-app .cn-primary-nav-inner > .cn-nav-dropdown > :is(.cn-nav-link, .bc-nav-link, .nav-link) {
    color: var(--bc-color-text-inverse);
}

.bcpost-app .cn-primary-nav-inner > :is(.cn-nav-link, .bc-nav-link, .nav-link):hover,
.bcpost-app .cn-primary-nav-inner > :is(.cn-nav-link, .bc-nav-link, .nav-link):focus-visible,
.bcpost-app .cn-primary-nav-inner > .cn-nav-dropdown > :is(.cn-nav-link, .bc-nav-link, .nav-link):hover,
.bcpost-app .cn-primary-nav-inner > .cn-nav-dropdown > :is(.cn-nav-link, .bc-nav-link, .nav-link):focus-visible {
    background: var(--bc-color-header-nav-hover);
    color: var(--bc-color-text-inverse);
}

.bcpost-app .cn-primary-nav-inner > :is(.cn-nav-link, .bc-nav-link, .nav-link, .is-active, .bc-nav-link-active)[aria-current="page"],
.bcpost-app .cn-primary-nav-inner > :is(.cn-nav-link, .bc-nav-link, .nav-link).is-active,
.bcpost-app .cn-primary-nav-inner > :is(.cn-nav-link, .bc-nav-link, .nav-link).bc-nav-link-active,
.bcpost-app .cn-primary-nav-inner > .cn-nav-dropdown > :is(.cn-nav-link, .bc-nav-link, .nav-link).is-active,
.bcpost-app .cn-primary-nav-inner > .cn-nav-dropdown > :is(.cn-nav-link, .bc-nav-link, .nav-link).bc-nav-link-active {
    border-block-end-color: var(--bc-color-header-nav-active);
    background: var(--bc-color-logo-surface);
    color: var(--bc-color-brand-ink);
}

.cn-dropdown-panel {
    position: absolute;
    inset-block-start: calc(100% + var(--bc-space-1));
    inset-inline-start: var(--bc-space-0);
    z-index: var(--bc-z-dropdown);
    width: min(var(--bc-size-dropdown), calc(100vw - (var(--bc-container-gutter) * 2)));
    padding: var(--bc-space-4);
    visibility: hidden;
    opacity: var(--bc-space-0);
    transform: translateY(calc(var(--bc-space-2) * -1));
    pointer-events: none;
    border: var(--bc-border-width) solid var(--bc-color-border);
    border-radius: var(--bc-radius-md);
    background: var(--bc-color-surface-raised);
    box-shadow: var(--bc-shadow-menu);
    color: var(--bc-color-text);
    transition: opacity var(--bc-transition-fast), transform var(--bc-transition-fast), visibility var(--bc-transition-fast);
}

.cn-dropdown-panel-wide,
.cn-mega-panel {
    width: min(var(--bc-size-mega), calc(100vw - (var(--bc-container-gutter) * 2)));
}

.cn-events-mega-panel {
    inset-inline: auto var(--bc-space-0);
}

.cn-nav-dropdown.is-open > .cn-dropdown-panel,
.cn-nav-button[aria-expanded="true"] + .cn-dropdown-panel {
    visibility: visible;
    opacity: 1;
    transform: translateY(var(--bc-space-0));
    pointer-events: auto;
}

.cn-dropdown-heading {
    display: flex;
    align-items: center;
    gap: var(--bc-space-2);
    margin-block-end: var(--bc-space-3);
    color: var(--bc-color-text-strong);
    font-family: var(--bc-font-sans);
    font-size: var(--bc-text-sm);
    font-weight: var(--bc-weight-bold);
    letter-spacing: var(--bc-letter-caps);
    line-height: var(--bc-leading-snug);
    text-transform: uppercase;
}

.cn-city-mega-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--bc-space-6);
    padding-block-end: var(--bc-space-4);
    border-block-end: var(--bc-border-width) solid var(--bc-color-border);
}

.cn-city-mega-head p {
    max-width: var(--bc-measure-compact);
    margin: var(--bc-space-0);
    color: var(--bc-color-text-muted);
    font-size: var(--bc-text-sm);
}

.cn-city-mega-all {
    display: inline-flex;
    align-items: center;
    gap: var(--bc-space-2);
    flex: 0 0 auto;
    color: var(--bc-color-link);
    font-size: var(--bc-text-sm);
    font-weight: var(--bc-weight-bold);
}

.cn-city-mega-grid,
.cn-chip-grid,
.cn-mega-link-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(var(--bc-space-0), 1fr));
    gap: var(--bc-space-2);
    margin-block-start: var(--bc-space-4);
}

.cn-city-mega-link {
    display: grid;
    grid-template-columns: auto minmax(var(--bc-space-0), 1fr);
    gap: var(--bc-space-1) var(--bc-space-2);
    padding: var(--bc-space-3);
    border: var(--bc-border-width) solid var(--bc-color-border);
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-surface);
    color: var(--bc-color-text-strong);
    text-decoration: none;
    transition: background-color var(--bc-transition-fast), border-color var(--bc-transition-fast), color var(--bc-transition-fast);
}

.cn-city-mega-link:hover {
    border-color: var(--bc-color-primary);
    background: var(--bc-color-primary-soft);
    color: var(--bc-color-primary-hover);
    text-decoration: none;
}

.cn-city-mega-link i {
    grid-row: span 2;
    color: var(--bc-color-accent);
}

.cn-city-mega-link small {
    color: var(--bc-color-text-muted);
    font-size: var(--bc-text-xs);
}

:where(.cn-chip, .cn-mega-link) {
    min-height: var(--bc-size-touch);
    display: inline-flex;
    align-items: center;
    gap: var(--bc-space-2);
    padding: var(--bc-space-2) var(--bc-space-3);
    border: var(--bc-border-width) solid var(--bc-color-border);
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-surface);
    color: var(--bc-color-text-strong);
    font-size: var(--bc-text-sm);
    font-weight: var(--bc-weight-semibold);
    line-height: var(--bc-leading-snug);
    text-decoration: none;
    transition: background-color var(--bc-transition-fast), border-color var(--bc-transition-fast), color var(--bc-transition-fast);
}

:where(.cn-chip, .cn-mega-link):hover {
    border-color: var(--bc-color-primary);
    background: var(--bc-color-primary-soft);
    color: var(--bc-color-primary-hover);
    text-decoration: none;
}

.cn-mega-link-primary {
    border-color: var(--bc-color-primary);
    background: var(--bc-color-primary);
    color: var(--bc-color-text-inverse);
}

.cn-mega-link-primary:hover {
    border-color: var(--bc-color-primary-hover);
    background: var(--bc-color-primary-hover);
    color: var(--bc-color-text-inverse);
}

.cn-mobile-menu {
    position: fixed;
    inset: var(--bc-space-0);
    z-index: var(--bc-z-dialog);
    display: grid;
    justify-items: start;
    visibility: hidden;
    opacity: var(--bc-space-0);
    pointer-events: none;
    transition: opacity var(--bc-transition-slow), visibility var(--bc-transition-slow);
}

.cn-mobile-menu-backdrop {
    position: absolute;
    inset: var(--bc-space-0);
    background: var(--bc-color-overlay);
    opacity: var(--bc-space-0);
    transition: opacity var(--bc-transition-slow);
}

.cn-mobile-menu-panel {
    position: relative;
    z-index: var(--bc-z-base);
    width: min(90vw, var(--bc-size-drawer));
    height: 100dvh;
    padding: var(--bc-space-0) var(--bc-space-4) var(--bc-space-8);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    border-inline-end: var(--bc-border-width) solid var(--bc-color-border);
    background: var(--bc-color-surface-raised);
    box-shadow: var(--bc-shadow-overlay);
    color: var(--bc-color-text);
    transition: transform var(--bc-transition-slow);
}

.cn-mobile-menu.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.cn-mobile-menu.is-open .cn-mobile-menu-backdrop {
    opacity: 1;
}

.cn-mobile-menu.is-open .cn-mobile-menu-panel {
    transform: translateX(var(--bc-space-0));
}

.cn-mobile-menu-head {
    position: sticky;
    inset-block-start: var(--bc-space-0);
    z-index: var(--bc-z-base);
    min-height: var(--bc-header-brand-height-mobile);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bc-space-4);
    margin-inline: calc(var(--bc-space-4) * -1);
    padding-inline: var(--bc-space-4);
    border-block-end: var(--bc-border-width) solid var(--bc-color-border);
    background: var(--bc-color-surface-raised);
}

.cn-mobile-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--bc-space-2);
    color: var(--bc-color-text-strong);
    font-family: var(--bc-font-serif);
    font-size: var(--bc-text-lg);
    font-weight: var(--bc-weight-bold);
}

.cn-mobile-brand img {
    width: var(--bc-size-control-sm);
    height: var(--bc-size-control-sm);
    object-fit: contain;
}

.cn-mobile-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(var(--bc-space-0), 1fr));
    gap: var(--bc-space-1) var(--bc-space-3);
    padding-block: var(--bc-space-4);
}

.cn-mobile-links a {
    min-height: var(--bc-size-touch);
    display: flex;
    align-items: center;
    padding: var(--bc-space-2) var(--bc-space-3);
    border-block-end: var(--bc-border-width) solid var(--bc-color-border);
    color: var(--bc-color-text-strong);
    font-weight: var(--bc-weight-semibold);
    text-decoration: none;
}

.cn-mobile-links a:hover,
.cn-mobile-links a[aria-current="page"] {
    border-block-end-color: var(--bc-color-accent);
    color: var(--bc-color-link-hover);
}

.cn-mobile-accordion {
    border-block-start: var(--bc-border-width) solid var(--bc-color-border);
}

.cn-mobile-accordion summary {
    min-height: var(--bc-size-touch);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bc-space-4);
    padding-block: var(--bc-space-3);
    color: var(--bc-color-text-strong);
    font-weight: var(--bc-weight-bold);
    cursor: pointer;
    list-style: none;
}

.cn-mobile-accordion summary::-webkit-details-marker {
    display: none;
}

.cn-mobile-accordion summary::after {
    content: "+";
    color: var(--bc-color-primary);
    font-size: var(--bc-text-xl);
    font-weight: var(--bc-weight-regular);
}

.cn-mobile-accordion[open] summary::after {
    content: "−";
}

.cn-chip-scroll {
    display: flex;
    gap: var(--bc-space-2);
    padding-block: var(--bc-space-2) var(--bc-space-4);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

.cn-chip-scroll .cn-chip {
    flex: 0 0 auto;
}

.bc-unified-main-inner {
    gap: var(--bc-space-3);
}

.bc-mobile-menu-trigger {
    flex: 0 0 auto;
}

.bc-unified-brand {
    flex: 1 1 auto;
    justify-content: center;
}

.bc-unified-primary-nav {
    flex: 1 1 auto;
    min-width: var(--bc-space-0);
}

.bc-unified-nav-list {
    margin: var(--bc-space-0);
    padding: var(--bc-space-0);
    list-style: none;
}

.bc-unified-nav-list > li {
    min-width: var(--bc-space-0);
}

.bc-unified-actions {
    flex: 0 0 auto;
}

.bc-mobile-weather {
    min-height: var(--bc-size-touch);
    display: inline-flex;
    align-items: center;
    gap: var(--bc-space-1);
    max-width: 8.5rem;
    color: var(--bc-color-text-muted);
    font-size: var(--bc-text-xs);
    font-weight: var(--bc-weight-semibold);
    line-height: var(--bc-leading-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bc-mobile-weather strong,
.bc-unified-topbar strong {
    color: inherit;
    font-weight: var(--bc-weight-bold);
}

.bc-header-utility-weather,
.bc-header-utility-traffic {
    display: none;
}

.bc-header-utility-link span {
    display: none;
}

.cn-mobile-search-toggle {
    display: inline-flex;
}

.bc-nav-mega-columns {
    display: grid;
    gap: var(--bc-space-5);
}

.bc-nav-mega-section {
    min-width: var(--bc-space-0);
}

.bc-nav-mega-section .cn-dropdown-heading {
    margin-block-start: var(--bc-space-0);
}

.bc-nav-mega-columns .cn-chip-grid,
.bc-nav-mega-columns .cn-mega-link-grid {
    grid-template-columns: repeat(2, minmax(var(--bc-space-0), 1fr));
}

.cn-chip[aria-current="page"],
.cn-city-mega-link[aria-current="page"],
.cn-mega-link.is-active {
    border-color: var(--bc-color-primary);
    background: var(--bc-color-primary-soft);
    color: var(--bc-color-primary-hover);
    box-shadow: inset var(--bc-space-0) calc(var(--bc-border-width-strong) * -1) var(--bc-color-primary);
}

@media (max-width: 430px) {
    :where(.cn-brand, .bc-brand) img {
        width: min(var(--bc-size-logo-compact), 38vw);
    }

    [data-mobile-menu-label] {
        display: none;
    }
}

@media (min-width: 768px) {
    :where(.cn-topbar, .bc-topbar) {
        display: block;
    }

    .cn-brand-inner {
        min-height: var(--bc-header-brand-height);
    }

    :where(.cn-brand, .bc-brand) img {
        width: var(--bc-size-logo-desktop);
        max-height: calc(var(--bc-header-brand-height) - var(--bc-space-3));
    }

    .cn-city-mega-grid,
    .cn-chip-grid,
    .cn-mega-link-grid {
        grid-template-columns: repeat(3, minmax(var(--bc-space-0), 1fr));
    }
}

@media (min-width: 1024px) {
    .bc-mobile-menu-trigger,
    .bc-mobile-weather,
    .cn-mobile-search-toggle {
        display: none;
    }

    .bc-unified-brand {
        flex: 0 0 auto;
        justify-content: flex-start;
    }

    :where(.bc-unified-brand, .bc-brand) img {
        width: clamp(9.5rem, 13vw, var(--bc-size-logo-desktop));
    }

    .bc-unified-primary-nav {
        display: block;
        background: var(--bc-color-header-nav);
        color: var(--bc-color-text-inverse);
    }

    .bc-unified-nav-shell {
        display: flex;
    }

    .bc-unified-nav-list {
        min-height: var(--bc-header-nav-height);
        display: flex;
        align-items: stretch;
        justify-content: center;
        gap: var(--bc-space-0);
        width: 100%;
    }

    .bc-header-search {
        position: static;
        inset: auto;
        z-index: auto;
        display: flex;
        flex: 1 1 24rem;
        max-width: min(var(--bc-size-search), 34vw);
        margin-inline: auto;
        box-shadow: var(--bc-shadow-none);
    }

    .bc-unified-primary-nav :where(.cn-nav-link, .bc-nav-link) {
        padding-inline: var(--bc-space-2);
        font-size: var(--bc-text-xs);
    }

    .bc-header-utility-weather,
    .bc-header-utility-traffic {
        display: inline-flex;
    }

    .bc-header-utility-link span {
        display: inline;
    }

    .bc-unified-actions {
        gap: var(--bc-space-1);
    }

    .cn-dropdown-panel-wide,
    .cn-mega-panel {
        position: fixed;
        inset-block-start: var(--bc-header-height);
        inset-inline-start: max(var(--bc-container-gutter), calc((100vw - var(--bc-container-max)) / 2));
        inset-inline-end: auto;
    }

    .cn-mobile-menu {
        display: none;
    }

    .bc-nav-mega-columns {
        grid-template-columns: repeat(3, minmax(var(--bc-space-0), 1fr));
    }

    .bc-nav-mega-columns-two {
        grid-template-columns: repeat(2, minmax(var(--bc-space-0), 1fr));
    }
}

@media (min-width: 1280px) {
    .bc-unified-primary-nav :where(.cn-nav-link, .bc-nav-link) {
        padding-inline: var(--bc-space-3);
        font-size: var(--bc-text-sm);
    }
}

/* Approved responsive BCPost public header */
.bc-unified-header .bc-unified-topbar {
    display: none;
}

.bc-unified-main-row {
    z-index: var(--bc-z-base);
    background: var(--bc-color-surface);
}

.bc-unified-main-inner {
    min-height: var(--bc-header-brand-height-mobile);
    display: grid;
    grid-template-columns: auto minmax(var(--bc-space-0), 1fr);
    align-items: center;
    gap: var(--bc-space-2);
    padding-block: var(--bc-space-2);
}

.bc-header-brand-group {
    min-width: var(--bc-space-0);
    display: inline-flex;
    align-items: center;
    gap: var(--bc-space-2);
}

.bc-unified-brand {
    width: clamp(8.25rem, 34vw, var(--bc-size-logo-mobile));
    flex: 0 0 auto;
    justify-content: flex-start;
}

:where(.bc-unified-brand, .bc-brand) img {
    width: 100%;
    aspect-ratio: 746 / 252;
    max-height: none;
    object-fit: contain;
}

.bc-header-search {
    inset-block-start: calc(100% + var(--bc-space-1));
    border-radius: var(--bc-radius-pill);
}

.bc-header-search-icon {
    display: inline-flex;
    align-items: center;
    padding-inline-start: var(--bc-space-4);
    color: var(--bc-color-text-subtle);
    pointer-events: none;
}

.bc-header-search .cn-site-search-input {
    padding-inline: var(--bc-space-2) var(--bc-space-3);
}

.bc-header-search .cn-search-button {
    min-width: var(--bc-size-touch);
    border-radius: var(--bc-radius-pill);
}

.bc-header-location {
    min-height: var(--bc-size-touch);
    display: none;
    align-items: center;
    gap: var(--bc-space-1);
    min-width: var(--bc-space-0);
    max-width: 10rem;
    padding-inline: var(--bc-space-2);
    color: var(--bc-color-text-muted);
    font-size: var(--bc-text-xs);
    font-weight: var(--bc-weight-semibold);
    line-height: var(--bc-leading-tight);
    white-space: nowrap;
}

.bc-header-location > span {
    min-width: var(--bc-space-0);
    overflow: hidden;
    text-overflow: ellipsis;
}

.bc-header-location strong {
    color: var(--bc-color-text-strong);
    font-weight: var(--bc-weight-bold);
}

.bc-unified-actions {
    justify-self: end;
    min-width: var(--bc-space-0);
}

.bc-header-utility-newsletter,
.bc-header-utility-submit_news,
.bc-header-utility-advertise {
    display: none;
}

.bc-unified-primary-nav {
    border-block-end: var(--bc-border-width) solid var(--bc-color-border);
    background: var(--bc-color-header-nav);
    position: relative;
    z-index: var(--bc-z-dropdown);
}

.bc-unified-nav-shell {
    width: min(100% - (var(--bc-container-gutter) * 2), var(--bc-container-max));
    margin-inline: auto;
    overflow-x: auto;
    scrollbar-width: thin;
}

.bc-unified-nav-list {
    width: max-content;
    min-width: 100%;
    justify-content: flex-start;
}

.bc-unified-primary-nav .bc-nav-link-events {
    color: var(--bc-color-text-inverse);
}

.bc-unified-primary-nav .bc-nav-link-events::before {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-radius: var(--bc-radius-pill);
    background: var(--bc-color-header-nav-active);
}

.bc-unified-primary-nav :where(.cn-nav-link, .bc-nav-link).is-active,
.bc-unified-primary-nav :where(.cn-nav-link, .bc-nav-link).bc-nav-link-active,
.bc-unified-primary-nav :where(.cn-nav-link, .bc-nav-link)[aria-current="page"],
.bcpost-app .bc-unified-primary-nav .cn-primary-nav-inner > :is(.cn-nav-link, .bc-nav-link, .nav-link).is-active,
.bcpost-app .bc-unified-primary-nav .cn-primary-nav-inner > :is(.cn-nav-link, .bc-nav-link, .nav-link).bc-nav-link-active,
.bcpost-app .bc-unified-primary-nav .cn-primary-nav-inner > .cn-nav-dropdown > :is(.cn-nav-link, .bc-nav-link, .nav-link).is-active,
.bcpost-app .bc-unified-primary-nav .cn-primary-nav-inner > .cn-nav-dropdown > :is(.cn-nav-link, .bc-nav-link, .nav-link).bc-nav-link-active {
    border-block-end-color: var(--bc-color-header-nav-active);
    background: var(--bc-color-header-nav-hover);
    color: var(--bc-color-text-inverse);
}

@media (min-width: 768px) {
    .bc-unified-main-inner {
        min-height: var(--bc-header-brand-height);
        grid-template-columns: auto minmax(var(--bc-space-0), 1fr) auto;
        gap: var(--bc-space-3);
    }

    .bc-unified-brand {
        width: clamp(10.5rem, 18vw, var(--bc-size-logo-desktop));
    }

    .bc-mobile-menu-trigger,
    .cn-mobile-menu {
        display: none;
    }

    .bc-header-search {
        position: static;
        inset: auto;
        z-index: auto;
        display: flex;
        width: 100%;
        justify-self: center;
        margin-inline: auto;
        box-shadow: var(--bc-shadow-none);
    }

    .bc-header-location {
        display: inline-flex;
        max-width: 8.75rem;
    }

    .bc-unified-primary-nav {
        display: block;
    }

    .bc-unified-primary-nav :where(.cn-nav-link, .bc-nav-link) {
        padding-inline: var(--bc-space-3);
        font-size: var(--bc-text-xs);
    }

    .cn-dropdown-panel-wide,
    .cn-mega-panel {
        position: fixed;
        inset-block-start: var(--bc-header-height);
        inset-inline-start: var(--bc-container-gutter);
        inset-inline-end: auto;
    }

    .bc-nav-mega-columns {
        grid-template-columns: repeat(2, minmax(var(--bc-space-0), 1fr));
    }

    .bc-nav-mega-columns-two {
        grid-template-columns: repeat(2, minmax(var(--bc-space-0), 1fr));
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .bc-header-search {
        max-width: min(25rem, 42vw);
    }

    .bc-header-search .cn-search-button span,
    .bc-header-utility-link span {
        display: none;
    }

    .bc-header-utility-weather,
    .bc-header-utility-traffic {
        display: inline-flex;
    }

    .bc-header-utility-newsletter,
    .bc-header-utility-submit_news,
    .bc-header-utility-advertise {
        display: inline-flex;
    }

    .cn-mobile-search-toggle {
        display: none;
    }
}

@media (min-width: 1200px) {
    .bc-unified-main-inner {
        grid-template-columns: auto minmax(22rem, 1fr) auto;
        gap: var(--bc-space-4);
    }

    .bc-mobile-menu-trigger,
    .cn-mobile-search-toggle {
        display: none;
    }

    .bc-header-search {
        position: static;
        inset: auto;
        z-index: auto;
        display: flex;
        width: 100%;
        max-width: var(--bc-size-search);
        justify-self: center;
        margin-inline: auto;
        box-shadow: var(--bc-shadow-none);
    }

    .bc-header-search .cn-search-button span,
    .bc-header-utility-link span {
        display: inline;
    }

    .bc-header-utility-weather,
    .bc-header-utility-traffic,
    .bc-header-utility-newsletter,
    .bc-header-utility-submit_news,
    .bc-header-utility-advertise {
        display: inline-flex;
    }

    .bc-header-location {
        max-width: 12rem;
    }

    .bc-unified-primary-nav {
        display: block;
    }

    .bc-unified-nav-shell {
        overflow: visible;
    }

    .bc-unified-nav-list {
        width: 100%;
        justify-content: center;
    }

    .bc-unified-primary-nav :where(.cn-nav-link, .bc-nav-link) {
        padding-inline: var(--bc-space-3);
        font-size: var(--bc-text-sm);
    }

    .cn-dropdown-panel-wide,
    .cn-mega-panel {
        inset-inline-start: max(var(--bc-container-gutter), calc((100vw - var(--bc-container-max)) / 2));
    }

    .bc-nav-mega-columns {
        grid-template-columns: repeat(3, minmax(var(--bc-space-0), 1fr));
    }

    .bc-nav-mega-columns-two {
        grid-template-columns: repeat(2, minmax(var(--bc-space-0), 1fr));
    }
}

@media (min-width: 1200px) and (max-width: 1320px) {
    .bc-unified-main-inner {
        gap: var(--bc-space-2);
    }

    .bc-header-search {
        max-width: 26rem;
    }

    .bc-header-location {
        max-width: 9rem;
    }

    .bc-header-utility-link {
        padding-inline: var(--bc-space-2);
    }

    .bc-header-utility-link span {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .bc-unified-primary-nav {
        display: none;
    }

    .bc-header-location,
    .bc-header-utility-weather,
    .bc-header-utility-traffic {
        display: none;
    }

    .bc-unified-actions {
        gap: var(--bc-space-1);
    }

    .bc-header-search .cn-search-button span {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Buttons, forms, validation, and status messages
   -------------------------------------------------------------------------- */

.bcpost-app :where(
    .btn,
    .bc-button,
    .bc-button-primary,
    .bc-button-secondary,
    .cn-button-red,
    .btn-red,
    .btn-outline,
    .bc-action-btn,
    .event_ticket_button,
    .event_primary_button,
    .event_secondary_button,
    .bc-source-button
) {
    min-height: var(--bc-size-control);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bc-space-2);
    padding: var(--bc-space-2) var(--bc-space-4);
    border: var(--bc-border-width) solid var(--bc-color-border-strong);
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-surface);
    box-shadow: var(--bc-shadow-none);
    color: var(--bc-color-text-strong);
    font-family: var(--bc-font-sans);
    font-size: var(--bc-text-sm);
    font-weight: var(--bc-weight-bold);
    line-height: var(--bc-leading-none);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    transition: background-color var(--bc-transition-fast), border-color var(--bc-transition-fast), color var(--bc-transition-fast), opacity var(--bc-transition-fast);
}

.bcpost-app :where(.btn, .bc-button, .bc-button-secondary, .btn-outline, .bc-action-btn, .event_secondary_button, .bc-source-button):hover {
    border-color: var(--bc-color-primary);
    background: var(--bc-color-primary-soft);
    color: var(--bc-color-primary-hover);
    text-decoration: none;
}

.bcpost-app :where(.btn-primary, .bc-button-primary, .bc-action-btn-primary, .event_primary_button, .event_ticket_button) {
    border-color: var(--bc-color-primary);
    background: var(--bc-color-primary);
    color: var(--bc-color-text-inverse);
}

.bcpost-app :where(.btn-primary, .bc-button-primary, .bc-action-btn-primary, .event_primary_button, .event_ticket_button):hover,
.bcpost-app :where(.btn-primary, .bc-button-primary, .bc-action-btn-primary, .event_primary_button, .event_ticket_button):active {
    border-color: var(--bc-color-primary-hover);
    background: var(--bc-color-primary-hover);
    color: var(--bc-color-text-inverse);
}

.bcpost-app :where(.cn-button-red, .btn-red, .btn-danger) {
    border-color: var(--bc-color-accent);
    background: var(--bc-color-accent);
    color: var(--bc-color-text-inverse);
}

.bcpost-app :where(.cn-button-red, .btn-red, .btn-danger):hover,
.bcpost-app :where(.cn-button-red, .btn-red, .btn-danger):active {
    border-color: var(--bc-color-accent-hover);
    background: var(--bc-color-accent-hover);
    color: var(--bc-color-text-inverse);
}

.bcpost-app :where(.btn-outline-dark, .btn-outline-primary, .bc-button-secondary) {
    border-color: var(--bc-color-border-strong);
    background: var(--bc-color-transparent);
    color: var(--bc-color-text-strong);
}

.bcpost-app :where(.btn-outline-dark, .btn-outline-primary, .bc-button-secondary):hover,
.bcpost-app :where(.btn-outline-dark, .btn-outline-primary, .bc-button-secondary):active {
    border-color: var(--bc-color-primary);
    background: var(--bc-color-primary);
    color: var(--bc-color-text-inverse);
}

.btn-link {
    min-height: var(--bc-size-control-sm);
    padding: var(--bc-space-1) var(--bc-space-2);
    border-color: var(--bc-color-transparent);
    background: var(--bc-color-transparent);
    color: var(--bc-color-link);
}

.btn-link:hover {
    border-color: var(--bc-color-transparent);
    background: var(--bc-color-transparent);
    color: var(--bc-color-link-hover);
    text-decoration: underline;
}

.btn-sm {
    min-height: var(--bc-size-control-sm);
    padding: var(--bc-space-1) var(--bc-space-3);
    font-size: var(--bc-text-xs);
}

.btn-lg {
    min-height: var(--bc-size-control-lg);
    padding: var(--bc-space-3) var(--bc-space-5);
    font-size: var(--bc-text-base);
}

@keyframes bc-form-submit-spin {
    to {
        transform: rotate(360deg);
    }
}

.bcpost-app form[data-processing="true"] {
    cursor: progress;
}

.bcpost-app form[data-processing="true"] button[type="submit"] {
    cursor: wait;
    opacity: 0.84;
    pointer-events: none;
}

.bcpost-app form[data-processing="true"] button[type="submit"]::before {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    content: "";
    border: 0.14em solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: bc-form-submit-spin 0.7s linear infinite;
}

.bc-form-processing-status {
    position: absolute;
    width: var(--bc-border-width);
    height: var(--bc-border-width);
    padding: var(--bc-space-0);
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: var(--bc-space-0);
}

.bc-form-client-error {
    grid-column: 1 / -1;
    margin-block-end: var(--bc-space-4);
    padding: var(--bc-space-3) var(--bc-space-4);
    border: var(--bc-border-width) solid var(--bc-color-error);
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-error-soft);
    color: var(--bc-color-error);
    font-size: var(--bc-text-sm);
    font-weight: var(--bc-weight-semibold);
    line-height: var(--bc-leading-snug);
}

@media (prefers-reduced-motion: reduce) {
    .bcpost-app form[data-processing="true"] button[type="submit"]::before {
        animation-duration: 1.4s;
    }
}

.bcpost-app :where(.btn, .bc-button, .bc-action-btn, .event_ticket_button, .event_primary_button, .event_secondary_button):disabled,
.bcpost-app :where(.btn, .bc-button, .bc-action-btn, .event_ticket_button, .event_primary_button, .event_secondary_button)[aria-disabled="true"],
.disabled > .page-link {
    border-color: var(--bc-color-disabled);
    background: var(--bc-color-disabled);
    color: var(--bc-color-disabled-text);
    opacity: var(--bc-opacity-disabled);
    pointer-events: none;
}

.bcpost-app :where(
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="password"],
    select,
    textarea,
    .form-control,
    .form-select
) {
    width: 100%;
    min-height: var(--bc-size-control);
    padding: var(--bc-space-2) var(--bc-space-3);
    border: var(--bc-border-width) solid var(--bc-color-border-strong);
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-surface);
    box-shadow: var(--bc-shadow-none);
    color: var(--bc-color-text);
    font-size: var(--bc-text-base);
    line-height: var(--bc-leading-snug);
    transition: background-color var(--bc-transition-fast), border-color var(--bc-transition-fast), color var(--bc-transition-fast);
}

.bcpost-app textarea,
.bcpost-app textarea.form-control {
    min-height: calc(var(--bc-size-control-lg) * 2.5);
    resize: vertical;
}

.bcpost-app :where(input, select, textarea, .form-control, .form-select)::placeholder {
    color: var(--bc-color-text-subtle);
    opacity: 1;
}

.bcpost-app :where(
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="password"],
    select,
    textarea,
    .form-control,
    .form-select
):focus {
    border-color: var(--bc-color-focus);
    outline: var(--bc-focus-width) solid var(--bc-color-focus);
    outline-offset: var(--bc-focus-offset);
    box-shadow: var(--bc-shadow-none);
}

.bcpost-app :where(input, select, textarea, .form-control, .form-select):disabled,
.bcpost-app :where(input, select, textarea, .form-control, .form-select)[readonly] {
    border-color: var(--bc-color-disabled);
    background: var(--bc-color-disabled);
    color: var(--bc-color-disabled-text);
    opacity: var(--bc-opacity-disabled);
}

.bcpost-app :where(input, select, textarea, .form-control, .form-select):user-invalid,
.bcpost-app :where(.is-invalid, [aria-invalid="true"]) {
    border-color: var(--bc-color-error);
}

.bcpost-app :where(input[type="checkbox"], input[type="radio"], .form-check-input) {
    width: var(--bc-size-icon);
    height: var(--bc-size-icon);
    flex: 0 0 auto;
    margin: var(--bc-space-0);
    accent-color: var(--bc-color-primary);
}

.bcpost-app input[type="file"] {
    max-width: 100%;
    color: var(--bc-color-text-muted);
    font-size: var(--bc-text-sm);
}

:where(.bc-field, .bc-form-group, .cn-submit-field, .cn-newsletter-form, .form-group) {
    min-width: var(--bc-space-0);
    display: grid;
    gap: var(--bc-space-2);
}

:where(.bc-field, .bc-form-group, .cn-submit-field, .form-group) > label,
.bcpost-app .form-label,
.cn-newsletter-label {
    color: var(--bc-color-text-strong);
    font-size: var(--bc-text-sm);
    font-weight: var(--bc-weight-semibold);
    line-height: var(--bc-leading-snug);
}

:where(.bc-form-grid, .cn-submit-form) {
    display: grid;
    grid-template-columns: minmax(var(--bc-space-0), 1fr);
    gap: var(--bc-space-4);
}

:where(.bc-field-wide, .cn-submit-field-wide) {
    grid-column: 1 / -1;
}

:where(.bc-form-actions, .cn-submit-actions, .bc-static-actions) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--bc-space-3);
    margin-block-start: var(--bc-space-4);
}

:where(.form-text, .helptext, .cn-submit-help, .bc-form-note) {
    color: var(--bc-color-text-muted);
    font-size: var(--bc-text-sm);
    line-height: var(--bc-leading-body);
}

:where(.invalid-feedback, .errorlist, .field-error) {
    margin: var(--bc-space-0);
    padding: var(--bc-space-0);
    color: var(--bc-color-error);
    font-size: var(--bc-text-sm);
    font-weight: var(--bc-weight-semibold);
    list-style: none;
}

.input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.input-group > :where(.form-control, .form-select) {
    min-width: var(--bc-space-0);
    flex: 1 1 auto;
    border-start-end-radius: var(--bc-radius-none);
    border-end-end-radius: var(--bc-radius-none);
}

.input-group > :where(.btn, button) {
    border-start-start-radius: var(--bc-radius-none);
    border-end-start-radius: var(--bc-radius-none);
}

:where(.form-check, .bc-check, .bc-footer-consent) {
    display: flex;
    align-items: flex-start;
    gap: var(--bc-space-2);
}

:where(.alert, .cn-submit-alert, .cn-newsletter-message) {
    margin-block: var(--bc-space-3);
    padding: var(--bc-space-3) var(--bc-space-4);
    border: var(--bc-border-width) solid var(--bc-color-border);
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-surface-muted);
    color: var(--bc-color-text);
    font-size: var(--bc-text-sm);
    line-height: var(--bc-leading-body);
}

:where(.alert-success, .cn-newsletter-message.is-success) {
    border-color: var(--bc-color-success);
    background: var(--bc-color-success-soft);
    color: var(--bc-color-success);
}

:where(.alert-warning) {
    border-color: var(--bc-color-warning);
    background: var(--bc-color-warning-soft);
    color: var(--bc-color-warning);
}

:where(.alert-danger, .alert-error, .cn-newsletter-message.is-error) {
    border-color: var(--bc-color-error);
    background: var(--bc-color-error-soft);
    color: var(--bc-color-error);
}

:where(.alert-info) {
    border-color: var(--bc-color-info);
    background: var(--bc-color-info-soft);
    color: var(--bc-color-info);
}

@media (min-width: 600px) {
    :where(.bc-form-grid, .cn-submit-form) {
        grid-template-columns: repeat(2, minmax(var(--bc-space-0), 1fr));
    }
}

/* --------------------------------------------------------------------------
   Advertising, newsletter, empty/loading, and media fallback states
   -------------------------------------------------------------------------- */

:where(.cn-ad-box, .bc-ad-slot, .ad-slot, .ad-container, .advertisement, [data-ad-slot]) {
    min-height: var(--bc-size-ad-banner);
    display: grid;
    place-items: center;
    gap: var(--bc-space-2);
    padding: var(--bc-space-4);
    overflow: hidden;
    border: var(--bc-border-width) solid var(--bc-color-border);
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-surface-muted);
    color: var(--bc-color-text-subtle);
    font-size: var(--bc-text-xs);
    font-weight: var(--bc-weight-semibold);
    letter-spacing: var(--bc-letter-caps);
    line-height: var(--bc-leading-snug);
    text-align: center;
    text-transform: uppercase;
}

:where(.bc-ad-slot, .ad-slot, [data-ad-slot]) > :where(img, iframe) {
    max-width: 100%;
    max-height: 100%;
}

:where(.bc-ad-slot-empty, .bc-ad-slot:empty, .ad-slot:empty) {
    border-style: dashed;
}

:where(.bc-ad-slot:empty, .ad-slot:empty)::before {
    content: "Advertisement";
}

:where(.cn-newsletter-cta, .bc-newsletter-card, .bc-newsletter-box) {
    display: grid;
    gap: var(--bc-space-4);
    padding: var(--bc-card-padding);
    border: var(--bc-border-width) solid var(--bc-color-border);
    border-block-start: var(--bc-border-width-strong) solid var(--bc-color-primary);
    border-radius: var(--bc-radius-md);
    background: var(--bc-color-surface);
    color: var(--bc-color-text);
}

:where(.cn-newsletter-copy, .bc-newsletter-card) {
    min-width: var(--bc-space-0);
}

:where(.cn-newsletter-copy h2, .bc-newsletter-title) {
    margin: var(--bc-space-0) var(--bc-space-0) var(--bc-space-2);
    color: var(--bc-color-text-strong);
    font-size: var(--bc-text-2xl);
}

:where(.cn-newsletter-helper, .bc-newsletter-text) {
    max-width: var(--bc-measure-compact);
    margin: var(--bc-space-0);
    color: var(--bc-color-text-muted);
    font-size: var(--bc-text-sm);
    line-height: var(--bc-leading-body);
}

.cn-newsletter-row,
.bc-newsletter-card form {
    display: grid;
    grid-template-columns: minmax(var(--bc-space-0), 1fr);
    gap: var(--bc-space-2);
}

.bcpost-app :where(.cn-newsletter-input, .bc-newsletter-input) {
    min-height: var(--bc-size-control);
}

:where(.cn-newsletter-button, .bc-newsletter-button) {
    min-height: var(--bc-size-control);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bc-space-2);
    padding: var(--bc-space-2) var(--bc-space-4);
    border: var(--bc-border-width) solid var(--bc-color-primary);
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-primary);
    color: var(--bc-color-text-inverse);
    font-size: var(--bc-text-sm);
    font-weight: var(--bc-weight-bold);
    line-height: var(--bc-leading-none);
    transition: background-color var(--bc-transition-fast), border-color var(--bc-transition-fast);
}

:where(.cn-newsletter-button, .bc-newsletter-button):hover {
    border-color: var(--bc-color-primary-hover);
    background: var(--bc-color-primary-hover);
}

.cn-newsletter-feedback:empty {
    display: none;
}

:where(.cn-empty-state, .bc-empty-state, .bcpost-empty-state, .empty-state, .cn-sidebar-empty, .bc-news-empty, .bc-events-empty, .bc-business-empty, .bc-sports-empty, .bc-weather-empty, .bc-traffic-empty) {
    display: grid;
    justify-items: center;
    gap: var(--bc-space-3);
    padding: var(--bc-section-space-compact) var(--bc-card-padding);
    border: var(--bc-border-width) dashed var(--bc-color-border-strong);
    border-radius: var(--bc-radius-md);
    background: var(--bc-color-surface);
    color: var(--bc-color-text-muted);
    text-align: center;
}

:where(.cn-empty-state, .bc-empty-state, .bcpost-empty-state, .empty-state) > :last-child {
    margin-block-end: var(--bc-space-0);
}

:where(.cn-empty-state, .bc-empty-state, .bcpost-empty-state, .empty-state) :where(h2, h3, .bc-events-empty-title, .bc-business-empty-title, .bc-sports-empty-title, .bc-weather-empty-title) {
    margin: var(--bc-space-0);
    color: var(--bc-color-text-strong);
    font-size: var(--bc-text-2xl);
}

.section-placeholder {
    display: grid;
    gap: var(--bc-space-4);
    padding-block: var(--bc-space-4);
}

:where(.placeholder-card, .placeholder-list-row, .placeholder-sidebar-row, .placeholder-data-row, .placeholder-newsletter-row) {
    display: flex;
    align-items: center;
    gap: var(--bc-space-3);
}

:where(.placeholder-local-grid, .section-placeholder-grid > .row, .section-placeholder-events > .row) {
    display: grid;
    grid-template-columns: minmax(var(--bc-space-0), 1fr);
    gap: var(--bc-grid-gap);
}

.placeholder {
    min-height: var(--bc-space-3);
    display: block;
    border-radius: var(--bc-radius-sm);
    background: var(--bc-gradient-skeleton);
    background-size: 200% 100%;
    opacity: 1;
    animation: bc-skeleton 1.6s var(--bc-ease-standard) infinite;
}

.placeholder-title {
    min-height: var(--bc-space-6);
}

.placeholder-img,
.placeholder-feature-panel {
    min-height: var(--bc-size-ad-rectangle);
    aspect-ratio: var(--bc-ratio-story);
}

.placeholder-chip {
    width: var(--bc-size-thumb-md);
    min-height: var(--bc-size-control-sm);
}

.placeholder-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bc-space-2);
}

:where(.loading-state, .cn-loading-state, .htmx-indicator) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bc-space-3);
    min-height: var(--bc-size-ad-banner);
    padding: var(--bc-space-4);
    color: var(--bc-color-text-muted);
    font-size: var(--bc-text-sm);
}

:where(.loading-state, .cn-loading-state)::before {
    content: "";
    width: var(--bc-size-icon);
    height: var(--bc-size-icon);
    border: var(--bc-border-width-strong) solid var(--bc-color-border);
    border-block-start-color: var(--bc-color-primary);
    border-radius: var(--bc-radius-pill);
    animation: bc-spin 0.8s linear infinite;
}

.htmx-indicator {
    opacity: var(--bc-space-0);
    transition: opacity var(--bc-transition-fast);
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

:where(.cn-image-fallback, .bc-image-placeholder, .bcpost-image-fallback) {
    min-height: var(--bc-size-ad-banner);
    aspect-ratio: var(--bc-ratio-story);
    padding: var(--bc-space-4);
    border-radius: var(--bc-radius-sm);
    font-family: var(--bc-font-serif);
    font-weight: var(--bc-weight-semibold);
}

img[data-fallback-applied="true"] {
    background: var(--bc-color-media-placeholder);
    object-fit: cover;
}

@keyframes bc-skeleton {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@keyframes bc-spin {
    to { transform: rotate(360deg); }
}

@media (min-width: 600px) {
    .cn-newsletter-row,
    .bc-newsletter-card form {
        grid-template-columns: minmax(var(--bc-space-0), 1fr) auto;
    }

    :where(.placeholder-local-grid, .section-placeholder-grid > .row, .section-placeholder-events > .row) {
        grid-template-columns: repeat(2, minmax(var(--bc-space-0), 1fr));
    }
}

@media (min-width: 900px) {
    .cn-newsletter-cta:not(.cn-newsletter-cta-sidebar) {
        grid-template-columns: minmax(var(--bc-space-0), 1fr) minmax(var(--bc-space-0), var(--bc-size-search));
        align-items: center;
    }

    :where(.placeholder-local-grid, .section-placeholder-grid > .row, .section-placeholder-events > .row) {
        grid-template-columns: repeat(3, minmax(var(--bc-space-0), 1fr));
    }
}

/* --------------------------------------------------------------------------
   Footer and back-to-top control
   -------------------------------------------------------------------------- */

.bc-footer {
    position: relative;
    margin-block-start: var(--bc-section-space);
    overflow: hidden;
    background: var(--bc-color-footer);
    color: var(--bc-color-footer-text);
}

.bc-footer-shell {
    width: min(100% - (var(--bc-container-gutter) * 2), var(--bc-container-max));
    margin-inline: auto;
    padding-block: var(--bc-section-space-compact) var(--bc-space-6);
}

.bc-footer-top {
    display: grid;
    grid-template-columns: minmax(var(--bc-space-0), 1fr);
    gap: var(--bc-space-8);
}

.bc-footer-brand {
    min-width: var(--bc-space-0);
}

.bc-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--bc-space-3);
    color: var(--bc-color-footer-text);
    font-family: var(--bc-font-serif);
    font-size: var(--bc-text-2xl);
    font-weight: var(--bc-weight-bold);
    text-decoration: none;
}

.bc-footer-logo:hover {
    color: var(--bc-color-footer-link-hover);
    text-decoration: none;
}

.bc-footer-logo-mark {
    width: var(--bc-size-control-lg);
    height: var(--bc-size-control-lg);
    display: grid;
    place-items: center;
    padding: var(--bc-space-1);
    overflow: hidden;
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-logo-surface);
}

.bc-footer-logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bc-footer-description {
    max-width: var(--bc-measure-compact);
    margin-block: var(--bc-space-4) var(--bc-space-0);
    color: var(--bc-color-footer-muted);
    font-size: var(--bc-text-sm);
    line-height: var(--bc-leading-body);
}

.bc-footer-socials {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--bc-space-2);
    margin-block-start: var(--bc-space-4);
}

.bc-footer-social-link {
    width: var(--bc-size-touch);
    height: var(--bc-size-touch);
    display: grid;
    place-items: center;
    border: var(--bc-border-width) solid var(--bc-color-footer-border);
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-transparent);
    color: var(--bc-color-footer-link);
    text-decoration: none;
    transition: background-color var(--bc-transition-fast), border-color var(--bc-transition-fast), color var(--bc-transition-fast);
}

.bc-footer-social-link:hover {
    border-color: var(--bc-color-footer-link-hover);
    background: var(--bc-color-footer-surface);
    color: var(--bc-color-footer-link-hover);
}

.bc-footer-newsletter {
    min-width: var(--bc-space-0);
    padding: var(--bc-card-padding);
    border: var(--bc-border-width) solid var(--bc-color-footer-border);
    border-radius: var(--bc-radius-md);
    background: var(--bc-color-footer-surface);
}

.bc-footer-newsletter-kicker {
    display: inline-block;
    margin-block-end: var(--bc-space-2);
    color: var(--bc-color-footer-link-hover);
    font-size: var(--bc-text-xs);
    font-weight: var(--bc-weight-bold);
    letter-spacing: var(--bc-letter-caps);
    text-transform: uppercase;
}

.bc-footer-newsletter-title {
    margin: var(--bc-space-0) var(--bc-space-0) var(--bc-space-2);
    color: var(--bc-color-footer-text);
    font-size: var(--bc-text-2xl);
}

.bc-footer-newsletter-text {
    margin: var(--bc-space-0) var(--bc-space-0) var(--bc-space-4);
    color: var(--bc-color-footer-muted);
    font-size: var(--bc-text-sm);
}

.bc-footer-form {
    display: grid;
    gap: var(--bc-space-3);
}

.bc-footer-input-row {
    display: grid;
    grid-template-columns: minmax(var(--bc-space-0), 1fr);
    gap: var(--bc-space-2);
}

.bcpost-app .bc-footer-input {
    min-height: var(--bc-size-control);
    border-color: var(--bc-color-footer-border);
    background: var(--bc-color-logo-surface);
    color: var(--bc-color-brand-ink);
}

.bcpost-app .bc-footer-input::placeholder {
    color: var(--bc-color-slate-600);
}

.bc-footer-submit {
    min-height: var(--bc-size-control);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--bc-space-2) var(--bc-space-4);
    border: var(--bc-border-width) solid var(--bc-color-accent);
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-accent);
    color: var(--bc-color-text-inverse);
    font-size: var(--bc-text-sm);
    font-weight: var(--bc-weight-bold);
    line-height: var(--bc-leading-none);
    transition: background-color var(--bc-transition-fast), border-color var(--bc-transition-fast);
}

.bc-footer-submit:hover {
    border-color: var(--bc-color-accent-hover);
    background: var(--bc-color-accent-hover);
}

.bc-footer-consent {
    color: var(--bc-color-footer-muted);
    font-size: var(--bc-text-xs);
    line-height: var(--bc-leading-body);
}

.bc-footer-consent a {
    color: var(--bc-color-footer-link);
}

.bc-footer-divider {
    height: var(--bc-border-width);
    margin-block: var(--bc-space-8);
    background: var(--bc-color-footer-border);
}

.bc-footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(var(--bc-space-0), 1fr));
    gap: var(--bc-space-8) var(--bc-space-4);
}

.bc-footer-heading {
    margin: var(--bc-space-0) var(--bc-space-0) var(--bc-space-3);
    color: var(--bc-color-footer-text);
    font-family: var(--bc-font-sans);
    font-size: var(--bc-text-sm);
    font-weight: var(--bc-weight-bold);
    letter-spacing: var(--bc-letter-wide);
    text-transform: uppercase;
}

.bc-footer-list {
    display: grid;
    gap: var(--bc-space-2);
    margin: var(--bc-space-0);
    padding: var(--bc-space-0);
    list-style: none;
}

.bc-footer-list li {
    margin: var(--bc-space-0);
}

.bc-footer-link,
.bc-footer-legal-link {
    color: var(--bc-color-footer-muted);
    font-size: var(--bc-text-sm);
    text-decoration: none;
}

.bc-footer-link:hover,
.bc-footer-legal-link:hover {
    color: var(--bc-color-footer-link-hover);
    text-decoration: underline;
}

.bc-footer-bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    gap: var(--bc-space-4);
    margin-block-start: var(--bc-space-8);
    padding-block-start: var(--bc-space-4);
    border-block-start: var(--bc-border-width) solid var(--bc-color-footer-border);
}

.bc-footer-copyright {
    margin: var(--bc-space-0);
    color: var(--bc-color-footer-muted);
    font-size: var(--bc-text-xs);
}

.bc-footer-legal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--bc-space-2) var(--bc-space-4);
}

:where(.back-to-top, .cn-back-to-top, [data-back-to-top]) {
    position: fixed;
    inset-inline-end: var(--bc-container-gutter);
    inset-block-end: var(--bc-space-4);
    z-index: var(--bc-z-sticky);
    width: var(--bc-size-back-to-top);
    height: var(--bc-size-back-to-top);
    display: grid;
    place-items: center;
    border: var(--bc-border-width) solid var(--bc-color-border-inverse);
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-surface-inverse);
    box-shadow: var(--bc-shadow-menu);
    color: var(--bc-color-text-inverse);
    text-decoration: none;
    transition: background-color var(--bc-transition-fast), opacity var(--bc-transition-fast);
}

:where(.back-to-top, .cn-back-to-top, [data-back-to-top]):hover {
    background: var(--bc-color-primary-hover);
    color: var(--bc-color-text-inverse);
}

@media (min-width: 480px) {
    .bc-footer-input-row {
        grid-template-columns: minmax(var(--bc-space-0), 1fr) auto;
    }
}

@media (min-width: 768px) {
    .bc-footer-top {
        grid-template-columns: minmax(var(--bc-space-0), 0.85fr) minmax(var(--bc-space-0), 1.15fr);
        align-items: start;
    }

    .bc-footer-links {
        grid-template-columns: repeat(3, minmax(var(--bc-space-0), 1fr));
    }

    .bc-footer-bottom {
        align-items: center;
        flex-direction: row;
    }
}

@media (min-width: 1024px) {
    .bc-footer-links {
        grid-template-columns: repeat(5, minmax(var(--bc-space-0), 1fr));
        gap: var(--bc-space-6);
    }
}

/* --------------------------------------------------------------------------
   Bootstrap-compatible normalization for remaining public templates
   -------------------------------------------------------------------------- */

.bcpost-app .card {
    overflow: hidden;
    border: var(--bc-border-width) solid var(--bc-color-border);
    border-radius: var(--bc-radius-md);
    background: var(--bc-color-surface);
    box-shadow: var(--bc-shadow-none);
    color: var(--bc-color-text);
}

.bcpost-app :where(.card-header, .card-footer) {
    padding: var(--bc-space-3) var(--bc-space-4);
    border-color: var(--bc-color-border);
    background: var(--bc-color-surface-muted);
}

.bcpost-app .card-body {
    padding: var(--bc-card-padding);
}

.bcpost-app .dropdown-menu {
    padding: var(--bc-space-2);
    border: var(--bc-border-width) solid var(--bc-color-border);
    border-radius: var(--bc-radius-md);
    background: var(--bc-color-surface-raised);
    box-shadow: var(--bc-shadow-menu);
    color: var(--bc-color-text);
}

.bcpost-app .dropdown-item {
    min-height: var(--bc-size-control-sm);
    display: flex;
    align-items: center;
    padding: var(--bc-space-2) var(--bc-space-3);
    border-radius: var(--bc-radius-sm);
    color: var(--bc-color-text);
}

.bcpost-app .dropdown-item:hover,
.bcpost-app .dropdown-item:focus,
.bcpost-app .dropdown-item.active {
    background: var(--bc-color-primary-soft);
    color: var(--bc-color-primary-hover);
}

.bcpost-app .list-group-item {
    padding: var(--bc-space-3) var(--bc-space-4);
    border-color: var(--bc-color-border);
    background: var(--bc-color-surface);
    color: var(--bc-color-text);
}

.bcpost-app .table-responsive {
    overflow-x: auto;
    border: var(--bc-border-width) solid var(--bc-color-border);
    border-radius: var(--bc-radius-md);
}

.bcpost-app .table {
    margin: var(--bc-space-0);
    color: var(--bc-color-text);
    vertical-align: middle;
}

.bcpost-app .table > :not(caption) > * > * {
    padding: var(--bc-space-3) var(--bc-space-4);
    border-color: var(--bc-color-border);
    background: var(--bc-color-surface);
    color: var(--bc-color-text);
}

.bcpost-app .table > thead > tr > * {
    background: var(--bc-color-surface-muted);
    color: var(--bc-color-text-strong);
    font-size: var(--bc-text-sm);
    font-weight: var(--bc-weight-bold);
}

.bcpost-app :where(.modal-content, .offcanvas) {
    border: var(--bc-border-width) solid var(--bc-color-border);
    border-radius: var(--bc-radius-md);
    background: var(--bc-color-surface-raised);
    box-shadow: var(--bc-shadow-overlay);
    color: var(--bc-color-text);
}

.bcpost-app :where(.modal-header, .modal-footer, .offcanvas-header) {
    padding: var(--bc-space-4);
    border-color: var(--bc-color-border);
}

.bcpost-app .modal-body,
.bcpost-app .offcanvas-body {
    padding: var(--bc-space-4);
}

.bcpost-app .nav-link {
    color: var(--bc-color-link);
}

.bcpost-app .nav-link:hover,
.bcpost-app .nav-link:focus,
.bcpost-app .nav-link.active {
    color: var(--bc-color-link-hover);
}

.bcpost-app .text-muted {
    color: var(--bc-color-text-muted);
}

.bcpost-app :where(.bg-light, .bg-body-tertiary) {
    background: var(--bc-color-surface-muted);
}

.bcpost-app .border {
    border-color: var(--bc-color-border);
}

.bcpost-app :where(.rounded, .rounded-1, .rounded-2, .rounded-3, .rounded-4, .rounded-5) {
    border-radius: var(--bc-radius-md);
}

.bcpost-app .rounded-pill {
    border-radius: var(--bc-radius-pill);
}

.bcpost-app :where(.shadow, .shadow-sm) {
    box-shadow: var(--bc-shadow-sm);
}

.bcpost-app .shadow-lg {
    box-shadow: var(--bc-shadow-menu);
}

@media (prefers-reduced-motion: reduce) {
    :where(.cn-mobile-menu, .cn-mobile-menu-backdrop, .cn-mobile-menu-panel, .cn-dropdown-panel, .cn-post-media img, .bc-story-media img, .story-card-compact-media img, .event_card_image, .bc-event-image) {
        transition: none;
    }

    :where(.cn-post-card, .bc-story-card, .story-card-compact, .event_card, .bc-event-card):hover img {
        transform: none;
    }

    .placeholder,
    :where(.loading-state, .cn-loading-state)::before {
        animation: none;
    }
}

@media print {
    :where(.site-header, .bc-footer, .bc-action-bar, .bc-share-actions, .cn-ad-box, .bc-ad-slot, .ad-slot, .advertisement, [data-ad-slot], .back-to-top, .cn-back-to-top, [data-back-to-top]) {
        display: none;
    }

    .site-main,
    :where(.bc-container, .bcpost-container, .cn-container, .bc-page-shell, .container) {
        width: 100%;
        max-width: none;
        margin: var(--bc-space-0);
        padding: var(--bc-space-0);
    }

    a {
        color: inherit;
        text-decoration: underline;
    }
}

/* --------------------------------------------------------------------------
   Breadcrumbs, pagination, action/share controls, and previous/next links
   -------------------------------------------------------------------------- */

:where(.bc-breadcrumb, .bc-news-breadcrumb, .bc-business-breadcrumb, .bc-events-breadcrumb, .bc-weather-breadcrumb, .bc-sports-breadcrumb, .bc-static-breadcrumb, .cn-article-breadcrumb, .event_detail_breadcrumb) {
    max-width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--bc-space-2);
    margin-block-end: var(--bc-space-4);
    color: var(--bc-color-text-muted);
    font-size: var(--bc-text-sm);
    line-height: var(--bc-leading-snug);
}

:where(.bc-breadcrumb, .bc-news-breadcrumb, .bc-business-breadcrumb, .bc-events-breadcrumb, .bc-weather-breadcrumb, .bc-sports-breadcrumb, .bc-static-breadcrumb, .cn-article-breadcrumb, .event_detail_breadcrumb) a {
    color: var(--bc-color-link);
    font-weight: var(--bc-weight-medium);
    text-decoration: none;
}

:where(.bc-breadcrumb, .bc-news-breadcrumb, .bc-business-breadcrumb, .bc-events-breadcrumb, .bc-weather-breadcrumb, .bc-sports-breadcrumb, .bc-static-breadcrumb, .cn-article-breadcrumb, .event_detail_breadcrumb) a:hover {
    color: var(--bc-color-link-hover);
    text-decoration: underline;
}

.breadcrumb {
    max-width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--bc-space-1) var(--bc-space-2);
    margin: var(--bc-space-0);
    padding: var(--bc-space-0);
    color: var(--bc-color-text-muted);
    font-size: var(--bc-text-sm);
    list-style: none;
}

.breadcrumb-item {
    min-width: var(--bc-space-0);
    margin: var(--bc-space-0);
}

.breadcrumb-item + .breadcrumb-item {
    padding-inline-start: var(--bc-space-0);
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    padding-inline-end: var(--bc-space-2);
    color: var(--bc-color-text-subtle);
}

.breadcrumb-item.active {
    max-width: min(100%, var(--bc-measure-compact));
    overflow: hidden;
    color: var(--bc-color-text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(.pagination-wrap, .pagination-nav, .bc-news-pagination, .bc-events-pagination, .bc-business-pagination, .bc-sports-pagination) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--bc-space-2);
    margin-block: var(--bc-space-8) var(--bc-space-0);
    color: var(--bc-color-text-muted);
    font-size: var(--bc-text-sm);
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--bc-space-1);
    margin: var(--bc-space-0);
    padding: var(--bc-space-0);
    list-style: none;
}

.page-item {
    margin: var(--bc-space-0);
}

:where(.page-link, .bc-events-page-link, .bc-business-page-link, .bc-sports-page-link, .pagination-wrap > span, .pagination-nav > span) {
    min-width: var(--bc-size-control);
    min-height: var(--bc-size-control);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--bc-space-2) var(--bc-space-3);
    border: var(--bc-border-width) solid var(--bc-color-border);
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-surface);
    color: var(--bc-color-text-strong);
    font-weight: var(--bc-weight-semibold);
    line-height: var(--bc-leading-none);
    text-decoration: none;
}

:where(.page-link, .bc-events-page-link, .bc-business-page-link, .bc-sports-page-link):hover {
    border-color: var(--bc-color-primary);
    background: var(--bc-color-primary-soft);
    color: var(--bc-color-primary-hover);
}

:where(.page-item.active .page-link, .page-link[aria-current="page"], .bc-events-page-current, .bc-business-page-current, .bc-sports-page-current) {
    border-color: var(--bc-color-primary);
    background: var(--bc-color-primary);
    color: var(--bc-color-text-inverse);
}

.bc-action-bar {
    display: grid;
    gap: var(--bc-space-4);
    margin-block: var(--bc-space-6);
    padding: var(--bc-space-4);
    border: var(--bc-border-width) solid var(--bc-color-border);
    border-radius: var(--bc-radius-md);
    background: var(--bc-color-surface-muted);
}

.bc-listen-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--bc-space-3);
}

.bc-listen-copy {
    min-width: var(--bc-space-0);
    display: grid;
    gap: var(--bc-space-1);
    color: var(--bc-color-text-muted);
    font-size: var(--bc-text-sm);
}

.bc-listen-copy strong {
    display: inline-flex;
    align-items: center;
    gap: var(--bc-space-2);
    color: var(--bc-color-text-strong);
}

:where(.bc-share-actions, .cn-article-actions, .share-buttons, .social-share, .cn-share-controls) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--bc-space-2);
}

.bc-share-actions .bc-action-btn {
    min-height: var(--bc-size-control-sm);
    padding: var(--bc-space-2) var(--bc-space-3);
    font-size: var(--bc-text-xs);
}

:where(.bc-prev-next, .cn-prev-next) {
    display: grid;
    grid-template-columns: minmax(var(--bc-space-0), 1fr);
    gap: var(--bc-space-3);
    margin-block-start: var(--bc-space-8);
    padding-block-start: var(--bc-space-6);
    border-block-start: var(--bc-border-width) solid var(--bc-color-border);
}

.bc-prev-next-link {
    min-width: var(--bc-space-0);
    display: grid;
    gap: var(--bc-space-1);
    padding: var(--bc-space-4);
    border: var(--bc-border-width) solid var(--bc-color-border);
    border-radius: var(--bc-radius-md);
    background: var(--bc-color-surface);
    color: var(--bc-color-text-strong);
    font-family: var(--bc-font-serif);
    font-weight: var(--bc-weight-semibold);
    text-decoration: none;
}

.bc-prev-next-link:hover {
    border-color: var(--bc-color-primary);
    color: var(--bc-color-link-hover);
}

@media (min-width: 600px) {
    :where(.bc-prev-next, .cn-prev-next) {
        grid-template-columns: repeat(2, minmax(var(--bc-space-0), 1fr));
    }

    .bc-prev-next-link-next {
        text-align: end;
    }
}

@media (min-width: 1280px) {
    :where(.cn-nav-link, .bc-nav-link) {
        padding-inline: var(--bc-space-4);
    }

    .cn-city-mega-grid,
    .cn-chip-grid,
    .cn-mega-link-grid {
        grid-template-columns: repeat(4, minmax(var(--bc-space-0), 1fr));
    }
}

/* Full-width public mega menus */
@media (min-width: 768px) {
    .bc-unified-primary-nav .bc-unified-nav-shell {
        overflow: visible;
    }

    .bc-unified-primary-nav .cn-nav-dropdown {
        position: static;
    }

    .bc-unified-primary-nav .cn-dropdown-panel-wide,
    .bc-unified-primary-nav .cn-mega-panel {
        position: absolute;
        inset-block-start: calc(100% + var(--bc-border-width));
        inset-inline: 0;
        width: 100vw;
        max-width: 100vw;
        max-height: calc(100vh - var(--bc-header-height) - var(--bc-header-nav-height));
        overflow-y: auto;
        transform: translateY(0);
        padding: var(--bc-space-5) max(var(--bc-container-gutter), calc((100vw - var(--bc-container-max)) / 2));
        border-inline: 0;
        border-start-start-radius: 0;
        border-start-end-radius: 0;
        box-shadow: var(--bc-shadow-lg);
    }

    .bc-unified-primary-nav .cn-nav-dropdown:hover > .cn-dropdown-panel,
    .bc-unified-primary-nav .cn-nav-dropdown:focus-within > .cn-dropdown-panel {
        visibility: visible;
        opacity: 1;
        transform: translateY(var(--bc-space-0));
        pointer-events: auto;
    }

    .bc-unified-primary-nav .cn-nav-dropdown:hover .cn-nav-button .bi-chevron-down,
    .bc-unified-primary-nav .cn-nav-dropdown:focus-within .cn-nav-button .bi-chevron-down {
        transform: rotate(180deg);
    }

    .bc-unified-primary-nav .cn-city-mega-panel {
        padding-block: var(--bc-space-5) var(--bc-space-6);
    }

    .bc-unified-primary-nav .cn-city-mega-panel .bc-nav-mega-columns {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
        gap: clamp(var(--bc-space-4), 3vw, var(--bc-space-8));
    }

    .bc-unified-primary-nav .cn-city-mega-panel .cn-city-mega-grid {
        grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
        gap: var(--bc-space-3);
    }

    .bc-unified-primary-nav .cn-city-mega-panel .cn-city-mega-link {
        min-height: 5.75rem;
        align-items: start;
        grid-template-columns: 1.15rem minmax(0, 1fr);
        column-gap: var(--bc-space-2);
        row-gap: var(--bc-space-1);
        padding: var(--bc-space-3);
    }

    .bc-unified-primary-nav .cn-city-mega-panel .cn-city-mega-link span {
        min-width: 0;
        color: var(--bc-color-brand-ink);
        font-size: var(--bc-text-base);
        font-weight: var(--bc-weight-semibold);
        line-height: 1.25;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .bc-unified-primary-nav .cn-city-mega-panel .cn-city-mega-link small {
        grid-column: 2;
        line-height: 1.35;
    }
}

@media (min-width: 1200px) {
    .bc-unified-primary-nav .cn-city-mega-panel .cn-city-mega-grid {
        grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .bc-unified-primary-nav .cn-city-mega-panel .bc-nav-mega-columns {
        grid-template-columns: 1fr;
    }

    .bc-unified-primary-nav .cn-city-mega-panel .cn-city-mega-grid {
        grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    }
}

/* --------------------------------------------------------------------------
   Breaking news, section headings, labels, and metadata
   -------------------------------------------------------------------------- */

:where(.bcpost-breaking, .cn-breaking-strip, .cn-breaking-ticker, .news-ticker) {
    overflow: hidden;
    border-block-start: var(--bc-border-width-strong) solid var(--bc-color-breaking);
    background: var(--bc-color-surface-inverse);
    color: var(--bc-color-text-inverse);
}

:where(.bcpost-breaking__inner, .cn-breaking-strip-inner, .news-ticker-inner) {
    min-height: var(--bc-size-control-lg);
    display: grid;
    grid-template-columns: auto minmax(var(--bc-space-0), 1fr);
    align-items: center;
    gap: var(--bc-space-3);
    padding-block: var(--bc-space-2);
}

:where(.bcpost-breaking__label, .cn-breaking-strip-label, .news-ticker-label) {
    min-height: var(--bc-size-control-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--bc-space-2);
    padding: var(--bc-space-1) var(--bc-space-3);
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-breaking);
    color: var(--bc-color-text-inverse);
    font-size: var(--bc-text-xs);
    font-weight: var(--bc-weight-bold);
    letter-spacing: var(--bc-letter-caps);
    line-height: var(--bc-leading-none);
    text-transform: uppercase;
    white-space: nowrap;
}

:where(.bcpost-breaking__track, .cn-breaking-track, .news-ticker-track) {
    min-width: var(--bc-space-0);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

:where(.bcpost-breaking__content, .cn-breaking-content, .cn-breaking-set, .news-ticker-content) {
    min-width: max-content;
    display: flex;
    align-items: center;
    gap: var(--bc-space-6);
    animation: none;
    transform: none;
}

:where(.bcpost-breaking__content, .cn-breaking-content, .cn-breaking-set, .news-ticker-content) a,
:where(.bcpost-breaking__content, .cn-breaking-content, .cn-breaking-set, .news-ticker-content) > span {
    max-width: min(72vw, var(--bc-measure-compact));
    overflow: hidden;
    color: var(--bc-color-text-inverse);
    font-family: var(--bc-font-serif);
    font-size: var(--bc-text-base);
    font-weight: var(--bc-weight-semibold);
    line-height: var(--bc-leading-snug);
    text-overflow: ellipsis;
    text-decoration-color: var(--bc-color-transparent);
    white-space: nowrap;
}

:where(.bcpost-breaking__content, .cn-breaking-content, .cn-breaking-set, .news-ticker-content) a:hover {
    color: var(--bc-color-text-inverse);
    text-decoration-color: currentColor;
}

:where(.cn-section-header, .bc-section-heading, .bc-section-header, .bc-news-section-head) {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--bc-space-4);
    margin-block-end: var(--bc-space-6);
    padding-block-end: var(--bc-space-3);
    border-block-end: var(--bc-border-width) solid var(--bc-color-border-strong);
}

.section-heading {
    margin-block-end: var(--bc-space-4);
    padding-block-end: var(--bc-space-2);
    border-block-end: var(--bc-border-width) solid var(--bc-color-border-strong);
    color: var(--bc-color-text-strong);
    font-family: var(--bc-font-serif);
    font-size: var(--bc-text-2xl);
    font-weight: var(--bc-weight-semibold);
    letter-spacing: var(--bc-letter-tight);
    line-height: var(--bc-leading-heading);
}

:where(.cn-section-title, .bc-section-title, .bc-section-heading h2) {
    margin: var(--bc-space-0);
    color: var(--bc-color-text-strong);
    font-family: var(--bc-font-serif);
    font-size: var(--bc-text-3xl);
    font-weight: var(--bc-weight-semibold);
    line-height: var(--bc-leading-heading);
}

:where(.cn-section-kicker, .bc-section-kicker, .bc-kicker, .bcpost-kicker) {
    display: inline-block;
    margin-block-end: var(--bc-space-2);
    color: var(--bc-color-accent);
    font-family: var(--bc-font-sans);
    font-size: var(--bc-text-xs);
    font-weight: var(--bc-weight-bold);
    letter-spacing: var(--bc-letter-caps);
    line-height: var(--bc-leading-snug);
    text-transform: uppercase;
}

:where(.cn-section-link, .section-view-all, .bc-sidebar-link) {
    min-height: var(--bc-size-control-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--bc-space-2);
    flex: 0 0 auto;
    color: var(--bc-color-link);
    font-size: var(--bc-text-sm);
    font-weight: var(--bc-weight-bold);
    text-decoration: none;
}

:where(.cn-section-link, .section-view-all, .bc-sidebar-link):hover {
    color: var(--bc-color-link-hover);
    text-decoration: underline;
}

:where(
    .cn-badge,
    .cn-post-badge,
    .cn-location-badge,
    .cn-status-badge,
    .badge,
    .badge-category,
    .badge-city,
    .badge-live,
    .badge-breaking,
    .bc-story-category,
    .bc-news-kicker,
    .event_badge
) {
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: var(--bc-space-1);
    padding: var(--bc-space-1) var(--bc-space-2);
    border: var(--bc-border-width) solid var(--bc-color-border);
    border-radius: var(--bc-radius-pill);
    background: var(--bc-color-surface-muted);
    color: var(--bc-color-text-muted);
    font-family: var(--bc-font-sans);
    font-size: var(--bc-text-xs);
    font-weight: var(--bc-weight-bold);
    letter-spacing: var(--bc-letter-wide);
    line-height: var(--bc-leading-snug);
    text-transform: uppercase;
}

:where(.cn-badge-accent, .cn-post-badge, .badge-category, .badge-breaking, .event_badge_primary) {
    border-color: var(--bc-color-accent);
    background: var(--bc-color-accent-soft);
    color: var(--bc-color-accent-hover);
}

:where(.cn-badge-secondary, .cn-location-badge, .badge-city, .event_badge_soft) {
    border-color: var(--bc-color-primary);
    background: var(--bc-color-primary-soft);
    color: var(--bc-color-primary-hover);
}

:where(.badge-live, .cn-status-badge) {
    border-color: var(--bc-color-breaking);
    background: var(--bc-color-breaking);
    color: var(--bc-color-text-inverse);
}

.cn-badge-success {
    border-color: var(--bc-color-success);
    background: var(--bc-color-success-soft);
    color: var(--bc-color-success);
}

.cn-badge-warning {
    border-color: var(--bc-color-warning);
    background: var(--bc-color-warning-soft);
    color: var(--bc-color-warning);
}

:where(.cn-badge-row, .bc-badge-row, .event_card_badges) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--bc-space-2);
}

:where(
    .cn-post-meta,
    .cn-card-meta,
    .bc-story-meta,
    .bcpost-card-meta,
    .story-card-compact-meta,
    .bc-news-meta,
    .cn-meta-line
) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--bc-space-1) var(--bc-space-3);
    color: var(--bc-color-text-muted);
    font-family: var(--bc-font-sans);
    font-size: var(--bc-text-xs);
    line-height: var(--bc-leading-snug);
}

:where(.cn-post-meta, .cn-card-meta, .bc-story-meta, .bcpost-card-meta, .story-card-compact-meta) > :not(:first-child)::before {
    content: "•";
    margin-inline-end: var(--bc-space-3);
    color: var(--bc-color-border-strong);
}

/* --------------------------------------------------------------------------
   Story cards, compact lists, sidebars, visual cards, and event cards
   -------------------------------------------------------------------------- */

:where(.cn-post-card, .bc-story-card, .story-card-compact, .section-card, .cn-widget, .bc-sidebar-card, .bc-detail-card, .bc-static-card) {
    border: var(--bc-border-width) solid var(--bc-color-border);
    border-radius: var(--bc-radius-md);
    background: var(--bc-color-surface);
    box-shadow: var(--bc-shadow-none);
}

:where(.cn-post-card, .bc-story-card) {
    min-width: var(--bc-space-0);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

:where(.cn-post-media, .bc-story-media, .story-card-compact-media, .cn-feature-card-media) {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--bc-color-media-placeholder);
}

:where(.cn-post-media, .bc-story-media) {
    aspect-ratio: var(--bc-ratio-story);
}

:where(.cn-post-media, .bc-story-media, .story-card-compact-media, .cn-feature-card-media) picture,
:where(.cn-post-media, .bc-story-media, .story-card-compact-media, .cn-feature-card-media) img {
    width: 100%;
    height: 100%;
}

:where(.cn-post-media, .bc-story-media, .story-card-compact-media, .cn-feature-card-media) img {
    object-fit: cover;
    object-position: var(--bc-object-position);
    transition: transform var(--bc-transition-slow);
}

:where(.cn-post-card, .bc-story-card, .story-card-compact):hover :where(.cn-post-media, .bc-story-media, .story-card-compact-media) img {
    transform: scale(1.025);
}

.cn-post-body,
.bc-story-content {
    min-width: var(--bc-space-0);
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bc-space-3);
    padding: var(--bc-card-padding);
}

:where(.cn-post-title, .bc-story-title, .story-card-compact-title) {
    margin: var(--bc-space-0);
    color: var(--bc-color-text-strong);
    font-family: var(--bc-font-serif);
    font-size: var(--bc-text-xl);
    font-weight: var(--bc-weight-semibold);
    letter-spacing: var(--bc-letter-tight);
    line-height: var(--bc-leading-snug);
    text-wrap: pretty;
}

:where(.cn-post-title, .bc-story-title, .story-card-compact-title) a,
.bc-story-link {
    color: inherit;
    text-decoration: none;
}

:where(.cn-post-title, .bc-story-title, .story-card-compact-title) a:hover,
.bc-story-link:hover :where(.bc-story-title, .bc-story-category) {
    color: var(--bc-color-link-hover);
}

.cn-post-excerpt,
.bc-story-excerpt {
    display: -webkit-box;
    margin: var(--bc-space-0);
    overflow: hidden;
    color: var(--bc-color-text-muted);
    font-size: var(--bc-text-sm);
    line-height: var(--bc-leading-body);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.cn-post-meta {
    margin-block-start: auto;
}

.bc-story-link {
    min-width: var(--bc-space-0);
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.bc-story-placeholder,
.story-card-compact-fallback,
.bc-news-thumb-fallback,
.cn-image-fallback,
.bc-image-placeholder,
.bcpost-image-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--bc-space-1);
    background: var(--bc-gradient-placeholder);
    color: var(--bc-color-text-inverse);
    text-align: center;
}

.bc-story-placeholder {
    width: 100%;
    height: 100%;
    padding: var(--bc-space-4);
}

.bc-story-placeholder span,
.bc-story-placeholder strong {
    color: inherit;
}

.cn-post-card-list {
    display: grid;
    grid-template-columns: minmax(var(--bc-space-0), 1fr);
}

.cn-post-card-overlay {
    position: relative;
    min-height: var(--bc-size-ad-rectangle);
    border-color: var(--bc-color-surface-inverse);
    background: var(--bc-color-surface-inverse);
}

.cn-post-card-overlay .cn-post-media,
.cn-post-card-overlay .cn-featured-media {
    position: absolute;
    inset: var(--bc-space-0);
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

.cn-post-card-overlay::after {
    content: "";
    position: absolute;
    inset: var(--bc-space-0);
    background: var(--bc-gradient-media);
    pointer-events: none;
}

.cn-featured-body {
    position: relative;
    z-index: var(--bc-z-base);
    min-height: var(--bc-size-ad-rectangle);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--bc-space-3);
    padding: var(--bc-card-padding);
    color: var(--bc-color-text-inverse);
}

.cn-featured-title {
    max-width: var(--bc-measure-body);
    margin: var(--bc-space-0);
    color: var(--bc-color-text-inverse);
    font-size: var(--bc-text-4xl);
}

.cn-featured-title a {
    color: inherit;
    text-decoration: none;
}

.cn-featured-title a:hover {
    color: var(--bc-color-text-inverse);
    text-decoration: underline;
}

.cn-featured-excerpt {
    max-width: var(--bc-measure-body);
    margin: var(--bc-space-0);
    color: var(--bc-color-footer-muted);
    font-size: var(--bc-text-base);
}

.cn-post-card-overlay .cn-post-meta {
    color: var(--bc-color-footer-muted);
}

.story-card-compact {
    min-width: var(--bc-space-0);
    overflow: hidden;
}

.story-card-compact-link {
    min-width: var(--bc-space-0);
    display: grid;
    grid-template-columns: var(--bc-size-thumb-md) minmax(var(--bc-space-0), 1fr);
    color: var(--bc-color-text);
    text-decoration: none;
}

.story-card-compact-media {
    aspect-ratio: var(--bc-ratio-horizontal);
}

.story-card-compact-body {
    min-width: var(--bc-space-0);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--bc-space-2);
    padding: var(--bc-space-3);
}

.story-card-compact-kicker {
    color: var(--bc-color-accent);
    font-size: var(--bc-text-xs);
    font-weight: var(--bc-weight-bold);
    letter-spacing: var(--bc-letter-wide);
    text-transform: uppercase;
}

.story-card-compact-title {
    display: -webkit-box;
    overflow: hidden;
    font-size: var(--bc-text-base);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.story-card-compact-meta {
    display: none;
}

:where(.cn-widget, .bc-sidebar-card) {
    overflow: hidden;
}

:where(.cn-widget-title, .bc-sidebar-title) {
    margin: var(--bc-space-0);
    color: var(--bc-color-text-strong);
    font-family: var(--bc-font-serif);
    font-size: var(--bc-text-xl);
    font-weight: var(--bc-weight-semibold);
}

.cn-widget-title {
    padding: var(--bc-space-4) var(--bc-card-padding);
    border-block-end: var(--bc-border-width) solid var(--bc-color-border);
}

.cn-widget-body {
    padding: var(--bc-card-padding);
}

.bc-sidebar-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bc-space-4);
    padding: var(--bc-space-4);
    border-block-end: var(--bc-border-width) solid var(--bc-color-border);
}

:where(.cn-compact-stack, .bc-news-list, .bc-side-stack) {
    display: grid;
    gap: var(--bc-space-0);
}

.bc-news-item {
    display: grid;
    grid-template-columns: var(--bc-size-thumb-sm) minmax(var(--bc-space-0), 1fr);
    gap: var(--bc-space-3);
    padding: var(--bc-space-4);
    border-block-end: var(--bc-border-width) solid var(--bc-color-border);
}

.bc-news-item:last-child {
    border-block-end: var(--bc-space-0);
}

.bc-news-thumb-link,
.bc-news-thumb {
    width: var(--bc-size-thumb-sm);
    height: var(--bc-size-thumb-sm);
    display: block;
    overflow: hidden;
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-media-placeholder);
}

.bc-news-thumb {
    object-fit: cover;
}

.bc-news-body {
    min-width: var(--bc-space-0);
}

.bc-news-title {
    display: -webkit-box;
    margin: var(--bc-space-1) var(--bc-space-0);
    overflow: hidden;
    color: var(--bc-color-text-strong);
    font-size: var(--bc-text-base);
    line-height: var(--bc-leading-snug);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.bc-news-title a {
    color: inherit;
    text-decoration: none;
}

.bc-news-title a:hover {
    color: var(--bc-color-link-hover);
}

.bc-news-time {
    color: var(--bc-color-text-muted);
    font-size: var(--bc-text-xs);
}

:where(.bc-popular-list, .cn-trending-list) {
    margin: var(--bc-space-0);
    padding: var(--bc-space-0);
    list-style: none;
}

.bc-popular-item,
.cn-trending-item {
    display: grid;
    grid-template-columns: var(--bc-size-control-sm) minmax(var(--bc-space-0), 1fr);
    gap: var(--bc-space-3);
    padding: var(--bc-space-4);
    border-block-end: var(--bc-border-width) solid var(--bc-color-border);
}

.cn-trending-item {
    color: var(--bc-color-text);
    text-decoration: none;
}

.bc-popular-item:last-child,
.cn-trending-item:last-child {
    border-block-end: var(--bc-space-0);
}

:where(.bc-popular-number, .cn-trending-rank) {
    color: var(--bc-color-accent);
    font-family: var(--bc-font-serif);
    font-size: var(--bc-text-2xl);
    font-weight: var(--bc-weight-bold);
    line-height: var(--bc-leading-none);
}

:where(.bc-popular-title, .cn-trending-title) {
    margin: var(--bc-space-0);
    color: var(--bc-color-text-strong);
    font-family: var(--bc-font-serif);
    font-size: var(--bc-text-base);
    line-height: var(--bc-leading-snug);
}

.bc-popular-title a {
    color: inherit;
    text-decoration: none;
}

:where(.bc-popular-title a, .cn-trending-item):hover :where(.bc-popular-title, .cn-trending-title) {
    color: var(--bc-color-link-hover);
}

:where(.bc-popular-views, .cn-trending-meta) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bc-space-2);
    margin-block-start: var(--bc-space-1);
    color: var(--bc-color-text-muted);
    font-size: var(--bc-text-xs);
}

.cn-trending-heading {
    margin: var(--bc-space-0);
    padding: var(--bc-space-4);
    border-block-end: var(--bc-border-width) solid var(--bc-color-border);
    font-size: var(--bc-text-xl);
}

.cn-photo-story-card {
    position: relative;
    display: block;
    min-height: var(--bc-size-ad-rectangle);
    overflow: hidden;
    border-radius: var(--bc-radius-md);
    background: var(--bc-color-surface-inverse);
    color: var(--bc-color-text-inverse);
    text-decoration: none;
}

.cn-photo-story-card::after {
    content: "";
    position: absolute;
    inset: var(--bc-space-0);
    background: var(--bc-gradient-media);
}

.cn-photo-story-card > img {
    position: absolute;
    inset: var(--bc-space-0);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cn-photo-story-body {
    position: absolute;
    inset-inline: var(--bc-space-0);
    inset-block-end: var(--bc-space-0);
    z-index: var(--bc-z-base);
    display: grid;
    gap: var(--bc-space-2);
    padding: var(--bc-card-padding);
}

.cn-photo-story-body h3 {
    margin: var(--bc-space-0);
    color: var(--bc-color-text-inverse);
}

.cn-post-card-video .cn-post-media {
    aspect-ratio: var(--bc-ratio-story);
}

.cn-video-play {
    position: absolute;
    inset: 50% auto auto 50%;
    width: var(--bc-size-control-lg);
    height: var(--bc-size-control-lg);
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    border: var(--bc-border-width-strong) solid var(--bc-color-text-inverse);
    border-radius: var(--bc-radius-pill);
    background: var(--bc-color-overlay);
    color: var(--bc-color-text-inverse);
    font-size: var(--bc-text-2xl);
}

.cn-video-duration {
    position: absolute;
    inset-inline-end: var(--bc-space-2);
    inset-block-end: var(--bc-space-2);
    padding: var(--bc-space-1) var(--bc-space-2);
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-overlay);
    color: var(--bc-color-text-inverse);
    font-size: var(--bc-text-xs);
    font-weight: var(--bc-weight-bold);
}

:where(.event_card, .cn-event-card, .bc-event-card) {
    min-width: var(--bc-space-0);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: var(--bc-border-width) solid var(--bc-color-border);
    border-radius: var(--bc-radius-md);
    background: var(--bc-color-surface);
}

:where(.event_card_media, .cn-event-card-media, .bc-event-image-wrap) {
    position: relative;
    display: block;
    aspect-ratio: var(--bc-ratio-story);
    overflow: hidden;
    background: var(--bc-color-media-placeholder);
}

:where(.event_card_image, .bc-event-image) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--bc-object-position);
    transition: transform var(--bc-transition-slow);
}

:where(.event_card, .bc-event-card):hover :where(.event_card_image, .bc-event-image) {
    transform: scale(1.025);
}

:where(.event_card_fallback, .bc-event-image-fallback) {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--bc-space-1);
    padding: var(--bc-space-4);
    background: var(--bc-gradient-placeholder);
    color: var(--bc-color-text-inverse);
    text-align: center;
}

:where(.event_date_badge, .cn-event-date-badge, .bc-event-date-badge) {
    position: absolute;
    inset-block-start: var(--bc-space-3);
    inset-inline-start: var(--bc-space-3);
    min-width: var(--bc-size-touch);
    display: grid;
    overflow: hidden;
    border: var(--bc-border-width) solid var(--bc-color-text-inverse);
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-surface);
    box-shadow: var(--bc-shadow-sm);
    color: var(--bc-color-text-strong);
    text-align: center;
}

:where(.event_date_badge_month, .bc-event-date-month) {
    padding: var(--bc-space-1) var(--bc-space-2);
    background: var(--bc-color-accent);
    color: var(--bc-color-text-inverse);
    font-size: var(--bc-text-xs);
    font-weight: var(--bc-weight-bold);
    letter-spacing: var(--bc-letter-wide);
    line-height: var(--bc-leading-none);
    text-transform: uppercase;
}

:where(.event_date_badge_day, .bc-event-date-day) {
    padding: var(--bc-space-1) var(--bc-space-2);
    font-family: var(--bc-font-serif);
    font-size: var(--bc-text-xl);
    line-height: var(--bc-leading-none);
}

:where(.event_card_body, .cn-event-card-body, .bc-event-body) {
    min-width: var(--bc-space-0);
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bc-space-3);
    padding: var(--bc-card-padding);
}

:where(.event_card_title, .bc-event-title) {
    margin: var(--bc-space-0);
    color: var(--bc-color-text-strong);
    font-family: var(--bc-font-serif);
    font-size: var(--bc-text-xl);
    font-weight: var(--bc-weight-semibold);
    line-height: var(--bc-leading-snug);
}

:where(.event_card_title, .bc-event-title) a,
.bc-event-card-link {
    color: inherit;
    text-decoration: none;
}

.bc-event-card-link {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

:where(.event_card_title a, .bc-event-card-link):hover .bc-event-title,
.event_card_title a:hover {
    color: var(--bc-color-link-hover);
}

:where(.event_card_summary, .bc-event-description) {
    display: -webkit-box;
    margin: var(--bc-space-0);
    overflow: hidden;
    color: var(--bc-color-text-muted);
    font-size: var(--bc-text-sm);
    line-height: var(--bc-leading-body);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

:where(.event_card_meta, .cn-event-meta, .bc-event-meta) {
    display: grid;
    gap: var(--bc-space-2);
    color: var(--bc-color-text-muted);
    font-size: var(--bc-text-sm);
}

:where(.event_meta_item, .bc-event-meta-row) {
    min-width: var(--bc-space-0);
    display: flex;
    align-items: flex-start;
    gap: var(--bc-space-2);
}

:where(.event_meta_icon, .bc-event-meta-row i) {
    flex: 0 0 auto;
    color: var(--bc-color-primary);
}

:where(.event_card_actions, .cn-event-card-actions, .bc-event-actions) {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--bc-space-2);
    margin-block-start: auto;
    padding-block-start: var(--bc-space-3);
    border-block-start: var(--bc-border-width) solid var(--bc-color-border);
}

:where(.event_details_link, .bc-event-details-link) {
    min-height: var(--bc-size-control-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--bc-space-2);
    color: var(--bc-color-link);
    font-size: var(--bc-text-sm);
    font-weight: var(--bc-weight-bold);
    text-decoration: none;
}

:where(.event_details_link, .bc-event-details-link):hover {
    color: var(--bc-color-link-hover);
}

.bc-events-mini-card {
    min-width: var(--bc-space-0);
    display: grid;
    grid-template-columns: var(--bc-size-thumb-md) minmax(var(--bc-space-0), 1fr);
    overflow: hidden;
    border: var(--bc-border-width) solid var(--bc-color-border);
    border-radius: var(--bc-radius-md);
    background: var(--bc-color-surface);
    color: var(--bc-color-text);
    text-decoration: none;
}

.bc-events-mini-image {
    width: var(--bc-size-thumb-md);
    height: 100%;
    min-height: var(--bc-size-thumb-sm);
    object-fit: cover;
}

.bc-events-mini-fallback {
    display: grid;
    place-items: center;
    padding: var(--bc-space-2);
    background: var(--bc-gradient-placeholder);
    color: var(--bc-color-text-inverse);
    font-size: var(--bc-text-xs);
    font-weight: var(--bc-weight-bold);
    text-align: center;
}

.bc-events-mini-body {
    min-width: var(--bc-space-0);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--bc-space-2);
    padding: var(--bc-space-3);
}

.bc-events-mini-title {
    color: var(--bc-color-text-strong);
    font-family: var(--bc-font-serif);
    line-height: var(--bc-leading-snug);
}

.bc-events-mini-card:hover .bc-events-mini-title {
    color: var(--bc-color-link-hover);
}

.bc-events-mini-meta {
    color: var(--bc-color-text-muted);
    font-size: var(--bc-text-xs);
}

@media (min-width: 600px) {
    .cn-post-card-list {
        grid-template-columns: var(--bc-size-card-media-list) minmax(var(--bc-space-0), 1fr);
    }

    .cn-post-card-list .cn-post-media {
        height: 100%;
        aspect-ratio: var(--bc-ratio-horizontal);
    }

    .story-card-compact-link {
        grid-template-columns: var(--bc-size-thumb-lg) minmax(var(--bc-space-0), 1fr);
    }

    .story-card-compact-meta {
        display: flex;
    }
}

@media (min-width: 768px) {
    .cn-grid-2,
    .cn-grid-3,
    .cn-grid-4,
    .bc-card-grid,
    .bc-related-grid {
        grid-template-columns: repeat(2, minmax(var(--bc-space-0), 1fr));
    }

    .cn-featured-body {
        min-height: calc(var(--bc-size-ad-rectangle) * 1.75);
    }
}

@media (min-width: 1024px) {
    .cn-grid-3,
    .bc-card-grid:not(.bc-card-grid-four),
    .bc-related-grid {
        grid-template-columns: repeat(3, minmax(var(--bc-space-0), 1fr));
    }

    .cn-grid-4,
    .bc-card-grid-four {
        grid-template-columns: repeat(4, minmax(var(--bc-space-0), 1fr));
    }

    :where(.cn-layout-main-sidebar, .bc-article-layout) {
        grid-template-columns: minmax(var(--bc-space-0), 1fr) var(--bc-container-sidebar);
    }
}

/* Keep public top-level nav links and dropdown buttons visually aligned. */
@media (min-width: 768px) {
    .bc-unified-primary-nav .bc-unified-nav-list > li {
        min-height: var(--bc-header-nav-height);
        display: flex;
        align-items: stretch;
        margin: var(--bc-space-0);
    }

    .bc-unified-primary-nav .bc-unified-nav-list > li > :where(.cn-nav-link, .bc-nav-link, .cn-nav-button) {
        min-height: var(--bc-header-nav-height);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--bc-space-2);
        margin: var(--bc-space-0);
        padding-block: var(--bc-space-0);
        border-block-end-color: var(--bc-color-transparent);
        color: var(--bc-color-text-inverse);
        line-height: var(--bc-leading-none);
        text-decoration: none;
        vertical-align: top;
    }

    .bc-unified-primary-nav .bc-unified-nav-list > li > :where(.cn-nav-link, .bc-nav-link, .cn-nav-button):hover,
    .bc-unified-primary-nav .bc-unified-nav-list > li > :where(.cn-nav-link, .bc-nav-link, .cn-nav-button):focus-visible,
    .bc-unified-primary-nav .bc-unified-nav-list > li:hover > :where(.cn-nav-link, .bc-nav-link, .cn-nav-button),
    .bc-unified-primary-nav .bc-unified-nav-list > li:focus-within > :where(.cn-nav-link, .bc-nav-link, .cn-nav-button) {
        border-block-end-color: var(--bc-color-brand-sky);
        background: var(--bc-color-header-nav-hover);
        color: var(--bc-color-text-inverse);
    }

    .bcpost-app .bc-unified-primary-nav .bc-unified-nav-list > li > :where(.cn-nav-link, .bc-nav-link, .cn-nav-button).is-active,
    .bcpost-app .bc-unified-primary-nav .bc-unified-nav-list > li > :where(.cn-nav-link, .bc-nav-link, .cn-nav-button).bc-nav-link-active,
    .bcpost-app .bc-unified-primary-nav .bc-unified-nav-list > li > :where(.cn-nav-link, .bc-nav-link, .cn-nav-button)[aria-current="page"],
    .bcpost-app .bc-unified-primary-nav .bc-unified-nav-list > li.is-active > :where(.cn-nav-link, .bc-nav-link, .cn-nav-button) {
        border-block-end-color: var(--bc-color-header-nav-active);
        background: var(--bc-color-header-nav-hover);
        color: var(--bc-color-text-inverse);
    }

    .bc-unified-primary-nav .bc-unified-nav-list > li > :where(.cn-nav-link, .bc-nav-link):visited {
        color: var(--bc-color-text-inverse);
    }
}

/* Present the public header search as one connected control. */
.bcpost-app .bc-header-search {
    min-height: var(--bc-size-control-lg);
    align-items: stretch;
    overflow: hidden;
    border: var(--bc-border-width) solid var(--bc-color-border-strong);
    border-radius: var(--bc-radius-pill);
    background: var(--bc-color-surface);
    box-shadow: var(--bc-shadow-none);
}

.bcpost-app .bc-header-search:focus-within {
    border-color: var(--bc-color-focus);
    outline: var(--bc-focus-width) solid var(--bc-color-focus);
    outline-offset: var(--bc-focus-offset);
}

.bcpost-app .bc-header-search .bc-header-search-icon {
    min-width: var(--bc-size-control-lg);
    justify-content: center;
    padding-inline-start: var(--bc-space-0);
    color: var(--bc-color-text-subtle);
    font-size: var(--bc-text-xl);
}

.bcpost-app .bc-header-search .cn-site-search-input {
    min-height: 100%;
    border: var(--bc-space-0);
    border-radius: var(--bc-radius-none);
    background: var(--bc-color-transparent);
    box-shadow: var(--bc-shadow-none);
    padding-block: var(--bc-space-0);
    padding-inline: var(--bc-space-0) var(--bc-space-3);
    outline: none;
    appearance: none;
}

.bcpost-app .bc-header-search .cn-site-search-input:focus {
    border-color: var(--bc-color-transparent);
    outline: none;
    box-shadow: var(--bc-shadow-none);
}

.bcpost-app .bc-header-search .cn-search-button {
    min-height: auto;
    align-self: stretch;
    margin: var(--bc-space-0);
    padding-inline: var(--bc-space-4);
    border: var(--bc-space-0);
    border-radius: var(--bc-radius-none);
    background: var(--bc-color-primary);
}

.bcpost-app .bc-header-search .cn-search-button:hover,
.bcpost-app .bc-header-search .cn-search-button:active {
    background: var(--bc-color-primary-hover);
}