/* /assets/css/footer.css
   Restored / refined — compatible with .container > .col OR .container > .footer-grid > .col
   Keeps the denser older look: tighter links, stronger headings, balanced gaps.
   Date: 2025-11-06
*/

/* Skeleton placeholder for footer while include loads */
.skeleton-footer {
  background: linear-gradient(90deg,#000,#0b0710);
  opacity: 0.05;
  min-height: 120px;
  width: 100%;
}

/* ===========================
   Footer Styles (Toolsyte) - restored
   =========================== */

.site-footer {
  background: #000;
  color: #fff;
  padding: 36px 20px 20px;
  box-sizing: border-box;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  flex-shrink: 0;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0));
}

/* Container: keep it simple and non-destructive.
   If your markup uses <nav class="footer-grid"> inside container, that grid will be used.
   Otherwise, the container will act as the grid host for direct .col children.
*/
.site-footer .container {
  max-width: 1100px;
  margin: 0 auto;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
}

/* If you use a .footer-grid wrapper (recommended for semantic nav), it becomes the grid host */
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px; /* slightly tighter than original 32px for denser layout */
  align-items: start;
  box-sizing: border-box;
  margin-bottom: 18px;
}

/* Fallback: if .col are direct children of .container, make container the grid */
.site-footer .container > .col {
  /* When .footer-grid is present, it will be used. If not, you can enable container grid
     by uncommenting the following block (only enable if you DO NOT use footer-grid wrapper):
*/
/*
.site-footer .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
*/
}

/* Column */
.site-footer .col {
  min-width: 0;
}

/* Headings: darker/heavier to match previous screenshot */
.site-footer h4 {
  margin: 0 0 20px;     /* smaller bottom margin for tighter grouping */
  font-size: 18px;      
  color: #fff;
  font-weight: 800;     /* stronger weight */
  letter-spacing: 0.2px;
}

/* Text & links */
.site-footer p,
.site-footer a {
  color: #cbd5e1;
  text-decoration: none;
  display: block;
  margin: 6px 0;
  line-height: 1.45;
  font-size: 15px;
}

/* Email emphasis */
.site-footer a[href^="mailto:"] {
  font-weight: 800;
  color: #fff;
}

/* Compact link spacing for Tools / Legal / Explore columns (restored) */
.site-footer .col[aria-label="Tools"] a,
.site-footer .col[aria-label="Legal"] a,
.site-footer .col[aria-label="Explore"] a {
  margin: 2px 0;       /* tighter vertical spacing between links */
  padding: 0;
  line-height: 0.5;    /* tight but readable */
  font-size: 15px;
}

/* Ensure these columns stack their links top-to-bottom */
.site-footer .col[aria-label="Tools"],
.site-footer .col[aria-label="Legal"],
.site-footer .col[aria-label="Explore"] {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Keep the first (contact) column readable */
.site-footer .col:first-child p {
  margin: 4px 0;
  line-height: 1.4;
}

/* Footer bottom strip */
.site-footer .footer-bottom {
  grid-column: 1 / -1;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
}

/* ===== Responsive: 4 -> 2 -> 1 columns ===== */
@media (max-width: 1100px) {
  /* If you use footer-grid as grid host, this adjusts it. If not, you may need to enable container grid fallback above. */
  .site-footer .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .site-footer h4 { font-size: 17px; }
  .site-footer p, .site-footer a { font-size: 14px; }
}

@media (max-width: 600px) {
  .site-footer {
    padding: 28px 16px 20px;
  }
  .site-footer .footer-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .site-footer .col[aria-label="Tools"] a,
  .site-footer .col[aria-label="Legal"] a,
  .site-footer .col[aria-label="Explore"] a {
    margin: 3px 0;
    line-height: 0.5;
  }
  .site-footer h4 { font-size: 16px; }
  .site-footer p, .site-footer a {
    font-size: 14px;
    color: #9ca3af;
  }
  .site-footer .footer-bottom {
    margin-top: 22px;
    padding-top: 14px;
    font-size: 13px;
  }
}

/* Safety defaults */
.site-footer .col, .site-footer .col * {
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}