/*
Theme Name: Hafiz Blog
Theme URI: https://hafizahmedzafar.com
Author: Hafiz Ahmed Zafar
Author URI: https://hafizahmedzafar.com
Description: A premium, advanced-feature blogging theme built for researchers, consultants and digital strategists. Includes dark mode, AJAX live search, infinite scroll, auto table of contents, reading progress bar, reading time, related posts, popular posts, author boxes, full SEO/schema output, custom widgets and a deep Customizer panel — no page builder required.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
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: hafiz-blog
Tags: blog, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, dark-mode, seo-friendly

This theme, like WordPress, is licensed under the GPL.
*/

/* =========================================================
   TABLE OF CONTENTS
   1. Custom Properties / Theme Colors
   2. Reset & Base
   3. Typography
   4. Layout / Containers
   5. Header
   6. Navigation / Mobile Menu
   7. Hero / Featured Section
   8. Buttons & Forms
   9. Post Cards / Archive Grid
   10. Single Post
   11. Table of Contents
   12. Author Box
   13. Related Posts
   14. Comments
   15. Sidebar & Widgets
   16. Footer
   17. Dark Mode
   18. Reading Progress Bar / Back to Top
   19. Utilities & Animations
   20. Responsive
   ========================================================= */

/* 1. Custom Properties */
:root{
  --color-bg:#ffffff;
  --color-bg-alt:#f6f7fb;
  --color-surface:#ffffff;
  --color-border:#e7e9f1;
  --color-text:#1c1e29;
  --color-text-muted:#5b5f73;
  --color-primary:#1a3c6e;
  --color-primary-dark:#122a4d;
  --color-accent:#c8952c;
  --color-accent-soft:#f3e4c4;
  --color-link:#1a3c6e;
  --font-heading:'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:20px;
  --shadow-sm:0 1px 3px rgba(20,20,40,.06);
  --shadow-md:0 8px 24px rgba(20,20,40,.08);
  --shadow-lg:0 20px 48px rgba(20,20,40,.14);
  --container:1180px;
  --transition:.25s ease;
}
html.dark-mode{
  --color-bg:#12141c;
  --color-bg-alt:#191b26;
  --color-surface:#1b1e2b;
  --color-border:#2b2f40;
  --color-text:#eef0f6;
  --color-text-muted:#a3a7bd;
  --color-primary:#7ea2d8;
  --color-primary-dark:#a9c3ea;
  --color-accent:#e8bf6e;
  --color-accent-soft:#3a3220;
  --color-link:#8fb4e8;
}

/* 2. Reset & Base */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  transition:background var(--transition),color var(--transition);
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--color-link);text-decoration:none;transition:color var(--transition);}
a:hover{color:var(--color-accent);}
ul,ol{padding-left:1.2em;}
figure{margin:0;}
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--color-primary);color:#fff;
  padding:12px 20px;z-index:10000;border-radius:0 0 6px 0;
}
.skip-link:focus{left:0;}

/* 3. Typography */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  color:var(--color-text);
  line-height:1.25;
  font-weight:700;
  margin:0 0 .55em;
}
h1{font-size:clamp(2rem,4vw,3rem);}
h2{font-size:clamp(1.5rem,3vw,2.2rem);}
h3{font-size:1.5rem;}
p{margin:0 0 1.4em;}
blockquote{
  margin:2em 0;padding:1.2em 1.6em;border-left:4px solid var(--color-accent);
  background:var(--color-bg-alt);font-style:italic;color:var(--color-text-muted);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
code,pre{font-family:'SFMono-Regular',Consolas,Menlo,monospace;}
pre{background:#171a24;color:#e9ecf5;padding:1.2em;border-radius:var(--radius-sm);overflow:auto;}
code{background:var(--color-bg-alt);padding:.15em .4em;border-radius:4px;font-size:.9em;}
pre code{background:none;padding:0;}
hr{border:none;border-top:1px solid var(--color-border);margin:2.5em 0;}
table{width:100%;border-collapse:collapse;margin:1.5em 0;}
table th,table td{border:1px solid var(--color-border);padding:.6em .9em;text-align:left;}
table th{background:var(--color-bg-alt);}

/* 4. Layout */
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.site-main{padding:48px 0 80px;}
.content-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start;}
.content-layout.full-width{grid-template-columns:1fr;}

/* 5. Header */
.site-header{
  position:sticky;top:0;z-index:999;background:var(--color-bg);
  border-bottom:1px solid var(--color-border);backdrop-filter:blur(10px);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;gap:24px;max-width:var(--container);margin:0 auto;}
.site-branding{display:flex;align-items:center;gap:12px;}
.site-branding img{max-height:48px;width:auto;border-radius:8px;}
.site-title{font-family:var(--font-heading);font-size:1.5rem;font-weight:700;margin:0;letter-spacing:-.02em;}
.site-title a{color:var(--color-text);}
.site-description{font-size:.8rem;color:var(--color-text-muted);margin:2px 0 0;}
.header-actions{display:flex;align-items:center;gap:14px;}

/* 6. Navigation */
.primary-navigation{display:flex;align-items:center;}
.primary-menu{display:flex;list-style:none;margin:0;padding:0;gap:28px;}
.primary-menu li{position:relative;}
.primary-menu>li>a{
  font-weight:600;font-size:.95rem;color:var(--color-text);padding:10px 0;display:inline-block;position:relative;
}
.primary-menu>li>a::after{
  content:"";position:absolute;left:0;bottom:2px;width:0;height:2px;background:var(--color-accent);transition:width var(--transition);
}
.primary-menu>li>a:hover::after,.primary-menu>li.current-menu-item>a::after{width:100%;}
.primary-menu ul{
  list-style:none;position:absolute;top:100%;left:0;background:var(--color-surface);min-width:220px;
  box-shadow:var(--shadow-md);border-radius:var(--radius-sm);padding:8px;opacity:0;visibility:hidden;
  transform:translateY(8px);transition:all var(--transition);z-index:50;border:1px solid var(--color-border);
}
.primary-menu li:hover>ul{opacity:1;visibility:visible;transform:translateY(0);}
.primary-menu ul li a{padding:9px 12px;display:block;border-radius:6px;font-weight:500;}
.primary-menu ul li a:hover{background:var(--color-bg-alt);}
.menu-toggle{
  display:none;background:none;border:1px solid var(--color-border);border-radius:8px;
  width:42px;height:42px;cursor:pointer;position:relative;
}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{
  content:"";position:absolute;left:10px;width:22px;height:2px;background:var(--color-text);transition:all var(--transition);
}
.menu-toggle span{top:20px;}
.menu-toggle span::before{top:-7px;}
.menu-toggle span::after{top:7px;}
.menu-toggle.active span{background:transparent;}
.menu-toggle.active span::before{transform:rotate(45deg);top:0;}
.menu-toggle.active span::after{transform:rotate(-45deg);top:0;}

/* icon buttons: search / dark mode */
.icon-btn{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--color-border);background:var(--color-surface);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-text);
}
.icon-btn:hover{border-color:var(--color-accent);color:var(--color-accent);}
.icon-btn svg{width:18px;height:18px;}

/* Live search panel */
.search-overlay{
  position:fixed;inset:0;background:rgba(10,12,20,.55);z-index:2000;display:none;align-items:flex-start;justify-content:center;padding:80px 20px;
}
.search-overlay.open{display:flex;}
.search-panel{background:var(--color-surface);width:100%;max-width:640px;border-radius:var(--radius-md);padding:24px;box-shadow:var(--shadow-lg);}
.search-panel input[type=text]{
  width:100%;padding:14px 16px;font-size:1.1rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);
  background:var(--color-bg-alt);color:var(--color-text);
}
.search-close{float:right;cursor:pointer;background:none;border:none;color:var(--color-text-muted);font-size:1.4rem;}
.search-results{margin-top:16px;max-height:50vh;overflow:auto;}
.search-result-item{display:flex;gap:12px;padding:10px;border-radius:8px;}
.search-result-item:hover{background:var(--color-bg-alt);}
.search-result-item img{width:60px;height:60px;object-fit:cover;border-radius:6px;flex-shrink:0;}
.search-result-item .sr-title{font-weight:600;margin:0 0 4px;font-size:.95rem;}
.search-result-item .sr-meta{font-size:.78rem;color:var(--color-text-muted);}
.search-loading,.search-empty{padding:20px;text-align:center;color:var(--color-text-muted);}

/* 7. Hero */
.site-hero{
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));
  color:#fff;padding:64px 0;margin-bottom:8px;
}
.site-hero .container{display:flex;align-items:center;gap:40px;flex-wrap:wrap;}
.site-hero-text{flex:1;min-width:280px;}
.site-hero h1{color:#fff;margin-bottom:.4em;}
.site-hero p{color:rgba(255,255,255,.85);font-size:1.1rem;max-width:60ch;}
.site-hero-img img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);}
.hero-badge{
  display:inline-block;background:rgba(255,255,255,.14);color:var(--color-accent-soft);
  padding:6px 14px;border-radius:999px;font-size:.8rem;font-weight:600;letter-spacing:.03em;margin-bottom:16px;
}

/* 8. Buttons & Forms */
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:999px;font-weight:600;
  font-size:.95rem;border:2px solid var(--color-primary);background:var(--color-primary);color:#fff;cursor:pointer;transition:all var(--transition);
}
.btn:hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark);color:#fff;}
.btn-outline{background:transparent;color:var(--color-primary);}
.btn-outline:hover{background:var(--color-primary);color:#fff;}
.btn-accent{background:var(--color-accent);border-color:var(--color-accent);color:#1c1e29;}
.btn-accent:hover{background:#b17f1c;border-color:#b17f1c;}
input,textarea,select{font-family:var(--font-body);font-size:1rem;}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{
  width:100%;padding:12px 14px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg-alt);color:var(--color-text);
}

/* 9. Post Cards */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:32px;}
.post-card{
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);
  overflow:hidden;transition:transform var(--transition),box-shadow var(--transition);display:flex;flex-direction:column;
}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.post-card-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--color-bg-alt);}
.post-card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.post-card:hover .post-card-thumb img{transform:scale(1.06);}
.post-card-cat{
  position:absolute;top:12px;left:12px;background:var(--color-accent);color:#1c1e29;font-size:.72rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:5px 11px;border-radius:999px;
}
.post-card-body{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column;}
.post-card-title{font-size:1.2rem;margin-bottom:.4em;}
.post-card-title a{color:var(--color-text);}
.post-card-title a:hover{color:var(--color-accent);}
.post-card-excerpt{color:var(--color-text-muted);font-size:.94rem;flex:1;}
.post-meta{
  display:flex;flex-wrap:wrap;gap:14px;font-size:.8rem;color:var(--color-text-muted);align-items:center;margin:10px 0 0;
}
.post-meta span{display:inline-flex;align-items:center;gap:5px;}
.post-meta svg{width:14px;height:14px;}
.featured-badge{
  display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;color:var(--color-accent);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;
}
.section-heading{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:28px;gap:16px;flex-wrap:wrap;}
.section-heading h2{margin:0;position:relative;padding-bottom:12px;}
.section-heading h2::after{content:"";position:absolute;left:0;bottom:0;width:52px;height:3px;background:var(--color-accent);}
.section-heading a{font-size:.9rem;font-weight:600;}

/* Load more */
.load-more-wrap{text-align:center;margin-top:48px;}
#load-more-spinner{display:none;margin:16px auto;width:28px;height:28px;border:3px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* 10. Single Post */
.single-post-header{margin-bottom:28px;}
.entry-breadcrumbs{font-size:.82rem;color:var(--color-text-muted);margin-bottom:18px;}
.entry-breadcrumbs a{color:var(--color-text-muted);}
.entry-breadcrumbs a:hover{color:var(--color-accent);}
.single-post-header h1{margin-bottom:.35em;}
.entry-excerpt-lead{font-size:1.15rem;color:var(--color-text-muted);margin-bottom:18px;}
.single-post-thumb{margin:28px 0;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-md);}
.entry-content{font-size:1.08rem;text-align:left;}
.entry-content p,.entry-content li{text-align:left;}
.entry-content .has-text-align-center{text-align:center;}
.entry-content .has-text-align-right{text-align:right;}
.entry-content h2,.entry-content h3{margin-top:1.6em;scroll-margin-top:100px;}
.entry-content .wp-block-image,.entry-content figure{margin:2em 0;}
.entry-content figcaption{font-size:.85rem;color:var(--color-text-muted);text-align:center;margin-top:.5em;}
.entry-content a{text-decoration:underline;text-decoration-color:var(--color-accent);text-underline-offset:3px;}
.tags-links{margin-top:40px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.tags-links a{
  background:var(--color-bg-alt);border:1px solid var(--color-border);padding:6px 14px;border-radius:999px;font-size:.82rem;
}
.tags-links a:hover{border-color:var(--color-accent);color:var(--color-accent);}
.share-bar{display:flex;align-items:center;gap:10px;margin:32px 0;flex-wrap:wrap;}
.share-bar span{font-size:.85rem;font-weight:600;color:var(--color-text-muted);}
.share-btn{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--color-bg-alt);border:1px solid var(--color-border);color:var(--color-text);
}
.share-btn:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary);}
.share-btn svg{width:16px;height:16px;}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:48px 0;border-top:1px solid var(--color-border);padding-top:32px;}
.post-nav-item{padding:18px;border:1px solid var(--color-border);border-radius:var(--radius-sm);transition:border-color var(--transition);}
.post-nav-item:hover{border-color:var(--color-accent);}
.post-nav-item .pn-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);}
.post-nav-item.next{text-align:right;}

/* 11. Table of Contents (base structure; numbering/marker/colors/spacing/columns are
   controlled dynamically from Theme Options > Table of Contents — see
   inc/theme-options-css.php, which loads after this file and overrides the rules below) */
.toc-box{
  background:var(--toc-bg,var(--color-bg-alt));border:1px solid var(--toc-border,var(--color-border));border-radius:var(--radius-md);
  padding:20px 24px;margin:28px 0;
}
.toc-box summary{font-weight:700;cursor:pointer;font-family:var(--font-heading);font-size:1.05rem;list-style:none;display:flex;align-items:center;justify-content:space-between;}
.toc-box summary::-webkit-details-marker{display:none;}
.toc-box summary::after{content:"+";font-size:1.3rem;color:var(--toc-accent,var(--color-accent));transition:transform var(--transition);}
.toc-box[open] summary::after{transform:rotate(45deg);}
.toc-box ol{margin:16px 0 0;padding-left:0;list-style:none;}
.toc-box li{margin-bottom:8px;font-size:.94rem;}
.toc-box a{color:var(--toc-link,var(--color-text-muted));text-decoration:none;}
.toc-box a:hover,.toc-box a.active{color:var(--toc-accent,var(--color-accent));}

/* 12. Author Box */
.author-box{
  display:flex;gap:20px;background:var(--color-bg-alt);border-radius:var(--radius-md);padding:26px;margin:40px 0;
  border:1px solid var(--color-border);
}
.author-box img{width:76px;height:76px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.author-box h3{margin-bottom:.2em;font-size:1.15rem;}
.author-box p{color:var(--color-text-muted);font-size:.92rem;margin-bottom:.6em;}
.author-social{display:flex;gap:10px;}
.author-social a{
  width:32px;height:32px;border-radius:50%;background:var(--color-surface);border:1px solid var(--color-border);
  display:flex;align-items:center;justify-content:center;
}
.author-social svg{width:14px;height:14px;}

/* 13. Related Posts */
.related-posts{margin:56px 0;}

/* 14. Comments */
.comments-area{margin-top:56px;}
.comments-title{margin-bottom:24px;}
.comment-list{list-style:none;margin:0;padding:0;}
.comment-list .children{list-style:none;padding-left:44px;}
.comment-body{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--color-border);}
.comment-body .avatar{border-radius:50%;width:48px;height:48px;flex-shrink:0;}
.comment-author-name{font-weight:700;font-size:.95rem;}
.comment-metadata{font-size:.78rem;color:var(--color-text-muted);margin-bottom:8px;}
.comment-content p{margin-bottom:.7em;}
.reply a{font-size:.8rem;font-weight:600;background:var(--color-bg-alt);padding:5px 12px;border-radius:999px;}

/* 15. Sidebar & Widgets */
.widget{
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);
  padding:24px;margin-bottom:28px;
}
.widget-title{font-size:1.05rem;margin-bottom:18px;position:relative;padding-bottom:10px;}
.widget-title::after{content:"";position:absolute;left:0;bottom:0;width:36px;height:3px;background:var(--color-accent);}
.widget ul{list-style:none;padding:0;margin:0;}
.widget ul li{margin-bottom:12px;}
.widget_search input[type=search]{width:100%;padding:12px;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-bg-alt);color:var(--color-text);}
.popular-post-item{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px;}
.popular-post-item img{width:64px;height:64px;object-fit:cover;border-radius:8px;flex-shrink:0;}
.popular-post-item .ppi-title{font-size:.9rem;font-weight:600;line-height:1.4;}
.popular-post-item .ppi-meta{font-size:.75rem;color:var(--color-text-muted);margin-top:4px;}
.widget_tag_cloud a{
  display:inline-block;background:var(--color-bg-alt);border:1px solid var(--color-border);padding:5px 12px;
  border-radius:999px;font-size:.78rem!important;margin:0 6px 8px 0;
}
.newsletter-widget p{font-size:.88rem;color:var(--color-text-muted);}
.newsletter-widget input[type=email]{width:100%;padding:11px;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-bg-alt);color:var(--color-text);margin-bottom:10px;}
.social-follow-widget{display:flex;gap:10px;flex-wrap:wrap;}
.social-follow-widget a{
  width:40px;height:40px;border-radius:50%;background:var(--color-bg-alt);border:1px solid var(--color-border);
  display:flex;align-items:center;justify-content:center;
}
.social-follow-widget svg{width:16px;height:16px;}

/* 16. Footer */
.site-footer{background:var(--color-primary-dark);color:rgba(255,255,255,.85);margin-top:64px;padding:64px 0 0;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.12);}
.footer-widget .widget-title{color:#fff;}
.footer-widget .widget-title::after{background:var(--color-accent);}
.site-footer a{color:rgba(255,255,255,.75);}
.site-footer a:hover{color:var(--color-accent);}
.footer-about img{max-height:44px;margin-bottom:12px;border-radius:8px;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:24px 0;font-size:.85rem;flex-wrap:wrap;gap:12px;}
.footer-widget.widget{background:transparent;border:none;padding:0;}

/* 17. Dark mode toggle icon states */
.icon-btn .icon-sun{display:none;}
html.dark-mode .icon-btn .icon-sun{display:block;}
html.dark-mode .icon-btn .icon-moon{display:none;}

/* 18. Reading progress + back to top */
.reading-progress{position:fixed;top:0;left:0;height:3px;background:var(--color-accent);z-index:1001;width:0%;}
.back-to-top{
  position:fixed;bottom:28px;right:28px;width:46px;height:46px;border-radius:50%;background:var(--color-primary);
  color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);opacity:0;
  visibility:hidden;transform:translateY(10px);transition:all var(--transition);z-index:900;border:none;cursor:pointer;
}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top svg{width:18px;height:18px;}

/* 19. Utilities */
.screen-reader-text{position:absolute;left:-9999px;}
.alignwide{max-width:1000px;margin-left:auto;margin-right:auto;}
.alignfull{width:100vw;margin-left:calc(50% - 50vw);max-width:none;}
.has-text-align-center{text-align:center;}
.pagination{display:flex;gap:8px;margin-top:48px;justify-content:center;flex-wrap:wrap;}
.pagination a,.pagination span{
  min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;
  border:1px solid var(--color-border);font-size:.9rem;font-weight:600;
}
.pagination .current{background:var(--color-primary);color:#fff;border-color:var(--color-primary);}
.pagination a:hover{border-color:var(--color-accent);color:var(--color-accent);}
.sticky-badge{background:var(--color-accent);color:#1c1e29;font-size:.7rem;font-weight:700;padding:3px 10px;border-radius:999px;text-transform:uppercase;}

/* 19b. Ad Placements */
.ad-slot{
  margin:28px 0;text-align:center;position:relative;overflow:hidden;
}
.ad-slot-full-width{
  width:100%;background:var(--color-bg-alt);padding:16px 0;margin:0;border-bottom:1px solid var(--color-border);
}
.ad-slot-full-width .ad-label{display:block;}
.ad-label{
  display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);
  margin-bottom:8px;opacity:.7;
}
.ad-slot-widget{margin:0;}
.ad-slot-infeed{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--color-bg-alt);border-style:dashed;min-height:220px;padding:20px;
}
.sidebar-sticky-wrap{position:sticky;top:90px;}
.sidebar-sticky-wrap .ad-slot:empty{display:none;}

/* Sticky bottom ad bar */
.sticky-ad-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:1600;background:var(--color-surface);
  border-top:1px solid var(--color-border);box-shadow:0 -4px 20px rgba(0,0,0,.12);
  padding:10px 44px 10px 16px;display:flex;align-items:center;justify-content:center;
}
.sticky-ad-inner{max-width:100%;overflow:hidden;}
.sticky-ad-close{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);background:var(--color-bg-alt);
  border:1px solid var(--color-border);border-radius:50%;width:28px;height:28px;cursor:pointer;
  font-size:1.1rem;line-height:1;color:var(--color-text-muted);
}
.sticky-ad-bar.device-mobile{display:none;}
.sticky-ad-bar.device-desktop{display:flex;}
@media(max-width:782px){
  .sticky-ad-bar.device-mobile{display:flex;}
  .sticky-ad-bar.device-desktop{display:none;}
}

/* Local Business block (shortcode + widget) */
.hafiz-local-business{background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:22px 24px;}
.hafiz-lb-name{margin:0 0 12px;font-size:1.1rem;}
.hafiz-lb-address,.hafiz-lb-phone,.hafiz-lb-email{display:flex;align-items:flex-start;gap:8px;font-size:.9rem;margin:0 0 10px;color:var(--color-text-muted);}
.hafiz-lb-address svg,.hafiz-lb-phone svg,.hafiz-lb-email svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--color-accent);}
.hafiz-lb-hours{width:100%;margin:12px 0;font-size:.85rem;border-collapse:collapse;}
.hafiz-lb-hours th{text-align:left;font-weight:600;padding:4px 12px 4px 0;color:var(--color-text);}
.hafiz-lb-hours td{padding:4px 0;color:var(--color-text-muted);}
.hafiz-lb-map{margin-top:14px;border-radius:var(--radius-sm);overflow:hidden;}
.hafiz-lb-map iframe{width:100%;border:0;min-height:220px;display:block;}

/* HTML Sitemap page template */
.hafiz-html-sitemap h2{margin-top:2em;padding-bottom:.3em;border-bottom:2px solid var(--color-accent);}
.hafiz-html-sitemap h3{margin-top:1.6em;font-size:1.1rem;}
.hafiz-sitemap-list{list-style:none;padding:0;margin:0 0 1em;columns:2;column-gap:32px;}
.hafiz-sitemap-list li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--color-border);break-inside:avoid;}
.hafiz-sitemap-date{color:var(--color-text-muted);font-size:.8rem;white-space:nowrap;}
@media(max-width:640px){.hafiz-sitemap-list{columns:1;}}


/* 20. Responsive */
@media(max-width:960px){
  .content-layout{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:782px){
  .menu-toggle{display:block;}
  .primary-navigation{
    position:fixed;top:0;right:-100%;width:82%;max-width:340px;height:100vh;background:var(--color-surface);
    box-shadow:var(--shadow-lg);transition:right var(--transition);flex-direction:column;padding:80px 24px 24px;z-index:1500;overflow:auto;
  }
  .primary-navigation.open{right:0;}
  .primary-menu{flex-direction:column;gap:4px;align-items:flex-start;width:100%;}
  .primary-menu ul{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;display:none;width:100%;padding-left:12px;}
  .primary-menu li.submenu-open>ul{display:block;}
  .nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1400;display:none;}
  .nav-overlay.open{display:block;}
  .post-nav{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
}
@media(max-width:600px){
  body{font-size:16px;}
  .site-hero{padding:44px 0;}
}
@media print{
  .site-header,.site-footer,.sidebar,.back-to-top,.reading-progress,.share-bar,.comments-area{display:none;}
}