/* =========================================================
    Component: Stay Page Navigation (Tabs)
    File: assets/css/3_components/stay-nav.css
    役割: ページ内リンクのナビゲーション（追従型）
   ========================================================= */

.p-stayNav {
    position: sticky;
    /* 💡SWELLの固定ヘッダーがある場合はその高さ（例: 60px）を指定 */
    top: 0; 
    z-index: 90;
    width: 100%;
    background-color: var(--wan-color-white);
    border-top: 1px solid var(--wan-color-border-light);
    border-bottom: 1px solid var(--wan-color-border-light);
}

/* 2カラムのメイン側にある場合は、その幅に合わせる */
.p-stayNav .l-container {
    padding-left: 0;
    padding-right: 0;
}

.p-stayNav__list {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

.p-stayNav__list::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

.p-stayNav__item {
    flex-shrink: 0;
}

.p-stayNav__link {
    display: block;
    padding: var(--wan-s-4) var(--wan-s-5); /* 16px 20px */
    color: var(--wan-color-text);
    font-weight: var(--wan-f-weight-bold);
    text-decoration: none;
    transition: color var(--wan-motion-base);
    white-space: nowrap;
    position: relative;
}

/* ホバーとアクティブ時の装飾 */
.p-stayNav__link:hover,
.p-stayNav__link.is-active {
    color: var(--wan-color-brand);
}

/* アクティブな項目の下にオレンジの線を出す（JSでクラス制御を想定） */
.p-stayNav__link::after {
    content: '';
    position: absolute;
    bottom: -1px; /* 親のborder-bottomに重ねる */
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--wan-color-brand);
    transform: scaleX(0);
    transition: transform var(--wan-motion-base);
}

.p-stayNav__link.is-active::after {
    transform: scaleX(1);
}

/* --- レスポンシブ調整 --- */
@media screen and (max-width: 768px) {
    .p-stayNav {
        /* スマホ時はヘッダーの下にぴったり付くように調整が必要な場合があります */
        top: 0; 
        /* 💡スマホで画面いっぱいに見せる設定（必要に応じて） */
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        width: 100vw;
    }

    .p-stayNav__link {
        padding: var(--wan-s-3) var(--wan-s-4); /* 12px 16px */
        font-size: var(--wan-f-size-sm); /* 12px */
    }
}