@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/*
 * Article Design System v1 / Phase 1
 * Canonical CSS managed in Git.
 * Spec: docs/design/article-design-system.md
 * Deploy target: WordPress cocoon-child-master/style.css
 */

/* ==========================================================
   H2 / H3 — visual hierarchy
   ========================================================== */

.article .entry-content h2 {
  background: transparent;
  border-left: 5px solid #19448e;
  border-bottom: 2px solid #ddd;
  border-radius: 0;
  padding: 14px 24px 12px;
  margin: 64px -29px 16px;
  font-size: 26px;
}

.article .entry-content h3 {
  background: transparent;
  border: none;
  border-bottom: 2px solid #eee;
  padding: 6px 0;
  margin: 44px 0 12px;
  font-size: 21px;
}

@media screen and (max-width: 834px) {
  .article .entry-content h2 {
    margin: 48px 0 14px;
    padding: 12px 16px 10px;
    font-size: 23px;
  }
  .article .entry-content h3 {
    margin: 40px 0 12px;
    font-size: 20px;
  }
}

@media screen and (max-width: 480px) {
  .article .entry-content h2 {
    font-size: 21px;
  }
  .article .entry-content h3 {
    font-size: 18px;
  }
}

/* ==========================================================
   Comparison Table — first column sticky
   Keeps horizontal scroll and table layout as-is.
   On mobile, only the first column wraps at a fixed width
   so the sticky column does not cover the viewport.
   ========================================================== */

.article .entry-content .scrollable-table table tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}

@media screen and (max-width: 480px) {
  .article .entry-content .scrollable-table table tr > :first-child {
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    white-space: normal;
    line-height: 1.5;
  }
}

/* Long reader/selection conditions are scrollable data rather than
   compact row headers, so they are not sticky at any viewport width. */
.article .entry-content .wp-block-table.is-reader-condition-table .scrollable-table table tr > :first-child {
  position: static;
  left: auto;
  z-index: auto;
  width: auto;
  min-width: 220px;
  max-width: none;
  white-space: normal;
}

/* Opaque backgrounds on the sticky column only, matching the
   existing thead / zebra-stripe colors so the rest of the table
   keeps its current look. */
.article .entry-content .scrollable-table table thead tr > :first-child {
  background-color: #eee;
}

.article .entry-content .scrollable-table table tbody tr:nth-of-type(2n+1) > :first-child {
  background-color: #fafbfc;
}

.article .entry-content .scrollable-table table tbody tr:nth-of-type(2n) > :first-child {
  background-color: #ffffff;
}

/* Visible boundary between the fixed column and the scrolling area. */
.article .entry-content .scrollable-table table tr > :first-child::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 1px;
  background-color: #ccc;
}

/* ==========================================================
   Comparison Table — typography
   16px: one step below body text (18px), matches the size
   Cocoon already uses at <=480px, so it does not read as
   unusually small at any breakpoint.
   ========================================================== */

.article .entry-content .scrollable-table table {
  font-size: 16px;
  line-height: 1.6;
}

.article .entry-content .scrollable-table table th,
.article .entry-content .scrollable-table table td {
  padding: 0.6em 0.8em;
}

/* ==========================================================
   Header Tagline — mobile fit
   Keeps the tagline on one line on narrow mobile screens.
   ========================================================== */

@media screen and (max-width: 480px) {
  .tagline {
    width: 100%;
    font-size: 13px;
    white-space: nowrap;
    text-align: center;
  }
}

@media screen and (max-width: 360px) {
  .tagline {
    font-size: 12px;
  }
}

/* ==========================================================
   Article Header — spacing
   Tightens spacing around the post title / date on single
   posts to improve the first view on PC and mobile.
   ========================================================== */

.single-post .entry-title {
  margin-top: 0;
  margin-bottom: 8px;
}

.single-post .date-tags {
  margin-bottom: 8px;
}


/* ==========================================================
   Home / Archive Cards — category placement
   Cocoon renders the category twice per card: as a dark
   overlay on the featured image (.entry-card-thumb .cat-label)
   and as hidden text in the meta area (.entry-card-categorys,
   suppressed by Cocoon's own ".e-card-meta .e-card-categorys
   { display: none }"). Eyecatch images now carry meaningful
   title text, so the overlay collides with it. This hides the
   overlay and un-hides the meta-area category, then uses
   "display: contents" on .entry-card-meta (a non-visual
   wrapper) to promote its children into the flex flow of
   .entry-card-content, where flex "order" places the category
   above the title and the date/access info below it — without
   changing DOM order, click targets, or semantics.

   Cocoon's own .entry-card-meta rule is a bottom-right corner
   badge: "position: absolute; bottom: 0; right: 0;
   text-align: right". display: contents drops that box, so
   position/right/bottom no longer apply, but text-align is
   inherited and still reaches the promoted .entry-card-info /
   .entry-card-categorys children through the DOM parent chain,
   pulling them to the right. Cocoon's .entry-card-info also
   sets "justify-content: flex-end" directly (not inherited) for
   the same corner-badge design. Both are reset below so the
   promoted children read as a normal left-aligned column under
   the title instead of drifting to the card's right edge.

   Scoped to .entry-card-* only, which is distinct from
   .related-entry-card-*, .popular-entry-card-*, and
   .new-entry-card-* markup used by related/popular widgets.
   ========================================================== */

.entry-card-thumb .cat-label {
  display: none;
}

.entry-card-content {
  display: flex;
  flex-direction: column;
}

.entry-card-meta {
  display: contents;
}

.entry-card-title {
  order: 0;
}

.entry-card-meta .entry-card-categorys {
  display: block;
  order: -1;
  margin: 0 0 0.3em;
  text-align: left;
}

.entry-card-categorys .entry-category {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--cocoon-white-color);
  background-color: rgba(51, 51, 51, 0.7);
  border: 1px solid #eee;
}

.entry-card-info {
  order: 1;
  justify-content: flex-start;
  text-align: left;
}