/* LCH Header (v1.2.0) */
.lch-header {
  --lch-bg: #170078;
  --lch-pill-bg: #2a1f84;
  --lch-text: #ffffff;
  --lch-accent: #ff1f6d;

  color: var(--lch-text);
  background: var(--lch-bg);
  width: 100%;
  padding: 16px 24px 8px 24px;
  box-sizing: border-box;
}

.lch-header__row { display: grid; align-items: center; }
.lch-header__row--top { grid-template-columns: 1fr 2fr 1fr; gap: 16px; }
.lch-header__row--bottom { margin-top: 8px; display:flex; justify-content:center; }

.lch-header__logo { max-height: 42px; height: 42px; width: auto; display: block; }

/* Pill */
.lch-pill {
  background: var(--lch-pill-bg);
  border-radius: 999px;
  padding: 10px 16px;
  display: grid;
  grid-template-columns: auto 1fr 1.5fr;
  align-items: center;
  gap: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,.15) inset;
  position: relative;
}

.lch-pill__play {
  width: 40px; height: 40px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--lch-play-bg, #fff); display: grid; place-items: center;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  transition: background-color .2s ease, transform .1s ease;
}
.lch-pill__play.is-playing { background: var(--lch-play-bg-playing, var(--lch-accent)); }
.lch-pill__play:active { transform: scale(0.97); }

.lch-pill__play.is-playing { outline: 3px solid var(--lch-accent); }

.lch-play {
  position: relative; width: 0; height: 0;
  border-left: 12px solid var(--lch-accent);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  transition: all .2s ease;
}
.lch-play.pause {
  width: 14px; height: 14px; border: none; 
}
.lch-pill__play.is-playing .lch-play.pause::before,
.lch-pill__play.is-playing .lch-play.pause::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 4px;
  background: #ffffff;  /* pause bars color */
  border-radius: 1px;
}
.lch-pill__play.is-playing .lch-play.pause::before { left: 2px; }
.lch-pill__play.is-playing .lch-play.pause::after  { right: 2px; }

.lch-play.pause { 
  width: 12px; height: 12px; border: none; 
  box-shadow: inset 0 0 0 4px var(--lch-accent), inset -6px 0 0 0 var(--lch-accent);
  background: transparent;
}

.lch-pill__title { display: block; font-size: 12px; letter-spacing: .08em; opacity: .9; text-transform: uppercase; }
.lch-meta-artist { display:block; font-size: 12px; opacity: .9; margin-top: 2px; }
.lch-pill__headline { display: block; font-size: 14px; white-space: nowrap; }
.lch-pill__sub { display: block; font-size: 12px; opacity: .9; }

/* Social */
.lch-header__social { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.lch-icon { width: 28px; height: 28px; display: inline-block; }
.lch-icon--fb { mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="white" d="M22 12a10 10 0 1 0-11.5 9.9v-7h-2v-2.9h2v-2.2c0-2 1.2-3.1 3-3.1c.9 0 1.8.1 1.8.1v2h-1c-1 0-1.3.6-1.3 1.2v2h2.2L14 15h-2v7A10 10 0 0 0 22 12"/></svg>') center / contain no-repeat; background: #fff; }
.lch-icon--ig { mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="white" d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm5 3a6 6 0 1 1 0 12a6 6 0 0 1 0-12m0 2a4 4 0 1 0 0 8a4 4 0 0 0 0-8m5.5-.75a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5"/></svg>') center / contain no-repeat; background: #fff; }

/* Menu */
.lch-nav { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; justify-content: center; }
.lch-nav li { margin: 0; }
.lch-nav a { color: var(--lch-text); text-decoration: none; font-weight: 600; letter-spacing: .03em; }
.lch-nav a:hover { opacity: .85; }

/* Responsive */
@media (max-width: 1024px) {
  .lch-header__row--top { grid-template-columns: 1fr; gap: 10px; }
  .lch-header__social { justify-content: flex-start; }
  .lch-pill { grid-template-columns: auto 1fr; }
  .lch-pill__now { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .lch-nav { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; justify-content: center; }
  .lch-header { padding: 14px 16px; }
}


/* ===== LCH Header v1.3.4 — Mobile centering & layout fixes ===== */
@media (max-width: 780px) {
  .lch-header { padding: 14px 16px; text-align: center; }
  .lch-header__row--top { grid-template-columns: 1fr; gap: 12px; }
  .lch-header__left,
  .lch-header__center,
  .lch-header__right { display: flex; justify-content: center; }
  .lch-header__social { justify-content: center; }
  .lch-pill { margin: 0 auto; grid-template-columns: auto 1fr; }
  .lch-pill__text, .lch-pill__now { text-align: center; }
}
@media (max-width: 1024px) {
  .lch-header__row--bottom { display: flex; justify-content: center; }
  .lch-nav { justify-content: center; }
}
/* optional: ensure logo link behaves inline */
.lch-logo-link { display: inline-flex; align-items: center; }
.lch-logo-link img { display: block; }


/* Play-only shortcode */
.lch-playonly { display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; }
.lch-playonly .lch-pill__play { width: 52px; height: 52px; }
@media (max-width: 780px) {
  .lch-playonly { justify-content: center; }
}