/*
Theme Name: Sarkari Job Portal Child
Theme URI: https://example.com/
Description: Lightweight, responsive child theme for a Sarkari Job / Government Job portal. Requires GeneratePress.
Author: Custom
Template: generatepress
Version: 1.0.0
Text Domain: sarkari-job-portal
*/

/* =========================
   DESIGN TOKENS
========================= */
:root {
  --sj-primary: #9d1538;
  --sj-primary-dark: #77102a;
  --sj-accent: #e9a21a;
  --sj-green: #176b42;
  --sj-text: #1f2937;
  --sj-muted: #667085;
  --sj-border: #e5e7eb;
  --sj-bg: #f6f7f9;
  --sj-card: #ffffff;
  --sj-radius: 14px;
  --sj-shadow: 0 8px 30px rgba(16,24,40,.07);
}

/* =========================
   GLOBAL
========================= */
body { background: var(--sj-bg); color: var(--sj-text); }
.sj-container { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
.sj-main { padding: 32px 0 50px; }
.sj-card {
  background: var(--sj-card);
  border: 1px solid var(--sj-border);
  border-radius: var(--sj-radius);
  box-shadow: var(--sj-shadow);
}
.sj-section { padding: 28px; margin-top: 24px; }
.sj-section h2 {
  font-size: clamp(20px, 2.4vw, 27px);
  margin: 0 0 20px;
  color: var(--sj-text);
  line-height: 1.3;
}
.sj-section h2:after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin-top: 10px;
  background: var(--sj-primary);
  border-radius: 10px;
}

/* =========================
   HERO / POST HEADER
========================= */
.sj-breadcrumb { font-size: 14px; color: var(--sj-muted); margin-bottom: 16px; }
.sj-post-hero {
  padding: clamp(24px, 4vw, 46px);
  background: linear-gradient(135deg, var(--sj-primary), #c62a50);
  color: #fff;
  border-radius: var(--sj-radius);
  box-shadow: var(--sj-shadow);
}
.sj-post-hero h1 {
  color: #fff;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.16;
  margin: 0 0 14px;
}
.sj-post-hero p { max-width: 800px; margin: 0; opacity: .92; font-size: 17px; }
.sj-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.sj-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
  font-size: 13px; font-weight: 600;
}

/* =========================
   QUICK FACTS
========================= */
.sj-facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-top: 20px;
}
.sj-fact {
  padding: 18px; background: #fff; border: 1px solid var(--sj-border);
  border-radius: 12px;
}
.sj-fact small { display:block; color:var(--sj-muted); font-weight:600; margin-bottom:6px; }
.sj-fact strong { font-size:16px; color:var(--sj-text); }

/* =========================
   CONTENT NAVIGATION
========================= */
.sj-jump-nav {
  position: sticky; top: 10px; z-index: 20;
  display:flex; gap:8px; overflow-x:auto; white-space:nowrap;
  padding: 10px; margin-top: 20px;
}
.sj-jump-nav a {
  padding: 9px 14px; border-radius: 9px; background:#fff;
  color:var(--sj-text); border:1px solid var(--sj-border);
  text-decoration:none; font-size:14px; font-weight:600;
}
.sj-jump-nav a:hover { background:var(--sj-primary); color:#fff; border-color:var(--sj-primary); }

/* =========================
   INFO GRID
========================= */
.sj-info-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.sj-info-list { list-style:none; padding:0; margin:0; }
.sj-info-list li {
  display:flex; justify-content:space-between; gap:18px;
  padding:13px 0; border-bottom:1px solid var(--sj-border);
}
.sj-info-list li:last-child { border-bottom:0; }
.sj-label { color:var(--sj-muted); }
.sj-value { font-weight:700; text-align:right; }

/* =========================
   TABLES
========================= */
.sj-table-wrap { overflow-x:auto; }
.sj-table { width:100%; border-collapse:collapse; min-width:650px; }
.sj-table th, .sj-table td {
  padding:14px 16px; border:1px solid var(--sj-border);
  vertical-align:top; text-align:left;
}
.sj-table th { background:#f9fafb; font-size:14px; }
.sj-table tr:nth-child(even) td { background:#fcfcfd; }

/* =========================
   BUTTONS / IMPORTANT LINKS
========================= */
.sj-links { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.sj-link {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; text-decoration:none; font-weight:700;
  color:var(--sj-text); background:#fff; border:1px solid var(--sj-border);
  border-radius:10px;
}
.sj-link:hover { border-color:var(--sj-primary); color:var(--sj-primary); transform:translateY(-1px); }
.sj-btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 20px; border-radius:9px; background:var(--sj-primary);
  color:#fff; text-decoration:none; font-weight:700;
}
.sj-btn:hover { background:var(--sj-primary-dark); color:#fff; }

/* =========================
   FAQ
========================= */
.sj-faq details { border-bottom:1px solid var(--sj-border); padding:16px 0; }
.sj-faq details:last-child { border-bottom:0; }
.sj-faq summary { cursor:pointer; font-weight:700; font-size:16px; }
.sj-faq p { color:var(--sj-muted); margin:12px 0 0; }

/* =========================
   HOMEPAGE
========================= */
.sj-home-hero {
  padding:60px 0; color:#fff;
  background:linear-gradient(135deg, #77102a, #c62a50);
}
.sj-home-hero h1 { color:#fff; font-size:clamp(32px,5vw,58px); margin-bottom:12px; }
.sj-search { display:flex; margin-top:24px; max-width:720px; }
.sj-search input { flex:1; min-width:0; padding:16px; border:0; border-radius:10px 0 0 10px; }
.sj-search button { border:0; padding:0 24px; background:var(--sj-accent); font-weight:700; border-radius:0 10px 10px 0; cursor:pointer; }
.sj-home-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.sj-home-card { padding:22px; text-decoration:none; color:var(--sj-text); }
.sj-home-card h3 { margin-top:0; }

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px) {
  .sj-facts { grid-template-columns:repeat(2,1fr); }
  .sj-home-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 700px) {
  .sj-container { width:min(100% - 22px, 1180px); }
  .sj-main { padding-top:18px; }
  .sj-section { padding:20px 16px; }
  .sj-info-grid, .sj-links { grid-template-columns:1fr; }
  .sj-facts { grid-template-columns:1fr; }
  .sj-info-list li { display:block; }
  .sj-value { text-align:left; display:block; margin-top:4px; }
  .sj-home-grid { grid-template-columns:1fr; }
  .sj-search { display:block; }
  .sj-search input { width:100%; border-radius:10px; }
  .sj-search button { width:100%; min-height:52px; margin-top:10px; border-radius:10px; }
}


/* =========================================
   HOMEPAGE - LATEST JOBS
========================================= */

.sj-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
}

.sj-section-heading h2 {
    margin-bottom: 0;
}

.sj-view-all {
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.sj-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.sj-job-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sj-job-info strong {
    font-size: 16px;
}

.sj-organization {
    font-size: 13px;
    opacity: 0.7;
}

.sj-job-right {
    display: flex;
    align-items: center;
    gap: 15px;
    white-space: nowrap;
}

.sj-last-date {
    font-size: 13px;
    opacity: 0.8;
}

.sj-arrow {
    font-size: 20px;
    font-weight: bold;
}

/* Mobile Responsive */
@media (max-width: 768px) {

    .sj-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .sj-link {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .sj-job-right {
        width: 100%;
        justify-content: space-between;
    }

    .sj-last-date {
        white-space: normal;
    }
}