/*
Theme Name: Lisa-explore-theme
Theme URI: https://lisachannosukinatokoro.com
Author: TOMMY
Author URI: https://lisachannosukinatokoro.com
Description: 「りさちゃんと探検したところ」- 2人で旅行の思い出を記録・共有するWordPressカスタムテーマ
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lisa-explore-theme
*/

/* ==========================================
   CSS Variables (global)
   ========================================== */
:root {
    --color-tommy:   #87CEEB;
    --color-lisa:    #FFC0CB;
    --color-both:    #800080;
    --bg-color:      #fdf8f5;
    --accent-start:  rgb(201, 123, 138);
    --accent-end:    rgb(155, 109, 181);
    --font-serif:    "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", YuMincho, "Noto Serif JP", Georgia, serif;
    --font-sans:     "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
}

/* ==========================================
   Base Reset
   ========================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: #2d2020;
    font-family: var(--font-serif);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ==========================================
   フルスクリーンページ共通
   ログイン・ホーム・エピソード画面では
   WordPressのデフォルト余白をリセット
   ========================================== */
.site--fullscreen {
    padding: 0 !important;
    margin: 0 !important;
}

/* 管理バーがある場合の調整 */
.admin-bar .login-page,
.admin-bar .home-page,
.admin-bar .episode-page {
    padding-top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .login-page,
    .admin-bar .home-page,
    .admin-bar .episode-page {
        padding-top: 46px;
    }
}

/* ==========================================
   スター演出（共通）
   ========================================== */
.star-effect {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
}

@keyframes popStar {
    0%   { transform: scale(0) rotate(0deg); opacity: 1; }
    50%  { transform: scale(1.5) rotate(180deg); opacity: 1; }
    100% { transform: scale(0) rotate(360deg); opacity: 0; }
}