/* ================================================================
 *  custom.css - Emel's site overrides
 * ================================================================ */

/* Home hero: keep the photo under a dark scrim (stage:after was behind the image) */
.custom-hero-stage > .absolute.inset-0:has(.custom-hero-img) {
    z-index: 0;
}

.custom-hero-stage:after {
    z-index: 1;
    background:
        linear-gradient(
            to top,
            color-mix(in srgb, var(--custom-ink, #0b1f33) 92%, transparent) 0%,
            color-mix(in srgb, var(--custom-ink, #0b1f33) 72%, transparent) 42%,
            color-mix(in srgb, var(--custom-ink, #0b1f33) 45%, transparent) 100%
        ),
        linear-gradient(
            to right,
            color-mix(in srgb, var(--custom-ink, #0b1f33) 55%, transparent) 0%,
            transparent 62%
        );
}

.custom-hero-stage > .custom-hero-copy {
    z-index: 2;
}

/* Inner-page photo heroes: stronger full-bleed darken */
.custom-ph-stage > .custom-hero-img + .absolute.inset-0,
.custom-ph-stage > [class*='bg-gradient'] {
    background:
        linear-gradient(
            to top,
            color-mix(in srgb, var(--custom-ink, #0b1f33) 92%, transparent) 0%,
            color-mix(in srgb, var(--custom-ink, #0b1f33) 68%, transparent) 48%,
            color-mix(in srgb, var(--custom-ink, #0b1f33) 42%, transparent) 100%
        ) !important;
}

/* Heroes fill the viewport under the static header (not header + 100svh) */
.custom-hero {
    min-height: max(40rem, calc(100svh - var(--header-h, 4.5rem))) !important;
}

.custom-hero-stage {
    min-height: max(32rem, calc(100svh - var(--header-h, 4.5rem))) !important;
}

@media (width >= 64rem) {
    .custom-hero-stage {
        min-height: 0 !important;
    }

    .custom-ph-stage {
        min-height: max(28rem, calc(100svh - var(--header-h, 4.5rem))) !important;
    }
}

/* Page + home headers: more room under title / in the accent column */
.custom-ph .custom-hero-copy,
.custom-hero .custom-hero-copy {
    padding-bottom: clamp(2.75rem, 2rem + 2.5vw, 4.5rem);
}

.custom-ph .custom-hero-column > div,
.custom-hero .custom-hero-column > div {
    padding-bottom: clamp(2.75rem, 2rem + 2vw, 4.25rem);
}

/* Solid static header — sits in flow, never overlays heroes / the contact form */
.site-header {
    position: relative !important;
    top: auto !important;
    background: #fff !important;
    border-bottom: 1px solid color-mix(in srgb, var(--custom-ink, #0b1f33) 10%, transparent);
    box-shadow: none !important;
}

/* Above-the-fold hero: paint immediately (data-anim starts at opacity:0 until IO) */
.custom-hero-copy [data-anim],
.custom-ph-stage .custom-hero-copy [data-anim],
.custom-contact-form-col [data-anim] {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
}

.site-header .brand {
    color: var(--color-primary-ink);
}

.site-header .nav-link {
    color: var(--color-dark);
}

.site-header .hamburger {
    color: var(--color-dark);
}

/* Drop header Free Estimate — it sits on the orange column and fights the copy */
.site-header .custom-nav-action {
    display: none !important;
}

/* Accent / quick-facts column: bigger type so it matches the photo header */
.custom-hero-column:not(.custom-contact-form-col) .eyebrow {
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
}

.custom-hero-column:not(.custom-contact-form-col) h2 {
    font-size: clamp(2.25rem, 1.4rem + 2.4vw, 3.25rem) !important;
    line-height: 1.05 !important;
}

/* Contact: form beside the photo stage (precompiled Tailwind lacks wider arbitrary cols) */
@media (width >= 64rem) {
    .custom-ph--contact {
        grid-template-columns: minmax(0, 1fr) minmax(24rem, 40%) !important;
    }
}

.custom-contact-form-col {
    background: var(--color-bg, #fff);
    color: var(--color-dark, #0b1f33);
    box-shadow: -24px 0 48px -36px color-mix(in srgb, var(--custom-ink, #0b1f33) 28%, transparent);
}

.custom-contact-form-col .form-label {
    color: color-mix(in srgb, var(--custom-ink, #0b1f33) 72%, transparent);
}

.custom-contact-form-col.custom-hero-column {
    background-image: none;
}

.custom-contact-form-col.custom-hero-column:before {
    display: none;
}

.custom-contact-map {
    min-height: min(22rem, 55svh);
}

.custom-contact-map iframe {
    display: block;
    width: 100%;
    height: min(28rem, 60svh);
    border: 0;
}

.custom-hero-column .custom-project-specs > div {
    padding-block: 1rem;
}

.custom-hero-column .custom-project-specs dt {
    font-size: 1rem;
}

.custom-hero-column .custom-project-specs dd {
    font-size: 1.0625rem;
}

.custom-hero-column ul {
    font-size: 1.0625rem;
    line-height: 1.45;
}

/* Mobile stack: less empty photo, more air in the orange panel */
@media (width < 64rem) {
    .custom-hero {
        min-height: 0 !important;
    }

    .custom-ph-stage {
        min-height: min(20rem, calc(100svh - var(--header-h, 4.5rem) - 12rem)) !important;
    }

    .custom-hero-stage {
        min-height: min(26rem, calc(100svh - var(--header-h, 4.5rem))) !important;
    }

    .custom-ph .custom-hero-copy,
    .custom-hero .custom-hero-copy {
        padding-bottom: 2.75rem !important;
    }

    .custom-ph .custom-hero-column:not(.custom-contact-form-col) > div,
    .custom-hero .custom-hero-column > div {
        justify-content: flex-start;
        gap: 1.85rem !important;
        padding-top: 3rem !important;
        padding-bottom: 3.25rem !important;
    }

    .custom-ph .custom-hero-column ul {
        gap: 1.05rem !important;
    }

    .custom-hero-column:not(.custom-contact-form-col) .eyebrow {
        font-size: 0.875rem;
    }

    .custom-hero-column:not(.custom-contact-form-col) h2 {
        font-size: clamp(2.375rem, 8vw, 3rem) !important;
        margin-top: 1rem !important;
    }

    .custom-hero-column .leading-relaxed {
        font-size: 1.0625rem;
        line-height: 1.55;
    }

    .custom-hero-column .custom-project-specs > div {
        padding-block: 1.05rem;
    }

    .custom-hero-column .custom-project-specs dt,
    .custom-hero-column .custom-project-specs dd {
        font-size: 1.0625rem;
    }

    .custom-contact-form-col .custom-contact-form-panel {
        padding-top: 2.5rem !important;
        padding-bottom: 2.75rem !important;
    }

    .custom-contact-map iframe {
        height: min(22rem, 50svh);
    }
}

/* Service tiles: darker base so titles read on bright job photos */
.custom-tile:after {
    background-image: linear-gradient(
        to top,
        color-mix(in srgb, var(--custom-ink, #0b1f33) 92%, transparent) 0%,
        color-mix(in srgb, var(--custom-ink, #0b1f33) 55%, transparent) 48%,
        color-mix(in srgb, var(--custom-ink, #0b1f33) 28%, transparent) 100%
    );
}

.custom-tile:hover:after,
.custom-tile:focus-visible:after {
    background-color: color-mix(in srgb, var(--custom-ink, #0b1f33) 35%, transparent);
}