/* ================================================================
   GLOBAL INTERACTION — REMOVE TAP / CLICK RIPPLE
================================================================ */

/*
 * Remove native browser tap highlights across the platform.
 * This prevents the green flash commonly seen on Android/Chrome
 * when links, buttons and other interactive controls are tapped.
 */
html {
    -webkit-tap-highlight-color:
        transparent;
}


*,
*::before,
*::after {
    -webkit-tap-highlight-color:
        transparent;
}


/*
 * Keep interactive controls responsive without the delayed
 * mobile tap behaviour.
 */
a,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
summary,
[role="button"],
[role="link"] {
    -webkit-tap-highlight-color:
        transparent;

    touch-action:
        manipulation;
}


/*
 * Prevent unwanted text-selection flashes on controls.
 * Inputs and editable fields are intentionally excluded.
 */
a,
button,
summary,
[role="button"],
[role="link"] {
    -webkit-user-select:
        none;

    user-select:
        none;
}


/*
 * Neutralize browser-specific button press appearance.
 */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    -webkit-appearance:
        none;

    appearance:
        none;
}


/*
 * Do not remove :focus-visible states.
 * Keyboard focus remains available for accessibility.
 */


/* ================================================================
   SITE BRAND
================================================================ */


.site-brand,
.site-brand-flyer {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    max-width:
        100%;

    line-height:
        0;

    text-decoration:
        none;
}


.site-brand-logo,
.site-brand-flyer-image {
    display:
        block;

    width:
        auto;

    max-width:
        100%;

    object-fit:
        contain;

    object-position:
        center;
}


.site-brand-logo {
    height:
        44px;
}


.site-brand-flyer-image {
    height:
        52px;

    max-width:
        220px;
}


/* ---------------------------------------------------------------
   LIGHT / DARK BRAND VARIANTS
---------------------------------------------------------------- */

.site-brand-logo-light,
.site-brand-flyer-image-light {
    display:
        block;
}


.site-brand-logo-dark,
.site-brand-flyer-image-dark {
    display:
        none;
}


/* ---------------------------------------------------------------
   DARK THEME
---------------------------------------------------------------- */

html[data-theme="dark"]
.site-brand-logo-light,
html[data-theme="dark"]
.site-brand-flyer-image-light {
    display:
        none;
}


html[data-theme="dark"]
.site-brand-logo-dark,
html[data-theme="dark"]
.site-brand-flyer-image-dark {
    display:
        block;
}


.site-brand:hover,
.site-brand-flyer:hover {
    text-decoration:
        none;
}


.site-brand:focus-visible,
.site-brand-flyer:focus-visible {
    outline:
        2px solid
        currentColor;

    outline-offset:
        4px;

    border-radius:
        var(--radius-xs);
}


/* ================================================================
   SITE FOOTER
================================================================ */

.site-footer {
    width:
        100%;

    margin-top:
        auto;

    border-top:
        1px solid
        var(--border);

    color:
        var(--text-primary);

    background:
        var(--surface);

    transition:
        color var(--transition-base),
        background var(--transition-base),
        border-color var(--transition-base);
}


.site-footer-inner {
    width:
        min(
            1180px,
            calc(
                100% - 40px
            )
        );

    margin:
        0 auto;

    padding:
        56px
        0
        44px;

    display:
        grid;

    grid-template-columns:
        minmax(
            240px,
            1.05fr
        )
        minmax(
            0,
            2.15fr
        );

    gap:
        64px;
}


.site-footer-brand {
    min-width:
        0;

    max-width:
        360px;
}


.site-footer-brand
.site-brand-flyer {
    justify-content:
        flex-start;
}


.site-footer-description {
    max-width:
        340px;

    margin:
        20px
        0
        0;

    color:
        var(--text-secondary);

    font-size:
        14px;

    line-height:
        1.75;
}


.site-footer-links {
    min-width:
        0;

    display:
        grid;

    grid-template-columns:
        minmax(
            100px,
            0.8fr
        )
        minmax(
            100px,
            0.8fr
        )
        minmax(
            110px,
            0.9fr
        )
        minmax(
            220px,
            1.5fr
        );

    gap:
        32px;
}


.site-footer-column {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        12px;
}


.site-footer-column:last-child {
    min-width:
        220px;
}


.site-footer-column-title {
    margin-bottom:
        6px;

    color:
        var(--text-primary);

    font-size:
        13px;

    font-weight:
        700;

    line-height:
        1.4;

    white-space:
        nowrap;
}


.site-footer-link {
    display:
        inline-flex;

    align-items:
        center;

    width:
        fit-content;

    max-width:
        100%;

    color:
        var(--text-secondary);

    font-size:
        14px;

    line-height:
        1.5;

    text-decoration:
        none;

    transition:
        color var(--transition-fast),
        opacity var(--transition-fast),
        transform var(--transition-fast);
}


.site-footer-link:hover {
    color:
        var(--text-primary);
}


.site-footer-link:focus-visible {
    outline:
        none;

    border-radius:
        var(--radius-xs);

    box-shadow:
        0
        0
        0
        3px
        color-mix(
            in srgb,
            var(--primary) 20%,
            transparent
        );
}


.site-footer-column:has(
    .site-footer-contact-address
) {
    min-width:
        220px;

    gap:
        10px;
}


.site-footer-contact-address {
    display:
        block;

    width:
        100%;

    max-width:
        100%;

    margin:
        0;

    color:
        var(--text-secondary);

    font-size:
        13px;

    font-weight:
        450;

    line-height:
        1.6;

    letter-spacing:
        0;

    white-space:
        normal;

    overflow-wrap:
        anywhere;

    word-break:
        normal;
}


.site-footer-contact-link {
    display:
        inline-flex;

    align-items:
        center;

    width:
        auto;

    max-width:
        100%;

    margin:
        0;

    color:
        var(--text-secondary);

    white-space:
        normal;

    overflow:
        visible;

    text-overflow:
        clip;

    overflow-wrap:
        anywhere;

    word-break:
        break-word;
}


.site-footer-contact-link:hover {
    color:
        var(--text-primary);
}


.site-footer-contact-link:focus-visible {
    outline:
        none;

    border-radius:
        var(--radius-xs);

    box-shadow:
        0
        0
        0
        3px
        color-mix(
            in srgb,
            var(--primary) 20%,
            transparent
        );
}


.site-footer-bottom {
    border-top:
        1px solid
        var(--border);

    background:
        var(--surface-soft);
}


.site-footer-bottom-inner {
    width:
        min(
            1180px,
            calc(
                100% - 40px
            )
        );

    margin:
        0 auto;

    padding:
        22px
        0
        28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


.site-footer-copyright,
.site-footer-meta {
    color:
        var(--text-muted);

    font-size:
        12px;

    line-height:
        1.6;
}


.site-footer-meta {
    text-align:
        right;
}


/* ================================================================
   PAGE HEIGHT
================================================================ */

html,
body {
    min-height:
        100%;
}


body {
    min-height:
        100vh;
}


.app-main,
.auth-page,
.landing-page {
    min-height:
        100vh;

    display:
        flex;

    flex-direction:
        column;
}


.app-content,
.auth-main,
.landing-main {
    flex:
        1;
}


/* ================================================================
   RESPONSIVE
================================================================ */

@media (
    max-width:
    1100px
) {

    .site-footer-inner {
        gap:
            44px;
    }


    .site-footer-links {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            32px
            36px;
    }


    .site-footer-column:last-child,
    .site-footer-column:has(
        .site-footer-contact-address
    ) {
        min-width:
            0;
    }

}


@media (
    max-width:
    980px
) {

    .site-footer-inner {
        grid-template-columns:
            1fr;

        gap:
            44px;
    }


    .site-footer-brand {
        max-width:
            440px;
    }


    .site-footer-links {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            32px
            36px;
    }

}


@media (
    max-width:
    720px
) {

    .site-footer-inner {
        width:
            min(
                calc(
                    100% - 32px
                ),
                1180px
            );

        padding:
            44px
            0
            36px;
    }


    .site-footer-bottom-inner {
        width:
            min(
                calc(
                    100% - 32px
                ),
                1180px
            );
    }


    .site-footer-links {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            32px
            24px;
    }


    .site-footer-contact-address {
        max-width:
            100%;
    }

}


@media (
    max-width:
    640px
) {

    .site-brand-logo {
        height:
            38px;
    }


    .site-brand-flyer-image {
        height:
            44px;

        max-width:
            190px;
    }


    .site-footer-links {
        grid-template-columns:
            1fr;

        gap:
            28px;
    }


    .site-footer-column {
        width:
            100%;
    }


    .site-footer-column:has(
        .site-footer-contact-address
    ) {
        width:
            100%;

        min-width:
            0;

        gap:
            8px;
    }


    .site-footer-contact-address {
        width:
            100%;

        max-width:
            none;
    }


    .site-footer-contact-link {
        display:
            inline-flex;

        width:
            auto;

        max-width:
            100%;

        white-space:
            normal;

        overflow:
            visible;

        text-overflow:
            clip;

        overflow-wrap:
            anywhere;

        word-break:
            break-word;
    }

}


@media (
    max-width:
    520px
) {

    .site-footer-inner,
    .site-footer-bottom-inner {
        width:
            min(
                calc(
                    100% - 28px
                ),
                1180px
            );
    }


    .site-footer-inner {
        padding:
            38px
            0
            32px;
    }


    .site-footer-description {
        max-width:
            100%;

        font-size:
            12px;
    }


    .site-footer-column-title {
        font-size:
            11px;
    }


    .site-footer-link {
        font-size:
            12px;
    }


    .site-footer-contact-address {
        font-size:
            12px;

        line-height:
            1.5;
    }


    .site-footer-bottom-inner {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .site-footer-meta {
        max-width:
            100%;

        text-align:
            left;
    }

}




/* ================================================================
   TOUCH INTERACTION — NO TRANSIENT FLASH
================================================================ */

@media (
    hover:
    none
) {

    .site-brand:active,
    .site-brand-flyer:active,
    .site-footer-link:active,
    .site-footer-contact-link:active {
        color:
            inherit;

        background:
            transparent;

        transform:
            none;

        box-shadow:
            none;
    }

}


/* ================================================================
   THEME TRANSITIONS
================================================================ */

html.theme-ready
.site-footer,
html.theme-ready
.site-footer-link,
html.theme-ready
.site-footer-contact-address,
html.theme-ready
.site-footer-contact-link,
html.theme-ready
.site-footer-bottom {
    transition:
        color var(--transition-base),
        background var(--transition-base),
        border-color var(--transition-base);
}


/* ================================================================
   REDUCED MOTION
================================================================ */

@media (
    prefers-reduced-motion:
    reduce
) {

    .site-brand,
    .site-brand-flyer,
    .site-footer,
    .site-footer-link,
    .site-footer-contact-link,
    .site-footer-contact-address,
    .site-footer-bottom {
        transition:
            none;
    }

}