/* List of media queries
@media (width <= calc(399 / 16 * 1rem))
@media (width >= calc(400 / 16 * 1rem)) -- for footer
@media (width >= calc(600 / 16 * 1rem))
@media (width >= calc(1000 / 16 * 1rem))
@media (width >= calc(1248 / 16 * 1rem)) -- for section title padding
@media (width >= calc(1260 / 16 * 1rem)) -- for section items grid
*/

@layer component {
  button {
    cursor: pointer;
    background-color: var(--colour-button);
    width: 100%;
    font-family: var(--font-display);
    font-size: var(--font-size-button);
    font-weight: 400;
    text-transform: lowercase;
    font-variant-caps: small-caps;
    color: var(--colour-text-light);
    border: none;
    border-radius: 6px;
    padding-block: 0.2em 0.3em;
    margin-block: 0.5rem;
    transition: opacity 180ms ease-in-out;

    &:hover {
      opacity: 0.8;
    }
  }

  /* Top Navigation */
  .topnav {
    /* Flex-Parent 1 */
    .topnav__wrapper {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 0.6rem;

      @media (width >= calc(1000 / 16 * 1rem)) {
        flex-direction: row;
        align-items: flex-end;
        gap: 0;
      }
    }

    /* Child 1 of Flex-Parent 1; Parent 2.1 */
    .topnav__title-and-lang {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      flex-direction: row;

      @media (width >= calc(600 / 16 * 1rem)) {
        padding-bottom: 1rem;
      }

      @media (width >= calc(1000 / 16 * 1rem)) {
        gap: 2rem;
        padding-bottom: 0.1rem; /* added to fix the baseline alignment issue between different fonts */
      }
    }

    /* Child 2 of Flex-Parent 1; Parent 2.2 */
    .topnav__links {
      gap: 2rem;
      justify-content: space-between;

      @media (width <= calc(399 / 16 * 1rem)) {
        gap: 0;
      }
    }

    /* Child 1 of Parent 2.1
    .topnav__homelink {
    }
     */

    .topnav__language,
    .topnav__links {
      display: flex;
      gap: 2rem;
      list-style-type: none;
      padding: 0;
    }

    /* Child 2 of Parent 2.1; Parent 3 */
    .topnav__language {
      gap: 1rem;

      @media (width >= calc(1000 / 16 * 1rem)) {
        padding-bottom: 0.1rem; /* added to fix the baseline alignment issue between different fonts */
      }
    }

    /* Children of Parent 3 */
    .topnav__lang-item {
      border-right: 2px solid var(--colour-border);
      padding-right: 1rem;
    }

    .topnav__lang-item:last-child {
      border-right: none;
      padding-right: 0;
    }

    .topnav__lang-link {
      font-family: var(--font-secondary);
      font-weight: 350;
      font-size: var(--font-size-language);
      font-variant-caps: small-caps;
      color: var(--colour-text-dark-secondary);
      transition: opacity 180ms ease-in-out;
      &:hover {
        opacity: 0.7;
      }
    }

    /* Children of Parent 2.2 */
    .topnav__item {
      border-right: 2px solid var(--colour-border);
      padding-right: 16%;

      @media (width >= calc(1000 / 16 * 1rem)) {
        padding-right: 2rem;
      }

      @media (width <= calc(399 / 16 * 1rem)) {
        padding-right: 2rem;
      }
    }

    .topnav__item:last-child {
      border-right: none;
      padding-right: 0;
    }

    .topnav__link {
      font-family: var(--font-display);
      font-size: var(--font-size-topnav);
      font-weight: 300;
      font-variant-caps: small-caps;
      color: var(--colour-text-dark-secondary);
      transition: opacity 180ms ease-in-out;
      &:hover {
        opacity: 0.7;
      }
    }
  }

  /* Elements throughout the page */
  .section-title {
    margin-inline: auto;

    @media (width >= calc(1248 / 16 * 1rem)) {
      width: 584px;
      margin-inline: 0;
    }

    h2 {
      background-color: var(--colour-secondary-bg);
      padding-block: 0.4rem 0.7rem;
      padding-left: calc(24 / 16 * 1rem);

      @media (width >= calc(1248 / 16 * 1rem)) {
        padding-left: 84px;
      }
    }
  }

  /* Works Section */
  .works {
    padding-bottom: 1rem;

    /* .works__wrapper {
    }
*/

    /* .works__wrapper-secondary {
    }
*/

    .works__item {
      max-width: calc(500 / 16 * 1rem);
      padding-bottom: 2rem;
    }

    .works__project-link {
      transition: opacity 180ms ease-in-out;
      &:hover {
        opacity: 0.7;
      }
    }

    /* .works__project-thumbnail {
    } */

    .works__project-title {
      display: block;
      padding-block: 0.3rem 0.5rem;
    }

    .works__project-industry {
      border-top: 2px solid var(--colour-border);
      padding-top: 0.3rem;
      padding-bottom: 0.3rem;
      font-family: var(--font-display);
      font-size: var(--font-size-project-subtitle);
      font-weight: 300;
      text-transform: lowercase;
      font-variant-caps: small-caps;
    }

    .works__project-tags {
      font-size: var(--font-size-project-tags);
      font-weight: 400;
      color: var(--colour-text-tags);
    }

    .works__more {
      grid-column: 1 / -1;
      max-width: 100%;
      border-top: 2px solid var(--colour-border);
      padding-top: 0.3rem;

      @media (width >= calc(1260 / 16 * 1rem)) {
        max-width: calc(
          100% - 1rem
        ); /* to make the end of the line align with top elements on desktop */
      }
    }

    .works__more-link {
      transition: opacity 180ms ease-in-out;
      &:hover {
        opacity: 0.7;
      }
    }
  }

  /* About Section */
  .about {
    .about__item {
      max-width: calc(500 / 16 * 1rem);
    }

    .about__paragraph {
      padding-bottom: 2rem;
      text-indent: 1.5em;
      line-height: 1.35em;

      @media (width >= calc(1260 / 16 * 1rem)) {
        padding-bottom: 0;
      }
    }

    .dropcap-paragraph {
      &::first-letter {
        initial-letter: 2;
        -webkit-initial-letter: 2;
      }
      text-indent: 0;

      @media (width >= calc(600 / 16 * 1rem)) {
        &::first-letter {
          initial-letter: 3;
          -webkit-initial-letter: 3;
        }
        text-indent: 0.7em;
      }
    }
  }

  /* Contact Section */
  .contact {
    a {
      color: var(--colour-text-dark-secondary);
      text-decoration: underline;
      text-decoration-color: var(--colour-border);
      transition: opacity 180ms ease-in-out;
      &:hover {
        opacity: 0.7;
      }
    }

    .contact__email {
      grid-column: 1 / -1;
      max-width: 100%;
      border-bottom: 2px solid var(--colour-border);
      padding-bottom: 20px;

      .email-address {
        display: block;
        margin-block: 0.2em;
        font-weight: 500;
        font-size: var(--font-size-email-address);
      }
    }

    .contact__border-bottom {
      grid-column: 1 / -1;
      max-width: 100%;
      border-bottom: 2px solid var(--colour-border);
      @media (width >= calc(1260 / 16 * 1rem)) {
        max-width: calc(
          100% - 1rem
        ); /* to make the end of the line align with top elements on desktop */
      }
    }

    .contact__item {
      max-width: calc(500 / 16 * 1rem);
      margin-top: 10px;

      @media (width >= calc(1260 / 16 * 1rem)) {
        margin-top: 20px;
      }

      .contact-form {
        padding-block: 6px;
      }

      .contact-form__name-items {
        display: flex;
        gap: 10px;
      }

      fieldset {
        border: none;
        padding-block: 0;
      }

      .input-titles {
        display: block;
        padding-block: 12px 6px;
        font-size: var(--font-size-contact-form-field-title);
        font-weight: 400;

        @media (width >= calc(600 / 16 * 1rem)) {
          padding-block: 18px 6px;
        }
      }

      .input-titles-first {
        padding-block: 0px 6px;
      }

      .scrollbar-text {
        padding-inline: 15px;
        padding-block: 6px;
        border: 1px solid var(--colour-border);
        border-radius: 6px;
        width: auto;
        height: 500px;
        overflow: scroll;

        @media (width >= calc(1260 / 16 * 1rem)) {
          height: 606px;
        }
      }

      .input_text-field {
        text-indent: 1em;
        font-family: var(--font-primary);
        font-weight: 300;
        font-size: var(--font-size-contact-form-field-input);
        width: 100%;
        padding-block: 0.5em;
        border-radius: 6px;
        border: 1px solid var(--colour-border);
        outline: none;
        box-shadow: var(--colour-border) 1px 1px 3px;
        resize: none;
      }

      .input_long-text {
        height: 10em;
        line-height: 1.5em;
        text-indent: 0;
        padding-left: 1em;
      }

      .submit {
        padding-bottom: 20px;
        border-bottom: 2px solid var(--colour-border);
      }

      .privacy-policy {
        text-indent: 1.5em;

        h1,
        h2 {
          text-indent: 0;
        }

        h1 {
          font-size: var(--font-size-privacy-policy-h1);
          margin-bottom: 0.2em;
        }

        h2 {
          margin-block: 1em 0.4em;
          padding-block: 0.3em 0.4em;
          padding-inline: 0.5em;
          background-color: var(--colour-secondary-bg);
          font-size: var(--font-size-privacy-policy-h2);
          font-weight: 400;
          text-wrap: pretty;
        }

        h3 {
          margin-block: 0.5em 0.3em;
          font-size: var(--font-size-privacy-policy-h3);
          text-indent: 0.6em;
        }

        h4 {
          font-family: var(--font-display);
          margin-block: 0.2em;
          text-transform: lowercase;
          font-variant-caps: small-caps;
          font-size: var(--font-size-privacy-policy-h4);
          color: var(--colour-text-dark-primary);
        }

        p,
        ul {
          font-size: var(--font-size-privacy-policy-text);
        }

        ul {
          list-style-type: disc;
          text-indent: 0.1em;
        }

        li {
          padding-bottom: 0.2em;

          &::marker {
            color: var(--colour-list);
          }
        }

        strong {
          font-weight: 550;
        }

        a {
          color: var(--colour-text-dark-secondary);
          text-decoration: underline;
          text-decoration-color: var(--colour-border);
          transition: opacity 180ms ease-in-out;
          &:hover {
            opacity: 0.7;
          }
        }

        .privacy-policy__update-date {
          font-family: var(--font-primary);
          font-style: italic;
          padding-block: 0.8em 1em;
        }
      }

      .toggle-button-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;

        .toggle-button {
          position: relative;
          display: inline-block;
          width: 36px;
          height: 20px;

          @media (width >= calc(600 / 16 * 1rem)) {
            width: 48px;
            height: 26px;
          }
        }

        .toggle-button input {
          opacity: 0;
          width: 0;
          height: 0;
        }

        .toggle-button__slider {
          position: absolute;
          cursor: pointer;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border-radius: 34px;
          background-color: var(--colour-border);
          -webkit-transition: 0.4s;
          transition: 0.4s;
        }

        .toggle-button__slider:before {
          position: absolute;
          content: "";
          height: 13px;
          width: 13px;
          left: 4px;
          bottom: 4px;
          border-radius: 50%;
          background-color: white;
          -webkit-transition: 0.4s;
          transition: 0.4s;

          @media (width >= calc(600 / 16 * 1rem)) {
            width: 18px;
            height: 18px;
          }
        }

        input:checked + .toggle-button__slider {
          background-color: var(--c-grey-dark);
        }

        input:focus + .toggle-button__slider {
          box-shadow: 0 0 1px var(--c-grey-dark);
        }

        input:checked + .toggle-button__slider:before {
          -webkit-transform: translateX(15px);
          -ms-transform: translateX(15px);
          transform: translateX(15px);

          @media (width >= calc(600 / 16 * 1rem)) {
            -webkit-transform: translateX(21px);
            -ms-transform: translateX(21px);
            transform: translateX(21px);
          }
        }
      }

      #privacyScrollbar {
        display: none;

        @media (width >= calc(1260 / 16 * 1rem)) {
          display: block;
        }
      }
    }
  }

  footer {
    .footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      padding-block: 20px;
      font-size: var(--font-size-footer-text);

      @media (width >= calc(400 / 16 * 1rem)) {
        justify-content: space-between;
        align-items: flex-start;
        flex-direction: row;
      }
    }
  }
}