/* Basic CSS styles for The Frequency Within */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

/* Global Styles */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background-color: #F6EDE8; /* Requested background color */
    font-family: 'Poppins', sans-serif; /* Requested font */
    color: #333333; /* Dark grey text for contrast */
    line-height: 1.6;
}

/* Layout Container */
.main-container {
    max-width: 1100px; /* Adjust max width as desired */
    margin: 20px auto; /* Center the container with some top/bottom margin */
    padding: 0 20px; /* Add padding on the sides */
}

/* Card Styling */
.content-card {
    background-color: #ffffff; /* White background for cards */
    padding: 30px;
    margin-bottom: 30px;
    border-radius: 12px; /* Slightly more rounded corners */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Softer shadow */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transition for hover effect */
    overflow: hidden; /* Needed for full height image layout */
}

/* Reduce padding specifically for the Book Now card */
#book-now.content-card {
    padding: 20px;
}

/* Card Floating Hover Effect */
.content-card:hover {
    transform: translateY(-5px); /* Lift the card slightly */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12); /* Enhance shadow on hover */
}

/* Header Styling */
header {
    display: flex;
    justify-content: space-between; /* Logo left, Nav right */
    align-items: center;
    padding: 15px 30px; /* Add some padding */
    background-color: #fff; /* Optional: Add background */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Optional: Subtle shadow */
    position: sticky; /* Make header stick to top */
    top: 0;
    z-index: 100;
}

header .logo {
    font-size: 1.5em; /* Make logo text slightly larger */
    font-weight: bold;
    line-height: 0; /* Prevent extra space if image has whitespace */
}

header nav ul {
    list-style: none; /* Remove bullet points */
    padding: 0;
    margin: 0;
    display: flex;
}

header nav ul li {
    margin-left: 20px; /* Space between nav items */
}

header nav ul li a {
    text-decoration: none; /* Remove underline */
    color: #333; /* Match body text color */
    font-weight: bold;
    transition: color 0.2s ease-in-out;
}

header nav ul li a:hover {
    color: #a0522d; /* Example hover color (Sienna) - adjust as needed */
}

/* Burger Menu Styling */
.burger-menu {
    display: none; /* Hidden by default on desktop */
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 5px;
}

.burger-menu span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}

/* Add more specific styles below */

/* About Section specific adjustments */
#about .about-content {
    display: flex; /* Use flexbox for layout */
    align-items: stretch; /* Make items stretch to container height */
    flex-wrap: nowrap; /* Prevent wrapping */
    margin: -30px; /* Counteract card padding to make image flush */
}

#about .about-image {
    width: 40%; /* Adjust width percentage as needed */
    margin-right: 0;
    margin-bottom: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    flex-shrink: 0;
    height: auto; /* Let image height be natural based on container */
    object-fit: cover; /* Re-add object-fit */
}

#about .about-text {
    flex: 1; /* Allow text to take remaining space */
    padding: 30px; /* Add padding back to the text area */
    align-self: center; /* Vertically center text */
}

/* Lifewave Section specific adjustments */
#lifewave .lifewave-content {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    margin: -30px; /* Counteract card padding */
}

#lifewave .lifewave-image {
    width: 40%;
    margin-left: 0;
    margin-bottom: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    padding: 0;
    flex-shrink: 0;
    object-fit: cover;
    order: 2; /* Display image after text */
}

#lifewave .lifewave-text {
    flex: 1;
    padding: 30px;
    align-self: center;
    order: 1; /* Display text before image */
}

/* Generic Button Style */
.button-link {
    display: inline-block;
    background-color: #a0522d; /* Same as nav hover */
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 15px; /* Space above button */
}

.button-link:hover {
    background-color: #8b4513; /* Darker Sienna */
    color: #ffffff;
}

/* Services Section - 3 Card Layout */
.services-grid-container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 30px; /* Space between cards */
    padding: 0; /* Remove parent card padding if children are cards */
    background-color: transparent; /* Remove parent card background */
    box-shadow: none; /* Remove parent card shadow */
    overflow: visible; /* Allow child card shadows */
}

.service-card {
    flex: 1; /* Allow cards to grow */
    min-width: 280px; /* Minimum width before wrapping */
    background-color: #fff; /* White background */
    border-radius: 12px; /* Match other cards */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Match other cards */
    padding: 20px;
    text-align: center; /* Center text within card */
    display: flex; /* Use flexbox for vertical layout */
    flex-direction: column;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Match hover transition */
}

.service-card:hover {
    transform: translateY(-5px); /* Match hover effect */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}

.service-card img {
    max-width: 100%; /* Ensure image fits */
    height: 200px; /* Fixed height for images - adjust as needed */
    object-fit: cover; /* Cover the area, maintain aspect ratio */
    border-radius: 8px; /* Slightly rounded corners for image */
    margin-bottom: 15px;
}

.service-card h4 {
    margin-bottom: 10px;
    font-size: 1.1em;
    color: #333;
}

.service-card p {
    font-size: 0.95em;
    color: #555;
    flex-grow: 1; /* Allow paragraph to take up remaining space */
}

/* Book Now Section - Widget Centering */
#book-now .widget-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

/* Make Calendly widget wider for horizontal layout */
#book-now .widget-container .calendly-inline-widget {
    width: 100%;     /* Use full container width */
    /* max-width: 800px; Removed max-width */
}

/* Footer Styling */
footer {
    display: flex;
    justify-content: space-between; /* Copyright left, Email right */
    align-items: center;
    padding: 20px 30px;
    margin-top: 40px; /* Add space above footer */
    border-top: 1px solid #ddd; /* Separator line */
    font-size: 0.9em;
    color: #555; /* Slightly lighter text */
}

footer p {
    margin: 0;
}

footer a {
    color: #555; /* Match footer text color */
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

#logo-img {
    height: 50px; /* Adjust height as needed */
    width: auto; /* Maintain aspect ratio */
    vertical-align: middle; /* Align image nicely if there were text */
}

/* --- Media Queries for Responsiveness --- */

@media (max-width: 768px) {
    body {
        font-size: 90%; /* Reduce base font size slightly */
        line-height: 1.5;
    }

    h2, h3, h4 {
        font-size: 1.2em; /* Adjust heading sizes */
    }

    header {
        padding: 10px 15px; /* Reduce header padding */
        flex-wrap: wrap; /* Allow wrapping if needed */
    }

    header nav {
        order: 3; /* Move nav below logo/burger */
        width: 100%; /* Full width for mobile nav */
    }

    header nav ul#main-nav {
        display: none; /* Hide nav list by default */
        margin-top: 10px; /* Add space between logo/burger and nav */
        flex-direction: column; /* Stack nav items */
        align-items: flex-start;
        width: 100%;
        background-color: #fff; /* Background for dropdown */
        box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Add shadow */
        padding: 10px 0; /* Padding inside dropdown */
    }

    header nav ul#main-nav.mobile-nav-open {
        display: flex; /* Show nav list when open */
    }

    header nav ul li {
        margin-left: 0; /* Remove left margin */
        margin-bottom: 0;
        width: 100%;
    }

    header nav ul li a {
        display: block; /* Make links full width */
        padding: 10px 15px; /* Padding for touch targets */
        width: 100%;
        box-sizing: border-box;
    }

    .burger-menu {
        display: block; /* Show burger on mobile */
        order: 2; /* Position after logo */
    }

    /* Optional: Animate burger icon to X */
    .burger-menu.open span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .burger-menu.open span:nth-child(2) {
        opacity: 0;
    }
    .burger-menu.open span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    .main-container {
        margin: 10px auto;
        padding: 0 10px;
    }

    .content-card {
        padding: 20px;
        margin-bottom: 20px;
    }

    /* About Section - Mobile Layout */
    #about .about-content {
        flex-direction: column; /* Stack image and text */
        margin: 0; /* Reset negative margin */
        align-items: center; /* Center items */
    }

    #about .about-image {
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px;
        height: auto; /* Adjust height for mobile */
        object-fit: cover; /* Ensure cover works on mobile too */
        border-radius: 8px; /* Restore radius for mobile */
    }

    #about .about-text {
        padding: 0; /* Remove padding if parent handles it */
        align-self: stretch; /* Allow text to stretch */
        text-align: center; /* Center text */
    }

    /* Lifewave Section - Mobile Layout */
    #lifewave .lifewave-content {
        flex-direction: column-reverse; /* Stack image above text */
        margin: 0;
        align-items: center;
    }

    #lifewave .lifewave-image {
        width: 100%;
        max-width: 300px;
        margin-top: 20px; /* Space above image when stacked */
        border-radius: 8px;
        order: 1; /* Reset order for stacking */
    }

    #lifewave .lifewave-text {
        padding: 0;
        align-self: stretch;
        text-align: center;
        order: 2; /* Reset order for stacking */
    }

    /* Footer - Mobile Layout */
    footer {
        flex-direction: column; /* Stack items */
        text-align: center;
        padding: 15px;
    }

    footer p {
        margin-bottom: 10px; /* Add space between items */
    }

    footer .email-link {
        margin-bottom: 0;
    }

    /* Event Promo Section - Mobile Layout */
    #event-promo {
        /* No changes needed for the section itself on mobile */
    }

    /* Restore mobile layout styles for the structure */
    .event-layout { /* Stack items on mobile */
        flex-direction: column;
        gap: 20px;
     }

    .event-info {
        padding-right: 0; /* Remove right padding */
        text-align: center; /* Center text on mobile */
    }

    .event-checkout {
        padding-left: 0; /* Remove left padding */
        align-self: center; /* Center button container */
    }

    /* Lifewave Section - Mobile Layout */
    #lifewave .lifewave-content {
        flex-direction: column-reverse; /* Stack image above text */
        margin: 0;
        align-items: center;
    }

    #lifewave .lifewave-image {
        width: 100%;
        max-width: 300px;
        margin-top: 20px; /* Space above image when stacked */
        border-radius: 8px;
        order: 1; /* Reset order for stacking */
    }

    #lifewave .lifewave-text {
        padding: 0;
        align-self: stretch;
        text-align: center;
        order: 2; /* Reset order for stacking */
    }
}

/* Event Promo Section */
#event-promo {
    padding: 30px; /* Keep outer padding */
    display: flex; /* Use flex for layout inside */
}

/* Restore layout styles */
.event-layout { /* New container for the two columns */
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping on desktop */
    gap: 30px; /* Space between columns */
    align-items: stretch; /* Make columns full height */
    width: 100%; /* Take full width */
}

.event-info {
    flex: 1; /* Give info remaining space */
    padding-right: 30px; /* Space between text and button */
    /* Text is left-aligned by default */
}

.event-checkout {
    /* flex: 0 0 auto; /* Don't grow or shrink, keep snippet size */
    /* The Square snippet has its own width */
    display: flex; /* Use flex to vertically center the snippet */
    align-items: center; /* Center snippet vertically */
    justify-content: center; /* Center snippet horizontally (optional) */
}

/* Restore styles for text elements if needed, but they might be fine by default */
/* .event-info h4 { ... } */
/* .event-info .event-price { ... } */
/* .event-info .event-datetime, .event-info .event-location { ... } */
/* .event-info .event-description { ... } */

/* Style the Square button container */
/* .event-checkout > div { ... } */ /* Styling handled by Square snippet */


/* Services Section - 3 Card Layout */
.services-grid-container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 30px; /* Space between cards */
    padding: 0; /* Remove parent card padding if children are cards */
    background-color: transparent; /* Remove parent card background */
    box-shadow: none; /* Remove parent card shadow */
    overflow: visible; /* Allow child card shadows */
}

.service-card {
    flex: 1; /* Allow cards to grow */
    min-width: 280px; /* Minimum width before wrapping */
    background-color: #fff; /* White background */
    border-radius: 12px; /* Match other cards */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Match other cards */
    padding: 20px;
    text-align: center; /* Center text within card */
    display: flex; /* Use flexbox for vertical layout */
    flex-direction: column;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Match hover transition */
}

.service-card:hover {
    transform: translateY(-5px); /* Match hover effect */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}

.service-card img {
    max-width: 100%; /* Ensure image fits */
    height: 200px; /* Fixed height for images - adjust as needed */
    object-fit: cover; /* Cover the area, maintain aspect ratio */
    border-radius: 8px; /* Slightly rounded corners for image */
    margin-bottom: 15px;
}

.service-card h4 {
    margin-bottom: 10px;
    font-size: 1.1em;
    color: #333;
}

.service-card p {
    font-size: 0.95em;
    color: #555;
    flex-grow: 1; /* Allow paragraph to take up remaining space */
}

/* Workshop Product Card Styling */
.workshop-product-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    padding: 18px 18px 24px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 320px;
    margin: 0 auto;
}

.workshop-product-image {
    width: 100%;
    max-width: 280px;
    border-radius: 8px;
    margin-bottom: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    object-fit: cover;
}