/*
 * choku-nav.css
 * コーナーごとの色分け。全ページで読み込む（inc/choku-nav.php）
 *   - グローバルメニューを雑誌のインデックスタブ風に（項目ごとに色）
 *   - ヘッダーの下に、いまのコーナーの色の線（スマホではこれが目印）
 *   - コーナーのトップだけ、左に縦帯（PC幅のみ）
 * クラス名は mu-plugins/choku/core/sections.php が付ける
 */

/* ============================================
   コーナーの色
   --sec      コーナーの色（タブ・色線・縦帯）
   --sec-on   その色の上に載せる文字の色
   --sec-tint 薄い地色（タブにマウスを乗せたとき）
   ============================================ */

body,
.choku-tab {
    --sec:      var(--choku-line);
    --sec-on:   var(--choku-ink);
    --sec-tint: #f7f4f1;
}
.choku-sec-home,    .choku-tab--home    { --sec: #ed6d3d; --sec-on: #2b2523; --sec-tint: #fbe6dc; } /* 柿 */
.choku-sec-hito,    .choku-tab--hito    { --sec: #bb5548; --sec-on: #fff;    --sec-tint: #f2e2de; } /* 紅樺 */
.choku-sec-shikata, .choku-tab--shikata { --sec: #7a5a2c; --sec-on: #fff;    --sec-tint: #ece4d2; } /* 茶（藁色の帯） */
.choku-sec-green,   .choku-tab--green   { --sec: #4f6340; --sec-on: #fff;    --sec-tint: #e3e6da; }
.choku-sec-blue,    .choku-tab--blue    { --sec: #3d5a6c; --sec-on: #fff;    --sec-tint: #e1e5ea; }

/* ============================================
   ヘッダー下の色線
   ============================================ */

.l-header {
    border-bottom: 2px solid var(--sec);
    /* 縦帯の下の帯と同じく、コーナーの色を50%に薄める */
    border-bottom-color: color-mix(in srgb, var(--sec) 50%, #fff);
}

/* ============================================
   ロゴの下のキャッチフレーズ
   Arkhe 標準は小さく薄い（10〜12px・透過）ので、読める大きさと濃さにする
   ============================================ */

.l-header .l-header__center .c-tagline {
    margin-top: 4px;
    font-size: 13px;
    letter-spacing: 0.08em;
    line-height: 1.5;
    color: var(--choku-ink-sub);
    opacity: 1;
}
[data-logo="left"] .l-header__center .c-tagline {
    text-align: left;
}
@media (max-width: 999px) {
    .l-header .l-header__center .c-tagline {
        font-size: 12px;
        text-align: center;
    }
}
@media (max-width: 600px) {
    .l-header .l-header__center .c-tagline {
        display: none;
    }
}

/* ============================================
   グローバルメニュー：インデックスタブ
   タブは色線の上に立つ。いまのコーナーのタブは色で塗る
   ============================================ */

.c-gnav {
    align-items: flex-end;
    gap: 6px;
}
.c-gnav > .choku-tab {
    height: auto;
    align-self: flex-end;
}
.c-gnav > .choku-tab > .c-gnav__a {
    height: auto;
    min-width: 7.5em;
    padding: 12px 20px 10px;
    border: 1px solid var(--choku-line);
    border-top: 4px solid var(--sec);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: #fff;
    color: var(--choku-ink);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    transition: background-color 0.2s, color 0.2s;
}
.c-gnav > .choku-tab:hover > .c-gnav__a,
.c-gnav > .choku-tab.focus > .c-gnav__a {
    background: var(--sec-tint);
    color: var(--choku-ink);
}
.c-gnav > .choku-tab.is-current > .c-gnav__a {
    background: var(--sec);
    border-color: var(--sec);
    color: var(--sec-on);
}

/* タブ名の下の小さな説明（外観 → メニュー の項目の「説明」欄。Arkhe が __subText として出す）
   Arkhe 標準は 10px・薄めなので、読める大きさと濃さにする */
.c-gnav > .choku-tab .__subText {
    top: 0;
    margin-top: 4px;
    font-size: 11px;
    letter-spacing: 0.04em;
    line-height: 1.3;
    opacity: 1;
    color: var(--choku-ink-sub);
}
.c-gnav > .choku-tab.is-current .__subText {
    color: inherit;
    opacity: 0.85;
}

/* スマホのメニュー（ドロワー）では、左に色の目印だけ */
.c-drawerNav > .choku-tab > .c-drawerNav__a {
    border-left: 4px solid var(--sec);
}

/* ============================================
   左の縦帯（コーナーのトップ・PC幅のみ）
   上：色の小さな四角／中：誌名／下：色の帯
   ============================================ */

.choku-rail {
    display: none;
}

@media (min-width: 1000px) {
    .has-choku-rail {
        --choku-rail-w: 72px;
    }
    .has-choku-rail .l-wrapper {
        padding-left: var(--choku-rail-w);
    }
    .choku-rail {
        position: fixed;
        top: var(--wp-admin--admin-bar--height, 0px);
        bottom: 0;
        left: 0;
        z-index: 10;
        width: var(--choku-rail-w);
        display: flex;
        flex-direction: column;
        align-items: center;
        border-right: 1px solid var(--choku-line);
        background: #f7f4f1;
    }
    .choku-rail__mark {
        flex-shrink: 0;
        width: 100%;
        height: 12px;
        background: var(--sec);
    }
    .choku-rail__en {
        padding: 28px 0;
        writing-mode: vertical-rl;
        font-family: 'Jost', 'Noto Sans JP', sans-serif;
        font-size: 13px;
        letter-spacing: 0.3em;
        color: var(--choku-ink);
    }
    /* 下の帯はコーナーの色を50%に薄める（文字は薄めない） */
    .choku-rail__band {
        position: relative;
        margin-top: auto;
        width: 100%;
        height: 42%;
        display: flex;
        justify-content: center;
        padding: 24px 0;
        overflow: hidden;
    }
    .choku-rail__band::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--sec);
        opacity: 0.5;
    }
    .choku-rail__ja {
        position: relative;
        writing-mode: vertical-rl;
        font-size: 12px;
        letter-spacing: 0.25em;
        color: var(--choku-ink);
    }
}

/* ============================================
   ログインアイコン（ログイン中は「マイページ」）
   PC：タブの右、ヘッダーの下段に（丸枠の人アイコンの下に文字）
   スマホ：メニュー（ドロワー）の下に1行
   ============================================ */

.choku-login {
    display: flex;
    align-items: center;
    color: var(--choku-ink);
    text-decoration: none;
}
.choku-login:hover {
    color: var(--choku-ink-sub);
}
/* ヘッダーの下段：丸枠の人アイコンの下に文字（文字はキャッチフレーズと同じ13px） */
.choku-login--header {
    align-self: flex-end;
    flex-direction: column;
    gap: 4px;
    margin-left: 24px;
    padding: 0 6px 8px;
}
.choku-login--header .choku-login__icon {
    width: 22px;
    height: 22px;
}
.choku-login--header .choku-login__label {
    font-size: 13px;
    letter-spacing: 0.08em;
    line-height: 1.5;
    white-space: nowrap;
}
.choku-login--drawer {
    gap: 10px;
    margin-top: 1.5em;
    padding: 0.9em 1em;
    border: 1px solid currentColor;
    border-radius: 6px;
    color: inherit;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
}
.choku-login--drawer .choku-login__icon {
    width: 24px;
    height: 24px;
}
.choku-login--drawer:hover {
    color: inherit;
    opacity: 0.8;
}