/*
 Theme Name:   Pixx Hikaeme
 Theme URI:    https://portfolio.thepixeltribe.com/#pixx
 Description:  Pixx hikaeme style
 Author:       Fortisthemes & User
 Template:     pixx
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  LICENSE
 Text Domain:  pixx-hikaeme
*/

/* ==========================================================================
   子テーマのカスタムスタイル
   ========================================================================== */

/* 
 * タイル上のサムネイル画像にマウスオーバーしなくても、
 * 記事名とジャンル名を常に表示するようにします。
 */

/* 1. 背景の黒半透明レイヤーを調整して画像の視認性を確保します */
/* opacityによる透過ではなく、背景色 (background-color) のアルファ値で制御することで、
   子要素であるテキストが薄くならずにハッキリと表示されるようにします。
   また、position: absolute を指定してサムネイル画像のサイズと完全に一致させます。 */
.apdiv .bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  background-color: rgba(0, 0, 0, 0.2) !important;
}

/* マウスオーバー時は半透明の白を重ねます */
.apdiv:hover .bg,
.apdiv.hover .bg {
  background-color: rgba(255, 255, 255, 0.6) !important;
}

/* マウスオーバー時は背景が白くなるため、文字色を黒にして視認性を確保します */
.apdiv:hover h3,
.apdiv.hover h3,
.apdiv:hover .post-cat,
.apdiv.hover .post-cat {
  color: #111 !important;
}

/* 2. タイトル (h3) とジャンル名 (span.post-cat) を常に表示します */
.apdiv h3,
.apdiv h4,
.apdiv .post-cat {
  opacity: 1;
}

/* 3. ページロード時などの表示遅延（トランジション遅延）を解除します */
.apdiv h3,
.apdiv h4 {
  -webkit-transition-delay: 0s !important;
  transition-delay: 0s !important;
}

/* 4. 記事名をすべて大文字ではなく、大文字小文字（入力通り）で表示するようにします */
h1.entry-title,
.apdiv h3,
.grid-item .title {
  text-transform: none !important;
}

/* 5. ヘッダーテキスト (hikaeme.net) と左側サムネイルタイトルの文字の頭の位置を揃えます */
/* ヘッダーの最大幅をコンテンツ領域 (1920px) と一致させ、左側に 20px の余白を設定します */
#masthead.grid {
  max-width: 1920px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* 左端のサムネイル内のテキストの左位置をヘッダーと揃えるため、leftを0にし、左余白を20pxに調整します */
.apdiv figcaption {
  left: 0 !important;
  padding-left: 20px !important;
}

/* 6. グリッドアイテム全体を覆うリンクのスタイル */
.portfolio-link-wrapper {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* ジャンル名 (span.post-cat) のスタイル指定 */
.apdiv .post-cat {
  color: #fff;
  font-size: 0.8em;
  display: inline-block;
  margin-top: 5px;
  transition: all 0.4s ease;
}

/* 7. 記事詳細ページ内で、YouTube等の埋め込み動画の横幅をコンテンツ幅に揃え、レスポンシブに対応させます */
.entry-content iframe,
.entry-content embed,
.entry-content object {
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
}

/* 8. 記事詳細ページ内の画像の横幅をテキスト幅（親コンテナ幅）と統一します（yuji-nakada ページは除外） */
/* コンテナ（div, figure）の幅を100%にし、Gutenbergのリサイズによる縮みを防ぎます */
body:not(.page-id-133) .entry-content .wp-block-image:not(.alignleft):not(.alignright),
body:not(.page-id-133) .entry-content .wp-block-image:not(.alignleft):not(.alignright) figure {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

/* 画像自体の横幅を100%にします */
body:not(.page-id-133) .entry-content .wp-block-image:not(.alignleft):not(.alignright) img,
body:not(.page-id-133) .entry-content img.aligncenter,
body:not(.page-id-133) .entry-content img.alignnone,
body:not(.page-id-133) .entry-content p > img:not(.alignleft):not(.alignright) {
  width: 100% !important;
  height: auto !important;
}

/* 9. ヘッダーのサイトタイトル (site-title) と説明文 (site-description) の行間を狭めます */
h1.site-title {
  margin-bottom: 0px !important;
  line-height: 1.1 !important;
}

.site-description {
  margin-top: 2px !important;
  margin-bottom: 0px !important;
}

/* 10. 詳細記事ページのタイトルが長くて複数行になった場合の行間を調整します */
.single .entry-header h1.entry-title {
  line-height: 1.3 !important;
}