/* ==== Services-bundles hero: 2-col layout with orbiting star component ==== */

/* The shared CSS forces .cap-hero[data-theme="light"] .cap-hero__inner to
   display:block !important.  Override it ONLY when our orbit is present. */
.cap-hero[data-theme="light"] .cap-hero__inner:has(> .cap-hero__orbit){
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  max-width: 1480px !important;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 900px){
  .cap-hero[data-theme="light"] .cap-hero__inner:has(> .cap-hero__orbit){
    grid-template-columns: 1fr !important;
  }
}

/* Title spans stack as two natural rows. Block layout avoids the inline
   wrap quirk and also prevents the per-character text-pressure split from
   shaping the Arabic title incorrectly across an injected join space. */
.cap-hero:has(.cap-hero__orbit) .cap-hero__title-line{
  display: block !important;
  width: auto !important;
}
/* Arabic first line: shared CSS leaves this inheriting a near-white cream
   on the light hero, which made the line invisible on the cream background.
   Force the brand dark text color; --red modifier on line 2 stays untouched. */
.cap-hero[data-theme="light"] .cap-hero__title-line:not(.cap-hero__title-line--red){
  color: #0F0D0B !important;
  -webkit-text-fill-color: #0F0D0B !important;
}

/* The original 5 floating stars cluster around the title and clash with the
   orbit — hide them on services-bundles only.  The orbit is the focal motion. */
.cap-hero:has(.cap-hero__orbit) .cap-hero__stars{
  display: none !important;
}

/* ---- Orbit component ---- */
.cap-hero__orbit{
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  pointer-events: none;
}
@media (max-width: 900px){
  .cap-hero__orbit{ max-width: 260px; margin-top: 1rem; }
}
.cap-hero__orbit-core{
  /* Single knob to resize the whole 3D star. 3 = 3x bigger. */
  --core-scale: 3;
  position: absolute;
  top: 50%; left: 50%;
  width:  calc(88px * var(--core-scale));
  height: calc(88px * var(--core-scale));
  transform: translate(-50%, -50%);
  perspective: calc(900px * var(--core-scale));
  pointer-events: none;
  filter: drop-shadow(0 calc(8px * var(--core-scale)) calc(22px * var(--core-scale)) rgba(255,36,60,0.25));
}
.cap-hero__orbit-core__inner{
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: cap-orbit-core-rotate 9s linear infinite;
  will-change: transform;
}
.cap-hero__orbit-core__slice{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  fill: var(--red);
  /* translateZ is multiplied by --core-scale so the extrusion depth grows
   * with the overall star size, keeping the 3D look proportional. */
  transform: rotateY(var(--cs-ry, 0deg))
             translateZ(calc(var(--cs-z, 0px) * var(--core-scale)))
             scale(var(--cs-s, 1));
  backface-visibility: visible;
}
.cap-hero__orbit-core__slice[data-core]{
  filter: drop-shadow(0 0 calc(14px * var(--core-scale)) rgba(255,90,108,0.7))
          drop-shadow(0 0 calc(4px * var(--core-scale))  rgba(255,255,255,0.45));
}
.cap-hero__orbit-ring{
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
}
.cap-hero__orbit-ring--outer{ animation: cap-orbit-rot 38s linear infinite; }
.cap-hero__orbit-ring--mid  { inset: 20%; animation: cap-orbit-rot 24s linear infinite reverse; }
.cap-hero__orbit-star{
  position: absolute;
  fill: var(--red);
  filter: drop-shadow(0 0 10px rgba(255,36,60,0.5));
  will-change: transform;
}
.cap-hero__orbit-star--a{ top: 0;    left: 50%; width: 34px; height: 34px; transform: translate(-50%, -50%); opacity: 0.92; }
.cap-hero__orbit-star--b{ top: 50%; right: 0;  width: 26px; height: 26px; transform: translate( 50%, -50%); opacity: 0.78; }
.cap-hero__orbit-star--c{ bottom: 6%; left: 22%; width: 22px; height: 22px; transform: translate(-50%,  50%); opacity: 0.85; }
.cap-hero__orbit-star--d{ top: 0;    left: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); opacity: 0.85; }
.cap-hero__orbit-star--e{ bottom: 0;  left: 50%; width: 18px; height: 18px; transform: translate(-50%,  50%); opacity: 0.7;  }

@keyframes cap-orbit-rot{
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes cap-orbit-core-rotate{
  from { transform: rotateX(20deg) rotateY(0deg);   }
  to   { transform: rotateX(20deg) rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .cap-hero__orbit-core__inner,
  .cap-hero__orbit-ring--outer,
  .cap-hero__orbit-ring--mid { animation: none !important; }
}

/* === Solutions mega-4 dropdown (added) ========================================
   4-column variant of the existing nav mega menu, plus optional 'sub-title as
   link' styling for clickable category headings.                              */
.nav__dropdown--mega-4 .nav__dropdown-mega-grid{
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}
.nav__dropdown--mega-4{
  /* Center the 4-column dropdown under the Solutions nav item (LTR).
     Override the parent .nav__dropdown--mega left:0 anchoring. */
  left:50%;
  right:auto;
  transform:translate(-50%, -8px);
  min-width:1080px;
  max-width:calc(100vw - 64px);
}
.nav__item-wrap:hover .nav__dropdown--mega-4,
.nav__item-wrap:focus-within .nav__dropdown--mega-4{
  transform:translate(-50%, 0);
}
/* RTL: there's a higher-specificity rule [dir="rtl"] .nav__dropdown--mega
   {right:0 !important} that wins, so use a stronger selector to anchor
   the centered version under the Solutions item in RTL too. */
[dir="rtl"] .nav__dropdown--mega.nav__dropdown--mega-4,
:root[lang="ar"] .nav__dropdown--mega.nav__dropdown--mega-4{
  right:50% !important;
  left:auto !important;
  transform:translate(50%, -8px);
}
[dir="rtl"] .nav__item-wrap:hover .nav__dropdown--mega.nav__dropdown--mega-4,
[dir="rtl"] .nav__item-wrap:focus-within .nav__dropdown--mega.nav__dropdown--mega-4,
:root[lang="ar"] .nav__item-wrap:hover .nav__dropdown--mega.nav__dropdown--mega-4,
:root[lang="ar"] .nav__item-wrap:focus-within .nav__dropdown--mega.nav__dropdown--mega-4{
  transform:translate(50%, 0);
}
.nav__dropdown-title--link{
  color:var(--text);
  text-decoration:none;
  transition:color 0.25s ease;
}
.nav__dropdown-title--link:hover{
  color:var(--red);
}
.m-drawer__sub-title--link{
  /* Inherit base sub-title styling (drawer is dark-themed) but make it a link. */
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(245,242,234,0.55);
  padding:14px 0 8px;
  border-top:1px solid rgba(245,242,234,0.05);
  margin-top:6px;
  display:block;
  text-decoration:none;
  transition:color 0.25s ease;
}
.m-drawer__sub:first-child .m-drawer__sub-title--link:first-child,
.m-drawer__sub-title--link:first-child{
  border-top:0;
  margin-top:0;
  padding-top:6px;
}
.m-drawer__sub-title--link:hover{color:#F5F2EA;}
/* Tablet/mobile fallback for the desktop mega-4 when viewport is narrow but
   the desktop nav is still visible (e.g. ~960–1180px). Drop to 2 columns. */
@media (max-width:1180px){
  .nav__dropdown--mega-4{min-width:0;width:calc(100vw - 64px);}
  .nav__dropdown--mega-4 .nav__dropdown-mega-grid{grid-template-columns:repeat(2,1fr);}
}
/* ============================================================================ */