/* =============================================================
   layout/sub-navigation.css — ページ内サブナビ（media 属性なし = all）
   -------------------------------------------------------------
   出典: 上流 components.css の .sub-nav-frosted（生成物）。手で編集しない。
   sticky 指定だけ 02-services のモック <style> から補っている。
   ============================================================= */

/* グローバルナビ（44px）の直下に貼り付く。上流ではページ <style> 側にある指定 */
.sub-nav-frosted { position: sticky; top: var(--tap-target-min); z-index: 19; }

.sub-nav-frosted {
  display: flex; align-items: center; gap: var(--space-md);
  height: var(--size-sub-nav); padding: 0 var(--space-lg);
  background: color-mix(in srgb, var(--color-canvas-parchment) 80%, transparent);
  -webkit-backdrop-filter: var(--backdrop-frosted); backdrop-filter: var(--backdrop-frosted);
  color: var(--color-ink);
}

.sub-nav-frosted .category { font: var(--type-tagline); letter-spacing: var(--tracking-tagline); }

.sub-nav-frosted .links { display: flex; gap: var(--space-md); margin-left: auto; align-items: center; }

.sub-nav-frosted .links a { font: var(--type-button-utility); color: var(--color-ink); }

.sub-nav-frosted .sub-nav-cta { padding: var(--inset-sub-nav-cta); font: var(--type-button-utility); flex-shrink: 0; }