/*
Theme Name: Espa theme
Theme URI: https://espa.com
Author: Onofrio Colaizzo
Author URI: https://onofriocolaizzo.it
Description: A reusable block theme starter with wireframe patterns and sensible defaults.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.0
Text Domain: custom-starter
*/
/* Modern mobile nav drawer for core Navigation block */
@media (max-width: 782px) {

    /* Backdrop layer */
    .wp-block-navigation__responsive-container {
        position: fixed;
        inset: 0;
        background: #075677;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
        z-index: 9999;
    }

    .wp-block-navigation__responsive-container.is-menu-open {
        opacity: 1;
        pointer-events: auto;
    }

    /* Drawer panel */
    .wp-block-navigation__responsive-container-content {
        height: 100%;
        width: min(86vw, 380px);
        margin-left: auto;
        background: #075677;
        color: #fff;
        transform: translateX(100%);
        transition: transform .28s ease;
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        transform: translateX(0);
    }

    /* Close button positioning */
    .wp-block-navigation__responsive-container-close {
        position: absolute;
        top: 14px;
        right: 14px;
    }

    /* Make the close button visible above the drawer */
    .wp-block-navigation__responsive-container-close {
        z-index: 10001;
        color: #fff;
        background: transparent;
        border: 0;
        padding: 10px;
        line-height: 0;
        cursor: pointer;
    }

    /* Ensure SVG uses the color above */
    .wp-block-navigation__responsive-container-close svg {
        fill: currentColor;
    }

    /* Put the drawer below the close button */
    .wp-block-navigation__responsive-container-content {
        position: relative;
        z-index: 10000;
    }


    /* Menu items spacing */
    .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
        gap: 10px;
    }

    .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
        display: block;
        padding: 10px 6px;
        text-decoration: none;
        color: inherit;
    }

    .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:hover {
        text-decoration: underline;
    }
}

@media (max-width: 782px) {

    /* --- Motion tuning --- */
    :root {
        --nav-ease-out: cubic-bezier(.16, 1, .3, 1);
        --nav-ease-in: cubic-bezier(.7, 0, .84, 0);
        --nav-dur-fast: 180ms;
        --nav-dur: 380ms;
    }

    /* Backdrop: fade + slight zoom */
    .wp-block-navigation__responsive-container {
        transition:
            opacity var(--nav-dur-fast) var(--nav-ease-out),
            backdrop-filter var(--nav-dur) var(--nav-ease-out);
    }

    .wp-block-navigation__responsive-container.is-menu-open {
        animation: navBackdropIn var(--nav-dur-fast) var(--nav-ease-out) both;
    }

    @keyframes navBackdropIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* Drawer: springy in/out */
    .wp-block-navigation__responsive-container-content {
        will-change: transform;
        transition: transform var(--nav-dur) var(--nav-ease-out);
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        animation: navDrawerIn var(--nav-dur) var(--nav-ease-out) both;
    }

    @keyframes navDrawerIn {
        0% {
            transform: translateX(110%);
        }

        70% {
            transform: translateX(-2%);
        }

        100% {
            transform: translateX(0);
        }
    }

    /* Optional: nicer closing (WP toggles class; this helps feel less “snappy”) */
    .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content {
        transition-timing-function: var(--nav-ease-in);
    }

    /* Menu items: stagger enter */
    .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
        opacity: 0;
        transform: translateY(10px);
        transition:
            opacity 260ms var(--nav-ease-out),
            transform 260ms var(--nav-ease-out);
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
        opacity: 1;
        transform: translateY(0);
    }

    /* Stagger delays (first 10 items) */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) {
        transition-delay: 60ms;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) {
        transition-delay: 90ms;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) {
        transition-delay: 120ms;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) {
        transition-delay: 150ms;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) {
        transition-delay: 180ms;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(6) {
        transition-delay: 210ms;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(7) {
        transition-delay: 240ms;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(8) {
        transition-delay: 270ms;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(9) {
        transition-delay: 300ms;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(10) {
        transition-delay: 330ms;
    }

    /* Hamburger + Close button: micro-interactions */
    .wp-block-navigation__responsive-container-open,
    .wp-block-navigation__responsive-container-close {
        transition:
            transform var(--nav-dur-fast) var(--nav-ease-out),
            opacity var(--nav-dur-fast) var(--nav-ease-out);
        transform-origin: center;
    }

    .wp-block-navigation__responsive-container-open:hover,
    .wp-block-navigation__responsive-container-close:hover {
        transform: scale(1.06);
    }

    .wp-block-navigation__responsive-container-open:active,
    .wp-block-navigation__responsive-container-close:active {
        transform: scale(.96);
    }

    /* Animate the SVG icon itself */
    .wp-block-navigation__responsive-container-open svg,
    .wp-block-navigation__responsive-container-close svg {
        transition: transform var(--nav-dur-fast) var(--nav-ease-out);
        transform-origin: center;
    }

    .wp-block-navigation__responsive-container-open:hover svg {
        transform: rotate(8deg);
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
        animation: navCloseSpin 420ms var(--nav-ease-out) both;
    }

    @keyframes navCloseSpin {
        0% {
            transform: rotate(-90deg) scale(.9);
            opacity: 0;
        }

        100% {
            transform: rotate(0deg) scale(1);
            opacity: 1;
        }
    }

    /* Accessibility: reduce motion */
    @media (prefers-reduced-motion: reduce) {

        .wp-block-navigation__responsive-container,
        .wp-block-navigation__responsive-container-content,
        .wp-block-navigation__responsive-container-open,
        .wp-block-navigation__responsive-container-close,
        .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
            animation: none !important;
            transition: none !important;
        }
    }
}
/* Resources block */
.wp-block-espa-resources {
    position: relative;
}


.espa-resources-title-box {
    display: flex;
    justify-content: space-between;
}

.espa-resources-title-box > div {
    min-width:50%;
    width:50%;
}

.wp-block-espa-resources .espa-resources__title {
    margin: 0 0 2rem;
    color: #075677;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.1;
    letter-spacing: -5%;
}

.wp-block-espa-resources .espa-resources__list {
    border-top: 1px solid rgba(7, 86, 119, 0.1);
}


.wp-block-espa-resource-item > div {
    min-width:50%;
    width:50%;
}
.wp-block-espa-resource-item {
    display:flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(7, 86, 119, 0.1);
    padding: 25px 0;
}

.wp-block-espa-resource-item .espa-resource-item {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr;
    gap: clamp(1rem, 2vw, 2.5rem);
    align-items: start;
    padding: 1.75rem 0;
}

.wp-block-espa-resource-item .espa-resource-item__download-link {
    display: inline-flex;
    gap: 15px;
    color: #0c7eb7;
    text-decoration: none;
    font-size: 16px;
    line-height: 1;
}

.wp-block-espa-resource-item .espa-resource-item__download-link:hover {
    text-decoration: none;
}

.wp-block-espa-resource-item .espa-resource-item__download-icon > img {
width: 30px
}



.wp-block-espa-resource-item .espa-resource-item__download-text {
    display: inline-block;
    transform: translateY(1px);
}

.wp-block-espa-resource-item .espa-resource-item__description {
    margin: 0;
    color: #0c7eb7;
    font-size: 16px;
    line-height: 1.45;
}

.wp-block-espa-resources .espa-resources__actions {
    margin-top: 2.5rem;
    text-align: center;
}

.wp-block-espa-resources .espa-resources__load-more {
    appearance: none;
    border: 1px solid #0c7eb7;
    border-radius: 999px;
    padding: 0.9rem 2.25rem;
    background: transparent;
    color: #075677;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.wp-block-espa-resources .espa-resources__load-more:hover {
    transform: translateY(-1px);
    background: rgba(12, 126, 183, 0.06);
}

.wp-block-espa-resource-item[hidden] {
    display: none !important;
}

@media (max-width: 767px) {
    .wp-block-espa-resource-item .espa-resource-item {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .wp-block-espa-resource-item .espa-resource-item__description {
        max-width: none;
    }
}