/* ==========================================================================
   Fastkava — B14 footer
   3-column brand / nav / contacts, faded wordmark, bottom bar.
   ========================================================================== */

/*
 * Transparent so the fixed animated field (.fk-bgfx) runs straight through the
 * footer — the design's final stage is the bottom glow flaring up behind it, so
 * the footer has to be part of the animation rather than a separate slab.
 * A faint wash keeps it reading as its own zone without cutting the field off.
 */
.fk-footer {
  position: relative;
  overflow: hidden;
  padding-top: 78px;
  background: linear-gradient(180deg, rgba(4, 3, 3, .55), rgba(4, 3, 3, .78));
  color: var(--fk-text-muted);
}
:root[data-theme="light"] .fk-footer {
  background: linear-gradient(180deg, rgba(243, 237, 227, .55), rgba(236, 227, 211, .80));
}

.fk-footer__topline {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--fk-accent) 16%, var(--fk-accent) 84%, transparent);
}
/* Painted, not blurred — see the note on .fk-page__glow in pages.css. This one
   is on every page, and at 900x520 it was the single largest blur buffer on the
   site. Box grown by 2x the old 150px radius so the falloff covers the same
   ground the bleed did. */
.fk-footer__glow {
  position: absolute; bottom: -390px; left: 50%; transform: translateX(-50%);
  width: min(1200px, calc(100% + 300px)); height: 820px;
  background: radial-gradient(ellipse closest-side at 50% 50%,
    rgba(251, 83, 0, .13) 0%,
    rgba(251, 83, 0, .118) 18%,
    rgba(251, 83, 0, .092) 34%,
    rgba(251, 83, 0, .058) 50%,
    rgba(251, 83, 0, .031) 64%,
    rgba(251, 83, 0, .014) 78%,
    rgba(251, 83, 0, .004) 90%,
    transparent 100%);
  pointer-events: none;
}

.fk-footer__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1.05fr 1fr;
  gap: 56px;
}

/* Brand column */
.fk-footer__logo { display: flex; align-items: center; gap: 16px; }
/* See the note on .fk-logo__img — same height-driven sizing. */
.fk-footer__img { height: 52px; width: auto; max-width: 240px; object-fit: contain; }
.fk-footer__mark { font-family: var(--fk-font-display); font-weight: 700; font-size: 48px; line-height: 1; color: var(--fk-accent); }
.fk-footer__word { font-size: 22px; font-weight: 800; letter-spacing: 5px; color: var(--fk-heading); }
.fk-footer__tagline { margin: 22px 0 0; max-width: 320px; font-size: 15px; line-height: 1.65; color: var(--fk-text-muted); text-wrap: pretty; }
.fk-footer__socials { display: flex; gap: 12px; margin-top: 22px; }

/* Section headings */
.fk-footer__heading { margin-bottom: 24px; }

/* Nav column — the same named groups the header overlay renders.
   Two group columns inside the footer's own middle column, so four groups sit
   as a 2x2 block rather than one long list. */
.fk-footer__nav {
  display: grid;
  /* max-content so a long entry like "Wszystkie kawiarnie" keeps its own line;
     minmax(0, …) still lets the column shrink rather than overflow when a
     translation runs longer than the space allows. */
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 26px clamp(26px, 2.6vw, 44px);
  align-content: start;
}
/* The "NAVIGATION" kicker labels the whole column, so it spans both groups. */
.fk-footer__nav > .fk-footer__heading { grid-column: 1 / -1; }

.fk-footer__group-title {
  margin-bottom: 13px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--fk-text-dim);
}

.fk-footer__menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 11px;
}
.fk-footer__menu a { font-size: 15px; font-weight: 600; letter-spacing: .5px; color: var(--fk-text); opacity: .82; }
.fk-footer__menu a:hover { color: var(--fk-accent); opacity: 1; }
.fk-footer__menu .current-menu-item > a { color: var(--fk-accent); opacity: 1; }

/* Contacts column */
.fk-footer__contacts { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.fk-footer__phone { font-size: 30px; font-weight: 800; letter-spacing: .5px; color: var(--fk-heading); white-space: nowrap; }
.fk-footer__phone:hover { color: var(--fk-accent); }
.fk-footer__email { font-size: 16px; font-weight: 600; color: var(--fk-text-muted); }
.fk-footer__email:hover { color: var(--fk-accent); }
.fk-footer__address { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--fk-text-dim); }
.fk-footer__cta { margin-top: 8px; letter-spacing: 1.5px; }

/* Faded wordmark */
.fk-footer__watermark {
  position: relative;
  margin-top: 40px;
  text-align: center;
  font-size: clamp(56px, 19vw, 190px);
  font-weight: 800; line-height: 1; letter-spacing: 2px; white-space: nowrap;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  pointer-events: none;
}
:root[data-theme="light"] .fk-footer__watermark {
  background: linear-gradient(180deg, rgba(26,21,18,.08), rgba(26,21,18,0) 92%);
  -webkit-background-clip: text; background-clip: text;
}

/* Bottom bar */
.fk-footer__bar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border-top: 1px solid var(--fk-border);
  padding-block: 22px;
  margin-top: 40px;
}
.fk-footer--no-wm .fk-footer__bar { margin-top: 64px; }
.fk-footer__copy { margin: 0; font-size: 13px; color: var(--fk-text-dim); }
.fk-footer__top { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; color: var(--fk-text-muted); }
.fk-footer__top:hover { color: var(--fk-accent); }
.fk-footer__arrow {
  width: 8px; height: 8px; margin-bottom: 3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-135deg);
}

/* Responsive */
@media (max-width: 900px) {
  .fk-footer__inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
  .fk-footer { padding-top: 52px; }
  .fk-footer__bar { flex-direction: column; align-items: flex-start; gap: 14px; }
}