/* =====================================================
   Khana Khilafa - Header & Footer
   Scoped CSS — sirf .kk-hf-header aur .kk-hf-footer ke andar
   asar karta hai. WordPress / Elementor / theme ki CSS se
   takrao na ho isliye har selector prefix ke sath likha gaya hai.
   Google Fonts (Noto Nastaliq Urdu / Noto Naskh Arabic) yahan
   @import se nahi - khana-khilafa-hf.php se wp_enqueue_style
   ke zariye alag load hote hain.
   ===================================================== */

/* ---------- Reset (scoped) ---------- */
.kk-hf-header,
.kk-hf-footer{
  --kk-cream:#f3ecda;
  --kk-cream-light:#faf6ec;
  --kk-white:#ffffff;
  --kk-brown-dark:#2a1c11;
  --kk-brown:#4a3120;
  --kk-brown-soft:#6b4a2e;
  --kk-gold:#c9a227;
  --kk-gold-light:#e3c874;
  --kk-text-dark:#2b2018;
  --kk-text-muted:#7a6a56;
  --kk-font-body:'Noto Naskh Arabic', 'Jameel Noori Nastaleeq', serif;
  --kk-font-head:'Noto Nastaliq Urdu', 'Noto Naskh Arabic', serif;
  direction:rtl;
  font-family:var(--kk-font-body) !important;
  color:var(--kk-text-dark);
  box-sizing:border-box;
  position:relative;
  isolation:isolate;
  z-index:9999;
}
.kk-hf-header *,
.kk-hf-footer *{
  box-sizing:border-box;
  margin:0;
  padding:0;
  border:0;
  font-family:inherit !important;
  line-height:1.6;
  text-decoration:none !important;
  list-style:none;
  background:none;
  vertical-align:baseline;
}
.kk-hf-header img,
.kk-hf-footer img{max-width:100%;display:block;}
.kk-hf-header button,
.kk-hf-footer button{
  font-family:inherit;
  cursor:pointer;
  background:none;
  border:0;
}
.kk-hf-header a,
.kk-hf-footer a{color:inherit;}
.kk-hf-header a:hover,
.kk-hf-footer a:hover{color:var(--kk-gold);}
.kk-hf-header .kk-hf-wrap,
.kk-hf-footer .kk-hf-wrap{
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
}

/* =========================================================
   HEADER
   ========================================================= */
.kk-hf-header{background:var(--kk-white);}

/* ---- Top bar ---- */
.kk-hf-topbar{
  background:var(--kk-cream);
  border-bottom:1px solid #e4d9bd;
}
.kk-hf-topbar .kk-hf-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:42px;
}
.kk-hf-social{display:flex;align-items:center;gap:10px;}
.kk-hf-social a{
  width:26px;height:26px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  transition:transform .2s ease;
}
.kk-hf-social a:hover{transform:translateY(-2px);}
.kk-hf-social svg{width:100%;height:100%;}
.kk-hf-topbar-right{display:flex;align-items:center;gap:18px;}
.kk-hf-search-btn{
  width:18px;height:18px;color:var(--kk-brown);
  display:flex;align-items:center;justify-content:center;
}
.kk-hf-search-btn svg{width:100%;height:100%;}
.kk-hf-login{
  display:flex;align-items:center;gap:6px;
  font-size:14px;font-weight:600;color:var(--kk-text-dark);
}
.kk-hf-login svg{width:16px;height:16px;}

/* ---- Main nav ---- */
.kk-hf-nav{background:var(--kk-white);}
.kk-hf-nav-inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:96px;
  padding-top:10px;
}
.kk-hf-menu{
  display:flex;
  align-items:center;
  flex:1;
  gap:8px;
}
.kk-hf-menu-left{justify-content:flex-start;}
.kk-hf-menu-right{justify-content:flex-end;}
.kk-hf-menu li a{
  display:inline-block;
  padding:10px 14px;
  font-size:16px;
  font-weight:600;
  color:var(--kk-text-dark);
  white-space:nowrap;
  position:relative;
}
.kk-hf-menu li.kk-hf-active a{color:var(--kk-brown);}
.kk-hf-menu li.kk-hf-active a::after{
  content:"";
  position:absolute;
  right:14px;left:14px;bottom:2px;
  height:2px;
  background:var(--kk-gold);
}

/* ---- Logo (center, overlapping) ---- */
.kk-hf-logo{
  flex:0 0 auto;
  width:120px;
  height:120px;
  margin:0 8px;
  position:relative;
  top:14px;
}
.kk-hf-logo a{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #3a2a1c, #100b06 75%);
  border:3px solid var(--kk-gold);
  box-shadow:0 6px 18px rgba(0,0,0,.25), inset 0 0 0 6px rgba(201,162,39,.15);
  text-align:center;
  padding:6px;
}
.kk-hf-logo img{max-width:78%;max-height:78%;object-fit:contain;}
.kk-hf-logo .kk-hf-logo-text{
  font-family:var(--kk-font-head) !important;
  color:var(--kk-gold-light);
  line-height:1.15;
}
.kk-hf-logo .kk-hf-logo-text .kk-hf-logo-big{display:block;font-size:17px;font-weight:700;}
.kk-hf-logo .kk-hf-logo-text .kk-hf-logo-small{display:block;font-size:10px;letter-spacing:.5px;opacity:.85;}

/* ---- Mobile toggle ---- */
.kk-hf-burger{
  display:none;
  width:32px;height:26px;
  flex-direction:column;
  justify-content:space-between;
  cursor:pointer;
}
.kk-hf-burger span{display:block;height:3px;background:var(--kk-brown);border-radius:2px;}

@media (max-width:960px){
  .kk-hf-burger{display:flex;}
  .kk-hf-nav-inner{min-height:76px;}
  .kk-hf-logo{width:78px;height:78px;top:8px;}
  .kk-hf-menu{
    position:absolute;
    top:100%;
    inset-inline:0;
    background:var(--kk-white);
    flex-direction:column;
    align-items:stretch;
    box-shadow:0 10px 20px rgba(0,0,0,.12);
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
    z-index:20;
  }
  .kk-hf-menu-right{order:1;}
  .kk-hf-menu-left{order:2;}
  .kk-hf-nav-inner.kk-hf-open .kk-hf-menu{max-height:600px;}
  .kk-hf-menu li a{display:block;padding:14px 20px;border-bottom:1px solid #eee0c2;}
  .kk-hf-menu li.kk-hf-active a::after{display:none;}
}

/* =========================================================
   FOOTER
   ========================================================= */
.kk-hf-footer{
  background:linear-gradient(180deg,#3a2716,var(--kk-brown-dark) 60%);
  color:var(--kk-cream);
  padding:56px 0 0;
}
.kk-hf-footer-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:32px;
  align-items:start;
  text-align:center;
  padding-bottom:40px;
}
.kk-hf-col-heading{
  font-family:var(--kk-font-head) !important;
  color:var(--kk-gold-light);
  font-size:22px;
  font-weight:700;
  margin-bottom:10px;
}
.kk-hf-col p{
  font-size:14px;
  color:#d9c9ac;
  margin-bottom:16px;
}
.kk-hf-whatsapp{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:rgba(201,162,39,.12);
  border:1px solid var(--kk-gold);
  color:var(--kk-gold-light);
  padding:10px 22px;
  border-radius:30px;
  font-weight:700;
  font-size:15px;
  direction:ltr;
}
.kk-hf-whatsapp svg{width:20px;height:20px;flex:0 0 auto;}
.kk-hf-col-center .kk-hf-logo{
  width:96px;height:96px;
  margin:0 auto 16px;
  position:static;
}
.kk-hf-footer-links{
  font-size:14px;
  color:#d9c9ac;
  margin-bottom:16px;
}
.kk-hf-footer-links a{margin:0 4px;}
.kk-hf-footer-social{
  display:flex;
  justify-content:center;
  gap:12px;
}
.kk-hf-footer-social a{
  width:26px;height:26px;
  border-radius:50%;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.kk-hf-footer-social svg{width:100%;height:100%;}
.kk-hf-col-right .kk-hf-globe{
  width:34px;height:34px;
  margin:6px auto 0;
  color:var(--kk-gold-light);
}
.kk-hf-bottom{
  border-top:1px solid rgba(201,162,39,.25);
  text-align:center;
  padding:16px 0;
  font-size:13px;
  color:#b9a685;
}

@media (max-width:820px){
  .kk-hf-footer-grid{grid-template-columns:1fr;text-align:center;}
  .kk-hf-col-center{order:-1;}
}