/* Load font in modern, efficient formats first */
@font-face {
  font-family: 'MERKPIX-Bold';
  src: url('../fonts/MERKPIX-Bold.eot'); /* IE8 */
  src: url('../fonts/MERKPIX-Bold.eot?#iefix') format('embedded-opentype'), /* IE9+ */
       url('../fonts/MERKPIX-Bold.woff2') format('woff2'), /* Modern */
       url('../fonts/MERKPIX-Bold.woff') format('woff'),   /* Older modern */
       url('../fonts/MERKPIX-Bold.ttf') format('truetype');/* Legacy fallback */
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'silt-rough';
  src: url('../fonts/silt-rough.eot'); /* IE8 */
  src: url('../fonts/silt-rough.eot?#iefix') format('embedded-opentype'), /* IE9+ */
       url('../fonts/silt-rough.woff2') format('woff2'), /* Modern */
       url('../fonts/silt-rough.woff') format('woff'),   /* Older modern */
       url('../fonts/silt-rough.ttf') format('truetype');/* Legacy fallback */
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* body styles */

html, body {
    margin: 0;
    padding: 0;
    line-height: 1.6;
    font-family: 'Overpass', sans-serif;
    display: flex;
    flex-direction: column;
    color: rgb(204, 204, 204);
    background-color: rgb(246, 245, 252);
    height:100%;
}

.body_commissions{
  background-color: rgb(246, 245, 252);
}

.body_podcasts{
  background-color: rgb(246, 245, 252);
}

.body_songs{
  background-color: rgb(246, 245, 252);
}

.body_studio_facilities{
  background-color: rgb(246, 245, 252);
}

.body_experiments{
  background-color: rgb(0, 0, 0);
}

.body_contact{
    background-color: rgb(0, 0, 0);
}

.body_about {
    background-color: rgb(0, 0, 0);
}


/* link styles */

a {
    color: rgb(170, 170, 170); 
    text-decoration: none;
    transition: color 0.3s ease;
}

a.about:hover {
    color: rgb(255, 209, 68) !important;
}

a.commissions:hover {
  color: #97a058  !important;
}

a.podcasts:hover {
  color: #6a83a1  !important;
}

a.songs:hover {
  color: #e29b5e  !important;
}

a.studio-facilities:hover {
    color: #995b66  !important;
}

a.experiments:hover {
    color: #f20044  !important;
}

a.contact:hover {
    color: #5691a4  !important;
}

/* Navbar styles */

nav {
    margin-bottom: 0;
}

.navbar {
    background-color: #000000;
}

.navbar {
  display: flex;
  align-items: center; /* keeps logo and button vertically aligned */
  padding-top: 1rem;
  padding-left: 0rem;
  padding-right: 0rem;
  padding-bottom: 1rem;
}


#navbar-logo {
    display: block;  
    width: 250px;
    height: auto; /* Maintain aspect ratio */ 
    margin-left: 2rem;
    z-index: 100000; /* Ensure it stays above other elements */
}

#navbar-button {
    margin-left: auto; /* pushes it to the right */
    margin-right: 1.0rem;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


#mainMenu {
    background-color: #000000;
    padding: 0px 0;
    font-family: 'MERKPIX-Bold', 'Courier New', Courier, monospace;
    font-weight: 300; /* thinner weight */
    letter-spacing: 0.2em;
    font-size: 1.5rem;
    text-decoration: none;
    color: #ffffff;
    margin-bottom: 0;
}

#mainMenu a {
    color: #ffffff;
}

.btn-close.close-white {
  filter: none !important; /* Disable Bootstrap's greyscale/invert filter */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 1 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 2.5rem 2.5rem; /* Make the icon larger */
  width: 2.5rem;  /* Button container size */
  height: 2.5rem;
  padding: 0;     /* Remove default padding */
  border: none;   /* Optional: clean up if needed */
}

.btn-close:focus {
  outline: none !important;
  box-shadow: none !important;
}

.offcanvas-body{
    text-align: right;
    padding: 0;
    margin: 0;
}

.offcanvas-body button {
    font-size: 2.0rem;
    color: #ffffff; 
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.offcanvas-backdrop {
  background-color: black !important;
  opacity: 1 !important;
}

.nav-item {
    display: inline-block;
    font-size: 2.0rem;
    margin-bottom: 0.5rem;
    margin-right: 0.5rem;
    padding-right: 0.5rem;
}

.hand-drawn-line-menu {
  width: 100%;
  max-width: 100%;
  display: block;
  margin-left: auto;
}

/* Top layout styles */

#content_top {
    background-color: #000000;
    color: #ffffff;
    font-family: 'Overpass', sans-serif;
    font-weight: 300;
    text-align: left;
    width: 50%;
    padding-left: 2.0rem;
}

#container_top{
  width: 100%;
  background-color: #000000;
  padding-bottom: 0.0rem;
}

#container_top img.smallTop {
    /*height: clamp(16px, 20vw, 80px);*/
    height: 70px;
}

#container_top img.largeTop {
    /*height: clamp(16px, 30vw, 100px) !important;*/
    /*height: clamp(16px, 30vw, 70px);*/
    height: 70px;
}

.title{
  font-family: 'silt-rough', 'Courier New', Courier, monospace;
  font-weight: 300; /* thinner weight */
  letter-spacing: 0.09em;
  font-size: 3.0rem;
  text-decoration: none;
  color: #ffffff;
}

.titleRight {
  padding-right: 2.0rem;
}

/* Middle layout styles */

#content_middle {
    text-align: right;
    padding: 2.5rem 2.5rem 0rem 0rem;
    margin: 0rem 0rem 0rem 0rem;
}

/* Large layout styles */

#content_large {
    font-family: 'MERKPIX-Bold', 'Courier New', Courier, monospace;
    font-size: clamp(16px, calc(2.5vw + 2.5vh), 70px);
    line-height: 1.4; /* relative to the font size */
    text-align: left;
    padding-top: 0.5em;
    padding-left: 2.0rem;
}


#container_large {
  flex: 1; /* Takes up remaining space */
  padding: 0;
}

/* Split layout styles */

#container_split {
  display: flex;
  width: 100%;
  padding: 2rem;
}

#content_split {
  flex: 1;               /* takes up remaining space */
  font-family: 'MERKPIX-Bold', 'Courier New', Courier, monospace;
  font-size: 2rem;
  line-height: 1.4; /* relative to the font size */
  text-align: left;
}

#content_split a {
  color: rgb(48, 48, 48);
}


#animation_split {
  display: flex;
}

.container_split_commissions img {
  width: 600px;
  height: auto;
  max-width: 100%;
}

.container_split_podcasts img {
  width: 600px;
  height: auto;
  max-width: 100%;
}

.container_split_songs img {
  width: 600px;
  height: auto;
  max-width: 100%;
}

.container_split_facilities img {
  width: 800px;
  height: auto;
  max-width: 100%;
}

/* Pop-up styles */
 /* Reusable modal (native <dialog>) */
  dialog.modal {
    width: min(800px, 90vw);
    max-height: 85vh;
    padding: 1rem 1.25rem;
    border: none;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    background: #fff;
  }
  dialog.modal::backdrop {
    background: rgba(0,0,0,.5);
  }

  /* Close “X” */
  .modal-close {
    font-family: 'MERKPIX-Bold', 'Courier New', Courier, monospace !important;
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 3.0rem;
    line-height: 1;
    color: #000;
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 100000;
  }
  .modal-close:hover,
  .modal-close:focus {
    color: rgb(255, 209, 68);
    outline: none;
  }

  /* Trigger links (styled as simple buttons/links) */
  .popup-trigger {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
  }

  /* Keep your source content hidden but present in the DOM */
  .popup-source[hidden] { display: none !important; }

.modal-dialog {
  max-width: 60% !important;
}

.modal-content {
  color: rgb(45, 45, 45);
  font-family: 'Overpass', sans-serif;
}

.modal-body {
  padding-bottom: 1.0rem !important;
  padding-top: 0.5rem !important;
  padding-left: 1.0rem !important;
  padding-right: 1.0rem !important;
}

.modal-header {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

  /* website credits styles */

.website-credits {
  font-size: 1.5rem;
  text-align: right;
  padding-right: 2rem;
}

.website-socials {
  font-size: 1.5rem;
  text-align: left;
  padding-right: 2rem;
}