/*
 * サイト別カスタマイズ用スタイル
 *
 * このファイルはサイトごとにカスタマイズするスタイルを定義します。
 * 主にフロントエンド（プレビュー画面や公開ページ）で使用されるボタンの見た目などを
 * サイトのデザインに合わせて編集してください。
 *
 * カスタマイズ方法:
 * php artisan vendor:publish --tag=artcms-site-css
 * でpublish後、public/customize/css/site-parts.css を編集してください。
 */

/* ============================================
   リンクボタン (.ql-link-button)
   記事本文内のボタン型リンク
   ============================================ */
.ql-link-button {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

    /* サイトのプライマリカラーに合わせて変更してください */
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.ql-link-button:hover {
    color: #fff;
    background-color: #0b5ed7;
    border-color: #0a58ca;
    text-decoration: none;
}

/* ============================================
   モーダルボタン (.ql-modal-button)
   記事本文内のモーダル表示ボタン
   ============================================ */
.ql-modal-button {
    display: inline-block;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

    /* サイトのアクセントカラーに合わせて変更してください */
    color: #0d6efd;
    background-color: transparent;
    border: 1px solid #0d6efd;
}

.ql-modal-button:hover {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
    text-decoration: none;
}

/* ============================================
   Google CSE 検索結果のはみ出し防止
   ============================================ */
.gcse-search,
.gcse-searchresults-only {
    overflow: hidden;
    max-width: 100%;
}

.gsc-results-wrapper-nooverlay.gsc-results-wrapper-visible .gsc-wrapper {
    max-width: 100%;
    overflow: hidden;
}