/* ── PakistanTender theme v2 ────────────────────────────────────────────────
   Shared across every page. Loaded AFTER each page's own inline <style>, so
   equal-specificity rules win without needing !important.

   This is a RETHEME ONLY — no page markup was changed. Every page keeps the
   class vocabulary it already had (.container/.pg-section/.t-card/.btn/...),
   and this sheet redefines the tokens plus the handful of components whose
   look changed by more than a colour. Deleting the two injected tags
   (pt-theme.css + pt-motion.js) reverts any page to the old design.
   Tokens come from the Claude Design "PakistanTender Page Templates" artboard. */

:root{
  --teal:#0AD0BF; --teal-txt:#0A5F58; --teal-dk:#08B8A9;
  --teal-lt:#E6FAF7; --teal-mid:#CDE3E1;
  --text:#06232B; --med:#41595E; --light:#5A6E73; --border:#E1EAEA;
  --bg:#F4F7F7; --white:#ffffff;
  --font:'Public Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  --display:'Manrope','Public Sans',system-ui,sans-serif;
  --ink-2:#0A3A44; --faint:#93A5A8; --ground:#F6FDFC; --rule-soft:#EDF2F2;
}
body{font-family:var(--font);color:var(--text);}
h1,h2,h3,.sec-title,.pg-section h2,.ft-col h3{font-family:var(--display);letter-spacing:-.01em;}

/* Logo wordmark. It is inline-styled 'Inter' in the header and footer of every
   inner page, so a stylesheet cannot reach it without matching the attribute.
   index.php renders the same wordmark in Manrope 800 — match that, and Inter
   then has no remaining use anywhere on the site. */
.site-header span[style*="Inter"],.main-footer span[style*="Inter"],
.hd-inner > a > span{font-family:var(--display) !important;font-weight:800;}

/* Top strip + header */
.co-banner{background:#06232B;}
.site-header{border-bottom:1px solid var(--border);}
.hd-nav a{color:var(--med);border-radius:9px;}
.hd-nav a:hover,.hd-nav a.active{color:var(--teal-txt);background:var(--teal-lt);}
.hd-phone a{color:var(--teal-txt);}

/* Buttons — the artboard settles on a 9px radius, 11px for large */
.btn{border-radius:9px;font-family:var(--font);}
.btn-lg{border-radius:11px;}
.btn-teal{background:var(--teal);color:#06232B;}
.btn-teal:hover{background:var(--teal-dk);color:#06232B;box-shadow:0 4px 14px rgba(10,208,191,.28);}
.btn-dark{background:var(--text);color:#fff;}
.btn-dark:hover{background:var(--ink-2);}
.btn-ghost{border:1.5px solid var(--border);color:var(--med);}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal-txt);}
.btn-outline-teal{color:var(--teal-txt);border:2px solid var(--teal-txt);}
.btn-outline-teal:hover{background:var(--teal-txt);color:#fff;}

/* Page header — dark ink, matching the artboard's page templates and the
   homepage hero. Replaces the old mint gradient.

   Four hero classes exist across the site and they all share the same inner
   vocabulary (.sec-eyebrow / h1 / p / .urdu-wm), so they take one rule set:
     .page-hero    252 pages (category, city, static)
     .search-hero  /search
     .tender-hero  tender.php — the detail template
     .hero         organisations, procurement-pulse, compare, how-we-verify, demo */
.page-hero,.search-hero,.tender-hero,.hero{
  background:#06232B !important;border-bottom:0;
}
.page-hero .sec-title,.page-hero h1,.page-hero h2,
.search-hero .sec-title,.search-hero h1,.search-hero h2,
.tender-hero .sec-title,.tender-hero h1,.tender-hero h2,
.hero .sec-title,.hero h1,.hero h2{color:#ffffff !important;}
.page-hero .sec-sub,.page-hero p,
.search-hero .sec-sub,.search-hero p,
.tender-hero .sec-sub,.tender-hero p,
.hero .sec-sub,.hero p{color:#A9C7C9 !important;}
.page-hero .sec-eyebrow,.search-hero .sec-eyebrow,
.tender-hero .sec-eyebrow,.hero .sec-eyebrow{color:#0AD0BF !important;}
.page-hero .urdu-wm,.search-hero .urdu-wm,
.tender-hero .urdu-wm,.hero .urdu-wm{color:rgba(255,255,255,.05) !important;}
.page-hero .cat-icon-hero,.hero .cat-icon-hero{background:rgba(10,208,191,.12);box-shadow:none;}
/* tender.php's hero meta row: labels were --med and values #06232B, both of
   which vanish on ink. Its region link had no colour rule at all and fell back
   to the browser's default blue — invisible-adjacent on a dark ground. */
.page-hero .meta-item,.search-hero .meta-item,
.tender-hero .meta-item,.hero .meta-item{color:#A9C7C9 !important;}
.page-hero .meta-item strong,.search-hero .meta-item strong,
.tender-hero .meta-item strong,.hero .meta-item strong{color:#ffffff !important;}
.page-hero a:not(.btn):not(.t-tag),.search-hero a:not(.btn):not(.t-tag),
.tender-hero a:not(.btn):not(.t-tag),.hero a:not(.btn):not(.t-tag){color:#0AD0BF !important;}
/* how-we-verify and a few older pages use .eyebrow, not .sec-eyebrow */
.page-hero .eyebrow,.search-hero .eyebrow,
.tender-hero .eyebrow,.hero .eyebrow{color:#0AD0BF !important;}

/* decorative blobs need a little more presence on ink than on mint */
.search-hero .sh-blob{opacity:.75;}

/* Secondary buttons were designed against the old mint hero. On ink,
   .btn-dark is #06232B on #06232B — invisible — so it becomes the outline. */
.page-hero .btn-ghost,.search-hero .btn-ghost,
.tender-hero .btn-ghost,.hero .btn-ghost{color:#A9C7C9;border-color:#2C5A62;}
.page-hero .btn-ghost:hover,.search-hero .btn-ghost:hover,
.tender-hero .btn-ghost:hover,.hero .btn-ghost:hover{color:#fff;border-color:#0AD0BF;background:transparent;}
.page-hero .btn-dark,.search-hero .btn-dark,
.tender-hero .btn-dark,.hero .btn-dark{background:transparent;color:#fff;border:1.5px solid #2C5A62;}
.page-hero .btn-dark:hover,.search-hero .btn-dark:hover,
.tender-hero .btn-dark:hover,.hero .btn-dark:hover{background:rgba(10,208,191,.12);border-color:#0AD0BF;color:#fff;}
.page-hero .btn-outline-teal,.search-hero .btn-outline-teal,
.tender-hero .btn-outline-teal,.hero .btn-outline-teal{color:#0AD0BF;border-color:#0AD0BF;}
.page-hero .btn-outline-teal:hover,.search-hero .btn-outline-teal:hover,
.tender-hero .btn-outline-teal:hover,.hero .btn-outline-teal:hover{background:#0AD0BF;color:#06232B;}

/* Sections */
.section-bg,.pg-section.alt{background:var(--bg);}
.pg-section h2{color:var(--text);}
.pg-section p,.pg-section li{color:var(--med);}

/* Tender cards — chips read source and status, one primary teal action */
.t-card{border:1px solid var(--border);border-radius:13px;}
.t-card:hover{border-color:var(--teal);box-shadow:0 6px 24px rgba(6,35,43,.09);}
.t-title{color:var(--text);}
.t-meta{color:var(--light);}
.t-footer{border-top:1px solid var(--rule-soft);}
.t-date strong{color:var(--med);}
.t-tag{border-radius:5px;letter-spacing:1.2px;}
.tag-open{background:#E6FAF7;color:#0A5F58;}
.tag-cat{background:#F4F7F7;color:#41595E;}
.tag-soon{background:#FDF4DE;color:#8A6A11;}
.tag-priv{background:#FBE9E5;color:#8C2F21;}
.t-cta{background:var(--teal);color:#06232B;border-radius:9px;}
.t-cta:hover{background:var(--teal-dk);color:#06232B;}
/* "Closed tenders drop to 70% opacity and lose the teal CTA" — card rules */
.t-card.is-closed{opacity:.7;}
.t-card.is-closed .t-cta{background:var(--bg);color:var(--med);}

/* Link cards */
.link-card{border:1px solid var(--border);border-radius:9px;}
.link-card:hover{border-color:var(--teal);background:var(--ground);}
.link-card span{color:var(--text);}
.link-card .arr{color:var(--teal-txt);}

/* Forms */
.form-card{border:1px solid var(--border);border-radius:14px;box-shadow:0 4px 24px rgba(6,35,43,.06);}
.fg label{color:var(--med);}
.fg input,.fg select,.fg textarea{border:1.5px solid var(--border);border-radius:9px;font-family:var(--font);color:var(--text);}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--teal);}
.submit-btn{background:var(--teal);color:#06232B;border-radius:9px;font-family:var(--font);}
.submit-btn:hover:not(:disabled){background:var(--teal-dk);}

/* Footer */
.main-footer{background:#06232B;color:#8FB3B6;}
.ft-col a{color:#8FB3B6;}
.ft-col a:hover{color:var(--teal);}
.ft-contact a{color:var(--teal);}
.footer-bottom{border-top:1px solid #2C5A62;}

/* ── Motion layer — identical to the homepage's, so behaviour matches ──────
   SEO-critical: .pt-armed (which sets opacity:0) is applied by JavaScript and
   is NEVER in the served HTML. If JS fails, or a crawler doesn't execute it,
   every section renders fully visible — content is never hidden behind a script. */
@keyframes pt-rise{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
@keyframes pt-pop{from{opacity:0;transform:translateY(14px) scale(.985);}to{opacity:1;transform:none;}}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.pt-armed > *{opacity:0;}
.pt-armed.pt-in > *{animation:pt-rise .72s cubic-bezier(.22,.61,.36,1) both;}
.pt-armed.pt-in > *:nth-child(2){animation-delay:.07s;}
.pt-armed.pt-in > *:nth-child(3){animation-delay:.14s;}
.pt-armed.pt-in > *:nth-child(4){animation-delay:.21s;}
.pt-armed.pt-in > *:nth-child(5){animation-delay:.28s;}
.pt-armed.pt-in > *:nth-child(6){animation-delay:.35s;}
.pt-armed.pt-in > *:nth-child(n+7){animation-delay:.42s;}
.pt-armed.pt-grid.pt-in > *{animation-name:pt-pop;}
.pt-lift{transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s;}
.pt-lift:hover{transform:translateY(-3px);}
@media (prefers-reduced-motion: reduce){
  .pt-armed > *,.pt-armed.pt-in > *{animation:none !important;opacity:1 !important;}
  .pt-lift:hover{transform:none;}
}