/**
 * site-header.css — 公開ヘッダーの**唯一の正本** V2.08L16 新設 ★事故防止
 * ============================================================================
 * 【なぜ新設したか】
 *   公開ヘッダー（ロゴ＋ナビ＋CTA＋言語スイッチ）のCSSは、V2.08L15 まで
 *   **4か所に別コピーで存在**していた:
 *     (1) help/assets/css/components/header-layout.css … public_header.php を使うページ
 *     (2) help/assets/css/pages/index.css              … 質問一覧（自前ヘッダー）
 *     (3) help/assets/css/pages/submit.css             … 質問投稿（自前ヘッダー）
 *     (4) index.php のインライン <style>               … 統合トップ（自前ヘッダー）
 *   V2.08L11 の「公開ヘッダーのレイアウト規約」（語の途中で折らない／副題だけ縮小可／
 *   入らなければブロック単位で段落ち）は (1) にしか入っていなかったため、(2)(3)(4) は
 *   規約の外に取り残され、英語版で副題 "Dating Club Strategies & Anonymous Q&A" が
 *   語の途中で2行に割れていた（V2.08L16 でMaezawaさんより指摘）。
 *
 *   「同じものが4か所にある」ことが原因なので、**ヘッダーのCSSはこのファイルだけ**に置き、
 *   4ページすべてがこのファイルを読む形に統一した。以後、ヘッダーを直すときはここだけ直す。
 *
 * 【読み込み方】
 *   - help/includes/public_header.php … <link> で common.css の直後に読む
 *   - help/index.php                  … <link> で common.css の直後に読む
 *   - help/submit_question.php        … <link> で common.css の直後に読む
 *   - index.php（統合トップ）         … レンダリングブロックを避ける設計のため
 *                                       インライン <style> に readfile() で流し込む
 *                                       （実体は本ファイル＝正本は1つ）
 *   いずれも ?v=<SYSTEM_VERSION> のキャッシュバスターを付けること（原則19）。
 *
 * 【★単位は px。rem を使ってはならない（V2.08L18 で是正）】
 *   ルートのフォントサイズが**ページによって違う**ため、rem を使うと同じ指定でも
 *   ページごとに実寸が変わる。
 *     - help/assets/css/common.css          : html { font-size: 62.5% }  → 1rem = 10px
 *     - help/assets/css/pages/detail.css    : html { font-size: 62.5% }  → 1rem = 10px
 *     - help/includes/responder_styles.php  : html { font-size: 62.5% }  → 1rem = 10px
 *     - help/assets/css/pages/submit.css    : html { font-size: 100%  }  → **1rem = 16px**
 *   `pages/submit.css` は `common.css` より後に読まれるため、**質問投稿ページだけ
 *   ルートが16px**になる。V2.08L16〜L17 は正本を rem で書いていたため、質問投稿
 *   ページでは `.logo-main: 3.2rem` が 32px ではなく **51.2px** に、副題が 18px では
 *   なく **28.8px** に描画される状態だった（一本化で初めて表面化した）。
 *   px に固定すればルートの違いに影響されない。62.5% の各ページでは
 *   `3.2rem = 32px` のように**完全に等価**なので、従来の表示は1pxも変わらない。
 *   ★ここを rem に戻さないこと。
 *
 * 【このファイルに置いてよいもの / いけないもの】
 *   置いてよい: header / .header-content / .logo / .logo-main / .logo-subtitle /
 *               .header-content > .lang-switcher と、そのレスポンシブ指定。
 *   置いてはいけない: ナビ（.nav-pc / .nav-cta-pc / .hamburger / .nav-mobile）は
 *               common.css が正本。パンくず・コンテナ等は header-layout.css。
 * ============================================================================
 */

/* ヘッダー */
header {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 15px rgba(0,0,0,0.06);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* V2.08L11 規約の土台。
       ヘッダーは「ロゴ＋ナビ＋CTA＋言語スイッチ」を1行に並べる固定幅レイアウトだが、
       各要素に nowrap も flex-shrink の制御も無かったため、合計幅が利用可能幅
       （1200px - padding 40px = 1160px）を超えた瞬間に flex が全要素を縮め、
       ラベルが途中で折り返していた。日本語（合計約900px）では起きず、英語
       （"Dating Club Strategies & Anonymous Q&A" 等で合計約1170px）で発生する。
       方針は3段構え:
         (1) 各ラベル・ボタンを white-space:nowrap にして**語の途中で折らない**
         (2) ロゴ副題だけは縮小可＋省略記号にして、長い言語でも行が破綻しない
         (3) それでも入らないときは flex-wrap で**ブロック単位**に段落ちさせる
       日本語は合計約900pxで 1160px に収まるため (3) は発動せず、
       従来の見た目と1pxも変わらない。 */
    gap: 15px;
    flex-wrap: wrap;
    row-gap: 8px;
}

.logo {
    font-weight: bold;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: inherit; /* 親からの font-size 継承をリセット（旧 pages/index.css 由来） */
    /* 規約(2): ロゴだけは縮んでよい（副題が言語で最も長さが変わるため）。
       ただし潰れすぎないよう min-width:0 で下限を持たせる。 */
    flex: 0 1 auto;
    min-width: 0;
}

.logo-main {
    font-size: 32px;
    background: linear-gradient(135deg, #8b6f47 0%, #d4af37 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    /* 規約(1): サイト名は必ず1行（"Universe Lab" が2行に割れるのを防ぐ） */
    white-space: nowrap;
}

.logo-subtitle {
    font-size: 18px;
    color: #666;
    font-weight: normal;
    line-height: 1.2;
    /* 規約(1)(2): 副題は言語によって長い。折り返さず、入らなければ省略記号にする。
       （英語 "Dating Club Strategies & Anonymous Q&A" は日本語の約1.4倍の幅） */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 言語スイッチもヘッダーの直接の子。縮むと「English ▼」が潰れるため固定扱いにする
   （スイッチ自体の nowrap は lang_switcher.php 側にある）。 */
.header-content > .lang-switcher {
    flex: 0 0 auto;
}

/* ----------------------------------------------------------------------------
 * V2.08L16 追加 / V2.08L17 で値を見直し: 基準言語（日本語）以外は副題が長い。
 *
 * 【なぜ縮めるか】
 *   スクリーンショットからの概算（1288px幅・英語）では、ヘッダーの中身は
 *     ナビ約379px ＋ CTA約345px ＋ 言語スイッチ約75px ＋ 上の gap(15px)×3
 *   で約860〜870pxを占め、ロゴに残るのは利用可能幅1160pxのうち**約290px**。
 *   副題 "Dating Club Strategies & Anonymous Q&A" は 18px で約357px あるため
 *   入らず、規約(3)が発動して言語スイッチが2段目へ落ちる。
 *
 * 【なぜ 13px なのか】★実測ではなく概算であることに注意
 *   15px（L16 の値）だと約298pxで、残り約290pxに対して**余裕が無い**。
 *   当環境ではブラウザ実描画を検証できず、上記の幅は画面写真からの概算のため、
 *   誤差が乗っても収まるよう 13px（約258px・余裕約30px）を採用する。
 *   実機で余裕がありそうなら 14px / 15px へ上げてよい（**ここ1か所だけ**）。
 *
 *   ★日本語は対象外＝従来の見た目と1pxも変わらない。
 *   ★言語コードをCSSに書かないこと。<html class="i18n-nonbase"> は
 *     i18n_is_base() の結果を各ページのPHPが出力する（言語レジストリ
 *     help/i18n/languages.php が言語の唯一の正）。
 *   ★ナビ項目を増やすとき／副題がさらに長い言語を追加するときは、この余裕が
 *     食われる。入らなくなると規約(3)が発動して2行になる（崩れはしない）。
 * -------------------------------------------------------------------------- */
.i18n-nonbase .logo-subtitle {
    font-size: 13px;
}

/* タブレット（769px〜1024px） */
@media (min-width: 769px) and (max-width: 1024px) {
    .header-content {
        padding: 10px 20px;   /* 左右に余白を確保 */
    }
}

/* スマホ（768px以下）。ナビはハンバーガー＋ドロワーへ切り替わる（common.css） */
@media (max-width: 768px) {
    .header-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0;
        padding: 12px 15px;
    }

    .logo {
        flex: 1;
    }

    .logo-main {
        font-size: 24px;
    }

    .logo-subtitle {
        font-size: 12px;
    }

    /* V2.08L16: 上の .i18n-nonbase .logo-subtitle（詳細度 0,2,0）は
       .logo-subtitle（0,1,0）より強い。メディアクエリの中でも同じ詳細度で
       上書きしないと、スマホでも15pxのままになる。★消さないこと。 */
    .i18n-nonbase .logo-subtitle {
        font-size: 12px;
    }
}