/* Shared site shell. Page-specific composition stays in each page stylesheet. */

:root {
  --txf-shell-max: 1160px;
  --txf-shell-gutter: 24px;
  --txf-shell-line: rgba(112, 94, 65, 0.22);
  --txf-shell-muted: #665f55;
  --txf-shell-focus: #087f76;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body.page-home,
body.page-service,
body.page-privacy {
  min-width: 0;
  overflow-x: clip;
  text-size-adjust: 100%;
}

.page-home *,
.page-service *,
.page-privacy * {
  min-width: 0;
}

.page-home a:focus-visible,
.page-home button:focus-visible,
.page-service a:focus-visible,
.page-service button:focus-visible,
.page-privacy a:focus-visible,
.page-privacy button:focus-visible {
  outline: 2px solid var(--txf-shell-focus) !important;
  outline-offset: 4px;
}

.page-home main [id],
.page-service main [id],
.page-privacy main [id] {
  scroll-margin-top: 24px;
}

.page-home .site-header,
.page-service .topbar,
.page-privacy .topbar {
  border-bottom-color: var(--txf-shell-line) !important;
}

.page-home .nav {
  width: min(var(--txf-shell-max), calc(100% - 48px)) !important;
  margin-inline: auto !important;
}

.page-service .topbar {
  width: 100% !important;
  max-width: var(--txf-shell-max);
  margin-inline: auto !important;
}

.page-privacy .topbar {
  width: min(var(--txf-shell-max), 100%) !important;
  max-width: var(--txf-shell-max) !important;
  margin-inline: auto !important;
}

.page-home .brand,
.page-service .brand,
.page-privacy .brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: var(--txf-ink) !important;
  font-family: var(--txf-sans) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.page-home .brand img,
.page-service .brand img,
.page-privacy .brand img {
  width: 42px !important;
  height: 24px !important;
  flex: 0 0 auto;
  object-fit: contain !important;
}

.page-home .nav-links,
.page-service .topbar nav {
  align-items: center;
}

.page-home .nav-links a,
.page-service .topbar nav a,
.page-privacy .topbar .back {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  color: var(--txf-shell-muted) !important;
  text-decoration: none !important;
}

.page-home .nav-links a:hover,
.page-service .topbar nav a:hover,
.page-privacy .topbar .back:hover {
  color: var(--txf-ink) !important;
}

.page-home footer,
.page-service footer,
.page-privacy footer {
  color: var(--txf-shell-muted) !important;
  font-family: var(--txf-sans) !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
}

.page-home .footer-inner,
.page-service footer,
.page-privacy footer {
  gap: 20px !important;
  align-items: center !important;
}

.page-home .footer-links,
.page-service .footer-links,
.page-privacy .footer-links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 18px !important;
  align-items: center !important;
}

.page-home footer a,
.page-service footer a,
.page-privacy footer a {
  color: inherit !important;
  text-decoration-color: rgba(102, 95, 85, 0.48) !important;
  text-underline-offset: 4px;
}

.page-home footer a:hover,
.page-service footer a:hover,
.page-privacy footer a:hover {
  color: var(--txf-ink) !important;
}

.page-home .beian-link,
.page-service .beian-link,
.page-privacy .beian-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.page-home .beian-icon,
.page-service .beian-icon,
.page-privacy .beian-icon {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 auto;
}

@media (max-width: 720px) {
  :root {
    --txf-shell-gutter: 16px;
  }

  html {
    scroll-padding-top: 16px;
  }

  .page-home .nav {
    width: calc(100% - 32px) !important;
  }

  .page-home .brand,
  .page-service .brand,
  .page-privacy .brand {
    gap: 10px !important;
    font-size: 20px !important;
  }

  .page-home .brand img,
  .page-service .brand img,
  .page-privacy .brand img {
    width: 40px !important;
    height: 23px !important;
  }

  .page-service .topbar nav a {
    min-height: 40px;
  }

  .page-home .footer-inner,
  .page-service footer,
  .page-privacy footer {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  .page-home .footer-links,
  .page-service .footer-links,
  .page-privacy .footer-links {
    justify-content: flex-start !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}