/* wp.css
   WordPress に載せるための小さな追加。見本の base.css・layout.css・components.css・parts.css・pages/*.css は、中身を変えずに移してあるので、
   WordPress 側の都合で要る調整は、すべてこのファイルに書く（すべてのページで、最後に読み込む）。

   1. ログイン中の管理バー（#wpadminbar）とヘッダー・ドロワーの重なり
   2. WordPress が出す .screen-reader-text（見本の u-visually-hidden と同じ指定）
   3. 本文（c-prose）の中の、エディタが付ける配置のクラス
   4. 素材が届くまで外している表示（メンバー3人・Dock の実画面）の跡の組み直し（修飾子 --single・--without-screen。素材が届いたら HTML 側の修飾子を外す） */

/* ============================================================
   1. 管理バー
   管理バーは、画面の幅によって高さと位置が変わる:
     783px 以上      高さ 32px、画面の上に固定
     601〜782px      高さ 46px、画面の上に固定
     600px 以下      高さ 46px、固定されない（スクロールすると上に消える）
   見本のヘッダーは position: sticky; top: 0 なので、固定の管理バーの下から貼り付くよう top をずらす。
   ドロワー（position: fixed; 画面いっぱい）も、固定の管理バーの下から始める。
   ============================================================ */

body.admin-bar .l-header {
  top: 32px;
}

body.admin-bar .l-drawer {
  top: 32px;
}

/* ページ内リンク（#faq など）の移動先がヘッダーと管理バーに隠れないようにする。
   base.css の [id] { scroll-margin-top: var(--header-h) } に管理バーの高さを足す */
body.admin-bar [id] {
  scroll-margin-top: calc(var(--header-h) + 32px);
}

@media (max-width: 782px) {
  body.admin-bar .l-header {
    top: 46px;
  }

  body.admin-bar .l-drawer {
    top: 46px;
  }

  body.admin-bar [id] {
    scroll-margin-top: calc(var(--header-h) + 46px);
  }
}

/* 600px 以下は、管理バーが固定されず上に消えるので、ヘッダーは画面の上端に貼り付ける。
   ドロワーは管理バーより手前に出して、画面いっぱいにする（z-index は管理バーの 99999 より上） */
@media (max-width: 600px) {
  body.admin-bar .l-header {
    top: 0;
  }

  body.admin-bar .l-drawer {
    top: 0;
    z-index: 100000;
  }

  body.admin-bar [id] {
    scroll-margin-top: var(--header-h);
  }
}

/* ============================================================
   2. .screen-reader-text
   WordPress 本体やプラグインが出す読み上げ用の文字を、見本の .u-visually-hidden と同じ指定で隠す
   ============================================================ */

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   3. 本文（c-prose）の中の配置のクラス
   ブロックエディタ・クラシックエディタが画像などに付ける alignleft / alignright / aligncenter
   ============================================================ */

.c-prose .aligncenter {
  display: block;
  margin-inline: auto;
}

.c-prose .alignleft {
  float: left;
  margin: 0 24px 16px 0;
}

.c-prose .alignright {
  float: right;
  margin: 0 0 16px 24px;
}

/* 狭い画面では回り込みをやめ、縦に積む */
@media (max-width: 599.98px) {
  .c-prose .alignleft,
  .c-prose .alignright {
    float: none;
    margin: 0 0 16px;
  }
}

.c-profile--single {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1100px) {
  .p-dock-metrics--without-screen {
    grid-template-columns: minmax(0, 1fr);
  }

  .p-dock-metrics--without-screen .p-dock-metrics__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }

  .p-dock-metrics--without-screen .p-dock-metric {
    padding: 28px 28px 30px;
  }

  .p-dock-metrics--without-screen .c-card-grid__item--full-tab {
    grid-column: 1 / -1;
  }
}