/* ==========================================================================
   Static pages (KATA-096, 2026-09-24) — shared by shadi-beauty-child and intex-child.
   The page-publish step wraps content in .sp-static, marks the content <h1> as .sp-lead (the theme then hides GP's own title)
   and turns .faq-item blocks into <details class="sp-faq">. Everything here is scoped to .sp-static.
   Colours come from each theme's own tokens (--brand-primary / --brand-secondary / --brand-accent).
   ========================================================================== */
.sp-static {
  --sp-ink: #2b2b33;
  --sp-muted: #5f6470;
  --sp-line: #ececf1;
  --sp-soft: color-mix(in srgb, var(--brand-primary) 6%, #fff);
  --sp-radius: 14px;
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 0 56px;
  color: var(--sp-ink);
  font-family: var(--font-primary);
  font-size: 16px; /* px, not rem: these themes enlarge the root font-size */
  line-height: 2;
}

.sp-static > * + * {
  margin-top: 20px;
}

/* Lead title (was the generator's <h1>) and intro */
.sp-static.sp-static .sp-lead {
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.6;
  font-weight: 800;
  color: var(--brand-secondary);
  margin: 0 0 8px;
}

.sp-static .sp-lead + p,
.sp-static .lead-text,
.sp-static header > p {
  font-size: 17px;
  color: var(--sp-muted);
}

/* Headings */
.sp-static.sp-static h2 {
  position: relative;
  font-size: 20px;
  line-height: 1.7;
  font-weight: 800;
  color: var(--sp-ink);
  margin: 36px 0 12px;
  padding-inline-start: 16px;
}

.sp-static.sp-static h2::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.35em;
  bottom: 0.35em;
  width: 4px;
  border-radius: 4px;
  background: var(--brand-primary);
}

.sp-static.sp-static h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-secondary);
  margin: 24px 0 8px;
}

.sp-static.sp-static p,
.sp-static.sp-static li {
  font-size: inherit;
}

.sp-static p {
  margin: 0 0 12px;
}

.sp-static a {
  color: var(--brand-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.sp-static strong {
  color: var(--sp-ink);
  font-weight: 700;
}

/* Lists */
.sp-static ul,
.sp-static ol {
  margin: 0 0 16px;
  padding-inline-start: 0;
  list-style: none;
}

.sp-static li {
  list-style: none;
  position: relative;
  padding-inline-start: 22px;
  margin-bottom: 8px;
}

.sp-static ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: 0.8em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-primary);
}

.sp-static ol {
  counter-reset: sp;
}

.sp-static ol > li {
  counter-increment: sp;
  padding-inline-start: 34px;
}

.sp-static ol > li::before {
  content: counter(sp, persian);
  position: absolute;
  inset-inline-start: 0;
  top: 0.25em;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-size: 13px;
  line-height: 24px;
  text-align: center;
}

.sp-static hr {
  border: 0;
  border-top: 1px solid var(--sp-line);
  margin: 32px 0;
}

/* Section blocks the generator emits become cards */
.sp-static section > section,
.sp-static article > section,
.sp-static .contact-block,
.sp-static .method-card,
.sp-static .shipping-method,
.sp-static .step-item,
.sp-static .contact-item,
.sp-static .brand-commitment,
.sp-static .packaging-safety,
.sp-static .delivery-notes {
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  padding: 20px 24px;
  margin-top: 16px;
  box-shadow: 0 1px 2px rgba(20, 20, 40, 0.04);
}

/* whatever heading opens a card sits flush with its top padding */
.sp-static :is(section > section, article > section, .contact-block, .method-card, .shipping-method,
  .step-item, .contact-item, .brand-commitment, .packaging-safety, .delivery-notes) > :first-child {
  margin-top: 0;
}

/* Grids for repeated cards */
.sp-static .contact-methods-grid,
.sp-static .shipping-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.sp-static .contact-methods-grid > *,
.sp-static .shipping-methods > * {
  margin-top: 0;
}


/* FAQ accordion (native <details>, no JS) */
.sp-static .sp-faq {
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  background: #fff;
  margin-top: 12px;
  overflow: hidden;
}

.sp-static .sp-faq > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 16px 20px;
  padding-inline-end: 52px;
  font-weight: 700;
  line-height: 1.8;
  color: var(--sp-ink);
}

.sp-static .sp-faq > summary::-webkit-details-marker {
  display: none;
}

.sp-static .sp-faq > summary::after {
  content: "+";
  position: absolute;
  inset-inline-end: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sp-soft);
  color: var(--brand-primary);
  font-size: 19px;
  line-height: 26px;
  text-align: center;
}

.sp-static .sp-faq[open] > summary {
  color: var(--brand-secondary);
  background: var(--sp-soft);
}

.sp-static .sp-faq[open] > summary::after {
  content: "−";
}

.sp-static .sp-faq > summary:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
}

.sp-static .sp-faq-body {
  padding: 4px 20px 16px;
  color: var(--sp-muted);
}

.sp-static .sp-faq-body > :last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .sp-static {
    padding: 20px 16px 32px;
    font-size: 15px;
  }

  .sp-static section > section,
  .sp-static article > section,
  .sp-static .contact-block,
  .sp-static .method-card,
  .sp-static .shipping-method,
  .sp-static .contact-item,
  .sp-static .brand-commitment,
  .sp-static .packaging-safety,
  .sp-static .delivery-notes {
    padding: 16px;
  }

}