/*
Theme Name: SEOFlow
Theme URI: https://seoflow.blog
Author: SEOFlow
Author URI: https://seoflow.blog
Description: A fast, lightweight, AdSense-friendly WordPress theme built for SEOFlow.blog. Vanilla CSS, no framework bloat, schema markup built in, and ad slots designed to avoid layout shift.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: seoflow
Tags: blog, custom-menu, featured-images, threaded-comments, translation-ready, one-column, two-columns, right-sidebar
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root{
  --bg:#FAFAF9;
  --surface:#FFFFFF;
  --ink:#14181F;
  --ink-soft:#4B5563;
  --ink-faint:#8A8F98;
  --primary:#2451B8;
  --primary-dark:#1A3B8C;
  --mint:#17A673;
  --mint-pale:#E7F6EF;
  --amber:#F2A93B;
  --amber-pale:#FDF2DF;
  --border:#E4E2DC;
  --radius:10px;
  --radius-sm:6px;
  --max-width:1180px;
  --content-width:740px;
  --font-display:'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --shadow-sm:0 1px 2px rgba(20,24,31,.06);
  --shadow-md:0 6px 20px rgba(20,24,31,.08);
}

/* ==========================================================================
   2. Reset
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--primary);text-decoration:none;}
a:hover{text-decoration:underline;}
ul,ol{padding-left:1.25em;}
figure{margin:0;}
table{border-collapse:collapse;width:100%;}
button,input,textarea,select{font-family:inherit;font-size:inherit;}
:focus-visible{outline:3px solid var(--mint);outline-offset:2px;}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

/* ==========================================================================
   3. Layout shell
   ========================================================================== */
.wrap{max-width:var(--max-width);margin:0 auto;padding:0 20px;}
.site-main-grid{
  max-width:var(--max-width);
  margin:0 auto;
  padding:32px 20px 64px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:48px;
}
.has-no-sidebar .site-main-grid{grid-template-columns:minmax(0,1fr);max-width:var(--content-width);}
@media (max-width:860px){
  .site-main-grid{grid-template-columns:1fr;gap:32px;}
}

/* ==========================================================================
   4. Header
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,250,249,.92);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--border);
}
.site-header__bar{
  max-width:var(--max-width);margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;gap:24px;
}
.site-branding{display:flex;align-items:center;gap:10px;margin-right:auto;}
.site-branding img{max-height:36px;width:auto;}
.site-title{
  font-family:var(--font-display);
  font-size:1.35rem;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);margin:0;display:flex;align-items:center;gap:6px;
}
.site-title a{color:var(--ink);}
.site-title a:hover{text-decoration:none;}
.site-title__accent{
  display:inline-block;width:9px;height:9px;border-radius:2px;
  background:var(--mint);transform:rotate(45deg);
}
.site-description{
  font-family:var(--font-mono);font-size:.7rem;color:var(--ink-faint);
  margin:0;display:none;
}
@media (min-width:640px){.site-description{display:block;}}

.primary-navigation ul{list-style:none;margin:0;padding:0;display:flex;gap:22px;}
.primary-navigation a{
  font-family:var(--font-display);font-weight:600;font-size:.92rem;
  color:var(--ink-soft);
}
.primary-navigation a:hover,.primary-navigation .current-menu-item a{color:var(--primary);text-decoration:none;}

.header-search{position:relative;}
.header-search input[type=search]{
  width:180px;padding:8px 12px 8px 32px;border:1px solid var(--border);
  border-radius:20px;background:var(--surface);font-size:.85rem;
  transition:width .2s ease,border-color .2s ease;
}
.header-search input[type=search]:focus{width:230px;border-color:var(--primary);}
.header-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);opacity:.5;pointer-events:none;}

.menu-toggle{display:none;background:none;border:1px solid var(--border);border-radius:8px;padding:8px 10px;cursor:pointer;}
@media (max-width:780px){
  .primary-navigation{display:none;width:100%;order:5;}
  .primary-navigation.is-open{display:block;}
  .primary-navigation ul{flex-direction:column;gap:0;padding:12px 0;}
  .primary-navigation li{border-top:1px solid var(--border);}
  .primary-navigation a{display:block;padding:12px 4px;}
  .site-header__bar{flex-wrap:wrap;}
  .menu-toggle{display:block;}
  .header-search{order:4;margin-left:auto;}
}

/* ==========================================================================
   5. SERP-style post cards (signature element)
   ========================================================================== */
.post-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;}
.post-card{
  display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;
  padding:22px 0;border-bottom:1px solid var(--border);
}
.post-card:first-child{padding-top:4px;}
.post-card__rank{
  font-family:var(--font-mono);font-size:.78rem;font-weight:600;
  color:var(--mint);background:var(--mint-pale);
  border-radius:var(--radius-sm);
  height:30px;width:44px;display:flex;align-items:center;justify-content:center;
}
.post-card__breadcrumb{
  font-family:var(--font-mono);font-size:.72rem;color:var(--mint);
  letter-spacing:.01em;margin:0 0 4px;word-break:break-word;
}
.post-card__breadcrumb span{color:var(--ink-faint);}
.post-card__title{
  font-family:var(--font-display);font-size:1.28rem;font-weight:700;
  line-height:1.3;margin:0 0 6px;letter-spacing:-.01em;
}
.post-card__title a{color:var(--primary-dark);}
.post-card__title a:hover{color:var(--primary);text-decoration:none;}
.post-card__excerpt{color:var(--ink-soft);font-size:.98rem;margin:0 0 10px;}
.post-card__stats{
  display:flex;flex-wrap:wrap;gap:14px;
  font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint);
}
.post-card__stats span{display:inline-flex;align-items:center;gap:5px;}
.post-card__stats a{color:var(--ink-faint);}
@media (max-width:520px){
  .post-card{grid-template-columns:1fr;}
  .post-card__rank{width:36px;}
}

/* Featured / sticky post */
.post-card--featured{
  display:block; /* override the 52px-rank-badge grid — this card has no badge column */
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;margin-bottom:8px;box-shadow:var(--shadow-sm);
}
.post-card--featured .post-card__title{font-size:1.55rem;}
.post-card--featured .post-card__thumb{
  border-radius:var(--radius-sm);overflow:hidden;margin-bottom:14px;aspect-ratio:16/8;
}
.post-card--featured .post-card__thumb img{width:100%;height:100%;object-fit:cover;}

/* Pagination */
.pagination{display:flex;gap:8px;justify-content:center;margin:40px 0 0;flex-wrap:wrap;}
.pagination a,.pagination span{
  font-family:var(--font-mono);font-size:.85rem;padding:8px 13px;
  border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--ink-soft);
}
.pagination .current{background:var(--ink);border-color:var(--ink);color:#fff;}
.pagination a:hover{border-color:var(--primary);color:var(--primary);text-decoration:none;}

/* ==========================================================================
   6. Single post
   ========================================================================== */
.entry-header{max-width:var(--content-width);margin:0 auto 28px;}
.breadcrumb-trail{
  font-family:var(--font-mono);font-size:.75rem;color:var(--ink-faint);
  margin:0 0 14px;display:flex;flex-wrap:wrap;gap:6px;
}
.breadcrumb-trail a{color:var(--mint);}
.breadcrumb-trail .sep{color:var(--border);}
.entry-title{
  font-family:var(--font-display);font-size:clamp(1.7rem,4vw,2.5rem);
  line-height:1.18;font-weight:700;letter-spacing:-.015em;margin:0 0 16px;
}
.entry-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  font-family:var(--font-mono);font-size:.78rem;color:var(--ink-faint);
  padding-bottom:20px;border-bottom:1px solid var(--border);
}
.entry-meta img.avatar{border-radius:50%;width:26px;height:26px;}
.entry-meta a{color:var(--ink-soft);}

.entry-thumb{max-width:var(--content-width);margin:0 auto 32px;border-radius:var(--radius);overflow:hidden;}

.entry-content{max-width:var(--content-width);margin:0 auto;}
.entry-content > *{margin-top:0;margin-bottom:1.35em;}
.entry-content h2{
  font-family:var(--font-display);font-size:1.5rem;font-weight:700;
  margin-top:2em;letter-spacing:-.01em;scroll-margin-top:90px;
}
.entry-content h3{
  font-family:var(--font-display);font-size:1.2rem;font-weight:700;
  margin-top:1.7em;scroll-margin-top:90px;
}
.entry-content p{color:var(--ink);}
.entry-content a{text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:3px;}
.entry-content blockquote{
  margin:1.5em 0;padding:4px 0 4px 20px;border-left:3px solid var(--mint);
  font-style:italic;color:var(--ink-soft);
}
.entry-content pre{
  background:#141922;color:#E6E9EF;padding:16px;border-radius:var(--radius-sm);
  overflow:auto;font-family:var(--font-mono);font-size:.85rem;
}
.entry-content code{font-family:var(--font-mono);font-size:.88em;background:var(--mint-pale);padding:.15em .4em;border-radius:4px;}
.entry-content pre code{background:none;padding:0;}
.entry-content img{border-radius:var(--radius-sm);}
.entry-content table{margin:1.5em 0;font-size:.92rem;}
.entry-content th,.entry-content td{border:1px solid var(--border);padding:9px 12px;text-align:left;}
.entry-content th{background:var(--bg);font-family:var(--font-display);}
.entry-content ul li,.entry-content ol li{margin-bottom:.4em;}

.entry-tags{max-width:var(--content-width);margin:0 auto 24px;display:flex;flex-wrap:wrap;gap:8px;}
.entry-tags a{
  font-family:var(--font-mono);font-size:.72rem;color:var(--ink-soft);
  border:1px solid var(--border);border-radius:20px;padding:5px 12px;
}
.entry-tags a:hover{border-color:var(--primary);color:var(--primary);text-decoration:none;}

.author-box{
  max-width:var(--content-width);margin:36px auto;padding:22px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  display:flex;gap:16px;align-items:flex-start;
}
.author-box img{border-radius:50%;width:56px;height:56px;flex:none;}
.author-box h3{font-family:var(--font-display);margin:0 0 4px;font-size:1rem;}
.author-box p{margin:0;color:var(--ink-soft);font-size:.92rem;}

.related-posts{max-width:var(--content-width);margin:44px auto;}
.related-posts h2{font-family:var(--font-display);font-size:1.15rem;margin:0 0 16px;}
.related-posts .post-list .post-card{padding:16px 0;}

/* ==========================================================================
   7. Sidebar / widgets — "Ranking Factors" styled
   ========================================================================== */
.widget-area{display:flex;flex-direction:column;gap:24px;}
.widget{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;
}
.widget-title{
  font-family:var(--font-display);font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);
  margin:0 0 14px;display:flex;align-items:center;gap:8px;
}
.widget-title::before{content:"";width:14px;height:2px;background:var(--mint);display:inline-block;}
.widget ul{list-style:none;margin:0;padding:0;}
.widget li{padding:9px 0;border-bottom:1px solid var(--border);font-size:.9rem;}
.widget li:last-child{border-bottom:none;}
.widget a{color:var(--ink-soft);}
.widget a:hover{color:var(--primary);}
.widget_ranking_factors ol{list-style:none;margin:0;padding:0;counter-reset:rank;}
.widget_ranking_factors li{
  counter-increment:rank;display:flex;gap:12px;align-items:baseline;
  border-bottom:1px solid var(--border);padding:10px 0;
}
.widget_ranking_factors li::before{
  content:"#" counter(rank);font-family:var(--font-mono);font-size:.75rem;
  color:var(--mint);font-weight:700;flex:none;
}
.search-form{display:flex;gap:8px;}
.search-form input[type=search]{flex:1;padding:9px 11px;border:1px solid var(--border);border-radius:var(--radius-sm);}
.search-form button{
  background:var(--ink);color:#fff;border:none;border-radius:var(--radius-sm);
  padding:9px 14px;cursor:pointer;font-family:var(--font-display);font-weight:600;
}
.search-form button:hover{background:var(--primary);}

/* ==========================================================================
   8. Ad slots — reserved space to avoid layout shift, clearly labeled
   ========================================================================== */
.ad-slot{
  margin:28px auto;max-width:var(--content-width);
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.ad-slot__label{
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);
}
.ad-slot__unit{width:100%;min-height:100px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.ad-slot--header{max-width:var(--max-width);margin:0 auto 12px;}
.ad-slot--sidebar .ad-slot__unit{min-height:250px;}
.ad-slot--infeed{
  max-width:100%;background:var(--bg);border:1px dashed var(--border);border-radius:var(--radius-sm);
  padding:14px;margin:14px 0;
}
.ad-slot--footer{max-width:var(--max-width);}

/* ==========================================================================
   9. Footer
   ========================================================================== */
.site-footer{border-top:1px solid var(--border);background:var(--surface);margin-top:48px;}
.footer-widgets{
  max-width:var(--max-width);margin:0 auto;padding:44px 20px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;
}
.footer-widgets .widget{background:none;border:none;padding:0;}
.site-info{
  border-top:1px solid var(--border);
  padding:20px;text-align:center;
  font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint);
}
.site-info a{color:var(--ink-faint);}
.footer-nav ul{list-style:none;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;padding:0;margin:0 0 10px;}
.footer-nav a{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-soft);}

/* ==========================================================================
   10. Misc: comments, 404, alignment
   ========================================================================== */
.alignwide{max-width:var(--max-width);width:100%;margin-left:auto;margin-right:auto;}
.alignfull{max-width:none;width:100vw;margin-left:calc(50% - 50vw);}
.comments-area{max-width:var(--content-width);margin:40px auto;}
.comment-list{list-style:none;margin:0;padding:0;}
.comment-body{padding:16px 0;border-bottom:1px solid var(--border);}
.comment-author{font-family:var(--font-display);font-weight:700;font-size:.92rem;}
.comment-meta{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-faint);}
.comment-form input,.comment-form textarea{
  width:100%;padding:10px;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:12px;
}
.comment-form input[type=submit]{
  width:auto;background:var(--ink);color:#fff;border:none;cursor:pointer;font-family:var(--font-display);font-weight:600;padding:10px 20px;
}
.error-404{max-width:var(--content-width);margin:80px auto;text-align:center;}
.error-404 .code{font-family:var(--font-mono);color:var(--mint);font-size:.85rem;letter-spacing:.1em;}
.error-404 h1{font-family:var(--font-display);font-size:2rem;}
.btn{
  display:inline-block;font-family:var(--font-display);font-weight:600;font-size:.9rem;
  background:var(--ink);color:#fff!important;padding:11px 20px;border-radius:var(--radius-sm);
}
.btn:hover{background:var(--primary);text-decoration:none;}