/* ============================================================================
   MOEDATECH — FAQ page
   Loaded ONLY by /en/faq (and later /ar/faq), after v4.css.

   Deliberately its own file rather than appended to v4.css: every page on the
   site pulls v4.css, and there is no reason to make the home page carry an
   accordion it never renders. v4.css is also under a standing "append only,
   never regenerate" rule, so keeping new work out of it is the safer habit.

   Everything here is namespaced .faq-* . The page inherits its ground, type,
   header and footer from v4.css; this file only adds what an FAQ needs.
   ========================================================================= */

.faq-wrap {
  /* v4.css defines the palette; these are the two things it does not have.
     NOTE --cta in v4.css is #101112, i.e. near-black. It is deliberately NOT
     used for buttons here - a black CTA was reviewed and rejected on the
     browse page, and the system's action colour is the orange. */
  --faq-accent: #e65d00;
  --faq-accent-d: #c04d00;   /* the AA-safe fill: white on this is 4.9:1 */
  --faq-line: var(--hairline, #ddd3c7);
  --faq-ink: var(--ink, #0e0f10);
  --faq-soft: var(--ink-soft, #323232);
  --faq-mut: var(--ink-muted, #4e4e4e);
  --faq-card: var(--bg-raised, #fff);
  --faq-sunk: var(--bg-sunk, #e8dfd5);
  --faq-r: var(--radius-card, 26px);
  --faq-pill: var(--radius-pill, 999px);
  --faq-ease: var(--ease-out, cubic-bezier(.23, 1, .32, 1));
  --faq-gut: clamp(18px, 4vw, 56px);
  --faq-max: 1180px;

  font-family: var(--font, Figtree, ui-sans-serif, system-ui, sans-serif);
  color: var(--faq-soft);
  background: var(--bg, #f3efea);
}

.faq-in {
  max-width: var(--faq-max);
  margin: 0 auto;
  padding-inline: var(--faq-gut);
}

/* ------------------------------------------------------------------- hero */
.faq-hero {
  /* No header clearance needed: the skin's .v4bar is a normal-flow header
     inserted as the body's first child, so it simply sits above this. */
  padding: clamp(30px, 4.5vw, 60px) 0 clamp(26px, 3.4vw, 44px);
  border-bottom: 1px solid var(--faq-line);
}
.faq-hero .eyebrow { color: var(--faq-accent-d); }
.faq-hero h1 {
  margin: 14px 0 0;
  font-size: clamp(34px, 5.4vw, 62px);
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--faq-ink);
  max-width: 20ch;
  text-wrap: balance;
}
.faq-lede {
  margin: 18px 0 0;
  max-width: 58ch;
  font-size: clamp(15.5px, 1.3vw, 17.5px);
  line-height: 1.6;
  color: var(--faq-mut);
}
.faq-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.faq-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 24px;
  border-radius: var(--faq-pill);
  font: 600 14.5px/1 var(--font, Figtree, sans-serif);
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease,
              color .16s ease, transform .16s var(--faq-ease);
}
.faq-btn-p { background: var(--faq-accent); color: #fff; border: 1px solid transparent; }
.faq-btn-p:hover { background: var(--faq-accent-d); }
.faq-btn-s {
  background: transparent; color: var(--faq-ink);
  border: 1px solid var(--faq-line);
}
.faq-btn-s:hover { border-color: var(--faq-ink); }
.faq-btn:active { transform: scale(.98); }

/* ------------------------------------------------------------------- body */
.faq-body {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 68px);
  padding: clamp(30px, 4vw, 56px) 0 clamp(50px, 7vw, 96px);
  align-items: start;
}

/* the rail: an index, and on a long page also a position indicator */
.faq-rail { position: sticky; top: 24px; }
.faq-rail h2 {
  margin: 0 0 12px;
  font: 700 10.5px/1 var(--font, Figtree, sans-serif);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--faq-mut);
}
.faq-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.faq-rail a {
  display: block; padding: 8px 12px;
  border-radius: 12px;
  font-size: 14px; line-height: 1.35;
  color: var(--faq-soft); text-decoration: none;
  border: 1px solid transparent;
  transition: background .14s ease, color .14s ease;
}
.faq-rail a:hover { background: rgba(14, 15, 16, .045); color: var(--faq-ink); }
.faq-rail a[aria-current="true"] {
  background: var(--faq-card);
  border-color: var(--faq-line);
  color: var(--faq-ink);
  font-weight: 600;
}

/* --------------------------------------------------------------- searching */
.faq-tools { margin-bottom: clamp(20px, 2.6vw, 30px); }
.faq-field { position: relative; }
.faq-field svg {
  position: absolute; inset-inline-start: 18px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; fill: none; stroke: var(--faq-mut);
  stroke-width: 1.9; stroke-linecap: round; pointer-events: none;
}
.faq-search {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 52px;
  padding-block: 0;
  padding-inline: 46px 18px;   /* icon gutter first, so it flips under RTL */
  border: 1px solid var(--faq-line);
  border-radius: var(--faq-pill);
  background: var(--faq-card);
  font: 400 15px/1 var(--font, Figtree, sans-serif);
  color: var(--faq-ink);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.faq-search::placeholder { color: var(--faq-mut); }
.faq-search:focus-visible {
  outline: 0; border-color: var(--faq-ink);
  box-shadow: 0 0 0 3px rgba(14, 15, 16, .06);
}
.faq-count { margin: 12px 0 0; font-size: 13px; color: var(--faq-mut); }
.faq-count b { color: var(--faq-ink); font-weight: 600; }
/* only speaks up when a search actually removes something */
.faq-count[hidden] { display: none; }

/* ----------------------------------------------------------------- groups */
.faq-group { scroll-margin-top: 22px; }
.faq-group + .faq-group { margin-top: clamp(34px, 4.4vw, 58px); }
.faq-group > h2 {
  margin: 0 0 4px;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -.025em;
  color: var(--faq-ink);
}
.faq-group > p {
  margin: 0 0 18px;
  font-size: 14.5px; color: var(--faq-mut);
  max-width: 62ch;
}
.faq-list { display: grid; gap: 10px; }

/* ------------------------------------------------------------- a question */
/* <details> rather than scripted panels: it opens with no JavaScript, it is
   keyboard operable for free, and the browser's own find-in-page can reach
   the answers. The script on this page only filters and tracks position - if
   it never loads, the FAQ still works. */
.faq-q {
  background: var(--faq-card);
  border: 1px solid var(--faq-line);
  border-radius: var(--faq-r);
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.faq-q:hover { border-color: #cdc2b3; }
.faq-q[open] {
  border-color: #cdc2b3;
  box-shadow: 0 1px 2px rgba(14, 15, 16, .04), 0 14px 30px -22px rgba(14, 15, 16, .28);
}
.faq-q > summary {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 19px clamp(18px, 2vw, 26px);
  cursor: pointer;
  font: 600 clamp(15px, 1.35vw, 17px)/1.4 var(--font, Figtree, sans-serif);
  letter-spacing: -.012em;
  color: var(--faq-ink);
  list-style: none;
}
.faq-q > summary::-webkit-details-marker { display: none; }
.faq-q > summary::marker { content: ''; }
.faq-q > summary:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--faq-ink);
  border-radius: var(--faq-r);
}
.faq-qt { flex: 1 1 auto; }
.faq-chev {
  flex: none; width: 22px; height: 22px; margin-top: 1px;
  fill: none; stroke: var(--faq-mut); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .24s var(--faq-ease), stroke .16s ease;
}
.faq-q[open] .faq-chev { transform: rotate(180deg); stroke: var(--faq-accent-d); }

.faq-a {
  padding: 0 clamp(18px, 2vw, 26px) 22px;
  /* the summary already carries the top padding; this keeps the answer's
     first line optically tied to the question rather than floating */
  margin-top: -4px;
  max-width: 68ch;
  font-size: 15px; line-height: 1.62;
  color: var(--faq-soft);
}
.faq-q[open] .faq-a { animation: faq-reveal .26s var(--faq-ease) both; }
@keyframes faq-reveal {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}
.faq-a p { margin: 0; }
.faq-a p + p { margin-top: 11px; }
.faq-a a {
  color: var(--faq-accent-d); text-decoration: underline;
  text-underline-offset: 2.5px; text-decoration-thickness: 1px;
}
.faq-a a:hover { color: var(--faq-ink); }
.faq-a ul { margin: 11px 0 0; padding-inline-start: 20px; }
.faq-a li + li { margin-top: 5px; }

/* nothing matched the filter */
.faq-empty {
  padding: 30px 26px; text-align: center;
  background: var(--faq-card);
  border: 1px dashed var(--faq-line);
  border-radius: var(--faq-r);
  color: var(--faq-mut); font-size: 14.5px;
}
.faq-empty[hidden] { display: none; }

/* ------------------------------------------------------------------- foot */
.faq-end {
  margin-top: clamp(18px, 3vw, 34px);
  padding: clamp(26px, 3.4vw, 40px) clamp(22px, 3vw, 40px);
  background: var(--faq-sunk);
  border: 1px solid var(--faq-line);
  border-radius: var(--faq-r);
}
.faq-end h2 {
  margin: 0; font-size: clamp(19px, 1.9vw, 24px);
  letter-spacing: -.025em; color: var(--faq-ink);
}
.faq-end p { margin: 9px 0 0; max-width: 54ch; font-size: 15px; color: var(--faq-mut); }
.faq-end .faq-acts { margin-top: 20px; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .faq-body { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  /* the rail becomes a horizontal chip strip; sticky would fight the scroll */
  .faq-rail { position: static; }
  .faq-rail ol {
    grid-auto-flow: column; grid-auto-columns: max-content;
    gap: 8px; overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: none;
  }
  .faq-rail ol::-webkit-scrollbar { display: none; }
  .faq-rail a {
    white-space: nowrap; border-radius: var(--faq-pill);
    border-color: var(--faq-line); background: var(--faq-card);
  }
}
@media (max-width: 560px) {
  .faq-acts { flex-direction: column; align-items: stretch; }
  .faq-btn { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-q[open] .faq-a { animation: none; }
  .faq-chev { transition: none; }
  .faq-btn:active { transform: none; }
}

/* One ground for the whole page. The skin sets its own type scale and Inter
   as --font on html.v4skin, which is exactly what the other pages use - so
   the tokens below resolve to the skinned values here, not Figtree. */
body.clean { background: var(--bg, #f3efea); }

/* ============================ the header shell ============================
   This page hands the skin a <header class="hdr"> and the skin fills it -
   same code path, same MENU, same wiring as the four equipment pages.

   The layout below has to live here because header.hdr's own flex rules come
   from those pages' Webflow stylesheet, which this page does not load. The
   numbers are measured off /en/equipment-light rather than guessed:
   flex, padding 16px 30px, gap 16px, 66px tall, brand 62x34 with a 24px logo,
   language pill 44x23 pushed right by the nav's auto inline-end margin. */
header.hdr {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 30px;
  background: transparent;
}
header.hdr .brand {
  display: flex;
  align-items: center;
  min-height: 34px;
  flex: 0 1 auto;
  text-decoration: none;
  /* PAIRED auto margin. The skin's comment calls this "nav centred by paired
     auto margins" and it means exactly that: the brand AND the nav each take
     margin-inline-end:auto, so the free space splits in two and the nav lands
     in the middle. Measured on /en/equipment-light: 362.073px resolved on
     both. With only ONE of the pair the nav never centres - and in Arabic,
     where v4_ar.css lifts the nav out of flow with position:absolute, this is
     the only thing left to push the language pill away from the logo, which
     is why they sat bunched together on the right. */
  margin-inline-end: auto;
}
header.hdr .brand img {
  display: block;
  width: auto;
  height: 24px;
  /* the skin's one-logo rule: the file is dark-on-transparent already, and
     brightness(0) is what the other pages apply to flatten it to ink */
  filter: brightness(0);
}
/* The skin sets this inline when it builds the nav; this page ships the nav
   ready-made, so the auto margin lives here. Logical, not physical: a plain
   margin-right would push the nav to the wrong side under RTL. */
header.hdr .v4nav { margin-inline-end: auto; }

header.hdr .ctl-lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  margin-inline-start: 10px;   /* matches the reference header */
  height: 23px;
  padding: 0 14px;
  border: 1px solid var(--ink, #000);
  border-radius: var(--radius-pill, 999px);
  color: var(--ink, #000);
  font-family: var(--font, Inter, sans-serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.15px;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
header.hdr .ctl-lang:hover { background: var(--ink, #000); color: var(--bg, #f3efea); }

@media (max-width: 900px) {
  /* the skin's own breakpoint wraps .v4nav to its own row; match it */
  header.hdr { flex-wrap: wrap; padding: 12px 18px; gap: 10px; }
  header.hdr .v4nav { order: 3; width: 100%; margin-inline-end: 0 !important; }
}

/* ================================== RTL ===================================
   Webflow serves the Arabic locale with lang="ar" dir="rtl", so the logical
   properties used throughout this file mirror on their own. These are the
   handful of things direction alone does not fix.

   The chevron on a question is NOT mirrored: it points down when shut and up
   when open, and vertical rotation means the same thing in both directions.
   Flipping it would be the classic over-correction. */

/* Arabic runs longer than English at the same point size, and the skin
   already bumps nav and body sizes for it; the rail's own labels need the
   same room or they wrap mid-word. */
html[lang="ar"] .faq-rail a { font-size: 15px; line-height: 1.45; }
html[lang="ar"] .faq-rail h2 { letter-spacing: 0; }

/* the eyebrow and the uppercase rail heading: Arabic has no case, so the
   letter-spacing and uppercasing that flatter Latin small-caps just add gaps
   between joined letters */
html[lang="ar"] .faq-hero .eyebrow,
html[lang="ar"] .faq-rail h2 { text-transform: none; letter-spacing: 0; }

/* the phone number and the email stay LTR inside Arabic prose, or the digits
   and the address reorder around the punctuation */
html[lang="ar"] .faq-a a[href^="tel:"],
html[lang="ar"] .faq-a a[href^="mailto:"],
html[lang="ar"] .faq-btn[href^="tel:"],
html[lang="ar"] .faq-btn[href^="mailto:"] { direction: ltr; unicode-bidi: isolate; }

/* summary keeps the question at the start and the chevron at the end; flex
   does that for free once direction is rtl, but the answer's optical tie to
   the question is a start-edge inset, so state it logically */
html[lang="ar"] .faq-a { padding-inline: clamp(18px, 2vw, 26px); }