/**
 * cs-footer.css
 *
 * CapeStart dark footer: gradient hairline, drifting grid, oversized watermark,
 * five-column link grid, social pills and office list.
 *
 * Integration notes:
 * - Root class is `.cs-footer`, not `.footer`. The theme's own fallback footer
 *   uses `.site-footer`, so there was no direct clash, but `.footer` is generic
 *   enough that a plugin or Elementor widget could claim it. Every selector here
 *   is scoped under `.cs-footer` so nothing leaks either way.
 * - Tokens come from cs-tokens.css. The mockup referenced bare `--accent`,
 *   which is a real theme token; unprefixed it would have pulled the theme's
 *   amber into the footer's cyan accents.
 * - Keyframes are prefixed `cs` for the same reason: `gridDrift` and `markDrift`
 *   are plausible names for a plugin to define.
 * - The mockup's `.f-tag` rule and its `gradShimmer` keyframe are dropped: no
 *   element in the markup ever used them.
 * - The reveal animation replaces the mockup's GSAP + ScrollTrigger dependency
 *   with an IntersectionObserver in cs-footer.js. The pre-hidden state is gated
 *   behind `.cs-reveal-ready`, which that script adds, so with JS disabled the
 *   footer renders fully visible instead of staying blank.
 *
 * @package ElementorStarter
 */

.cs-footer {
  position: relative; width: 100%; max-width: 100%; margin: 0 auto;
  border-radius: 0; overflow: hidden; isolation: isolate; background: #0a1424; color: #eaf2ff;
  padding: clamp(56px, 6vw, 84px) clamp(28px, 5vw, 72px) clamp(32px, 4vw, 46px);
}
.cs-footer::before { content: ""; position: absolute; top: 0; left: 8%; width: 84%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cs-blue), var(--cs-accent), transparent); box-shadow: 0 0 16px rgba(97,214,255,0.5); }
.cs-footer-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cs-footer-bg::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(800px 400px at 85% 0%, rgba(20,139,255,0.16), transparent 60%), linear-gradient(180deg, #0b1526, #081120); }
.cs-footer-grid-l { position: absolute; inset: 0;
  background-image: linear-gradient(rgba(97,214,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(97,214,255,0.05) 1px, transparent 1px);
  background-size: 62px 62px; -webkit-mask-image: radial-gradient(100% 100% at 80% 0%, #000, transparent 72%); mask-image: radial-gradient(100% 100% at 80% 0%, #000, transparent 72%);
  animation: csGridDrift 28s linear infinite; }
.cs-footer-mark { position: absolute; bottom: -6%; left: 50%; font-family: var(--cs-serif); font-weight: 600; font-size: 22vw;
  color: rgba(255,255,255,0.022); white-space: nowrap; pointer-events: none; letter-spacing: -0.02em; animation: csMarkDrift 34s ease-in-out infinite; }
@keyframes csMarkDrift { 0%,100% { transform: translateX(-53%); } 50% { transform: translateX(-47%); } }

.cs-footer-inner { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; }
.cs-footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
.cs-footer .f-logo { display: inline-flex; align-items: center; text-decoration: none; }
/* footer is dark, so render the logo in white to stay legible */
.cs-footer .f-logo-img { height: 34px; width: auto; display: block; filter: brightness(0) invert(1); transition: transform 0.4s var(--cs-ease); }
.cs-footer .f-logo:hover .f-logo-img { transform: scale(1.04); }
.cs-footer .f-blurb { font-size: 15px; line-height: 1.6; color: #9fb2cc; margin-top: 20px; max-width: 34ch; }

.cs-footer .f-col h4 { font-family: var(--cs-font-sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #6a7d97; margin-bottom: 18px; }
.cs-footer .f-col ul { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.cs-footer .f-link { position: relative; display: inline-block; color: #9fb2cc; text-decoration: none; font-size: 15px; transition: color 0.3s var(--cs-ease), transform 0.3s var(--cs-ease); }
.cs-footer .f-link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; border-radius: 1px;
  background: linear-gradient(90deg, var(--cs-blue), var(--cs-accent)); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--cs-ease); }
.cs-footer .f-link:hover { color: #fff; transform: translateX(5px); }
.cs-footer .f-link:hover::after { transform: scaleX(1); }

/* social icons — ghost circles that fill with the brand gradient on hover */
.cs-footer .f-social { display: flex; gap: 10px; margin-top: 18px; }
.cs-footer .f-social a {
  position: relative; overflow: hidden; isolation: isolate;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  color: #9fb2cc; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--cs-ease);
}
.cs-footer .f-social a::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--cs-grad-cta); opacity: 0; transition: opacity 0.3s ease;
}
.cs-footer .f-social a:hover { color: #fff; border-color: transparent; transform: translateY(-3px); }
.cs-footer .f-social a:hover::before { opacity: 1; }
.cs-footer .f-social svg { width: 17px; height: 17px; fill: currentColor; }

/* office locations — city on top, short address muted beneath */
.cs-footer .f-addr { display: flex; gap: 10px; }
.cs-footer .f-addr svg { width: 15px; height: 15px; flex: none; margin-top: 3px; stroke: var(--cs-accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cs-footer .f-addr b { display: block; font-family: var(--cs-font-sans); font-weight: 600; font-size: 14px; color: #dfe9f7; margin-bottom: 2px;     width: 85%;}
.cs-footer .f-addr span { display: block; font-size: 13px; line-height: 1.5; color: #8ea3c0; }

.cs-footer-divider { height: 1px; background: rgba(255,255,255,0.08); margin: clamp(36px, 5vw, 56px) 0 24px; }
.cs-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cs-footer-bottom p { font-family: var(--cs-font-sans); font-size: 12.5px; color: #6a7d97; }
.cs-footer-bottom .r { color: #8ea3c0; }

@media (max-width: 820px) {
/*   .cs-footer { border-radius: 32px; } */
  .cs-footer-top { grid-template-columns: 1fr 1fr; }
  .cs-footer .f-brand { grid-column: 1 / -1; }
	.cs-footer .f-addr b { width: 100%;}
}
@media (max-width: 520px) { .cs-footer-top { grid-template-columns: 1fr; } .cs-footer-bottom { flex-direction: column; align-items: flex-start; } }
@keyframes csGridDrift { to { background-position: 58px 58px; } }

/* ---------------------------------------------------------------------------
 * Scroll reveal (replaces GSAP ScrollTrigger)
 *
 * `.cs-reveal-ready` is added by cs-footer.js. Without JS the class is never
 * set, so these opacity:0 rules never apply and the content stays visible.
 * ------------------------------------------------------------------------- */

.cs-footer.cs-reveal-ready [data-ft],
.cs-footer.cs-reveal-ready .cs-footer-bottom p {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--cs-ease), transform 0.8s var(--cs-ease);
  transition-delay: var(--cs-reveal-delay, 0ms);
}
.cs-footer.cs-reveal-ready .cs-footer-bottom p { transform: translateY(16px); }

.cs-footer.cs-reveal-ready [data-ft].is-visible,
.cs-footer.cs-reveal-ready .cs-footer-bottom p.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------------------
 * Theme / WordPress integration
 * ------------------------------------------------------------------------- */

/* Scoped resets — the mockup relied on a global reset this theme does not have. */
.cs-footer ul { margin: 0; padding: 0; list-style: none; }
/*
 * The theme's typography.css sets `li { margin-bottom: var(--space-2) }`, which
 * stacked on top of the column's flex `gap` and visibly loosened every link
 * list. The columns space themselves with gap alone.
 */
.cs-footer li { margin: 0; }
.cs-footer p { margin: 0; }
.cs-footer h4 { margin: 0 0 18px; }
.cs-footer a { text-decoration: none; }
.cs-footer svg { display: block; }

/*
 * Set the typeface on the root so descendants inherit it.
 *
 * The mockup's `body` was Poppins, so elements that never declared a
 * font-family — the wordmark link, the footer's blurb, its link columns and the
 * office addresses — simply inherited it. In this theme `body` is `--font-body`
 * (Inter), so those same elements silently fell back to Inter while the ones
 * that *did* declare Poppins kept it. The result was one component rendering in
 * two typefaces. Declaring it here restores the mockup's inheritance.
 */
.cs-footer { font-family: var(--cs-font-sans); }

/*
 * Re-establish the mockup's base text metrics.
 *
 * This theme's body is fluid (`--font-size-base` clamps 16→18px) with a 1.65
 * line-height. The mockup was a flat 16px / 1.5. Every text element in this
 * component sets its own px font-size, so the inherited values only surface
 * through inline strut boxes — and there they were measurably wrong: at 1440px
 * the 18px strut made each footer list row 3px taller than designed, on top of
 * the 1.65 line-height adding another ~2px. Pinning both restores the intended
 * rhythm. Scoped, so the theme's fluid type is untouched everywhere else.
 */
.cs-footer { font-size: 16px; line-height: 1.5; }

/*
 * The theme's own footer carries `margin-top: var(--section-space)`. This one
 * is full-bleed and provides its own top padding, so it sits flush instead.
 */
.cs-footer { margin-top: 0; }

/* Keyboard focus, which the mockup never styled. */
.cs-footer :is(a, button):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(97, 214, 255, 0.55);
  border-radius: 4px;
}

@media print {
  .cs-footer { display: none !important; }
}

/*
 * Reduced motion: kill the ambient drift and the reveal, but never leave content
 * stuck at opacity:0 — the reveal targets are forced visible.
 */
@media (prefers-reduced-motion: reduce) {
  .cs-footer-grid-l,
  .cs-footer-mark { animation: none !important; }

  .cs-footer.cs-reveal-ready [data-ft],
  .cs-footer.cs-reveal-ready .cs-footer-bottom p {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}