/* =========================================================================
   SoccerJersey-theme — 顶部导航下拉（HOME + NATIONAL TEAMS + LEAGUES 一级分类菜单）
   全站加载；配色/字体沿用 style.css 设计令牌，与导航栏风格一致。
   下拉仅展示一级分类（无二级飞出面板），面板高度随内容自适应、无滚动条。
   ========================================================================= */

/* LEAGUES 容器项：作为下拉的定位锚点 */
.sj-nav-item { position: relative; }

/* ---------- 一级下拉面板（分类列表） ---------- */
.sj-nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  width: 320px;
  background: #fff;
  color: rgb(var(--heading-color));
  border: 1px solid rgb(var(--border-color));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
/* 悬停 / 键盘聚焦展开，移开自动收起 */
.sj-nav-item:hover .sj-nav-dropdown,
.sj-nav-item:focus-within .sj-nav-dropdown {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.sj-nav-dropdown__list { display: block; }

/* 一级分类行 */
.sj-nav-dropdown__item {
  position: relative;
  display: flex;
  align-items: center;
  border-block-end: 1px solid rgb(var(--border-color));
}
.sj-nav-dropdown__item:last-child { border-block-end: none; }
.sj-nav-dropdown__link {
  flex: 1 1 auto;
  padding: 13px 16px;
  font-family: var(--heading-font-family);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.sj-nav-dropdown__item:hover { background: rgba(var(--border-color), 0.25); }
.sj-nav-dropdown__item:hover > .sj-nav-dropdown__link { color: rgb(14, 185, 24); }

/* 窄屏下桌面导航本就隐藏（style.css <1000px），此处兜底防溢出 */
@media screen and (max-width: 999px) {
  .sj-nav-dropdown { display: none; }
}

/* =========================================================================
   移动端抽屉菜单（<1000px 由汉堡按钮开合；桌面端永不显示）
   ========================================================================= */

/* 滚动锁定（打开时由 JS 挂在 <html> 上） */
html.sj-drawer-lock { overflow: hidden; }

.sj-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
  pointer-events: none;
}
.sj-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

/* 遮罩 */
.sj-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.sj-drawer.is-open .sj-drawer__overlay { opacity: 1; }

/* 左侧滑出面板 */
.sj-drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(320px, 86vw);
  background: #fff;
  color: rgb(var(--heading-color));
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.28s ease;
  box-shadow: 12px 0 32px rgba(0, 0, 0, 0.12);
  overflow-y: auto;
}
.sj-drawer.is-open .sj-drawer__panel { transform: translateX(0); }

/* 面板头部：标题 + 关闭按钮 */
.sj-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-block-end: 1px solid rgb(var(--border-color));
}
.sj-drawer__title {
  font-family: var(--heading-font-family);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.sj-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-inline-end: -8px;
  border: none;
  background: transparent;
  color: rgb(var(--heading-color));
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.sj-drawer__close:hover { opacity: 0.65; transform: rotate(90deg); }

/* 一级导航行 */
.sj-drawer__list { padding: 8px 0 24px; }
.sj-drawer__link {
  display: block;
  padding: 14px 20px;
  font-family: var(--heading-font-family);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: rgb(var(--heading-color));
}
.sj-drawer__link:hover { color: rgb(14, 185, 24); }

/* LEAGUES 子分类（缩进展示） */
.sj-drawer__sublist { margin: 0; padding: 0; }
.sj-drawer__sublink {
  display: block;
  padding: 11px 20px 11px 36px;
  font-family: var(--heading-font-family);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(var(--text-color), 0.75);
}
.sj-drawer__sublink:hover { color: rgb(14, 185, 24); }

/* =========================================================================
   Get A Quote CTA 按钮（桌面导航末尾 + 移动抽屉底部）
   品牌强调绿（与站内 hover 色一致）+ 方角（贴合原站 --button-border-radius:0）
   ========================================================================= */
.sj-nav-cta-item {
  display: flex;
  align-items: center;
  margin-inline-start: 8px; /* 与最后一个导航项留出额外间隔，突出按钮 */
}
.sj-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgb(14, 185, 24);
  color: #fff;
  font-family: var(--heading-font-family);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap; /* 窄桌面下按钮文字不折行 */
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.sj-nav-cta:hover,
.sj-nav-cta:focus-visible {
  background: rgb(11, 148, 19);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(14, 185, 24, 0.35);
}
.sj-nav-cta svg { flex: 0 0 auto; transition: transform 0.2s ease; }
.sj-nav-cta:hover svg { transform: translateX(3px); }

/* 中等宽度（1000–1199px）导航空间有限：收紧内边距防溢出 */
@media screen and (min-width: 1000px) and (max-width: 1199px) {
  .sj-nav-cta { padding: 8px 12px; font-size: 12px; }
  .sj-nav-cta-item { margin-inline-start: 0; }
}
@media screen and (min-width: 1000px) {
  .header__linklist-item.sj-nav-cta-item { margin-inline-end: 0; } /* 末尾项不吃 32px 右边距 */
}

/* 抽屉底部 CTA：flex 面板内吸底、通栏按钮 */
.sj-drawer__cta-wrap {
  margin-top: auto;
  padding: 20px;
  border-block-start: 1px solid rgb(var(--border-color));
}
.sj-nav-cta--drawer { width: 100%; padding-block: 14px; }

/* 桌面端（≥1000px）抽屉整体禁用 */
@media screen and (min-width: 1000px) {
  .sj-drawer { display: none; }
}