/*
 * CS755 SERVICE MASTER TEMPLATE — v1.0.0
 * Mobile-first. Applies to every `service` CPT singular page (body.cs755-service).
 * Extends the .cs-* design system already embedded per-post (Custom HTML block),
 * it does NOT redeclare --gold/--dark/etc — those stay scoped locally per post.
 *
 * Every rule here is anchored under `body.cs755-service` on purpose:
 *   1) it out-specifies the broad `body h1..h6 / body p,li / body a` rules in
 *      cs755-master.css (class+element > element+element even under !important
 *      ties, since specificity is compared before source order);
 *   2) it out-specifies the single-class `.cs-*` rules declared inline inside
 *      each post's own <style> block, which load earlier in the cascade but
 *      only carry one class of specificity;
 *   3) it keeps this file inert on every other page (home, archive, blog...),
 *      so it can be enqueued site-wide with zero risk of bleeding elsewhere.
 * First page built on this template: phone-spyware-scan-pegasus (post 5235).
 */

/* ═══════════════════════════════════════════════
   0. ANCHOR SCROLL OFFSET (sticky header = 9999)
═══════════════════════════════════════════════ */
body.cs755-service [id^="cs-"]{ scroll-margin-top: 84px; }

/* ═══════════════════════════════════════════════
   1. TYPOGRAPHY — HERO / TOC (mobile-first base)
═══════════════════════════════════════════════ */
body.cs755-service .cs-hero{ padding: 32px 0 26px; }
body.cs755-service .cs-wrap{ padding: 0 16px; }
body.cs755-service .cs-section{ padding: 36px 0; }

body.cs755-service .cs-hero .cs-h1{
  font-size: clamp(20px, 6.4vw, 26px) !important;
  line-height: 1.2 !important;
  letter-spacing: -.2px !important;
  margin: 0 0 12px !important;
}
body.cs755-service .cs-hero .cs-h1 em{
  font-size: .58em !important;
  margin-top: 4px !important;
}
body.cs755-service .cs-lead{
  font-size: .92rem;
  line-height: 1.7;
  margin: 0 auto 24px;
  padding: 0 4px;
}
body.cs755-service .cs-h2{
  font-size: clamp(18px, 5vw, 22px) !important;
  padding-bottom: 12px !important;
  margin: 0 0 16px !important;
}

/* TOC — right-aligned block on mobile, not a centered pill */
body.cs755-service .cs-toc{
  display: block;
  width: 100%;
  text-align: right;
  padding: 14px 16px;
}
body.cs755-service .cs-toc ul{
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
body.cs755-service .cs-toc li{ font-size: .82rem; }

/* ═══════════════════════════════════════════════
   2. METRICS BAR — mobile: slim cyber strip
      (desktop keeps the original 3-box KPI row, see §7)
═══════════════════════════════════════════════ */
body.cs755-service .cs-kpi-row{
  display: flex;
  flex-wrap: nowrap;
  justify-content: stretch;
  gap: 0;
  margin: 0 0 28px;
  background: #0a0b0e;
  border: 1px solid rgba(212,175,55,.25);
  border-radius: 10px;
  overflow: hidden;
  font-family: 'IBM Plex Mono', 'SF Mono', monospace;
}
body.cs755-service .cs-kpi{
  flex: 1 1 0;
  min-width: 0;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 10px 4px;
  position: relative;
}
body.cs755-service .cs-kpi + .cs-kpi::before{
  content: '';
  position: absolute;
  top: 22%; bottom: 22%; right: 100%;
  width: 1px;
  background: rgba(212,175,55,.22);
}
body.cs755-service .cs-kpi strong{
  font-size: 1.02rem !important;
  color: #F8F9FA !important;
  font-family: inherit;
  margin-bottom: 1px !important;
}
body.cs755-service .cs-kpi span{
  font-size: .6rem !important;
  color: #8b949e !important;
  letter-spacing: .2px;
}
body.cs755-service .cs-kpi-gold strong{ color: #F5D76E !important; }
body.cs755-service .cs-kpi-red strong{ color: #ff6b6b !important; }

/* ═══════════════════════════════════════════════
   3. DOMAIN CARDS — contrast fix + swappable theme
═══════════════════════════════════════════════ */
body.cs755-service .cs-domain-card{
  /* active theme (dark / gold, default) */
  --domain-bg: var(--card, #13151a);
  --domain-border: var(--gold, #D4AF37);
  --domain-text: #F8F9FA;
  --domain-text-soft: #C9CCD1;
  --domain-tag-bg: rgba(212,175,55,.14);

  /* alt theme tokens — defined now, not wired in, flip later by adding
     class .cs-domain-card--alt to the element. No markup rewrite needed. */
  --domain-bg-alt: #FFFFFF;
  --domain-border-alt: var(--gold, #D4AF37);
  --domain-text-alt: #1D1D1F;
  --domain-text-soft-alt: #3A3A3C;

  background: var(--domain-bg);
  border-color: var(--domain-border);
}
body.cs755-service .cs-domain-card h3{
  color: var(--domain-text) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
body.cs755-service .cs-domain-card p,
body.cs755-service .cs-domain-card .cs-domain-feats li{
  color: var(--domain-text-soft) !important;
}
body.cs755-service .cs-domain-card .cs-domain-tag{
  background: var(--domain-tag-bg);
}
/* opt-in light variant — add class "cs-domain-card--alt" to activate */
body.cs755-service .cs-domain-card.cs-domain-card--alt{
  background: var(--domain-bg-alt);
  border-color: var(--domain-border-alt);
}
body.cs755-service .cs-domain-card.cs-domain-card--alt h3{
  color: var(--domain-text-alt) !important;
  text-shadow: none;
}
body.cs755-service .cs-domain-card.cs-domain-card--alt p,
body.cs755-service .cs-domain-card.cs-domain-card--alt .cs-domain-feats li{
  color: var(--domain-text-soft-alt) !important;
}

/* ═══════════════════════════════════════════════
   4. METHODOLOGY — mobile: vertical timeline
      (desktop keeps the original 4-up step grid, see §7)
═══════════════════════════════════════════════ */
body.cs755-service .cs-steps{
  display: block;
  position: relative;
  counter-reset: none;
}
body.cs755-service .cs-step{
  position: relative;
  text-align: right;
  background: #fff;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: var(--r-lg, 18px);
  box-shadow: var(--sh-sm, 0 2px 8px rgba(0,0,0,.06));
  padding: 16px 52px 16px 16px;
  margin: 0 0 16px;
}
body.cs755-service .cs-step:last-child{ margin-bottom: 0; }
body.cs755-service .cs-step::before{ /* connector line */
  content: '';
  position: absolute;
  top: -16px; height: 16px;
  right: 38px;
  width: 2px;
  background: linear-gradient(180deg, rgba(212,175,55,.05), var(--gold, #D4AF37));
}
body.cs755-service .cs-step:first-child::before{ display: none; }
body.cs755-service .cs-step-num{
  position: absolute;
  top: 14px; right: -1px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--dark, #0f1115);
  border: 2px solid var(--gold, #D4AF37);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem !important;
  color: var(--gold, #D4AF37) !important;
  opacity: 1 !important;
  margin: 0 !important;
  line-height: 1;
}

/* ═══════════════════════════════════════════════
   5. BOOKING FORM — layout/context fixes
      (widget-internal styling lives in the spy-form
      plugin; these rules only correct how the widget
      sits inside this page's dark §cs-order section)
═══════════════════════════════════════════════ */
body.cs755-service .cs-form-card{
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: 100%;
}
body.cs755-service .cs-trust-row{ padding: 0 2px; }

/* ═══════════════════════════════════════════════
   6. CONTACT BOX — fix washed-out white-on-black text
═══════════════════════════════════════════════ */
body.cs755-service .cs-section-cta .cs-p{
  color: #F8F9FA !important;
  opacity: 1 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
body.cs755-service .cs-contact-btn{
  color: #F8F9FA !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
body.cs755-service .cs-contact-wa{
  color: #3ddc79 !important;
}

/* ═══════════════════════════════════════════════
   7. TABLET+ / DESKTOP — restore multi-column layouts
═══════════════════════════════════════════════ */
@media (min-width: 641px){
  body.cs755-service .cs-hero{ padding: 64px 0 56px; }
  body.cs755-service .cs-wrap{ padding: 0 24px; }
  body.cs755-service .cs-section{ padding: 72px 0; }
  body.cs755-service .cs-toc{
    display: inline-block;
    width: auto;
  }

  body.cs755-service .cs-kpi-row{
    background: transparent;
    border: none;
    border-radius: 0;
    gap: 16px;
  }
  body.cs755-service .cs-kpi{
    flex: 0 1 auto;
    padding: 16px 28px;
  }
  body.cs755-service .cs-kpi + .cs-kpi::before{ display: none; }

  /* methodology: back to a 4-up grid, drop timeline chrome */
  body.cs755-service .cs-steps{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  body.cs755-service .cs-step{
    text-align: center;
    padding: 26px 22px;
  }
  body.cs755-service .cs-step::before{ display: none; }
  body.cs755-service .cs-step-num{
    position: static;
    width: auto; height: auto;
    background: none; border: none;
    display: block;
    font-size: 2.8rem !important;
    opacity: .35 !important;
    margin: 0 auto 12px !important;
  }
}

@media (min-width: 901px){
  body.cs755-service .cs-domains-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* ═══════════════════════════════════════════════
   7b. BOOKING WIZARD — step navigation (service-wizard.js)
       Self-contained chrome (own bg/border) so it reads correctly
       whether the surrounding .cs-form-wrap is light or dark —
       it doesn't assume the form-widget redesign is deployed.
═══════════════════════════════════════════════ */
body.cs755-service .cs-wizard-hidden{ display: none !important; }

body.cs755-service .cs-wizard-nav{
  background: #0a0b0e;
  border: 1px solid rgba(212,175,55,.25);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 20px;
}
body.cs755-service .cs-wizard-progress{
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
body.cs755-service .cs-wizard-dot{
  flex: 1 1 0;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.12);
}
body.cs755-service .cs-wizard-dot.active{ background: var(--gold, #D4AF37); }
body.cs755-service .cs-wizard-dot.done{ background: rgba(212,175,55,.5); }
body.cs755-service .cs-wizard-title{
  font-size: .95rem;
  font-weight: 800;
  color: #F8F9FA;
  margin-bottom: 2px;
}
body.cs755-service .cs-wizard-hint{
  font-size: .78rem;
  color: #ff8383;
  margin: 4px 0 0;
  min-height: 1em;
}
body.cs755-service .cs-wizard-btns{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
body.cs755-service .cs-wizard-back,
body.cs755-service .cs-wizard-next{
  flex: 0 0 auto;
  padding: 9px 20px;
  border-radius: 100px;
  font-family: "Cairo", sans-serif;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.15);
  background: transparent;
  color: #c9ccd1;
}
body.cs755-service .cs-wizard-next{
  margin-inline-start: auto;
  border-color: var(--gold, #D4AF37);
  color: #F5D76E;
}
body.cs755-service .cs-wizard-next:hover{ background: rgba(212,175,55,.12); }
body.cs755-service .cs-wizard-back:hover{ background: rgba(255,255,255,.06); }

/* ═══════════════════════════════════════════════
   8. RTL / LTR — direction-specific rules only
═══════════════════════════════════════════════ */

/* FAQ (+) icon: right side in RTL, left side in LTR.
   DOM order is always [question text][icon] — a plain flex row
   already puts the icon at the *end* of reading direction, which
   is the LEFT edge in RTL and the RIGHT edge in LTR: the opposite
   of what we want in both cases. row-reverse flips it correctly
   for each direction, so we spell out both explicitly (no JS). */
body.cs755-service [dir="rtl"] .cs-faq-q{ flex-direction: row-reverse; }
body.cs755-service [dir="ltr"] .cs-faq-q{ flex-direction: row-reverse; text-align: left; }

/* timeline connector + numbered dot mirror for LTR pages */
body.cs755-service [dir="ltr"] .cs-step{
  text-align: left;
  padding: 16px 16px 16px 52px;
}
body.cs755-service [dir="ltr"] .cs-step::before{
  right: auto; left: 38px;
}
body.cs755-service [dir="ltr"] .cs-step-num{
  right: auto; left: -1px;
}

/* TOC block on mobile: mirror to left-align for LTR pages */
body.cs755-service [dir="ltr"] .cs-toc{ text-align: left; }
body.cs755-service [dir="ltr"] .cs-toc ul{ align-items: flex-start; }

@media (min-width: 641px){
  body.cs755-service [dir="ltr"] .cs-step{ text-align: center; padding: 26px 22px; }
  body.cs755-service [dir="ltr"] .cs-step::before{ display: none; }
}