/*
 Theme Name: Twenty Twenty-Five Child
 Template: twentytwentyfive
 Description: Child theme for Twenty Twenty-Five
 Author: HEROs
 Version: 1.0
*/

/* =========================================================
   0) 全体：固定グラデ背景（黒→オレンジ）※iOS/Safari安定化
   ========================================================= */
body{
  position: relative;
  z-index: 0;
  min-height: 100dvh;
  background: transparent !important; /* テーマ既定の背景を無効化 */
}
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1; /* 常に背面 */
  background: linear-gradient(to bottom, #000000 0%, #FF8000 100%);
}

/* ラッパー/ヘッダー/フッターを透過（必要に応じて） */
.wp-site-blocks,
header.wp-block-template-part,
footer.wp-block-template-part{
  background: transparent !important;
}

/* =========================================================
   1) 導入オーバーレイ（黒幕＆テキスト演出）
   ========================================================= */
#intro-overlay{
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #000;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 1; visibility: visible;
  transition: opacity .6s ease, visibility 0s linear 0s;
}
#intro-overlay .intro-text{
  font-weight: 700;
  font-size: clamp(24px, 6vw, 56px);
  letter-spacing: .04em;
  opacity: 0; transform: translateX(-24px);
  animation: introFloatIn 1.2s ease-out .2s forwards;
  white-space: nowrap;
}
@keyframes introFloatIn{ to { opacity: 1; transform: translateX(0); } }
#intro-overlay.is-hidden{
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
  pointer-events: none;
}
html.is-intro-lock{ overflow: hidden; }
@media (prefers-reduced-motion: reduce){
  #intro-overlay .intro-text{ animation: none; opacity: 1; transform: none; }
}

/* =========================================================
   2) 固定ページ：タイトル非表示
   ========================================================= */
.page .wp-block-post-title,
.page .entry-title{
  display: none !important;
  margin: 0 !important;
}

/* =========================================================
   3) 固定ページ：ヘッダー直下の余白除去＆背景干渉抑制
   ========================================================= */
body.page{
  --wp--style--root--padding-top: 0 !important;
  --wp--style--root--padding-bottom: 0 !important;
}
body.page .wp-site-blocks{ padding-top: 0 !important; }
body.page .wp-site-blocks > *:first-child,
body.page .wp-site-blocks .is-layout-flow > *:first-child,
body.page .wp-block-image.alignfull:first-child,
body.page .wp-block-cover.alignfull:first-child,
body.page .wp-block-group.alignfull:first-child{
  margin-top: 0 !important;
}

/* ヘッダー直下の行グループ余白/ギャップをゼロに */
body.page header.wp-block-template-part .wp-block-group.alignwide.is-layout-flex{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  --wp--style--block-gap: 0 !important;
  row-gap: 0 !important;
}

/* 先頭が行グループの場合の保険 */
body.page .wp-site-blocks > .wp-block-group.alignwide.is-layout-flex:first-child{
  margin-top: 0 !important;
}

/* 最上位グループが背景持ちなら透明に（必要時） */
body.page .wp-site-blocks > .wp-block-group.has-background{
  background: transparent !important;
}

/* =========================================================
   4) 固定ページ：文字色を白に統一（ベース）
   ========================================================= */
body.page{
  color: #fff;
  /* TT25の配色変数も白に寄せる（変数参照ブロック用） */
  --wp--preset--color--foreground: #ffffff;
  --wp--preset--color--contrast:  #ffffff;
  --wp--preset--color--base:       #ffffff;
  --wp--preset--color--primary:    #ffffff;
}
body.page .wp-site-blocks{ color: inherit; }

/* 見出し/本文/リスト/コード等 */
body.page :is(h1,h2,h3,h4,h5,h6,
  p,li,dt,dd,figcaption,caption,
  .wp-block-quote,.wp-block-pullquote,
  .wp-block-code,.wp-block-preformatted){
  color: #fff !important;
}

/* 引用の罫線など */
body.page :is(blockquote,.wp-block-quote){
  border-left-color: rgba(255,255,255,.4) !important;
}

/* 区切り線 */
body.page :is(hr,.wp-block-separator){
  border-color: rgba(255,255,255,.25) !important;
  background: rgba(255,255,255,.25) !important;
}

/* 表 */
body.page table,
body.page th, body.page td{
  color: #fff !important;
  border-color: rgba(255,255,255,.25) !important;
}

/* リストのマーカー色 */
body.page ::marker{ color:#fff; }

/* リンク（白＋下線） */
body.page a{
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.page a:hover{ opacity: .85; }

/* ── 固定ページの中で shop-info セクションだけ黒文字に戻す ── */
body.page .shop-info{ color:#111 !important; }
body.page .shop-info :is(
  h1,h2,h3,h4,h5,h6,
  p,li,dt,dd,figcaption,caption,
  .wp-block-quote,.wp-block-pullquote,
  table,th,td,a,code,pre
){ color: inherit !important; }
body.page .shop-info :is(hr,.wp-block-separator){
  background: rgba(0,0,0,.25) !important;
  border-color: rgba(0,0,0,.25) !important;
}
body.page .shop-info table,
body.page .shop-info th,
body.page .shop-info td{ border-color: rgba(0,0,0,.25) !important; }
body.page .shop-info ::marker{ color: currentColor; }

/* =========================================================
   5) 投稿ページ：本文を白に統一（見出し/本文/表/引用/リンク等）
   ========================================================= */
.single{
  color:#fff;
  --wp--preset--color--foreground: #ffffff;
  --wp--preset--color--contrast:  #ffffff;
  --wp--preset--color--base:       #ffffff;
  --wp--preset--color--primary:    #ffffff;
}
.single .wp-block-post-content,
.single .wp-block-post-content :is(p,li,dt,dd,figcaption,caption,
  h1,h2,h3,h4,h5,h6,
  .wp-block-quote,.wp-block-pullquote,
  .wp-block-code,.wp-block-preformatted){
  color:#fff !important;
}
.single :is(blockquote,.wp-block-quote){
  border-left-color: rgba(255,255,255,.4) !important;
}
.single :is(hr,.wp-block-separator){
  border-color: rgba(255,255,255,.25) !important;
  background: rgba(255,255,255,.25) !important;
}
.single :is(table, th, td){
  color:#fff !important;
  border-color: rgba(255,255,255,.25) !important;
}
.single .wp-element-caption{ color:#eee !important; }
.single .wp-block-post-content a{
  color:#fff !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.single .wp-block-post-content a:hover{ color:#ddd !important; }

/* 特定記事だけにしたい時の例：
.postid-123 .wp-block-post-content { color:#fff !important; }
*/

/* =========================================================
   6) 固定ページ：特定ボタン（btn-text-black）だけ白背景×黒文字
   ========================================================= */
.page .wp-block-button.btn-text-black .wp-block-button__link,
.page .btn-text-black .wp-block-button__link{
  background: #fff !important;
  color: #111 !important;
  text-decoration: none !important; /* 全体のリンク下線を打ち消し */
}
/* TT25の .wp-element-button にも対応 */
.page .btn-text-black .wp-element-button{
  background: #fff !important;
  color: #111 !important;
}
/* アウトラインスタイルの枠線も黒に */
.page .wp-block-button.is-style-outline.btn-text-black .wp-block-button__link,
.page .is-style-outline.btn-text-black .wp-block-button__link{
  border-color: #111 !important;
}
/* ホバー/フォーカス */
.page .wp-block-button.btn-text-black .wp-block-button__link:hover,
.page .btn-text-black .wp-block-button__link:hover,
.page .wp-block-button.btn-text-black .wp-block-button__link:focus,
.page .btn-text-black .wp-block-button__link:focus{
  background: #fff !important;
  color: #111 !important;
  opacity: .92;
}

/* =========================================================
   7) Google Map / Calendar の埋め込みを常に正方形に
   ========================================================= */
iframe[src*="google.com/maps"],
iframe[src*="calendar.google.com/calendar"]{
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;   /* 正方形 */
  max-width: 100%;
  display: block;
  border: 0;
}

/* 親カラムのはみ出し対策（保険） */
.wp-block-column, .wp-block-group { overflow: visible; }

/* =========================================================
   8) モバイルの全画面メニュー（ハンバーガー展開時の見やすさ）
   ========================================================= */
.wp-block-navigation__responsive-container.is-menu-open{
  background: rgba(0,0,0,.92) !important;
}
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  color:#fff !important;
  text-decoration: none;
}
/* 閉じるボタン（×）も白に */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg{
  color:#fff; fill:#fff;
}

/* =========================================================
   9) メモ：固定ページだけグラデにしたい場合の代替（必要時に使用）
   ---------------------------------------------------------
   上の全体版をコメントアウトして下を有効化
   body.page{ position: relative; z-index:0; background: transparent !important; }
   body.page::before{ content:""; position: fixed; inset:0; z-index:-1;
     background: linear-gradient(to bottom, #000000 0%, #FF8000 100%); }
   ========================================================= */