/*
Theme Name: OLUOLI
Theme URI: https://www.oluoli.com/
Author: [NGScreate]
Description: シンプルかつ洗練されたデザインと、国内最高水準の高速化を両立した次世代WordPressテーマ。
Version: 1.0.1
License: GNU General Public License v2 or later
Text Domain: oluoli
*/

/* ==========================================================================
   1. カスタムプロパティ (CSS変数)
========================================================================== */
:root {
    /* --- 基本カラー --- */
    --color-main: #2b79c2;
    --color-background: #f7f7f7;
    --color-text: #222222;
    --link-color: #2b79c2;
    --link-hover-color: #00a0d2;

    /* --- タイポグラフィ --- */
    --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-fallback-ja: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 
    --font-primary: var(--font-system), var(--font-fallback-ja); 
    --font-size-base: 16px;

    /* --- ヘッダー/フッター設定 --- */
    --header-bg-color: #ffffff;
    --header-title-color: #222222;
    --header-menu-color: #444444;
    --header-vertical-padding: 10px; /* 高さデフォルト */
    
    --footer-bg-color: #333333;
    --footer-text-color: #ffffff;

    /* --- 余白 --- */
    --space-sm: 10px;
    --space-md: 20px;
    --space-lg: 40px;
    --space-xl: 80px;
}

/* ==========================================================================
   2. 基本スタイル
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: 1.8;
}

a { color: var(--link-color); text-decoration: none; transition: 0.2s; }
a:hover { color: var(--link-hover-color); opacity: 0.8; }

/* 構造 */
.site { min-height: 100vh; display: flex; flex-direction: column; }

/* * 【重要修正】width: 100% を削除し、auto (デフォルト) にすることで
 * margin が追加されてもはみ出さないように修正
 */
.site-content { 
    flex-grow: 1; 
    width: auto; /* 100%から変更 */
    max-width: 1100px; 
    margin: 0 auto; 
    padding: var(--space-lg) var(--space-md); 
}

/* ヘッダー共通 */
.site-header { width: 100%; z-index: 1000; background-color: var(--header-bg-color); }
.site-branding .site-title a { color: var(--header-title-color); font-size: 1.5rem; font-weight: 800; display: block; line-height: 1; }
.site-branding .site-description { color: var(--header-title-color); font-size: 0.8rem; margin: 0; opacity: 0.8; }

.main-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; }
.main-navigation li { margin-left: var(--space-md); }
.main-navigation a { color: var(--header-menu-color); font-weight: 600; display: block; padding: 5px 0; }
.main-navigation a:hover { color: var(--color-main); }

/* フッター */
.site-footer { background-color: var(--footer-bg-color); color: var(--footer-text-color); padding: var(--space-lg) 0; text-align: center; }
.site-footer a { color: var(--footer-text-color); }


/* ==========================================================================
   3. ヘッダーバリエーション (basic-fixed)
========================================================================== */

/* 基本設定 */
.header-basic-fixed.site-header {
    position: fixed;
    top: 0; left: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    /* 高さ調整の適用 */
    padding-top: var(--header-vertical-padding);
    padding-bottom: var(--header-vertical-padding);
}

/* コンテンツ余白調整 */
.header-basic-fixed.site-header ~ .site-content {
    /* (ヘッダー高さ目安40px) + (上下padding × 2) + 余白 */
    padding-top: calc(40px + 2 * var(--header-vertical-padding) + var(--space-lg));
}

/* 内部コンテナ */
.header-basic-fixed.site-header .header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--space-md);
    width: 100%;
    position: relative; /* absolute配置の基準 */
    display: flex;
    align-items: center;
    /* デフォルト: ロゴ左、メニュー右 */
    justify-content: space-between; 
}

/* --- 配置カスタマイズ (Flexbox & Absolute) --- */

/* 1. ロゴ: 左 */
.header-basic-fixed.site-header[data-logo-align="left"] .header-inner {
    justify-content: space-between; 
}
/* メニュー左寄せ */
.header-basic-fixed.site-header[data-logo-align="left"][data-menu-align="left"] .header-inner {
    justify-content: flex-start;
}
.header-basic-fixed.site-header[data-logo-align="left"][data-menu-align="left"] .site-branding {
    margin-right: 40px; 
}
/* メニュー中央寄せ */
.header-basic-fixed.site-header[data-logo-align="left"][data-menu-align="center"] .header-inner {
    justify-content: space-between; 
}
.header-basic-fixed.site-header[data-logo-align="left"][data-menu-align="center"] #site-navigation {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}


/* 2. ロゴ: 中央 (絶対配置で固定) */
.header-basic-fixed.site-header[data-logo-align="center"] .site-branding {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
    width: auto;
}

/* メニュー: 左 (ロゴ中央時) */
.header-basic-fixed.site-header[data-logo-align="center"][data-menu-align="left"] .header-inner {
    justify-content: flex-start;
}
/* メニュー: 右 (ロゴ中央時) */
.header-basic-fixed.site-header[data-logo-align="center"][data-menu-align="right"] .header-inner {
    justify-content: flex-end;
}
/* メニュー: 中央 (ロゴ中央時 -> 被るためメニューを下へ) */
.header-basic-fixed.site-header[data-logo-align="center"][data-menu-align="center"] .header-inner {
    flex-direction: column;
    justify-content: center;
    padding-top: 40px; 
}
.header-basic-fixed.site-header[data-logo-align="center"][data-menu-align="center"] .site-branding {
    position: static; /* absolute解除 */
    transform: none;
    margin-bottom: 10px;
}


/* ==========================================================================
   4. その他のヘッダー
========================================================================== */

/* minimal */
.header-minimal.site-header {
    background-color: transparent;
    position: absolute; top: 0; left: 0;
    padding: var(--space-lg) 0;
}
.header-minimal.site-header .header-inner {
    max-width: 1100px; margin: 0 auto; padding: 0 var(--space-md);
    display: flex; justify-content: space-between; align-items: center;
}
.header-minimal.site-header ~ .site-content { padding-top: 150px; }
.header-minimal.site-header[data-minimal-align="left"] .header-inner { justify-content: flex-start; gap: 40px; }
.header-minimal.site-header[data-minimal-align="center"] .header-inner { justify-content: center; gap: 40px; }
.header-minimal.site-header[data-minimal-align="right"] .header-inner { justify-content: flex-end; gap: 40px; }

/* float-round */
.header-float-round.site-header {
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
    width: calc(100% - 40px); max-width: 1000px;
    border-radius: 50px; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    padding: 15px 40px;
}
.header-float-round.site-header ~ .site-content { padding-top: 120px; }
.header-float-round .header-inner { display: flex; justify-content: space-between; align-items: center; }
.header-float-round.site-header[data-float-width="s"] { max-width: 800px; }
.header-float-round.site-header[data-float-width="l"] { max-width: 1200px; }

/* * 縦向きヘッダー (Vertical) 
 * 修正: 幅を確保しつつ、コンテンツエリアのマージンで調整
 */
.header-vertical-left, .header-vertical-right {
    position: fixed; top: 0; height: 100vh; width: 250px;
    padding: 40px 20px; box-shadow: 2px 0 5px rgba(0,0,0,0.05);
    display: flex; flex-direction: column;
}
.header-vertical-left { left: 0; }
.header-vertical-right { right: 0; box-shadow: -2px 0 5px rgba(0,0,0,0.05); }
.header-vertical-left .main-navigation ul, .header-vertical-right .main-navigation ul { flex-direction: column; margin-top: 40px; }
.header-vertical-left .main-navigation li, .header-vertical-right .main-navigation li { margin-left: 0; margin-bottom: 20px; }

/* コンテンツ側の調整 (width: auto なので margin を設定すれば自動で縮む) */
.header-vertical-left.site-header ~ .site-content { margin-left: 250px; padding-top: 40px; max-width: none; }
/* 【重要修正】右固定時のマージン設定 */
.header-vertical-right.site-header ~ .site-content { margin-right: 250px; padding-top: 40px; max-width: none; }

/* 幅調整の反映 */
.header-vertical-left[data-vertical-width="s"] { width: 200px; }
.header-vertical-left[data-vertical-width="s"] ~ .site-content { margin-left: 200px; }
.header-vertical-left[data-vertical-width="l"] { width: 300px; }
.header-vertical-left[data-vertical-width="l"] ~ .site-content { margin-left: 300px; }

.header-vertical-right[data-vertical-width="s"] { width: 200px; }
.header-vertical-right[data-vertical-width="s"] ~ .site-content { margin-right: 200px; }
.header-vertical-right[data-vertical-width="l"] { width: 300px; }
.header-vertical-right[data-vertical-width="l"] ~ .site-content { margin-right: 300px; }


/* モバイル */
@media (max-width: 768px) {
    .header-vertical-left, .header-vertical-right { display: none; }
    .header-vertical-left ~ .site-content, .header-vertical-right ~ .site-content { margin: 0; }
}