/* =========================================================
   LVGSO — Windows 98 pastel desktop theme
   Shared across every page: fonts, color tokens, base element
   styles, generic Win98 window chrome, navbar, buttons, footer,
   and the handful of components reused across more than one page
   (cards, the icon-pattern backdrop, the plain-gradient hero, the
   instrument pill, and the mascot-sprite divider).
   ========================================================= */

@font-face {
  font-family: "Pixelated MS Sans Serif";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/fonts/ms_sans_serif.woff2") format("woff2"),
    url("/assets/fonts/ms_sans_serif.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Pixelated MS Sans Serif";
  font-style: normal;
  font-weight: 700;
  src: url("/assets/fonts/ms_sans_serif_bold.woff2") format("woff2"),
    url("/assets/fonts/ms_sans_serif_bold.woff") format("woff");
  font-display: swap;
}

:root {
  /* desktop */
  --win-desktop: #a9b8ea;
  --win-desktop-deep: #93a6e6;

  /* window / button faces */
  --win-face: #f8d5e6;
  --win-face-deep: #f3a9cd;
  --win-cyan: #93e3e8;
  --win-cyan-deep: #5fc9d1;
  --win-yellow: #fbe7a4;
  --win-yellow-deep: #f0cf6e;

  /* console-style panel (MS-DOS nod) */
  --win-console-bg: #15393c;
  --win-console-text: #eafff2;

  /* text */
  --win-text: #351a3d;
  --win-text-onblue: #241540;
  --win-text-soft: #5c3a63;
  --win-titlebar-text: #4a1f45;

  /* bevel ramp */
  --win-dark: #7a3868;
  --win-mid: #cf9dbb;
  --win-lightest: #ffffff;
  --win-light: #ffeef7;
  --win-well: #fbeedd;

  --bevel-raised: inset -1px -1px var(--win-dark), inset 1px 1px var(--win-lightest),
    inset -2px -2px var(--win-mid), inset 2px 2px var(--win-light);
  --bevel-inset: inset 1px 1px var(--win-dark), inset -1px -1px var(--win-lightest),
    inset 2px 2px var(--win-mid), inset -2px -2px var(--win-light);
  --bevel-well: inset 1px 1px var(--win-mid), inset -1px -1px var(--win-lightest);

  --font-pixel: "Pixelated MS Sans Serif", Tahoma, Arial, sans-serif;
  --font-ui: Tahoma, Verdana, Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  font-family: var(--font-ui);
  color: var(--win-text-onblue);
  background: var(--win-desktop);
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-heading {
  font-family: var(--font-pixel);
  color: var(--win-text-onblue);
  font-weight: 700;
  -webkit-font-smoothing: none;
  letter-spacing: 0;
}

a {
  color: #1e3f9e;
}

a:hover {
  color: #12297a;
}

/* -----------------------------------------------------------
   Scrollbar (WebKit/Blink only — graceful no-op elsewhere)
   ----------------------------------------------------------- */
::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-track {
  background: var(--win-well);
  box-shadow: var(--bevel-well);
}

::-webkit-scrollbar-thumb {
  background: var(--win-face);
  box-shadow: var(--bevel-raised);
}

::-webkit-scrollbar-corner {
  background: var(--win-well);
}

/* -----------------------------------------------------------
   Generic Win98 window chrome
   ----------------------------------------------------------- */
.win98-window {
  background: var(--win-face);
  box-shadow: var(--bevel-raised);
  padding: 3px;
}

.win98-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: linear-gradient(90deg, var(--win-face-deep), var(--win-cyan));
  padding: 0.35rem 0.6rem;
}

.win98-titlebar-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.win98-titlebar-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  image-rendering: pixelated;
}

.win98-titlebar-text {
  font-family: var(--font-pixel);
  font-weight: 700;
  color: var(--win-titlebar-text);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win98-controls {
  display: flex;
  gap: 3px;
  flex: 0 0 auto;
}

.win98-controls span,
.win98-controls button {
  width: 1.05rem;
  height: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--win-face);
  box-shadow: var(--bevel-raised);
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  line-height: 1;
  color: var(--win-titlebar-text);
  border: none;
  padding: 0;
  cursor: default;
}

.win98-controls button {
  cursor: pointer;
}

.win98-controls button:active {
  box-shadow: var(--bevel-inset);
}

.win98-body {
  padding: 1rem;
}

/* -----------------------------------------------------------
   Navbar — single title bar
   ----------------------------------------------------------- */
.lvgso-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: var(--bevel-raised);
}

.win98-navbar-bar {
  background: linear-gradient(90deg, var(--win-face-deep), var(--win-cyan));
  padding: 0.5rem 0;
}

.navbar-brand {
  display: flex;
  align-items: center;
  min-width: 0;
}

.brand-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.brand-badge img {
  width: 32px;
  image-rendering: pixelated;
}

.brand-text {
  font-family: var(--font-pixel);
  font-weight: 700;
  color: var(--win-titlebar-text);
  font-size: 0.95rem;
  margin-left: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.navbar-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.navbar-nav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--win-text);
  padding: 0.3rem 0.65rem;
  border-radius: 0;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  background: var(--win-face-deep);
  color: var(--win-titlebar-text);
}

.navbar-nav .nav-link.active {
  background: var(--win-face);
  color: var(--win-titlebar-text);
  box-shadow: var(--bevel-inset);
}

.nav-current-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  image-rendering: pixelated;
}

.navbar-toggler {
  border-radius: 0;
  background: var(--win-face);
  box-shadow: var(--bevel-raised);
  border: none;
  padding: 0.35rem 0.5rem;
}

.navbar-toggler:active {
  box-shadow: var(--bevel-inset);
}

.navbar-toggler:focus {
  box-shadow: var(--bevel-raised);
}

/* -----------------------------------------------------------
   Buttons
   ----------------------------------------------------------- */
.btn-lvgso-primary,
.btn-lvgso-outline {
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 0.8rem;
  border: none;
  border-radius: 0 !important;
  color: var(--win-text);
  background: var(--win-face);
  box-shadow: var(--bevel-raised);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.btn-lvgso-primary:hover,
.btn-lvgso-outline:hover,
.btn-lvgso-primary:focus,
.btn-lvgso-outline:focus {
  color: var(--win-text);
  background: var(--win-face);
}

.btn-lvgso-primary:active,
.btn-lvgso-outline:active {
  box-shadow: var(--bevel-inset);
  transform: translate(1px, 1px);
}

.btn-lvgso-primary {
  background: var(--win-face-deep);
}

/* -----------------------------------------------------------
   Section framing
   ----------------------------------------------------------- */
.lvgso-section {
  padding: 3.5rem 0;
  scroll-margin-top: 96px;
}

.lvgso-section.alt {
  background: var(--win-desktop-deep);
}

.section-lead {
  color: var(--win-text-onblue);
  max-width: 44rem;
  font-family: var(--font-ui);
}

/* -----------------------------------------------------------
   Cards — mini windows. Used by the Events "no events" card, the
   Members cards, and the member bio page.
   ----------------------------------------------------------- */
.lvgso-card {
  background: var(--win-face);
  box-shadow: var(--bevel-raised);
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-titlebar {
  background: linear-gradient(90deg, var(--win-face-deep), var(--win-cyan));
  padding: 0.35rem 0.6rem;
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--win-titlebar-text);
}

.card-titlebar.variant-cyan {
  background: linear-gradient(90deg, var(--win-cyan-deep), var(--win-face-deep));
}

.card-titlebar.variant-yellow {
  background: linear-gradient(90deg, var(--win-yellow-deep), var(--win-face-deep));
}

.lvgso-card h5 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.85rem;
}

.card-body-inner {
  padding: 1.1rem;
  flex: 1 1 auto;
}

.card-body-inner p {
  font-family: var(--font-ui);
}

/* -----------------------------------------------------------
   Tiled icon-pattern backdrop — used behind the Gallery section
   (home) and any hero with no provided photo (Events, Members,
   member bio pages). The tile defaults to the Windows 98 desktop
   icon sheet, but assets/js/sprite-pattern.js overrides
   --icon-pattern-tile at runtime with a canvas tile composited
   from every sprite in assets/img/characters/players/, so new
   sprites show up automatically. A separate dark tint (::after)
   sits on top of the pattern so it reads as a subtler backdrop
   and doesn't fight with text placed over it.
   ----------------------------------------------------------- */
.win98-icon-pattern {
  position: relative;
  z-index: 0;
}

.win98-icon-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--icon-pattern-tile, url("/assets/img/icons/win98-pattern-tile.png"));
  background-repeat: repeat;
  opacity: 0.35;
  z-index: -1;
  pointer-events: none;
}

.win98-icon-pattern::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 10, 30, 0.08);
  z-index: -1;
  pointer-events: none;
}

/* -----------------------------------------------------------
   Plain-gradient hero — used by Events, Members, and the member
   bio page (pages with no dedicated hero photo; see
   .win98-icon-pattern above for the backdrop layered on top).
   Its pattern is faded further than the Gallery's own (below) so
   the hero heading/lead text stays easy to read.
   ----------------------------------------------------------- */
.events-hero {
  padding: 4rem 0 3.5rem;
  background: linear-gradient(160deg, var(--win-face) 0%, var(--win-cyan) 55%, var(--win-desktop) 100%);
}

.events-hero.win98-icon-pattern::before {
  opacity: 0.15;
}

.events-hero h1,
.events-hero .section-lead {
  color: var(--win-dark);
}

/* -----------------------------------------------------------
   Instrument/category pill — used by Events (rehearsal/concert/
   social badges) and Members (instrument badges).
   ----------------------------------------------------------- */
.event-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--win-well);
  color: var(--win-text);
  box-shadow: var(--bevel-well);
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 0.65rem;
  padding: 0.2rem 0.6rem;
}

.event-badge-pill img {
  width: 14px;
  height: 14px;
  image-rendering: pixelated;
}

/* -----------------------------------------------------------
   Mascot-sprite divider — used on the home page and the Events
   calendar section.
   ----------------------------------------------------------- */
.character-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.character-divider img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}

/* -----------------------------------------------------------
   Footer — single status bar
   ----------------------------------------------------------- */
.lvgso-footer {
  background: var(--win-face);
  box-shadow: var(--bevel-raised);
  margin: 0;
  padding: 1rem;
}

.footer-copy {
  color: var(--win-text);
  font-size: 0.75rem;
  font-family: var(--font-ui);
}