/*
Theme Name: SWELL Child
Template: swell
Version: 1.0.0
*/

/* ============================================================
   DARK THEME - Inline Style Override & Common Components
   All inline styles removed from post_content.
   Everything managed here via CSS classes + element selectors.
   ============================================================ */

/* -----------------------------------------------
   1. TABLE STYLES (Dark Mode Optimized)
   ----------------------------------------------- */
.post_content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 15px;
  background: rgba(15, 21, 35, 0.8);
  border: 1px solid rgba(100, 140, 220, 0.2);
  border-radius: 10px;
  overflow: hidden;
}

.post_content table th {
  padding: 14px 18px;
  text-align: left;
  font-weight: bold;
  background: rgba(22, 32, 64, 0.9);
  color: #5ebbf7;
  border-bottom: 1px solid rgba(30, 48, 96, 0.6);
  border-right: 2px solid rgba(42, 74, 128, 0.4);
  width: 25%;
  min-width: 120px;
}

.post_content table td {
  padding: 14px 18px;
  color: #e0e4ee;
  border-bottom: 1px solid rgba(28, 40, 69, 0.5);
}

.post_content table tbody tr:nth-child(even) {
  background: rgba(19, 26, 46, 0.6);
}
.post_content table tbody tr:nth-child(even) th {
  background: rgba(24, 37, 72, 0.8);
}

.post_content table tbody tr:hover {
  background: rgba(26, 37, 69, 0.8);
}
.post_content table tbody tr:hover th {
  background: rgba(30, 48, 96, 0.9);
}

.post_content table a {
  color: #60a5fa;
}
.post_content table a:hover {
  color: #93c5fd;
}

.post_content table thead tr {
  background: rgba(22, 32, 64, 0.95);
}
.post_content table thead th {
  border-bottom: 2px solid rgba(58, 90, 156, 0.5);
  color: #7cc4fa;
}

/* Table Force Override (残存インラインスタイル対策) */
.post_content table[style] {
  background: rgba(15, 21, 35, 0.8) !important;
  border-color: rgba(100, 140, 220, 0.2) !important;
}
.post_content table tr[style] {
  background: inherit !important;
  color: inherit !important;
}
.post_content table th[style],
.post_content table td[style] {
  background: inherit !important;
  color: inherit !important;
  border-color: inherit !important;
}

/* -----------------------------------------------
   2. BLOCKQUOTE / QUOTE STYLES
   ----------------------------------------------- */
.post_content blockquote {
  background: rgba(20, 25, 50, 0.6) !important;
  border: 1px solid rgba(100, 140, 220, 0.15) !important;
  border-left: 4px solid var(--gs-accent-cyan, #00d4ff) !important;
  padding: 18px 24px !important;
  margin: 24px 0 !important;
  border-radius: 0 10px 10px 0 !important;
  color: #c8cce0 !important;
  font-style: italic;
  position: relative;
}

.post_content blockquote::before {
  content: '\201C';
  font-size: 48px;
  color: rgba(0, 212, 255, 0.15);
  position: absolute;
  top: -5px;
  left: 10px;
  font-family: Georgia, serif;
  line-height: 1;
}

.post_content blockquote p {
  color: #c8cce0 !important;
  margin: 0;
}

.post_content blockquote cite,
.post_content blockquote footer {
  color: #7a80a0 !important;
  font-size: 0.85em;
  display: block;
  margin-top: 10px;
}

/* Blockquote残存インラインスタイル上書き */
.post_content blockquote[style] {
  background: rgba(20, 25, 50, 0.6) !important;
  border: none !important;
  border-left: 4px solid var(--gs-accent-cyan, #00d4ff) !important;
  padding: 18px 24px !important;
  color: #c8cce0 !important;
}

/* -----------------------------------------------
   3. CALLOUT / INFO BOX STYLES
   ダーク用コールアウト: 左ボーダー付きボックス
   ----------------------------------------------- */

/* 3a. Info (Blue) */
.gs-callout-info,
.post_content div[style*="border-left:4px solid #4a90d9"],
.post_content div[style*="border-left:4px solid #2196f3"],
.post_content div[style*="border-left: 4px solid #4a90d9"],
.post_content div[style*="border: 1px solid #4a90d9"],
.post_content div[style*="background:#f0f4ff"],
.post_content div[style*="background:#f0f8ff"],
.post_content div[style*="background:#e3f2fd"],
.post_content div[style*="background: #f0f8ff"] {
  background: rgba(20, 35, 70, 0.7) !important;
  border: 1px solid rgba(74, 144, 217, 0.3) !important;
  border-left: 4px solid #4a9edd !important;
  padding: 18px 22px !important;
  margin: 20px 0 !important;
  border-radius: 0 10px 10px 0 !important;
  color: #c8d8f0 !important;
}

/* 3b. Success (Green) */
.gs-callout-success,
.post_content div[style*="border-left:4px solid #4caf50"],
.post_content div[style*="border-left:4px solid #4CAF50"],
.post_content div[style*="background:#e8f5e9"],
.post_content div[style*="border: 1px solid #81c784"] {
  background: rgba(16, 45, 30, 0.7) !important;
  border: 1px solid rgba(76, 175, 80, 0.3) !important;
  border-left: 4px solid #4caf50 !important;
  padding: 18px 22px !important;
  margin: 20px 0 !important;
  border-radius: 0 10px 10px 0 !important;
  color: #c0e8c4 !important;
}

/* 3c. Warning (Orange) */
.gs-callout-warning,
.post_content div[style*="border-left:4px solid #ff9800"],
.post_content div[style*="border: 1px solid #ffc107"],
.post_content div[style*="background:#fff3e0"],
.post_content div[style*="background:#fff3cd"] {
  background: rgba(50, 35, 15, 0.7) !important;
  border: 1px solid rgba(255, 152, 0, 0.3) !important;
  border-left: 4px solid #ffa726 !important;
  padding: 18px 22px !important;
  margin: 20px 0 !important;
  border-radius: 0 10px 10px 0 !important;
  color: #f0dcc0 !important;
}

/* 3d. Danger (Red) */
.gs-callout-danger,
.post_content div[style*="border-left:4px solid #d94a4a"],
.post_content div[style*="border-left:4px solid #f44336"],
.post_content div[style*="background:#fff5f5"],
.post_content div[style*="background:#ffebee"] {
  background: rgba(50, 20, 20, 0.7) !important;
  border: 1px solid rgba(217, 74, 74, 0.3) !important;
  border-left: 4px solid #e55555 !important;
  padding: 18px 22px !important;
  margin: 20px 0 !important;
  border-radius: 0 10px 10px 0 !important;
  color: #f0c8c8 !important;
}

/* 3e. Neutral / Gray box */
.gs-callout-neutral,
.post_content div[style*="background:#f5f5f5"],
.post_content div[style*="background:#f8f9fa"],
.post_content div[style*="background:#f9f9f9"],
.post_content div[style*="background: #f5f5f5"],
.post_content div[style*="border-left:4px solid #ccc"],
.post_content div[style*="border-left:4px solid #9e9e9e"],
.post_content div[style*="border-left: 4px solid #9e9e9e"],
.post_content div[style*="border-left: 4px solid #ccc"] {
  background: rgba(25, 28, 50, 0.7) !important;
  border: 1px solid rgba(100, 110, 160, 0.25) !important;
  border-left: 4px solid rgba(120, 130, 180, 0.5) !important;
  padding: 18px 22px !important;
  margin: 20px 0 !important;
  border-radius: 0 10px 10px 0 !important;
  color: #c0c4d8 !important;
}

/* Callout内のテキスト色 */
.post_content div[style*="background:#f5f5f5"] *,
.post_content div[style*="background:#f8f9fa"] *,
.post_content div[style*="background:#f9f9f9"] *,
.post_content div[style*="background:#f0f8ff"] *,
.post_content div[style*="background:#e8f5e9"] *,
.post_content div[style*="background:#fff3e0"] *,
.post_content div[style*="background:#fff5f5"] *,
.post_content div[style*="background:#ffebee"] *,
.post_content div[style*="background:#e3f2fd"] *,
.post_content div[style*="background:#fff3cd"] *,
.post_content div[style*="background: #f5f5f5"] *,
.post_content div[style*="background: #f0f8ff"] * {
  color: inherit !important;
}

/* -----------------------------------------------
   4. TEXT COLOR OVERRIDES
   ダークモードで見えない色を修正
   ----------------------------------------------- */

/* Orange accent text */
.post_content span[style*="color:#ff6600"],
.post_content span[style*="color: #ff6600"],
.post_content span[style*="color:#ff9900"],
.post_content span[style*="color: #ff9900"],
.post_content strong[style*="color:#ff6600"],
.post_content strong[style*="color: #ff6600"] {
  color: #ff8c42 !important;
  font-weight: bold;
}

/* Red accent text */
.post_content span[style*="color:#ff0000"],
.post_content span[style*="color: #ff0000"],
.post_content span[style*="color:#e74c3c"],
.post_content span[style*="color: #e74c3c"],
.post_content strong[style*="color:#e74c3c"],
.post_content strong[style*="color: #e74c3c"],
.post_content span[style*="color:#d94a4a"] {
  color: #ff6b6b !important;
}

/* Black text → light (ダーク背景で見えないため) */
.post_content span[style*="color:#000000"],
.post_content span[style*="color: #000000"],
.post_content span[style*="color:#333333"],
.post_content span[style*="color: #333333"],
.post_content span[style*="color:#333"] {
  color: #e0e4ee !important;
}

/* Gray/muted text */
.post_content span[style*="color:#999"],
.post_content span[style*="color: #999"],
.post_content span[style*="color:#888"],
.post_content span[style*="color: #888"],
.post_content span[style*="color:#666"],
.post_content span[style*="color: #666"],
.post_content span[style*="color:#555"],
.post_content span[style*="color: #555"],
.post_content span[style*="color:#757575"],
.post_content span[style*="color: #757575"],
.post_content span[style*="color:#7f8c8d"],
.post_content p[style*="color:#666"],
.post_content p[style*="color:#555"],
.post_content small[style*="color:#666"],
.post_content small[style*="color:#999"] {
  color: #8a90b0 !important;
}

/* Blue accent text */
.post_content span[style*="color:#1565c0"],
.post_content span[style*="color:#4a90d9"],
.post_content strong[style*="color:#1565c0"],
.post_content strong[style*="color:#4a90d9"],
.post_content span[style*="color:#1da1f2"] {
  color: #5ebbf7 !important;
}

/* Green accent text */
.post_content span[style*="color:#2e7d32"],
.post_content strong[style*="color:#2e7d32"] {
  color: #66bb6a !important;
}

/* White text on dark = fine, leave it */

/* -----------------------------------------------
   5. HIGHLIGHT / MARKER OVERRIDE
   黄色ハイライト → 削除済み、残存対策
   ----------------------------------------------- */
.post_content span[style*="background-color: #ffff99"],
.post_content span[style*="background-color:#ffff99"],
.post_content span[style*="background:#ffff99"],
.post_content span[style*="background: #ffff99"],
.post_content span[style*="background:linear-gradient(transparent 60%, #ffff99"],
.post_content span[style*="background: linear-gradient(transparent 60%, #ffff99"],
.post_content span[style*="background: linear-gradient(transparent 60%, #fff3b0"],
.post_content span[style*="background: linear-gradient(transparent 60%, #fff9c4"],
.post_content span[style*="background-color: #ffffff"] {
  background: none !important;
  background-color: transparent !important;
}

/* -----------------------------------------------
   6. CAPTION / META TEXT
   ----------------------------------------------- */
.post_content p[style*="font-size:0.85em"],
.post_content p[style*="font-size: 13px"],
.post_content span[style*="font-size:0.85em"],
.post_content span[style*="font-size:0.9em"],
.post_content div[style*="text-align:right"][style*="font-size:0.85em"],
.post_content div[style*="text-align: right"][style*="font-size: 13px"] {
  color: #7a80a0 !important;
}

/* -----------------------------------------------
   7. FIGURE / IMAGE STYLES
   ----------------------------------------------- */
.post_content figure {
  margin: 24px 0;
}

.post_content figcaption {
  color: #7a80a0 !important;
  font-size: 0.85em;
  text-align: center;
  margin-top: 8px;
}

.post_content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* -----------------------------------------------
   8. VIDEO EMBED (Keep layout, fix colors)
   ----------------------------------------------- */
.post_content div[style*="position:relative"][style*="padding-bottom:56.25%"],
.post_content div[style*="position: relative"][style*="padding-bottom: 56.25%"] {
  position: relative !important;
  padding-bottom: 56.25% !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 20px 0;
  border-radius: 10px;
}

/* -----------------------------------------------
   9. LIST STYLES
   ----------------------------------------------- */
.post_content ul[style],
.post_content ol[style] {
  color: #e0e4ee !important;
}

.post_content li[style] {
  color: #e0e4ee !important;
}

/* -----------------------------------------------
   10. HEADING OVERRIDES
   ----------------------------------------------- */
.post_content h2[style],
.post_content h3[style],
.post_content h4[style],
.post_content h5[style] {
  color: inherit !important;
  background: none !important;
}

/* -----------------------------------------------
   11. SWELL SPECIFIC BLOCKS
   SWELLテーマ固有のブロック対応
   ----------------------------------------------- */

/* FAQ block */
.swell-block-faq .swell-block-faq__q {
  background: rgba(22, 32, 64, 0.6) !important;
  color: #e0e4ee !important;
}

.swell-block-faq .swell-block-faq__a {
  background: rgba(15, 21, 35, 0.4) !important;
  color: #c8cce0 !important;
}

/* Step block */
.swell-block-step .swell-block-step__body {
  border-left-color: rgba(0, 212, 255, 0.3) !important;
}

/* Full-wide block */
.swell-block-fullWide {
  background: rgba(15, 21, 35, 0.5) !important;
}

/* -----------------------------------------------
   12. GLOBAL INLINE STYLE OVERRIDE (Safety Net)
   record要素に残存するstyle属性を一括上書き
   ----------------------------------------------- */
.post_content *[style*="background:#f5f5f5"],
.post_content *[style*="background: #f5f5f5"],
.post_content *[style*="background:#f9f9f9"],
.post_content *[style*="background: #f9f9f9"],
.post_content *[style*="background:#f8f9fa"],
.post_content *[style*="background:#ffffff"],
.post_content *[style*="background-color:#ffffff"],
.post_content *[style*="background-color: #ffffff"],
.post_content *[style*="background: white"],
.post_content *[style*="background:white"] {
  background: rgba(25, 28, 50, 0.5) !important;
}

/* Font family override (Century etc → inherit) */
.post_content *[style*="font-family"] {
  font-family: inherit !important;
}

/* Steam button style */
.post_content a[style*="background:#1b2838"] {
  background: linear-gradient(135deg, #1b2838, #2a475e) !important;
  color: #66c0f4 !important;
  border: 1px solid rgba(102, 192, 244, 0.3) !important;
  border-radius: 6px !important;
  padding: 12px 30px !important;
  display: inline-block;
  transition: all 0.3s ease;
}

.post_content a[style*="background:#1b2838"]:hover {
  background: linear-gradient(135deg, #2a475e, #3d6a8e) !important;
  box-shadow: 0 0 15px rgba(102, 192, 244, 0.3);
}

/* -----------------------------------------------
   13. RESPONSIVE
   ----------------------------------------------- */
@media (max-width: 768px) {
  .post_content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .post_content table th,
  .post_content table td {
    padding: 10px 12px;
    font-size: 14px;
  }
  .post_content blockquote {
    padding: 14px 18px !important;
  }
}

/* ============================================================
   CSS CLASSES (Replacing Inline Styles)
   Created by cleanup_inline_styles.php
   ============================================================ */

/* -----------------------------------------------
   A. TEXT ACCENT CLASSES
   ----------------------------------------------- */
.post_content .gs-accent {
  color: #ff8c42 !important;
  font-weight: bold;
}

.post_content strong.gs-accent {
  color: #ff8c42 !important;
}

.post_content .gs-accent-red {
  color: #ff6b6b !important;
}

.post_content strong.gs-accent-red {
  color: #ff6b6b !important;
}

.post_content .gs-accent-blue {
  color: #5ebbf7 !important;
}

.post_content strong.gs-accent-blue {
  color: #5ebbf7 !important;
}

.post_content .gs-accent-green {
  color: #66bb6a !important;
}

.post_content strong.gs-accent-green {
  color: #66bb6a !important;
}

/* -----------------------------------------------
   B. TEXT SIZE CLASSES
   ----------------------------------------------- */
.post_content .gs-text-lg {
  font-size: 1.15em;
}

.post_content .gs-text-xl {
  font-size: 1.3em;
}

.post_content .gs-text-sm {
  font-size: 0.85em;
  color: #8a90b0;
}

.post_content .gs-text-muted {
  color: #8a90b0 !important;
}

/* -----------------------------------------------
   C. BOX / CARD CLASSES
   ----------------------------------------------- */
.post_content .gs-box {
  background: rgba(25, 28, 50, 0.7);
  border: 1px solid rgba(100, 110, 160, 0.25);
  padding: 20px;
  margin: 20px 0;
  border-radius: 10px;
  color: #c0c4d8;
}

.post_content .gs-box * {
  color: inherit;
}

.post_content .gs-box a {
  color: #60a5fa !important;
}

.post_content .gs-box-quote {
  background: rgba(20, 25, 50, 0.6);
  border-left: 4px solid rgba(120, 130, 180, 0.5);
  padding: 15px 20px;
  margin: 20px 0;
  border-radius: 0 10px 10px 0;
  color: #c0c4d8;
}

.post_content .gs-box-quote * {
  color: inherit;
}

/* -----------------------------------------------
   D. CALLOUT CLASSES
   ----------------------------------------------- */
.post_content .gs-callout-info {
  background: rgba(20, 35, 70, 0.7);
  border: 1px solid rgba(74, 144, 217, 0.3);
  border-left: 4px solid #4a9edd;
  padding: 18px 22px;
  margin: 20px 0;
  border-radius: 0 10px 10px 0;
  color: #c8d8f0;
}

.post_content .gs-callout-success {
  background: rgba(16, 45, 30, 0.7);
  border: 1px solid rgba(76, 175, 80, 0.3);
  border-left: 4px solid #4caf50;
  padding: 18px 22px;
  margin: 20px 0;
  border-radius: 0 10px 10px 0;
  color: #c0e8c4;
}

.post_content .gs-callout-warning {
  background: rgba(50, 35, 15, 0.7);
  border: 1px solid rgba(255, 152, 0, 0.3);
  border-left: 4px solid #ffa726;
  padding: 18px 22px;
  margin: 20px 0;
  border-radius: 0 10px 10px 0;
  color: #f0dcc0;
}

.post_content .gs-callout-danger {
  background: rgba(50, 20, 20, 0.7);
  border: 1px solid rgba(217, 74, 74, 0.3);
  border-left: 4px solid #e55555;
  padding: 18px 22px;
  margin: 20px 0;
  border-radius: 0 10px 10px 0;
  color: #f0c8c8;
}

.post_content .gs-callout-info *,
.post_content .gs-callout-success *,
.post_content .gs-callout-warning *,
.post_content .gs-callout-danger * {
  color: inherit;
}

.post_content .gs-callout-info a,
.post_content .gs-callout-success a,
.post_content .gs-callout-warning a,
.post_content .gs-callout-danger a {
  color: #60a5fa !important;
}

/* -----------------------------------------------
   E. CTA BOX
   ----------------------------------------------- */
.post_content .gs-cta-box {
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  padding: 20px;
  background: rgba(16, 45, 30, 0.6);
  border: 1px solid rgba(76, 175, 80, 0.3);
  border-radius: 10px;
  margin: 20px 0;
  color: #a0e8a4;
}

/* -----------------------------------------------
   F. BOX TITLE
   ----------------------------------------------- */
.post_content .gs-box-title {
  font-weight: bold;
  font-size: 1.05em;
  margin-bottom: 10px;
  margin-top: 0;
  color: #e0e4ee;
}

/* -----------------------------------------------
   G. CAPTION / META
   ----------------------------------------------- */
.post_content .gs-caption {
  color: #7a80a0 !important;
  font-size: 0.85em;
  text-align: right;
  margin-top: 8px;
}

/* -----------------------------------------------
   H. SEPARATOR
   ----------------------------------------------- */
.post_content .gs-separator {
  border-bottom: 1px solid rgba(100, 110, 160, 0.2);
  padding: 12px 0;
}

/* -----------------------------------------------
   I. ITALIC
   ----------------------------------------------- */
.post_content .gs-italic {
  font-style: italic;
  margin: 0;
}

/* -----------------------------------------------
   J. LAYOUT HELPERS
   ----------------------------------------------- */
.post_content .gs-center-block {
  max-width: 800px;
  margin: 2em auto;
  text-align: center;
}

.post_content .gs-video-wrap {
  max-width: 560px;
  margin: 0 auto;
}

.post_content .gs-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}