/*
Theme Name: Manga SEO Theme
Theme URI: https://digitalcontent.jp/
Description: Ken Child Theme for Manga SEO
Author: Your Name
Template: ken
Version: 1.0.0
*/

/* ==================================================
   1. PC表示時（1024px以上）のレイアウト指定
   ================================================== */
@media screen and (min-width: 1024px) {
  #container, main, article, .entry-content, .post, .content, .single-post {
    width: 100% !important;
    max-width: 100% !important;
  }
  .manga-main-column {
    width: 75% !important;
  }
  .manga-sidebar-column {
    width: 25% !important;
  }
}

/* ==================================================
   2. 装飾・マーカー線
   ================================================== */
.manga-card { 
  transition: transform 0.2s ease, box-shadow 0.2s ease; 
}
.manga-card:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 10px 20px -5px rgba(0,0,0,0.08); 
}
.text-highlight { 
  background: linear-gradient(transparent 60%, #fef08a 60%); 
}

/* ==================================================
   3. 全画面・全デバイス共通のはみ出し（横スクロール）防止
   ================================================== */
.entry-content,
.entry-content * {
  max-width: 100% !important;
  box-sizing: border-box !important;
  word-break: break-word !important; /* 長い英単語や記号の強制折り返し */
  overflow-wrap: break-word !important;
}

/* 表（テーブル）の横スクロール対応 */
.entry-content table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.entry-content .overflow-x-auto {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ==================================================
   4. スマホ表示時（768px以下）の賢威（ken）テーマ枠・タイトルの自動調整
   ================================================== */
@media screen and (max-width: 768px) {
  /* ページ全体の横スクロール（右側の余白崩れ）を物理的に防止 */
  html, body, #container, #main, main, article {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* テーマ（ken）側の標準枠や左右余白を打ち消し、横幅いっぱいに広げる */
  #container,
  #main,
  main,
  article,
  .entry-content,
  .entry,
  .post,
  .content,
  .single-post {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ★巨大化している記事タイトル（H1）の文字サイズ縮小と強制折り返し */
  .entry-title,
  h1.entry-title,
  .post-title,
  article h1,
  header h1 {
    font-size: 18px !important; /* スマホに適切な文字サイズに */
    line-height: 1.4 !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    letter-spacing: -0.02em !important;
    max-width: 100% !important;
    padding: 0 10px !important;
  }

  /* ★パンくずリスト（ホーム > ...）のはみ出し防止とサイズ縮小 */
  .breadcrumb,
  .breadcrumbs,
  .entry-breadcrumb,
  div[class*="breadcrumb"] {
    font-size: 11px !important;
    line-height: 1.4 !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    padding: 6px 10px !important;
    max-width: 100% !important;
  }

  /* 記事本文内の見出し（H1, H2, H3）の自動サイズ制御 */
  .entry-content h1 {
    font-size: 1.25rem !important; /* 20px */
    line-height: 1.4 !important;
  }
  .entry-content h2 {
    font-size: 1.125rem !important; /* 18px */
    line-height: 1.4 !important;
    padding-left: 0.5rem !important;
  }
  .entry-content h3 {
    font-size: 1rem !important; /* 16px */
    line-height: 1.4 !important;
  }

  /* 表（テーブル）内のパディング調整 */
  .entry-content td, 
  .entry-content th {
    padding: 0.5rem 0.375rem !important;
    font-size: 0.75rem !important; /* 12px */
  }
  
  /* カード自体の角丸と余白調整 */
  .manga-content-box {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}