/*
 * Mighty Fingers Facing Change: KSFA theme bridge.
 *
 * Loaded only on the Mighty Fingers page, after main.css and mf.css
 * (see functions.php). It changes nothing in the Mighty Fingers design.
 * It only stops site-wide KSFA rules in main.css from leaking into the
 * .mf section, and makes room for the fixed KSFA header.
 */

/* 1. The KSFA header (.site-nav) is position: fixed, so push the section
 *    below it. main.js sets --mf-offset to where the header ends;
 *    these values are fallbacks. mf.css also uses --mf-offset as the
 *    scroll offset when a visitor opens a stop. */
.mf {
    --mf-offset: 76px;
    margin-top: var(--mf-offset);
    /* main.css sets body { font-weight: 300 }; Mighty Fingers is set at 400. */
    font-weight: 400;
}

@media (max-width: 1024px) {
    .mf {
        --mf-offset: 82px;
    }
}

/* 2. main.css starts with * { margin: 0; padding: 0 }, plus section { padding: 7rem }
 *    (5rem 3rem under 1024px). Give elements inside .mf their normal browser
 *    margins and padding back. Every margin or padding mf.css sets itself
 *    is more specific than this and still wins. */
.mf :where(*),
.mf :where(*)::before,
.mf :where(*)::after {
    margin: revert;
    padding: revert;
}

/* 3. Class names KSFA also uses on its home page. */
.mf :where(.hero) {
    display: revert;               /* main.css: display: grid */
    grid-template-columns: revert; /* main.css: 1fr 1fr */
    min-height: revert;            /* main.css: 100vh */
}

.mf :where(.contact) {
    text-align: revert;            /* main.css: center */
}

.mf :where(.press) {
    background: revert;            /* main.css: var(--ink) */
}