/* ==========================================================================
   Footer — Figma component "Footer" (1512x364)
   10px gutter around a 40px-radius gradient card, 48px inner padding. The
   gutter is a solid tint from the same palette (not --page-bg white/cream),
   dark enough to still read as a distinct, rounded floating card.
   ========================================================================== */

.site-footer {
    display: flex;
    align-items: stretch;
    height: 364px;
    padding: 0 10px 10px;
    margin-top: 18px;
    /* Positioned, with a real stacking-context-winning z-index — needed
       because .kc-page (Kids Apps) is itself position:relative;z-index:0,
       which makes it (and its bleeding leaf art) paint above any later,
       non-positioned sibling regardless of DOM order. An inert z-index on a
       static element (what this footer had before) does nothing; without
       this, the footer just sits underneath that page's content instead of
       on top of it, like it should on every page. */
    position: relative;
    z-index: 1;
}

.footer-card {
    flex: 1 0 0;
    min-width: 1px;
    display: flex;
    justify-content: center;
    padding: 48px;
    border-radius: 40px;
    overflow: hidden;
    background-image: linear-gradient(150.133deg, rgb(235, 236, 249) 27.327%, rgb(249, 231, 242) 75.87%);
}

/* Keeps the gradient card full-bleed while the columns line up with the
   1224px content column the rest of the page uses, instead of spreading
   apart via space-between as the viewport grows past 1512px. */
.footer-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    max-width: 1224px;
}

/* --- brand / email / socials --- */

.footer-brand {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.footer-brand-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.footer-logo {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.footer-logo .brand-name {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 20px;
    line-height: normal;
    color: var(--black);
}

.footer-email {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.1;
    color: #4C4D59;
}

.footer-email a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-email a:hover {
    color: var(--primary-blue);
}

.footer-socials-cta {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: #4C4D59;
    margin: 0 0 12px;
}

.footer-socials {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 228px;
}

.footer-socials a {
    display: block;
    height: 32px;
}

.footer-socials img {
    display: block;
    width: 32px;
    height: 32px;
    transition: transform 0.2s ease;
}

.footer-socials a:hover img {
    transform: scale(1.1);
}

/* --- link columns --- */

/* Figma draws these 200 wide because every English label fits. "Політика
   конфіденційності" is 259, so the column takes its content width and only
   falls back to 200 (wrapping, not clipping) once the row runs out of room. */
.footer-column {
    flex: 0 1 auto;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.footer-column h4 {
    width: 100%;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.1;
    color: var(--black);
}

.footer-column-links {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.footer-column-links a {
    display: block;
    width: 100%;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.1;
    color: #4C4D59;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-column-links a:hover {
    color: var(--primary-blue);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) and (min-width: 769px) {
    .site-footer {
        height: auto;
    }
    .footer-inner {
        flex-wrap: wrap;
        gap: 48px;
    }
    .footer-brand {
        align-self: auto;
        gap: 40px;
        width: 100%;
    }
}

/* Mobile footer — Figma "Footer" mobile variant: 393x1026, single stacked
   column inside a 32px-radius card. Same solid-gutter trick as desktop. */
@media (max-width: 768px) {
    .site-footer {
        height: auto;
        min-height: 1026px;
        margin-top: 0;
        padding: 0 10px 10px;
        /* z-index stays the base rule's 1 — this used to override it back to
           -1, which (combined with position:relative also from the base
           rule) pushed the whole footer behind normal in-flow content in
           paint/hit-test order, making every footer link/button unclickable
           on mobile even though it looked fine visually. */
    }

    .footer-card {
        min-height: 1016px;
        padding: 48px;
        border-radius: 32px;
        background-image: linear-gradient(98.625deg, rgb(235, 236, 249) 27.327%, rgb(249, 231, 242) 75.87%);
    }

    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    .footer-brand {
        align-self: auto;
        gap: 32px;
    }
}