/* ============================================================
   másfollowers — header-nav.css
   Sticky top navbar + desktop mega-dropdown + mobile slide-out.
   Depends on theme_style.css for variables and buttons.
   ============================================================ */

/* ===== Top bar ===== */
.mf-nav{
  position:sticky;top:0;z-index:1000;
  background:rgba(245,237,224,.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--mf-line);
  font-family:var(--mf-font);
  color:var(--mf-ink);
  font-weight:500;
}
.mf-nav-inner{
  max-width:var(--mf-container);
  margin:0 auto;
  padding:0 var(--mf-container-pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
  gap:16px;
}

/* ===== Brand ===== */
.mf-brand{
  display:flex;align-items:center;gap:10px;flex:none;
  font-weight:800;color:var(--mf-ink);
}
.mf-brand img{
  height:38px;width:auto;display:block;
  max-width:200px;object-fit:contain;
}

/* ===== Desktop links ===== */
.mf-nav-links{
  display:flex;
  gap:32px;
  align-items:center;
  list-style:none;
  padding:0;margin:0;
  font-size:14px;font-weight:600;
  color:var(--mf-ink-2);
}
.mf-nav-links > li{position:relative;}
.mf-nav-links > li > a{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 0;
  color:var(--mf-ink-2);
  transition:color .15s ease;
}
.mf-nav-links > li > a:hover,
.mf-nav-links > li.is-active > a{color:var(--mf-orange);}

.mf-nav-badge{
  font-size:10px;font-weight:800;
  background:var(--mf-orange);color:#fff;
  padding:3px 7px;border-radius:999px;
  letter-spacing:.05em;text-transform:uppercase;line-height:1;
}

/* ===== Right side CTA cluster ===== */
.mf-cta-row{
  display:flex;gap:10px;align-items:center;flex:none;
}
.mf-cta-row .mf-btn{padding:10px 16px;font-size:13px;}
.mf-cta-row .mf-btn-lg{padding:13px 22px;font-size:14px;}

/* ===== Mega dropdown (desktop) ===== */
.mf-has-mega .mf-mega-caret{
  display:inline-block;font-size:9px;
  transition:transform .2s ease;
  margin-left:2px;
}
.mf-has-mega:hover .mf-mega-caret,
.mf-has-mega:focus-within .mf-mega-caret{transform:rotate(180deg);}

.mf-mega{
  position:absolute;
  top:calc(100% + 14px);
  left:50%;
  transform:translateX(-50%) translateY(-8px);
  width:min(960px,calc(100vw - 32px));
  background:#fff;
  border-radius:var(--mf-radius-xl);
  box-shadow:var(--mf-shadow-lg);
  padding:24px;
  opacity:0;visibility:hidden;
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
  z-index:1001;
}
.mf-has-mega:hover .mf-mega,
.mf-has-mega:focus-within .mf-mega{
  opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0);
}
/* Bridge between trigger and panel so hover doesn't drop */
.mf-mega::before{
  content:"";position:absolute;
  top:-14px;left:0;right:0;height:14px;
}

.mf-mega-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.mf-mega-card{
  background:var(--mf-cream);
  border-radius:var(--mf-radius);
  padding:16px;
  transition:background .2s ease,transform .2s ease;
}
.mf-mega-card:hover{background:var(--mf-cream-2);transform:translateY(-2px);}

.mf-mega-head{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;
  color:var(--mf-ink);
}
.mf-mega-icon{
  width:36px;height:36px;border-radius:10px;
  background:#fff;
  display:grid;place-items:center;overflow:hidden;flex:none;
  color:var(--mf-orange);font-size:18px;
}
.mf-mega-icon img{width:24px;height:24px;object-fit:contain;}

.mf-mega-name{
  font-weight:800;font-size:15px;letter-spacing:-.01em;
  display:inline-flex;align-items:center;gap:8px;
  color:var(--mf-ink);
}
.mf-mega-pop{
  font-size:9px;font-weight:800;
  background:var(--mf-orange);color:#fff;
  padding:2px 6px;border-radius:999px;
  letter-spacing:.04em;text-transform:uppercase;line-height:1;
}

.mf-mega-services{display:flex;flex-direction:column;gap:4px;}
.mf-mega-service{
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 8px;border-radius:8px;
  font-size:13px;font-weight:600;
  color:var(--mf-ink-2);
  transition:background .15s ease,color .15s ease;
}
.mf-mega-service:hover{background:#fff;color:var(--mf-orange);}
.mf-mega-service .arr{
  opacity:0;transform:translateX(-4px);
  transition:opacity .15s ease,transform .15s ease;
}
.mf-mega-service:hover .arr{opacity:1;transform:translateX(0);}

.mf-mega-foot{
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;
  margin-top:18px;padding-top:18px;
  border-top:1px solid var(--mf-line);
  flex-wrap:wrap;
}
.mf-mega-foot p{
  font-size:13px;color:var(--mf-ink-2);margin:0;flex:1;min-width:0;
}
.mf-mega-foot strong{color:var(--mf-ink);font-weight:800;}
.mf-mega-foot-cta{display:flex;gap:8px;flex-wrap:wrap;}
.mf-mega-foot-cta .mf-btn{padding:9px 16px;font-size:13px;}

/* ===== Burger toggle ===== */
.mf-burger{
  display:none;
  width:40px;height:40px;border-radius:10px;
  align-items:center;justify-content:center;
  flex-direction:column;gap:4px;
  background:transparent;border:0;cursor:pointer;
}
.mf-burger:hover{background:rgba(26,15,10,.06);}
.mf-burger span{
  display:block;width:20px;height:2px;
  background:var(--mf-ink);border-radius:2px;
  transition:transform .25s ease,opacity .2s ease;
}
.mf-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.mf-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.mf-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ===== Mobile drawer ===== */
.mf-mobile-overlay{
  position:fixed;inset:0;
  background:rgba(26,15,10,.5);
  opacity:0;visibility:hidden;
  transition:opacity .25s ease,visibility .25s ease;
  z-index:1099;
}
.mf-mobile-overlay.is-open{opacity:1;visibility:visible;}

.mf-mobile{
  position:fixed;top:0;right:0;bottom:0;
  width:min(380px,100%);
  background:var(--mf-cream);
  border-left:1px solid var(--mf-line);
  box-shadow:-12px 0 32px -8px rgba(26,15,10,.18);
  transform:translateX(100%);
  transition:transform .25s ease;
  z-index:1100;
  display:flex;flex-direction:column;
  font-family:var(--mf-font);
}
.mf-mobile.is-open{transform:translateX(0);}

.mf-mobile-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;
  border-bottom:1px solid var(--mf-line);
  flex:none;
}
.mf-mobile-head img{height:32px;width:auto;}
.mf-mobile-close{
  width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;
  font-size:20px;color:var(--mf-ink);
  background:transparent;border:0;cursor:pointer;
}
.mf-mobile-close:hover{background:rgba(26,15,10,.06);}

.mf-mobile-body{
  flex:1;overflow-y:auto;
  padding:18px 20px 24px;
}
.mf-mobile-cta{
  display:flex;flex-direction:column;gap:8px;
  margin-bottom:18px;
}
.mf-mobile-cta .mf-btn{justify-content:center;width:100%;}

.mf-mobile-section{margin-bottom:24px;}
.mf-mobile-section h4{
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mf-orange-deep);
  margin:0 0 10px;
}

.mf-mobile-list{
  display:flex;flex-direction:column;gap:2px;
  list-style:none;padding:0;margin:0;
}
.mf-mobile-list a{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-radius:10px;
  font-size:15px;font-weight:600;color:var(--mf-ink);
  transition:background .15s ease,color .15s ease;
}
.mf-mobile-list a:hover,
.mf-mobile-list a.is-active{background:#fff;color:var(--mf-orange);}
.mf-mobile-list a .badge{
  font-size:10px;font-weight:800;
  background:var(--mf-orange);color:#fff;
  padding:3px 7px;border-radius:999px;
  letter-spacing:.04em;text-transform:uppercase;line-height:1;
}

.mf-mobile-platform{
  display:block;
  background:#fff;
  border-radius:12px;
  padding:14px;
  margin-bottom:8px;
  transition:transform .15s ease,box-shadow .15s ease;
  color:var(--mf-ink);
}
.mf-mobile-platform:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px -8px rgba(26,15,10,.15);
}
.mf-mobile-platform-head{display:flex;align-items:center;gap:12px;}
.mf-mobile-platform-icon{
  width:40px;height:40px;border-radius:10px;
  background:var(--mf-cream);
  display:grid;place-items:center;overflow:hidden;flex:none;
  color:var(--mf-orange);font-size:18px;
}
.mf-mobile-platform-icon img{width:26px;height:26px;object-fit:contain;}
.mf-mobile-platform-name{font-weight:800;font-size:15px;color:var(--mf-ink);}
.mf-mobile-platform-arr{
  margin-left:auto;color:var(--mf-orange);font-size:18px;line-height:1;
}

/* ===== Responsive breakpoints ===== */
@media (max-width:980px){
  .mf-nav-links{display:none;}
  .mf-cta-row .mf-btn-ghost{display:none;}
  .mf-burger{display:flex;}
  .mf-nav-inner{padding:0 20px;}
  .mf-mega{display:none !important;}
}
@media (max-width:520px){
  .mf-cta-row .mf-btn-primary{padding:9px 14px;font-size:13px;}
  .mf-brand img{height:32px;}
  .mf-nav-inner{height:64px;}
}