jett-theme/assets/css/custom.css

/* 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;
  }

  .main-header-nav .wp-block-navigation-item__content {
    width: -webkit-fill-available;
    text-align: center;
  }
}

/* style footer on mobile */
.wp-block-column.footer-gradient-column { position: relative; }

.wp-block-column.footer-gradient-column::before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

@media (min-width: 1080px) {
  .wp-block-column.footer-gradient-column {
    padding-left: 2rem !important;
  }

  .wp-block-column.footer-gradient-column::before {
    background: var(--wp--preset--gradient--violet-to-green-vertical);
    width: 8px;
    height: 100%;
    left: 0;
  }
}

@media (max-width: 786px) {
  .wp-block-column.footer-gradient-column {
    padding-top: 2.5rem !important;
  }

  .wp-block-column.footer-gradient-column::before {
    background: var(--wp--preset--gradient--violet-to-green);
    width: 100%;
    height: 8px;
  }
}

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

/* style blog posts */
@media (min-width: 1280px) {
  .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:not(.wp-element-button) {
  text-decoration: none;
  border-bottom: none;
}

.site-footer a:hover,
.site-footer a:focus {
  border-bottom: 1px solid;
}

/* 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;
}

/* utility class for reversing column on mobile */
@media (max-width: 480px) {
  .col-sm-reverse {
    flex-direction: column-reverse;
  }

  .container--about-us {
    padding-left: 0 !important;
  }
}

.constrained-text-width.mw-740 > p {
  max-width: 740px;
}

.sans-serif-bold strong {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 20px;
}

p.is-style-outline.wp-block-tag-cloud {
  display: block;
}

.wp-block-tag-cloud a {
  display: block;
  text-align: center;
  margin-bottom: 1em;
  margin-inline: 2em;
  background: var(--wp--preset--color--black);
  color: white !important;
  border-color: black;
  font-weight: bold;
}

.wp-block-tag-cloud a:hover {
  /* text-decoration: underline !important; */
  background: var(--wp--preset--gradient--violet-to-green);
  color: var(--wp--preset--color--black) !important;
}

.wp-block-search__inside-wrapper {
  background-color: var(--wp--preset--color--black);
}

.wp-block-search__input {
  background: var(--wp--preset--color--black);
  color: var(--wp--preset--color--white);
  padding-inline: 2rem;
  font-weight: bold;
}

.wp-block-search__button.has-icon {
  background: var(--wp--preset--gradient--violet-to-green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.contact-card:hover,
.contact-card:focus {
  background: var(--wp--preset--gradient--green-to-violet);
  cursor: pointer;
}

a.wp-block-tiptip-hyperlink-group-block {
  text-decoration: none;
}

.about-heading {
  position: relative;
}

@media (min-width: 1440px) {
  .illustrated-heading {
    margin-top: 400px !important;
  }

  .illustrated-heading::after {
    content: '';
    display: inline-block;
    background: url('../images/illustrated-header-img.png');
    height: 501px;
    width: 632px;
    background-size: contain;
    position: absolute;
    bottom: -19px;
    right: -98px;
  }
}

@media (max-width: 768px) {
  .illustrated-heading {
    margin-top: 227px !important;
  }

  .illustrated-heading::after {
    content: '';
    display: inline-block;
    background: url('../images/illustrated-header-img.png');
    height: 290.476px;
    width: 342px;
    background-size: contain;
    position: absolute;
    bottom: 57px;
    background-repeat: no-repeat;
  }
}

.blog-post-content strong {
  font-family: var(--wp--preset--font-family--instrument-sans);
}

.blog-post-content h2.wp-block-heading {
  background: var(--wp--preset--gradient--green-to-violet);
  padding: .5em;
  padding-inline-start: 1.25em;
  border: 1px solid;
  margin-inline: -1.7em;
  margin-block: 1em;
  font-family: var(--wp--preset--font-family--instrument-sans);
  letter-spacing: -0.4px;
  font-size: 38px !important;
}

.blog-post-content blockquote.wp-block-quote {
  margin-inline-start: -2em;
}

@media (max-width: 1079px) {
  .blog-post-content .wp-block-image {
    margin-inline: -1rem;
  }

  .blog-post-content blockquote.wp-block-quote {
    margin-inline-start: -1.5rem;
  }

  .blog-post-content h2.wp-block-heading {
    margin-inline: auto;
    padding-inline-start: .5em;
  }
}

@media (min-width: 1080px) {
  .blog-post-content .wp-block-image {
    margin-inline: -55px;
  }
}

@media (max-width: 360px) {
  :root {
    --wp--preset--font-size--huge : 45px;
    --wp--preset--font-size--xx-large: 38px;
  }
}

/* styling quote block */
.wp-block-quote { position: relative; }

.wp-block-quote p {
  padding-left: 1em;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.wp-block-quote p::before {
  content: '';
  background: var(--wp--preset--gradient--green-to-violet-vertical);
  width: 16px;
  height: 100%;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

/* styling links inside body text */
p a:not(.wp-element-button) {
  color: inherit;
  font-weight: bold;
  font-family: var(--wp--preset--font-family--instrument-sans);
  text-decoration: none;
  border-bottom: 1px solid;
}

.principles-box {
  min-height: 256px;
}

@media (max-width: 786px) {
  .d-md-none {
    display: none !important;
  }
}