/*
Theme Name:    Nonbiri Lightning Child
Template:      lightning
Description:   りんかログ専用カスタムテーマ
Author:        Rinka
*/
:root {
  /* ベース背景 */
  --main-bg: oklch(0.9795 0.0054 274.97);
  /* メインカラー(UI・見出し) */
  --main-color: oklch(0.4404 0.0592 279.99);
  /* サブカラー(カード・区切り) */
  --sub-color: oklch(0.9414 0.0136 277.06);
  /* アクセントピンク(リンク・ボタン) */
  --accent-pink: oklch(0.7613 0.0669 19.91);
  /* 強アクセントピンク(ホバーとか) */
  --accent-strong-pink: oklch(0.6562 0.0885 8.63);
  /* メインテキスト */
  --text-main: oklch(0.3203 0.0394 277.93);
  /* サブテキスト */
  --text-sub: oklch(0.5633 0.0466 278.85);
  /* ロゴメインカラー */
  --logo-main-color: oklch(0.3939 0.0642 279.56);
  /* ロゴサブカラー */
  --logo-sub-color: oklch(0.6822 0.0536 317.63);
  --font-zenmaru: 'Zen Maru Gothic', sans-serif;
  /* 背景色グラデ */
  --bg-gradation: linear-gradient(oklch(0.4404 0.0592 279.99 / 70%),
      oklch(0.6822 0.0536 317.63 / 70%),
      oklch(0.7613 0.0669 19.91 / 70%));
}

/* 見出しなども統一する場合 */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
}

body {
  background-color: var(--main-bg) !important;
  color: var(--text-main);
  font-family: var(--font-zenmaru);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .03em;
}

h1, h2, h3, h4, h5, h6, strong, b {
  font-family: var(--font-zenmaru);
  font-weight: 700;
}

h1, h2 {
  line-height: 1.5;
  letter-spacing: .05em;
}

h3, h4 {
  line-height: 1.5;
  letter-spacing: .03em;
}

p:last-child {
  margin-bottom: 0;
}

ul, ol {
  margin-top: 0;
  margin-bottom: 0;
}

li {
  margin-top: 0;
}

li:last-child {
  margin-bottom: 0;
}

a:hover {
  color: var(--accent-strong-pink);
  text-decoration: underline dotted;
}

/* H2: マジックアワーのグラデーションを下線に */
h2 {
  position: relative;
  padding: 0.5em 0;
  margin: 2em 0 1em;
  color: var(--main-color, oklch(0.4404 0.0592 279.99));
  border-bottom: 3px solid transparent;
  /* 左から右へ、青からピンクへのグラデーション下線 */
  border-image: linear-gradient(to right, var(--logo-main-color), var(--logo-sub-color), var(--accent-pink));
  border-image-slice: 1;
}

/* H3: 左側にアクセントピンクの丸い線を */
h3 {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  color: var(--main-color, oklch(0.4404 0.0592 279.99));
  padding: 0.25em 0 0.25em 0.75em;
  margin: 1.5em 0 0.8em;
  border-left: 6px solid var(--accent-pink);
  /* アクセントピンク */
  border-radius: 3px;
  /* 角を丸くして柔らかく */
}

/* H4: シンプルに下線のみ */
h4 {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  color: var(--main-color, oklch(0.4404 0.0592 279.99));
  padding: 0.2em 0;
  margin: 1.2em 0 0.5em;
  border-bottom: 1px dashed rgba(111, 115, 145, 0.3);
  /* サブカラーで控えめに */
}

hr.wp-block-separator {
  margin-top: 2.4rem;
  margin-bottom: 2.4rem;
}

/*====================================*/
/* ヘッダー
/*====================================*/
.site-header {
  box-shadow: none;
}


/*====================================*/
/* フッター
/*====================================*/
.site-footer-copyright p:last-child {
  display: none;
}


/*====================================*/
/* 共通設定 ヘッダー
/*====================================*/
.page-header {
  padding: 40px 0;
  background: linear-gradient(171deg, var(--main-color) 0%, var(--logo-sub-color) 50%, var(--accent-pink) 100%);
}

.page-header .page-header-title {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


/*====================================*/
/* 投稿一覧スタイル
/*====================================*/
/* 投稿一覧のコンテナをグリッド配置にする */
.vk_posts {
  margin: 0;
}

.vk_posts.vk_posts-mainSection {
  display: grid !important;
  gap: 50px;
  grid-template-columns: repeat(3, 1fr);
}

/* 1つの記事（カード）の装飾 */
.vk_post.media {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 0 !important;
  margin: 0;
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(76, 79, 115, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid var(--sub-color) !important;
}

/* ホバー時の動き（ぽよんボタンと連動） */
.vk_post-postType-post:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(217, 161, 160, 0.2);
  /* アクセントピンクの影 */
}

/* アイキャッチの調整 */
.vk_post .media-img,
.vk_post-postType-post .media-img {
  width: 100% !important;
  height: 200px;
  margin-right: 0 !important;
  object-fit: cover;
}

/* テキストの調整 */
.vk_post .media-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.5rem 15px 0;
  padding-bottom: 0 !important;
}

.vk_post .vk_post_title,
.vk_post .vk_post_date {
  /* 縮まないように固定 */
  flex-shrink: 0;
  margin: 0;
}

.vk_post_excerpt {
  /* 余ったスペースをこの要素がすべて占有する */
  flex-grow: 1;
}

.vk_post-btn-display .vk_post_btnOuter {
  /* 上側に自動でマージンを取り、一番下へ押しやる */
  flex-shrink: 0;
  position: relative;
  bottom: auto;
  padding-top: 20px;
  margin-top: auto;
  text-align: center !important;
}


/*====================================*/
/* 関連記事
/*====================================*/
.veu_relatedPosts>.row {
  gap: 18px;
  margin-right: 0;
}

.veu_relatedPosts .relatedPosts_item {
  width: calc((100% - 36px) / 3);
  max-width: none;
  margin-right: 0;
  border: 0 !important;
}

.veu_relatedPosts .relatedPosts_item>.media {
  flex-direction: column;
}

.veu_relatedPosts .relatedPosts_item>.media .postList_thumbnail {
  width: 100%;
  padding: 0;
}

.veu_relatedPosts .relatedPosts_item>.media .postList_thumbnail img {
  border-radius: 10px;
}


/*====================================*/
/* ページの数のとこ
/*====================================*/
.page-numbers {
  display: flex;
  gap: 10px;
}

ul.page-numbers li {
  overflow: visible;
}

ul.page-numbers li a,
ul.page-numbers li span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  min-width: 45px;
  min-height: 45px;
  padding: 0;
  border-radius: 30px;
  background-color: var(--sub-color);
  transition: all 0.3s ease;
}

ul.page-numbers li a:hover {
  aspect-ratio: 2 / 1;
  min-width: 50px;
  animation: poyo-horizontal 0.5s ease-out forwards;
}

ul.page-numbers li:first-child>.page-numbers {
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}

ul.page-numbers li:last-child>.page-numbers {
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}

/* --- 横長にぽよっと伸びるアニメ --- */
@keyframes poyo-horizontal {
  0% {
    transform: scale(1);
  }

  /* 1. 横にぐいっと伸びて、縦を少し縮める（1.2倍） */
  50% {
    transform: scale(1.2, 0.9);
  }

  /* 2. 反動で少しだけ縦長に戻る（0.98倍） */
  70% {
    transform: scale(0.98, 1.05);
  }

  /* 3. 最終的に「少しだけ横長」で静止（1.1倍） */
  100% {
    transform: scale(1.1, 1);
  }
}


/*====================================*/
/* サイドバー
/*====================================*/
/* --- プロフィール --- */
.veu_profile h4 {
  padding-top: 0;
  margin-top: 0;
}

.veu_profile .profile {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.veu_profile .media_outer {
  margin-top: 0;
}

.veu_profile .profile_text {
  margin-bottom: 0;
}

/* --- 新着・カテゴリ --- */
.widget-block-class h2 {
  width: 100%;
  padding: 10px 15px;
  margin-bottom: 0;
  border-bottom: 0;
  border-left: 5px solid var(--accent-pink);
  border-radius: 8px;
  color: var(--text-main);
  background-color: var(--sub-color);
  font-size: 1.05rem;
}

.wp-block-latest-posts li>a:hover {
  color: var(--accent-strong-pink);
  text-decoration: underline dotted;
}

.wp-block-latest-posts li {
  padding: 0.5rem;
}

.wp-block-latest-posts li>a:where(:not(:last-child)) {
  margin-bottom: 0;
}

.widget-block-class .wp-block-latest-posts__post-author,
.widget-block-class .wp-block-latest-posts__post-date {
  color: var(--text-sub);
}

.widget-block-class .wp-block-categories-list {
  width: 100%;
  padding: 0;
  list-style: none;
}

.widget-block-class .wp-block-categories-list .cat-item {
  padding: 0.5rem;
  margin: 0;
  border-bottom: 1px solid #ccc;
}

.widget-block-class .wp-block-categories-list a {
  display: block;
  text-decoration: none;
}

.widget-block-class .wp-block-categories-list a:hover {
  color: var(--accent-strong-pink);
  text-decoration: underline dotted;
}


/*====================================*/
/* 投稿スタイル
/*====================================*/
/* --- entry-meta --- */
.entry-meta-item-author {
  display: none;
}

/* --- ボタン --- */
.vk_post .vk_post_btn,
.wp-block-buttons .wp-block-button__link,
.top-button .elementor-button {
  padding: 7px 30px;
  border-radius: 10px;
  background-image: linear-gradient(to right, var(--main-color), var(--logo-sub-color), var(--logo-sub-color), var(--accent-pink));
  background-size: 250% 100%;
  transition: background-position 0.4s ease;
  animation: poyon-out 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.vk_post .vk_post_btn:hover,
.wp-block-buttons .wp-block-button__link:hover,
.top-button .elementor-button:hover {
  background-position: 100% 0;
  transition: background-position 0.4s ease;
  animation: poyon-bounce 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.vk_post .vk_post_btn:focus,
.wp-block-buttons .wp-block-button__link:focus,
.top-button .elementor-button:focus {
  outline: none;
}

/* --- ぽよんとアニメ --- */
@keyframes poyon-bounce {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  70% {
    transform: scale(0.98);
  }

  100% {
    transform: scale(1.05);
  }
}

/* マウスを離した時の余韻（戻る動き） */
@keyframes poyon-out {
  0% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

/* --- 吹き出し：マシュマロ --- */
.is-style-poyo-marshmallow .vk_balloon_content {
  background: #fff;
  border: 3px solid var(--sub-color);
  border-radius: 30px;
  box-shadow: 0 5px 0 var(--sub-color);
}

/* しっぽの色も合わせる */
.is-style-poyo-marshmallow.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_before:not(.has-text-color),
.is-style-poyo-marshmallow.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_after:not(.has-text-color) {
  border-right-color: var(--sub-color);
  border-width: 10px 11px 10px 0;
}

/* --- 吹き出し：マジックアワー --- */
.is-style-poyo-magic .vk_balloon_content {
  position: relative;
  z-index: 0;
  background-color: transparent;
  box-shadow: 0 10px 30px rgba(217, 161, 160 / 0.1);
}

.is-style-poyo-magic .vk_balloon_content::before,
.is-style-poyo-magic .vk_balloon_content::after {
  content: '';
  position: absolute;
  border-radius: 25px;
}

.is-style-poyo-magic .vk_balloon_content::before {
  top: 0;
  left: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--logo-main-color),
      var(--logo-sub-color),
      var(--accent-pink));
}

.is-style-poyo-magic .vk_balloon_content::after {
  top: 3px;
  left: 3px;
  z-index: -1;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  background-color: #fff;
  border-radius: 22px;
}

/* しっぽの色も合わせる */
.is-style-poyo-magic.vk_balloon-position-right.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_before:not(.has-text-color),
.is-style-poyo-magic.vk_balloon-position-right.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_after:not(.has-text-color) {
  border-right-color: var(--accent-pink);
  border-left-color: var(--accent-pink);
}


/*====================================*/
/* 前後記事
/*====================================*/
.next-prev {
  justify-content: space-between;
}

.next-prev .vk_post.card {
  margin-left: 0;
  margin-right: 0;
}

.card-intext .card-intext-inner .vk_post_body {
  background: linear-gradient(oklch(0.4404 0.0592 279.99 / 70%),
      oklch(0.6822 0.0536 317.63 / 70%),
      oklch(0.7613 0.0669 19.91 / 70%));
}


/*====================================*/
/* トップページ
/*====================================*/
/* --- 動く背景 --- */
.top-animation {
  border-radius: 0 0 50px 50px;
  background: linear-gradient(135deg,
      var(--logo-main-color),
      var(--logo-sub-color),
      var(--accent-pink),
      var(--main-bg));
  background-size: 400% 400%;
  animation: gradientAnimation 20s ease infinite;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.hero-copy .elementor-heading-title,
.hero-copy .elementor-heading-title {
  animation: textBlurFade 1.5s ease-in-out forwards;
}

@keyframes textBlurFade {
  0% {
    filter: blur(5px);
    letter-spacing: 0px;
  }

  100% {
    filter: blur(0);
    letter-spacing: 2px;
  }
}

/* --- 制作日記Grid --- */
.production-grid .eael-grid-post-holder-inner {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.production-grid .eael-grid-post-holder-inner .eael-entry-wrapper {
  position: absolute;
  bottom: 0;
  width: 100%;
  opacity: 0;
  background: var(--bg-gradation);
  transform: translateY(20px);
  transition: all 0.4s ease-out;
}

.production-grid .eael-grid-post-holder-inner:hover .eael-entry-wrapper {
  opacity: 1;
  transform: translateY(0);
}

/* --- 投稿タブメニュー --- */
.elementor-widget-n-tabs.top-post-tab .e-n-tab-title {
  z-index: 1;
  background: transparent;
  border-radius: 15px;
  cursor: pointer;
  overflow: hidden;
  transform-origin: center;
}

.elementor-widget-n-tabs.top-post-tab .e-n-tab-title:hover {
  animation: poyon-tab-stretch 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.elementor-widget-n-tabs.top-post-tab .e-n-tab-title[aria-selected="true"] {
  background: var(--accent-pink);
  transform: scaleX(1);
}

.elementor-widget-n-tabs.top-post-tab .e-n-tab-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: var(--accent-pink);

  /* 初期状態：右側を100%隠す（左から右へ開く準備） */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ホバー時＆アクティブ時に全開にする */
.elementor-widget-n-tabs.top-post-tab .e-n-tab-title:hover::before {
  clip-path: inset(0 0 0 0);
}

@keyframes poyon-tab-stretch {
  0% {
    transform: scaleX(1);
  }

  30% {
    /* 横に伸びて、少し潰れる */
    transform: scaleX(1.15) scaleY(0.95);
  }

  60% {
    /* 反動で少し縮む */
    transform: scaleX(0.98) scaleY(1.02);
  }

  100% {
    /* 最終的に少しだけ横長のまま静止 */
    transform: scaleX(1.1);
  }
}

/* --- 投稿タブコンテンツ --- */
.top-post-tab .ha-post-list-wrapper .ha-post-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  width: 100%;
}

.top-post-tab .ha-post-list .ha-post-list-item {
  overflow: hidden;
  transform: translateY(1);
  transition: transform .3s ease-in-out;
}
.elementor-widget-n-tabs.top-post-tab .ha-post-list .ha-post-list-item:hover{
  transform: translateY(-10px);
}


.elementor-widget-n-tabs.top-post-tab .ha-post-list .ha-post-list-item a {
  flex-direction: column !important;
  gap: 15px;
}
.top-post-tab .ha-post-list .ha-post-list-item .ha-post-list-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 15px 20px;
}

.top-post-tab .ha-post-list .ha-post-list-item .ha-post-list-title {
  flex-shrink: 1;
  padding: 0;
  border-left: 0;
}

.top-post-tab .ha-post-list .ha-post-list-item .ha-post-list-meta-wrap {
  flex: 2;
}


/* レスポンシブ対応（タブレットとスマホ） */
@media (max-width: 991px) {

  /*====================================*/
  /* 投稿一覧スタイル
  /*====================================*/
  .vk_post-loop {
    grid-template-columns: repeat(2, 1fr);
  }

  /* タブレットは2列 */
}

@media (max-width: 575px) {

  /*====================================*/
  /* 投稿一覧スタイル
  /*====================================*/
  .vk_post-loop {
    grid-template-columns: 1fr;
  }

  /* スマホは1列 */
}