/**
 * Modern-Hero V2.8 responsive and layout refinements.
 *
 * Loaded after theme.css. This file contains viewport-specific refinements
 * derived from the desktop and iPhone staging reviews.
 */

:root {
    --fw-header-height: 4.5rem;
}

/* Official web wordmark ------------------------------------------------ */
.fw-brand,
.fw-footer-brand {
    position: relative;
    display: block;
    flex: 0 0 auto;
    margin: 0;
    background-image: url("../brand/feuerwehr-herrschaft-wordmark-light.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    text-decoration: none;
}

.fw-brand {
    width: clamp(11.25rem, 15vw, 12.75rem);
    aspect-ratio: 2354.1 / 782.656;
    margin: 0.35rem 0.45rem;
}

.fw-footer-brand {
    width: min(100%, 16rem);
    aspect-ratio: 2354.1 / 782.656;
    margin: 0 auto 1.25rem 0 !important;
}

.fw-brand__name,
.fw-footer-brand__name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    clip-path: inset(50%);
}

/* Explicit wide grid ---------------------------------------------------- */
.fw-header-inner,
.fw-hero__inner,
.fw-section > .alignwide,
.fw-footer-inner {
    width: 100%;
    max-width: 90rem;
    margin-right: auto;
    margin-left: auto;
}

.fw-hero__inner > * {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Hero media and contrast ---------------------------------------------- */
.fw-hero {
    isolation: isolate;
    background-color: var(--wp--preset--color--navy-deep);
    background-image: var(
        --fw-hero-image,
        linear-gradient(118deg, #071522 12%, #0b1f33 58%, #102f4a 100%)
    );
    background-repeat: no-repeat;
    background-position: 72% center;
    background-size: cover;
}

.fw-hero::before {
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(
            90deg,
            rgb(7 21 34 / 97%) 0%,
            rgb(7 21 34 / 92%) 34%,
            rgb(7 21 34 / 76%) 56%,
            rgb(7 21 34 / 42%) 78%,
            rgb(7 21 34 / 28%) 100%
        ),
        linear-gradient(180deg, rgb(7 21 34 / 22%), rgb(7 21 34 / 38%));
    filter: none;
    opacity: 1;
    transform: none;
}

.fw-hero::after {
    z-index: 0;
    background:
        radial-gradient(circle at 82% 34%, rgb(215 25 32 / 18%), transparent 34%),
        linear-gradient(180deg, transparent 55%, rgb(7 21 34 / 26%) 100%);
}

.fw-hero__inner,
.fw-scroll-cue {
    z-index: 1;
}

.fw-hero .fw-kicker {
    color: var(--wp--preset--color--off-white);
    text-shadow: 0 1px 14px rgb(7 21 34 / 64%);
}

/* Mobile header and menu ------------------------------------------------ */
@media (max-width: 47.999rem) {
    .fw-site-header,
    .home .fw-site-header {
        background: rgb(11 31 51 / 98%);
        box-shadow: var(--fw-shadow-header);
        backdrop-filter: none;
        animation: none !important;
    }

    .fw-header-inner {
        min-height: var(--fw-header-height);
        gap: 0.75rem;
    }

    .fw-brand {
        width: 10rem;
        max-width: calc(100vw - 6.25rem);
        margin: 0.35rem 0.25rem;
    }

    .fw-site-header .wp-block-navigation__responsive-container-open,
    .fw-site-header .wp-block-navigation__responsive-container-close {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    .fw-site-header .wp-block-navigation__responsive-container.is-menu-open {
        position: fixed !important;
        inset: 0 !important;
        z-index: 9999;
        width: 100vw;
        height: 100dvh;
        max-height: none;
        overflow-y: auto;
        background: var(--wp--preset--color--navy-deep) !important;
        color: var(--wp--preset--color--surface);
        padding: 0 1.25rem 2rem;
    }

    .fw-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
        min-height: 100%;
        background: transparent;
    }

    .fw-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
        position: absolute;
        top: 1rem;
        right: 0;
        z-index: 2;
        color: var(--wp--preset--color--surface);
    }

    .fw-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        padding-top: 5.25rem;
    }

    .fw-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        width: 100%;
        align-items: stretch;
        gap: 0;
    }

    .fw-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
    .fw-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
        width: 100%;
    }

    .fw-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
        min-height: 3.5rem;
        padding: 0.7rem 0;
        border-bottom: 1px solid rgb(255 255 255 / 12%);
        color: var(--wp--preset--color--surface);
        font-size: clamp(1.25rem, 6vw, 1.75rem);
        font-weight: 780;
        text-decoration: none;
    }

    .fw-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
        position: static;
        width: 100%;
        display: block !important;
        align-self: stretch !important;
        margin: 0 !important;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        padding: 0.15rem 0 0.55rem 1rem !important;
    }

    .fw-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item {
        width: 100%;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .fw-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
        width: auto !important;
        max-width: calc(100% - 1rem);
        min-height: 2.6rem;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        align-self: flex-start !important;
        margin: 0 !important;
        padding: 0.35rem 0 !important;
        border-bottom: 0;
        color: #cbd6de;
        font-size: 1rem;
        font-weight: 650;
        text-align: left !important;
    }

    .fw-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
        display: none;
    }

    body:has(.wp-block-navigation__responsive-container.is-menu-open) {
        overflow: hidden;
    }

    .fw-hero {
        background-position: 70% center;
    }

    .fw-hero::before {
        background:
            linear-gradient(
                90deg,
                rgb(7 21 34 / 96%) 0%,
                rgb(7 21 34 / 90%) 58%,
                rgb(7 21 34 / 72%) 100%
            ),
            linear-gradient(180deg, rgb(7 21 34 / 26%), rgb(7 21 34 / 48%));
    }

    .fw-hero::after {
        background:
            radial-gradient(circle at 88% 28%, rgb(215 25 32 / 14%), transparent 30%),
            linear-gradient(180deg, transparent 50%, rgb(7 21 34 / 30%) 100%);
    }

    .fw-section {
        padding-top: 3.75rem;
        padding-bottom: 3.75rem;
    }

    .fw-query-grid + .wp-block-buttons {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
    }

    .fw-query-grid + .wp-block-buttons .wp-block-button,
    .fw-query-grid + .wp-block-buttons .wp-block-button__link {
        width: 100%;
    }

    .fw-footer-inner {
        padding-top: 3rem;
        padding-bottom: 1.5rem;
    }

    .fw-footer-grid {
        gap: 1.75rem;
    }

    .fw-footer-nav {
        gap: 0.1rem;
    }

    .fw-footer-nav a {
        min-height: 2.4rem;
    }

    .fw-footer-legal {
        margin-top: 2rem;
    }
}

/* Tablet and desktop ---------------------------------------------------- */
@media (min-width: 48rem) {
    .fw-site-header {
        backdrop-filter: blur(14px) saturate(120%);
    }

    .fw-contact-panel {
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(16rem, 0.55fr);
        column-gap: clamp(2rem, 6vw, 6rem);
        align-items: end;
    }

    .fw-contact-panel > * {
        max-width: none;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .fw-contact-panel .fw-kicker,
    .fw-contact-panel .fw-display-heading,
    .fw-contact-panel .fw-lead {
        grid-column: 1;
    }

    .fw-contact-panel .wp-block-buttons {
        grid-column: 2;
        grid-row: 2 / 4;
        justify-self: end;
        align-self: end;
        margin: 0;
    }

    .fw-footer-inner > .fw-footer-grid,
    .fw-footer-inner > .fw-footer-legal {
        width: 100%;
        max-width: none !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

@media (min-width: 70rem) {
    .fw-hero h1 {
        max-width: 14ch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home .fw-site-header {
        animation: none !important;
    }
}