/*
 * gp-gnb-cta.css
 * Primary Menu(GNB) 우측 CTA 메뉴 아이템(.gnb-cta) 스타일.
 *
 * - 배경색: #6268F3
 * - 패딩: 10px 24px (사양 준수)
 * - 라운드: 9999px (필 형태)
 * - hover 시 텍스트 우측에 화살표(→) 슬라이드-인
 *
 * Polylang의 'Primary Menu' / 'Primary Menu EN' / 'Primary Menu JP' 모두에
 * 동일 selector(.gnb-cta)로 적용됨.
 *
 * @since 2026-05-11 (TASK-006)
 */

/* ---------- CTA 메뉴 아이템 ---------- */
.main-navigation .main-nav ul li.gnb-cta > a,
.main-navigation .menu li.gnb-cta > a {
    background-color: #6268F3;
    color: #ffffff;
    padding: 10px 24px;
    border-radius: 9999px;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.2s ease;
}

/* GeneratePress 기본 nav text color 강제 오버라이드 */
.main-navigation .main-nav ul li.gnb-cta > a,
.main-navigation .main-nav ul li.gnb-cta > a:visited,
.main-navigation .menu li.gnb-cta > a,
.main-navigation .menu li.gnb-cta > a:visited {
    color: #ffffff;
}

/* <li> 자체 배경/패딩 가정 제거 (안전) */
.main-navigation .main-nav ul li.gnb-cta {
    background: transparent;
}

/* ---------- Hover/Focus: 화살표 슬라이드-인 ---------- */
.main-navigation .main-nav ul li.gnb-cta > a::after,
.main-navigation .menu li.gnb-cta > a::after {
    content: "→";
    display: inline-block;
    margin-left: 0;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    transition: max-width 0.25s ease, margin-left 0.25s ease, opacity 0.25s ease;
}

.main-navigation .main-nav ul li.gnb-cta > a:hover,
.main-navigation .main-nav ul li.gnb-cta > a:focus,
.main-navigation .main-nav ul li.gnb-cta > a:focus-visible,
.main-navigation .menu li.gnb-cta > a:hover,
.main-navigation .menu li.gnb-cta > a:focus,
.main-navigation .menu li.gnb-cta > a:focus-visible {
    background-color: #6268F3;
    color: #ffffff;
}

.main-navigation .main-nav ul li.gnb-cta > a:hover::after,
.main-navigation .main-nav ul li.gnb-cta > a:focus-visible::after,
.main-navigation .menu li.gnb-cta > a:hover::after,
.main-navigation .menu li.gnb-cta > a:focus-visible::after {
    max-width: 1.5em;
    margin-left: 8px;
    opacity: 1;
}

/* ---------- 접근성: prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .main-navigation .main-nav ul li.gnb-cta > a,
    .main-navigation .menu li.gnb-cta > a,
    .main-navigation .main-nav ul li.gnb-cta > a::after,
    .main-navigation .menu li.gnb-cta > a::after {
        transition: none;
    }
}

/* ---------- 모바일 Off-Canvas: 전폭 가로 정렬 + 하단 마진 (TASK-007) ----------
 *
 * - 텍스트 메뉴 아이템(예: '커뮤니티 피드')이 시작되는 좌측 X 좌표와 CTA 배경 좌측 정렬
 * - 하위 메뉴 펼침 화살표(chevron)가 위치하는 우측 X 좌표와 CTA 배경 우측 정렬
 * - CTA 하단에 적절한 마진을 두어 패널 끝에 붙어 보이지 않도록 보정
 *
 * 좌/우 inset(`--gnb-cta-mobile-side-inset`)을 변수화하여 사이트의
 * GP 모바일 nav 패딩과 어긋날 경우 자식 테마/Customizer에서 손쉽게 조정 가능.
 */
:root {
    --gnb-cta-mobile-side-inset: 30px; /* GP 모바일 메뉴 아이템의 좌측 텍스트 시작 위치 가정값 */
    --gnb-cta-mobile-margin-bottom: 24px;
}

@media (max-width: 768px) {
    .main-navigation .main-nav ul li.gnb-cta > a,
    .main-navigation .menu li.gnb-cta > a {
        display: block;
        text-align: center;
        padding: 12px 24px;
        margin: 12px var(--gnb-cta-mobile-side-inset) var(--gnb-cta-mobile-margin-bottom) var(--gnb-cta-mobile-side-inset);
        border-radius: 9999px;
        line-height: 1.4;
    }

    /* 모바일 off-canvas에서는 hover/focus 화살표 슬라이드-인 비표시 (전폭 버튼이라 시각적 잉여) */
    .main-navigation .main-nav ul li.gnb-cta > a::after,
    .main-navigation .menu li.gnb-cta > a::after {
        display: none;
    }

    /* <li> 하단 마진과의 중복 방지 */
    .main-navigation .main-nav ul li.gnb-cta {
        margin-bottom: 0;
    }
}