/*
 * LAYOUT STYLES
 * Page-level structural elements: hero, sections, grids, containers
 */

header {
  position: absolute;
  width: 100%;
  height: 90px;
  z-index: 999;

  .header__bar {
    >.row {
      .js-header-item:first-child {
        padding-left: 0px;
      }

      .col-auto {
        min-width: 15%;
      }

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

  &.is-sticky {
    .header__bar {
      background-color: var(--e-global-color-text) !important;
      padding: 0px 1rem !important;

      .header__logo {
        img {
          height: 90% !important;
        }
      }
    }
  }

  .header__logo {
    height: 100%;

    .custom-logo-link {
      height: 100%;
      display: flex;
      align-items: center;

      img {
        height: 80%;
        width: auto;
      }
    }
  }

  .mobile-logo {
    display: flex;
    align-items: center;
    height: 100%;

    img {
      height: 100%;
      width: auto;
    }
  }

  .menu {
    .nav li a {
      font-size: var(--fs-body-s, 1rem);
      font-weight: var(--fw-medium);
      letter-spacing: 0.02em;
      text-transform: uppercase;

      &:hover {
        color: var(--e-global-color-highlight-secondary);
      }
    }

    .nav__submenu_item>a {
      font-size: var(--fs-body-s, 1rem);

      &:hover {
        color: var(--e-global-color-highlight-secondary);
      }
    }
  }
}

.footer {
  background-color: var(--e-global-color-on-tertiary) !important;

  .footer__logo {
    max-width: 3rem;

    img {
      width: 100%;
      height: auto;
    }
  }

  .footer__bottom {
    padding: 1rem 0px !important;
    background-color: var(--e-global-color-on-tertiary) !important;
  }

  .backButton {
    bottom: 2rem;
  }
}

.page-hero {
  min-height: clamp(60svh, 80vh, 90svh);
  padding-block: clamp(2rem, 6vw, 6rem);
  display: flex;
  align-items: center;
}

.page-section {

  &:not(.no-space):not(.bg-half) {
    padding: 8rem 0;
  }

  .cta-button {
    text-align: inherit !important;
  }

  &.bg-half {
    background-size: 45% 100% !important;
  }

  .page-section__content {
    --row-gap: 4rem;
    --column-gap: 4rem;
    aspect-ratio: 4/3;
    --row-gap: 1rem;
    --column-gap: 1rem;

    &:not([class*="align-"]) {
      justify-content: center;
    }
  }

  .page-section__visual {
    &.h-full {
      .elementor-widget-premium-img-layers-addon {
        .premium-img-layers-list-wrapper {
          height: 100%;

          .premium-img-layers-list-item:first-child {
            position: relative;
            height: 100%;

            img {
              height: 100% !important;
              object-fit: cover !important;
            }
          }
        }
      }
    }
  }

  &.page-section--secondary {
    background-color: var(--e-global-color-bg-secondary);

    .icon-card-grid {
      .service {
        background-color: var(--e-global-color-bg-primary);
      }
    }
  }
}

.page-section.page-section--primary+.page-section.page-section--primary,
.page-section.page-section--secondary+.page-section.page-section--secondary,
.page-section:not([class*="page-section--"])+.page-section:not([class*="page-section--"]),
.page-section+.page-section.page-section--primary,
.page-section.page-section--primary+.page-section {
  padding-top: 0px !important;
}

.section-info {
  font-size: var(--fs-body-m, 1rem);

  h2 {
    position: relative;
    display: flex;
    font-family: var(--font-family-secondary);
    font-size: 0.9em !important;
    letter-spacing: 0.05em;
    gap: 1em;
    color: var(--e-global-color-secondary);
    margin-bottom: 1em;
    text-transform: uppercase;

    &::before {
      content: "";
      display: flex;
      position: relative;
      margin-top: 0.6em;
      width: 4em;
      height: 1px;
      background-color: currentColor;
    }
  }

  h3 {
    font-family: var(--font-family-secondary);
    font-size: 2em !important;
    color: var(--e-global-color-primary);
    margin-bottom: 1em;
  }

  p {}

  &.theme-dark {
    color: var(--e-global-color-bg-primary);

    h2 {
      color: var(--e-global-color-secondary-bright);

      &::before {
        background-color: currentColor;
      }
    }

    h3 {
      color: var(--e-global-color-on-primary);
    }
  }
}

.section-caption {
  width: fit-content;
  font-size: var(--fs-body-m, 1rem);

  h2 {
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: var(--font-family-secondary);
    font-size: 0.9em !important;
    letter-spacing: 0.05em;
    gap: 1em;
    color: var(--e-global-color-secondary);
    margin-bottom: 1em;
    text-transform: uppercase;

    &::before {
      content: "";
      display: flex;
      position: relative;
      margin-bottom: 0.2em;
      width: 4em;
      height: 1px;
      background-color: currentColor;
    }
  }

  h3 {
    font-family: var(--font-family-secondary);
    font-size: 2em !important;
    color: var(--e-global-color-primary);
    margin-bottom: 1em;
  }

  p {}

  &.align-center {
    justify-content: center;
    align-items: center;
    text-align: center;

    h2 {
      align-items: center;
    }
  }
}

.section-caption,
.section-info,
.optimal-text-width {
  max-width: 65ch !important;
  /* margin-left: auto;
  margin-right: auto; */

  &.w-wide {
    max-width: 85ch !important;
  }
}

.project-single {
  font-size: 1rem;

  .project__overview {
    h2 {
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      font-family: var(--font-family-secondary);
      font-size: 1.125em !important;
      letter-spacing: 0.05em;
      gap: 1em;
      color: var(--e-global-color-secondary);
      margin-bottom: 0.5em;
      text-transform: uppercase;

      &::before {
        content: "";
        display: flex;
        position: relative;
        margin-bottom: 0.2em;
        width: 3em;
        height: 1px;
        background-color: currentColor;
      }
    }

    h3 {
      font-family: var(--font-family-secondary);
      font-size: 2em !important;
      color: var(--e-global-color-primary);
      margin-bottom: 0.5em;
    }
  }

  .project__summary {
    font-size: var(--fs-body-m, 1rem) !important;

    .text-sm {
      font-size: var(--fs-body-m, 1rem) !important;
      letter-spacing: 0.01em;
    }

    +.row {
      .text-xs {
        font-family: var(--font-family-secondary);
        font-size: 0.75em !important;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: var(--e-global-color-secondary-deep);
      }

      .text-sm {
        font-size: 1em;
        ;
        letter-spacing: 0.01em;
      }
    }

    &::after {
      content: "";
      display: block;
      width: 100%;
      height: 2px;
      /* background-color: var(--e-global-color-secondary);
      border-bottom: solid 1px var(--e-global-color-secondary-bright); */
      background: linear-gradient(to bottom, var(--e-global-color-secondary) 30%, var(--e-global-color-secondary-bright) 50%);
      margin-top: 2.5rem;
      margin-bottom: 1rem;
    }
  }
}

.project-content {
  margin-top: -4rem;
}