/* ============================================================
   Trendslive — public site theme overrides
   Two-colour system: PRIMARY yellow (fills) + SECONDARY black.
   Loaded after each page's inline <style> so these win.
   ============================================================ */

/* ---- Header & footer are always the black secondary, in both modes ---- */
.nav,
.footer {
  background: var(--tl-secondary) !important;
  color: #f4f4f5;
  /* keep contents light-on-dark regardless of page theme */
  --tl-fg:            #f5f5f6;
  --tl-fg-2:          rgba(255,255,255,0.74);
  --tl-fg-3:          rgba(255,255,255,0.54);
  --tl-fg-4:          rgba(255,255,255,0.40);
  --tl-surface-1:     #161619;
  --tl-surface-2:     #1c1c20;
  --tl-surface-3:     #232329;
  --tl-border:        rgba(255,255,255,0.10);
  --tl-border-strong: rgba(255,255,255,0.20);
  --tl-divider:       rgba(255,255,255,0.12);
  /* yellow accents (logo dot, hovers, avatar initials) stay yellow on black */
  --tl-yellow-ink:    var(--tl-yellow);
}
/* the sticky nav often sets a translucent/blur bg inline — keep it solid black */
.nav { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ---- Hero text sits on an always-dark image, so keep it light in both modes ---- */
.hero-h { text-shadow: 0 2px 20px rgba(0,0,0,0.45); }
.hero-sub { text-shadow: 0 1px 10px rgba(0,0,0,0.40); }

:root[data-theme="light"] .hero-eyebrow { color: #ffffff; }
:root[data-theme="light"] .hero-h { color: #ffffff; }
:root[data-theme="light"] .hero-h .y { color: var(--tl-yellow); }
:root[data-theme="light"] .hero-sub { color: rgba(255,255,255,0.82); }
:root[data-theme="light"] .hstat .n { color: #ffffff; }
:root[data-theme="light"] .hstat .n .y { color: var(--tl-yellow); }
:root[data-theme="light"] .hstat .l { color: rgba(255,255,255,0.62); }

/* Event Detail hero — strengthen the dark scrim a touch behind the text block */
:root[data-theme="light"] .hero::after {
  background: linear-gradient(180deg, rgba(10,10,10,0.25) 0%, rgba(10,10,10,0.5) 55%, rgba(10,10,10,0.94) 100%);
}

/* ---- Yellow accents that sit on fixed-dark tiles / glass / image badges
        must stay yellow even in light mode (they'd otherwise go black-on-black) ---- */
:root[data-theme="light"] .hero-logo,
:root[data-theme="light"] .org-logo,
:root[data-theme="light"] .brand-logo,
:root[data-theme="light"] .fb-logo,
:root[data-theme="light"] .tlcard-cat-badge,
:root[data-theme="light"] .tlcard-brand-ov .vf,
:root[data-theme="light"] .ev-card .ec-date .m,
:root[data-theme="light"] .ec-date .m {
  color: var(--tl-yellow);
}

/* ---- Text on images must always be white regardless of light/dark mode ----
   This covers category tiles, event card brand overlays, and hero content.  */
.cat-sq .cs-label b,
.cat-sq .cs-label small,
.tlcard-brand-ov .bname,
.tlcard-cat-badge,
.hero-body h1,
.hero-body p,
.hero-body .tag,
.hero-h,
.hero-sub,
.ec-date .d,
.next-date .d {
  color: #fff !important;
}
/* Yellow accents on images stay yellow (not dark) */
:root[data-theme="light"] .cat-sq .cs-label small,
:root[data-theme="light"] .tlcard-cat-badge,
:root[data-theme="light"] .next-date .m,
:root[data-theme="light"] .ec-date .m {
  color: var(--tl-yellow) !important;
}
/* Highlighted active cat tile name turns yellow */
.cat-sq.on .cs-label b { color: var(--tl-yellow-ink) !important; }


/* ---- Profile banner headers (Organisation, Brand Detail) overlap the dark
        banner image AND can spill onto the light page below (long descriptions).
        In light mode, render the whole header as a black "secondary" profile card
        so every child — name, description, location, socials, buttons — keeps its
        dark-mode styling and stays legible no matter where it sits. ---- */
:root[data-theme="light"] .org-head,
:root[data-theme="light"] .brand-head {
  background: var(--tl-secondary);
  border-radius: var(--tl-r-xl);
  padding: 22px 24px;
  box-shadow: var(--tl-shadow-md);
  color: #f5f5f6;
  --tl-bg:             #0b0b0d;
  --tl-fg:             #f5f5f6;
  --tl-fg-2:           rgba(255,255,255,0.74);
  --tl-fg-3:           rgba(255,255,255,0.56);
  --tl-fg-4:           rgba(255,255,255,0.40);
  --tl-surface-1:      #161619;
  --tl-surface-2:      #1c1c20;
  --tl-surface-3:      #232329;
  --tl-border:         rgba(255,255,255,0.10);
  --tl-border-strong:  rgba(255,255,255,0.20);
  --tl-yellow-ink:     var(--tl-yellow);
}

/* ============================================================
   GREY SECONDARY CONTROLS → BLACK with white text (LIGHT mode)
   Search boxes, select boxes and segmented toggles that used the
   washed grey surface now read as solid black controls, matching
   the dashboards. Dark mode untouched; white hero searchbar and
   semantic chips are left alone.
   ============================================================ */
:root[data-theme="light"] .t-search,
:root[data-theme="light"] .seg,
:root[data-theme="light"] .searchbox,
:root[data-theme="light"] .selbox {
  background: var(--tl-secondary, #0b0b0d) !important;
  border-color: rgba(255,255,255,0.16) !important;
  color: #f4f4f5;
}
:root[data-theme="light"] .t-search:focus-within,
:root[data-theme="light"] .searchbox:focus-within { border-color: var(--tl-border-yellow) !important; }
:root[data-theme="light"] .t-search input,
:root[data-theme="light"] .searchbox input,
:root[data-theme="light"] .selbox,
:root[data-theme="light"] .selbox select { color: #f4f4f5; }
:root[data-theme="light"] .t-search input::placeholder,
:root[data-theme="light"] .searchbox input::placeholder { color: rgba(255,255,255,0.5); }
:root[data-theme="light"] .t-search svg,
:root[data-theme="light"] .searchbox svg,
:root[data-theme="light"] .selbox svg { color: rgba(255,255,255,0.62); }
/* segmented toggle: inactive options light, active stays yellow */
:root[data-theme="light"] .seg button { color: rgba(255,255,255,0.6); }
:root[data-theme="light"] .seg button.on { color: #161920; }