/* Khabar Header & Footer — RTL first */
.khf-header,.khf-footer{direction:rtl;text-align:right;font-family:var(--kn-urdu,"Noto Nastaliq Urdu","Jameel Noori Nastaleeq",serif)}
.khf-wrap{max-width:var(--kn-wrap,1240px);margin:0 auto;padding:0 16px;box-sizing:border-box}
.khf-header *,.khf-footer *{box-sizing:border-box}

/* ================= HEADER ================= */
.khf-header{background:var(--khf-h-bg);color:var(--khf-h-text)}
.khf-header.khf-has-border{border-bottom:1px solid rgba(127,127,127,.18)}
.khf-header-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:var(--khf-h-pad);padding-bottom:var(--khf-h-pad);min-height:64px}

/* Right: logo + name */
.khf-brand{display:flex;align-items:center;gap:14px;color:var(--khf-h-text)!important;text-decoration:none!important;min-width:0}
.khf-logo{height:var(--khf-logo-h);width:auto;max-width:280px;object-fit:contain;display:block}
.khf-brand-text{display:flex;flex-direction:column;min-width:0}
.khf-title{font-size:var(--khf-title-size);font-weight:700;line-height:1.6;color:var(--khf-h-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.khf-tagline{font-size:14px;line-height:1.8;opacity:.75;border-right:3px solid var(--khf-h-accent);padding-right:8px;margin-top:2px}

/* Left: date + social */
.khf-header-left{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.khf-date{font-size:13px;opacity:.75;white-space:nowrap;line-height:1.8}

/* ================= SOCIAL ================= */
.khf-social{display:flex;gap:8px;flex-wrap:wrap}
.khf-s{width:var(--khf-icon);height:var(--khf-icon);display:grid;place-items:center;transition:transform .15s,opacity .15s,background .15s;text-decoration:none!important}
.khf-s svg{width:46%;height:46%;fill:currentColor}
.khf-s:hover{transform:translateY(-2px)}
.khf-style-circle .khf-s{border-radius:50%}
.khf-style-rounded .khf-s{border-radius:8px}
.khf-style-square .khf-s{border-radius:0}
.khf-style-plain .khf-s{background:none!important;width:calc(var(--khf-icon)*.8)}
.khf-style-plain .khf-s svg{width:70%;height:70%}

/* brand colours */
.khf-color-brand .khf-s{color:#fff!important}
.khf-color-brand .khf-s-whatsapp{background:#25d366}
.khf-color-brand .khf-s-facebook{background:#1877f2}
.khf-color-brand .khf-s-instagram{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.khf-color-brand .khf-s-x{background:#000}
.khf-color-brand .khf-s-tiktok{background:#010101}
.khf-color-brand .khf-s-youtube{background:#ff0000}
.khf-color-brand .khf-s-telegram{background:#229ed9}
.khf-color-brand.khf-style-plain .khf-s-whatsapp{color:#25d366!important}
.khf-color-brand.khf-style-plain .khf-s-facebook{color:#1877f2!important}
.khf-color-brand.khf-style-plain .khf-s-instagram{color:#d6249f!important}
.khf-color-brand.khf-style-plain .khf-s-youtube{color:#ff0000!important}
.khf-color-brand.khf-style-plain .khf-s-telegram{color:#229ed9!important}
.khf-color-brand.khf-style-plain .khf-s-x,.khf-color-brand.khf-style-plain .khf-s-tiktok{color:currentColor!important}
/* mono: follows the text colour of where it sits */
.khf-color-mono .khf-s{color:inherit!important;background:color-mix(in srgb,currentColor 12%,transparent)}
.khf-color-mono .khf-s:hover{background:color-mix(in srgb,currentColor 24%,transparent)}
.khf-header .khf-color-mono .khf-s{color:var(--khf-h-text)!important}
.khf-footer .khf-color-mono .khf-s{color:var(--khf-f-head)!important}
/* custom */
.khf-color-custom .khf-s{background:var(--khf-icon-custom);color:#fff!important}
.khf-color-custom.khf-style-plain .khf-s{color:var(--khf-icon-custom)!important}
.khf-social-empty{font-size:12px;opacity:.6;font-family:sans-serif;direction:ltr}

/* ================= FOOTER ================= */
.khf-footer{background:var(--khf-f-bg);color:var(--khf-f-text);margin-top:30px}
.khf-footer a{color:var(--khf-f-text);text-decoration:none}
.khf-footer a:hover{color:var(--khf-f-accent)}
.khf-footer-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:34px;padding-top:40px;padding-bottom:30px}

/* Right column: small logo, description, social */
.khf-f-logo-link{display:inline-flex;align-items:center;gap:10px;margin-bottom:6px}
.khf-f-logo{height:var(--khf-f-logo-h);width:auto;max-width:220px;object-fit:contain;display:block}
.khf-f-title{font-size:26px;font-weight:700;color:var(--khf-f-head);line-height:1.6}
.khf-f-desc{font-size:14.5px;line-height:2.1;margin:6px 0 14px;opacity:.9}

/* 3 columns */
.khf-col-title{color:var(--khf-f-head);font-size:17px;font-weight:700;margin:0 0 14px;padding-bottom:6px;position:relative;line-height:1.8;font-family:inherit}
.khf-col-title::after{content:"";position:absolute;right:0;bottom:0;width:42px;height:3px;background:var(--khf-f-accent);border-radius:2px}
.khf-links,.khf-posts{list-style:none;margin:0;padding:0}
.khf-links li{padding:3px 0;font-size:14.5px;line-height:2}
.khf-links li a::before{content:"‹";color:var(--khf-f-accent);margin-left:8px;font-family:sans-serif}
.khf-two-col{columns:2;column-gap:18px}
.khf-posts li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.khf-posts li:last-child{border-bottom:0}
.khf-posts a{display:flex;gap:10px;align-items:flex-start}
.khf-post-thumb{width:62px;height:48px;object-fit:cover;border-radius:4px;flex:none}
.khf-post-title{display:block;font-size:13.5px;line-height:1.95;color:var(--khf-f-text)}
.khf-posts a:hover .khf-post-title{color:var(--khf-f-accent)}
.khf-post-date{display:block;font-size:11.5px;opacity:.6;line-height:1.6}
.khf-text{font-size:14px;line-height:2.1}
.khf-text p{margin:0 0 .6em}

.khf-bottom{background:var(--khf-bottom-bg);font-size:13px;text-align:center;padding:12px 0 8px;line-height:1.9}

/* ================= RESPONSIVE ================= */
@media (max-width:1024px){
  .khf-footer-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:640px){
  .khf-header-row{flex-direction:column;justify-content:center;text-align:center;gap:10px}
  .khf-brand{justify-content:center}
  .khf-header-left{justify-content:center}
  .khf-title{font-size:calc(var(--khf-title-size)*.8);white-space:normal}
  .khf-logo{height:calc(var(--khf-logo-h)*.8)}
  .khf-tagline{border:0;padding:0}
  .khf-footer-grid{grid-template-columns:1fr;gap:26px;padding-top:30px}
  .khf-f-brand{text-align:center}
  .khf-f-brand .khf-social{justify-content:center}
}