/* ============================================================
   Site palette — single source of truth (Phase 3 rework).
   ============================================================ */
:root {
    --section-bg: #ededed;   /* light content sections (was #c1c1c1) */
    --accent: #407e8f;       /* brand teal */
    --accent-light: #58afc7;
    --ink: #575757;          /* muted text on light sections */
    --on-dark: #c1c1c1;      /* light text on dark areas */
}

/**
 * CSS Style Organization Criteria:
 *
 * This stylesheet is organized based on the following logical criteria to enhance readability and maintainability:
 *
 * 1. Global Styles: Styles that apply to the entire document or common elements (e.g., body, h2) are placed first.
 * 2. ID Selectors: Styles targeting specific IDs follow, providing easy identification of unique element styling.
 * 3. Class Selectors: Styles applying to classes are grouped together, with similar or related classes logically ordered.
 * 4. Keyframes and Animations: Definitions for keyframes and animations are placed after regular styles but before media queries.
 * 5. Media Queries: All media query related styles are grouped at the end of the document, facilitating responsive design adjustments.
 *
 */


@font-face {
    font-family: 'Logga';
    src: url('../fonts/Logga.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Ysabeau Office';
    src: url('../fonts/YsabeauOffice-Regular.woff2') format('woff2');
    font-display: swap;
}

/* Showreel facade: poster shown until the YouTube iframe is lazy-loaded */
/* Index-only YouTube facade poster (scoped via data-yt so it never leaks onto
   showreel.html, which reuses the #showreel-container id for its Vimeo embed). */
#showreel-container[data-yt] {
    background: #000 center/cover no-repeat url('../../media/background/showreel-poster.webp');
}
/* Before unmute the iframe ignores pointer events, so the big Unmute button
   reliably receives taps (esp. on mobile) instead of the video swallowing them.
   After unmute the container gets .unmuted and the video becomes interactive. */
#showreel-container iframe { border: 0; pointer-events: none; }
#showreel-container.unmuted iframe { pointer-events: auto; }

/* The video-hero sections (index + showreel) have no background of their own,
   so their padding would show the #ededed body as a gray seam above the next
   section. Paint them black to match the video's letterboxing. */
.page-header.pt-0 {
    background-color: #000;
    border-radius: 0;   /* keep the rounded corners on image headers, not the video */
}

body {
    font-family: 'Ysabeau Office', sans-serif;
    font-size: 18px;
    background-color: var(--section-bg);
}

h2 {
    font-family: 'Logga', sans-serif;
}

strong {
    font-weight: 700;
}

#palette {
    color: #407e8f;
    color: #2e5a66;
    color: #509db3;
    color: #1c363d;
    color: #65c6e0;
    color: #777;
    color: #c1c1c1;
}

#header-menu-magic-line > li a {
    font-family: 'Ysabeau Office', sans-serif;
}

#magic-line {
    background: #509db3 !important;
}

#logo-custom {
    width: 240px;
}

#logo-carousel {
    background: var(--section-bg);
}

#gallery, #event-about {
    background: var(--section-bg);
}

#mobile-nav-wrap #mobile-logo img {
    width: 120px;
}

#nav-toggle .toggle-inner > span:nth-child(2), #nav-toggle .toggle-inner > span:nth-child(3) {
    background-color: #407e8f !important;
}

.header-magic-line-inner {
    border-bottom: 1px solid #2e5a66 !important;
}

.sp-container h2 {
    margin-top: 0 !important;
}

.sp-container h2.frame-1,
.sp-container h2.frame-2,
.sp-container h2.frame-3,
.sp-container h2.frame-4 {
    font-size: 80px;
    font-family: 'Logga', sans-serif;
    font-weight: 900;
    color: #59b4cd !important;
    text-shadow: 2px 2px 0.5rem #000 !important;
}

.tim-isotope.tim-isotope-2 .tim-album-item:before {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#407e8f));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #407e8f 100%);
}

.off-opener > i {
    font-size: 26px;
}

.offset-menu-two .footer-contact .contact-details i,
.offset-menu-two .offset-social-two ul li a,
.offset-menu-two .offset-social-two ul li,
.offset-menu-two .offset-social-two > a,
.offset-menu-two .offset-social-two > a:after,
.offset-menu-two .offset-social-two ul li a:hover {
    color: #407e8f;
}

.offset-menu-two .offset-social-two ul li {
    border-color: #407e8f;
}

.offset-menu-two .offset-social-two > a {
    border-bottom: 1px solid #407e8f;
}

.offset-menu-two .offset-social-two > a:after {
    background: #407e8f;
}

.header_player.style-fullwidth .jp-audio .jp-type-playlist .jp-interface .jp-controls .jp-play i,
.header_player.style-fullwidth .jp-audio #playlist-toggle i {
    color: #fff;
}

.header_player.style-fullwidth .jp-audio .jp-volume-bar .jp-volume-bar-value {
    background: var(--section-bg);
}

.section-title.style-four h2,
.section-title.style-five h2,
.latest-album-btn .custom_button,
.latest-album-left .albun-details p span,
.three-d-album .more-album a i,
.section-title h2:before,
.section-title h2:after,
.artist-single:before,
.artist-single .artist-single-content ul,
.section-title.style-five h2::after, .event-content h2 span {
    color: #407e8f;
}

.custom_button {
    border: 2px solid #407e8f !important;
    width: 58px;
    height: 58px;
    display: block;
    text-align: center;
    line-height: 60px;
    border-radius: 3px;
    position: relative;
    background: transparent;
}

.latest-album-btn .custom_button i:after {
    color: #407e8f;
    font-size: 27px !important;
    content: "\f04b";
    font: normal normal normal 14px/1 FontAwesome;
}

.section-title h2:before, .section-title h2:after {
    background: #407e8f;
}

.artist-single:before {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#407e8f));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #407e8f 100%);
}

.section-title.style-four h2:after,
.section-title.style-four h2:before {
    background: #407e8f;
    border: 2px solid #407e8f;
}

.section-title.style-five h2::after {
    background: #59b4cd;
}

.about-img-wrapper {
    margin-top: -70px;
    transition: all 0.5s ease-in-out;
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.about-img-wrapper:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.about-img-caption {
    transition: all 0.5s ease-in-out;
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    padding: 20px;
    color: #fff;
    font-family: 'Ysabeau Office', sans-serif;
    font-size: 18px;
    display: none;
}

.about-img {
    border-radius: 25px;
}

.about-img-wrapper:hover .about-img-caption {
    display: block;
}

.artist-single {
    text-align: center;
    margin-bottom: 15px;
}

#header-menu-magic-line > li.menu-item-has-children .sub-menu li a:hover,
#header-menu-magic-line > li.menu-item-has-children .sub-menu li a.current_page {
    color: #65c6e0;
}

.player-main, .player-main-shade {
    animation: spin 2.5s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.record-key {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% { transform: rotate(0); }
    50% { transform: rotate(5deg); }
    100% { transform: rotate(0); }
}

.loader-bar-ping-pong:after {
    background: #a5ecff;
}

.loader-bar-ping-pong:before {
    background: #407e8f;
}

.single-show-archive::before {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#407e8f));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #407e8f 100%);
}

.swiper-container-android .swiper-slide, .swiper-wrapper {
    width: 300px;
    height: 300px;
    display: flex;
    align-items: baseline !important;
}

.artist-single > img {
    width: 300px;
    height: 300px;
}

.header_player.style-fullwidth .jp-audio .jp-type-playlist .jp-interface .jp-progress .jp-seek-bar .jp-play-bar {
    background: #407e8f;
}

.header_player .jp-audio .jp-type-playlist .jp-interface .jp-progress .jp-seek-bar .jp-play-bar {
    background: #407e8f;
}

.header_player.style-fullwidth #nowPlaying {
    color: #c1c1c1;
}

/* Now-playing: truncate long track/album names, full text on hover (title attr) */
#nowPlaying .track-name,
#nowPlaying .album-name {
    display: block;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* New (wavesurfer) playlist links — override default hyperlink coloring.
   Fuller playlist restyle is deferred to the Phase 3 CSS pass. */
.header_player .jp-playlist ul li a {
    color: #c1c1c1;
    text-decoration: none;
}
.header_player .jp-playlist ul li.jp-playlist-current a {
    color: #ffffff;
}
/* Stack track title and collection on their own rows; collection truncates
   so long strings don't wrap or push the row height around (esp. on mobile). */
.header_player .jp-playlist ul li a .track-title {
    display: block;
}
.header_player .jp-playlist ul li a .track-collection {
    display: block;
    opacity: 0.6;
    font-size: 0.85em;
    min-height: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Subtle divider + consistent teal hover across both player layouts
   (overrides the theme's #333 divider and its aggressive #e43a90 hover). */
.header_player .jp-audio .jp-type-playlist .jp-interface .jp-playlist ul li,
.single-album-player .header_player .jp-audio .jp-type-playlist .jp-interface .jp-playlist ul li {
    border-bottom-color: rgba(193, 193, 193, 0.15);
}
.header_player .jp-audio .jp-type-playlist .jp-interface .jp-playlist ul li:hover {
    background: #407e8f;
}

.tim-logo-carousel .brand-logo img {
    max-height: 120px;
}

.tim-logo-carousel .credit-image img {
    max-height: 280px;
    opacity: 0.4;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.tim-logo-carousel .credit-image img:hover {
    opacity: 1;
}

.footer-three-bottom .footer-social-three ul li a:hover {
    color: #407e8f;
}

.footer-three-bottom .footer-social-three ul li a {
    font-size: 20px;
}

.latest-album-left .albun-details p {
    font-family: 'Ysabeau Office', sans-serif;
    font-size: 18px;
    color: var(--ink);
}

.section-title p {
    font-family: 'Ysabeau Office', sans-serif;
    font-size: 18px;
    color: var(--ink);
}

.section-title.style-five p {
    width: 100%;
}

.single-3d img {
    width: 100%;
}

.event-content p {
    color: gray;
    padding: 5px;
}

.event-content h2 {
    color: black;
}

.artist-lineup {
    border-bottom: 5px solid #1c1c1c;
}

.sp-container h2.frame-2 {
    top: -90px;
}

.header_player.style-fullwidth .jp-audio .jp-type-playlist .jp-interface .jp-progress {
    max-width: 60%;
    height: 60px;
    margin-top: 0;
    transform: translate(0px, -15px);
    background-color: transparent;
    background-size: 100% 200%;
    background-repeat: no-repeat;
    background-position: center;
}

.header_player .jp-audio .jp-type-playlist .jp-interface .jp-progress {
    max-width: 75%;
    height: 60px;
    margin-top: 0;
    transform: translate(0px, -15px);
    background-color: transparent;
    background-size: 100% 200%;
    background-repeat: no-repeat;
    background-position: center;
}

.header_player.style-fullwidth .jp-audio .jp-type-playlist .jp-interface .jp-progress .jp-seek-bar .jp-play-bar {
    background: transparent;
    backdrop-filter: brightness(2.5);
}

.header_player.style-fullwidth .jp-audio .jp-type-playlist .jp-interface .jp-progress .jp-seek-bar .jp-play-bar:hover {
    backdrop-filter: brightness(3);
}

.header_player .jp-audio .jp-type-playlist .jp-interface .jp-progress .jp-seek-bar .jp-play-bar {
    background: transparent;
    backdrop-filter: brightness(2.5);
}

.header_player .jp-audio .jp-type-playlist .jp-interface .jp-progress .jp-seek-bar .jp-play-bar:hover {
    backdrop-filter: brightness(3);
}

.header_player.style-fullwidth .jp-audio .jp-type-playlist .jp-interface .jp-playlist ul li.jp-playlist-current {
    background: #58afc7;
}

.header_player .jp-audio .jp-type-playlist .jp-interface .jp-playlist ul li.jp-playlist-current {
    background: rgba(64, 126, 143, 0.55) !important;
}

.header_player.style-fullwidth .jp-audio .jp-type-playlist .jp-interface .jp-playlist ul li:hover {
    background: #407e8f;
}

.album-info-wrapper:before {
    background: var(--section-bg);
}

.album-info-wrapper.black:before {
    background: #000;
}

.single-album-info .single-album-details .single-album-price a {
    background: #407e8f;
}

.single-album-info .single-album-details .single-album-price .left span {
    color: #407e8f;
}

.single-album-info .single-album-details .details-top:after {
    background: #407e8f;
}

.single-album-info .single-album-details .single-album-price a:hover {
    background: #59b4cd;
}

.single-album-player .header_player .jp-audio .jp-type-playlist .jp-interface .jp-controls .jp-play i {
    color: #000;
    margin-left: 5px;
}

.single-album-player .header_player .jp-audio .jp-type-playlist .jp-interface .jp-playlist {
    background-color: transparent;
}

.single-album-image {
    height: 100%;
}

.single-album-image > img {
    height: 100%;
    width: 100%;
    aspect-ratio: 1/1;
    box-shadow: -2px 2px 10px #3b3b3b;
}

.single-album-info .padding-remove {
    padding: 0;
}

.single-album-player .header_player .jp-audio .jp-type-playlist .jp-interface {
    background-color: #000000a8;
}

.player-container-fullwidth {
    -webkit-box-shadow: 0px 17px 15.5px 5.5px rgba(0, 0, 0, 0.32);
    box-shadow: 0px 17px 15.5px 5.5px rgba(0, 0, 0, 0.32);
    background: #181818;
    margin: 0;
}

.player-container-normal {
    -webkit-box-shadow: 0px 17px 15.5px 5.5px rgba(0, 0, 0, 0.32);
    box-shadow: 0px 17px 15.5px 5.5px rgba(0, 0, 0, 0.32);
    background: #181818;
    margin: 0 6.5%;
}

.backtotop {
    bottom: 100px;
}

section.header_player.style-fullwidth.fixed {
    position: fixed;
    bottom: 0;
    height: auto;
    padding: 0;
    padding-top: 7px;
    background: transparent;
}

.page-header {
    border-radius: 0 0 3em 3em;
    padding-top: 130px;
}

.current-tracks {
    float: none;
    width: 100%;
}

.current-tracks:after {
    content: '';
    display: none;
}

.single-album-player .header_player {
    background: #000;
    position: relative;
}

#album1_player::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url('../../media/albumart/unreleased/1.jpg');
    background-size: cover;
    backdrop-filter: blur(1px);
    filter: blur(10px) brightness(0.35);
}

#album2_player::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url('../../media/albumart/unreleased/2.jpg');
    background-size: cover;
    backdrop-filter: blur(1px);
    filter: blur(10px) brightness(0.35);
}

#album3_player::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url('../../media/albumart/unreleased/3.jpg');
    background-size: cover;
    backdrop-filter: blur(1px);
    filter: blur(10px) brightness(0.35);
}

.single-album-player .header_player #nowPlaying {
    padding: 30px 0 10px 38px;
}

.single-album-player .header_player .jp-audio .jp-type-playlist .jp-interface {
    border: none;
}

.single-album-info .single-album-details .details-top {
    border-bottom: none;
}

.single-album-info .single-album-details .details-top:after {
    background: none;
}

.single-album-info .single-album-details ul {
    padding-top: 0;
    padding-bottom: 0;
}

.single-album-info .single-album-details .single-album-description h6, .single-album-info .single-album-details h6 {
    color: #c1c1c1;
}

.row.single-album-info {
    margin-top: 20px;
    background: black;
}

.single-album-info .single-album-details {
    background: black;
    padding: 40px 90px 45px 60px;
}

.single-album-info .single-album-details ul li span {
    float: none;
    color: #585757;
}

.single-album-info .single-album-details ul li {
    color: #959595;
    font-weight: 700;
}

.latest-album-left .albun-details {
    padding-top: 30px;
}

.loader.is-active {
    background-color: #181818;
}

.three-d-album .more-album a {
    font-size: 24px;
}

.header_player .jp-audio .jp-type-playlist .jp-interface .jp-playlist ul li > div > a {
    font-size: 22px;
}

.single-album-player .header_player .jp-audio .jp-type-playlist .jp-interface .jp-playlist {
    margin-top: 100px;
}

#credits-shows {
    margin-bottom: 60px;
}

body.home-black {
    background: #000;
}

#footer-3.footer-black {
    background: #000;
    background-image: none;
}

#footer-3.footer-black.less-padding {
    padding: 60px 0 180px;
}

#showreel-container {
    position: relative;
    width: 100%;
    height: 100vh;
}
#showreel-container #unmute {
    position: absolute;
    z-index: 10;
    left: 50%;
    top: 58%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border: none;
    border-radius: 50px;
    background: var(--accent);
    color: #fff;
    font-family: 'Ysabeau Office', sans-serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.03em;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transition: background 0.2s ease, transform 0.2s ease;
}
#showreel-container #unmute i {
    font-size: 22px;
}
#showreel-container #unmute:hover,
#showreel-container #unmute:focus-visible {
    background: var(--accent-light);
    transform: translate(-50%, -50%) scale(1.05);
}

@media screen and (max-width: 575px) {
    .sp-container h2.frame-1,
    .sp-container h2.frame-2,
    .sp-container h2.frame-3,
    .sp-container h2.frame-4 {
        font-size: 40px;
        line-height: 1.25em;
    }

    .sp-container h2.frame-2 {
        top: 0;
    }

    .banner-five .baneer-five-content {
        margin-top: -35px;
    }

    .about-img-wrapper {
        margin-top: 20px;
    }

    .footer-social-three {
        top: -25px;
        position: relative;
    }

    .header_player.style-fullwidth .jp-audio .jp-type-playlist .jp-interface .jp-progress {
        max-width: 75%;
    }

    .header_player .jp-audio .jp-type-playlist .jp-interface .jp-progress {
        max-width: 65%;
    }

    .header_player .jp-audio .jp-type-playlist .jp-interface .jp-progress {
        width: 40%;
    }

    #credits-shows {
        margin-bottom: 0;
    }

    .tim-logo-carousel .credit-image img {
        opacity: 1;
    }
    .tim-logo-carousel .brand-logo img {
        opacity: 1;
    }
    .section-title.style-five p {
        font-size: 18px;
    }
    .header_player .jp-audio .jp-type-playlist .jp-interface .jp-playlist ul li > div > a {
        font-size: 22px;
    }
    #showreel-container {
        height: 30vh !important;
    }
}

@media screen and (max-width: 992px) {
    #showreel-container {
        height: 60vh;
    }
    #showreel-container #unmute {
        padding: 13px 24px;
        font-size: 17px;
    }
}