/*
Theme Name: 30s Grid Layout
Description: A modern, responsive WordPress theme with grid layout and sidebar navigation. Features include masonry grid layout, responsive design, and clean typography.
Author: It's ME
Version: 1.6.1 Version incremented
License: GPL v2 or later
Text Domain: grid-card-theme
*/

/* Reset & Base Styles */
body {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease-in-out;
}

a:hover {
    color: #111111;
}

/* WordPress Core Styles */
.alignnone { margin: 5px 20px 20px 0; }
.aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; }
.alignright { float: right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }
a img.alignright { float: right; margin: 5px 0 20px 20px; }
a img.alignnone { margin: 5px 20px 20px 0; }
a img.alignleft { float: left; margin: 5px 20px 20px 0; }
a img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; padding: 5px 3px 10px; text-align: center; }
.wp-caption.alignnone { margin: 5px 20px 20px 0; }
.wp-caption.alignleft { margin: 5px 20px 20px 0; }
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; }
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; }

/* Layout Structure */
#sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    background-color: #ffffff !important;
    border-right: 1px solid #e5e7eb;
    box-shadow: 2px 0 12px rgba(0,0,0,0.06);
    padding: 0;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    z-index: 1050 !important;
    overflow-y: auto;
    transform: translateX(-100%);
    opacity: 0;
    display: none;
}

/* ── Sidebar Branding ── */
.sidebar-branding {
    padding: 1.25rem 1rem;
    display: flex;
    align-items: center;
}

.sidebar-branding-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.sidebar-logo-mark {
    width: 2rem;
    height: 2rem;
    background: #111827;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

.sidebar-logo-s {
    color: #9ca3af;
}

.sidebar-brand-text {
    font-size: 0.875rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* icon-only mode: branding adjustments */
#sidebar.icon-only .sidebar-branding {
    justify-content: center;
    padding: 1.25rem 0.5rem;
}

#sidebar.icon-only .sidebar-brand-text {
    display: none !important;
}

#sidebar.icon-only .sidebar-nav-wrap {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

#sidebar.icon-only {
    /* no extra padding needed */
}

#sidebar .menu-text-full {
    transition: opacity 0.1s ease-out;
    opacity: 1;
    white-space: nowrap;
}

#sidebar.icon-only .menu-text-full {
    opacity: 0;
    display: none !important; /* Ensure it's hidden and takes no space */
    width: 0 !important;
    margin-left: 0 !important;
}

#sidebar .menu-text-icon-only {
    display: none;
    font-size: 0.65rem;
    line-height: 1;
    margin-top: 0.25rem;
    text-align: center;
    color: #4b5563;
    white-space: normal;
    overflow-wrap: break-word;
    max-width: 100%;
}

#sidebar.icon-only .menu-text-icon-only {
    display: block !important;
}

#sidebar.icon-only .nav-item a {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0;
    padding-right: 0;
    text-decoration: none;
}

#sidebar.icon-only .nav-item a svg {
    margin-bottom: 0.125rem;
    margin-right: 0;
}

#sidebar.icon-only .nav-item a .ml-3 { /* For icon-only mode, ensure no margin on full text even if it briefly exists */
    margin-left: 0 !important;
}
/* 修正点1: 子カテゴリのインデント用 (もしTailwindのml-6で不十分な場合や、より細かい制御が必要な場合) */
/* #sidebar .nav-item .ml-6 { margin-left: 1.5rem !important; } /* 例: Tailwindのml-6に相当 */


#main-content-wrapper {
    transition: padding-left 0.3s ease-in-out;
    width: 100%;
}

#main-content-container {
    max-width: 900px; /* この値が640px以下になるかどうかがカード列数の基準 */
    margin-left: auto;
    margin-right: auto;
}

#site-header {
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: center;
    position: relative;
    border-bottom: 1px solid #e5e7eb;
}

#site-header .site-logo-link {
    display: inline-flex;
    align-items: center;
}


/* Card Styles */
.card-image-container { background-color: #e0e0e0; overflow: hidden; }
/* 修正点2: カードホバーアニメーションは card-post.php にTailwindクラスで実装するため、ここに専用CSSは不要 */
/* .group a.block { ... }  -> Tailwind group-hover utility classes will handle this */

/* Carousel Styles */
.carousel-container { position: relative; overflow: hidden; border-radius: 0.5rem; }
.carousel-track { display: flex; transition: transform 0.5s ease-in-out; }
.carousel-slide { min-width: 100%; box-sizing: border-box; }
.carousel-slide img {
    width: 100%;
    height: auto; /* height:auto を維持しつつmax-heightで制御 */
    object-fit: cover;
    /* 修正点3: カルーセル画像のレスポンシブ対応 (デフォルトの最大高さを設定) */
    max-height: 400px; /* デスクトップでの最大高さ */
}
.carousel-dots { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; }
.carousel-dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); cursor: pointer; transition: background-color 0.3s ease; border: none; }
.carousel-dot.active { background-color: rgba(255, 255, 255, 1); }

/* Share Button Styles (for single.php) */
.share-icon-button { display: inline-flex; align-items: center; justify-content: center; padding: 0.25rem; border-radius: 9999px; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; cursor: pointer; background-color: transparent; border: 1px solid #e5e7eb; color: #6b7280; width: 2.5rem; height: 2.5rem; }
.share-icon-button svg { width: 1.25rem; height: 1.25rem; }
.share-icon-button:hover { border-color: #d1d5db; background-color: #f9fafb; }

/* Post Grid — CSS columns masonry */
#post-grid {
    columns: 3;
    column-gap: 20px;
    padding-top: 1rem;
    column-fill: auto;
}

#post-grid article {
    break-inside: avoid;
    margin-bottom: 20px;
    width: 100%;
}

@media (max-width: 799px) {
    #post-grid { columns: 2; column-gap: 16px; }
    #post-grid article { margin-bottom: 16px; }
}

@media (max-width: 480px) {
    #post-grid { columns: 1; }
}

/* Load More Button & Spinner */
#load-more-container { text-align: center; margin-top: 2rem; margin-bottom: 2rem; }
#load-more-button { padding: 0.75rem 1.5rem; border-radius: 0.375rem; font-weight: 500; transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out; display: inline-flex; align-items: center; justify-content: center; }
#load-more-button.hidden { display: none !important; }
.spinner { display: inline-block; width: 1.5rem; height: 1.5rem; border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: white; animation: spin 1s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Article Content (for single.php) */
.article-content {
    font-size: 1rem;
    line-height: 1.9;
    color: #374151;
}
.article-content p { margin-bottom: 1.6rem; }
.article-content h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #111827;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1.1rem;
}
.article-content h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}
.article-content ul, .article-content ol { margin-left: 1.5rem; margin-bottom: 1.5rem; }
.article-content li { margin-bottom: 0.4rem; }
.article-content a { color: #111827; text-decoration: underline; text-underline-offset: 3px; }
.article-content a:hover { color: #6b7280; }
.article-content img {
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.article-content blockquote {
    border-left: 3px solid #111111;
    padding: 0.75rem 1.25rem;
    margin: 2rem 0;
    background: #f9fafb;
    border-radius: 0 0.5rem 0.5rem 0;
    color: #6b7280;
    font-style: italic;
}
.article-content strong { color: #111827; }
.article-content code {
    background: #f3f4f6;
    padding: 0.15em 0.4em;
    border-radius: 0.25rem;
    font-size: 0.875em;
}
.article-content pre {
    background: #1f2937;
    color: #f9fafb;
    padding: 1.25rem 1.5rem;
    border-radius: 0.75rem;
    overflow-x: auto;
    margin: 2rem 0;
    font-size: 0.875rem;
    line-height: 1.7;
}
.article-content pre code { background: none; padding: 0; }

/* Related posts grid (CSS columns like main grid) */
.related-posts-grid {
    columns: 2;
    column-gap: 16px;
}
.related-posts-grid article {
    break-inside: avoid;
    margin-bottom: 16px;
}
@media (max-width: 480px) {
    .related-posts-grid { columns: 1; }
}


/* Responsive Design Adjustments */

/* Mobile specific styles for sidebar */
@media (max-width: 768px) { /* md breakpoint */
    #sidebar.active {
        display: block !important;
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        box-shadow: 0 0 25px rgba(0,0,0,0.35) !important;
    }

    #menu-toggle-button {
        display: block !important;
        z-index: 1051 !important;
        position: fixed !important;
        top: 1rem;
        left: 1rem;
    }

    body.overflow-hidden {
        overflow: hidden !important;
    }

    /* 修正点3: カルーセル画像のレスポンシブ対応 (モバイルでの最大高さを調整) */
    .carousel-slide img {
        max-height: 300px; /* モバイル (md未満) */
    }
}

@media (max-width: 480px) { /* より小さい画面 */
    /* 修正点3: カルーセル画像のレスポンシブ対応 (さらに小さい画面での最大高さを調整) */
    .carousel-slide img {
        max-height: 220px; /* xsなど */
    }
}


/* Tablet and Desktop (Sidebar behavior changes here) */
@media (min-width: 769px) { /* md breakpoint以上 */
    #menu-toggle-button {
        display: none !important; /* Hide on larger screens */
    }
    #sidebar {
        display: block !important;
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}



.draft-label {
    position: absolute;
    top: 0.75rem; /* 12px */
    right: 0.75rem; /* 12px */
    background-color: #FFA500; /* Orange */
    color: white;
    padding: 0.125rem 0.5rem; /* 2px 8px */
    font-size: 0.75rem; /* 12px */
    font-weight: 600;
    border-radius: 0.25rem; /* 4px */
    z-index: 10;
    line-height: 1.2;
}