@use '../base/variables' as *;
@use '../base/mixins' as *;

// ==========================================================================
// Site Footer Component
// Global, non-administrable footer (see spec-driven-development/2026-07-11-site-footer.md)
//
// ⚠️ FIGMA GAP: node-id=143-1234 could not be inspected via MCP (quota was
// exhausted at spec-writing time — see "Gap Figma" section of the spec doc).
// All spacing/sizing values below are PROVISIONAL: derived from the
// `footer.jpg` reference screenshot at repo root + the existing conventions
// in `_header.scss` (same spacing scale, breakpoints, radius, colors).
// TODO: once Figma access is restored, re-open node-id=143-1234 and do a
// pixel-perfect pass (exact paddings/gaps, mountain-mask height/silhouette,
// font sizes) — flag for `design-consistency-checker` review step.
//
// Per spec, `.site-footer__*` classes intentionally DO NOT share/reuse
// `.site-header__*` classes even where visually similar (lang switcher,
// theme toggle, cta button) — styles are duplicated under the footer's own
// BEM namespace to avoid coupling two independent components.
// ==========================================================================

.site-footer {
    position: relative;
    color: $color-neutral;

    &:before {
        content: "";
        position: absolute;
        display: block;
        width: 100%;
        bottom: 100%;
        left: 0;
        height: $footer-mask-height;
        background-color: $color-secondary-dark;
        mask-image: url("../../images/footer-mountain-mask.svg");
        mask-size: auto 100%;
        mask-position: center bottom;
        mask-repeat: repeat-x;
        -webkit-mask-image: url("../../images/footer-mountain-mask.svg");
        -webkit-mask-size: auto 100%;
        -webkit-mask-position: center bottom;
        -webkit-mask-repeat: repeat-x;
        transform: translateY(1px);
        z-index: 1;
    }
}

// --------------------------------------------------------------------------
// Container
// --------------------------------------------------------------------------

.site-footer__wrapper {
    background-color: $color-secondary-dark;
}

.site-footer__row-1,
.site-footer__row-2 {
    display: flex;
    position: relative;
    align-items: center;
    max-width: $breakpoint-wrapper;
    margin: 0 auto;
    padding: 0 $spacing-md;

    @include above-wrapper-breakpoint {
        padding: 0;
    }
}

.site-footer__row-1 {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: $spacing-md;
    padding-bottom: $spacing-lg;

    &:after {
        position: absolute;
        content: "";
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - (#{$spacing-md} * 2));
        height: 1px;
        background-color: color-mix(in srgb, $color-neutral 20%, transparent);

        @include above-wrapper-breakpoint {
            width: $breakpoint-wrapper;
        }
    }

    @media (max-width: #{$breakpoint-sm - 1px}) {
        flex-direction: column;
        align-items: center;
        gap: $spacing-sm;
        padding-bottom: $spacing-md;
    }
}

.site-footer__row-2 {
    justify-content: space-between;
    gap: $spacing-md;
    padding-top: $spacing-md;
    padding-bottom: $spacing-md;

    @media (max-width: #{$breakpoint-sm - 1px}) {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        gap: $spacing-sm;
    }
}

// --------------------------------------------------------------------------
// Row 1: Logo
// --------------------------------------------------------------------------

.site-footer__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.3s ease;
    flex: 0 0 auto;

    &:hover {
        opacity: 0.8;
    }
}

.site-footer__logo-image {
    height: 40px;
    width: auto;
    // Source SVG is filled with $color-primary-dark (near-identical to the
    // footer background) — invert to render it visible against the dark bg.
    filter: brightness(0) invert(1);

    @media (min-width: $breakpoint-md) {
        height: 50px;
    }
}

// --------------------------------------------------------------------------
// Row 1: Menu links
// --------------------------------------------------------------------------

.site-footer__menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: $spacing-md;
    list-style: none;
    margin: 0;
    padding: 0;

    @media (max-width: #{$breakpoint-md - 1px}) {
        gap: $spacing-sm;
        justify-content: center;
    }

    @media (max-width: #{$breakpoint-sm - 1px}) {
        // Full-width wrap on mobile so the row doesn't get cramped
        // alongside logo/cta/instagram — main responsive risk flagged
        // in the task brief.
        width: 100%;
        gap: $spacing-sm $spacing-md;
    }
}

.site-footer__menu-link {
    font-family: $font-family-sans;
    font-size: 15px;
    font-weight: 400;
    color: $color-neutral;
    text-decoration: none;
    white-space: nowrap;
    // Minimum touch target height (WCAG 2.1 AA, 44x44px) via padding rather
    // than fixed height, to keep the link's inline flow natural.
    padding: $spacing-xs 0;
    transition: opacity 0.3s ease;

    &:hover {
        opacity: 0.75;
        text-decoration: underline;
    }

    &:focus-visible {
        outline: 2px solid $color-neutral;
        outline-offset: 2px;
    }
}

.site-footer__actions {
    gap: 34px;
    display: flex;
}

// --------------------------------------------------------------------------
// Row 1: CTA (shared .btn--lined component, see components/_button.scss) + Instagram
// --------------------------------------------------------------------------

.site-footer__cta {
    flex: 0 0 auto;
}

.site-footer__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: $color-neutral;
    transition: all 0.3s ease;

    &:focus-visible {
        outline: 2px solid $color-neutral;
        outline-offset: 2px;
    }

}

// --------------------------------------------------------------------------
// Row 2: Copyright / legal / year
// --------------------------------------------------------------------------

.site-footer__copyright {
    display: flex;
    align-items: center;
    gap: $spacing-sm;
    font-family: $font-family-sans;
    font-size: 14px;
    color: $color-neutral;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
}

.site-footer__legal-link {
    color: $color-neutral;
    text-decoration: none;
    transition: opacity 0.3s ease;

    &:hover {
        opacity: 0.75;
        text-decoration: underline;
    }

    &:focus-visible {
        outline: 2px solid $color-neutral;
        outline-offset: 2px;
    }
}

.site-footer__year {
    color: $color-neutral;
}

// --------------------------------------------------------------------------
// Row 2: Language switcher (duplicated from header per spec — no shared class)
// --------------------------------------------------------------------------

.site-footer__lang {
    position: relative;
    flex: 0 0 auto;
}

.site-footer__lang-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    padding: $spacing-xs $spacing-sm;
    cursor: pointer;
    font-family: $font-family-sans;
    font-size: 14px;
    font-weight: 400;
    color: $color-neutral;
    transition: color 0.3s ease;

    &:hover {
        color: $color-primary-lighter;
    }

    &:focus-visible {
        outline: 2px solid $color-neutral;
        outline-offset: 2px;
    }

    .icon {
        transition: transform 0.3s ease;
    }

    &:hover .icon {
        transform: translateY(2px);
    }
}

.site-footer__lang-dropdown {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: $spacing-xs;
    background: $color-primary-dark;
    border: 1px solid color-mix(in srgb, $color-neutral 30%, transparent);
    border-radius: $radius-sm;
    padding: $spacing-xs;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);
    z-index: 10;

    // Footer lang switcher sits low on the page (near viewport bottom), so
    // the dropdown opens upward (bottom: 100%) rather than downward like
    // the header's — avoids the panel being clipped/overflowing offscreen.
}

.site-footer__lang:hover .site-footer__lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.site-footer__lang-option {
    display: block;
    padding: $spacing-xs $spacing-sm;
    font-family: $font-family-sans;
    font-size: 14px;
    color: $color-neutral;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease;

    &:hover {
        background-color: color-mix(in srgb, $color-neutral 10%, transparent);
        color: $color-primary-lighter;
    }
}