/**
 * CF Footer — six-mode framework per CF_MODULE_GUIDE §8.
 *
 * Modes:
 *   .cf-footer--light-sky    Briefing-grade default
 *   .cf-footer--light-slate  Analytical / operational
 *   .cf-footer--light-paper  Editorial / long-form (white bg) — natural footer default
 *   .cf-footer--light-mint   Positive outcome / growth
 *   .cf-footer--dark-navy    Brand authority anchor
 *   .cf-footer--dark-ops     GSOC / command center
 *
 * Override variables (semantic roles):
 *   --cffo-bg        section background
 *   --cffo-text      body text
 *   --cffo-heading   headings + bold inline text
 *   --cffo-link      anchor color
 *   --cffo-link-hover anchor hover color
 *   --cffo-line      divider rule color
 *
 * Layout:
 *   Top row:    4-column grid on desktop (logo | col1 | col2 | col3),
 *               single column on mobile.
 *   Bottom row: 2-column flex (left | right) — left aligns left,
 *               right aligns right.
 *
 * Full-bleed: footer escapes any constrained ancestor and spans the
 * full viewport width.
 */

.cf-footer {
  /* Base defaults = light_paper. Mode classes below override. */
  --cffo-bg: var(--cf-white);
  --cffo-text: var(--cf-blue-gray);
  --cffo-heading: var(--cf-navy);
  --cffo-link: var(--cf-navy);
  --cffo-link-hover: var(--cf-sky-mid);
  --cffo-line: var(--cf-blue-gray-tint);

  /* Full-bleed: break out of constrained ancestors. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  margin-bottom: 0;
  background-color: var(--cffo-bg);
  color: var(--cffo-text);
  padding: 3rem 1.5rem;
  font-family: var(--cf-font-stack);
  box-sizing: border-box;
}

.cf-footer *,
.cf-footer *::before,
.cf-footer *::after {
  box-sizing: inherit;
}

/* ── Light: Sky ─────────────────────────────────────────────────────── */
.cf-footer--light-sky {
  --cffo-bg: var(--cf-sky-light);
  --cffo-text: var(--cf-blue-gray);
  --cffo-heading: var(--cf-navy);
  --cffo-link: var(--cf-navy);
  --cffo-link-hover: var(--cf-sky-mid);
  --cffo-line: var(--cf-blue-gray-tint);
}

/* ── Light: Slate ───────────────────────────────────────────────────── */
.cf-footer--light-slate {
  --cffo-bg: var(--cf-blue-gray-lightest);
  --cffo-text: var(--cf-blue-gray);
  --cffo-heading: var(--cf-navy);
  --cffo-link: var(--cf-navy);
  --cffo-link-hover: var(--cf-blue-gray);
  --cffo-line: var(--cf-blue-gray-tint);
}

/* ── Light: Paper (footer default) ──────────────────────────────────── */
.cf-footer--light-paper {
  --cffo-bg: var(--cf-white);
  --cffo-text: var(--cf-blue-gray);
  --cffo-heading: var(--cf-navy);
  --cffo-link: var(--cf-navy);
  --cffo-link-hover: var(--cf-sky-mid);
  --cffo-line: var(--cf-blue-gray-tint);
}

/* ── Light: Mint ────────────────────────────────────────────────────── */
.cf-footer--light-mint {
  --cffo-bg: var(--cf-apple-pale);
  --cffo-text: var(--cf-blue-gray);
  --cffo-heading: var(--cf-navy);
  --cffo-link: var(--cf-navy);
  --cffo-link-hover: var(--cf-leaf);
  --cffo-line: var(--cf-blue-gray-tint);
}

/* ── Dark: Navy ─────────────────────────────────────────────────────── */
.cf-footer--dark-navy {
  --cffo-bg: var(--cf-navy);
  --cffo-text: color-mix(in srgb, var(--cf-navy-lightest) 75%, transparent);
  --cffo-heading: var(--cf-navy-lightest);
  --cffo-link: var(--cf-sky);
  --cffo-link-hover: var(--cf-navy-lightest);
  --cffo-line: rgba(255, 255, 255, 0.10);
}

/* ── Dark: Ops ──────────────────────────────────────────────────────── */
.cf-footer--dark-ops {
  --cffo-bg: var(--cf-slate-section);
  --cffo-text: var(--cf-blue-gray-soft);
  --cffo-heading: var(--cf-blue-gray-tint);
  --cffo-link: var(--cf-golden-orange);
  --cffo-link-hover: var(--cf-blue-gray-tint);
  --cffo-line: rgba(255, 255, 255, 0.08);
}

/* ── Inner container ────────────────────────────────────────────────── */
.cf-footer__inner {
  max-width: var(--cffo-max-width, 1200px);
  margin: 0 auto;
}

/* ── Logo ───────────────────────────────────────────────────────────── */
.cf-footer__logo {
  margin-bottom: 1.5rem;
}

.cf-footer__logo img {
  display: block;
  max-width: 240px;
  height: auto;
}

/* ── Divider ────────────────────────────────────────────────────────── */
.cf-footer__divider {
  border: 0;
  border-top: 1px solid var(--cffo-line);
  margin: 2rem 0 1.5rem;
}

/* ── Top row: logo + 3 columns ──────────────────────────────────────── */
.cf-footer__row--top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .cf-footer__row--top {
    /* Logo column shrinks to fit; 3 content columns share the rest. */
    grid-template-columns: auto repeat(3, 1fr);
    gap: 2.5rem;
  }
}

/* ── Bottom row: left + right ───────────────────────────────────────── */
.cf-footer__row--bottom {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cf-footer__col--left {
  text-align: left;
}

.cf-footer__col--right {
  text-align: left;
}

@media (min-width: 1024px) {
  .cf-footer__row--bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
  }
  .cf-footer__col--right {
    text-align: right;
  }
}

/* ── Column content ─────────────────────────────────────────────────── */
.cf-footer__col {
  min-width: 0;
}

.cf-footer__col h1,
.cf-footer__col h2,
.cf-footer__col h3,
.cf-footer__col h4,
.cf-footer__col h5,
.cf-footer__col h6 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  color: var(--cffo-heading);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cf-footer__col p {
  margin: 0 0 0.5rem;
  line-height: 1.5;
  font-size: 0.9rem;
}

.cf-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cf-footer__col li {
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
}

.cf-footer__col a {
  color: var(--cffo-link);
  text-decoration: none;
  transition: color 0.15s ease;
}

.cf-footer__col a:hover,
.cf-footer__col a:focus {
  color: var(--cffo-link-hover);
}