/* ======================================================
   App badges visibility rules (FINAL)
   UX:
   - PC: header badges only (all pages)
   - SP: footer badges only (all pages)
   ====================================================== */

/* SP: header badges never show */
@media (max-width: 768px) {
  header .header-right { display: none !important; }
  .header-app-badges { display: none !important; }
}

/* PC: footer badges never show */
@media (min-width: 769px) {
  .footer-app-badges { display: none !important; }
}

/* SP: footer badges show on all pages */
@media (max-width: 768px) {
  .footer-app-badges {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    flex-wrap: wrap;
  }
  .footer-app-badge {
    float: none !important;
    position: static !important;
    margin: 0 !important;
  }
  .footer-app-badge img {
    height: 40px;
    width: auto;
    display: block;
  }
}

/* Blog list page: hide main title (JP/EN) */
.blog .main-title.blog,
.page-template-page-blog .main-title.blog {
  display: none;
}

/* Blog list page: hide left title label (page-blog.php) */
.page-template-page-blog h1.main-title.blog,
.page-template-page-blog-php h1.main-title.blog {
  display: none !important;
}


/* ===============================
   FINAL KILL: Blog list page title
   =============================== */
.page-template-page-blog h1.main-title.blog,
.page-template-page-blog-php h1.main-title.blog {
  position: static !important;
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ===============================
   Blog pagination – centered
   =============================== */
.blog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 48px auto 0;
  text-align: center;
}

.blog-pagination .page-numbers {
  display: inline-block;
  margin: 0 6px;
  color: rgba(0,0,0,0.6); /* JP/ENどちらも自然 */
  text-decoration: none;
}

.blog-pagination .page-numbers.current {
  font-weight: 600;
  color: #000;
}

.blog-pagination .page-numbers:hover {
  text-decoration: underline;
}

/* ===============================
   FORCE top-page header background
   =============================== */
html body#top-page header {
  background: linear-gradient(
    to bottom,
    rgba(35, 23, 18, 0.88),
    rgba(35, 23, 18, 0.65)
  ) !important;

  backdrop-filter: blur(2px) !important;
}


/* ===============================
   Language switch (JP / EN)
   =============================== */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  letter-spacing: 0.08em;
}

.lang-switch .lang-item {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 0.2s ease;
}

.lang-switch .lang-item:hover {
  color: rgba(255,255,255,0.9);
}

.lang-switch .lang-item.is-active {
  color: #fff;
  font-weight: 500;
  pointer-events: none;
}

.lang-switch .lang-divider {
  color: rgba(255,255,255,0.35);
}

/* ===============================
   Overlay language switch (SP menu)
   =============================== */
.overlay-lang {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 0 10px;
  margin: 0;
}

.overlay-lang__item {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.12em;
}

.overlay-lang__item.is-active {
  color: #fff;
  font-weight: 600;
  pointer-events: none;
}

.overlay-lang__divider {
  color: rgba(255,255,255,0.35);
}

/* PCではoverlay内の言語切替を表示しない（右上lang-switchだけ使う） */
@media (min-width: 769px){
  #overlay .overlay-lang{ display:none !important; }
}

/* ===== SP overlay: top-page でもメニューを殺さない救急パッチ ===== */
@media (max-width: 768px){

  /* ENトップだけ ul/ol が消えてるのを強制復帰 */
  html body#top-page #overlay ul,
  html body#top-page #overlay ol{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    height:auto !important;
    max-height:none !important;
    transform:none !important;
  }

  /* overlay 自体が潰されてるケースもあるので保険 */
  html body#top-page #overlay{
    height:100vh !important;
    overflow:auto !important;
  }
}

/* ===== SP overlay: Language switch を中央で詰める ===== */
@media (max-width: 768px){
  #overlay .overlay-lang{
    display:flex !important;
    align-items:center;
    justify-content:center !important;
    gap:10px;
    margin:18px 0 22px;
    padding:0 18px;
    width:100%;
  }

  #overlay .overlay-lang__item{
    display:inline-block;
    white-space:nowrap;
  }

  #overlay .overlay-lang__divider{
    opacity:0.6;
  }
}