/* ==================================================
   FOOTER CONTAINER
   ================================================== */

.site-footer {
  width: 100%;
}

/* ==================================================
   FOOTER MAIN SECTION
   ================================================== */

.site-footer__main {
  background-color: var(--footer-bg, var(--color-gray-800));
  color: var(--footer-color, var(--color-gray-100));
  border-bottom: var(--footer-border, 1px solid var(--color-gray-700));
}

.site-footer__main .site-footer__inner {
  max-width: var(--layout-width);
  margin-inline: auto;
  padding: var(--space-2xl) var(--gutter);
}

/* ==================================================
   FOOTER WIDGETS - AUTO COLUMNS
   ================================================== */

.footer-widgets {
  display: grid;
  gap: var(--space-2xl);
}

/* Auto-fit columns based on how many are active */
.footer-widgets--cols-1 {
  grid-template-columns: 1fr;
}

.footer-widgets--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.footer-widgets--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.footer-widgets--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Widget areas */
.footer-widget-area {
  min-width: 0; /* Prevent grid blowout */
}

/* ==================================================
   FOOTER WIDGET TITLES
   ================================================== */

/* Target first heading as widget title */
.footer-widget-area > *:first-child h1:first-of-type,
.footer-widget-area > *:first-child h2:first-of-type,
.footer-widget-area > *:first-child h3:first-of-type,
.footer-widget-area > *:first-child h4:first-of-type,
.footer-widget-area > *:first-child h5:first-of-type,
.footer-widget-area > *:first-child h6:first-of-type {
  margin-top: 0;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom-width: var(--footer-widget-title-border-width, 2px);
  border-bottom-style: var(--footer-widget-title-border-style, solid);
  border-bottom-color: var(--footer-widget-title-border-color, var(--color-primary));
  font-weight: var(--footer-widget-title-weight, var(--font-weight-semibold));
  font-family: var(--footer-widget-title-font-family, inherit);
  font-size: var(--footer-widget-title-font-size, inherit);
  letter-spacing: var(--footer-widget-title-letter-spacing, normal);
  line-height: normal;
  color: var(--footer-widget-title-color, var(--color-gray-50));
  text-shadow: var(--footer-widget-title-text-shadow, none);
  -webkit-text-stroke: var(--footer-widget-title-stroke-width, 0) var(--footer-widget-title-stroke-color, transparent);
  text-stroke: var(--footer-widget-title-stroke-width, 0) var(--footer-widget-title-stroke-color, transparent);
}

/* Widget content styling */
/* Applied at the container level (not just p) so these inherit down
   to whatever's actually inside — lists, links, spans, anything —
   without needing a selector per tag. font-family/font-size/color/
   line-height are all naturally inheritable CSS properties, so any
   descendant with no more specific rule of its own picks these up
   automatically. The widget title heading (its own more specific
   selector below) and links (.footer-widget-area a, its own color)
   still correctly override this where they should. */
.footer-widget-area,
.footer-widget-area p,
.footer-widget-area ul,
.footer-widget-area ol,
.footer-widget-area li,
.footer-widget-area address,
.footer-widget-area span,
.footer-widget-area div {
  font-family: var(--footer-widget-text-font-family, inherit) !important;
  font-size: var(--footer-widget-text-font-size, inherit) !important;
  color: var(--footer-widget-text-color, var(--color-gray-300)) !important;
  line-height: var(--footer-widget-text-line-height, var(--line-height-relaxed)) !important;
}

.footer-widget-area a {
  color: var(--footer-link-color, var(--color-gray-200));
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-widget-area a:hover {
  color: var(--footer-link-hover-color, var(--color-primary-light));
}

/* Lists in footer */
.footer-widget-area ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-widget-area ul li {
  margin-bottom: var(--space-sm);
}








/* ==================================================
   FOOTER BOTTOM SECTION (INDEPENDENT)
   ================================================== */

.site-footer__bottom {
  width: 100%;
  background-color: var(--footer-bottom-bg, var(--color-gray-900));
  color: var(--footer-bottom-color, var(--color-gray-400));
  font-family: var(--footer-bottom-font-family, inherit);
  font-size: var(--footer-bottom-font-size, var(--font-size-sm));
  min-height: var(--footer-bottom-min-height, auto);
}

.site-footer__bottom .site-footer__inner {
  max-width: var(--layout-width);
  margin-inline: auto;
  padding: var(--space-sm) var(--gutter);
}

.footer-bottom-widgets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: space-between;
  align-items: center;
}

.footer-bottom-widget--left {
  flex: 1 1 auto;
}

.footer-bottom-widget--right {
  flex: 1 1 auto;
  text-align: right;
}

/* Footer bottom links */
.site-footer__bottom a {
  color: var(--footer-bottom-link-color, var(--color-gray-300));
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-footer__bottom a:hover {
  color: var(--footer-bottom-link-hover-color, var(--color-gray-100));
}

/* ==================================================
   FOOTER MENU (Horizontal Navigation)
   ================================================== */

.site-footer__bottom .menu,
.site-footer__bottom #footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--footer-menu-gap, var(--space-md));
  justify-content: flex-end;
  align-items: center;
}

.site-footer__bottom .menu-item {
  margin: 0;
  padding: 0;
}

.site-footer__bottom .menu-item a {
  display: inline-block;
  padding: var(--footer-menu-link-padding, var(--space-xs) 0);
  font-size: var(--footer-menu-font-size, var(--font-size-sm));
  font-weight: var(--footer-menu-font-weight, var(--font-weight-normal));
  color: var(--footer-menu-link-color, var(--footer-bottom-color, var(--color-gray-300)));
  text-decoration: none;
  transition: color var(--transition-fast);
  position: relative;
}

.site-footer__bottom .menu-item a:hover {
  color: var(--footer-menu-link-hover-color, var(--color-gray-100));
}

/* Optional separator between menu items */
.site-footer__bottom .menu-item:not(:last-child)::after {
  content: var(--footer-menu-separator, '•');
  margin-left: var(--footer-menu-gap, var(--space-md));
  color: var(--footer-menu-separator-color, var(--color-gray-600));
  font-weight: var(--font-weight-normal);
}

/* Current page indicator */
.site-footer__bottom .menu-item.current-menu-item a,
.site-footer__bottom .menu-item.current_page_item a {
  color: var(--footer-menu-link-active-color, var(--color-gray-100));
  font-weight: var(--footer-menu-active-font-weight, var(--font-weight-medium));
}





/* ==================================================
   FOOTER COPYRIGHT & CREDITS
   ================================================== */

.footer-bottom-widget--left {
  font-family: var(--footer-copyright-font-family, inherit);
  font-size: var(--footer-copyright-font-size, var(--font-size-sm));
  color: var(--footer-copyright-color, var(--footer-bottom-color, var(--color-gray-400)));
  line-height: var(--line-height-normal);
}

/* Copyright + Developer Credit text — margin:0 on both sides is what
   actually fixed the vertical alignment bug. Left had its own reset
   already; right had none, so it fell through to 02-typography.css's
   p { margin: 0 0 var(--space-lg) } — an extra ~24px bottom margin
   only on that side, which is what was actually breaking align-items
   between the two blocks. */
.footer-bottom-widget--left p,
.footer-bottom-widget--right p {
  margin: 0;
}

/* Separator between copyright and developer credit */
.footer-copyright-separator {
  margin: 0 var(--space-sm);
  color: var(--footer-copyright-separator-color, var(--color-gray-600));
}

/* Developer link */
/* Developer link — intentionally NOT visually distinct from the
   surrounding text (no special color, no bold weight). Still a real
   <a> underneath, so it's clickable; the underline-on-hover is the
   only affordance that it's a link. */
.footer-developer-link {
  display: inline;
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
  transition: color var(--transition-fast);
}

.footer-developer-link:hover {
  text-decoration: underline;
}

/* Made by / Developed by text */
.footer-developer-text {
  color: var(--footer-developer-text-color, var(--footer-bottom-color, var(--color-gray-500)));
  font-weight: var(--font-weight-normal);
}





/* ==================================================
   RESPONSIVE
   ================================================== */

@media (max-width: 768px) {
  .site-footer__main .site-footer__inner {
    padding: var(--space-xl) var(--gutter);
  }
  
  .footer-widgets {
    gap: var(--space-xl);
  }
  
  /* Stack footer widgets on tablet */
  .footer-widgets--cols-3,
  .footer-widgets--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Stack footer bottom on mobile */
  .footer-bottom-widgets {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
  
  .footer-bottom-widget--right {
    text-align: left;
  }
  
  /* Footer menu left-aligned on mobile */
  .site-footer__bottom .menu,
  .site-footer__bottom #footer-menu {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .site-footer__main .site-footer__inner {
    padding: var(--space-lg) var(--gutter);
  }
  
  /* Single column on mobile */
  .footer-widgets {
    grid-template-columns: 1fr !important;
  }
  
  /* Smaller menu spacing on mobile */
  .site-footer__bottom .menu,
  .site-footer__bottom #footer-menu {
    gap: var(--space-sm);
    font-size: var(--font-size-xs);
  }
  
  .site-footer__bottom .menu-item:not(:last-child)::after {
    margin-left: var(--space-sm);
  }
}