/*
Theme Name: TaxInPakistan
Theme URI: https://taxinpakistan.com
Author: TaxInPakistan
Description: Product-catalog style theme for TaxInPakistan.com — a PTA mobile phone tax lookup site. Includes a "Phone" custom post type with CNIC / Passport tax fields, a Brand taxonomy, live AJAX search, editable SEO fields per phone, and an optional AI-assisted blog draft tool (needs an Anthropic API key in Settings → TaxInPakistan).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: taxinpakistan
*/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --bg:#F5F6F9; --bg-elevated:#FFFFFF; --bg-sunken:#ECEEF3;
  --ink:#10141F; --ink-soft:#4B5160; --ink-faint:#8A8F9C;
  --border:#E2E5EC; --border-strong:#CBD0DB;
  --accent:#2A5EE8; --accent-ink:#FFFFFF; --accent-soft:#E9EFFF;
  --tax:#B5730F; --tax-bg:#FBF1DE; --tax-strong:#8F5A0B;
  --success:#1B8F5F; --success-bg:#E5F6EE;
  --danger:#C23B3B; --danger-bg:#FBEAEA;
  --shadow: 0 1px 2px rgba(16,20,31,.04), 0 8px 24px -12px rgba(16,20,31,.14);
  --radius: 10px;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B0E16; --bg-elevated:#121726; --bg-sunken:#0E1220;
    --ink:#EDEFF4; --ink-soft:#AEB4C2; --ink-faint:#767C8C;
    --border:#232A3D; --border-strong:#323A52;
    --accent:#7096FF; --accent-ink:#0B0E16; --accent-soft:#1A2138;
    --tax:#E8A33D; --tax-bg:#241C0F; --tax-strong:#F2B65C;
    --success:#3FC98A; --success-bg:#0E241A;
    --danger:#E8696B; --danger-bg:#2A1414;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  }
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink); font-family:var(--font-body);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}
.wrap{max-width:1180px; margin:0 auto; padding:0 20px;}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; letter-spacing:-0.01em;}
.tnum{font-variant-numeric:tabular-nums;}
.screen-reader-text{position:absolute; width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);}

/* Header */
header.site-header{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);}
@media (prefers-color-scheme: dark){ header.site-header{background:rgba(11,14,22,.9);} }
.header-inner{display:flex; align-items:center; gap:24px; height:64px;}
.logo{display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:19px; flex-shrink:0;}
.logo-mark{width:28px;height:28px;border-radius:8px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.logo-mark svg{width:16px;height:16px;}
.logo b{color:var(--accent); font-weight:700;}
nav.main-nav{display:flex; align-items:center; gap:4px; margin-left:8px; flex-wrap:wrap;}
nav.main-nav a{padding:8px 12px; border-radius:8px; font-size:14px; font-weight:500; color:var(--ink-soft); white-space:nowrap;}
nav.main-nav a:hover, nav.main-nav a.current{color:var(--ink); background:var(--bg-sunken);}
.header-spacer{flex:1;}
.header-search{position:relative; display:none;}
.header-search input{width:220px; padding:8px 12px 8px 34px; border-radius:8px; border:1px solid var(--border); background:var(--bg-sunken); color:var(--ink); font-size:13.5px; font-family:inherit;}
.header-search input:focus{outline:2px solid var(--accent); outline-offset:-1px; background:var(--bg-elevated);}
.header-search svg{position:absolute; left:10px; top:50%; transform:translateY(-50%); width:15px;height:15px; color:var(--ink-faint);}
@media (min-width:860px){ .header-search{display:block;} }

.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 18px; border-radius:8px; font-weight:600; font-size:14px; cursor:pointer; border:1px solid transparent;}
.btn-primary{background:var(--accent); color:var(--accent-ink);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--border-strong);}
.btn-sm{padding:7px 12px; font-size:13px; border-radius:7px;}

/* Hero */
.hero{padding:56px 0 44px; border-bottom:1px solid var(--border);}
.hero-grid{display:grid; grid-template-columns:1fr; gap:36px; align-items:center;}
@media (min-width:860px){ .hero-grid{grid-template-columns:1.1fr .9fr;} }
.eyebrow-line{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-faint); margin-bottom:14px; font-weight:500;}
.signal-dot{width:7px;height:7px;border-radius:50%;background:var(--success); box-shadow:0 0 0 3px var(--success-bg);}
.hero h1{font-size:clamp(30px,4.4vw,46px); line-height:1.08; font-weight:700; max-width:12ch;}
.hero p.sub{color:var(--ink-soft); font-size:16.5px; max-width:46ch; margin:16px 0 26px;}
.search-box{position:relative; max-width:520px;}
.search-box input{width:100%; padding:16px 18px 16px 48px; border-radius:12px; border:1.5px solid var(--border-strong); background:var(--bg-elevated); color:var(--ink); font-size:15.5px; font-family:inherit; box-shadow:var(--shadow);}
.search-box input:focus{outline:none; border-color:var(--accent);}
.search-box svg.search-icon{position:absolute; left:17px; top:50%; transform:translateY(-50%); width:19px;height:19px; color:var(--ink-faint);}
.search-suggest{margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-size:13px; color:var(--ink-faint);}
.chip{padding:5px 11px; border-radius:100px; border:1px solid var(--border); background:var(--bg-elevated); font-size:12.5px; color:var(--ink-soft);}
.live-results{position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--bg-elevated); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); z-index:30; overflow:hidden; max-height:420px; overflow-y:auto;}
.live-results.hidden{display:none;}
.lr-item{display:flex; align-items:center; gap:12px; padding:11px 14px; border-bottom:1px solid var(--border); cursor:pointer;}
.lr-item:last-child{border-bottom:none;}
.lr-item:hover{background:var(--bg-sunken);}
.lr-icon{width:34px;height:40px;flex-shrink:0; border-radius:6px; object-fit:cover;}
.lr-info{flex:1; min-width:0;}
.lr-info .name{font-weight:600; font-size:13.5px;}
.lr-info .meta{font-size:12px; color:var(--ink-faint);}
.lr-tax{font-size:12px; color:var(--tax); font-weight:600; font-family:var(--font-mono); white-space:nowrap;}
.lr-empty{padding:22px 16px; text-align:center; color:var(--ink-faint); font-size:13.5px;}
.hero-visual{display:flex; align-items:center; justify-content:center;}
.signal-rings{position:relative; width:280px; height:280px; display:flex; align-items:center; justify-content:center;}
.ring{position:absolute; border-radius:50%; border:1px solid var(--border);}
.ring.r1{width:100%;height:100%;} .ring.r2{width:72%;height:72%;} .ring.r3{width:44%;height:44%; border-color:var(--accent); opacity:.35;}
.hero-phone{position:relative; z-index:2; width:96px; height:190px; border-radius:18px; background:var(--ink); box-shadow:var(--shadow); padding:6px; display:flex; align-items:center; justify-content:center;}
.hero-phone .screen{width:100%;height:100%;border-radius:12px; background:linear-gradient(160deg, var(--accent), #7A3FE0); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;}
.hero-phone .screen svg{width:26px;height:26px;color:#fff; opacity:.9;}
.hero-phone .screen .amt{color:#fff; font-family:var(--font-mono); font-size:11px; font-weight:600; opacity:.9;}

/* Sections */
section.block{padding:46px 0;}
section.block.tight{padding:32px 0;}
section.block.sunken{background:var(--bg-sunken); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.block-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap;}
.block-head h2{font-size:23px; font-weight:700;}
.block-head .see-all{font-size:13.5px; font-weight:600; color:var(--accent); flex-shrink:0;}
.block-head p{color:var(--ink-faint); font-size:14px; margin-top:4px;}

.brand-row{display:flex; gap:10px; flex-wrap:wrap;}
.brand-pill{display:flex; align-items:center; gap:9px; padding:10px 16px; border-radius:10px; border:1px solid var(--border); background:var(--bg-elevated); font-weight:600; font-size:13.5px;}
.brand-pill:hover{border-color:var(--border-strong); box-shadow:var(--shadow);}
.brand-dot{width:9px;height:9px;border-radius:3px;}

.phone-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:16px;}
.phone-card{background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius); padding:18px; display:flex; flex-direction:column; gap:12px;}
.phone-card:hover{border-color:var(--border-strong); box-shadow:var(--shadow);}
.pc-top{display:flex; align-items:flex-start; gap:12px;}
.pc-icon-wrap{width:52px;height:62px; border-radius:8px; flex-shrink:0; display:flex;align-items:center;justify-content:center; overflow:hidden;}
.pc-icon-wrap img{width:100%;height:100%; object-fit:cover;}
.pc-icon-wrap svg{width:46px;height:56px;}
.pc-text{min-width:0;}
.pc-brand{font-size:11.5px; color:var(--ink-faint); font-weight:600;}
.pc-name{font-weight:700; font-size:15px; line-height:1.25; margin-top:1px;}
.pc-model{font-size:11.5px; color:var(--ink-faint); font-family:var(--font-mono); margin-top:3px;}
.pc-tax-block{background:var(--tax-bg); border-radius:8px; padding:11px 12px; display:flex; flex-direction:column; gap:6px;}
.pc-tax-row{display:flex; justify-content:space-between; align-items:center; font-size:12.5px;}
.pc-tax-row .lbl{color:var(--tax-strong); font-weight:500;}
.pc-tax-row .val{color:var(--tax-strong); font-weight:700; font-family:var(--font-mono);}
.pc-cta{font-size:13px; font-weight:600; color:var(--accent); display:flex; align-items:center; gap:5px; margin-top:auto;}
.pc-cta svg{width:13px;height:13px;}

.updates-list{display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--bg-elevated);}
.update-row{display:flex; align-items:center; gap:14px; padding:14px 16px; border-bottom:1px solid var(--border);}
.update-row:last-child{border-bottom:none;}
.update-row:hover{background:var(--bg-sunken);}
.update-row .u-icon{width:30px;height:36px; flex-shrink:0; border-radius:6px; object-fit:cover;}
.update-row .u-main{flex:1; min-width:0;}
.update-row .u-name{font-weight:600; font-size:13.5px;}
.update-row .u-date{font-size:12px; color:var(--ink-faint);}
.update-row .u-tax{font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--tax);}

.faq-item{border-bottom:1px solid var(--border);}
.faq-item:first-child{border-top:1px solid var(--border);}
.faq-q{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 2px; cursor:pointer; font-weight:600; font-size:14.5px; background:none; border:none; width:100%; text-align:left; color:var(--ink);}
.faq-q svg{width:16px;height:16px; color:var(--ink-faint); flex-shrink:0; transition:transform .15s ease;}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .18s ease;}
.faq-item.open .faq-a{max-height:260px;}
.faq-a p{padding:0 2px 16px; color:var(--ink-soft); font-size:14px; max-width:70ch; margin:0;}

.crumbs{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-faint); flex-wrap:wrap; margin-bottom:18px;}
.crumbs a:hover{color:var(--accent);}
.crumbs span.sep{opacity:.5;}

.detail-grid{display:grid; grid-template-columns:1fr; gap:32px;}
@media (min-width:860px){ .detail-grid{grid-template-columns:300px 1fr;} }
.detail-visual{background:var(--bg-elevated); border:1px solid var(--border); border-radius:14px; padding:28px; display:flex; align-items:center; justify-content:center; height:fit-content; overflow:hidden;}
.detail-visual img{border-radius:8px;}
.detail-visual svg{width:140px;height:170px;}
.detail-head .brand-tag{font-size:12.5px; font-weight:700; color:var(--accent);}
.detail-head h1{font-size:clamp(24px,3vw,32px); margin-top:6px;}
.detail-head .model-num{font-family:var(--font-mono); font-size:13px; color:var(--ink-faint); margin-top:8px;}
.tax-table{width:100%; border-collapse:collapse; margin-top:22px; border:1px solid var(--border); border-radius:10px; overflow:hidden;}
.tax-table th{text-align:left; background:var(--bg-sunken); font-size:12px; color:var(--ink-soft); padding:11px 14px; font-weight:600; border-bottom:1px solid var(--border);}
.tax-table td{padding:13px 14px; border-bottom:1px solid var(--border); font-size:14.5px;}
.tax-table tr:last-child td{border-bottom:none;}
.tax-table td.amt{text-align:right; font-family:var(--font-mono); font-weight:700; color:var(--tax); font-size:15px;}
.updated-tag{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-faint); margin-top:12px;}
.disclaimer-box{background:var(--tax-bg); border:1px solid rgba(181,115,15,.3); border-radius:10px; padding:14px 16px; font-size:13px; color:var(--tax-strong); margin-top:20px; line-height:1.5;}
.qa-group{margin-top:22px; display:flex; flex-direction:column; gap:16px;}
.qa-item h4{font-size:14.5px; font-weight:700; margin-bottom:5px;}
.qa-item p{color:var(--ink-soft); font-size:14px; max-width:70ch; margin:0;}

.filter-bar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; align-items:center;}
.filter-bar select{padding:9px 12px; border-radius:8px; border:1px solid var(--border-strong); background:var(--bg-elevated); color:var(--ink); font-size:13.5px; font-family:inherit;}
.result-count{font-size:13px; color:var(--ink-faint); margin-left:auto;}

/* Blog */
.blog-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(270px,1fr)); gap:18px;}
.blog-card{background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;}
.blog-card:hover{border-color:var(--border-strong); box-shadow:var(--shadow);}
.blog-cover{height:120px; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.blog-cover img{width:100%;height:100%;object-fit:cover;}
.blog-cover svg{width:44px;height:44px;}
.blog-body{padding:16px; display:flex; flex-direction:column; gap:8px; flex:1;}
.blog-cat{font-size:11px; font-weight:700;}
.blog-title{font-weight:700; font-size:15px; line-height:1.32;}
.blog-excerpt{font-size:13px; color:var(--ink-soft); line-height:1.5; flex:1;}
.blog-meta{font-size:11.5px; color:var(--ink-faint); display:flex; gap:8px; align-items:center; margin-top:4px;}
.blog-featured{display:grid; grid-template-columns:1fr; gap:0; border:1px solid var(--border); border-radius:14px; overflow:hidden; margin-bottom:28px; background:var(--bg-elevated);}
@media (min-width:760px){ .blog-featured{grid-template-columns:1fr 1.3fr;} }
.blog-featured .blog-cover{height:100%; min-height:180px;}
.blog-featured .blog-cover svg{width:64px;height:64px;}
.blog-featured .blog-body{padding:26px;}
.blog-featured .blog-title{font-size:21px;}
.article-cat{font-size:12.5px; font-weight:700;}
.article-title{font-size:clamp(24px,3.6vw,34px); margin-top:10px; line-height:1.15;}
.article-meta{font-size:13px; color:var(--ink-faint); margin-top:12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.article-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-faint);}
.article-cover{margin:22px 0 26px; border-radius:14px; overflow:hidden; max-height:360px;}
.article-cover img{width:100%; height:100%; object-fit:cover;}
.article-body p{color:var(--ink-soft); font-size:15.5px; line-height:1.75; margin:0 0 16px; max-width:70ch;}
.related-posts{margin-top:44px; padding-top:28px; border-top:1px solid var(--border);}
.related-posts h3{font-size:16px; margin-bottom:16px;}

.prose{max-width:74ch;}
.prose h1{font-size:28px; margin-bottom:18px;}
.prose h2{font-size:18px; margin:26px 0 10px;}
.prose p{color:var(--ink-soft); font-size:14.5px; margin:0 0 12px;}
.prose li{color:var(--ink-soft); font-size:14.5px; margin-bottom:6px;}

.empty-state{text-align:center; padding:60px 20px; color:var(--ink-faint);}

/* Footer */
footer.site-footer{border-top:1px solid var(--border); background:var(--bg-sunken); padding:44px 0 26px; margin-top:40px;}
.footer-grid{display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:32px;}
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr 1fr;} }
.footer-grid h5{font-size:12.5px; color:var(--ink-faint); font-weight:600; margin-bottom:12px;}
.footer-grid a{display:block; font-size:13.5px; color:var(--ink-soft); padding:5px 0;}
.footer-grid a:hover{color:var(--accent);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; margin-top:34px; padding-top:20px; border-top:1px solid var(--border); font-size:12.5px; color:var(--ink-faint); flex-wrap:wrap; gap:10px;}

.pagination{display:flex; gap:6px; margin-top:26px; flex-wrap:wrap;}
.pagination a, .pagination span{padding:7px 12px; border-radius:7px; border:1px solid var(--border); font-size:13px;}
.pagination .current{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}