/* Desktop layout — a single CSS grid with named areas across the whole footer
   (not nested wrapper divs) so the exact same markup can be completely
   re-stacked into a different order at the mobile breakpoint below via a
   second grid-template-areas definition. Vertical spacing between sections is
   hand-set via margin-top on each area rather than a uniform row-gap, since
   the logo/legal pairing needs a much tighter gap (12px) than the gap between
   major sections (48px). */
.orbisk-footer-menu {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: 24px;
    grid-template-areas:
        "columns columns columns"
        "divider divider divider"
        "logo socials secondary"
        "legal socials secondary";
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.orbisk-footer-menu-columns {
    grid-area: columns;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 32px;
}

.orbisk-footer-menu-column {
    display: flex;
    flex-direction: column;
    gap: 13px;
    min-width: 140px;
}

.orbisk-footer-menu-heading-trigger {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    text-align: left;
    cursor: default;
}

.orbisk-footer-menu-heading {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    color: var(--orbisk-footer-heading-color, #13382A66);
}

/* Accordion-only on mobile — see the media query below. */
.orbisk-footer-menu-chevron {
    display: none;
}

.orbisk-footer-menu-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.orbisk-footer-menu-link {
    position: relative;
    display: inline-flex;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    color: var(--orbisk-footer-link-color, #13382A);
    text-decoration: none;
    padding-bottom: 2px;
}

/* Same animated-underline technique as .orbisk-nav-item-trigger::after in
   nav-menu.css — scales in from the left on hover, text colour stays fixed. */
.orbisk-footer-menu-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: var(--orbisk-footer-link-hover-color, #B5E37C);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.orbisk-footer-menu-link:hover::after {
    transform: scaleX(1);
}

.orbisk-footer-menu-divider {
    grid-area: divider;
    width: 100%;
    height: 1px;
    background-color: #13382A;
    margin-top: 48px;
}

.orbisk-footer-menu-logo {
    grid-area: logo;
    display: inline-flex;
    justify-self: start;
    margin-top: 48px;
    margin-bottom: 12px;
}

.orbisk-footer-menu-logo-img {
    height: 32px;
    width: auto;
    display: block;
}

.orbisk-footer-menu-secondary-logo {
    grid-area: secondary;
    max-height: 80px;
    width: auto;
    display: block;
    align-self: center;
    justify-self: end;
}

.orbisk-footer-menu-socials {
    grid-area: socials;
    display: flex;
    align-items: center;
    align-self: center;
    justify-self: center;
    gap: 12px;
}

.orbisk-footer-menu-social-icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
}

.orbisk-footer-menu-social-icon svg {
    width: 32px;
    height: 32px;
}

.orbisk-footer-menu-legal {
    grid-area: legal;
    display: flex;
    align-items: center;
    justify-self: start;
    gap: 16px;
}

.orbisk-footer-menu-copyright,
.orbisk-footer-menu-privacy {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
    color: #13382A;
    text-decoration: none;
}

/* Same animated-underline hover as .orbisk-footer-menu-link — the Privacy
   link is still a link, so it gets the same hover treatment as every other
   link in this module, not just the column links. */
.orbisk-footer-menu-privacy {
    position: relative;
    display: inline-flex;
    padding-bottom: 2px;
}

.orbisk-footer-menu-privacy::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: var(--orbisk-footer-link-hover-color, #B5E37C);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.orbisk-footer-menu-privacy:hover::after {
    transform: scaleX(1);
}

.orbisk-footer-menu-canvas-placeholder {
    color: rgba(19, 56, 42, 0.5);
    font-style: italic;
}

/* ============================================================
   Mobile — re-stacked order (logo, columns accordion, secondary
   logo, socials, legal) plus the accordion behaviour itself.
   ============================================================ */
@media (max-width: 767px) {
    .orbisk-footer-menu {
        grid-template-columns: 1fr;
        grid-template-areas:
            "logo"
            "columns"
            "secondary"
            "socials"
            "legal";
        justify-items: center;
    }

    .orbisk-footer-menu-divider {
        display: none;
    }

    /* Row spacing is hand-set per area (not a uniform row-gap) since the
       socials->legal gap is 20px while every other gap is 54px. */
    .orbisk-footer-menu-logo {
        justify-self: center;
        margin-top: 0;
        margin-bottom: 0;
    }

    .orbisk-footer-menu-logo-img {
        height: 48px;
    }

    .orbisk-footer-menu-columns {
        justify-self: stretch;
        flex-direction: column;
        gap: 0;
        margin-top: 54px;
    }

    .orbisk-footer-menu-secondary-logo {
        justify-self: center;
        margin-top: 54px;
        margin-bottom: 0;
    }

    /* border-top only — the last column gets no border-bottom, so the divider
       lines run above every item (including the first) with none trailing
       after the last one. */
    .orbisk-footer-menu-column {
        gap: 0;
        min-width: 0;
        width: 100%;
        border-top: 1px solid #666666;
    }

    .orbisk-footer-menu-heading-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 16px 0;
        cursor: pointer;
    }

    /* Fixed solid colour on mobile, independent of the Heading Color field/its
       default — the field still drives desktop via the CSS var above. */
    .orbisk-footer-menu-heading {
        color: #13382A;
        font-size: 18px;
    }

    .orbisk-footer-menu-chevron {
        display: inline-flex;
        flex-shrink: 0;
        color: #13382A;
        transition: transform 0.3s ease;
    }

    .orbisk-footer-menu-column--open .orbisk-footer-menu-chevron {
        transform: rotate(180deg);
    }

    /* Animated open/close via max-height + overflow:hidden (universally
       supported, unlike animating grid-template-rows' fr units, which isn't
       reliable across all mobile browsers and was letting content peek past
       the "collapsed" row). max-height itself is set inline by
       footer-menu.js to the column's real measured height, not a fixed cap —
       a cap much larger than the actual content makes the transition's
       easing curve reach full reveal almost immediately, so it looks like a
       snap instead of a proper 0.3s animation. */
    .orbisk-footer-menu-links {
        max-height: 0;
        gap: 24px;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    /* Same 24px rhythm as the gap between links, so the last link reads as
       evenly spaced from the next column's border line as any other pair. */
    .orbisk-footer-menu-link:last-child {
        margin-bottom: 24px;
    }

    /* ...except the very last column, which has no following divider line to
       space away from — its last link can sit flush with the column's own
       bottom edge. */
    .orbisk-footer-menu-column:last-child .orbisk-footer-menu-link:last-child {
        margin-bottom: 0;
    }

    /* The trigger's own 16px padding-bottom already accounts for some of the
       space above the first link — without this it reads as tighter than the
       24px gap between links. 8px on top of that 16px completes the illusion
       of an even 24px gap, without changing the real .orbisk-footer-menu-links
       gap value (which would also widen every gap between links, not just the
       first one). */
    .orbisk-footer-menu-link:first-child {
        margin-top: 8px;
    }

    .orbisk-footer-menu-socials {
        margin-top: 54px;
    }

    .orbisk-footer-menu-legal {
        justify-self: center;
        margin-top: 20px;
    }
}