/*
Theme Name: NJ Premium Web - Elementor
Theme URI: https://example.com/
Author: Your Name
Author URI: https://example.com/
Description: A lightweight WordPress theme optimized for Elementor page builder. Build premium pages visually without coding. Apply the included CSS utility classes directly in Elementor's "CSS Classes" field to match the premium dark design.
Version: 1.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nj-premium-web-elementor
Requires Plugins: elementor
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
  color-scheme: dark;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #e9ecef;
  background: #05070d;

  --bg: #070b14;
  --surface: #101623;
  --surface-strong: #171f2d;
  --primary: #8ab4ff;
  --primary-strong: #65a9ff;
  --accent: #ffd97f;
  --muted: #8b95a1;
  --border: rgba(255, 255, 255, 0.08);
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.35);
}

/* ============================================================
   RESET & BASE
   ============================================================ */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top, rgba(138, 180, 255, 0.1), transparent 30%),
    radial-gradient(circle at 15% 25%, rgba(255, 217, 127, 0.08), transparent 15%),
    linear-gradient(180deg, #05070d 0%, #060914 55%, #090f1b 100%);
}

button,
a {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ============================================================
   HEADER & NAVIGATION
   ============================================================ */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 24px 30px;
  max-width: 1240px;
  margin: 0 auto;
}

.site-brand {
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #ffffff;
}

.site-brand img {
  max-height: 40px;
  width: auto;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  border-radius: 999px;
  padding: 12px 16px;
  cursor: pointer;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-left: auto;
}

.site-nav .primary-menu,
.site-nav ul {
  display: flex;
  flex-direction: row;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.primary-menu li,
.site-nav ul li {
  margin: 0;
  display: inline-flex;
}

.primary-menu a,
.site-nav a {
  color: #d4d8e3;
  transition: color 0.22s ease;
}

.primary-menu a:hover,
.primary-menu a:focus-visible,
.site-nav a:hover,
.site-nav a:focus-visible {
  color: #ffffff;
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  text-align: center;
  margin-top: 40px;
  padding: 32px 24px;
  color: #7e8fa8;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   BUTTONS  (apply as Elementor CSS class: button button-primary)
   ============================================================ */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  padding: 16px 28px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-1px);
}

.button-primary {
  background: linear-gradient(135deg, var(--primary), #669dff);
  color: #040714;
}

.button-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* ============================================================
   TYPOGRAPHY UTILITIES
   (apply as Elementor CSS class, e.g. eyebrow)
   ============================================================ */

.eyebrow {
  margin: 0 0 18px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.8rem;
}

/* ============================================================
   HERO SECTION
   (apply section CSS class: hero)
   ============================================================ */

.hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: center;
  min-height: calc(100vh - 120px);
  padding: 32px 24px 48px;
  max-width: 1240px;
  margin: 0 auto;
}

.hero-copy {
  max-width: 640px;
}

.hero h1 {
  margin: 0;
  font-size: clamp(2.75rem, 4vw, 4.75rem);
  line-height: 0.96;
  letter-spacing: -0.05em;
  color: #ffffff;
}

.hero p {
  margin: 20px 0 0;
  color: #c8d0df;
  max-width: 640px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}

.hero-panel {
  display: grid;
  gap: 20px;
}

/* ============================================================
   PANEL CARDS
   (apply CSS class: panel-card + panel-highlight or panel-feature)
   ============================================================ */

.panel-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  padding: 28px;
  box-shadow: var(--shadow);
}

.panel-highlight {
  background: linear-gradient(180deg, rgba(138, 180, 255, 0.14), rgba(255, 217, 127, 0.1));
}

.panel-card strong {
  display: block;
  font-size: 1.15rem;
  margin-bottom: 12px;
  color: #ffffff;
}

.panel-card p {
  margin: 0;
  color: #c8d0df;
}

/* ============================================================
   SECTIONS
   (apply section CSS class: section or section + section-dark)
   ============================================================ */

.section {
  padding: 72px 24px;
  max-width: 1240px;
  margin: 0 auto;
}

.section-dark {
  background: linear-gradient(180deg, rgba(11, 15, 24, 0.94), #05070d 100%);
  border-radius: 36px;
  padding: 60px 36px;
  max-width: none;
  margin: 0;
}

.section-dark > * {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}

.section-header {
  max-width: 720px;
}

.section-header h2 {
  margin: 0;
  font-size: clamp(2.75rem, 4vw, 4.75rem);
  line-height: 0.96;
  letter-spacing: -0.05em;
  color: #ffffff;
}

.section-header p {
  margin: 20px 0 0;
  color: #c8d0df;
  max-width: 640px;
}

/* ============================================================
   GRIDS
   ============================================================ */

.cards-grid,
.benefits-grid,
.expertise-grid,
.process-grid {
  display: grid;
  gap: 24px;
  margin-top: 42px;
}

.cards-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.benefits-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.expertise-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.process-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ============================================================
   CARDS
   (apply CSS class: service-card / benefit-item / process-step)
   ============================================================ */

.service-card,
.benefit-item,
.process-step,
.expertise-grid div {
  background: #0e1624;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 28px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.service-card h3,
.benefit-item h3,
.expertise-grid div h3,
.process-step h3 {
  margin: 0 0 14px;
  color: #ffffff;
}

.service-card p,
.benefit-item p,
.expertise-grid div p,
.process-step p {
  margin: 0;
  color: #c8d0df;
}

.process-step {
  text-align: left;
}

.process-step strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: rgba(138, 180, 255, 0.16);
  color: #b9d8ff;
  font-size: 1rem;
}

/* ============================================================
   CTA PANEL
   (apply CSS class: cta-panel)
   ============================================================ */

.section-cta {
  margin-top: 40px;
}

.cta-panel {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 36px;
  padding: 48px;
  text-align: center;
  box-shadow: var(--shadow);
}

.cta-panel h2 {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: #ffffff;
  margin-bottom: 18px;
}

.cta-panel p {
  margin: 0 0 28px;
  color: #c8d0df;
}

/* ============================================================
   ELEMENTOR OVERRIDES
   Ensure dark background bleeds through Elementor containers
   ============================================================ */

.elementor-section,
.elementor-container,
.e-con,
.e-con-inner {
  color: inherit;
}

/* Elementor default link colour fix */
.elementor-widget-text-editor a,
.elementor-widget-heading a {
  color: var(--primary);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .site-header {
    flex-wrap: wrap;
  }

  .site-nav {
    justify-content: flex-end;
  }
}

@media (max-width: 760px) {
  .site-header {
    padding: 12px 18px 20px;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    margin-top: 14px;
    gap: 12px;
  }

  .site-nav.open {
    display: flex;
  }

  .hero h1,
  .section-header h2,
  .cta-panel h2 {
    font-size: clamp(2.5rem, 9vw, 3.5rem);
  }

  .cards-grid,
  .benefits-grid,
  .expertise-grid,
  .process-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 24px 18px 32px;
  }

  .section {
    padding: 48px 18px;
  }

  .site-footer {
    padding: 20px 18px;
  }
}