@import "tailwindcss/theme";
@import "../variables/theme.css";
@import "../patterns/navigation.css";

.pageHeader {
  @apply sticky top-0 z-50;

  &:has(.header-navOpen) {
    @apply fixed top-0 left-0 w-full;
  }
}

.pageSectionNavigation {
  @apply sticky z-40;

  top: var(--spacing-56);
  transition: transform 0.3s ease;
}

.pageSectionNavigation--slideUp {
  transform: translateY(-100%);
}

.pageMeta {
  @apply relative grid;

  gap: var(--spacing-24);
  padding-bottom: var(--spacing-sm-sm);

  @variant md {
    padding-bottom: var(--spacing-md-sm);
  }

  @variant lg {
    padding-bottom: var(--spacing-lg-sm);
  }

  &:has(.pageTab--slideUp, .pageTab--slideDown) {
    @variant md {
      padding-bottom: var(--spacing-96);
    }
  }

  &:has(.pageTab--slideUp) .tab-container {
    @variant md {
      margin-inline: 0;
    }
  }

  &:has(.pageTab--reset) {
    @variant md {
      padding-bottom: var(--spacing-md-sm);
    }

    @variant lg {
      padding-bottom: var(--spacing-lg-sm);
    }
  }
}

.pageHeading {
  padding-top: calc(var(--spacing-sm-xl) + 48px + 20px);
  padding-bottom: 20px;

  @variant md {
    padding-top: var(--spacing-md-xl);
    padding-bottom: 0;
  }

  @variant lg {
    padding-top: var(--spacing-lg-xl);
  }
}

.pageTab {
  @apply fixed z-30 w-full;

  top: var(--spacing-56);
  grid-row-end: 1;
  transition: transform 0.3s;

  @variant md {
    @apply relative top-0;

    grid-row: 2;
  }
}

.pageTab--withSectionNavigation {
  top: var(--spacing-104);

  @variant md {
    @apply top-0;
  }
}

.pageTab--slideUp {
  transform: translateY(-100%);

  @variant md {
    @apply fixed z-30 w-full;

    top: var(--spacing-56);
    transform: translateY(0);
  }

  /* &.pageTab--withSectionNavigation {
    @variant md {
      top: var(--spacing-56);
    }
  } */
}

.pageTab--slideDown {
  @variant md {
    @apply z-10;

    transform: translateY(calc(100% - 1px));
  }

  @variant lg {
    transform: translateY(calc(100% + var(--spacing-12)));
  }
}

.pageTab--reset {
  @variant md {
    @apply relative top-0 transition-none;

    transform: translateY(0);
  }

  @variant lg {
    transform: translateY(0);
  }
}

.pageTabSlideLine {
  @apply absolute left-0 h-1 w-full;

  bottom: var(--spacing-sm-sm);
  transform: translateY(calc((var(--spacing-104) + 2px) * -1));

  @variant md {
    bottom: var(--spacing-md-sm);
  }

  @variant lg {
    bottom: var(--spacing-lg-sm);
  }
}

.pageContent {
  padding-bottom: var(--spacing-sm-margin-with-footer);

  @variant md {
    padding-bottom: var(--spacing-md-margin-with-footer);
  }

  @variant lg {
    padding-bottom: var(--spacing-lg-margin-with-footer);
  }
}

.pageSection {
  padding-top: var(--spacing-sm-margin-section);

  @variant md {
    padding-top: var(--spacing-md-margin-section);
  }

  @variant lg {
    padding-top: var(--spacing-lg-margin-section);
  }
}

.pageBack {
  padding-block: var(--spacing-sm-xs);

  @variant md {
    padding-block: var(--spacing-md-xs);
  }

  @variant lg {
    padding-block: var(--spacing-lg-xs);
    padding-inline: 102px;
  }
}

.pageIndent {
  @variant lg {
    padding-inline: calc(8.5% - 10px);
  }
}

.pageFooter {
  @apply relative z-10;

  margin-top: calc((var(--spacing-24) + 1px) * -1);

  @variant lg {
    margin-top: calc((var(--spacing-32) + 1px) * -1);
  }
}

.pageStickyContainer {
  height: var(--page-sticky-container-height, 120dvh);

  @variant pointer-coarse {
    height: var(--page-sticky-container-height, 150dvh);
  }
}