/* Layout helpers: make the whole page a column so footer naturally
   sits at the bottom when content is short, but follows content when
   the page is taller. This avoids fixed positioning and overlap. */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* ensure full viewport height */
  margin: 0; /* avoid unexpected whitespace */
}

/* Generic main/content selectors -- make the main content area flexible.
   Templates may already have <main> or .content wrappers; include common
   class names so this works across pages without editing templates. */
main, .main, .content, .page-content, .content-wrap {
  flex: 1 0 auto;
}

.footer-basic {
  /* let content determine height (avoid fixed height causing overlap) */
  padding: 30px 0;
  background-color: #1f2629; /* darker footer to match site theme */
  color: #ddd;
  width: 100%;
  position: static; /* not fixed; follows document flow */
  text-align: center;
  margin-top: auto; /* push to bottom in flex layout */
}

/* Ensure page content isn't hidden behind the fixed footer for pages
   that don't set a bottom-safe area. The value should be >= footer height. */
/* body padding is set dynamically by the footer script to match the footer height */

.footer-basic ul {
  padding: 0;
  list-style: none;
  text-align: center;
  margin-bottom: 0;
}

.footer-basic li {
  display: inline-block;
  padding: 0 10px;
  margin-bottom: 10px;
}

.footer-basic ul a {
  color: #4b4c4d;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.3s ease-in-out;
}

.footer-basic ul a:hover {
  opacity: 1;
}

.footer-basic .social {
  text-align: center;
  margin-bottom: 20px;
}

.footer-basic .social > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.08);
  margin: 0 8px;
  color: #ddd;
  opacity: 0.85;
  transition: opacity 0.18s ease-in-out, transform 0.15s ease;
}

.footer-basic .social > a:hover {
  opacity: 0.9;
}

.footer-basic .copyright {
  margin-top: 15px;
  font-size: 13px;
  color: #aaa;
  margin-bottom: 0;
}

/* Small screens: compact padding and stacked links */
@media (max-width: 600px) {
  .footer-basic {
    padding: 18px 12px;
  }

  .footer-basic li {
    display: block;
    padding: 6px 0;
  }
}