/* === Gateway Tiles Grid === */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  padding: 1rem 0;
}

/* === Individual Tiles === */
.tile {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  overflow: hidden;
  text-align: center;
  background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.15), transparent 70%);
  background-size: 200% 200%;
  background-position: center;
  transition: transform 0.4s ease, box-shadow 0.4s ease, background-position 0.4s ease;
}

/* Hover tilt + zoom + parallax */
.tile:hover {
  transform: perspective(800px) rotateX(4deg) rotateY(-4deg) scale(1.03);
  box-shadow: 0 12px 24px rgba(0,0,0,0.2);
  background-position: 40% 40%;
}

/* === Tile Images === */
.tile img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeSlideIn 0.6s ease forwards;
  transition: transform 0.4s ease;
}

/* Hover zoom */
.tile:hover img { transform: scale(1.08); }

/* Click feedback */
.tile img:active {
  transform: scale(0.97);
  transition: transform 0.15s ease;
}

/* === Tile Titles === */
.tile h3 {
  font-size: 1.2rem;
  margin: 0.5rem 0;
  color: #333;
}

/* === Tile Links === */
.tile a {
  text-decoration: none;
  color: inherit;
}

/* === Responsive tweak for small screens === */
@media (max-width: 500px) {
  .tile-grid { grid-template-columns: 1fr; }
}

/* === Dark mode overrides (prefers-color-scheme) === */
@media (prefers-color-scheme: dark) {
  .tile {
    background: #0f1115;
    box-shadow: 0 10px 28px rgba(0,0,0,0.55);
    color: #e7eaf0;
  }
  .tile img {
    filter: brightness(0.95) contrast(1.05) saturate(1.05);
  }
  .tile-label,
  .tile h3 {
    color: #e7eaf0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  }
  .tile:hover {
    box-shadow: 0 16px 36px rgba(0,0,0,0.6);
  }
}

/* Force 2x2 layout on larger screens */
@media (min-width: 501px) {
  .tile-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Keep the 2x2 square centered on very large screens */
@media (min-width: 1200px) {
  .tile-grid {
    max-width: 900px;   /* adjust to taste */
    margin: 0 auto;     /* center the grid */
  }
}

/* === Dark mode overrides (Bootstrap theme attribute) === */
:root[data-bs-theme="dark"] .tile {
  background: #0f1115;
  box-shadow: 0 10px 28px rgba(0,0,0,0.55);
  color: #e7eaf0;
}
:root[data-bs-theme="dark"] .tile img {
  filter: brightness(0.95) contrast(1.05) saturate(1.05);
}
:root[data-bs-theme="dark"] .tile-label,
:root[data-bs-theme="dark"] .tile h3 {
  color: #e7eaf0;
}
/* === Header flex container (logo + welcome + divisions) === */
.header-flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 2rem;
}

/* Logo + Welcome text side by side */
.logo-welcome {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.welcome-text {
  font-family: 'Dancing Script', cursive;
  font-size: 2.1rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* Divisions row */
.divisions {
  display: flex;
  gap: 1.2rem;
}

/* Each division block */
.division-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  animation: navFade 0.6s ease-out forwards;
}
.division-block:nth-child(1) { animation-delay: 0.5s; }
.division-block:nth-child(2) { animation-delay: 0.7s; }
.division-block:nth-child(3) { animation-delay: 0.9s; }

/* Main logo */
.main-logo img {
  max-height: 85px;
  opacity: 0;
  animation: logoFade 1s ease-out forwards 0.4s;
}

/* Division logos */
.division-logo img {
  max-height: 70px;
  margin-bottom: -0.06rem;
}

/* Division buttons */
.division-btn {
  display: inline-block;
  padding: 0.1rem 0.7rem;
  font-size: 0.80rem;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease, color 0.2s ease;
}

.division-btn:hover,
.division-btn:focus {
  color: #000;
}

.division-btn::after {
  content: "";
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: rgba(255, 255, 255, 0.3);
  transform: skewX(-25deg);
}
.division-btn:hover::after {
  animation: spotlight 0.75s ease-out;
}

/* Division button colors */
.meetmarco-btn { background-color: #0084aa; }
.goshopping-btn { background-color: #004c58; }
.bookings-btn  { background-color: #112855; }

.meetmarco-btn:hover,
.goshopping-btn:hover,
.bookings-btn:hover {
  background-color: #b7b7b7;
}

/* === Responsive adjustments === */
@media (max-width: 340px) {
  header .header-flex {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.1rem;
  }
  .division-group {
    justify-content: center;
    flex-wrap: wrap;
  }
  .main-logo img { max-height: 85px; }
  .division-logo img { max-height: 70px; }
  .division-btn {
    font-size: 0.75rem;
    padding: 0.2rem 0.4rem;
  }
}

/* === Animations === */
@keyframes headerFadeSlide { to { opacity: 1; transform: translateY(0); } }
@keyframes logoFade        { to { opacity: 1; } }
@keyframes navFade         { to { opacity: 1; } }
@keyframes spotlight       { to { left: 125%; } }
@keyframes fadeSlideIn     { to { opacity: 1; transform: translateY(0); } }

/* === Large-screen tweaks === */
@media (min-width: 993px) {
  .division-group {
    position: relative;
    left: -16px;
  }
  header .header-flex {
    justify-content: flex-start !important;
    gap: clamp(2rem, 4vw, 5rem);
  }
}
/* === Gateway Intro Animations === */
.intro-container {
  opacity: 0;
  transform: translateY(20px);
  animation: introFadeSlide 0.8s ease-out forwards;
}
.intro-image {
  opacity: 0;
  transform: translateX(-30px) scale(1.05);
  animation: introImageCurtain 1s ease-out forwards 0.3s;
}
.intro-text {
  opacity: 0;
  transform: translateX(30px);
  animation: introTextCurtain 0.8s ease-out forwards 0.5s;
  color: #000;
}
.intro-buttons .btn {
  opacity: 0;
  transform: translateY(10px);
  animation: buttonFadeUp 0.5s ease-out forwards;
}
.intro-buttons .btn:nth-child(1) { animation-delay: 0.8s; }
.intro-buttons .btn:nth-child(2) { animation-delay: 1s; }
.intro-buttons .btn:nth-child(3) { animation-delay: 1.2s; }

/* Force white, bold labels within this module's grid */
#mod-custom164 .tile-grid a,
#mod-custom164 .tile-grid a:link,
#mod-custom164 .tile-grid a:visited {
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
}

#mod-custom164 .tile-grid a:hover,
#mod-custom164 .tile-grid a:focus {
  color: #ffeb3b !important; /* optional: high-contrast hover */
}

/* Overviewpage Treasure Animation */
.treasure {
  display: inline-block;
  font-weight: 900;
  color: #004080; /* replace with your exact topbar blue hex */
  text-shadow: 0 0 5px #66a3ff, 0 0 10px #3399ff, 0 0 20px #004080;
  animation: treasureGlow 1.5s infinite alternate;
}

@keyframes treasureGlow {
  0%   { transform: scale(1);   text-shadow: 0 0 5px #66a3ff; }
  50%  { transform: scale(1.2); text-shadow: 0 0 20px #3399ff, 0 0 30px #004080; }
  100% { transform: scale(1);   text-shadow: 0 0 10px #66a3ff; }
}

.sparkle {
  display: inline-block;
  animation: twinkle 2s infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1.3) rotate(20deg); }
}

/* =========================================
   Cassiopeia Overview Footer Styling
   ========================================= */

/* Footer grid layout */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Footer block styling */
.footer-block h4 {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
  color: #fff;
  border-bottom: 2px solid #ffeb3b; /* highlight underline */
  display: inline-block;
  padding-bottom: 0.25rem;
}

.footer-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-block ul li {
  margin-bottom: 0.5rem;
}

.footer-block a {
  color: #eee;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-block a:hover {
  color: #ffeb3b;
}

/* Footer bottom line spacing */
.footer-bottom {
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 0.5rem; /* narrower than before */
  font-size: 0.8rem;
  color: #aaa;
  margin-top: -0.5rem; /* reduce gap above line */
}

/* Footer button links */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.footer-btn {
  display: inline-block;
  padding: 0.4rem 0.4rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  color: #eee;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-btn:hover {
  background: #ffeb3b;
  color: #111;
  border-color: #ffeb3b;
  text-shadow: none;
}

.container-footer.footer.full-width {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.container-footer.footer.full-width .grid-child {
/* max-width: 100% !important; */
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 1rem;
  box-sizing: border-box;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.footer-block h4 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  color: #fff;
  border-bottom: 2px solid #39ff14; /* neon green underline */
  display: inline-block;
  padding-bottom: 0.25rem;
}


.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.footer-btn {
  display: inline-block;
  padding: 0.4rem 0.4rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  color: #eee;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-btn:hover {
  background: #00698c; /* powderblue hover */
  color: #111;
  border-color: #111;
}

/* Company address in light grey */
.company-address {
  font-style: normal;
  color: #ccc; /* light grey */
  margin-top: 0.5rem;
  line-height: 1.4;
  font-size: 0.85rem;
}

/* Footer links layout */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Buttons: same width */
.footer-btn {
  flex: 1 1 30%; /* ensures equal width in a row of 3 */
  text-align: center;
  padding: 0.5rem 0.5rem;
  border-radius: 4px;
  font-size: 0.9rem;
  text-decoration: none;
  color: #fff;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  transition: all 0.3s ease;
}

/* Hover effect */
.footer-btn:hover {
  background: #00698c;
  color: #111;
  border-color: #111;
}

/* Special colors for the first row */
.meetmarco-btn { background-color: #00698c; }   /* powderblue */
.goshopping-btn { background-color: #004c58; }  /* teal */
.bookings-btn  { background-color: #112855; }   /* navy */

/* Keep hover consistent */
.meetmarco-btn:hover,
.goshopping-btn:hover,
.bookings-btn:hover {
  background-color: #111;
  color: #111;
}

/* === Footer Buttons: Improved Hover Contrast === */
.footer-btn {
  flex: 1 1 30%;
  text-align: center;
  padding: 0.5rem 0.5rem;
  border-radius: 4px;
  font-size: 0.9rem;
  text-decoration: none;
  color: #fff;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  transition: all 0.3s ease;
}

/* Hover effect: neon green background, black text */
.footer-btn:hover {
  background: #00698c;
  color: #000; /* changed from #111 to true black for better contrast */
  border-color: #111;
}

/* Special colors for the first row */
.meetmarco-btn { background-color: #0099ad; } /* mid-teal */
.goshopping-btn { background-color: #004c58; } /* dark-teal */
.bookings-btn  { background-color: #112855; } /* dark-blue */

/* Hover overrides for division buttons */
.meetmarco-btn:hover,
.goshopping-btn:hover,
.bookings-btn:hover {
  background-color: #112855;
  color: #000; /* updated for consistency */
}

/* =========================================
   Active Main Menu item (Cassiopeia standard)
   ========================================= */
.main-nav li.current a,
.mod-menu li.current a,
.main-nav li.active a,
.mod-menu li.active a {
  color: transparent !important;   /* text disappears */
  text-shadow: none !important;
  cursor: default;
}

/* =========================================
   Fancy Active Main Menu Item
   ========================================= */
.main-nav li.current a,
.mod-menu li.current a,
.main-nav li.active a,
.mod-menu li.active a {
  color: rgba(255, 255, 255, 0.25) !important; /* faded text */
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);       /* subtle emboss */
  cursor: default;                              /* no pointer hand */
  pointer-events: none;                         /* not clickable */
}
/* =========================================
   Global Main Menu button style (all menus)
   ========================================= */
.main-nav a,
.mod-menu a {
  display: inline-block;
  padding: 0.4rem 1rem;
  margin: 0.2rem 0.3rem;
  border-radius: 999px;
  background: #5d5d5d;   /* dark background */
  color: #fff;           /* white text */
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease, color 0.3s ease;
}

.main-nav a:hover,
.mod-menu a:hover {
  background: #666;
  color: #1a3862;
}

/* Active item: ghosted text */
.main-nav li.current a,
.mod-menu li.current a,
.main-nav li.active a,
.mod-menu li.active a {
  color: rgba(255,255,255,0.25) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  cursor: default;
  pointer-events: none;
}

/* Sidebar menu FLEX container */
.sidebar-right .card-body .mod-menu {
  display: flex;
  flex-direction: column;   /* stack vertically */
  flex-wrap: wrap;       /* allow wrapping if too wide */
  align-items: center;      /* center horizontally */
  gap: 0.5rem;              /* space between buttons */
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Each menu item */
.sidebar-right .card-body .mod-menu .nav-item {
  width: 100%;              /* let anchors fill available width */
  max-width: 200px;         /* cap at 200px */
}

/* Anchors as full-width buttons */
.sidebar-right .card-body .mod-menu .nav-item > a {
  display: block;
  width: 100%;              /* fill the nav-item */
  text-align: center;
} /* <-- close the rule */

/* Song layout */
.song-layout {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 20px;
  align-items: flex-start;
}

/* =========================================
   Legal Shortcuts menu buttons
   ========================================= */
.legal-shortcuts ul.mod-menu {
  display: flex !important;   /* force horizontal layout */
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: center;    /* center buttons; change to flex-start if left align */
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.legal-shortcuts ul.mod-menu > li {
  display: inline-flex;
  margin: 0;
}

.legal-shortcuts ul.mod-menu > li > a {
  display: inline-block;
  padding: 6px 12px;
  background-color: #d3d3d3;  /* light grey */
  color: #000;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.9rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.legal-shortcuts ul.mod-menu > li > a:hover {
  background-color: #003366;  /* dark blue */
  color: #fff;
}

/* Center menu buttons in the right sidebar */
.sidebar-right .card-body .mod-menu {
  text-align: center;           /* centers inline elements inside */
}

/* Make anchors behave like buttons of their own width */
.sidebar-right .card-body .mod-menu .nav-item > a {
  display: inline-block;        /* shrink to content width */
  text-align: center;           /* center text inside the button */
  margin: 0.35rem auto;         /* center horizontally + add vertical spacing */
}

/* Optional: normalize li width so they don't stretch full width */
.sidebar-right .card-body .mod-menu .nav-item {
  display: block;               /* default, but explicit for clarity */
}

/* END OF CASS CSS FILE */
/* Flex container for logo + divisions */
header .header-flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between; /* welcome left, divisions right */
  gap: 0.1rem;
}

/* Divisions wrapper: force horizontal row */
header .divisions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
}

/* Each division block stacks logo above button */
header .division-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

html {
  scroll-behavior: smooth;
}

#songs-slideshow {
  scroll-margin-top: 72px; /* adjust to your header height */
}

/* Larger back arrow only on Songs articles */
body.view-article.category-songs .back-link-wrapper {
  text-align: right;
  margin: 0 0 1rem;
}

body.view-article.category-songs .back-link {
  display: inline-block;
  font-size: 3rem;        /* larger arrow */
  font-weight: bold;
  text-decoration: none;
  color: var(--brand-color, #FFF);
  background: var(--brand-color, #112855);
  padding: 0.2em 0.2em;
  border-radius: 12px;
  transition: background 0.2s ease, color 0.2s ease;
}

body.view-article.category-songs .back-link:hover,
body.view-article.category-songs .back-link:focus {
  background: var(--brand-color, #333);
  color: #333;
  outline: none;
}

.song-layout {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 20px;
  align-items: flex-start;
}

.song-block {
  flex: 1 1 50% !important;
  min-width: 280px;
}

.lyrics-block {
  column-count: 2 !important;
  column-gap: 2rem !important;
}

/* Left block (Bandcamp or Cover) */
.song-block:first-child {
  max-width: 400px;       /* keep player/cover from stretching too wide */
}

/* Right block (Lyrics + metadata) */
.song-lyrics {
  flex: 1 1 55%;
  font-size: 0.9rem;
  line-height: 1.4;
  padding: 10px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  max-height: 70vh;
  overflow-y: auto;
}

/* Apply columns to the actual lyrics container */
.lyrics-block {
  column-count: 2;
  column-gap: 2rem;
}

.lyrics-block p {
  margin: 0 0 0.6rem;
  break-inside: avoid;
}

.instrumental-note {
  font-style: italic;
  color: #666;
}

/* Cover image sizing */
.cover-image {
  max-width: 350px !important;
  height: auto !important;
  display: block;
  margin-bottom: 1rem;
}

/* Download button styling */
.download-button {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 12px;
  background: #0687f5;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

/* Responsive tweak: collapse lyrics back to one column on small screens */
@media (max-width: 600px) {
  .lyrics-block {
    column-count: 1;
  }
}

@media (max-width: 700px) {
  .song-layout {
    flex-wrap: wrap;
  }
}

  .song-lyrics {
  overflow-y: auto;
  scrollbar-width: thin;          /* Firefox */
  scrollbar-color: #888 #f9f9f9;  /* Firefox */
}

/* Chrome/Edge/WebKit */
.song-lyrics::-webkit-scrollbar {
  width: 8px;
}
.song-lyrics::-webkit-scrollbar-track {
  background: #f9f9f9;
}
.song-lyrics::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}
.song-lyrics {
  max-height: 70vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #888 #f9f9f9;
}
.song-lyrics::-webkit-scrollbar {
  width: 8px;
}

  body.view-article .com-content-article__body .song-layout {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;
  align-items: flex-start !important;
}

/* Popup container */
.song-layout {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: flex-start;
  max-width: 800px;       /* constrain popup width */
  margin: 0 auto;         /* center horizontally */
  background: #fff;       /* optional: white popup background */
  padding: 1rem;
  border-radius: 6px;     /* subtle rounded corners */
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

/* Bandcamp / cover block */
.song-layout .song-block {
  flex: 0 0 350px;        /* fixed width for Bandcamp iframe */
}

/* Lyrics block */
.song-layout .lyrics-block {
  flex: 1;
  column-count: 2;
  column-gap: 0.3rem;
  font-size: 0.6rem;   /* unified size */
  line-height: 0.6;
  max-height: 440px;
  overflow-y: auto;
}

.song-layout .lyrics-block .lyrics-meta {
  column-span: all;    /* force footer to span across both columns */
  margin-top: 0.5rem;
  font-size: 0.6rem;
  line-height: 0.9;
  color: #555;
}

/* Metadata lines (Credits, Released, etc.) */
.song-layout .lyrics-block .credits,
.song-layout .lyrics-block .released,
.song-layout .lyrics-block .copyright {
  display: block;         /* each on its own line */
  font-size: 0.6rem;      /* match lyrics font size */
  font-style: italic;     /* optional: subtle distinction */
  margin-top: 0.5rem;     /* spacing above each section */
  color: #555;            /* softer gray for secondary info */
}

@media (max-width: 768px) {
  .song-layout {
    flex-direction: column;
    max-width: 95%;       /* use most of the screen width */
    padding: 0.5rem;
  }

  .song-layout .song-block {
    flex: 1 1 auto;
    max-width: 100%;
  }

  .song-layout .lyrics-block {
    column-count: 1;      /* single column for readability */
    font-size: 1rem;      /* slightly larger for mobile */
    line-height: 0.6;
    max-height: none;     /* let it expand naturally */
    overflow-y: visible;
  }
}

.mod-random-song .random-song-player {
  max-width: 350px;
  margin: 0 auto;
}
.mod-random-song .random-song-player iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.25; /* keeps proportion */
}

.mod-random-song .lyrics-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  background: #333;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.2s;
}
.mod-random-song .lyrics-button:hover {
  background: #555;
  color: #fff;
}

.mod-random-song .lyrics-button,
.mod-random-song .back-home-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: #333;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.2s;
}

.mod-random-song .lyrics-button:hover,
.mod-random-song .back-home-button:hover {
  background: #555;
  color: #fff;
}

.back-home-wrapper {
  text-align: center;
  margin-top: 1.5rem;
}

.back-home-wrapper {
  text-align: center;
  margin-top: 2rem;
}

.back-home-button {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background: #333;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  transition: background 0.2s;
}

.back-home-button:hover {
  background: #555;
  color: #fff;
}

.lyrics-button-wrapper {
  text-align: center;
  margin-top: 0.8rem;
}

.lyrics-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: #333;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.2s;
}

.lyrics-button:hover {
  background: #555;
  color: #fff;
}

.mobile-arrow {
  display: none;
  text-align: center;
  margin-top: 0.4rem;
}

.mobile-arrow img {
  max-width: 160px;
  height: auto;
  opacity: 0.8;
}

/* Show only on narrow screens */
@media (max-width: 768px) {
  .mobile-arrow {
    display: block;
  }
}

.sidebar-right .mod-menu li a,
.sidebar-right .mod-menu li.active a {
  font-size: 15px;
}

/* Script for Blablablog */
<style>
  .page-header h2, .item-title {
   display: none;
}

  .bio-container {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: auto;
  }
  .bio-container h2 {
    font-size: 22px;
    margin-top: 2em;
    border-bottom: 2px solid #eee;
    padding-bottom: 0.3em;
    color: #444;
  }
  .bio-container img {
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    margin: 0 1em 1em 0;
    max-width: 100%;
    height: auto;
  }
  .bio-container .float-left { float: left; }
  .bio-container .float-right { float: right; }
  .bio-container blockquote {
    font-style: italic;
    background: #f9f9f9;
    border-left: 4px solid #ccc;
    margin: 1.5em 0;
    padding: 0.8em 1em;
  }
  @media (max-width: 768px) {
    .bio-container .float-left,
    .bio-container .float-right {
      float: none;
      display: block;
      margin: 1em auto;
    }
  }
</style>

.song-layout {
  margin: 2em 0;
  padding: 1em;
  background: #fafafa;
  border-radius: 6px;
}

.song-layout .song-title {
  font-size: 1.4rem;
  margin-bottom: 0.5em;
  color: var(--cassiopeia-primary);
}

.song-layout a {
  display: inline-block;
  padding: 0.5em 1em;
  background: var(--cassiopeia-primary);
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
}

/* Script for the standard Popups */

.popup-wrapper {
  width: 100%;
  max-width: 460px;
  height: 600px;
  overflow-y: auto; /* scroll if content exceeds */
  font-size: 0.8rem;
  line-height: 1.4;
}

.popup-media {
  text-align: center;
  margin-bottom: 10px;
}

.popup-message {
  text-align: center;
  margin: 10px 0;
  font-weight: bold;
}

.popup-lyrics {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.popup-lyrics .lyrics-col {
  flex: 1;
}

.popup-credits {
  font-size: 0.7rem;
  color: #666;
  margin-top: 10px;
  text-align: center;
}

/* Gig Popup Styling */
.popup-details {
  margin: 15px 0;
  padding: 10px;
  background: #111;            /* dark background for contrast */
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #eee;
}

.popup-details p {
  margin: 6px 0;
  display: flex;
  align-items: center;
}

.popup-details strong {
  min-width: 80px;             /* aligns labels like Date, Venue */
  display: inline-block;
  color: #ffcc00;              /* highlight labels in gold */
  font-weight: 600;
}

.popup-details a {
  color: #66ccff;
  text-decoration: none;
  font-weight: 600;
}

.popup-details a:hover {
  text-decoration: underline;
}

/* Kill the white background around the popup iframe */
.wf-mediabox-container,
.wf-mediabox-content,
.wf-mediabox-content-iframe,
.wf-mediabox-content-item {
  background: transparent !important;
}

/* Optional: make the whole overlay black instead of transparent */
.wf-mediabox-container {
  background: rgba(0,0,0,0.9) !important; /* semi-transparent black overlay */
}

/* 🎨 BlaBlaBlog Intro Image Styling */
.blog .img-intro-none img,
.blog .img-intro-left img,
.blog .img-intro-right img {
  width: 320px;          /* adjust to your preferred size */
  height: 200px;         /* fixed height for uniform look */
  object-fit: cover;     /* crops neatly without distortion */
  border-radius: 8px;    /* rounded corners for polish */
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

/* ✨ Hover Glow in Topbar Blue */
.blog .img-intro-none img:hover,
.blog .img-intro-left img:hover,
.blog .img-intro-right img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(0, 64, 128, 0.6); /* glow in topbar blue */
}

/* Container for intro images */
.blog .img-intro-none,
.blog .img-intro-left,
.blog .img-intro-right {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 8px;
}

/* Uniform image styling */
.blog .img-intro-none img,
.blog .img-intro-left img,
.blog .img-intro-right img {
  width: 320px;          /* adjust to taste */
  height: 200px;
  object-fit: cover;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  display: block;
  border-radius: 8px;
}

/* Hover lift + glow */
.blog .img-intro-none:hover img,
.blog .img-intro-left:hover img,
.blog .img-intro-right:hover img {
  transform: scale(1.05) translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 64, 128, 0.5); /* topbar blue glow */
}

/* Caption overlay */
.blog .img-intro-none::after,
.blog .img-intro-left::after,
.blog .img-intro-right::after {
  content: attr(data-title); /* pulls in the article title */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 64, 128, 0.8); /* semi-transparent topbar blue */
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.4s ease;
  border-radius: 0 0 8px 8px;
}

/* Show caption on hover */
.blog .img-intro-none:hover::after,
.blog .img-intro-left:hover::after,
.blog .img-intro-right:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* Flex container for the main-top position */
#main-top {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* Each module box */
#main-top .blog-box,
#main-top .projects-box {
  flex: 1 1 45%;
  max-width: 500px;
  box-sizing: border-box;
}

/* Mobile breakpoint: stack full width */
@media (max-width: 768px) {
  #main-top .blog-box,
  #main-top .projects-box {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* Default fabric background for all pages */
body {
  background: linear-gradient(to right, #ababab 0%, #375376 50%, #ababab 100%);
  background-attachment: fixed;
  background-size: 200% 200%;
  animation: gradientShift 15s ease infinite;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: 
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 2px, transparent 2px, transparent 6px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.05) 0px, rgba(0,0,0,0.05) 2px, transparent 2px, transparent 6px);
  pointer-events: none;
  z-index: 0;
}

/* Animate gradient */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Default fabric background for all pages */
body.fabric-bg {
  background: linear-gradient(to right, #ababab 0%, #375376 50%, #ababab 100%);
  background-attachment: fixed;
  background-size: 200% 200%;
  animation: gradientShift 15s ease infinite;
  position: relative;
  color: #ffffff; /* scoped text color */
}

body.fabric-bg h1,
body.fabric-bg h2,
body.fabric-bg h3,
body.fabric-bg h4,
body.fabric-bg h5,
body.fabric-bg h6 {
  color: #ffffff;
}

body.fabric-bg a {
  color: #ffeb3b; /* bright link color */
}
body.fabric-bg a:hover {
  color: #ffc107;
}

body.fabric-bg::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: 
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 2px, transparent 2px, transparent 6px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.05) 0px, rgba(0,0,0,0.05) 2px, transparent 2px, transparent 6px);
  pointer-events: none;
  z-index: 0;
}

/* Animate gradient */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* white-text contract in module advanced>class suffix */
.white-text {
  color: #ffffff;
}
.white-text h1,
.white-text h2,
.white-text h3 {
  color: #ffffff;
}

/* Notebook page (Itemid=109) — white reading panel */
/* Notebook page (Itemid=109) — adaptive white reading panel */
body.itemid-109 .com-content-category-blog.blog {
  background-color: #ffffff;
  color: #000000;
  padding: 24px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  position: relative;
  z-index: 1;

  width: 100%;
  margin: 0 auto;
  white-space: normal;
}

/* MAWA Music page (Itemid=513) — adaptive white reading panel */
/* MAWA Music — adaptive white reading panels for both article and blog views */
body.itemid-513 .com-content-article.item-page,
body.itemid-513 .com-content-article__body,
body.itemid-513 .com-content-categories__items,
body.itemid-513 .com-content-category-blog__item.blog-item .item-content {
  background-color: #ffffff;
  color: #000000;
  padding: 24px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  position: relative;
  z-index: 1;

  /* containment */
  overflow: hidden;
  margin: 0 auto 2em;   /* spacing between cards/articles */
  width: 100%;          /* adaptive to container */
  white-space: normal;
}

/* Reset margins of first/last child inside */
body.itemid-513 .com-content-article.item-page > :first-child,
body.itemid-513 .com-content-article__body > :first-child,
body.itemid-513 .com-content-categories__items > :first-child,
body.itemid-513 .com-content-category-blog__item.blog-item .item-content > :first-child {
  margin-top: 0;
}

body.itemid-513 .com-content-article.item-page > :last-child,
body.itemid-513 .com-content-article__body > :last-child,
body.itemid-513 .com-content-categories__items > :last-child,
body.itemid-513 .com-content-category-blog__item.blog-item .item-content > :last-child {
  margin-bottom: 0;
}

/* Print-friendly override */
@media print {
  body.itemid-513 .com-content-article.item-page,
  body.itemid-513 .com-content-article__body,
  body.itemid-513 .com-content-category-blog__item.blog-item .item-content {
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: none;
    padding: 0;
  }
}