/* ============================================================================
 * GOATNJ — 样式表
 * ----------------------------------------------------------------------------
 * 本文件由 app/view/index/header.html 里原先的内联 <style> 抽出，另加首屏 Banner
 * 轮播的样式。之所以能这么搬：这些规则要么用 ID 选择器（#site-header …），要么
 * 是 Tailwind 里没有的自定义类（.side-tools / .reveal …），优先级都高于
 * Tailwind 的 preflight 和工具类，不受 CDN 运行时注入顺序影响。
 * ==========================================================================*/

/* ---- Header color states (transparent over hero -> solid on scroll) ---- */
#site-header { background-color: transparent; transition: background-color .3s ease, box-shadow .3s ease; }
#site-header .js-brand,
#site-header .js-navlink { color: #ffffff; }
#site-header .js-navlink:hover { color: #c9ced6; }
#site-header .js-navcta { background-color: #ffffff; color: #171717; }
#site-header .js-burger-line { background-color: #ffffff; }

#site-header.is-scrolled {
  background-color: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
#site-header.is-scrolled .js-brand,
#site-header.is-scrolled .js-navlink { color: #171717; }
#site-header.is-scrolled .js-navlink:hover { color: #737373; }
#site-header.is-scrolled .js-navcta { background-color: #171717; color: #ffffff; }
#site-header.is-scrolled .js-burger-line { background-color: #171717; }

/* Mobile menu is a dark panel: keep header text light while it is open */
/* backdrop-filter 也要清掉：菜单展开时页头压在面板上方（面板 z-40 < 页头 z-50），
   如果此时还带着 .is-scrolled 的模糊，页头那 80px 会把面板顶部糊掉。 */
#site-header.menu-open { background-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
#site-header.menu-open .js-brand,
#site-header.menu-open .js-navlink { color: #ffffff; }
#site-header.menu-open .js-burger-line { background-color: #ffffff; }

/* 菜单展开时收起右下角那两个浮标（悬浮客服 999 / 回到顶部 998）。
   它们的 z-index 远高于菜单面板，不收起来就会浮在深色面板上，
   和「菜单在最上层」冲突。这里靠兄弟选择器：.side-tools 和 .back-to-top
   在 body 里都是 #site-header 后面的兄弟节点。 */
#site-header.menu-open ~ .side-tools,
#site-header.menu-open ~ .back-to-top {
  display: none;
}

/* ---- Logo 图片（.js-logo，取自后台 dba_config filepath='logo' 的 pic） ----
 * 上传的 logo 是「黑色字 + 透明底」，而它出现的两种底色都是深的：
 * 页头首屏是透明底压在深色 hero 上、移动端菜单展开时是深色面板、页脚是 near-black。
 * 所以默认反相成白色；只有页头滚过 40px 变白底时（.is-scrolled）才还原成 logo 原色。
 * brightness(0) 先把整张图压成纯黑、invert(1) 再翻成纯白 —— 无论原图是否带色都成立。 */
#site-header .js-logo,
footer .js-logo { filter: brightness(0) invert(1); transition: filter .3s ease; }

/* 页头滚到白底后：深色 logo 才看得见 */
#site-header.is-scrolled .js-logo { filter: none; }

/* 移动端菜单展开时页头又回到深色底（同 is-scrolled 特异性，靠顺序覆盖） */
#site-header.menu-open .js-logo { filter: brightness(0) invert(1); }

/* ---- Anchor offset for the fixed header ---- */
section[id] { scroll-margin-top: 88px; }

/* ---- Scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---- Prevent any horizontal scrollbar ---- */
html, body { max-width: 100%; overflow-x: hidden; }

/* ==================== 右侧悬浮客服（保留自旧版 footer.html） ==================== */
.side-tools {
  position: fixed;
  right: 20px;
  top: 70%;
  transform: translateY(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.side-tool-item {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  position: relative;
  color: #444444;
  text-decoration: none;   /* 电话/邮箱/WhatsApp 三项现在是 <a>，去掉下划线 */
}
.side-tool-item:hover,
.side-tool-item:focus-visible {
  background: #09958b;
  color: #fff;
}
.side-tool-item:focus-visible {
  outline: 2px solid #09958b;
  outline-offset: 2px;
}
.side-tool-item .tool-tip {
  position: absolute;
  right: 58px;
  background: #1A1D24;
  color: #fff;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  /* 这里原本是 pointer-events: none —— 已去掉。浮层在图标左边、与图标隔了
     10px 空隙，鼠标从图标挪到浮层上时若浮层不接收指针事件，:hover 就会断，
     内容立刻隐藏。隐藏态靠上面的 visibility: hidden 挡住点击就够了。 */
}
/* 用 :focus 而不是 :focus-visible：手机上点一下只产生 :focus，
   :focus-visible 只对键盘导航生效 —— 用后者的话，触屏根本弹不出电话号码。 */
.side-tool-item:hover .tool-tip,
.side-tool-item:focus .tool-tip {
  opacity: 1;
  visibility: visible;
}
.side-tool-item .qr-popup {
  width: 160px;
  position: absolute;
  right: 58px;
  bottom: -80px;
  background: #fff;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.12);
  opacity: 0;
  visibility: hidden;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  /* 同上：pointer-events: none 已去掉，否则鼠标移到二维码上会立刻收起 */
}
.side-tool-item .qr-popup img {
  width: 160px;
  /* 高度按图片自身比例走：微信二维码是竖版（本例 329x432，上方带昵称/地区），
     写死高度会把它压扁 */
  height: auto;
  display: block;
}
.side-tool-item .qr-popup p {
  text-align: center;
  font-size: 12px;
  color: #444444;
  margin-top: 6px;
}
/* 同上，:focus 是为了触屏 —— 微信那项是个 tabindex="0" 的 div，
   手机点一下聚焦就弹出二维码，点别处失焦收起。 */
.side-tool-item:hover .qr-popup,
.side-tool-item:focus .qr-popup {
  opacity: 1;
  visibility: visible;
}

/* 图标和浮层之间那道 10px 的空隙（浮层 right: 58px，图标宽 48px）：
   盖一条透明的「桥」，让鼠标从图标滑到浮层上时 :hover 不断。
   以后若改浮层的 right 值，这里的 -10px / 10px 要跟着改成 (right - 48)。 */
.side-tool-item .tool-tip::after,
.side-tool-item .qr-popup::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -10px;
  width: 10px;
}

/* ==================== 回到顶部 ==================== */
.back-to-top {
  position: fixed;
  bottom: 40px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #09958b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all .3s cubic-bezier(.4,0,.2,1);
  z-index: 998;
  box-shadow: 0 4px 16px rgba(9, 149, 139, 0.3);
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: #067a72;
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}
/* Native date/time pickers render with a light icon on white fields (contact form) */
input[type="date"], input[type="time"] { min-height: 46px; }

/* ==================== 首屏 Banner 轮播 ====================
   数据来自 dba_news（后台「轮播图」），渲染在 index.html 的 #hero 里，
   切换逻辑见 goatnj.js 的 initHeroCarousel()。 */

.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;   /* 隐藏的那一屏不能挡住按钮点击 */
  transition: opacity 1s ease;
}
.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* 左右切换按钮 */
.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  display: none;          /* 窄屏默认隐藏，改用左右滑动 */
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 9999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color .3s ease, border-color .3s ease;
}
.hero-arrow svg { width: 18px; height: 18px; }
.hero-arrow:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.hero-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hero-arrow--prev { left: 20px; }
.hero-arrow--next { right: 20px; }

@media (min-width: 768px) {
  .hero-arrow { display: inline-flex; }
}

/* 圆点指示器 */
.hero-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .4);
  cursor: pointer;
  transition: background-color .3s ease;
}
.hero-dot.is-active { background: #fff; }
.hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ==================== 手机版（≤640px） ==================== */

/* 首屏高度：手机浏览器的地址栏会伸缩，100vh 指的是「地址栏收起时」那个高度，
   比当前可视区高一截 —— 首页首屏底部的轮播圆点会被顶到屏幕外点不到。
   svh = 小视口高度，按地址栏可见来算，不会被顶出去。
   模板上那个 min-h-screen 留着当不支持 svh 时的兜底：这里是 ID 选择器，
   优先级高于 Tailwind 的 .min-h-screen 工具类，所以能稳定覆盖它。 */
#hero { min-height: 100vh; }
@supports (height: 100svh) {
  #hero { min-height: 100svh; }
}

/* 悬浮客服 + 回到顶部：窄屏改贴底叠放。
   原来 .side-tools 是 top: 70% + translateY(-50%) 按视口高度定位的，
   而 .back-to-top 是 bottom: 40px 按底边定位 —— 竖屏够高时相安无事，
   一旦视口变矮（手机横屏，或地址栏没收起），那一列 204px 会直接压在
   回到顶部上，两个按钮叠在一起点不准。改成两者都贴底之后，
   不管视口多高，中间恒定留 16px：84 - (20 + 48) = 16。 */
@media (max-width: 640px) {
  .side-tools {
    top: auto;
    bottom: 84px;
    right: 12px;
    transform: none;
  }
  .back-to-top {
    right: 12px;
    bottom: 20px;
  }

  /* iOS Safari 聚焦 font-size < 16px 的输入框时会自动放大整页，而且退不回去 ——
     表单里所有 input 都是 text-sm(14px)，iPhone 上点一下就被顶大。
     这里强制 16px 挡住缩放。
     用 #quote-form-el 做前缀是为了赢过 Tailwind 的 .text-sm：
     元素选择器(0,0,1)比不过类(0,1,0)，加上 ID(1,0,1) 才压得住。 */
  #quote-form-el input,
  #quote-form-el select,
  #quote-form-el textarea {
    font-size: 16px;
  }
}