/* ==========================================================================
   Red Eagles 兵庫 - 共通スタイル
   各ページで共有するコンポーネントのスタイル
   ========================================================================== */

/* === セクションナビ ===
   使用: メンバー紹介、活動予定、試合結果
   ========================================================================== */
.section-nav,
.member-section-nav {
    background: var(--re-secondary);
    padding: 1rem 1.5rem;
    margin-bottom: 0;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    max-width: none !important;
    margin-top: 0 !important;
}
.section-nav-list,
.member-section-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.member-section-nav li {
    margin: 0;
}
.section-nav-list a,
.member-section-nav a {
    color: var(--re-white);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    display: inline-block;
    font-size: 0.95rem;
}
.section-nav-list a:hover,
.section-nav-list a:focus,
.member-section-nav a:hover,
.member-section-nav a:focus {
    background: var(--re-primary);
    border-color: var(--re-primary);
    color: var(--re-white);
}
.section-nav-list a:focus-visible,
.member-section-nav a:focus-visible {
    outline: 3px solid var(--re-white);
    outline-offset: 2px;
}

/* モバイル: 横スクロール対応 */
@media (max-width: 768px) {
    .section-nav,
    .member-section-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* 右端フェード: スクロール可能であることの視覚的ヒント */
        -webkit-mask-image: linear-gradient(to right, black 80%, transparent);
        mask-image: linear-gradient(to right, black 80%, transparent);
    }
    /* スクロール末端到達時にフェードを解除（JSで付与） */
    .section-nav.scrolled-end,
    .member-section-nav.scrolled-end {
        -webkit-mask-image: none;
        mask-image: none;
    }
    .section-nav-list,
    .member-section-nav ul {
        flex-wrap: nowrap;
        justify-content: flex-start;
        min-width: max-content;
    }
}

/* === ページタイトルヒーロー ===
   使用: メンバー紹介、活動予定、試合結果、チーム紹介 他
   ========================================================================== */
.page-title-hero {
    background: linear-gradient(135deg, var(--re-primary) 0%, var(--re-secondary) 100%);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    margin-bottom: 0 !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    max-width: none !important;
    position: relative;
    left: 0;
    right: 0;
}
.page-title-hero-en {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    font-weight: 400;
}
.page-title-hero-ja {
    color: var(--re-white);
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}
@media (max-width: 768px) {
    .page-title-hero {
        min-height: 150px;
        padding: 1.5rem;
    }
    .page-title-hero-ja {
        font-size: 1.5rem;
    }
    .page-title-hero-en {
        font-size: 0.8rem;
    }
}

/* ヒーロー → ナビ間の余白削除 */
.page-title-hero + .section-nav,
.page-title-hero + .member-section-nav {
    margin-top: 0 !important;
}

/* === セクション見出し ===
   使用: 活動予定、試合結果
   ========================================================================== */
.section-title,
.result-section-title {
    font-size: 1.75rem;
    font-weight: 700;
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}
.section-title::after,
.result-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--re-primary);
}
@media (max-width: 768px) {
    .section-title,
    .result-section-title {
        font-size: 1.4rem;
    }
}

/* === section内のサブ見出し（h3） ===
   使用: 競技規則、リンク等の alignfull + section パターン
   section-title（h2: 1.75rem）より小さく統一
   ========================================================================== */
.wp-block-group.alignfull > section h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
@media (max-width: 768px) {
    .wp-block-group.alignfull > section h3 {
        font-size: 1.15rem;
    }
}

/* === alignfull内のsectionコンテンツ幅制限 ===
   使用: 講演会、その他 alignfull + section 構成のページ
   ========================================================================== */
.wp-block-group.alignfull > section {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* === アニメーション抑制 ===
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .section-nav-list a,
    .member-section-nav a {
        transition: none;
    }
}