/* ===========================
   DIMA SITE KIT – MEGA MENU
   =========================== */

@property --wght {
  syntax: "<number>";
  inherits: true;
  initial-value: 500;
}
/* --- Header / top-level nav --- */

header {
  position: sticky;
  top: 13px;
  background-color: white;
  z-index: 1000;
  box-shadow: 0px 4px 4px 0px #00000040;
  border-radius: 3px;
  max-width: 100%;
  margin: 0 auto;
}

header .wp-block-group {
  padding: 0;
}
.dsk-menu li > p {
  display: contents;
  margin: 0;
}

nav.dsk-nav {
  width: 100%;
}
.dsk-menu {
  /* position: static;
  z-index: 100;
  overflow: visible; */
}
ul.dsk-menu {
  list-style: none;
  display: flex;
  gap: 32px;
  margin: 0;
	justify-content: center
}
.dsk-menu .dsk-menu {
  display: flex;
  gap: 28px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dsk-menu .dsk-menu > li {
  list-style: none;
  /* IMPORTANT: keep static so the panel can span the full header width */
  position: static;
  display: flex;
  align-items: center;
}

.dsk-item {
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.dsk-menu .dsk-item .dsk-link {
  text-decoration: none;
}

.dsk-menu .dsk-item > .dsk-link {
  display: inline-block;
  font-size: 14px;
  padding: 14px 8px;
  text-decoration: none;
  color: inherit;
  transition: font-weight 0.6s ease-in-out;
}

.dsk-link {
  /* use variable axis if your font is variable */
  font-variation-settings: "wght" var(--wght);
  transition: color 0.2s ease;
}

/* On LI hover, raise the weight target */
.dsk-item:hover .dsk-link,
.dsk-item.is-hover .dsk-link {
  /* JS adds .is-hover too */
  /* --wght: 700; */
}

/* --- Mega panel shell --- */
.dsk-mega-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  padding: 26px;

  /* padding: 60px 44px 26px 160px; */
  /* opacity: 1;
  visibility: visible; */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s ease;
  z-index: 9999;
  cursor: default;
}

.dsk-mega-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -20px;
  height: 45px;
  /* transparent, captures hover so the item doesn't "lose" hover */
  background: transparent;
  cursor: default;
}

/* Open behavior: hover (desktop) and JS toggle (mobile/editor) */
.dsk-item.has-mega:hover > .dsk-mega-panel,
.dsk-item.has-mega:focus-within > .dsk-mega-panel,
.dsk-item.has-mega.is-open > .dsk-mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dsk-mega-inner {
  max-width: 1500px !important;
  margin-left: auto !important;
}

/* -------------------------------------------------------
   SOLUTIONS TEMPLATE
   hero row (image+cta left, title+desc right) + cards
   ------------------------------------------------------- */

.dsk-mega-panel.dsk-tpl-solutions .dsk-mega-inner {
  display: grid;
  /* hero row is full width; cards are a full width row below */
  grid-template-columns: 1fr 2fr;
  gap: 40px;
}

/* HERO ROW */
.dsk-sol-heroRow {
  /* grid-column: 1 / -1; */
  display: grid;
  grid-template-columns: 1fr 1fr; /* image column + copy column */
  gap: 19px;
  align-items: start;
  display: none;
}

/* Hero wrapper should be the element we animate */
.dsk-sol-hero-media {
  display: block;
  width: 17vw;
  border-radius: 4px;
  overflow: hidden; /* keeps image corners rounded */
  border: 1px solid black; /* important */
  max-width: 330px;
}

/* Keep your border on the image; remove image shadow so wrapper shadow is visible */
.dsk-sol-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.dsk-sol-hero-cta {
  display: inline-block;
  margin-top: 18px;
  padding: 14px 28px;
  border-radius: 8px;
  background: #11a8cf;
  width: 50%;
  text-align: center;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.dsk-sol-hero-right {
  padding-top: 8px;
}
.dsk-sol-hero-title {
  margin-top: 40px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
}
.dsk-sol-hero-desc {
  color: #6b7280;
  max-width: 42ch;
  font-size: 10px;
  font-weight: 500;
}

/* CARDS GRID */
.dsk-sol-cards {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
/*   gap: 15px 24px; */
  align-content: start;
}

/* keep markup valid but visually flatten any depth-1 groups */
.dsk-sol-group {
  display: contents;
}

.dsk-sol-card {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 24px;
  align-items: center;
  min-height: 112px;
}

.dsk-sol-card-media {
  width: 91px;
  height: 91px;
}

.dsk-sol-card-media img {
  width: 100%;
  height: auto;
  display: block;
}

.dsk-sol-card-title {
  color: #111827;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

.dsk-sol-card-title:hover {
  text-decoration: underline;
}

.dsk-sol-card-desc {
  color: #6b7280;
  font-size: 10px;
  font-weight: 500;

  margin-top: 2px;
}

/* -------------------------------------------------------
   GRID / COLUMNS TEMPLATE
   columns on the left + optional right illustration
   ------------------------------------------------------- */

.dsk-mega-panel.dsk-tpl-grid .dsk-mega-inner {
  position: relative;
}

.dsk-grid-wrap {
  display: grid;
  grid-template-columns: 1fr auto; /* columns + (optional) right image */
  gap: 48px;
  align-items: start;
}

.dsk-grid-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 72px;
  position: relative;
}

/* optional vertical separator */
.dsk-grid-wrap.show-sep .dsk-grid-cols {
  background: linear-gradient(#e5e7eb, #e5e7eb) 50% / 1px 100% no-repeat;
}

.dsk-grid-col-title {
  font-weight: 700;
  font-size: 26px;
  margin-bottom: 25px;
  position: relative;
}
.dsk-grid-col-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: #0ea5b7;
  margin-top: 6px;
}

.dsk-grid-col-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.dsk-grid-col-list ul.sub-menu.depth-1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  list-style: none;
  padding: 0;
  grid-gap: 20px 25px;
}

.dsk-grid-row a {
  color: inherit;
  text-decoration: none;
}
.dsk-grid-row a:hover {
  text-decoration: underline;
}

.dsk-grid-right-img {
  max-width: 540px;
  height: auto;
  display: block;
}

/* ---------------------------------
   RESPONSIVE BREAKPOINTS
   --------------------------------- */

@media (max-width: 1200px) {
  .dsk-sol-heroRow {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1024px) {
  header {
    top: 0;
  }
  .dsk-grid-cols {
    grid-template-columns: 1fr;
  } /* stack columns */
  .dsk-sol-heroRow {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .dsk-sol-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .dsk-sol-cards {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 960px) and (max-width: 1024px) {
  .dsk-mega-panel.dsk-tpl-solutions .dsk-mega-inner {
    grid-template-columns: 1fr 3fr;
  }
}

:lang(ar) .dsk-mega-inner {
  margin-right: auto !important;
  margin-left: 0 !important;
}