/**
 * Theme Name: FEA
 * Author: Vassalotti Creative, LLC
 * Author URI: https://vassalotticreative.studio/
 * Description: A block theme for the Fund for Education Abroad.
 * Version: 1.0.0
 */

/*
 @date 2023-10-25
 remove block padding from site blocks div
 */
div.wp-site-blocks {
  padding-block: 0;
}

/*
 @date 2023-10-01
 theme.json doesn't accept hover states on button variations
 */
.wp-block-button.is-style-outline:hover {
  background-color: var(--wp--preset--color--accent-active);
}

/*
 @date 2023-10-05
 WP default styles for links take precedence over any in-editor text decoration changes
 */
.has-text-decoration-none *:not(:focus, :hover) {
  text-decoration: none;
}

/*
 @date 2023-10-05
 force underline on navigation links when hovered or focused
 */
.wp-block-navigation:where(:not([class*="has-text-decoration"])) a:is(:hover, :focus) {
  text-decoration: underline;
}

/*
 @date 2023-10-05
 style the donate link in the primary navigation to look like a button since button blocks are not allowed in the navigation block.
 */
.wp-block-navigation-item.fea-donate-link a.wp-block-navigation-item__content {
  --button-color: var(--wp--preset--color--accent);

  background-color: var(--button-color);
  border: var(--wp--custom--border-width--slight) solid var(--button-color);
  border-radius: var(--wp--custom--border-radius--medium);
  color: var(--wp--preset--color--dark);
  text-transform: initial;
}

.wp-block-navigation-item.fea-donate-link a.wp-block-navigation-item__content:hover {
  --button-color: var(--wp--preset--color--accent-active);
}

/* padding is removed from these links in the open menu for whatever reason, so we need to target it to add it back in */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation-item.fea-donate-link
  a.wp-block-navigation-item__content,
.wp-block-navigation-item.fea-donate-link a.wp-block-navigation-item__content {
  padding-block: var(--wp--custom--units--atomic);
  padding-inline: var(--wp--custom--units--base);
}

/*
 @date 2023-10-10
 add styles to customize the footer form
 */
.gform_wrapper.gravity-theme
  :is(
    input[type="text"],
    :is(.fea-form-footer__email, .fea-form-footer__name, .fea-form-footer__job-title, .fea-form-footer__company)
      :is(.gfield_label)
  ),
.gform_wrapper.gravity-theme .ginput_complex label {
  border: 0;
  font-size: var(--wp--preset--font-size--small);
  margin-block-end: var(--wp--preset--spacing--20);
}

.gform_wrapper.gravity-theme :is(input[type="text"]) {
  border-radius: var(--wp--custom--border-radius--small);
}

.gform_wrapper.gravity-theme
  :is(.fea-form-footer__email, .fea-form-footer__name, .fea-form-footer__job-title, .fea-form-footer__company)
  :is(.gfield_required .gfield_required_text) {
  color: var(--wp--preset--color--accent);
  font-size: var(--wp--preset--font-size--tiny);
}

.gform_wrapper.gravity-theme .gform_button {
  --button-color: var(--wp--preset--color--accent);

  background-color: var(--button-color);
  border: var(--wp--custom--border-width--slight) solid var(--button-color);
  border-radius: var(--wp--custom--border-radius--medium);
  color: var(--wp--preset--color--dark);
  cursor: pointer;
  font-size: var(--wp--preset--font-size--small);
  font-weight: var(--wp--custom--font-weight--bold);
  padding-block: var(--wp--custom--units--atomic);
  padding-inline: var(--wp--custom--units--base);
  text-transform: initial;
}

.gform_wrapper.gravity-theme .gform_footer input.button {
  margin-block-end: 0;
}

.gform_wrapper.gravity-theme .gform_button:hover {
  --button-color: var(--wp--preset--color--accent-active);
}

/* extra classes added for extra specificity */
.gform_wrapper.gravity-theme .gform-body.gform_body .gform_fields {
  column-gap: var(--wp--preset--spacing--30);
}

.gform_wrapper.gravity-theme .ginput_complex {
  gap: var(--wp--preset--spacing--20);
}

.gform_wrapper.gravity-theme
  .gform-body.gform_body
  .ginput_complex:not(.ginput_container_address)
  span:not([style*="display:none"]):not(.ginput_full)
  ~ span:not(.ginput_full) {
  padding-inline-start: 0;
}

/*
 @date 2023-10-16
 add a max width to the footer logo
 */
.fea-footer-logo {
  /* arbitrary value but it looks fine */
  max-inline-size: 330px;
}

/*
 @date 2023-10-16
 change style of the search field in the header
 */
.wp-block-search__input {
  border-radius: var(--wp--custom--border-radius--medium);
}

/*
 @date 2023-10-20
 try to ensure links with images in them are display: block
 */
:is(a:has(img), .wp-block-image > a) {
  display: block;
}

/*
 @date 2023-10-20
 add styles for Our Impact
 */
.fea-our-impact .wp-block-separator {
  inline-size: 60px;
}

.fea-our-impact.fea-our-impact--as-row {
  text-align: center;
}

.fea-our-impact:is(.fea-our-impact--as-row, .fea-our-impact.fea-our-impact--as-blocks) .fea-our-impact__measurement {
  max-inline-size: 25ch;
}

.fea-our-impact.fea-our-impact--as-blocks .fea-our-impact__measurement {
  background-color: var(--wp--preset--color--accent-active);
  border-radius: var(--wp--custom--border-radius--medium);
  padding-block: var(--wp--preset--spacing--30);
  padding-inline: var(--wp--preset--spacing--40);
}

@media (max-width: 781px) {
  .fea-our-impact--center-mobile.fea-our-impact.fea-our-impact--as-row {
    justify-content: center;
  }
}

/*
 @date 2023-10-23
 create styles for accented titles
 */
.fea-accented-title {
  --accented-title-ratio-size: 1em;

  isolation: isolate;
}

.fea-accented-title--jumbo {
  --accented-title-ratio-size: 1.5em;
}

.fea-accented-title--mega {
  --accented-title-ratio-size: 2em;
}

.fea-accented-title--pull-right {
  --accented-title-right: 0.25em;
}

.fea-accented-title--one-word-per-line {
  max-inline-size: min-content;
  word-spacing: 1000rem;
}

.fea-accented-title--center {
  text-align: center;
}

.fea-accented-title--color-alt-one {
  --accented-title-first-color: var(--wp--preset--color--accent-active);
  --accented-title-second-color: var(--wp--preset--color--primary-active);
}

.fea-accented-title--color-alt-two {
  --accented-title-first-color: var(--wp--preset--color--primary);
  --accented-title-second-color: var(--wp--preset--color--accent);
}

.fea-accented-title--color-alt-three {
  --accented-title-first-color: var(--wp--preset--color--backdrop);
  --accented-title-second-color: var(--wp--preset--color--secondary);
}

.fea-accented-title
  :is(h1, h2, h3, h4, h5, h6):is(
    .wp-block-heading,
    .wp-block-query-title,
    .wp-block-post-title
  ).fea-accented-title__text {
  display: inline-block;
  position: relative;
  text-align: start;
  word-break: initial;
}

.fea-accented-title.fea-accented-title--use-both-colors
  :is(.wp-block-heading, .wp-block-query-title, .wp-block-post-title)::after,
.fea-accented-title :is(.wp-block-heading, .wp-block-query-title, .wp-block-post-title)::before {
  block-size: var(--accented-title-block-size, var(--accented-title-ratio-size));
  content: "";
  inline-size: var(--accented-title-inline-size, var(--accented-title-ratio-size));
  position: absolute;
  z-index: -1;
}

.fea-accented-title.fea-accented-title--use-both-colors
  :is(.wp-block-heading, .wp-block-query-title, .wp-block-post-title)::after {
  background-color: var(--accented-title-second-color, var(--wp--preset--color--accent-active));
  inset-block-end: var(--accented-title-bottom, -0.25em);
  inset-inline-end: var(--accented-title-right, -0.5em);
}

.fea-accented-title :is(.wp-block-heading, .wp-block-query-title, .wp-block-post-title)::before {
  background-color: var(--accented-title-first-color, var(--wp--preset--color--primary-active));
  inset-block-start: var(--accented-title-top, -0.25em);
  inset-inline-start: var(--accented-title-left, -0.5em);
}

/*
 @date 2023-10-25
 add a class for shortening paragraph lengths
 */
.fea-readable-line-length :where(p) {
  max-inline-size: 50ch;
}

/*
 @date 2023-10-25
 add default hover styles for images inside links
 */
a img {
  transition: opacity ease 0.3s;
}

a img:hover {
  opacity: 0.8;
}

/*
 @date 2023-11-01
 add hover effects to footer links
 */
.fea-navigation--secondary a {
  transition: filter 0.3s ease;
}

.fea-navigation--secondary a:hover {
  filter: brightness(0.8);
}

/*
 @date 2023-11-01
 fix styles with outline variant of button not accounted for in theme.json
 */
.wp-block-button.is-style-outline:hover {
  background-color: transparent;
}

.wp-block-button.is-style-outline:hover > .wp-block-button__link:not(.has-background) {
  background-color: var(--wp--preset--color--accent-active);
}

/*
 @date 2023-11-01
 add rules for one-off dividers
 */
.wp-block-separator.fea-single-post-divider {
  max-inline-size: 400px;
}

.fea-single-post-divider--center .wp-block-separator.fea-single-post-divider {
  margin-inline: auto;
}

.wp-block-separator.fea-post-meta-separator {
  max-inline-size: 50px;
}

/*
 @date 2023-11-01
 handle archive query loop styles
 */
.fea-archive-query-loop .wp-block-post:first-of-type:has(.wp-block-post-featured-image) {
  grid-column: 1 / -1;
}

@media (min-width: 782px) {
  .fea-archive-query-loop .wp-block-post:first-of-type:has(.wp-block-post-featured-image) .fea-post-template-wrapper {
    align-items: end;
    display: grid;
    gap: var(--wp--preset--spacing--40);
    grid-template-columns: 1fr 1fr;
  }

  .fea-archive-query-loop .wp-block-post:first-of-type:has(.wp-block-post-featured-image) .wp-block-post-title {
    font-size: var(--wp--preset--font-size--medium);
  }
}

/*
 @date 2023-11-04
 add a class to handle restricting content ad hoc
 */
.fea-container {
  margin-inline: auto !important;
  max-inline-size: var(--fea-container-width, 1920px);
}

.fea-container--md {
  --fea-container-width: 1600px;
}

.fea-container--sm {
  --fea-container-width: 800px;
}

/*
 @date 2023-11-04
 handle the color block on page templates
 */
.fea-position-relative {
  position: relative;
}

.fea-color-block {
  inline-size: 100%;
  inset-block-end: -2rem;
  position: absolute;
  z-index: -1;
}

.fea-color-block__color:not(.wp-block-cover),
.wp-block-cover.fea-color-block__color
  .wp-block-cover__background.has-background-dim:not([class*="-background-color"]) {
  background-color: var(--fea-template-accent-color, var(--wp--preset--color--accent));
}

/* Hide the color block if the featured image is empty */
.fea-color-block-featured-image-group:empty + .fea-color-block {
  display: none;
}

/*
 @date 2023-11-04
 add class to support sized separators
 */
.fea-separator {
  background-color: var(--wp--preset--color--accent);
  inline-size: var(--fea-separator-width, 100%);
}

.fea-separator--md {
  --fea-separator-width: 60%;
}

.fea-separator--sm {
  --fea-separator-width: 40%;
}

/*
 @date 2023-11-05
 change the link color on light text situations
 */
.wp-block-cover .has-links-background-color a,
.has-light-color a {
  --wp--preset--color--links: var(--wp--preset--color--light);
  --wp--preset--color--links-active: var(--wp--preset--color--light);
}

/*
 @date 2023-11-05
 people bio card styles
 */
.fea-people-bio-card__image {
  border-radius: var(--wp--custom--border-radius--circle);
  max-inline-size: 300px;
}

/*
 @date 2023-11-05
 add styles to support author pages for scholars
 */
.fea-author-meta__container {
  display: flex;
  flex-wrap: wrap;
  gap: 1ch;
  row-gap: 0;
}

.fea-author-meta--column {
  flex-direction: column;
}

.fea-author-meta__label {
  font-weight: var(--wp--custom--font-weight--bold);
}

.fea-author-meta__container :is(ul, ol, p) {
  margin: 0;
}

.fea-scholar-journal-grid {
  display: grid;
  gap: var(--wp--preset--spacing--50);
  grid-template-columns: repeat(var(--fluid-type, auto-fit), minmax(var(--fluid-col-size, 20rem), 1fr));
}

/* Removes WP default margins on flow items */
.fea-scholar-journal-grid-item,
.fea-scholar-journal-grid-item * {
  margin-block: 0;
}

/* Empty paragraphs are possibly rendered through the shortcodes */
.fea-scholar-journal-grid-item p:empty {
  display: none;
}

.fea-scholar-journal-grid-item img {
  aspect-ratio: 16 / 9;
  block-size: auto;
  max-inline-size: 100%;
  object-fit: cover;
}

.fea-scholar-journal-grid-item__date {
  font-size: var(--wp--preset--font-size--small);
  font-style: var(--wp--custom--font-style--italic);
}

.fea-scholar-journal-grid-item__title {
  font-size: var(--wp--preset--font-size--base);
  margin-block-start: var(--wp--preset--spacing--30);
}

.fea-scholar-journal-grid .fea-scholar-journal-grid-item__title a {
  color: var(--wp--preset--color--dark);
  display: inline-block;
}

.fea-scholar-journal-grid .fea-scholar-journal-grid-item__title a:hover {
  color: var(--wp--preset--color--links-active);
}

.fea-legacy-scholar-bio {
  font-size: var(--wp--preset--font-size--small);
}

.fea-scholar-bio-title {
  font-size: var(--wp--preset--font-size--x-medium);
}

/*
 @date 2023-11-06
 add styles for the scholars list shortcode
 */
.fea-scholars-list {
  display: grid;
  gap: var(--wp--preset--spacing--50);
}

.fea-scholars-list .wp-block-separator:last-of-type {
  display: none;
}

.fea-scholars-list__scholar-grid {
  display: grid;
  gap: var(--wp--preset--spacing--40);
  grid-template-columns: repeat(var(--fluid-type, auto-fit), minmax(var(--fluid-col-size, 20rem), 1fr));
}

.fea-scholars-list__year-header {
  font-size: var(--wp--preset--font-size--large);
  font-weight: var(--wp--custom--font-weight--bold);
  inline-size: fit-content;
  margin-inline: auto;
}

.fea-scholars-list__details[open] .fea-scholars-list__year-header {
  margin-block-end: 1em;
}

.fea-scholars-list__scholar {
  display: grid;
  gap: var(--wp--preset--spacing--40);
  grid-template-columns: 30% auto;
}

.fea-scholars-list__scholar-avatar img {
  border-radius: var(--wp--custom--border-radius--circle);
  display: block;
  inline-size: 100%;
}

.fea-scholars-list__scholar-avatar:link {
  block-size: fit-content;
  display: block;
  inline-size: 100%; /* matches the image size rendered */
}

.fea-scholars-list__scholar-name,
.fea-scholars-list__label {
  font-weight: var(--wp--custom--font-weight--bold);
}

.fea-scholars-list__scholar-info > :not(.fea-scholars-list__scholar-name) {
  font-size: var(--wp--preset--font-size--small);
}

/* Change the grid template for scholars that use the default avatar */
.fea-scholars-list__scholar:has(img[src*="secure.gravatar.com/avatar/"]) {
  grid-template-columns: 1fr;
}

/* Hide the element that contains a default avatar */
:is(a, .wp-block-avatar):has(img[src*="secure.gravatar.com/avatar/"]) {
  display: none;
}

/*
 @date 2023-12-02
 add styles for the alumni map pattern
 */
.fea-alumni-map iframe {
  aspect-ratio: 16 / 8;
  block-size: auto;
  inline-size: 100%;
}

/*
 @date 2023-12-20
 add styles to support list items in query loops
 */
.fea-query-list ul {
  padding: revert;
}

.fea-query-list li {
  list-style: initial;
}

.fea-query-list .wp-block-post-title {
  margin-block-end: 0.25em;
  margin-block-start: 0;
}

/*
 @date 2024-01-24
 create styles for a row of taxonomy terms
 */
.wp-block-post-terms.fea-terms--row {
  flex-direction: row;
  flex-wrap: wrap;
}

.fea-journal-terms:not(:has(:first-child + *)) {
  display: none;
}

/*
 @date 2024-01-28
 hide paragraph elements that end up wrapping shortcodes
 */
p:has(scroll-top) {
  display: contents;
}

/*
 @date 2024-01-30
 hide empty columns on WP mobile BP
 */
@media (max-width: 781px) {
  .wp-block-column:empty {
    display: none;
  }
}

/*
 @date 2024-02-01
 update methods for hiding content on author pages
 relies on PHP shortcodes
 */
body.fea-scholar .fea-author-posts {
  display: none;
}

body.fea-not-scholar .fea-scholar-bio {
  display: none;
}

/*
 @date 2024-12-09
 Override plugin styles that made avatars too small.
 */
body.fea-scholar img.avatar {
  inline-size: 100%;
}