/*
 Theme Name:   Satoyama VR Child
 Theme URI:    https://jutakutenjijo.net
 Description:  Satoyama VR Child Theme
 Author:       Aki
 Author URI:   https://jutakutenjijo.net
 Template:     satoyama-vr
 Version:      1.0.0
 License:      GPL v2 or later
 Text Domain:  satoyama-vr-child
*/

/* 
 * 親テーマのスタイルはfunctions.phpで読み込みます
 * ここに子テーマ独自のスタイルを追加してください
 */

/* 参画団体ページのヘッダータイトル */
/* 親要素の.site-brandingの幅を拡張 */
.organization-title {
    width: 400px !important; /* エリアページと同じ幅に */
}

/* ヘッダー全体の調整（参画団体ページのみ - デスクトップのみ） */
@media (min-width: 992px) {
    .page-template-template-organization .header {
        justify-content: flex-start !important; /* space-betweenではなくflex-startに */
        gap: 0 !important; /* ギャップをリセット */
        padding-left: 0 !important; /* 左パディングを削除して完全に左端に */
    }
}

/* モバイルでは親テーマのデフォルトレイアウトを使用（上書きしない） */

/* すべてのCSSセレクタでmarginを強制リセット */
.page-template-template-organization div.site-branding,
.page-template-template-organization .site-branding,
body.page-template-template-organization .site-branding {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* さらに親要素の.site-brandingも拡張する必要がある */
.page-template-template-organization .site-branding {
    width: 400px !important; /* 280px -> 400px に拡張 */
    text-align: left !important; /* 左寄せを強制 */
    justify-content: flex-start !important; /* flexboxでも左寄せ */
    align-items: flex-start !important; /* 上寄せ */
    margin: 0 !important; /* マージンを完全リセット */
    margin-left: 0 !important; /* 特に左マージンを強制リセット */
    margin-right: 0 !important; /* 右マージンも強制リセット */
    padding: 0 !important; /* パディングも完全リセット */
    position: relative !important;
    left: 0 !important; /* 左端に強制配置 */
    top: 0 !important; /* 上端も強制配置 */
    flex-shrink: 0 !important; /* サイズを固定 */
    order: -1 !important; /* 最初に配置 */
    transform: none !important; /* transformもリセット */
}

.site-title.organization-title {
    z-index: 100; /* ナビゲーションよりも前面に */
}

/* デスクトップでは常に1行表示 - 親テーマのdisplay:blockを上書き */
.site-title.organization-title a {
    display: inline !important; /* 親テーマのdisplay:blockを上書き */
    line-height: 1.2 !important;
    white-space: nowrap !important; /* 絶対に改行させない */
}

.site-title.organization-title {
    text-align: left !important; /* 左寄せを強制 */
    margin-left: 0 !important; /* 左マージンをリセット */
    margin-right: auto !important; /* 右に余白を寄せる */
    position: relative !important;
    left: 0 !important; /* 左端に強制 */
}

.site-title.organization-title .org-name,
.site-title.organization-title .site-name {
    display: inline !important;
    white-space: nowrap !important;
}

/* 991px以下：モバイルメニューとの重なりを考慮して2行表示 */
@media (max-width: 991px) {
    .page-template-template-organization .site-branding {
        width: 100% !important; /* モバイルでは100%幅 */
        max-width: none !important; /* max-widthをリセット */
        display: flex !important; /* flexレイアウト */
        align-items: center !important; /* 親テーマと同じ */
        height: 48px !important; /* 親テーマと同じ */
    }
    
    .site-title.organization-title {
        width: 100% !important;
        max-width: calc(100% - 60px); /* ハンバーガーメニュー分の余白を確保 */
    }
    
    .site-title.organization-title a {
        display: flex !important; /* モバイルではflexで2行表示 */
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2em;
        line-height: 1.1 !important;
    }
    
    .site-title.organization-title .org-name {
        font-size: 0.95em;
    }
    
    .site-title.organization-title .site-name {
        font-size: 0.9em;
    }
}

/* より狭い画面での追加調整 */
@media (max-width: 767px) {
    .site-title.organization-title {
        max-width: calc(100% - 50px);
    }
    
    .site-title.organization-title .org-name {
        font-size: 0.9em;
    }
    
    .site-title.organization-title .site-name {
        font-size: 0.85em;
    }
}

/* さらに狭い画面 */
@media (max-width: 500px) {
    .site-title.organization-title {
        max-width: calc(100% - 40px); /* さらに余白を確保 */
    }
    
    .site-title.organization-title .org-name {
        font-size: 0.85em;
    }
    
    .site-title.organization-title .site-name {
        font-size: 0.8em;
    }
}

/* 参画団体ロゴのhover効果 */
.partners-logo li a {
    display: inline-block;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.partners-logo li a:hover {
    transform: translateY(-5px);
    opacity: 0.8;
}