/*
Theme Name: Khabarnama Urdu News
Theme URI: https://marksolcreativeagency.com/
Author: Marksol Creative Agency
Author URI: https://marksolcreativeagency.com/
Description: Urdu (RTL) news magazine theme — breaking news ticker, columns strip, featured hero, latest news list, category blocks, video section. Nastaliq typography, mobile friendly.
Version: 1.4.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: khabarnama
Tags: news, magazine, elementor, rtl-language-support, custom-menu, custom-logo, featured-images, theme-options
*/

/* ---------- Tokens ---------- */
:root{
  --kn-accent:#d7192f;
  --kn-accent-dark:#a30f20;
  --kn-ink:#151515;
  --kn-text:#2b2b2b;
  --kn-muted:#6b6b6b;
  --kn-line:#e6e6e6;
  --kn-bg:#ffffff;
  --kn-soft:#f5f5f3;
  --kn-dark:#141414;
  --kn-radius:6px;
  --kn-wrap:1240px;
  --kn-urdu:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Urdu Typesetting",serif;
  --kn-naskh:"Noto Naskh Arabic","Noto Sans Arabic",Tahoma,sans-serif;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{direction:rtl}
body{
  margin:0;background:var(--kn-bg);color:var(--kn-text);
  font-family:var(--kn-body,var(--kn-urdu));font-size:calc(17px * var(--kn-scale,1));line-height:var(--kn-lh,2.1);
  direction:rtl;text-align:right;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:hover{color:var(--kn-accent)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5{font-family:var(--kn-head,var(--kn-urdu));color:var(--kn-ink);margin:0;line-height:1.9;font-weight:700}
ul{margin:0;padding:0;list-style:none}
.kn-wrap{max-width:var(--kn-wrap);margin:0 auto;padding:0 16px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
.kn-ltr{direction:ltr;unicode-bidi:embed}

/* ---------- Top bar ---------- */
.kn-topbar{background:var(--kn-dark);color:#cfcfcf;font-size:13px;line-height:1}
.kn-topbar .kn-wrap{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:12px}
.kn-date{padding-top:4px}
.kn-social{display:flex;gap:6px}
.kn-social a{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#fff}
.kn-social a:hover{background:var(--kn-accent);color:#fff}
.kn-social svg{width:14px;height:14px;fill:currentColor}

/* ---------- Header ---------- */
.kn-header{border-bottom:1px solid var(--kn-line);background:var(--kn-bg)}
.kn-header>.kn-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px}
.kn-brand{display:flex;align-items:center;gap:14px}
.kn-brand .custom-logo{max-height:64px;width:auto}
.kn-logo-text{font-size:38px;font-weight:700;color:var(--kn-ink);line-height:1.6}
.kn-logo-text span{color:var(--kn-accent)}
.kn-tagline{font-size:14px;color:var(--kn-muted);border-right:3px solid var(--kn-accent);padding-right:10px;line-height:1.8}
.kn-header-ad{flex:1;max-width:728px;min-height:60px;display:flex;justify-content:center;align-items:center}
.kn-search-toggle,.kn-menu-toggle{background:none;border:0;cursor:pointer;color:var(--kn-ink);padding:8px;display:grid;place-items:center}
.kn-search-toggle svg,.kn-menu-toggle svg{width:22px;height:22px}
.kn-menu-toggle{display:none}

/* ---------- Nav ---------- */
.kn-nav{background:var(--kn-accent);position:sticky;top:0;z-index:50;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.admin-bar .kn-nav{top:32px}
.kn-nav .kn-wrap{display:flex;align-items:center;justify-content:space-between}
.kn-menu{display:flex;flex-wrap:wrap}
.kn-menu>li{position:relative}
.kn-menu>li>a{display:block;color:#fff;font-size:15px;padding:10px 14px 8px;line-height:2}
.kn-menu>li>a:hover,.kn-menu>li.current-menu-item>a{background:var(--kn-accent-dark);color:#fff}
.kn-menu>li.menu-item-has-children>a::after{content:"";display:inline-block;margin-right:6px;border:4px solid transparent;border-top-color:#fff;transform:translateY(3px)}
.kn-menu .sub-menu{position:absolute;top:100%;right:0;min-width:200px;background:var(--kn-bg);box-shadow:0 8px 24px rgba(0,0,0,.12);border-top:3px solid var(--kn-accent-dark);opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s}
.kn-menu li:hover>.sub-menu,.kn-menu li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.kn-menu .sub-menu a{display:block;padding:8px 16px;font-size:14px;border-bottom:1px solid var(--kn-line)}
.kn-nav .kn-search-toggle{color:#fff}

.kn-searchbar{display:none;background:var(--kn-soft);border-bottom:1px solid var(--kn-line)}
.kn-searchbar.is-open{display:block}
.kn-searchbar form{display:flex;gap:8px;padding:12px 0}
.kn-searchbar input[type=search]{flex:1;font-family:var(--kn-urdu);font-size:16px;padding:6px 14px;border:1px solid var(--kn-line);border-radius:var(--kn-radius);line-height:2}
.kn-btn{background:var(--kn-accent);color:#fff;border:0;border-radius:var(--kn-radius);padding:6px 22px;font-family:var(--kn-urdu);font-size:15px;cursor:pointer;line-height:2}
.kn-btn:hover{background:var(--kn-accent-dark);color:#fff}

/* ---------- Breaking ticker ---------- */
.kn-ticker{border-bottom:1px solid var(--kn-line);background:var(--kn-bg)}
.kn-ticker-inner{display:flex;align-items:stretch;gap:0;overflow:hidden}
.kn-ticker-label{background:var(--kn-ink);color:#fff;font-size:14px;padding:6px 16px 4px;white-space:nowrap;display:flex;align-items:center;gap:8px}
.kn-ticker-label i{width:8px;height:8px;border-radius:50%;background:var(--kn-accent);animation:kn-pulse 1.2s infinite}
@keyframes kn-pulse{50%{opacity:.25}}
.kn-ticker-track{flex:1;overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.kn-ticker-move{display:flex;gap:40px;white-space:nowrap;width:max-content;animation:kn-scroll var(--kn-ticker-speed,60s) linear infinite;padding:6px 0 2px}
.kn-ticker-track:hover .kn-ticker-move{animation-play-state:paused}
.kn-ticker-move a{font-size:15px}
.kn-ticker-move a::before{content:"◆";color:var(--kn-accent);font-size:9px;margin-left:10px;vertical-align:middle}
@keyframes kn-scroll{from{transform:translateX(0)}to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){.kn-ticker-move{animation:none}}

/* ---------- Thumbnails ---------- */
.kn-thumb{position:relative;display:block;overflow:hidden;border-radius:var(--kn-radius);background:var(--kn-soft);aspect-ratio:16/9}
.kn-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
a:hover .kn-thumb img,.kn-thumb:hover img{transform:scale(1.04)}
.kn-thumb-ph{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(135deg,#ececec,#dadada);color:#b5b5b5}
.kn-thumb-ph svg{width:36px;height:36px}
.kn-play{position:absolute;inset:auto auto 10px 10px;width:40px;height:40px;border-radius:50%;background:var(--kn-accent);display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.kn-play svg{width:16px;height:16px;fill:#fff;margin-left:3px}
.kn-cat{display:inline-block;background:var(--kn-accent);color:#fff!important;font-size:12px;padding:2px 10px 0;border-radius:3px;line-height:2}
.kn-meta{font-size:12px;color:var(--kn-muted);line-height:1.8}

/* ---------- Section title ---------- */
.kn-section{padding:22px 0}
.kn-sec-title{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--kn-ink);margin-bottom:16px}
.kn-sec-title h2{font-size:22px;background:var(--kn-ink);color:#fff;padding:4px 18px 0;line-height:2;position:relative}
.kn-sec-title h2 a{color:#fff}
.kn-sec-title h2::after{content:"";position:absolute;top:0;bottom:0;left:-13px;width:14px;background:inherit;clip-path:polygon(100% 0,100% 100%,0 100%)}
.kn-sec-title .kn-more{font-size:13px;color:var(--kn-accent)}

/* ---------- Columns strip ---------- */
.kn-columns{background:var(--kn-soft);border-bottom:1px solid var(--kn-line)}
.kn-columns .kn-wrap{padding-top:12px;padding-bottom:12px}
.kn-columns-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kn-colcard{display:flex;align-items:center;gap:12px;background:var(--kn-bg);border-radius:var(--kn-radius);padding:10px 12px;border:1px solid var(--kn-line)}
.kn-colcard img{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--kn-accent)}
.kn-colcard h3{font-size:15px;line-height:1.9}
.kn-colcard .kn-author{font-size:12px;color:var(--kn-accent)}

/* ---------- Hero ---------- */
.kn-hero{display:grid;grid-template-columns:2fr 1fr;gap:24px}
.kn-hero-main .kn-thumb{aspect-ratio:16/9}
.kn-hero-main h1{font-size:30px;line-height:1.9;margin:14px 0 6px}
.kn-hero-main .kn-excerpt{color:var(--kn-muted);font-size:16px;margin:0 0 10px}
.kn-related li{border-top:1px dashed var(--kn-line);padding:6px 0 2px;font-size:15px}
.kn-related li::before{content:"‹";color:var(--kn-accent);margin-left:8px;font-family:var(--kn-naskh);font-weight:700}
.kn-hero-side{display:flex;flex-direction:column;gap:14px}
.kn-hero-side .kn-mini h3{font-size:16px;margin-top:8px;line-height:1.9}

/* ---------- Latest list ---------- */
.kn-layout{display:grid;grid-template-columns:1fr 320px;gap:28px}
.kn-latest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.kn-card h3{font-size:16px;line-height:1.95;margin-top:8px}
.kn-card .kn-meta{margin-top:2px}
.kn-row{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--kn-line)}
.kn-row:last-child{border-bottom:0}
.kn-row .kn-thumb{width:110px;flex:none;aspect-ratio:4/3}
.kn-row h3{font-size:14.5px;line-height:1.95}

/* ---------- Sidebar ---------- */
.kn-sidebar .widget{margin-bottom:26px}
.kn-sidebar .widget-title{font-size:18px;border-bottom:2px solid var(--kn-accent);padding-bottom:4px;margin-bottom:10px}
.kn-popular{counter-reset:pop}
.kn-popular li{counter-increment:pop;display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--kn-line);font-size:15px;line-height:1.9}
.kn-popular li::before{content:counter(pop);font-family:var(--kn-naskh);font-size:28px;font-weight:700;color:var(--kn-line);line-height:1.2;min-width:24px}
.kn-ad-slot{background:var(--kn-soft);border:1px dashed #cfcfcf;color:#9a9a9a;display:grid;place-items:center;min-height:250px;font-size:13px;border-radius:var(--kn-radius)}

/* ---------- Category blocks ---------- */
.kn-blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 24px}
.kn-block .kn-lead h3{font-size:18px;margin-top:10px}
.kn-block .kn-row .kn-thumb{width:96px}

/* ---------- Video ---------- */
.kn-video{background:var(--kn-dark);color:#eee;padding:26px 0 30px;margin:20px 0}
.kn-video .kn-sec-title{border-color:#333}
.kn-video .kn-sec-title h2{background:var(--kn-accent)}
.kn-video-grid{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto;gap:18px}
.kn-video-grid .kn-v:first-child{grid-row:span 2}
.kn-video-grid .kn-v:first-child h3{font-size:22px}
.kn-video h3{color:#fff;font-size:15px;margin-top:8px}
.kn-video a:hover h3{color:#ff8a96}

/* ---------- Single ---------- */
.kn-breadcrumb{font-size:13px;color:var(--kn-muted);padding:14px 0 0}
.kn-breadcrumb a{color:var(--kn-accent)}
.kn-article h1{font-size:34px;line-height:1.85;margin:10px 0 6px}
.kn-article .kn-lede{font-size:19px;color:var(--kn-muted);border-right:4px solid var(--kn-accent);padding-right:14px;margin:8px 0 14px}
.kn-byline{display:flex;flex-wrap:wrap;gap:16px;align-items:center;font-size:13px;color:var(--kn-muted);border-top:1px solid var(--kn-line);border-bottom:1px solid var(--kn-line);padding:8px 0;margin-bottom:16px}
.kn-byline img{width:34px;height:34px;border-radius:50%}
.kn-share{display:flex;gap:6px;margin-right:auto}
.kn-share a{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff}
.kn-share svg{width:15px;height:15px;fill:#fff}
.kn-share .fb{background:#1877f2}.kn-share .x{background:#000}.kn-share .wa{background:#25d366}.kn-share .cp{background:#777;border:0;cursor:pointer}
.kn-featured{margin-bottom:6px}
.kn-featured .kn-thumb{aspect-ratio:auto}
.kn-caption{font-size:13px;color:var(--kn-muted);margin-bottom:14px}
.kn-content{font-size:calc(19px * var(--kn-scale,1) * var(--kn-read,1));line-height:calc(var(--kn-lh,2.1) + .25);color:var(--kn-text)}
.kn-content p{margin:0 0 1.1em}
.kn-content h2{font-size:24px;margin:1.2em 0 .4em}
.kn-content h3{font-size:20px;margin:1em 0 .4em}
.kn-content blockquote{margin:1.2em 0;padding:10px 20px;background:var(--kn-soft);border-right:4px solid var(--kn-accent);font-size:20px}
.kn-content a{color:var(--kn-accent);text-decoration:underline}
.kn-content img,.kn-content iframe{border-radius:var(--kn-radius);max-width:100%}
.kn-content ul,.kn-content ol{padding-right:1.4em;list-style:revert}
.kn-tags{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.kn-tags a{background:var(--kn-soft);border:1px solid var(--kn-line);font-size:13px;padding:2px 12px 0;border-radius:20px}
.kn-tags a:hover{background:var(--kn-accent);color:#fff;border-color:var(--kn-accent)}
.kn-authorbox{display:flex;gap:14px;background:var(--kn-soft);padding:16px;border-radius:var(--kn-radius);margin:20px 0}
.kn-authorbox img{width:70px;height:70px;border-radius:50%}
.kn-authorbox h4{font-size:17px}
.kn-authorbox p{margin:0;font-size:14px;color:var(--kn-muted)}

/* ---------- Archive ---------- */
.kn-archive-head{background:var(--kn-soft);border-bottom:1px solid var(--kn-line);padding:18px 0 12px;margin-bottom:10px}
.kn-archive-head h1{font-size:28px}
.kn-archive-head p{margin:0;color:var(--kn-muted);font-size:15px}
.kn-list-item{display:grid;grid-template-columns:260px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--kn-line)}
.kn-list-item h2{font-size:20px;line-height:1.9;margin:4px 0}
.kn-list-item p{margin:0;font-size:15px;color:var(--kn-muted)}
.kn-pagination{display:flex;gap:6px;justify-content:center;margin:26px 0;flex-wrap:wrap}
.kn-pagination .page-numbers{min-width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--kn-line);border-radius:var(--kn-radius);font-family:var(--kn-naskh);padding:0 10px}
.kn-pagination .current,.kn-pagination a:hover{background:var(--kn-accent);color:#fff;border-color:var(--kn-accent)}
.kn-empty{text-align:center;padding:60px 0}
.kn-empty h1{font-size:72px;color:var(--kn-accent);font-family:var(--kn-naskh)}

/* ---------- Comments ---------- */
.comment-list{margin:0 0 20px}
.comment-list li{border-bottom:1px solid var(--kn-line);padding:12px 0}
.comment-form textarea,.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url]{width:100%;font-family:var(--kn-urdu);border:1px solid var(--kn-line);border-radius:var(--kn-radius);padding:8px 12px}
.comment-form .submit{background:var(--kn-accent);color:#fff;border:0;border-radius:var(--kn-radius);padding:6px 22px;font-family:var(--kn-urdu);cursor:pointer}

/* ---------- Footer ---------- */
.kn-footer{background:var(--kn-dark);color:#bdbdbd;margin-top:30px}
.kn-footer-top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:30px;padding:34px 0 20px}
.kn-footer .kn-logo-text{color:#fff;font-size:32px}
.kn-footer h4{color:#fff;font-size:17px;margin-bottom:8px;border-bottom:2px solid var(--kn-accent);display:inline-block}
.kn-footer p{font-size:14px;margin:6px 0}
.kn-footer-menu li a{font-size:14px;display:block;padding:2px 0}
.kn-footer-menu li a:hover{color:#fff}
.kn-footer-cats{columns:2}
.kn-footer-bottom{border-top:1px solid #2c2c2c;padding:12px 0 8px;font-size:13px;text-align:center}

/* ---------- Back to top ---------- */
.kn-top{position:fixed;left:18px;bottom:18px;width:42px;height:42px;border-radius:50%;background:var(--kn-accent);color:#fff;border:0;display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transition:.2s;z-index:60}
.kn-top.show{opacity:1;pointer-events:auto}
.kn-top svg{width:18px;height:18px;fill:#fff}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .kn-layout{grid-template-columns:1fr}
  .kn-blocks{grid-template-columns:repeat(2,1fr)}
  .kn-header-ad{display:none}
}
@media (max-width:860px){
  .kn-hero{grid-template-columns:1fr}
  .kn-hero-side{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory}
  .kn-hero-side .kn-mini{min-width:68%;scroll-snap-align:start}
  .kn-columns-grid{grid-template-columns:1fr;gap:8px}
  .kn-video-grid{grid-template-columns:1fr 1fr}
  .kn-video-grid .kn-v:first-child{grid-column:span 2;grid-row:auto}
  .kn-footer-top{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .kn-latest-grid,.kn-blocks{grid-template-columns:1fr}
  .kn-latest-grid .kn-card{display:flex;gap:12px}
  .kn-latest-grid .kn-card .kn-thumb{width:120px;flex:none;aspect-ratio:4/3}
  .kn-latest-grid .kn-card h3{margin-top:0;font-size:14.5px}
  .kn-hero-main h1{font-size:23px}
  .kn-article h1{font-size:25px}
  .kn-content{font-size:17.5px}
  .kn-list-item{grid-template-columns:120px 1fr;gap:12px}
  .kn-list-item h2{font-size:16px}
  .kn-list-item p{display:none}
  .kn-logo-text{font-size:30px}
  .kn-tagline{display:none}
  .kn-date{font-size:12px}
}

/* ---------- In-article ads ---------- */
.kn-inad{margin:22px 0;padding:8px 0 12px;border-top:1px solid var(--kn-line);border-bottom:1px solid var(--kn-line);text-align:center;clear:both}
.kn-inad-label{display:block;font-size:11px;color:var(--kn-muted);line-height:1.6;margin-bottom:6px}
.kn-article-ad{margin:20px 0}

/* ---------- Block widgets (default WordPress sidebar) ---------- */
.kn-sidebar .widget h2,.kn-sidebar .wp-block-heading,.kn-sidebar .wp-block-search__label{font-family:var(--kn-urdu);font-size:18px;color:var(--kn-ink);border-bottom:2px solid var(--kn-accent);padding-bottom:4px;margin:0 0 10px;display:block;font-weight:700}
.kn-sidebar .wp-block-search__inside-wrapper{display:flex;gap:6px}
.kn-sidebar .wp-block-search__input{flex:1;font-family:var(--kn-urdu);border:1px solid var(--kn-line);border-radius:var(--kn-radius);padding:6px 12px;line-height:2}
.kn-sidebar .wp-block-search__button{background:var(--kn-accent);color:#fff;border:0;border-radius:var(--kn-radius);padding:6px 16px;font-family:var(--kn-urdu);cursor:pointer;margin:0}
.kn-sidebar ul li,.kn-sidebar .wp-block-latest-posts li{padding:6px 0;border-bottom:1px solid var(--kn-line);font-size:15px;line-height:1.9}
.kn-sidebar .wp-block-latest-comments{padding:0;font-size:14px}
.kn-sidebar .no-comments{font-size:14px;color:var(--kn-muted)}
.kn-colcard img[src=""],.kn-byline img{background:var(--kn-soft)}

/* ---------- Elementor / shortcodes ---------- */
.kn-fullwidth{width:100%}
.kn-fullwidth>.elementor{width:100%}
.kn-boxed-page{min-height:40vh}
.kn-el{width:100%}
.kn-el .kn-ticker-inner,.kn-sc-kn_ticker .kn-ticker-inner{border:1px solid var(--kn-line)}
.kn-columns.kn-el{padding:12px;border-radius:var(--kn-radius)}
.kn-video--boxed{margin:0;padding:22px 22px 26px;border-radius:var(--kn-radius)}
.kn-sc{margin:0 0 24px}
.kn-el .kn-sidebar,.kn-sidebar.kn-el{width:100%}
@media (min-width:641px){
  .kn-latest-grid.kn-cols-1{grid-template-columns:1fr}
  .kn-latest-grid.kn-cols-2{grid-template-columns:repeat(2,1fr)}
  .kn-latest-grid.kn-cols-4{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1025px){
  .kn-latest-grid.kn-cols-4{grid-template-columns:repeat(4,1fr)}
  .kn-blocks.kn-cols-1{grid-template-columns:1fr}
  .kn-blocks.kn-cols-2{grid-template-columns:repeat(2,1fr)}
  .kn-blocks.kn-cols-4{grid-template-columns:repeat(4,1fr)}
}
/* Narrow Elementor columns: stack the hero and grids */
.elementor-column.elementor-col-33 .kn-hero,.elementor-column.elementor-col-25 .kn-hero{grid-template-columns:1fr}
.elementor-column.elementor-col-33 .kn-latest-grid,.elementor-column.elementor-col-25 .kn-latest-grid,
.elementor-column.elementor-col-33 .kn-blocks,.elementor-column.elementor-col-25 .kn-blocks{grid-template-columns:1fr}
/* Elementor boxed sections follow the theme width */
.elementor-section.elementor-section-boxed>.elementor-container{max-width:var(--kn-wrap)}

/* =====================================================================
   v1.3 — Professional layer
   ===================================================================== */

/* ---------- Accessibility ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--kn-accent);outline-offset:2px;border-radius:2px}
.kn-nav a:focus-visible,.kn-nav button:focus-visible{outline-color:#fff}
.screen-reader-text:focus{clip:auto!important;width:auto;height:auto;z-index:1000;background:var(--kn-ink);color:var(--kn-bg);padding:8px 16px;top:8px;right:8px;position:fixed!important;border-radius:4px}
button{font-family:inherit}

/* ---------- Nav tools: dark toggle + search ---------- */
.kn-nav .kn-wrap{gap:4px}
.kn-nav-tools{display:flex;align-items:center;gap:2px;margin-right:auto}
.kn-dark-toggle{background:none;border:0;color:#fff;cursor:pointer;padding:8px;display:grid;place-items:center}
.kn-dark-toggle svg{width:20px;height:20px;fill:currentColor}
.kn-i-sun{display:none}
[data-theme="dark"] .kn-i-moon{display:none}
[data-theme="dark"] .kn-i-sun{display:block}
.kn-menu-toggle{color:#fff}

/* ---------- Drawer (desktop: plain menu) ---------- */
.kn-drawer{display:contents}
.kn-drawer-head,.kn-drawer-search,.kn-drawer-social{display:none}
.kn-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999;opacity:0;transition:opacity .25s}
.kn-overlay.is-on{opacity:1}
body.kn-lock{overflow:hidden}

@media (max-width:860px){
  .kn-menu-toggle{display:grid}
  .kn-drawer{display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;width:min(86vw,340px);background:var(--kn-bg);z-index:1000;transform:translateX(105%);transition:transform .28s ease;overflow-y:auto;box-shadow:-8px 0 30px rgba(0,0,0,.25)}
  .kn-drawer.is-open{transform:none}
  .kn-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--kn-accent);color:#fff}
  .kn-drawer-title{font-family:var(--kn-head);font-size:22px;font-weight:700;line-height:1.8}
  .kn-drawer-close{background:none;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer;padding:0 6px}
  .kn-drawer-search{display:flex;gap:6px;padding:12px 16px;border-bottom:1px solid var(--kn-line)}
  .kn-drawer-search input{flex:1;min-width:0;font-family:var(--kn-body);font-size:15px;padding:6px 12px;border:1px solid var(--kn-line);border-radius:var(--kn-radius);background:var(--kn-soft);color:var(--kn-text)}
  .kn-drawer-search .kn-btn{padding:6px 12px;display:grid;place-items:center}
  .kn-drawer-search .kn-btn svg{width:18px;height:18px}
  .kn-drawer .kn-menu{display:flex;flex-direction:column;padding:6px 0}
  .kn-drawer .kn-menu>li>a{color:var(--kn-ink);padding:10px 18px 8px;border-bottom:1px solid var(--kn-line)}
  .kn-drawer .kn-menu>li>a:hover,.kn-drawer .kn-menu>li.current-menu-item>a{background:var(--kn-soft);color:var(--kn-accent)}
  .kn-drawer .kn-menu>li.menu-item-has-children>a::after{border-top-color:var(--kn-muted)}
  .kn-drawer .kn-menu .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:var(--kn-soft);display:none}
  .kn-drawer .kn-menu li.sub-open>.sub-menu{display:block}
  .kn-drawer .kn-menu .sub-menu a{padding-right:34px;color:var(--kn-text)}
  .kn-drawer-social{display:block;padding:16px 18px;margin-top:auto}
  .kn-drawer-social .kn-social a{background:var(--kn-soft);color:var(--kn-ink)}
}

/* ---------- Reading progress ---------- */
.kn-progress{position:fixed;top:0;right:0;left:0;height:3px;z-index:100;pointer-events:none}
.admin-bar .kn-progress{top:32px}
.kn-progress span{display:block;height:100%;background:var(--kn-accent);transform:scaleX(0);transform-origin:right;transition:transform .1s linear}

/* ---------- Byline extras ---------- */
.kn-byline time,.kn-updated,.kn-views{white-space:nowrap}
.kn-updated{color:var(--kn-accent)}
.kn-fs{display:inline-flex;border:1px solid var(--kn-line);border-radius:20px;overflow:hidden;direction:ltr}
.kn-fs button{background:none;border:0;color:var(--kn-text);font:700 13px/1 Tahoma,sans-serif;padding:7px 10px;cursor:pointer}
.kn-fs button+button{border-left:1px solid var(--kn-line)}
.kn-fs button:hover{background:var(--kn-soft);color:var(--kn-accent)}
.kn-share .kn-copy.is-done{background:#25d366}

/* ---------- Video on top of article ---------- */
.kn-video-embed{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--kn-radius);overflow:hidden;margin:0 0 16px}
.kn-video-embed iframe,.kn-video-embed video,.kn-video-embed embed{position:absolute;inset:0;width:100%!important;height:100%!important;border:0}
.kn-content iframe[src*="youtube"],.kn-content iframe[src*="vimeo"]{width:100%;height:auto;aspect-ratio:16/9}

/* ---------- Previous / next ---------- */
.kn-postnav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}
.kn-postnav a{display:block;border:1px solid var(--kn-line);border-radius:var(--kn-radius);padding:10px 14px;transition:border-color .15s}
.kn-postnav a:hover{border-color:var(--kn-accent)}
.kn-postnav small{display:block;color:var(--kn-accent);font-size:12px;line-height:1.8}
.kn-postnav span{display:block;font-size:15px;line-height:1.9;color:var(--kn-ink)}
.kn-postnav-next{text-align:left;grid-column:2}

/* ---------- Toast ---------- */
.kn-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:var(--kn-ink);color:var(--kn-bg);padding:6px 18px 4px;border-radius:30px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:200}
.kn-toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Archive lead ---------- */
.kn-arch-lead{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;padding:16px 0 22px;border-bottom:1px solid var(--kn-line)}
.kn-arch-lead h2{font-size:26px;line-height:1.85;margin:6px 0}
.kn-arch-lead p{color:var(--kn-muted);font-size:16px;margin:0 0 6px}

/* ---------- Search form ---------- */
.kn-searchform{display:flex;gap:8px;max-width:520px;margin:0 auto}
.kn-searchform input{flex:1;font-family:inherit;font-size:16px;padding:6px 14px;border:1px solid var(--kn-line);border-radius:var(--kn-radius);background:var(--kn-bg);color:var(--kn-text)}

/* ---------- Theme-aware back-to-top ---------- */
.kn-top{background:var(--kn-accent)}

/* =====================================================================
   Dark mode
   ===================================================================== */
:root[data-theme="dark"]{
  --kn-ink:#f2f2f2;--kn-text:#d8d8d8;--kn-muted:#a3a3a3;--kn-line:#2d2d2d;
  --kn-bg:#121212;--kn-soft:#1d1d1d;--kn-dark:#0a0a0a;color-scheme:dark;
}
[data-theme="dark"] body{background:var(--kn-bg);color:var(--kn-text)}
[data-theme="dark"] .kn-sec-title h2{background:#2a2a2a}
[data-theme="dark"] .kn-sec-title{border-color:#3a3a3a}
[data-theme="dark"] .kn-thumb-ph{background:linear-gradient(135deg,#232323,#1a1a1a)!important;color:#444}
[data-theme="dark"] .kn-ad-slot{background:#181818;border-color:#333;color:#666}
[data-theme="dark"] .kn-popular li::before{color:#333}
[data-theme="dark"] .kn-content blockquote,[data-theme="dark"] .kn-authorbox{background:var(--kn-soft)}
[data-theme="dark"] input,[data-theme="dark"] textarea,[data-theme="dark"] select{background:#1a1a1a;color:var(--kn-text);border-color:#333}
[data-theme="dark"] .kn-searchbar{background:#181818}
[data-theme="dark"] .kn-video{background:#0a0a0a}
[data-theme="dark"] img{filter:brightness(.92)}
/* Khabar Header & Footer plugin: follow dark mode too */
[data-theme="dark"] .khf-header{--khf-h-bg:#161616;--khf-h-text:#f0f0f0}
[data-theme="dark"] .khf-footer{--khf-f-bg:#0d0d0d;--khf-bottom-bg:#070707}
/* Elementor text widgets */
[data-theme="dark"] .elementor-widget-text-editor,[data-theme="dark"] .elementor-heading-title{color:var(--kn-ink)}

/* ---------- Responsive extras ---------- */
@media (max-width:640px){
  .kn-arch-lead{grid-template-columns:1fr}
  .kn-arch-lead h2{font-size:20px}
  .kn-postnav{grid-template-columns:1fr}
  .kn-postnav-next{grid-column:auto;text-align:right}
  .kn-byline{gap:10px}
}

/* ---------- Print ---------- */
@media print{
  .kn-topbar,.kn-nav,.kn-ticker,.kn-searchbar,.kn-sidebar,.kn-share,.kn-fs,.kn-footer,.khf-footer,.kn-top,.kn-progress,
  .kn-inad,.kn-article-ad,.kn-postnav,#comments,.kn-section .kn-latest-grid,.kn-header-ad{display:none!important}
  .kn-layout{display:block}
  body{font-size:14pt;color:#000;background:#fff}
  .kn-content a{color:#000;text-decoration:none}
}
[data-theme="dark"] .kn-ticker-label{background:var(--kn-accent);color:#fff}
[data-theme="dark"] .kn-ticker-label i{background:#fff}