/* Custom overrides and additional styles for Ian Burgos website */

:root {
    /* Colour palette for the modern dark theme. Defining variables here ensures
       consistent colours across pages even if they are not present in the base styles. */
    --dark-bg: #0f0f0f;      /* deepest background, used for main page backdrop */
    --section-bg: #1a1a1a;   /* slightly lighter dark for sections */
    --accent: #d7c79d;       /* warm gold accent reminiscent of violin wood */
    --accent-dark: #b5a26d;  /* darker variant used on hover states */
    --light-text: #f3f3f3;   /* near-white text colour for high contrast */
    --muted-text: #a9a28b;   /* muted beige for secondary text */
}

/* Override footer colours */
footer {
    background-color: var(--dark-bg);
    color: var(--muted-text);
    text-align: center;
    padding: 1rem 0;
    font-size: 0.9rem;
}

/* Override global Instagram link colour */
.instagram a {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}
.instagram a:hover {
    text-decoration: underline;
}

/* Override streaming icons colours */
.streaming-icons a {
    color: var(--light-text);
    transition: color 0.3s ease;
}
.streaming-icons a:hover {
    color: var(--accent);
}
.streaming a {
    color: var(--accent);
    text-decoration: none;
}
.streaming a:hover {
    text-decoration: underline;
}

/* Override contact section styling on the homepage */
#contact {
    background-color: var(--dark-bg);
    text-align: center;
    padding: 4rem 0;
}
.contact-container p {
    margin-bottom: 0.5rem;
    color: var(--muted-text);
}
.contact-container .instagram a {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}
.contact-container .instagram a:hover {
    text-decoration: underline;
}

/* Override scroll arrow colour */
.scroll-down {
    color: var(--accent);
}

/* Offerings (homepage services) layout - modern fluid design */
.offerings {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-top: 2rem;
}

/* Each offering is displayed as a row with subtle separation */
.offering {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
/* Remove bottom border for last item */
.offering:last-child {
    border-bottom: none;
}

/* Larger circular images to emphasise the offering */
.offering-image img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--accent);
}

.offering-text h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
    color: var(--accent);
}

.offering-text p {
    margin-bottom: 1rem;
    color: var(--muted-text);
    line-height: 1.5;
}

/* Button spacing within offerings */
.offering-text .btn {
    margin-top: 0.3rem;
}

/* Override section backgrounds on the homepage to use the dark colour palette */
#about,
#media,
#gallery,
#listen {
    background-color: var(--section-bg);
}
#about p,
#media p,
#gallery p,
#listen p {
    color: var(--muted-text);
}
#about h2,
#media h2,
#gallery h2,
#listen h2 {
    color: var(--accent);
    font-family: 'Playfair Display', serif;
}

/* Set a dark background for the offerings section so images behind do not show through */
#offerings {
    background-color: var(--dark-bg);
    padding-top: 4rem;
    padding-bottom: 4rem;
    /* Add a diagonal cut at the top of the offerings section so the previous
       background image peeks through when scrolling down from About. */
    clip-path: polygon(0 6vh, 100% 0, 100% 100%, 0 100%);
    margin-top: -6vh;
    padding-top: calc(4rem + 6vh);
}

/* Remove angled clip paths for sections to prevent layout overlap */
#about,
#offerings,
#media,
#gallery {
    clip-path: none;
    padding-top: 4rem;
}

/* Button styles */
.btn {
    display: inline-block;
    padding: 0.55rem 1.2rem;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.btn-primary {
    background-color: var(--accent);
    color: var(--dark-bg);
}

.btn-primary:hover {
    background-color: var(--accent-dark);
    color: var(--dark-bg);
    transform: translateY(-2px);
}

/* Hero section book now button spacing */
.book-now-btn {
    margin-top: 1.2rem;
    font-size: 1rem;
    padding: 0.8rem 1.8rem;
}

/* Events page styles */
.events-hero {
    padding: 6rem 0 4rem;
    text-align: center;
    background-color: var(--dark-bg);
}
.events-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: var(--accent);
}
.events-hero p {
    margin-top: 0.5rem;
    color: var(--muted-text);
}
.event-section {
    background-color: var(--section-bg);
}
.event-entry {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    margin-bottom: 4rem;
}
.event-entry:nth-child(even) {
    flex-direction: row-reverse;
}
.event-entry img {
    flex: 1 1 40%;
    min-width: 260px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    object-fit: cover;
}
.event-entry-content {
    flex: 1 1 55%;
}
.event-entry-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    margin-bottom: 0.75rem;
    color: var(--accent);
}
.event-entry-content p {
    margin-bottom: 1rem;
    color: var(--muted-text);
}

/* Contact page styles */
.contact-hero {
    padding: 6rem 0 4rem;
    text-align: center;
    background-color: var(--dark-bg);
}
.contact-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: var(--accent);
}
.contact-hero p {
    margin-top: 0.5rem;
    color: var(--muted-text);
}
.contact-section {
    background-color: var(--section-bg);
    padding: 4rem 0;
}
.contact-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}
.contact-info {
    flex: 1 1 45%;
}
.contact-info h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--accent);
}
.contact-info p {
    margin-bottom: 1rem;
    color: var(--muted-text);
}
.contact-info a {
    color: var(--accent);
}
.contact-info a:hover {
    text-decoration: underline;
}
.contact-form {
    flex: 1 1 45%;
}
.contact-form form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.contact-form label {
    font-size: 0.9rem;
    color: var(--muted-text);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
    padding: 0.7rem;
    border-radius: 4px;
    border: 1px solid #555;
    background-color: #333;
    color: var(--light-text);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--muted-text);
}
.contact-form button {
    align-self: flex-start;
}

/* Ensure the About and Media sections use crisp white backgrounds and angled edges */
#about {
    background-color: #ffffff;
    /* Create a slanted top and bottom edge so the hero background peeks
       through when scrolling from the hero into About and again when
       leaving About into the offerings section. The top angle uses
       8vh and the bottom uses 6vh for asymmetry. */
    clip-path: polygon(0 0, 100% 8vh, 100% calc(100% - 6vh), 0 100%);
    /* Increase the top padding to account for the slanted top edge */
    padding-top: 8vh;
    /* Add extra padding at the bottom so content doesn’t overlap the
       slanted bottom edge. Negative margin pulls the next section
       up underneath, revealing the background behind the cutout. */
    margin-bottom: -6vh;
    padding-bottom: calc(4rem + 6vh);
}

#media {
    background-color: #ffffff;
    clip-path: polygon(0 0, 100% 6vh, 100% 100%, 0 100%);
    padding-top: 6vh;
    margin-bottom: 0;
}

/* Reviews section: dark backdrop with angled top edge and horizontal layout */
#reviews {
    background-color: var(--section-bg);
    color: var(--light-text);
    clip-path: polygon(0 6vh, 100% 0, 100% 100%, 0 100%);
    padding-top: 6vh;
}

.reviews-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    margin-top: 2rem;
}

.review-item {
    flex: 1 1 calc(33.333% - 2rem);
    background-color: rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.review-item blockquote {
    font-style: italic;
    margin-bottom: 1rem;
}
.review-item figcaption {
    font-weight: 600;
    color: var(--accent);
}

/* CTA button within reviews: transparent background */
.reviews-cta {
    text-align: center;
    margin-top: 2rem;
}
.reviews-cta .btn {
    /* override the built‑in .btn-primary styles to create a transparent outline button */
    background-color: transparent !important;
    border: 2px solid var(--accent);
    color: var(--accent);
}
.reviews-cta .btn:hover {
    background-color: var(--accent) !important;
    color: var(--dark-bg) !important;
}

/* Apply same transparent styling to buttons with .btn-primary class inside reviews and listen sections */
.reviews-cta .btn.btn-primary {
    background-color: transparent !important;
    border: 2px solid var(--accent);
    color: var(--accent);
}
.reviews-cta .btn.btn-primary:hover {
    background-color: var(--accent) !important;
    color: var(--dark-bg) !important;
}

/* Listen section: transparent background with diagonal top edge */
#listen {
    background-color: transparent;
    color: var(--light-text);
    clip-path: polygon(0 6vh, 100% 0, 100%  Lillah Lillah100%, 0 100%);
    padding-top: 6vh;
}

.streaming-icons a {
    color: var(--accent);
    transition: color 0.3s ease;
}
.streaming-icons a:hover {
    color: var(--accent-dark);
}

/* Transparent CTA button in Listen section */
.listen-cta .btn {
    /* override the built‑in .btn-primary styles to create a transparent outline button */
    background-color: transparent !important;
    border: 2px solid var(--accent);
    color: var(--accent);
}
.listen-cta .btn:hover {
    background-color: var(--accent) !important;
    color: var(--dark-bg) !important;
}

/* More specific override for .btn-primary inside Listen section */
.listen-cta .btn.btn-primary {
    background-color: transparent !important;
    border: 2px solid var(--accent);
    color: var(--accent);
}
.listen-cta .btn.btn-primary:hover {
    background-color: var(--accent) !important;
    color: var(--dark-bg) !important;
}

/* Final override to ensure contact button within the Listen section appears as an outline */
#listen .btn-primary {
    background-color: transparent !important;
    border: 2px solid var(--accent);
    color: var(--accent);
}
#listen .btn-primary:hover {
    background-color: var(--accent) !important;
    color: var(--dark-bg) !important;
}

/* Anchored hero backgrounds for events and contact pages with overlay */
.events-hero,
.contact-hero {
    position: relative;
    text-align: center;
    color: var(--light-text);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 6rem 0 4rem;
}

/* Fade the bottom edge of the events and contact heroes into the next section */
.events-hero::after,
.contact-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    /* Smoothly fade the hero image into the dark section below with
       a gradient that starts fully transparent. Using a taller fade
       eliminates any visible line between the header and content. */
    background: linear-gradient(to bottom, rgba(0,0,0,0), var(--section-bg));
    z-index: 0;
}
.events-hero::before,
.contact-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: rgba(0,0,0,0.45);
}
.events-hero h1,
.contact-hero h1,
.events-hero p,
.contact-hero p {
    position: relative;
    z-index: 1;
    color: var(--light-text);
}
.events-hero {
    background-image: url('assets/hero3.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.contact-hero {
    background-image: url('assets/playing4.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Mobile browsers often ignore or mis-render background-attachment: fixed.
   Override to use scroll on smaller devices to ensure the image displays
   correctly and doesn't jitter. */
@media (max-width: 768px) {
    .events-hero,
    .contact-hero {
        background-attachment: scroll;
    }
}
.contact-hero p {
    margin-top: 0.5rem;
}

/* Contact form layout improvements */
.contact-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    align-items: flex-start;
}

.contact-column {
    flex: 1 1 48%;
}
.contact-left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.contact-portrait {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.contact-info h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    margin-bottom: 0.75rem;
    color: var(--accent);
}
.contact-info p {
    color: var(--muted-text);
    margin-bottom: 0.75rem;
}
.contact-info a {
    color: var(--accent);
}
.contact-info a:hover {
    text-decoration: underline;
}
.contact-right form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.contact-right .form-group {
    display: flex;
    flex-direction: column;
}
.contact-right label {
    font-size: 0.85rem;
    color: var(--muted-text);
    margin-bottom: 0.25rem;
}
.contact-right input,
.contact-right select,
.contact-right textarea {
    padding: 0.7rem;
    border-radius: 4px;
    border: 1px solid #555;
    background-color: #333;
    color: var(--light-text);
}
.contact-right input::placeholder,
.contact-right textarea::placeholder {
    color: var(--muted-text);
}
.contact-right button {
    align-self: flex-start;
}

/* Form message styling */
.form-message {
    margin-top: 1rem;
    font-weight: 600;
}

/* Responsive tweaks for reviews and contact sections */
@media (max-width: 900px) {
    .review-item {
        flex: 1 1 45%;
    }
}

@media (max-width: 600px) {
    .reviews-grid {
        flex-direction: column;
    }
    .review-item {
        flex: 1 1 100%;
    }
    .contact-wrapper {
        flex-direction: column;
    }
    .contact-column {
        flex: 1 1 100%;
    }
}

/* Outline button style used for contact links in Listen sections */
.btn-outline {
    background-color: transparent;
    border: 2px solid var(--accent);
    color: var(--accent);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-outline:hover {
    background-color: var(--accent);
    color: var(--dark-bg);
}

/* Responsive adjustments for events and contact layouts */
@media (max-width: 768px) {
    .event-entry,
    .contact-wrapper {
        flex-direction: column;
    }
    .event-entry img,
    .event-entry-content,
    .contact-info,
    .contact-form {
        flex: 1 1 100%;
    }
}

/* Center event entries (images and text) on mobile */
@media (max-width: 768px) {
    .event-entry {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 1rem;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .event-entry img {
        flex: 0 0 auto;
        max-width: 50%;
        width: 100%;
        height: auto;
        margin: 0 auto;
    }
    .event-entry-content {
        flex: 0 0 auto;
        max-width: 90%;
        text-align: center;
    }
    .event-entry:nth-child(even) {
        flex-direction: column;
    }
}

/* Logo image styling for navigation and footer */
.logo-img {
    /* Further increase the navigation logo size on desktop */
    width: 150px;
    height: auto;
}
.footer-logo {
    text-align: center;
    margin-bottom: 0.5rem;
}
.footer-logo img {
    /* Make the footer logo larger for better visibility */
    width: 100px;
    height: auto;
}

/* Center the Reviews section heading and use the accent colour */
#reviews h2 {
    text-align: center;
    color: var(--accent);
    font-family: 'Playfair Display', serif;
}

/* Position navigation links and hamburger for desktop and mobile */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Adjust navigation menu position on desktop for events and contact pages */
@media (min-width: 769px) {
    .events-hero .nav,
    .contact-hero .nav {
        padding-top: 0.5rem; /* Shift navigation menu upward */
    }
}

.nav-links {
    margin-left: auto;
}

/* Hamburger menu styles */
.hamburger {
    font-size: 1.6rem;
    cursor: pointer;
    color: var(--accent);
    display: none; /* Hide hamburger by default */
}

/* Navigation and menu adjustments for mobile */
@media (max-width: 768px) {
    .nav {
        flex-direction: row;
        align-items: center;
        padding: 0.8rem 1rem;
    }
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: rgba(15, 15, 15, 0.85);
        backdrop-filter: blur(8px);
        border-radius: 8px;
        margin-top: 0.5rem;
        padding: 1rem 0;
        gap: 1rem;
        position: absolute;
        top: 100%;
        left: 0;
    }
    .nav-links.open {
        display: flex;
    }
    .nav-links li {
        padding-left: 1rem;
    }
    .nav-links a {
        font-size: 1rem;
    }
    .hamburger {
        display: block;
        margin-left: auto;
    }
    /* Keep logo size unchanged on mobile */
    .logo-img {
        width: 80px;
    }
    /* Stack hero tagline words vertically on mobile for all hero sections */
    #hero .hero-content .tagline {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
    /* Reduce hero heading and tagline size for mobile */
    .hero-content h1 {
        font-size: 2.2rem;
    }
    .tagline {
        font-size: 1rem;
        margin-top: 0.5rem;
    }
    /* Adjust Book Now button sizing */
    .book-now-btn {
        font-size: 0.9rem;
        padding: 0.7rem 1.4rem;
    }
    /* Stack About section content */
    .about-flex {
        flex-direction: column;
    }
    .about-image,
    .about-text {
        flex: 1 1 100%;
    }
}

/* Ensure normal navigation menu is visible on desktop */
@media (min-width: 769px) {
    .nav-links {
        display: flex;
        position: static;
        background-color: transparent;
        backdrop-filter: none;
        border-radius: 0;
        margin-top: 0;
        padding: 0;
    }
    .nav-links li {
        padding-left: 0;
    }
}

/* Hero buttons wrapper: stack Book Now and arrow vertically and center them */
.hero-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1.5rem;
}

/* Scroll-down arrow sizing and spacing for clarity */
.scroll-down {
    font-size: 1.8rem;
    line-height: 1;
    color: var(--accent);
}

/* Contact portrait sizing: constrain width for better balance */
.contact-portrait {
    max-width: 300px;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Ensure no horizontal scrolling occurs on mobile by hiding overflow */
body {
    overflow-x: hidden;
}

/* Ensure tagline text does not overflow on mobile screens */
.tagline {
    display: block;
    padding: 0 1rem;
    word-break: break-word;
}

/* Decorative dots around the multi‑instrumentalist tagline on larger screens. The dots are
   only shown on desktop when the tagline sits on a single line. When stacked on
   smaller screens the dots are suppressed, keeping the mobile view clean. */
@media (min-width: 769px) {
    .tagline .multi::before,
    .tagline .multi::after {
        content: "•";
        margin: 0 0.35rem;
    }
}
@media (max-width: 768px) {
    .tagline .multi::before,
    .tagline .multi::after {
        content: "";
    }
}