/* =================================================================
   components.css — reusable UI shared across all pages
   (header, footer, badge, card, button, subpage hero)
   ================================================================= */

/* ===================== Header ===================== */

site-header {
  position: fixed;
  top: var(--sp-4);
  left: var(--sp-4);
  right: var(--sp-4);
  z-index: 1000;
  display: block;
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-6);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-soft);
}

.header-logo {
  display: flex;
  align-items: center;
  min-height: 44px;
  line-height: 0;
}

.header-logo img {
  height: 24px;
  width: auto;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.header-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-ink);
  padding: var(--sp-1);
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hamburger-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}

.hamburger-icon span {
  display: block;
  height: 2px;
  background: var(--c-ink);
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

site-header.open .hamburger-icon span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
site-header.open .hamburger-icon span:nth-child(2) {
  opacity: 0;
}
site-header.open .hamburger-icon span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- floating pill menu (one pill per item, right-aligned) --- */

.header-nav {
  position: absolute;
  top: calc(100% + var(--sp-4));
  left: 0;
  right: 0;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.45s;
}

site-header.open .header-nav {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s;
}

.header-nav-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;     /* pills hug the right edge */
  gap: var(--sp-3);
}

.header-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
  padding: var(--sp-3) var(--sp-5);
  background: var(--glass-panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translateX(26px);
  transition: opacity 0.45s var(--ease),
    transform 0.5s var(--ease),
    background 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease;
}

.nav-icon {
  display: flex;
  flex: none;
  color: var(--c-blue);
  transition: color 0.25s ease;
}
.nav-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.nav-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.nav-ja {
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  transition: color 0.25s ease;
}
.nav-en {
  font-family: var(--font-display);
  font-size: 9.5px; /* optical: a touch smaller than --text-2xs */
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  color: var(--c-muted);
  transition: color 0.25s ease;
}

.nav-arrow {
  display: flex;
  flex: none;
  margin-left: auto;
  padding-left: var(--sp-3);
  color: var(--c-blue);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease),
    color 0.25s ease;
}
.nav-arrow svg {
  width: 15px;
  height: 15px;
  display: block;
}

/* current page — confident solid fill, the unambiguous "you are here" */
.header-nav a[aria-current="page"] {
  background: var(--c-blue);
  border-color: var(--c-blue);
  box-shadow: 0 6px 18px rgba(var(--c-blue-rgb), 0.28);
}
.header-nav a[aria-current="page"] .nav-ja,
.header-nav a[aria-current="page"] .nav-icon,
.header-nav a[aria-current="page"] .nav-arrow {
  color: var(--c-on-accent);
}
.header-nav a[aria-current="page"] .nav-en {
  /* dimmed white on the blue active pill — token-derived, not a raw value */
  color: color-mix(in srgb, var(--c-on-accent) 72%, transparent);
  opacity: 1;
}
.header-nav a[aria-current="page"] .nav-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* hover (other pages) — quiet feedback: outlined blue accent + blue text,
   no lift, no fill. A different *texture* from the solid current pill so
   the two never read the same. */
site-header.open .header-nav a:not([aria-current="page"]):hover {
  border-color: var(--c-blue);
}
site-header.open .header-nav a:not([aria-current="page"]):hover .nav-ja,
site-header.open .header-nav a:not([aria-current="page"]):hover .nav-icon,
site-header.open .header-nav a:not([aria-current="page"]):hover .nav-arrow {
  color: var(--c-blue);
}
site-header.open .header-nav a:not([aria-current="page"]):hover .nav-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* 上から順に時間差で出す。--i は js/components.js が各ピルに振る番号 */
site-header.open .header-nav a {
  opacity: 1;
  transform: translateX(0);
  --delay: calc(0.08s + var(--i, 0) * 0.05s);
  transition-delay: var(--delay), var(--delay), 0s, 0s, 0s;
}

/* 画面の下に入りきらないときだけ、js/components.js の fitNav() が付ける。
   入りきらない分を左へ新しい列として折り返す（右の列から読む）。
   高さ（max-height）は JS が「ちょうど rows 個」で切れる値にする */
.header-nav.is-wrap .header-nav-inner {
  flex-wrap: wrap-reverse;   /* 2列目は1列目の左に出る */
  align-content: flex-start; /* wrap-reverse なので右端に寄る */
}
/* 列が横に並びきらない（スマホ縦）ときは、ピルを列幅まで縮めて文字だけにする */
.header-nav.is-tight a { padding-inline: var(--sp-4); }
.header-nav.is-tight .nav-icon,
.header-nav.is-tight .nav-arrow { display: none; }

@media (min-width: 768px) {
  site-header {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(90%, 720px);
  }
}

/* ===================== Section badge ===================== */

.section-badge {
  display: inline-block;
  color: var(--c-blue);
  font-family: var(--font-display);
  font-size: var(--text-badge);
  font-weight: var(--fw-black);
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-3);
}

/* ===================== Card ===================== */

.card {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--sp-6);
}

/* ===================== Subpage hero ===================== */
/* Used by inner pages (see _template.html) to clear the fixed header
   and present a consistent page title block. */

.page-hero {
  padding-top: calc(var(--header-h) + var(--sp-9));
  padding-bottom: var(--sp-4);
}

.page-title {
  font-size: var(--text-title);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.01em;
  color: var(--c-ink);
  line-height: 1.1;
}

/* small English subtitle under the Japanese page title (replaces the
   oversized blue badge that used to head each inner page) */
.page-subtitle {
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--text-ms);
  font-weight: var(--fw-bold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-blue);
}

.page-lead {
  margin-top: var(--sp-4);
  font-size: var(--text-md);
  color: var(--c-muted);
}

/* ===================== Footer ===================== */

site-footer {
  display: block;
  margin-top: var(--sp-7);
}

/* 中身の短いページ（ブログ・お知らせ等）でも、開いた直後の1画面にフッターが
   のぞかないようにする。本文を最低1画面分の高さにしておく */
main {
  min-height: 100vh;
  min-height: 100svh;
}

/* 右下の SF2026（assets/Footer.svg）は上の方だけ見せ、残りはフッターの外で切る。
   切る高さは素材の y=250（全高 458.63）。決め方:
   - F の中の横棒は y≈196〜258。y=200 で切ると横棒が髪の毛ほどしか出ず F に見えない
   - 「2」と「0」、「2」と「6」の間の隙間は y≈225 から開き始める。225〜235 で切ると
     高さ数ユニットの白い欠けが切り口に出る（一度そうなった）。250 なら高さ25の
     はっきりした切れ込みになり、文字の形として読める
   ホバーで持ち上げると（-4%＝約18）切り口は y=268 に下がり、横棒が全部見える。
   0.1302 = 250 / 1920（見える高さ）、0.1087 = 208.63 / 1920（隠す高さ） */
.footer {
  --footer-mark-w: min(72vw, 640px);
  position: relative;
  overflow: hidden;
  padding: var(--sp-8) var(--gap-page) calc(var(--footer-mark-w) * 0.1302 + var(--sp-6));
  border-top: 1px solid var(--c-line);
}

/* 本文の幅（--maxw）には揃えず、画面の左右いっぱいを使う */
.footer-inner {
  display: grid;
  gap: var(--sp-6);
}

.footer-nav ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: var(--sp-2) var(--sp-7);
}
.footer-nav a {
  font-size: var(--text-base);
  color: var(--c-ink);
  text-decoration: none;
}
.footer-nav a:hover { color: var(--c-blue); }

/* コピーライト: 「団体名 担当課」は所属の書き方なので、同じ太さで半角スペース1つで
   続ける。太さを変えたり隙間を広げたりすると、別々の2項目に見えて座りが悪い */
.footer-copy {
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--c-faint);
}
.footer-copy span { display: inline-block; } /* 折り返すなら団体名と担当課の間で */

/* SF2026 はページの先頭へ戻るリンク（href="#"。JS 無しで戻れる） */
.footer-mark {
  position: absolute;
  right: 0;
  bottom: calc(var(--footer-mark-w) * -0.1087);
  width: var(--footer-mark-w);
  line-height: 0;
  transition: transform 0.35s var(--ease);
}
.footer-mark img { width: 100%; }
@media (hover: hover) {
  .footer-mark:hover { transform: translateY(-4%); }
}

/* 広い画面: ページ一覧を4列に */
@media (min-width: 768px) {
  .footer {
    --footer-mark-w: min(56vw, 960px);
    /* ページ一覧と SF2026 の間を広めに取る（詰まって見えたため） */
    padding-bottom: calc(var(--footer-mark-w) * 0.1302 + var(--sp-11));
  }
  .footer-nav ul { grid-template-columns: repeat(4, max-content); column-gap: var(--sp-9); }
}


@media (prefers-reduced-motion: reduce) {
  .footer-mark { transition: none; }
}

/* ===================== Page transition (融合 / entrance) =====================
   Every navigation is a normal full page load; the tiny inline <head>
   script on each page adds `.sf-enter`, and the arriving page eases its
   <main> in (fade + micro-scale). No click interception, no leave delay:
   purely an entrance. The header/footer chrome stays put while only the
   page body animates in. Used everywhere (file:// and hosted alike) — this
   one path proved far cleaner than the browser's native cross-document
   View Transitions, so we standardised on it. prefers-reduced-motion
   collapses it to an instant cut. Tune feel via the keyframes below. */

/* fill は backwards（both にしない）。both だと終わったあとも transform が
   「効いている」扱いのまま残り、main が position:fixed の基準になってしまう。
   すると固定配置の要素（テーマページの Scroll 誘導など）が画面ではなく
   main の箱に張り付き、ページ最下部まで行かないと見えなくなる。
   ※ 開発中の再読み込みでは .sf-enter が付かないので気付きにくい。 */
html.sf-enter main {
  animation: sf-enter 340ms cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
@keyframes sf-enter {
  from { opacity: 0; transform: scale(0.99); }
}

@media (prefers-reduced-motion: reduce) {
  html.sf-enter main { animation: none; }
}

/* 限定公開でまだ出していないページへのリンク（js/components.js の CLOSED）。
   ナビのピルは開くときに opacity を動かしているので、透明度ではなく文字色で灰色にする */
a.is-closed {
  pointer-events: none;
}
a.is-closed,
a.is-closed * {
  color: color-mix(in srgb, var(--c-text) 40%, transparent);
}