/* ==========================================================
   common.css
   設置場所: /wp-content/themes/子テーマフォルダ/common.css
   読み込み: functions.php の wp_enqueue_style() で追加してください

   例）
   wp_enqueue_style(
       'oly-common',
       get_stylesheet_directory_uri() . '/common.css',
       [], '1.0.0'
   );
   ========================================================== */

/* ----------------------------------------------------------
   CSS変数（ブランドカラー）
   ---------------------------------------------------------- */
:root {
    --oly-green:        #1a8a35;
    --oly-green-light:  #f0f9f3;
    --oly-blue:         #005ebd;
    --oly-blue-light:   #f0f6fc;
    --oly-radius-card:  16px;
    --oly-radius-pill:  9999px;
    --oly-shadow-soft:  0 4px 16px rgba(0, 0, 0, 0.06);
    --oly-shadow-card:  0 2px 8px rgba(0, 0, 0, 0.06);
    --oly-content-max:  920px; /* 全ページ共通の最大幅 */
}

/* ----------------------------------------------------------
   ページ全体ラッパー（検索ページ・会員TOP共通）
   ---------------------------------------------------------- */
.oly-search-page {
    width: 100%;
    max-width: none;
    margin: 0;
    background: #fdfdfd;
    min-height: 100vh;
    padding-bottom: 80px; /* ボトムナビ分 */
    box-shadow: none;
}

.oly-search-page__inner {
    max-width: var(--oly-content-max);
    margin: 0 auto;
    padding: 32px 16px 120px;
}

/* ----------------------------------------------------------
   会員ヘッダー（会員TOP・検索ページ共通）
   ---------------------------------------------------------- */
.oly-member-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
}

.oly-member-header__user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.oly-member-header__avatar {
    width: 40px;
    height: 40px;
    background: var(--oly-green);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.oly-member-header__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.oly-member-header__greeting {
    font-size: 10px;
    font-weight: 700;
    color: #aaa;
    line-height: 1;
}

.oly-member-header__name {
    font-size: 14px;
    font-weight: 900;
    color: #333;
    line-height: 1.2;
}

.oly-member-header__bell {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 50%;
    color: #555;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s;
}
.oly-member-header__bell:hover { background: #e8e8e8; }

/* ----------------------------------------------------------
   検索フォーム
   ---------------------------------------------------------- */
.oly-search-form {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.oly-search-box {
    position: relative;
    flex: 1;
}

.oly-search-box__icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    pointer-events: none;
}

.oly-search-box__input {
    width: 100%;
    background: #fff;
    border: 2px solid var(--oly-green);
    border-radius: var(--oly-radius-pill);
    padding: 14px 44px 14px 48px;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    outline: none;
    box-shadow: var(--oly-shadow-soft);
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.oly-search-box__input::placeholder { color: #aaa; }
.oly-search-box__input:focus { border-color: var(--oly-green); }

.oly-search-box__clear {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    text-decoration: none;
    transition: background 0.15s;
}
.oly-search-box__clear:hover { background: #ccc; }

/* ----------------------------------------------------------
   ボタン
   ---------------------------------------------------------- */
.oly-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border-radius: var(--oly-radius-pill);
    font-size: 14px;
    font-weight: 900;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.1s;
    white-space: nowrap;
}
.oly-btn:active { transform: scale(0.97); }

.oly-btn--green {
    background: var(--oly-green);
    color: #fff;
}
.oly-btn--green:hover { opacity: 0.85; }

.oly-btn--blue {
    background: var(--oly-blue);
    color: #fff;
}
.oly-btn--blue:hover { opacity: 0.85; }

.oly-btn--outline {
    background: transparent;
    color: var(--oly-green);
    border: 2px solid var(--oly-green);
}

/* ----------------------------------------------------------
   検索結果件数
   ---------------------------------------------------------- */
.oly-search-count {
    font-size: 13px;
    font-weight: 700;
    color: #888;
    margin-bottom: 16px;
}
.oly-search-count strong {
    color: #333;
}

/* ----------------------------------------------------------
   カードリスト
   ---------------------------------------------------------- */
.oly-card-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.oly-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: var(--oly-radius-card);
    padding: 16px;
    text-decoration: none;
    box-shadow: var(--oly-shadow-card);
    transition: box-shadow 0.2s, border-color 0.2s;
}
.oly-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border-color: var(--oly-green);
}

.oly-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.oly-card__date {
    font-size: 11px;
    font-weight: 700;
    color: #aaa;
}

.oly-card__title {
    font-size: 14px;
    font-weight: 900;
    color: #333;
    line-height: 1.5;
}

/* ----------------------------------------------------------
   タグ（バッジ）
   ---------------------------------------------------------- */
.oly-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--oly-radius-pill);
    background: #eee;
    color: #666;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s;
}
.oly-tag:hover { opacity: 0.8; }

/* カラーバリエーション */
.oly-tag--green  { background: #ecfdf3; color: #1a8a35; }
.oly-tag--blue   { background: #eff6ff; color: #005ebd; }
.oly-tag--orange { background: #fff7ed; color: #c2410c; }
.oly-tag--rose   { background: #fff1f2; color: #be123c; }
.oly-tag--indigo { background: #eef2ff; color: #4338ca; }
.oly-tag--purple { background: #faf5ff; color: #7e22ce; }
.oly-tag--teal   { background: #f0fdfa; color: #0f766e; }
.oly-tag--gray   { background: #f3f4f6; color: #4b5563; }

/* ----------------------------------------------------------
   空状態（0件・未入力）
   ---------------------------------------------------------- */
.oly-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 16px;
    text-align: center;
}

.oly-empty-state__icon {
    width: 64px;
    height: 64px;
    background: #f3f4f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    margin-bottom: 16px;
}

.oly-empty-state__title {
    font-size: 15px;
    font-weight: 900;
    color: #555;
    margin: 0 0 6px;
}

.oly-empty-state__sub {
    font-size: 12px;
    font-weight: 700;
    color: #aaa;
    margin: 0;
}

/* ----------------------------------------------------------
   よく検索されるキーワード
   ---------------------------------------------------------- */
.oly-popular-keywords {
    margin-top: 40px;
}

.oly-popular-keywords__label {
    font-size: 14px;
    font-weight: 900;
    color: #333;
    margin: 0 0 12px;
}

.oly-popular-keywords__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ----------------------------------------------------------
   ページネーション
   ---------------------------------------------------------- */
.oly-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 32px 0;
    flex-wrap: wrap;
}

.oly-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: var(--oly-radius-pill);
    font-size: 13px;
    font-weight: 700;
    color: #555;
    background: #f3f4f6;
    text-decoration: none;
    transition: background 0.15s;
}
.oly-pagination .page-numbers:hover   { background: #e5e7eb; }
.oly-pagination .page-numbers.current { background: var(--oly-green); color: #fff; }
.oly-pagination .page-numbers.dots    { background: transparent; }

/* ----------------------------------------------------------
   ボトムナビゲーション
   ---------------------------------------------------------- */
.oly-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    transform: none;
    background: #fff;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 8px env(safe-area-inset-bottom, 0); /* iPhoneのホームバー対応 */
    z-index: 50;
}

.oly-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    color: #aaa;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    transition: color 0.15s;
}
.oly-bottom-nav__item:hover     { color: #555; }
.oly-bottom-nav__item.is-active { color: var(--oly-green); }