/******************************************out of love theme***************************************/

/**********************************************root css********************************************/
:root {
    --primary-color: #6b4b20; /* Dark brown, likely your main background color */
    --secondary-color: #f7f5e6; /* Light off-white/cream, likely for text and accents */
    --accent-color: #5c421d; /* Slightly darker brown, for buttons/hover states */
    --hover-color: #4b3517; /* Even darker brown for deeper hover */
    --link-highlight-color: #ffd700; /* Gold/yellow for special links like in cookie popup */
    --text-color-dark: #333333; /* For text on light backgrounds if you introduce them */
    --border-color: #f7f5e6; /* For borders, often matching secondary color */
}
html {
    height: 100%;
    /* Consider if you really need `overflow-x: hidden` globally; it can sometimes cut off content. */
    /* If you only need it for specific elements, apply it there. */
    overflow-x: hidden;
    scroll-behavior: smooth;
}
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box; /* This is the correct universal box-sizing */
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #6b4b20;
    margin: 0;
    padding-top: 70px; /* This padding ensures content is not hidden by the fixed header */
}
.page-content {
    flex-grow: 1;
    /* This is the magic! It tells this section to grow and fill any available space */
}
.center {
    display: block;
    text-align: center;
    margin: 10px;
}
.anchor {
    color: #f7f5e6;
    padding-top: 75px;
    margin-top: -75px;
    z-index: 50;
}

.libre-caslon-text-regular {
    font-family: "Libre Caslon Text", serif;
    font-weight: 400;
    font-style: normal;
}

.libre-caslon-text-bold {
    font-family: "Libre Caslon Text", serif;
    font-weight: 700;
    font-style: normal;
}
.horizontal {
    border: none;
    height: 1px;
    background-color: #f7f5e6;
    margin: 2.5em 20px 0.5em 20px; /* CHANGED: Reduced bottom margin from 2.5em to 0.5em */
    opacity: 1;
    /* Ensures full visibility */
}
/********************************************** HEADER ********************************************/

.main-header {
    background-color: #6b4b20;
    height: 70px; /* Fixed height for your header */
    display: flex; /* Use **Flexbox** to align logo and nav */
    justify-content: space-between; /* Pushes logo to left, nav to right */
    align-items: center; /* Vertically centers logo and nav within the header */
    padding: 0 20px; /* Horizontal padding for the header content */
    position: fixed; /* Keep header fixed at the top */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
}

.main-header .logo { /* Changed from `header .logo` to `.main-header .logo` for consistency */
    height: auto;
    max-width: 60px; /* Adjust logo size as needed */
    flex-shrink: 0; /* Prevents logo from shrinking if space is tight */
}

@media screen and (min-width: 768px) {
    .anchor-box {
        background-color: #6b4b20; /* You can remove the 'transparent' line, it's redundant */
        color: #fff;
        padding-top: 17px;
        padding-bottom: 10px;
        margin-right: -35px;
        margin-left: -35px;
    }
}

@media screen and (max-width: 767px) {
    .anchor-box {
        background-color: #6b4b20; /* You can remove the 'transparent' line, it's redundant */
        color: #fff;
        margin-right: -21px;
        margin-left: -21px;
        margin-top: 1em;
    }
}

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

/************************************* NAVIGATION *************************************************/
/* Positions nav and content */
.container,
.site_content,
.site_content_index {
    position: relative;
}

/* Styling for the press email link specifically */
.site_content p a[href^="mailto:"] {
    color: #f7f5e6; /* White/light cream color */
    text-decoration: underline; /* Add underline */
}

/* Optional: Add a hover state for the email link for better UX */
.site_content p a[href^="mailto:"]:hover {
    color: #ffffff; /* Brighter white on hover */
    text-decoration: none; /* Remove underline on hover, or change to dotted, etc. */
    opacity: 0.8; /* Slightly dim on hover */
}

/* Adjust menu button (icon) styles */
.main-header .icon {
    font-size: 24px;
    color: #fff;
    text-decoration: none;
}
/* Nav container to center and set width - Adjust for flex container */
nav.container {
    z-index: 150;
}
/* Background-color to the nav container. */
nav {
    background-color: transparent;
    border-bottom: none;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */
nav:after {
    content: "";
    display: table;
    clear: both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
    list-style: none;
    position: relative;
    margin: 0; /* Reset default ul margin */
    padding: 0; /* Reset default ul padding */
    height: 100%; /* Make the ul take full height of header for vertical centering */
    display: flex; /* **THIS IS KEY:** Makes LI children horizontal */
    align-items: center; /* Vertically centers li items within the ul's height */
    justify-content: flex-end;
}
nav ul.clearfix {
    list-style: none; /* Remove bullet points */
    display: flex; /* **THIS IS THE KEY:** Makes LI children horizontal */
    flex-direction: row; /* Explicitly set to row (default, but good for clarity) */
    align-items: center; /* Vertically centers li items within the ul's height */
    justify-content: flex-end; /* Pushes items to the right side of the nav container */
    height: 100%; /* Make the ul take full height of nav.container */
    padding: 0; /* Remove default ul padding */
    margin: 0;
}


/* Positioning the navigation items inline for desktop */
nav ul li {
    background-color: transparent; /* Ensure no unwanted background */
    margin-left: 20px;
}


nav ul li a {
    color: #fff;
    text-decoration: none;
    line-height: 70px; /* **MATCH HEADER HEIGHT** to vertically center the text within the 70px header */
    padding: 0 15px; /* Adjust padding for button size */
    background-color: transparent; /* No background on desktop unless hovered */
    transition: all .25s ease; /* Ensure transition is there */
    display: block; /* To apply padding and line-height uniformly */
}
nav ul ul li a {
    display: block;
    padding: 0 12px; /* Original desktop link padding */
    color: #FFF;
    letter-spacing: 0.1em;
    font-size: 1.15em;
    font-family: 'Libre Caslon Text', sans-serif;
    line-height: 40px; /* Adjust if this is for a dropdown */
    text-decoration: none;
    text-align: center;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
nav a:hover,
nav li.selected a,
nav li.selected a:hover {
    opacity: 0.7;
}

nav li .down a {
    display: block;
}

nav .scroll {
    display: flex; /* Make the inner ul also a **flex container** */
    align-items: center; /* Vertically center its li children */
    padding: 0; /* Remove default padding for ul */
    margin: 0; /* Remove default margin for ul */
}

/* Individual list items within the .scroll ul on desktop */
nav .scroll li {
    margin-left: 20px; /* Spacing between desktop menu items */
}

nav ul ul a {
    font-size: 1em;
}

/* Hide hamburger icon on desktop */
/* Hide the mobile icon on desktop */
nav ul li.icon {
    display: none;
}

/* Hide hamburger icon on desktop */
@media screen and (min-width: 1024px) { /* Changed breakpoint to 1024px for consistency */
    nav ul li.icon {
        display: none !important; /* Use !important to ensure it's hidden on desktop */
    }
    /* Ensure the desktop menu wrapper is visible on desktop */
    .desktop-menu-wrapper {
        display: block;
    }
}

/* --- MOBILE SPECIFIC STYLES --- */
@media screen and (max-width: 1023px) { /* Target screens up to 1023px for mobile styles */
    /* Ensure body padding is correct to see fixed header/menu */
    body {
        padding-top: 70px;
        margin: 0;
        overflow-x: hidden;
    }

    /* Explicitly reset nav and ul within mobile context to ensure no offsets */
    nav, nav ul {
        margin: 0;
        padding: 0;
        left: 0;
        right: 0;
        width: 100%;
    }

    /* --- MOBILE MENU BUTTON (HAMBURGER ICON) STYLES --- */
    nav ul li.icon {
        display: flex; /* Centers the icon within the li */
        align-items: center;
        justify-content: center;
        background-color: var(--primary-color);
        width: 60px; /* Fixed width for the button area */
        height: 60px; /* Fixed height for the button area */
        position: fixed; /* Position the button relative to the viewport */
        top: 5px; /* Adjust as needed */
        right: 15px; /* Adjust as needed */
        z-index: 1002; /* Ensure it's above other content */
        cursor: pointer;
        padding: 0; /* Remove default padding */
        margin: 0; /* Remove default margin */
    }

    /* Style the actual menu icon link inside the square button */
    nav ul li.icon a {
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        line-height: inherit;
        color: #FFF;
        font-size: inherit;
        text-decoration: none;
    }
    
    nav ul li.icon a.menu-toggle {
        display: flex; /* Make it a flex container for the spans */
        flex-direction: column; /* Stack spans vertically */
        justify-content: space-around; /* Distribute space evenly between bars */
        align-items: center; /* Center bars horizontally */
        width: 30px; /* The width of the hamburger bars container */
        height: 20px; /* The total height of the hamburger icon */
        padding: 0;
        margin: 0;
        text-decoration: none;
        background-color: transparent; /* No background for the toggle itself */
        border: none; /* No border for the toggle itself */
        position: relative; /* For transitions if needed on the container */
        overflow: hidden; /* Hide any overflow during animation */
    }
    
    nav ul li.icon a.menu-toggle span {
        display: block; /* Each span is a block line */
        width: 100%; /* Spans take full width of their parent (a.menu-toggle) */
        height: 3px; /* Thickness of the bars */
        background-color: #FFF; /* Color of the bars */
        border-radius: 2px; /* Slightly rounded ends */
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    }

    /* --- Hamburger to X animation (when 'open' class is applied to a.menu-toggle) --- */

    nav ul li.icon a.menu-toggle.open span:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    nav ul li.icon a.menu-toggle.open span:nth-child(2) {
        opacity: 0;
    }

    nav ul li.icon a.menu-toggle.open span:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }

    /* The "responsive" class is added when the user clicks on the "menu" icon */
    nav ul.responsive {
        position: fixed; /* CRITICAL: Make it fixed to the viewport */
        top: 0; /* Start from the very top of the viewport (covers header) */
        
        left: 0;
        width: 100%;
        height: 100vh; /* Make it fill the entire viewport height */
        
        background-color: var(--primary-color); /* Use your variable for consistency */
        overflow-y: auto; /* Allow scrolling within the menu if content is long */
        overflow-x: hidden; /* Prevent horizontal scrolling */
        z-index: 999; /* This is correctly placed below your header's 1000 */
        margin: 0;
        padding: 60px 0 0 0; /* Top padding, then right, bottom, left */

        clear: both;
        float: none; /* Ensure no floating issues */
        /* --- NEW: Align content to the right (flex-end) --- */
        text-align: right; /* Fallback for older browsers, but flexbox overrides for children */
        
        /* Animation for sliding in/out */
        transform: translateY(-100%); /* Default state: hidden above the viewport */
        transition: transform 0.3s ease-out; /* Smooth slide transition */

        /* When the menu is responsive, handle its flex layout */
        display: flex; /* Make it a flex container */
        flex-direction: column; /* Stack items vertically */
        align-items: flex-end; /* --- CHANGED: Align items to the right (flex-end) --- */
        justify-content: flex-start; /* Align items to the start of the menu */
    }
    

    /* When the 'responsive' class is applied by JS, slide the menu into view */
    nav ul.responsive {
        transform: translateY(0);
    }
    
    /* NEW: Hide the menu items by default when the menu is NOT open */
    nav ul.clearfix:not(.responsive) li.desktop-menu-wrapper {
        display: none;
    }

    /* NEW: Display the menu items when the 'responsive' class IS applied */
    nav ul.responsive li.desktop-menu-wrapper {
        display: block; /* Ensure it's visible when the menu is open */
        width: 90%; /* Keep its width */
        max-width: 300px; /* Optional: Max width for larger mobiles/tablets */
        background-color: transparent;
        padding: 0;
        /* --- CHANGED: Removed margin: 0 auto; as align-items: flex-end handles alignment --- */
        margin: 0; /* Or just remove this line if it's the only property changed here */
        clear: both;
        float: none;
    }


    /* --- ACTUAL MENU ITEMS CONTAINER (ul.scroll) --- */
    nav ul.responsive ul.scroll {
        display: block;
        width: 100%;
        background-color: transparent;
        margin: 0; /* Ensure no auto margins from here */
        padding: 0;
        clear: both;
        float: none;
        /* --- NEW: Align text to the right --- */
        text-align: right; /* Important for aligning the actual list items' content */
    }

    /* --- INDIVIDUAL MENU ITEMS (Shop Now, Discography, Videos) --- */
    nav ul.responsive ul.scroll li {
        display: block; /* Stack items vertically */
        width: 100%;
        background-color: transparent;
        /* --- NEW: Align text to the right --- */
        text-align: right; /* This will center the 'a' tag inside */
        padding: 0;
        margin: 10px 0; /* Add vertical spacing between menu items */
        clear: both;
        float: none;
    }

    /* --- LINKS INSIDE INDIVIDUAL MENU ITEMS --- */
    nav ul.responsive ul.scroll li a {
        display: block;
        width: auto; /* Let content and padding determine width */
        padding: 10px 25px; /* ADJUST THIS PADDING to control the "button" size */
        color: #FFF;
        font-size: 1.2em; /* Slightly larger font for readability */
        letter-spacing: 0.1em;
        line-height: normal;
        text-decoration: none;
        /* --- NEW: Align text to the right --- */
        text-align: right; /* Ensure the text within the link is right-aligned */
        border-radius: 5px; /* Optional: adds subtle rounded corners to the button */
        transition: background-color 0.25s ease, color 0.25s ease; /* Smooth transitions for hover */
    }

    /* Mobile Menu Link Hover State */
    nav ul.responsive ul.scroll li a:hover {
        background-color: rgba(255, 255, 255, 0.2); /* Subtle highlight on hover */
        color: #FFF;
    }


    .spacer {
        width: 100%;
        height: 40px;
    }
    .anchor-box {
        background-color: transparent;
        background-color: #6b4b20;
        color: #fff;
        margin-right: -21px;
        margin-left: -21px;
    }
    .horizontal {
        margin-bottom: 5px;
        margin-top: 20px;
    }
}
/***************************************************************************************************/

/********************************************** BODY ***********************************************/
/* --- */
/* Discography Section Styles */
/* --- */
/* Basic styling for each music release block */
.music-release {
    text-align: center;
    /* Center content within each release block */
    margin-bottom: 2em;
    /* Space between releases if stacked */
}

.music-release img {
    max-width: 100%;
    /* Ensure images are responsive */
    height: auto;
    display: block;
    /* Remove extra space below image */
    margin: 0 auto 1em auto;
    /* Center image and add space below */
    border: 2px solid #f7f5e6;
    /* Add a subtle border around album covers */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    /* Add a subtle shadow */
}

.music-release h4 {
    margin-bottom: 0.5em;
    /* Space below title */
    color: #f7f5e6;
    /* Ensure title is readable on dark background */
}

/* Flexbox for arranging releases (desktop) */
@media screen and (min-width: 768px) {
    .flexbox-music {
        display: flex;
        justify-content: center;
        /* Center the entire row of music releases */
        flex-wrap: wrap;
        /* Allow items to wrap if screen is too narrow */
        gap: 40px;
        /* Space between music releases */
        padding: 20px;
        /* Add some padding around the flexbox container */
    }
    .music-release {
        flex: 1;
        /* Allow items to grow and shrink */
        min-width: 300px;
        /* Minimum width for each item before wrapping */
        max-width: 400px;
        /* Maximum width for each item */
        margin-bottom: 0;
        /* Remove bottom margin if they are side-by-side */
    }
}

/* Specific adjustments for the "Stream" button in the music section */
/* You already have pagesbar-music defined, but ensuring consistency */
.pagesbar-music {
    margin-top: 1em;
    /* Add some space above the button */
}

ul.pages-music li a {
    border-color: #f7f5e6;
    /* Consistent with other buttons on dark background */
    color: #f7f5e6;
}

ul.pages-music li a:hover,
ul.pages-music li.selected a,
ul.pages-music li.selected a:hover {
    background-color: #f7f5e6;
    color: #6b4b20;
}

/* Sets the position + display + formating for the body container */
.site_content {
    font-size: 1em;
    margin: .1em auto .1em auto;
    padding: 4em 1.3em 0em 1.3em;
    background-color: #6b4b20;
}

.site_content_index {
    font-size: 1em;
    margin: .1em auto .1em auto;
    padding: 2em 1.3em 0em 1.3em;
    background-color: #6b4b20;
}

/* Padding for the page content */
#content {
    padding: .8em .8em .8em .8em;
}

/* Body Tag fonts */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Libre Caslon Text', sans-serif;
}

/* Font + margin + letter spacing for Body Tags */
p {
    font-size: 1.250em;
    margin: 0 0 1em 0;
    line-height: 1.75em;
}

.list {
    padding: .5em 0 1em 0;
}

.list p {
    margin: 0 0 .5em 0;
}

h1,
h2,
h3 {
    font-size: 3em;
    margin: 0 0 .6em 0;
    letter-spacing: .05em;
}

h4,
h5 {
    font-size: 1.250em;
    margin: 0 0 1em 0;
    line-height: 1.75em;
}

h6 {
    font-size: 1.125em;
    margin: 0 0 .2em 0;
}

h3 {
    text-align: center;
}

#read-bio {
    margin-bottom: 2em;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    /* Sets the position + display + formating for the body container */
    .site_content {
        height: 100%;
        font-size: 1em;
        position: relative;
        width: auto;
        margin: .1em auto .1em auto;
        padding: 2em .7em 1em .7em;
        background-color: #6b4b20;
    }
    .site_content_index {
        font-size: 1em;
        margin: .1em auto .1em auto;
        padding: 2em 1.3em 1em 1.3em;
        background-color: #6b4b20;
    }
    /* Padding for the page content */
    #content {
        padding: 0;
    }
    /* Font + margin + letter spacing for Body Tags */
    /* Change fonts for mobile. Margin + line hieght for p. */
    p {
        font-size: 1.125em;
        margin: 0 0 1em 0;
        line-height: 1.75em;
    }
    h1,
    h2,
    h3 {
        font-size: 1.8em;
        margin: 0 0 .6em 0;
        letter-spacing: .05em;
    }
    h4,
    h5 {
        font-size: 1.125em;
        margin: 0 0 1em 0;
        line-height: 1.75em;
    }
    h6 {
        font-size: 1em;
        margin: 0 0 .2em 0;
    }
     .horizontal {
        /* visibility: hidden; */
        margin-bottom: 5px; /* CHANGED: Reduced margin-bottom from 20px to 5px */
        margin-top: 20px;
    }
}

/* Text Title Lines on Right & Left */
@media screen and (min-width: 768px) {
    h3.lines {
        overflow: hidden;
        text-align: center;
    }
    .anchor-box h3.lines:before,
    .anchor-box h3.lines:after {
        background-color: #6b4b20;
    }
    h3.lines:before,
    h3.lines:after {
        background-color: #6b4b20;
        content: "";
        display: inline-block;
        height: 1px;
        position: relative;
        vertical-align: middle;
        width: 50%;
    }
    h3.lines:before {
        right: 0.5em;
        margin-left: -50%;
    }
    h3.lines:after {
        left: 0.5em;
        margin-right: -50%;
    }
}
/**************************************************************************************************/
/*********************************************** FOOTER *******************************************/

/* Footer (Entire Bottom under the Body) */
footer {
    padding: 0.5em 0;
    background-color: #6b4b20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
}

/* New wrapper for footer content */
#footer-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* max-width is removed to allow stretching, if you ever want to constrain it again, uncomment this: */
    /* max-width: 1200px; */
    padding: 0.3em 20px; /* CHANGED: Reduced vertical padding from 0.8em to 0.3em */
}

.footer-left {
    text-align: left;
}

.footer-left h6 {
    margin: 0;
    /* This will control the spacing *between* the links/text within the h6 */
    display: flex; /* Use flexbox to control spacing between items */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    align-items: center; /* Vertically align items */
    gap: 0.8em; /* Add space between items in the flex container */
}

.footer-left h6 a,
.footer-left h6 span { /* Include span for 'Cookie Choices' for consistent styling */
    color: #f7f5e6;
    font-family: 'Playfair Display', serif; /* Changed to Playfair Display */
    font-weight: 400; /* Use a regular weight for Playfair Display */
    font-size: 0.9em;
    /* text-transform: uppercase; REMOVED to allow proper casing for 'Murnane Records, LLC' */
    text-decoration: none;
    letter-spacing: 0.05em; /* Slightly adjusted letter-spacing for Playfair Display */
    line-height: 1.5em; /* Maintain consistent line height */
    white-space: nowrap; /* Prevent individual links from breaking into multiple lines */
}

/* Hover effect for footer links */
.footer-left h6 a:hover {
    opacity: 0.7; /* Existing hover effect */
    color: #f7f5e6; /* Ensure color stays consistent on hover */
}

.footer-right {
    text-align: right;
}

.footer-right ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.footer-right li {
    display: inline-block;
    margin-left: 20px;
    margin-right: 0;
}

.footer-right a {
    color: #f7f5e6;
    font-size: 1.5em;
    transition: opacity 0.3s ease-in-out;
}

.footer-right a:hover {
    opacity: 0.7;
}

/* Mobile Adjustments: Stacked and Centered (generally better for small screens) */
@media screen and (max-width: 767px) {
    footer {
        padding: 0.5em 0; /* CHANGED: Reduced vertical padding from 1em to 0.5em for consistency */
    }
    #footer-content-wrapper {
        flex-direction: column;
        align-items: center;
        padding: 0.3em 15px; /* CHANGED: Reduced vertical padding from 0.8em to 0.3em for mobile */
        gap: 1em;
    }
    .footer-left {
           width: 100%;
        text-align: center;
        margin-bottom: 0;
        order: 2; /* ADDED: Makes the copyright/text section appear second */
    }
    .footer-right {
        width: 100%;
        text-align: center;
        margin-bottom: 0;
        order: 1;
    }
    .footer-left h6 {
        margin-bottom: 0;
        justify-content: center;
        gap: 0.6em;
    }
    .footer-left h6 a,
    .footer-left h6 span {
        font-size: 0.75em;
        letter-spacing: 0.1em;
    }
    .footer-right ul {
        justify-content: center;
    }
    .footer-right li {
        margin: 0 10px;
    }
    .footer-right a {
        font-size: 1.2em;
    }
}

/*************************************** BUTTONS *******************************************/
.pagesbar-music {
    display: block;
    text-align: center;
    clear: both;
    height: 30%;
}

ul.pages-music,
ul.pages-music li {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.pages-music li a {
    display: inline-block;
    letter-spacing: 0.2em;
    font-family: 'Libre Caslon Text', sans-serif;
    font-weight: bold;
    font-size: 1em;
    margin: .5em 0 -.25em 0;
    padding: .6em 1.2em .6em 1.2em;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    background: transparent;
    border-style: solid;
    border-width: 1px; /* CHANGED: Thinner border from .2em to 1px */
    border-color: #fff;
    border-radius: 20px; /* ADDED: Curved corners, adjust value as desired */
    height: 100%;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

ul.pages-music li a:hover,
ul.pages-music li.selected a,
ul.pages-music li.selected a:hover {
    color: #fff;
    background-color: #5c421d;
}

ul.pages-music p {
    text-align: left;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    ul.pages-music li a {
        letter-spacing: 0.2em;
        font-size: .9em;
        margin: .5em 0 1.25em 0;
    }
}
/***********************************************************************************************/

/************************************Hero Photos*******************************************/
.hero {
    background-image: url("../pictures/misc/hero-img.jpg");
    /* REMOVE fixed height: 650px; */
    min-height: calc(100vh - 70px); /* This makes the hero section fill the remaining viewport height */
    z-index: 100;
    margin-bottom: -46px; /* Keep this if it's for spacing to the next section */
    border-bottom: .2em solid #6b4b20;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

#overlay {
    /* REMOVE fixed height: 650px; */
    min-height: 100%; /* Make overlay fill the height of its parent (.hero) */
    position: absolute; /* Changed to absolute to fit within the hero's dynamic height */
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}

.hero-text {
    width: 80%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -42%);
    color: white;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    #home {
        padding-top: .5em;
    }
    .hero {
        background-image: url("../pictures/misc/hero-img.jpg");
        height: 320px; /* Keep fixed height for mobile as requested */
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        margin-bottom: -56px;
        /* Ensure min-height is reset or not applied on mobile if you want fixed height */
        min-height: auto; /* Explicitly reset min-height for mobile */
    }
    #overlay {
        position: sticky; /* Keep sticky for mobile as requested */
        width: 100%;
        height: 320px; /* Keep fixed height for mobile as requested */
        background-color: rgba(0, 0, 0, 0.6);
    }
    .hero-text {
        width: 100%;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
    }
}

/******************************************************************************************/
/* Cookie Consent Pop-up Styling */
.cookie-consent-popup {
    /* Positioning for Close to Bottom & Horizontal Centering */
    position: fixed;
    bottom: 20px; /* Adjust this value to control distance from the bottom */
    left: 50%;
    transform: translateX(-50%); /* Only horizontal centering */

    /* Box Model & Appearance */
    background-color: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Stronger shadow for a floating effect */
    border-radius: 0; /* NO rounded corners */
    padding: 20px 30px; /* Adjusted padding: top/bottom 20px, left/right 30px */
    box-sizing: border-box; /* Include padding in the element's total width and height */

    /* Dimensions - WIDER BOX */
    width: 95%; /* Make it wider on most screens */
    max-width: 900px; /* Significantly wider for larger screens */
    max-height: 90vh; /* Max height relative to viewport height */
    overflow-y: auto; /* Enable scrolling if content exceeds max-height */

    /* Hiding/Showing with transition for opacity/visibility */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out, bottom 0.4s ease-in-out;
    z-index: 1000;
    
    font-family: Arial, sans-serif;
}

.cookie-consent-popup.show {
    opacity: 1;
    visibility: visible;
    bottom: 20px; /* Ensure it moves to this position when 'show' class is added */
}

.cookie-consent-content {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    transition: height 0.3s ease-in-out;
    display: flex; /* Use flexbox for content layout */
    align-items: center; /* Vertically align items */
    justify-content: space-between; /* Space out message and buttons */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 15px; /* Gap between message and buttons/links */
}

/* Initial Cookie View */
.cookie-view {
    display: none;
    text-align: left;
    width: 100%; /* Ensure views take full width when active */
}

.cookie-view.active {
    display: block;
}

.cookie-message {
    font-size: 13px; /* REALLY SMALL FONT SIZE */
    font-family: Arial, sans-serif;
    line-height: 1.4; /* Adjusted line height for readability */
    margin-bottom: 0; /* Remove bottom margin as flexbox handles spacing */
    color: #333;
    flex-grow: 1; /* Allow message to take up available space */
    max-width: calc(100% - 200px); /* Adjust max-width to leave space for buttons, will be overridden by media queries */
}

.cookie-links {
    margin-bottom: 0; /* Remove bottom margin */
    white-space: nowrap; /* Keep links inline if possible */
    text-align: center;
}

.cookie-links .privacy-policy-link {
    color: #000; /* Standard link color */
    text-decoration: none;
    font-size: 12px; /* Smaller font size for links */
    text-align: center;
}

.cookie-links .privacy-policy-link:hover {
    text-decoration: underline;
}

.cookie-buttons {
    display: flex;
    justify-content: flex-end; /* Align buttons to the RIGHT */
    gap: 10px; /* Space between buttons */
    flex-shrink: 0; /* Prevent buttons from shrinking */
}

.cookie-button {
    background-color: black;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

.cookie-button:hover {
    background-color: #333;
}

.cookie-button-centered {
    display: block; /* Make it a block element */
    margin: 20px auto; /* Center horizontally and add some top/bottom margin */
    width: fit-content; /* Allow it to take only the necessary width */
    max-width: 100%; /* Ensure it doesn't overflow on small screens */
}

/* Detailed Cookie View */
.murnane-music-logo {
    text-align: center;
    margin-bottom: 20px;
}

.murnane-music-logo img {
    max-width: 150px; /* Adjust logo size */
    height: auto;
}

.detailed-cookie-text {
    font-size: 12px; /* VERY SMALL FONT SIZE */
    line-height: 1.5;
    margin-bottom: 10px; /* Slightly reduced margin */
    color: #555;
}

.detailed-cookie-text .text-link {
    color: #000;
    text-decoration: none;
}

.detailed-cookie-text .text-link-default {
    text-decoration: none;
}

.detailed-cookie-text .text-link:hover {
    text-decoration: underline;
}

.cookie-checkboxes {
    display: flex;
    flex-direction: row; /* Changed from column to row */
    flex-wrap: wrap; /* Allow checkboxes to wrap to the next line on smaller screens */
    align-items: center; /* Vertically align items in the row */
    justify-content: center; /* Center checkboxes horizontally within their container */
    gap: 20px; /* Space between checkbox items */
    margin: 15px 0; /* Keep existing margin */
}

.checkbox-item {
    display: flex;
    align-items: center;
    margin-bottom: 0; /* Remove individual item bottom margin as gap handles spacing */
    cursor: pointer;
    font-size: 13px;
}

.checkbox-item label {
    color: #000;
}

/* Custom Checkbox Styling */
.checkbox-item input[type="checkbox"] {
    /* Hide the default checkbox */
    -webkit-appearance: none; /* For Safari/Chrome */
    -moz-appearance: none;    /* For Firefox */
    appearance: none;         /* Standard property */
    border: 1px solid #ccc; /* Give it a subtle border if you want */
    width: 18px;            /* Size of your custom square */
    height: 18px;
    border-radius: 3px;     /* Slightly rounded corners, adjust if needed */
    margin-right: 8px;      /* Keep existing margin */
    cursor: pointer;
    position: relative;     /* Needed for positioning the checkmark pseudo-element */
    display: inline-block; /* Ensure it behaves like a block for sizing */
    vertical-align: middle; /* Align with text */
    flex-shrink: 0; /* Prevent shrinking in flex container */
}

/* Style the custom background when unchecked */
.checkbox-item input[type="checkbox"] {
    background-color: white; /* Default background for unchecked */
    border-color: #555; /* Darker border for the checkbox box */
}

/* Style the custom background when checked */
.checkbox-item input[type="checkbox"]:checked {
    background-color: black; /* Black background when checked */
    border-color: black; /* Make border black too when checked */
}

/* Create the custom checkmark */
.checkbox-item input[type="checkbox"]:checked::before {
    content: '\2713'; /* Unicode character for a checkmark (✓) */
    font-size: 14px; /* Size of the checkmark */
    color: white;    /* White checkmark color */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the checkmark */
    line-height: 1; /* Adjust line-height to prevent extra spacing */
}

/* Special styling for disabled essential checkbox */
.checkbox-item.essential input[type="checkbox"] {
    background-color: #eee; /* Lighter background for disabled */
    border-color: #bbb;
    cursor: not-allowed;
}

.checkbox-item.essential input[type="checkbox"]:checked::before {
    color: #999; /* Greyer checkmark for disabled checked */
}

.checkbox-item.essential {
    cursor: not-allowed;
}

.checkbox-item.essential label {
    color: #888;
}

.checkbox-item.essential:hover {
    cursor: not-allowed;
}

.checkbox-item.essential input[type="checkbox"][disabled] {
    cursor: inherit;
}

.detailed-links {
    margin-top: 15px; /* Adjusted margin */
    text-align: center;
}

.detailed-links .text-link {
    color: #000;
    text-decoration: none;
    margin: 0 8px; /* Reduced margin */
    font-size: 12px; /* Smaller font size for detailed links */
}

.detailed-links .text-link:hover {
    text-decoration: underline;
}

/* --- Media Queries for Responsiveness --- */
@media (max-width: 768px) {
    .cookie-consent-popup {
        width: 98%; /* Even wider on smaller tablets */
        padding: 15px 20px; /* Adjusted padding */
        bottom: 15px; /* Adjust distance for tablets */
    }

    .cookie-consent-content {
        flex-direction: column; /* Stack message, links, and buttons vertically */
        align-items: flex-start; /* Align all items to the left when stacked */
        gap: 10px;
    }

    .cookie-message {
        width: 100%; /* Take full width when stacked */
        max-width: 100%; /* Override previous max-width */
        margin-bottom: 0; /* Ensure no extra margin */
        font-size: 12px; /* Slightly smaller for tablets */
    }

    .cookie-links {
        width: 100%; /* Take full width when stacked */
        text-align: left; /* Align links to left */
    }

    .cookie-buttons {
        width: 100%; /* Take full width */
        justify-content: flex-end; /* Still align buttons to the right within their full width */
        gap: 8px;
    }

    .cookie-button {
        flex-grow: 1; /* Allow buttons to grow to fill space if needed */
        font-size: 13px; /* Slightly smaller button text */
        padding: 10px 12px;
    }

    .checkbox-item,
    .detailed-cookie-text {
        font-size: 11px; /* Even smaller for detailed text/checkboxes on mobile */
    }
    .detailed-links .text-link {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .cookie-consent-popup {
        width: 98%; /* Nearly full width on very small screens */
        max-width: 98%; /* Override max-width for small screens */
        padding: 10px 15px; /* Further reduce padding */
        bottom: 10px; /* Adjust distance for mobile */
    }

    .cookie-message {
        font-size: 11px; /* Smallest font for mobile */
        line-height: 1.3;
    }

    .cookie-buttons {
        flex-direction: column; /* Force stack buttons vertically on small phones */
        gap: 8px;
    }

    .cookie-button {
        width: 100%; /* Make buttons full width */
        font-size: 12px;
        padding: 10px 10px;
    }
    .checkbox-item,
    .detailed-cookie-text {
        font-size: 10px; /* Smallest font for detailed text/checkboxes on smallest screens */
    }
    .detailed-links .text-link {
        font-size: 10px;
    }
}

/* --- Terms and Conditions Styling --- */

.terms-container {
    max-width: 800px; /* Adjust as needed for your desired width */
    margin: 40px auto; /* Centers the content and adds top/bottom margin */
    padding: 20px;
    line-height: 1.75em; /* Matching your existing paragraph line-height */
    color: #f7f5e6; /* Using your light off-white color for text on the dark background */
    background-color: #6b4b20; /* Matching your body background color */
}

.terms-container .terms-title {
    font-size: 3.5em; /* Adjust for "big letters" */
    text-transform: uppercase;
    text-align: left;
    margin-bottom: 0.2em;
    font-family: 'Libre Caslon Text', serif; /* Consistent with your font imports */
    color: #f7f5e6; /* Matching your primary text color */
    /* You may want to add letter-spacing here if you want it similar to your logo/headers */
    /* letter-spacing: 0.05em; */
}

.terms-container .terms-subtitle {
    font-size: 2em; /* Adjust for "smaller, but still big letters" */
    text-transform: uppercase;
    text-align: left;
    margin-top: 0;
    margin-bottom: 1em;
    font-family: 'Libre Caslon Text', serif; /* Consistent with your font imports */
    color: #f7f5e6; /* Matching your primary text color */
}

.terms-container .last-revised {
    text-align: left;
    font-style: italic;
    margin-bottom: 2em;
    font-family: "Libre Caslon Text", serif; /* Consistent with your font imports */
    color: #f7f5e6; /* Matching your primary text color */
}

.terms-container h3,
.terms-container h4 {
    text-align: left; /* Section titles are left aligned */
    margin-top: 1.5em; /* Space above section titles */
    margin-bottom: 0.5em;
    font-family: 'Libre Caslon Text', sans-serif; /* Consistent with your h3/h4 declarations */
    color: #f7f5e6; /* Matching your primary text color */
    letter-spacing: .05em; /* Consistent with your h1/h2/h3 declarations */
}

.terms-container h3 {
    font-size: 1.5em; /* Consistent with your general h3 size */
}

.terms-container h4 {
    font-size: 1.250em; /* Consistent with your general h4/h5 size */
}

.terms-containera {
    text-align: justify; /* Justifies the rest of the terms */
    margin-bottom: 1em; /* Space between paragraphs */
    font-family: 'Libre Caslon Text', sans-serif; /* Consistent with your general paragraph font */
    font-size: 1em; /* Consistent with your general paragraph font size */
    line-height: 1.75em; /* Consistent with your general paragraph line-height */
    color: #f7f5e6; /* Matching your primary text color */
}

.terms-container p {
    text-align: justify; /* Justifies the rest of the terms */
    margin-bottom: 1em; /* Space between paragraphs */
    font-family: 'Libre Caslon Text', sans-serif; /* Consistent with your general paragraph font */
    font-size: 1.250em; /* Consistent with your general paragraph font size */
    line-height: 1.75em; /* Consistent with your general paragraph line-height */
    color: #f7f5e6; /* Matching your primary text color */
}

.terms-container ul {
    text-align: justify; /* Justifies list items if they wrap */
    list-style-type: disc; /* Standard bullet points */
    margin-left: 2em; /* Indent list items - using em for responsiveness */
    margin-bottom: 1em;
    color: #f7f5e6; /* Matching your primary text color */
}

.terms-container ul li {
    margin-bottom: 0.5em; /* Space between list items */
    font-family: 'Libre Caslon Text', sans-serif; /* Consistent with your general paragraph font */
    font-size: 1.250em; /* Consistent with your general paragraph font size */
    line-height: 1.75em; /* Consistent with your general paragraph line-height */
}


----------------------------

.terms-container ul li strong {
    font-weight: 700; /* Ensure strong text is bold */
    font-family: "Libre Caslon Text", serif; /* Using a specific bold variant if preferred */
}


/* Responsive adjustments for smaller screens */
@media screen and (max-width: 767px) { /* Using your mobile breakpoint */
    .terms-container {
        margin: 20px auto;
        padding: 15px;
    }

    .terms-container .terms-title {
        font-size: 2.5em; /* Adjusted for mobile */
    }

    .terms-container .terms-subtitle {
        font-size: 1.5em; /* Adjusted for mobile */
    }

    .terms-container p {
        font-size: 1.125em; /* Consistent with your mobile paragraph font size */
    }

    .terms-container h3 {
        font-size: 1.375em; /* Consistent with your mobile h1/h2/h3 size */
    }

    .terms-container h4 {
        font-size: 1.125em; /* Consistent with your mobile h4/h5 size */
    }

    .terms-container ul li {
        font-size: 1.125em; /* Consistent with your mobile paragraph font size */
    }

    .terms-container ul {
        margin-left: 1.5em; /* Slightly less indent on mobile */
    }
}

/* --- Signup Form Section Styles --- */

.form-group-inline-wrapper {
    display: flex; /* Makes children (form-groups) sit side-by-side */
    gap: 20px; /* Adds space between the Name and Email fields */
    margin-bottom: 20px; /* Maintains vertical spacing below this row */
}

.form-group-inline-wrapper .form-group {
    flex: 1; /* Allows each form-group to take up equal available space */
    margin-bottom: 0; /* REMOVED: No vertical margin needed for individual form-groups within the row */
}

/* Wrapper for the entire signup section - matches your main content background */
.signup-section-wrapper {
    padding: 60px 20px;
    background-color: #6b4b20; /* Your primary dark brown background */
    text-align: center;
    color: #f7f5e6; /* Default text color for elements directly in this section */
}

/* Container for the form itself - now transparent with a defined border */
.signup-container {
    max-width: 800px; /* CHANGED: Increased max-width from 500px to 700px */
    margin: 0 auto;
    background: transparent; /* Makes the box transparent */
    padding: 35px 60px; /* Increased horizontal padding for wider "margins" */
    border-radius: 8px;
    /* border: 2px solid #f7f5e6; /* Adds a subtle light border to define the box */
    /* box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Still provides some depth */
}

/* Heading for the signup section - text color adjusted for dark background */
.signup-container h3 {
    font-family: 'Libre Caslon Text', serif;
    margin-bottom: 15px;
    color: #f7f5e6; /* Light cream text for contrast on dark background */
    font-size: 2.2em;
    font-weight: 700;
}

/* Paragraph description for the form - text color adjusted for dark background */
.signup-container p.libre-caslon-text-regular {
    font-family: "Libre Caslon Text", serif;
    margin-bottom: 28px;
    line-height: 1.7;
    color: #f7f5e6; /* Light cream text for readability */
    font-size: 0.7em;
}

/* Form element base styling */
.signup-form .form-group {
    margin-bottom: 20px;
    text-align: left;
}

/* Labels for form inputs - text color adjusted for dark background */
.signup-form label.libre-caslon-text-bold {
    font-family: "Libre Caslon Text", serif;
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
    color: #f7f5e6; /* Light cream text for labels */
    font-size: 1.05em;
}

.signup-form input[type="text"],
.signup-form input[type="email"] {
    font-family: "Libre Caslon Text", serif;
    width: 100%; /* Important: ensures inputs fill their flex item's width */
    padding: 10px 0;
    background: transparent;
    border: none;
    border-bottom: 2px solid #f7f5e6;
    box-sizing: border-box;
    font-size: 1.0em;
    color: #f7f5e6;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}


/* Placeholder text color for inputs */
.signup-form input::placeholder {
    color: rgba(247, 245, 230, 0.7);
}

/* Focus state for inputs - uses light cream for focus */
.signup-form input[type="text"]:focus,
.signup-form input[type="email"]:focus {
    border-color: #f7f5e6; /* Keeps the line color on focus */
    border-bottom-color: #f7f5e6; /* Ensure bottom line stays solid */
    box-shadow: 0 2px 0 0 rgba(247, 245, 230, 0.5); /* CHANGED: Adjusted shadow to emphasize the line */
    outline: none;
}

/* Checkbox group styling */
.consent-group {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 25px;
}

.consent-group input[type="checkbox"] {
    min-width: 18px;
    min-height: 18px;
    margin-top: 3px;
    accent-color: #f7f5e6; /* Colors the checkbox itself with light cream */
}

/* Consent text - text color adjusted for dark background */
.consent-group label.libre-caslon-text-regular {
    font-family: "Libre Caslon Text", serif;
    margin-bottom: 0;
    font-size: 0.95em;
    color: #f7f5e6; /* Light cream text for consent */
    line-height: 1.4;
}

/* Submit Button - now transparent with light border and text, consistent with your music stream button */
.signup-form button[type="submit"].libre-caslon-text-bold {
    font-family: "Libre Caslon Text", serif;
    font-weight: 700;
    max-width: 300px;
    padding: 15px 20px;
    background: transparent; /* Transparent background */
    color: #f7f5e6; /* Light cream text */
    border: 2px solid #f7f5e6; /* Light cream border */
    border-radius: 20px;
    font-size: 1.15em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease, border-color 0.3s ease;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Submit Button Hover state - matches your music stream button's hover behavior */
.signup-form button[type="submit"]:hover {
    background-color: #f7f5e6; /* Light cream background on hover */
    color: #6b4b20; /* Dark brown text on hover */
    border-color: #f7f5e6; /* Border matches background on hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Form Link */
.signuplink {
    color: #f7f5e6; /* A contrasting color for links (e.g., gold) */
    text-decoration: underline;
    transition: color 0.3s ease;
}

/* Form Message (Success/Error) - keeping existing distinct colors for clarity */
.signup-message {
    margin-top: 30px;
    padding: 18px;
    border-radius: 8px;
    text-align: center;
    display: none;
    font-family: "Libre Caslon Text", serif;
    font-size: 1.0em;
    font-weight: bold;
    line-height: 1.5;
}

/* Success Message Style (from your cookie consent) */
.signup-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* Error Message Style (from your cookie consent) */
.signup-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* --- Responsive Adjustments for Signup Form --- */
@media (max-width: 768px) {
    .form-group-inline-wrapper {
        flex-direction: column; /* Stacks the inputs vertically on smaller screens */
        gap: 0; /* No gap when stacked */
    }
    
    .form-group-inline-wrapper .form-group {
        margin-bottom: 20px; /* Re-adds vertical margin when stacked on mobile */
    }
    
    .signup-section-wrapper {
        padding: 40px 15px;
    }

    .signup-container {
        padding: 25px 30px; /* Adjusted padding for smaller screens */
        max-width: 90%; /* Keeping it responsive for smaller screens */
    }

    .signup-container h3 {
        font-size: 1.8em;
    }

    .signup-container p {
        font-size: 0.95em;
    }

    .signup-form label.libre-caslon-text-bold {
        font-size: 1em;
    }

    .signup-form input[type="text"],
    .signup-form input[type="email"] {
        padding: 8px 0;
    }

    .signup-form button[type="submit"].libre-caslon-text-bold {
        font-size: 1em;
        padding: 12px 15px;
    }
}

/* --- Announcement Popup Styles --- */
.announcement-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black overlay */
    z-index: 9998;
    display: flex;
    justify-content: center;
    align-items: center;
    display: flex; /* Keep flex for centering even when hidden */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.announcement-content {
    background-color: #6b4b20; /* Your brand color for the popup background */
    color: #f7f5e6; /* Light text color */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    text-align: center;
    max-width: 500px;
    width: 90%;
    position: relative;
}

/* Removed styles for .announcement-close */

.announcement-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 20px auto; /* Centers the image and adds space below it before the text */
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.announcement-text {
    font-family: "Libre Caslon Text", serif;
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 25px; /* Added margin-bottom to create space above the button */
    text-align: justify;
}

/* New styles for the Close button */
.announcement-button {
    font-family: "Libre Caslon Text", serif;
    font-weight: 700;
    width: 100%; /* Make button full width of the popup content */
    padding: 15px 20px;
    background: transparent; /* Transparent background */
    color: #f7f5e6; /* Light cream text */
    border: 2px solid #f7f5e6; /* Light cream border */
    border-radius: 10px; /* Consistent rounded corners */
    font-size: 1.15em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease, border-color 0.3s ease;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.announcement-button:hover {
    background-color: #f7f5e6; /* Light cream background on hover */
    color: #6b4b20; /* Dark brown text on hover */
    border-color: #f7f5e6; /* Border matches background on hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.announcement-checkbox-group {
    margin-top: 15px; /* Space above the checkbox group */
    display: flex; /* Use flexbox to align checkbox and label */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    gap: 8px; /* Space between the checkbox and its label */
    font-size: 0.9em; /* Smaller font size for the label */
    color: #f7f5e6; /* Consistent text color */
}

.announcement-checkbox-group label {
    font-family: "Libre Caslon Text", serif; /* Ensure the correct font is applied to the label */
}

.announcement-checkbox {
    width: 16px; /* Standard checkbox size */
    height: 16px;
    accent-color: #6b4b20; /* Changes the checkbox color (modern browsers) to match your theme */
    cursor: pointer;
}

/* --- Responsive adjustments for Announcement Popup --- */
@media screen and (max-width: 767px) {
    .announcement-content {
        padding: 20px;
    }

    .announcement-image {
        margin-bottom: 15px;
    }

    .announcement-text {
        font-size: 0.9em;
        margin-bottom: 20px; /* Adjust margin for mobile */
    }

    .announcement-button {
        font-size: 1em; /* Smaller button text for mobile */
        padding: 12px 15px; /* Smaller button padding for mobile */
    }
    .announcement-checkbox-group {
        margin-top: 10px; /* Adjust margin for mobile */
        font-size: 0.8em; /* Smaller font for mobile label */
    }
}

/* Class to show the popup */
.announcement-popup.show-announcement {
    opacity: 1;
    visibility: visible;
}

/* Optional: Class to explicitly hide the popup, useful if you have conflicting display properties */
.announcement-popup.hide-announcement {
    opacity: 0;
    visibility: hidden;
    /* Delay display: none so transition can complete */
    transition: opacity 0.5s ease, visibility 0.5s ease 0.5s; /* Keep it visible during opacity transition */
    /* Use 'pointer-events: none;' if you want clicks to go through it while fading out */
    pointer-events: none;
}

/* --- Press Kit Section Styles --- */

.presskit-section {
    padding-top: 20px; /* Adjust spacing from header */
    padding-bottom: 40px; /* Adjust spacing for footer */
    background-color: #6b4b20;
    color: #f7f5e6;
}

.presskit-section .site_content {
    /* Inherits general site_content styling, no need to duplicate */
    padding-top: 2em; /* Ensure enough space from top of content area */
}

/* Specific styling for music section within presskit */
.flexbox-music.presskit-music {
    justify-content: center; /* Center music releases */
    gap: 30px; /* Slightly less gap than on index page if desired, or keep 40px */
    padding: 20px 0; /* Add padding around music items */
}

.presskit-music .music-release {
    max-width: 350px; /* Adjust max-width for consistency */
}

.presskit-music .pages-music li a {
    font-size: 0.9em; /* Smaller button text for download links */
    padding: 0.5em 1em; /* Smaller padding for download buttons */
}

/* Press Kit Gallery for Photos */
.presskit-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px; /* Space between photos */
    margin-bottom: 25px;
    padding: 20px 0;
}

.presskit-gallery .photo-item {
    text-align: center;
    flex: 0 1 280px; /* Allows items to shrink/grow, base width 280px */
    max-width: 300px; /* Max width for each photo item */
    background-color: #5c421d; /* Slightly darker background for photo cards */
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.presskit-gallery .photo-item img {
    max-width: 100%;
    height: auto;
    border-radius: 5px; /* Slightly rounded corners for images */
    margin-bottom: 15px;
    border: 1px solid #f7f5e6; /* Subtle border for images */
}

.presskit-gallery .photo-item a {
    display: inline-block;
    background-color: #f7f5e6; /* Light button background */
    color: #6b4b20; /* Dark text */
    padding: 10px 20px;
    border-radius: 20px;
    text-decoration: none;
    font-family: "Libre Caslon Text", serif;
    font-weight: bold;
    font-size: 0.9em;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.presskit-gallery .photo-item a:hover {
    background-color: #fff; /* Lighter on hover */
    color: #4b3517; /* Darker text on hover */
}

/* Video Section Styling */
.presskit-videos {
    margin-bottom: 25px;
    padding: 20px 0;
}

.presskit-videos .video-item {
    text-align: center;
    margin-bottom: 30px;
}

.presskit-videos .video-item h4 {
    margin-bottom: 15px;
    color: #f7f5e6;
    font-size: 1.5em; /* Adjusted for video titles */
}

.video-embed-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 800px; /* Limit max width of video embed */
    margin: 0 auto 20px auto; /* Center embed and add space below */
    border: 2px solid #f7f5e6;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.video-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.presskit-videos .video-item a {
    color: #f7f5e6;
    text-decoration: underline;
    font-family: "Libre Caslon Text", serif;
    font-weight: 400;
    font-size: 1em;
    transition: opacity 0.3s ease;
}

.presskit-videos .video-item a:hover {
    opacity: 0.7;
}

/* Logos & Branding Section */
.presskit-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-bottom: 25px;
    padding: 20px 0;
}

.presskit-logos .logo-item {
    text-align: center;
    background-color: #5c421d;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    flex: 0 1 200px; /* Base width for logo items */
    max-width: 250px;
}

.presskit-logos .logo-item img {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
    background-color: #f7f5e6; /* Background for logos if they are transparent */
    padding: 10px; /* Padding for logos */
    border-radius: 5px;
}

.presskit-logos .logo-item a {
    display: inline-block;
    background-color: #f7f5e6;
    color: #6b4b20;
    padding: 8px 15px;
    border-radius: 20px;
    text-decoration: none;
    font-family: "Libre Caslon Text", serif;
    font-weight: bold;
    font-size: 0.85em;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.presskit-logos .logo-item a:hover {
    background-color: #fff;
    color: #4b3517;
}

.presskit-note {
    font-style: italic;
    font-size: 0.9em;
    margin-top: 15px;
    text-align: center;
    color: rgba(247, 245, 230, 0.8); /* Slightly dimmed text */
}

/* Responsive adjustments for Press Kit */
@media screen and (max-width: 767px) {
    .presskit-section .site_content {
        padding-top: 1em;
        padding-left: 0.7em;
        padding-right: 0.7em;
    }

    .flexbox-music.presskit-music {
        flex-direction: column; /* Stack music releases vertically */
        align-items: center;
        gap: 25px;
    }

    .presskit-music .music-release {
        max-width: 90%; /* Allow wider images on mobile */
    }

    .presskit-gallery {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .presskit-gallery .photo-item,
    .presskit-logos .logo-item {
        max-width: 90%;
        width: 100%;
        padding: 10px;
    }

    .presskit-videos .video-item h4 {
        font-size: 1.2em;
    }

    .presskit-logos {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
}

/* --- Videos Section --- */
.videos-section {
    background-color: var(--accent-color); /* Slightly different background for visual separation */
    color: var(--secondary-color);
    padding: 0 0; /* Consistent padding */
    text-align: center; /* Center the title */
}

.videos-section .section-title {
    font-family: "Libre Caslon Text", serif;
    font-size: 3em; /* Similar to your other section titles */
    font-weight: 700;
    margin-bottom: 40px;
    color: var(--secondary-color);
}

.videos-carousel-container {
    display: flex;
    overflow-x: auto; /* Enables horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* For smoother scrolling on iOS */
    scroll-snap-type: x mandatory; /* Makes items snap into place when scrolled */
    padding: 20px 10px; /* Padding for scroll area */
    gap: 30px; /* Space between video items */
    margin: 0 auto;
    max-width: 1200px; /* Limit overall width, matching your site_content_index */
}

/* Optional: Hide scrollbar for aesthetics, but keep functionality */
.videos-carousel-container::-webkit-scrollbar {
    height: 8px;
    background-color: transparent; /* Darker background for the track */
    border-radius: 4px;
}

.videos-carousel-container::-webkit-scrollbar-thumb {
    background-color: transparent; /* This color isn't in your defined variables, so I left it as is. If you want a variable for this, you'd need to add it to :root. */
    border-radius: 4px;
}

.videos-carousel-container::-webkit-scrollbar-track {
    background-color: transparent;
}

.video-carousel-item {
    flex: 0 0 auto; /* Prevent items from shrinking or growing in the flex container */
    width: 380px; /* Fixed width for each video item */
    scroll-snap-align: start; /* Snap to the start of each item when scrolling */
    background-color: var(--primary-color); /* Background for the video card */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    text-align: center;
    display: flex; /* Use flex for internal layout of item */
    flex-direction: column; /* Stack elements vertically */
    justify-content: space-between; /* Distribute space vertically */
    align-items: center; /* Center content horizontally */
    min-width: 300px; /* Ensure a minimum width on very small screens */
}

.video-carousel-item h4 {
    font-family: "Libre Caslon Text", serif;
    font-weight: bold;
    font-size: 1.3em;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

/* Reusing the responsive video embed container from your press kit */
.video-carousel-item .video-embed-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio (9 / 16 = 0.5625) */
    height: 0;
    overflow: hidden;
    width: 100%; /* Take full width of the item */
    margin-bottom: 20px;
    border-radius: 5px; /* Slightly rounded corners for the video iframe */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--secondary-color); /* Slight border to match design */
}

.video-carousel-item .video-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-carousel-item a {
    display: inline-block;
    background-color: var(--secondary-color); /* Light button background */
    color: var(--primary-color); /* Dark text */
    padding: 10px 20px;
    border-radius: 20px;
    text-decoration: none;
    font-family: "Libre Caslon Text", serif;
    font-weight: bold;
    font-size: 0.9em;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-top: auto; /* Pushes the link to the bottom if content above varies */
}

.video-carousel-item a:hover {
    background-color: #fff; /* Kept white for hover as it contrasts well, but consider using a variable if you have one for pure white. */
    color: var(--hover-color);
}

/* Responsive adjustments for smaller screens */
@media screen and (max-width: 767px) {
    .videos-section .section-title {
        font-size: 2.2em;
        margin-bottom: 30px;
    }

    .videos-carousel-container {
        padding: 15px 5px; /* Adjust padding for smaller screens */
        gap: 20px;
    }

    .video-carousel-item {
        width: 90vw; /* Use viewport width for better fit on mobile */
        max-width: 320px; /* Set a max-width to prevent overly wide items on some phones */
        padding: 15px;
    }
}

/* --- WIKI PAGE SPECIFIC STYLES --- */
/* These styles are intended for wiki.html to mimic Wikipedia's appearance */

/* Ensure the main content area of the wiki page is transparent */
.site_content {
    background-color: transparent; /* Make the main site content background transparent */
    padding-top: 2em; /* Adjust padding to fit the header */
    padding-bottom: 2em;
}

/* Container for the Wikipedia-like content */
.wiki-container {
    background-color: white;
    border: 1px solid #a7d7f9; /* Wikipedia's light blue border */
    padding: 20px 30px;
    margin: 20px auto;
    max-width: 900px; /* Standard Wikipedia content width */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    line-height: 1.6;
    font-family: sans-serif; /* Wikipedia typically uses a sans-serif font */
    color: #202122; /* Standard Wikipedia text color */
}

/* Headings within the wiki container */
.wiki-container h1 {
    font-size: 2.2em;
    margin-bottom: 0.5em;
    color: #000;
    border-bottom: 1px solid #a2a9b1; /* Wikipedia heading line */
    padding-bottom: 0.2em;
}

.wiki-container h2 {
    font-size: 1.6em;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    color: #000;
    border-bottom: 1px solid #a2a9b1;
    padding-bottom: 0.2em;
}

.wiki-container h3 {
    font-size: 1.3em;
    margin-top: 1.2em;
    margin-bottom: 0.6em;
    color: #000;
}

/* Paragraphs within the wiki container */
.wiki-container p {
    font-size: 1em;
    margin-bottom: 1em;
    line-height: 1.6;
}

/* Links within the wiki container */
.wiki-container a {
    color: #0645ad; /* Wikipedia unvisited link color */
    text-decoration: underline;
}

.wiki-container a:visited {
    color: #0b0080; /* Wikipedia visited link color */
}

.wiki-container a:hover {
    text-decoration: none;
}

/* Lists within the wiki container */
.wiki-container ul {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 1em;
}

.wiki-container ol {
    list-style-type: decimal;
    margin-left: 20px;
    margin-bottom: 1em;
}

/* Contents box styling */
.wiki-container .contents-box {
    border: 1px solid #a2a9b1;
    background-color: #f8f9fa;
    padding: 10px 15px;
    margin: 1em 0;
    font-size: 0.9em;
    width: fit-content; /* Make box fit content */
}

.wiki-container .contents-box h3 {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-size: 1.1em;
    border-bottom: none;
    padding-bottom: 0;
}

.wiki-container .contents-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wiki-container .contents-box ul li {
    margin-bottom: 0.3em;
}

.wiki-container .contents-box ul li a {
    text-decoration: none;
    color: #0645ad;
}

.wiki-container .contents-box ul li a:hover {
    text-decoration: underline;
}

/* Responsive adjustments for the wiki page */
@media screen and (max-width: 767px) {
    .wiki-container {
        padding: 15px; /* Reduce padding on smaller screens */
        margin: 10px auto; /* Adjust margin */
    }
    .wiki-container h1 {
        font-size: 1.8em;
    }
    .wiki-container h2 {
        font-size: 1.4em;
    }
    .wiki-container h3 {
        font-size: 1.1em;
    }
    .wiki-container p {
        font-size: 0.95em;
    }
    .wiki-container .contents-box {
        width: 100%; /* Make contents box full width on mobile */
    }
}

/* --- WIKIPEDIA INFOBOX STYLES --- */
.infobox-wrapper {
    float: right;
    margin: 0 0 1em 1em;
    border: 1px solid #a2a9b1;
    border-spacing: 3px;
    background-color: #f8f9fa;
    color: black;
    font-size: 90%;
    line-height: 1.5;
    width: 22em; /* Standard infobox width */
    clear: right; /* Ensures infobox clears other floated elements */
}

.infobox {
    width: 100%;
    border-collapse: collapse;
}

.infobox th, .infobox td {
    padding: 0.2em 0.4em;
    vertical-align: top;
    text-align: left;
}

.infobox th {
    background-color: #eaecf0; /* Light gray background for headers */
    font-weight: bold;
    text-align: right; /* Infobox labels are right-aligned */
    width: 30%; /* Adjust as needed */
}

.infobox td {
    border-top: 1px solid #a2a9b1;
}

.infobox tr:first-child th,
.infobox tr:first-child td {
    border-top: none;
}

.infobox .fn { /* For the name in the infobox title */
    background-color: #eaecf0;
    font-size: 1.25em;
    font-weight: bold;
    text-align: center;
}

.infobox img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border: none; /* Remove default image border */
}

.infobox-caption {
    font-size: 90%;
    padding: 0.4em 0;
    text-align: center;
}

/* --- WIKIPEDIA REFERENCE STYLES --- */
.reflist {
    font-size: 90%;
    margin-top: 1em;
    border-top: 1px solid #a2a9b1;
    padding-top: 0.5em;
}

.reflist ol {
    list-style-type: decimal;
    margin-left: 2em; /* Indent the list */
    padding: 0;
}

.reflist li {
    margin-bottom: 0.5em;
}

.reflist .reference {
    white-space: nowrap; /* Keep citation numbers together */
}

.reflist .mw-cite-backlink {
    font-weight: bold;
    margin-right: 0.5em;
}

/* General Wikipedia-like link styling for references */
.reflist a {
    color: #0645ad; /* Standard Wikipedia link blue */
    text-decoration: underline;
}

.reflist a:visited {
    color: #0b0080; /* Standard Wikipedia visited link purple */
}

.reflist a:hover {
    text-decoration: none;
}

/* Ensure the main content area of the wiki page is transparent */
.site_content {
    background-color: transparent; /* Make the main site content background transparent */
    padding-top: 2em; /* Adjust padding to fit the header */
    padding-bottom: 2em;
}

/* Container for the Wikipedia-like content */
.wiki-container {
    background-color: white;
    border: 1px solid #a7d7f9; /* Wikipedia's light blue border */
    padding: 20px 30px;
    margin: 20px auto;
    max-width: 900px; /* Standard Wikipedia content width */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    line-height: 1.6;
    font-family: sans-serif; /* Wikipedia typically uses a sans-serif font */
    color: #202122; /* Standard Wikipedia text color */
    overflow: hidden; /* Clear floats within the container */
}

/* Headings within the wiki container */
.wiki-container h1 {
    font-size: 2.2em;
    margin-bottom: 0.5em;
    color: #000;
    border-bottom: 1px solid #a2a9b1; /* Wikipedia heading line */
    padding-bottom: 0.2em;
}

.wiki-container h2 {
    font-size: 1.6em;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    color: #000;
    border-bottom: 1px solid #a2a9b1;
    padding-bottom: 0.2em;
}

.wiki-container h3 {
    font-size: 1.3em;
    margin-top: 1.2em;
    margin-bottom: 0.6em;
    color: #000;
}

/* Paragraphs within the wiki container */
.wiki-container p {
    font-size: 1em;
    margin-bottom: 1em;
    line-height: 1.6;
}

/* Links within the wiki container */
.wiki-container a {
    color: #0645ad; /* Wikipedia unvisited link color */
    text-decoration: underline;
}

.wiki-container a:visited {
    color: #0b0080; /* Wikipedia visited link color */
}

.wiki-container a:hover {
    text-decoration: none;
}

/* Lists within the wiki container */
.wiki-container ul {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 1em;
}

.wiki-container ol {
    list-style-type: decimal;
    margin-left: 20px;
    margin-bottom: 1em;
}

/* Contents box styling */
.wiki-container .contents-box {
    border: 1px solid #a2a9b1;
    background-color: #f8f9fa;
    padding: 10px 15px;
    margin: 1em 0;
    font-size: 0.9em;
    width: fit-content; /* Make box fit content */
}

.wiki-container .contents-box h3 {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-size: 1.1em;
    border-bottom: none;
    padding-bottom: 0;
}

.wiki-container .contents-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wiki-container .contents-box ul li {
    margin-bottom: 0.3em;
}

.wiki-container .contents-box ul li a {
    text-decoration: none;
    color: #0645ad;
}

.wiki-container .contents-box ul li a:hover {
    text-decoration: underline;
}

/* Responsive adjustments for the wiki page */
@media screen and (max-width: 767px) {
    .wiki-container {
        padding: 15px; /* Reduce padding on smaller screens */
        margin: 10px auto; /* Adjust margin */
    }
    .wiki-container h1 {
        font-size: 1.8em;
    }
    .wiki-container h2 {
        font-size: 1.4em;
    }
    .wiki-container h3 {
        font-size: 1.1em;
    }
    .wiki-container p {
        font-size: 0.95em;
    }
    .wiki-container .contents-box {
        width: 100%; /* Make contents box full width on mobile */
    }
    .infobox-wrapper {
        float: none; /* Remove float on mobile */
        margin: 1em auto; /* Center infobox on mobile */
        width: 90%; /* Adjust width for mobile */
    }
}

.error-container {
            text-align: center;
            padding: 80px 20px;
            min-height: calc(100vh - 200px); /* Adjust based on header/footer height */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: var(--primary-color); /* Light background matching your site's theme if applicable */
        }
        .error-container h1 {
            font-family: 'Libre Caslon Text', serif; /* Use one of your defined fonts */
            font-size: 4em;
            margin-bottom: 20px;
            color: var(--secondary-color); /* Dark text for contrast */
        }
        .error-container p {
            font-family: 'Libre Caslon Text', serif; /* Use one of your defined fonts */
            font-size: 1.2em;
            margin-bottom: 30px;
            max-width: 600px;
            line-height: 1.6;
            color: var(--secondary-color);
        }
        .error-container a {
            display: inline-block;
            background-color: var(--secondary-color); /* Your brand color */
            color: var(--primary-color); /* Your light text color */
            padding: 12px 25px;
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
            transition: background-color 0.3s ease;
            font-family: 'Libre Caslon Text', serif; /* Use one of your defined fonts */
        }
        .error-container a:hover {
            background-color: var(--hover-color); /* A slightly darker shade for hover */
        }