/* ==============================
   Variables
============================== */
:root {
    --c-main: #222; /* 基本の文字色・アクティブ背景 */
    --c-sub: #666; /* 補助の文字色・枠線 */
    --c-icon: #ccc; /* ページャーのアイコン */
    --c-hover: #ddd; /* ボタンのhover背景 */
    --c-bg: #f5f5f5; /* ボタン・説明文の背景 */
    --c-line: #e6e6e6; /* 区切り線 */
    --c-badge: #c9c9c9; /* Qアイコンの背景 */
    --c-white: #fff;
    --c-highlight: #ff0; /* 検索ハイライト */
}

/* ==============================
   Base
============================== */
body {
    @media (width >= 768px) {
        min-width: 1200px;
        overflow-x: auto;
    }
}

html[lang^="en"] body {
    @media (width >= 768px) {
        min-width: 1000px;
    }
}

/* ==============================
   Header
============================== */
.header__container .header__bottom {
    height: 60px;
    padding: 0;

    .header__wrapper--bottom {
        gap: 0;
    }

    .header__logo-col {
        max-width: 350px;

        @media (width <= 767px) {
            width: calc(100% - 60px);
        }

        .header__logo .header__logo-link {
            display: block;
            height: 60px;
            padding: 18px 0 0 20px;
        }
    }

    .header__menu-col {
        @media (width <= 767px) {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 60px;
            height: 60px;
        }

        @media (width >= 768px) {
            .header__menu--desktop {
                justify-content: space-evenly;
            }
            .header__menu-wrapper {
                align-items: center;
                line-height: 1.2;
            }
        }
    }

    .header__button-col {
        margin-right: 20px;
        margin-left: 0;

        a:is(:hover, :active) {
            background-color: var(--c-main);
            text-decoration: none;

            svg {
                margin-top: 2px;
            }
        }
    }
    .no-list li {
        @media (width >= 768px) {
            padding: 0 0.75em;
        }
    }
}

/* ==============================
   Footer
============================== */
.footer__bottom {
    padding: 20px;

    @media (width <= 767px) {
        flex-direction: column;
    }

    @media (width >= 768px) {
        .footer__bottom--left {
            justify-content: center;
        }
    }

    #hs-link-footer_logo_hs_logo_widget {
        display: block;
    }

    #hs_cos_wrapper_footer_address {
        display: none;
    }

    .widget-type-logo img {
        margin-bottom: 0;
        @media (width <= 768px) {
            margin-bottom: 0.25em;
        }
    }

    .hs-kb-social_follow {
        margin-bottom: 10px;

        a.hs-kb-social_follow__link {
            transition: opacity 0.3s ease;

            &:hover {
                opacity: 0.7;
            }
        }
    }

    #hs_cos_wrapper_footer_copyright {
        height: 1em;
    }
}

/* ==============================
   TOP
============================== */
.hs-kb-home-list.hs-kb-home-list--tiles {
    gap: 20px;
    max-width: 1000px;
    padding: 50px 0 20px;

    .hs-kb-home-list__category {
        min-width: auto;
        max-width: calc(100% - 40px);
        transition: all 0.3s ease;

        /* PC：3列 */
        @media (width >= 768px) {
            width: calc(100% / 3 - 40px / 3);
        }

        &:hover {
            border-color: var(--c-sub);
            box-shadow: none;
        }

        .hs-kb-home-list__icon {
            margin-bottom: 0.5rem;

            &:has(.hs-kb-home-list__empty-icon) {
                display: none;
            }

            .hs-kb-home-list__image {
                width: auto;
                height: calc(120px - 1rem);
            }
        }

        .hs-kb-home-list__text h3 {
            margin-bottom: 0.5rem;
        }

        .hs-kb-home-list__text__category-description {
            text-align: left;
        }
    }

    .hs-kb-home-list__category-link {
        min-height: initial;
    }
}

/* 英語ページ */
html[lang^="en"] .hs-kb-home-list--tiles .hs-kb-home-list__category {
    @media (width >= 768px) {
        max-width: 100%;
    }
}

/* ==============================
   Main content（カテゴリ・記事一覧・サイドバー）
============================== */
#main-content {
    overflow-x: hidden;

    * {
        transition: 0.3s;
    }

    #kb-related-articles,
    .hs-kb-category-listing,
    .hs-kb-subcategory-listing {
        border: none;

        ul li {
            margin: 0 !important;
            border-bottom: 1px dotted var(--c-line);

            a {
                position: relative;
                display: block;
                padding: 0.5em 0.5em 0.5em 2em;
                font-size: 16px;
                line-height: 1.4;
            }

            &:last-child {
                border-bottom: none;
            }
        }
    }

    .hs-kb-sidebar,
    .hs-kb-sidebar.-sidebar-left {
        border: none;

        li.hs-kb-category_accordion_nav_list_item {
            + li {
                margin-top: 0.25em;
            }

            a {
                border-radius: 4px;
                background-color: var(--c-bg);
                color: var(--c-main);

                &:hover {
                    background-color: var(--c-hover);
                }
            }

            &.hs-kb-category-accordion_link--active a {
                background-color: var(--c-main);
                color: var(--c-white);
                font-weight: bold;
            }
        }
    }

    button.hs-kb-category-article-list__toggle {
        justify-content: center;
        width: 100%;
        margin-top: 0.5em;
        padding: 0.75em;
        border-radius: 4px;
        background-color: var(--c-bg);
        color: var(--c-main);

        &:hover {
            background-color: var(--c-hover);
        }
    }
}

/* ==============================
   回答ページ
============================== */
.row-fluid {
    .row-depth-1.row-number-2.dnd-row {
        margin-bottom: 0.25em;
        color: var(--c-sub);
    }

    h1 {
        margin-bottom: 1rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--c-line);
        font-size: 1.75rem;
    }

    .row-fluid-wrapper.row-depth-1.row-number-4.dnd-row {
        display: none;
    }
}

/* ==============================
   検索バー
============================== */
.hs-kb-search-input-wrapper {
    padding: 80px 24px 100px;

    .hs-search-field__button {
        width: 100px;
        cursor: pointer;
        transition: 0.3s;

        &::after {
            content: "検索";
            margin-left: 0.5em;
            color: #fff;
        }

        &:hover {
            background-color: #222;
        }
    }
}

html[lang^="en"] .hs-kb-search-input-wrapper {
    & .hs-search-field__button {
        &::after {
            content: "SEARCH";
        }
    }
}
/* ==============================
   検索結果
============================== */
.hs-search-results .hs-search-results__listing {
    gap: 0;

    li {
        display: block;
        margin: 0 !important;
        padding: 0.5em 0;
        border-bottom: 1px dotted var(--c-line);

        a {
            position: relative;
            display: block;
            padding: 0.5em 0.5em 0 2em;
            font-size: 16px;
            line-height: 1.4;

            &:hover {
                color: var(--c-main);
                text-decoration: underline;
            }
        }

        .hs-search-results__title {
            font-size: 18px;
        }

        .hs-search-results__category {
            display: inline-block;
            margin-bottom: 0.5em;
            border-radius: 4px;
            color: var(--c-sub);
            font-size: 12px;
        }

        .hs-search-results__description {
            display: block;
            width: 100%;
            margin: 0;
            padding: 0.5em 1em;
            background-color: var(--c-bg);
            font-size: 14px;

            .hs-search-highlight,
            .hs-highlight-html {
                background-color: var(--c-highlight);
            }
        }

        &:last-child {
            border-bottom: none;
        }
    }
}

/* ==============================
   共通：Qアイコン（記事一覧・検索結果）
============================== */
#main-content #kb-related-articles ul li a::before,
#main-content .hs-kb-category-listing ul li a::before,
#main-content .hs-kb-subcategory-listing ul li a::before,
.hs-search-results__listing li a::before {
    content: "Q";
    position: absolute;
    top: 7px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.75em;
    height: 1.75em;
    border-radius: 50%;
    background-color: var(--c-badge);
    color: var(--c-white);
    font-size: 0.85em;
    line-height: 1;
}

/* ==============================
   パンくず
============================== */
.hs-kb-breadcrumb-container {
    /* 背景だけを左右に広げる（レイアウト幅・スクロールには影響しない） */
    border-image: linear-gradient(#f5f5f5 0 0) fill 0 / 0 / 0 100vmax;
    background-color: #f5f5f5;
    font-size: 14px;

    a {
        color: #666;

        &:hover {
            text-decoration: underline;
        }
    }
}

/* ==============================
   Pagination
============================== */
.hs-search-results__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 40px 0;

    .hs-search-results__pagination__link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        flex-shrink: 0;
        min-width: 36px;
        height: 36px;
        margin: 0;
        padding: 0 10px;
        border: 1px solid var(--c-sub);
        border-radius: 4px;
        background: var(--c-white);
        color: var(--c-main);
        font-size: 13px;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
        transition:
            background-color 0.2s,
            border-color 0.2s,
            color 0.2s;

        &:focus-visible {
            outline: 2px solid var(--c-sub);
            outline-offset: 2px;
        }

        /* First / Previous / Next / Last */
        &.hs-search-results__pagination__link--text-and-icon {
            color: var(--c-sub);
        }

        /* 現在のページ */
        &.hs-search-results__pagination__link--active {
            border-color: var(--c-main);
            background: var(--c-main);
            color: var(--c-white);
            font-weight: bold;
            pointer-events: none;
        }

        /* 無効状態（--disabled）は本来動くボタンにも付与されているため保留 */
    }

    @media (hover: hover) {
        a.hs-search-results__pagination__link:hover {
            background: var(--c-bg);
            color: var(--c-main);
        }
    }

    /* 省略記号（...） */
    span.hs-search-results__pagination__link {
        min-width: 20px;
        padding: 0;
        border: none;
        background: none;
        color: var(--c-sub);
        letter-spacing: 0.1em;
    }

    /* アイコン */
    .hs-search-results__pagination__link-icon svg {
        width: 15px;
        height: 15px;
        margin-top: 2px;
        fill: var(--c-icon);
    }

    /* スマホ：テキストを隠してアイコンのみ表示 */
    @media (width <= 767px) {
        gap: 4px;

        .hs-search-results__pagination__link {
            min-width: 32px;
            height: 32px;
            padding: 0 8px;
            font-size: 12px;

            &.hs-search-results__pagination__link--text-and-icon {
                width: 32px;
                padding: 0;
                gap: 0;
                font-size: 0;
            }
        }

        span.hs-search-results__pagination__link {
            min-width: 16px;
            padding: 0;
        }

        .hs-search-results__pagination__link-icon {
            margin: 0 !important;
        }
    }
}

/* ==============================
   ka-feedback-form
============================== */
#ka-feedback-form {
    @media (width <= 767px) {
        padding: 2em 0;
        border: 1px solid var(--c-line);
        border-width: 1px 0;
    }

    section #ka-feedback-rating-input-wrapper {
        flex-direction: column;
        flex-wrap: wrap;

        .ka-feedback-rating-question {
            text-align: center;
        }

        .ka-feedback-rating-buttons {
            justify-content: center;

            .ka-feedback-rating-button {
                width: 150px;
                height: auto;
                margin: 0;
                padding: 1em 2em;
            }

            #ka-feedback-rating-btn-yes {
                border-color: var(--c-main);
                background-color: var(--c-main);
                color: var(--c-white);
            }

            #ka-feedback-rating-btn-no {
                border-color: var(--c-main);
                background-color: var(--c-white);
                color: var(--c-main);
            }
        }
    }

    #ka-feedback-post-submit-message {
        justify-content: center;
    }
}