/* styling picture captions */
figcaption.wp-element-caption {
  width: fit-content;
  margin: 0;
  padding: 8px 12px;
}

/* style header nav */
.main-header-nav .wp-block-navigation-item {
  justify-content: center;
  border: 1px solid;
  flex-grow: 1;
  border-left: 0;
  padding-block: 0.5em
}

.main-header-nav .wp-block-navigation-item:last-of-type {
  border-right: 0;
}

nav.wp-block-navigation.mobile-header-nav {
  border-top: 1px solid;
  border-bottom: 1px solid;
  padding-block: 15px
}

ul.wp-block-navigation.mobile-header-nav li {
  font-size: 40px !important;
  margin-block: .5em;
}

@media (min-width: 1080px) {
  .main-header-nav .wp-block-navigation-item:hover,
  .main-header-nav .wp-block-navigation-item:focus {
    background: var(--wp--preset--color--black);
    color: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--black);
    cursor: pointer;
  }
}

/* style footer on mobile */
@media (min-width: 1080px) {
  .wp-block-column.footer-gradient-column {
    padding-left: 2rem !important;
    border-left: 8px solid var(--wp--preset--color--turquoise-green);
  }
}

@media (max-width: 786px) {
  .wp-block-column.footer-gradient-column {
    padding-top: 1.5rem !important;
    border-top: 8px solid var(--wp--preset--color--turquoise-green);
  }
}

/* utulity class for overlapping items */
.overlap {
  z-index: 21;
}

/* style blog posts */
.home-post-item {
  height: 100%
}

/* Removing default underline for most links */
.post-title a {
  text-decoration: none;
}

.post-title a:hover,
.post-title a:focus {
  text-decoration: underline;
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
  text-decoration: underline;
}

/* fixing padding for certain elements on front page */
@media (max-width: 480px) {
  body {
    --wp--preset--spacing--80: 1rem;

  }
}

/* tweak footer font sizes on mobile */
@media (max-width: 480px) {
  .site-footer ul.is-style-arrow li {
    font-size: 18px !important;
  }
}

/* styling blog post template */
.post-content-container {
  width: fit-content;
}

.post-header {
  max-width: 1480px;
}

.post-bio-container {
  max-width: 640px;
}