@charset "utf-8";
/* =========================================================
   oy template - layout.css
   Layout layer: header nav / footer / responsive
   ========================================================= */

/* ---------- Header nav ---------- */
.site-header {
  background: var(--dark);
  color: #fff;
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 99;
}
.header-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.logo { font-size: 24px; font-weight: bold; letter-spacing: .5px; white-space: nowrap; }
.logo span { color: var(--gold); }
/* Image logo: shown when the client uploads 站点设置 -> 站点logo (pa_site.logo),
   or when a designer drops logo.svg / logo@3x.png into templates/oy/images/.
   One file, two breakpoints - CSS scales it. max-width + object-fit guard against
   an over-wide upload stretching the 1200px-wide header row. */
.logo-image { display: flex; align-items: center; min-height: 38px; }
.logo-image img { display: block; height: 26px; width: auto; max-width: 200px; object-fit: contain; }

.site-nav { display: flex; gap: 24px; align-items: center; }
.site-nav a { color: #fff; transition: color .2s; }
.site-nav a:hover,
.site-nav a.active { color: var(--gold); }

/* Mobile menu button */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  background: #fff;
  margin: 5px 0;
  border-radius: 2px;
  transition: .3s;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--dark);
  color: #fff;
  padding: 40px 0;
  text-align: center;
  font-size: 14px;
}
.site-footer p + p { margin-top: 8px; color: #bbbbbb; }
/* 底部内容为后台富文本（站点设置 > 底部内容），这里保证编辑器产出的
   链接 / 图片 / 强调等标签在深色底上依然可读、不撑破容器 */
.site-footer a { color: var(--gold); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer img { max-width: 100%; height: auto; }
.site-footer strong, .site-footer b { color: #fff; }

/* ---------- Responsive ---------- */
/* Mobile header: brand centred + nav laid out as a horizontal row (design ref 1);
   the hamburger button stays in the top-right corner */
@media (max-width: 768px) {
  .site-header { padding: 12px 0 14px; }

  .header-wrap {
    position: relative;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
  }

  /* Brand: centred on its own line, side padding keeps clear of the hamburger */
  .logo {
    flex: 1 1 100%;
    text-align: center;
    font-size: 22px;
    line-height: 30px;
    padding: 0 46px;
  }
  /* Image logo on mobile: centred, slightly smaller than on desktop */
  .logo-image { justify-content: center; min-height: 30px; }
  .logo-image img { height: 20px; max-width: 100%; }

  /* Hamburger: pinned to the top-right corner (original icon style kept) */
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    height: 30px;
    padding: 0 2px;
  }
  .nav-toggle span {
    width: 24px;
    height: 2.5px;
    margin: 4px 0;
  }

  /* Nav: design ref 1 style - centred, wrapping horizontal text links */
  .site-nav {
    flex: 1 1 100%;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 30px;
    margin-top: 12px;
    padding: 0 6px;
    background: transparent;
    max-height: none;
    overflow: visible;
    transition: none;
  }
  .site-nav a {
    padding: 2px 0;
    border-top: 0;
    font-size: 15px;
    line-height: 1.5;
  }

  /* Expanded by default (as in design ref 1); the hamburger collapses / re-expands it */
  .site-nav.nav-collapsed { display: none; }
}