/* TrustUs — FAQ accordion -----------------------------------------------------
   Shared by the homepage and About. Lives in its own file so the two pages
   cannot drift apart; loaded after tu-system.css, which owns the tokens. */

.hp-faq__head { text-align: center; max-width: 74ch; margin: 0 auto clamp(30px, 3.5vw, 44px); }
.hp-faq__head h2 { margin: var(--sp-4) 0 0; }
.hp-faq__head p { margin: 14px auto 0; color: var(--muted); }

/* The eyebrow's rule is drawn on one side, so centring the block leaves it
   hanging off the text. Laying it out as a flex row centres mark and label
   together. */
.hp-faq__head .hp-eyebrow { display: inline-flex; align-items: center; justify-content: center; }

.hp-faq__list { max-width: 900px; margin-inline: auto; }

/* The sections, as tabs ---------------------------------------------------- */
/* One flat list said nothing about what else was here. Five named sections say
   the whole of it — and they are alternatives, so they are tabs: somebody came
   for one of them, and reading past four to reach the fifth is exactly what
   this removes. A track rather than five loose buttons, so the set reads as one
   control with one of them chosen. */
.hp-faq__tabs {
  display: flex;
  /* One line, always. Wrapped, the five Arabic section names broke 4 + 1 and
     the fifth sat alone under the middle of the track, which read as a mistake.
     The track is as wide as its five tabs and centred while they fit, and the
     full width of the page — sliding — as soon as they do not. */
  flex-wrap: nowrap;
  width: fit-content;
  /* A ceiling as well as the page's edge. fit-content alone let the English
     names — "Obtaining and renewing residence permits" and four more of that
     length — stretch the track to 1089px, most of the page, so a control that
     is meant to read as one small object read as a rule across the screen.
     960 is the width the five Arabic names need, so Arabic still fits on one
     line and only English slides — which it already knows how to do. */
  max-width: min(100%, 960px);
  gap: 4px;
  margin: 0 auto clamp(22px, 2.6vw, 32px);
  padding: 5px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: var(--r-pill, 999px);
}
.hp-faq__tabs::-webkit-scrollbar { display: none; }
.hp-faq__tab { flex: 0 0 auto; }
.hp-faq__tab {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 10px 15px;
  border-radius: var(--r-pill, 999px);
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.5;
  color: var(--muted);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.hp-faq__tab:hover { color: var(--red); }
.hp-faq__tab[aria-selected="true"] {
  background: var(--red);
  color: #fff;
  box-shadow: 0 6px 16px rgba(167, 0, 30, .2);
}
/* The panels are only closed once the script is there to open them again. */
.hp-faq__panel[hidden] { display: none; }

/* Closing prompt, matching the live site: one more heading and the two ways
   out — the full list, or asking us directly. */
.hp-faq__still { margin-top: clamp(34px, 4vw, 50px); text-align: center; }
.hp-faq__still h3 { font-size: var(--fs-h3); margin: 0 0 var(--sp-5); }
.hp-faq__acts { display: flex; align-items: center; justify-content: center; gap: var(--sp-5); flex-wrap: wrap; }
.hp-faq__link { color: var(--ink); font-weight: 700; font-size: var(--fs-body); border-bottom: 1.5px solid var(--line); padding-bottom: 2px; }
.hp-faq__link:hover { color: var(--red); border-bottom-color: currentColor; }
.hp-toggle { border-block-end: 1px solid var(--line); }
.hp-toggle:first-of-type { border-block-start: 1px solid var(--line); }
.hp-toggle > summary {
  cursor: pointer; list-style: none; padding-block: var(--sp-5);
  font-weight: 800; font-size: var(--fs-h4); color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  transition: color .18s ease;
}
.hp-toggle > summary:hover { color: var(--red); }
.hp-toggle > summary::-webkit-details-marker { display: none; }
/* A bare plus: the ringed marker read as a button of its own, and six of them
   down the left edge pulled more attention than the questions did. Two bars
   drawn as backgrounds rather than a "+" glyph, so the upright can shrink to
   nothing and leave a minus behind. */
.hp-toggle > summary::after {
  content: ""; flex: none; width: 16px; height: 16px;
  background-image:
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--red), var(--red));
  background-repeat: no-repeat;
  background-position: center, center;
  background-size: 16px 2px, 2px 16px;
  transition: background-size .34s cubic-bezier(.4, 0, .2, 1);
}
/* No rotation: a plus is symmetrical about its centre, so spinning it 180deg
   is work the eye cannot see. The upright shrinking to nothing is the whole
   gesture, and it runs on the panel's own curve and duration so the mark and
   the answer move together. */
.hp-toggle.is-open > summary::after { background-size: 16px 2px, 2px 0; }

/* Height animation without measuring anything: a 0fr -> 1fr grid row resolves
   to the content's own height, so it works for answers of any length and needs
   no inline styles. The child carries the overflow. */
.hp-toggle__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .34s cubic-bezier(.4, 0, .2, 1);
  font-size: var(--fs-body);
}
.hp-toggle.is-open .hp-toggle__body { grid-template-rows: 1fr; }

/* The clipping child. It exists so that the answer's bottom padding sits
   *inside* something that gets clipped: with the paragraph itself as the grid
   item, 0fr zeroed its height but left its 24px of padding standing, so every
   closed row carried a dead band and every open began 24px in rather than at
   nothing. */
.hp-toggle__in {
  overflow: hidden;
  min-height: 0;
  /* The height alone reads as the box growing. Fading and lifting the text
     into place makes it read as the answer arriving. Out is quicker than in,
     and in waits for the row to have somewhere to put it. */
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease;
}
.hp-toggle.is-open .hp-toggle__in {
  opacity: 1;
  transform: none;
  transition: opacity .26s ease .1s, transform .3s cubic-bezier(.4, 0, .2, 1) .06s;
}
/* `.hp` on the front for specificity: Divi carries `p:last-of-type
   { padding-bottom: 0 }`, which is (0,1,1) — the same weight as
   `.hp-toggle__in p` — and its stylesheet loads later, so it won the tie and
   the last line of every answer sat directly on the divider. */
.hp .hp-toggle__in p { margin: 0; padding-bottom: var(--sp-5); }

/* Without JS the browser's own open/closed state is all there is, so show the
   answer outright rather than leaving it collapsed and faded out. */
.no-js .hp-toggle[open] .hp-toggle__body { grid-template-rows: 1fr; }
.no-js .hp-toggle[open] .hp-toggle__in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hp-toggle__body,
  .hp-toggle__in,
  .hp-toggle.is-open .hp-toggle__in,
  .hp-toggle > summary::after { transition: none; }
  .hp-toggle__in { transform: none; }
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hp-faq__acts { flex-direction: column; gap: var(--sp-4); }
}
@media (max-width: 860px) {
  .hp-faq__list, .hp-faq__head { max-width: none; }
  .hp-faq__tab { padding: 9px 15px; font-size: 13px; }
}
@media (max-width: 560px) {
  .hp-toggle > summary { font-size: var(--fs-body); padding-block: var(--sp-4); }
}