/* --- Subtle Background --- */

body {
    /*Paralax - If using parallax for most sections, this might not be visible often.
      Set to a fallback or a neutral color from your theme. */
    background-color: var(--mud-palette-background);
}

/* Ensure MudBlazor backgrounds override body where needed */
.mud-paper, .mud-card {
    background-color: var(--mud-palette-surface); /* Use MudBlazor surface color for components */
}

/* Remove these if no longer needed with full-width sections or adjust: */
/*
.hero-section-paper {
    background: var(--mud-palette-background-grey) !important;
}

.contact-section-paper {
    background-color: var(--mud-palette-secondary) !important;
}
*/

/* Make sections without explicit backgrounds transparent to show body BG (useful for Elevation="0" MudPaper in non-full-width scenarios) */
.mud-paper[elevation="0"] {
    background-color: transparent;
}

/* --- Card Hover Effects --- */
.interactive-card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.interactive-card:hover {
    transform: translateY(-6px); /* Lift effect */
    box-shadow: var(--mud-elevation-12); /* Increase shadow depth */
    z-index: 3; /* Ensure it lifts above other content */
}

/* --- Entrance Animations --- */
[data-animate-on-scroll] {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    [data-animate-on-scroll].fade-in {
        /* Default state is opacity 0 above */
    }

    [data-animate-on-scroll].slide-in-bottom {
        transform: translateY(30px); /* Start slightly below */
    }

    [data-animate-on-scroll].slide-in-left {
        transform: translateX(-30px); /* Start slightly left */
    }

    [data-animate-on-scroll].slide-in-right {
        transform: translateX(30px); /* Start slightly right */
    }


    /* State when element becomes visible */
    [data-animate-on-scroll].is-visible {
        opacity: 1;
        transform: none; /* Reset transform */
    }


/* --- Full Width & Parallax Sections --- */
.full-width-section {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    position: relative; /* Needed for overlay, content positioning, AND JS image cycler */
    overflow: hidden;
    background-color: var(--mud-palette-background-grey); /* Default for non-parallax */
}

.parallax-bg {
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 400px; /* Adjust as needed per section via more specific rules or inline style */
    /* Basic CSS transition for background image, mainly a fallback if JS method is not used.
       JS based cross-fade (imageCycler.js) will look smoother. */
    transition: background-image 0.5s ease-in-out;
}

.section-content {
    position: relative; /* To sit above the overlay */
    z-index: 2;
}

.section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3); /* Default light overlay */
    z-index: 1; /* Behind content, but above the actual parallax background image if a tempDiv is used by JS */
}

    .section-overlay.darker-overlay {
        background-color: rgba(0, 0, 0, 0.45);
    }


/* --- Specific Section Styles & Readability --- */

.hero-section {
    min-height: 70vh;
    display: flex;
    align-items: center;
}

/* Hero section INNER MudPaper - Make it slightly less transparent if needed for text on top */
.hero-section .mud-paper {
    /* background-color: rgba(var(--mud-palette-surface-rgb), 0.85) !important; */ /* Current setting */
    background-color: rgba(var(--mud-palette-surface-rgb), 0.9) !important; /* SLIGHTLY MORE OPAQUE */
    backdrop-filter: blur(1px) !important; /* SLIGHTLY LESS BLUR */
}

    .hero-section .mud-paper .mud-typography-h5 {
        /* For a light theme, assuming text-primary might be dark.
    For a dark theme, text-primary might already be light.
    Choose a color that is definitively light and contrasts against the
    semi-transparent paper and the background image/overlay. */
    color: white !important; /* Make it fully white */
    font-weight: 500; /* Slightly bolder */
    text-shadow: 0 1px 8px rgba(0,0,0,0.7); /* STRONGER shadow */
}

/* --- Hero Logo Enhancement --- */
.hero-logo-wrapper {
    position: relative; /* Needed for absolute positioning of the pseudo-element */
    z-index: 2; /* Ensure it's above the section overlay if that's also z-index 1 or 0 */
    /* display: flex; and justify-center are already there, which is good */
}

    .hero-logo-wrapper::before {
        content: ''; /* Necessary for pseudo-elements to appear */
        position: absolute;
        /* Center it behind the logo.
       The exact percentages for top/left and transform might need slight
       tweaking depending on the MudItem's exact rendered size and flex behavior. */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* Make it slightly larger than the logo to create the blurred edge effect */
        /* For a 240x240 logo, maybe try a 280px diameter circle/oval initially */
        width: 280px;
        height: 280px;
        border-radius: 50%; /* Makes it a circle. For an oval, adjust width/height differently. */
        /* The background color: Light and semi-transparent */
        /* This should be a color that makes your dark logo parts stand out */
        background-color: rgba(255, 255, 255, 0.3); /* White with 30% opacity - START HERE */
        /* Or a very light grey from your theme if it exists and is light enough: */
        /* background-color: rgba(var(--mud-palette-grey-lighten3-rgb), 0.4); */ /* Assuming grey-lighten3 is very light */
        /* The blur effect */
        backdrop-filter: blur(15px); /* Adjust blur amount as desired */
        /* For browsers that don't support backdrop-filter, you might not get the blur,
       but the lightened background itself will still help.
       Alternatively, you could use a radial gradient for a softer edge effect,
       but backdrop-filter is usually what people mean by "blurred background". */
        /* Ensure it's behind the actual logo image */
        z-index: -1; /* This places it behind the content of .hero-logo-wrapper (the MudImage) */
        /* Optional: subtle opacity transition if the wrapper itself has hover states (not common for logo BG) */
        /* transition: opacity 0.3s ease; */
    }

    /* Ensure the MudImage itself has a transparent background
   so the pseudo-element's effect is visible through it if the image has transparent parts.
   MudImage typically renders an <img> tag which is transparent by default unless it has
   its own background set, which is rare for simple image display.
   So this rule might not be strictly necessary but is good for clarity. */
    .hero-logo-wrapper .mud-image {
        /* background-color: transparent; /* Default behavior, but explicit */
        /* Ensure the image stays on top of our new pseudo-element background */
        position: relative;
        z-index: 1;
    }


.services-section {
    background-color: var(--mud-palette-background);
}

.service-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

    .service-card .mud-icon-root {
        margin-bottom: 1rem;
    }

.cloud-section {
    min-height: 60vh; /* Or adjust as needed */
    display: flex;
    align-items: center;
}

/* Cloud card styling for readability */
.cloud-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--mud-palette-surface) !important; /* SOLID background for readability */
    backdrop-filter: none !important; /* Ensure no inherited blur */
}

.cloud-card .mud-icon-root {
    margin-bottom: 1rem;
}

/* Ensure text inside SOLID cloud cards uses appropriate theme colors */
.cloud-section .cloud-card .mud-typography-h6,
.cloud-section .cloud-card .mud-typography-body2 {
    color: var(--mud-palette-text-primary) !important;
}

.cloud-section .cloud-card .mud-card-header .mud-typography-h6 {
    color: var(--mud-palette-text-primary) !important;
}
/* Cloud Section General Sub-headline Text Readability */
.cloud-section > .section-content > .animate-on-scroll > .mud-typography-h6 {
    color: white !important; /* Make it fully white against dark parallax */
    font-weight: 500; /* Slightly bolder */
    text-shadow: 0 1px 8px rgba(0,0,0,0.7); /* STRONGER shadow for definition */
}

.why-us-section {
    background-color: var(--mud-palette-background-grey);
}

.why-us-section .mud-icon-root {
    font-size: 3rem !important; /* For icons directly in .why-us-section items */
}

.contact-section {
    min-height: 60vh; /* Or adjust */
    display: flex;
    align-items: center;
    /* Default BG if not parallax; if parallax, image is set inline */
    background-color: var(--mud-palette-secondary);
}

/* Contact section text if not using parallax or if text needs to be explicitly colored for a dark parallax */
.contact-section:not(.parallax-bg) .mud-text-root {
    color: var(--mud-palette-secondary-text) !important;
}

/* Sub-headline text readability for Contact Section */
.contact-section.parallax-bg .mud-paper .mud-typography-h6 {
    color: white !important; /* Make it fully white */
    font-weight: 500; /* Slightly bolder */
    text-shadow: 0 1px 8px rgba(0,0,0,0.7); /* STRONGER shadow */
}

/* General Padding for Inner Containers in Full-Width Sections */
.full-width-section > .mud-container-maxwidth-lg,
.full-width-section > .mud-container-maxwidth-md,
.full-width-section > .mud-container-maxwidth-xl, /* Added xl in case you use it */
.full-width-section > .mud-container-maxwidth-sm,
.full-width-section > .mud-container-maxwidth-xs {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* Responsive Adjustments */
@media (max-width: 600px) {
    .full-width-section > .mud-container-maxwidth-lg,
    .full-width-section > .mud-container-maxwidth-md,
    .full-width-section > .mud-container-maxwidth-xl,
    .full-width-section > .mud-container-maxwidth-sm,
    .full-width-section > .mud-container-maxwidth-xs {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .hero-section {
        min-height: 50vh;
    }

    .cloud-section, .contact-section {
        min-height: auto; /* Let content dictate height more on mobile for parallax sections */
    }

    .parallax-bg {
        /* background-attachment: scroll; */ /* Consider un-commenting if parallax is janky on target mobile devices */
    }
}