/*
Theme Name: Online Khabri
Theme URI: https://onlinekhabri.in
Author: Online Khabri
Description: Professional, modern news theme for Online Khabri — Hindi news, crime, politics, education, tech, finance and entertainment coverage, with an audio-bulletin signature widget, ad-ready layout, and app-style mobile navigation.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: onlinekhabri
*/

:root{
  --ink:#181410; --ink-2:#241D17;
  --red:#C41E2E; --red-dark:#8C1520;
  --paper:#FAF8F3; --paper-2:#F1ECE1;
  --card:#FFFFFF;
  --text:#221E19; --text-soft:#5C574C; --text-faint:#8F8A7B;
  --line:#E4DECE; --line-strong:#D3CBB3;
  --gold:#B9822F;
  --c-crime:#8C1520; --c-edu:#2A5C99; --c-politics:#6B3FA0;
  --c-tech:#1F8A72; --c-finance:#2F7A4D; --c-health:#C0562F; --c-ent:#B0356C;
  --radius:8px;
  --serif-en:'Source Serif 4', serif; --serif-hi:'Noto Serif Devanagari', serif;
  --sans-en:'Inter', sans-serif; --sans-hi:'Noto Sans Devanagari', sans-serif;
  --mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden; width:100%;}
body{background:var(--paper); color:var(--text); font-family:var(--sans-hi), var(--sans-en); line-height:1.5; padding-bottom:64px; overflow-x:hidden; width:100%; max-width:100vw;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
h1,h2,h3{font-family:var(--serif-hi), var(--serif-en); font-weight:700; color:var(--ink); line-height:1.28;}
button{font-family:inherit; cursor:pointer;}
ul{list-style:none;}
.okhabri-icon{vertical-align:-3px; flex-shrink:0;}
.share-btn .okhabri-icon, .drawer-link-icon .okhabri-icon, .bottom-nav .dot .okhabri-icon, .store-badge .okhabri-icon, .author-box-links .okhabri-icon, .author-hero-btn .okhabri-icon{vertical-align:-2px;}

/* ===== TOP UTILITY BAR ===== */
.util-bar{background:var(--ink-2); color:#B7AF9C; font-family:var(--mono); font-size:11px;}
.util-inner{max-width:1240px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:6px 20px; overflow-x:auto; white-space:nowrap;}
.util-inner .left{display:flex; align-items:center; gap:14px; flex-shrink:0;}
.util-inner .right{display:flex; align-items:center; gap:14px; flex-shrink:0;}
.util-account{display:inline-flex; align-items:center; gap:6px;}
.util-account img{width:18px; height:18px; border-radius:50%; display:block;}
.util-inner a{color:#B7AF9C;}
.live-dot{width:6px; height:6px; border-radius:50%; background:var(--red); display:inline-block; margin-right:5px; animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.lang-toggle{display:flex; gap:0; border:1px solid rgba(183,175,156,.3); border-radius:4px; overflow:hidden;}
.lang-toggle span{padding:2px 8px; color:#8C8574;}
.lang-toggle span.active{background:var(--red); color:#fff;}

/* ===== MASTHEAD ===== */
.masthead{background:var(--ink); color:#EDE7DA; padding:18px 20px 0;}
.masthead-brand{max-width:1240px; margin:0 auto; text-align:center; padding-bottom:20px;}
@media(min-width:900px){
  .masthead-brand{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
    text-align:left; gap:14px 28px; padding-bottom:18px;
  }
  .mast-logo{margin-bottom:0;}
  .mast-tag{padding-left:16px; border-left:1px solid rgba(237,231,218,.2); margin-right:auto;}
  .mast-search{margin:0; max-width:320px; flex:0 1 320px;}
}
@media(min-width:1100px){
  .hero-main h1{font-size:27px;}
  .article-head h1{font-size:32px;}
  .app-cta h2{font-size:26px;}
}
.mast-logo{display:inline-flex; align-items:center; justify-content:center; gap:10px; margin-bottom:5px;}
.mic-mark{width:38px; height:38px; border-radius:9px; background:var(--red); display:flex; align-items:center; justify-content:center; color:#fff; font-size:17px; flex-shrink:0; overflow:hidden;}
.mic-mark svg{width:19px; height:19px; flex-shrink:0;}
.mic-mark img{width:100% !important; height:100% !important; max-width:38px !important; max-height:38px !important; object-fit:cover;}
.mast-logo .word{font-family:var(--serif-en); font-size:29px; font-weight:700; color:#fff;}
.mast-tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; color:var(--red); text-transform:uppercase;}
.mast-search{max-width:540px; margin:16px auto 0; display:flex; align-items:center; background:rgba(255,255,255,.05); border:1px solid rgba(237,231,218,.16); border-radius:22px; padding:3px 3px 3px 16px;}
.mast-search input[type="search"], .mast-search input[type="text"]{flex:1; background:transparent; border:none; outline:none; color:#EDE7DA; font-size:13.5px; padding:8px 0; font-family:var(--sans-en);}
.mast-search input::placeholder{color:#7C7666;}
.mast-search button{width:34px; height:34px; border-radius:50%; background:var(--red); border:none; color:#fff;}

/* ===== MEGA NAV (WordPress wp_nav_menu output) ===== */
.cat-nav{background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:120;}
.cat-nav-row{max-width:1240px; margin:0 auto; display:flex; align-items:center; gap:8px; padding:0 16px;}
.cat-nav-scroll{flex:1; min-width:0; overflow-x:auto;}
.cat-nav-inner{display:flex; gap:2px;}
.cat-nav-inner li{position:relative;}
.cat-nav-inner > li > a{display:flex; align-items:center; gap:4px; white-space:nowrap; font-family:var(--sans-en); font-size:13px; font-weight:600; padding:13px 13px; border-bottom:3px solid transparent; color:var(--text-soft);}
.cat-nav-inner > li.current-menu-item > a,
.cat-nav-inner > li:hover > a{color:var(--ink); border-color:var(--red);}
.cat-nav-inner ul.sub-menu{
  position:absolute; top:100%; left:0; background:var(--card); border:1px solid var(--line); border-top:2px solid var(--red);
  box-shadow:0 12px 28px rgba(24,20,16,.1); border-radius:0 0 8px 8px; padding:8px; min-width:200px;
  display:none; z-index:130;
}
.cat-nav-inner li:hover > ul.sub-menu{display:block;}
.cat-nav-inner ul.sub-menu a{display:block; font-size:13px; padding:8px 10px; border-radius:5px; color:var(--text-soft); font-weight:500;}
.cat-nav-inner ul.sub-menu a:hover{background:var(--paper-2); color:var(--ink);}

.wrap{max-width:1240px; margin:0 auto; padding:0 20px;}
@media(min-width:1024px){.wrap{padding:0 40px;}}
section{padding:26px 0;}
/* FIX: .wrap's class-level padding (0 20px) was silently overriding the
   section{padding:26px 0} rule above on every <section class="wrap">
   (class selectors beat element selectors), which is why sections across
   the whole site had almost no vertical gap between them. This
   higher-specificity rule restores real spacing between every section. */
section.wrap{margin:28px auto;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:15px; gap:12px;}
.section-head h2{font-size:20px;}
.eyebrow{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--red-dark); font-weight:600; display:block; margin-bottom:3px;}
.see-all{font-size:12.5px; font-weight:600; color:var(--red-dark); font-family:var(--sans-en); white-space:nowrap;}

/* ===== AD SLOTS — paste AdSense / Ad Manager code inside these in the template files ===== */
.ad-slot{background:var(--paper-2); border:1px dashed var(--line-strong); border-radius:6px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--text-faint); font-family:var(--sans-en); font-size:11px; letter-spacing:.04em; text-transform:uppercase; gap:3px; overflow:hidden;}
.ad-slot .size{font-family:var(--mono); font-size:10px; color:var(--text-faint);}
/* Live ad containers — only rendered when the site owner has pasted real ad code, so no visible border/label; just a clean wrapper. */
.ad-slot-live{margin:14px auto; overflow:hidden; text-align:center; max-width:100%;}
.ad-infeed-live{grid-column:1/-1; overflow:hidden; text-align:center; max-width:100%;}
.ad-leaderboard{height:90px; margin:14px auto; overflow:hidden;}
.ad-rect{height:250px; overflow:hidden;}
.ad-infeed{min-height:100px; border-radius:var(--radius); background:var(--card); border:1px solid var(--line); grid-column:1/-1; flex-direction:row; justify-content:flex-start; gap:14px; padding:0 16px; text-transform:none;}
.ad-infeed .adtag{background:var(--paper-2); border:1px dashed var(--line-strong); border-radius:5px; padding:2px 8px; font-size:10px; letter-spacing:.05em; text-transform:uppercase;}

/* ===== TAGS / BYLINE ===== */
.tag{display:inline-block; font-size:10.5px; font-weight:700; font-family:var(--sans-en); padding:3px 9px; border-radius:3px; letter-spacing:.03em; color:#fff; margin-bottom:8px;}
.tag-crime{background:var(--c-crime);} .tag-edu{background:var(--c-edu);} .tag-politics{background:var(--c-politics);}
.tag-tech{background:var(--c-tech);} .tag-finance{background:var(--c-finance);} .tag-health{background:var(--c-health);} .tag-ent{background:var(--c-ent);}
.byline{display:flex; gap:14px; font-size:11px; color:var(--text-faint); font-family:var(--sans-en); margin-top:8px; flex-wrap:wrap;}
.byline span, .byline-meta span{display:inline-flex; align-items:center; gap:4px;}
.byline span .okhabri-icon, .byline-meta span .okhabri-icon{vertical-align:unset;}

/* ===== BREAKING TICKER ===== */
.breaking-strip{background:linear-gradient(90deg, var(--red-dark), var(--red)); border-radius:24px; display:flex; align-items:center; overflow:hidden; margin-bottom:20px; box-shadow:0 4px 14px rgba(140,21,32,.22);}
.breaking-label{display:flex; align-items:center; gap:6px; background:rgba(0,0,0,.18); color:#fff; font-family:var(--sans-en); font-weight:700; font-size:11.5px; padding:11px 16px; flex-shrink:0; letter-spacing:.05em; position:relative;}
.breaking-label::before{content:''; width:7px; height:7px; border-radius:50%; background:#fff; display:inline-block; animation:pulse 1.4s infinite;}
.breaking-track{overflow:hidden; white-space:nowrap; flex:1; -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);}
.breaking-inner{display:inline-flex; align-items:center; gap:0; padding:11px 0; animation:scroll-left 30s linear infinite; color:#fff; font-size:13px; font-weight:500;}
.breaking-inner > *{padding:0 26px; position:relative;}
.breaking-inner > *:not(:last-child)::after{content:'●'; position:absolute; right:0; font-size:6px; top:50%; transform:translateY(-50%); color:rgba(255,255,255,.5);}
.breaking-strip:hover .breaking-inner{animation-play-state:paused;}
.breaking-inner a{color:#fff;}
@keyframes scroll-left{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ===== LAYOUT: content + sticky sidebar ===== */
.layout{display:grid; grid-template-columns:1fr; gap:26px;}
@media(min-width:980px){.layout{grid-template-columns:2.2fr 1fr;}}
.sidebar{display:flex; flex-direction:column; gap:22px;}
@media(min-width:980px){.sidebar{position:sticky; top:60px; align-self:start;}}

/* Hero */
.hero-grid{display:grid; grid-template-columns:1fr; gap:16px;}
.hero-main{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.hero-main img{width:100%; height:auto; display:block;}
.hero-main .body{padding:15px;}
.hero-main h1{font-size:21px; margin-bottom:6px;}
.hero-main h1 a{color:inherit; background-image:linear-gradient(var(--red), var(--red)); background-repeat:no-repeat; background-position:0 100%; background-size:0% 2px; transition:background-size .25s ease;}
.hero-main h1 a:hover{background-size:100% 2px;}
.hero-main p{color:var(--text-soft); font-size:13.5px;}
.hero-side{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.hero-side-item{display:flex; gap:12px; padding:12px 15px; border-bottom:1px solid var(--line);}
.hero-side-item:last-child{border-bottom:none;}
.hero-side-item .num{font-family:var(--mono); color:var(--text-faint); font-size:11px; width:15px; flex-shrink:0; padding-top:3px;}
.hero-side-item h3{font-size:14px; font-weight:600; font-family:var(--sans-hi); color:var(--text);}
.hero-side-item h3 a{color:inherit; background-image:linear-gradient(var(--red), var(--red)); background-repeat:no-repeat; background-position:0 100%; background-size:0% 1.5px; transition:background-size .25s ease;}
.hero-side-item h3 a:hover{background-size:100% 1.5px;}
@media(min-width:640px){.hero-grid{grid-template-columns:1.5fr 1fr;}}

/* Audio Bulletin — signature widget */
.audio-card{background:var(--ink); border-radius:var(--radius); padding:16px; color:#fff; display:flex; align-items:center; gap:14px;}
.play-btn{width:46px; height:46px; border-radius:50%; background:var(--red); border:none; color:#fff; font-size:16px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.audio-info{flex:1; min-width:0;}
.audio-info .eyebrow{color:var(--red); margin-bottom:2px;}
.audio-info h3{font-size:14px; color:#fff; font-family:var(--sans-hi); font-weight:600; margin-bottom:6px;}
.waveform{display:flex; align-items:center; gap:2px; height:18px;}
.waveform span{width:2.5px; background:#5C5548; border-radius:2px;}
.waveform span:nth-child(odd){background:var(--red); height:70%;}
.waveform span:nth-child(even){height:40%;}
.audio-dur{font-family:var(--mono); font-size:11px; color:#8C8574; margin-left:8px; flex-shrink:0;}

/* Cards */
.card-grid{display:grid; grid-template-columns:1fr; gap:14px;}
@media(min-width:640px){.card-grid{grid-template-columns:1fr 1fr;}}
.story-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;}
.story-card img{width:100%; height:auto; display:block;}
.story-card .body{padding:13px 14px 14px;}
.story-card h3{font-size:14.5px; font-weight:600; font-family:var(--sans-hi); color:var(--text);}
.story-card h3 a{color:inherit; background-image:linear-gradient(var(--red), var(--red)); background-repeat:no-repeat; background-position:0 100%; background-size:0% 1.5px; transition:background-size .25s ease;}
.story-card h3 a:hover{background-size:100% 1.5px;}

/* Sidebar widgets */
.widget{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:22px;}
.widget:last-child{margin-bottom:0;}
.widget h4, .widget-title{font-family:var(--sans-en); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--red-dark); font-weight:700; margin-bottom:12px;}
.rank-item{display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); align-items:flex-start;}
.rank-item:last-child{border-bottom:none;}
.rank-item .rank-num{font-family:var(--mono); font-size:13px; font-weight:700; color:#fff; width:26px; height:26px; flex-shrink:0; background:var(--red); border-radius:50%; display:flex; align-items:center; justify-content:center;}
.rank-item h5{font-size:13px; font-weight:600; font-family:var(--sans-hi); color:var(--text); line-height:1.35;}
.rank-item h5 a{color:inherit; background-image:linear-gradient(var(--red), var(--red)); background-repeat:no-repeat; background-position:0 100%; background-size:0% 1.5px; transition:background-size .25s ease;}
.rank-item h5 a:hover{background-size:100% 1.5px;}

.newsletter-widget{background:var(--paper-2); border:1px solid var(--line-strong);}
.newsletter-widget input{width:100%; padding:9px 12px; border-radius:6px; border:1px solid var(--line-strong); font-size:13px; margin:10px 0 8px; font-family:var(--sans-en); outline:none;}
.newsletter-widget button{width:100%; background:var(--red); color:#fff; border:none; padding:10px; border-radius:6px; font-weight:700; font-size:13px; font-family:var(--sans-en);}

/* Tabs (category quick links) */
.tabs{display:flex; gap:8px; margin-bottom:16px; overflow-x:auto; padding-bottom:2px;}
.tab-btn{font-family:var(--sans-en); font-size:13px; font-weight:600; white-space:nowrap; padding:8px 15px; border-radius:18px; border:1px solid var(--line-strong); background:var(--card); color:var(--text-soft);}
.tab-btn.active{background:var(--ink); color:#fff; border-color:var(--ink);}
.feed-grid{display:grid; grid-template-columns:1fr; gap:14px;}
@media(min-width:700px){.feed-grid{grid-template-columns:1fr 1fr;}}

/* Video */
.video-grid{display:grid; grid-template-columns:1fr; gap:14px;}
@media(min-width:700px){.video-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:900px){.video-grid{grid-template-columns:repeat(3,1fr);}}

/* Shorts — horizontal-scroll row of vertical clips */
.shorts-widget{margin-bottom:22px;}
.shorts-widget h4{font-family:var(--sans-en); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--red-dark); font-weight:700; margin-bottom:12px; display:flex; flex-direction:column; gap:3px;}
.shorts-subtitle{font-family:var(--sans-hi); font-size:17px; letter-spacing:0; text-transform:none; color:var(--ink); font-weight:700;}
.shorts-row{display:flex; gap:12px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch; scrollbar-width:thin;}
.short-card{position:relative; flex:0 0 130px; aspect-ratio:9/16; border-radius:12px; overflow:hidden; background:var(--ink); cursor:pointer;}
.short-card img{width:100%; height:100%; object-fit:cover; opacity:.8;}
.short-play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; color:var(--red);}
.short-title{position:absolute; bottom:0; left:0; right:0; padding:8px; color:#fff; font-size:11.5px; font-weight:600; font-family:var(--sans-hi); background:linear-gradient(transparent, rgba(0,0,0,.8)); line-height:1.3;}

/* Trending topics chips */
.chip-row{display:flex; flex-wrap:wrap; gap:9px;}
.chip{font-size:13px; font-weight:600; padding:8px 14px; border-radius:20px; background:var(--paper-2); border:1px solid var(--line-strong); color:var(--text); font-family:var(--sans-en);}
.chip:hover{background:var(--ink); color:#fff; border-color:var(--ink);}
.video-card{position:relative; border-radius:var(--radius); overflow:hidden; background:var(--ink);}
.video-card img{width:100%; height:auto; display:block; opacity:.75;}
.video-play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; color:var(--red); font-size:16px;}
.video-title{position:absolute; bottom:0; left:0; right:0; padding:12px; color:#fff; font-size:13px; font-weight:600; font-family:var(--sans-hi); background:linear-gradient(transparent, rgba(0,0,0,.75));}
.video-dur{position:absolute; top:8px; right:8px; background:rgba(0,0,0,.65); color:#fff; font-family:var(--mono); font-size:10px; padding:2px 6px; border-radius:3px;}

/* App CTA */
.app-cta{background:var(--ink); border-radius:12px; padding:30px 22px; color:#fff; display:flex; flex-direction:column; gap:16px; position:relative; overflow:hidden;}
.app-cta::after{content:''; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:var(--red); opacity:.18;}
.app-cta .eyebrow{color:var(--red);}
.app-cta h2{color:#fff; font-size:23px; max-width:420px;}
.app-cta p{color:#B7AF9C; font-size:13.5px; max-width:420px;}
.store-badges{display:flex; gap:10px; flex-wrap:wrap;}
.store-badge{display:flex; align-items:center; gap:8px; background:#fff; color:var(--ink); padding:9px 16px; border-radius:8px; font-weight:700; font-size:13px; font-family:var(--sans-en);}
@media(min-width:800px){.app-cta{flex-direction:row; align-items:center; justify-content:space-between;}}

/* Footer */
footer{background:var(--ink-2); color:#C9C2B0; margin-top:16px; padding:0 0 90px; position:relative; overflow:hidden;}
.footer-top-accent{height:3px; background:linear-gradient(90deg, var(--red-dark), var(--red), var(--gold)); width:100%;}
footer::after{content:''; position:absolute; top:-60px; right:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, rgba(196,30,46,.16), transparent 70%); pointer-events:none;}
.footer-brand-row{display:flex; flex-direction:column; gap:20px; padding:32px 0 26px; border-bottom:1px solid rgba(255,255,255,.08);}
@media(min-width:760px){.footer-brand-row{flex-direction:row; align-items:center; justify-content:space-between; gap:32px;}}
.footer-brand-block{max-width:420px;}
.footer-mic{width:30px; height:30px; border-radius:8px; background:var(--red); display:inline-flex; align-items:center; justify-content:center; margin-right:8px; vertical-align:-8px;}
.footer-newsletter-mini{flex-shrink:0; width:100%;}
@media(min-width:760px){.footer-newsletter-mini{width:auto; min-width:300px;}}
.footer-newsletter-label{display:block; font-family:var(--sans-en); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#8C8574; margin-bottom:8px;}
.footer-newsletter-form{display:flex; gap:8px;}
.footer-newsletter-form input{flex:1; padding:10px 14px; border-radius:20px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); color:#EDE7DA; font-size:13px; font-family:var(--sans-en); outline:none;}
.footer-newsletter-form input::placeholder{color:#7C7666;}
.footer-newsletter-form button{width:38px; height:38px; border-radius:50%; background:var(--red); border:none; color:#fff; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.back-to-top{width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); color:#DDD6C4; display:flex; align-items:center; justify-content:center; transform:rotate(-90deg);}
.back-to-top:hover{background:var(--red); border-color:var(--red); color:#fff;}
.footer-grid{display:grid; grid-template-columns:1fr; gap:26px; padding:28px 0 8px;}
@media(min-width:640px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:900px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;}}
footer h4, footer .widget-title{font-family:var(--sans-en); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:#8C8574; margin-bottom:12px;}
footer a{display:block; font-size:13px; padding:5px 0; color:#DDD6C4;}
.footer-logo{font-family:var(--serif-en); font-size:21px; color:#fff; margin-bottom:8px;}
footer .desc{font-size:12.5px; color:#9C9583; max-width:280px; margin-bottom:14px;}
.social-row{display:flex; gap:8px; margin-top:6px;}
.social-row a{width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; padding:0; font-size:13px;}
.footer-bottom{max-width:1240px; margin:26px auto 0; padding:18px 20px 0; border-top:1px solid rgba(255,255,255,.08); font-size:11.5px; color:#847D6B; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}

/* Bottom app nav (mobile) */
.bottom-nav{position:fixed; bottom:0; left:0; right:0; z-index:150; background:var(--card); border-top:1px solid var(--line); display:flex; justify-content:space-around; padding:8px 4px 10px; box-shadow:0 -4px 14px rgba(24,20,16,.06);}
.bottom-nav a{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; color:var(--text-faint); font-family:var(--sans-en); font-weight:600;}
.bottom-nav a.active{color:var(--red-dark);}
.bottom-nav .dot{width:20px; height:20px; border-radius:6px; background:var(--paper-2); display:flex; align-items:center; justify-content:center; font-size:11px;}
.bottom-nav a.active .dot{background:var(--red); color:#fff;}
@media(min-width:980px){.bottom-nav{display:none;} body{padding-bottom:0;}}

/* ===== Audio player states ===== */
.play-btn.is-playing{background:var(--gold);}
.audio-card audio{display:none;}

/* ===== Video modal ===== */
.video-card{cursor:pointer; border:none; text-align:left; width:100%; padding:0;}
.okhabri-modal{position:fixed; inset:0; z-index:400; display:none; align-items:center; justify-content:center;}
.okhabri-modal.open{display:flex;}
.okhabri-modal-backdrop{position:absolute; inset:0; background:rgba(15,12,9,.82);}
.okhabri-modal-body{position:relative; width:min(920px, 92vw); z-index:2;}
.okhabri-modal-close{position:absolute; top:-42px; right:0; background:transparent; border:1px solid rgba(255,255,255,.4); color:#fff; width:34px; height:34px; border-radius:50%; font-size:15px;}
.okhabri-modal-media{position:relative; width:100%; padding-top:56.25%; background:#000; border-radius:8px; overflow:hidden;}
.okhabri-modal-media iframe, .okhabri-modal-media video{position:absolute; inset:0; width:100%; height:100%; border:0;}

/* ===== Mobile drawer menu — opens from LEFT with a smooth slide ===== */
.okhabri-drawer{position:fixed; inset:0; z-index:300; visibility:hidden; pointer-events:none;}
.okhabri-drawer.open{visibility:visible; pointer-events:auto;}
.okhabri-drawer-backdrop{position:absolute; inset:0; background:rgba(15,12,9,0); transition:background .3s ease;}
.okhabri-drawer.open .okhabri-drawer-backdrop{background:rgba(15,12,9,.55);}
.okhabri-drawer-panel{
  position:absolute; top:0; left:0; bottom:0; width:86%; max-width:360px; background:var(--paper);
  overflow-y:auto; padding:18px 18px 40px; box-shadow:8px 0 24px rgba(0,0,0,.15);
  transform:translateX(-100%); transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.okhabri-drawer.open .okhabri-drawer-panel{transform:translateX(0);}
.okhabri-drawer-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.okhabri-drawer-close{width:34px; height:34px; border-radius:50%; border:1px solid var(--line-strong); background:var(--card); font-size:14px;}
.drawer-search{margin-bottom:18px;}
.drawer-search input{width:100%; padding:11px 14px; border-radius:20px; border:1px solid var(--line-strong); background:var(--paper-2); font-size:13.5px; font-family:var(--sans-en); outline:none;}
.drawer-link{display:flex; align-items:center; gap:12px; padding:12px; border-radius:10px; margin-bottom:8px; background:var(--card); border:1px solid var(--line);}
.drawer-link-icon{width:38px; height:38px; border-radius:9px; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;}
.drawer-link strong{display:block; font-size:14.5px; color:var(--text); font-family:var(--sans-hi);}
.drawer-link small{display:block; font-size:11.5px; color:var(--text-faint); font-family:var(--sans-en);}
.drawer-simple-links{display:flex; gap:16px; padding:14px 4px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:14px 0;}
.drawer-simple-link{font-size:13.5px; font-weight:600; color:var(--text-soft); font-family:var(--sans-en);}
.drawer-cats-title{display:block; font-family:var(--sans-en); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--red-dark); font-weight:700; margin-bottom:10px;}
.drawer-cat-link{display:flex; justify-content:space-between; padding:10px 4px; font-size:14px; font-family:var(--sans-hi); border-bottom:1px solid var(--line); color:var(--text);}
.drawer-cat-count{font-family:var(--mono); font-size:11.5px; color:var(--text-faint); background:var(--paper-2); padding:2px 8px; border-radius:10px;}

/* ===== Share buttons ===== */
.share-section{margin:22px 0; padding:18px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);}
.share-title{display:flex; align-items:center; gap:8px; font-family:var(--sans-en); font-size:13px; font-weight:700; letter-spacing:.03em; color:var(--text); margin-bottom:14px;}
.share-row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
@media(min-width:600px){.share-row{grid-template-columns:repeat(5,1fr);}}
.share-btn{display:flex; align-items:center; justify-content:center; gap:7px; padding:11px 10px; border-radius:8px; color:#fff; font-weight:700; font-size:13px; font-family:var(--sans-en); border:none; cursor:pointer;}
.share-whatsapp{background:#25D366;}
.share-facebook{background:#1877F2;}
.share-x{background:#0F0F0F;}
.share-telegram{background:#26A5E4;}
.share-copy{background:var(--ink);}

/* ===== Language dropdown — lives inside the sticky category nav, so it's
   reachable on every page (including while scrolling an article) ===== */
.lang-dropdown{position:relative; flex-shrink:0;}
.lang-dropdown-btn{display:flex; align-items:center; gap:5px; background:var(--paper-2); border:1px solid var(--line-strong); border-radius:14px; padding:6px 11px; color:var(--text); font-family:var(--sans-en); font-size:12.5px; font-weight:600;}
.lang-dropdown-btn:hover{border-color:var(--red); color:var(--red-dark);}
.lang-dropdown-panel{
  position:absolute; top:calc(100% + 8px); right:0; z-index:999; min-width:160px; max-height:280px; overflow-y:auto;
  background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 28px rgba(24,20,16,.18);
  padding:6px; display:none; flex-direction:column; gap:2px;
}
.lang-dropdown.open .lang-dropdown-panel{display:flex;}
.lang-dropdown-item{font-size:13px; padding:8px 10px; border-radius:6px; color:var(--text); font-family:var(--sans-en); font-weight:500;}
.lang-dropdown-item:hover{background:var(--paper-2);}
.lang-dropdown-item.active{background:var(--ink); color:#fff; font-weight:700;}

/* ===== Compact byline (top of article) ===== */
.byline-compact{display:flex; align-items:center; gap:11px; margin-top:16px;}
.byline-avatar img{width:38px; height:38px; border-radius:50%; object-fit:cover; display:block;}
.byline-info{display:flex; flex-direction:column; gap:2px;}
.byline-name{font-weight:700; font-size:14.5px; color:var(--ink); font-family:var(--sans-en);}
.byline-name:hover{text-decoration:underline;}
.verified-badge{display:inline-flex; align-items:center; vertical-align:middle; margin-left:4px; position:relative; top:-1px;}
.byline-meta{display:flex; flex-wrap:wrap; gap:10px; font-size:11.5px; color:var(--text-faint); font-family:var(--sans-en);}

/* ===== Author box (kept for author.php etc.) ===== */
.author-box{display:flex; gap:16px; padding:20px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); margin:22px 0;}
.author-box img{width:64px; height:64px; border-radius:50%; flex-shrink:0; object-fit:cover;}
.author-role-badge{display:inline-block; background:var(--red); color:#fff; font-size:10.5px; font-weight:700; font-family:var(--sans-en); padding:3px 10px; border-radius:12px; letter-spacing:.03em; margin-bottom:6px;}
.author-box-info h4{font-size:17px; margin-bottom:4px;}
.author-box-info h4 a{color:var(--ink);}
.author-box-info p{font-size:13px; color:var(--text-soft); margin-bottom:8px;}
.author-box-links{display:flex; gap:14px; flex-wrap:wrap;}
.author-box-links a{font-size:12.5px; font-weight:600; font-family:var(--sans-en); color:var(--red-dark);}

/* ===== Author archive hero (author.php) ===== */
.author-hero{text-align:center; padding:34px 20px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); margin-top:20px;}
.author-hero img{width:100px; height:100px; border-radius:50%; margin:0 auto 14px; object-fit:cover; border:4px solid var(--paper-2);}
.author-hero-badge{display:inline-block; background:var(--red); color:#fff; font-size:11px; font-weight:700; font-family:var(--sans-en); padding:4px 12px; border-radius:14px; letter-spacing:.03em; margin-bottom:10px;}
.author-hero h1{font-size:24px; margin-bottom:4px;}
.author-hero p{color:var(--text-soft); font-size:13.5px;}
.author-hero-bio{max-width:480px; margin:10px auto 0;}
.author-hero-links{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px;}
.author-hero-btn{background:var(--ink); color:#fff; font-size:12.5px; font-weight:700; font-family:var(--sans-en); padding:9px 16px; border-radius:16px;}

/* ===== Single article page ===== */
.article-head{max-width:820px; margin:0 auto; padding:26px 20px 24px;}
.article-head .tag{margin-bottom:12px;}
.article-head h1{font-size:28px; margin-bottom:12px;}
.article-meta{display:flex; gap:16px; color:var(--text-faint); font-size:12.5px; font-family:var(--sans-en); flex-wrap:wrap; margin-bottom:18px;}
.article-meta span{display:inline-flex; align-items:center; gap:4px;}
/* Gap between the byline block and the featured image below it */
.byline-compact{margin-bottom:2px;}
.article-featured{max-width:960px; margin:0 auto 6px; padding:0 20px;}
.article-featured img{border-radius:var(--radius); width:100%; height:auto; display:block;}
.article-body{max-width:820px; margin:0 auto; padding:22px 20px; font-size:16px; color:var(--text);}
.article-body p{margin-bottom:16px;}
.article-body h2,.article-body h3{margin:22px 0 10px;}

/* Inline images inside article content — never sit flush against text */
.article-body img{margin:22px auto; border-radius:8px; width:100%; height:auto; display:block;}
.article-body figure{margin:22px auto;}
.article-body figure img{margin:0 auto;}
.article-body figcaption{margin-top:8px; font-size:12.5px; color:var(--text-faint); text-align:center; font-family:var(--sans-en); line-height:1.4;}
.article-body p:has(> img:only-child){margin:24px 0;}

/* Internal vs external links inside article content — visually distinct
   (classified by main.js: same-domain links vs links leaving the site) */
.article-body a{font-weight:600; text-decoration:underline; text-underline-offset:2px; transition:text-decoration-color .15s ease;}
.article-body a.link-internal{color:var(--red-dark); text-decoration-color:rgba(140,21,32,.35);}
.article-body a.link-internal:hover{text-decoration-color:var(--red-dark);}
.article-body a.link-external{color:var(--c-edu); text-decoration-color:rgba(42,92,153,.35);}
.article-body a.link-external:hover{text-decoration-color:var(--c-edu);}
.article-body a .ext-icon{display:inline-flex; align-items:center; margin-left:2px; vertical-align:-1px;}

/* Article image gallery — multiple images in one swipeable row.
   Heights are fixed so the row scrolls at an even height, but each image
   keeps its own natural width/aspect ratio instead of being cropped to a
   uniform ratio. Works with the core WordPress Gallery block and the
   classic [gallery] shortcode — just add multiple images via either. */
.article-body .wp-block-gallery,
.article-body .gallery{
  display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
  margin:24px 0; padding-bottom:6px; list-style:none;
}
.article-body .wp-block-gallery figure,
.article-body .gallery .gallery-item{
  flex:0 0 auto; scroll-snap-align:start; height:320px; margin:0; width:auto;
}
.article-body .wp-block-gallery figure img,
.article-body .gallery .gallery-item img{
  height:100%; width:auto; max-width:none; border-radius:8px; display:block; margin:0;
}
.article-body .gallery .gallery-caption{display:none;}
@media(max-width:600px){
  .article-body .wp-block-gallery figure, .article-body .gallery .gallery-item{height:230px;}
}

/* Long-article intro — shown in full by default; if it's too tall, JS
   collapses it behind a fade + "read more" toggle. */
.article-body .okhabri-intro{overflow:hidden; position:relative; transition:max-height .35s ease;}
.article-body .okhabri-intro.collapsed::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:56px;
  background:linear-gradient(transparent, var(--paper));
}
.okhabri-readmore-btn{
  display:inline-flex; align-items:center; gap:6px; margin:12px 0 8px; font-family:var(--sans-en);
  font-size:13px; font-weight:700; color:var(--red-dark); background:var(--paper-2);
  border:1px solid var(--line-strong); padding:8px 16px; border-radius:20px;
}
.okhabri-readmore-btn:hover{background:var(--ink); color:#fff; border-color:var(--ink);}
.okhabri-readmore-btn .chev{display:inline-flex; transition:transform .2s ease;}
.okhabri-readmore-btn.is-open .chev{transform:rotate(180deg);}

/* Collapsible headings — only applied by main.js when the article has 5+
   headings, so short articles read normally with no arrows at all. */
.article-body .okhabri-section{border-bottom:1px solid var(--line);}
.article-body .okhabri-section:last-child{border-bottom:none;}
.article-body .okhabri-section-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  cursor:pointer; padding:16px 0; user-select:none;
}
.article-body .okhabri-section-head h2,
.article-body .okhabri-section-head h3{margin:0;}
.article-body .okhabri-section-arrow{
  flex-shrink:0; width:30px; height:30px; border-radius:50%; background:var(--paper-2);
  display:flex; align-items:center; justify-content:center; color:var(--text-soft);
  transition:transform .28s ease, background .2s ease, color .2s ease;
}
.article-body .okhabri-section.open > .okhabri-section-head .okhabri-section-arrow{
  transform:rotate(180deg); background:var(--red); color:#fff;
}
.article-body .okhabri-section-content{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.article-body .okhabri-section-content > *:first-child{margin-top:0;}
.article-body .okhabri-section-content > *:last-child{margin-bottom:0;}
.article-body .okhabri-section:not(.open) .okhabri-section-content{padding-bottom:0;}
.article-body .okhabri-section.open .okhabri-section-content{padding-bottom:16px;}

.article-tags{max-width:820px; margin:0 auto 20px; padding:0 20px; display:flex; gap:8px; flex-wrap:wrap;}
.article-tags a{background:var(--paper-2); border:1px solid var(--line-strong); border-radius:16px; padding:6px 12px; font-size:12px; font-family:var(--sans-en);}

/* ===== Archive / category page ===== */
.archive-head{padding:24px 0 6px;}
.archive-head h1{font-size:24px;}
.pagination{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:34px 0 26px; font-family:var(--sans-en); font-size:13px;}
.pagination a, .pagination span{display:inline-flex; align-items:center; gap:5px; padding:8px 13px; border:1px solid var(--line-strong); border-radius:6px; color:var(--text-soft);}
.pagination a:hover{border-color:var(--red); color:var(--red-dark);}
.pagination .current{background:var(--ink); color:#fff; border-color:var(--ink);}

.tag-archive-badge{display:inline-block; background:var(--paper-2); border:1px solid var(--line-strong); color:var(--gold); font-family:var(--mono); font-size:12px; font-weight:600; padding:5px 12px; border-radius:16px; margin-bottom:12px;}

.auth-wrap{max-width:420px; margin:36px auto 60px;}
.auth-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px;}
.auth-tabs{display:flex; gap:6px; background:var(--paper-2); border-radius:24px; padding:4px; margin-bottom:18px;}
.auth-tab{flex:1; border:none; background:transparent; padding:9px 0; border-radius:20px; font-family:var(--sans-en); font-size:13.5px; font-weight:700; color:var(--text-soft);}
.auth-tab.active{background:var(--ink); color:#fff;}
.auth-alert{background:#FCEAEA; border:1px solid #E9B9B9; color:var(--red-dark); font-size:12.5px; font-family:var(--sans-en); padding:10px 12px; border-radius:8px; margin-bottom:16px;}
.auth-form{display:none; flex-direction:column; gap:14px;}
.auth-form.active{display:flex;}
.auth-form label{display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:600; color:var(--text-soft); font-family:var(--sans-en);}
.auth-form input[type="text"], .auth-form input[type="email"], .auth-form input[type="password"]{padding:11px 13px; border:1px solid var(--line-strong); border-radius:8px; background:var(--paper); font-size:14px; font-family:var(--sans-en); outline:none; color:var(--text);}
.auth-form input:focus{border-color:var(--red);}
.auth-hint{font-size:11px; color:var(--text-faint); font-family:var(--sans-en); margin-top:-8px;}
.auth-check{flex-direction:row !important; align-items:center; gap:8px !important; font-weight:500;}
.auth-check input{width:auto;}
.auth-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
.auth-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px; border-radius:8px; font-family:var(--sans-en); font-weight:700; font-size:14px; border:none; text-align:center; cursor:pointer;}
.auth-btn-dark{background:var(--ink); color:#fff;}
.auth-btn-dark:hover{background:var(--red-dark);}
.auth-btn-outline{background:transparent; border:1px solid var(--line-strong); color:var(--text);}
.auth-divider{display:flex; align-items:center; gap:12px; color:var(--text-faint); font-size:12px; font-family:var(--sans-en); margin:16px 0;}
.auth-divider::before, .auth-divider::after{content:''; flex:1; height:1px; background:var(--line);}
.auth-google-btn{display:flex; justify-content:center;}
.auth-account{text-align:center;}
.auth-account img{width:72px; height:72px; border-radius:50%; margin:0 auto 12px; object-fit:cover;}
.auth-account h1{font-size:19px; margin-bottom:2px;}
.auth-account p{color:var(--text-soft); font-size:13px; margin-bottom:18px;}
.auth-account-actions{display:flex; gap:10px;}
.auth-account-actions .auth-btn{flex:1;}