/* =========================================
   +humor - child theme CSS (unified)
   ========================================= */

/* ========== Tokens ========== */
:root{
  --brand-blue:#2517c8;
  --brand-yellow:#e1ec3a;

  --thumb-blue:#2517C8;
  --thumb-frame:4px;
  --thumb-radius:14px;

  --card-blue:#2517C8;
  --card-r:13px;
  --card-w:4px;

  --thumb-scale:.5; /* 1/2表示。1/4にしたい時は .25 */
}

/* ========== Global ========== */
html.mono-mode .c-postThumb__cat,
html.mono-mode .c-categoryList__link,
html.mono-mode .page-numbers.current{
  color:#fff !important;
}

/* hero copy の寄せ戻し */
.u-mb-ctrl.u-mb-0.is-style-bg_grid.pc_only{
  text-align:left !important;
  margin-left:0 !important;
  margin-right:auto !important;
}
@media (min-width:1024px){
  .u-mb-ctrl.u-mb-0.is-style-bg_grid.pc_only{ transform:translateX(-72px); }
}
.u-mb-ctrl.u-mb-0.is-style-bg_grid.pc_only p{ max-width:36rem; }

.hero-grid{ display:grid; gap:.6em; text-align:center; justify-items:center; }
#bh-hero-copy.is-style-bg_grid{ padding:.1em 1em; }

/* スライダーをメイン画像に食い込ませる */
#post_slider{ position:relative; margin-top:-60px; z-index:10; }

/* ロゴの揺れ */
.c-headLogo__img{
  display:inline-block;
  transform-origin:center center;
  transition:transform .3s ease;
  will-change:transform;
}
.c-headLogo__img:hover,
.c-headLogo__img:focus-visible{ transform:rotate(6deg); }
.c-headLogo__img:active{ transform:rotate(-15deg); }

/* カテゴリリンクを常に白 */
.c-categoryList__link,
.c-categoryList__link.hov-flash-up,
.c-categoryList__link:visited,
.c-categoryList__link:hover{ color:#fff !important; }

/* ========== Thumbnails / frames ========== */
.p-postList__thumb,
.c-postThumb,
.post-thumbnail,
.p-articleThumb{
  position:relative;
  border-radius:var(--thumb-radius);
  overflow:hidden;
  z-index:0;
}
.p-postList__thumb::after,
.c-postThumb::after,
.post-thumbnail::after,
.p-articleThumb::after{
  content:"";
  position:absolute; inset:0;
  border:var(--thumb-frame) solid var(--thumb-blue);
  border-radius:inherit;
  pointer-events:none;
  z-index:3;
  box-sizing:border-box;
}
.p-postList__thumb img,
.c-postThumb img,
.post-thumbnail img,
.p-articleThumb img{
  display:block; width:100%; height:100%;
  object-fit:cover;
  border-radius:inherit !important;
}

/* スライダーは別処理にする（重複枠を無効化） */
.p-postSlider .p-postList__thumb::after,
.p-postSlider .c-postThumb::after,
.p-postSlider .post-thumbnail::after,
.p-postSlider .p-articleThumb::after{ content:none !important; }
/* スライダー内だけ青枠にするならこちら */
.p-postSlider .p-postList__thumb{ position:relative; border:4px solid var(--thumb-blue); border-radius:14px; }

/* 記事本文の通常画像に枠 */
.entry-content img,
.wp-block-image img,
img[class*="wp-image"]{
  border:4px solid #2517C8;
  border-radius:13px;
  box-sizing:border-box;
  display:block;
  max-width:100%;
  height:auto;
}
/* 枠を外したい時のクラス */
img.no-frame,
.wp-block-image.no-frame img,
figure.no-frame img,
.entry-content .no-frame img,
.no-frame img[class*="wp-image"]{
  border:none !important; border-radius:0 !important; box-shadow:none !important;
}

/* 一覧カード用（SWELLのベールを無効化） */
li.p-postList__item .p-postList__thumb.c-postThumb{
  position:relative; border-radius:var(--card-r) !important; overflow:hidden; z-index:0;
}
li.p-postList__item .p-postList__thumb.c-postThumb::before{
  content:none !important; background:none !important; box-shadow:none !important; opacity:1 !important;
}
li.p-postList__item .p-postList__thumb.c-postThumb::after{
  content:""; position:absolute; inset:0;
  border:var(--card-w) solid var(--card-blue);
  border-radius:inherit; box-sizing:border-box; pointer-events:none; z-index:3;
}
li.p-postList__item .p-postList__thumb.c-postThumb img{
  display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit !important;
}

/* 単一/固定のアイキャッチ縮小（左上基準） */
.single .p-articleThumb,
.page .p-articleThumb{
  inline-size:calc(100% * var(--thumb-scale));
  margin-left:0; margin-right:auto; transform-origin:left top;
}

/* フッターロゴ */
.footer-logo{
  width:200px; height:60px;
  background-image:url("https://plus-humor.com/wp-content/uploads/2025/08/h-1200-x-400-px.svg");
  background-repeat:no-repeat; background-size:contain; background-position:left;
  margin:0 auto 0 0;
}
@media (max-width:768px){
  .footer-logo{ width:150px; height:45px; background-position:center; margin:0 auto; }
}

/* ========== Mobile tweaks ========== */
/* スマホのみ余白をつける */
@media (max-width:768px){
  .wp-block-columns.is-layout-flex{ flex-wrap:nowrap !important; }
  .wp-block-column{ flex:0 0 auto !important; }

  .post_content, .p-postContent, .l-mainContent{
    font-size:.9375rem; line-height:1.8; padding-left:.3em; padding-right:.3em;
  }
  .post_content p, .p-postList__excerpt, .post_content li{
    font-size:13px; line-height:1.7;
  }
}

/* 表の読みやすさ（スマホ） */
@media (max-width:767px){
  .wp-block-table table{
    font-size:11px; line-height:1.4; table-layout:fixed; word-break:break-word; white-space:normal;
  }
  .wp-block-table td, .wp-block-table th{ padding:6px 8px; }
  .wp-block-table{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* 画像のドラッグ/長押し抑止 */
img, picture img, figure img{
  -webkit-user-drag:none; -webkit-touch-callout:none; -webkit-user-select:none;
  user-select:none; pointer-events:auto;
}
*[style*="background-image"]{
  -webkit-user-drag:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}

/* メインビジュアルの下辺マスク（http:// に修正） */
.p-mainVisual, .p-mainVisual__bg{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 V80 C85 96 65 85 50 92 C30 100 15 95 0 90 Z' fill='white'/%3E%3C/svg%3E") bottom/100% 100% no-repeat !important;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H100 V98 C95 96 65 85 50 92 C30 100 14 95 0 90 Z' fill='white'/%3E%3C/svg%3E") bottom/100% 100% no-repeat !important;
}