/* 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;
}

/* 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; }