/* Brand kit §4: Albert Sans only, site-wide — one family, weight/size carry
   all hierarchy (headings, narrative copy, functional UI alike). */
body {
  font-family: "Albert Sans", sans-serif;
}

.text-arabic {
  font-size: 2.0rem;
  line-height: 1.8;
  direction: rtl;
}

@media (min-width: 1024px) {
  .text-arabic {
    font-size: 2.5rem;
  }
}

.carousel-track {
  display: flex;
  width: max-content;
}

.carousel-wrapper:hover .carousel-track {
  animation-play-state: paused;
}

@keyframes carousel-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-carousel-scroll {
  animation: carousel-scroll 30s linear infinite;
}

.reveal-element {
  opacity: 0;
  transform: translateY(20px);
  transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-element.active {
  opacity: 1;
  transform: translateY(0);
}

/* smoother animation for the menu panel */
#mobileMenu > div {
  animation: menuIn 180ms ease-out;
}

@keyframes menuIn {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* =========================
   Header: full-width contents + soft frosted bar (2026-10)
   Contents span the whole screen (the old 1400px container is lifted). The
   solid state is a soft, translucent bar with rounded bottom corners and a
   long faint shadow instead of a hard border line; it eases between states.
   The transparent-over-hero state (site.src.css) still wins via !important.
   ========================= */

#siteHeader > div {
  max-width: none;
  padding-left: clamp(20px, 3vw, 56px);
  padding-right: clamp(20px, 3vw, 56px);
}

#siteHeader {
  border-bottom-color: transparent;
  transition: transform 280ms ease-out,
              background-color 600ms cubic-bezier(0.22, 1, 0.36, 1),
              border-radius 600ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 600ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

#siteHeader:not(.header--transparent) {
  background-color: rgba(247, 243, 239, 0.84);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: 0 0 24px 24px;
  box-shadow: 0 16px 32px -26px rgba(62, 52, 44, 0.35);
}

.dark #siteHeader:not(.header--transparent) {
  background-color: rgba(31, 31, 31, 0.8);
  box-shadow: 0 16px 32px -26px rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  #siteHeader { transition: none; }
}


/* =========================
   Footer: keep the brand and copyright on one line and tighten the link gaps
   on laptop-width windows (1024-1279px), where six links at 48px gaps wrapped
   the brand name and pushed "Terms & Conditions" onto a second row.
   ========================= */

.footer-brand,
.footer-copy {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .footer-row {
    gap: 1.5rem;
  }

  .footer-links {
    gap: 0.75rem 1.5rem;
  }
}


/* Public site is light-mode only: keep native controls and scrollbars light. */
:root {
  color-scheme: light;
}