/* ============================================================
   GO IGNITE — MODULAR FOOTER COMPONENT
   footer.css  |  v1.1.0
   All selectors scoped to [data-gi-ft] — zero global bleed.
   ============================================================ */

/* ── Root tokens ─────────────────────────────────────────── */
[data-gi-ft] {
  --ft-bg          : hsl(222 40% 6%);
  --ft-border      : rgba(255, 255, 255, 0.08);
  --ft-border-soft : rgba(255, 255, 255, 0.06);
  --ft-fg          : #ffffff;
  --ft-muted       : hsl(220 14% 65%);
  --ft-primary     : hsl(161 100% 45%);
  --ft-font        : 'Inter', ui-sans-serif, system-ui, sans-serif;
  --ft-radius      : 0.5rem;
  --ft-trans       : 0.2s ease;
}

/* ── Footer shell ────────────────────────────────────────── */
[data-gi-ft].gi-ft-root {
  background    : var(--ft-bg);
  border-top    : 1px solid var(--ft-border);
  padding       : 4rem 0 2rem;
  font-family   : var(--ft-font);
  color         : var(--ft-muted);
  box-sizing    : border-box;
  position      : relative;
  z-index       : 1;
}

[data-gi-ft] *,
[data-gi-ft] *::before,
[data-gi-ft] *::after {
  box-sizing : border-box;
}

[data-gi-ft] .gi-ft-container {
  max-width : 1280px;
  margin    : 0 auto;
  padding   : 0 1rem;
}

@media (min-width: 640px) {
  [data-gi-ft] .gi-ft-container { padding: 0 1.5rem; }
}
@media (min-width: 1024px) {
  [data-gi-ft] .gi-ft-container { padding: 0 2rem; }
}

/* ── Top grid ────────────────────────────────────────────── */

/* Mobile: 2-column grid — brand full-width, link cols side by side */
[data-gi-ft] .gi-ft-grid {
  display               : grid;
  grid-template-columns : repeat(2, minmax(0, 1fr));
  gap                   : 2rem;
  margin-bottom         : 2.5rem;
}

/* Tablet / Desktop: 4 equal columns — ALL on the same row */
@media (min-width: 768px) {
  [data-gi-ft] .gi-ft-grid {
    grid-template-columns : repeat(4, minmax(0, 1fr));
    gap                   : 2.5rem;
    margin-bottom         : 3rem;
    align-items           : start; /* top-align all columns */
  }
}

/* ── Brand column ────────────────────────────────────────── */

/* Mobile: brand spans both columns for a clean full-width look */
[data-gi-ft] .gi-ft-brand {
  grid-column : span 2;
}

/* Desktop: brand takes exactly 1 of 4 columns — same row as the rest */
@media (min-width: 768px) {
  [data-gi-ft] .gi-ft-brand {
    grid-column : span 1;
  }
}

[data-gi-ft] .gi-ft-brand-link {
  display         : inline-flex;
  align-items     : center;
  gap             : 0.5rem;
  margin-bottom   : 1.25rem;
  text-decoration : none;
}

[data-gi-ft] .gi-ft-brand-link img {
  width      : 180px;
  height     : auto;
  max-height : 50px;
  object-fit : contain;
  display    : block;
}

@media (max-width: 480px) {
  [data-gi-ft] .gi-ft-brand-link img { width: 150px; }
}

[data-gi-ft] .gi-ft-description {
  color       : var(--ft-muted);
  max-width   : 22rem;
  margin      : 0 0 1rem;
  line-height : 1.65;
  font-size   : 0.9375rem;
}

/* ── Link columns ────────────────────────────────────────── */
[data-gi-ft] .gi-ft-col-title {
  color          : var(--ft-fg);
  font-weight    : 600;
  font-size      : 1rem;
  margin         : 0 0 1rem;
  letter-spacing : -0.01em;
}

[data-gi-ft] .gi-ft-list {
  list-style     : none;
  padding        : 0;
  margin         : 0;
  display        : flex;
  flex-direction : column;
  gap            : 0.75rem;
}

[data-gi-ft] .gi-ft-list a {
  display         : inline-block;
  color           : var(--ft-muted);
  text-decoration : none;
  font-size       : 0.9375rem;
  line-height     : 1.4;
  transition      : color var(--ft-trans), transform var(--ft-trans);
}

[data-gi-ft] .gi-ft-list a:hover {
  color     : var(--ft-primary);
  transform : translateX(2px);
}

/* ── Bottom row ──────────────────────────────────────────── */
[data-gi-ft] .gi-ft-bottom {
  border-top      : 1px solid rgba(255, 255, 255, 0.1);
  padding-top     : 2rem;
  display         : flex;
  flex-direction  : column;
  justify-content : space-between;
  align-items     : center;
  gap             : 1rem;
}

@media (min-width: 768px) {
  [data-gi-ft] .gi-ft-bottom { flex-direction: row; }
}

[data-gi-ft] .gi-ft-copy {
  color      : var(--ft-muted);
  font-size  : 0.875rem;
  margin     : 0;
  text-align : center;
}
@media (min-width: 768px) {
  [data-gi-ft] .gi-ft-copy { text-align: left; }
}

[data-gi-ft] .gi-ft-legal {
  display         : flex;
  flex-wrap       : wrap;
  gap             : 1rem;
  justify-content : center;
}

[data-gi-ft] .gi-ft-legal a {
  color           : var(--ft-muted);
  font-size       : 0.875rem;
  text-decoration : none;
  transition      : color var(--ft-trans);
}

[data-gi-ft] .gi-ft-legal a:hover {
  color : var(--ft-fg);
}

/* ── Optional decorative gradient bar at the top ─────────── */
[data-gi-ft].gi-ft-root::before {
  content    : '';
  position   : absolute;
  top        : 0;
  left       : 0;
  right      : 0;
  height     : 1px;
  background : linear-gradient(
    to right,
    transparent 0%,
    hsl(161 100% 45% / 0.4) 30%,
    hsl(322 100% 54% / 0.4) 70%,
    transparent 100%
  );
  pointer-events : none;
}

/* ── GHL Chat widget bubble polish (defensive overrides) ─── */
.LeadConnector-chat-widget,
[id^="lc-"][class*="chat"],
iframe[src*="leadconnectorhq.com"][src*="chat-widget"] {
  z-index : 9990 !important;
}
