/**
 * Valet Service Theme — Colour Palette Overrides
 *
 * Blues and silvers evoking water, chrome, and a freshly washed car.
 * Scoped to body.service-valet so tokens only apply on /valet pages.
 *
 * @package MaxMcDermott
 * @since 1.1.0
 */

body.service-valet {
    /* Raw valet palette */
    --mm-raw-primary-deep:  #1A3A5C;
    --mm-raw-primary:       #2563A8;
    --mm-raw-primary-light: #4A90D9;
    --mm-raw-primary-pale:  #BEDAF5;
    --mm-raw-primary-mist:  #E8F4FD;
    --mm-raw-accent:        #B8C4CC;
    --mm-raw-accent-light:  #D8E2E8;
    --mm-raw-bg:            #F0F6FC;
    --mm-raw-bg-alt:        #E3EDF7;
    --mm-raw-text:          #1A2733;
    --mm-raw-text-light:    #4A5B6B;
    --mm-raw-white:         #F8FBFF;

    /* Semantic remapping — must match every token style.css :root defines */
    --mm-primary:           var(--mm-raw-primary);
    --mm-primary-deep:      var(--mm-raw-primary-deep);
    --mm-primary-hover:     var(--mm-raw-primary-light);
    --mm-primary-light:     var(--mm-raw-primary-pale);
    --mm-primary-mist:      var(--mm-raw-primary-mist);
    --mm-accent:            var(--mm-raw-accent);
    --mm-accent-light:      var(--mm-raw-accent-light);
    --mm-bg:                var(--mm-raw-bg);
    --mm-bg-alt:            var(--mm-raw-bg-alt);
    --mm-text:              var(--mm-raw-text);
    --mm-text-light:        var(--mm-raw-text-light);
    --mm-text-on-dark:      var(--mm-raw-white);
    --mm-surface:           var(--mm-raw-white);
    --mm-shadow-sm:         0 2px 8px rgba(26, 58, 92, 0.08);
    --mm-shadow-md:         0 4px 20px rgba(26, 58, 92, 0.12);
    --mm-shadow-lg:         0 8px 40px rgba(26, 58, 92, 0.16);
}

/* =====================================================================
   Vallet-Specific Component Overrides
   ===================================================================== */

body.service-valet .hero__bg {
    background:
        /* Large bubbles — soft fill with brighter rim */
        radial-gradient(circle 90px at 12% 18%, transparent 55%, rgba(255, 255, 255, 0.18) 62%, rgba(255, 255, 255, 0.06) 65%, transparent 70%),
        radial-gradient(circle 70px at 85% 25%, transparent 55%, rgba(255, 255, 255, 0.16) 62%, rgba(255, 255, 255, 0.05) 65%, transparent 70%),
        radial-gradient(circle 110px at 65% 75%, transparent 55%, rgba(255, 255, 255, 0.14) 62%, rgba(255, 255, 255, 0.04) 65%, transparent 70%),
        radial-gradient(circle 80px at 25% 70%, transparent 55%, rgba(255, 255, 255, 0.16) 62%, rgba(255, 255, 255, 0.05) 65%, transparent 70%),
        /* Medium bubbles */
        radial-gradient(circle 45px at 45% 35%, transparent 50%, rgba(255, 255, 255, 0.2) 58%, rgba(255, 255, 255, 0.07) 62%, transparent 68%),
        radial-gradient(circle 35px at 78% 55%, transparent 50%, rgba(255, 255, 255, 0.18) 58%, rgba(255, 255, 255, 0.06) 62%, transparent 68%),
        radial-gradient(circle 50px at 8% 48%, transparent 50%, rgba(255, 255, 255, 0.16) 58%, rgba(255, 255, 255, 0.05) 62%, transparent 68%),
        radial-gradient(circle 40px at 55% 12%, transparent 50%, rgba(255, 255, 255, 0.18) 58%, rgba(255, 255, 255, 0.06) 62%, transparent 68%),
        radial-gradient(circle 55px at 92% 80%, transparent 50%, rgba(255, 255, 255, 0.16) 58%, rgba(255, 255, 255, 0.05) 62%, transparent 68%),
        /* Small bubbles — tighter, punchier */
        radial-gradient(circle 20px at 35% 50%, transparent 40%, rgba(255, 255, 255, 0.25) 52%, rgba(255, 255, 255, 0.08) 58%, transparent 65%),
        radial-gradient(circle 15px at 70% 42%, transparent 40%, rgba(255, 255, 255, 0.25) 52%, rgba(255, 255, 255, 0.08) 58%, transparent 65%),
        radial-gradient(circle 18px at 20% 30%, transparent 40%, rgba(255, 255, 255, 0.22) 52%, rgba(255, 255, 255, 0.07) 58%, transparent 65%),
        radial-gradient(circle 22px at 50% 88%, transparent 40%, rgba(255, 255, 255, 0.22) 52%, rgba(255, 255, 255, 0.07) 58%, transparent 65%),
        radial-gradient(circle 12px at 88% 15%, transparent 40%, rgba(255, 255, 255, 0.28) 52%, rgba(255, 255, 255, 0.09) 58%, transparent 65%),
        radial-gradient(circle 16px at 40% 65%, transparent 40%, rgba(255, 255, 255, 0.24) 52%, rgba(255, 255, 255, 0.08) 58%, transparent 65%),
        /* Base gradient */
        linear-gradient(
            135deg,
            var(--mm-raw-primary-deep) 0%,
            var(--mm-raw-primary) 40%,
            var(--mm-raw-primary-light) 100%
        );
}

body.service-valet .hero__deco--1 {
    border-color: rgba(184, 196, 204, 0.15);
}

body.service-valet .hero__deco--2 {
    border-color: rgba(244, 211, 94, 0.1);
}

body.service-valet .hero__deco--3 {
    background: var(--mm-raw-primary-mist);
}

body.service-valet .site-brand__deco {
    display: inline-block;
    margin-left: 0.5rem;
    opacity: 0.7;
}

body.service-valet .site-brand__deco svg {
    width: 16px;
    height: 16px;
    fill: var(--mm-raw-primary-light);
}

body.service-valet .services::before {
    background: linear-gradient(
        180deg,
        var(--mm-raw-bg) 0%,
        var(--mm-raw-primary-mist) 50%,
        var(--mm-raw-bg) 100%
    );
    opacity: 0.3;
}

/* =====================================================================
   Method Detail Section (VALL-09 — Two-Bucket Method)
   ===================================================================== */

body.service-valet .method-detail {
    background: var(--mm-raw-bg-alt);
}

body.service-valet .method-detail__header {
    text-align: center;
    margin-bottom: 3rem;
}

body.service-valet .method-detail__label {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mm-primary);
    margin-bottom: 0.5rem;
}

body.service-valet .method-detail__title {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--mm-text);
    margin-bottom: 0.75rem;
}

body.service-valet .method-detail__subtitle {
    font-size: 1.125rem;
    color: var(--mm-text-light);
    max-width: 600px;
    margin: 0 auto;
}

body.service-valet .method-detail__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

body.service-valet .method-detail__item {
    background: var(--mm-raw-white);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: var(--mm-shadow-sm);
    text-align: center;
}

body.service-valet .method-detail__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mm-raw-primary-mist);
    border-radius: 0.75rem;
    color: var(--mm-primary);
}

body.service-valet .method-detail__heading {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--mm-text);
    margin-bottom: 0.5rem;
}

body.service-valet .method-detail__desc {
    font-size: 0.9375rem;
    color: var(--mm-text-light);
    line-height: 1.6;
}

body.service-valet .trust-signals {
    background: var(--mm-raw-primary-mist);
}

/* =====================================================================
   Responsive — Vallet-Specific
   ===================================================================== */

@media (max-width: 767px) {
    body.service-valet .hero {
        min-height: 85vh;
    }

    body.service-valet .hero__bg {
        background-attachment: scroll;
    }

    body.service-valet .trust-signals__grid {
        gap: 1rem;
    }

    body.service-valet .method-detail__grid {
        gap: 1.5rem;
    }

    body.service-valet .method-detail__item {
        padding: 1.5rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    body.service-valet .trust-signals__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    body.service-valet .method-detail__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}