:root {
  --brand-purple: #7B3FBF;
  --brand-purple-darker: #532E8C;
}

/* LOGO */
.responsive-logo {
  height: 100%;
  max-height: 55px;
  width: auto;
  vertical-align: middle;
}

/* Font info:

font-family: 'Playfair Display', serif; (dh)
font-family: 'Reenie Beanie', cursive; (Dayton Hare)
font-family: 'Crimson Text', serif; (normal)

*/

/* ICON / CONTACT LABELS */
.mail:before {
  content: "\2709";
  font-family: 'Glyphicons Halflings';
  float: left;
  margin-right: 2em;
}

.web:before {
  content: "\e135";
  font-family: 'Glyphicons Halflings';
  float: left;
  margin-right: 2em;
}

.linkedin:before {
  content: "\e008";
  font-family: 'Glyphicons Halflings';
  float: left;
  margin-right: 2em;
}

.pubs:before {
  content: "\e043";
  font-family: 'Glyphicons Halflings';
  float: left;
  margin-right: 2em;
}

.location:before {
  content: "\e062";
  font-family: 'Glyphicons Halflings';
  float: left;
  margin-right: 2em;
}

.mail, .web, .linkedin, .location, .pubs {
  display: block;
  margin-bottom: 1em;
}

/* GLOBAL BODY + TYPOGRAPHY */
body {
  padding-top: 0px;
  margin-bottom: 0px;
  font-size: 15px;
  background-color: black;
  color: white;
  font-family: 'Crimson Text', serif;
  font-weight: 400;
}

.menu-text {
  padding: 0;
}

/* ---------------- FOOTER ---------------- */

footer {
  position: relative;
  width: 100%;
  min-height: 250px;
  background-color: #24277a;
  color: white;
  font-family: 'Crimson Text', serif;
  font-weight: 400;
}

.footer-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  overflow: hidden;
}

.footer-image {
  display: inline-block;
  vertical-align: middle;
  width: auto;
  max-height: 300px;
  max-width: max-content;
  object-fit: cover;
  object-position: center center;
}

.footer-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 600px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
  box-sizing: border-box;
}

.footer-overlay h2,
.footer-overlay p,
.footer-overlay a {
  margin: 0 0 10px;
}

.footer-overlay a.button {
  background-color: #0066cc;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  display: inline-block;
}

.footer-overlay a.button:hover {
  background-color: #075fb8;
}

.footer-credit {
  margin-top: 10px;
  font-size: 0.8em;
}

.footer-credit a {
  color: #cccccc;
  text-decoration: none;
}

.footer-credit a:hover {
  color: rgb(197, 195, 244);
  text-decoration: underline;
}

/* Responsive footer tweaks */
@media screen and (max-width: 768px) {
  .footer-overlay {
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    max-width: 90%;
  }

  .footer-overlay h2 {
    font-size: 1.0em;
  }

  .footer-overlay a.button {
    padding: 8px 15px;
    font-size: 0.9em;
  }
}

@media screen and (max-width: 480px) {
  .footer-overlay {
    flex-direction: column;
    padding: 5px;
    max-width: 90%;
    max-height: 80%;
  }

  .footer-overlay h2 {
    font-size: 1em;
  }

  .footer-credit {
    margin-top: 5px;
  }

  footer {
    min-height: 200px;
  }
}

/* ---------------- HEADERS / TABLES ---------------- */

table, th, td {
  border: 1px solid black;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 50px;
  color: #a1a1a1;
}

.h1, h1 {
  color: white;
  font-family: 'Crimson Text', serif;
  font-size: 36px;
}

.h2, h2 {
  color: white;
  font-family: 'Crimson Text', serif;
}

.h3, h3 {
  color: white;
  font-family: 'Crimson Text', serif;
  font-size: x-large;
}

.h4, h4 {
  color: white;
  display: inline;
  font-family: 'Crimson Text', serif;
  font-size: larger;
}

.h5, h5 {
  color: white;
  display: inline;
  font-family: 'Crimson Text', serif;
  font-size: larger;
}

.page-header {
  padding-top: 30px;
  margin-top: 0px;
}

.list-group-item:hover {
  text-decoration: none;
  background-color: #ffcdcd;
}

/* ---------------- LINKS ---------------- */

/* Global links (non-navbar) */
a:link {
  color: white;
}

a:visited {
  color: white;
}

/* Keep your global blue hover for normal text links */
a:hover {
  color: lightskyblue;
}

a:active {
  color: lightskyblue;
  text-decoration: underline;
}

/* ===== TOP BAR NAVBAR LINKS ===== */

/* Base top-bar link colors: white by default */
.top-bar a,
.top-bar a:link,
.top-bar a:visited {
  color: #ffffff;
  background: transparent;
  text-decoration: none;
}

/* Hover/focus: purple text, no blue background */
.top-bar a:hover,
.top-bar a:focus {
  color: var(--brand-purple, #7B3FBF) !important;
  background: transparent !important;
}

/* Active nav item: purple + glow underline (your existing style) */
.top-bar a.is-active,
.top-bar .active > a {
  position: relative;
  color: var(--brand-purple, #7B3FBF) !important;
  background: transparent !important;
  text-shadow: 0 0 6px rgba(123, 63, 191, 0.55);
}

/* thin glowing underline */
.top-bar a.is-active::after,
.top-bar .active > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--brand-purple, #7B3FBF);
  box-shadow: 0 0 6px rgba(123, 63, 191, 0.7);
  border-radius: 2px;
}

/* optional subtle hover accent on the active item */
.top-bar a.is-active:hover,
.top-bar .active > a:hover {
  color: var(--brand-purple-darker, #532E8C) !important;
  text-shadow: 0 0 8px rgba(83, 46, 140, 0.7);
}

/* Remove glow/underline from logo and parent dropdowns */
.top-bar .menu-text a,
.top-bar .has-submenu > a {
  text-shadow: none !important;
  background: transparent !important;
}

.top-bar .menu-text a::after,
.top-bar .has-submenu > a::after {
  content: none !important;
}

/* Make sure the top-level 'music' link (submenu parent) behaves like others */
.top-bar .has-submenu > a,
.top-bar .is-dropdown-submenu-parent > a {
  color: #ffffff;
}

/* On hover/focus, 'music' is purple (no Foundation blue flash) */
.top-bar .has-submenu > a:hover,
.top-bar .has-submenu > a:focus,
.top-bar .is-dropdown-submenu-parent > a:hover,
.top-bar .is-dropdown-submenu-parent > a:focus {
  color: var(--brand-purple, #7B3FBF) !important;
  background: transparent !important;
}

/* Submenu links (dropdown under music) */
.top-bar .submenu a,
.top-bar .submenu a:link,
.top-bar .submenu a:visited {
  color: #ffffff;
  background: black;
}

/* Hover in submenu: darker purple, soft background */
.top-bar .submenu a:hover {
  color: var(--brand-purple-darker, #532E8C);
  background: rgba(83, 46, 140, 0.18);
  text-shadow: 0 0 6px rgba(83, 46, 140, 0.55);
}

/* Submenu active state */
.top-bar .submenu a.is-active,
.top-bar .submenu .active > a {
  position: relative;
  color: var(--brand-purple, #7B3FBF) !important;
  background: rgba(123, 63, 191, 0.16) !important;
  border-radius: 6px;
  text-shadow: 0 0 5px rgba(123, 63, 191, 0.45);
}

/* Kill underline/glow inside dropdowns */
.top-bar .submenu a.is-active::after,
.top-bar .submenu .active > a::after,
.top-bar .submenu a:hover::after {
  content: none !important;
}



/* ---------------- ORBIT ---------------- */

.orbit-container {
  font-family: 'Crimson Text', serif;
  position: relative;
  min-width: 100%;
  min-height: 10%;
  transition: height 0.5s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.orbit-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.docs-example-orbit-slide {
  padding: 20px;
  background-color: #2e1a47;
  border: 1px solid #2e1a47;
  border-radius: 5px;
  width: 100%;
  max-width: 20000px;
  box-sizing: border-box;
  text-align: center;
  margin: 0 auto;
  font-family: 'Crimson Text', serif;
}

.responsive-score {
  max-height: 300px;
  height: auto;
  width: auto;
  max-width: 100%;
}

.orbit-previous, .orbit-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(47, 47, 47, 0.5);
  border: none;
  color: rgb(255, 255, 255);
  padding: 10px;
  cursor: pointer;
  z-index: 1;
}

.orbit-previous {
  left: 10px;
}

.orbit-next {
  right: 10px;
}

.orbit-bullets {
  text-align: center;
  margin-top: 10px;
}

.orbit-bullets button {
  display: inline-block;
  background-color: grey;
  border: none;
  width: 12px;
  height: 12px;
  margin: 0 3px;
  border-radius: 50%;
  cursor: pointer;
}

.orbit-bullets button.is-active {
  background-color: white;
}

.blank-placeholder {
  width: 100%;
  height: 315px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #888;
  font-size: 16px;
  text-align: center;
}

.orbit-padding {
  padding-top: 30px;
}

/* ---------------- IMAGE + OVERLAY COMPONENTS ---------------- */

.responsive-headshot {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.relative-cell {
  position: relative;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.responsive-background {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Dark overlay */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(50, 50, 50, 0.466);
  color: white;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid rgba(83, 83, 83, 0.308);
  font-family: 'Crimson Text', serif;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.overlay-heading {
  margin-top: 10px;
}

.overlay-tagline {
  margin-bottom: 10px;
}

/* Overlay font sizes */
.overlay h2 {
  font-size: 2em;
  margin: 0;
}

.overlay h5 {
  font-size: 1.2em;
  font-style: italic;
}

.overlay h2, .overlay p {
  margin: 0;
  padding: 10px 0;
  font-family: 'Crimson Text', serif;
}

@media screen and (max-width: 768px) {
  .overlay h2 {
    font-size: 1.5em;
  }

  .overlay h5 {
    font-size: 1em;
  }
}

@media screen and (max-width: 480px) {
  .overlay h2 {
    font-size: 1.2em;
  }

  .overlay h5 {
    font-size: 0.9em;
  }
}

/* Large image overlay-left variant */
.image-container {
  position: relative;
  background-color: #f4f4f4;
  overflow: hidden;
}

.responsive-large-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
}

.overlay-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 38.33%;
  height: 100%;
  background: rgba(211, 211, 211, 0.7);
  color: black;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  transition: all 0.5s ease;
  min-height: 250px;
  max-height: 100vh;
  backdrop-filter: blur(5px);
}

.bio-text p {
  margin: 0;
  padding-bottom: 10px;
  align-content: center;
  font-family: 'Crimson Text', serif;
}

@media screen and (max-width: 1024px) {
  .overlay-left {
    width: 50%;
    height: 100%;
    overflow-y: auto;
    max-height: 100vh;
  }

  .bio-text p {
    font-size: 1em;
  }
}

@media screen and (max-width: 768px) {
  .overlay-left {
    width: 65%;
    height: 100%;
    overflow-y: auto;
    max-height: 100vh;
  }

  .bio-text p {
    font-size: 0.9em;
  }
}

@media screen and (max-width: 480px) {
  .overlay-left {
    width: 100%;
    height: 100%;
    padding: 10px;
    overflow-y: auto;
    max-height: 100vh;
  }

  .bio-text p {
    font-size: 0.8em;
  }
}

/* Left image + purple box */
.responsive-left-image {
  width: 100%;
  height: auto;
  margin-right: 20px;
  object-fit: cover;
  object-position: center;
}

.purple-box {
  background-color: #2e1a47;
  border: 1px solid #2e1a47;
  color: white;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Hobbies text */
.hobbies-text {
  text-align: left;
}

.hobbies-text h2 {
  margin-top: 0;
}

.hobbies-text p {
  margin: 0;
}

/* ---------------- STICKY NAV / TOP BAR ---------------- */

[data-sticky-container] {
  margin-top: 0;
}

.title-bar,
.top-bar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  font-size: large;
}

/* Ensure the top bar content is centered */
.top-bar {
  display: flex;
  justify-content: space-between;
}

.top-bar-left {
  flex: 1;
}

.top-bar-right {
  flex: 1;
  display: flex;
  justify-content: center;
}

/* Display the title bar on smaller screens */
@media screen and (max-width: 640px) {
  .title-bar {
    display: flex;
  }
  .top-bar {
    display: none;
  }
}

/* ---------------- CONTACT PAGE OVERLAY ---------------- */

.contact-container {
  width: 100%;
}

.contact-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.overlayContact {
  position: absolute;
  top: 0;
  right: 20px;
  width: 33.33%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-container {
  background: rgba(66, 3, 86, 0.679);
  padding: 20px;
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
  color: white;
  font-size: larger;
}

.form-container form {
  width: 100%;
}

.form-container label {
  font-size: large;
  color: white;
}

/* Stack on small screens */
@media (max-width: 800px), (max-height: 400px) {
  .relative-cell {
    flex-direction: column;
  }
  .overlayContact {
    position: relative;
    width: 100%;
    height: auto;
    order: 1;
  }
  .contact-image {
    order: 0;
  }
}

/* ---------------- MUSIC PAGE ---------------- */

/* Equal heights for music cards */
.grid-x[data-equalizer] .cell {
  display: flex;
}

.grid-x[data-equalizer] .cell .card {
  flex: 1 1 auto;
  display: flex;
}

.grid-x[data-equalizer] .cell .card .card-section {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Keep "More Information" at the bottom of each card */
.grid-x[data-equalizer] .cell .card .button {
  margin-top: auto;
}

/* Works list YouTube section spacing */
.workslist-videos {
  margin-top: 0.5rem;
}

.card img {
  width: 100%;
  height: auto;
}

.card-section h4 {
  margin-bottom: 10px;
}

.card {
  background-color: #2e1a47;
  color: white;
  min-height: 300px;
  width: 100%;
}

/* Ensure SoundCloud iframe fits within card */
iframe {
  max-width: 100%;
}

/* Reveal overlay & modal styling (no scroll hacks) */
.reveal-overlay {
  z-index: 9999;
  overflow: hidden;
}

.reveal {
  z-index: 10000;
  background: #f6e7fb;
  padding: 20px;
  color: #000;
  max-height: 80vh;
  overflow-y: auto;
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
}

.reveal img {
  max-height: 200px;
  width: auto;
}

#exampleModal1 .grid-x {
  align-items: flex-start;
}

#exampleModal1 h1 {
  margin-bottom: 10px;
}

#modalInstrumentation,
#modalDuration {
  margin-bottom: 10px;
}

#modalImage {
  max-width: 100%;
  height: auto;
  border: none;
}

#programNote,
#modalSoundCloud,
#modalYouTube {
  padding-top: 20px;
}

#modalBuyLink {
  margin-top: 20px;
}

#exampleModal1 .cell.small-12.medium-4.large-4 {
  padding-right: 20px;
}

.close-button {
  right: 10px;
  top: 10px;
}

/* Constrain media (image or SoundCloud) to SoundCloud height and center it */
.card-media-wrapper {
    width: 100%;
    height: 166px;               /* match SoundCloud player height */
    max-height: 166px;
    display: flex;
    justify-content: center;     /* center horizontally */
    align-items: center;         /* center vertically */
    overflow: hidden;
    margin: 0.5rem 0;
}

/* Images inside the media wrapper */
.card-media-image {
    max-height: 166px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;         /* scale without cropping */
    display: block;
}


/* ---------------- TABS (MUSIC PAGE) ---------------- */

.tabs {
  background-color: black;
  font-size: large;
}

.tabs-title {
  background-color: black;
}

.tabs-title a {
  color: white;
  padding: 10px;
  font-size: 1.2rem;
}

.tabs-title a:hover {
  background-color: #333;
  color: white;
}

.tabs-panel {
  background-color: black;
  color: white;
  padding: 20px;
  font-size: large;

  /* Make hash links (#all, #all-list, etc.) leave room for the fixed nav */
  scroll-margin-top: 140px; /* tweak this value if needed */

}

.centered-tabs-container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 15px;
}

/* ---------------- MISC GLOBAL ---------------- */

*, *::before, *::after {
  box-sizing: border-box;
}

body.modal-open {
  overflow: hidden;
}

body.no-scroll {
  overflow: hidden;
}