/* ========================================
   Footer Styles for Dragon Lore Tours Theme
   Author: Your Name, Date: YYYY-MM-DD
   Note: Styles for site-header and header elements
   ======================================== */

/* Footer row + columns */
.footer-row-1 {
  display: flex;
  justify-content: space-between; /* space out the three columns */
  align-items: flex-start;
  gap: 2rem; /* spacing between cols, adjust as needed */
}

.footer-col {
  flex: 1 1 0;
  min-width: 180px; /* adjust for mobile responsiveness */
}

/* List style reset and spacing */
.footer-list {
  list-style: none;     /* No bullets */
  padding: 0;
  margin: 0;
}

.footer-list li {
  margin-bottom: 1rem;  /* standard vertical spacing between links */
  display: flex;
  align-items: center;  /* vertically center icons and text */
}

.footer-list li:last-child {
  margin-bottom: 0;
}

/* Icon styling */
.footer-list i {
  margin-right: 0.5rem; /* space between icon and link text */
  font-size: 1.2em;
  vertical-align: middle;
}

.footer-list li a {text-decoration: none;}

.footer-row-1 a {color: #fff;}
.footer-row-1 i {color: var(--color-accent)}
.footer-row-2 {margin-top: 2rem; font-size: 80%; color: #fff; font-weight: bold;}
.footer-row-3 {margin-top: 0.5rem;}
.footer-row-3 a {text-decoration: none;}

footer.site-footer {background-color: #000000AB; padding: 2.5rem;}

/* Responsive: Tablet & Mobile stack */
.footer-row-1 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap; /* allows columns to wrap if needed */
}

/* Responsive: Tablet & Mobile stack */
@media (max-width: 900px) {
  .footer-row-1 {
    gap: 1rem;
  }
}

@media (max-width: 700px) {
  .footer-row-1 {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .footer-col {
    min-width: 0;
    margin-bottom: 0.8rem;
  }
  .footer-row-2,
  .footer-row-3 {
    text-align: left;
    justify-content: flex-start;
    font-size: 90%;
  }
}


/* cols even width */

.footer-col {
  flex: 1 1 0;
  min-width: 180px; /* each gets at least 180px */
}
.footer-row-1 .footer-col {
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
}