/*
Theme Name: NSE Pulse
Theme URI: https://nsepulse.co.ke/
Author: NSE Pulse
Description: Mobile-first market intelligence theme for NSE Pulse. Requires the NSE Pulse Core plugin for the full experience.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
Text Domain: nsepulse
*/

:root {
  --np-bg: #f4f6f1;
  --np-surface: #ffffff;
  --np-ink: #101411;
  --np-muted: #69736d;
  --np-line: #dce2dc;
  --np-green: #18c56e;
  --np-green-dark: #0d7f48;
  --np-lime: #d9ff61;
  --np-yellow: #ffe36e;
  --np-red: #ef6159;
  --np-blue: #5b8cff;
  --np-purple: #8067ef;
  --np-radius: 28px;
  --np-shadow: 0 20px 60px rgba(16, 20, 17, .08);
  --np-max: 1180px;
  --np-top-h: 72px;
  --np-bottom-h: 72px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--np-bg);
  color: var(--np-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img { max-width: 100%; height: auto; }

.np-shell { min-height: 100vh; }
.np-container { width: min(calc(100% - 32px), var(--np-max)); margin-inline: auto; }
.np-screen { padding: 24px 0 112px; }

/* Header */
.np-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--np-top-h);
  display: flex;
  align-items: center;
  background: rgba(244,246,241,.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(220,226,220,.78);
}
.np-header-inner { display: flex; align-items: center; gap: 18px; justify-content: space-between; }
.np-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: -.04em; font-size: 1.2rem; }
.np-brand-mark { width: 34px; height: 34px; border-radius: 11px; background: var(--np-ink); color: white; display: grid; place-items: center; font-size: .78rem; letter-spacing: -.04em; }
.np-market-state { display: inline-flex; align-items: center; gap: 7px; color: var(--np-muted); font-size: .78rem; font-weight: 750; }
.np-market-state::before { content:""; width: 8px; height:8px; border-radius:50%; background: var(--np-green); box-shadow: 0 0 0 4px rgba(24,197,110,.13); }
.np-desktop-nav { display:none; gap: 6px; align-items:center; }
.np-desktop-nav a { padding: 10px 14px; border-radius: 14px; font-size: .9rem; font-weight: 750; color: var(--np-muted); }
.np-desktop-nav a:hover, .np-desktop-nav a[aria-current="page"] { background: var(--np-surface); color: var(--np-ink); }

/* Date chips */
.np-date-row { display:flex; align-items:center; gap:8px; padding: 16px 0 10px; overflow:auto; scrollbar-width:none; }
.np-date-row::-webkit-scrollbar { display:none; }
.np-chip { flex:0 0 auto; border:1px solid var(--np-line); background:rgba(255,255,255,.65); color:var(--np-muted); border-radius:999px; padding:9px 13px; font-size:.82rem; font-weight:800; }
.np-chip.is-active { background:var(--np-ink); border-color:var(--np-ink); color:white; }

/* Feed */
.np-feed-wrap { position:relative; }
.np-feed { display:grid; gap:14px; scroll-snap-type:y mandatory; }
.np-pulse-card {
  scroll-snap-align:start;
  position:relative;
  min-height: calc(100svh - var(--np-top-h) - var(--np-bottom-h) - 60px);
  border-radius: var(--np-radius);
  padding: 26px 24px;
  background: var(--np-surface);
  border: 1px solid rgba(16,20,17,.07);
  box-shadow: var(--np-shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.np-pulse-card::before { content:""; position:absolute; width:230px; height:230px; border-radius:50%; right:-96px; top:-96px; background:var(--np-accent-soft, #eef7ee); }
.np-pulse-card[data-type="explainer"] { --np-accent: var(--np-purple); --np-accent-soft:#f0edff; }
.np-pulse-card[data-type="discover"] { --np-accent:#dbac00; --np-accent-soft:#fff7cf; }
.np-pulse-card[data-type="company"] { --np-accent:var(--np-blue); --np-accent-soft:#edf2ff; }
.np-pulse-card[data-type="market"] { --np-accent:var(--np-green-dark); --np-accent-soft:#e9f8ef; }
.np-pulse-card[data-type="results"] { --np-accent:#cf5660; --np-accent-soft:#fff0f2; }
.np-pulse-card[data-type="money_flow"] { --np-accent:#1a8d9b; --np-accent-soft:#e8f8fa; }
.np-pulse-card[data-type="corporate_action"] { --np-accent:#bd6d19; --np-accent-soft:#fff0dd; }
.np-pulse-card[data-type="watch"] { --np-accent:#4f6dbb; --np-accent-soft:#edf1fb; }
.np-card-top, .np-card-main, .np-card-bottom { position:relative; z-index:1; }
.np-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.np-kicker { display:inline-flex; align-items:center; gap:7px; text-transform:uppercase; letter-spacing:.08em; font-weight:900; font-size:.72rem; color:var(--np-accent, var(--np-green-dark)); }
.np-kicker::before { content:""; width:8px; height:8px; border-radius:3px; background:currentColor; }
.np-card-count { font-size:.76rem; color:var(--np-muted); font-weight:750; }
.np-card-main { padding:42px 0 30px; }
.np-question { font-size:.85rem; font-weight:800; color:var(--np-muted); margin:0 0 12px; }
.np-pulse-title { margin:0; max-width: 18ch; font-size:clamp(2.1rem, 9vw, 4rem); line-height:.98; letter-spacing:-.065em; font-weight:900; }
.np-pulse-answer { margin:24px 0 0; max-width:64ch; color:#3f4943; font-size:1.02rem; line-height:1.65; }
.np-simple { margin-top:20px; border-left:3px solid var(--np-accent, var(--np-green)); padding: 2px 0 2px 15px; color:#202721; font-size:.95rem; line-height:1.55; }
.np-simple strong { display:block; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--np-muted); margin-bottom:4px; }
.np-card-bottom { display:grid; gap:16px; }
.np-card-meta { display:flex; flex-wrap:wrap; align-items:center; gap:7px 12px; color:var(--np-muted); font-size:.76rem; font-weight:720; }
.np-verified { color:var(--np-green-dark); display:inline-flex; align-items:center; gap:5px; }
.np-verified::before { content:"✓"; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; background:#e7f9ee; font-size:.68rem; }
.np-card-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.np-read-more { display:inline-flex; align-items:center; gap:8px; font-weight:900; font-size:.92rem; }
.np-read-more span { width:34px; height:34px; border-radius:50%; background:var(--np-ink); color:white; display:grid; place-items:center; transition: transform .2s ease; }
.np-read-more:hover span { transform:translateX(3px); }
.np-swipe-hint { color:var(--np-muted); font-size:.75rem; font-weight:750; display:flex; align-items:center; gap:6px; }
.np-swipe-hint::after { content:"↓"; font-size:1rem; }

/* Empty states */
.np-empty { background:var(--np-surface); border:1px solid var(--np-line); border-radius:var(--np-radius); padding:36px 26px; box-shadow:var(--np-shadow); }
.np-empty h2 { margin:0 0 10px; letter-spacing:-.04em; font-size:1.7rem; }
.np-empty p { color:var(--np-muted); line-height:1.6; margin:0; }

/* Bottom navigation */
.np-bottom-nav { position:fixed; z-index:60; left:0; right:0; bottom:0; min-height:var(--np-bottom-h); padding:8px 10px max(8px, env(safe-area-inset-bottom)); background:rgba(255,255,255,.94); backdrop-filter:blur(18px); border-top:1px solid var(--np-line); }
.np-bottom-nav-inner { display:grid; grid-template-columns:repeat(5,1fr); max-width:620px; margin:auto; }
.np-bottom-nav a { min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:#778079; font-size:.68rem; font-weight:800; padding:6px 2px; border-radius:13px; }
.np-bottom-nav a svg { width:21px; height:21px; stroke-width:1.9; }
.np-bottom-nav a.is-active { color:var(--np-ink); background:#f1f4ef; }

/* General section layouts */
.np-page-head { padding: 30px 0 22px; }
.np-eyebrow { color:var(--np-green-dark); text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; font-weight:900; }
.np-page-title { margin:8px 0 10px; font-size:clamp(2.4rem,9vw,5.5rem); line-height:.95; letter-spacing:-.065em; max-width:15ch; }
.np-page-intro { margin:0; color:var(--np-muted); font-size:1.04rem; max-width:62ch; line-height:1.65; }
.np-grid { display:grid; gap:14px; }
.np-grid-2 { grid-template-columns:1fr; }
.np-panel { background:var(--np-surface); border:1px solid var(--np-line); border-radius:22px; padding:20px; }
.np-panel h2, .np-panel h3 { margin-top:0; letter-spacing:-.035em; }
.np-stat-row { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.np-stat { padding:16px; border-radius:18px; background:#f5f7f4; }
.np-stat small { display:block; color:var(--np-muted); font-size:.72rem; font-weight:850; text-transform:uppercase; letter-spacing:.07em; }
.np-stat strong { display:block; font-size:1.4rem; letter-spacing:-.045em; margin-top:5px; }
.np-list { display:grid; gap:10px; }
.np-list-card { background:var(--np-surface); border:1px solid var(--np-line); border-radius:20px; padding:18px; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.np-list-card h3 { margin:0 0 4px; font-size:1.05rem; letter-spacing:-.025em; }
.np-list-card p { margin:0; color:var(--np-muted); font-size:.84rem; }
.np-list-card .np-arrow { width:34px; height:34px; border-radius:50%; background:#f0f3ef; display:grid; place-items:center; flex:0 0 auto; }

/* Article */
.np-article { padding: 32px 0 118px; }
.np-article-head { max-width:840px; margin:auto; }
.np-article-title { margin:12px 0 18px; font-size:clamp(2.5rem,10vw,5.8rem); line-height:.96; letter-spacing:-.068em; }
.np-article-deck { margin:0; color:#414a44; font-size:clamp(1.05rem,2vw,1.28rem); line-height:1.65; }
.np-article-meta { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:22px; color:var(--np-muted); font-size:.82rem; font-weight:750; }
.np-article-body { max-width:760px; margin:40px auto 0; font-size:1.06rem; line-height:1.8; }
.np-article-body h2 { margin:2.2em 0 .65em; font-size:1.7rem; line-height:1.15; letter-spacing:-.04em; }
.np-article-body h3 { margin:1.9em 0 .6em; font-size:1.3rem; }
.np-article-body p { margin:0 0 1.2em; }
.np-callout { max-width:760px; margin:22px auto; background:var(--np-lime); border-radius:20px; padding:20px; }
.np-callout small { display:block; text-transform:uppercase; letter-spacing:.08em; font-weight:900; margin-bottom:7px; }
.np-callout p { margin:0; line-height:1.55; }
.np-source-box { max-width:760px; margin:34px auto 0; border-top:1px solid var(--np-line); padding-top:20px; }
.np-source-box h3 { margin:0 0 12px; }
.np-source-link { display:block; padding:11px 0; color:var(--np-green-dark); font-weight:750; border-bottom:1px solid #edf0ec; }

/* Search */
.np-search-form { display:flex; gap:9px; margin-top:22px; }
.np-search-input { flex:1; min-width:0; border:1px solid var(--np-line); background:var(--np-surface); padding:15px 17px; border-radius:16px; outline:0; }
.np-search-input:focus { border-color:var(--np-ink); box-shadow:0 0 0 3px rgba(16,20,17,.08); }
.np-search-button { border:0; border-radius:16px; background:var(--np-ink); color:white; font-weight:850; padding:0 18px; cursor:pointer; }

/* Calendar */
.np-event { display:grid; grid-template-columns:72px 1fr; gap:14px; padding:15px 0; border-bottom:1px solid var(--np-line); }
.np-event-date { font-weight:900; letter-spacing:-.03em; }
.np-event-date span { display:block; font-size:.72rem; color:var(--np-muted); font-weight:750; text-transform:uppercase; letter-spacing:.06em; }
.np-event h3 { margin:0 0 5px; font-size:1rem; }
.np-event p { margin:0; color:var(--np-muted); font-size:.85rem; }

/* Desktop */
@media (min-width: 860px) {
  :root { --np-top-h: 82px; --np-bottom-h: 0px; }
  .np-container { width:min(calc(100% - 56px), var(--np-max)); }
  .np-desktop-nav { display:flex; }
  .np-market-state { margin-right:auto; }
  .np-bottom-nav { display:none; }
  .np-screen { padding-bottom:56px; }
  .np-date-row { padding-top:20px; }
  .np-feed { grid-template-columns:minmax(0,1fr); gap:22px; max-width:920px; margin:auto; }
  .np-pulse-card { min-height:620px; padding:42px 44px; }
  .np-pulse-title { font-size:clamp(3.7rem,6vw,6rem); max-width:14ch; }
  .np-pulse-answer { font-size:1.12rem; }
  .np-grid-2 { grid-template-columns:1fr 1fr; }
  .np-stat-row { grid-template-columns:repeat(4,1fr); }
}

@media (min-width: 1180px) {
  .np-feed { max-width:100%; }
  .np-pulse-card { min-height:680px; }
}

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