/* =============================================================
   Topic pages (EP-23 FE-23.11): /<slug>/ and /ar/<slug>/, generated by
   build-pages.js. Loaded after tokens.css and site.css, which already carry
   the header, footer, buttons, .h2, .lead, the .faq card and the .cta-panel
   band; this file adds only the template's own blocks. Values are tokens or
   the literal sizes site.css uses for the same element, and every side-aware
   rule is logical (inline-start/end), so rtl.css needs nothing for this page.
   ============================================================= */

/* ---------- Header ----------
   The home header without its section-jump nav and menu toggle: four real
   links. Below 760px they hide and the footer and hero carry the way on.
   The language switch takes the free space's place (no .spacer, so one gap
   fewer), and below 480px it shows only the link to the other language:
   brand, switch and "حجز عرض توضيحي" then fit a 365px bar. Under 365px
   rtl.css hides the Arabic switch altogether; the footer carries it. */
.topic-header .btn { flex: none; }
.topic-header .nav__lang-group { margin-inline-start: auto; }
.topic-nav { display: flex; align-items: center; gap: 2px; flex: none; }

/* ---------- Page ---------- */
.topic { padding: 0 32px 96px; }

.topic-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 28px;
  font-size: var(--mh-text-sm);
  color: var(--mh-fg-3);
}
.topic-crumbs a { color: var(--mh-fg-2); }
.topic-crumbs [aria-current] { color: var(--mh-fg); font-weight: 600; }

.topic-hero { max-width: 860px; padding: 44px 0 72px; }
.topic-hero__title {
  font-family: var(--mh-font-display);
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--mh-fg);
  margin: 0 0 22px;
}
.topic-hero .lead { max-width: 680px; font-size: 19px; line-height: 1.55; }
.topic-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---------- Sections, FAQ, related: heading on the start side, body on the end side ---------- */
.topic-section,
.topic-faq,
.topic-related {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 16px 56px;
  align-items: start;
  padding-block: 56px;
  border-top: 1px solid var(--mh-border);
}
.topic-section .h2,
.topic-steps .h2,
.topic-faq .h2,
.topic-related .h2 {
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.15;
  margin: 0;
}
.topic-section__body p {
  max-width: 640px;
  margin: 0 0 16px;
  font-size: 16.5px;
  line-height: var(--mh-leading-relaxed);
  color: var(--mh-fg-2);
}
.topic-section__body p:last-child { margin-bottom: 0; }

.topic-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.topic-list li {
  position: relative;
  padding-inline-start: 26px;
  font-size: 15px;
  line-height: var(--mh-leading-normal);
  color: var(--mh-fg-2);
}
.topic-list li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  color: var(--mh-success-600);
  font-weight: 700;
}

/* ---------- How it works ---------- */
.topic-steps { padding-block: 56px; border-top: 1px solid var(--mh-border); }
.topic-steps .h2 { margin-bottom: 28px; }
.topic-steps ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  counter-reset: topic-step;
}
.topic-steps li {
  counter-increment: topic-step;
  background: var(--mh-bg);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-radius-md);
  padding: 24px;
}
/* The same badge as the home page's .step__n. */
.topic-steps li::before {
  content: counter(topic-step);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-bottom: 16px;
  border-radius: 7px;
  background: var(--mh-signal-100);
  color: var(--mh-signal-700);
  font-family: var(--mh-font-mono);
  font-size: 12px;
  font-weight: 700;
}
.topic-steps h3 {
  font-family: var(--mh-font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--mh-fg);
  margin: 0 0 6px;
}
.topic-steps p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--mh-fg-2); }

/* ---------- FAQ ----------
   Each entry is the home page's .faq card, built on <details> so the answer is in
   the HTML and opens without JavaScript. */
.topic-faq summary { list-style: none; }
.topic-faq summary::-webkit-details-marker { display: none; }
.topic-faq summary::after {
  content: "+";
  flex: none;
  margin-inline-start: auto;
  font-family: var(--mh-font-mono);
  font-size: 18px;
  font-weight: 400;
  color: var(--mh-fg-3);
  transition: transform var(--mh-dur-base) var(--mh-ease-out);
}
.topic-faq details[open] summary::after { transform: rotate(45deg); }
/* .faq clips its overflow, so the global ring (offset outward) would be cut off: draw it inside. */
.topic-faq summary:focus-visible {
  outline: 2px solid var(--mh-border-focus);
  outline-offset: -2px;
  border-radius: var(--mh-radius-md);
}
.topic-faq__a { margin: 0; }

/* ---------- Related pages ---------- */
.topic-related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.topic-related a {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-radius-pill);
  background: var(--mh-white);
  font-size: 14px;
  font-weight: 600;
  color: var(--mh-fg);
}
.topic-related a:hover {
  border-color: var(--mh-border-strong);
  background: var(--mh-bg-subtle);
  color: var(--mh-fg);
  text-decoration: none;
}

/* ---------- Closing band: the home page's .cta-panel ---------- */
.topic-cta { margin-top: 24px; }

/* ---------- Plans (/pricing/) ---------- */
.topic-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
  padding-bottom: 56px;
}
.topic-plan {
  display: flex;
  flex-direction: column;
  background: var(--mh-white);
  border: 1px solid var(--mh-border);
  border-radius: 14px;
  padding: 26px 24px;
  box-shadow: var(--mh-shadow-sm);
}
.topic-plan__name { font-family: var(--mh-font-display); font-size: 18px; font-weight: 700; color: var(--mh-fg); margin: 0; }
.topic-plan__blurb { font-size: var(--mh-text-sm); line-height: var(--mh-leading-normal); color: var(--mh-fg-3); margin: 6px 0 18px; }
.topic-plan__price { margin: 0; font-size: var(--mh-text-sm); color: var(--mh-fg-3); }
.topic-plan__price--annual { margin-top: 12px; }
.topic-plan__amount {
  font-family: var(--mh-font-mono);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mh-fg);
}
.topic-plan__price--annual .topic-plan__amount { font-size: 24px; }
.topic-plan__note { margin: 5px 0 0; font-size: 12px; color: var(--mh-fg-3); }
.topic-plan .topic-list { margin: 20px 0 24px; gap: 9px; }
.topic-plan .topic-list li { font-size: var(--mh-text-sm); }
.topic-plan__cta { text-align: center; margin-top: auto; }
.topic-plans__foot { grid-column: 1 / -1; margin: 4px 0 0; font-size: 12.5px; color: var(--mh-fg-3); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .topic-section,
  .topic-faq,
  .topic-related { grid-template-columns: 1fr; }
  .topic-plans { grid-template-columns: 1fr; max-width: 460px; }
}

@media (max-width: 760px) {
  .topic-nav { display: none; }
  .topic { padding: 0 20px 72px; }
  .topic-hero { padding: 32px 0 52px; }
  .topic-hero .lead { font-size: 17px; }
  .topic-section,
  .topic-faq,
  .topic-related,
  .topic-steps { padding-block: 44px; }
  .topic-steps ol { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .topic-header .nav__lang-current,
  .topic-header .nav__lang-sep { display: none; }
}