/* Overrides for Foundation Style */

.button {
}

body.foundation {
  scroll-behavior: smooth;

  p {
    line-height: 1.4em;
  }

  header#page_header {
    position: fixed;
    width: 100%;
    max-width: 100%;

    .nest {
      max-width: 100%;
      padding: 0 3em 0 2rem;
    }
    nav {
      margin-top: 0.75em;
      .nav-wrapper {
        width: 100%;
      }

      li a {
        color: white;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
      }
      li#home {
        margin-right: auto;
        a {
          background-image: url("/assets/dsf_4c_rev-88a801a9.svg");
          background-size: contain;
          height: 90px;
          width: 220px;
          position: relative;
          top: -5px;
        }
      }

      li#donate a {
        background-color: var(--color-brand-blue);
      }
    }
  }

  section.button_bar {
    li a {
      background-color: var(--color-brand-blue-screen) !important;
      background-image: url("/assets/dsf_blue_circle-3315cde8.svg") !important;
      color: var(--color-brand-blue) !important;
    }
  }

  #intro_text {
    background: #2a2625;
    background: linear-gradient(
      180deg,
      rgba(42, 38, 37, 1) 0%,
      rgba(1, 31, 67, 1) 100%
    );
    margin: 0;
    padding: 1.5em;
    position: fixed;
    top: 0;
    left: 0;
    right: 50%;
    bottom: 0;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
    font-size: 2em;
    font-weight: bold;
    text-align: left;

    h1 {
      font-size: 3rem;
      font-weight: 600;
      line-height: 2.875rem;
      text-transform: uppercase;
    }

    p {
      font-size: 1.25rem;
      line-height: 1.5rem;
    }

    ul.socials {
      list-style-type: none;
      margin: 0;
      padding: 0;
      position: absolute;
      bottom: 1.5em;
      left: 1.5em;

      li {
        display: inline-block;

        img {
          height: 40px;
          margin: 0 10px 0 0;
          opacity: 0.6;
          transition:
            opacity 0.3s,
            transform 0.3s;

          &:hover {
            opacity: 1;
            transform: scale(1.1);
          }
        }
      }
    }
  }

  section#mission,
  section#grants,
  section#education,
  section#about {
    background: var(--color-brand-blue);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: white;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2em;
    width: 50%;
    margin-left: 50%;
    scroll-margin-top: 0;

    .card {
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      padding: 2em;
      width: 80%;
      margin: 0 auto;
      backdrop-filter: blur(20px);
    }

    h2 {
      color: white;
      font-size: 1.5rem;
      font-weight: 700;
    }
  }

  section#mission {
    background-image: url("/assets/mission_bkgnd-08909eb8.jpg");
    margin-top: -130px;
  }

  section#grants {
    background-image: url("/assets/foundation_chevron_bkgnd_light-792a151b.png");
  }

  section#education {
    background-image: url("/assets/foundation_chevron_bkgnd_dark-4c05b835.png");
  }

  section#about {
    background-image: url("/assets/foundation_chevron_bkgnd_night-e77412ab.jpg");
  }

  footer#page_footer {
    background: var(--color-brand-blue) url("/assets/arrow_watermark-074f9182.svg");
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: center;

    img {
      max-height: 100px;
      margin-bottom: 2em;

      &#dsf-logo {
        height: 75px;
        position: relative;
        left: -70px;
      }
    }
  }

  section#support_dsa {
    h2 {
      color: var(--color-brand-blue);
    }
  }
}