/* Custom styles for Happy Tots Day Care */

/* Hide Webflow badge */
.w-webflow-badge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  z-index: -9999 !important;
} 

/* Center footer copyright text */
.block-footer-down {
  text-align: center;
  display: flex;
  flex-direction: row;
  column-gap: 10px;
  align-items: center;
  justify-content: center;
  width: 80% !important;
  margin: 0 auto;
}

.block-footer-down .copyright {
  text-align: center;
  width: 100%;
  margin: 0;
}

.block-footer-down .footer-icon-run {
  margin-bottom: 10px;
} 

/* Increase logo size */
.logo {
  height: 110px !important;
  width: auto !important;
  max-height: none !important;
}

/* Adjust brand container to fit larger logo */
.brand {
  height: auto !important;
  display: flex;
  align-items: center;
}

/* Reduce navigation bar height while preserving logo size */
.nav-menu {
  align-self: flex-start !important; /* prevent stretching to logo height */
  min-height: 50px !important; /* slightly taller bar */
  padding: 4px 40px !important; /* subtle vertical breathing room */
  align-items: center !important;
  column-gap: 30px !important; /* same as grid-column-gap */
  row-gap: 0 !important;       /* remove vertical gap */
}

/* Ensure nav-menu-wrapper stays centered */
.nav-menu-wrapper {
  align-items: center !important;
}

/* Reduce space above the Services section */
.services-section {
  padding-top: 100px !important; /* Reduced from 220px */
}

/* Mobile-specific styles */
@media screen and (max-width: 991px) {
  .nav-menu {
    padding: 10px 25px !important;
  }
  /* Enlarge the hamburger button & center its icon */
  .menu-button {
    width: 56px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Ensure the icon inside is perfectly centered */
  .menu-button .icon {
    margin: 0 !important;
  }
}

@media screen and (max-width: 767px) {
  .logo {
    height: 100px !important;
  }
  
  .nav-menu {
    padding: 8px 20px !important;
  }
  .footer-cartoon-row {
    gap: 35px;
    padding: 30px 0 15px;
  }
  .footer-cartoon-row .footer-cartoon {
    width: 55px;
  }
  .nav-menu-wrapper {
    align-items: flex-start !important;
  }
  .menu-button {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .block-footer-down {
    flex-direction: column;
    row-gap: 4px;
  }
}

@media screen and (max-width: 479px) {
  .logo {
    height: 90px !important;
  }
  
  .nav-menu {
    padding: 6px 15px !important;
  }
}

/* Adjust footer grid to 2 columns now that the Admin column is removed */
.footer-grid {
  grid-template-columns: 1.25fr 1fr !important;
}

/* Tablet and below: stack items into two columns (logo + links) */
@media screen and (max-width: 991px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile: stack items vertically */
@media screen and (max-width: 479px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Footer cartoon row styling */
.footer-cartoon-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  padding: 40px 0 20px;
}

.footer-cartoon-row .footer-cartoon {
  width: 70px;
  height: auto;
}

@media screen and (max-width: 767px) {
  .footer-cartoon-row {
    gap: 35px;
    padding: 30px 0 15px;
  }
  .footer-cartoon-row .footer-cartoon {
    width: 55px;
  }
}

/* Make dashed line narrower and centered */
.block-footer-down {
  width: 80% !important;
  margin: 0 auto;
}

/* Center 'Emergency Medical Services' card under Full Attention on desktop */
@media screen and (min-width: 992px) {
  .services-grid .center-desktop {
    grid-column: 2; /* place in middle column */
    justify-self: center; /* ensure it is centered horizontally if extra space */
  }
}

.block-footer-down div {
  font-weight: 700;
}