/* =========================================================================
   Sharenjoy 享享創意 — Header / Footer kit styles
   Built on colors_and_type.css tokens. Chinese-only surface.
   ========================================================================= */

/* ---- Shared primitives -------------------------------------------------- */
.sjk { font-family: var(--font-zh); color: var(--fg-1); }
.sjk *, .sjk *::before, .sjk *::after { box-sizing: border-box; }
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 9999;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--sj-yellow);
  color: var(--sj-ink);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

.sjk-bar {                       /* a header/footer frame, full artboard width */
  width: 100%;
  background: var(--surface);
}

.sjk-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  height: 100%;
}

/* ---- Nav links ---------------------------------------------------------- */
.sjk-nav { display: flex; align-items: center; gap: var(--space-8); }
.sjk-link {
  font-size: var(--fs-16);
  font-weight: 500;
  color: var(--fg-1);
  text-decoration: none;
  position: relative;
  padding: 4px 0;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease-out);
}
.sjk-link::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--sj-yellow);
  transition: right var(--dur-base) var(--ease-out);
}
.sjk-link:hover::after,
.sjk-link[aria-current="page"]::after { right: 0; }
.sjk-link[aria-current="page"] { font-weight: 700; }

/* ---- CTA button --------------------------------------------------------- */
.sjk-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  background: var(--sj-yellow);
  color: var(--sj-ink);
  font-family: var(--font-zh);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 1;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-inset);
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.sjk-cta:hover { background: var(--sj-yellow-deep); }
.sjk-cta:active { transform: scale(0.98); }
.sjk-cta .ic { width: 17px; height: 17px; stroke-width: 1.75; transition: transform var(--dur-base) var(--ease-out); }
.sjk-cta:hover .ic { transform: translateX(3px); }

/* ink variant (for yellow headers) */
.sjk-cta--ink { background: var(--sj-ink); color: var(--fg-on-dark); box-shadow: none; }
.sjk-cta--ink:hover { background: var(--sj-ink-90); }

/* logos */
.sjk-logo { display: block; height: 34px; width: auto; }
.sjk-mark { display: block; height: 38px; width: auto; }

/* =========================================================================
   HEADER VARIANTS
   ========================================================================= */

/* H1 · Classic — left logo / right nav + CTA, hairline base ---------------- */
.h-classic { height: 76px; border-bottom: 1px solid var(--border); background: var(--surface); }
.h-classic .sjk-inner { justify-content: space-between; }
.h-classic .right { display: flex; align-items: center; gap: var(--space-8); }

/* H2 · Centered — symmetric nav with centered logo ------------------------ */
.h-centered { height: 84px; border-bottom: 1px solid var(--border); background: var(--surface); }
.h-centered .sjk-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-6); }
.h-centered .nav-l { justify-content: flex-start; }
.h-centered .nav-r { justify-content: flex-end; }
.h-centered .brand { display: flex; justify-content: center; }

/* H3 · Yellow bar — bold brand block -------------------------------------- */
.h-yellow { height: 80px; background: var(--sj-yellow); box-shadow: var(--shadow-inset); }
.h-yellow .sjk-inner { justify-content: space-between; }
.h-yellow .right { display: flex; align-items: center; gap: var(--space-8); }
.h-yellow .sjk-link { color: var(--sj-ink); font-weight: 600; }
.h-yellow .sjk-link::after { background: var(--sj-ink); }

/* H4 · Editorial stamp — index labels, bars motif, 2px ink frame ---------- */
.h-editorial { height: 88px; background: var(--sj-paper); border-bottom: 2px solid var(--sj-ink); }
.h-editorial .sjk-inner { justify-content: space-between; }
.h-editorial .brand { display: flex; align-items: center; gap: var(--space-4); }
.h-editorial .barsmark { height: 40px; width: auto; display: block; }
.h-editorial .right { display: flex; align-items: center; gap: var(--space-10); }
.h-editorial .e-nav { display: flex; align-items: center; gap: var(--space-8); }
.h-editorial .e-item {
  display: flex; align-items: baseline; gap: 7px;
  text-decoration: none; color: var(--fg-1);
}
.h-editorial .e-num {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--fg-3);
}
.h-editorial .e-label { font-size: var(--fs-16); font-weight: 600; position: relative; padding-bottom: 2px; }
.h-editorial .e-item:hover .e-label { box-shadow: 0 2px 0 var(--sj-yellow); }
.h-editorial .e-item[aria-current="page"] .e-label { box-shadow: 0 2px 0 var(--sj-yellow); }
.h-editorial .e-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border: 1.5px solid var(--sj-ink); border-radius: 0;
  background: transparent; color: var(--sj-ink);
  font-family: var(--font-zh); font-size: var(--fs-14); font-weight: 700; cursor: pointer;
  text-transform: none; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.h-editorial .e-cta:hover { background: var(--sj-yellow); }

/* Scroll-shrink demo states ---------------------------------------------- */
.h-shrunk {
  height: 56px;
  background: rgba(251, 250, 246, 0.82);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.h-shrunk .sjk-inner { justify-content: space-between; }
.h-shrunk .right { display: flex; align-items: center; gap: var(--space-6); }
.h-shrunk .sjk-mark { height: 30px; }
.h-shrunk .sjk-link { font-size: var(--fs-14); }
.h-shrunk .sjk-cta { padding: 8px 15px; font-size: var(--fs-14); }
/* a faux page strip behind, just to read the blur context */
.shrink-stage { position: relative; }
.shrink-bg {
  position: absolute; inset: 0; z-index: 0; padding: 0 var(--gutter);
  display: flex; align-items: center;
  font-family: var(--font-display); font-size: var(--fs-30); color: var(--sj-ink-15);
}
.shrink-stage .sjk-bar { position: relative; z-index: 1; }

/* =========================================================================
   FOOTER VARIANTS — warm paper + hairline
   ========================================================================= */
.sjk-foot { width: 100%; background: var(--sj-paper-deep); color: var(--fg-1); }
.sjk-foot-inner { max-width: var(--content-max); margin: 0 auto; padding: var(--space-16) var(--gutter) var(--space-8); }

.foot-tagline { font-family: var(--font-zh-serif); font-size: var(--fs-20); color: var(--fg-1); margin: 14px 0 0; }
.foot-mark { height: 30px; width: auto; display: block; }

/* social as text links */
.foot-social { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.foot-soc {
  font-size: var(--fs-16); color: var(--fg-1); text-decoration: none; font-weight: 500;
  position: relative; padding-bottom: 2px;
  transition: background var(--dur-base) var(--ease-out);
  border-bottom: 2px solid var(--sj-yellow);
}
.foot-soc:hover { background: var(--sj-yellow); }
.foot-mail {
  font-size: var(--fs-18); color: var(--fg-1); text-decoration: none; font-weight: 600;
  border-bottom: 2px solid var(--sj-yellow); padding-bottom: 2px;
  transition: background var(--dur-base) var(--ease-out);
}
.foot-mail:hover { background: var(--sj-yellow); }

.foot-col-title { font-size: var(--fs-12); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--fg-3); margin: 0 0 14px; }
.foot-nav { display: flex; flex-direction: column; gap: 10px; }
.foot-navlink { font-size: var(--fs-16); color: var(--fg-2); text-decoration: none; transition: color var(--dur-base) var(--ease-out); width: fit-content; }
.foot-navlink:hover { color: var(--fg-1); }

.foot-rule { height: 1px; background: var(--border); border: 0; margin: 0; }
.foot-base { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-top: var(--space-6); flex-wrap: wrap; }
.foot-copy { font-size: var(--fs-14); color: var(--fg-3); }
.foot-copy .sj-tnum { font-variant-numeric: tabular-nums; }

/* F1 grid */
.f-classic .top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-12); align-items: start; }

/* F2 CTA block */
.f-cta-block {
  width: 100%; background: var(--sj-paper);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.f-cta-inner {
  max-width: var(--content-max); margin: 0 auto; padding: var(--space-16) var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap;
}
.f-cta-head { font-family: var(--font-display); font-size: clamp(var(--fs-30), 4vw, var(--fs-48)); line-height: 1.05; letter-spacing: -0.02em; margin: 0; color: var(--fg-1); }
.f-cta-head .zh { font-family: var(--font-zh-serif); }
.f-cta-block .sjk-cta { padding: 15px 26px; font-size: var(--fs-18); }

/* F3 minimal single row */
.f-min { width: 100%; background: var(--sj-paper-deep); }
.f-min-bars { display: flex; justify-content: center; padding-top: var(--space-10); }
.f-min-bars img { height: 26px; width: auto; opacity: 0.9; }
.f-min-inner {
  max-width: var(--content-max); margin: 0 auto; padding: var(--space-8) var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap;
}
.f-min-inner .foot-social { gap: var(--space-4); }
.f-min-inner .foot-soc { font-size: var(--fs-14); }