/*
Theme Name:     astra-child
Theme URI:
Description:    Astra child theme.
Author:         Melissa Wong
Author URI:
Template:       astra
Version:        0.1.0
*/

/**
 * Global Styles
*/

/* remove white space below header */
/* .home.ast-plain-container.ast-no-sidebar #primary, */
.page-id-139.ast-plain-container.ast-no-sidebar #primary,
.page-id-215.ast-plain-container.ast-no-sidebar #primary {
  margin-top: 0;
}

/* remove white space below primary */
.page-id-10.ast-plain-container #primary {
  margin-top: 50px;
  margin-bottom: 0;
}

@media screen and (max-width: 991px) {
  .page-id-10.ast-plain-container #primary {
    margin-top: 30px;
  }
}

/* accordion titles */
details summary {
  font-weight: 500;
  font-size: 1.1em;
}

/* tables */
table {
  /* allow for horizontal scrolling */
  display: block;
  overflow-x: auto;
  white-space: nowrap;
border-width: 0;
}

/* add email icon */
.icon::before {
  font-family: "Material Symbols Outlined";
  font-size: 1.2em;
  vertical-align: middle;
  margin-right: 0.5em;
}

.email::before {
  content: "\e158";
}

.phone::before {
  content: "\e0b0";
}

.icon.location {
  align-items: flex-start;
  gap: 0;
  margin-bottom: 1.6em;
}

.location::before {
  content: "\e0c8";
  vertical-align: text-top;
}

/* iframes */
.iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  padding-top: 75%; /* 4:3 Aspect Ratio */
  padding-top: 66.66%; /* 3:2 Aspect Ratio */
  padding-top: 62.5%; /* 8:5 Aspect Ratio */
  padding-top: 100%; /* 1:1 Aspect Ratio */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 976px) {
  .uagb-buttons__outer-wrap .uagb-buttons__wrap {
    justify-content: left !important;
  }
}

@media screen and (max-width: 781px) {
}
@media screen and (max-width: 500px) {
  .full-width-mobile {
    width: 100% !important;
  }

  .full-width-mobile .wp-block-button__link {
    display: flex;
  }
}

/* Footer */
.site-above-footer-wrap,
.site-primary-footer-wrap,
.site-below-footer-wrap {
  padding: 0 20px;
}

.site-above-footer-wrap {
  padding-bottom: 20px;
}

.site-primary-footer-inner-wrap {
  row-gap: 40px;
}

.footer-social-inner-wrap {
  display: flex;
}

@media screen and (max-width: 866px) {
  .site-primary-footer-inner-wrap {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media screen and (max-width: 400px) {
  .site-primary-footer-inner-wrap {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}

/* Home Page */
@media screen and (min-width: 768px) {
  .home-grid .uagb-post__title {
    font-size: 1.5em;
  }
}

/* Wellness */
@media screen and (max-width: 500px) {
  #intro-text-group {
    min-height: 350px;
  }

  .intro-text-wrap {
    margin: 0 5px !important;
  }

  .intro-text {
    padding: 30px 10px !important;
  }

  .resource.is-layout-flex {
    gap: 0; /* remove gap between columns */
  }
}

/* Blog Page */

.featured-posts-container {
  width: 100vw;
  background: white;
  padding: 2em 0;
}

.featured-posts-title {
  max-width: 1240px;
  margin: auto;
  margin-bottom: 30px;
}

.featured-posts-grid {
  display: flex;
  column-gap: 30px;
  max-width: 1240px;
  margin: auto;
}

.featured-posts-grid .ast-grid-common-col {
  padding: 0;
}

.featured-posts-grid .wp-post-image {
  margin-bottom: 0 !important;
}

.main-blog-container {
  display: flex;
}

.main-blog-container .main-blog-section {
  flex-basis: 75%;
}

.main-blog-container .main-blog-section .post-thumb {
  flex-basis: 300px;
}

.main-blog-container .main-blog-section .post-content {
  flex-basis: calc(100% - 300px);
}
.main-blog-container .main-blog-section .blog-layout-5 {
  display: flex;
  column-gap: 20px;
}

.main-blog-container .sidebar-blog-section {
  flex-basis: 25%;
}

@media (max-width: 921px) {
  .ast-separate-container .ast-blog-layout-5-grid .post-content {
    padding: 10px;
  }
}

/* Resources */
@media screen and (max-width: 500px) {
  .post-953 .is-layout-flex {
    gap: 0; /* remove gap between columns */
  }
}

/* Wellness */
@media screen and (max-width: 500px) {
	#quick-links .quick-link--button {
		width: 100%;
	}
}