/* RAQMANA — Guide: the home FAQ, the Services pages and the question guides
   (services.html, ransomware-protection-libya.html, iso-27001-libya.html, compliance-libya.html, and ar/).
   Everything shared (tokens, themes, type, .cut-frame, .link, .btn, header, footer, .page-hero) comes from
   raqmana.css; this file only adds the components below. No new colours: every value is a raqmana.css token. */

/* ---------------------------------------------------------------- Home hero: the four focus areas
   An indexed row in the site's own language (mono index, hairline, the cyan mark segment), after
   Stripe's and CrowdStrike's hero columns: no boxes, no glow, no bullets. Replaces the long dash list. */
.hero-tagline.hero-focus {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5) var(--s-5);
  max-width: 46em;
  margin-top: var(--s-6);
  padding: 0;
  border: 0;
}
.hero-focus li {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(var(--rq-mist-rgb), .22);
}
.hero-focus li::before {   /* the cyan segment: the same mark the site uses before every eyebrow */
  content: "";
  position: absolute;
  top: -1px;
  inset-inline-start: 0;
  width: 24px;
  height: 1px;
  background: var(--rq-cyan);
}
.focus-num { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .08em; color: var(--rq-cyan); line-height: 1; }
.focus-name { font-size: clamp(.9375rem, .9rem + .15vw, 1.0625rem); line-height: 1.4; color: var(--rq-frost); text-wrap: balance; }
.focus-std { display: block; margin-top: var(--s-1); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; color: var(--rq-silver); white-space: nowrap; }
html[lang="ar"] .focus-name { line-height: 1.6; }
.hero-tagline.hero-focus + .lede { margin-top: var(--s-6); }
@media (max-width: 900px) {
  .hero-tagline.hero-focus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- FAQ (home pages and guides)
   Native <details>: works without JavaScript, keyboard and screen-reader friendly. */
.faq-list { margin-top: var(--s-7); border-top: 1px solid var(--line); max-width: 920px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  gap: var(--s-4);
  align-items: center;
  padding-block: var(--s-5);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q { font-size: var(--fs-h4); font-weight: 400; line-height: 1.4; color: var(--fg); text-wrap: pretty; transition: color var(--t-fast) var(--ease); }
.faq-item summary:hover .faq-q { color: var(--accent-text); }
.faq-icon { position: relative; width: 20px; height: 20px; }
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  right: 3px;
  height: 1.5px;
  background: var(--accent-text);
  transition: transform var(--t-med) var(--ease);
}
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: rotate(0deg); }
.faq-a { max-width: 46em; padding-bottom: var(--s-5); font-size: 1.0625rem; line-height: 1.7; color: var(--fg-2); text-wrap: pretty; }
html[lang="ar"] .faq-q { line-height: 1.6; }
html[lang="ar"] .faq-a { line-height: 1.9; }

/* ---------------------------------------------------------------- Guide pages: hero extras */
.page-guide .page-hero { padding-bottom: var(--s-8); }
.guide-ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.guide-meta { margin-top: var(--s-5); color: var(--fg-3); }

/* The short answer: the first thing a reader (or an AI assistant) should quote */
.answer-box {
  --cut: var(--cut-l);
  --frame: var(--rq-cyan-line);
  display: grid;
  gap: var(--s-3);
  padding: clamp(var(--s-5), 3vw, var(--s-6));
  background: rgba(var(--rq-night2-rgb), .86);
}
.answer-box .meta { color: var(--rq-cyan); }
.answer-box p:not(.meta) { font-size: 1.125rem; line-height: 1.65; color: var(--rq-frost); text-wrap: pretty; }
html[lang="ar"] .answer-box p:not(.meta) { line-height: 1.9; }
html[lang="ar"] .answer-box .meta { font-family: var(--font-sans); font-size: var(--fs-small); letter-spacing: 0; text-transform: none; }

/* ---------------------------------------------------------------- Long-form text */
.guide-body { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s-7) var(--s-8); align-items: start; }
.prose { max-width: 44em; }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-8); font-size: var(--fs-h3); font-weight: 400; line-height: 1.25; letter-spacing: -.012em; color: var(--fg); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--s-6); font-size: var(--fs-h4); font-weight: 500; color: var(--fg); }
.prose p, .prose li { font-size: 1.0625rem; line-height: 1.75; color: var(--fg-2); text-wrap: pretty; }
.prose ul, .prose ol { display: grid; gap: var(--s-2); padding-inline-start: var(--s-5); }
.prose ul { list-style: square; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--accent-text); }
.prose strong { font-weight: 500; color: var(--fg); }
.prose a:not(.btn) { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:not(.btn):hover { text-decoration-thickness: 2px; }
html[lang="ar"] .prose p, html[lang="ar"] .prose li { line-height: 1.95; }
html[lang="ar"] .prose h2 { line-height: 1.5; letter-spacing: 0; }

/* The side panel: related pages and the next step */
.guide-aside { position: sticky; top: calc(var(--header-h) + var(--s-5)); display: grid; gap: var(--s-5); }
.aside-card { display: grid; gap: var(--s-3); padding: var(--s-5); background: var(--plate); box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--radius); }
.aside-card .meta { color: var(--fg-3); }
.aside-card ul { display: grid; gap: var(--s-2); }
.aside-card li a { font-size: .9375rem; line-height: 1.5; color: var(--fg); transition: color var(--t-fast) var(--ease); }
.aside-card li a:hover, .aside-card li a[aria-current="page"] { color: var(--accent-text); }
.aside-card .btn { justify-self: start; }

/* ---------------------------------------------------------------- Services: what our team delivers */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-7); }
.svc-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding: clamp(var(--s-5), 2.6vw, var(--s-6));
  background: var(--plate);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--radius);
}
.svc-card::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 2px; background: var(--rq-cyan); }
.svc-card .meta { color: var(--accent-text); }
.svc-card h3 { font-size: var(--fs-h3); font-weight: 400; line-height: 1.25; letter-spacing: -.012em; color: var(--fg); }
.svc-card p, .svc-card li { font-size: 1rem; line-height: 1.65; color: var(--fg-2); }
.svc-card ul { display: grid; gap: var(--s-1); padding-inline-start: var(--s-5); list-style: square; }
.svc-card li::marker { color: var(--accent-text); }
html[lang="ar"] .svc-card h3 { line-height: 1.5; letter-spacing: 0; }
html[lang="ar"] .svc-card p, html[lang="ar"] .svc-card li { line-height: 1.85; }

/* Technology we integrate: a plain table, readable by people and machines */
.tool-table-wrap { margin-top: var(--s-7); overflow-x: auto; }
.tool-table { width: 100%; min-width: 640px; border-collapse: collapse; text-align: start; }
.tool-table th, .tool-table td { padding: var(--s-4) var(--s-3); border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.tool-table thead th { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); border-bottom-color: var(--line-strong); }
.tool-table tbody th { font-weight: 400; font-size: 1.0625rem; color: var(--fg); }
.tool-table td { font-size: .9375rem; line-height: 1.55; color: var(--fg-2); }
.tool-table .num { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .04em; color: var(--accent-text); white-space: nowrap; }
.tier-note { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
html[lang="ar"] .tool-table thead th, html[lang="ar"] .tier-note { font-family: var(--font-sans); font-size: var(--fs-small); letter-spacing: 0; text-transform: none; }

/* How an engagement works */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-7); counter-reset: step; }
.steps li { display: grid; align-content: start; gap: var(--s-2); padding-top: var(--s-4); border-top: 2px solid var(--rq-cyan); counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--fs-label); color: var(--accent-text); }
.steps h3 { font-size: var(--fs-h4); font-weight: 500; color: var(--fg); }
.steps p { font-size: .9375rem; line-height: 1.6; color: var(--fg-2); }

/* Guides list (services page and guides) */
.guide-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-7); }
.guide-link {
  position: relative;
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--plate);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--radius);
  transition: box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.guide-link h3 { font-size: 1.125rem; font-weight: 400; line-height: 1.4; color: var(--fg); }
.guide-link p { font-size: .9375rem; line-height: 1.55; color: var(--fg-2); }
.guide-link a::after { content: ""; position: absolute; inset: 0; }
.guide-link .icon-arrow { color: var(--accent-text); transition: transform var(--t-med) var(--ease); }
.guide-link:hover { box-shadow: inset 0 0 0 1px var(--accent-text); }
.guide-link:hover .icon-arrow { transform: translateX(3px); }
.guide-link:dir(rtl) .icon-arrow { scale: -1 1; }
.guide-link:dir(rtl):hover .icon-arrow { transform: translateX(-3px); }
.guide-link:has(a:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.guide-link a:focus-visible { outline: none; }

/* Closing call to action */
.guide-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5); }
.guide-cta .h3 { max-width: 28em; }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 1100px) {
  .guide-body { grid-template-columns: minmax(0, 1fr); }
  .guide-aside { position: static; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-links { grid-template-columns: minmax(0, 1fr); }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .svc-grid, .steps { grid-template-columns: minmax(0, 1fr); }
  .faq-q { font-size: 1.0625rem; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-icon::before, .faq-icon::after, .guide-link .icon-arrow { transition: none; }
}