/*
 * FIRMWAREFILE.UK — footer.css v1.1
 * Kadence Child Theme — loaded on ALL pages
 *
 * Changes from v1.0:
 *   • Popular Brands column removed → 3-col grid
 *   • All text colors significantly brighter (near-white)
 *
 * Sections:
 *  1. Footer tokens
 *  2. Wrap
 *  3. Main grid — 3 columns
 *  4. Brand column
 *  5. Link columns
 *  6. Bottom bar
 *  7. Responsive
 */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. FOOTER TOKENS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ff-footer {
  /* ── Brighter text palette ── */
  --text:       #eaf0f6;                   /* near-white — headings, strong text */
  --body:       rgba(234,240,246,.85);     /* body copy, descriptions */
  --link:       rgba(234,240,246,.78);     /* default link color */
  --link-hover: #4ec9d0;                   /* teal on hover */
  --label:      rgba(234,240,246,.55);     /* column headings, labels */
  --subtle:     rgba(234,240,246,.72);     /* bottom bar copy */
  --dim:        rgba(234,240,246,.35);     /* separators, dots */

  /* ── Surfaces ── */
  --bg:         #0a0f1e;
  --bg-low:     #060b14;
  --border:     rgba(255,255,255,.09);

  /* ── Accent ── */
  --acc:        #4ec9d0;
  --acc-h:      #8ee8ed;
  --acc-ring:   rgba(78,201,208,.22);

  /* ── Layout ── */
  --font-d: 'Outfit', system-ui, sans-serif;
  --font-b: 'Inter', 'Helvetica Neue', sans-serif;
  --tr:     .15s cubic-bezier(.16,1,.3,1);
  --wide:   1160px;
  --r:      4px;
  --r-md:   6px;

  background: var(--bg);
  color: var(--body);
  font-family: var(--font-b);
  font-size: .9rem;
  line-height: 1.6;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 24px 24px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. WRAP
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ff-ft-wrap {
  width: min(var(--wide), calc(100% - 40px));
  margin-inline: auto;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. MAIN GRID — 3 columns
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ff-ft-main {
  border-bottom: 1px solid var(--border);
}
.ff-ft-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;   /* Brand wide | Resources | Site */
  gap: 40px 64px;
  padding: 56px 0 48px;
  align-items: start;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. BRAND COLUMN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ff-ft-logo {
  display: inline-block;
  margin-bottom: 16px;
  text-decoration: none;
  opacity: 1;
  transition: opacity var(--tr);
}
.ff-ft-logo:hover { opacity: .78; }
.ff-ft-logo svg   { display: block; max-width: 100%; }

.ff-ft-desc {
  font-size: .9rem;
  line-height: 1.75;
  color: var(--body);              /* .85 opacity — clearly readable */
  max-width: 34ch;
  margin: 0 0 22px;
}

/* Sister site chips */
.ff-ft-sister-sites {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.ff-ft-sister-label {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--label);
  white-space: nowrap;
}
.ff-ft-sister-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: var(--r);
  border: 1px solid var(--acc-ring);
  color: var(--acc);
  font-size: .80rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--tr), border-color var(--tr), color var(--tr);
  white-space: nowrap;
}
.ff-ft-sister-link:hover {
  background: rgba(78,201,208,.12);
  border-color: rgba(78,201,208,.50);
  color: var(--acc-h);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. LINK COLUMNS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ff-ft-heading {
  font-family: var(--font-d);
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--label);             /* .55 — clearly readable section labels */
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.ff-ft-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ff-ft-links li { margin: 0; }

.ff-ft-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--r);
  color: var(--link);              /* .78 — much more visible than before */
  text-decoration: none;
  font-size: .9rem;
  line-height: 1.4;
  transition: background var(--tr), color var(--tr);
}
.ff-ft-links a:hover {
  background: rgba(78,201,208,.08);
  color: var(--acc);
}

/* External link icon */
.ff-ft-ext-icon {
  flex-shrink: 0;
  opacity: .55;
  margin-left: auto;
  transition: opacity var(--tr);
}
.ff-ft-links a:hover .ff-ft-ext-icon { opacity: 1; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. BOTTOM BAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ff-ft-bottom {
  background: var(--bg-low);
  background-image: none;
  padding: 16px 0;
}

.ff-ft-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ff-ft-copy {
  font-size: .80rem;
  color: var(--subtle);            /* .45 — readable without competing */
  margin: 0;
  max-width: 64ch;
  line-height: 1.65;
}
.ff-ft-copy a {
  color: rgba(234,240,246,.68);    /* brighter than surrounding copy */
  text-decoration: none;
  font-weight: 600;
  transition: color var(--tr);
}
.ff-ft-copy a:hover { color: var(--acc); }

.ff-ft-legal-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.ff-ft-legal-nav span {
  color: var(--dim);
  font-size: .80rem;
}
.ff-ft-legal-nav a {
  font-size: .80rem;
  font-weight: 600;
  color: rgba(234,240,246,.65);    /* clearly visible, brighter than before */
  text-decoration: none;
  transition: color var(--tr);
  white-space: nowrap;
}
.ff-ft-legal-nav a:hover { color: var(--acc); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Tablet — brand full-width top, then 2 cols */
@media (max-width: 860px) {
  .ff-ft-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 40px;
    padding: 40px 0 36px;
  }
  .ff-ft-col--brand {
    grid-column: 1 / -1;
    max-width: 480px;
  }
  .ff-ft-desc { max-width: 52ch; }
}

/* Mobile — single column */
@media (max-width: 540px) {
  .ff-ft-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 0 28px;
  }
  .ff-ft-col--brand { grid-column: auto; max-width: none; }
  .ff-ft-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .ff-ft-legal-nav { flex-wrap: wrap; }
}