/*
Theme Name: WhyNzo Guides
Theme URI: https://whynzo.com/
Author: OpenAI for Diaa
Author URI: https://whynzo.com/
Description: Lightweight knowledge-base style WordPress theme for WhyNzo Guides (AI, WordPress, SEO, Website Setup, Troubleshooting).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: whynzo-guides
Tags: blog, news, one-column, two-columns, custom-logo, custom-menu, featured-images, translation-ready
*/

:root{
  --wnz-blue:#2563EB;
  --wnz-emerald:#10B981;
  --wnz-bg:#F8FAFC;
  --wnz-card:#FFFFFF;
  --wnz-border:#E2E8F0;
  --wnz-heading:#0F172A;
  --wnz-text:#334155;
  --wnz-muted:#64748B;
  --wnz-dark:#0F172A;
  --shadow:0 10px 30px rgba(15,23,42,.06);
  --radius:16px;
  --container:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--wnz-bg);
  color:var(--wnz-text);
  font:400 17px/1.75 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
}
a{color:var(--wnz-blue);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5,h6{
  color:var(--wnz-heading);
  line-height:1.25;
  margin:0 0 .65rem;
  font-family:"Poppins","Segoe UI",Arial,sans-serif;
}
h1{font-size:2.2rem}
h2{font-size:1.6rem;margin-top:1.8rem}
h3{font-size:1.2rem;margin-top:1.35rem}
p,ul,ol{margin:0 0 1rem}
ul,ol{padding-left:1.25rem}
.container{
  width:min(var(--container), calc(100% - 2rem));
  margin-inline:auto;
}
.site-header{
  position:sticky;top:0;z-index:30;
  background:rgba(248,250,252,.95);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--wnz-border);
}
.site-header .inner{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:72px;
}
.branding a{display:flex;align-items:center;gap:.75rem;color:var(--wnz-heading);font-weight:700;text-decoration:none}
.branding img{width:34px;height:34px}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text small{color:var(--wnz-muted);font-weight:500;font-size:.7rem}
.main-nav{display:flex;align-items:center;gap:1rem}
.main-nav ul{display:flex;list-style:none;margin:0;padding:0;gap:.25rem;align-items:center}
.main-nav a{display:block;padding:.55rem .8rem;border-radius:10px;color:var(--wnz-heading);font-weight:600;font-size:.95rem;text-decoration:none}
.main-nav a:hover,.main-nav .current-menu-item>a{background:#EFF6FF;color:var(--wnz-blue)}
.header-actions{display:flex;align-items:center;gap:.5rem}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:12px;padding:.8rem 1rem;font-weight:700;text-decoration:none;cursor:pointer;
  border:1px solid transparent;transition:.15s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--wnz-emerald);color:white}
.btn-primary:hover{filter:brightness(.97)}
.btn-outline{border-color:var(--wnz-border);background:white;color:var(--wnz-heading)}
.btn-outline:hover{background:#F1F5F9}
.menu-toggle{display:none;background:white;border:1px solid var(--wnz-border);border-radius:10px;padding:.55rem .7rem}

.hero{
  padding:3.2rem 0 2rem;
}
.hero-card{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  border:1px solid var(--wnz-border);
  border-radius:24px;
  padding:2rem;
  box-shadow:var(--shadow);
  display:grid;grid-template-columns:1.2fr .8fr;gap:1.5rem;align-items:center;
}
.hero p{font-size:1.04rem;color:var(--wnz-text)}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.75rem}
.hero-visual{
  border-radius:20px;border:1px solid var(--wnz-border);background:white;overflow:hidden;
  box-shadow:0 20px 35px rgba(37,99,235,.06);
}
.hero-visual .screen{
  padding:.9rem;background:linear-gradient(180deg,#f8fafc,#fff);
}
.hero-visual .bar{height:10px;background:#e2e8f0;border-radius:99px;margin-bottom:.6rem}
.hero-visual .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.hero-visual .tile{height:72px;border-radius:12px;background:linear-gradient(135deg,#dbeafe,#ecfeff);border:1px solid #dbeafe}
.hero-visual .tile:nth-child(2){background:linear-gradient(135deg,#dcfce7,#ecfccb)}
.hero-visual .tile:nth-child(3){background:linear-gradient(135deg,#ede9fe,#e0f2fe)}
.hero-visual .tile:nth-child(4){background:linear-gradient(135deg,#fff7ed,#fee2e2)}

.section{padding:1.2rem 0}
.section-title-row{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
.section-title-row p{margin:0;color:var(--wnz-muted)}
.grid{display:grid;gap:1rem}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--wnz-card);border:1px solid var(--wnz-border);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card.pad{padding:1rem}
.path-card h3{font-size:1rem;margin-bottom:.35rem}
.path-card p{font-size:.94rem;color:var(--wnz-muted);min-height:3.2em}
.path-card a{font-weight:700}
.kbd-tag{
  display:inline-flex;align-items:center;font-size:.74rem;font-weight:700;padding:.28rem .5rem;
  border-radius:999px;background:#EFF6FF;color:#1d4ed8;margin-bottom:.45rem
}
.cat-card{
  position:relative;overflow:hidden;padding:1rem;border-radius:18px;border:1px solid var(--wnz-border);background:white;box-shadow:var(--shadow)
}
.cat-card::after{
  content:"";position:absolute;inset:auto -20% -35% auto;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle at center,rgba(37,99,235,.12),transparent 70%);
}
.cat-card h3{font-size:1.05rem}
.cat-card p{font-size:.93rem;color:var(--wnz-muted);margin-bottom:.8rem}
.cat-card .meta{font-size:.82rem;color:var(--wnz-muted)}
.post-card{
  overflow:hidden;
}
.post-card .thumb{
  aspect-ratio:16/9;background:linear-gradient(135deg,#dbeafe,#f0fdf4);
  border-bottom:1px solid var(--wnz-border);
  display:flex;align-items:center;justify-content:center;color:#1e293b;font-weight:700;
  padding:1rem;text-align:center
}
.post-card .body{padding:1rem}
.post-card .meta{display:flex;gap:.5rem;flex-wrap:wrap;color:var(--wnz-muted);font-size:.82rem;margin-bottom:.4rem}
.post-card h3{font-size:1.02rem}
.post-card p{font-size:.94rem;color:var(--wnz-text)}
.badge{
  display:inline-flex;align-items:center;border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:.15rem .45rem;font-weight:700;font-size:.72rem
}
.layout{
  display:grid;grid-template-columns:minmax(0, 1fr) 320px;gap:1rem;
}
.content-card{
  background:white;border:1px solid var(--wnz-border);border-radius:18px;padding:1.1rem 1.25rem;box-shadow:var(--shadow)
}
.sidebar .widget{
  background:white;border:1px solid var(--wnz-border);border-radius:18px;padding:1rem;box-shadow:var(--shadow);margin-bottom:1rem
}
.sidebar .widget h2, .sidebar .widget h3{font-size:1rem;margin-bottom:.6rem}
.entry-meta{
  display:flex;gap:.6rem;flex-wrap:wrap;color:var(--wnz-muted);font-size:.86rem;margin:.2rem 0 .9rem
}
.entry-content h2,.entry-content h3{scroll-margin-top:90px}
.entry-content code{
  background:#f1f5f9;border:1px solid var(--wnz-border);padding:.1rem .35rem;border-radius:6px;font-size:.92em
}
.entry-content pre{
  background:#0f172a;color:#e2e8f0;border-radius:14px;padding:1rem;overflow:auto
}
.callout{
  border:1px solid #bae6fd;background:#f0f9ff;color:#0c4a6e;border-radius:14px;padding:.85rem 1rem;margin:1rem 0
}
.callout.tip{border-color:#bbf7d0;background:#f0fdf4;color:#14532d}
.callout.warn{border-color:#fde68a;background:#fffbeb;color:#78350f}
.toc{
  border:1px solid var(--wnz-border);background:#fcfdff;border-radius:14px;padding:.85rem 1rem;margin:1rem 0
}
.toc h3{font-size:1rem;margin:.1rem 0 .4rem}
.toc ul{margin:0}
.tax-bar{margin:.4rem 0 .8rem}
.tax-bar a{
  display:inline-flex;margin:0 .35rem .35rem 0;padding:.28rem .5rem;border-radius:999px;border:1px solid var(--wnz-border);background:white;color:var(--wnz-muted);font-size:.78rem;font-weight:700
}
.site-footer{
  margin-top:2rem;background:var(--wnz-dark);color:#cbd5e1;padding:2rem 0 1rem
}
.site-footer a{color:#e2e8f0}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:1rem}
.footer-card h4{color:white;font-size:1rem;margin-bottom:.55rem}
.footer-card p,.footer-card li{font-size:.92rem;color:#cbd5e1}
.footer-card ul{list-style:none;padding:0;margin:0}
.footer-card li{margin:.35rem 0}
.footer-bottom{border-top:1px solid rgba(226,232,240,.15);margin-top:1rem;padding-top:.8rem;font-size:.85rem;color:#94a3b8}
.breadcrumbs{font-size:.85rem;color:var(--wnz-muted);margin-bottom:.7rem}
.breadcrumbs a{color:var(--wnz-muted)}

.search-form{display:flex;gap:.5rem}
.search-field{
  width:100%;padding:.75rem .9rem;border:1px solid var(--wnz-border);border-radius:12px;background:white;
}
.search-submit{padding:.75rem 1rem;border:1px solid var(--wnz-border);border-radius:12px;background:white;cursor:pointer;font-weight:700}
.pagination{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.pagination a,.pagination span{
  padding:.55rem .8rem;border:1px solid var(--wnz-border);border-radius:10px;background:white;text-decoration:none
}
.pagination .current{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8;font-weight:700}
.no-posts{padding:1rem;border:1px dashed var(--wnz-border);border-radius:12px;background:white}

@media (max-width: 1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .hero-card{grid-template-columns:1fr}
  .layout{grid-template-columns:1fr}
  .sidebar{order:2}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 820px){
  .menu-toggle{display:inline-flex}
  .main-nav{
    position:absolute;left:1rem;right:1rem;top:78px;background:white;border:1px solid var(--wnz-border);
    border-radius:14px;box-shadow:var(--shadow);padding:.75rem;display:none;flex-direction:column;align-items:stretch
  }
  .main-nav.open{display:flex}
  .main-nav ul{flex-direction:column;align-items:stretch}
  .main-nav a{padding:.75rem}
  .header-actions .btn{display:none}
}
@media (max-width: 640px){
  h1{font-size:1.8rem}
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
  .hero{padding-top:1rem}
  .hero-card{padding:1.15rem}
  .content-card{padding:1rem}
  body{font-size:16px}
}