/* ===========================
   Base (safe + minimal)
   =========================== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; line-height: 1.5; }

body {
  background: #0b0f15;         /* deep navy */
  color: #ece5d3;              /* warm off-white */
  font-family: "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.container { width: 90%; max-width: 1080px; margin: 0 auto; padding: 24px 0; }

header, footer { text-align: center; padding: 20px 0; }
footer { font-size: .85rem; opacity: .7; }

h1, h2, h3, h4, h5 {
  font-family: Georgia, "Times New Roman", serif;
  margin-bottom: .6em;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }

/* ===========================
   Buttons & Alerts (reusable)
   =========================== */
.btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s ease, opacity .2s ease;
}
.btn.btn-primary { background: #e5e5e5; color: #111; }
.btn.btn-primary:hover { background: #d0d0d0; }

.btn.btn-secondary { background: #d9ccb7; color: #111; }
.btn.btn-secondary:hover { background: #c9bca7; }

.alert {
  max-width: 720px;
  margin: 0 auto 16px;
  padding: 12px 14px;
  border-radius: 8px;
}
.alert-success { background: rgba(31,95,42,.25); border: 1px solid rgba(42,161,75,.5); }
.alert-error   { background: rgba(127,29,29,.25); border: 1px solid rgba(220,38,38,.5); }

.back-to-top { margin-top: 32px; text-align: center; font-size: .85rem; }
.back-to-top a { text-decoration: underline; opacity: .85; }

/* ============================================================
   HEADER NAV (matches header.php) — CLEAN TEXT LINKS
   ============================================================ */
.nav-desktop-wrap { display: block; margin: 0 auto 8px; }
.nav-mobile { display: none; }

.mobile-menu[hidden] { display: none !important; } /* respect [hidden] */

/* Desktop table nav */
.nav-desktop { border-collapse: collapse; width: 100%; }
.nav-desktop td { padding: 8px 0; text-align: center; }

/* Plain text nav links (no pill, no background) */
.nav-link {
  display: inline-block;
  padding: 4px 6px;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 0;
  background: transparent !important;
  color: #ece5d3;
}
.nav-link:hover,
.nav-link:focus {
  background: transparent !important;
  text-decoration: underline;
}
.nav-link:focus {
  outline: 2px solid #d9ccb7;
  outline-offset: 2px;
}

/* Hamburger button */
.hamburger{
  background:#ece5d3; color:#111;
  border:0; padding:8px 12px;
  border-radius:8px; font-weight:600;
}

/* Breakpoint matches your <picture> media="(max-width:700px)" */
@media (max-width: 700px) {
  .nav-desktop-wrap { display: none !important; height: 0 !important; overflow: hidden !important; }
  .nav-mobile { display: block !important; position: relative; z-index: 50; }
}

/* underline current page link */
.nav-link.current { text-decoration: underline !important; }

/* ============================================================
   PAGE: Contact  (scoped—won’t affect the header/nav)
   ============================================================ */
.page.contact .contact-form {
  max-width: 720px;
  margin: 0 auto;
}

.page.contact .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) {
  .page.contact .grid { grid-template-columns: 1fr; }
}

.page.contact label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  letter-spacing: .2px;
}

.page.contact input[type="text"],
.page.contact input[type="email"],
.page.contact select,
.page.contact textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  color: #f2f2f2;
  outline: none;
}
.page.contact textarea { min-height: 180px; }

.page.contact .actions {
  margin-top: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* Honeypot stays hidden */
.page.contact .hp { position: absolute; left: -9999px; top: -9999px; opacity: 0; }

/* OR separator + alt action */
.page.contact .or-sep {
  max-width: 720px;
  margin: 10px auto;
  text-align: center;
  opacity: .75;
  letter-spacing: .08em;
}
.page.contact .alt-action {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

/* ===== Homepage utilities & hero layout ===== */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: 1fr; }
@media (min-width: 800px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}

/* Section spacing */
.section { padding: 1.2rem 0; }
.section.hero { padding: 1.2rem 0; }

/* Hero specifics */
.hero-grid > * { min-width: 0; }
.hero-img {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
  border-radius: .5rem;
}
.hero-copy { max-width: 62ch; }

@media (max-width: 799px) {
  .hero-img {
    max-width: 92vw;
    max-height: 70vh;
    object-fit: contain;
    margin: 0 auto;
  }
  .prose p {
    font-size: 1.05em;
    line-height: 1.75;
    margin-bottom: 1rem;
  }
}

/* ===== Bandcamp embeds */
.bandcamp-desktop { display: none; }
.bandcamp-mobile  { display: block; }
@media (min-width: 800px) {
  .bandcamp-desktop { display: block; }
  .bandcamp-mobile  { display: none; }
}

/* Callout */
.callout {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  opacity: 1;
}
@media (min-width: 800px) {
  .callout {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }
}

/* ======================================================================
   FOOTER (canonical rules)
   ====================================================================== */
.site-footer { opacity: 1; }
.footer-inner { max-width: 1100px; margin: 0 auto; }

.footer-social {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.footer-social li { line-height: 0; }

.site-footer .footer-social img {
  width: 24px !important;
  height: 24px !important;
  max-width: none !important;
  display: block;
}
@media (min-width: 480px) {
  .site-footer .footer-social img { width: 28px !important; height: 28px !important; }
}
@media (min-width: 700px) {
  .site-footer .footer-social img { width: 36px !important; height: 36px !important; }
}
@media (min-width: 1100px) {
  .site-footer .footer-social img { width: 44px !important; height: 44px !important; }
}

.footer-copy { opacity: .75; font-size: .95rem; }

/* Listen section */
.listen-sec { margin: 3rem 0; }
.listen-title { font-size: 1.75rem; margin: 0 0 1rem; text-align: center; }
.listen-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.listen-card { background: #111; border: 1px solid #222; border-radius: 16px; padding: 1rem; }
.song-title { font-size: 1.2rem; margin: 0 0 .25rem; }
.song-meta { font-size: .9rem; opacity: .7; margin-bottom: .5rem; }
.platforms { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.platform-link img { display: block; height: 36px; width: auto; }
.platform-link .btn { display: inline-block; padding: .4rem .7rem; border: 1px solid #444; border-radius: 10px; font-size: .9rem; }
.platform-link:hover .btn { border-color: #777; }

/* ======================================================================
   SCHEDULE (compact single-stream with left date/time column)
   ====================================================================== */
.sched {
  --text: #ece5d3;
  --muted: #9aa1ab;
  color: var(--text);
}

.sched-month { margin: 22px 0 28px; }
.sched-month__title { margin: 0 0 12px; font-weight: 800; font-size: 20px; color: var(--text); }
.sched-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

/* Wider left column so time stays on one line */
.sched-card {
  display: grid;
  grid-template-columns: 176px 1fr;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--card-bd, #223045);
  border-radius: 12px;
  background: var(--card-bg, #0f1620);
  color: var(--text);
}

/* Per-type card palettes (Open Mic subdued) */
.sched-card.type-openmic     { --card-bg:#0c1016; --card-bd:#1f2a37; }
.sched-card.type-show        { --card-bg:#0e233a; --card-bd:#2a4161; }
.sched-card.type-announcement{ --card-bg:#1b1507; --card-bd:#3a2f12; }
.sched-card.type-songrelease { --card-bg:#1d1314; --card-bd:#3b1f21; }
.sched-card.type-appearance  { --card-bg:#151226; --card-bd:#2b254a; }
.sched-card.type-other       { --card-bg:#101820; --card-bd:#253243; }

.sched-date { text-align: left; }
.sched-date__dow  { font-weight: 700; }
.sched-date__md   { color: var(--muted); }
.sched-date__time { color: var(--muted); margin-top: 2px; white-space: nowrap; }

.sched-info { min-width: 0; }

.sched-info__top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.sched-info__title { font-weight: 800; margin-bottom: 2px; }
.sched-info__meta  { color: var(--muted); }

.sched-none { padding: 12px 14px; border:1px dashed #2a3240; border-radius:12px; color: var(--muted); }

@media (max-width: 640px) {
  .sched-card { grid-template-columns: 148px 1fr; padding: 12px 14px; gap: 12px; }
}

/* ===== Schedule Type Pills ===== */
.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
  margin-left: 8px;
  color: #fff;
}

.pill-openmic      { background: #374151; }
.pill-show         { background: #2563eb; }
.pill-announcement { background: #d97706; color:#111; }
.pill-songrelease  { background: #b91c1c; }
.pill-appearance   { background: #7c3aed; }
.pill-other        { background: #64748b; }

/* ===== Social: Connect grid ===== */
.connect-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.connect-grid > a,
.connect-grid > li,
.connect-grid > div {
  display: block;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 12px;
  padding: 10px 12px;
  text-align: center;
  font-weight: 700;
  line-height: 1.2;
  min-height: 64px;
}
.connect-grid > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 700px) {
  .connect-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
@media (min-width: 1000px) {
  .connect-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ===== MEDIA page ===== */
.media-wrap{ width:min(1200px, 90vw); margin:8px auto 14px; }
.watch-section .section-title{ margin: 1rem 0; }
.media-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:800px){ .media-grid{ grid-template-columns:1fr 1fr; } }
.video{
  position:relative; width:100%; aspect-ratio:16 / 9;
  background:#0f1823; border:1px solid #1b2635; border-radius:12px; overflow:hidden;
}
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Song card platform badges */
.song-card .platform-badges { margin-top: 0.75rem; }
.song-card .platform-badges a { display: block; margin: 0.3rem 0; }
.song-card .platform-badges img {
  max-height: 28px;
  width: auto;
  display: inline-block;
}

/* Belt-and-suspenders for mobile menu overlay */
#mobileMenu[hidden] { display: none !important; visibility: hidden !important; pointer-events: none !important; }

/* === Mobile menu: dark background + fade-in (single canonical block) === */
@media (max-width: 700px) {
  /* Panel */
  .nav-mobile .mobile-menu{
    position: absolute;
    left: 16px; right: 16px; margin-top: 8px;
    padding: 10px;
    display: flex; flex-direction: column; gap: 10px;

    /* visual */
    background: rgba(0, 0, 0, 0.75);   /* slightly more see-through */
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 12px;
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    color: #fff;
    z-index: 60;

    /* motion */
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .25s ease, transform .25s ease;
  }

  /* Visible when [hidden] is removed by your toggle */
  .nav-mobile .mobile-menu:not([hidden]) {
    opacity: 1;
    transform: translateY(0);
  }

  /* Links */
  .nav-mobile .mobile-menu a{
    display: block;
    padding: 12px;
    border-radius: 10px;
    text-align: center;
    font-weight: 700;
    color: #fff;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.20);
    text-decoration: none;
  }
  .nav-mobile .mobile-menu a:hover{ background: rgba(255,255,255,0.10); }
}
/* === Desktop nav sizing hard-lock (prevents mobile bleed) ============== */
@media (min-width: 701px) {
  /* Ensure desktop version shows and has the intended scale */
  .nav-desktop-wrap { display: block !important; }
  .nav-mobile { display: none !important; }

  .nav-desktop .nav-link {
    font-size: clamp(1.35rem, 1.2vw + 1rem, 1.80rem) !important;
    font-weight: 800;
    letter-spacing: .02em;
    padding: 4px 6px !important;
    margin: 0 .9rem !important;
    background: transparent !important; /* belt & suspenders */
  }

  .nav-desktop td { padding: 12px 0 !important; }
}