/* Al-Ayn International design polish (Nov 2026 draft).
   CSS only: no text, images or links change. Loaded after the UK style-base.css and the
   "Site visual polish" snippet, on both the English and the Arabic (/ar/) site.
   Letter-spacing is never added to Arabic text: it breaks the joins between letters. */

:root {
  --ai-teal: #3094ac;
  --ai-teal-dark: #21768b;
  --ai-ink: #1f2a30;
  --ai-text: #4a4f55;
  --ai-soft: #f4f7f8;
  --ai-line: #e3e9ec;
  --ai-yellow: #ffc215;
  --ai-radius: 16px;
  --ai-shadow: 0 10px 30px -14px rgba(16, 42, 56, .28);
  --ai-shadow-hover: 0 20px 44px -16px rgba(16, 42, 56, .38);
  --ai-ease: cubic-bezier(.2, .7, .2, 1);
}

::selection { background: #ffe08a; color: var(--ai-ink); }

/* ---------- Typography ---------- */
.gutenberg__wrap .content__wrapper .content__box p,
.gutenberg__wrap .content__wrapper .content__box li {
  line-height: 1.75;
  text-wrap: pretty;
}
.gutenberg__wrap .content__wrapper h1,
.gutenberg__wrap .content__wrapper h2,
.gutenberg__wrap .content__wrapper h3 {
  text-wrap: balance;
}
.gutenberg__wrap .content__wrapper h2:not(:lang(ar)) { letter-spacing: -.015em; }
.gutenberg__wrap .content__wrapper :lang(ar) { letter-spacing: 0 !important; }
.gutenberg__wrap .content__wrapper .content__box p:lang(ar),
.gutenberg__wrap .content__wrapper .content__box li:lang(ar) { line-height: 1.95; }

/* Centred text blocks: keep lines to a readable length instead of running the full 1140px */
.gutenberg__wrap .contentEditorContainer .editor__box.center .col_1_1.content__box > p,
.gutenberg__wrap .contentEditorContainer .editor__box.center .col_1_1.content__box > h3,
.gutenberg__wrap .contentEditorContainer .editor__box.center .col_1_1.content__box > h4,
.gutenberg__wrap .contentEditorContainer .editor__box.center .col_1_1.content__box > ul {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
/* Lead sentence under a section title ("Our story" and similar): lighter and calmer than bold */
.gutenberg__wrap .contentEditorContainer .editor__box.center.dark .col_1_1.content__box > h3 {
  font-family: 'poppinsmedium', sans-serif;
  line-height: 1.5;
  color: var(--ai-ink);
}

/* ---------- Hero and page banners: keep white text legible on busy photos ---------- */
.gutenberg__wrap .banner__carousel .banner_content_container.white h1,
.gutenberg__wrap .banner__carousel .banner_content_container.white h2,
.gutenberg__wrap .banner__carousel .banner_content_container.white p,
.gutenberg__wrap .banner__carousel .banner_content_container.white span {
  text-shadow: 0 2px 22px rgba(4, 20, 34, .45);
}

/* ---------- Buttons ---------- */
.gutenberg__wrap .content__wrapper .button {
  border-radius: 12px;
  transition: background-color .2s ease, color .2s ease, transform .2s var(--ai-ease), box-shadow .2s ease;
}
@media (hover: hover) {
  .gutenberg__wrap .content__wrapper .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -10px rgba(16, 42, 56, .45);
  }
  .gutenberg__wrap .content__wrapper .button.blue.filled:hover,
  .gutenberg__wrap .content__wrapper .button.default.filled:hover {
    background-color: var(--ai-teal-dark);
    border-color: var(--ai-teal-dark);
  }
}

/* ---------- Image and text sections ---------- */
.gutenberg__wrap .contentImageSplitText .image__box img {
  border-radius: var(--ai-radius);
  box-shadow: var(--ai-shadow);
}

/* ---------- Image cards ("Our work" and similar) ---------- */
.gutenberg__wrap .contentImagetextbox .box__wrapper {
  background: #fff;
  border-radius: var(--ai-radius);
  overflow: hidden;
  box-shadow: var(--ai-shadow);
  transition: transform .3s var(--ai-ease), box-shadow .3s ease;
}
.gutenberg__wrap .contentImagetextbox .box__wrapper figure { overflow: hidden; margin: 0; }
.gutenberg__wrap .contentImagetextbox .box__wrapper figure img {
  display: block;
  width: 100%;
  transition: transform .6s var(--ai-ease);
}
.gutenberg__wrap .contentImagetextbox .box__wrapper article h3 a {
  text-decoration: none;
  color: var(--ai-ink);
  font-weight: 700;
  transition: color .2s ease;
}
@media (hover: hover) {
  .gutenberg__wrap .contentImagetextbox .box__wrapper:hover {
    transform: translateY(-4px);
    box-shadow: var(--ai-shadow-hover);
  }
  .gutenberg__wrap .contentImagetextbox .box__wrapper:hover figure img { transform: scale(1.05); }
  .gutenberg__wrap .contentImagetextbox .box__wrapper:hover article h3 a { color: var(--ai-teal); }
}

/* ---------- FAQ boxes ---------- */
.gutenberg__wrap .faq_content_box .accordion-toggle { transition: color .2s ease; }

/* ---------- "Visit a national organisation" country picker ---------- */
.gutenberg__wrap .location_dropdown_wrap select {
  border-radius: 12px;
  border: 1px solid var(--ai-line);
  min-height: 52px;
  font-family: inherit;
  font-weight: 600;
  color: var(--ai-ink);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .45);
}
.gutenberg__wrap .location_dropdown_wrap select:focus { border-color: var(--ai-teal); outline: none; box-shadow: 0 0 0 3px rgba(48, 148, 172, .35); }
.gutenberg__wrap .office_location .go_to_website_button { margin-top: 18px; }

/* ---------- Footer ---------- */
.gutenberg__wrap footer .footer_sections { padding-top: 12px; padding-bottom: 12px; }
.gutenberg__wrap footer .footer_sections h3 { margin-bottom: 18px; }
.gutenberg__wrap footer .footer_sections a {
  opacity: .85;
  text-underline-offset: 3px;
  transition: opacity .2s ease;
}
.gutenberg__wrap footer .footer_sections a:hover { opacity: 1; text-decoration: underline; }

/* Phones: the footer's blank spacer headings (columns 2, 3 and 5 continue the list beside them)
   leave big empty gaps once the columns stack, so hide them and close the gap. */
@media (max-width: 958px) {
  .gutenberg__wrap footer .footer_sections > .footer__box:nth-child(2) > h3,
  .gutenberg__wrap footer .footer_sections > .footer__box:nth-child(3) > h3,
  .gutenberg__wrap footer .footer_sections > .footer__box:nth-child(5) > h3 { display: none; }
  .gutenberg__wrap footer .footer_sections > .footer__box:nth-child(1),
  .gutenberg__wrap footer .footer_sections > .footer__box:nth-child(2),
  .gutenberg__wrap footer .footer_sections > .footer__box:nth-child(4) { margin-bottom: 0; padding-bottom: 0; }
  .gutenberg__wrap footer .footer_sections > .footer__box:nth-child(1) ul,
  .gutenberg__wrap footer .footer_sections > .footer__box:nth-child(2) ul,
  .gutenberg__wrap footer .footer_sections > .footer__box:nth-child(4) ul { margin-bottom: 0; padding-bottom: 0; }

  /* Lead sentence: a little smaller on phones */
  .gutenberg__wrap .contentEditorContainer .editor__box.center.dark .col_1_1.content__box > h3 { font-size: 20px; }
}

/* ---------- Keyboard focus ---------- */
.gutenberg__wrap .content__wrapper a:focus-visible,
.gutenberg__wrap .content__wrapper button:focus-visible,
.gutenberg__wrap .content__wrapper select:focus-visible,
.gutenberg__wrap footer a:focus-visible {
  outline: 3px solid var(--ai-yellow);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .gutenberg__wrap .content__wrapper .button,
  .gutenberg__wrap .contentImagetextbox .box__wrapper,
  .gutenberg__wrap .contentImagetextbox .box__wrapper figure img { transition: none; }
  .gutenberg__wrap .content__wrapper .button:hover,
  .gutenberg__wrap .contentImagetextbox .box__wrapper:hover,
  .gutenberg__wrap .contentImagetextbox .box__wrapper:hover figure img { transform: none; }
}