/* =============================================================
 * MinStack Blog — Main Stylesheet
 * Mobile-first, minimal, content-focused.
 *
 * @package MinStack_Blog
 * ============================================================= */

/* --- CSS Custom Properties (defaults, overridden by Customizer) --- */
:root {
        --ms-accent:  #1a1a1a;
        --ms-heading: #1a1a1a;
        --ms-body:    #444444;
        --ms-font-heading: 'Instrument Serif', serif;
        --ms-font-body:    'Space Grotesk', system-ui, sans-serif;
        --ms-bg:      #faf9f7;
        --ms-surface: #ffffff;
        --ms-border:  rgba(0,0,0,.08);
        --ms-header-bg: rgba(255,255,255,.92);
        --ms-radius:  8px;
        --ms-max:     720px;
}

/* --- Reset --- */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { font-size:16px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; scroll-behavior:smooth }
body { font-family:var(--ms-font-body); color:var(--ms-body); background:var(--ms-bg); line-height:1.7 }
img { max-width:100%; height:auto; display:block }
a { color:var(--ms-accent); text-decoration:none; transition:color .2s }
a:hover { opacity:.8 }

/* --- Screen Reader --- */
.screen-reader-text {
        clip:rect(1px,1px,1px,1px); position:absolute; height:1px; width:1px; overflow:hidden; word-wrap:normal;
}

/* =============================================================
 * HEADER
 * ============================================================= */
.site-header {
        position:sticky; top:0; z-index:100;
        background:var(--ms-header-bg);
        backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
        border-bottom:1px solid var(--ms-border);
}
.header-inner {
        max-width:1200px; margin:0 auto; padding:0 24px;
        height:64px; display:flex; align-items:center; justify-content:space-between;
}

/* Site branding */
.site-branding .custom-logo { height:36px; width:auto }
.site-title {
        font-family:var(--ms-font-heading); font-size:1.5rem;
        color:var(--ms-heading); text-decoration:none; letter-spacing:-.02em;
}

/* Nav list */
.main-nav .nav-list {
        list-style:none; display:flex; gap:28px;
}
.main-nav .nav-list li a {
        font-size:.875rem; font-weight:500; color:var(--ms-heading); text-decoration:none;
        transition:color .2s;
}
.main-nav .nav-list li a:hover { color:var(--ms-accent); opacity:1 }

/* Hamburger */
.menu-toggle {
        display:none; background:none; border:none; cursor:pointer;
        width:32px; height:32px; position:relative;
}
.hamburger,
.hamburger::before,
.hamburger::after {
        display:block; width:20px; height:2px; background:var(--ms-heading);
        border-radius:2px; transition:all .3s;
}
.hamburger { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) }
.hamburger::before { content:''; position:absolute; top:-6px; left:0; width:20px }
.hamburger::after  { content:''; position:absolute; top: 6px; left:0; width:20px }
.menu-toggle.active .hamburger { background:transparent }
.menu-toggle.active .hamburger::before { transform:rotate(45deg); top:0 }
.menu-toggle.active .hamburger::after  { transform:rotate(-45deg); top:0 }

/* =============================================================
 * CONTENT AREA (shared)
 * ============================================================= */
.content-area {
        max-width:1200px; margin:0 auto; padding:60px 24px 80px;
}

/* Archive / search header */
.archive-header { margin-bottom:48px }
.archive-title {
        font-family:var(--ms-font-heading); font-size:2.25rem;
        color:var(--ms-heading); letter-spacing:-.02em;
}
.archive-title span { font-style:italic; color:var(--ms-accent) }
.archive-desc { color:var(--ms-body); margin-top:8px; font-size:1rem }

/* =============================================================
 * POST CARD (grid item)
 * ============================================================= */
.posts-grid {
        display:grid; grid-template-columns:1fr 1fr 1fr; gap:32px;
}
.post-card {
        background:var(--ms-surface); border-radius:var(--ms-radius);
        overflow:hidden; border:1px solid var(--ms-border);
        transition:all .3s ease;
}
.post-card:hover {
        box-shadow:0 8px 32px rgba(0,0,0,.06); transform:translateY(-3px);
}
.card-img { display:block; overflow:hidden; aspect-ratio:3/2; background:#f0efed }
.card-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s }
.post-card:hover .card-img img { transform:scale(1.03) }
.card-body { padding:20px 24px 24px }
.card-date {
        display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em;
        color:#999; margin-bottom:8px; font-weight:500;
}
.card-title {
        font-family:var(--ms-font-heading); font-size:1.25rem;
        color:var(--ms-heading); line-height:1.3; margin-bottom:8px; letter-spacing:-.01em;
}
.card-title a { color:inherit; text-decoration:none }
.card-excerpt { font-size:.875rem; color:var(--ms-body); line-height:1.6 }

/* =============================================================
 * HOMEPAGE SECTIONS
 * ============================================================= */

/* --- Featured --- */
.section-featured {
        max-width:1200px; margin:0 auto; padding:60px 24px 40px;
}
.featured-inner {
        display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
}
.featured-img {
        display:block; border-radius:var(--ms-radius); overflow:hidden;
        box-shadow:0 16px 48px rgba(0,0,0,.08); aspect-ratio:16/10; background:#f0efed;
}
.featured-img img { width:100%; height:100%; object-fit:cover }
.featured-label {
        display:inline-block; font-size:.6875rem; font-weight:700;
        text-transform:uppercase; letter-spacing:.1em; color:#888;
        background:#f0efed; padding:5px 14px; border-radius:4px; margin-bottom:16px;
}
.featured-title {
        font-family:var(--ms-font-heading); font-size:clamp(1.75rem,3.5vw,2.75rem);
        color:var(--ms-heading); line-height:1.15; letter-spacing:-.02em; margin-bottom:12px;
}
.featured-title a { color:inherit; text-decoration:none }
.featured-excerpt { font-size:1rem; color:var(--ms-body); line-height:1.7; margin-bottom:16px }
.featured-meta { font-size:.8125rem; color:#999 }

/* --- Recent --- */
.section-recent {
        max-width:1200px; margin:0 auto; padding:40px 24px;
}
.section-heading {
        font-family:var(--ms-font-heading); font-size:1.75rem;
        color:var(--ms-heading); letter-spacing:-.01em; margin-bottom:32px;
}
.recent-grid {
        display:grid; grid-template-columns:repeat(var(--recent-cols,3),1fr); gap:28px;
}

/* --- Newsletter --- */
.section-newsletter {
        background:var(--ms-surface); border-top:1px solid var(--ms-border);
        border-bottom:1px solid var(--ms-border);
}
.newsletter-inner {
        max-width:560px; margin:0 auto; padding:64px 24px; text-align:center;
}
.newsletter-heading {
        font-family:var(--ms-font-heading); font-size:2rem;
        color:var(--ms-heading); letter-spacing:-.02em; margin-bottom:8px;
}
.newsletter-desc { color:var(--ms-body); font-size:.9375rem; margin-bottom:28px }
.newsletter-form {
        display:flex; gap:10px; max-width:440px; margin:0 auto;
}
.newsletter-form input[type="email"] {
        flex:1; padding:12px 16px; border:1px solid #ddd; border-radius:6px;
        font-size:.9375rem; font-family:var(--ms-font-body); background:var(--ms-bg);
        transition:border-color .2s;
}
.newsletter-form input[type="email"]:focus {
        outline:none; border-color:var(--ms-accent);
}
.newsletter-form button {
        background:var(--ms-accent); color:#fff; border:none; padding:12px 24px;
        border-radius:6px; font-size:.875rem; font-weight:600;
        font-family:var(--ms-font-body); cursor:pointer; transition:background .2s; white-space:nowrap;
}
.newsletter-form button:hover { opacity:.9 }
.newsletter-setup { color:#999; font-size:.875rem; font-style:italic }

/* --- Author --- */
.section-author {
        max-width:1200px; margin:0 auto; padding:48px 24px;
}
.author-card {
        display:flex; gap:24px; align-items:center;
        max-width:560px; margin:0 auto;
        background:var(--ms-surface); border:1px solid var(--ms-border);
        border-radius:var(--ms-radius); padding:32px;
}
.author-card .author-avatar {
        flex-shrink:0; width:80px; height:80px;
}
.author-card .author-avatar img {
        width:80px; height:80px; border-radius:50%; object-fit:cover; display:block;
}
.author-name {
        font-family:var(--ms-font-heading); font-size:1.25rem;
        color:var(--ms-heading); margin-bottom:4px;
}
.author-desc { font-size:.875rem; color:var(--ms-body); line-height:1.6 }

/* =============================================================
 * SINGLE POST
 * ============================================================= */
.single-post, .single-page {
        max-width:var(--ms-max); margin:0 auto; padding:60px 24px 80px;
}
.post-header { margin-bottom:36px; text-align:center }
.post-meta {
        font-size:.8125rem; color:#999; margin-bottom:12px;
        display:flex; gap:8px; justify-content:center; align-items:center;
}
.meta-sep { opacity:.4 }
.post-title {
        font-family:var(--ms-font-heading);
        font-size:clamp(2rem,5vw,3.25rem);
        color:var(--ms-heading); line-height:1.15; letter-spacing:-.03em;
}
.post-hero {
        margin-bottom:40px; border-radius:var(--ms-radius); overflow:hidden;
}
.post-hero img { width:100% }

/* Drop cap */
.drop-cap > p:first-of-type::first-letter {
        float:left; font-family:var(--ms-font-heading);
        font-size:4rem; line-height:.8; padding-right:12px; padding-top:6px;
        color:var(--ms-heading); font-weight:400;
}

/* Post content typography */
.post-content {
        font-size:1.0625rem; line-height:1.8; color:var(--ms-body);
}
.post-content p { margin-bottom:1.5em }
.post-content h2,.post-content h3,.post-content h4 {
        font-family:var(--ms-font-heading); color:var(--ms-heading);
        margin:1.1em 0 .4em; letter-spacing:-.01em;
}
/* Trim the top gap further when a heading directly opens the content */
.post-content > h2:first-child,
.post-content > h3:first-child,
.post-content > h4:first-child { margin-top:0 }
.post-content h2 { font-size:1.75rem }
.post-content h3 { font-size:1.375rem }
.post-content h4 { font-size:1.125rem }
.post-content blockquote {
        border-left:3px solid var(--ms-accent); margin:2em 0; padding:1em 1.5em;
        font-family:var(--ms-font-heading); font-size:1.25rem; font-style:italic;
        color:var(--ms-heading); line-height:1.5;
}
.post-content ul,.post-content ol { padding-left:1.5em; margin-bottom:1.5em }
.post-content li { margin-bottom:.5em }
.post-content img { border-radius:var(--ms-radius); margin:2em 0 }
.post-content pre {
        background:#f5f4f2; border-radius:var(--ms-radius); padding:20px 24px;
        overflow-x:auto; font-size:.875rem; line-height:1.6; margin:2em 0;
}
.post-content code {
        background:#f5f4f2; padding:2px 6px; border-radius:3px; font-size:.875em;
}
.post-content pre code { background:none; padding:0 }
.post-content a { text-decoration:underline; text-underline-offset:3px }

/* Tags */
.post-tags {
        margin-top:40px; padding-top:24px; border-top:1px solid var(--ms-border);
        display:flex; gap:8px; flex-wrap:wrap;
}
.tag {
        background:#f0efed; padding:6px 14px; border-radius:4px;
        font-size:.75rem; font-weight:600; color:#666; text-decoration:none;
        transition:background .2s;
}
.tag:hover { background:#e5e3e0 }

/* Author bio (single post) */
.single-post .author-bio {
        display:flex; gap:20px; align-items:center;
        margin-top:48px; padding:28px; background:var(--ms-surface);
        border:1px solid var(--ms-border); border-radius:var(--ms-radius);
}
.single-post .author-bio .author-avatar {
        flex-shrink:0; width:64px; height:64px;
}
.single-post .author-bio .author-avatar img {
        width:64px; height:64px; border-radius:50%; object-fit:cover; display:block;
}
.single-post .author-bio .author-name {
        font-family:var(--ms-font-heading); font-size:1.125rem;
        color:var(--ms-heading); margin-bottom:2px;
}
.single-post .author-bio .author-desc {
        font-size:.8125rem; color:var(--ms-body); line-height:1.5;
}

/* Post navigation */
.post-nav {
        display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:48px;
}
.post-nav-link {
        padding:20px; border:1px solid var(--ms-border); border-radius:var(--ms-radius);
        text-decoration:none; transition:all .2s;
}
.post-nav-link:hover { box-shadow:0 4px 16px rgba(0,0,0,.06) }
.post-nav-link.next { text-align:right }
.nav-label { display:block; font-size:.75rem; color:#999; margin-bottom:4px }
.nav-title {
        font-family:var(--ms-font-heading); font-size:1rem;
        color:var(--ms-heading); line-height:1.3;
}

/* =============================================================
 * COMMENTS
 * ============================================================= */
.comments-area {
        max-width:var(--ms-max); margin:0 auto; padding:48px 24px 80px;
}
.comments-title {
        font-family:var(--ms-font-heading); font-size:1.5rem;
        color:var(--ms-heading); margin-bottom:32px;
}
.comment-list { list-style:none }
.comment-list .comment {
        padding:20px 0; border-bottom:1px solid var(--ms-border);
}
.comment-list .comment-author img { border-radius:50%; margin-right:12px; float:left }
.comment-list .comment-meta { font-size:.75rem; color:#999; margin-bottom:8px }
.comment-list .comment-body p { font-size:.9375rem }

/* Comment form */
.comment-form label { display:block; font-size:.8125rem; font-weight:600; margin-bottom:6px; color:var(--ms-heading) }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
        width:100%; padding:10px 14px; border:1px solid #ddd; border-radius:6px;
        font-size:.9375rem; font-family:var(--ms-font-body); margin-bottom:16px;
        background:var(--ms-bg); transition:border-color .2s;
}
.comment-form input:focus, .comment-form textarea:focus {
        outline:none; border-color:var(--ms-accent);
}
.comment-form .form-submit input[type="submit"] {
        background:var(--ms-accent); color:#fff; border:none; padding:12px 28px;
        border-radius:6px; font-size:.9375rem; font-weight:600;
        cursor:pointer; transition:background .2s;
}
.comment-form .form-submit input[type="submit"]:hover { opacity:.9 }

/* =============================================================
 * SEARCH FORM
 * ============================================================= */
.search-form { display:flex; gap:10px; max-width:440px }
.search-field {
        flex:1; padding:10px 14px; border:1px solid #ddd; border-radius:6px;
        font-size:.9375rem; font-family:var(--ms-font-body); background:var(--ms-bg);
}
.search-field:focus { outline:none; border-color:var(--ms-accent) }
.search-submit {
        background:var(--ms-accent); color:#fff; border:none; padding:10px 20px;
        border-radius:6px; font-size:.875rem; font-weight:600; cursor:pointer;
}

/* =============================================================
 * PAGINATION
 * ============================================================= */
.pagination { margin-top:48px; text-align:center }
.pagination .nav-links { display:flex; gap:8px; justify-content:center; flex-wrap:wrap }
.pagination .page-numbers {
        display:inline-flex; align-items:center; justify-content:center;
        width:40px; height:40px; border-radius:6px; font-size:.875rem; font-weight:600;
        border:1px solid var(--ms-border); color:var(--ms-heading); text-decoration:none;
        transition:all .2s;
}
.pagination .page-numbers.current {
        background:var(--ms-accent); color:#fff; border-color:var(--ms-accent);
}
.pagination .page-numbers:hover:not(.current) { background:#f0efed }
.pagination .prev, .pagination .next { width:auto; padding:0 16px }

/* =============================================================
 * 404
 * ============================================================= */
.error-404 { text-align:center; padding-top:100px }
.error-404 .post-content p { margin-bottom:24px }
.error-404 .search-form { margin:0 auto }

/* =============================================================
 * FOOTER
 * ============================================================= */
.site-footer {
        border-top:1px solid var(--ms-border); background:var(--ms-bg);
}
.footer-inner {
        max-width:1200px; margin:0 auto; padding:40px 24px;
        display:flex; align-items:center; justify-content:space-between;
}
.footer-logo {
        font-family:var(--ms-font-heading); font-size:1.25rem;
        color:var(--ms-heading); text-decoration:none;
}
.footer-copy { font-size:.8125rem; color:#999 }

/* =============================================================
 * PROGRESSIVE ENHANCEMENT (scroll animations)
 * ============================================================= */
.js .animate {
        opacity:0; transform:translateY(20px);
        transition:opacity .6s ease, transform .6s ease;
}
.js .animate.visible {
        opacity:1; transform:translateY(0);
}
@media (prefers-reduced-motion:reduce) {
        .js .animate { opacity:1; transform:none; transition:none }
}

/* =============================================================
 * RESPONSIVE
 * ============================================================= */

/* Tablet */
@media (max-width:900px) {
        .featured-inner { grid-template-columns:1fr; gap:32px }
        .featured-img { order:-1 }
        .posts-grid, .recent-grid { grid-template-columns:1fr 1fr }
        .post-nav { grid-template-columns:1fr }
}

/* Mobile */
@media (max-width:640px) {
        /* Header */
        .menu-toggle { display:block }
        .main-nav {
                position:fixed; top:64px; left:0; right:0; bottom:0;
                background:var(--ms-bg); z-index:99;
                transform:translateX(100%); transition:transform .3s ease;
        }
        .main-nav.open { transform:translateX(0) }
        .main-nav .nav-list {
                flex-direction:column; gap:0; padding:24px;
        }
        .main-nav .nav-list li a {
                display:block; padding:16px 0; font-size:1.125rem;
                border-bottom:1px solid var(--ms-border);
        }

        /* Grid */
        .posts-grid, .recent-grid { grid-template-columns:1fr }

        /* Newsletter */
        .newsletter-form { flex-direction:column }
        .newsletter-form button { width:100% }

        /* Author */
        .author-card { flex-direction:column; text-align:center }

        /* Footer */
        .footer-inner { flex-direction:column; gap:12px; text-align:center }
}

/* =============================================================
 * WORDPRESS SPECIFIC
 * ============================================================= */
/* Align classes */
.alignwide { max-width:960px; margin-left:auto; margin-right:auto }
.alignfull { max-width:100vw; margin-left:calc(-50vw + 50%); margin-right:calc(-50vw + 50%) }
.aligncenter { display:block; margin-left:auto; margin-right:auto }
.alignleft { float:left; margin-right:1.5em; margin-bottom:1em }
.alignright { float:right; margin-left:1.5em; margin-bottom:1em }

/* Captions */
.wp-caption { max-width:100%; margin-bottom:1.5em }
.wp-caption-text { font-size:.8125rem; color:#999; margin-top:8px; text-align:center }

/* Galleries */
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin:2em 0 }
.gallery-item { margin:0 }
.gallery-item img { border-radius:var(--ms-radius) }

/* Sticky posts */
.post-card.sticky { border-color:var(--ms-accent) }

/* Admin bar spacing */
.admin-bar .site-header { top:32px }
@media (max-width:782px) {
        .admin-bar .site-header { top:46px }
}