/* ----------------------------------------------------------------------------
   Tablet Portrait Styles
   ---------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Global Type */

  h1 {
    font-size: 2.5rem !important;
  }

  h2 {
    font-size: 2rem !important;
  }

  h3 {
    font-size: 1.5rem !important;
  }

  p {
    font-size: 1rem !important;
  }

  header#page_header {
    .nest {
      padding: 0 1em;
    }
    nav {
      .nav-wrapper {
        width: 100%;
        margin-right: 1em;
        justify-content: space-between;
        /* padding-left: 2em; */
      }

      .mobile-nav-toggle {
        display: block !important;
        /* margin-right: 1em; */
        border-radius: none;
        background: none;
        outline: none;
        padding: 0;
        border: none;
      }

      .hamburger {
        display: block;
        width: 36px;
        height: 3px;
        background: var(--color-brand-red);
        position: relative;
        transition: all 0.3s ease;

        &::before,
        &::after {
          content: "";
          position: absolute;
          left: 0;
          width: 36px;
          height: 3px;
          background: var(--color-brand-red);
          transition: all 0.3s ease;
        }

        &::before {
          top: -8px;
        }

        &::after {
          bottom: -8px;
        }
      }

      &.active {
        .hamburger {
          background: transparent; /* Hide the middle line */

          &::before {
            transform: rotate(45deg);
            top: 0;
          }

          &::after {
            transform: rotate(-45deg);
            bottom: 0;
          }
        }
      }

      .mobile-nav-menu {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        top: 100px;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        padding: 1em;
        z-index: 1001;
      }

      .mobile-nav-menu.active {
        display: block;
      }

      .mobile-nav-menu ul {
        flex-direction: column;
        padding: 0;
      }

      .mobile-nav-menu ul li {
        margin: 0;
        padding: 0.5em 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      }

      .mobile-nav-menu ul li a {
        color: black;
        font-size: 1.25rem;
      }

      .mobile-nav-menu ul .button {
        background: none;
        font-size: 1.25rem;
      }

      .mobile-nav-menu ul li:last-child {
        margin-top: 1em;
      }
    }
  }

  footer#page_footer {
    padding-top: 0;
    margin-top: 1em;
    .nest {
      flex-direction: row;
      flex-wrap: wrap;
      padding: 3em 1em 1em 1em;
    }
    .col {
      flex-basis: 100%;
      padding-left: 1.5em;
    }
    .col:nth-child(n + 2) {
      flex-basis: 49%;
      padding-top: 1em;
    }

    #dsa-logo {
      left: 0 !important;
    }

    #footer_socket {
      height: 100px;
      margin-top: 2em;
      padding: 0 1em;
      .nest {
        flex-direction: column;
        padding: 0 1.5em;

        p.copyright {
          margin-bottom: 1em;
        }
      }
    }
  }

  section#inside_head {
    height: 370px;
    margin-top: 140px;
    padding-top: 150px;
    z-index: 1 !important;

    .nest {
      z-index: 1 !important;
    }

    h1 {
      font-size: 2.5rem;
      margin: 0 0 0 0.5rem;
      z-index: 1 !important;
      word-wrap: balance;
    }
  }

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

  .buttons-row {
    margin: 1em 0 0 auto !important;
    text-align: left;

    a.button-big {
      background-size: 12%;
      font-size: 1.5em;
      padding: 0.5em 1em;
      width: 50%;
    }
  }
}

/* ----------------------------------------------------------------------------
   PHONE STYLES
   ---------------------------------------------------------------------------- */
@media (max-width: 767px) {

  /* Global Type */

  h1 {
    font-size: 2rem !important;
  }

  h2 {
    font-size: 1.75rem !important;
  }

  h3 {
    font-size: 1.25rem !important;
  }

  p {
    font-size: 0.875rem !important;
  }

  header#page_header {
    nav {
      .hamburger {
        width: 24px;
        height: 2px;

        &::before,
        &::after {
          content: "";
          width: 24px;
          height: 2px;
        }

        &::before {
          top: -6px;
        }

        &::after {
          bottom: -6px;
        }
      }
    }
  }

  footer#page_footer {
    padding-top: 0;
    margin-top: 1em;
    .nest {
      flex-direction: row;
      flex-wrap: wrap;
      padding: 3em 1em 1em 1em;
    }
    .col {
      flex-basis: 100%;
      padding-left: 1.5em;
    }
    .col:nth-child(n + 2) {
      flex-basis: 49%;
      padding-top: 1em;
    }

    #dsa-logo {
      left: 0 !important;
    }

    #footer_socket {
      height: 100px;
      margin-top: 2em;
      padding: 0 1em;
      .nest {
        flex-direction: column;
        padding: 0 1.5em;

        p.copyright {
          margin-bottom: 1em;
        }
      }
    }
  }

  section.button_bar {
    li a {
      background-size: 30px;
      background-position: 97% !important;
      font-size: 1.25rem !important;
      padding: 0.5em 1em !important;
    }
  }

  .buttons-row {
    margin: 1em 0 0 auto !important;
    text-align: left;

    a.button-big {
      background-size: 13%;
      font-size: 1em;
      padding: 0.5em 1em;
      width: 60%;
    }
  }

  section#inside_head {
    height: 370px;
    margin-top: 140px;
    padding-top: 150px;
    z-index: 1 !important;

    .nest {
      z-index: 1 !important;
    }

    h1 {
      font-size: 2.5rem;
      margin: 0 0 0 0.5rem;
      z-index: 1 !important;
      word-wrap: balance;
    }
  }

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

  section.button_bar {
    padding: 0 1em;
    ul {
      flex-direction: column;
      li {
        margin-bottom: 1em;
      }
    }
  }

  section#intro_text,
  section#secondary_text,
  section#speaking,
  section#recent_publications,
  section#support_dsa {
    padding: 0 1em;
    margin: 0;

    .nest {
      padding: 2em 1.5em !important;
    }

    h1 {
      font-size: 2.5rem;
    }

    h2 {
      font-size: 2rem;
    }

    p,
    li {
      font-size: 1rem !important;
      width: 100%;
    }
  }

  section#support_dsa {
    padding: 0 1em 0 1em;

    p {
      width: 100%;
    }
  }

  body.pages.index {
    main {
      padding-top: 0;
    }
    section#home_feature {
      padding: 0 1em;

      .nest {
        height: 300px;
        padding: 1.5em !important;
      }

      h1 {
        font-size: 1.5rem !important;
        top: 135px !important;

        span {
          font-size: 1rem !important;
        }
      }
    }

    section#intro_text {
      margin-top: 1em;
    }

    section#three_up {
      padding: 1em;

      .nest {
        padding: 1.5em;
        margin-top: 0;
      }

      ul {
        li {
          flex-direction: column;
          gap: 10px;

          img {
            border-radius: 10px !important;
            margin-bottom: 1em;
            order: 0;
            flex-basis: 100%;
            max-width: 100%;
          }
          div {
            order: 1;
          }
        }
      }
    }
  }

  body.pages.learn {
    #inside_head {
      background-position: top center;
      padding-top: 120px;
      .nest h1 {
        margin-right: 2em;
      }
    }
    #slider_triptych {
      max-width: 100%;
      margin-top: 1em;
      padding: 0 1em;

      .nest {
        padding: 0 1em;
      }

      h3 {
        margin-top: -10px;
      }

      ul {
        li {
          flex-basis: 100%;
          min-width: auto;

          img {
            min-width: auto;
            max-height: 250px;
            width: 100%;
          }
        }
      }
    }

    #speaking {
      padding: 0;

      .nest {
        padding: 0;
        margin: 0;
      }
      p.view-all {
        margin-bottom: 0;
      }
      ul {
        li {
          display: flex;
          flex-direction: column;
          padding: 1em 0.5em;
        }
      }
    }

    #recent_publications {
      padding: 0;

      .nest {
        padding: 0;
        margin: 0;
      }
      p.view-all {
        margin-bottom: 0;
      }

      h3 {
        line-height: 1.2em;
      }
      ul {
        li {
          display: flex;
          flex-direction: column;
          padding: 1em 0.5em;
        }
      }
    }
  }

  body.about {
    #inside_head h1 {
      text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(0, 0, 0, 0.9);
    }
    #who_we_are {
      margin-top: 1em;
      ul.team-members-list {
        flex-direction: column;
        padding: 0;

        li {
          margin: 0;
          padding: 1em 0;
          /* border-bottom: 1px solid rgba(0, 0, 0, 0.1); */

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

          h3 {
            font-size: 0.875rem;
          }
        }
      }
    }
  }

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

      .nest {
        padding-right: 0;
      }

      p {
        width: 100%;
      }
    }

    #partners {
      ul {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0;

        li {
          margin: 0;
          padding: 1em 0;
          flex-basis: 50%;
          width: 50%;

          &:nth-child(even) {
            a img {
              width: 80% !important;
            }
          }

          a {
            width: 80%;

            img {
              width: 100% !important;
            }
          }
        }
      }
    }
  }

  body.donate {
    #donation_options {
      .nest {
        padding: 1em;
      }

      h3 {
        text-align: center;
        line-height: 1.2em;
      }
      ul {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0;
        gap: 2%;

        li {
          flex-basis: 49%;
          width: 49%;
          margin: 0;
          padding: 1em 0;
        }
      }
    }
  }

  body.stablecoin_forum {
    section#intro_text {
      .nest {
        padding: 2.5em !important;

        h1 {
          height: 75px;
        }
      }
    }
    #participants {
      margin-top: 1em;
      .nest {
        ul {
          gap: 4%;
          li {
            flex-basis: 48%;
            margin-bottom: 4%;
            height: 200px;
            padding: 1em;
          }
        }
      }
    }
    #benefits {
      margin: 1em 0;
      .nest {
        padding: 2em;
        p,
        li {
          font-size: 1.125rem;
        }

      }
    }
  }

  body.foundation {
    background-color: rgba(42, 38, 37, 1);

    header#page_header {
      position: absolute;
    }

    .hamburger {
      background: var(--color-brand-skyblue-reverse) !important;

      &::before,
      &::after {
        background: var(--color-brand-skyblue-reverse) !important;
      }
    }
    #intro_text {
      h1 {
        line-height: 1em;
      }
      position: relative;
      ul.socials {
        margin-top: 2em;
        position: relative;
        bottom: 0;
        left: 0;
        width: 100%;

        li {
          width: 40px;
        }
      }
    }
    section#mission,
    section#grants,
    section#education,
    section#about {
      height: auto;
      margin-left: 0;
      padding: 2em 0;
      width: 100%;
    }

    section#mission {
      margin-top: 0;
    }
  }
}

.publication-detail {
  .nest {
    padding 0 1em;
  }
}