/* --- Font Imports --- */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&family=Playfair+Display:wght@400;700&display=swap');

/* --- Color Palette --- */
:root {
    --black: #000000;
    --mint-green: #66CDAA; /* Primary accent for text/headings */
    --coral-pink: #FF6F61; /* Secondary accent for buttons/highlights */
    --light-grey: #BBBBBB; /* Readable text on black */
    --dark-grey: #222222; /* Input field backgrounds */
}

/* --- Global Body & Base Styling --- */
body {
    background-color: var(--black) !important; /* Black background for the entire site */
    color: var(--light-grey); /* Default text color for general content */
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
}

/* Headings - Girly & Professional */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    color: var(--mint-green); /* Mint Green for headings */
    text-align: center; /* Often good for professional headings */
    margin-bottom: 0.5em; /* Adjust spacing as needed */
}

/* Paragraphs */
p {
    color: var(--light-grey);
}

/* Links & Interactive Elements (General) */
a {
    color: var(--mint-green); /* Mint Green for links */
    text-decoration: none; /* Remove underline by default */
    transition: color 0.3s ease;
}

a:hover {
    color: var(--coral-pink); /* Coral Pink on hover */
    text-decoration: underline;
}

/* --- Main Navigation Menu Styling --- */
/* This targets common WordPress menu structures. */
.main-navigation,
#site-navigation, /* Common ID for nav */
.primary-navigation {
    background-color: var(--black); /* Black background for the nav bar */
    padding: 15px 0; /* Adjust padding as needed */
    border-bottom: 1px solid var(--dark-grey); /* Subtle separator */
}

.main-navigation ul,
#site-navigation ul,
.primary-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Arrange menu items horizontally */
    justify-content: center; /* Center align menu items */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
}

.main-navigation li,
#site-navigation li,
.primary-navigation li {
    margin: 0 15px; /* Spacing between menu items */
}

.main-navigation a,
#site-navigation a,
.primary-navigation a {
    color: var(--mint-green); /* Mint Green for menu text */
    font-family: 'Playfair Display', serif; /* Elegant font for menu items */
    font-weight: 700; /* Bolder for prominence */
    font-size: 1.1em; /* Slightly larger menu text */
    padding: 5px 0;
    display: block; /* Make the whole link area clickable */
    text-transform: uppercase; /* For a professional touch */
    transition: color 0.3s ease, border-bottom-color 0.3s ease;
    border-bottom: 2px solid transparent; /* For subtle hover effect */
}

.main-navigation a:hover,
#site-navigation a:hover,
.primary-navigation a:hover {
    color: var(--coral-pink); /* Coral Pink on hover */
    border-bottom-color: var(--coral-pink); /* Underline effect on hover */
}

/* Current page/active menu item */
.main-navigation li.current-menu-item a,
.main-navigation li.current_page_item a,
#site-navigation li.current-menu-item a,
#site-navigation li.current_page_item a,
.primary-navigation li.current-menu-item a,
.primary-navigation li.current_page_item a {
    color: var(--coral-pink); /* Coral Pink for the active page */
    border-bottom-color: var(--coral-pink); /* Solid underline for active page */
}

/* --- Amelia Plugin Specific Styling (General - May need fine-tuning with URL) --- */

/* Main Amelia Container Background */
.am-wrapper,
.am-main,
.am-body,
.am-section { /* Added .am-section for broader coverage */
    background-color: var(--black) !important; /* Ensure Amelia sections have black background */
    color: var(--light-grey) !important; /* Default text in Amelia forms */
}

/* Text within Amelia - Headings & Labels */
.am-section-title,
.am-heading-title,
.am-label,
.am-event-title,
.am-calendar-day span,
.am-service-name, /* For service titles */
.am-category-name, /* For category titles */
.am-customer-info h2 { /* For customer info headings */
    font-family: 'Playfair Display', serif;
    color: var(--mint-green) !important; /* Mint Green for Amelia titles and labels */
    font-weight: bold;
}

/* Booking Form Step Titles */
.am-step-content-title,
.am-step-title,
.am-step-item-title {
    color: var(--coral-pink) !important; /* Coral Pink for step titles */
    font-family: 'Playfair Display', serif;
}

/* General Text in Amelia forms (e.g., descriptions) */
.am-description,
.am-info {
    color: var(--light-grey) !important;
}

/* Buttons (e.g., Next, Book Now, Back) */
.am-button,
.am-button.am-button-primary,
.am-submit-button,
.am-button-link { /* Added am-button-link */
    background-color: var(--coral-pink) !important; /* Coral Pink background */
    color: var(--black) !important; /* Black text on buttons */
    border: 1px solid var(--coral-pink) !important;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    padding: 12px 25px;
    border-radius: 8px; /* Slightly rounded for a softer look */
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.am-button:hover,
.am-button.am-button-primary:hover,
.am-submit-button:hover,
.am-button-link:hover {
    background-color: var(--mint-green) !important; /* Mint Green on hover */
    color: var(--black) !important; /* Black text on hover */
    border-color: var(--mint-green) !important;
    cursor: pointer;
}

/* Calendar Day & Time Slot Selection */
.am-date-picker-day.am-has-events span, /* Days with available slots */
.am-slot-time span, /* Time slots */
.am-slot-time.am-active span { /* Selected time slot */
    color: var(--mint-green) !important; /* Mint Green for available dates/times */
}

.am-slot-time.am-active, /* Selected slot background */
.am-date-picker-day.am-selected {
    background-color: var(--coral-pink) !important; /* Coral Pink for selected items */
    color: var(--black) !important; /* Black text on selected items */
    border-color: var(--coral-pink) !important;
    border-radius: 4px;
}

/* Input Fields (text, email, etc.) */
.am-input-field input,
.am-input-field textarea,
.am-input-field select,
.am-select-container .el-input__inner { /* Targeting Amelia's specific input elements */
    background-color: var(--dark-grey) !important; /* Dark grey for input backgrounds */
    color: var(--light-grey) !important; /* Light grey for input text */
    border: 1px solid var(--mint-green) !important; /* Mint green border */
    border-radius: 5px;
    padding: 10px 12px;
}

.am-input-field input:focus,
.am-input-field textarea:focus,
.am-input-field select:focus,
.am-select-container .el-input__inner:focus {
    border-color: var(--coral-pink) !important; /* Coral pink border on focus */
    box-shadow: 0 0 5px rgba(255, 111, 97, 0.5); /* Soft glow */
}

/* Form checkboxes/radio buttons */
.am-checkbox label,
.am-radio label {
    color: var(--light-grey) !important; /* Light grey for labels */
}

.am-checkbox input[type="checkbox"]:checked + span::before,
.am-radio input[type="radio"]:checked + span::before {
    background-color: var(--coral-pink) !important; /* Coral pink for checked state */
    border-color: var(--coral-pink) !important;
}

/* --- Mobile Responsiveness (Seamless & Streamlined) --- */
/* Basic adjustments for smaller screens */
@media (max-width: 768px) {
    /* Adjust font sizes for better readability on small screens */
    h1 { font-size: 2.2em; }
    h2 { font-size: 1.8em; }
    h3 { font-size: 1.5em; }
    body, p, li, a { font-size: 0.95em; }

    /* Ensure Amelia sections stack well */
    .am-wrapper, .am-main-container {
        padding: 10px !important; /* Reduce padding on small screens */
    }

    /* Adjust button padding */
    .am-button, .am-submit-button {
        padding: 10px 20px;
        width: 100%; /* Make buttons full width on mobile */
        box-sizing: border-box; /* Include padding in width */
    }

    /* Calendar adjustments */
    .am-date-picker-day {
        min-width: unset !important; /* Allow days to shrink */
        width: 13% !important; /* Fit 7 days in a row */
        font-size: 0.8em;
    }

    /* Time slot stacking */
    .am-slots-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .am-slot-time {
        width: 48%; /* Two columns of time slots */
        margin: 1% !important;
        box-sizing: border-box;
    }

    /* Mobile Menu - Hamburger icon usually needs theme-specific targeting */
    /* This is a general attempt. If your theme has a hamburger icon, it might have a class like:
       .menu-toggle, .hamburger-menu-icon, .mobile-menu-button etc.
       You would target it here to change its color to mint green or coral pink.
    */
    .menu-toggle, .hamburger-icon {
        color: var(--mint-green) !important;
    }
    .menu-toggle:hover, .hamburger-icon:hover {
        color: var(--coral-pink) !important;
    }

    /* Mobile menu overlay/sidebar if it appears */
    .main-navigation.toggled,
    #site-navigation.toggled { /* Example classes for opened mobile menu */
        background-color: var(--black) !important;
    }

    .main-navigation ul li { /* Reset margins for vertical stacking */
        margin: 5px 0;
        text-align: center;
    }
}

/* Further adjustments for very small phones */
@media (max-width: 480px) {
    h1 { font-size: 2em; }
    h2 { font-size: 1.6em; }
    body, p, li, a { font-size: 0.9em; }

    .am-slot-time {
        width: 98%; /* Single column for time slots */
    }
}