/* ==========================================================================
   Detect Ecommerce — Header & Footer
   ========================================================================== */

.de-skip-link{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--de-navy); color:#fff; padding:12px 20px; border-radius:0 0 8px 0;
}
.de-skip-link:focus{ left:0; }

* { box-sizing:border-box; }
html, body{ overflow-x:hidden; max-width:100%; }
body.de-body-locked{ overflow:hidden; }

/* ---------- Header shell ---------- */
.de-header{
  position:sticky; top:0; z-index:999;
  background:rgba(8,21,37,0.0);
  transition:background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
.de-header.de-header--scrolled{
  background:rgba(8,21,37,0.92);
  backdrop-filter:blur(10px);
  box-shadow:0 8px 30px rgba(0,0,0,.25);
}
.de-header__inner{
  max-width:1320px; margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.de-header__logo-fallback{
  font-family:var(--de-font-heading); font-weight:700; font-size:22px; color:#fff; text-decoration:none;
}
.custom-logo-link img{ max-height:44px; width:auto; display:block; }

/* ---------- Primary nav ---------- */
.de-header__nav{ flex:1; display:flex; justify-content:center; }
.de-menu{ list-style:none; display:flex; gap:6px; margin:0; padding:0; position:relative; }
.de-menu-item{ position:relative; }
.de-menu-link{
  display:flex; align-items:center; gap:6px; padding:10px 14px; border-radius:8px;
  color:#EAF0F6; font-family:var(--de-font-body); font-weight:500; font-size:15px;
  text-decoration:none; transition:background-color .15s ease, color .15s ease;
}
.de-menu-link:hover, .de-menu-link:focus-visible{ background:rgba(23,215,180,0.12); color:var(--de-teal); }
.de-menu-link:focus-visible{ outline:2px solid var(--de-teal); outline-offset:2px; }
.de-menu-caret{ width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-3px; }

/* Dropdown (Services level 1) */
.de-dropdown{
  list-style:none; margin:0; padding:10px; position:absolute; top:100%; left:0;
  min-width:260px; background:var(--de-navy-deep); border:1px solid var(--de-border);
  border-radius:12px; box-shadow:0 20px 50px rgba(0,0,0,.4);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.de-menu-item.de-has-dropdown:hover > .de-dropdown,
.de-menu-item.de-has-dropdown:focus-within > .de-dropdown,
.de-menu-item.de-has-dropdown.de-open > .de-dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.de-dropdown .de-menu-link{ width:100%; color:#EAF0F6; }

/* Mega panel (E-commerce Solutions level 2) — real CSS multi-column layout.
   Column boundaries are forced at each synthetic heading item (see
   de_child_insert_mega_menu_headings() in class-de-mega-menu-walker.php),
   so "Store Platforms" / "Marketplaces" / "Growth & Operations" each get
   their own column regardless of how many items are in each group. */
.de-mega-panel{
  list-style:none; margin:0; padding:24px; position:fixed; top:74px; left:50%;
  transform:translateX(-50%) translateY(6px);
  width:760px; max-width:calc(100vw - 48px);
  background:var(--de-navy-deep); border:1px solid var(--de-border); border-radius:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  columns:3; column-gap:28px;
  opacity:0; visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.de-menu-item.de-has-dropdown:hover > .de-mega-panel,
.de-menu-item.de-has-dropdown:focus-within > .de-mega-panel,
.de-menu-item.de-has-dropdown.de-open > .de-mega-panel{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.de-mega-panel .de-menu-item{ break-inside:avoid; }
.de-mega-panel .de-menu-link{ padding:8px 10px; font-size:14px; }
.de-mega-panel .de-mega-heading{
  break-inside:avoid; break-after:avoid; font-family:var(--de-font-heading);
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--de-teal); padding:4px 10px 10px; margin-top:2px;
}
.de-mega-panel .de-mega-heading:not(:first-of-type){ break-before:column; }

/* ---------- Header actions ---------- */
.de-header__actions{ display:flex; align-items:center; gap:14px; }
.de-header__whatsapp{
  display:flex; align-items:center; gap:8px; color:#EAF0F6; text-decoration:none; font-size:14px; font-weight:500;
}
.de-whatsapp-icon{ width:20px; height:20px; border-radius:50%; background:#25D366; display:inline-block; }
.de-btn-cta{
  display:inline-block; background:var(--de-cta); color:#fff !important; font-weight:600; font-size:14px;
  padding:11px 20px; border-radius:8px; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 8px 20px rgba(255,107,53,.35);
}
.de-btn-cta:hover, .de-btn-cta:focus-visible{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(255,107,53,.45); }
.de-btn-outline{
  display:inline-block; border:1.5px solid rgba(255,255,255,.4); color:#fff; padding:10px 18px; border-radius:8px;
  text-decoration:none; font-weight:600; font-size:14px; transition:background-color .15s ease;
}
.de-btn-outline:hover{ background:rgba(255,255,255,.08); }

.de-header__burger{
  display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px;
}
.de-header__burger span{ width:24px; height:2px; background:#fff; display:block; border-radius:2px; }

/* ---------- Mobile off-canvas ---------- */
.de-mobile-nav{
  position:fixed; inset:0; z-index:1200; visibility:hidden; pointer-events:none;
}
.de-mobile-nav[data-de-open="true"]{ visibility:visible; pointer-events:auto; }
.de-mobile-nav__panel{
  position:absolute; top:0; right:0; height:100%; width:min(360px, 88vw);
  background:var(--de-navy); padding:24px; overflow-y:auto;
  transform:translateX(100%); transition:transform .25s ease;
  box-shadow:-10px 0 40px rgba(0,0,0,.4);
}
.de-mobile-nav[data-de-open="true"] .de-mobile-nav__panel{ transform:translateX(0); }
.de-mobile-nav::before{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.5); opacity:0; transition:opacity .25s ease;
}
.de-mobile-nav[data-de-open="true"]::before{ opacity:1; }
.de-mobile-nav__close{ background:none; border:0; color:#fff; font-size:28px; line-height:1; cursor:pointer; margin-bottom:16px; }
.de-mobile-menu{ list-style:none; margin:0; padding:0; }
.de-mobile-menu > .de-menu-item{ border-bottom:1px solid var(--de-border); }
.de-mobile-menu .de-menu-link{ padding:14px 4px; color:#fff; justify-content:space-between; }
.de-mobile-menu .de-dropdown, .de-mobile-menu .de-mega-panel{
  position:static; display:none; width:auto; max-width:none; box-shadow:none; border:0; background:rgba(255,255,255,.03);
  grid-template-columns:1fr; padding:6px 0 10px 14px; opacity:1; visibility:visible; transform:none;
}
.de-mobile-menu .de-menu-item.de-open > .de-dropdown,
.de-mobile-menu .de-menu-item.de-open > .de-mega-panel{ display:block; }
.de-mobile-nav__cta{ margin-top:20px; width:100%; text-align:center; }

@media (max-width: 1024px){
  .de-header__nav{ display:none; }
  .de-header__whatsapp-label{ display:none; }
  .de-header__burger{ display:flex; }
}

/* ---------- Footer ---------- */
.de-footer{ background:var(--de-navy); color:#C7D0DA; padding:64px 24px 0; }
.de-footer__inner{
  max-width:1320px; margin:0 auto; display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px;
  border-bottom:1px solid var(--de-border);
}
.de-footer__tagline{ margin:16px 0; font-size:14px; line-height:1.6; max-width:32ch; }
.de-footer__social{ list-style:none; display:flex; gap:14px; padding:0; margin:0; flex-wrap:wrap; }
.de-footer__social a{ color:#C7D0DA; text-decoration:none; font-size:13px; }
.de-footer__social a:hover{ color:var(--de-teal); }
.de-footer__heading{ color:#fff; font-family:var(--de-font-heading); font-size:15px; margin:0 0 16px; }
.de-footer-menu, .de-footer-contact{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.de-footer-menu a, .de-footer-contact a{ color:#C7D0DA; text-decoration:none; font-size:14px; }
.de-footer-menu a:hover, .de-footer-contact a:hover{ color:var(--de-teal); }
.de-footer__cta{ margin-top:18px; }
.de-footer__bottom{
  max-width:1320px; margin:0 auto; padding:24px 0; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:12px; font-size:13px;
}
.de-footer__legal{ list-style:none; display:flex; gap:20px; margin:0; padding:0; }
.de-footer__legal a{ color:#C7D0DA; text-decoration:none; }
.de-footer__legal a:hover{ color:var(--de-teal); }

@media (max-width: 900px){
  .de-footer__inner{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  .de-footer__inner{ grid-template-columns:1fr; }
  .de-footer__bottom{ flex-direction:column; text-align:center; }
}

/* Respect reduced motion globally for header/footer transitions */
@media (prefers-reduced-motion: reduce){
  .de-header, .de-dropdown, .de-mega-panel, .de-mobile-nav__panel, .de-btn-cta{ transition:none !important; }
}