/* ==========================================================================
   ヘッダー

   JIN のヘッダー構造:
     #header-box           最外枠（背景・sticky を設定）
       #header.header-type1  実際のヘッダー要素（フレックスで横並び）
         #site-info          ロゴ・サイト名エリア
         #drawernav3         グローバルナビゲーション
         #headmenu           SNS アイコン + 検索フォーム

   モバイル（SP）要素:
     .sp-menu-open          ハンバーガーアイコン
     .sp-menu-box           スライドインするメニュー本体
     .sp-menu-close         閉じるボタン
   ========================================================================== */

/* --- ヘッダー外枠 --- */

/* !important の理由: JIN カスタマイザーが同じ詳細度で後から
   background-color: rgb(59,70,117) を注入するため強制上書きが必要 */
#header-box {
    background-color: var(--color-bg) !important;
    border-bottom:    1px solid var(--color-border);
    position:         sticky;
    top:              0;
    z-index:          100;
}

/* --- ヘッダー内レイアウト --- */

#header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;

    /* コンテンツ幅を制限し中央寄せ */
    max-width: 1200px;
    margin:    0 auto;
    padding:   12px 24px;
    gap:       16px;
}

/* --- ロゴ・サイト名 --- */

#site-info {
    flex-shrink: 0; /* ナビが長くてもロゴが潰れないように */
}

/* サイト名テキストリンク */
#site-info a {
    color:       var(--color-text);
    font-weight: 700;
    font-size:   1.2em;
    line-height: 1;
}

#site-info a:hover {
    color:   var(--color-primary);
    opacity: 1;
}

/* ロゴ画像がある場合のサイズ制限 */
#site-info img {
    max-height: 60px;
    width:      auto;
}

/* --- グローバルナビゲーション --- */

#drawernav3 ul,
#drawernav3 > div > ul {
    display:     flex;
    align-items: center;
    gap:         0;
    list-style:  none;
    margin:      0;
    padding:     0;
}

#drawernav3 li a {
    color:       var(--color-text-muted);
    padding:     8px 16px;
    display:     block;
    font-size:   0.9em;
    white-space: nowrap;
    transition:  color var(--transition-base);
}

#drawernav3 li a:hover {
    color:   var(--color-primary);
    opacity: 1;
}

/* ドロップダウンメニュー */
#drawernav3 li > ul {
    display:          none;
    position:         absolute;
    background-color: var(--color-surface);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-tag);
    min-width:        180px;
    z-index:          200;
    flex-direction:   column;
    box-shadow:       0 4px 16px rgba(0, 0, 0, 0.4);
}

#drawernav3 li:hover > ul {
    display: flex;
}

#drawernav3 li > ul li a {
    padding:      10px 16px;
    border-bottom: 1px solid var(--color-border);
    font-size:    0.85em;
}

#drawernav3 li > ul li:last-child a {
    border-bottom: none;
}

/* --- SNS・検索エリア --- */

#headmenu {
    display:     flex;
    align-items: center;
    gap:         12px;
    flex-shrink: 0;
}

#headmenu a,
#headmenu i,
#headmenu svg {
    color:      var(--color-text-muted);
    transition: color var(--transition-base);
}

#headmenu a:hover {
    color:   var(--color-primary);
    opacity: 1;
}

/* SNS アイコングループ */
.headsns {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.headsns a {
    color:       var(--color-text-muted);
    font-size:   1.1em;
    line-height: 1;
    transition:  color var(--transition-base);
}

.headsns a:hover {
    color:   var(--color-primary);
    opacity: 1;
}

/* --- 検索フォーム（PC） --- */

.headsearch {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.headsearch input[type="text"],
.headsearch input[type="search"] {
    background-color: var(--color-surface);
    border:           1px solid var(--color-border);
    color:            var(--color-text);
    padding:          6px 12px;
    border-radius:    var(--radius-tag);
    font-family:      var(--font-base);
    font-size:        0.85em;
    transition:       border-color var(--transition-base);
}

.headsearch input[type="text"]:focus,
.headsearch input[type="search"]:focus {
    outline:      none;
    border-color: var(--color-primary);
}

.headsearch input[type="submit"] {
    background-color: var(--color-primary);
    color:            #0d1117;
    border:           none;
    padding:          6px 12px;
    border-radius:    var(--radius-tag);
    font-weight:      700;
    font-size:        0.85em;
    cursor:           pointer;
    transition:       opacity var(--transition-base);
}

.headsearch input[type="submit"]:hover {
    opacity: 0.85;
}

/* --- モバイル ハンバーガーメニュー --- */

/* ハンバーガーアイコンの線（JIN は span 3本構造） */
.sp-menu-open span,
.sp-menu-open span::before,
.sp-menu-open span::after {
    background-color: var(--color-text);
    display:          block;
    height:           2px;
    transition:       transform var(--transition-base), opacity var(--transition-base);
}

/* 閉じるボタン */
.sp-menu-close {
    color:  var(--color-text-muted);
    cursor: pointer;
}

/* モバイルメニュー本体（スライドイン） */
.sp-menu-box {
    background-color: var(--color-surface);
    border-right:     1px solid var(--color-border);
}

.sp-menu-box .menu-box a {
    color:             var(--color-text);
    padding:           12px 16px;
    display:           block;
    border-bottom:     1px solid var(--color-border);
    font-size:         0.9em;
    transition:        color var(--transition-base), background-color var(--transition-base);
}

.sp-menu-box .menu-box a:hover {
    color:            var(--color-primary);
    background-color: rgba(88, 166, 255, 0.05);
    opacity:          1;
}

/* モバイルメニュー内 SNS */
.sp-sns-menu {
    display:         flex;
    justify-content: center;
    gap:             16px;
    padding:         16px;
    border-top:      1px solid var(--color-border);
}

.sp-sns-menu a {
    color:      var(--color-text-muted);
    font-size:  1.3em;
    transition: color var(--transition-base);
}

.sp-sns-menu a:hover {
    color:   var(--color-primary);
    opacity: 1;
}

/* --- トップへ戻るボタン --- */

#page-top {
    position: fixed;
    right:    24px;
    bottom:   24px;
    z-index:  50;
}

#page-top a {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            44px;
    height:           44px;
    /* JIN カスタマイザーが #page-top a { background-color: #3b4675; } を注入するため !important */
    background-color: var(--color-primary) !important;
    color:            #0d1117 !important;
    border-radius:    50%;
    font-size:        1.1em;
    transition:       box-shadow var(--transition-base), transform var(--transition-base);
}

#page-top a:hover {
    box-shadow: var(--shadow-glow);
    transform:  translateY(-2px);
    opacity:    1;
}

/* --- サイトロゴ＋テキスト横並び（jin_child_logo_display_mode = logo_and_text 時） --- */

/*
 * JIN の style.css に `#header #site-info .tn-logo-size { overflow: hidden; }` があり、
 * このままだとサイトロゴ画像の横にテキストが追加されても見切れてしまう。
 * .jin-child-logo-wrap を付与した場合のみ overflow を visible に上書きする。
 * 詳細度: (1,2,0) で JIN の (1,1,0) より高く、確実に上書きできる。
 */
#header #site-info .tn-logo-size.jin-child-logo-wrap,
#header #site-info .sp-logo-size.jin-child-logo-wrap {
    overflow: visible;
}

/*
 * .jin-child-logo-and-text:
 *   サイトロゴ画像とサイト名テキストを横並びにするラッパーリンク。
 *   display: flex + align-items: center で垂直中央揃えにする。
 */
.jin-child-logo-and-text {
    display:     flex;
    align-items: center;
    gap:         10px;
    text-decoration: none;
    line-height: 1;
}

/*
 * ロゴ画像のラッパー: フレックスアイテムとしてここに固定高さを持たせる。
 *
 * なぜラッパーが必要か:
 *   base.css に `img { max-width: 100%; height: auto; }` があるため、
 *   img を直接フレックスアイテムにすると max-width: 100%（= コンテナ幅）が優先され、
 *   height: 40px と組み合わさって縦横比が崩れてしまう。
 *   display: inline-block のラッパーで img をフレックス外に切り出すことで
 *   img 自身は通常フローとして高さ固定・幅 auto（＝縦横比維持）で描画される。
 */
.jin-child-logo-img-wrap {
    flex-shrink: 0;
    display:     inline-block;
    height:      40px;
    line-height: 0; /* inline-block の下余白を除去 */
}

/*
 * ロゴ画像本体: ラッパー内で高さ 100%・幅 auto にすることで縦横比を保つ。
 * max-width: none で base.css の max-width: 100% を解除する。
 */
.jin-child-logo-img {
    height:    100%;
    width:     auto;
    max-width: 100%; /* ラッパー幅に収める */
    display:   block;
}

/*
 * サイト名テキスト: ヘッダーの既存テキストスタイルを踏襲しつつ
 * ロゴ画像と組み合わせたときに自然に見えるフォントサイズにする。
 */
.jin-child-logo-text {
    font-weight: 700;
    font-size:   1.1em;
    color:       var(--color-text);
    white-space: nowrap; /* 折り返し防止 */
}

.jin-child-logo-and-text:hover .jin-child-logo-text {
    color:   var(--color-primary);
    opacity: 1;
}


/* --- パンくずリスト --- */

.breadcrumb,
#breadcrumb {
    padding:   8px 24px;
    max-width: 1200px;
    margin:    0 auto;
    font-size: 0.8em;
    color:     var(--color-text-muted);
}

.breadcrumb a,
#breadcrumb a {
    color:      var(--color-text-muted);
    transition: color var(--transition-base);
}

.breadcrumb a:hover,
#breadcrumb a:hover {
    color:   var(--color-primary);
    opacity: 1;
}