/* =====================================================
   style.css — PahaliKhabar Tools
   Design system: blue primary, rounded cards, soft shadows
   ===================================================== */

:root{
  --pk-primary:#2563eb;
  --pk-primary-dark:#1d4ed8;
  --pk-primary-light:#eaf1ff;
  --pk-text:#1e2532;
  --pk-muted:#667085;
  --pk-bg:#f7f9fc;
  --pk-card-bg:#ffffff;
  --pk-border:#e6e9f0;
  --pk-radius:16px;
  --pk-radius-sm:10px;
  --pk-shadow:0 4px 20px rgba(20,35,70,0.06);
  --pk-shadow-hover:0 10px 30px rgba(20,35,70,0.12);
  --pk-font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

[data-theme="dark"]{
  --pk-text:#e7ebf3;
  --pk-muted:#9aa4b5;
  --pk-bg:#0f1420;
  --pk-card-bg:#161d2c;
  --pk-border:#252d40;
  --pk-primary-light:#182238;
  --pk-shadow:0 4px 20px rgba(0,0,0,0.35);
  --pk-shadow-hover:0 10px 30px rgba(0,0,0,0.5);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--pk-font);
  background:var(--pk-bg);
  color:var(--pk-text);
  transition:background .25s ease, color .25s ease;
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;}

.material-symbols-rounded{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; vertical-align:middle;}

/* ---------- Header / Navbar ---------- */
.site-header{background:var(--pk-card-bg);border-bottom:1px solid var(--pk-border);z-index:1030;}
.navbar-brand{color:var(--pk-text)!important;font-size:1.25rem;display:flex;align-items:center;gap:6px;}
.brand-icon{color:var(--pk-primary);}
.nav-link{color:var(--pk-text)!important;font-weight:500;font-size:.94rem;}
.dropdown-menu{border:none;border-radius:var(--pk-radius-sm);box-shadow:var(--pk-shadow-hover);padding:.5rem;}
.dropdown-item{border-radius:8px;padding:.5rem .75rem;font-size:.92rem;color:var(--pk-text);}
.dropdown-item:hover{background:var(--pk-primary-light);color:var(--pk-primary-dark);}

.search-form{position:relative;width:260px;}
.search-form .form-control{border-radius:99px;padding-left:2.3rem;background:var(--pk-bg);border:1px solid var(--pk-border);color:var(--pk-text);}
.search-icon{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);color:var(--pk-muted);font-size:20px;pointer-events:none;}
.search-suggestions{position:absolute;top:110%;left:0;right:0;background:var(--pk-card-bg);border-radius:var(--pk-radius-sm);display:none;max-height:340px;overflow-y:auto;z-index:1050;}
.search-suggestions.show{display:block;}
.search-suggestions a{display:flex;gap:10px;align-items:center;padding:.6rem .9rem;font-size:.88rem;color:var(--pk-text);}
.search-suggestions a:hover{background:var(--pk-primary-light);}
.btn-icon{border:1px solid var(--pk-border);background:var(--pk-card-bg);color:var(--pk-text);border-radius:99px;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;}
.btn-icon:hover{background:var(--pk-primary-light);}

/* ---------- Hero ---------- */
.hero-section{padding:70px 0 60px;background:linear-gradient(180deg,var(--pk-primary-light) 0%, var(--pk-bg) 100%);}
.hero-title{font-weight:800;font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-0.02em;}
.hero-title span{color:var(--pk-primary);}
.hero-sub{color:var(--pk-muted);font-size:1.1rem;max-width:640px;margin:0 auto;}
.hero-search{max-width:640px;margin:2rem auto 0;position:relative;}
.hero-search input{border-radius:99px;padding:1rem 1.5rem 1rem 3rem;font-size:1rem;border:1px solid var(--pk-border);box-shadow:var(--pk-shadow);}
.hero-search .material-symbols-rounded{position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);color:var(--pk-muted);}
.hero-stats{display:flex;gap:2.5rem;justify-content:center;margin-top:2rem;flex-wrap:wrap;}
.hero-stats .stat b{font-size:1.5rem;color:var(--pk-primary);display:block;}
.hero-stats .stat span{color:var(--pk-muted);font-size:.85rem;}

/* ---------- Section headings ---------- */
.section-title{font-weight:800;font-size:1.7rem;margin-bottom:.25rem;}
.section-sub{color:var(--pk-muted);margin-bottom:2rem;}

/* ---------- Tool Cards ---------- */
.tool-card{
  background:var(--pk-card-bg);
  border:1px solid var(--pk-border);
  border-radius:var(--pk-radius);
  padding:1.4rem;
  height:100%;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow:var(--pk-shadow);
  display:block;
}
.tool-card:hover{transform:translateY(-4px);box-shadow:var(--pk-shadow-hover);border-color:var(--pk-primary);}
.tool-icon{
  width:52px;height:52px;border-radius:14px;
  background:var(--pk-primary-light);color:var(--pk-primary);
  display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:1rem;
}
.tool-card h3{font-size:1.05rem;font-weight:700;margin-bottom:.35rem;}
.tool-card p{font-size:.87rem;color:var(--pk-muted);margin-bottom:0;}

.category-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:.4rem 1rem;border-radius:99px;border:1px solid var(--pk-border);
  background:var(--pk-card-bg);font-size:.85rem;font-weight:600;color:var(--pk-text);
}
.category-pill.active,.category-pill:hover{background:var(--pk-primary);color:#fff;border-color:var(--pk-primary);}

/* ---------- Tool working page layout ---------- */
.tool-hero{padding:2.2rem 0 1.2rem;}
.tool-workspace{
  background:var(--pk-card-bg);border:1px solid var(--pk-border);
  border-radius:var(--pk-radius);box-shadow:var(--pk-shadow);padding:1.8rem;
}
.upload-dropzone{
  border:2px dashed var(--pk-border);border-radius:var(--pk-radius-sm);
  padding:3rem 1rem;text-align:center;cursor:pointer;transition:.2s;background:var(--pk-bg);
}
.upload-dropzone:hover,.upload-dropzone.dragover{border-color:var(--pk-primary);background:var(--pk-primary-light);}
.upload-dropzone .material-symbols-rounded{font-size:48px;color:var(--pk-primary);}

.result-box{background:var(--pk-primary-light);border-radius:var(--pk-radius-sm);padding:1.2rem;margin-top:1rem;}

.content-block{background:var(--pk-card-bg);border:1px solid var(--pk-border);border-radius:var(--pk-radius);padding:1.8rem;margin-top:1.6rem;}
.content-block h2{font-size:1.35rem;font-weight:700;margin-bottom:.8rem;}
.content-block h3{font-size:1.1rem;font-weight:700;margin:1.2rem 0 .5rem;}

.faq-item{border-bottom:1px solid var(--pk-border);padding:1rem 0;}
.faq-question{font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;}
.faq-answer{color:var(--pk-muted);margin-top:.6rem;display:none;font-size:.93rem;}
.faq-item.open .faq-answer{display:block;}
.faq-item.open .faq-toggle{transform:rotate(45deg);}
.faq-toggle{transition:transform .2s;}

.breadcrumb-nav{padding:.9rem 0;font-size:.85rem;color:var(--pk-muted);}
.breadcrumb-item+.breadcrumb-item::before{content:"›";color:var(--pk-muted);}

/* ---------- Buttons ---------- */
.btn-primary{background:var(--pk-primary);border-color:var(--pk-primary);border-radius:10px;font-weight:600;}
.btn-primary:hover{background:var(--pk-primary-dark);border-color:var(--pk-primary-dark);}
.btn-outline-primary{color:var(--pk-primary);border-color:var(--pk-primary);border-radius:10px;font-weight:600;}
.btn, .form-control, .form-select{border-radius:10px;}
.form-control, .form-select{background:var(--pk-bg);border-color:var(--pk-border);color:var(--pk-text);}
.form-control:focus, .form-select:focus{border-color:var(--pk-primary);box-shadow:0 0 0 .2rem rgba(37,99,235,.15);}

/* ---------- Footer ---------- */
.site-footer{background:var(--pk-card-bg);border-top:1px solid var(--pk-border);margin-top:4rem;}
.footer-heading{font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700;color:var(--pk-muted);margin-bottom:1rem;}
.footer-links{list-style:none;padding:0;margin:0;}
.footer-links li{margin-bottom:.55rem;}
.footer-links a{color:var(--pk-text);font-size:.9rem;}
.footer-links a:hover{color:var(--pk-primary);}
.footer-brand{color:var(--pk-text);font-size:1.15rem;}

/* ---------- Utility ---------- */
.fade-in{animation:fadeIn .5s ease both;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.lazy{opacity:0;transition:opacity .3s;}
.lazy.loaded{opacity:1;}

@media (max-width:991px){
  .search-form{width:100%;margin:1rem 0;}
  .hero-stats{gap:1.4rem;}
}