/* Responsibility: Shared navigation geometry, route state and cross-page experience tokens. */

@media (min-width: 1280px) {
  html {
    scrollbar-gutter: stable both-edges;
  }
}

/* Shared navigation geometry: keep every action on one optical centerline and
   make secondary pages use the same shell proportions as the home page. */
.home-page .site-header,
.sub-page .site-header {
  position: sticky;
  top: 0;
  z-index: 300;
  padding-top: 12px;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.home-page .nav,
.sub-page .nav {
  box-sizing: border-box;
  width: min(calc(100% - 32px), 1220px);
  max-width: none;
  min-height: 0;
  margin: 0 auto;
  padding: 10px 12px 10px 22px;
  border: 1px solid rgba(18, 18, 18, 0.08);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 38px rgba(36, 31, 23, 0.09);
  backdrop-filter: blur(18px);
  font-family: "OPPO Sans 3", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.home-page .nav-actions,
.sub-page .nav-actions {
  width: 300px;
  flex: 0 0 300px;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.home-page .nav-link,
.home-page .nav-apply,
.sub-page .nav-link,
.sub-page .nav-apply {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-height: 44px;
  line-height: 1;
}

.home-page .nav-link,
.sub-page .nav-link {
  width: 84px;
  flex: 0 0 84px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}

.home-page .nav-apply,
.sub-page .nav-apply {
  width: 112px;
  flex: 0 0 112px;
  padding: 0 18px;
  white-space: nowrap;
  border-color: #111;
  border-radius: 22px;
  background: #111;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
}

.home-page .brand-logo,
.sub-page .brand-logo {
  width: 148px;
}

.home-page .nav-link,
.sub-page .nav-link {
  color: #3f3e39;
}

.home-page .nav-link:hover,
.sub-page .nav-link:hover {
  color: #000;
  background: rgba(17, 17, 17, 0.055);
}

.home-page .nav-link:hover,
.home-page .nav-apply:hover,
.sub-page .nav-link:hover,
.sub-page .nav-apply:hover {
  transform: none;
}

@media (max-width: 820px) {
  .home-page .site-header,
  .sub-page .site-header {
    padding-top: 10px;
  }

  .home-page .nav-link,
  .sub-page .nav-link {
    display: none;
  }

  .home-page .nav,
  .sub-page .nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    width: calc(100% - 32px);
    margin: 0 auto;
  }

  .home-page .nav-actions,
  .sub-page .nav-actions {
    width: auto;
    flex: 0 0 auto;
  }

  .home-page .nav-apply,
  .sub-page .nav-apply {
    width: 112px;
    min-width: 112px;
  }
}

@media (max-width: 640px) {
  .home-page .nav,
  .sub-page .nav {
    width: calc(100% - 32px);
    max-width: none;
    min-height: 0;
    margin: 0 auto;
    padding: 10px 12px;
    border-radius: 32px;
  }

  .home-page .brand-logo,
  .sub-page .brand-logo {
    width: min(132px, calc(100vw - 132px));
  }

  .home-page .brand,
  .sub-page .brand {
    flex: 1 1 auto;
    overflow: hidden;
  }

  .home-page .nav-actions,
  .sub-page .nav-actions {
    position: absolute;
    top: 50%;
    right: 16px;
    width: auto;
    min-width: 0;
    justify-content: flex-end;
    justify-self: end;
    gap: 8px;
    transform: translateY(-50%);
  }

  .home-page .nav-apply,
  .sub-page .nav-apply {
    width: 112px;
    flex: 0 0 112px;
    height: 44px;
    min-width: 112px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 22px;
    font-size: 14px;
  }
}

/* Route motion is coordinated once in app.js. Keeping the subpage container
   free of its own animation avoids the old double-enter / pale flash. */
.sub-page .detail-main,
.sub-page .form-main,
.sub-page .success-main {
  transform-origin: 50% 18%;
  animation: none;
}

.job-page .job-detail-hero,
.job-page .jd-section,
.job-page .detail-apply-card,
.job-page .detail-main > .back-link,
.form-main > .back-link,
.form-title .eyebrow,
.form-title h1,
.form-title p,
.form-main > .apply-note,
.application-form > .fieldset,
.application-form > .form-actions,
.success-page .success-panel {
  animation: none;
}

@keyframes qzContentBreathIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(0.994);
  }

  72% {
    opacity: 1;
    transform: translate3d(0, -2px, 0) scale(1.001);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.job-page.route-content-breath .job-detail-hero,
.job-page.route-content-breath .jd-section,
.job-page.route-content-breath .detail-apply-card,
.apply-page.route-content-breath .form-title .eyebrow,
.apply-page.route-content-breath .form-title h1,
.apply-page.route-content-breath .form-title p,
.apply-page.route-content-breath .form-main > .apply-note,
.apply-page.route-content-breath .application-form > .fieldset,
.apply-page.route-content-breath .application-form > .form-actions {
  animation: qzContentBreathIn 0.68s var(--ease-apple) backwards;
}

.job-page.route-content-breath .job-detail-hero { animation-delay: 70ms; }
.job-page.route-content-breath .jd-section { animation-delay: 150ms; }
.job-page.route-content-breath .jd-section + .jd-section { animation-delay: 210ms; }
.job-page.route-content-breath .detail-apply-card { animation-delay: 190ms; }

.apply-page.route-content-breath .form-title .eyebrow { animation-delay: 60ms; }
.apply-page.route-content-breath .form-title h1 { animation-delay: 90ms; }
.apply-page.route-content-breath .form-title p { animation-delay: 120ms; }
.apply-page.route-content-breath .form-main > .apply-note { animation-delay: 170ms; }
.apply-page.route-content-breath .application-form > .fieldset:nth-of-type(1) { animation-delay: 220ms; }
.apply-page.route-content-breath .application-form > .fieldset:nth-of-type(2) { animation-delay: 260ms; }
.apply-page.route-content-breath .application-form > .fieldset:nth-of-type(3) { animation-delay: 300ms; }
.apply-page.route-content-breath .application-form > .fieldset:nth-of-type(n + 4),
.apply-page.route-content-breath .application-form > .form-actions { animation-delay: 330ms; }

/* Experience polish: one shared motion rhythm and the same control geometry
   across home, role detail, application and success pages. */
:root {
  --qz-radius-control: 16px;
  --qz-radius-card: 28px;
  --qz-radius-nav: 32px;
  --qz-motion-fast: 160ms;
  --qz-focus: rgba(255, 212, 59, 0.72);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--qz-focus);
  outline-offset: 3px;
}

.home-page .nav,
.sub-page .nav {
  border-radius: var(--qz-radius-nav);
}

.home-page .job-card,
.sub-page .job-detail-hero,
.sub-page .jd-section,
.sub-page .detail-apply-card,
.sub-page .apply-note,
.sub-page .fieldset,
.sub-page .success-panel {
  border-radius: var(--qz-radius-card);
}

.sub-page input,
.sub-page select,
.sub-page textarea,
.sub-page .upload-zone,
.sub-page .select-trigger {
  border-radius: var(--qz-radius-control);
}

.home-page .btn,
.sub-page .btn {
  transition-duration: var(--qz-motion-fast);
}

.home-page .btn:active,
.sub-page .btn:active {
  transform: scale(0.985);
}

@media (max-width: 640px) {
  .home-page .nav-apply,
  .sub-page .nav-apply {
    height: 44px;
    min-height: 44px;
  }

  .sub-page input,
  .sub-page select,
  .sub-page textarea,
  .sub-page .select-trigger {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .job-page.route-content-breath .job-detail-hero,
  .job-page.route-content-breath .jd-section,
  .job-page.route-content-breath .detail-apply-card,
  .apply-page.route-content-breath .form-title .eyebrow,
  .apply-page.route-content-breath .form-title h1,
  .apply-page.route-content-breath .form-title p,
  .apply-page.route-content-breath .form-main > .apply-note,
  .apply-page.route-content-breath .application-form > .fieldset,
  .apply-page.route-content-breath .application-form > .form-actions {
    animation: none;
  }
}