section h2 {
  color: var(--color-brand-orange);
  font-size: var(--headline-two);
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

section#inside_head {
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  border-radius: 15px;
  height: 500px;
  margin: 1em;
  padding: 210px 1em;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 2em);

  .nest {
    z-index: 1000 !important;
    position: relative;
  }

  h1 {
    color: var(--color-brand-orange);
    font-size: 3.5rem;
    font-weight: 600;
    margin: 0 0 0 4rem;
  }

  .gradient {
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 0)
    );
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
  }
}

section#inside_head + section#intro_text {
  margin-top: 280px;
}

section#support_dsa {
  margin-top: 2em;
  .nest {
    background-color: var(--color-brand-blue-screen);
    border-radius: 15px;
    padding: 4em;
    text-align: left;
  }
  h2 {
    color: var(--color-brand-orange);
    font-size: var(--headline-two);
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0.5em;
    text-transform: uppercase;
  }
  p {
    font-size: 1.5rem;
    line-height: 1.4;
    margin-bottom: 0;
    text-align: left;
    width: 100%;
  }
}

section#intro_text {
  text-align: center;
  margin: 2em auto;
  .nest {
    background-color: var(--color-brand-blue-screen);
    border-radius: 15px;
    padding: 4em;
    text-align: left;
  }
  h2 {
    color: var(--color-brand-orange);
    font-size: var(--headline-two);
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0.5em;
    text-transform: uppercase;
  }
  p {
    font-size: 1.5rem;
    line-height: 1.4;
    margin-bottom: 0;
    text-align: left;
    width: 100%;
  }
}

section.button_bar {
  margin-top: 2em;

  ul {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
  }

  li {
    flex-basis: 30%;
  }
}

/* header#page_header .nest {
  max-width: 1375px;
  padding: 0 3em !mportant;
} */

body.pages.index {
  main {
    padding-top: 50px;
  }

  header#page_header {
    background: none !important;
    /* .nest {
      max-width: 1325px;
      padding: 0 1em;
    } */
  }

  section#home_feature {
    .nest {
      background-color: var(--color-brand-orange);
      background-image: url("/assets/surfside_3-3deda170.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: 15px;
      height: 515px;
      overflow: hidden;
      padding: 4em;
      position: relative;
    }

    h1 {
      color: white;
      font-weight: 600;
      margin: 0;
      position: relative;
      top: 210px;
      z-index: 10;
    }

    a#feature_cta {
      color: white;
      position: relative;
      top: 330px;
      text-decoration: none;
    }
  }

  section#intro_text {
    position: relative;
    overflow: hidden;

    .nest {
      background-color: var(--color-brand-orange);
      border-radius: 15px;
      position: relative;
      overflow: hidden;

      #animback {
        border-radius: 15px;
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        /* Ensure clipping context for child elements */
        contain: layout style paint;

        svg {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 100% !important;
          height: 100% !important;
          transform-origin: bottom right;
          /* Ensure SVG respects parent clipping */
          clip-path: inherit;
        }
      }
    }

    h2,
    p {
      position: relative;
      color: white;
      z-index: 10 !important;
    }

    .nest p.buttons-row {
      margin: 0 0 0 auto;

      .button-big {
        width: 33%;
      }
    }
  }

  section#hero_image {
    .nest {
      overflow: hidden;
      .hero-image {
        background-color: var(--color-brand-blue-screen);
        background-image: url("/assets/flag-b35c2383.jpg");
        background-size: cover;
        background-position: center;
        border-radius: 15px;
        height: 450px;
        padding: 4em;
        text-align: left;
      }
    }
    h2 {
      color: var(--color-brand-orange);
      font-size: var(--headline-two);
      font-weight: 600;
      margin-top: 0;
      margin-bottom: 0.5em;
      text-transform: uppercase;
    }
    p {
      font-size: 1.5rem;
      line-height: 1.4;
      margin-bottom: 0;
      text-align: left;
      width: 100%;
    }
  }

  section#three_up {
    .nest {
      background-color: var(--color-brand-orange-screen);
      border-radius: 15px;
      margin-top: 2em;
      padding: 4em;
    }
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;

      li {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 50px;
        line-height: 1.5em;
        padding-bottom: 2em;
        text-align: left;

        &:last-child {
          padding-bottom: 0;
        }

        div {
          flex-basis: 55%;
        }

        img {
          flex-basis: 45%;
          border-radius: 15px;
          max-width: 45%;
        }
      }
    }

    h3 {
      color: var(--color-brand-orange);
      font-size: 1.5rem;
      font-weight: 600;
      line-height: 1;
      margin-top: 0;
    }
    p {
      font-size: 1.25rem;
      line-height: 1.4;
    }
  }
}

/* ABOUT PAGE */

body.about {
  #who_we_are {
    text-align: center;
    padding-top: 1em;

    h2 {
      margin-bottom: 1em;
    }

    ul.team-members-list {
      list-style-type: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;

      li {
        flex-basis: 33%;
        text-align: center;
        margin-bottom: 2em;

        h3 {
          margin-bottom: 0.5em;
          line-height: 1.2em;
        }

        img {
          max-width: 60%;
        }

        p.title {
          margin-top: 0.25em;
          color: var(--color-brand-red);
        }
      }
    }
  }
}

#email_signup {
  form {
    margin-top: 1em;
  }

  .field {
    display: flex;
    justify-content: center;
    gap: 1em;
  }

  input[type="email"] {
    padding: 0.5em;
    width: 300px;
    border: 1px solid var(--color-brand-red);
    border-radius: 4px;
  }

  input[type="submit"] {
    background-color: var(--color-brand-red);
    color: white;
    border: none;
    cursor: pointer;

    &:hover {
      background-color: darken(var(--color-brand-red), 10%);
    }
  }
}

section#thank_you {
  text-align: center;
  padding: 4em 0;

  h1 {
    color: var(--color-brand-red);
    margin-bottom: 1em;
  }

  p {
    font-size: 1.2em;
    margin: 0 auto 2em;
    max-width: 600px;
  }

  /* .button {
    display: inline-block;
    background-color: var(--color-brand-red);
    color: white;

    &:hover {
      background-color: darken(var(--color-brand-red), 10%);
    }
  } */
}

body.network {
  #intro_text {
    height: auto;
    text-align: left;

    .nest {
      box-sizing: border-box;
    }

    p {
      width: 100%;
    }
  }

  #partners {
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;

      li {
        flex-basis: 20%;
        margin: 10px;
        text-align: center;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;

        img,
        svg {
          object-fit: contain;
          max-width: 100%;
          max-height: 100%;
        }
      }
    }
  }
}

body.learn {
  #inside_head {
    background-position: center;
  }
  #intro_text {
    text-align: left;

    li {
      font-size: 1.5em;
      margin-bottom: 0.5em;
    }
  }

  .nest {
    p {
      width: 100% !important;
    }
  }

  #slider_triptych {
    .nest {
      background-color: var(--color-brand-orange);
      border-radius: 15px;
      color: white;
      padding: 1em;
    }

    ul {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      list-style-type: none;
      gap: 3em;
      margin: 0;
      padding: 3em 1em;

      li {
        flex-basis: calc(50% - 1.5em);

        img {
          border-radius: 15px;
          max-width: 100%;
          height: 400px;
          min-width: 400px;
          object-fit: cover;
        }

        h3 {
          font-size: 1.5em;
          font-weight: 600;
          line-height: 1.167em;
          margin: 0;
          text-transform: unset;
        }

        h4 {
          font-size: 1.5em;
          font-weight: 600;
          margin: 1em 0 0 0;
          text-transform: uppercase;
        }

        p {
          font-size: 1.25em;
          font-weight: 500;
          line-height: 1.4em;
          margin-bottom: 0;
        }
      }
    }
  }

  @supports (animation-timeline: scroll()) {
    #slider_triptych {
      height: 850px;
      overflow: visible;
      view-timeline-name: --section-pin-tl;
      view-timeline-axis: block;

      .nest {
        height: 850px;
        position: sticky;
        top: 0;
        overflow: hidden;

        ul {
          flex-wrap: nowrap;
          height: 100vh;
          width: 2500px;
          transform: translateX(30px);

          /* Hook animation */
          will-change: transform;
          animation: linear move forwards;

          /* Link animation to view-timeline */
          animation-timeline: --section-pin-tl;
          animation-range: entry 700px exit 50px;

          li {
            width: 400px !important;
            flex-basis: 400px !important;
          }
        }
      }
    }
  }

  #speaking {
    box-sizing: border-box;
    padding: 2em 0;

    .nest {
      box-sizing: border-box;
      height: 100%;
      margin: 2em auto;
      padding: 0 1em;
    }

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;

      li {
        border-bottom: 1px solid var(--color-brand-blue);
        display: grid;
        grid-template-columns: 1fr 2fr;
        align-items: left;
        padding: 2em 0.5em;

        &:first-child {
          border-top: 1px solid var(--color-brand-blue);
        }

        p.date {
          font-size: 1.5em;
          margin: 0.25rem 0;
        }

        p.event {
          font-size: 2.25em;
          font-weight: 600;
          margin: 0.25rem 0;
        }

        p.location {
          font-size: 1.5em;
          margin: 0.25rem 0;
          font-style: italic;
        }
      }
    }
  }
}

body.donate {
  #donation_options {
    h3 {
      margin-top: 2em;
    }
    ul {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      list-style-type: none;
      margin: 0;
      padding: 0;
      max-width: 100%;

      li {
        flex-basis: 24%;
        gap: 1%;
        text-align: center;
        width: 24%;

        a {
          img {
            max-width: 100%;
            transition: transform 0.3s;

            &:hover {
              transform: scale(1.1);
            }
          }
        }
      }
    }
    p {
      text-align: center;
    }
  }
}

body.stablecoin_forum {
  #intro_text {
    .nest {
      background: url("/assets/stablebkgnd-1349afe2.jpg") no-repeat center center;
      background-size: cover;
      h1 {
        background-color: transparent;
        background-image: url("/assets/stablecoin_forum-74d8beb1.svg");
        background-size: contain;
        background-repeat: no-repeat;
        display: block;
        height: 150px;
        width: 500px;
        max-width: 100%;
        color: transparent;
        border: 0;
        overflow: hidden;
        text-indent: 100%;
        text-shadow: none;
        white-space: nowrap;

        margin: 0 auto;

        &:before {
          content: "";
          display: block;
          height: 100%;
          width: 0;
        }
      }
      p {
        text-align: center;
      }
    }
  }

  .nest {
    p {
      width: 100% !important;
    }
  }

  #participants {
    .nest {
      ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2%;
        list-style-type: none;
        padding: 0;
        margin: 0;

        li {
          background: radial-gradient(
            circle at bottom right,
            #c2e808,
            #f5fbd9 60%
          );
          border-radius: 15px;
          display: block;
          flex-basis: 23.5%;
          height: 245px;
          margin-bottom: 2%;
          padding: 2em;
          position: relative;
          overflow: hidden;

          img {
            display: block;
            max-height: 80px;
            position: absolute;
            bottom: 1em;
            right: 1em;
            mix-blend-mode: multiply;
          }

          p {
            font-size: 1.3125rem;
            font-weight: 500;
            line-height: 1.3;
            margin: 0;
          }
        }
      }
    }
  }

  #benefits {
    margin-top: 2em;
    .nest {
      background-color: var(--color-brand-scgreen);
      border-radius: 15px;
      padding: 4em;
      text-align: left;

      h2 {
        color: var(--color-brand-scyellow) !important;
      }

      p,
      li {
        color: white;
        font-size: 1.3125rem;
        line-height: 1.4em;
        margin-bottom: 0.75em;
      }
    }

    .join-button-container {
      margin-top: 2em;
      text-align: left;
    }

    a.join-button {
      background-color: var(--color-brand-scyellow);
      background-repeat: no-repeat;
      color: var(--color-brand-scgreen) !important;
      transition: background-color 0.5s ease;

      &:hover {
        background-color: var(--color-brand-scyellow-screen);
        color: var(--color-brand-scgreen);
      }
    }
  }

  .button-big {
    background-image: url("/assets/dsa_green_circle-5a9c6c9f.svg");
    background-color: var(--color-brand-scyellow-darkscreen);
    color: var(--color-brand-scgreen);
  }

  footer#page_footer {
    background-color: var(--color-brand-scgreen);
  }
}

/* Add styles for flash messages */
.flash-message {
  padding: 15px;
  margin: 0 0 20px;
  text-align: center;
  width: 100%;
}

.notice {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.alert {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* FLIP IMAGE ON EVENTS */
/* body.events {
  #inside_head {
    &::before {
      background-image: url("/assets/flag-b35c2383.jpg") !important;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: inherit;
      background-size: inherit;
      background-position: inherit;
      background-repeat: inherit;
      border-radius: inherit;
      transform: scaleX(-1);
      z-index: -1;
    }

    background-image: none !important;
  }
} */

/* REVERSE HEADER NAV COLORS ONLY DESKTOP OVERLAP */
@media (min-width: 768px) {
  body.network,
  body.about,
  body.events,
  body.publications {
    header#page_header {
      nav {
        a {
          color: white;
        }
        li a {
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        }
        li#home a {
          background-image: url("/assets/dsa_4c_rev-52090c01.svg");
          background-size: contain;
          height: 72px;
          width: 193px;
          text-shadow: none:
        }
        li#donate a {
          text-shadow: none;
        }
      }
    }
  }
}

/* REVERSE IMAGE HEADER H1 FOR LEGIBILITY */
body.network,
body.events,
body.about,
body.publications {
  section#inside_head {
    .nest {
      h1 {
        color: white;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
      }
    }
  }
}

body.stablecoin_forum,
body.memberships {
  h2 {
    color: var(--color-brand-scgreen) !important;
  }

  #intro_text {
    h2 {
      text-align: center;
    }
  }
  .button,
  a.button {
    background-color: var(--color-brand-scgreen);
  }
}

@keyframes move {
  from {
    transform: translateX(0px);
  }
  to {
    /* Move horizontally to the left */
    transform: translateX(-670px);
  }
}

body.contacts {
  .field {
    padding: 0.5em 0;
    label {
      font-weight: bold;
      font-size: 0.875em;
    }
    input, textarea {
      border: 1px solid #ccc;
      border-radius: 4px;
      display: inline-block;
      font-size: 1.25rem;
      margin-top: 0.5em;
      padding: 8px;
      width: 100%;
    }
    input[type=checkbox] {
      margin-top: 0;
      display: inline;
      float: left;
      width: 20px;
    }
    input[type=submit] {
      border: none !important;
    }
  }
}