/*
Theme Name: Hope Family Church
Theme URI: https://myhopefamily.org
Description: Custom block theme for Hope Family Church
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: hfc-theme
*/

.has-page-gradient {
  background: linear-gradient(180deg, rgb(230, 242, 250) 0%, rgb(248, 245, 238) 200px, rgb(255, 255, 255) 400px);
}

/* Force navigation links to green */
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
  color: #5B7F5B !important;
}

.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
  color: #102A43 !important;
}

/* Align site title vertically with logo */
.wp-block-site-title {
  display: flex;
  align-items: center;
  margin: 0;
  padding-top: 12px;
  line-height: 1;
}

/* Make MinistrySafe logo white in dark footer */
.wp-block-group.has-background[style*="102A43"] .wp-block-image img {
  filter: brightness(0) invert(1);
}

/* Mobile responsive fixes */
@media (max-width: 768px) {
  .wp-block-columns {
    flex-direction: column !important;
    gap: 20px !important;
  }
  
  .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }
  
  .wp-block-group.alignfull {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }

  /* Header mobile: stack logo and reduce size */
  .wp-block-site-logo img {
    max-width: 45px !important;
  }

  .wp-block-site-title {
    font-size: 22px !important;
  }

  /* Mobile navigation overlay */
  .wp-block-navigation__responsive-container.is-menu-open {
    padding: 20px 0 32px 0 !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding: 0 !important;
    gap: 0 !important;
    width: 100% !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    display: block !important;
    width: 100% !important;
    padding: 14px 24px !important;
    font-size: 18px !important;
    border-bottom: 1px solid #e8ede8 !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    width: 100% !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: 12px 24px 12px 44px !important;
    font-size: 16px !important;
    background-color: #f7faf7 !important;
    border-bottom: 1px solid #e8ede8 !important;
  }

  /* Footer mobile: stack columns and left-align everything */
  .wp-block-group.has-background[style*="102A43"] .wp-block-column p,
  .wp-block-group.has-background[style*="102A43"] .has-text-align-right {
    text-align: left !important;
  }

  .wp-block-group.has-background[style*="102A43"] .wp-block-social-links {
    justify-content: flex-start !important;
  }

  .wp-block-group.has-background[style*="102A43"] .wp-block-column .wp-block-group {
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  /* Hero heading smaller on mobile */
  h1.wp-block-heading {
    font-size: 28px !important;
  }

  h2.wp-block-heading {
    font-size: 24px !important;
  }
}

/* Footer links always white */
.wp-block-group.has-background[style*="102A43"] a,
.wp-block-group.has-background[style*="102A43"] a:hover,
.wp-block-group.has-background[style*="102A43"] a:visited,
.wp-block-group.has-background[style*="102A43"] a:active {
  color: #FFFFFF !important;
}