/*!
Theme Name: The Music
Theme URI: http://underscores.me/
Author: able2create
Author URI: http://underscores.me/
Description: Second version
Version: 2.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: themusic
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

The Music is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
# Reset
--------------------------------------------------------------*/

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

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

:root {
  --black: #111209;
  --light-black: #232513;
  --white: #F8F8F8;
  --yellow: #F9E0AE;
  --brown: #B09382;
  --blue: #436374;
  --transition-speed: 0.6s;
  --semi-yellow: rgba(249, 224, 174, 0.5);
  --border-radius-mobile: 15px;
}

body {
  min-height: 100svh;
  font-family: 'Eudoxus Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--black);
  font-size: clamp(1.125rem, 0.8447rem + 0.5848vw, 1.3125rem);
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

video {
  border-radius: 15px;
}

.site {
  height: 0;
}

h2 {
  font-size: clamp(2.25rem, 0.7549rem + 3.1189vw, 3.25rem) !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
}

h3 {
  font-size: clamp(1.625rem, 0.1299rem + 3.1189vw, 2.625rem) !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
  line-height: 1.2;
}

p,
ol {
  line-height: 170%;
  margin-bottom: 30px
}

a {
  color: var(--yellow);
  text-decoration: none;
}

button {
  text-transform: uppercase;
}

.bg-filter {
  background: var(--semi-yellow);
  mix-blend-mode: luminosity;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--light-black);
  border-radius: 0px;
}

::-webkit-scrollbar-thumb {
  background: var(--yellow);
  border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

::-webkit-scrollbar-corner {
  background: #f4f4f4;
}

/* .dot-cursor {
  position: fixed;
  width: 22px;
  height: 22px;
  background: var(--black);
  border-radius: 50%;
  border: 2px solid var(--yellow);
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
} */

.hover-scale {
  transform: translate(-50%, -50%) scale(1.7) !important;
  border: 1px solid var(--yellow);
  opacity: .8;
}

.clicked {
  transform: translate(-50%, -50%) scale(0.6);
}

.clicked.hover-scale {
  transform: translate(-50%, -50%) scale(1.8) !important;
}

@font-face {
  font-family: 'Eudoxus Sans';
  src: url('font/EudoxusSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Eudoxus Sans';
  src: url('font/EudoxusSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Eudoxus Sans';
  src: url('font/EudoxusSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.frame {
  position: fixed;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border: solid var(--black) 25px;
  z-index: 99;
}

.frameunder {
  box-sizing: border-box;
  position: fixed;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
  border-radius: 60px;
  border: 25px solid var(--black);
}

.fullscreen-background {
  position: relative;
  height: 100vh;
  width: 100%;
  background-size: cover;
  background-attachment: fixed;
}

@supports (-webkit-touch-callout: none) {
  .fullscreen-background {
    background-attachment: scroll;
  }
}

/* AUDIO PLAYER */

.audio-player {
  position: fixed;
  top: 45px;
  left: 45px;
  max-width: 365px;
  width: 100%;
  background-color: var(--yellow);
  border-radius: 15px;
  padding: 15px;
  z-index: 9;
  color: var(--black);
  mix-blend-mode: hard-light;
}

.audio-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  justify-content: space-between;
}

.volume-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.volume-slider {
  width: 100px;
  height: 4px;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.volume-slider::-moz-range-thumb {
  -moz-appearance: none;
  width: 12px;
  height: 12px;
  background: #000;
  border-radius: 50%;
  cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: #000;
  border-radius: 50%;
}

.player-controls {
  display: flex;
  align-items: center;
  gap: 17px;
}

.audio-player button {
  background: none;
  border: none;
  padding: 5px;
  color: #000;
  transition: opacity var(--transition-speed);
}

.audio-player button:hover {
  opacity: 0.7;
  cursor: pointer;
}

.audio-player .play-btn {
  background: var(--white);
  border-radius: 50%;
  width: 47px;
  height: 47px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.track-info {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

.playing .play-icon {
  display: none;
}

.playing .pause-icon {
  display: block;
}

/* // AUDIO PLAYER */

.buy-cd-btn {
  z-index: 9;
  display: flex;
  position: fixed;
  font-size: 21px;
  font-weight: 700;
  background: var(--yellow);
  text-transform: uppercase;
  height: 56px;
  padding: 15px 30px;
  border: none;
  border-radius: 30px;
  align-items: center;
  justify-content: center;
  top: 45px;
  right: 45px;
  mix-blend-mode: hard-light;
  cursor: pointer;
  transition: transform var(--transition-speed) ease-in-out;
}

.buy-cd-btn:hover {
  transform: scale(1.05);
}

.buy-cd-btn a {
  color: var(--black);
}

/* NAVIGATION */

.menu-overlay {
  display: none;
}

.main-navigation {
  position: fixed;
  bottom: 50px;
  width: fit-content;
  height: 56px;
  background: transparent;
  backdrop-filter: blur(18.84px);
  -webkit-backdrop-filter: blur(18.84px);
  background-color: rgba(0, 0, 0, 0.15);
  z-index: 9;
  border-radius: 30px;
  padding: 0 0 0 4px;
  margin: auto auto auto 50%;
  transform: translateX(-50%);
  /* display: flex; 
  align-items: center;
  will-change: transform; */
}

.nav-menu {
  display: flex;
  list-style: none;
  align-items: center;
  height: 55px;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  scroll-behavior: var(--transition-speed);
}

.nav-menu::-webkit-scrollbar {
  display: none;
}

.nav-menu li {
  position: relative;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.nav-menu li a {
  font-size: 21px;
  font-weight: 500;
  text-decoration: none;
  color: var(--white);
  padding: 0 30px;
  z-index: 1;
  position: relative;
  transition: color var(--transition-speed) ease-in-out;
}

.nav-menu li a:hover,
.nav-menu li a.active {
  color: var(--yellow);
}

.menu-indicator {
  position: absolute;
  top: 4px;
  left: 0;
  height: 49px;
  width: 0;
  background: var(--black);
  border-radius: 30px;
  transition: width var(--transition-speed), transform var(--transition-speed);
  z-index: 0;
}

.nav-menu li:last-of-type a {
  position: relative;
  background: var(--yellow);
  color: var(--black);
  text-transform: uppercase;
  display: flex;
  padding: 13px 20px 13px 55px;
  border-radius: 30px;
  margin-top: 0;
  justify-content: center;
  align-items: center;
  margin-left: 30px;
  font-weight: 700;
  white-space: nowrap;
  margin-right: 2px;
}

.nav-menu li:last-of-type a {
  position: relative;
  display: inline-block;
  transition: transform var(--transition-speed) ease-in-out;
}

.nav-menu li:last-of-type a::before {
  display: block;
  position: absolute;
  content: '';
  width: 30px;
  height: 30px;
  left: 15px;
  top: 31px;
  /* Aligns vertically */
  transform: translateY(-50%) rotate(0deg);
  background-image: url(https://dev.themusic.at/media/2025/01/arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
  transition: all var(--transition-speed) ease-in-out;
}

.nav-menu li:last-of-type a:hover,
.nav-menu li:last-of-type a.active {
  transform: scale(1.1);
  /* Slightly enlarges the parent */
}

.nav-menu li:last-of-type a:hover::before,
.nav-menu li:last-of-type a.active::before {
  transform: translateY(-50%) rotate(270deg);
  transform-origin: center center;
  /* Keeps the rotation centered */
  left: 25px;
}

.main-navigation {
  transition: opacity var(--transition-speed) ease-in-out;
}

.scroll-to-top {
  display: block;
  position: fixed;
  bottom: 0px;
  width: fit-content;
  height: 49px;
  background-color: var(--yellow);
  z-index: 9;
  border-radius: 30px;
  padding: 0 40px;
  margin: auto auto auto 50%;
  border: none;
  opacity: 0;
  pointer-events: none;
  transform: scale(1) translateX(-50%);
  transition: all var(--transition-speed) ease-in-out;
  font-weight: 700;
  color: var(--black);
}

.scroll-to-top.show {
  transform: scale(1) translateX(-50%);
  pointer-events: all;
  bottom: 50px;
  opacity: 1;
  color: var(--black);
}

.scroll-to-top.show:hover {
  cursor: pointer;
  transform: scale(1.05) translateX(-50%);
  color: var(--black);
}

/* // NAVIGATION */

/* CONTENT */

.custom-group {
  min-height: 100svh;
}

.custom-group:nth-child(odd) {
  background-color: var(--brown);
}

.custom-group:nth-child(odd) h2 {
  color: var(--black);
}

.custom-group:nth-child(even) {
  background-color: var(--blue);
}

.custom-group:last-of-type {
  background: var(--light-black);
}

.custom-group:last-of-type h2 {
  color: var(--white);
}

/* // CONTENT */

/* PLUGINS OVERRIDES */

ol {
  counter-reset: list-counter;
}

ol li {
  counter-increment: list-counter;
  list-style: none;
  position: relative;
  padding: 0 0 0 45px;
}

ol li::before {
  content: counter(list-counter, decimal-leading-zero) ". ";
  position: absolute;
  left: 0;
}

.with_frm_style input[type=text],
.with_frm_style input[type=password],
.with_frm_style input[type=email],
.with_frm_style input[type=number],
.with_frm_style input[type=url],
.with_frm_style input[type=tel],
.with_frm_style input[type=file],
.with_frm_style input[type=search],
.with_frm_style select,
.with_frm_style .frm-card-element.StripeElement {
  color: #000 !important;
}

.frm_style_formidable-style.with_frm_style p.description:empty,
.frm_style_formidable-style.with_frm_style div.description:empty,
.frm_style_formidable-style.with_frm_style div.frm_description:empty,
.frm_style_formidable-style.with_frm_style .frm-show-form>div.frm_description:empty,
.frm_style_formidable-style.with_frm_style .frm_error:empty,
.frm_style_formidable-style.with_frm_style .frm_pro_max_limit_desc:empty {
  margin: 0;
}

.with_frm_style .frm_message .frm_success_style ,
.frm_success_style {
  color: #000 !important;
}

.frm_third,
.frm_third>select {
  height: 60px;
}

@media only screen and (max-width: 1080px) {

  .frame,
  .frameunder {
    display: none;
  }

  .nav-menu {
    height: 51px;
  }

  .nav-menu li a {
    font-size: 16px;
    padding: 15px;
  }

  .main-navigation {
    height: 52px;
    bottom: 20px;
    padding-left: 0;
  }

  .menu-indicator {
    top: 2px;
    height: 48px;
    border-radius: 30px;
  }

  .nav-menu li:last-of-type a {
    margin-left: 15px;
  }

  .nav-menu li:last-of-type a::before {
    display: block;
    position: absolute;
    content: '';
    width: 24px;
    height: 24px;
    left: 15px;
    top: 28px;
    transform: translateY(-50%) rotate(0deg);
    background-image: url(https://dev.themusic.at/media/2025/01/arrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
    transition: all var(--transition-speed) ease-in-out;
  }

  .audio-player {
    position: fixed;
    top: 15px;
    left: 15px;
  }

  .buy-cd-btn {
    top: 15px;
    right: 15px;
  }

}

@media only screen and (max-width: 767px) {

  html {
    scroll-behavior: smooth;
  }

  .main-navigation {
    display: none;
  }

  .audio-player {
    max-width: 93%;
    left: 50%;
    transform: translateX(-50%);
    top: 15px;
    border-radius: var(--border-radius-mobile);
    padding: 15px;
    height: 64px;
    mix-blend-mode: normal;
    display: flex;
    align-items: center;
  }

  .audio-player .player-controls {
    gap: 10px;
  }

  .audio-player .audio-controls {
    margin-bottom: 0;
  }

  .volume-wrapper,
  .menu-indicator,
  .buy-cd-btn {
    display: none;
  }

  .audio-player .play-btn {
    width: 37px;
    height: 37px;
  }

  .audio-player .play-btn .play-icon {
    width: 70%;
  }

  .audio-player .play-btn .pause-icon {
    width: 40%;
  }

  .track-info {
    position: absolute;
    top: 13px;
    left: 133px;
  }

  /* Menu Overlay */
  .menu-overlay {
    position: fixed;
    top: 15px;
    /* Aligned with the player */
    left: 50%;
    border-radius: var(--border-radius-mobile);
    width: 93%;
    height: 0px;
    /* Initially collapsed */
    background: var(--yellow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    z-index: 8;
    transform: translateX(-50%) scaleY(0);
    /* Initially collapsed */
    transform-origin: top center;
    /* Expands from the top */
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out, height 0.3s ease-in-out;
  }

  /* Active (Menu Open) */
  .menu-overlay.active {
    height: calc(100dvh - 30px);
    /* Expands from player */
    transform: translateX(-50%) scaleY(1);
    opacity: 1;
    pointer-events: auto;
    border-radius: var(--border-radius-mobile);
  }

  .nav-menu {
    height: auto;
  }

  /* Menu Items */
  .menu-overlay ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    flex-direction: column;
  }

  .menu-overlay ul a {
    color: var(--black);
    font-size: 36px;
    font-weight: 600;
    line-height: 150%;
  }

  .menu-overlay li {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  }

  /* Menu Items appear one by one */
  .menu-overlay.active li:nth-child(1) {
    transition-delay: 0.05s;
  }

  .menu-overlay.active li:nth-child(2) {
    transition-delay: 0.1s;
  }

  .menu-overlay.active li:nth-child(3) {
    transition-delay: 0.15s;
  }

  .menu-overlay.active li:nth-child(4) {
    transition-delay: 0.2s;
  }

  .menu-overlay.active li:nth-child(5) {
    transition-delay: 0.25s;
  }

  .menu-overlay.active li:nth-child(6) {
    transition-delay: 0.3s;
  }

  .menu-overlay.active li:nth-child(7) {
    transition-delay: 0.35s;
  }

  /* Instantly reset menu on close */
  .menu-overlay:not(.active) li {
    opacity: 0;
    transform: translateY(10px);
    transition: none;
    /* Prevent animation delay when closing */
  }

  /* Hamburger Menu */
  .menu-btn {
    position: fixed;
    top: 27px;
    right: 30px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1000;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Main hamburger line */
  .menu-btn div {
    width: 30px;
    /* Middle line width */
    height: 3px;
    background: black;
    position: relative;
    transition: background 0.3s ease-in-out;
  }

  /* Top and bottom lines */
  .menu-btn div::before,
  .menu-btn div::after {
    content: "";
    position: absolute;
    height: 3px;
    background: black;
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
  }

  /* Top line (longer) */
  .menu-btn div::before {
    top: -10px;
    width: 40px;
    /* Longer line */
    right: 0;
    /* Aligns to the right */
  }

  /* Bottom line (shorter) */
  .menu-btn div::after {
    top: 10px;
    width: 30px;
    /* Shorter line */
    right: 0;
    /* Aligns to the right */
  }

  /* Active (X transformation) */
  .menu-btn.active div {
    background: transparent;
    /* Hide the middle line */
  }

  .menu-btn.active div::before,
  .menu-btn.active div::after {
    width: 35px;
    /* Make both lines the same width for a perfect X */
  }

  .menu-btn.active div::before {
    transform: translateY(10px) rotate(45deg);
  }

  .menu-btn.active div::after {
    transform: translateY(-10px) rotate(-45deg);
  }


}