/* Additions to the original theme CSS. Loaded after theme.css and theme-ltr/rtl.css.
   1. Base slider styles (the original used Swiper's CSS from unpkg).
   2. Icon glyphs for the footer social links (the original SVG sprite was not archived).
   3. Accessibility fixes that do not change the look: buttons that replace clickable
      divs/headings, visible keyboard focus, reduced motion.
   4. Fallback backgrounds for banner images that the archive does not contain. */

/* 1. Sliders */
.swiper-container,
.swiper-container-photos { position: relative; overflow: hidden; z-index: 1; }
.swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition: transform .5s ease; box-sizing: content-box; }
.swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; }
.swiper-pagination,
.swiper-pagination-photos { text-align: center; z-index: 10; }
.swiper-pagination-bullet {
  width: 8px; height: 8px; display: inline-block; border-radius: 50%;
  background: #000; opacity: .2; margin: 0 4px; padding: 0; border: 0; cursor: pointer;
}
.swiper-pagination-bullet-active { opacity: 1; background: var(--color-primary, #92298d); }
/* 24px tap area around the 8px dots without changing how they look */
.swiper-pagination-bullet { position: relative; }
.swiper-pagination-bullet::before { content: ''; position: absolute; inset: -8px; }

/* 2. Social icons */
.icon .fa { display: inline-block; font: normal normal normal 16px/1 FontAwesome; width: 16px; height: 16px; text-align: center; color: var(--color-neutral-0, #fff); -webkit-font-smoothing: antialiased; }
.fa-youtube-play::before { content: '\f16a'; }
.fa-facebook::before { content: '\f09a'; }
.fa-twitter::before { content: '\f099'; }
.fa-linkedin::before { content: '\f0e1'; }

/* 3. Accessibility */
.accordion__item--title button {
  all: inherit; display: block; width: 100%; cursor: pointer; text-align: inherit;
}
.accordion__item--title button:focus-visible,
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid #418ecc; outline-offset: 2px;
}
/* The theme hides #btnBurgerMenu everywhere (mobile uses the bottom bar); sizes kept for the close button. */
.main-header__burger-menu svg, #btnCloseMenu svg { width: 24px; height: 24px; fill: currentColor; display: block; }
#btnCloseMenu { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; inset-inline-start: 8px; top: -100px; z-index: 10000; background: #1c0f5f; color: #fff; padding: 8px 16px; border-radius: 6px; }
.skip-link:focus { top: 8px; }
.mail-note { font-size: .875rem; color: #5d5a70; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* 4. Banner images missing from the archive (purple-banner.jpg, inner-page-banner.jpeg,
   darkest-banner.jpg). Colours are taken from the brand gradient; documented as a
   reconstruction in docs/RECOVERY_REPORT.md. The layout checks for the real file at build
   time, so dropping it into public/wp-content/uploads/2021/05/ restores it on the next build. */
.hero-section.hero--purple { background-color: #4a1660; background-image: linear-gradient(120deg, #1c0f5f 0%, #5b1f74 55%, #92298d 100%); }
.hero-section.hero--inner { background-color: #2a1a5e; background-image: linear-gradient(120deg, #213f7d 0%, #3a2470 60%, #92298d 100%); }
.hero-section.hero--darkest { background-color: #1c0f5f; background-image: linear-gradient(120deg, #120a3d 0%, #1c0f5f 70%, #2c1a73 100%); }
.hero-section.hero--plain { background-color: #1c0f5f; }
.contact-form .mail-note { font-size: 14px; line-height: 1.5; margin-top: 8px; color: #5d5a70; }
/* Original grey on white measured below 4.5:1; darkened for readability (WCAG AA). */
body .card .card__date-text, body .card .card__description { color: #4a4760 !important; }
/* Links inside running text are underlined so they don't rely on colour alone (WCAG 1.4.1). */
.blog-post-content a, .terms-section a, .accordion__item--description a { text-decoration: underline; }

/* 5. Tablet header (768–1199px). In the original theme the menu did not fit at these widths:
   Arabic labels wrapped onto two lines and links ran into the logo. Here the logo keeps its
   size, the menu stays on one line, and spacing tightens. Phone and desktop are unchanged. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .main-header__container { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 16px; }
  .main-header__container > h1 { flex: 0 0 auto; }
  .main-header .global-navigation { flex: 0 1 auto; min-width: 0; }
  .main-header .navbar { margin: 0; flex-wrap: nowrap; align-items: center; }
  .main-header .navbar > li { flex: 0 0 auto; }
  .main-header .navbar > li > a.navbar__link { padding: 8px 10px; font-size: 15px; line-height: 1.4; white-space: nowrap; }
  .main-header .navbar > li > a.button { padding: 8px 16px; font-size: 15px; line-height: 1.4; white-space: nowrap; }
  html[dir='ltr'] .main-header .navbar__item__login { margin-right: 8px; }
  html[dir='rtl'] .main-header .navbar__item__login { margin-left: 8px; margin-right: 0; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .main-header .navbar > li > a.navbar__link { padding: 8px 7px; font-size: 14px; }
  .main-header .navbar > li > a.button { padding: 7px 12px; font-size: 14px; }
}