/* ===========================
   八洲学園中等部 カスタムCSS
   =========================== */

:root {
    --background: #FFFAF9;
    --foreground: #5D4149;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #FFF5F6;
}
::-webkit-scrollbar-thumb {
    background: #E86F84;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #D05A6E;
}

/* ===== 有機的な背景パターン ===== */

.bg-watercolor {
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(255, 204, 213, 0.4) 0%, transparent 70%),
        radial-gradient(ellipse 60% 70% at 75% 60%, rgba(255, 176, 190, 0.3) 0%, transparent 65%),
        radial-gradient(ellipse 50% 40% at 50% 90%, rgba(212, 237, 227, 0.3) 0%, transparent 60%),
        linear-gradient(175deg, #FFFAF9 0%, #FFF5F6 40%, #FFFAF9 100%);
}

.bg-sakura {
    background:
        radial-gradient(circle 120px at 10% 20%, rgba(255, 176, 190, 0.35) 0%, transparent 100%),
        radial-gradient(circle 80px at 85% 15%, rgba(255, 204, 213, 0.3) 0%, transparent 100%),
        radial-gradient(circle 100px at 70% 75%, rgba(255, 228, 232, 0.4) 0%, transparent 100%),
        radial-gradient(circle 60px at 25% 80%, rgba(208, 90, 110, 0.12) 0%, transparent 100%),
        radial-gradient(circle 150px at 50% 50%, rgba(240, 226, 228, 0.3) 0%, transparent 100%);
}

.bg-washi {
    position: relative;
}
.bg-washi::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(232, 111, 132, 0.02) 2px, rgba(232, 111, 132, 0.02) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(93, 65, 73, 0.015) 3px, rgba(93, 65, 73, 0.015) 6px);
    pointer-events: none;
    z-index: 0;
}

.bg-flowing {
    background:
        radial-gradient(ellipse 100% 60% at 0% 100%, rgba(255, 204, 213, 0.3) 0%, transparent 60%),
        radial-gradient(ellipse 80% 40% at 100% 0%, rgba(212, 237, 227, 0.25) 0%, transparent 55%),
        radial-gradient(ellipse 60% 80% at 40% 50%, rgba(255, 228, 232, 0.2) 0%, transparent 50%),
        linear-gradient(160deg, #FFFAF9 0%, #FFF5F6 30%, #FAF5F5 60%, #FFFAF9 100%);
}

.bg-dots {
    background-image: radial-gradient(circle, rgba(232, 111, 132, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
}

.bg-mesh-warm {
    background:
        radial-gradient(at 0% 0%, rgba(255, 228, 232, 0.5) 0%, transparent 50%),
        radial-gradient(at 100% 0%, rgba(240, 247, 244, 0.4) 0%, transparent 50%),
        radial-gradient(at 100% 100%, rgba(255, 204, 213, 0.3) 0%, transparent 50%),
        radial-gradient(at 0% 100%, rgba(255, 245, 246, 0.5) 0%, transparent 50%),
        #FFFAF9;
}

/* ===== カード効果 ===== */
.card-soft {
    background: #FFFFFF;
    border: 1px solid rgba(93, 65, 73, 0.08);
    box-shadow: 0 2px 8px 0 rgba(93, 65, 73, 0.06);
}

/* ===== スクロールアニメーション ===== */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ディレイ付きアニメーション */
.scroll-animate[data-delay="1"] { transition-delay: 0.1s; }
.scroll-animate[data-delay="2"] { transition-delay: 0.2s; }
.scroll-animate[data-delay="3"] { transition-delay: 0.3s; }
.scroll-animate[data-delay="4"] { transition-delay: 0.4s; }
.scroll-animate[data-delay="5"] { transition-delay: 0.5s; }

/* ===== モバイルメニューアニメーション ===== */
#mobile-menu {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translateX(100%);
    opacity: 0;
}
#mobile-menu.is-open {
    display: flex;
    transform: translateX(0);
    opacity: 1;
}

/* ===== ニュースカテゴリフィルタ ===== */
.news-item.is-hidden {
    display: none;
}

/* ===== line-clamp ===== */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== Prose (ニュース本文) ===== */
.prose h1, .prose h2, .prose h3, .prose h4 {
    color: #3A282E;
    font-weight: 700;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}
.prose p {
    margin-bottom: 1em;
    line-height: 1.8;
}
.prose a {
    color: #D05A6E;
    text-decoration: underline;
}
.prose a:hover {
    color: #B8475B;
}
.prose ul, .prose ol {
    padding-left: 1.5em;
    margin-bottom: 1em;
}
.prose li {
    margin-bottom: 0.5em;
}
.prose img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1em 0;
}

/* ===== WordPress admin bar fix ===== */
.admin-bar #site-header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar #site-header {
        top: 46px;
    }
}