/*
Theme Name: NameStyle
Description: A bespoke, mobile-first theme for NameStyleFonts - sticky generator bar, theme-wide dark mode, gradient brand system.
Version: 1.0.0
Author: NameStyleFonts
License: GNU General Public License v2 or later
Text Domain: namestyle
*/

:root {
  --ns-primary: #5b5bd6;
  --ns-primary-deep: #4343b8;
  --ns-violet: #8b5cf6;
  --ns-accent: #ffb020;
  --ns-bg: #fafaff;
  --ns-surface: #ffffff;
  --ns-ink: #17171f;
  --ns-muted: #6b6b7d;
  --ns-line: #e8e8f2;
  --ns-grad: linear-gradient(135deg, #5b5bd6 0%, #8b5cf6 100%);
  --ns-radius: 14px;
  --ns-shadow: 0 8px 30px rgba(91, 91, 214, 0.12);
}
body.ns-dark {
  --ns-bg: #121218;
  --ns-surface: #1b1b24;
  --ns-ink: #f0f0f5;
  --ns-muted: #a5a5b8;
  --ns-line: #2c2c38;
  --ns-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ns-bg);
  color: var(--ns-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background 0.25s, color 0.25s;
}
.ns-wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; }
a { color: var(--ns-primary); }
img { max-width: 100%; height: auto; }

/* ---------- Header ---------- */
.ns-header {
  position: sticky; top: 0; z-index: 200;
  background: color-mix(in srgb, var(--ns-bg) 82%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ns-line);
}
.ns-header-inner { display: flex; align-items: center; gap: 18px; height: 64px; }
.ns-logo { font-size: 22px; font-weight: 800; text-decoration: none; color: var(--ns-ink); letter-spacing: -0.02em; white-space: nowrap; }
.ns-logo span { background: var(--ns-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ns-nav { margin-left: auto; }
.ns-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.ns-nav a { display: block; padding: 8px 14px; border-radius: 8px; text-decoration: none; color: var(--ns-muted); font-weight: 600; font-size: 15px; }
.ns-nav a:hover { color: var(--ns-primary); background: color-mix(in srgb, var(--ns-primary) 8%, transparent); }
.ns-dark-toggle {
  margin-left: 8px; border: 1px solid var(--ns-line); background: var(--ns-surface);
  color: var(--ns-ink); border-radius: 20px; padding: 7px 14px; font-size: 14px; cursor: pointer;
}
.ns-dark-toggle:hover { border-color: var(--ns-primary); }
.ns-burger { display: none; margin-left: auto; background: none; border: 1px solid var(--ns-line); border-radius: 8px; padding: 8px 10px; font-size: 18px; cursor: pointer; color: var(--ns-ink); }

/* ---------- Hero ---------- */
.ns-hero { background: var(--ns-grad); color: #fff; padding: 64px 0 72px; position: relative; overflow: hidden; }
.ns-hero::after {
  content: ""; position: absolute; right: -80px; top: -80px; width: 340px; height: 340px;
  background: rgba(255, 255, 255, 0.10); border-radius: 50%;
}
.ns-hero::before {
  content: ""; position: absolute; left: -60px; bottom: -100px; width: 260px; height: 260px;
  background: rgba(255, 255, 255, 0.07); border-radius: 50%;
}
.ns-hero h1 { font-size: clamp(30px, 5vw, 48px); line-height: 1.15; margin: 0 0 12px; letter-spacing: -0.03em; position: relative; z-index: 1; }
.ns-hero h1 .ns-hi { background: rgba(255,255,255,0.22); padding: 0 10px; border-radius: 8px; }
.ns-hero p.ns-sub { font-size: 18px; opacity: 0.92; max-width: 640px; margin: 0 0 22px; position: relative; z-index: 1; }
.ns-stats { display: flex; gap: 26px; flex-wrap: wrap; position: relative; z-index: 1; }
.ns-stat b { display: block; font-size: 24px; }
.ns-stat span { font-size: 13px; opacity: 0.85; }

/* ---------- Main content ---------- */
.ns-main { padding: 34px 0 60px; }
.ns-main h2 { font-size: 26px; letter-spacing: -0.02em; margin: 38px 0 12px; }
.ns-main h2:first-child { margin-top: 0; }
.ns-main h3 { font-size: 19px; margin: 22px 0 8px; }
.ns-main p, .ns-main ul { color: var(--ns-ink); }
.ns-main ul { padding-left: 22px; }
.ns-main li { margin-bottom: 6px; }
.ns-lead { font-size: 18px; color: var(--ns-muted); }

/* Generator: sticky control bar + theme integration */
.nsf-generator { max-width: 860px; margin: -58px auto 0; position: relative; z-index: 5; }
.ns-hero + .ns-main .nsf-generator { margin-top: -58px; }
.nsf-bar {
  position: sticky; top: 76px; z-index: 100;
  box-shadow: var(--ns-shadow);
  background: var(--ns-surface) !important;
  border-color: var(--ns-line) !important;
}
.nsf-dark { display: none !important; }
.nsf-input { background: var(--ns-surface) !important; border-color: var(--ns-line) !important; color: var(--ns-ink) !important; }
.nsf-input:focus { border-color: var(--ns-primary) !important; }
.nsf-style { background: var(--ns-surface) !important; border-color: var(--ns-line) !important; }
.nsf-output { color: var(--ns-ink) !important; }
.nsf-pick select, .nsf-search { background: var(--ns-surface) !important; border-color: var(--ns-line) !important; color: var(--ns-ink) !important; }
.nsf-cat { background: var(--ns-surface) !important; border-color: var(--ns-line) !important; color: var(--ns-muted) !important; }
.nsf-cat.nsf-active { background: var(--ns-primary) !important; border-color: var(--ns-primary) !important; color: #fff !important; }
.nsf-surprise { background: var(--ns-surface) !important; border-color: var(--ns-line) !important; color: var(--ns-ink) !important; }
.nsf-faq-item { background: var(--ns-surface) !important; border-color: var(--ns-line) !important; }
.nsf-faq-item p { color: var(--ns-muted) !important; }

/* ---------- Footer ---------- */
.ns-footer { background: #14141c; color: #c9c9d6; padding: 46px 0 0; margin-top: 20px; }
.ns-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; padding-bottom: 34px; }
.ns-footer h4 { color: #fff; font-size: 15px; margin: 0 0 12px; }
.ns-footer ul { list-style: none; margin: 0; padding: 0; }
.ns-footer li { margin-bottom: 8px; }
.ns-footer a { color: #c9c9d6; text-decoration: none; font-size: 14px; }
.ns-footer a:hover { color: #fff; }
.ns-footer .ns-logo { color: #fff; }
.ns-footer p.ns-about { font-size: 14px; max-width: 320px; }
.ns-bottom { border-top: 1px solid #2a2a36; padding: 16px 0; font-size: 12.5px; color: #8a8a99; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }

/* ---------- Misc ---------- */
.ns-404 { text-align: center; padding: 80px 20px; }
.ns-404 h1 { font-size: 72px; margin: 0; background: var(--ns-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (max-width: 720px) {
  .ns-nav {
    display: none; position: absolute; top: 64px; left: 0; right: 0;
    background: var(--ns-surface); border-bottom: 1px solid var(--ns-line); padding: 10px 20px 16px;
  }
  .ns-nav.ns-open { display: block; }
  .ns-nav ul { flex-direction: column; }
  .ns-burger { display: block; }
  .ns-dark-toggle { margin-left: 0; }
  .ns-header-inner { gap: 10px; }
  .ns-hero { padding: 44px 0 60px; }
  .nsf-generator { margin-top: -48px; }
  .nsf-bar { top: 70px; }
  .ns-footer-grid { grid-template-columns: 1fr; }
}