/* ============================================================================
   LIGHT CONTENT OVERRIDE
   Shared stylesheet to flip the .CENTRE content area from dark to white.
   Shell (sidebar-nav, header, footer) stays dark - this only scopes .CENTRE.

   Accent variable must be set on the .CENTRE element via inline style:
   style="--content-accent:#3b82f6"  (stories blue, events red, etc.)

   Design rules:
   - white cards only, never grey fill
   - 1px hairline border rgba(0,0,0,.08)
   - subtle shadow 0 1px 3px rgba(0,0,0,.05)
   - hover: translateY(-2px) + 0 8px 20px rgba(0,0,0,.08)
   - accent used only on borders/badges/eyebrows
============================================================================ */

body .CENTRE.light-content,
body .CENTRE.light-content * {
    color-scheme: light;
}

body .CENTRE.light-content {
    --content-accent: #64748b;
    --lc-bg: #ffffff;
    --lc-surface: #ffffff;
    --lc-border: rgba(0,0,0,.08);
    --lc-border-strong: rgba(0,0,0,.14);
    --lc-shadow: 0 1px 3px rgba(0,0,0,.05);
    --lc-shadow-hover: 0 8px 20px rgba(0,0,0,.08);
    --lc-text: #0f172a;
    --lc-text-muted: #475569;
    --lc-text-subtle: #64748b;

    background: var(--lc-bg) !important;
    color: var(--lc-text) !important;
}

/* Wipe dark section backgrounds inside .CENTRE */
body .CENTRE.light-content section,
body .CENTRE.light-content header,
body .CENTRE.light-content main,
body .CENTRE.light-content > div {
    background-color: transparent !important;
}

/* Generic card/panel reset - match any dark-fill helper classes */
body .CENTRE.light-content [class*="-card"],
body .CENTRE.light-content [class*="-tile"],
body .CENTRE.light-content [class*="-panel"],
body .CENTRE.light-content [class*="-box"],
body .CENTRE.light-content [class*="-col"],
body .CENTRE.light-content [class*="-cell"],
body .CENTRE.light-content [class*="-item"]:not(li):not(.ev-row) {
    background: var(--lc-surface) !important;
    border: 1px solid var(--lc-border) !important;
    box-shadow: var(--lc-shadow);
    color: var(--lc-text);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

body .CENTRE.light-content a[class*="-card"]:hover,
body .CENTRE.light-content a[class*="-tile"]:hover,
body .CENTRE.light-content [class*="-card"]:hover,
body .CENTRE.light-content [class*="-tile"]:hover {
    box-shadow: var(--lc-shadow-hover) !important;
    transform: translateY(-2px);
    border-color: var(--lc-border-strong) !important;
}

/* Typography */
body .CENTRE.light-content h1,
body .CENTRE.light-content h2,
body .CENTRE.light-content h3,
body .CENTRE.light-content h4,
body .CENTRE.light-content h5,
body .CENTRE.light-content h6 {
    color: var(--lc-text) !important;
}

body .CENTRE.light-content p,
body .CENTRE.light-content li,
body .CENTRE.light-content dd,
body .CENTRE.light-content dt,
body .CENTRE.light-content span,
body .CENTRE.light-content small {
    color: inherit;
}

body .CENTRE.light-content .muted,
body .CENTRE.light-content [class*="-muted"],
body .CENTRE.light-content [class*="-sub"],
body .CENTRE.light-content [class*="-desc"],
body .CENTRE.light-content [class*="-meta"],
body .CENTRE.light-content [class*="-caption"],
body .CENTRE.light-content [class*="-excerpt"],
body .CENTRE.light-content [class*="-bio"],
body .CENTRE.light-content [class*="-label"]:not([class*="-eyebrow"]) {
    color: var(--lc-text-muted) !important;
}

/* Eyebrows and kickers - use accent colour */
body .CENTRE.light-content [class*="-eyebrow"],
body .CENTRE.light-content [class*="-kicker"],
body .CENTRE.light-content [class*="-section-label"] {
    color: var(--content-accent) !important;
}

/* Links */
body .CENTRE.light-content a {
    color: var(--content-accent);
}
body .CENTRE.light-content a:hover {
    color: var(--lc-text);
}
body .CENTRE.light-content a[class*="-card"],
body .CENTRE.light-content a[class*="-tile"] {
    color: var(--lc-text);
    text-decoration: none;
}

/* Buttons - keep accent for primary, neutral for ghost */
body .CENTRE.light-content .btn-ghost,
body .CENTRE.light-content [class*="btn-ghost"],
body .CENTRE.light-content [class*="-btn-ghost"] {
    background: transparent !important;
    border: 1px solid var(--lc-border-strong) !important;
    color: var(--lc-text) !important;
}
body .CENTRE.light-content .btn-ghost:hover,
body .CENTRE.light-content [class*="btn-ghost"]:hover {
    background: #f8fafc !important;
    border-color: var(--content-accent) !important;
}

body .CENTRE.light-content .btn-primary,
body .CENTRE.light-content [class*="btn-primary"],
body .CENTRE.light-content [class*="-btn-primary"] {
    background: var(--content-accent) !important;
    border: 1px solid var(--content-accent) !important;
    color: #ffffff !important;
}
body .CENTRE.light-content .btn-primary:hover {
    opacity: .9;
}

/* Inputs */
body .CENTRE.light-content input:not([type="submit"]):not([type="button"]),
body .CENTRE.light-content textarea,
body .CENTRE.light-content select {
    background: #ffffff !important;
    color: var(--lc-text) !important;
    border: 1px solid var(--lc-border-strong) !important;
}
body .CENTRE.light-content input:focus,
body .CENTRE.light-content textarea:focus,
body .CENTRE.light-content select:focus {
    outline: 2px solid var(--content-accent);
    outline-offset: 1px;
    border-color: var(--content-accent) !important;
}

/* Rules and dividers */
body .CENTRE.light-content hr,
body .CENTRE.light-content [class*="-rule"],
body .CENTRE.light-content [class*="-divider"] {
    background: var(--lc-border) !important;
    border-color: var(--lc-border) !important;
}

/* Pill / chip style filters */
body .CENTRE.light-content [class*="-pill"],
body .CENTRE.light-content [class*="-chip"] {
    background: #ffffff !important;
    border: 1px solid var(--lc-border) !important;
    color: var(--lc-text-muted) !important;
    box-shadow: var(--lc-shadow);
}
body .CENTRE.light-content [class*="-pill"].on,
body .CENTRE.light-content [class*="-pill"].active,
body .CENTRE.light-content [class*="-chip"].on,
body .CENTRE.light-content [class*="-chip"].active {
    background: var(--content-accent) !important;
    border-color: var(--content-accent) !important;
    color: #ffffff !important;
}

/* Sticky bars / rails - white with hairline */
body .CENTRE.light-content [class*="-rail"],
body .CENTRE.light-content [class*="-bar"]:not([class*="-price"]):not([class*="-live-bar"]) {
    background: #ffffff !important;
    border-color: var(--lc-border) !important;
}

/* Dark gradient / scrim removal inside content cards */
body .CENTRE.light-content [class*="-scrim"] {
    background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.1) 60%, transparent 100%) !important;
}

/* Empty state / messages */
body .CENTRE.light-content [class*="-empty"] {
    background: #f8fafc !important;
    border: 1px dashed var(--lc-border-strong) !important;
    color: var(--lc-text-muted) !important;
}

/* Accent stripe on left border of featured items */
body .CENTRE.light-content [class*="-lr-card"] {
    border-left: 3px solid var(--lc-border) !important;
    padding-left: 20px;
    background: transparent !important;
    box-shadow: none !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
}
body .CENTRE.light-content [class*="-lr-card"]:hover {
    border-left-color: var(--content-accent) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Writer avatars / team headshots keep border light */
body .CENTRE.light-content [class*="-avatar"],
body .CENTRE.light-content [class*="-initials"] {
    border-color: var(--lc-border) !important;
}

/* Kill dark hero backgrounds when the surrounding wrapper is light */
body .CENTRE.light-content [class*="-hero"]:not([class*="-hero-main"]):not([class*="-hero-img"]) {
    background: transparent !important;
}

/* Section-wrapper variants that render a dark band (longreads, newsletter) */
body .CENTRE.light-content [class*="-longreads"],
body .CENTRE.light-content [class*="-newsletter"] {
    background: #f8fafc !important;
    border-top: 1px solid var(--lc-border) !important;
    border-bottom: 1px solid var(--lc-border) !important;
    color: var(--lc-text) !important;
}
body .CENTRE.light-content [class*="-longreads"] *,
body .CENTRE.light-content [class*="-newsletter"] * {
    color: var(--lc-text);
}
body .CENTRE.light-content [class*="-newsletter"] [class*="-title"],
body .CENTRE.light-content [class*="-longreads"] [class*="-title"] {
    color: var(--lc-text) !important;
}
body .CENTRE.light-content [class*="-newsletter"] [class*="-kicker"],
body .CENTRE.light-content [class*="-longreads"] [class*="-kicker"],
body .CENTRE.light-content [class*="-newsletter"] [class*="-prop"]::before {
    color: var(--content-accent) !important;
}

/* Masthead on listing pages */
body .CENTRE.light-content [class*="-masthead"] {
    background: #ffffff !important;
    border-bottom: 1px solid var(--lc-border) !important;
    color: var(--lc-text) !important;
}
body .CENTRE.light-content [class*="-masthead"] * {
    color: inherit;
}
body .CENTRE.light-content [class*="-masthead-title"] {
    color: var(--lc-text) !important;
}

/* Breadcrumbs */
body .CENTRE.light-content [class*="-breadcrumb"] {
    color: var(--lc-text-muted) !important;
}
body .CENTRE.light-content [class*="-breadcrumb"] a {
    color: var(--lc-text-muted) !important;
}
body .CENTRE.light-content [class*="-breadcrumb"] a:hover {
    color: var(--lc-text) !important;
}

/* ---- Stories hub specific (.stories-hub) ------------------------------- */
body .CENTRE.light-content .stories-hub {
    background: #ffffff !important;
    color: var(--lc-text) !important;
    --sh-bg: #ffffff;
    --sh-surface: #ffffff;
    --sh-border: rgba(0,0,0,.08);
    --sh-text: var(--lc-text);
    --sh-muted: var(--lc-text-muted);
    --sh-red: var(--content-accent);
    --sh-accent: var(--content-accent);
}
body .CENTRE.light-content .sh-ticker {
    background: #f8fafc !important;
    border-color: var(--lc-border) !important;
}
body .CENTRE.light-content .sh-cat-rail {
    background: #ffffff !important;
    border-bottom-color: var(--lc-border) !important;
}
body .CENTRE.light-content .sh-hero-main,
body .CENTRE.light-content .sh-sec-card,
body .CENTRE.light-content .sh-pick-card,
body .CENTRE.light-content .lg-card {
    background: #ffffff !important;
    border: 1px solid var(--lc-border) !important;
    box-shadow: var(--lc-shadow) !important;
    color: var(--lc-text) !important;
}
body .CENTRE.light-content .sh-hero-main {
    /* keep image visible, only override fallback background */
    background: #f1f5f9 !important;
}
body .CENTRE.light-content .sh-hero-title,
body .CENTRE.light-content .sh-sec-title,
body .CENTRE.light-content .sh-pick-title,
body .CENTRE.light-content .lg-title {
    color: var(--lc-text) !important;
}
body .CENTRE.light-content .sh-hero-title { color: #ffffff !important; } /* on image */
body .CENTRE.light-content .sh-hero-excerpt,
body .CENTRE.light-content .sh-hero-strip { color: rgba(255,255,255,.85) !important; }

/* Events specific (.cat-page-centre / .ev-* ) */
body .CENTRE.light-content .ev-card,
body .CENTRE.light-content .ev-card.featured {
    background: #ffffff !important;
    border: 1px solid var(--lc-border) !important;
    box-shadow: var(--lc-shadow) !important;
    color: var(--lc-text) !important;
}
body .CENTRE.light-content .ev-card:hover {
    box-shadow: var(--lc-shadow-hover) !important;
    transform: translateY(-2px);
    border-color: var(--lc-border-strong) !important;
}
body .CENTRE.light-content .ev-card-title { color: var(--lc-text) !important; }
body .CENTRE.light-content .ev-card-meta { color: var(--lc-text-muted) !important; }
body .CENTRE.light-content .ev-filter-advanced {
    background: #ffffff !important;
    border: 1px solid var(--lc-border) !important;
    box-shadow: var(--lc-shadow);
}
body .CENTRE.light-content .ev-results-head { color: var(--lc-text) !important; }
body .CENTRE.light-content .ev-submit-banner {
    background: #f8fafc !important;
    border: 1px solid var(--lc-border) !important;
    color: var(--lc-text) !important;
    box-shadow: var(--lc-shadow);
}
body .CENTRE.light-content .evt-row {
    background: #ffffff !important;
    border: 1px solid var(--lc-border) !important;
    color: var(--lc-text) !important;
}
body .CENTRE.light-content .evt-day-label { color: var(--lc-text) !important; }
body .CENTRE.light-content .epm-clean,
body .CENTRE.light-content .ev-page-masthead {
    background: #ffffff !important;
    color: var(--lc-text) !important;
}
body .CENTRE.light-content .epm-clean-title { color: var(--lc-text) !important; }
body .CENTRE.light-content .epm-clean-sub { color: var(--lc-text-muted) !important; }
body .CENTRE.light-content .epm-clean-n { color: var(--content-accent) !important; }
body .CENTRE.light-content .epm-clean-stat { color: var(--lc-text) !important; }
body .CENTRE.light-content .epm-live-bar {
    background: #ffffff !important;
    border: 1px solid var(--lc-border) !important;
    box-shadow: var(--lc-shadow);
}
body .CENTRE.light-content .epm-lb-item {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--lc-text-muted) !important;
}
body .CENTRE.light-content .epm-lb-item.active { color: var(--lc-text) !important; }

/* About page specific (.about-page) */
body .CENTRE.light-content .about-page {
    --dark: #ffffff;
    --card: #ffffff;
    --border: rgba(0,0,0,.08);
    --text: #0f172a;
    --muted: #475569;
    --red: var(--content-accent);
    background: #ffffff !important;
    color: var(--lc-text) !important;
}
body .CENTRE.light-content .ap-hero::before { opacity: .35; }
body .CENTRE.light-content .ap-stat-card,
body .CENTRE.light-content .ap-flow-step,
body .CENTRE.light-content .ap-team-card,
body .CENTRE.light-content .ap-standards-col,
body .CENTRE.light-content .ap-cta-tile,
body .CENTRE.light-content .ap-press-block {
    background: #ffffff !important;
    border: 1px solid var(--lc-border) !important;
    box-shadow: var(--lc-shadow) !important;
}
body .CENTRE.light-content .ap-stat-n { color: var(--content-accent) !important; }
body .CENTRE.light-content .ap-hero-badge {
    background: #ffffff !important;
    border: 1px solid var(--lc-border) !important;
    color: var(--lc-text-muted) !important;
}
body .CENTRE.light-content .ap-cities-strip {
    background: #f8fafc !important;
    border-color: var(--lc-border) !important;
}
body .CENTRE.light-content .ap-cta-tile:hover {
    border-color: var(--content-accent) !important;
}
body .CENTRE.light-content .ap-city-chip.soon {
    background: #ffffff !important;
    border-color: var(--lc-border) !important;
    color: var(--lc-text-muted) !important;
}

/* Neighbourhood page generic resets */
body .CENTRE.light-content .nh-hero,
body .CENTRE.light-content .nh-section,
body .CENTRE.light-content .nh-wrap {
    background: #ffffff !important;
    color: var(--lc-text) !important;
}

/* Static page body (page.php, contact, 404, generic) */
body .CENTRE.light-content .generic-page,
body .CENTRE.light-content .page-body,
body .CENTRE.light-content .entry-content {
    background: #ffffff !important;
    color: var(--lc-text) !important;
}

/* ============================================================================
   HOOD HERO OVERRIDES (tpl-neighbourhood.php)
   The rest of the hood page uses the light-content cream treatment, but the
   top hero is a full-bleed image with white text on a dark scrim. Force-
   override the generic wipe rules so the codex hero renders correctly.
============================================================================ */
body .CENTRE.light-content .hood-hero-full {
    background-color: #0f172a !important;  /* fallback while codex image loads */
    background-size: cover !important;
    background-position: center !important;
    height: 360px !important;
    border: none !important;
    box-shadow: none !important;
}
body .CENTRE.light-content .hhf-scrim {
    background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.05) 100%) !important;
    border: none !important;
    box-shadow: none !important;
}
body .CENTRE.light-content .hood-hero-full .hhf-name,
body .CENTRE.light-content .hood-hero-full h1.hhf-name {
    color: #ffffff !important;
    text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
body .CENTRE.light-content .hood-hero-full .hhf-label {
    color: rgba(255,255,255,.72) !important;
    letter-spacing: .18em;
}
body .CENTRE.light-content .hood-hero-full .hhf-tagline {
    color: rgba(255,255,255,.92) !important;
    text-shadow: 0 1px 8px rgba(0,0,0,.4);
    font-size: .95rem;
    line-height: 1.45;
    max-width: 640px;
}
body .CENTRE.light-content .hood-hero-full .hhf-stats,
body .CENTRE.light-content .hood-hero-full .hhf-stats span {
    color: rgba(255,255,255,.75) !important;
}
body .CENTRE.light-content .hood-hero-full .hhf-body,
body .CENTRE.light-content .hood-hero-full .hhf-quick-links {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
body .CENTRE.light-content .hood-hero-full .hhf-ql {
    background: rgba(255,255,255,.14) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    color: #ffffff !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    margin-right: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .2s ease;
}
body .CENTRE.light-content .hood-hero-full .hhf-ql:hover {
    background: rgba(255,255,255,.28) !important;
}
/* Watch placeholder panel */
body .CENTRE.light-content .hs-watch-placeholder {
    background: #f8fafc !important;
    border: 1px dashed var(--lc-border-strong) !important;
    border-radius: 10px;
    padding: 28px 22px;
    text-align: center;
    color: var(--lc-text-muted) !important;
}
body .CENTRE.light-content .hs-watch-placeholder i {
    font-size: 2rem;
    color: var(--content-accent);
    opacity: .55;
    margin-bottom: 10px;
    display: block;
}
body .CENTRE.light-content .hs-watch-placeholder p {
    margin: 4px 0;
    font-size: .85rem;
}
body .CENTRE.light-content .hs-watch-placeholder .hs-watch-hint {
    font-size: .7rem;
    opacity: .6;
    margin-top: 8px;
}