/*
Theme Name: Ponic Theme
Description: A full-featured, hyper-fast theme for pSEO directories.
Author: Gemini
Version: 1.1
Text Domain: ponic-theme
*/

:root {
    --primary: #10b981;
    --primary-dark: #059669;
    --secondary: #3b82f6;
    --dark: #111827;
    --light: #f3f4f6;
    --white: #ffffff;
    --gray: #6b7280;
    --border: #e5e7eb;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background-color: var(--light); color: var(--dark); line-height: 1.6; }
a { color: var(--primary); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--primary-dark); }

/* Header & Nav */
.site-header { background: var(--white); border-bottom: 1px solid var(--border); padding: 1rem 0; sticky; top: 0; z-index: 50; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.container { max-width: 1000px; margin: 0 auto; padding: 0 1.5rem; }
.header-flex { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.5rem; font-weight: 800; color: var(--primary); letter-spacing: -0.025em; }

/* Main Content */
.site-main { padding: 3rem 0; min-height: 70vh; }

/* Card Grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; }
.card { 
    background: var(--white); 
    border-radius: 12px; 
    border: 1px solid var(--border); 
    overflow: hidden; 
    transition: transform 0.2s, box-shadow 0.2s; 
    display: flex; 
    flex-direction: column;
    content-visibility: auto;
    contain-intrinsic-size: 1px 300px;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card-content { padding: 1.5rem; flex-grow: 1; }
.card-tag { display: inline-block; background: #ecfdf5; color: var(--primary-dark); font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 9999px; margin-bottom: 1rem; }
.card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; line-height: 1.25; }
.card-excerpt { color: var(--gray); font-size: 0.95rem; margin-bottom: 1.5rem; }
.card-footer { padding: 1rem 1.5rem; background: #f9fafb; border-top: 1px solid var(--border); }

/* Single Post */
.post-container { max-width: 700px; margin: 0 auto; background: var(--white); padding: 3rem; border-radius: 16px; border: 1px solid var(--border); }
.post-header { margin-bottom: 2.5rem; text-align: center; }
.post-title { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.05em; margin-bottom: 1rem; }
.post-meta { color: var(--gray); font-size: 0.875rem; }

.entry-content h2 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 1rem; color: var(--dark); display: flex; align-items: center; }
.entry-content h2::before { content: ""; display: inline-block; width: 4px; height: 1.5rem; background: var(--primary); margin-right: 0.75rem; border-radius: 2px; }
.entry-content p { margin-bottom: 1.25rem; font-size: 1.1rem; color: #374151; }
.entry-content ul { margin: 0 0 1.5rem 1.5rem; }
.entry-content li { margin-bottom: 0.5rem; }

/* Footer */
.site-footer { background: var(--dark); color: var(--white); padding: 4rem 0; text-align: center; margin-top: 5rem; }
.footer-text { opacity: 0.6; font-size: 0.875rem; }

/* Responsive */
@media (max-width: 640px) {
    .post-title { font-size: 1.75rem; }
    .post-container { padding: 1.5rem; border-radius: 0; border-left: none; border-right: none; }
}