<?php
/**
 * Template Name: NKT Standalone (Block Styles On, Full-bleed Hero + Fixes)
 * Description: ヒーローを横いっぱい＆高さ固定。オーバーレイ薄め。見出し「治療」を改行させない。強いセレクタで確実に適用。
 */

defined('ABSPATH') || exit;

/* --- 1) 競合しやすい翻訳系のみ停止。ブロック標準CSSは必ず読む --- */
add_action('wp_enqueue_scripts', function () {
  foreach ([
    'umekita-glt-bootstrap','umekita-glt-core','umekita-glt-unified',
    'umekita-glt-bridge','umekita-glt-safemode','umekita-glt-safari-fix',
    'umekita-glt-safari-fallback','umekita-glt-cleanup','umekita-glt-ensure-apply',
    'umekita-language-override','language-override','glt-unified','glt-core'
  ] as $h) { wp_dequeue_script($h); wp_deregister_script($h); wp_dequeue_style($h); wp_deregister_style($h); }

  wp_enqueue_style('wp-block-library');
  wp_enqueue_style('wp-block-library-theme');
  if (function_exists('wp_enqueue_global_styles')) wp_enqueue_global_styles();
}, 0);

/* --- 2) レイアウト（ヒーロー：横いっぱい/高さ固定、オーバーレイ薄め、MediaText等） --- */
add_action('wp_head', function(){ ?>
  <style id="nkt-standalone-layout">
    :root{
      --content-w: 1040px;                     /* 本文最大幅 */
      --gutter:   min(6vw, 40px);              /* 本文左右余白 */
      --hero-h:   clamp(360px, 42vw, 520px);   /* ★ヒーロー高さ（上下トリミングの強さ）*/
      --overlay-op: .32;                       /* ★オーバーレイの薄さ（0.28～0.45 推奨）*/
    }
    html,body{ background:#fff; overflow:auto; }

    /* 本文（ヒーロー以外） */
    .nkt-wrap{ max-width:var(--content-w); margin:48px auto 96px; padding:0 var(--gutter); }

    /* =========================
       ヒーロー（1つ目の Cover）：横いっぱい＆高さ固定（上下トリミング）
       ※ タグが header/div どちらでも当たるように、セレクタは幅広く
       ========================= */
    .nkt-wrap .wp-block-cover:first-of-type{
      position: relative !important;
      /* 横いっぱい（本文左右余白を相殺） */
      margin-left:  calc(50% - 50vw) !important;
      margin-right: calc(50% - 50vw) !important;
      width: 100vw !important;

      height: var(--hero-h) !important;     /* 高さ固定 */
      min-height: 0 !important;
      overflow: hidden !important;
    }
    /* 背景画像：必ず全面に敷き、上下は cover でトリミング。注視点は右やや上 */
    .nkt-wrap .wp-block-cover:first-of-type > img.wp-block-cover__image-background{
      position:absolute !important; inset:0 !important;
      width:100% !important; height:100% !important;
      object-fit:cover !important;
      /* エディタ上の style="object-position:63% 33%" があっても上書き */
      object-position:65% 35% !important;
      display:block !important; z-index:0 !important;
    }
    /* もし同じimgが2つ出ていても両方に当てる */
    .nkt-wrap .wp-block-cover:first-of-type img.wp-block-cover__image-background + img.wp-block-cover__image-background{
      position:absolute !important; inset:0 !important;
      width:100% !important; height:100% !important; object-fit:cover !important; object-position:65% 35% !important; z-index:0 !important;
    }

    /* オーバーレイ（背景色スパン）をやや薄く */
    .nkt-wrap .wp-block-cover:first-of-type > .wp-block-cover__background{
      position:absolute !important; inset:0 !important;
      width:100% !important; height:100% !important;
      opacity: var(--overlay-op) !important;
      z-index:1 !important;
    }

    /* テキストの箱：本文幅で中央寄せ（左揃え）、縦は中央。横いっぱいでも読みやすい幅に */
    .nkt-wrap .wp-block-cover:first-of-type .wp-block-cover__inner-container{
      position:absolute !important; inset:0 !important;
      display:grid !important; align-content:center !important; justify-content:start !important;
      max-width:var(--content-w) !important; width:100%;
      margin:0 auto !important; padding: clamp(16px, 3.5vw, 56px) !important;
      z-index:2 !important;
    }
    .nkt-wrap .wp-block-cover:first-of-type .wp-block-cover__inner-container > p{
      margin:0 !important; color:#111 !important; text-shadow:none !important; max-width:38rem !important;
    }
    .nkt-wrap .wp-block-cover:first-of-type .wp-block-cover__inner-container > p:first-of-type{
      font-size: clamp(36px, 6vw, 64px) !important; line-height:1.2 !important; font-weight:700 !important;
    }
    .nkt-wrap .wp-block-cover:first-of-type .wp-block-cover__inner-container > p:nth-of-type(2){
      margin-top: clamp(10px, 1.4vw, 18px) !important;
      font-size: clamp(16px, 1.4vw, 20px) !important; line-height:1.9 !important; max-width:40rem !important;
    }

    /* 改行禁止用クラス */
    .nkt-nobr{ white-space:nowrap !important; display:inline-block !important; }

    /* 本文側：MediaText 2カラムなど */
    @media (min-width:782px){
      .wp-block-media-text{ display:grid; grid-template-columns:48% 1fr; gap:28px; }
      .wp-block-media-text__media img{ width:100%; height:auto; display:block; }
    }
    .has-large-font-size  { font-size:clamp(28px, 3.2vw, 40px); line-height:1.25; }
    .has-medium-font-size { font-size:clamp(16px, 1.5vw, 18px); line-height:1.9; }
    .alignwide{ max-width:min(1200px, 96vw); margin-left:auto; margin-right:auto; }
    .alignfull{ max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
  </style>
<?php }, 1);

/* --- 3) 見出しの「治療」を確実にノーブレーク（HTML編集不要） --- */
add_action('wp_footer', function () { ?>
  <script>
  (function(){
    try{
      // ヒーローの最初の段落を取得（強めのセレクタで）
      const p = document.querySelector('.nkt-wrap .wp-block-cover:first-of-type .wp-block-cover__inner-container > p');
      if(!p) return;
      if(p.dataset.nktNobrApplied === '1') return;

      // すべてのテキストノードを対象に「治療」をノーブレーク span へ
      const walk = document.createTreeWalker(p, NodeFilter.SHOW_TEXT, null);
      const targets = [];
      while(walk.nextNode()) targets.push(walk.currentNode);
      targets.forEach(node=>{
        if(!node.nodeValue.includes('治療')) return;
        const frag = document.createElement('span');
        frag.innerHTML = node.nodeValue.replace(/治療/g, '<span class="nkt-nobr">治療</span>');
        node.parentNode.replaceChild(frag, node);
      });
      p.dataset.nktNobrApplied = '1';
    }catch(e){}
  })();
  </script>
<?php }, 99);
?>

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <?php wp_head(); ?>
</head>
<body <?php body_class('nkt-standalone'); ?>>
<?php wp_body_open(); ?>

<main class="nkt-wrap" role="main">
  <?php
    while (have_posts()) : the_post();
      $content = trim(get_the_content());
      echo ($content !== '') ? apply_filters('the_content', $content)
                             : '<p style="opacity:.6">（ブロック未入力です。固定ページ本文にブロックを追加してください）</p>';
    endwhile;
  ?>
</main>

<?php wp_footer(); ?>
</body>
</html>