/*
 * stylesheet.css
 *
 * Main stylesheet for the Hazel Photography website and Content Management System (CMS).
 * This file defines the visual appearance of all pages, including:
 * - Global resets and base typography.
 * - Layout for common elements like the top navigation bar.
 * - Styles for specific pages: Login, About, Services, Gallery, Contact, and Homepage.
 * - Styles for components like buttons, forms, carousels, and cards.
 * - Responsive design adjustments for various screen sizes using media queries.
 * - Styles for the CMS admin interface (page editing, user management).
 */

/* --- Global Resets & Box Sizing --- */
/* Apply border-box sizing to all elements. This makes layout and sizing
   more predictable as padding and borders are included in the element's
   total width and height, rather than adding to it. */
html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
    /* All elements inherit border-box from the html element. */
}

/* --- Base Typography --- */
/* Default styles for major heading elements and paragraphs.
   These provide a baseline for typography across the site. */

/* Main page titles, typically used once per page. */
h1 {
    font-size: 60px;
    /* Large font size for primary headings. */
    margin-bottom: 20px;
    /* Space below the heading. */
    text-align: center;
    /* Center-align H1s by default. */
    font-family: 'Roboto', sans-serif;
    /* Preferred font, with a generic fallback. */
}

/* Secondary headings. */
h2 {
    font-size: 40px;
    /* Slightly smaller than H1. */
    margin-bottom: 40px;
    /* More space below H2s. */
    font-style: italic;
    /* Italicized for a distinct look. */
    text-align: center;
    /* Centered by default. */
    font-family: 'Lato', sans-serif;
    /* Different font family for H2s. */
}

/* Standard paragraph text. */
p {
    line-height: 1.6;
    /* Improved readability with increased line spacing. */
    margin-bottom: 20px;
    /* Space below paragraphs. */
    font-size: 20px;
    /* Base font size for paragraphs. */
    text-align: center;
    /* Paragraphs are centered by default (might be overridden by more specific selectors). */
    font-family: 'Open Sans', sans-serif;
    /* Font for body text. */
}

/* --- HTML & Body Defaults --- */
/* Basic setup for the html and body elements. */
html,
body {
    height: 100%;
    /* Ensure html and body take up full viewport height, useful for sticky footers or full-height layouts. */
    margin: 0;
    /* Remove default browser margins. */
    font-family: 'Roboto', sans-serif;
    /* Set a default font for the entire site. */
    padding: 0;
    /* Remove default browser padding. */
    background-color: #f4f4f4;
    /* Light grey background for the page body. */
}

/* --- Top Navigation Bar --- */
/* Styles for the fixed navigation bar at the top of the page. */
.top-bar {
    position: fixed;
    /* Fixed position to keep it visible while scrolling. */
    top: 0;
    /* Align to the top of the viewport. */
    right: 0;
    /* Align to the right of the viewport. */
    display: flex;
    /* Use flexbox for layout of its children. */
    width: auto;
    /* Width adjusts to content. */
    background-color: white;
    /* White background. */
    padding: 10px 20px;
    /* Padding inside the bar. */
    border-radius: 10px 0 0 10px;
    /* Rounded corners on the left side. */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for depth. */
    z-index: 1000;
    /* Ensure it stays on top of other content. */
    align-items: center;
    /* Vertically align items in the center if the bar has a fixed height. */
}

.top-bar ul {
    list-style: none;
    /* Remove default list bullets. */
    margin: 0;
    /* Remove default margins. */
    padding: 0;
    /* Remove default padding. */
    display: flex;
    /* Arrange list items in a row. */
    gap: 15px;
    /* Space between navigation links. */
}

.top-bar a {
    text-decoration: none;
    /* Remove underline from links. */
    color: black;
    /* Default link color. */
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    /* Font size for navigation links. */
    padding: 5px 10px;
    /* Padding around link text. */
    border-radius: 5px;
    /* Slightly rounded corners for links. */
    transition: background-color 0.3s ease;
    /* Smooth transition for hover effect. */
}

.top-bar a:hover {
    background-color: #a8a8a8;
    /* Background color on hover. */
    color: red;
    /* Text color on hover. */
}

/* --- Login Page Specific Styles --- */
/* Styles for the container and form on the login page. */
.login-page-container {
    display: flex;
    flex-direction: column;
    /* Stack items vertically. */
    align-items: center;
    /* Center items horizontally. */
    justify-content: center;
    /* Center items vertically. */
    padding: 50px 20px;
    /* Padding for the container. */
    min-height: calc(100vh - 70px);
    /* Minimum height to fill viewport (adjust 70px if top-bar height changes). */
    box-sizing: border-box;
    /* Include padding and border in the element's total width and height. */
    margin-top: 60px;
    /* Space from the top, likely to avoid overlap with a fixed top bar. */
}

.login-form-wrapper {
    background-color: white;
    padding: 30px 40px;
    /* Padding inside the form wrapper. */
    border-radius: 10px;
    /* Rounded corners. */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    /* Shadow for the form box. */
    width: 100%;
    max-width: 450px;
    /* Maximum width of the login form. */
    text-align: left;
    /* Align text to the left within the form. */
}

.login-form-wrapper h3 {
    font-size: 28px;
    font-family: 'Lato', sans-serif;
    text-align: center;
    /* Center the "Login Here" title. */
    margin-bottom: 30px;
    color: #333;
}

.login-form-wrapper label {
    display: block;
    /* Make labels take up the full width. */
    margin-top: 20px;
    margin-bottom: 8px;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    /* Slightly bolder labels. */
    color: #555;
}

.login-form-wrapper input[type="email"],
.login-form-wrapper input[type="password"] {
    width: 100%;
    /* Make input fields take full width of their container. */
    padding: 12px 15px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
    background-color: #f9f9f9;
    /* Light background for input fields. */
}

/* Style for focused input fields in the login form. */
.login-form-wrapper input[type="email"]:focus,
.login-form-wrapper input[type="password"]:focus {
    border-color: teal;
    /* Highlight border color on focus. */
    box-shadow: 0 0 0 2px rgba(0, 128, 128, 0.2);
    /* Add a subtle glow effect. */
    outline: none;
    /* Remove default browser outline. */
}

.login-form-wrapper button[type="submit"] {
    width: 100%;
    padding: 12px 20px;
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    color: white;
    background-color: teal;
    /* Primary action color. */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}

.login-form-wrapper button[type="submit"]:hover {
    background-color: #006666;
    /* Darker shade on hover. */
}

/* --- General Content Page Styles --- */
/* Wrapper for main content areas on pages like About, Services, Contact, Gallery. */
.content-page-wrapper {
    max-width: 960px;
    /* Limit content width for readability. */
    margin: 0 auto;
    /* Center the wrapper on the page. */
    padding: 40px 20px;
    background-color: #ffffff;
    /* White background for content areas. */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
    /* Very subtle shadow. */
    margin-top: 30px;
    /* Space above the content wrapper. */
    margin-bottom: 30px;
    /* Space below the content wrapper. */
}

/* Typography overrides within the content page wrapper. */
.content-page-wrapper h1,
.page-content h1 {
    /* .page-content might be a legacy or alternative class for similar sections. */
    font-size: 42px;
    /* Slightly smaller H1 for inner pages compared to homepage. */
    color: #2c3e50;
    /* Dark blue/grey color. */
    margin-bottom: 30px;
    font-family: 'Roboto', sans-serif;
    text-align: center;
}

.content-page-wrapper h2,
.page-content h2 {
    font-size: 28px;
    color: #34495e;
    font-family: 'Lato', sans-serif;
    font-style: normal;
    /* Override default italic H2 for content sections. */
    text-align: left;
    /* Align H2s to the left within content. */
    margin-top: 40px;
    margin-bottom: 20px;
}

/* Remove top margin for the first H2 inside an .about-section to avoid double spacing. */
.content-page-wrapper .about-section:first-of-type h2,
.page-content .about-section:first-of-type h2 {
    margin-top: 0;
}

.content-page-wrapper p,
.page-content p {
    font-size: 17px;
    line-height: 1.7;
    color: #555;
    text-align: left;
    /* Paragraphs within content are left-aligned. */
    margin-bottom: 20px;
    font-family: 'Open Sans', sans-serif;
}

.content-page-wrapper ul,
.page-content ul {
    list-style-position: outside;
    /* Bullets appear outside the text flow. */
    padding-left: 20px;
    /* Indentation for lists. */
    margin-bottom: 20px;
    text-align: left;
    /* Ensure list items are left-aligned. */
}

.content-page-wrapper li,
.page-content li {
    font-size: 17px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 10px;
    /* Space between list items. */
    font-family: 'Open Sans', sans-serif;
}

/* --- About Page Specific Styles --- */
/* Styles for elements unique to the About Us page. */
.about-page-intro {
    text-align: center;
    margin-bottom: 40px;
    border-bottom: 1px solid #eee;
    /* Separator line. */
    padding-bottom: 30px;
}

.about-page-intro p {
    font-size: 18px;
    color: #333;
    max-width: 700px;
    /* Limit width of intro paragraph for readability. */
    margin-left: auto;
    margin-right: auto;
    /* Center the paragraph block. */
    text-align: center;
}

/* Style for a thematic image within the about page intro, if used. */
.about-page-intro .thematic-image {
    max-width: 100%;
    height: auto;
    /* Maintain aspect ratio. */
    border-radius: 8px;
    margin-top: 20px;
}

.about-section {
    margin-bottom: 50px;
    padding-bottom: 30px;
    border-bottom: 1px solid #f0f0f0;
    /* Separator between sections. */
}

.about-section:last-of-type {
    border-bottom: none;
    /* Remove border from the last section. */
    margin-bottom: 20px;
}

/* Layout for sections with alternating image/text alignment. */
.about-section.alternating-layout {
    display: flex;
    /* Use flexbox for side-by-side layout. */
    align-items: center;
    /* Vertically align items in the center. */
    gap: 40px;
    /* Space between image and text columns. */
}

.about-section.alternating-layout .about-section-media {
    flex: 0 0 40%;
    /* Image column takes up 40% width, doesn't grow or shrink. */
}

.about-section.alternating-layout .about-section-text {
    flex: 1;
    /* Text column takes remaining space. */
}

/* Modifier class to float image to the right. */
.about-section.alternating-layout.image-right .about-section-media {
    order: 2;
    /* Change flexbox order to move media to the right. */
}

.about-section.alternating-layout.image-right .about-section-text {
    order: 1;
    /* Text column comes first. */
}

.about-section-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* Shadow for images. */
}

/* --- Call to Action (CTA) Block Styles --- */
/* Reusable styles for call-to-action sections. */
.content-cta {
    text-align: center;
    background-color: #f9f9f9;
    /* Light background for CTA block. */
    padding: 40px 20px;
    border-radius: 8px;
    margin-top: 40px;
}

.content-cta h2 {
    font-size: 26px;
    color: teal;
    /* Use primary color for CTA heading. */
    margin-bottom: 15px;
    text-align: center;
}

.content-cta p {
    font-size: 17px;
    margin-bottom: 25px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* --- Button Styles --- */
/* General button styles. */
.btn {
    display: inline-block;
    padding: 12px 25px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Smooth transitions. */
    cursor: pointer;
}

.btn-primary {
    background-color: teal;
    /* Primary button color. */
    color: white;
    border: 2px solid teal;
    /* Border matching background. */
}

.btn-primary:hover {
    background-color: #006666;
    /* Darker shade on hover. */
    border-color: #006666;
    color: white;
}

/* --- Responsive Styles for Content Pages (About, etc.) --- */
@media (max-width: 768px) {
    /* For tablets and smaller screens. */

    .content-page-wrapper h1,
    .page-content h1 {
        font-size: 34px;
        /* Reduce H1 font size. */
    }

    .content-page-wrapper h2,
    .page-content h2 {
        font-size: 24px;
        /* Reduce H2 font size. */
    }

    .about-section.alternating-layout .about-section-text h2 {
        font-size: 24px;
    }

    .content-page-wrapper p,
    .page-content p,
    .content-page-wrapper li,
    .page-content li {
        font-size: 16px;
        /* Adjust paragraph and list item font size. */
    }

    .about-page-intro p {
        font-size: 17px;
    }

    /* Stack alternating layout sections vertically on smaller screens. */
    .about-section.alternating-layout {
        flex-direction: column;
        gap: 20px;
    }

    .about-section.alternating-layout .about-section-media,
    .about-section.alternating-layout .about-section-text {
        flex-basis: auto;
        /* Reset flex-basis. */
        width: 100%;
        max-width: 100%;
    }

    /* Reset order for image-right layout on small screens as they stack. */
    .about-section.alternating-layout.image-right .about-section-media {
        order: 0;
    }

    .about-section.alternating-layout.image-right .about-section-text {
        order: 0;
    }

    .about-section-image {
        margin-bottom: 20px;
        /* Add space below stacked images. */
    }

    /* Center-align text within about sections and CTAs on smaller screens. */
    .about-section .about-section-text h2,
    .content-cta h2 {
        text-align: center;
    }

    .about-section .about-section-text p,
    .about-section .about-section-text ul,
    .content-cta p {
        text-align: center;
    }

    .about-section .about-section-text ul {
        padding-left: 0;
        /* Remove padding for centered lists. */
        display: inline-block;
        /* Allows centering of the ul block itself. */
        text-align: left;
        /* Keep list item text left-aligned within the block. */
    }
}

@media (max-width: 480px) {

    /* For very small screens (mobile phones). */
    .content-page-wrapper {
        padding: 20px 15px;
        /* Reduce padding. */
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .content-page-wrapper h1,
    .page-content h1 {
        font-size: 28px;
        /* Further reduce H1 font size. */
    }

    .content-page-wrapper h2,
    .page-content h2 {
        font-size: 22px;
        /* Further reduce H2 font size. */
    }

    .about-section.alternating-layout .about-section-text h2 {
        font-size: 22px;
    }

    .btn {
        /* Make buttons slightly smaller. */
        padding: 10px 20px;
        font-size: 15px;
    }
}

/* --- Generic Page Introductory Text --- */
/* Styles for a common introductory text block used on various pages. */
.page-intro-text {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 50px auto;
    /* Center block and add bottom margin. */
}

.page-intro-text p {
    font-size: 18px;
    line-height: 1.75;
    color: #4a4a4a;
    text-align: center;
}

/* --- Services Page Styles --- */
/* Styles for the services section, typically showing service cards. */
.services-container {
    display: flex;
    flex-wrap: wrap;
    /* Allow cards to wrap to the next line. */
    justify-content: center;
    /* Center cards if they don't fill the row. */
    gap: 30px;
    /* Gap between service cards. */
    padding: 20px 0;
}

.service-card {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    /* Card shadow. */
    overflow: hidden;
    /* Ensure content respects border-radius. */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Hover effects. */
    display: flex;
    flex-direction: column;
    /* Stack image, title, text vertically within card. */
    flex: 0 1 calc(33.333% - 21px);
    /* Aim for 3 cards per row (adjusting for gap). */
    min-width: 280px;
    /* Minimum width for a card. */
    margin-bottom: 30px;
    /* Space below cards if they wrap. */
}

.service-card:hover {
    transform: translateY(-10px);
    /* Slight lift effect on hover. */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    /* Enhance shadow on hover. */
}

.service-card img {
    width: 100%;
    height: 220px;
    /* Fixed height for card images. */
    object-fit: cover;
    /* Cover the area, cropping if necessary. */
    display: block;
}

.service-card-content {
    padding: 20px 25px 25px 25px;
    /* Padding for text content within card. */
    flex-grow: 1;
    /* Allow content area to grow to fill card height if needed. */
    display: flex;
    flex-direction: column;
}

.service-card h2 {
    font-size: 22px;
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 10px;
    font-style: normal;
    /* Override default italic H2. */
    text-align: center;
}

.service-card p {
    font-size: 15px;
    line-height: 1.65;
    color: #555;
    text-align: center;
    padding: 0;
    margin-bottom: 15px;
    flex-grow: 1;
    /* Allow paragraph to expand if card heights differ. */
}

/* Responsive adjustments for service cards. */
@media (max-width: 992px) {

    /* Two cards per row on medium screens. */
    .service-card {
        flex-basis: calc(50% - 15px);
        /* Adjust flex-basis for 2 columns (accounting for gap). */
    }
}

@media (max-width: 680px) {

    /* One card per row on smaller screens. */
    .service-card {
        flex-basis: 100%;
        max-width: 400px;
        /* Limit width when stacked. */
        margin-left: auto;
        margin-right: auto;
    }

    .service-card img {
        height: 200px;
        /* Adjust image height. */
    }

    .service-card h2 {
        font-size: 20px;
    }

    .service-card p {
        font-size: 14px;
    }
}

.services-cta.content-cta {
    /* Specific margin for CTA on services page. */
    margin-top: 40px;
}


/* --- Gallery Page Styles --- */
/* Styles for the image gallery. */
.gallery-container {
    display: grid;
    /* Create a responsive grid of images. Columns will auto-fill,
       each being at least 250px wide but can grow to 1fr (fraction of available space). */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px;
    /* Gap between gallery items. */
    padding: 20px 0;
    margin-top: 30px;
}

.gallery-container a {
    /* Each gallery item is an anchor tag (for Lightbox). */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    /* Hover effects. */
    background-color: #f0f0f0;
    /* Fallback background if images are loading. */
    position: relative;
    /* For positioning the overlay. */
    display: block;
    overflow: hidden;
    /* Keep image corners rounded with the anchor. */
    text-decoration: none;
    color: black;
}

.gallery-container a:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    /* Enhanced shadow on hover. */
    transform: scale(1.03);
    /* Slight zoom effect. */
}

.gallery-container img {
    width: 100%;
    height: 230px;
    /* Fixed height for gallery images. */
    object-fit: cover;
    /* Ensure image covers the area, may crop. */
    display: block;
    /* Remove extra space below image. */
    border-radius: 8px;
    /* Rounded corners for images (may be hidden by overlay). */
    transition: transform 0.3s ease;
    /* Zoom effect on image itself on hover. */
}

.gallery-container a:hover img {
    transform: scale(1.05);
    /* Slightly zoom image within the link on hover. */
}

/* Overlay for gallery item titles, shown on hover. */
.overlay {
    /* This style applies to the image overlay in the gallery. */
    background: rgba(0, 0, 0, 0.70);
    /* Semi-transparent black background. */
    border-radius: 0 0 8px 8px;
    /* Match bottom corners of the link. */
    padding: 12px 10px;
    position: absolute;
    /* Positioned relative to the parent anchor. */
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
    text-align: center;
    opacity: 0;
    /* Hidden by default. */
    transition: opacity 0.3s ease;
    /* Fade-in effect. */
}

.gallery-container a:hover .overlay {
    opacity: 1;
    /* Show overlay on hover. */
}

.overlay h2 {
    /* Title text within the overlay. */
    font-size: 17px;
    font-weight: 600;
    font-style: normal;
    color: white;
    line-height: 1.3;
    font-family: 'Lato', sans-serif;
    margin: 0;
}

/* Responsive adjustments for the gallery. */
@media (max-width: 768px) {
    .gallery-container {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        /* Smaller min width. */
        gap: 20px;
    }

    .gallery-container img {
        height: 200px;
        /* Adjust image height. */
    }

    .overlay h2 {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .gallery-container {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        /* Even smaller min width. */
        gap: 15px;
    }

    .gallery-container img {
        height: 150px;
    }

    .overlay h2 {
        font-size: 14px;
        padding: 8px;
    }
}

.gallery-cta.content-cta {
    /* Specific margin for CTA on gallery page. */
    margin-top: 50px;
}


/* --- Form Submission Messages --- */
/* Styles for displaying success or error messages after form submissions (e.g., contact form, CMS forms). */
.form-message {
    padding: 15px 20px;
    margin: 0 auto 30px auto;
    /* Centered with bottom margin. */
    max-width: 700px;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    border-width: 1px;
    border-style: solid;
}

.form-message.success {
    /* Green theme for success messages. */
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}

.form-message.error {
    /* Red theme for error messages. */
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}


/* --- Contact Page Specific Styles --- */
/* Styles for elements on the contact page. */
.contact-details-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Single column by default. */
    gap: 30px;
    margin-bottom: 50px;
}

@media (min-width: 768px) {

    /* Two columns on larger screens. */
    .contact-details-grid {
        grid-template-columns: 1fr 1fr;
        /* Two equal columns. */
        gap: 40px;
    }
}

.contact-info,
.opening-hours {
    background-color: #f9f9f9;
    /* Light background for info blocks. */
    padding: 25px;
    border-radius: 8px;
    text-align: left;
    /* Text aligned left within these blocks. */
}

.contact-info h3,
.opening-hours h3 {
    font-size: 22px;
    color: #34495e;
    font-family: 'Lato', sans-serif;
    font-style: normal;
    margin-top: 0;
    margin-bottom: 15px;
    text-align: left;
}

.contact-info p,
.opening-hours li {
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 10px;
}

.contact-info p:last-child {
    margin-bottom: 0;
}

.contact-info p strong {
    color: #333;
    min-width: 70px;
    /* Ensures alignment for labels like "Address:". */
    display: inline-block;
}

.contact-info p i {
    /* Styles for icons next to contact details. */
    margin-right: 10px;
    color: teal;
    width: 20px;
    text-align: center;
}

.contact-info p a {
    color: teal;
    text-decoration: none;
}

.contact-info p a:hover {
    text-decoration: underline;
}

.contact-form-intro {
    /* Introductory text above the contact form. */
    text-align: center;
    margin-bottom: 30px;
}

.contact-form-intro h2 {
    text-align: center;
    font-size: 28px;
    color: #34495e;
    font-family: 'Lato', sans-serif;
    font-style: normal;
    margin-bottom: 15px;
}

.contact-form-intro p {
    text-align: center;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    font-size: 17px;
    line-height: 1.7;
    color: #555;
}

.contact-form-container {
    /* Wrapper for the contact form itself. */
    background-color: #ffffff;
    padding: 30px 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
    margin-top: 40px;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

form.styled-form {
    /* General styles for the contact form. */
    display: grid;
    /* Use grid for form layout. */
    gap: 20px;
    /* Gap between form elements. */
}

form.styled-form label {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    margin-bottom: 8px;
    color: #444;
    font-size: 16px;
    text-align: left;
}

form.styled-form input[type="text"],
form.styled-form input[type="email"],
form.styled-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #d0d0d0;
    border-radius: 5px;
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
    background-color: #fdfdfd;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

form.styled-form input[type="text"]:focus,
form.styled-form input[type="email"]:focus,
form.styled-form textarea:focus {
    border-color: teal;
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.15);
    /* Focus glow. */
    outline: none;
}

form.styled-form textarea {
    min-height: 150px;
    /* Minimum height for the message area. */
    resize: vertical;
    /* Allow vertical resizing only. */
}

form.styled-form button[type="submit"].btn-primary {
    width: auto;
    /* Button width adjusts to content. */
    padding-left: 30px;
    padding-right: 30px;
    justify-self: start;
    /* Align button to the start of the grid cell. */
}

.map-container {
    /* Container for the embedded map. */
    margin-top: 50px;
    margin-bottom: 30px;
    text-align: center;
}

.map-container h2 {
    text-align: center;
    font-size: 28px;
    color: #34495e;
    font-family: 'Lato', sans-serif;
    font-style: normal;
    margin-bottom: 20px;
}

.map-container iframe {
    width: 100%;
    max-width: 100%;
    height: 400px;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Example of a more complex grid layout for a form, though not fully utilized here. */
@media (min-width: 600px) {
    form.styled-form.two-column-grid button[type="submit"].btn-primary {
        grid-column: 1 / -1;
        /* Make button span all columns if using a two-column grid. */
        justify-self: start;
    }
}


/* --- Homepage Specific Styles --- */
/* Styles for the main homepage section. */
.home {
    width: 100%;
    min-height: 100vh;
    /* Make homepage section at least full viewport height. */
    height: auto;
    /* Allow it to grow if content exceeds viewport. */
    background-color: teal;
    /* Primary theme color for homepage background. */
    color: white;
    /* Text color on homepage. */
    position: relative;
    /* For potential absolute positioning of children. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Align content towards the top. */
    padding: 0 20px 50px 20px;
    /* Top padding is 0, other paddings set. */
    overflow-x: hidden;
    /* Prevent horizontal scrollbars. */
    box-sizing: border-box;
}

.home-content-wrapper {
    /* Wrapper for all content within the .home section. */
    width: 100%;
    max-width: 1300px;
    /* Max width for homepage content. */
    margin: 0 auto;
    /* Center the content. */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
    /* Space at the top of the content. */
}

.logo {
    /* Logo display area on the homepage. */
    max-height: 120px;
    width: 60%;
    /* Relative width. */
    max-width: 80%;
    /* Capped max-width. */
    background-size: contain;
    /* Ensure logo fits without cropping. */
    background-image: url('/Hazel Photography/logo-1.png');
    /* Path to logo image. */
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 15px;
    height: 12vh;
    /* Height relative to viewport height. */
    min-height: 80px;
    /* Minimum height for the logo. */
}

/* Navigation bar specific to the homepage (may differ from .top-bar). */
.home .navbar {
    font-family: 'Open Sans', sans-serif;
    margin: 10px 0 20px 0;
    display: flex;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
    /* Allow links to wrap on smaller screens. */
}

.home .navbar ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.home .navbar li {
    padding: 3px 10px;
    /* Spacing around each nav item. */
}

.home .navbar a {
    text-decoration: none;
    color: white;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.home .navbar a:hover,
.home .navbar a:focus {
    background-color: rgba(255, 255, 255, 0.15);
    /* Subtle background on hover/focus. */
    color: #fff;
    text-decoration: none;
}

.home-header {
    /* Container for tagline and subtitle on homepage. */
    text-align: center;
    margin: 15px 0 30px 0;
    color: white;
}

.home-tagline {
    font-family: 'Roboto', sans-serif;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.2;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    /* Subtle text shadow for readability. */
}

.home-subtitle {
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    line-height: 1.6;
    opacity: 0.9;
    /* Slightly transparent. */
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Homepage Carousel (Slick Carousel) Styles */
.home .carousel {
    width: 100%;
    max-width: 1100px;
    /* Max width for the carousel. */
    margin: 0 auto 40px auto;
    /* Center and add bottom margin. */
    padding: 0;
    /* Remove default padding if any from parent. */
}

.home .carousel .slick-slide {
    /* Styles for individual slides. */
    height: 30vh;
    /* Slide height relative to viewport. */
    min-height: 180px;
    max-height: 300px;
    /* Max height constraint. */
    background-color: #004D4D;
    /* Fallback background for slides. */
    display: flex;
    /* For aligning image within slide if needed. */
    overflow: hidden;
    border-radius: 8px;
    position: relative;
    align-items: center;
    justify-content: center;
}

.home .carousel .slick-slide>img {
    /* Ensure image fills the slide. */
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Cover the slide area, may crop. */
    display: block;
}

/* Styles for Slick Carousel navigation arrows. */
.home .slick-prev,
.home .slick-next {
    background-color: rgba(0, 0, 0, 0.5);
    /* Semi-transparent background. */
    color: white;
    border-radius: 50%;
    /* Circular arrows. */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    /* Ensure arrows are above slides. */
    transition: background-color 0.3s ease;
}

.home .slick-prev:hover,
.home .slick-next:hover {
    background-color: rgba(0, 0, 0, 0.7);
    /* Darker on hover. */
}

/* Positioning for arrows (may need adjustment based on carousel width). */
.home .slick-prev {
    left: -60px;
}

.home .slick-next {
    right: -60px;
}

/* Styles for Slick Carousel pagination dots. */
.home .slick-dots {
    bottom: -30px;
    /* Position dots below the carousel. */
}

.home .slick-dots li button:before {
    /* Styling the dot itself. */
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    /* Semi-transparent white for inactive dots. */
    opacity: 1;
    /* Ensure dots are fully visible. */
}

.home .slick-dots li.slick-active button:before {
    color: white;
    /* Active dot is solid white. */
}

/* Homepage Services Overview Section */
.home-services-overview {
    width: 100%;
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 10px;
    box-sizing: border-box;
}

.home-services-overview .section-title {
    font-family: 'Lato', sans-serif;
    font-size: 32px;
    color: white;
    text-align: center;
    margin-bottom: 30px;
    font-style: normal;
}

/* Accessibility helper class to visually hide content but keep it for screen readers. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Grid for service teasers on the homepage. */
.services-grid {
    /* This class is also used on the services page, these styles might apply there too if not overridden. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    /* Responsive grid. */
    gap: 25px;
}

.service-teaser-item {
    /* Individual service teaser block. */
    background-color: rgba(0, 0, 0, 0.2);
    /* Dark, slightly transparent background. */
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    color: white;
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-teaser-item:hover {
    transform: translateY(-5px) scale(1.02);
    /* Lift and scale effect on hover. */
    box-shadow: 0 8px 20px rgba(0, 70, 70, 0.3);
    /* Shadow with a hint of teal. */
}

.service-teaser-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
}

.service-teaser-item:hover img {
    opacity: 0.85;
    /* Slightly fade image on hover to make text overlay more prominent. */
}

.service-teaser-item .teaser-overlay {
    /* Text overlay on teaser items. */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* Gradient from semi-transparent teal to transparent. */
    background: linear-gradient(to top, rgba(0, 70, 70, 0.85) 0%, rgba(0, 70, 70, 0) 100%);
    padding: 20px 15px 15px 15px;
    text-align: center;
}

.service-teaser-item h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    /* Shadow for text readability. */
}

/* Responsive adjustments for homepage elements. */
@media (max-width: 1200px) {

    /* Adjust Slick arrow positions. */
    .home .slick-prev {
        left: -20px;
    }

    .home .slick-next {
        right: -20px;
    }
}

@media (max-width: 992px) {

    /* Tablet sizes and below. */
    .home-tagline {
        font-size: 38px;
    }

    .home-subtitle {
        font-size: 18px;
    }

    .home .carousel {
        width: 80%;
        /* Reduce carousel width. */
    }

    .home .carousel .slick-slide {
        height: 30vh;
        min-height: 160px;
        max-height: 240px;
    }

    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
    }

    .service-teaser-item img {
        height: 180px;
    }

    .service-teaser-item h3 {
        font-size: 18px;
    }
}

@media (max-width: 768px) {

    /* Smaller tablets / large phones. */
    .home {
        padding-top: 20px;
        padding-bottom: 30px;
        min-height: auto;
        /* Allow homepage to shrink if content is less. */
        padding: 20px 15px 30px 15px;
        /* Consistent padding. */
    }

    .home-content-wrapper {
        padding-top: 15px;
    }

    .logo {
        width: 50%;
        max-height: 80px;
        height: auto;
        min-height: 60px;
        margin-bottom: 15px;
    }

    .home .navbar {
        /* Stack homepage navigation links vertically. */
        margin: 10px 0 20px 0;
        flex-direction: column;
        align-items: center;
    }

    .home .navbar li {
        padding: 6px 0;
    }

    .home .navbar a {
        font-size: 16px;
    }

    .home-tagline {
        font-size: 30px;
    }

    .home-subtitle {
        font-size: 16px;
        padding: 0 10px;
        /* Add horizontal padding for subtitle. */
    }

    .home .carousel {
        width: 60%;
        /* Further reduce carousel width. */
    }

    .home .carousel .slick-slide {
        height: 35vh;
        min-height: 150px;
        max-height: 220px;
    }

    .home .slick-dots {
        bottom: 10px;
        /* Move dots closer to carousel. */
    }

    .home-services-overview .section-title {
        font-size: 26px;
        margin-bottom: 20px;
    }

    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 15px;
    }
}

@media (max-width: 480px) {

    /* Small mobile screens. */
    .services-grid {
        /* Stack service teasers into a single column. */
        grid-template-columns: 1fr;
    }

    .service-teaser-item img {
        height: 160px;
    }

    .service-teaser-item h3 {
        font-size: 16px;
    }
}


/* --- CMS Admin Area Styles --- */
/* Styles for the Content Management System interface (e.g., cms.php). */
.cms-container {
    max-width: 950px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cms-container h1,
.cms-container h2 {
    text-align: center;
    color: #333;
    margin-bottom: 25px;
}

.cms-form {
    /* Styles for forms within the CMS. */
    margin-top: 20px;
}

.cms-form label {
    display: block;
    margin-top: 18px;
    margin-bottom: 6px;
    font-weight: bold;
    color: #555;
}

.cms-form input[type="text"],
.cms-form select,
.cms-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1rem;
}

/* Specific styling for textareas that are NOT the Trumbowyg editor. */
.cms-form textarea:not(#trumbo) {
    min-height: 100px;
}

/* Margin for the Trumbowyg editor container. */
.cms-form .trumbowyg-box {
    margin-bottom: 15px;
}

.cms-form button[type="submit"] {
    background-color: teal;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 25px;
    display: inline-block;
}

.cms-form button[type="submit"]:hover {
    background-color: #006666;
}

/* Styles for the informational box displaying page details in the CMS. */
.page-info {
    background-color: #f0f8ff;
    /* Light blue background. */
    padding: 15px;
    margin-bottom: 20px;
    border-left: 5px solid teal;
    /* Accent border. */
    border-radius: 4px;
    font-size: 0.9em;
}

.page-info p {
    margin: 8px 0;
    color: #333;
    text-align: left;
    /* Align text left within page info box. */
}

.page-info strong {
    color: #0056b3;
}

.cms-container hr {
    /* Horizontal rule for separation in CMS. */
    border: 0;
    border-top: 1px solid #eee;
    margin: 30px 0;
}

.cms-container small {
    /* Small helper text in CMS forms. */
    display: block;
    margin-top: 5px;
    color: #777;
}

/* Style for login error messages (used on login.php). */
.login-error-message {
    color: red;
    text-align: center;
    /* Note: This was the only style defined for this class in the provided CSS.
       If more styling (background, border) is needed, it should be added here
       or this class should be changed to use .form-message.error. */
}


/* --- User Management Page Styles (from user-management.php inline styles) --- */
/* These styles were originally inline in user-management.php and have been moved here. */
.user-management-container {
    max-width: 950px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.user-management-container h1,
.user-management-container h2 {
    text-align: center;
    color: #333;
    margin-bottom: 25px;
}

.form-section {
    /* Used for sections like "Add New User" within user management. */
    margin-bottom: 40px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 5px;
    border: 1px solid #eee;
}

.form-section h2 {
    margin-top: 0;
}

.user-form label {
    /* Specific to forms within user management. */
    display: block;
    margin-top: 15px;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.user-form input[type="text"],
.user-form input[type="email"],
.user-form input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1rem;
    margin-bottom: 10px;
}

.user-form button[type="submit"] {
    background-color: teal;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 15px;
}

.user-form button[type="submit"]:hover {
    background-color: #006666;
}

.users-table {
    /* Table for listing existing users. */
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.users-table th,
.users-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

.users-table th {
    background-color: #f0f0f0;
    color: #333;
}

.users-table tr:nth-child(even) {
    /* Zebra striping for table rows. */
    background-color: #f9f9f9;
}

.users-table .action-button {
    /* "Remove" button in the users table. */
    background-color: #d9534f;
    /* Red color for delete action. */
    color: white;
    padding: 6px 12px;
    text-decoration: none;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

.users-table .action-button:hover {
    background-color: #c9302c;
    /* Darker red on hover. */
}

.users-table .action-button:disabled {
    /* Style for disabled action button (e.g., cannot remove self). */
    background-color: #ccc;
    cursor: not-allowed;
}

/* Feedback message styles specific to user-management.php (if .feedback-message class is used). */
/* Note: For site-wide consistency, consider consolidating with .form-message styles or renaming
   the class in user-management.php to .form-message. */
.feedback-message {
    padding: 15px;
    margin: 20px 0;
    border-radius: 4px;
    text-align: center;
    font-size: 1.1em;
}

.feedback-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.feedback-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}