/* ============================
   Logo: "Instruments" in Rot
   ============================ */

.wp-block-site-title a {
  background: linear-gradient(
    to right,
    #ffffff 0%,
    #ffffff 37%,
    #df2a2a 37%,
    #df2a2a 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* ============================================================
   Accent-Farbe pro Seite — aktiver Nav-Link + Hover
   Strategie: body.page-id-X + href-Selektor als Fallback,
   aria-current als primärer Selektor (wo WP ihn setzt)
   ============================================================ */

/* --- Farb-Variablen pro Seite (hier anpassen) --- */
:root {
  --color-news:    #df2a2a;   /* News          → Blau    */
  --color-osc-d:   #df2a2a;   /* OSC Desktop   → Rot     */
  --color-osc:     #df2a2a;   /* Elastic OSC   → Orange  */
  --color-melody:  #f5a203;   /* Elastic Melody→ Lila    */
  --color-drums:   #ffa800;   /* Elastic Drums → Grün    */
  --color-fx:      #29e1f7;   /* Elastic FX    → Gelb    */
}

/* ---- Basis Hover: alle Nav-Links ---- */
header nav .wp-block-navigation-item a:hover {
  opacity: 0.8;
  transition: color 0.2s ease;
}

/* ============================================================
   NEWS  (page-id-2859)
   ============================================================ */
body.page-id-2859 header nav a[href="/"],
body.home header nav a[href="/"],
header nav a[aria-current="page"][href="/"] {
  color: var(--color-news) !important;
}
header nav a[href="https://mominstruments.com/"]:hover,
header nav a[href="/"]:hover {
  color: var(--color-news) !important;
}

/* ============================================================
   OSC DESKTOP  (page-id-2853)
   ============================================================ */
body.page-id-2853 header nav a[href*="elastic-osc-desktop"],
header nav a[aria-current="page"][href*="elastic-osc-desktop"] {
  color: var(--color-osc-d) !important;
}
header nav a[href*="elastic-osc-desktop"]:hover {
  color: var(--color-osc-d) !important;
}

/* ============================================================
   ELASTIC OSC  (page-id-1748)
   ============================================================ */
body.page-id-1748 header nav a[href*="elasticosc"],
header nav a[aria-current="page"][href*="elasticosc"] {
  color: var(--color-osc) !important;
}
header nav a[href*="elasticosc"]:hover {
  color: var(--color-osc) !important;
}

/* ============================================================
   ELASTIC MELODY  (page-id-1461)
   ============================================================ */
body.page-id-1461 header nav a[href*="elasticmelody"],
header nav a[aria-current="page"][href*="elasticmelody"] {
  color: var(--color-melody) !important;
}
header nav a[href*="elasticmelody"]:hover {
  color: var(--color-melody) !important;
}

/* ============================================================
   ELASTIC DRUMS  (page-id-9)
   ============================================================ */
body.page-id-9 header nav a[href*="elasticdrums"],
header nav a[aria-current="page"][href*="elasticdrums"] {
  color: var(--color-drums) !important;
}
header nav a[href*="elasticdrums"]:hover {
  color: var(--color-drums) !important;
}

/* ============================================================
   ELASTIC FX  (page-id-921)
   ============================================================ */
body.page-id-921 header nav a[href*="elasticfx"],
header nav a[aria-current="page"][href*="elasticfx"] {
  color: var(--color-fx) !important;
}
header nav a[href*="elasticfx"]:hover {
  color: var(--color-fx) !important;
}