/*
 Theme Name:     Crisis Pregnancy Center of Tidewater
 Author:         Grace at Work
 Author URI:     https://graceatworkweb.com
 Template:       Divi
 Version:        1.21
 Description:    A child theme created for Grace at Work clients for use with the Divi theme.
*/

@font-face {
  font-display: swap;
}

:root {
  /* Colors */
  --black: #222222;
  --white: #ffffff;
  --red: #ef3c40;
  --green: #213430;
  --offblack: rgba(34, 34, 34, 0.9);
  --offwhite: #f6f6f6;
  --offgreen: rgba(33, 52, 48, 0.9);
  --offred: rgba(239, 60, 64, 0.9);
  --primary-color: var(--red);
  --secondary-color: var(--green);

  /* Fonts */
  --body-font: "Lato", Helvetica, Arial, Lucida, sans-serif;

  /* Buttons */
  --button-font-size: 16px;
  --button-line-height: 22px;
  --button-border-radius: 5px;
  --button-min-width: 150px;
  --button-font-family: var(--body-font);
  --button-border-width: 1px;
  --button-padding-top: 15px;
  --button-padding-right: 40px;
  --button-padding-bottom: 15px;
  --button-padding-left: 40px;

  /* Primary Button */
  --primary-button-color: var(--white);
  --primary-button-border-color: var(--primary-color);
  --primary-button-background-color: var(--primary-color);
  --primary-button-box-shadow: 0px 16px 19.7px 0px rgba(0, 0, 0, 0.25);
  --button-hover-opacity: 0.9;

  /* Secondary Button */
  --secondary-button-color: var(--black);
  --secondary-button-border-color: var(--black);
  --secondary-button-background-color: var(--white);
  --secondary-button-box-shadow: 0px 4px 19.7px 0px rgba(0, 0, 0, 0.25);
  --secondary-button-hover-background-color: var(--offwhite);
  --secondary-button-hover-border-color: var(--black);
}

/* Prevent styles from appearing in Divi builder, which loads via iframe and thus uses client-side styling! */
body:not(.et-fb) {
  /* Charitable templates add max-width to the body tag for some reason */
  & {
    max-width: 100%;
  }

  &.custom-background {
    background-color: white;
  }

  /* Forms, fields */

  input[disabled] {
    cursor: not-allowed;
  }

  /* Utility classes */
  .highlighted-text {
    color: var(--primary-color);
    font-weight: bold;
  }

  /* Disable Divi sidebars */

  /*** Take out the divider line between content and sidebar ***/
  #main-content .container:before {
    background: none;
  }

  #main-content {
    h1 {
      line-height: 1.1;
    }
  }

  /*** Hide Sidebar ***/
  #sidebar {
    display: none;
  }

  /*** Expand the content area to fullwidth ***/
  @media (min-width: 981px) {
    #left-area {
      width: 100%;
      padding: 23px 0px 0px !important;
      float: none !important;
    }
  }

  @media only screen and (min-width: 981px) {
    .et_header_style_left #main-header #et-top-navigation {
      padding-top: 10px;
      padding-bottom: 10px;

      ul#top-menu {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 11px 0;

        a {
          padding-bottom: 0;
        }
      }
    }
  }

  /* Remove vertical padding on Divi rows on mobile for tighter spacing */

  @media only screen and (max-width: 767px) {
    .et_pb_row_1.et_pb_row {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
  }

  /* Buttons */

  /* default button styles */
  a.et_pb_button,
  button.et_pb_button {
    font-size: var(--button-font-size);
    line-height: var(--button-line-height) !important;
    border-radius: var(--button-border-radius);
    min-width: var(--button-min-width);
    text-align: center;
    font-family: var(--button-font-family);
    border-width: var(--button-border-width) !important;
    padding-top: var(--button-padding-top) !important;
    padding-right: var(--button-padding-right) !important;
    padding-bottom: var(--button-padding-bottom) !important;
    padding-left: var(--button-padding-left) !important;
    cursor: pointer;
    margin-bottom: 0;

    &::after {
      content: unset;
    }
  }

  .cpc-primary-button,
  .cpc-secondary-button,
  a.et_pb_button.cpc-primary-button,
  button.et_pb_button.cpc-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    & > span.icon {
      display: inline-block;
      margin-left: 4px;
      font-family: ETmodules;
    }

    @media (max-width: 767px) {
      & {
        padding-right: 30px !important;
        padding-left: 30px !important;
        min-width: max-content;
      }
    }
  }

  .cpc-primary-button {
    color: var(--primary-button-color) !important;
    border-color: var(--primary-button-border-color) !important;
    background-color: var(--primary-button-background-color) !important;
    /* box-shadow: var(--primary-button-box-shadow); */

    &:hover {
      opacity: var(--button-hover-opacity);
    }
  }

  .cpc-secondary-button {
    color: var(--secondary-button-color) !important;
    border-color: var(--secondary-button-border-color) !important;
    background-color: var(--secondary-button-background-color) !important;
    /* box-shadow: var(--secondary-button-box-shadow); */

    &:hover {
      background-color: var(
        --secondary-button-hover-background-color
      ) !important;
      border-color: var(--secondary-button-hover-border-color) !important;
    }
  }

  .cpc-primary-button-outline {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-color: transparent !important;
    border-width: 1px !important;

    &:hover {
      background-color: var(--primary-color) !important;
      color: var(--white) !important;
    }
  }

  .cpc-button-row {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: column;
    max-width: 400px;
    gap: 10px;

    .et_pb_button_module_wrapper {
      margin-bottom: 0;

      a {
        width: 100%;
        justify-content: center;
      }
    }

    @media (max-width: 767px) {
      & {
        margin-bottom: 40px;
      }
    }

    @media (max-width: 479px) {
      & {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;

        .et_pb_column & .et_pb_module {
          margin-bottom: 0;

          &:last-child {
            margin-bottom: 10px;
          }
        }

        a.et_pb_button.cpc-secondary-button {
          padding-left: 10px !important;
          padding-right: 10px !important;
        }
      }
    }
  }

  .cpc-footer-button-container {
    display: flex;
    justify-content: center;

    @media (max-width: 479px) {
      & a.et_pb_button.cpc-secondary-button {
        padding-left: 10px !important;
        padding-right: 10px !important;
      }
    }
  }

  .cpc-footer-register-button {
    margin-bottom: 0 !important;

    .et_pb_button.cpc-primary-button {
      padding: 0 !important;
      min-width: 0 !important;
    }

    body.campaign-type-team & {
      display: none;
    }
  }

  .cpc-footer-donate-button {
    body.campaign-type-team & {
      display: none;
    }
  }

  /* Menus */

  .et-l--header {
    max-height: 148px !important;
    min-height: 120px !important;
  }

  .et_pb_menu__logo img {
    height: 60px;
    width: auto;
    max-width: 200px;
    aspect-ratio: auto;
  }

  #cpc-secondary-navigation {
    max-height: 38px !important;
    position: relative;
    z-index: 10011 !important;

    .et_pb_module,
    .et_pb_text_inner {
      height: 100%;
    }

    .cpc-contact-links {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      height: 100%;

      a {
        display: inline-flex;
        align-items: center;
        line-height: 1;
        cursor: pointer;

        span {
          font-family: ETModules;
          display: inline-block;
          margin-right: 5px;
          line-height: 1;
        }
      }
    }

    .et_pb_social_icon {
      margin-bottom: 0 !important;
    }

    .et_pb_social_media_follow li a {
      margin-right: 5px;
      cursor: pointer;
    }

    @media (max-width: 980px) {
      & {
        .et_pb_row {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .et_pb_column {
          margin-bottom: 0;
        }
      }
    }

    @media (max-width: 767px) {
      & {
        max-height: 60px !important;

        br {
          display: none;
        }

        .et_pb_row {
          gap: 0;
          width: 100%;
          padding: 0 15px;
        }

        .et_pb_text_inner {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          height: auto;
          gap: 5px;
        }

        .et_pb_text.et_pb_text_1_tb_header .et_pb_text_inner {
          align-items: flex-end;
          gap: 10px;

          a {
            line-height: 1;
          }
        }

        .et-last-child {
          width: max-content !important;
        }

        .cpc-contact-links {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: flex-start;
        }

        a {
          white-space: nowrap;
        }
      }
    }

    @media (max-width: 479px) {
      & {
        .et_pb_column_1_2 {
          width: auto !important;
        }
      }
    }
  }

    /* shrink main nav on scroll */
  #page-container:has(#cpc-secondary-navigation.et_pb_sticky) #cpc-primary-navigation {
    max-height: 80px !important;

    & .et_pb_menu {
      max-height: 80px;
    }
  }

  #cpc-primary-navigation {
    max-height: 110px !important;

    .et_pb_menu {
      max-height: 110px;
      transition: all 0.2s ease-in-out;
    }

    .et_pb_menu__wrap {
      justify-content: flex-end;
    }

    .et_pb_menu_inner_container {
      height: 100%;
    }

    li.current-menu-item a {
      color: var(--primary-color) !important;
    }

    li,
    a {
      color: var(--black) !important;
      font-size: 16px;
    }

    li.cpc-register-here-nav {
      padding-left: 6px;

      &.current-menu-item a {
        color: white !important;
        font-weight: bold;
      }

      a {
        background-color: var(--primary-color);
        color: white !important;
        padding: 18px 22px !important;
        border-radius: var(--button-border-radius);
        border: 1px solid var(--primary-color);
        height: 48px;
        min-width: 0 !important;
      }
    }

    li.cpc-donate-nav {
      padding-right: 6px;

      a {
        background-color: white;
        color: var(--black) !important;
        padding: 18px 22px !important;
        border-radius: var(--button-border-radius);
        border: 1px solid var(--black);
        height: 48px;

        & > span {
          font-family: ETmodules;
          display: inline-block;
          margin-left: 4px;
        }
      }
    }

    @media (max-width: 980px) {
      & {
        ul.et_mobile_menu {
          flex-direction: column;

          .mobile_nav:not(.closed) & {
            display: flex;
            gap: 8px;
          }

          li:not(.cpc-donate-nav):not(.cpc-register-here-nav) a {
            border-bottom: none;
            padding: 10px 14px;
          }

          .cpc-donate-nav,
          .cpc-register-here-nav {
            padding: 5px 0 !important;

            a {
              padding: 13px !important;
              line-height: 1;
            }
          }
        }
      }
    }

    @media (min-width: 980px) and (max-width: 1050px) {
      & {
        .et_pb_menu .et-menu > li {
          padding-right: 6px;
          padding-left: 6px;
        }
      }
    }
  }

  .et_pb_menu .et_pb_menu__menu > nav > ul > li {
    align-items: center;
  }

  /* Footer */

  .cpc-sponsor-gallery {
    .et_pb_ajax_pagination_container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 16px;

      .et_pb_post {
        width: auto;
        max-width: 150px;
        height: 80px;
        margin-bottom: 0;

        .entry-featured-image-url {
          display: flex;
          align-items: center;
          margin-bottom: 0;
          height: 100%;
        }

        img {
          object-fit: contain;
        }
      }
    }

    a {
      /* pointer-events: none; */
    }
  }

  .cpc-footer-curved-divider-row {
    display: grid;
    grid-template-columns: 1fr minmax(190px, 1fr) 1fr;

    div.et_pb_column_1_3 {
      width: 100% !important;
      height: 100%;
      margin-right: 0 !important;
      background-color: var(--white);
    }

    div.et_pb_column_1_3:nth-of-type(2) {
      .et_pb_divider_1_tb_footer {
        height: 100%;
        width: 100%;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        background-color: #ef3c40 !important;
        box-shadow: inset 0 20px 16px -18px rgba(0, 0, 0, 0.3),
          inset 21px 9px 38px -60px rgba(0, 0, 0, 0.3),
          inset -21px 9px 38px -60px rgba(0, 0, 0, 0.3);
      }
    }

    div.et_pb_column_1_3:not(:nth-of-type(2)) {
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
      box-shadow: 0px 13px 9px -11px rgba(0, 0, 0, 0.3);
    }
  }

  .cpc-footer-main-content-section {
    .et_pb_column_4_4 {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .et_pb_image {
      border-top-right-radius: 20px;
      border-top-left-radius: 20px;
    }
  }

  #footer-menu {
    @media (max-width: 980px) {
      & {
        .et_pb_menu__menu {
          display: flex;
        }
      }
    }
  }

  /* Home page */
  .cpc-slider-row {
    height: 540px;
    min-height: 540px;
    max-height: 540px;
  }

  .cpc-home-image-slider {
    .et_pb_slide {
      padding: 0;
      height: 500px;

      img {
        max-height: 500px !important;
        height: 100%;
        object-fit: cover;
        width: 100%;
      }
    }

    /* Ensure the slide image takes the full content width */
    .et_pb_slide .et_pb_slide_image {
      width: 100%; /* Ensure the image spans the content width */
      display: block; /* Remove inline-block gaps */
      margin-top: 0 !important;
      top: 0 !important;
      height: 100%;
      background-color: whitesmoke;
    }

    /* Position text absolutely over the image */
    .et_pb_slide_description {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      position: absolute;
      top: 0; /* Center vertically */
      left: 0; /* Center horizontally */
      z-index: 2; /* Ensure it appears above the image */
      color: white; /* Adjust text color for contrast */
      text-align: center;
      background-color: rgba(
        0,
        0,
        0,
        0.6
      ); /* Optional: Add a semi-transparent background for better readability */
      padding: 10px 20px; /* Optional: Add padding to the text */
      border-radius: 20px; /* Optional: Add rounded corners */
      width: 100%;
      height: 100%;
      animation-name: none;
      animation-delay: 0;
    }

    .et_pb_empty_slide .et_pb_slide_description {
      background-color: transparent;
    }

    @media (max-width: 479px) {
      .et_pb_slide {
        height: auto;

        img {
          max-height: 300px !important;
        }
      }
    }
  }

  .cpc-home-main-campaign-progress-module {
    z-index: 3;
    width: 100% !important;
    max-width: max-content !important;
  }

  @media screen and (min-width: 981px) {
    .cpc-home-main-links-row {
      .et_pb_blurb_0,
      .et_pb_blurb_1 {
        position: relative;

        &::after {
          content: "";
          height: 10px;
          width: 10px;
          position: absolute;
          top: 50%;
          right: -10px;
          border-radius: 50%;
          background-color: var(--primary-color);
        }
      }
    }
  }

  .cpc-home-about-us-row {
    display: flex;
    align-items: center;
    gap: 20px;

    @media (max-width: 767px) {
      & {
        flex-direction: column-reverse;
      }
    }
  }

  .top-ten-church-campaigns {
    margin-bottom: 3rem;
    max-height: 250px;
  }

  .cpc-home-top-ten-churches-left-col {
    /* max-height: 650px;
    display: grid;
    grid-template-rows: 32px 75px 55px 1fr;
    gap: 16px; */

    .et_pb_code {
      overflow-y: auto;
    }

    /* &::after {
      content: "";
      height: 100px;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      pointer-events: none;
      background: linear-gradient(
        0deg,
        rgb(246, 246, 246) 0%,
        rgba(246, 246, 246, 0.6) 66%,
        rgba(246, 246, 246, 0) 100%
      );
    } */

    @media (max-width: 767px) {
      & {
        max-height: none;
        display: flex;
        flex-direction: column;
        gap: 0;

        &::after {
          display: none;
        }
      }
    }
  }

  /* Video overlay */
  #overlay-6016 {
    display: flex;
    align-items: center;

    &.hideoverlay iframe {
      display: none;
    }
  }

  #overlay_unique_id_6016 {
    .et_pb_image_wrap {
      position: relative; /* Ensure positioning for overlay and play button */
      display: inline-block;
      overflow: hidden; /* Prevent overlay and play button from spilling outside the image */
      transition: background-color 0.3s ease-in-out; /* Smooth scaling effect */

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3); /* Subtle dark overlay */
        z-index: 1; /* Place it above the image */
        pointer-events: none; /* Ensure it doesn’t interfere with clicks */
      }

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60px; /* Diameter of the circle */
        height: 60px;
        background-color: white; /* White circular background */
        border-radius: 50%; /* Make it a circle */
        z-index: 2; /* Place it above the overlay */

        /* Play triangle */
        clip-path: polygon(30% 20%, 30% 80%, 75% 50%);
      }
    }

    &:hover .et_pb_image_wrap::after {
      background-color: #ef3c40;
    }
  }

  /* Search inputs for Walker/Churches lists */
  .search-filter-input-text {
    border: none !important;
    border-radius: 10px !important;
  }

  .search-filter-field {
    .search-filter-input-text__input {
      border: none !important;
      border-radius: 10px !important;
      padding-top: 14px !important;
      padding-bottom: 14px !important;
    }
  }

  /* Search and Filter Autocomplete */

  .search-filter-component-popup {
    .search-filter-component-combobox-base__listbox-option {
      cursor: pointer;
    }
  }

  /* Search and Filter spinner */
  .search-filter-query__spinner {
    display: none;

    &.search-filter-query__spinner--show {
      display: flex;
      margin-top: -4rem;
    }
  }

  /* Register Here page */

  #cpc-register-page-churches,
  #cpc-donor-page-walkers {
    width: 80%;
    max-width: 750px;
    border-radius: 20px;
    background-color: var(--offwhite);
    padding: 40px;
    margin: 20px auto;
    overflow: auto;

    &#cpc-register-page-churches:not(.cpc-register-here-church-search-row) {
      margin: 0 auto;
      padding: 0;
      opacity: 0;
      overflow: hidden;
      max-height: 0;
      transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    }

    .cpc-church-no-church-link-container {
      padding: 20px 0;

      a {
        &::after {
          content: " >";
        }
      }
    }

    /* Will be toggled on by JS when there's search input */
    #cpc-find-your-church-results-module .search-filter-query,
    #cpc-donate-find-walker-results-module {
      /* display: none; */
    }

    &#cpc-register-page-walkers,
    &#cpc-register-page-churches.show {
      overflow: auto;
      opacity: 1;
      max-height: 1800px;
      padding: 40px;
      margin: 20px auto;
    }

    .search-filter-query {
      .cpc-church-list-container {
        display: flex;
        flex-direction: column;

        .cpc-church-list__header,
        .cpc-church-list__footer {
          display: flex;
          justify-content: space-between;
          margin: 16px 0;
          width: 100%;
        }

        .cpc-church-list {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;

          a {
            height: max-content;
          }
        }
      }
    }

    @media (max-width: 767px) {
      & {
        padding: 40px 20px !important;
        width: 100%;
      }
    }
  }

  .cpc-church-list {
    @media (max-width: 980px) {
      & {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
      }
    }
  }

  /* Hide username field (we'll use email instead) */
  #charitable-registration-form {
    #charitable_field_user_login {
      display: none;
    }
  }

  .charitable-submit-field {
    input[name="preview-campaign"] {
      display: none;
    }
  }

  /* Donation page */
  #cpc-donor-page-walkers {
    .cpc-walker-list-container {
      .church-campaign-item {
        p {
          color: var(--black);
        }
      }
    }
  }

  .cpc-button-row.cpc-donate-page-header-buttons {
    max-width: 100%;
    width: max-content;
    margin: 0 auto;

    .et_pb_button {
      min-width: 0;
    }
  }

  .cpc-general-donation-title,
  .cpc-general-donation-form {
    display: none;
  }

  /* Event Info page */
  .cpc-event-page-general-info-section {
    @media (max-width: 980px) {
      .et_pb_image_wrap,
      img {
        width: 100%;
      }
    }
  }

  /* Remove Footer Sponsor title text */

  .cpt-sponsors h2 {
    display: none;
  }

  /* 404Page Bullet point Styles */

  @media screen and (min-width: 981px) {
    .cpc-home-main-links-row {
      .et_pb_blurb_0_tb_body,
      .et_pb_blurb_1_tb_body {
        position: relative;

        &::after {
          content: "";
          height: 10px;
          width: 10px;
          position: absolute;
          top: 50%;
          right: -10px;
          border-radius: 50%;
          background-color: var(--primary-color);
        }
      }
    }
  }

  /* Contact Page Styles */

  .gform_wrapper form .gform_fields {
    grid-row-gap: 20px !important;
  }

  .gform_wrapper form .gfield_label {
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #222222 !important;
    line-height: 21.6px !important;
    margin: 0px 0px 4px 0px !important;
  }

  .gform_wrapper form input[type="submit"] {
    background-color: var(--primary-button-background-color) !important;
    color: var(--primary-button-color) !important;
    box-shadow: var(--primary-button-box-shadow);
    border: 1px solid var(--primary-button-border-color) !important;
    padding: 15px 40px 15px 40px !important;
    font-size: 16px;
    font-weight: 400;
  }

  .gform_wrapper form input {
    background-color: #ffffff;
    padding: 10px !important;
    border: 1px solid var(--secondary-color) !important;
    border-radius: var(--button-border-radius) !important;
  }

  .gform_wrapper form .gform_required_legend {
    display: none;
  }

  .gform_heading {
    display: none;
  }

  body .gform_wrapper input {
    color: black !important;
    font-size: 1em !important;
  }

  body .gform_wrapper input::placeholder,
  body .gform_wrapper textarea::placeholder {
    color: gray !important;
    font-size: 16px !important;
  }

  /* FAQ */

  .page-id-14223 .et_pb_section_0 .et_pb_column_4_4 {
    margin-right: auto !important;
  }

  .et_pb_toggle_content a,
  .et_pb_toggle_content a:hover {
    color: #fff !important;
    text-decoration: underline !important;
  }

  .et_pb_video_1 .et_pb_video_play {
    margin-top: -21px !important;
    margin-left: -41px !important;
  }

  .video-icon .et_pb_image_wrap::before {
    content: "" !important;
    position: absolute !important;
    top: 41% !important;
    left: 44% !important;
    width: 60px !important;
    height: 60px !important;
    background: #ef3c40 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    border-radius: 50px !important;
  }

  .gaw-redbar div {
    border-right: 4px solid #ef3c40;
    padding-right: 1rem;
    margin-bottom: 1rem;
  }

  .gaw-redbar-right div {
    border-left: 4px solid #ef3c40;
    padding-left: 1rem;
    margin-bottom: 1rem;
    margin-left: -80px;
  }

  #divi-divibars-container-17789 .divibars-close > span {
    color: #213430;
    font-weight: bold;
  }
}