/*
Theme Name: Pathankot Online
Theme URI: https://pathankotonline.com
Author: pathankotonline.com
Description: Custom dashboard homepage theme for Pathankot Online — local news, travel, health tips, city info and business directory.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: pathankot-online
*/

:root{
  --paper:#EDE7D6; --card:#F8F5EA; --ink:#1C2620; --pine:#1F3A2E; --pine-dark:#132720;
  --river:#3D6E7D; --amber:#D98E2B; --line: rgba(28,38,32,0.14); --shadow: 0 10px 30px rgba(19,39,32,0.10);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{ margin:0; background:var(--paper); color:var(--ink); font-family:'IBM Plex Sans', sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; }
h1,h2,h3,.display{ font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.01em; margin:0; }
.mono{font-family:'IBM Plex Mono', monospace;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;} }

header{ position:sticky; top:0; z-index:50; background:rgba(237,231,214,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; }
.logo{display:flex; align-items:center; gap:10px;}
.logo-mark{ width:34px;height:34px;border-radius:8px; background:var(--pine); display:flex;align-items:center;justify-content:center; color:var(--paper); font-family:'Fraunces',serif; font-weight:700; font-size:18px; }
.logo-text{font-family:'Fraunces',serif; font-weight:600; font-size:19px;}
nav.links{display:flex; gap:28px; font-size:14.5px; font-weight:500;}
nav.links a{opacity:0.8; transition:opacity .15s ease;}
nav.links a:hover{opacity:1; color:var(--river);}
.nav-right{display:flex; align-items:center; gap:14px;}
.btn{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:8px; font-size:14px; font-weight:600; border:1px solid var(--pine); cursor:pointer; }
.btn-solid{background:var(--pine); color:var(--paper); border-color:var(--pine);}
.btn-solid:hover{background:var(--pine-dark);}
.btn-ghost{background:transparent; color:var(--pine);}
.btn-ghost:hover{background:rgba(31,58,46,0.06);}
@media (max-width:860px){ nav.links{display:none;} }

.hero{ padding:56px 24px 40px; position:relative; overflow:hidden; }
.hero-inner{max-width:1180px;margin:0 auto;}
.eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--river); margin-bottom:14px; display:block; }
.hero h1{font-size:clamp(32px,5vw,52px); line-height:1.05; max-width:720px;}
.hero p.lede{ margin-top:16px; font-size:17px; max-width:560px; color:rgba(28,38,32,0.78); }
.hero-meta{ display:flex; gap:22px; margin-top:22px; flex-wrap:wrap; font-family:'IBM Plex Mono',monospace; font-size:13px; color:rgba(28,38,32,0.7); }
.hero-meta strong{color:var(--ink); font-weight:600;}
.signpost{ margin-top:40px; display:flex; gap:14px; flex-wrap:wrap; }
.sign{ position:relative; background:var(--pine); color:var(--paper); padding:13px 22px 13px 20px; font-family:'IBM Plex Mono',monospace; font-size:14px; font-weight:500;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); display:flex; align-items:baseline; gap:10px; box-shadow:var(--shadow);
  opacity:0; transform:translateX(-8px); animation:signIn .5s ease forwards; }
.sign:nth-child(1){animation-delay:.05s;}
.sign:nth-child(2){animation-delay:.15s; background:var(--river);}
.sign:nth-child(3){animation-delay:.25s;}
.sign:nth-child(4){animation-delay:.35s; background:var(--river);}
@keyframes signIn{ to{opacity:1; transform:translateX(0);} }
.sign .dist{font-weight:700; font-size:15px;}
.sign .place{opacity:0.92;}

.section{padding:44px 24px;}
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px; gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:14px; }
.section-head h2{font-size:26px;}
.section-tag{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--river); font-weight:600; }
.see-all{font-size:13.5px; font-weight:600; color:var(--river); white-space:nowrap;}
.see-all:hover{text-decoration:underline;}
.dashboard{ display:grid; grid-template-columns: 1.7fr 1fr; gap:20px; }
@media (max-width:900px){ .dashboard{grid-template-columns:1fr;} }
.card{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px; }
.news-item{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.news-item:last-child{border-bottom:none; padding-bottom:0;}
.news-item:first-child{padding-top:0;}
.news-tag{ flex:0 0 auto; font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; font-weight:600;
  background:rgba(61,110,125,0.12); color:var(--river); padding:4px 8px; border-radius:5px; height:fit-content; margin-top:3px; }
.news-item h3{font-size:16.5px; font-weight:600; font-family:'IBM Plex Sans',sans-serif;}
.news-item .meta{font-size:12.5px; color:rgba(28,38,32,0.55); margin-top:5px; font-family:'IBM Plex Mono',monospace;}
.news-item a.headline:hover{color:var(--river);}
.fact-row{ display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.fact-row:last-child{border-bottom:none;}
.fact-label{color:rgba(28,38,32,0.62);}
.fact-val{font-weight:600; font-family:'IBM Plex Mono',monospace; font-size:13.5px;}
.emergency{ margin-top:16px; padding-top:16px; border-top:1px dashed var(--line); }
.emergency h4{font-size:12.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--river); margin-bottom:10px; font-family:'IBM Plex Mono',monospace;}
.emergency-row{display:flex; justify-content:space-between; font-size:14px; padding:5px 0;}
.emergency-row strong{font-family:'IBM Plex Mono',monospace;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media (max-width:900px){ .grid-3{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .grid-3{grid-template-columns:1fr;} }
.tile{ background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:transform .18s ease, box-shadow .18s ease; }
.tile:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
.tile-top{ height:8px; background:var(--river); }
.tile.alt .tile-top{background:var(--amber);}
.tile-body{padding:18px 20px 20px;}
.tile-kicker{font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--river); font-weight:600;}
.tile h3{font-size:17.5px; margin-top:8px; font-family:'IBM Plex Sans',sans-serif; font-weight:600;}
.tile p{font-size:14px; color:rgba(28,38,32,0.72); margin-top:8px;}
.tile .distance{ margin-top:14px; display:flex; justify-content:space-between; align-items:center; font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600; color:var(--pine); }
.directory-controls{ display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.chip{ padding:8px 14px; border-radius:20px; border:1px solid var(--line); font-size:13.5px; font-weight:600; cursor:pointer; background:var(--card); transition: all .15s ease; }
.chip.active, .chip:hover{background:var(--pine); color:var(--paper); border-color:var(--pine);}
.biz-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media (max-width:900px){ .biz-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .biz-grid{grid-template-columns:1fr;} }
.biz-card{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 20px; }
.biz-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.biz-top h3{font-size:16px; font-family:'IBM Plex Sans',sans-serif; font-weight:600;}
.biz-cat{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; background:rgba(217,142,43,0.15); color:#8f5f16; padding:3px 8px; border-radius:5px; white-space:nowrap; }
.biz-card p{font-size:13.5px; color:rgba(28,38,32,0.68); margin-top:8px;}
.biz-meta{display:flex; justify-content:space-between; margin-top:12px; font-size:12.5px; font-family:'IBM Plex Mono',monospace; color:rgba(28,38,32,0.6);}
.add-listing{ margin-top:22px; padding:26px; border-radius:12px; background:var(--pine); color:var(--paper); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.add-listing h3{font-size:19px; color:var(--paper);}
.add-listing p{font-size:14px; opacity:0.85; margin-top:4px;}
.add-listing .btn{border-color:var(--paper); color:var(--paper);}
.add-listing .btn:hover{background:rgba(248,245,234,0.12);}
footer.site-footer{ background:var(--pine-dark); color:rgba(248,245,234,0.85); padding:44px 24px 26px; margin-top:40px; }
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; max-width:1180px; margin:0 auto; }
@media (max-width:800px){ .foot-grid{grid-template-columns:1fr 1fr;} }
.foot-grid h4{font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--amber); margin-bottom:14px;}
.foot-grid a{display:block; font-size:14px; opacity:0.82; margin-bottom:9px;}
.foot-grid a:hover{opacity:1;}
.foot-bottom{ max-width:1180px; margin:30px auto 0; padding-top:20px; border-top:1px solid rgba(248,245,234,0.14); font-size:12.5px; opacity:0.65; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-family:'IBM Plex Mono',monospace; }
a:focus-visible, button:focus-visible, .chip:focus-visible{ outline:2px solid var(--river); outline-offset:2px; }