/*
 Theme Name: Dark Melodies
 Theme URI: http://example.com/darkmelodies
 Author: Empthollow
 Author URI: http://empthollow.com
 Description: A classic WordPress theme with dynamic page section cards and ethereal styling.
 Version: 1.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: darkmelodies
*/

/* Light / Normal Weight Variant */
@font-face {
    font-family: 'logofont';
    src: url('./Comfortaa-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Bold Weight Variant */
@font-face {
    font-family: 'logofont';
    src: url('./Comfortaa-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* Global font-family assignment */
body,
h1,
h2,
h3,
h4,
h5,
h6,
input,
button,
select,
textarea,
.entry-title,
.entry-content,
.entry-content *,
.wp-block-heading,
.wp-block-paragraph,
.has-font-family {
    font-family: 'logofont', sans-serif !important;
}

body {
    color: white;
    font-size: 40px;
    background-color: #1d1d1d;
    min-width: 550px;
    margin: 0;
    padding: 0;
}

.headerlogo {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 1. Viewport Overflow Unlocker & Smooth Scroll Anchor Offsets */
html {
    scroll-behavior: smooth;
}

html,
body {
    overflow-x: visible;
}

/* Offset anchor scrolling so card titles stay visible below fixed navbar */
.card,
.message,
[id].card,
[id].message {
    scroll-margin-top: 6rem !important;
}

body.admin-bar .card,
body.admin-bar .message,
body.logged-in .card,
body.logged-in .message {
    scroll-margin-top: 8.5rem !important;
}

/* 2. Sticky Nav Bar (Starts below hero screen, sticks to top when scrolled) */
#sticky-nav,
.site-header.sticky-nav {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
    left: 0 !important;
    background-color: rgba(20, 20, 20, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    transition: all 0.3s ease;
}

/* Shift down if WP admin bar is present */
body.logged-in #sticky-nav,
body.admin-bar #sticky-nav,
body.logged-in .site-header.sticky-nav,
body.admin-bar .site-header.sticky-nav {
    top: 32px !important;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    margin: 0 auto;
    padding: 12px 5rem;
}

.header-logo .nav-logo {
    height: 3.5rem;
    width: auto;
    display: block;
    opacity: 1;
    transition: transform 0.3s ease;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 25px;
    align-items: center;
}

.main-navigation ul li a {
    color: #ffffff !important;
    font-size: 19px !important;
    font-weight: 500;
    text-decoration: none;
    font-family: 'logofont', sans-serif !important;
    transition: color 0.2s ease, transform 0.2s ease;
}

.main-navigation ul li a:hover {
    color: #814bb4ff !important;
    text-shadow: 1px 0 0 currentColor, -1px 0 0 currentColor, 0 0 8px rgba(129, 75, 180, 0.6);
}

/* 3. Hero Screen Section (Displays at top of viewport) */
.pbhero,
.hero-screen {
    min-height: 100vh;
    min-height: 100dvh;
    /* Dynamic mobile viewport fix */
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    background: radial-gradient(circle at center, #2d2d2d 0%, #151515 100%);
}

.hero-content {
    max-width: 1000px;
    margin: 0 auto;
}

.hero-page-title {
    font-size: 2.375rem !important;
    color: #ffffff !important;
    margin-bottom: 25px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.hero-logo {
    width: 80%;
    max-width: 850px;
    height: auto;
    margin: 0 auto;
    display: block;
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.6));
}

.hero-subtitle {
    font-size: 2.375rem !important;
    color: #ffffff !important;
    margin-top: 30px;
    font-weight: 300;
    letter-spacing: 1px;
}

.width {
    width: 100%;
}

.scale {
    width: 70%;
    max-width: 1200px;
    height: auto;
}

/* Standard WordPress Grid & Columns (Preserves 100% Native WP UI Controls) */
.is-layout-grid,
.wp-block-group.is-layout-grid,
.wp-block-columns {
    justify-content: center;
    justify-items: center;
    align-items: start;
    margin: 0 auto;
}

/* Custom Theme Class for Manual Even Spreading (Add 'spread-evenly' in WP Admin Advanced CSS) */
.spread-evenly,
.grid-spread {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) !important;
    gap: 20px !important;
    justify-content: center !important;
    justify-items: center !important;
    align-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
}

.grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 25px !important;
    justify-content: center !important;
    justify-items: center !important;
    align-content: center !important;
    align-items: start !important;
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
}

.spread-evenly>div,
.grid-spread>div,
.grid>div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
}

.card {
    border: solid 1px #fff;
    border-radius: 10px;
    box-sizing: border-box;
    width: 80%;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    vertical-align: top;
    font-size: 25px;
    color: black;
    margin: 0 auto;
    font-family: 'logofont', sans-serif;
}

/* Automatic inner element styling for WordPress content inside cards */
.wp-block-query,
.wp-block-post-template,
.wp-block-post,
.wp-block-post-title,
.wp-block-post-excerpt,
.wp-block-post-date,
.wp-block-post-meta {
    text-align: left;
}

.card h2 {
    color: #1d1d1d;
    margin-top: 10px;
    font-size: 32px;
    font-family: 'logofont', sans-serif !important;
}

.card h2 a,
.card h1 a,
.card h3 a,
.card h4 a,
.entry-title a {
    color: #2A0054 !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.card h2 a:hover,
.card h1 a:hover,
.card h3 a:hover,
.entry-title a:hover {
    color: #5e2b94 !important;
    text-shadow: 1px 0 0 currentColor, -1px 0 0 currentColor, 0 0 8px rgba(129, 75, 180, 0.6);
}

.card h3 {
    font-size: 26px;
    color: #333;
    font-family: 'logofont', sans-serif !important;
}

.card p {
    font-size: 22px;
    line-height: 1.5;
    color: #222;
    font-family: 'logofont', sans-serif !important;
}

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

.card img.albumart {
    width: 300px;
}

.card iframe {
    width: 100%;
    max-width: 700px;
    height: 400px;
    border: 0;
    margin: 15px auto;
    display: block;
}

.card iframe.audiofile {
    width: 95%;
    height: 150px;
}

.message {
    box-sizing: border-box;
    width: 80%;
    text-align: center;
    font-size: 25px;
    color: white;
    margin: 0 auto;
}

.mtop {
    margin-top: 70px;
}

.pbot {
    padding-bottom: 70px;
}

.audiofile {
    width: 95%;
    height: 150px;
    border: 0;
}

.youtube {
    position: relative;
    width: 100%;
    max-width: 700px;
    height: 400px;
    overflow: hidden;
    border: 0;
}

.albumart,
img.albumart,
.card img.albumart,
.card .albumart {
    width: 300px !important;
    max-width: 300px !important;
    height: auto !important;
    display: inline-block;
}

.centertext {
    text-align: center;
}

.email a,
.footerdiv a,
.site-footer a {
    text-align: right;
    color: #ffffff;
    transition: color 0.2s ease;
}

.email a:hover,
.footerdiv a:hover {
    color: #5e2b94 !important;
    text-shadow: 1px 0 0 currentColor, -1px 0 0 currentColor, 0 0 8px rgba(129, 75, 180, 0.6);
}

.footerdiv {
    display: flex;
    justify-content: space-between;
    padding-top: 30px;
    margin-left: 10%;
    margin-right: 10%;
    padding-bottom: 30px;
}

a,
.site-main a,
.site-content a,
.card a,
.card h2 a,
.card h3 a,
.entry-content a,
.show-meta-row-wrapper a,
.show-meta-col a,
.show-venue a,
.show-details a,
.show-maps-link,
.btn-maps {
    color: #2A0054 !important;
    text-decoration: none;
}

a:hover,
.site-main a:hover,
.site-content a:hover,
.card a:hover,
.entry-content a:hover,
.show-maps-link:hover {
    color: #5e2b94 !important;
    text-shadow: 1px 0 0 currentColor, -1px 0 0 currentColor;
    text-decoration: none;
}

/* Explicitly preserve navigation bar links & #814bb4ff hover highlight */
#sticky-nav a,
.site-header a,
.main-navigation ul li a,
.header-container a {
    color: #ffffff !important;
}

#sticky-nav a:hover,
.site-header a:hover,
.main-navigation ul li a:hover,
.header-container a:hover {
    color: #814bb4ff !important;
    text-shadow: 1px 0 0 currentColor, -1px 0 0 currentColor, 0 0 8px rgba(129, 75, 180, 0.6) !important;
}


/* ============================================================================
   SHOWS & EVENT STYLING
   ============================================================================ */

.show-card,
.single-show-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.show-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

.btn-buy-tickets,
.btn-buy-tickets-lg {
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}

.btn-buy-tickets:hover,
.btn-buy-tickets-lg:hover {
    background: #e6bf47 !important;
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

.btn-maps {
    transition: background 0.2s ease, transform 0.15s ease !important;
}

.btn-maps:hover {
    background: #3367d6 !important;
    transform: scale(1.02);
}

.btn-show-details:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Show Meta Row & Column Layout - Minimalist White Background */
.show-meta-row-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    margin: 0.75rem 0 1.25rem 0;
    padding: 0.75rem 0;
    background: transparent !important;
    border: none;
    line-height: 1;
    font-size: 1.2rem;
    color: inherit;
}

.show-meta-col {
    flex: 1 1 30%;
    box-sizing: border-box;
}

.show-meta-left {
    text-align: left;
}

.show-meta-center {
    text-align: center;
}

.show-meta-right {
    text-align: right;
}

.show-meta-full {
    flex: 1 1 100%;
    text-align: left;
    margin-top: 0.25rem;
    padding-top: 0.25rem;
}

/* Title Flex Layout for Shows (Right-aligned show date on title line) */
.show-title-flex {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    width: 100% !important;
}

.show-title-date {
    font-size: 0.85em;
    font-weight: normal;
    opacity: 0.75;
    margin-left: auto;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .show-meta-row-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.5rem 0;
    }

    .show-meta-col,
    .show-meta-left,
    .show-meta-center,
    .show-meta-right,
    .show-meta-full {
        flex: 1 1 100%;
        width: 100%;
        text-align: left !important;
        margin-top: 0;
        padding-top: 0;
    }

    .show-title-flex {
        flex-direction: column;
        align-items: flex-start;
    }

    .show-title-date {
        margin-left: 0 !important;
        margin-top: 0.25rem;
    }
}

/* Metadata Link Hover & Clean Text Styling */
.show-meta-row-wrapper a,
.show-meta-col a,
.show-venue a,
.show-details a,
.show-maps-link,
.btn-maps {
    color: #2A0054 !important;
    text-decoration: none !important;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.show-meta-row-wrapper a:hover,
.show-meta-col a:hover,
.show-venue a:hover,
.show-details a:hover,
.show-maps-link:hover,
.btn-maps:hover {
    color: #5e2b94 !important;
    text-decoration: none !important;
    text-shadow: 1px 0 0 currentColor, -1px 0 0 currentColor, 0 0 8px rgba(94, 43, 148, 0.4);
}