/* ============================================================================
   FOOTER — deep blue close            proofing preview, 2026-09-09
   ----------------------------------------------------------------------------
   Linked from inc/footer-modern.php rather than inc/topscripts.php, so the
   CIPA-preserved topscripts.php needs no cache-buster bump. All rules are
   namespaced .kf-* so nothing collides with custom.css.

   Ground is Karns deep blue #0d3a75. Every foreground colour below was picked
   against it for WCAG AA at small sizes:
     #dbe7f8 on #0d3a75  ~9.2:1     link text
     #9dc0ee on #0d3a75  ~6.3:1     column headings
     #b9cdea on #0d3a75  ~7.2:1     legal text
   ========================================================================== */

.kf {
    --kf-ground: #0d3a75;
    --kf-ground-2: #0a2f60;
    --kf-text: #dbe7f8;
    --kf-head: #9dc0ee;
    --kf-fine: #b9cdea;
    --kf-red: #ad1f34;
    --kf-line: rgba(255, 255, 255, .18);

    background: var(--kf-ground);
    color: var(--kf-text);
    padding: 30px 0 0;
}
.kf .container > *:first-child { margin-top: 0; }

/* An inline <svg> generates a line box even at width/height 0 — same trap as
   the header sprite. Keep it out of flow. */
.kf-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.kf a { color: var(--kf-text); text-decoration: none; }
.kf a:hover, .kf a:focus { color: #fff; text-decoration: underline; }

.kf-h {
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--kf-head);
    margin: 0 0 12px;
}

/* ---------- the four shopper shortcuts ---------- */
.kf-tasks { display: flex; gap: 10px; margin: 0 0 30px; }
/* Block + text-align, not a column flex: an inline-block icon is centred by
   text-align on its parent no matter what happens to flex-direction. */
.kf-task {
    flex: 1;
    display: block;
    padding: 14px 8px;
    border: 1px solid var(--kf-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 12.5px; font-weight: 700; line-height: 1;
    text-align: center;
}
.kf-task .kf-ic { margin: 0 auto 9px; }
.kf-task span { display: block; }
.kf-task:hover, .kf-task:focus { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); color: #fff; text-decoration: none; }
/* <use> clones a symbol into a shadow tree, where `.kf-ic .s` never matches —
   that left every icon filled default black. fill and stroke are INHERITED SVG
   properties, so setting them on the <svg> does reach the cloned path. */
.kf-ic {
    width: 24px; height: 24px; display: inline-block; vertical-align: middle;
    color: #ffa9b6;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* ---------- signup + link columns ---------- */
.kf-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 30px;
    margin: 0 0 30px;
}

/* A short card that opens the existing signup modal. The Constant Contact form
   itself is ~1200px tall and lives in that modal, so the footer stays short. */
.kf-signup {
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--kf-line);
    border-radius: 12px;
    padding: 20px;
    align-self: start;
}
.kf-signup-h {
    font-family: 'Oswald', sans-serif;
    font-size: 22px; font-weight: 600; line-height: 1.15;
    margin: 0 0 8px; color: #fff;
}
.kf-signup-p { margin: 0 0 16px; font-size: 13.5px; color: var(--kf-fine); line-height: 1.5; }
.kf-signup-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%;
    border: 0; border-radius: 999px;
    background: var(--kf-red);
    color: #fff;
    padding: 12px 20px;
    font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1;
    cursor: pointer;
}
.kf-signup-btn:hover, .kf-signup-btn:focus { background: #8f1a2b; color: #fff; }

.kf-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kf-col a { font-size: 13.5px; line-height: 1.35; display: inline-block; }

/* ---------- stores ---------- */
.kf-stores { margin: 0 0 30px; padding-top: 26px; border-top: 1px solid var(--kf-line); }
.kf-store-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.kf-store {
    display: block;
    padding: 10px 12px;
    border: 1px solid var(--kf-line);
    border-radius: 9px;
    background: rgba(255, 255, 255, .05);
    font-size: 13px; font-weight: 600;
    text-align: center;
}
.kf-store:hover, .kf-store:focus { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); text-decoration: none; }

/* ---------- legal bar ---------- */
.kf-legal { background: var(--kf-ground-2); border-top: 1px solid var(--kf-line); margin-top: 4px; }
.kf-legal-in { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 18px 15px; }
.kf-marks { display: flex; align-items: center; gap: 16px; flex: none; }

/* The Karns badge has a blue outer ring, which loses its edge on a blue
   ground; a white disc gives it something to sit on. */
.kf-mark-k {
    display: inline-flex; background: #fff; border-radius: 50%; padding: 5px; line-height: 0;
}
.kf-mark-k img { height: 52px; width: auto; display: block; }
.kf-mark-fr img { height: 34px; width: auto; display: block; }

.kf-legal-text { flex: 1 1 320px; min-width: 0; }
.kf-since { margin: 0 0 5px; font-size: 13.5px; color: #fff; }
.kf-fine { margin: 0 0 3px; font-size: 12.5px; color: var(--kf-fine); line-height: 1.6; }
.kf-fine a { color: #cfe0f7; text-decoration: underline; }
.kf-fine a:hover { color: #fff; }

/* ---------- focus visibility (WCAG 2.4.7) ---------- */
.kf a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 4px; }
.kf-signup-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
    .kf-store-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 991px) {
    .kf-top { grid-template-columns: 1fr 1fr; gap: 26px; }
    .kf-signup { grid-column: 1 / -1; }
    .kf-store-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .kf { padding-top: 22px; }
    .kf-tasks { gap: 6px; margin-bottom: 24px; }
    .kf-task { padding: 11px 3px; font-size: 10.5px; gap: 6px; }
    .kf-ic { width: 21px; height: 21px; }
    .kf-top { grid-template-columns: 1fr; gap: 22px; }
    .kf-store-grid { grid-template-columns: repeat(2, 1fr); }
    .kf-legal-in { gap: 16px; padding: 16px 15px; }
    .kf-mark-k img { height: 44px; }
    .kf-mark-fr img { height: 28px; }
}