/* Shared site shell: header, navigation, drawer and footer.
   Used by the Elementor homepage and every native secondary template. */

.th-header {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(180deg, #6B1814 0%, #7A201A 100%);
  /* 这里原本有 backdrop-filter: blur(9px)。背景是全不透明渐变，模糊本身看不出效果，
     但它会让 .th-header 成为「fixed 子元素的包含块」—— 移动端抽屉（.th-menu，position: fixed）
     因此被锚到页头在文档流中的位置：滚到底部打开菜单时，抽屉落在 y = -滚动距离 处（实测 -15348px），
     用户必须滚回顶部才看得到。2026-09-22 移除。 */
}

/* 二级页吸顶，顶栏在 Hero 上方而不是压住标题。 */
body.tao-shell-page:not(.home) .th-header {
  position: sticky;
}

.th-nav {
  width: min(1240px, calc(100% - 64px));
  height: 84px;
  display: grid;
  grid-template-columns: max-content 1fr max-content max-content;
  align-items: center;
  gap: 22px;
  margin-inline: auto;
}

.th-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
}

.th-brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-family: var(--tao-font-display), serif;
  font-size: 1.6rem;
  line-height: 1;
}

.th-brand strong {
  display: block;
  color: #fff;
  font-size: 1.28rem;
  letter-spacing: -.01em;
  line-height: 1.05;
}

.th-brand small {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, .82);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.th-menu {
  display: flex;
  align-items: stretch;
  height: 84px;
  margin-left: auto;
}

.th-menu-item {
  position: relative;
  display: flex;
  align-items: center;
}

.th-menu-item > a {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 84px;
  padding-inline: 13px;
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .085em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease-out;
}

.th-menu-item > a:hover,
.th-menu-item > a:focus-visible {
  color: #f4ddd6;
}

/* 下拉三角：mask SVG，避免 flex 子项把边框三角压成「L」形 */
.th-chev {
  flex: 0 0 10px;
  align-self: center;
  width: 10px;
  height: 10px;
  margin-left: 6px;
  border: 0 !important;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M2.1 3.8 6 7.7l3.9-3.9 1.1 1.1L6 9.9 1 4.9z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M2.1 3.8 6 7.7l3.9-3.9 1.1 1.1L6 9.9 1 4.9z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .88;
  transform: none;
  transition: transform .2s ease-out;
}

.th-menu-item:hover .th-chev,
.th-menu-item:focus-within .th-chev,
.th-menu-item.is-open .th-chev {
  transform: rotate(180deg);
}

.th-dropdown {
  position: absolute;
  top: 72px;
  left: 0;
  width: 272px;
  padding: 12px;
  border: 1px solid rgba(122, 32, 26, .08);
  border-radius: 22px;
  background: var(--tao-color-cream);
  box-shadow: 0 24px 44px rgba(50, 23, 20, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .22s ease-out, transform .22s ease-out, visibility .22s;
}

.th-menu-item:hover .th-dropdown,
.th-menu-item:focus-within .th-dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.th-dropdown a {
  display: block;
  padding: 12px 14px;
  border-radius: 14px;
  color: #2f2320;
  font-size: .86rem;
  text-decoration: none;
  transition: background-color .18s ease-out, color .18s ease-out;
}

.th-dropdown a:hover,
.th-dropdown a:focus-visible {
  color: var(--tao-color-brand);
  background: #fbf3ef;
}

.th-nav-cta .elementor-button,
a.th-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 21px;
  border: none;
  border-radius: 999px;
  background: #fff;
  color: var(--tao-color-brand) !important;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
  transition: background-color .2s ease-out, color .2s ease-out;
}

/* 只改按钮本身，避免 Elementor 外层 widget 出现长方形底 */
.th-nav-cta.elementor-widget,
.th-nav-cta.elementor-element {
  background: transparent !important;
  box-shadow: none !important;
}
.th-nav-cta .elementor-button:hover,
.th-nav-cta .elementor-button:focus-visible,
a.th-nav-cta:hover,
a.th-nav-cta:focus-visible {
  background: #f9eee8 !important;
  color: var(--tao-color-brand-dark) !important;
}

/* Hamburger (hidden on desktop). */
.th-menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  place-content: center;
  gap: 5px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.th-menu-btn span {
  width: 24px;
  height: 2px;
  display: block;
  background: #fff;
  transition: transform .22s ease-out, opacity .22s ease-out;
}

@media (max-width: 1100px) {
  .th-nav { gap: 15px; }
  .th-menu-item > a { padding-inline: 8px; font-size: .72rem; letter-spacing: .06em; }
  .th-nav-cta .elementor-button,
  a.th-nav-cta { padding-inline: 15px; }

  /* 小笔电（901–1100px）里品牌 + 菜单 + CTA 会顶破容器造成横向滚动，
     这里收窄两侧留白并压紧间距，保证不出现横向滚动条。 */
  .th-nav { width: calc(100% - 40px); gap: 6px; }
  .th-menu-item > a { padding-inline: 5px; letter-spacing: 0; font-size: .68rem; }
  .th-nav-cta .elementor-button,
  a.th-nav-cta { padding-inline: 10px; font-size: .76rem; }
}

@media (max-width: 900px) {
  /* 这里原来有 body.tao-shell-page { padding-top: 70px }（按"固定页头"留位），
     但二级页页头是 sticky（见上方 16 行，在文档流内、本身占位），
     结果手机端顶部多出一条 70px 白色空带。2026-09-22 移除。 */

  .th-nav {
    width: calc(100% - 42px);
    height: 70px;
    display: flex;
  }

  .th-menu,
  .th-nav-cta {
    display: none;
  }

  /* Drawer */
  body.th-menu-open { overflow: hidden; }

  .th-menu-backdrop {
    position: fixed;
    z-index: 990;
    inset: 0;
    display: block;
    border: 0;
    background: rgba(22, 14, 12, .46);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease-out, visibility .25s;
  }

  body.th-menu-open .th-menu-backdrop { opacity: 1; visibility: visible; }

  .th-header { z-index: 1000; }

  .th-menu.is-open {
    position: fixed;
    z-index: 1001;
    top: 70px;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(88vw, 370px);
    height: calc(100dvh - 70px);
    display: block;
    padding: 20px 22px 34px;
    overflow-y: auto;
    border: 0;
    background: var(--tao-color-cream);
    box-shadow: -18px 20px 45px rgba(30, 17, 14, .18);
  }

  .th-menu.is-open .th-menu-item { display: block; }

  .th-menu.is-open .th-menu-item > a {
    min-height: 50px;
    height: auto;
    padding: 0 7px;
    border-bottom: 1px solid var(--tao-color-line);
    color: var(--tao-color-ink);
  }

  .th-menu.is-open .th-dropdown {
    position: static;
    width: auto;
    display: none;
    padding: 0 0 8px 12px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .th-menu.is-open .th-menu-item.is-open .th-dropdown { display: block; }

  .th-menu.is-open .th-dropdown a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 9px 8px;
    color: var(--tao-color-muted);
    font-size: .8rem;
  }

  .th-menu.is-open .th-chev { margin-left: auto; }

  .th-menu-btn {
    position: relative;
    z-index: 1002;
    display: grid;
    margin-left: auto;
  }

  body.th-menu-open .th-menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.th-menu-open .th-menu-btn span:nth-child(2) { opacity: 0; }
  body.th-menu-open .th-menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 640px) {
  .th-nav { width: calc(100% - 48px); }
  .th-brand small { display: none; }
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: 0.75rem;
  z-index: 100001;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: #fff;
  color: var(--tao-color-brand, #771d18);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
}

.th-nav-cta--drawer { display: none; }
@media (max-width: 900px) {
  .th-nav-cta--header { display: none; }
  .th-menu.is-open .th-nav-cta--drawer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin-top: 1rem;
    white-space: nowrap;
  }
}

/* 客户 9.18 追加需求：移动端的「Pedir presupuesto」按钮改红底白字，更醒目 */
@media (max-width: 900px) {
  .th-nav-cta .elementor-button,
  a.th-nav-cta,
  a.th-nav-cta--drawer,
  .th-menu.is-open .th-nav-cta--drawer {
    background: var(--tao-color-brand, #771d18) !important;
    color: #fff !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .22);
  }

  .th-nav-cta .elementor-button:hover,
  .th-nav-cta .elementor-button:focus-visible,
  a.th-nav-cta:hover,
  a.th-nav-cta:focus-visible {
    background: var(--tao-color-brand-dark, #56100e) !important;
    color: #fff !important;
  }
}