/*
Theme Name: TechPKS
Theme URI: https://techpks.com
Author: techpks
Description: An original editorial theme for Pakistani tech news and analysis. Warm paper background, forest green and mustard accents, Fraunces + Work Sans type.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: techpks
*/

:root{
  --ink:#132420;
  --ink-soft:#33473f;
  --paper:#F5F1E4;
  --paper-dim:#EAE4D2;
  --forest:#1F4D3D;
  --forest-deep:#0F2A21;
  --mustard:#E3A23D;
  --mustard-deep:#B87A22;
  --rule: rgba(19,36,32,0.16);
  --radius: 3px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px;}

/* topbar */
.topbar{border-bottom:1px solid var(--rule);font-size:13px;color:var(--ink-soft);}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;}
.topbar .ticker{display:flex;gap:22px;overflow:hidden;white-space:nowrap;}

/* masthead */
.masthead{padding:34px 0 22px;}
.masthead .wrap{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:18px;}
.word{font-family:'Fraunces', serif;font-weight:600;font-style:italic;font-size:52px;letter-spacing:-0.01em;display:inline-block;}
.word em{font-style:normal;color:var(--mustard-deep);}
.tagline{font-size:13.5px;color:var(--ink-soft);margin-top:6px;max-width:280px;}
nav.primary{display:flex;gap:26px;font-size:15px;font-weight:500;flex-wrap:wrap;}
nav.primary ul{list-style:none;display:flex;gap:26px;margin:0;padding:0;flex-wrap:wrap;}
nav.primary a{padding-bottom:4px;border-bottom:2px solid transparent;transition:border-color .15s ease,color .15s ease;}
nav.primary a:hover, nav.primary .current-menu-item a{border-color:var(--mustard);}
.rule-thick{height:3px;background:var(--ink);margin:0;}

/* hero */
.hero{padding:44px 0 50px;}
.hero .grid{display:grid;grid-template-columns:1.55fr 1fr;gap:44px;}
.hero-art{aspect-ratio:16/11;border-radius:var(--radius);background:radial-gradient(120% 140% at 15% 15%, rgba(227,162,61,0.55), transparent 55%),linear-gradient(155deg, var(--forest) 0%, var(--forest-deep) 68%);margin-bottom:22px;overflow:hidden;}
.hero-art img{width:100%;height:100%;object-fit:cover;}
.kicker{font-size:12.5px;font-weight:600;color:var(--mustard-deep);margin-bottom:10px;display:block;}
.hero h1{font-family:'Fraunces', serif;font-weight:500;font-size:40px;line-height:1.08;margin:0 0 14px;letter-spacing:-0.01em;}
.hero h1 a:hover{color:var(--forest);}
.dek{font-size:16.5px;color:var(--ink-soft);max-width:52ch;margin:0 0 16px;}
.byline{font-size:13px;color:var(--ink-soft);}
.byline b{color:var(--ink);font-weight:600;}

.side-list h2{font-size:14px;font-weight:700;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--rule);}
.trend-item{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule);}
.trend-item:last-child{border-bottom:none;}
.trend-num{font-family:'Fraunces',serif;font-style:italic;font-size:22px;color:var(--mustard-deep);width:26px;flex:none;line-height:1.3;}
.trend-item h3{font-size:15px;font-weight:600;margin:0 0 4px;line-height:1.3;}
.trend-item h3 a:hover{color:var(--forest);}
.trend-meta{font-size:12px;color:var(--ink-soft);}

/* section head */
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:24px;padding-bottom:12px;border-bottom:1px solid var(--rule);}
.section-head h2{font-family:'Fraunces', serif;font-weight:500;font-style:italic;font-size:26px;margin:0;}
.section-head .see-all{font-size:13px;font-weight:600;color:var(--forest);}

/* article grid */
.grid-articles{padding:46px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:34px 30px;}
.card .thumb{aspect-ratio:4/3;border-radius:var(--radius);margin-bottom:14px;overflow:hidden;background:linear-gradient(140deg,var(--forest),var(--forest-deep));}
.card .thumb img{width:100%;height:100%;object-fit:cover;}
.card .cat{font-size:11.5px;font-weight:700;color:var(--mustard-deep);margin-bottom:8px;display:block;}
.card h3{font-family:'Fraunces', serif;font-weight:500;font-size:19px;line-height:1.28;margin:0 0 8px;}
.card h3 a:hover{color:var(--forest);}
.card p{font-size:14px;color:var(--ink-soft);margin:0 0 10px;}
.card .meta{font-size:12px;color:var(--ink-soft);}

/* newsletter band */
.band{background:var(--ink);color:var(--paper);padding:52px 0;}
.band .wrap{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;}
.band h2{font-family:'Fraunces',serif;font-weight:500;font-size:30px;line-height:1.2;margin:0 0 14px;}
.band h2 em{color:var(--mustard);font-style:italic;}
.band p{color:rgba(245,241,228,0.72);font-size:15px;max-width:44ch;margin:0 0 22px;}
.form-row{display:flex;gap:10px;max-width:380px;}
.form-row input{flex:1;padding:12px 14px;border-radius:var(--radius);border:1px solid rgba(245,241,228,0.28);background:rgba(245,241,228,0.06);color:var(--paper);font:inherit;font-size:14px;}
.form-row button{padding:12px 20px;border-radius:var(--radius);border:none;background:var(--mustard);color:var(--forest-deep);font-weight:700;font-size:14px;cursor:pointer;}
.form-row button:hover{background:#f0b559;}
.band-stats{display:flex;gap:34px;}
.stat b{font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:40px;display:block;color:var(--mustard);}
.stat span{font-size:12.5px;color:rgba(245,241,228,0.6);}

/* footer */
footer#site-footer{padding:46px 0 34px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-bottom:30px;border-bottom:1px solid var(--rule);}
.foot-grid h4{font-size:13px;font-weight:700;margin:0 0 14px;}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.foot-grid ul a{font-size:13.5px;color:var(--ink-soft);}
.foot-grid ul a:hover{color:var(--forest);}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:22px;font-size:12.5px;color:var(--ink-soft);flex-wrap:wrap;gap:10px;}

/* single post */
.single-article{max-width:720px;margin:0 auto;padding:50px 0;}
.single-article h1{font-family:'Fraunces',serif;font-weight:500;font-size:38px;line-height:1.12;margin:0 0 16px;}
.single-article .meta{font-size:13px;color:var(--ink-soft);margin-bottom:26px;}
.single-article .content{font-size:17px;line-height:1.7;}
.single-article .content p{margin:0 0 20px;}
.single-article .content img{border-radius:var(--radius);margin:24px 0;}

@media (max-width:860px){
  .hero .grid{grid-template-columns:1fr;}
  .grid-articles{grid-template-columns:1fr 1fr;}
  .band .wrap{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .word{font-size:40px;}
}
@media (max-width:560px){
  .grid-articles{grid-template-columns:1fr;}
  nav.primary{display:none;}
  .foot-grid{grid-template-columns:1fr;}
  .hero h1{font-size:30px;}
}
:focus-visible{outline:2px solid var(--mustard-deep);outline-offset:2px;}