/* ════════════════════════════════════════════════════════════
   SalesPoint — User Site Neumorphism (Soft UI) theme
   File: assets/css/neumorphism.css

   SCOPE: every rule is namespaced under body.neu-user so this
   file can NEVER leak into the Admin Site (which does not load
   this stylesheet and never carries the .neu-user body class).
   It layers visual restyling on top of theme.css — layout,
   grid columns and responsive breakpoints already defined in
   theme.css are reused as-is; this file only changes colour,
   depth, radius and typography treatment.
════════════════════════════════════════════════════════════ */

body.neu-user {
  --neu-bg:        #E8EDF5;
  --neu-bg-2:      #EEF2F8;
  --neu-surface:   #E8EDF5;
  --neu-light:     #FFFFFF;
  --neu-dark:      #B7C3D6;
  --neu-dark-soft: #C7D1E1;
  --neu-ink:       #33415C;
  --neu-ink-2:     #4B5A78;
  --neu-ink-muted: #7C8AA5;
  --neu-ink-faint: #A2ADC2;
  --neu-blue:      #2563EB;
  --neu-blue-2:    #1D4ED8;
  --neu-amber:     #F59E0B;
  --neu-radius:    22px;
  --neu-radius-sm: 14px;
  --neu-radius-xs: 10px;

  /* raised (extruded) neumorphic shadow */
  --neu-shadow:     8px 8px 18px var(--neu-dark), -8px -8px 18px var(--neu-light);
  --neu-shadow-sm:  5px 5px 12px var(--neu-dark), -5px -5px 12px var(--neu-light);
  --neu-shadow-lg:  12px 12px 28px var(--neu-dark), -12px -12px 28px var(--neu-light);
  /* pressed / inset neumorphic shadow */
  --neu-shadow-in:    inset 4px 4px 9px var(--neu-dark), inset -4px -4px 9px var(--neu-light);
  --neu-shadow-in-sm: inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light);

  background-color: var(--neu-bg);
  color: var(--neu-ink);
}

/* Kill the old dotted-grid / radial-gradient background — flat soft
   canvas is what makes neumorphic shadows read correctly. */
body.neu-user::before,
body.neu-user::after { content: none; display: none; }

body.neu-user, body.neu-user input, body.neu-user select, body.neu-user textarea, body.neu-user button {
  font-family: 'Sora', sans-serif;
}

/* ── generic focus ring, accessible on soft UI ── */
body.neu-user a:focus-visible,
body.neu-user button:focus-visible,
body.neu-user input:focus-visible,
body.neu-user select:focus-visible,
body.neu-user textarea:focus-visible {
  outline: 2px solid var(--neu-blue);
  outline-offset: 2px;
}

/* ════════════════════════════════════════════
   NAVBAR
════════════════════════════════════════════ */
body.neu-user .sp-nav {
  background: var(--neu-bg);
  backdrop-filter: none;
  border-bottom: none;
  box-shadow: 0 6px 20px rgba(183,195,214,0.55);
}
body.neu-user .sp-nav-links a {
  color: var(--neu-ink-muted);
  border-radius: var(--neu-radius-xs);
}
body.neu-user .sp-nav-links a:hover {
  color: var(--neu-blue-2);
  background: var(--neu-bg);
  box-shadow: var(--neu-shadow-in-sm);
}
body.neu-user .sp-nav-links a.active {
  color: var(--neu-blue-2);
  background: var(--neu-bg);
  box-shadow: var(--neu-shadow-in-sm);
  font-weight: 600;
}
body.neu-user .sp-nav-cta {
  background: linear-gradient(145deg, #2b6cf6, #1d4ed8);
  box-shadow: 6px 6px 14px var(--neu-dark), -6px -6px 14px var(--neu-light);
  border-radius: 100px;
}
body.neu-user .sp-nav-cta:hover {
  opacity: 1;
  box-shadow: 4px 4px 10px var(--neu-dark), -4px -4px 10px var(--neu-light);
  transform: translateY(1px);
}
body.neu-user .sp-hamburger {
  background: var(--neu-bg);
  border: none;
  box-shadow: var(--neu-shadow-sm);
  border-radius: var(--neu-radius-xs);
}
body.neu-user .sp-hamburger:hover { box-shadow: var(--neu-shadow-in-sm); }
body.neu-user .sp-hamburger-bar { background: var(--neu-blue-2); }

/* ════════════════════════════════════════════
   MOBILE DRAWER
════════════════════════════════════════════ */
body.neu-user .sp-mobile-menu {
  background: var(--neu-bg);
  box-shadow: -12px 0 32px rgba(183,195,214,0.7);
}
body.neu-user .sp-mobile-menu-header { border-bottom: 1px solid var(--neu-dark-soft); }
body.neu-user .sp-mobile-close {
  background: var(--neu-bg);
  border: none;
  box-shadow: var(--neu-shadow-sm);
  color: var(--neu-ink-muted);
}
body.neu-user .sp-mobile-close:hover {
  box-shadow: var(--neu-shadow-in-sm);
  color: #DC2626;
}
body.neu-user .sp-mobile-nav-link {
  color: var(--neu-ink-2);
  border-left: none;
  border-radius: var(--neu-radius-xs);
}
body.neu-user .sp-mobile-nav-link svg { color: var(--neu-ink-faint); }
body.neu-user .sp-mobile-nav-link:hover,
body.neu-user .sp-mobile-nav-link.active {
  background: var(--neu-bg);
  box-shadow: var(--neu-shadow-in-sm);
  color: var(--neu-blue-2);
  border-left: none;
}
body.neu-user .sp-mobile-nav-link:hover svg,
body.neu-user .sp-mobile-nav-link.active svg { color: var(--neu-blue-2); }
body.neu-user .sp-mobile-menu-footer { border-top: 1px solid var(--neu-dark-soft); }
body.neu-user .sp-mobile-menu-footer a:first-child {
  background: linear-gradient(145deg, #2b6cf6, #1d4ed8) !important;
  box-shadow: 5px 5px 12px var(--neu-dark), -5px -5px 12px var(--neu-light) !important;
  border: none !important;
}
body.neu-user .sp-mobile-menu-footer a:last-child {
  background: var(--neu-bg) !important;
  color: var(--neu-ink-2) !important;
  border: none !important;
  box-shadow: var(--neu-shadow-sm) !important;
}

/* ════════════════════════════════════════════
   SECTION HEADINGS / HERO TEXT
════════════════════════════════════════════ */
body.neu-user .sp-section-eyebrow {
  color: var(--neu-blue-2);
  background: var(--neu-bg);
  border: none;
  box-shadow: var(--neu-shadow-in-sm);
}
body.neu-user .sp-section-title { color: var(--neu-ink); }
body.neu-user .sp-section-title em { color: var(--neu-blue); font-style: italic; }
body.neu-user .sp-section-sub { color: var(--neu-ink-muted); }

/* ════════════════════════════════════════════
   CARDS
════════════════════════════════════════════ */
body.neu-user .sp-card {
  background: var(--neu-bg);
  border: none;
  border-radius: var(--neu-radius);
  box-shadow: var(--neu-shadow);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
body.neu-user .sp-card:hover { box-shadow: var(--neu-shadow-lg); }
body.neu-user .sp-card-title { color: var(--neu-ink); }

/* ── STAT CARDS ── */
body.neu-user .sp-stat {
  background: var(--neu-bg);
  border: none;
  border-radius: var(--neu-radius-sm);
  box-shadow: var(--neu-shadow);
}
body.neu-user .sp-stat:hover { box-shadow: var(--neu-shadow-lg); transform: translateY(-3px); }
body.neu-user .sp-stat-icon {
  background: var(--neu-bg);
  box-shadow: var(--neu-shadow-in-sm);
  border-radius: 12px;
  color: var(--neu-blue-2);
}
body.neu-user .sp-stat-value {
  color: var(--neu-blue-2);
  background: none;
  -webkit-text-fill-color: unset;
}
body.neu-user .sp-stat-label { color: var(--neu-ink-muted); }

/* ════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════ */
body.neu-user .sp-btn {
  border: none;
  border-radius: var(--neu-radius-sm);
  box-shadow: var(--neu-shadow-sm);
  transition: box-shadow 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}
body.neu-user .sp-btn:active { transform: translateY(1px); }
body.neu-user .sp-btn-primary {
  background: linear-gradient(145deg, #2b6cf6, #1d4ed8);
  color: #fff;
  box-shadow: 6px 6px 14px var(--neu-dark), -6px -6px 14px var(--neu-light);
}
body.neu-user .sp-btn-primary:hover {
  opacity: 1;
  box-shadow: 3px 3px 8px var(--neu-dark), -3px -3px 8px var(--neu-light);
}
body.neu-user .sp-btn-secondary {
  background: var(--neu-bg);
  color: var(--neu-ink-2);
  box-shadow: var(--neu-shadow-sm);
}
body.neu-user .sp-btn-secondary:hover {
  background: var(--neu-bg);
  color: var(--neu-blue-2);
  box-shadow: var(--neu-shadow-in-sm);
}
body.neu-user .sp-btn-danger {
  background: linear-gradient(145deg, #f56565, #dc2626);
  color: #fff;
  box-shadow: 6px 6px 14px var(--neu-dark), -6px -6px 14px var(--neu-light);
}
body.neu-user .sp-btn-danger:hover {
  box-shadow: 3px 3px 8px var(--neu-dark), -3px -3px 8px var(--neu-light);
}
/* legacy inline buttons used on a few pages */
body.neu-user .btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: 'Sora', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 11px 22px; border-radius: var(--neu-radius-sm);
  background: linear-gradient(145deg, #2b6cf6, #1d4ed8); color: #fff !important;
  text-decoration: none; border: none;
  box-shadow: 6px 6px 14px var(--neu-dark), -6px -6px 14px var(--neu-light);
  transition: box-shadow 0.18s ease;
}
body.neu-user .btn-primary:hover { box-shadow: 3px 3px 8px var(--neu-dark), -3px -3px 8px var(--neu-light); }
body.neu-user .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: 'Sora', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 11px 22px; border-radius: var(--neu-radius-sm);
  background: var(--neu-bg); color: var(--neu-ink-2) !important;
  text-decoration: none; border: none;
  box-shadow: var(--neu-shadow-sm);
  transition: box-shadow 0.18s ease;
}
body.neu-user .btn-secondary:hover { box-shadow: var(--neu-shadow-in-sm); color: var(--neu-blue-2) !important; }

/* ════════════════════════════════════════════
   FORMS
════════════════════════════════════════════ */
body.neu-user .sp-label { color: var(--neu-ink-muted); }
body.neu-user .sp-input,
body.neu-user .sp-select,
body.neu-user .sp-textarea,
body.neu-user .form-control {
  background: var(--neu-bg);
  border: none;
  border-radius: var(--neu-radius-sm);
  box-shadow: var(--neu-shadow-in);
  color: var(--neu-ink);
}
body.neu-user .sp-input::placeholder,
body.neu-user .sp-textarea::placeholder { color: var(--neu-ink-faint); }
body.neu-user .sp-input:focus,
body.neu-user .sp-select:focus,
body.neu-user .sp-textarea:focus,
body.neu-user .form-control:focus {
  box-shadow: var(--neu-shadow-in), 0 0 0 3px rgba(37,99,235,0.18);
}

/* ════════════════════════════════════════════
   ALERTS
════════════════════════════════════════════ */
body.neu-user .sp-alert {
  border: none;
  border-radius: var(--neu-radius-sm);
  box-shadow: var(--neu-shadow-in-sm);
}
body.neu-user .sp-alert-success { background: #E4F8EF; color: #0F7A54; }
body.neu-user .sp-alert-error   { background: #FBE8E8; color: #B42323; }
body.neu-user .sp-alert-info    { background: var(--neu-bg); color: var(--neu-blue-2); }

/* ════════════════════════════════════════════
   BADGES
════════════════════════════════════════════ */
body.neu-user .sp-badge {
  box-shadow: var(--neu-shadow-in-sm);
  border-radius: 100px;
}
body.neu-user .sp-badge-blue   { background: var(--neu-bg); color: var(--neu-blue-2); }
body.neu-user .sp-badge-green  { background: var(--neu-bg); color: #0F7A54; }
body.neu-user .sp-badge-amber  { background: var(--neu-bg); color: #B45309; }
body.neu-user .sp-badge-red    { background: var(--neu-bg); color: #DC2626; }
body.neu-user .sp-badge-gray   { background: var(--neu-bg); color: var(--neu-ink-muted); }

/* ════════════════════════════════════════════
   TABLES
════════════════════════════════════════════ */
body.neu-user .sp-table-wrap {
  background: var(--neu-bg);
  border-radius: var(--neu-radius);
  box-shadow: var(--neu-shadow);
  padding: 6px;
}
body.neu-user .sp-table { min-width: 560px; }
body.neu-user .sp-table th {
  color: var(--neu-ink-muted);
  background: transparent;
  border-bottom: none;
  box-shadow: var(--neu-shadow-in-sm);
  border-radius: var(--neu-radius-xs);
}
body.neu-user .sp-table td {
  color: var(--neu-ink-2);
  border-bottom: 1px solid var(--neu-dark-soft);
}
body.neu-user .sp-table tr:last-child td { border-bottom: none; }
body.neu-user .sp-table tr:hover td { background: rgba(255,255,255,0.55); }

/* ════════════════════════════════════════════
   PAGINATION
════════════════════════════════════════════ */
body.neu-user .sp-pagination a,
body.neu-user .sp-pagination span {
  border: none;
  border-radius: 50%;
  color: var(--neu-ink-muted);
  background: var(--neu-bg);
  box-shadow: var(--neu-shadow-sm);
}
body.neu-user .sp-pagination a:hover {
  color: var(--neu-blue-2);
  box-shadow: var(--neu-shadow-in-sm);
}
body.neu-user .sp-pagination .current {
  background: linear-gradient(145deg, #2b6cf6, #1d4ed8);
  color: #fff;
  box-shadow: 4px 4px 10px var(--neu-dark), -4px -4px 10px var(--neu-light);
}

/* ════════════════════════════════════════════
   MODAL
════════════════════════════════════════════ */
body.neu-user .sp-modal {
  background: var(--neu-bg);
  border-radius: var(--neu-radius);
  box-shadow: var(--neu-shadow-lg);
}
body.neu-user .sp-modal-title { color: var(--neu-ink); }
body.neu-user .sp-modal-close {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--neu-bg); box-shadow: var(--neu-shadow-sm);
  color: var(--neu-ink-muted);
}

/* ════════════════════════════════════════════
   GENERIC SOFT-UI HERO WRAPPER
   Used on pages that build a custom hero (career,
   portfolio detail, blog post, profile, apply) —
   replaces the old solid dark-blue gradient panel
   with a soft raised light panel + accent blob.
════════════════════════════════════════════ */
body.neu-user .neu-hero {
  position: relative;
  background: var(--neu-bg);
  border-radius: 0 0 40px 40px;
  box-shadow: 0 14px 34px rgba(183,195,214,0.6);
  overflow: hidden;
  padding: 64px 24px 56px;
}
body.neu-user .neu-hero::before {
  content: '';
  position: absolute; top: -80px; right: -80px;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,0.16), transparent 70%);
}
body.neu-user .neu-hero::after {
  content: '';
  position: absolute; bottom: -100px; left: -60px;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,158,11,0.14), transparent 70%);
}
body.neu-user .neu-hero-inner { position: relative; z-index: 1; }
body.neu-user .neu-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  padding: 7px 16px; border-radius: 100px; color: var(--neu-blue-2);
  background: var(--neu-bg); box-shadow: var(--neu-shadow-in-sm);
  margin-bottom: 18px;
}
body.neu-user .neu-hero h1 {
  font-family: 'Instrument Serif', serif; font-weight: 400;
  color: var(--neu-ink); line-height: 1.12;
}
body.neu-user .neu-hero p { color: var(--neu-ink-muted); }
body.neu-user .neu-pill {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--neu-bg); box-shadow: var(--neu-shadow-in-sm);
  color: var(--neu-blue-2); font-weight: 800;
}
body.neu-user .neu-panel {
  background: var(--neu-bg); border-radius: var(--neu-radius);
  box-shadow: var(--neu-shadow); padding: 28px;
}
body.neu-user .neu-panel-in {
  background: var(--neu-bg); border-radius: var(--neu-radius-sm);
  box-shadow: var(--neu-shadow-in); padding: 20px;
}

/* ════════════════════════════════════════════
   MISC — footer link/social hover accents that
   still live in the .sp-footer legacy block
════════════════════════════════════════════ */
body.neu-user .sp-footer-links a:hover { color: var(--neu-amber); }

/* ════════════════════════════════════════════
   RESPONSIVE — soften shadows on small phones,
   keep spacing rules from theme.css untouched
════════════════════════════════════════════ */
@media (max-width: 480px) {
  body.neu-user {
    --neu-shadow:    6px 6px 14px var(--neu-dark), -6px -6px 14px var(--neu-light);
    --neu-shadow-lg: 8px 8px 18px var(--neu-dark), -8px -8px 18px var(--neu-light);
  }
  body.neu-user .neu-hero { border-radius: 0 0 26px 26px; padding: 48px 18px 40px; }
}

@media (prefers-reduced-motion: reduce) {
  body.neu-user .sp-card,
  body.neu-user .sp-stat,
  body.neu-user .sp-btn { transition: none; }
}