/**
 * Utilities
 *
 * 単機能のユーティリティクラス。
 * 「クラス名 = 何をするか」が一意で、副作用を持たない単純なものに限定する。
 *
 * @package JobJepang
 */

/* ============================================================
   ACCESSIBILITY HELPERS
   ============================================================ */

/* WordPress 標準クラスとも互換: スクリーンリーダー専用テキスト */
.screen-reader-text,
.jj-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus,
.jj-sr-only:focus {
  position: fixed;
  top: var(--jj-space-4);
  left: var(--jj-space-4);
  width: auto;
  height: auto;
  padding: var(--jj-space-3) var(--jj-space-6);
  margin: 0;
  clip: auto;
  white-space: normal;
  background: var(--jj-primary);
  color: var(--jj-text-on-primary);
  z-index: var(--jj-z-skiplink);
}

/* ============================================================
   DISPLAY
   ============================================================ */

.jj-hidden { display: none !important; }
.jj-block  { display: block !important; }
.jj-inline-block { display: inline-block !important; }
.jj-flex   { display: flex !important; }

/* ブレークポイント別表示制御 */
@media (max-width: 767px) {
  .jj-hidden-sm { display: none !important; }
}

@media (min-width: 768px) {
  .jj-hidden-md { display: none !important; }
}

/* ============================================================
   TEXT
   ============================================================ */

.jj-text-center { text-align: center; }
.jj-text-left   { text-align: left; }
.jj-text-right  { text-align: right; }

.jj-text-muted     { color: var(--jj-text-muted); }
.jj-text-secondary { color: var(--jj-text-secondary); }

/* ============================================================
   SPACING (margin / padding 補助)
   実プロジェクトでは Tailwind 風に増やしすぎない。最低限のみ。
   ============================================================ */

.jj-mt-0 { margin-top: 0 !important; }
.jj-mb-0 { margin-bottom: 0 !important; }

.jj-mt-4 { margin-top: var(--jj-space-4) !important; }
.jj-mb-4 { margin-bottom: var(--jj-space-4) !important; }

.jj-mt-8 { margin-top: var(--jj-space-8) !important; }
.jj-mb-8 { margin-bottom: var(--jj-space-8) !important; }