@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

// INFORMATION ＆ 自動取得NEWSテロップをひとまとめに出力するショートコード
function kiraku_info_section_shortcode() {
    // 1. 最新の投稿（お知らせ）を3件取得
    $news_query = new WP_Query(array(
        'post_type'      => 'post',
        'posts_per_page' => 3,
        'post_status'    => 'publish',
    ));

    $news_html = '';
    if ($news_query->have_posts()) {
        while ($news_query->have_posts()) {
            $news_query->the_post();
            $date  = get_the_date('Y.m.d');
            $title = get_the_title();
            $link  = get_permalink();

            $news_html .= '<span class="info-news-item">';
            $news_html .= '<span class="info-news-date">' . esc_html($date) . '</span>';
            $news_html .= '<a href="' . esc_url($link) . '" class="info-news-link">' . esc_html($title) . '</a>';
            $news_html .= '</span>';
        }
        wp_reset_postdata();
    } else {
        $news_html = '<span class="info-news-item">現在お知らせはありません。</span>';
    }

    // 2. INFORMATIONブロック全体のHTMLを出力
    ob_start();
    ?>
    <div class="info-compact-wrapper">
      <div class="info-compact-card">
        
        <!-- 枠内上部：NEWSテロップエリア（自動取得） -->
        <div class="info-news-ticker-container">
          <div class="info-news-label">NEWS</div>
          <div class="info-news-ticker-wrapper">
            <div class="info-news-ticker-track">
              <?php echo $news_html; ?>
            </div>
          </div>
        </div>

        <!-- INFORMATION ヘッダー -->
        <div class="info-compact-header">
          <h2 class="info-compact-en">INFORMATION</h2>
        </div>

        <!-- 店舗情報リスト -->
        <dl class="info-compact-list">
          <div class="info-compact-row">
            <dt class="info-compact-label">HOURS</dt>
            <dd class="info-compact-val">
              20:00 – 翌5:00 <span class="info-compact-badge">不定休</span>
            </dd>
          </div>

          <div class="info-compact-row">
            <dt class="info-compact-label">ADDRESS</dt>
            <dd class="info-compact-val">新宿区歌舞伎町1-9-1 ヒサコービル2F</dd>
          </div>

          <div class="info-compact-row">
            <dt class="info-compact-label">ACCESS</dt>
            <dd class="info-compact-val">TOHOシネマズ・新宿区役所・風林会館より徒歩2分</dd>
          </div>

          <div class="info-compact-row">
            <dt class="info-compact-label">BUDGET</dt>
            <dd class="info-compact-val">¥4,000 ～</dd>
          </div>
        </dl>

        <!-- 営業ガイドボタン -->
        <div class="info-compact-action">
          <a href="#" class="info-compact-btn">営業ガイド・ご利用案内 →</a>
        </div>

      </div>
    </div>
    <?php
    return ob_get_clean();
}