/* ==========================================================================
   contact.css — page styles for /contact/ (EN, Elementor page 12) and its
   Arabic twin (post 766). Shared by contact.en.html + contact.ar.html.

   Structure (one block per Elementor container, top to bottom):
     1. .contact            boxed row container 196980b (margin 40px 0, gap 30px 120px,
                            column-reverse ≤1024px) > .contact__inner
          .contact__main      50% column: .contact__title (h1), .contact__lead ×2 (h2),
                              .form, .contact__box (grey rounded box, tablet/mobile only)
          .contact__aside     50% column, desktop only: .contact__figure > .contact__img,
                              .contact-list
     2. .form               Elementor form widget 1911bbe: .form__fields > .form__group
                            (+ --required / --submit) > .form__label (two <p>, space-between)
                            + .form__field (--input / --textarea) | .form__submit >
                            .form__submit-content > .form__submit-text; .form__message
                            (+ --success / --error) is filled by contact.js
     3. .contact-list       icon-list widget (Poppins 700): .contact-list__item >
                            .contact-list__link > .contact-list__icon (inline SVG) +
                            .contact-list__text; .contact-list--box = the tablet/mobile
                            variant inside .contact__box (16px/24px)
     4. .faq                gradient container aca7137 (padding 5vw; 80/75/20px ≤1024px)
                            > .faq__inner > .faq__title (h1) + two accordions:
          .faq__list          desktop + tablet (hide-mobile): bilingual rows
          .faq__list--mobile  mobile only (hide-desktop hide-tablet): EN / AR items,
                              .faq__item--ar = right-aligned Arabic question
          .faq__item (<details>) > .faq__summary > .faq__header > .faq__question (+ p's)
                              + .faq__icon > .faq__icon-opened / .faq__icon-closed (chevrons)
                              + .faq__content > .faq__col (50%, 100% on mobile) > .faq__answer
                              (h2; --ar = 1vw Arabic column, --justify = mobile EN answers,
                              --start = mobile EN answer that post-766 sets text-align:left
                              (AR page only: the 3rd EN item, heading 1884b0d))
     5. RTL                 [dir="rtl"] overrides, kept at the end. NOTE: the live Arabic
                            page forces direction:ltr on the whole contact block AND on
                            both accordions (Elementor custom CSS), so the AR page keeps
                            this exact LTR layout; only the header/footer are mirrored.
                            post-766.css is otherwise identical to post-12.css (same
                            values; only the form widget id differs: 1911bbe → 4097793).
   Values are the Elementor source values (vw units on desktop, px overrides at
   ≤1024px / ≤767px) from post-12.css + the widget defaults (widget-form,
   widget-icon-list, widget-nested-accordion, hello-elementor forms). Heading levels
   (h1/h2) follow the live DOM. Everything uses logical properties.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Contact block (container 196980b, boxed: outer padding-inline 10px,
      inner padding-block 10px, content max-width 80vw)
   -------------------------------------------------------------------------- */
.contact {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  margin-block: 40px;
  padding-inline: var(--con-pad);
}
.contact__inner {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  gap: 30px 120px;
  width: 100%;
  max-width: min(100%, var(--container-max));
  margin-inline: auto;
  padding-block: var(--con-pad);
}
/* the two 50% columns (926787a / 5a18fbb): flex 0 1 auto → 516px each at 1440 */
.contact__main,
.contact__aside {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: var(--widget-gap);
  width: 50%;
  min-width: 0;
  padding: var(--con-pad);
}
@media (max-width: 1024px) {
  .contact { margin-block: 0; }
  .contact__inner { flex-direction: column-reverse; }
  .contact__main,
  .contact__aside { width: 100%; }
}

/* headings (heading widgets 96d19d1 / e4ae7d8 / f8e1c34) */
.contact__title,
.contact__lead,
.faq__title,
.faq__answer {
  margin: 0;
  padding: 0;
  color: var(--color-primary);
  font-family: var(--font-tajawal);
}
.contact__title {
  font-size: 3vw;
  font-weight: 700;
  line-height: 3vw;
  text-align: center;
}
.contact__lead {
  font-size: 1.2vw;
  font-weight: 500;
  line-height: 1.5vw;
  text-align: center;
}
/* the live site ends Arabic sentences with an invisible "س" (font-size:0) so the
   trailing "!" / "." resolves as RTL and stays at the end of the sentence */
.contact__hidden-letter,
.faq__hidden-letter { font-size: 0; }
@media (max-width: 1024px) {
  .contact__title { font-size: 36px; line-height: 44px; }
  .contact__lead  { font-size: 19px; line-height: 24px; }
}
@media (max-width: 767px) {
  .contact__title { font-size: 32px; line-height: 1.2em; }
  .contact__lead  { font-size: 16px; line-height: 24px; }
}

/* illustration (image widget 403b4c7: centred, img width 100%) */
.contact__figure {
  display: block;
  margin: 0;
  text-align: center;
}
.contact__img {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* grey rounded box around the contact list (icon-list 3750392, tablet + mobile only;
   the widget container carries margin-top 20px / padding 30px / radius 13px) */
.contact__box {
  display: block;
  margin-block-start: 20px;
  padding: 30px;
  border-radius: 13px;
  background-color: #CECECE47;
  direction: ltr;     /* live custom CSS: the phone/mail lines stay LTR in both languages */
}

/* --------------------------------------------------------------------------
   2. Form (form widget 1911bbe: labels above, stretched submit, 10px column
      gap → ±5px, 1vw row spacing; custom CSS: label flex space-between
      margin-top 22px, button margin-top 20px, fields margin-top -10px ≤767px)
   -------------------------------------------------------------------------- */
.form {
  display: block;
  width: 100%;
  max-width: 100%;
}
.form__fields {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -5px;
  margin-block-end: -1vw;
}
.form__group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  min-height: 1px;
  margin-block-end: 1vw;
  padding-inline: 5px;
}
.form__group--submit { align-items: flex-end; }
.form__label {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  margin-block-start: 22px;
  color: var(--color-primary);
  font-family: var(--font-tajawal);
  font-size: 1.4vw;
  font-weight: 500;
  line-height: 1.5vw;
  cursor: pointer;
}
.form__label p { margin-block: 0 .9rem; }   /* theme <p> margin, kept by the live site */
.form__group .form__field {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  min-height: 40px;
  border: 2px solid var(--color-accent);
  border-radius: 3px;
  background-color: #fff;
  color: var(--color-primary);
  font-family: var(--font-tajawal);
  font-size: var(--type-accent-size);
  font-weight: var(--type-accent-weight);
  line-height: 1.4;
  vertical-align: middle;
  transition: all .3s;
}
.form__group .form__input    { padding: .5rem 1rem; }   /* theme input padding wins on the live site */
.form__group .form__textarea { padding: 5px 14px; }     /* Elementor .elementor-field-textual */
.form__group .form__field:focus {
  border-color: var(--color-accent);
  outline: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
}
.form__group .form__field::placeholder {
  color: inherit;
  font-family: inherit;
  opacity: .6;
}
.form__group--error .form__field { border-color: #d9534f; }

/* SUBMIT button (stretched: flex-basis 100%) */
.form__group .form__submit,
.form__group .form__submit:focus {
  display: block;
  flex: 0 1 100%;
  width: auto;
  min-height: 40px;
  margin: 20px 0 0;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background-color: var(--color-accent);
  color: var(--color-primary);
  fill: #fff;
  font-family: var(--font-tajawal);
  font-size: 1.2vw;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: all .3s;
}
.form__group .form__submit:hover {
  background-color: var(--color-primary);
  color: #fff;
}
.form__submit-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.form__submit-text { white-space: normal; }

/* result line (Elementor .elementor-message: text typography, line-height 1, margin 10px 0) */
.form__message {
  margin: 10px 0;
  font-family: var(--font-tajawal);
  font-size: var(--type-text-size);
  font-weight: var(--type-text-weight);
  line-height: 1;
}
.form__message--success { color: #5cb85c; }
.form__message--error   { color: #d9534f; }

@media (max-width: 1024px) {
  .form__label { font-size: 22px; line-height: 24px; }
  .form__group .form__submit,
  .form__group .form__submit:focus { font-size: 22px; line-height: 24px; }
}
@media (max-width: 767px) {
  .form__group .form__field { margin-block-start: -10px; }
  .form__group .form__submit,
  .form__group .form__submit:focus { font-size: 18px; }
}

/* --------------------------------------------------------------------------
   3. Contact details list (icon-list widgets de2d979 / 3750392: 24px icons,
      10px item spacing, Poppins 700, text colour primary)
   -------------------------------------------------------------------------- */
.contact-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.contact-list__item {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.contact-list__item:not(:last-child)  { padding-block-end: 5px; }
.contact-list__item:not(:first-child) { margin-block-start: 5px; }
.contact-list__link {
  display: flex;
  align-items: center;
  width: 100%;
  font-family: "Poppins", sans-serif;
  font-size: 1.1vw;
  font-weight: 700;
  line-height: 1.3vw;
}
.contact-list__icon {
  position: relative;
  display: flex;
}
.contact-list__icon svg {
  display: block;
  width: 24px;
  height: 24px;
  margin-inline-end: 6px;      /* icon-size * .25 */
  fill: var(--color-primary);  /* the paths carry their own fill="#90DDE9" */
  transition: fill .3s;
}
.contact-list__text {
  align-self: center;
  padding-inline-start: 5px;
  color: var(--color-primary);
  transition: color .3s;
}
.contact-list--box .contact-list__link {
  font-size: 16px;
  line-height: 24px;
}
@media (max-width: 1024px) {
  .contact-list__link { font-size: 16px; line-height: 20px; }
}

/* --------------------------------------------------------------------------
   4. FAQ (container aca7137: gradient background, padding 5vw, content
      centred; nested-accordion widgets da8d8fc (desktop/tablet) and b647f8c (mobile))
   -------------------------------------------------------------------------- */
.faq {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  padding-inline: 5vw;
  background-color: transparent;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #0000004F 100%);
}
.faq__inner {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: var(--widget-gap);
  width: 100%;
  max-width: min(100%, var(--container-max));
  margin-inline: auto;
  padding-block: 5vw;
}
.faq__title {
  font-size: 3vw;
  font-weight: 700;
  line-height: 4vw;
  text-align: center;
}
@media (max-width: 1024px) {
  .faq { padding-inline: 20px; }
  .faq__inner { padding-block: 80px 75px; }
  .faq__title { font-size: 40px; line-height: 44px; }
}

/* accordion */
.faq__list {
  width: 100%;
  max-width: 100%;
}
.faq__item {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-block-end: 1vw;               /* custom CSS on da8d8fc (every item) */
}
.faq__list--mobile .faq__item { margin-block-end: 0; }
.faq__list--mobile .faq__item:not(:last-child) { margin-block-end: 14px; }   /* widget default spacing */

.faq__summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0 10px;
  padding: 18px 24px;
  border: none;
  border-radius: 12px;
  background-color: #fff;
  color: #1f2124;
  list-style: none;
  cursor: pointer;
}
.faq__summary::-webkit-details-marker { display: none; }
.faq__summary > span { cursor: pointer; }
.faq__header {
  display: flex;
  flex-grow: 1;              /* width: -webkit-fill-available on the live site */
  min-width: 0;
}
.faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-family: var(--font-tajawal);
  font-size: 1.3vw;
  font-weight: 700;
  line-height: 2vw;
}
.faq__question p { margin-block: 0; }
.faq__question p:last-child { text-align: end; }          /* the Arabic half of a bilingual title */
.faq__item--ar .faq__question {
  justify-content: flex-end;
  text-align: end;
}
/* chevron (icon position end; size 1vw desktop / 2vw tablet / 15px mobile; colour = kit "text") */
.faq__icon {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: fit-content;
}
.faq__icon > span {
  display: flex;
  height: 1vw;
  width: auto;
}
.faq__icon svg {
  display: block;
  height: 1vw;
  width: auto;
  fill: var(--color-text);
}
.faq__item[open]       > .faq__summary .faq__icon-closed,
.faq__item:not([open]) > .faq__summary .faq__icon-opened { display: none; }

/* answer panel (containers 48c7dba…: row, padding 10px 14px, radius 0 0 12px 12px,
   pulled 20px up under the title so the open item reads as one card) */
.faq__content {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
  margin-block-start: -20px;
  padding: 10px 14px;
  border: none;
  border-radius: 0 0 12px 12px;
  background-color: #fff;
}
.faq__col {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: var(--widget-gap);
  width: 50%;
  min-width: 0;
  padding: var(--con-pad);
}
.faq__answer {
  color: #3C3C43D9;
  font-size: 1.2vw;
  font-weight: 500;
  line-height: 1.4vw;
  text-align: start;
}
.faq__answer--ar {
  font-size: 1vw;
  text-align: end;
}
@media (max-width: 1024px) {
  .faq__question { font-size: 18px; line-height: 24px; }
  .faq__icon > span,
  .faq__icon svg { height: 2vw; }
  .faq__answer { font-size: 20px; line-height: 24px; }
  .faq__answer--ar { font-size: 16px; }
}
@media (max-width: 767px) {
  .faq__question { font-size: 16px; line-height: 1.1em; }
  .faq__icon > span,
  .faq__icon svg { height: 15px; }
  .faq__content { flex-wrap: wrap; }
  .faq__col { width: 100%; }
  .faq__answer { font-size: 16px; line-height: 1.1em; }
  .faq__answer--justify { text-align: justify; }
  .faq__answer--start   { text-align: start; }   /* AR page: heading 1884b0d is text-align:left (LTR context) */
}

/* --------------------------------------------------------------------------
   5. RTL (Arabic) overrides — the live AR page (post 766) keeps the contact
      block and both accordions LTR via custom CSS (containers 196980b, widgets
      3750392 / da8d8fc / b647f8c); nothing else differs except the one mobile
      answer noted above (use .faq__answer--start instead of --justify on that
      item in contact.ar.html).
   -------------------------------------------------------------------------- */
[dir="rtl"] .contact,
[dir="rtl"] .faq__list { direction: ltr; }

/* Honeypot field for the contact form backend (api/contact.js): clipped to nothing in place (moving it
   off-screen would widen the RTL page), hidden from assistive tech and never focused by people. */
.form__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}