/* =====================================================================
   Market Analyticx — custom header & footer styles
   Everything is scoped under .ma- so it can't collide with your page
   templates (.hw-page, .sm-page, .ab-page, etc.).
   ===================================================================== */

:root{
  --ma-indigo:#5F2EEA;
  --ma-deep:#1A1F71;
  --ma-teal:#00C2A8;
  --ma-orange:#FF6B35;
  --ma-ink:#0C0F30;
  --ma-ink-2:#141a45;
  --ma-display:"Bricolage Grotesque",sans-serif;
  --ma-body:"Hanken Grotesk",sans-serif;
  --ma-mono:"Space Mono",monospace;
  --ma-maxw:1180px;
}

/* ---------- HEADER ---------- */
.ma-site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(12,15,48,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.07);
  font-family:var(--ma-body);
}

.ma-bar{
  max-width:var(--ma-maxw); margin:0 auto; padding:0 28px;
  height:68px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.ma-logo{
  display:flex; align-items:center; gap:10px; color:#fff;
  font-family:var(--ma-display); font-weight:700; font-size:18px; letter-spacing:-.01em;
  text-decoration:none;
}
.ma-logo span{ color:#fff; }
.ma-mark{ width:22px; height:22px; flex:0 0 22px; }

.ma-nav{ display:flex; align-items:center; gap:30px; }

/* the wp_nav_menu list */
.ma-menu{ display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0; }
.ma-menu li{ position:relative; }
.ma-menu a{
  color:rgba(255,255,255,.74); font-size:14.5px; font-weight:500;
  text-decoration:none; transition:color .2s; display:inline-block; line-height:1.2;
}
.ma-menu a:hover,
.ma-menu .current-menu-item > a,
.ma-menu .current-menu-ancestor > a{ color:#fff; }

/* Only the header bar should paint a background. Keep the nav container and
   the menu list see-through so no lighter band appears behind the links. */
.ma-site-header .ma-nav,
.ma-site-header .ma-menu,
.ma-site-header .ma-menu > li{ background:transparent !important; box-shadow:none; border:none; }

/* dropdown (e.g. Services) */
.ma-menu .menu-item-has-children > a::after{
  content:""; display:inline-block; width:6px; height:6px; margin-left:7px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px); vertical-align:middle;
}
.ma-menu .sub-menu{
  position:absolute; top:calc(100% + 14px); left:0; min-width:210px;
  background:var(--ma-ink); border:1px solid rgba(255,255,255,.1); border-radius:12px;
  padding:8px; margin:0; list-style:none;
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  box-shadow:0 24px 50px -24px rgba(0,0,0,.8);
}
.ma-menu li:hover > .sub-menu,
.ma-menu li:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:none; }
.ma-menu .sub-menu li{ position:static; }
.ma-menu .sub-menu a{ padding:9px 12px; border-radius:8px; width:100%; }
.ma-menu .sub-menu a:hover{ background:rgba(255,255,255,.06); }

/* CTA button */
.ma-cta{
  font-family:var(--ma-body); font-weight:600; font-size:14.5px;
  background:var(--ma-teal); color:#04221d; text-decoration:none;
  border-radius:9px; padding:11px 18px; white-space:nowrap;
  box-shadow:0 6px 22px -8px rgba(0,194,168,.7);
  transition:transform .15s ease, box-shadow .2s ease;
}
.ma-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -8px rgba(0,194,168,.8); color:#04221d; }

/* hamburger */
.ma-toggle{
  display:none; background:none; border:none; cursor:pointer;
  width:30px; height:22px; position:relative; padding:0;
}
.ma-toggle span{ position:absolute; left:0; right:0; height:2px; background:#fff; border-radius:2px; }
.ma-toggle span:nth-child(1){ top:0; }
.ma-toggle span:nth-child(2){ top:10px; }
.ma-toggle span:nth-child(3){ top:20px; }

/* ---------- FOOTER ---------- */
.ma-site-footer{
  background:var(--ma-ink-2); color:rgba(255,255,255,.55);
  font-family:var(--ma-body); font-size:14px;
}
.ma-foot{ max-width:var(--ma-maxw); margin:0 auto; padding:46px 28px; }
.ma-foot-top{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; }
.ma-foot .ma-logo{ font-size:16px; }
.ma-foot-menu{ display:flex; gap:24px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.ma-foot-menu a{ color:rgba(255,255,255,.62); text-decoration:none; transition:color .2s; font-size:14px; }
.ma-foot-menu a:hover{ color:#fff; }
.ma-foot-tag{ font-family:var(--ma-mono); font-size:13px; color:rgba(255,255,255,.5); }
.ma-foot-bottom{
  margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,.08);
  font-family:var(--ma-mono); font-size:12.5px; color:rgba(255,255,255,.4);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .ma-toggle{ display:block; }
  .ma-nav{
    display:none; position:absolute; top:68px; left:0; right:0;
    flex-direction:column; align-items:center; text-align:center; gap:14px;
    background:var(--ma-ink); padding:18px 28px 24px;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .ma-nav.ma-open{ display:flex; }
  .ma-menu{ flex-direction:column; align-items:center; gap:14px; width:100%; }
  .ma-menu li{ text-align:center; width:100%; }
  .ma-menu .menu-item-has-children > a::after{ transform:rotate(45deg); }
  .ma-menu .sub-menu{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; background:transparent; border:none; padding:6px 0 0;
    align-items:center; text-align:center;
  }
  .ma-cta{ align-self:center; }
  .ma-foot-top{ flex-direction:column; align-items:flex-start; }
}