/* region ================================================================ Section */

section.contact {
  min-height: 100vh;
  padding-top: var(--wp--preset--spacing--75) !important;
  padding-bottom: var(--wp--preset--spacing--75) !important;
  background-color: var(--wp--preset--color--denim-100);
  color: var(--wp--preset--color--background);

  @media (min-width: 48rem) {
    padding-top: var(--wp--preset--spacing--80) !important;
  }

  @media (min-width: 62rem) {
    padding-top: var(--wp--preset--spacing--82) !important;
  }

  @media (min-width: 75rem) {
    padding-top: var(--wp--preset--spacing--82) !important;

    &:not(:has(a.contact-info__phone--container)) {
      padding-block-start: var(--wp--preset--spacing--85) !important;
    }
  }

  &,
  & a {
    text-decoration-color: transparent; /* hide underline */
  }
  & a {
    /* safari fix for responsive font size */
    min-height: 0vw;
  }

  .contact-popup & {
    padding-left: var(--wp--preset--spacing--60);

    & a:hover,
    & a:focus,
    & a:focus-visible {
      text-decoration-color: currentcolor;
    }
  }
}

section.contact {
  --section-font-size--large: max(var(--font-size--h1), 3.75rem);
  --section-font-size--medium: var(--font-size--h4-small);
  --section-font-size--small: var(--font-size--body-large);

  @media (min-width: 48rem) {
    --section-font-size--large: var(--font-size--h2-small);
    --section-font-size--medium: var(--font-size--h6);
  }

  @media (min-width: 62rem) {
    --section-font-size--medium: var(--font-size--body);
    --section-font-size--small: var(--font-size--body-small);
  }

  &:not(:has(a.contact-info__phone--container)) {
    @media (min-width: 62rem) {
      --section-font-size--large: var(--font-size--h2-small);
    }
    @media (min-width: 87.5rem) {
      --section-font-size--large: var(--font-size--h2);
    }
  }
}

section.contact {
  --icon-size: 4rem;

  @media (min-width: 48rem) {
    --icon-size: 6.5rem;
  }
  @media (min-width: 62rem) {
    --icon-size: 5rem;
  }
  @media (min-width: 75rem) {
    --icon-size: 5.5rem;
  }
}

.is-page-contact .bootscore-footer {
  /* hide the footer if this block is on the page */
  display: none;
}

/* endregion Section */

/* region ================================================================ Layout */

.contact__content-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: minmax(0, auto) minmax(3rem, auto);
  grid-template-areas:
    " title   title   title    "
		" phone   email   email    "
		" address address social_1 "
		" address address social_2 "
		" certs   certs   certs    ";
  grid-auto-rows: minmax(0, auto);
  gap: var(--wp--preset--spacing--50, 1.5rem);

  @media (min-width: 62rem) {
    grid-template-columns: 9fr 4fr 4fr;
    grid-template-rows: minmax(0, auto) minmax(0, auto) minmax(7rem, auto) minmax(0, auto);
    grid-template-areas:
    " title   title    title    "
		" phone   social_1 social_2 "
		" phone   address  address  "
		" email   address  address  "
		" certs   certs    certs    ";
  }

  @media (min-width: 75rem) {
    grid-template-columns: 10fr 9fr 4fr 4fr;
    grid-template-rows: minmax(0, auto) minmax(10rem, 1fr) minmax(10rem, auto) minmax(0, 4rem);
    grid-template-areas:
		" title   phone   social_1 social_2 "
		" title   phone   address  address  "
		" title   email   address  address  "
		" certs   email   address  address  ";
  }

  &:not(:has(a.contact-info__phone--container)) {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: minmax(0, auto) minmax(3rem, auto);
    grid-template-areas:
    " title   title   title    "
    " email   email   email    "
    " address address social_1 "
    " address address social_2 "
    " certs   certs   certs    ";
    grid-auto-rows: minmax(0, auto);
    gap: var(--wp--preset--spacing--50, 1.5rem);
    padding-inline: calc(var(--bs-gutter-x, 1rem) * 0.5);

    @media (min-width: 62rem) {
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows:
        minmax(0, auto)
        minmax(0, auto)
        minmax(7rem, auto)
        minmax(0, auto);
      grid-template-areas:
    " title   title     title   title   "
    " social_1 social_2 address address "
    " email   email     address address "
    " email   email     address address "
    " certs   certs     certs   certs ";
    }

    @media (min-width: 75rem) {
      grid-template-columns: 12fr 4fr 4fr 4fr 4fr;
      grid-template-rows:
        minmax(5rem, auto)
        minmax(5rem, auto)
        minmax(5rem, auto)
        minmax(5rem, auto)
        minmax(4rem, auto)
        minmax(3rem, auto);
      grid-template-areas:
    " title   social_2 social_1 address  address "
    " title   social_2 social_1 address  address "
    " title   email   email     address  address "
    " title   email   email     address  address "
    " certs   email   email     address  address "
    " certs   email   email     address  address ";
    }

    @media (min-width: 87.5rem) {
      grid-template-rows:
        minmax(3rem, auto)
        minmax(3rem, auto)
        minmax(3rem, auto)
        minmax(3rem, auto)
        minmax(3rem, auto)
        minmax(3rem, auto);
    }
  }
}

.contact-info__title-tagline--container {
  grid-area: title;
}

.contact-info__phone--container {
  grid-area: phone;

  .contact__content-container:not(:has(a.contact-info__phone--container)) & {
    /* visually hides the element */
    box-sizing: border-box;
    position: absolute;
    overflow: hidden !important;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    margin: -1px;
    padding: 0;
    border: 0;
    word-wrap: normal !important;

    &::before,
    &::after {
      content: unset !important;
    }
  }
}

.contact-info__email--container {
  grid-area: email;
}

.contact-info__address--container {
  grid-area: address;
}

.contact-info__social_1--container {
  grid-area: social_1;
}

.contact-info__social_2--container {
  grid-area: social_2;
}

/* endregion Layout */

/* region ================================================================ Contact Info Container */

.contact-info__container {
  --transition: 0.2s all ease-in-out;
  aspect-ratio: 1/1;
  font-family: var(--wp--preset--font-family--body);
  transition: var(--transition) !important;

  &,
  & a,
  & h3,
  & div {
    /* fix for :root :where(a:where(:not(.wp-element-button))) issue lingering in cached styles */
    color: var(--wp--preset--color--background);
  }

  &:focus-visible,
  &:hover {
    &,
    & a,
    & h3,
    & div {
      color: var(--wp--preset--color--denim-100);
      text-decoration-color: transparent;
    }
  }
}

.contact-info__container,
.contact-info__tagline {
  font-size: var(--section-font-size--medium);
  font-weight: 300;
}

/* region ---------------------------------------------------- Field defaults */

.contact-info__title {
  margin: 1rem 0 0;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--section-font-size--small) !important;
  font-weight: 600;
  transition: var(--transition) !important;

  @media (min-width: 62rem) {
    margin: 2rem 0 0;
  }
}

.contact-info__value {
  display: none; /* hidden by default */
  margin: 0;
  transition: var(--transition) !important;

  @media (min-width: 62rem) {
    line-height: 1.2;
  }
}

.contact-info__icon {
  margin-top: auto;
  margin-bottom: auto;
  transition: var(--transition);
}

/* endregion */

/* region ---------------------------------------------------- Item Common */

.contact-info__title-tagline,
.contact-info__phone--container,
.contact-info__email--container,
.contact-info__address--container,
.contact-info__social_1--container,
.contact-info__social_2--container {
  display: flex !important;
  flex-direction: column;
  gap: 0.25em;
}

/* endregion */

/* region ---------------------------------------------------- Title and Tagline only */

.contact-info__title-tagline {
  align-items: start;
  margin: 0;
}

.contact-info__page-title {
  margin: 0;
  font-size: var(--section-font-size--large);
}

.contact-info__tagline {
  margin: 0;
  padding-top: 2rem;
  padding-bottom: 2rem;
  line-height: 1.15 !important;
  font-size: var(--section-font-size--medium);

  @media (min-width: 62rem) {
    padding-top: 3rem;
  }
}

/* endregion */

/* region ---------------------------------------------------- All Other Items */

.contact-info__phone--container,
.contact-info__email--container,
.contact-info__address--container,
.contact-info__social_1--container,
.contact-info__social_2--container {
  --default-color: var(--wp--preset--color--denim-100);
  --stroke: var(--item-color);

  align-items: center;
  justify-content: center;
  padding: var(--wp--preset--spacing--50) !important;
  border-radius: var(--wp--preset--spacing--50);
  background-color: #fefefe11;

  @media (min-width: 62rem) {
    padding: calc(var(--wp--preset--spacing--50) * 1.5) !important;
  }

  &:focus-visible,
  &:hover {
    --stroke: var(--default-color);
    background: var(--item-color);
  }

  .contact__content-container:not(:has(a.contact-info__phone--container)) & {
    &:focus-visible,
    &:hover {
      --stroke: var(--default-color);
      background: var(--item-color);
    }
  }

  & svg {
    width: var(--icon-size);
    max-width: 100%;
    height: var(--icon-size);
    max-height: 100%;
    transition: var(--transition);
  }

  & circle,
  & line,
  & path {
    transition: var(--transition);
    stroke: var(--stroke) !important;

    &.cls-2 {
      fill: var(--stroke) !important;
    }
  }
}


.contact-info__address--container,
.contact-info__email--container {
  align-items: start;
  justify-content: space-between;
  aspect-ratio: unset;

  & .contact-info__value {
    display: flex;
  }
}

.contact-info__icon {
  .contact-info__address--container &,
  .contact-info__email--container & {
    @media (min-width: 48rem) {
      margin-top: auto;
      margin-bottom: 0;
    }
  }

  .contact-info__phone--container & {
    @media (min-width: 62rem) {
      margin-top: auto;
      margin-bottom: 0;
    }
  }
}

.contact-info__email--container {
  @media (max-width: 25.998rem) {
    --icon-size: 3rem;
  }

  @media (min-width: 48rem) and (max-width: 61.998rem) {
    /*--icon-size: 4.25rem;*/
  }
}

.contact-info__address--container {
  @media (min-width: 26rem) and (max-width: 47.998rem) {
    --icon-size: 5rem;
  }
}

.contact-info__phone--container {
  @media (min-width: 62rem) {
    align-items: start;
    justify-content: space-between;
    aspect-ratio: unset;

    & .contact-info__phone--value {
      display: flex;
    }
  }
}

.contact-info__newsletter-link {
  .contact__content-container:not(:has(a.contact-info__phone--container)) & {
    display: none;
  }
}

/* Colours */

.contact-info__phone--container {
  --item-color: var(--wp--preset--color--brick-100);
  --stroke: var(--wp--preset--color--brick-100);
}

.contact-info__email--container {
  --item-color: var(--wp--preset--color--honey-100);
  --stroke: var(--wp--preset--color--honey-100);
}

.contact-info__address--container {
  --item-color: var(--wp--preset--color--aqua-100);
  --stroke: var(--wp--preset--color--aqua-100);
}

.contact-info__social_1--container {
  --item-color: var(--wp--preset--color--orchid-100);
  --stroke: var(--wp--preset--color--orchid-100);

  .contact__content-container:not(:has(a.contact-info__phone--container)) & {
    --item-color: var(--wp--preset--color--denim-40);
    --stroke: var(--wp--preset--color--denim-40);
  }
}

.contact-info__social_2--container {
  --item-color: var(--wp--preset--color--grey-20);
  --stroke: var(--wp--preset--color--grey-20);

  .contact__content-container:not(:has(a.contact-info__phone--container)) & {
    --item-color: var(--wp--preset--color--orchid-100);
    --stroke: var(--wp--preset--color--orchid-100);
  }
}

/* endregion */

/* region ---------------------------------------------------- Fields */

.contact-info__phone--title,
.contact-info__email--title,
.contact-info__address--title,
.contact-info__social_1--title,
.contact-info__social_2--title {
  display: none;
}

.contact-info__email--title,
.contact-info__address--title {
  @media (min-width: 48rem) {
    display: flex;
  }
}

.contact-info__phone--title {
  @media (min-width: 62rem) {
    display: flex;
  }
}

/* endregion */

/* endregion Contact Info Container */

/* region ================================================================ Certification Logos */

.contact-info__certification-logos {
  display: none;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1rem;
  align-items: end;
  align-self: end; /* align on grid*/
  justify-content: start;

  @media (min-width: 75rem) {
    display: flex;
  }

  &,
  & .certification-logo,
  & img {
    width: unset;
    height: 3.75rem;
  }

  .contact__content-container:not(:has(a.contact-info__phone--container)) & {
    grid-area: certs;

    &,
    & .certification-logo,
    & img {
      width: unset;
      height: 4.75rem;
    }
  }

}

/* endregion */