/*
 * F-004 footer.css — Global footer chrome.
 *
 * Layout: 4-column widget grid (Arkhe native footer-1 + footer-2 + child
 * footer-3 + footer-4 injected via arkhe_start_footer_foot_content), then
 * legal nav group, then verified badge strip (rendered just above footer
 * via arkhe_before_footer), then Arkhe's copyright row.
 *
 * Mobile-first.
 */

/* ----------------------------------------------------------------------
 * Verified strip — rendered by verified-badge.php above l-footer.
 * Colors = tokens.json role_mapping.verified_badge.
 * -------------------------------------------------------------------- */
.c-verifiedStrip {
    background: var(--tk-color-bg-subtle);
    border-top: 1px solid var(--tk-color-border);
    border-bottom: 1px solid var(--tk-color-border);
    padding: 16px 0;
}

.c-verifiedBadge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--tk-color-ink-muted);
    font-size: var(--tk-fs-sm);
    line-height: var(--tk-lh-normal);
}

.c-verifiedBadge__icon {
    display: inline-flex;
    align-items: center;
    color: var(--tk-color-success);
    flex: none;
}

.c-verifiedBadge__text {
    flex: 1 1 auto;
    min-width: 0;
}

.c-verifiedBadge__link {
    color: var(--tk-color-link);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
    padding: 8px 10px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--tk-radius-sm);
}

.c-verifiedBadge__link:hover,
.c-verifiedBadge__link:focus-visible {
    background-color: var(--tk-color-bg);
    color: var(--tk-color-primary);
}

/* ----------------------------------------------------------------------
 * Footer shell.
 * -------------------------------------------------------------------- */
.l-footer {
    background: var(--tk-color-bg-subtle);
    color: var(--tk-color-ink);
    margin-top: 48px;
}

.l-footer__widgets {
    padding: 32px 0 16px;
}

/* 4-column widget grid — mobile 1col, 768px 2col, 1024px 4col.
 * Child-side template-parts/footer.php renders 4 <nav class="w-footer">
 * siblings (one per column). */
.l-footer__widgets > .l-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .l-footer__widgets > .l-container {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .l-footer__widgets > .l-container {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 32px;
    }
}

/* Column widget title (.c-widget__title -footer). */
.l-footer .c-widget__title {
    font-size: var(--tk-fs-base);
    font-weight: var(--tk-fw-bold);
    color: var(--tk-color-ink);
    margin-bottom: 8px;
    border-bottom: 1px solid var(--tk-color-border);
    padding-bottom: 4px;
}

.l-footer .c-widget {
    font-size: var(--tk-fs-sm);
    line-height: var(--tk-lh-relaxed);
}

.l-footer .c-widget a {
    color: var(--tk-color-ink);
    text-decoration: none;
    padding: 4px 0;
    display: inline-block;
    min-height: 36px; /* Footer links fall under the <44px rule via padding; see rationale below */
    line-height: 1.6;
}

/*
 * Footer link tap rationale:
 *   Dense footer link lists on JP news/support sites (Microsoft Learn,
 *   Microsoft Support, office-otasuke.com) all run <44px row-height.
 *   A11y 2.5.5 Level AAA floors tap-target 44x44 but Level AA accepts
 *   "inline text links" as exceptions. We therefore pad to 36px hit area
 *   with 4px vertical padding to stay close to AAA while preserving
 *   information density the reference sites converge on.
 *   Primary chrome (header, drawer) keeps the strict 44x44 floor.
 */

.l-footer .c-widget a:hover,
.l-footer .c-widget a:focus-visible {
    color: var(--tk-color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ----------------------------------------------------------------------
 * Legal nav group — flex row of inline links, small font.
 * -------------------------------------------------------------------- */
.l-footer__legal {
    padding: 16px 0 0;
    border-top: 1px solid var(--tk-color-border);
    margin-top: 16px;
}

.c-footerLegalNav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
    font-size: var(--tk-fs-sm);
}

.c-footerLegalNav a {
    color: var(--tk-color-ink-muted);
    text-decoration: none;
    padding: 8px 6px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--tk-radius-sm);
}

.c-footerLegalNav a:hover,
.c-footerLegalNav a:focus-visible {
    color: var(--tk-color-primary);
    background-color: var(--tk-color-bg);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ----------------------------------------------------------------------
 * Arkhe's own footer nav (l-footer__nav) — tune to match our tokens.
 * -------------------------------------------------------------------- */
.l-footer__foot {
    padding: 16px 0 24px;
    text-align: center;
}

.l-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    justify-content: center;
    font-size: var(--tk-fs-sm);
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.l-footer__nav a {
    color: var(--tk-color-ink-muted);
    text-decoration: none;
    padding: 6px 8px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.l-footer__nav a:hover,
.l-footer__nav a:focus-visible {
    color: var(--tk-color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.c-copyright {
    font-size: var(--tk-fs-xs);
    color: var(--tk-color-ink-muted);
    margin: 0;
}