/*
Theme Name: QuantumSpiral
Version: 2.0 Clean
*/

/* =========================
   ROOT
========================= */
:root {
    --qs-bg-color: #0d0d15;
    --qs-text-color: #e0e0e0;
    --qs-accent-color: #00ffff;
    --qs-secondary-color: #bf00ff;
    --qs-link-color: #00b7ff;
    --qs-link-hover: #ffffff;
    --qs-card-bg: #1a1a24;
    --qs-border-color: #333344;
}

/* =========================
   BASE
========================= */
body {
    background: var(--qs-bg-color);
    color: var(--qs-text-color);
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

a {
    color: var(--qs-link-color);
    text-decoration: none;
    transition: 0.3s;
}

a:hover {
    color: var(--qs-link-hover);
}

/* =========================
   HEADER (シンプル安定版)
========================= */
.site-header {
    position: relative;
    background: rgba(13,13,21,0.95);
    border-bottom: 1px solid var(--qs-border-color);
}

/* ヘッダー画像 */
.header-video-bg,
.wp-custom-header {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.header-video-bg img,
.wp-custom-header img,
.header-video-bg video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* =========================
   BRANDING
========================= */
.site-branding {
    text-align: center;
    padding: 30px 0 10px 0;
}

.site-title a {
    color: var(--qs-accent-color);
    font-size: 2.2rem;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0,255,255,0.5);
}

/* =========================
   SPIRAL
========================= */
.spiral-container {
    width: 60px;
    height: 60px;
    margin: 0 auto 10px;
    position: relative;
    animation: rotateSpiral 10s linear infinite;
}

.spiral-ring {
    position: absolute;
    border: 2px solid transparent;
    border-top: 2px solid var(--qs-accent-color);
    border-right: 2px solid var(--qs-secondary-color);
    border-radius: 50%;
    animation: spin 3s linear infinite;
}

.spiral-ring:nth-child(1){width:100%;height:100%;animation-duration:2s;}
.spiral-ring:nth-child(2){width:80%;height:80%;top:10%;left:10%;animation-duration:3s;animation-direction:reverse;}
.spiral-ring:nth-child(3){width:60%;height:60%;top:20%;left:20%;animation-duration:4s;}

@keyframes rotateSpiral{from{transform:rotate(0);}to{transform:rotate(360deg);}}
@keyframes spin{from{transform:rotate(0);}to{transform:rotate(360deg);}}

/* =========================
   COUNTDOWN
========================= */
#quantum-countdown-wrapper {
    padding: 40px 0;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    border-top: 1px solid var(--qs-border-color);
    border-bottom: 1px solid var(--qs-border-color);
}

#quantum-countdown {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.countdown-item {
    background: rgba(26,26,36,0.85);
    padding: 20px 30px;
    border-radius: 10px;
    border: 1px solid rgba(0,255,255,0.25);
    min-width: 120px;
    text-align: center;
    box-shadow: 0 0 20px rgba(0,255,255,0.15);
}

.countdown-number {
    font-size: 2rem;
    font-weight: bold;
    color: var(--qs-accent-color);
    text-shadow: 0 0 10px var(--qs-accent-color);
}

.countdown-label {
    font-size: 0.7rem;
    margin-top: 5px;
    opacity: 0.8;
}

/* =========================
   LAYOUT
========================= */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.site-content {
    margin: 40px auto;
}

/* =========================
   POSTS
========================= */
.post-card {
    background: var(--qs-card-bg);
    border: 1px solid var(--qs-border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: 0.3s;
}

.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,255,255,0.1);
}

.post-thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.post-content {
    padding: 20px;
}

/* =========================
   FOOTER
========================= */
.site-footer {
    background: rgba(13,13,21,0.95);
    border-top: 1px solid var(--qs-border-color);
    padding: 40px 0;
    margin-top: 60px;
    text-align: center;
    color: #888;
}

/* ===== Layout with Sidebar ===== */

.content-area {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.site-main {
    flex: 3;
}

.widget-area {
    flex: 1;
    background: rgba(20,20,35,0.6);
    padding: 20px;
    border-radius: 12px;
    backdrop-filter: blur(8px);
}

/* レスポンシブ */
@media (max-width: 900px) {
    .content-area {
        flex-direction: column;
    }
}

/* ===== Layout Fix ===== */

#primary {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

#main {
    flex: 3;
}

#secondary {
    flex: 1;
    background: rgba(20,20,35,0.6);
    padding: 20px;
    border-radius: 12px;
}

/* モバイル */
@media (max-width: 900px) {
    #primary {
        flex-direction: column;
    }
}
/* =========================
   WORDPRESS CALENDAR FIX
========================= */

#wp-calendar {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    color: var(--qs-text-color);
}

#wp-calendar caption {
    margin-bottom: 10px;
    font-weight: bold;
}

#wp-calendar th,
#wp-calendar td {
    padding: 8px;
    border: 1px solid var(--qs-border-color);
}

#wp-calendar th {
    background: rgba(255,255,255,0.05);
    font-weight: 600;
}

#wp-calendar a {
    color: var(--qs-accent-color);
    font-weight: bold;
}

#wp-calendar a:hover {
    color: #ffffff;
}