/* =============================================================
   vebou — Global Footer
   Path: /wp-pages/dnooo/footer/footer.css
   Surface: dark (--black / --graphite)
   Loaded automatically by JCM/theme runtime — no enqueue here.
   ============================================================= */

/* ── Design tokens (component-scoped) ─────────────────────── */
.ft-root {
    --ft-black:        #0A0A0C;
    --ft-graphite:     #141418;
    --ft-graphite-mid: #1E1E24;
    --ft-bone:         #E8E4DC;
    --ft-bone-dark:    #D4CFCA;
    --ft-silver-light: #B4B9C0;
    --ft-silver:       #8C9198;
    --ft-red:          #C0282C;
    --ft-red-dim:      #8A1C1F;
    --ft-rule:         rgba(255, 255, 255, 0.07);
    --ft-font:         'DM Sans', system-ui, -apple-system, sans-serif;

    /* spacing scale */
    --ft-sp-4:  4px;
    --ft-sp-8:  8px;
    --ft-sp-12: 12px;
    --ft-sp-16: 16px;
    --ft-sp-20: 20px;
    --ft-sp-24: 24px;
    --ft-sp-32: 32px;
    --ft-sp-40: 40px;
    --ft-sp-48: 48px;
    --ft-sp-64: 64px;
    --ft-sp-80: 80px;
    --ft-sp-96: 96px;
}

/* ── Root shell ────────────────────────────────────────────── */
.ft-root {
    font-family: var(--ft-font);
    background-color: var(--ft-black);
    color: var(--ft-silver-light);
    width: 100%;
}

/* ── Content rail ──────────────────────────────────────────── */
.ft-rail {
    width: min(100% - var(--ft-sp-32), 1600px);
    margin-inline: auto;
}

/* ── Main body layer ───────────────────────────────────────── */
.ft-main {
    padding-block-start: var(--ft-sp-64);
    padding-block-end: var(--ft-sp-48);
    border-block-end: 1px solid var(--ft-rule);
}

/* ── Body grid: brand (wider) + 3 nav columns ─────────────── */
.ft-body-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ft-sp-48) 0;
}

/* ── Brand block ───────────────────────────────────────────── */
.ft-brand {
    /* full-width on mobile; wider than nav columns on desktop */
}

/* Wordmark */
.ft-wordmark {
    display: inline-flex;
    align-items: center;
    gap: var(--ft-sp-8);
    text-decoration: none;
    margin-block-end: var(--ft-sp-20);
}

.ft-wordmark__image {
    display: block;
    width: 190px;
    height: auto;
    max-width: 100%;
    transition: filter 0.2s ease;
}

.ft-wordmark:hover .ft-wordmark__image,
.ft-wordmark:focus-visible .ft-wordmark__image {
    filter: brightness(1.08);
}

.ft-wordmark:focus-visible {
    outline: 2px solid var(--ft-red);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Brand description */
.ft-brand__desc {
    font-size: 0.9375rem;   /* 15px */
    font-weight: 400;
    line-height: 1.65;
    color: var(--ft-silver);
    max-width: 34ch;
    margin-block-end: var(--ft-sp-24);
}

/* ── Navigation columns ────────────────────────────────────── */
.ft-col__heading {
    display: block;
    font-size: 0.625rem;      /* 10px */
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ft-silver);
    margin-block-end: var(--ft-sp-20);
}

.ft-col__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ft-col__link {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 0.9375rem;    /* 15px mobile */
    font-weight: 400;
    line-height: 1.5;
    color: var(--ft-silver-light);
    /* min touch target: 44px */
    min-block-size: 44px;
    padding-block: var(--ft-sp-4);
    transition: color 0.2s;
}

.ft-col__link:hover {
    color: var(--ft-bone);
}

.ft-col__link:focus-visible {
    outline: 2px solid var(--ft-red);
    outline-offset: 3px;
    border-radius: 2px;
    color: var(--ft-bone);
}

/* ── Bottom bar ────────────────────────────────────────────── */
.ft-bottom {
    background-color: var(--ft-graphite);
    padding-block: var(--ft-sp-24);
}

.ft-bottom__inner {
    display: flex;
    flex-direction: column;
    gap: var(--ft-sp-8);
    align-items: flex-start;
}

.ft-bottom__copy,
.ft-bottom__contact {
    margin: 0;
    font-size: 0.8125rem;    /* 13px */
    font-weight: 400;
    line-height: 1.5;
    color: var(--ft-silver);
}

.ft-bottom__link {
    color: var(--ft-silver);
    text-decoration: none;transition: color 0.2s;min-block-size: 36px;
    display: inline-flex;
    align-items: center;
}

.ft-bottom__link:hover {
    color: var(--ft-bone);
}

.ft-bottom__link:focus-visible {
    outline: 2px solid var(--ft-red);
    outline-offset: 3px;
    border-radius: 2px;
    color: var(--ft-bone);
}

/* ── Social links (JCM plugin output) ─────────────────────── */
/** Plugin renders:
 *   <nav class="jcm-footer-social">
 *     <ul class="jcm-footer-social__list">
 *       <li class="jcm-footer-social__item">
 *         <a class="jcm-footer-social__link" href="…">
 *           <span class="jcm-footer-social__icon">
 *             <svg class="jcm-footer-social__svg">…</svg>
 *           </span>
 *           Platform name
 *         </a>
 *       </li>
 *     </ul>
 *   </nav>
 *
 * Footer outputs the action once; plugin renders nothing when
 * zero links are configured (no empty containers remain).
 */

.jcm-footer-social {
    /* plugin <nav> wrapper */
}

.jcm-footer-social__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ft-sp-4) var(--ft-sp-16);
}

.jcm-footer-social__item {
    display: flex;
}

.jcm-footer-social__link {
    display: inline-flex;
    align-items: center;
    gap: var(--ft-sp-8);          /* icon ↔ text gap */
    text-decoration: none;
    font-size: 0.875rem;           /* 14px */
    font-weight: 400;
    line-height: 1.5;
    color: var(--ft-silver-light);
    min-block-size: 44px;          /* mobile touch target */
    padding-block: var(--ft-sp-4);
    transition: color 0.2s;
}

.jcm-footer-social__link:hover {
    color: var(--ft-bone);
}

.jcm-footer-social__link:focus-visible {
    outline: 2px solid var(--ft-red);
    outline-offset: 3px;
    border-radius: 2px;
    color: var(--ft-bone);
}

/* Icon wrapper */
.jcm-footer-social__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* SVG: fixed size, inherit color, no distortion */
.jcm-footer-social__svg {
    display: block;
    inline-size: 18px;
    block-size: 18px;fill: currentColor;
    stroke: none;
    flex: 0 0 auto;overflow: visible;
}

/* Some platform icons are outline-style (stroke only) */
.jcm-footer-social__svg[stroke] {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

/* ── Responsive layout ─────────────────────────────────────── */

/* Tablet: 2 + 3 arrangement */
@media (min-width: 640px) {
    .ft-body-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--ft-sp-48) var(--ft-sp-32);
    }

    .ft-brand {
        grid-column: 1 / -1;    /* brand spans full width at this breakpoint */
    }

    .ft-bottom__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* Desktop: brand wider + 3 nav columns */
@media (min-width: 960px) {
    .ft-main {
        padding-block-start: var(--ft-sp-96);
        padding-block-end: var(--ft-sp-64);
    }

    .ft-rail {
        width: min(100% - var(--ft-sp-64), 1600px);
    }

    .ft-body-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: 0 var(--ft-sp-40);
        align-items: start;
    }

    .ft-brand {
        grid-column: auto;       /* back to single column in 4-col grid */
    }

    /* Desktop nav link: fine-pointer minimum 36px */
    @media (pointer: fine) {
        .ft-col__link {
            font-size: 0.875rem;    /* 14px on desktop fine pointer */
            min-block-size: 36px;
        }

        .ft-bottom__link {
            min-block-size: 36px;
        }
    }
}

/* Wide desktop: extra breathing room */
@media (min-width: 1280px) {
    .ft-body-grid {
        gap: 0 var(--ft-sp-48);
    }
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ft-wordmark,
    .ft-wordmark__image,
    .ft-col__link,
    .ft-bottom__link,
    .jcm-footer-social__link {
        transition-duration: 0.01ms;
    }
}