/* /assets/css/style.css
   Footer + layout unification layer (load AFTER /assets/css/site.css)

   Goals:
   - Same footer behavior across pages (desktop + mobile)
   - Footer + copyright ALWAYS inside the card/frame (no overlap)
   - style.css is the single source of truth for footer behavior
*/

/* =========================================================
   GLOBAL CARD WIDTH — single source of truth
========================================================= */
:root{
  --page-card-width: 880px;   /* set your universal width here */
}

/* Example: if you ever want playlist different width, change this */
body.page-playlist{
  --page-card-width: 880px;
}


/* =========================================================
   GLOBAL MAIN WIDTH (LAYOUT ONLY)
   Works for:
   - <main class="card" role="main">
   - <main class="page-card" role="main">
   - any <main role="main">
========================================================= */
main[role="main"]{
  width: min(var(--page-card-width), 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   Unified footer zone: divider + copyright
   (copyright line is inside the frame and always below footer)
========================================================= */
.footer-zone-divider{
  height: 1px;
  background: rgba(255,255,255,.14);
  margin: 16px 0;
}

.footer-zone-copy{
  text-align: center;
  color: rgba(255,255,255,.70);
  font-size: 13px;
  letter-spacing: .02em;
  padding: 4px 0 0;
  margin-top: 12px;
}

/* Optional: if you wrap footer parts in .footer-zone */
.footer-zone{
  display: flex;
  flex-direction: column;
}

/* =========================================================
   Bottom nav — unified, in-flow everywhere (NO overlap)
   - Not fixed, not sticky
   - Always inside the card/frame
   - Mobile: grid
   - Desktop: flex row
========================================================= */
.bottom-nav{
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;

  width: 100%;
  margin-top: 18px;

  background: transparent !important;
  border-top: 0 !important;
  padding: 0 !important;

  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Keep nav content aligned to the card width */
.bottom-nav .inner{
  max-width: var(--page-card-width);
  margin: 0 auto;
}

/* Mobile: consistent button grid */
@media (max-width: 899px){
  .bottom-nav .inner{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .bottom-nav .navlink{
    width: 100%;
    min-width: 0 !important;
    flex: none !important;
  }
}

/* Desktop: one-row flex */
@media (min-width: 900px){
  .bottom-nav .inner{
    display: flex !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;

    /* neutralize any older "bar" framing */
    border-top: 0 !important;
    padding: 0 !important;
  }
  .bottom-nav .navlink{
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}

/* =========================================================
   Safety: neutralize any legacy page-index footer framing
========================================================= */
.page-index .bottom-nav .inner{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* =========================================================
   Footer layout order (optional)
   If you use .footer-zone and want nav above copyright,
   keep these. If you don't have .footer-zone in HTML,
   they do nothing.
========================================================= */
.footer-zone .bottom-nav{ order: 1; }
.footer-zone .footer-zone-divider{ order: 2; }
.footer-zone .footer-zone-copy{ order: 3; }