/*
Theme Name: Digital10x Child
Theme URI: https://digitaltenx.qa/
Description: Hello Elementor child theme for Digital10x. Ships brand tokens, custom post types (Case Study, Service, Testimonial, Team Member), JSON-LD schema, and shared CSS for the 17 D10x custom Elementor widgets.
Author: Digital Ten X Trading and Services
Author URI: https://digitaltenx.qa/
Template: hello-elementor
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: digital10x-child
*/

/* ===========================================================
   :root brand tokens — single source of truth.
   Mirrored into Elementor Global Colors via global-styles/global-colors.json
   so widget settings can reference either name.
   =========================================================== */
:root {
  --d10x-ink: #0C0B0A;
  --d10x-panel: #141210;
  --d10x-panel2: #1B1815;
  --d10x-line: #2A2620;
  --d10x-line2: #3A342B;
  --d10x-fg: #F5F0E8;
  --d10x-muted: #9B968C;
  --d10x-dim: #6B6761;
  --d10x-accent: #00D68F;
  --d10x-accent-soft: #5DECB3;
  --d10x-gold: #5DECB3;
  --d10x-lime: #CCFF00;
  --d10x-error: #6B6761;

  --d10x-font-display: 'Fraunces', Georgia, serif;
  --d10x-font-sans: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --d10x-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --d10x-radius-sm: 6px;
  --d10x-radius-md: 12px;
  --d10x-radius-lg: 18px;
  --d10x-radius-xl: 22px;
  --d10x-radius-pill: 999px;

  --d10x-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --d10x-dur-fast: 200ms;
  --d10x-dur-med: 400ms;
  --d10x-dur-slow: 800ms;
}

/* Body baseline */
html, body {
  background: var(--d10x-ink);
  color: var(--d10x-fg);
  font-family: var(--d10x-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===========================================================
   Utility token classes (port of source helpers)
   =========================================================== */
.font-display { font-family: var(--d10x-font-display); font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 500; letter-spacing: -0.02em; }
.font-sans { font-family: var(--d10x-font-sans); }
.font-mono { font-family: var(--d10x-font-mono); }
.text-fg { color: var(--d10x-fg); }
.text-muted { color: var(--d10x-muted); }
.text-dim { color: var(--d10x-dim); }
.text-accent, .accent { color: var(--d10x-accent); }
.bg-ink { background: var(--d10x-ink); }
.bg-panel { background: var(--d10x-panel); }
.bg-panel2 { background: var(--d10x-panel2); }
.border-line { border-color: var(--d10x-line); }

/* ===========================================================
   Grain texture overlay (site-wide). Ported verbatim from source.
   =========================================================== */
body.d10x-grain::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  opacity: 0.05;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

/* ===========================================================
   Drift blobs — animated radial blur shapes
   =========================================================== */
.drift {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.5;
  will-change: transform;
}
@keyframes d10x-drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(80px,-40px) scale(1.15); } }
@keyframes d10x-drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-60px,50px) scale(0.85); } }
.drift-a { animation: d10x-drift1 14s ease-in-out infinite; }
.drift-b { animation: d10x-drift2 18s ease-in-out infinite; }

/* ===========================================================
   Selection + focus
   =========================================================== */
::selection { background: var(--d10x-accent); color: var(--d10x-ink); }
a:focus-visible, button:focus-visible, [tabindex="0"]:focus-visible, input:focus-visible, details > summary:focus-visible {
  outline: 2px solid var(--d10x-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ===========================================================
   Reveal-on-scroll utility used across the site.
   Animation is triggered by the global IntersectionObserver in
   assets/js/d10x-globals.js (enqueued by the child theme).
   =========================================================== */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--d10x-dur-slow) var(--d10x-ease), transform var(--d10x-dur-slow) var(--d10x-ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ===========================================================
   Card baseline (used by hover-lift containers everywhere)
   =========================================================== */
.d10x-card {
  background: linear-gradient(180deg, rgba(245,240,232,0.02) 0%, rgba(245,240,232,0) 100%);
  border: 1px solid var(--d10x-line);
  border-radius: var(--d10x-radius-lg);
  transition: border-color 250ms ease, background 250ms ease, transform 350ms var(--d10x-ease), box-shadow 350ms var(--d10x-ease);
}
.d10x-card:hover { border-color: var(--d10x-line2); }
.d10x-card-accent:hover { border-color: var(--d10x-accent); transform: translateY(-2px); box-shadow: 0 24px 60px -20px rgba(0,214,143,0.18); }

/* Spotlight radial hover effect — apply via "Advanced > CSS Classes: d10x-spotlight" */
.d10x-spotlight { position: relative; overflow: hidden; }
.d10x-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(400px circle at var(--x, 50%) var(--y, 50%), rgba(0,214,143,0.18), transparent 50%);
  transition: opacity 300ms ease;
  pointer-events: none;
}
.d10x-spotlight:hover::before { opacity: 1; }

/* ===========================================================
   Divider (used between major sections)
   =========================================================== */
.d10x-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--d10x-line), transparent);
}

/* ===========================================================
   Eyebrow text (mono uppercase label)
   =========================================================== */
.d10x-eyebrow {
  font-family: var(--d10x-font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--d10x-accent);
}

/* ===========================================================
   Italic display em (used in section H2s — "One <em>engine</em>")
   =========================================================== */
.d10x-italic-em {
  font-family: var(--d10x-font-display);
  font-style: italic;
  color: var(--d10x-accent);
  font-variation-settings: 'wght' 500, 'SOFT' 80;
}

/* ===========================================================
   Magnet button — global JS hook (D10x Magnet Button widget is preferred,
   but this class lets non-widget buttons participate.)
   =========================================================== */
.d10x-magnet {
  will-change: transform;
  transition: transform 300ms var(--d10x-ease);
}

/* ===========================================================
   Scroll progress bar (rendered by header.json site-wide widget)
   =========================================================== */
.d10x-scroll-progress {
  position: fixed;
  top: 64px;
  left: 0;
  height: 2px;
  width: 100%;
  background: rgba(42, 38, 32, 0.4);
  z-index: 40;
  pointer-events: none;
}
.d10x-scroll-progress__fill {
  height: 100%;
  background: var(--d10x-accent);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

/* ===========================================================
   WhatsApp FAB (rendered by header.json site-wide via custom HTML)
   =========================================================== */
.d10x-wa-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 12px 14px;
  border-radius: var(--d10x-radius-pill);
  background: rgba(12, 11, 10, 0.85);
  border: 1px solid var(--d10x-line);
  color: var(--d10x-fg);
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(16px);
  transition: border-color 200ms, transform 200ms;
  text-decoration: none;
}
.d10x-wa-fab:hover { border-color: var(--d10x-accent); transform: translateY(-2px); }
.d10x-wa-fab__icon {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: var(--d10x-radius-pill);
  background: rgba(0, 214, 143, 0.15);
  border: 1px solid rgba(0, 214, 143, 0.4);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.d10x-wa-fab__icon svg { width: 16px; height: 16px; color: var(--d10x-accent); }
.d10x-wa-fab__icon::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--d10x-accent);
  animation: d10x-pulse 1.4s ease-in-out infinite;
}
@keyframes d10x-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@media (max-width: 640px) { .d10x-wa-fab__label { display: none; } }

/* ===========================================================
   FAQ accordion (native <details>) — matches source styling.
   Native widget is preferred but custom HTML embeds get this too.
   =========================================================== */
.d10x-faq details {
  background: rgba(245, 240, 232, 0.02);
  border: 1px solid var(--d10x-line);
  border-radius: var(--d10x-radius-md);
  margin-bottom: 8px;
  transition: border-color 200ms, background 200ms;
}
.d10x-faq details[open] {
  border-color: rgba(0, 214, 143, 0.4);
  background: rgba(0, 214, 143, 0.04);
}
.d10x-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--d10x-font-display);
  font-variation-settings: 'wght' 500;
  color: var(--d10x-fg);
}
.d10x-faq summary::-webkit-details-marker { display: none; }
.d10x-faq summary .d10x-faq__plus {
  color: var(--d10x-accent);
  font-size: 22px;
  line-height: 1;
  transition: transform 250ms;
}
.d10x-faq details[open] summary .d10x-faq__plus { transform: rotate(45deg); }
.d10x-faq .d10x-faq__answer {
  padding: 0 20px 18px;
  color: var(--d10x-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* ===========================================================
   Breadcrumb (rendered by [d10x_breadcrumb] shortcode or custom widget)
   =========================================================== */
.d10x-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--d10x-font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--d10x-dim);
  padding: 88px 0 8px;
}
.d10x-breadcrumb a { color: var(--d10x-muted); transition: color 200ms; text-decoration: none; }
.d10x-breadcrumb a:hover { color: var(--d10x-accent); }
.d10x-breadcrumb .sep { color: var(--d10x-line2); }
.d10x-breadcrumb .current { color: var(--d10x-fg); }

/* ===========================================================
   Section helpers — H2 with italic accent
   =========================================================== */
.d10x-section-h2 {
  font-family: var(--d10x-font-sans);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--d10x-fg);
  margin: 0;
}
.d10x-section-h2 em { font-family: var(--d10x-font-display); font-style: italic; color: var(--d10x-accent); font-variation-settings: 'wght' 500, 'SOFT' 80; }

/* ===========================================================
   Problem + Solution + Process cards (used on Service templates)
   =========================================================== */
.d10x-prob-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .d10x-prob-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .d10x-prob-grid { grid-template-columns: 1fr; } }
.d10x-prob-card {
  background: rgba(190, 40, 40, 0.05);
  border: 1px solid rgba(190, 40, 40, 0.18);
  border-radius: 14px;
  padding: 20px 22px;
}
.d10x-prob-card__x {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 6px;
  background: rgba(190, 40, 40, 0.18);
  color: rgba(240, 170, 170, 0.95);
  font-weight: bold;
  margin-bottom: 12px;
  font-family: var(--d10x-font-mono);
}
.d10x-prob-card p { font-size: 14px; color: #C9B8B0; line-height: 1.55; }

.d10x-sol-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 700px) { .d10x-sol-grid { grid-template-columns: 1fr; } }
.d10x-sol-card {
  background: rgba(0, 214, 143, 0.04);
  border: 1px solid rgba(0, 214, 143, 0.2);
  border-radius: 14px;
  padding: 22px 24px;
}
.d10x-sol-card__check {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 6px;
  background: rgba(0, 214, 143, 0.15);
  color: var(--d10x-accent);
  font-weight: bold; margin-bottom: 12px;
  font-family: var(--d10x-font-mono);
}
.d10x-sol-card h4 {
  font-family: var(--d10x-font-display);
  font-variation-settings: 'wght' 500;
  font-size: 19px; color: var(--d10x-fg); margin-bottom: 4px;
}
.d10x-sol-card p { font-size: 14px; color: var(--d10x-muted); line-height: 1.55; }

.d10x-process-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--d10x-line); border-radius: 16px; overflow: hidden;
}
.d10x-process-step { background: var(--d10x-ink); padding: 28px 24px; }
.d10x-process-step .num {
  font-family: var(--d10x-font-display);
  font-style: italic; font-variation-settings: 'wght' 500;
  font-size: 36px; color: var(--d10x-accent); margin-bottom: 12px; line-height: 1;
}
.d10x-process-step h4 {
  font-family: var(--d10x-font-display); font-variation-settings: 'wght' 500;
  font-size: 19px; color: var(--d10x-fg); margin-bottom: 6px;
}
.d10x-process-step p { font-size: 13px; color: var(--d10x-muted); line-height: 1.5; }
@media (max-width: 900px) { .d10x-process-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .d10x-process-grid { grid-template-columns: 1fr; } }

/* ===========================================================
   Reduced motion override — honour user preference (source ports)
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ===========================================================
   Skip-to-content link (a11y)
   =========================================================== */
.d10x-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--d10x-accent);
  color: var(--d10x-ink);
  padding: 8px 16px;
  border-radius: var(--d10x-radius-sm);
  font-weight: 500;
  z-index: 10000;
}
.d10x-skip-link:focus { left: 8px; top: 8px; }