/* ═══════════════════════════════════════════════════════════════
   Salman Portfolio — Design System v1.0.4
   Loads via wp_enqueue_scripts priority 999 (after Elementor).

   RULE: This file ONLY adds what Elementor settings cannot do.
   It does NOT override widget backgrounds, borders, or padding —
   those are set per-widget in Elementor's Advanced tab settings.
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables ── */
:root {
  --sp-purple:   #7c3aed;
  --sp-purple-l: #a78bfa;
  --sp-amber:    #f59e0b;
  --sp-green:    #34d399;
  --sp-blue:     #60a5fa;
  --sp-bg:       #050510;
  --sp-card:     rgba(12,12,30,0.88);
  --sp-text:     #ffffff;
  --sp-text2:    #94a3b8;
  --sp-textm:    #4a5568;
  --sp-border:   rgba(255,255,255,0.07);
}

/* ── Body & page background ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: #050510 !important;
  color: #ffffff !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  overflow-x: hidden !important;
  -webkit-font-smoothing: antialiased;
}

/* ── Dot grid + purple glow atmosphere ── */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 10%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 10%, transparent 100%);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 700px 700px at 0% 0%,    rgba(88,28,220,0.32)  0%, transparent 65%),
    radial-gradient(ellipse 600px 600px at 100% 100%, rgba(76,29,149,0.22)  0%, transparent 65%),
    radial-gradient(ellipse 400px 400px at 100% 0%,   rgba(37,20,150,0.18)  0%, transparent 65%);
}

/* Keep Elementor content above pseudo-element backgrounds */
.elementor,
.e-con,
.elementor-section-wrap,
.elementor-location-header,
.elementor-location-footer { position: relative; z-index: 1; }

/* ── Headings — font only, no color override ──
   Color is set per-widget in Elementor. We only enforce the font. */
h1, h2, h3, h4,
.elementor-heading-title {
  font-family: "Syne", sans-serif !important;
  font-weight: 800 !important;
}
.elementor-widget-text-editor *,
.elementor-widget-text-editor p {
  font-family: "DM Sans", sans-serif;
  line-height: 1.85;
}

/* ── Buttons ── */
.elementor-button {
  font-family: "DM Sans", sans-serif !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  cursor: pointer;
}
.elementor-button:hover { transform: translateY(-2px) !important; }

/* ── Icon Box — typography only, background comes from Elementor widget settings ── */
.elementor-icon-box-title {
  font-family: "Syne", sans-serif !important;
  font-weight: 700 !important;
}
.elementor-icon-box-description {
  font-family: "DM Sans", sans-serif !important;
  line-height: 1.7 !important;
}

/* ── Icon List ── */
.elementor-widget-icon-list .elementor-icon-list-text {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  transition: color 0.2s;
}
/* Inline pill tags (tech stack etc.) */
.elementor-icon-list--layout-inline .elementor-icon-list-item {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 3px 11px;
}

/* ── Counter widget ── */
.elementor-widget-counter { text-align: center !important; }
.elementor-counter-number-wrapper {
  font-family: "Syne", sans-serif !important;
  font-weight: 800 !important;
  font-size: 2.5rem !important;
  line-height: 1.1 !important;
  display: block !important;
}
.elementor-counter-number-prefix,
.elementor-counter-number,
.elementor-counter-number-suffix {
  font-family: "Syne", sans-serif !important;
  font-weight: 800 !important;
}
.elementor-counter-title {
  font-family: "DM Sans", sans-serif !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
  display: block !important;
}

/* ── Testimonial — typography only ── */
.elementor-testimonial-content {
  font-style: italic !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
}
.elementor-testimonial-name {
  font-family: "Syne", sans-serif !important;
  font-weight: 700 !important;
}

/* ── Image ── */
.elementor-widget-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── Social Icons ── */
.elementor-social-icon {
  transition: background 0.2s, transform 0.2s !important;
}
.elementor-social-icon:hover { transform: translateY(-2px) !important; }

/* ── Divider ── */
.elementor-widget-divider .elementor-divider-separator {
  border-color: rgba(255,255,255,0.07) !important;
}

/* ── Posts widget (blog) ── */
.elementor-posts-container .elementor-post {
  background: rgba(12,12,30,0.88);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.25s, transform 0.25s;
}
.elementor-posts-container .elementor-post:hover {
  border-color: rgba(124,58,237,0.38);
  transform: translateY(-4px);
}
.elementor-post__title a {
  font-family: "Syne", sans-serif !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.elementor-post__read-more { font-size: 13px !important; font-weight: 600 !important; }

/* ── Contact form fields ── */
.elementor-form .elementor-field-group label {
  font-size: 13px !important;
  font-family: "DM Sans", sans-serif !important;
  margin-bottom: 6px !important;
  display: block;
}
.elementor-form input[type="text"],
.elementor-form input[type="email"],
.elementor-form input[type="tel"],
.elementor-form select,
.elementor-form textarea {
  background: rgba(7,7,26,0.88) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 14px !important;
  padding: 13px 16px !important;
  width: 100% !important;
  outline: none !important;
  transition: border-color 0.2s !important;
}
.elementor-form input:focus,
.elementor-form select:focus,
.elementor-form textarea:focus {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.15) !important;
}
.elementor-form input::placeholder,
.elementor-form textarea::placeholder { color: #4a5568 !important; }

/* ── Nav Menu ── */
.elementor-nav-menu a {
  font-family: "DM Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.elementor-menu-toggle { color: #fff !important; }
.elementor-nav-menu--dropdown {
  background: rgba(5,5,16,0.98) !important;
  border-radius: 12px !important;
}
.elementor-nav-menu--dropdown a {
  font-family: "Syne", sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  padding: 16px 24px !important;
}

/* ── Header — sticky + logo never wraps ── */
.elementor-location-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
/* Header row never becomes a column on any screen */
.elementor-location-header .e-con,
.elementor-location-header .e-con > .e-con {
  flex-direction: row !important;
  align-items: center !important;
}
/* Logo text never wraps */
.elementor-location-header .elementor-heading-title {
  white-space: nowrap !important;
  font-family: "Syne", sans-serif !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

/* ── Misc ── */
@keyframes pulse {
  0%,100% { opacity:1; box-shadow: 0 0 0 0 rgba(52,211,153,0.5); }
  50%      { opacity:.8; box-shadow: 0 0 0 6px rgba(52,211,153,0); }
}
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: #050510; }
::-webkit-scrollbar-thumb { background: #7c3aed; border-radius: 3px; }
::selection { background: rgba(124,58,237,0.32); color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

/* ── Mobile ≤ 767px ── */
@media (max-width: 767px) {

  /* Page sections stack into a column */
  .e-con:not(.e-con-inner):not(.elementor-location-header .e-con) {
    flex-direction: column !important;
  }
  /* Child containers go full width */
  .e-con.e-con-inner:not(.elementor-location-header .e-con.e-con-inner),
  .e-con > .e-con:not(.elementor-location-header .e-con > .e-con) {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Header stays as a row — override the rule above */
  .elementor-location-header .e-con,
  .elementor-location-header .e-con > .e-con {
    flex-direction: row !important;
    width: auto !important;
  }
  /* Show hamburger, hide desktop nav links */
  .elementor-location-header .elementor-nav-menu--main { display: none !important; }
  .elementor-location-header .elementor-menu-toggle    { display: flex !important; }

  /* Heading sizes */
  h1.elementor-heading-title { font-size: clamp(2rem, 10vw, 3rem) !important; }
  h2.elementor-heading-title { font-size: clamp(1.6rem, 7vw, 2.4rem) !important; }
  h3.elementor-heading-title { font-size: clamp(1.2rem, 5vw, 1.8rem) !important; }

  /* Counter */
  .elementor-counter-number-wrapper { font-size: 1.8rem !important; }

  /* Padding reset — prevent huge side margins on mobile */
  .e-con:not(.elementor-location-header .e-con):not(.elementor-location-footer .e-con) {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ── Tablet 768px – 1024px ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .e-con:not(.e-con-inner):not(.elementor-location-header .e-con) {
    flex-wrap: wrap !important;
    flex-direction: row !important;
  }
  h1.elementor-heading-title { font-size: clamp(2.2rem, 5vw, 3.5rem) !important; }
  h2.elementor-heading-title { font-size: clamp(1.8rem, 4vw, 2.8rem) !important; }
}

/* ═══════════════════════════════════════════════════════════════
   POST CONTENT TYPOGRAPHY
   Applies to .sp-post-content (service & portfolio single pages)
   and standard WordPress .entry-content
   ═══════════════════════════════════════════════════════════════ */

.sp-post-content,
.entry-content {
  color: #94a3b8;
  font-family: "DM Sans", sans-serif;
  font-size: clamp(15px, 1.8vw, 16px);
  line-height: 1.9;
}

/* ── Headings inside post content ── */
.sp-post-content h1,
.sp-post-content h2,
.sp-post-content h3,
.sp-post-content h4,
.sp-post-content h5,
.sp-post-content h6,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-family: "Syne", sans-serif !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
  margin-top: 2.4em !important;
  margin-bottom: 0.7em !important;
}

.sp-post-content h2, .entry-content h2 {
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.sp-post-content h3, .entry-content h3 {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem) !important;
  color: #a78bfa !important; /* purple-light for h3 — makes sub-sections stand out */
}

.sp-post-content h4, .entry-content h4 {
  font-size: 1rem !important;
  color: #f59e0b !important; /* amber for h4 — service sub-items */
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* First heading never needs top margin */
.sp-post-content > h2:first-child,
.sp-post-content > h3:first-child { margin-top: 0 !important; }

/* ── Paragraphs ── */
.sp-post-content p,
.entry-content p {
  color: #94a3b8;
  margin-bottom: 1.3em;
  font-size: inherit;
  line-height: 1.9;
}

/* ── Bold & strong — accent colour so it pops ── */
.sp-post-content strong,
.sp-post-content b,
.entry-content strong,
.entry-content b {
  color: #ffffff;
  font-weight: 700;
}

/* ── Italic / emphasis ── */
.sp-post-content em,
.entry-content em {
  color: #a78bfa;
  font-style: italic;
}

/* ── Unordered lists ── */
.sp-post-content ul,
.entry-content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6em;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sp-post-content ul li,
.entry-content ul li {
  position: relative;
  padding-left: 1.5em;
  color: #94a3b8;
  line-height: 1.75;
}

.sp-post-content ul li::before,
.entry-content ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: #7c3aed;
  font-weight: 700;
  font-size: 13px;
  top: 2px;
}

/* ── Ordered lists ── */
.sp-post-content ol,
.entry-content ol {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6em;
  counter-reset: sp-counter;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sp-post-content ol li,
.entry-content ol li {
  position: relative;
  padding-left: 2.4em;
  color: #94a3b8;
  line-height: 1.75;
  counter-increment: sp-counter;
}

.sp-post-content ol li::before,
.entry-content ol li::before {
  content: counter(sp-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  color: #7c3aed;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  top: 3px;
  letter-spacing: 0.05em;
}

/* ── Horizontal rule ── */
.sp-post-content hr,
.entry-content hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin: 2.5em 0;
}

/* ── Blockquotes ── */
.sp-post-content blockquote,
.entry-content blockquote {
  border-left: 3px solid #7c3aed;
  padding: 16px 24px;
  margin: 1.8em 0;
  background: rgba(124,58,237,0.06);
  border-radius: 0 8px 8px 0;
  color: #cbd5e1;
  font-style: italic;
  font-size: 1.05em;
  line-height: 1.8;
}

/* ── Inline code ── */
.sp-post-content code,
.entry-content code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85em;
  background: rgba(124,58,237,0.12);
  color: #a78bfa;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(124,58,237,0.2);
}

/* ── Code blocks ── */
.sp-post-content pre,
.entry-content pre {
  background: rgba(8,8,20,0.88);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 24px;
  overflow-x: auto;
  margin: 1.8em 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  line-height: 1.85;
  color: #e2e8f0;
}

.sp-post-content pre code,
.entry-content pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* ── Links ── */
.sp-post-content a,
.entry-content a {
  color: #a78bfa;
  text-decoration: underline;
  text-decoration-color: rgba(167,139,250,0.35);
  text-underline-offset: 3px;
  transition: color 0.2s, text-decoration-color 0.2s;
}

.sp-post-content a:hover,
.entry-content a:hover {
  color: #ffffff;
  text-decoration-color: rgba(255,255,255,0.4);
}

/* ── Tables ── */
.sp-post-content table,
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.8em 0;
  font-size: 14px;
}

.sp-post-content th,
.entry-content th {
  background: rgba(124,58,237,0.12);
  color: #ffffff;
  font-family: "Syne", sans-serif;
  font-weight: 700;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 2px solid rgba(124,58,237,0.3);
}

.sp-post-content td,
.entry-content td {
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #94a3b8;
  vertical-align: top;
}

.sp-post-content tr:hover td,
.entry-content tr:hover td {
  background: rgba(255,255,255,0.02);
}

/* ── Images inside post content ── */
.sp-post-content img,
.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.07);
  display: block;
  margin: 1.6em auto;
}

/* ── Figure captions ── */
.sp-post-content figcaption,
.entry-content figcaption {
  text-align: center;
  font-size: 13px;
  color: #4a5568;
  margin-top: -8px;
  margin-bottom: 1.4em;
  font-style: italic;
}

/* ── First paragraph lead text (larger) ── */
.sp-post-content > p:first-of-type,
.entry-content > p:first-of-type {
  font-size: clamp(16px, 2vw, 18px);
  color: #cbd5e1;
  line-height: 1.8;
}

/* ── Section dividers between h2 blocks ── */
.sp-post-content h2 + *,
.entry-content h2 + * { margin-top: 0; }

/* ── Responsive ── */
@media (max-width: 767px) {
  .sp-post-content,
  .entry-content {
    font-size: 15px;
  }
  .sp-post-content blockquote,
  .entry-content blockquote {
    padding: 12px 16px;
  }
  .sp-post-content pre,
  .entry-content pre {
    padding: 16px;
    font-size: 12px;
  }
}