/*
Theme Name:   Stylish Name
Theme URI:    https://stylishname.pk
Author:       Stylish Name
Description:  Single-page professional theme with built-in stylish nickname generator (14 styles).
Version:      1.1.0
License:      GPL v2 or later
Text Domain:  stylish-name
*/

/* ===== Variables ===== */
:root{
  --primary:#7c3aed;
  --primary-dark:#5b21b6;
  --accent:#ec4899;
  --dark:#0f172a;
  --text:#1e293b;
  --muted:#64748b;
  --light:#f8fafc;
  --border:#e2e8f0;
  --white:#fff;
  --radius:14px;
  --shadow:0 10px 30px rgba(15,23,42,.08);
  --font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--font);font-size:16px;line-height:1.7;
  color:var(--text);background:var(--white);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--primary);text-decoration:none;transition:.2s;}
a:hover{color:var(--primary-dark);}
h1,h2,h3,h4{line-height:1.25;margin:0 0 .6em;color:var(--dark);font-weight:800;}
h1{font-size:clamp(1.5rem,3.5vw,2.1rem);}
h2{font-size:clamp(1.5rem,3.5vw,2.1rem);}
h3{font-size:1.15rem;}
p{margin:0 0 1em;}

.container{max-width:1140px;margin:0 auto;padding:0 20px;}
.section{padding:60px 0;}
.section-title{text-align:center;margin-bottom:10px;}
.section-subtitle{text-align:center;color:var(--muted);max-width:640px;margin:0 auto 40px;font-size:1rem;}

/* ===== Header ===== */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:20px;}
.site-title{font-size:1.3rem;margin:0;font-weight:900;letter-spacing:-.5px;}
.site-title a{
  background:linear-gradient(90deg,var(--primary),var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:24px;}
.nav a{color:var(--text);font-weight:500;font-size:.93rem;position:relative;}
.nav a:hover{color:var(--primary);}
.nav a::after{
  content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;
  background:var(--primary);transition:.25s;
}
.nav a:hover::after{width:100%;}
.menu-toggle{display:none;background:none;border:0;font-size:1.5rem;cursor:pointer;color:var(--dark);}

/* ===== Hero — COMPACT ===== */
.hero{
  background:linear-gradient(135deg,#7c3aed 0%,#a78bfa 55%,#ec4899 100%);
  color:#fff;padding:38px 0 44px;text-align:center;position:relative;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 25% 25%,rgba(255,255,255,.15),transparent 55%),
             radial-gradient(circle at 75% 75%,rgba(255,255,255,.1),transparent 55%);
}
.hero-inner{position:relative;z-index:1;}
.hero h1{color:#fff;margin-bottom:8px;font-size:clamp(1.4rem,3vw,1.9rem);}
.hero p{font-size:.95rem;max-width:620px;margin:0 auto;opacity:.95;}

/* ===== Generator (top priority) ===== */
.generator-section{padding:40px 0 60px;background:var(--white);}
.generator-card{
  background:#fff;border:1px solid var(--border);border-radius:18px;padding:32px;
  max-width:880px;margin:0 auto;box-shadow:var(--shadow);
}
.gen-label{display:block;font-weight:600;margin-bottom:10px;color:var(--dark);font-size:.95rem;}
#snm-input{
  width:100%;padding:16px 20px;font-size:1.05rem;border:2px solid var(--border);
  border-radius:12px;font-family:inherit;transition:border-color .2s;
}
#snm-input:focus{outline:none;border-color:var(--primary);}

/* Pills — scrollable on mobile, wrap on desktop */
.pills{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;
}
.pill{
  padding:9px 16px;border-radius:50px;background:var(--light);color:var(--text);
  border:1px solid var(--border);font-size:.86rem;font-weight:500;cursor:pointer;
  transition:.2s;white-space:nowrap;
}
.pill:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-1px);}
.pill.active{background:var(--primary);color:#fff;border-color:var(--primary);}

.actions{margin-top:22px;text-align:center;}
.btn{
  display:inline-block;padding:13px 32px;border-radius:50px;font-weight:600;
  font-size:.98rem;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s;
}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);color:#fff;transform:translateY(-2px);box-shadow:0 10px 25px rgba(124,58,237,.35);}
.btn-clear{background:var(--light);color:var(--text);margin-left:10px;}
.btn-clear:hover{background:var(--border);color:var(--text);}

.results{
  margin-top:28px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;
}
.result-card{
  background:#fff;border:1px solid var(--border);border-radius:12px;
  padding:14px 16px;display:flex;justify-content:space-between;align-items:center;
  gap:10px;transition:.2s;
}
.result-card:hover{border-color:var(--primary);box-shadow:0 6px 18px rgba(124,58,237,.15);}
.nick{font-size:1.05rem;font-weight:500;color:var(--dark);word-break:break-word;flex:1;line-height:1.4;}
.copy-btn{
  background:var(--light);color:var(--primary);border:0;padding:7px 12px;
  border-radius:8px;font-size:.78rem;font-weight:600;cursor:pointer;
  white-space:nowrap;transition:.2s;
}
.copy-btn:hover{background:var(--primary);color:#fff;}
.copy-btn.copied{background:#10b981;color:#fff;}
.empty{text-align:center;color:var(--muted);padding:30px;grid-column:1/-1;}

/* ===== Features ===== */
.section#features{background:var(--light);}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;}
.feature{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:28px 22px;text-align:center;transition:.25s;
}
.feature:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.feature .icon{font-size:2.2rem;margin-bottom:12px;}
.feature h3{font-size:1.05rem;margin-bottom:6px;}
.feature p{color:var(--muted);font-size:.92rem;margin:0;}

/* ===== Blog ===== */
.posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px;}
.post-card{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 4px 14px rgba(15,23,42,.06);transition:.25s;
  display:flex;flex-direction:column;
}
.post-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.post-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#e0e7ff,#fce7f3);overflow:hidden;}
.post-thumb img{width:100%;height:100%;object-fit:cover;}
.post-body{padding:22px;flex:1;display:flex;flex-direction:column;}
.post-meta{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;}
.post-body h3{font-size:1.1rem;margin-bottom:10px;}
.post-body h3 a{color:var(--dark);}
.post-body h3 a:hover{color:var(--primary);}
.post-excerpt{color:var(--muted);font-size:.93rem;flex:1;}
.read-more{font-weight:600;font-size:.88rem;margin-top:12px;}

/* ===== FAQ ===== */
.faq-list{max-width:760px;margin:0 auto;}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:12px;margin-bottom:12px;overflow:hidden;}
.faq-q{
  padding:18px 22px;font-weight:600;cursor:pointer;color:var(--dark);
  display:flex;justify-content:space-between;align-items:center;user-select:none;
}
.faq-q::after{content:"+";font-size:1.3rem;color:var(--primary);transition:.25s;}
.faq-item.open .faq-q::after{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 22px;color:var(--muted);}
.faq-item.open .faq-a{max-height:400px;padding:0 22px 18px;}

/* ===== Footer ===== */
.site-footer{background:var(--dark);color:#94a3b8;padding:50px 0 0;}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:34px;padding-bottom:34px;}
.footer-grid h4{color:#fff;font-size:.9rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px;}
.footer-grid ul{list-style:none;padding:0;margin:0;}
.footer-grid li{margin-bottom:8px;}
.footer-grid a{color:#94a3b8;font-size:.93rem;}
.footer-grid a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:20px 0;text-align:center;font-size:.88rem;}

/* ===== Responsive ===== */
@media(max-width:860px){
  .menu-toggle{display:block;}
  .nav{position:absolute;top:100%;left:0;right:0;background:#fff;box-shadow:var(--shadow);
    max-height:0;overflow:hidden;transition:max-height .3s;}
  .nav.open{max-height:400px;}
  .nav ul{flex-direction:column;gap:0;padding:8px 20px 20px;}
  .nav li{border-bottom:1px solid var(--border);}
  .nav a{display:block;padding:14px 0;}
  .hero{padding:30px 0 34px;}
  .generator-card{padding:22px;}
  .pills{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch;}
  .pills::-webkit-scrollbar{height:4px;}
  .pills::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
  .section{padding:44px 0;}
  .btn{width:100%;margin-bottom:8px;}
  .btn-clear{margin-left:0;}
}