/*
 * footer.css
 * ReyBelen Standalone Theme — Footer
 *
 * Authority: REYBELEN-COMPONENT-BLUEPRINT-SYSTEM.md §12
 *            REYBELEN-ARCHITECTURAL-AMENDMENTS.md AM-10 (footer tagline copy)
 *
 * Owns: .rb-footer shell, outer section layout, tagline block (both lines),
 *       footer nav, bottom bar, copyright.
 *
 * Surface: --rb-navy-mid (footer body), --rb-navy (bottom bar).
 * Two-tier dark structure reads as one dark section from outside the footer.
 *
 * Does not own: .rb-btn (components.css), homepage sections (sections.css),
 *               CTA strip (components.css), @media rules (responsive.css).
 */


/* ── Footer: Shell ───────────────────────────────────────────────────────── */

.rb-footer {
  width: 100%;
}


/* ── Footer: Outer Body ──────────────────────────────────────────────────── */

.rb-footer__outer {
  background-color: var(--rb-navy-mid);
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-6);
}


/* ── Footer: Grid ────────────────────────────────────────────────────────── */

.rb-footer__grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}


/* ── Footer: Tagline ─────────────────────────────────────────────────────── */

/*
 * Left column. Editorial statement in Fraunces 300 italic.
 * Two lines: line 1 at near-white, line 2 at --rb-cognac.
 * AM-10 governs tagline copy: "Marketing aligned with business growth."
 * CSS styles the containers — copy is hardcoded in footer.php.
 */

.rb-footer__tagline {
  max-width: 600px;
}

.rb-footer__line1,
.rb-footer__line2 {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.15;
  margin: 0;
  padding: 0;
}

.rb-footer__line1 {
  color: rgba(255, 255, 255, 0.92);
}

.rb-footer__line2 {
  color: var(--rb-cognac);
  margin-top: var(--sp-1);
}


/* ── Footer: Navigation ──────────────────────────────────────────────────── */

/*
 * Right column. Stacked DM Mono links.
 * No underline default or hover. Opacity increases on hover.
 */

.rb-footer__nav {
  flex-shrink: 0;
}

.rb-footer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rb-footer__nav a {
  font-family: var(--rb-font-mono);
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 150ms ease;
  display: block;
}

.rb-footer__nav a:hover {
  color: #FFFFFF;
}


/* ── Footer: Bottom Bar ──────────────────────────────────────────────────── */

/*
 * Darker than the footer body — --rb-navy vs --rb-navy-mid.
 * Creates a two-tier depth within the footer dark surface.
 */

.rb-footer__bottom {
  background-color: var(--rb-navy);
  padding-top: 20px;
  padding-bottom: 20px;
}

.rb-footer__bottom .rb-container {
  display: flex;
  align-items: center;
}


/* ── Footer: Copyright ───────────────────────────────────────────────────── */

.rb-footer__copyright {
  font-family: var(--rb-font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.40);
}