/* ============================================================
   Task Relay — Blog article (post body) styles
   - Loaded on the FRONT-END for is_single() (see functions.php)
   - Loaded into the BLOCK / CLASSIC editor via add_editor_style()
     so editors see the same styling while writing the post.

   Scoped by both:
     .single-body-inner  (front-end, applied via single.php)
     .editor-styles-wrapper / body.tr-editor-body (editor preview)
   so the same rules render identically in both contexts.
   ============================================================ */

/* ---- shared rule generator (applied via :is(...)) ----------- */
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) ul.article-list{
  margin:0 0 22px;padding:18px 22px;list-style:none;
  background:#f7fbfd;border:1px solid #e4f1f7;border-radius:10px;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) ul.article-list li{
  position:relative;padding:6px 0 6px 22px;font-size:14.5px;line-height:1.85;color:#334155;margin:0;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) ul.article-list li::before{
  content:"";position:absolute;left:4px;top:14px;width:8px;height:8px;border-radius:50%;
  background:#16D6F3;box-shadow:0 0 0 3px rgba(22,214,243,.18);
}

/* ---- "この記事でわかること" overview box ------------------- */
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-overview{
  margin:24px 0 32px;padding:24px 28px;
  background:linear-gradient(135deg,#ecfbfe 0%,#f3fcfe 100%);
  border:1px solid #b6d4eb;border-radius:14px;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-overview h3{
  margin:0 0 14px;padding:0;border:0;
  font-size:13px;font-weight:800;letter-spacing:.18em;color:#0890a8;
  font-family:Inter,sans-serif;text-transform:uppercase;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-overview ul{
  margin:0;padding:0;list-style:none;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-overview li{
  position:relative;padding:6px 0 6px 26px;
  font-size:14px;font-weight:600;color:#0f1b3d;line-height:1.85;margin:0;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-overview li::before{
  content:"✓";position:absolute;left:0;top:6px;width:18px;height:18px;border-radius:50%;
  background:#16D6F3;color:#fff;font-size:11px;font-weight:900;text-align:center;line-height:18px;
}

/* ---- highlight callout (整理 / 原則) ----------------------- */
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-callout{
  margin:32px 0;padding:24px 28px;
  background:linear-gradient(135deg,#fff7e6 0%,#fffaf0 100%);
  border-left:5px solid #f0c36d;border-radius:10px;
  box-shadow:0 1px 3px rgba(192,130,18,.06);
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-callout .callout-label{
  display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.18em;
  color:#9a6510;background:#ffeac1;padding:4px 12px;border-radius:999px;
  font-family:Inter,sans-serif;text-transform:uppercase;margin-bottom:12px;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-callout p{
  margin:0;font-size:14.5px;line-height:1.95;color:#5b3f15;font-weight:600;
}

/* ---- tool badges (B案: identification-only text badges, no third-party logos) -- */
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .tool-h3{
  margin-top:36px;margin-bottom:12px;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .tool-badge{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:Inter,'Helvetica Neue',Arial,sans-serif;
  font-weight:700;font-size:18px;letter-spacing:.01em;
  padding:8px 18px;border-radius:8px;
  box-shadow:0 1px 3px rgba(0,0,0,.10);
  line-height:1.2;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .tool-badge-logo{
  background:transparent;padding:6px 12px;box-shadow:none;
  border:1px solid #e4ecf3;border-radius:8px;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .tool-badge-img{
  height:28px;width:auto;display:block;
}

/* ---- structured tables (override .single-body-inner table) -- */
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) table.article-table{
  width:100%;border-collapse:separate;border-spacing:0;margin:28px 0;
  background:#fff;border:1px solid #e4ecf3;border-radius:10px;overflow:hidden;
  box-shadow:0 1px 2px rgba(15,27,61,.04);font-size:13.5px;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) table.article-table thead th{
  background:linear-gradient(135deg,#0c2456,#1a365d);
  color:#fff;font-weight:700;letter-spacing:.04em;padding:14px 16px;text-align:left;
  font-size:13px;border:0;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) table.article-table tbody td{
  padding:14px 16px;border-top:1px solid #eef2f7;border-bottom:0;border-left:0;border-right:0;
  color:#334155;line-height:1.8;vertical-align:top;background:#fff;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) table.article-table tbody tr:nth-child(even) td{background:#fafcfe}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) table.article-table tbody td:first-child{font-weight:700;color:#0f1b3d}

/* ---- related links section --------------------------------- */
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-related{
  margin:48px 0 0;padding-top:32px;border-top:1px solid #eef2f8;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-related h3{
  margin:0 0 18px;padding:0 0 0 14px;
  font-size:16px;font-weight:800;color:#0f1b3d;letter-spacing:.005em;
  border-left:4px solid #16D6F3;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-related ul{
  list-style:none;margin:0;padding:0;display:grid;gap:10px;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-related li{margin:0}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-related li a{
  display:flex;align-items:center;gap:14px;padding:16px 22px;
  background:#fff;border:1px solid #e4ecf3;border-radius:10px;
  font-size:13.5px;font-weight:700;color:#0f1b3d;
  text-decoration:none;transition:all .15s;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-related li a::before{
  content:"›";font-size:20px;font-weight:900;color:#16D6F3;font-family:Inter,sans-serif;line-height:1;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-related li a:hover{
  border-color:#6fdef3;box-shadow:0 1px 2px rgba(15,27,61,.04);transform:translateX(2px);color:#0890a8;
}

/* ---- ARTICLE TOC (目次) ----------------------------------- */
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-toc{
  margin:24px 0 36px;padding:24px 28px;
  background:#ffffff;
  border:1px solid #e4ecf3;border-left:5px solid #16D6F3;border-radius:10px;
  box-shadow:0 1px 3px rgba(15,27,61,.04);
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-toc .article-toc-title{
  margin:0 0 14px;padding:0;border:0;
  font-size:13px;font-weight:800;letter-spacing:.18em;color:#0890a8;
  font-family:Inter,sans-serif;text-transform:uppercase;display:flex;align-items:center;gap:8px;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-toc .article-toc-title::before{
  content:"";display:inline-block;width:16px;height:16px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230890a8' stroke-width='2.2' stroke-linecap='round'><line x1='8' y1='6' x2='21' y2='6'/><line x1='8' y1='12' x2='21' y2='12'/><line x1='8' y1='18' x2='21' y2='18'/><line x1='3' y1='6' x2='3.01' y2='6'/><line x1='3' y1='12' x2='3.01' y2='12'/><line x1='3' y1='18' x2='3.01' y2='18'/></svg>") no-repeat center/contain;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-toc-list,
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-toc-sublist{
  list-style:none;padding:0;margin:0;counter-reset:toc-h2;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-toc-list > li{
  margin:0;padding:0;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-toc-item-h2{
  counter-increment:toc-h2;position:relative;padding:6px 0;
  border-top:1px dashed #eef2f7;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-toc-list > .article-toc-item-h2:first-child{
  border-top:0;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-toc-item-h2 > a{
  display:flex;align-items:flex-start;gap:10px;
  font-size:14.5px;font-weight:700;color:#0f1b3d;text-decoration:none;
  padding:6px 0;line-height:1.6;transition:color .15s;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-toc-item-h2 > a::before{
  content:counter(toc-h2, decimal-leading-zero);
  flex:0 0 28px;font-family:Inter,sans-serif;font-size:12px;font-weight:800;
  color:#16D6F3;letter-spacing:.04em;line-height:1.7;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-toc-item-h2 > a:hover{color:#0890a8}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-toc-sublist{
  margin:2px 0 6px 28px;padding-left:14px;border-left:2px solid #ecfbfe;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-toc-item-h3 > a{
  display:block;font-size:13px;font-weight:600;color:#475569;text-decoration:none;
  padding:4px 0;line-height:1.7;transition:color .15s;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-toc-item-h3 > a:hover{color:#0890a8}

/* Smooth-scroll target offset so anchors don't tuck under sticky header */
:is(.single-body-inner) :is(h2, h3)[id^="toc-"]{
  scroll-margin-top:96px;
}

/* ---- ARTICLE EYECATCH (記事冒頭の横長ヒーロー画像) -------- */
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-eyecatch{
  margin:0 0 28px;padding:0;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-eyecatch img{
  width:100%;height:auto;display:block;border-radius:16px;
  box-shadow:0 14px 40px -12px rgba(15,27,61,.18),0 4px 14px rgba(15,27,61,.06);
}

/* ---- CTA BAND (固定ページと同じ Design — Task Relay LP / features.html と統一) ---- */
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-cta-band{
  position:relative;margin:48px -9999px 0;padding:80px 9999px 90px;
  /* Bleed full-width inside the constrained .single-body-inner. */
  color:#062b34;overflow:hidden;
  background:linear-gradient(135deg,#3dd6ee 0%,#16D6F3 50%,#0bb4cf 100%);
}
:is(.editor-styles-wrapper, body.tr-editor-body) .article-cta-band{
  /* Editor preview cannot bleed full-width — keep contained */
  margin:48px 0 0;padding:60px 30px 70px;border-radius:18px;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-cta-band-inner{
  position:relative;text-align:center;max-width:1120px;margin:0 auto;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-cta-band h2{
  font-size:30px;font-weight:800;line-height:1.5;margin:0 0 14px;color:#062b34;letter-spacing:.005em;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-cta-band h2 .b{
  display:block;color:#062b34;opacity:.92;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-cta-band p{
  font-size:14.5px;color:#062b34;opacity:.85;margin:0 0 28px;font-weight:500;line-height:2;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-cta-band .ctas{
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-cta-band .btn-white{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:#0890a8;padding:16px 32px;font-size:14px;font-weight:700;
  border-radius:999px;box-shadow:0 8px 22px rgba(0,0,0,.18);
  text-decoration:none;letter-spacing:.02em;transition:all .15s;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-cta-band .btn-white:hover{
  background:#ecfbfe;transform:translateY(-1px);
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-cta-band .btn-line{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;color:#062b34;
  padding:16px 32px;font-size:14px;font-weight:700;
  border:1.5px solid rgba(6,43,52,.4);border-radius:999px;
  text-decoration:none;letter-spacing:.02em;transition:all .15s;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-cta-band .btn-line:hover{
  background:rgba(255,255,255,.18);
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-cta-band .btn-white .arr,
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-cta-band .btn-line .arr{
  display:inline-block;font-family:Inter,sans-serif;font-size:16px;font-weight:900;line-height:1;
  transition:transform .15s;
}
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-cta-band .btn-white:hover .arr,
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-cta-band .btn-line:hover .arr{
  transform:translateX(2px);
}

/* ---- article footer copyright ----------------------------- */
:is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-footer{
  text-align:center;font-size:11px;color:#94a3b8;
  padding:32px 0 0;font-weight:500;margin-top:24px;border-top:1px dashed #eef2f8;
}

/* responsive */
@media (max-width:760px){
  :is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-cta-band{
    padding-top:50px;padding-bottom:60px;
  }
  :is(.single-body-inner, .editor-styles-wrapper, body.tr-editor-body) .article-cta-band h2{font-size:22px}
}