/*
Theme Name: K2 Pictures New Design
Theme URI: http://k2pictures.com/
Description: K2 Pictures 新デザインテーマ - モダンで洗練されたデザイン
Version: 1.0.0
Author: Development Team
Text Domain: k2-new
*/

/* ==========================================================================
   Google Fonts Import
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');

/* ==========================================================================
   CSS File Imports
   ========================================================================== */

/* 共通スタイル（全ページで使用） */
@import url('assets/css/base/common.css');

/* 共通コンポーネント */
@import url('assets/css/components/scroll-indicator.css');
@import url('assets/css/components/section-title.css');
@import url('assets/css/components/film/header.css');
@import url('assets/css/components/film/hero.css');
@import url('assets/css/components/film/breadcrumb.css');
@import url('assets/css/components/page-hero.css');
@import url('assets/css/components/page-breadcrumb.css');

/* 
ページ別スタイル（bodyクラスで制御）
各ページのスタイルはbodyクラスによって適用範囲を制限しています：
- body.top: トップページ専用
- body.news: ニュースページ専用  
- body.films: フィルムページ専用
- body.films-detail: フィルム詳細ページ専用
- body.page-board: BOARDページ専用
- body.page-creator: CREATORページ専用

この方式により、1つのCSSファイルで効率的にスタイルを管理できます。
*/
@import url('assets/css/pages/top/index.css');
@import url('assets/css/pages/news/index.css');
@import url('assets/css/pages/films/index.css');
@import url('assets/css/pages/film-detail/index.css');
@import url('assets/css/pages/board/index.css');
@import url('assets/css/pages/creator/index.css');
@import url('assets/css/pages/magazine/index.css');
@import url('assets/css/pages/terms/index.css');
@import url('assets/css/pages/privacy/index.css');
@import url('assets/css/pages/contact/index.css');
@import url('assets/css/pages/film-about/index.css');
@import url('assets/css/pages/film-theater/index.css');
@import url('assets/css/pages/film-distribution/index.css');

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* テキストユーティリティ */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* スペーシングユーティリティ */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 30px; }
.mt-4 { margin-top: 40px; }
.mt-5 { margin-top: 50px; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 10px; }
.mb-2 { margin-bottom: 20px; }
.mb-3 { margin-bottom: 30px; }
.mb-4 { margin-bottom: 40px; }
.mb-5 { margin-bottom: 50px; }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 10px; }
.pt-2 { padding-top: 20px; }
.pt-3 { padding-top: 30px; }
.pt-4 { padding-top: 40px; }
.pt-5 { padding-top: 50px; }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 10px; }
.pb-2 { padding-bottom: 20px; }
.pb-3 { padding-bottom: 30px; }
.pb-4 { padding-bottom: 40px; }
.pb-5 { padding-bottom: 50px; }

/* 表示ユーティリティ */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

/* フレックスユーティリティ */
.flex-center { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.flex-between { 
    display: flex; 
    justify-content: space-between; 
}
.flex-column { flex-direction: column; }

/* ==========================================================================
   Page-specific body classes
   ページ別のbodyクラスで制御するスタイル
   ========================================================================== */

/* 
bodyクラスによるページ別制御の例：
- body.top: トップページ専用スタイル
- body.news: ニュースページ専用スタイル
- body.films: フィルムページ専用スタイル
- body.films-detail: フィルム詳細ページ専用スタイル

各ページのCSSファイル内で適切なbodyクラスセレクタを使用することで、
スタイルの適用範囲を制限し、競合を防いでいます。
*/

/* 今後追加予定のページ用の準備 */
body.page-about .page-hero {
    /* ABOUTページ専用のヒーローセクション */
}

body.page-contact .page-hero {
    /* CONTACTページ専用のヒーローセクション */
}

/* ==========================================================================
   WordPress specific styles
   ========================================================================== */

/* WordPress管理バー対応 */
.admin-bar .header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .header {
        top: 46px;
    }
}

/* WordPressの埋め込みコンテンツ */
.wp-embedded-content {
    max-width: 100%;
}

/* ギャラリー */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.gallery-item {
    margin: 0;
}

/* WordPressのアライメントクラス */
.alignleft {
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
}

.alignright {
    float: right;
    margin-left: 20px;
    margin-bottom: 10px;
}

.aligncenter {
    display: block;
    margin: 0 auto 20px;
}

.alignnone {
    margin: 0 0 20px;
}

/* ==========================================================================
   Future-proofing classes
   将来のページ追加に備えたクラス
   ========================================================================== */

/* コンポーネント用の基底クラス */
.component {
    /* 全コンポーネント共通のベーススタイル */
}

.component--hero {
    /* ヒーローコンポーネントの基底スタイル */
}

.component--grid {
    /* グリッドコンポーネントの基底スタイル */
}

.component--card {
    /* カードコンポーネントの基底スタイル */
}

/* ページレイアウト用クラス */
.page-layout {
    /* ページ全体のレイアウト基底クラス */
}

.page-layout--single {
    /* 1カラムレイアウト */
}

.page-layout--sidebar {
    /* サイドバー付きレイアウト */
}