/*
Theme Name: 101 Urdu Nastaliq
Theme URI: https://101urdu.com
Author: 101 Urdu
Author URI: https://101urdu.com
Description: An elegant, RTL-first Urdu news portal theme with Nastaliq typography, a nocturnal (dark) reading mode, a breaking-news ticker, category grids, and built-in demo content. Designed for Urdu news, magazine and blog publishers.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: u101
Tags: news, blog, one-column, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root{
	--u101-bg:#0a0a0a;
	--u101-surface:#111111;
	--u101-surface-2:#161616;
	--u101-border:rgba(255,255,255,.08);
	--u101-border-strong:rgba(255,255,255,.16);
	--u101-gold:#d4af37;
	--u101-gold-soft:rgba(212,175,55,.15);
	--u101-text:#f2f2f2;
	--u101-muted:#a8a29e;
	--u101-muted-2:#6b6560;
	--u101-red:#c02626;
	--u101-radius:10px;
	--font-nastaliq:'Noto Nastaliq Urdu','Jameel Noori Nastaleeq','Urdu Typesetting',serif;
	--font-naskh:'Noto Sans Arabic','Segoe UI',Tahoma,sans-serif;
	--font-latin:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
	margin:0;
	background:var(--u101-bg);
	color:var(--u101-text);
	font-family:var(--font-nastaliq);
	direction:rtl;
	text-align:right;
	line-height:2.1;
	font-size:17px;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5,h6{font-family:var(--font-nastaliq);line-height:1.75;margin:0 0 .5em;font-weight:700;}
p{margin:0 0 1.1em;}
button,input,textarea,select{font-family:inherit;color:inherit;}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:var(--u101-bg);}
::-webkit-scrollbar-thumb{background:rgba(212,175,55,.3);border-radius:3px;}

.u101-container{max-width:1280px;margin:0 auto;padding:0 20px;}
.u101-latin{font-family:var(--font-latin);direction:ltr;display:inline-block;}
.screen-reader-text{position:absolute;left:-9999px;}

/* ==========================================================================
   3. Top utility bar
   ========================================================================== */
.u101-topbar{
	background:#000;border-bottom:1px solid var(--u101-border);
	font-size:12.5px;color:var(--u101-muted);
}
.u101-topbar-inner{display:flex;align-items:center;justify-content:space-between;height:38px;gap:16px;}
.u101-topbar-date{white-space:nowrap;}
.u101-topbar-rates{display:flex;gap:18px;overflow:hidden;}
.u101-topbar-rates span{white-space:nowrap;}
.u101-topbar-rates b{color:var(--u101-gold);font-weight:600;}
@media (max-width:780px){.u101-topbar-rates{display:none;}}

/* ==========================================================================
   4. Header / Navbar
   ========================================================================== */
.u101-header{background:var(--u101-bg);border-bottom:1px solid var(--u101-border);position:sticky;top:0;z-index:50;backdrop-filter:blur(8px);background:rgba(10,10,10,.92);}
.u101-header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px;}
.u101-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-nastaliq);font-weight:700;font-size:26px;color:var(--u101-text);}
.u101-logo img{max-height:44px;width:auto;}
.u101-logo .u101-logo-gold{color:var(--u101-gold);}
.u101-logo-sub{font-size:11px;color:var(--u101-muted);font-family:var(--font-naskh);margin-top:2px;}

.u101-navbar{background:var(--u101-surface);border-bottom:1px solid var(--u101-border);}
.u101-navbar-inner{display:flex;align-items:center;gap:2px;overflow-x:auto;}
.u101-navbar a{
	display:inline-block;padding:12px 16px;font-size:14.5px;white-space:nowrap;
	color:var(--u101-text);border-bottom:2px solid transparent;transition:.2s;
}
.u101-navbar a:hover,.u101-navbar li.current-menu-item>a{color:var(--u101-gold);border-bottom-color:var(--u101-gold);}
.u101-navbar ul{display:flex;}

.u101-header-actions{display:flex;align-items:center;gap:10px;}
.u101-icon-btn{
	width:38px;height:38px;display:flex;align-items:center;justify-content:center;
	border:1px solid var(--u101-border);border-radius:8px;background:transparent;cursor:pointer;color:var(--u101-text);
}
.u101-icon-btn:hover{border-color:var(--u101-gold);color:var(--u101-gold);}
.u101-menu-toggle{display:none;}

@media (max-width:900px){
	.u101-menu-toggle{display:flex;}
	.u101-navbar{display:none;}
	.u101-navbar.is-open{display:block;}
	.u101-navbar-inner{flex-direction:column;align-items:stretch;}
}

/* Search form popover */
.u101-search-form{display:flex;gap:8px;padding:14px 0;}
.u101-search-form input[type=search]{
	flex:1;background:var(--u101-surface);border:1px solid var(--u101-border);border-radius:8px;
	padding:10px 14px;color:var(--u101-text);font-family:var(--font-nastaliq);
}
.u101-search-form button{
	background:var(--u101-gold);color:#000;border:none;border-radius:8px;padding:0 18px;font-weight:700;cursor:pointer;
}

/* ==========================================================================
   5. Breaking news ticker
   ========================================================================== */
.u101-ticker{background:var(--u101-red);color:#fff;overflow:hidden;}
.u101-ticker-inner{display:flex;align-items:center;}
.u101-ticker-label{
	background:#000;padding:9px 16px;font-weight:700;font-size:13.5px;white-space:nowrap;
	display:flex;align-items:center;gap:6px;flex-shrink:0;
}
.u101-ticker-track{overflow:hidden;white-space:nowrap;flex:1;padding:9px 0;}
.u101-ticker-list{display:inline-flex;animation:u101ticker 38s linear infinite;padding-inline-start:100%;}
.u101-ticker-list:hover{animation-play-state:paused;}
.u101-ticker-list a{padding:0 28px;font-size:14px;position:relative;}
.u101-ticker-list a::after{content:'•';position:absolute;inset-inline-start:-16px;opacity:.6;}
@keyframes u101ticker{0%{transform:translateX(0);}100%{transform:translateX(-100%);}}
[dir=rtl] .u101-ticker-list{animation-name:u101ticker-rtl;}
@keyframes u101ticker-rtl{0%{transform:translateX(0);}100%{transform:translateX(100%);}}

/* ==========================================================================
   6. Layout grid
   ========================================================================== */
.u101-main{padding:32px 0 60px;}
.u101-layout{display:grid;grid-template-columns:2.6fr 1fr;gap:32px;align-items:start;}
@media (max-width:980px){.u101-layout{grid-template-columns:1fr;}}

.u101-section-title{
	display:flex;align-items:center;justify-content:space-between;
	margin:0 0 18px;padding-bottom:10px;border-bottom:2px solid var(--u101-border);
}
.u101-section-title h2{font-size:22px;margin:0;color:var(--u101-text);}
.u101-section-title h2 span{color:var(--u101-gold);}
.u101-section-title a{font-size:13px;color:var(--u101-muted);}
.u101-section-title a:hover{color:var(--u101-gold);}

/* ==========================================================================
   7. Hero / lead section
   ========================================================================== */
.u101-hero{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;margin-bottom:36px;}
@media (max-width:900px){.u101-hero{grid-template-columns:1fr;}}

.u101-lead-card{background:var(--u101-surface);border:1px solid var(--u101-border);border-radius:var(--u101-radius);overflow:hidden;transition:.25s;}
.u101-lead-card:hover{border-color:var(--u101-border-strong);}
.u101-lead-card .u101-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#1a1a1a;}
.u101-lead-card .u101-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s;}
.u101-lead-card:hover .u101-thumb img{transform:scale(1.05);}
.u101-badge{
	position:absolute;top:12px;inset-inline-end:12px;background:var(--u101-gold);color:#000;
	font-weight:700;font-size:12px;padding:3px 10px;border-radius:4px;
}
.u101-lead-body{padding:22px;}
.u101-cat-label{color:var(--u101-gold);font-weight:700;font-size:13px;}
.u101-meta{color:var(--u101-muted);font-size:12.5px;}
.u101-meta .sep{opacity:.4;padding:0 6px;}
.u101-lead-body h1,.u101-lead-body h3{font-size:24px;margin:10px 0;}
.u101-lead-body h1 a,.u101-lead-body h3 a{transition:.2s;}
.u101-lead-body h1 a:hover,.u101-lead-body h3 a:hover{color:var(--u101-gold);}
.u101-excerpt{color:var(--u101-muted);font-size:15px;}

.u101-sub-list{display:flex;flex-direction:column;gap:16px;}
.u101-sub-item{display:flex;gap:14px;background:var(--u101-surface);border:1px solid var(--u101-border);border-radius:var(--u101-radius);padding:12px;transition:.2s;}
.u101-sub-item:hover{border-color:var(--u101-border-strong);}
.u101-sub-item .u101-thumb{width:110px;flex-shrink:0;aspect-ratio:4/3;border-radius:6px;overflow:hidden;}
.u101-sub-item .u101-thumb img{width:100%;height:100%;object-fit:cover;}
.u101-sub-item h3{font-size:16px;margin:0 0 6px;}

/* ==========================================================================
   8. Post cards / grids
   ========================================================================== */
.u101-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media (max-width:980px){.u101-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.u101-grid{grid-template-columns:1fr;}}
.u101-grid.u101-grid-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){.u101-grid.u101-grid-3{grid-template-columns:repeat(2,1fr);}}

.u101-card{background:var(--u101-surface);border:1px solid var(--u101-border);border-radius:var(--u101-radius);overflow:hidden;display:flex;flex-direction:column;transition:.2s;}
.u101-card:hover{border-color:var(--u101-border-strong);transform:translateY(-2px);}
.u101-card .u101-thumb{aspect-ratio:16/10;overflow:hidden;background:#1a1a1a;}
.u101-card .u101-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.u101-card:hover .u101-thumb img{transform:scale(1.06);}
.u101-card-body{padding:14px;flex:1;display:flex;flex-direction:column;}
.u101-card-body h3{font-size:16.5px;margin:6px 0;flex:1;}
.u101-card-body h3 a:hover{color:var(--u101-gold);}
.u101-card .u101-excerpt{font-size:13.5px;margin-bottom:8px;}

.u101-category-section{margin-bottom:40px;}

/* ==========================================================================
   9. Sidebar
   ========================================================================== */
.u101-sidebar .widget{background:var(--u101-surface);border:1px solid var(--u101-border);border-radius:var(--u101-radius);padding:18px;margin-bottom:24px;}
.u101-sidebar .widget-title{font-size:17px;color:var(--u101-gold);border-bottom:1px solid var(--u101-border);padding-bottom:10px;margin:0 0 14px;}
.u101-popular-item{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--u101-border);}
.u101-popular-item:last-child{border-bottom:none;}
.u101-popular-num{font-family:var(--font-latin);font-weight:700;color:var(--u101-gold);font-size:20px;width:26px;flex-shrink:0;}
.u101-popular-item h4{font-size:14.5px;margin:0;line-height:1.9;}
.u101-popular-item h4 a:hover{color:var(--u101-gold);}
.u101-cat-list li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--u101-border);}
.u101-cat-list li:last-child{border-bottom:none;}
.u101-cat-list a:hover{color:var(--u101-gold);}
.u101-cat-list .count{color:var(--u101-muted);font-size:12px;font-family:var(--font-latin);}
.u101-tag-cloud a{
	display:inline-block;margin:4px;padding:6px 12px;background:var(--u101-bg);border:1px solid var(--u101-border);
	border-radius:20px;font-size:13px;
}
.u101-tag-cloud a:hover{border-color:var(--u101-gold);color:var(--u101-gold);}
.u101-newsletter p{font-size:13.5px;color:var(--u101-muted);}
.u101-newsletter input{width:100%;padding:10px;margin-bottom:8px;background:var(--u101-bg);border:1px solid var(--u101-border);border-radius:6px;color:var(--u101-text);}
.u101-newsletter button{width:100%;padding:10px;background:var(--u101-gold);color:#000;font-weight:700;border:none;border-radius:6px;cursor:pointer;}
.u101-prayer-times{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:13.5px;}
.u101-prayer-times div{display:flex;justify-content:space-between;padding:6px 8px;background:var(--u101-bg);border-radius:6px;}
.u101-prayer-times b{color:var(--u101-gold);}

/* ==========================================================================
   10. Single article
   ========================================================================== */
.u101-article-header{margin-bottom:20px;}
.u101-article-header h1{font-size:30px;}
.u101-article-thumb{border-radius:var(--u101-radius);overflow:hidden;margin-bottom:10px;border:1px solid var(--u101-border);}
.u101-article-caption{color:var(--u101-muted-2);font-size:12.5px;margin-bottom:24px;}
.u101-article-body{font-size:18px;line-height:2.3;}
.u101-article-body p{margin-bottom:1.3em;}
.u101-key-points{background:var(--u101-surface);border:1px solid var(--u101-gold-soft);border-inline-start:3px solid var(--u101-gold);border-radius:8px;padding:16px 20px;margin:24px 0;}
.u101-key-points h4{color:var(--u101-gold);font-size:16px;margin-bottom:10px;}
.u101-key-points li{position:relative;padding-inline-start:0;padding-inline-end:20px;margin-bottom:8px;font-size:15px;}
.u101-key-points li::before{content:'✓';position:absolute;inset-inline-end:0;color:var(--u101-gold);}
.u101-article-tags{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0;}
.u101-article-tags a{background:var(--u101-surface);border:1px solid var(--u101-border);border-radius:20px;padding:6px 14px;font-size:13px;}
.u101-article-tags a:hover{border-color:var(--u101-gold);color:var(--u101-gold);}
.u101-author-box{display:flex;gap:14px;align-items:center;background:var(--u101-surface);border:1px solid var(--u101-border);border-radius:var(--u101-radius);padding:16px;margin:26px 0;}
.u101-author-box img{width:56px;height:56px;border-radius:50%;object-fit:cover;}
.u101-author-box h4{margin:0;font-size:15.5px;}
.u101-author-box span{color:var(--u101-muted);font-size:13px;}
.u101-share-row{display:flex;gap:10px;margin:20px 0;}
.u101-share-row a{
	display:flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid var(--u101-border);border-radius:8px;font-size:13px;
}
.u101-share-row a:hover{border-color:var(--u101-gold);color:var(--u101-gold);}
.u101-related{margin-top:44px;}

/* ==========================================================================
   11. Comments
   ========================================================================== */
.comment-list{list-style:none;margin:0;padding:0;}
.comment-body{background:var(--u101-surface);border:1px solid var(--u101-border);border-radius:var(--u101-radius);padding:16px;margin-bottom:14px;}
.comment-author .fn{font-weight:700;color:var(--u101-gold);font-style:normal;}
.comment-metadata{font-size:12px;color:var(--u101-muted);margin-bottom:8px;display:block;}
.comment-reply-link{font-size:12.5px;color:var(--u101-gold);}
.comment-respond input,.comment-respond textarea{
	width:100%;background:var(--u101-bg);border:1px solid var(--u101-border);border-radius:6px;color:var(--u101-text);
	padding:10px;margin-bottom:12px;font-family:var(--font-nastaliq);
}
.comment-respond .submit{background:var(--u101-gold);color:#000;border:none;border-radius:6px;padding:10px 22px;font-weight:700;cursor:pointer;}
.comment-form-comment textarea{min-height:110px;}
.children{margin-inline-start:30px;}

/* ==========================================================================
   12. Pagination
   ========================================================================== */
.u101-pagination{display:flex;gap:8px;justify-content:center;margin-top:36px;flex-wrap:wrap;}
.u101-pagination a,.u101-pagination span{
	padding:8px 15px;border:1px solid var(--u101-border);border-radius:8px;font-size:14px;
}
.u101-pagination .current{background:var(--u101-gold);color:#000;border-color:var(--u101-gold);font-weight:700;}
.u101-pagination a:hover{border-color:var(--u101-gold);color:var(--u101-gold);}

/* ==========================================================================
   13. Footer
   ========================================================================== */
.u101-footer{background:#000;border-top:1px solid var(--u101-border);margin-top:40px;padding:50px 0 0;}
.u101-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;padding-bottom:36px;}
@media (max-width:780px){.u101-footer-grid{grid-template-columns:1fr 1fr;}}
.u101-footer h4{color:var(--u101-gold);font-size:16px;margin-bottom:16px;}
.u101-footer p{color:var(--u101-muted);font-size:13.5px;}
.u101-footer ul li{margin-bottom:9px;}
.u101-footer ul a{color:var(--u101-muted);font-size:13.5px;}
.u101-footer ul a:hover{color:var(--u101-gold);}
.u101-social-row{display:flex;gap:10px;margin-top:14px;}
.u101-social-row a{width:34px;height:34px;border:1px solid var(--u101-border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;}
.u101-social-row a:hover{border-color:var(--u101-gold);color:var(--u101-gold);}
.u101-footer-bottom{border-top:1px solid var(--u101-border);padding:18px 0;text-align:center;color:var(--u101-muted-2);font-size:12.5px;}

/* ==========================================================================
   14. Misc / helpers
   ========================================================================== */
.u101-empty{padding:60px 20px;text-align:center;color:var(--u101-muted);}
.u101-notice{background:var(--u101-gold-soft);border:1px solid var(--u101-gold);border-radius:8px;padding:14px 18px;margin-bottom:20px;font-size:14px;}
.alignwide{max-width:100%;}
.wp-caption-text{color:var(--u101-muted-2);font-size:12.5px;margin-top:6px;}