/*
Theme Name: SEOzen Pro
Theme URI: https://example.com/seozen-pro
Author: Avinash + ChatGPT
Author URI: https://instantaiarticle.blog/
Description: SEO-optimized, mobile-first WordPress theme with a prebuilt landing homepage + latest posts, breadcrumbs, schema.org JSON-LD, and clean Core Web Vitals.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: seozen-pro
Tags: blog, custom-homepage, one-column, two-columns, right-sidebar, accessibility-ready, custom-logo, custom-menu, featured-images, editor-style
*/

/* Base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial; line-height: 1.6; color: #111; background: #fff; }
a { color: #0b5cff; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

.container { width: min(1140px, 92vw); margin: 0 auto; }
.header { position: sticky; top: 0; background: #ffffffcc; backdrop-filter: saturate(180%) blur(8px); z-index: 50; border-bottom: 1px solid #eee; }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 0; }
.branding { display:flex; align-items:center; gap:.75rem; }
.site-title { margin:0; font-weight:700; font-size: clamp(1.25rem, 2.5vw, 1.6rem); }
.site-description { color:#555; font-size:.92rem; }

.nav { display:flex; align-items:center; }
.nav ul { list-style:none; padding:0; margin:0; display:flex; gap:.5rem; }
.nav a { padding:.55rem .8rem; border-radius: .7rem; }
.nav a[aria-current="page"] { background:#eef3ff; }

/* Mobile Nav */
.menu-toggle { display:none; border:1px solid #ddd; background:#fff; border-radius:.75rem; padding:.45rem .6rem; }
@media (max-width: 900px) {
  .menu-toggle { display:block; }
  .nav { position: absolute; left:0; right:0; top: 60px; background:#fff; border-bottom:1px solid #eee; display:none; }
  .nav.open { display:block; }
  .nav ul { flex-direction: column; gap: .25rem; padding: .75rem; }
}

/* Layout */
.main { display:grid; grid-template-columns:1fr; gap:2rem; }
@media (min-width: 960px) {
  .main.has-sidebar { grid-template-columns: 1fr 320px; }
}
.widget-area .widget { margin-bottom: 1.2rem; padding:1rem; border:1px solid #eee; border-radius:.9rem; }

/* Components */
.post-card { border:1px solid #eee; border-radius:1rem; padding:1rem; transition: box-shadow .2s ease; }
.post-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,.06); }
.post-card h2 { margin-top:0; font-size: clamp(1.1rem,2.2vw,1.35rem); }
.meta { color:#666; font-size:.9rem; }
.breadcrumbs { font-size:.9rem; color:#666; margin:.5rem 0 1rem; }
.breadcrumbs a { color:inherit; }

.post-content img { max-width:100%; height:auto; border-radius:.5rem; }
.post-content pre { overflow:auto; padding:1rem; background:#0f172a; color:#e2e8f0; border-radius:.75rem; }

.footer { margin-top:2rem; padding:2rem 0; border-top:1px solid #eee; color:#555; }

/* Pagination */
.pagination { display:flex; gap:.5rem; flex-wrap:wrap; }
.pagination .page-numbers { padding:.5rem .75rem; border:1px solid #eee; border-radius:.5rem; }
.pagination .current { background:#0b5cff; color:#fff; border-color:#0b5cff; }

/* Hero */
.hero { padding: clamp(2rem, 5vw, 4rem) 0; }
.hero-inner { display:grid; grid-template-columns: 1.2fr 1fr; gap:2rem; align-items:center; }
.hero h1 { margin:0; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height:1.2; }
.hero p { font-size: clamp(1rem, 2vw, 1.2rem); color:#444; }
.cta-btn { display:inline-block; margin-top:1rem; padding:.7rem 1rem; border-radius:.8rem; border:1px solid #0b5cff; }
.hero-figure { text-align:center; }
.hero-figure img { max-width: 320px; width: 80%; height:auto; }
@media (max-width: 900px) {
  .hero-inner { grid-template-columns:1fr; text-align:center; }
}

/* About */
.section { padding: clamp(1.5rem, 4vw, 2.5rem) 0; }
.section h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin: 0 0 .75rem; }

/* Services */
.services { display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; }
.service { border:1px solid #eee; border-radius:1rem; padding:1rem; }
.service h3 { margin:.25rem 0; font-size:1.05rem; }
@media (max-width: 900px) {
  .services { grid-template-columns: 1fr; }
}

/* Latest posts grid */
.posts-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:1rem; }

/* Accessibility */
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }