/* MusicXen theme pack: blue2
   Recreates the original 2011 MusicXen look.
   A theme is ONLY this file: override the custom properties below.
   No application code changes are needed to add a new color scheme. */

:root {
  --mx-primary: #0e5aff;        /* electric blue */
  --mx-primary-dark: #0a3fb8;
  --mx-primary-glow: rgba(14, 90, 255, 0.55);

  --mx-bg: #0b0b0d;             /* page background, near-black */
  --mx-bg-gradient: radial-gradient(ellipse at 50% -10%, #1a1d24 0%, #0b0b0d 60%);

  --mx-panel: #222;             /* dark panels */
  --mx-panel-alt: #1a1a1a;
  --mx-border: #000;            /* black borders */
  --mx-border-soft: #333;

  --mx-text: #d6d6d6;           /* gray/white text */
  --mx-text-bright: #ffffff;
  --mx-text-dim: #8a8a8a;

  --mx-header-bg: #333333;   /* 2011 headercontainer gray (not black) */
  --mx-nav-bg: #333333;   /* 2011 gray menu bar (per Clint) */
  --mx-nav-bg-gradient: linear-gradient(to bottom, #4a4a4a 0%, #333333 50%, #2a2a2a 100%);
  --mx-footer-bg: #111114;

  --mx-link: #0e5aff;
  --mx-link-hover: #5b8cff;

  --mx-input-bg: #111;
  --mx-input-border: #000;
  --mx-input-text: #e8e8e8;

  --mx-btn-bg: linear-gradient(#2b6bff, #0e5aff);
  --mx-btn-text: #ffffff;
  --mx-btn-border: #000;

  /* 2011 header artwork (recovered original PNGs, v0.14.0). Only blue2 —
     the "original 2011 look" theme — sets these; other themes fall back
     to their current flat styling via the var() defaults in base.css.
     NOTE: the header bar itself is a CSS gradient below, sampled
     pixel-by-pixel from Clint's 2011 reference — neither recovered
     1x25 slice reproduces the 2011 bar (dark top edge, peak ~1/4 down,
     fading to black). */
  --mx-nav-btn-bg-img: url(/static/img/theme/blue2/TopMenuBack.png);
  --mx-nav-btn-active-bg-img: url(/static/img/theme/blue2/TitleBackActive.png);
  --mx-titlebar-bg-img: url(/static/img/theme/blue2/TitleBack.png);
  --mx-nav-text: #5b8cff;             /* blue link text on the gray 3D strip */
  --mx-nav-active-text: #ffffff;
  --mx-nav-btn-border: #000;
  --mx-nav-btn-gap: 0;   /* v0.44.3: buttons connected, no gaps (per Clint, 2011) */
  --mx-nav-btn-text-shadow: 2px 2px 3px #000;
}

/* 2011 header: PNG bar repeated across (repeat-x) at its natural 25px
   height, logo straddling it — the logo hangs partly below the bar on
   the 2011 gray, matching the original site. No bright slab at the top,
   no blue divider under the header.
   The overlap is done on the flex container (.mx-header-inner), not the
   flex item, so it renders identically at every viewport width. */
header.mx-header {
  border-bottom: 0;
  box-shadow: none;
}
.mx-header > .mx-header-strip {
  height: 25px;
  background: url(/static/img/theme/blue2/TitleBackbar.png?v=0.53.0) repeat-x;
  /* v0.44.3: THE actual 2011 header bar — TitleBackbar.png from Clint's
     'MusicXen (Most recent backup from DevXile)'. Symmetric blue-black-blue:
     blue top == blue bottom, black middle, black edges. */
}
/* 2011 header: wordmark only, no guitar icon (per Clint's 2011 reference
   2026-10-02 — the original header never had the guitar). The wordmark
   sits up in the bar (top ~4px below the bar's top edge), hanging below it. */
.mx-header > .mx-header-inner {
  margin-top: -41px;
  position: relative;
}
/* v0.44.3: wordmark like 2011 — 102px tall (4.07x bar), top 12px above bar */
.mx-header .mx-logo img { height: 102px; display: block; }
@media (max-width: 760px) {
  /* v0.44.3: logo back down (per Clint) — top at bar level */
  .mx-header > .mx-header-inner { margin-top: -33px; }
  /* v0.44.3: gray bar even shorter — less bottom padding (per Clint) */
  /* v0.44.3: gray bar shorter still (per Clint) */
  .mx-header-inner { padding-bottom: 0 !important; }
  /* v0.44.3: 30px, sits a bit lower (per Clint) */
  .mx-header .mx-logo img { height: 30px; }
  .mx-header .mx-tagline {
    left: 170px; right: 48px; font-size: 10px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }

}
/* v0.44.3: slogan under the blue strip (per Clint) — pushed below
   the bar, clear of the overlapping wordmark; lowered a bit more per Clint */
/* v0.44.3: gray bar under the blue strip shorter (per Clint) */
/* v0.44.3: slogan up a little (per Clint) — it was the slogan, not the logo */
/* v0.44.3: slogan up a little more, gray bar shorter (per Clint) */
/* v0.44.3: slogan up a little more, gray bar shorter (per Clint); logo stays */
/* v0.44.3: slogan italic (per Clint) */
.mx-header .mx-tagline {
  margin-top: 24px;
  font-size: 12px;
  font-style: italic;
}

/* v0.44.3: 2011 3D menu buttons (per Clint) — the mobile hamburger menu
   looked flat/terrible. Use the 2011 PNGs stretched to fill (background-size),
   not repeat-x (buttons are taller than the 25px PNGs, which left flat blue
   at the bottom). Selected uses TitleBackActive.png (blue 3D), hover uses
   TitleBackHover.png (gray 3D). */
.mx-nav a {
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.mx-nav a:hover {
  background-image: url(/static/img/theme/blue2/TitleBackHover.png?v=0.53.0);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  color: #fff;
}
.mx-nav .mx-nav-inner a.active {
  background-color: transparent;
  background-image: none;
  /* v0.44.3: higher specificity beats base.css .mx-nav a.active (which
     paints the whole row blue) — blue hugs the label span only, per Clint */
}

/* v0.44.3: desktop slogan below the strip like mobile (per Clint) —
   it was crammed next to the logo; now full-width under the strip */
@media (min-width: 761px) {
  .mx-header-inner { flex-wrap: wrap; }
  .mx-header .mx-tagline {
    flex-basis: 100%;
    margin-top: 0;
    padding: 2px 0 4px 8px;
  }
}

/* v0.44.3: compact desktop menu buttons (per Clint) — 2 continuous bars;
   tighter padding/font so all buttons fit in 2 rows */
@media (min-width: 761px) {
  .mx-nav a { padding: 8px 10px; font-size: 12px; }
  .mx-nav-inner { flex-wrap: nowrap; }
}

/* v0.44.3: header utility links top-right (per Clint, 2011 pattern) —
   Log in / Join / theme toggle live here, not in the menu bars */
.mx-header-util {
  position: absolute;
  top: 30px;
  right: 12px;
  font-size: 12px;
  color: var(--mx-text-dim);
}
.mx-header-util a { color: var(--mx-nav-text); text-decoration: none; }
.mx-header-util a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 760px) {
  /* v0.44.3: hide header util on mobile (per Clint) — it overlapped the
     slogan; login lives in the hamburger menu instead */
  .mx-header-util { display: none; }
}

/* v0.44.3: mobile-only menu buttons (Log in / Join / theme) — hidden on
   desktop (they're in the header), shown in the hamburger menu on mobile */
.mx-mobile-only { display: none; }
@media (max-width: 760px) {
  .mx-nav.open .mx-mobile-only { display: block; }
}

/* v0.44.3: one menu bar, HOME left / login right, no button borders (per Clint) */
.mx-nav-right { margin-left: auto; display: flex; }
.mx-nav a { border: none; }
.mx-desktop-only { display: inline; }
@media (max-width: 760px) {
  .mx-desktop-only { display: none; }
  .mx-nav-right { margin-left: 0; }
}

/* v0.44.3: minimal logged-out nav anchors stay transparent on mobile
   (per Clint) — layout (HOME left / HELP right) lives in base.css */
@media (max-width: 760px) {
  .mx-nav.open .mx-nav-inner.mx-nav-minimal > a { background-image: none; }
}

/* v0.44.3: active blue hugs the text only (per Clint) — not the full-width
   bar. The label span gets the blue 3D; the link itself stays transparent
   (see .mx-nav .mx-nav-inner a.active above). */
.mx-nav-label { display: inline-block; }
.mx-nav .mx-nav-inner a.active .mx-nav-label {
  background-image: url(/static/img/theme/blue2/TitleBackActive.png?v=0.53.0);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 2px 12px;
  color: #fff;
}
/* v0.43.24: minimal nav — blue on the button, not the label (per Clint).
   The label stays transparent so the button's full-height blue shows. */
.mx-nav .mx-nav-inner.mx-nav-minimal > a.active .mx-nav-label,
.mx-nav .mx-nav-inner.mx-nav-minimal > a:hover .mx-nav-label {
  background: none !important;
  background-image: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 2011 band profile tabs (from BandPageMenu.php) — bandmenubuttons style */
.mx-band-tabs2011 { margin: 10px 0; }
.mx-band-tabs2011 .bandmenubuttons {
  display: inline-block;
  padding: 6px 14px;
  margin-right: 2px;
  text-shadow: 3px 3px 4px #000;
  background-color: #0E5AFF;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  background-image: url(/static/img/theme/blue2/TopMenuBack.png);
  background-size: 100% 100%;
  color: #5b8cff;
  text-decoration: none;
  font-weight: bold;
}
.mx-band-tabs2011 .bandmenubuttons:hover {
  background-color: gray;
  color: #fff;
  background-image: url(/static/img/theme/blue2/TitleBackHighLightProfileMenu.png);
  background-size: 100% 100%;
}
.mx-band-tabs2011 .bandmenubuttonsactive {
  background-color: #111;
  color: #fff;
  background-image: url(/static/img/theme/blue2/TitleBackHover.png);
  background-size: 100% 100%;
}

/* 2011 band logo header */
.mx-band-logo2011 {
  border: 1px solid #000;
  width: 365px;
  max-width: 100%;
  background: #111;
}
.mx-band-logo2011 img { width: 360px; height: 78px; display: block; }
.mx-band-logo2011 .mx-band-name-fallback {
  text-shadow: 3px 3px 4px #000;
  text-align: center;
  font-size: 32px;
  padding: 20px 10px;
  color: #fff;
}
.mx-band-links2011 {
  background-color: #222;
  text-align: center;
  border: 1px solid #000;
  padding: 4px;
  text-shadow: 3px 3px 4px #000;
  width: 365px;
  max-width: 100%;
  box-sizing: border-box;
}
.mx-band-links2011 a { color: #5b8cff; }

/* Lightbox for profile pics */
.mx-lightbox {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.9);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.mx-lightbox.open { display: flex; }
.mx-lightbox img { max-width: 90vw; max-height: 90vh; }
.mx-lightbox .mx-lb-close {
  position: absolute; top: 20px; right: 30px;
  color: #fff; font-size: 32px; cursor: pointer;
}
.mx-lightbox .mx-lb-prev, .mx-lightbox .mx-lb-next {
  position: absolute; top: 50%;
  color: #fff; font-size: 40px; cursor: pointer;
  padding: 10px; user-select: none;
}
.mx-lightbox .mx-lb-prev { left: 20px; }
.mx-lightbox .mx-lb-next { right: 20px; }
.mx-band-photo img { cursor: pointer; }