/*
|--------------------------------------------------------------------------
| Next-Gen Advanced Styles
|
| Key changes:
| - Use of LCH for perceptually uniform and wide-gamut colors.
| - CSS Nesting for better organization and reduced specificity issues.
| - CSS Scoping (Layering) for managing specificity of global styles.
| - Container Queries for truly encapsulated component responsiveness.
| - Use of 'sticky' position for the header instead of just JS toggles.
| - Inclusion of Glassmorphism/Floating Panel styles.
|--------------------------------------------------------------------------
*/

/* 1. CSS Layering: Isolate global styles to prevent conflicts */
@layer reset, base, components, utilities;

@layer base {
    :root {
        /* --- LCH Color Variables (Luminance, Chroma, Hue) for wide gamut and perceptual uniformity --- */
        --color-primary-l: 12%;
        --color-primary-c: 0;
        --color-primary-h: 0; /* Base Black/Dark Gray */

        --color-secondary-l: 96%;
        --color-secondary-c: 0;
        --color-secondary-h: 0; /* Base White/Off-White */

        --color-text-dark: lch(var(--color-primary-l) var(--color-primary-c) var(--color-primary-h));
        --color-text-light: lch(100% 0 0); /* Pure White */
        --color-border-light: lch(85% 5 280); /* Very light, subtle gray */
        --color-bg-body: var(--color-secondary-l) var(--color-secondary-c) var(--color-secondary-h);
        --color-bg-header-scrolled: lch(100% 0 0); /* White for scrolled header BG */

        /* --- Global Variables --- */
        --space-2x: 2rem;
        --transition-fast: 0.3s;
        --transition-slow: 0.8s;
    }

    /* 🌙 Dark Mode with LCH */
    @media (prefers-color-scheme: dark) {
        :root {
            --color-primary-l: 95%; /* Light gray for dark mode primary */
            --color-secondary-l: 15%; /* Dark gray/black for background */
            --color-border-light: lch(30% 5 280);
            --color-bg-header-scrolled: lch(15% 0 0);
        }
    }
} /* end @layer base */

@layer components {
    /* -------------------------------------------------------------------------- */
    /* --- Global Styles --- */
    /* -------------------------------------------------------------------------- */
    body {
        font-family: 'Open Sans', sans-serif;
        background-color: lch(var(--color-bg-body));
        color: var(--color-text-dark);
        line-height: 1.6;
        /* Use overscroll-behavior for polished navigation (prevents body scroll on modal/menu overscroll) */
        overscroll-behavior: contain;
    }

    /* -------------------------------------------------------------------------- */
    /* --- Header Styles (Sticky/Translucent) with CSS Nesting --- */
    /* -------------------------------------------------------------------------- */
    #main-header {
        position: sticky; /* Use CSS sticky position for inherent scrolling behavior */
        inset-block-start: 0; /* Logical property for top: 0 */
        transition: background-color var(--transition-fast) ease-in-out;
        will-change: background-color, color;
        z-index: 1000;

        /* Use CSS Nesting for related header elements */
        & #header-bg {
            background-color: color-mix(in lch, var(--color-bg-header-scrolled) 90%, transparent); /* More advanced color mixing */
            backdrop-filter: blur(12px) saturate(1.2); /* Slightly more aggressive/modern blur */
            opacity: 0;
            transition: opacity var(--transition-fast) ease-in-out;
            will-change: opacity;
        }

        /* Shared default light state */
        & .logo-text, & .nav-link, & .header-icon {
            color: var(--color-text-light);
            transition: color var(--transition-fast) ease-in-out;
        }

        & .logo-line-bg {
            background-color: var(--color-text-light);
            transition: background-color var(--transition-fast) ease-in-out;
        }

        & .header-icon-stroke {
            stroke: var(--color-text-light);
            transition: stroke var(--transition-fast) ease-in-out;
        }

        /* Scrolled State (JS toggle) */
        &.scrolled {
            & #header-bg {
                opacity: 1;
            }

            /* Dark text/colors */
            & .logo-text, & .header-icon, & .nav-link {
                color: var(--color-text-dark);
            }
            & .logo-line-bg {
                background-color: var(--color-text-dark);
            }
            & .header-icon-stroke {
                stroke: var(--color-text-dark);
            }

            & #nav-menu-bar {
                border-block-color: var(--color-border-light);
            }
        }
    }

    /* -------------------------------------------------------------------------- */
    /* --- Hero Section & Video Background --- */
    /* -------------------------------------------------------------------------- */
    .hero-bg {
        position: relative;
        overflow: hidden;
        height: 100dvh;
        display: grid;
        place-items: center;
        color: var(--color-text-light);

        & .video-background-container {
            position: absolute;
            inset: 0;
            z-index: 0;

            & .video-bg {
                position: absolute;
                inset: -5% auto auto -5%; /* Using inset to simplify positioning/sizing logic */
                min-width: 110%; /* Ensure full coverage */
                min-height: 110%;
                width: auto;
                height: auto;
                object-fit: cover;
                transform: translate(-50%, -50%); /* Base centering */
                opacity: 0;
                transition: opacity 1.5s ease-in-out;

                &.active {
                    opacity: 1;
                    /* Subtler zoom using a longer transition */
                    transition: opacity 1.5s ease-in-out, transform 8s ease-out;
                    transform: translate(-50%, -50%) scale(1.0);
                }
            }

            /* Semi-transparent overlay with 'color-mix' for a cleaner tint */
            &::after {
                content: '';
                position: absolute;
                inset: 0;
                /* Mix black with 65% transparency */
                background-color: color-mix(in srgb, black 65%, transparent);
                z-index: 1;
            }
        }
    }

    /* -------------------------------------------------------------------------- */
    /* --- Advanced Floating Panel / Glassmorphism Style --- */
    /* -------------------------------------------------------------------------- */

    /* Custom shadow class for depth (Tailwind doesn't have a huge shadow) */
    .shadow-3xl {
        /* Shadow 1: standard */
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15),
        /* Shadow 2: inner glow/lift */
        0 0 40px rgba(0, 0, 0, 0.05);
    }

    /* The core floating/glassmorphic effect */
    .floating-panel {
        /* Background for the Glassmorphism/floating look */
        background-color: rgba(255, 255, 255, 0.92); /* Slightly transparent white */
        
        /* Adds the blur effect (REQUIRED for Glassmorphism) */
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        
        /* Elegant rounded corners */
        border-radius: 35px;
        
        /* Subtle light border to define the edge */
        border: 1px solid rgba(255, 255, 255, 0.3);
        
        /* Lift the panel subtly */
        transform: translateY(-5px); 
        transition: transform 0.5s ease-out; /* Optional: adds a nice effect on hover/focus */

        /* Optional hover effect using nesting */
        &:hover {
            transform: translateY(-8px);
        }
    }

    /* Enhancing the image */
    .floating-image {
        /* A small border to frame the image within the panel */
        border: 4px solid white;
        /* Keeps the image slightly elevated */
        transform: translateY(-2px);
    }

    /* -------------------------------------------------------------------------- */
    /* --- Content Section: Container Queries for Card Responsiveness --- */
    /* -------------------------------------------------------------------------- */

    /* Set up the parent as a container for query purposes */
    .law-services-row {
        container-type: inline-size; /* Define a container scope */
        container-name: service-layout;

        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--space-2x);
        padding-block: 2.5rem;
    }

    .service-card {
        /* Base style, flex-grow allows it to fill space in the row */
        flex-grow: 1;
        max-width: 450px;
        width: clamp(20rem, 40vw, 450px);
        
        padding: 1.5rem; /* Example padding */
        border: 1px solid var(--color-border-light); /* Example border */

        /* Container Query: Style the card *content* based on the container size */
        @container service-layout (min-width: 50rem) {
            /* If the *parent* (.law-services-row) is wide enough, use a grid layout inside the card */
            display: grid;
            grid-template-columns: auto 1fr;
            align-items: center;
            gap: 1.5rem;
        }
    }

} /* end @layer components */

@layer utilities {
    /* -------------------------------------------------------------------------- */
    /* --- Scroll Reveal Animation --- */
    /* -------------------------------------------------------------------------- */

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(2.5rem);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .reveal {
        opacity: 0;
        transform: translateY(2.5rem);
        /* Use a utility class for this purpose */
    }

    .reveal.visible {
        animation: fadeInUp var(--transition-slow) ease-out forwards;
        /* Use an inline style variable to set the dynamic delay from JS or a utility class */
        animation-delay: var(--_reveal-delay, 0s); 
    }

    /* Instead of nth-child, use utility classes or JS to assign a delay variable */
    .delay-1 { --_reveal-delay: 0.1s; }
    .delay-2 { --_reveal-delay: 0.2s; }
    /* ...etc. */
}