/* ============================================================
   IRCON Recruitment Portal - stylesheet
   Palette : navy #0b3d6b | saffron #ff9933 | green #138808
   ============================================================ */
:root{
  --navy:#0b3d6b; --navy-dark:#082c4e; --navy-light:#1c6ea4;
  --saffron:#ff9933; --green:#138808; --red:#c0392b;
  --line:#d7dde5; --bg:#f4f7fa; --text:#232a31; --muted:#5b6773;
  font-size:16px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Segoe UI",Arial,Helvetica,sans-serif; font-size:.95rem; line-height:1.6;
}
a{color:var(--navy); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
.container{width:100%; max-width:1200px; margin:0 auto; padding:0 16px}

/* ---------------- top strip ---------------- */
.top-strip{background:var(--navy-dark); color:#dbe7f2; font-size:.78rem}
.top-strip__inner{display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:6px; min-height:34px}
.top-strip__gov{font-weight:600; letter-spacing:.2px}
.top-strip__links{display:flex; align-items:center; gap:14px; list-style:none; margin:0; padding:0}
.top-strip__links a{color:#dbe7f2}
.top-strip__links a:hover{color:var(--saffron); text-decoration:none}
.font-size{display:flex; gap:6px}
.font-size a{border:1px solid #3f6a92; border-radius:3px; padding:0 5px; line-height:1.5}

/* ---------------- header ---------------- */
.site-header{background:#fff}
.site-header__inner{display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; padding-top:12px; padding-bottom:12px}
.brand img{height:70px; width:auto}
.header-logos{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.header-logos img{height:62px; width:auto}
.tricolour{display:flex; height:4px}
.tricolour span{flex:1}
.tricolour span:nth-child(1){background:var(--saffron)}
.tricolour span:nth-child(2){background:#fff}
.tricolour span:nth-child(3){background:var(--green)}

/* ---------------- navbar ---------------- */
.navbar{background:var(--navy); box-shadow:0 2px 5px rgba(0,0,0,.15); position:sticky; top:0; z-index:50}
.nav-menu{display:flex; flex-wrap:wrap; list-style:none; margin:0; padding:0}
.nav-menu a{
  display:block; color:#fff; padding:13px 18px; font-size:.88rem;
  font-weight:600; text-transform:uppercase; letter-spacing:.3px;
  border-right:1px solid rgba(255,255,255,.14);
}
.nav-menu a:hover,.nav-menu a.active{background:var(--navy-light); text-decoration:none}
.nav-menu a.active{box-shadow:inset 0 -3px 0 var(--saffron)}
.nav-toggle{display:none; background:none; border:0; color:#fff; font-size:1rem;
  font-weight:600; padding:12px 4px; cursor:pointer}

/* ---------------- hero ---------------- */
/* full width, section height follows the image height */
.hero{width:100%; line-height:0; background:var(--navy)}
.hero img{width:100%; height:auto; display:block}

/* ---------------- sections ---------------- */
.section{padding:38px 0}
.section--alt{background:#fff; border-top:1px solid var(--line)}
.section__title{
  margin:0 0 22px; font-size:1.35rem; color:var(--navy); font-weight:700;
  position:relative; padding-bottom:10px;
}
.section__title:after{content:""; position:absolute; left:0; bottom:0;
  width:78px; height:3px; background:var(--saffron)}

/* ---------------- vacancy table ---------------- */
.table-wrap{overflow-x:auto; background:#fff; border:1px solid var(--line);
  border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.06)}
.vacancy-table{width:100%; border-collapse:collapse; min-width:860px}
.vacancy-table th{
  background:var(--navy); color:#fff; text-align:left; padding:12px 14px;
  font-size:.82rem; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap;
}
.vacancy-table td{padding:14px; border-bottom:1px solid var(--line); vertical-align:middle}
.vacancy-table tbody tr:nth-child(even){background:#fafcfe}
.vacancy-table tbody tr:hover{background:#eef5fb}
.vacancy-table tr.is-closed{opacity:.75}
.col-sn{width:60px; text-align:center; color:var(--muted)}
.col-note{width:130px}
.col-btn{width:150px}
.empty{text-align:center; padding:28px; color:var(--muted)}
.v-title{display:block; font-weight:600; color:var(--navy); font-size:.97rem}
.v-meta{display:block; margin-top:4px; font-size:.8rem; color:var(--muted)}
.tag{display:inline-block; margin-left:8px; padding:1px 8px; border-radius:10px;
  font-style:normal; font-size:.7rem; font-weight:700; text-transform:uppercase}
.tag--open{background:#e6f5e9; color:var(--green)}
.tag--closed{background:#fdeaea; color:var(--red)}
.pdf-link{display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:.85rem}
.pdf-ico{background:var(--red); color:#fff; font-size:.62rem; font-weight:700;
  padding:2px 5px; border-radius:2px; letter-spacing:.5px}

/* buttons */
.btn{
  display:inline-block; width:100%; text-align:center; padding:9px 12px;
  border-radius:3px; font-size:.83rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.3px; color:#fff; border:1px solid transparent;
}
.btn:hover{text-decoration:none; opacity:.92}
.btn--register{background:var(--green); border-color:#0f6b06}
.btn--login{background:var(--navy-light); border-color:var(--navy)}
.btn--disabled{background:#e6e9ed; color:#8b949e; border-color:#d5dae0; cursor:not-allowed}
.note{margin-top:14px; font-size:.83rem; color:var(--muted);
  background:#fff8ec; border-left:4px solid var(--saffron); padding:10px 14px}

/* ---------------- about ---------------- */
.about-box{background:#fff; border:1px solid var(--line); border-radius:4px; padding:22px}
.about-box p{margin:0 0 14px}
.about-list{margin:0; padding-left:20px}
.about-list li{margin-bottom:7px}

/* ---------------- footer ---------------- */
.site-footer{background:var(--navy-dark); color:#c6d6e5; margin-top:10px; font-size:.86rem}
.site-footer__inner{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; padding:32px 16px}
.foot-col h3{margin:0 0 10px; font-size:.95rem; color:#fff;
  border-bottom:2px solid var(--saffron); display:inline-block; padding-bottom:5px}
.foot-col p{margin:0 0 6px}
.foot-col ul{list-style:none; margin:0; padding:0}
.foot-col li{margin-bottom:6px}
.site-footer a{color:#c6d6e5}
.site-footer a:hover{color:var(--saffron)}
.copyright{background:#061f38; padding:11px 0; font-size:.8rem; text-align:center; color:#9fb4c8}

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .site-footer__inner{grid-template-columns:1fr 1fr}
  .brand img{height:58px}
  .header-logos img{height:48px}
}
@media (max-width:768px){
  .site-header__inner{justify-content:center; text-align:center}
  .header-logos{justify-content:center}
  .nav-toggle{display:block}
  .nav-menu{display:none; flex-direction:column; width:100%; padding-bottom:8px}
  .nav-menu.open{display:flex}
  .nav-menu a{border-right:0; border-bottom:1px solid rgba(255,255,255,.14)}

  /* stacked card view for the vacancy table */
  .vacancy-table{min-width:0}
  .vacancy-table thead{display:none}
  .vacancy-table,.vacancy-table tbody,.vacancy-table tr,.vacancy-table td{display:block; width:100%}
  .vacancy-table tr{border-bottom:6px solid var(--bg); padding:6px 0}
  .vacancy-table td{border-bottom:0; padding:7px 14px}
  .vacancy-table td.col-sn{text-align:left; color:var(--muted); font-size:.78rem}
  .vacancy-table td[data-label]:before{
    content:attr(data-label) " : "; font-weight:700; color:var(--muted); font-size:.75rem;
    text-transform:uppercase; display:block; margin-bottom:3px;
  }
  .vacancy-table td.col-sn:before,.vacancy-table td[data-label="Vacancy"]:before{display:none}
  .btn{width:auto; min-width:150px}
  .site-footer__inner{grid-template-columns:1fr}
}

/* ============================================================
   INNER PAGES
   ============================================================ */

/* ---------------- page banner + breadcrumb ---------------- */
.page-banner{
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy-light) 100%);
  color:#fff; padding:26px 0 22px; border-bottom:4px solid var(--saffron);
}
.page-banner h1{margin:0; font-size:1.6rem; font-weight:700; letter-spacing:.2px}
.page-banner p{margin:6px 0 0; color:#cfe3f5; font-size:.9rem}
.breadcrumb{margin-top:10px; font-size:.8rem; color:#bcd6ec}
.breadcrumb a{color:#fff; font-weight:600}
.breadcrumb span{margin:0 6px; color:var(--saffron)}

/* ---------------- sub heading ---------------- */
.sub-title{margin:24px 0 12px; font-size:1.05rem; color:var(--navy)}

/* ---------------- stat row ---------------- */
.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px; margin-bottom:26px}
.stat{background:#fff; border:1px solid var(--line); border-left:4px solid var(--saffron);
  border-radius:4px; padding:14px 16px}
.stat strong{display:block; font-size:1.25rem; color:var(--navy); line-height:1.3}
.stat span{font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.4px}

/* ---------------- info cards ---------------- */
.info-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px; margin-top:22px}
.info-card{background:#fff; border:1px solid var(--line); border-radius:4px; padding:20px}
.info-card h3{margin:0 0 12px; font-size:1rem; color:var(--navy);
  border-bottom:1px solid var(--line); padding-bottom:8px}
.info-card p{margin:0 0 10px}
.info-card .about-list{padding-left:18px}

/* ---------------- year filter chips ---------------- */
.filter-bar{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:16px;
  font-size:.85rem; color:var(--muted)}
.chip{display:inline-block; padding:5px 14px; border:1px solid var(--line); border-radius:20px;
  background:#fff; font-size:.82rem; font-weight:600; color:var(--navy)}
.chip:hover{border-color:var(--navy-light); text-decoration:none}
.chip--on{background:var(--navy); border-color:var(--navy); color:#fff}

/* ---------------- extra tags / buttons ---------------- */
.tag--new{background:var(--red); color:#fff; animation:blink 1.2s steps(2,start) infinite}
@keyframes blink{50%{opacity:.35}}
.btn--outline{background:#fff; color:var(--navy); border-color:var(--navy)}
.btn--outline:hover{background:var(--navy); color:#fff}
.btn--inline{width:auto; min-width:0; padding:9px 22px}

/* ---------------- contact page ---------------- */
.contact-split{display:grid; grid-template-columns:1.15fr .85fr; gap:28px; margin-top:34px}
.contact-form,.contact-map{min-width:0}
.field{margin-bottom:14px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field label{display:block; font-size:.83rem; font-weight:600; color:var(--navy); margin-bottom:5px}
.req{color:var(--red)}
.field input,.field select,.field textarea{
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:3px;
  font-family:inherit; font-size:.88rem; background:#fff; color:var(--text);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-color:var(--navy-light); box-shadow:0 0 0 2px rgba(28,110,164,.15)
}
.field textarea{resize:vertical}
small.err{display:block; margin-top:4px; color:var(--red); font-size:.76rem}
.alert{padding:11px 14px; border-radius:3px; font-size:.86rem; margin-bottom:16px}
.alert--ok{background:#e6f5e9; border-left:4px solid var(--green); color:#14591f}
.alert--err{background:#fdeaea; border-left:4px solid var(--red); color:#8c231a}
.map-box{background:#fff; border:1px dashed #b9c4d0; border-radius:4px; padding:34px 20px;
  text-align:center; color:var(--muted); font-size:.86rem}
.map-box iframe{width:100%; min-height:280px; border:0; display:block}
.map-box code{background:#eef2f6; padding:1px 5px; border-radius:2px; font-size:.82rem}

@media (max-width:860px){
  .contact-split{grid-template-columns:1fr}
}
@media (max-width:768px){
  .page-banner h1{font-size:1.3rem}
  .field-row{grid-template-columns:1fr}
}

/* ---------------- logo slots (before an image is uploaded) ---------------- */
.logo-slot{
  display:flex; align-items:center; justify-content:center; min-width:190px;
  border:1px dashed #b9c4d0; border-radius:4px; padding:0 16px;
  font-size:.78rem; color:var(--muted); background:#fbfcfe;
}
.header-logos img{object-fit:contain}   /* never cropped, ratio always kept */
.brand img{object-fit:contain}
.muted-dash{color:#9aa5b1}
.container--narrow{max-width:780px}
.form-card{background:#fff; border:1px solid var(--line); border-radius:4px; padding:24px}