/* okitoki-v4 — site footer: the current site footer (okitoki-v3 css/footer.css, PROG-9963)
 * kept as decided on 2026-10-01, moved onto v4 tokens and the shared container. */

.v-footer {
    padding: clamp(48px, 5vw, 72px) 0 26px;
    background-color: rgb(var(--v-color-footer));
    color: rgb(var(--v-color-white));
}

.v-footer__cols {
    display: flex;
    justify-content: space-between;
    gap: 28px;
}
.v-footer__col { flex: 1 1 0; min-width: 0; }
.v-footer__col:first-child { flex: 1.3 1 0; }
.v-footer__col--social { flex: 1.05 1 0; }

.v-footer__title {
    margin: 0 0 var(--v-space-sm);
    color: inherit;
    font-size: var(--v-font-size-sm);
    font-weight: var(--v-font-weight-bold);
    line-height: 1.2;
    text-transform: uppercase;
}

.v-footer__list { margin: 0; padding: 0; list-style: none; }
.v-footer__list li + li { margin-top: 9px; }
.v-footer__list a {
    color: inherit;
    font-size: var(--v-font-size-sm);
    line-height: 1.3;
    transition: color var(--v-duration) var(--v-timing);
}
.v-footer__list a:hover,
.v-footer__list a:focus-visible { color: rgb(var(--v-color-accent)); }
.v-footer__col--upper .v-footer__list a {
    font-weight: var(--v-font-weight-bold);
    text-transform: uppercase;
}

/* Social icons (keyed by the ACF sociallist link). Brand colours are the networks' own. */
.v-social {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    max-width: 280px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.v-social__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(var(--v-color-white), .1);
    color: rgb(var(--v-color-white));
    transition: transform var(--v-duration) var(--v-timing), filter var(--v-duration) var(--v-timing);
}
.v-social__link:hover,
.v-social__link:focus-visible { transform: translateY(-2px); filter: brightness(1.08); }
.v-social__link svg { width: 22px; height: 22px; }
.v-social__link--fb { background: #1877f2; }
.v-social__link--ig { background: linear-gradient(45deg, #f9ce34, #ee2a7b 45%, #6228d7); }
.v-social__link--tg { background: #2aabee; }
.v-social__link--yt { background: #ff0000; }

.v-footer__bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-top: clamp(40px, 5vw, 64px);
}
.v-footer__copy {
    margin: 0;
    color: rgba(var(--v-color-white), .55);
    font-size: 13px;
    line-height: 1.5;
}
.v-footer__copy a { color: rgb(var(--v-color-white)); text-decoration: underline; }
.v-footer__badge { flex-shrink: 0; line-height: 0; }
.v-footer__badge img { width: 110px; height: auto; }

/* Back-to-top: white circle left of the Chaty bubble (same spot as on the current site). */
.v-to-top {
    position: fixed;
    right: 88px;
    bottom: 28px;
    z-index: calc(var(--v-z-header) - 1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgb(var(--v-color-border-element));
    border-radius: 50%;
    background: rgb(var(--v-color-white));
    box-shadow: var(--v-shadow);
    color: rgb(var(--v-color-text));
    transition: color var(--v-duration) var(--v-timing), border-color var(--v-duration) var(--v-timing);
}
.v-to-top:hover { border-color: rgb(var(--v-color-primary)); color: rgb(var(--v-color-primary)); }
.v-to-top .v-icon { width: 22px; height: 22px; }

@media (max-width: 991.98px) {
    .v-footer__cols { flex-wrap: wrap; gap: 36px 32px; }
    .v-footer__col,
    .v-footer__col:first-child,
    .v-footer__col--social { flex: 1 1 calc(50% - 16px); }
    .v-footer__title { font-size: 18px; font-weight: var(--v-font-weight); }
}
@media (max-width: 499.98px) {
    .v-footer__cols { gap: 28px; }
    .v-footer__col,
    .v-footer__col:first-child,
    .v-footer__col--social { flex: 1 1 100%; }
    .v-social { max-width: 100%; justify-content: flex-start; gap: 14px; }
    .v-footer__bottom { flex-direction: column; align-items: flex-start; }
}