/* ── DG Channel Switcher — dg.church/ch-switcher.css ── */

/* Base: invisible passthrough — looks identical to the original logo div */
.ch-trigger {
  background: none; border: none; padding: 0;
  cursor: default; color: inherit;
  display: inline; line-height: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* Active: only when JS init() has run (ch-ready class added by JS) */
.ch-trigger.ch-ready {
  display: inline-flex; flex-direction: column;
  align-items: flex-start; gap: 3px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px; cursor: pointer;
  padding: 5px 9px 5px 7px; line-height: 1;
  touch-action: manipulation;
  transition: background .15s, border-color .15s;
}
.ch-trigger.ch-ready:hover,
.ch-trigger.ch-ready.ch-open {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.28);
}

/* Logo + caret row */
.ch-trigger-row {
  display: flex; align-items: center; gap: 7px;
}

/* Caret */
.ch-caret {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 400;
  color: var(--dim);
  transition: transform .18s ease;
  line-height: 1; flex-shrink: 0;
}
.ch-trigger.ch-open .ch-caret { transform: rotate(180deg); }

/* "CHANGE CHANNEL" hint */
.ch-hint {
  font-family: 'DM Sans', sans-serif;
  font-size: 7px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--dimmer);
  font-weight: 500; line-height: 1; color: rgba(240,237,231,.6);
}

/* ── DROPDOWN PANEL ── */
.ch-panel {
  display: none; position: absolute;
  top: calc(100% + 8px); left: 0;
  min-width: 220px;
  background: var(--card);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px; z-index: 200;
  box-shadow: 0 12px 40px rgba(0,0,0,.8);
  overflow: hidden;
}
.ch-panel.ch-open { display: block; }

/* Channel rows */
.ch-item {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 16px; text-decoration: none;
  color: var(--white); border-bottom: 1px solid var(--line);
  transition: background .12s;
  -webkit-tap-highlight-color: transparent;
}
.ch-item:last-of-type { border-bottom: none; }
.ch-item:hover      { background: rgba(255,255,255,.07); }
.ch-item.ch-current { background: rgba(255,255,255,.04); cursor: default; pointer-events: none; }

.ch-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.ch-item-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px; letter-spacing: .08em;
  flex: 1; line-height: 1;
}
.ch-item-tag {
  font-size: 8px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(240,237,231,.55); white-space: nowrap;
}
.ch-item.ch-current .ch-item-tag { color: rgba(240,237,231,.75); }

/* Hide in OBS/schedule mode */
body.obs .ch-trigger,
body.obs .ch-panel { display: none !important; }