/*
Theme Name: XWRITE child
Version: 1.0.0
Template: xwrite
*/

/* nav */
@media (max-width: 991.98px) {
    .gNavList {
        display: none;
    }
}
.nav__drawers .wp-block-categories .wp-block-categories__label {
    display: none;
}
.header .sub-menu, .header-fix .sub-menu{
color: var(--headnav-color);
background-color: var(--headbg-color);
}
.header .gNavList > .menu-item > .sub-menu, .header-fix .gNavList > .menu-item > .sub-menu {
    top: 100%;
    border-top: 2px solid var(--headnav-color);
}
.wp-block-search__button {
    background-color: var(--headbg-color);
}
.gnav-fix .drawer__close {
    background-color: var(--headbg-color);
}
/* サブメニューのリンク文字が長い時も収まるように */
.sub-menu a {
  display: block;          /* 一行全体をクリック可能に */
  white-space: normal!important;     /* nowrap を解除して折り返し可 */
  overflow-wrap: anywhere; /* トークン途中でも折り返し可（推奨） */
  word-break: normal;      /* CJKは自然に、英数は anywhere で対応 */
  line-break: strict;      /* 日本語の禁則も意識した折り返し */
  hyphens: auto;           /* 英単語は自動ハイフン（対応ブラウザのみ） */
}

/* カラム余りでも拡大しない */
.wp-block-gallery.has-nested-images figure.wp-block-image {
  flex-grow: 0 !important; 
}

/* サムネ内の右下に固定 */
.xw-post-article-list__item .articleList__item--fig, .articleList__item .articleList__item--fig {
  position: relative;
}
.xw-post-article-list__item .like-btn-wrap, .articleList__item .like-btn-wrap {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  pointer-events: auto; /* ボタンを押せるように */
}
.articleList__item--fig img, .xw-post-article-list__item--fig img {
  object-fit: cover;
  object-position: center 12%; /* ← 中央より上（0%が最上） */
}

.articleList__item .like-btn-wrap {
  box-shadow: none !important; /* デフォルトの影を打ち消す */
}

/* ▼ Favoritesボタン共通（ULike風） */
.like-btn-wrap .simplefavorite-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7rem;
  border: 0;
  background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border-radius: .5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  line-height: 1;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease;
}

/* ▼ ハートアイコン */
.simplefavorite-button i {
  font-size: 2.3rem; /* ← 好きなサイズに調整 */
  color: rgba(255,255,255,.92);
  line-height: 1;
  transition: color .2s ease, transform .15s ease;
}

/* ▼ いいね済み(active) でも背景・ぼかしを維持 */
.like-btn-wrap .simplefavorite-button.active {
  background: rgba(0,0,0,.45) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  backdrop-filter: blur(2px) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.3) !important;
  opacity: 1 !important; /* 透明にならないよう固定 */
}

/* ページトップ全体の配置 */
.pagetop {
  display: flex;
  flex-direction: column;  /* 縦並び */
  gap: 10px;               /* ボタン間の隙間 */
  z-index: 999;
}

/* 2つの a 要素を同じ大きさにする */
.pagetop a {
  display: flex;
  border-radius: 50%;
  font-size:1em;
}

/* WP ULike ボタンを余計な余白なしでフィットさせる */
.pagetop .like-btn-top .like-btn-wrap{
  display: flex;
  cursor: pointer;
  border-radius: 50%;
}

/* アイコンを中央に */
.pagetop .like-btn-top i,
.pagetop .like-btn-top svg {
  display: block;
  line-height: 1;
  color: #fff;
}
.pagetop .like-btn-wrap{
    overflow: inherit;
    padding: 0;
    border: 0;
    background: 0 0;
}
.like-btn-wrap::after {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: center center;              /* 中心基準で縮小 */
}

/* ===============================
   Favorites ハートエフェクト (光 + パルス + パーティクル)
   =============================== */
/* アイコンの拡大・発光：中心基準 */
.simplefavorite-button i {
  color: #aaa;
  transition: color 0.3s ease;
  transform-origin: center center;
}
.simplefavorite-button.active i { color: #ff3b6a; }

.simplefavorite-button.fx i {
  filter: drop-shadow(0 0 10px rgba(255, 100, 120, 0.6));
  animation: glow-heart 0.3s ease;
}
/* 変更版 glow-heart */
@keyframes glow-heart {
  0%   { transform: scale(0);   filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
  100%  { transform: scale(1); filter: drop-shadow(0 0 10px rgba(255,120,120,0.9)); }
}

/* ボタンとリング（中心からスケール） */
.simplefavorite-button {
  position: relative;
  overflow: visible;
  display: inline-flex; justify-content: center; align-items: center;
  width: 40px; height: 40px; cursor: pointer;
}

.simplefavorite-button::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 30px;                 /* ← 元40pxより少し大きく */
  height: 30px;
  border-radius: 50%;
  border: 4px solid rgba(255, 90, 90, 0.45); /* ← 太さ2→4pxに変更 */
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  filter: blur(0.5px);         /* ← 少しぼかすと柔らかく見える */
}

.simplefavorite-button.fx::after {
  animation: pulse-burst 0.5s ease-out;
}

@keyframes pulse-burst {
  0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

/* パーティクル（中心から放射状に） */
.heart-particle {
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  background: var(--c);
  border-radius: 50%;
  pointer-events: none;
  /* 開始は中心（-50%,-50% で自身サイズの半分補正）→ 外側へ */
  animation: heart-burst 0.5s ease-out forwards;
}
@keyframes heart-burst {
  from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  to   { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0.6); opacity: 0; }
}

.simplefavorite-button.active {
    opacity:1;
}