/* migration.css — small layer added in the Squarespace → VPS lift-and-shift.
   Everything design-level still comes from site.css/custom.css; this file only
   covers the pieces that used to be rendered by Squarespace/Weglot JavaScript. */

/* Pages are static now; never hide content waiting for scripts */
html body { opacity: 1 !important; }

/* Squarespace scroll-in animations never run without their JS — show final state */
[data-animation-role] { opacity: 1 !important; transform: none !important; }

/* Stretched images (section/card fills) — object-fit replaces the positioning JS */
img[data-stretch] {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; top: 0; left: 0;
}

/* Promoted hero headings keep their previous visual size (was h2) */
h1.mig-h1-as-h2 { font-size: var(--heading-2-size, 2.6rem); }

/* ---- Language link (replaces the Weglot dropdown picker) ---- */
.language-picker { display: flex; align-items: center; }
.language-picker .mig-lang-link {
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  font-size: 0.95rem;
  padding: 0.2em 0.6em;
}
html[lang="ar"] .language-picker .mig-lang-link { font-family: 'PT Serif', serif !important; }
html[lang="en"] .language-picker .mig-lang-link { font-family: 'Tajawal', sans-serif; }

/* ---- Testimonial slideshow (replaces UserItemsListBannerSlideshow) ---- */
.mig-carousel { position: relative; padding: 4vw 6vw; text-align: center; }
.mig-slides { position: relative; min-height: 200px; }
.mig-slide { display: none; margin: 0 auto; max-width: 900px; }
.mig-slide--active { display: block; }
.mig-quote p {
  font-family: 'Marcellus', serif;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  line-height: 1.6;
  margin: 0 0 1.2em;
}
html[lang="ar"] .mig-quote p { font-family: 'Lateef', serif !important; }
.mig-quote { margin: 0; }
.mig-attrib p { margin: 0; font-size: 0.9rem; opacity: 0.85; }
.mig-carousel-nav { display: flex; justify-content: center; gap: 2rem; margin-top: 2rem; }
.mig-arrow {
  background: none; border: none; cursor: pointer; color: currentColor;
  width: 44px; height: 18px; padding: 0; opacity: 0.7;
}
.mig-arrow:hover { opacity: 1; }
.mig-arrow svg { width: 100%; height: 100%; display: block; }
.mig-arrow--prev svg { transform: scaleX(-1); }
html[dir="rtl"] .mig-arrow--prev svg { transform: none; }
html[dir="rtl"] .mig-arrow--next svg { transform: scaleX(-1); }

/* ---- Contact form (static rebuild of the Squarespace form block) ---- */
.mig-form-wrapper .field-list { display: block; }
.mig-form-wrapper .form-item { margin-bottom: 1.6rem; }
.mig-form-wrapper fieldset { border: 0; padding: 0; margin: 0 0 1.6rem; }
.mig-form-wrapper legend.title, .mig-form-wrapper label.title { display: block; margin-bottom: 0.4rem; }
.mig-name-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .mig-name-grid { grid-template-columns: 1fr; } }
.mig-form-wrapper label.caption { display: block; font-size: 0.85em; margin-bottom: 0.3rem; }
.mig-form-wrapper .description.required { opacity: 0.6; font-size: 0.8em; }
.mig-form-wrapper .field-element {
  width: 100%; box-sizing: border-box;
  padding: 12px; border: 1px solid #ccc; border-radius: 2px;
  background: #fafafa; color: #000;
  font-family: inherit; font-size: 1rem; line-height: normal;
}
.mig-form-wrapper .field-element:focus { background: #fff; outline: 2px solid currentColor; outline-offset: 1px; }
.mig-form-wrapper textarea.field-element { resize: vertical; min-height: 6em; }
.mig-hp { position: absolute !important; left: -9999px !important; top: -9999px !important; height: 1px; width: 1px; overflow: hidden; }
html[dir="rtl"] .mig-hp { left: auto !important; right: -9999px !important; }
.mig-form-msg { margin-top: 1rem; padding: 0.8rem 1rem; border: 1px solid currentColor; }
.mig-form-msg[hidden] { display: none; }

/* Video embeds are real iframes now; keep intrinsic ratio behaviour */
.sqs-video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

h1.mig-h1-as-h3 { font-size: var(--heading-3-size, 2rem); }
h1.mig-h1-as-h4 { font-size: var(--heading-4-size, 1.4rem); }

/* Shape blocks: size the SVG to its block (visitor.js used to do this).
   Without it the rectangle collapses to the 300x150 SVG default. */
.sqs-block[data-definition-name="website.components.shape"] .sqs-shape {
  width: 100%; height: 100%; top: 0; left: 0;
}
.sqs-block[data-definition-name="website.components.shape"] .sqs-shape rect {
  x: 0; y: 0;
}

/* Header participates in normal document flow. Squarespace positioned it as an
   absolute overlay and pushed the first section down with JS; without that script,
   content in the top ~230px hid behind the header (clipped title on For Audiences). */
#header, header.header { position: relative !important; }
/* The menu overlay keeps covering the full screen regardless of header flow */
.header-menu { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; }

/* Accordion: dropdown behaviour is in site.js; also undo a suspect recovered rule */
.sqs-block-accordion .accordion-item__description { max-width: 100% !important; }

/* Mobile menu overlay: reveal rules (were in a Squarespace header chunk) */
body.header--menu-open .header-menu {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 100;
  pointer-events: auto;
}
.header-menu { transition: opacity .25s ease, visibility .25s ease; }
/* burger -> X */
.header-burger-btn .burger-inner div { transition: transform .25s ease, opacity .2s ease; }
.burger--active .burger-inner .top-bun { transform: translateY(5.5px) rotate(45deg); }
.burger--active .burger-inner .patty { opacity: 0; }
.burger--active .burger-inner .bottom-bun { transform: translateY(-5.5px) rotate(-45deg); }
/* keep the top bar (logo + burger) clickable above the open overlay */
body.header--menu-open .header-menu { z-index: 100; }
body.header--menu-open .header-announcement-bar-wrapper { position: relative; z-index: 101; }

/* ---- Section dividers (v3) ----
   Squarespace generated these clip shapes and layout variables in JS at runtime;
   statically the placeholder clip hid entire section backgrounds. Shapes rebuilt
   from each section's stored divider config, and the following section is pulled
   up behind the divider band so the shape reveals its neighbour's background. */
section[data-section-id="692ab5040058d3260d4b690f"] { --divider-height: 8vw; --z-index: 2; position: relative; z-index: 2 !important; }
section[data-section-id="692ab5040058d3260d4b690f"] .section-border { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8vw), 50% 100%, 0 calc(100% - 8vw)) !important; }
section[data-section-id="692ab5040058d3260d4b690f"] + section { margin-top: -8vw; }
section[data-section-id="692ae87232bd5e680674dae8"] { --divider-height: 6vw; --z-index: 2; position: relative; z-index: 2 !important; }
section[data-section-id="692ae87232bd5e680674dae8"] .section-border { clip-path: polygon(0 0, 100% 0, 100% 100%, 75% calc(100% - 6vw), 50% 100%, 25% calc(100% - 6vw), 0 100%) !important; }
section[data-section-id="692ae87232bd5e680674dae8"] + section { margin-top: -6vw; }
section[data-section-id="692adc478071d54450b62b52"] { --divider-height: 8vw; --z-index: 2; position: relative; z-index: 2 !important; }
section[data-section-id="692adc478071d54450b62b52"] .section-border { clip-path: polygon(0 0, 100% 0, 100% 100%, 93.75% calc(100% - 1.56vw), 87.50% calc(100% - 3.06vw), 81.25% calc(100% - 4.44vw), 75.00% calc(100% - 5.66vw), 68.75% calc(100% - 6.65vw), 62.50% calc(100% - 7.39vw), 56.25% calc(100% - 7.85vw), 50.00% calc(100% - 8.00vw), 43.75% calc(100% - 7.85vw), 37.50% calc(100% - 7.39vw), 31.25% calc(100% - 6.65vw), 25.00% calc(100% - 5.66vw), 18.75% calc(100% - 4.44vw), 12.50% calc(100% - 3.06vw), 6.25% calc(100% - 1.56vw), 0 100%) !important; }
section[data-section-id="692adc478071d54450b62b52"] + section { margin-top: -8vw; }
section[data-section-id="692b37db1ebec665762dd0c0"] { --divider-height: 6vw; --z-index: 2; position: relative; z-index: 2 !important; }
section[data-section-id="692b37db1ebec665762dd0c0"] .section-border { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 50% 100%, 0 calc(100% - 6vw)) !important; }
section[data-section-id="692b37db1ebec665762dd0c0"] + section { margin-top: -6vw; }
section[data-section-id="692b2aa832bd5e68067c954b"] .section-border { clip-path: none !important; }
section[data-section-id="698ca9673f1a1f78d50fb3de"] .section-border { clip-path: none !important; }