/* ----------------------------------------------------
   ForgottenMelodies — Clean Vintage Sheet Music Theme
   Namespace: mg-
   Classical + Modern + Musical
   ---------------------------------------------------- */

/* ----------------------------------------------------
   ROOT VARIABLES
   ---------------------------------------------------- */
:root {
  /* Clean vintage palette */
  --mg-paper: #f5f1e8;            /* Soft musical manuscript cream */
  --mg-ink: #2f2b26;             /* Warm dark brown, elegant ink */
  --mg-accent: #b89d5d;          /* Gold-like accent */
  --mg-accent-light: #d7c89a;    /* Lighter gold for soft elements */
  --mg-muted: #8f8779;

  /* Motion */
  --mg-motion-fast: 150ms;
  --mg-motion-med: 260ms;
  --mg-motion-slow: 420ms;
  --mg-easing: cubic-bezier(.22,.61,.36,1);

  /* Layout */
  --mg-max-width: 760px;
  --mg-space: 36px;

  /* Typography — Modern Serif */
  --mg-serif: Georgia, Cambria, "Times New Roman", Times, serif;

  /* Radius + Shadows */
  --mg-radius: 6px;
  --mg-shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ----------------------------------------------------
   GLOBAL + BODY BACKGROUND
   ---------------------------------------------------- */
html, body {
  margin: 0;
  padding: 0;
  background: var(--mg-paper);
  color: var(--mg-ink);
  font-family: var(--mg-serif);
  line-height: 1.7;
}

/* Required paragraph justification */
article p,
section p,
main p,
p {
  text-align: justify !important;
  text-justify: inter-word !important;
  -webkit-hyphens: auto !important;
  -ms-hyphens: auto !important;
  hyphens: auto !important;
}

/* Ultra subtle paper-wash texture (clean, minimal) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.015) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0,0,0,0.015) 1px, transparent 1px),
    radial-gradient(circle at 70% 20%, rgba(0,0,0,0.03), transparent 60%);
  background-size: 24px 24px, 24px 24px, 100% 100%;
  opacity: .25;
}

/* ----------------------------------------------------
   HEADER + LOGO + NAVIGATION
   ---------------------------------------------------- */
.mg-header {
  text-align: center;
  padding: 40px 20px 20px;
}

.mg-logo {
  max-width: 240px;
  height: auto;
  margin-bottom: 16px;
}

.mg-nav {
  margin-top: 18px;
}

.mg-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 28px;
}

/* ----------------------------------------------------
   OPTION C - NOTE BUTTON NAVIGATION
   ---------------------------------------------------- */
.mg-nav-btn {
  position: relative;
  display: inline-block;
  padding: 10px 18px;
  background: #faf7f1;
  border: 1px solid var(--mg-accent-light);
  border-radius: 10px;
  color: var(--mg-ink);
  font-weight: bold;
  font-size: 1rem;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition:
    background var(--mg-motion-fast) var(--mg-easing),
    box-shadow var(--mg-motion-fast) var(--mg-easing),
    transform var(--mg-motion-fast) var(--mg-easing),
    border-color var(--mg-motion-fast) var(--mg-easing);
}

/* Watermarked note (♪) left inside button */
.mg-nav-btn::before {
  content: "♪";
  position: absolute;
  font-size: 22px;
  color: var(--mg-accent-light);
  opacity: 0.16;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Hover — glow, lift, richer gold */
.mg-nav-btn:hover {
  background: #fffdf8;
  border-color: var(--mg-accent);
  box-shadow: 0 4px 14px rgba(0,0,0,0.14);
  transform: translateY(-3px);
}

.mg-nav-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

/* Disable old underline animation for nav */
.mg-nav a::after {
  display: none;
}

/* ----------------------------------------------------
   MAIN CONTAINER
   ---------------------------------------------------- */
.mg-container {
  width: 100%;
  max-width: var(--mg-max-width);
  margin: 0 auto;
  padding: var(--mg-space);
}

/* ----------------------------------------------------
   HEADINGS
   ---------------------------------------------------- */
.mg-h1 {
  font-size: 2.6rem;
  margin: 0 0 12px;
  letter-spacing: 0.4px;
  text-align: center;
}

.mg-dek {
  margin: 0 auto 32px;
  max-width: 620px;
  color: var(--mg-muted);
  font-style: italic;
  text-align: center;
}

/* ----------------------------------------------------
   HERO IMAGE — Match Content Width, Centered
   ---------------------------------------------------- */
.mg-hero {
  width: 100%;
  margin: 32px 0;            /* Same vertical spacing as before */
}

.mg-hero img {
  display: block;
  width: 100%;               /* Fills the text column */
  height: auto;

  border-radius: var(--mg-radius);
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow: var(--mg-shadow-soft);
}

/* ----------------------------------------------------
   SECTION DIVIDERS WITH TREBLE CLEF
   ---------------------------------------------------- */
.mg-section {
  margin-top: 48px;
  padding-top: 48px;
  position: relative;
}

/* Divider: line + treble clef + line */
.mg-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--mg-accent), transparent);
}

/* Treble clef circle in center */
.mg-section::after {
  content: "𝄞";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--mg-paper);
  padding: 0 12px;
  font-size: 20px;
  color: var(--mg-accent);
}

/* Section headers */
.mg-section h2 {
  margin-top: 0;
  font-size: 1.9rem;
  text-align: center;
  letter-spacing: 0.3px;
}

/* ----------------------------------------------------
   FOOTER — Curved Ornament Banner
   ---------------------------------------------------- */
.mg-footer {
  margin-top: 60px;
  padding: 28px 20px 40px;
  text-align: center;
  color: var(--mg-muted);
  position: relative;
}

/* Ornamental curve above footer */
.mg-footer::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 18px;
  background: radial-gradient(circle at 50% 100%, var(--mg-accent) 0%, transparent 70%);
  opacity: .35;
  border-radius: 0 0 80px 80px;
}

/* ----------------------------------------------------
   BACK TO TOP — CIRCULAR ♪ BUTTON
   ---------------------------------------------------- */
.mg-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 52px;
  height: 52px;

  border-radius: 50%;
  background: var(--mg-accent);
  border: none;

  color: var(--mg-ink);
  font-size: 22px;
  font-weight: bold;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  box-shadow: var(--mg-shadow-soft);

  opacity: 0 !important;
  transform: translateY(12px) !important;
  pointer-events: none !important;

  transition: opacity .25s ease,
              transform .25s ease,
              background .25s ease;
  z-index: 9999;
}

.mg-to-top.mg-show {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.mg-to-top:hover {
  background: var(--mg-accent-light);
}

/* ----------------------------------------------------
   CARD HOVER EFFECTS (For future pages)
   ---------------------------------------------------- */
.mg-card {
  background: #fff8f0;
  border: 1px solid rgba(0,0,0,0.12);
  padding: 20px;
  border-radius: var(--mg-radius);
  transition:
    transform var(--mg-motion-fast) var(--mg-easing),
    box-shadow var(--mg-motion-fast) var(--mg-easing);
}

.mg-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.15);
}