/* ============================================================
   TRIPURA JOBPULSE — stylesheet
   Palette: institutional navy + signal orange, deadline data in mono.
   Signature: the "pulse" line — the site's heartbeat motif.
   ============================================================ */

:root{
  --navy:#0D2B6A;          /* primary */
  --navy-deep:#0F172A;     /* dark */
  --navy-soft:#1A3C8F;
  --bg:#F8FAFC;            /* background */
  --card:#FFFFFF;
  --ink:#1E293B;
  --muted:#5B6B84;
  --accent:#FFC400;        /* secondary / CTA gold */
  --accent-dark:#E6AF00;
  --blue:#2563EB;          /* accent blue */
  --green:#16A34A;         /* success */
  --red:#DC2626;
  --line:#DBE4F0;
  --radius:16px;
  --shadow:0 1px 2px rgba(13,43,106,.06), 0 10px 28px rgba(13,43,106,.08);
  --font-display:"Inter",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--bg);line-height:1.6;font-size:16px}
img{max-width:100%}
a{color:var(--navy-soft)}
h1,h2,h3{font-family:var(--font-display);line-height:1.15;letter-spacing:-.01em;color:var(--navy);margin:0 0 .5rem}
h1{font-size:clamp(1.9rem,4.5vw,3.1rem);font-weight:800}
h2{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:800}
h3{font-size:1.08rem;font-weight:700}
.mono{font-family:var(--font-mono);font-size:.92em}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.section{padding:56px 0}
.section-tight{padding:36px 0}
.eyebrow{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);font-weight:600;display:block;margin-bottom:.4rem}
.lead{color:var(--muted);max-width:60ch}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---------- Header ---------- */
.site-header{background:var(--navy);position:sticky;top:0;z-index:50;border-bottom:3px solid var(--accent)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-family:var(--font-display);font-weight:800;font-size:1.12rem;letter-spacing:-.01em}
.brand .pulse-mark{flex:0 0 auto}
.brand em{font-style:normal;color:var(--accent)}
.nav-links{display:flex;gap:4px;list-style:none;margin:0;padding:0;align-items:center;flex-wrap:wrap}
.nav-links a{color:#DDE8F4;text-decoration:none;font-size:.92rem;font-weight:600;padding:8px 12px;border-radius:8px}
.nav-links a:hover{background:var(--navy-soft);color:#fff}
.nav-links a.active{background:var(--navy-soft);color:#fff}
.nav-links a.nav-cta{background:var(--accent);color:var(--navy-deep);margin-left:6px}
.nav-links a.nav-cta:hover{background:var(--accent-dark)}
.nav-toggle{display:none;background:none;border:2px solid #DDE8F4;color:#DDE8F4;border-radius:8px;padding:6px 10px;font-size:1.1rem;cursor:pointer}

/* ---------- Hero ---------- */
.hero{background:radial-gradient(1200px 500px at 80% -10%,rgba(37,99,235,.35),transparent 60%),linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);position:relative;color:#E8F0F9;padding:64px 0 0;overflow:hidden}
.hero h1{color:#fff;max-width:17ch}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lead{color:#B9CBDE;font-size:1.05rem}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.hero-stats{display:flex;gap:28px;margin:26px 0 8px;flex-wrap:wrap}
.hero-stat{border-left:3px solid var(--accent);padding-left:12px}
.hero-stat b{display:block;font-family:var(--font-display);font-size:1.6rem;color:#fff;font-weight:800}
.hero-stat span{font-size:.82rem;color:#9FB4CB;text-transform:uppercase;letter-spacing:.08em;font-family:var(--font-mono)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.pulse-strip{display:block;width:100%;margin-top:44px}
.pulse-strip path{stroke-dasharray:1600;stroke-dashoffset:1600;animation:pulse-draw 2.4s ease-out forwards}
@keyframes pulse-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.pulse-strip path{animation:none;stroke-dashoffset:0}}
.hero-panel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:22px}
.hero-panel h3{color:#fff}
.hero-panel p{color:#B9CBDE;font-size:.92rem;margin:.3rem 0 1rem}
.hero-panel .btn{width:100%;justify-content:center;margin-bottom:10px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:10px;font-weight:700;font-size:.95rem;text-decoration:none;border:none;cursor:pointer;font-family:var(--font-body)}
.btn-primary{background:var(--accent);color:var(--navy-deep)}
.btn-primary:hover{background:var(--accent-dark)}
.btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.35)}
.btn-ghost:hover{border-color:#fff}
.btn-wa{background:#0F8A50;color:#fff}
.btn-wa:hover{background:#0C7343}
.btn-tg{background:#2694D4;color:#fff}
.btn-tg:hover{background:#1F7FB8}
.btn-apply{background:var(--navy);color:#fff;width:100%;justify-content:center;margin-top:14px}
.btn-apply:hover{background:var(--navy-soft)}
.btn-buy{background:var(--accent);color:var(--navy-deep)}
.btn-buy:hover{background:var(--accent-dark)}
.btn-soon{background:#E4ECF4;color:var(--muted);cursor:default}

/* ---------- Category tiles (home) ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;text-decoration:none;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .15s ease}
.tile:hover{transform:translateY(-3px)}
.tile::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--accent)}
.tile.t-gov::before{background:var(--navy)}
.tile.t-remote::before{background:var(--green)}
.tile h3{margin-bottom:.3rem}
.tile p{color:var(--muted);font-size:.92rem;margin:0 0 .8rem}
.tile .go{font-weight:700;color:var(--blue);font-size:.92rem}

/* ---------- Job cards ---------- */
.jobs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.job-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.job-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.cat{font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:6px}
.cat-government{background:#E2EBF6;color:var(--navy)}
.cat-private{background:#FFF4CC;color:#8A6D00}
.cat-remote{background:#E0F2E9;color:var(--green)}
.deadline-chip{font-family:var(--font-mono);font-size:.74rem;font-weight:600;padding:4px 9px;border-radius:6px}
.chip-ok{background:#E0F2E9;color:var(--green)}
.chip-urgent{background:#FBE4E1;color:var(--red)}
.chip-closed{background:#E9EEF4;color:var(--muted);text-decoration:line-through}
.chip-neutral{background:#E9EEF4;color:var(--muted)}
.job-title{margin:0 0 .15rem;font-size:1.05rem}
.job-org{color:var(--muted);font-size:.9rem;margin:0 0 .9rem}
.job-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:0;flex:1}
.job-meta dt{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-family:var(--font-mono)}
.job-meta dd{margin:0;font-size:.9rem;font-weight:600}
.empty{color:var(--muted);background:var(--card);border:1px dashed var(--line);border-radius:var(--radius);padding:26px;text-align:center;grid-column:1/-1}

/* ---------- Toolbar (search on job pages) ---------- */
.toolbar{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:22px}
.toolbar input{flex:1;min-width:240px;padding:12px 16px;border:1.5px solid var(--line);border-radius:10px;font-size:1rem;font-family:var(--font-body);background:#fff}
.toolbar input:focus{border-color:var(--accent);outline:none}
.result-count{font-family:var(--font-mono);font-size:.84rem;color:var(--muted)}

/* ---------- eBooks ---------- */
.books-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.book-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.book-spine{position:absolute;inset:0 auto 0 0;width:8px;background:repeating-linear-gradient(180deg,var(--navy) 0 14px,var(--accent) 14px 20px)}
.book-card h3{padding-left:8px}
.book-card p{padding-left:8px;color:var(--muted);font-size:.92rem}
.book-pages{color:var(--blue)!important;font-weight:600;margin:-4px 0 8px}
.book-card .btn{margin-left:8px}

/* ---------- CV builder ---------- */
.cv-layout{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.cv-form{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.cv-form label{display:block;font-weight:700;font-size:.85rem;margin:14px 0 4px}
.cv-form input,.cv-form textarea{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;font-family:var(--font-body);font-size:.95rem}
.cv-form textarea{min-height:70px;resize:vertical}
.cv-form input:focus,.cv-form textarea:focus{border-color:var(--accent);outline:none}
.cv-preview{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow);min-height:500px}
.cv-preview h2{border-bottom:3px solid var(--navy);padding-bottom:6px}
.cv-preview .cv-contact{font-family:var(--font-mono);font-size:.8rem;color:var(--muted);margin:4px 0 18px}
.cv-preview h3{color:var(--blue);font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;margin-top:20px}
.cv-preview p,.cv-preview li{font-size:.92rem;white-space:pre-line}

/* ---------- Email signup band ---------- */
.email-signup{background:var(--navy);border-radius:var(--radius);color:#fff;padding:34px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.email-signup h2{color:#fff;margin:0}
.email-signup p{color:#B9CBDE;margin:.3rem 0 0}

/* ---------- Content pages ---------- */
.prose{max-width:760px}
.prose h2{margin-top:2rem}
.prose ul{padding-left:1.2rem}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-deep);color:#9FB4CB;margin-top:64px;padding:44px 0 26px;font-size:.9rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;margin-bottom:26px}
.site-footer h4{color:#fff;font-family:var(--font-display);font-size:.95rem;margin:0 0 .6rem}
.site-footer a{color:#B9CBDE;text-decoration:none;display:block;padding:3px 0}
.site-footer a:hover{color:#fff}
.footer-note{border-top:1px solid rgba(255,255,255,.12);padding-top:18px;font-size:.8rem}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
  .cv-layout{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav-toggle{display:block}
  .nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:var(--navy);flex-direction:column;align-items:stretch;padding:10px 16px 16px;border-bottom:3px solid var(--accent)}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px}
}

/* ---------- Print (CV download as PDF) ---------- */
@media print{
  body *{visibility:hidden}
  .cv-preview,.cv-preview *{visibility:visible}
  .cv-preview{position:absolute;inset:0;border:none;box-shadow:none;border-radius:0;padding:0}
}

/* ============================================================
   JOB-THEMED HERO ANIMATION LAYER
   Lightweight CSS/SVG animations; disabled for reduced motion.
   ============================================================ */
.hero-art{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hero .container{position:relative;z-index:1}
.float-el{position:absolute;opacity:.85;filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))}

/* Floating briefcase */
.fx-briefcase{top:16%;right:8%;animation:bob 5s ease-in-out infinite}
/* Floating resume sheet */
.fx-resume{top:52%;right:20%;animation:bob 6.5s ease-in-out 1s infinite}
/* Magnifying glass pulsing over resume */
.fx-glass{top:47%;right:16.5%;animation:seek 7s ease-in-out infinite}
/* Graduation cap */
.fx-cap{top:12%;right:26%;animation:bob 7s ease-in-out .5s infinite;opacity:.6}
/* Location pin bouncing */
.fx-pin{top:70%;right:6%;animation:pin-bounce 2.6s ease-in-out infinite}
/* Growth arrow drawing itself */
.fx-arrow{bottom:18%;right:30%;opacity:.55}
.fx-arrow path{stroke-dasharray:220;stroke-dashoffset:220;animation:draw 3s ease-out .6s forwards}
/* Paper plane flying across the hero */
.fx-plane{top:24%;left:-60px;animation:fly 14s linear 2s infinite}
/* Job notification popup sliding in and out */
.fx-notify{top:34%;right:5%;background:rgba(255,255,255,.96);color:var(--navy-deep);border-radius:12px;padding:10px 14px;font-size:.78rem;font-weight:700;display:flex;gap:8px;align-items:center;box-shadow:0 10px 26px rgba(0,0,0,.3);opacity:0;animation:notify 9s ease-in-out 1.5s infinite}
.fx-notify .dot{width:9px;height:9px;border-radius:50%;background:var(--green);flex:0 0 auto;animation:blink 1.2s ease-in-out infinite}
.fx-notify small{display:block;font-weight:500;color:var(--muted)}
/* Drifting particles */
.fx-p{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.45;animation:drift 12s linear infinite}
.fx-p.b{background:#5B8DEF;width:4px;height:4px}
.fx-p:nth-child(odd){animation-duration:16s}

@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(3deg)}}
@keyframes seek{0%,100%{transform:translate(0,0)}25%{transform:translate(-14px,10px)}55%{transform:translate(8px,18px)}80%{transform:translate(14px,-4px)}}
@keyframes pin-bounce{0%,100%{transform:translateY(0)}20%{transform:translateY(-12px)}40%{transform:translateY(0)}50%{transform:translateY(-5px)}60%{transform:translateY(0)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fly{0%{transform:translate(0,0) rotate(8deg);opacity:0}6%{opacity:.9}50%{transform:translate(58vw,-60px) rotate(-4deg)}94%{opacity:.9}100%{transform:translate(115vw,-30px) rotate(6deg);opacity:0}}
@keyframes notify{0%,12%{opacity:0;transform:translateX(30px)}18%,55%{opacity:1;transform:translateX(0)}62%,100%{opacity:0;transform:translateX(30px)}}
@keyframes blink{50%{opacity:.3}}
@keyframes drift{0%{transform:translateY(0)}100%{transform:translateY(-120vh)}}
@media (prefers-reduced-motion:reduce){
  .float-el,.fx-p,.fx-notify{animation:none!important}
  .fx-plane{display:none}
  .fx-notify{opacity:1}
  .fx-arrow path{stroke-dashoffset:0;animation:none}
}
@media (max-width:900px){
  .fx-resume,.fx-glass,.fx-cap,.fx-arrow{display:none}
  .fx-briefcase{top:8%;right:5%}
}

/* Hero search bar */
.hero-search{display:flex;gap:10px;background:#fff;border-radius:14px;padding:10px;margin-top:24px;box-shadow:0 14px 34px rgba(0,0,0,.28);flex-wrap:wrap}
.hero-search input,.hero-search select{flex:1;min-width:150px;border:none;padding:12px 14px;font-size:1rem;font-family:var(--font-body);background:transparent;color:var(--ink)}
.hero-search input:focus,.hero-search select:focus{outline:2px solid var(--blue);border-radius:8px}
.hero-search select{border-left:1.5px solid var(--line)}
.hero-search .btn{flex:0 0 auto}
.quick-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.quick-links a{font-size:.82rem;font-weight:600;color:#CBD9F0;border:1px solid rgba(255,255,255,.28);padding:6px 14px;border-radius:999px;text-decoration:none}
.quick-links a:hover{background:rgba(255,255,255,.12);color:#fff}

/* Navbar logo image */
.brand img{width:42px;height:42px;border-radius:50%;background:#fff;flex:0 0 auto}
.footer-logo{width:64px;height:64px;border-radius:50%;margin-bottom:10px}

/* Share button on job cards */
.job-actions{display:flex;gap:10px;margin-top:14px}
.job-actions .btn-apply{margin-top:0;flex:1}
.btn-share{flex:0 0 auto;background:#E8F5EE;color:var(--green);border-radius:10px;padding:11px 14px;font-weight:700;text-decoration:none;font-size:.9rem}
.btn-share:hover{background:#D2ECDD}

/* ============================================================
   FLOATING WHATSAPP ALERT WIDGET (every page)
   ============================================================ */
.wa-float{position:fixed;right:16px;bottom:16px;z-index:80;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(13,43,106,.22);max-width:270px;animation:wa-in .5s ease .8s both}
.wa-body{display:flex;align-items:center;gap:11px;padding:11px 14px;text-decoration:none;color:var(--ink)}
.wa-icon{width:42px;height:42px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;flex:0 0 auto;position:relative}
.wa-icon::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #25D366;opacity:.5;animation:wa-ring 2s ease-out infinite}
.wa-text b{display:block;font-size:.85rem;color:var(--navy)}
.wa-text small{font-size:.75rem;color:var(--muted)}
.wa-close{position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;border:none;background:var(--navy);color:#fff;font-size:.85rem;line-height:1;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.25)}
@keyframes wa-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes wa-ring{0%{transform:scale(.9);opacity:.5}100%{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.wa-float{animation:none}.wa-icon::after{animation:none;display:none}}
@media (max-width:600px){.wa-float{max-width:230px;right:12px;bottom:12px}.wa-text b{font-size:.8rem}}