/* ═══════════════════════════════════════════════════════════════
   Salman Portfolio — Design System v4.3
   Loaded via wp_enqueue_scripts priority 999 — AFTER Elementor.
   
   IMPORTANT: We do NOT override Elementor widget backgrounds here.
   Widget backgrounds/borders are set directly in widget settings
   using _background_background, _border_border (Advanced tab keys).
   This file only adds what Elementor widget settings cannot do.
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS 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);
}

/* ── Page base ── */
*, *::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;
}

/* ── Background atmosphere (dot grid + purple glow) ── */
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%);
}
.elementor,
.e-con,
.elementor-section-wrap,
.elementor-location-header,
.elementor-location-footer {
  position: relative;
  z-index: 1;
}

/* ── Typography ── */
h1, h2, h3, h4,
.elementor-heading-title {
  font-family: "Syne", sans-serif !important;
  font-weight: 800 !important;
  color: #ffffff !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;
}
.elementor-button:hover { transform: translateY(-2px) !important; }

/* ── Icon Box: typography & color only — NO background override ──
   Background/border is set per-widget via _background_background.
   We only enforce text colors and font families here.              */
.elementor-icon-box-title {
  font-family: "Syne", sans-serif !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}
.elementor-icon-box-description {
  font-family: "DM Sans", sans-serif !important;
  color: #94a3b8 !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;
  color: #94a3b8;
  transition: color 0.2s;
}
.elementor-widget-icon-list li:hover .elementor-icon-list-text { color: #fff; }
/* Tech tag pills (inline layout) */
.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 ── */
.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;
  color: #4a5568 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
  display: block !important;
}

/* ── Testimonial: typography only — background set per-widget ── */
.elementor-testimonial-content {
  font-style: italic !important;
  color: #94a3b8 !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
}
.elementor-testimonial-name {
  color: #fff !important;
  font-family: "Syne", sans-serif !important;
  font-weight: 700 !important;
}
.elementor-testimonial-job { color: #4a5568 !important; font-size: 13px !important; }

/* ── Image ── */
.elementor-widget-image img {
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  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 grid) ── */
.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 {
  color: #fff !important;
  font-family: "Syne", sans-serif !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.elementor-post__title a:hover { color: #a78bfa !important; }
.elementor-post__excerpt p { color: #94a3b8 !important; font-size: 14px !important; }
.elementor-post__read-more { color: #a78bfa !important; font-size: 13px !important; font-weight: 600 !important; }

/* ── Form widget ── */
.elementor-form .elementor-field-group label {
  color: #94a3b8 !important;
  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;
  transition: border-color 0.2s !important;
  outline: none !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;
  color: #94a3b8 !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.elementor-nav-menu a:hover,
.elementor-nav-menu .current-menu-item > a { color: #fff !important; }
.elementor-menu-toggle { color: #fff !important; }
.elementor-nav-menu--dropdown {
  background: rgba(5,5,16,0.98) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 12px !important;
}
.elementor-nav-menu--dropdown a {
  font-family: "Syne", sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #fff !important;
  padding: 16px 24px !important;
}
.elementor-nav-menu--dropdown a:hover { color: #f59e0b !important; }

/* ── Header: always sticky, always a row, 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;
}
.elementor-location-header .e-con,
.elementor-location-header .e-con > .e-con {
  flex-direction: row !important;
  align-items: center !important;
}
.elementor-location-header .elementor-heading-title {
  white-space: nowrap !important;
  font-size: 22px !important;
  font-family: "Syne", sans-serif !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

/* ── Footer ── */
.elementor-location-footer .e-con:first-child {
  border-top: 1px solid rgba(255,255,255,0.06) !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
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Page sections stack — header always stays row */
  .e-con:not(.e-con-inner):not(.elementor-location-header .e-con) {
    flex-direction: column !important;
  }
  /* Child containers full width — except header children */
  .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 row stays intact */
  .elementor-location-header .e-con,
  .elementor-location-header .e-con > .e-con {
    flex-direction: row !important;
    width: auto !important;
  }
  /* Desktop nav → hide; hamburger toggle → show */
  .elementor-location-header .elementor-nav-menu--main { display: none !important; }
  .elementor-location-header .elementor-menu-toggle    { display: flex !important; }
  /* Heading responsive 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 on mobile */
  .elementor-counter-number-wrapper { font-size: 1.8rem !important; }
  /* Padding */
  .e-con:not(.elementor-location-header .e-con):not(.elementor-location-footer .e-con) {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@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; }
}