/*
Theme Name: MP Rojgar Khabar (GeneratePress Child)
Theme URI: https://mprojgarkhabar.com
Description: Custom child theme for MP Rojgar Khabar — a Madhya Pradesh government-jobs information site. Mobile-first, accessible (WCAG AA), fast (Core Web Vitals), AdSense-friendly design system built on GeneratePress.
Author: MP Rojgar Khabar
Template: generatepress
Version: 1.0.0
Text Domain: mprk-child
*/

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root{
  /* Brand / blues */
  --color-primary:#0B2E59;      /* navy: brand, headings, footer, active nav */
  --color-primary-header:#0C3C78;/* header / nav bar background */
  --color-secondary:#1D4ED8;    /* interactive: secondary buttons, tabs, focus */
  --color-primary-tint:#EAF1FB; /* table header / section band / hover */

  /* Text & surfaces */
  --text:#1A1D29;
  --text-muted:#475569;
  --text-subtle:#64748B;
  --bg:#FFFFFF;
  --bg-alt:#F8FAFC;
  --bg-band:#EAF1FB;

  /* Links */
  --link:#1E50A8;
  --link-visited:#6D28D9;

  /* Borders */
  --border-hairline:#E2E8F0;
  --border:#CBD5E1;
  --border-strong:#64748B;

  /* CTA (Apply Online ONLY) */
  --cta:#F5A300;
  --cta-hover:#DB9100;
  --cta-text:#1A1D29;

  /* Semantic */
  --new-bg:#B91C1C; --hot-bg:#C2410C; --result-bg:#166534;
  --chip-new-bg:#FEE2E2;    --chip-new-tx:#991B1B;
  --chip-hot-bg:#FFEDD5;    --chip-hot-tx:#9A3412;
  --chip-result-bg:#DCFCE7; --chip-result-tx:#166534;
  --chip-info-bg:#DBEAFE;   --chip-info-tx:#1E3A8A;
  --chip-closed-bg:#F1F5F9; --chip-closed-tx:#475569;

  /* Type */
  --font-body:'Mukta','Noto Sans Devanagari',system-ui,'Segoe UI',Arial,sans-serif;
  --fs-base:1.125rem;     /* 18px */
  --lh-body:1.7;

  /* Spacing (4/8) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;

  /* Radius / elevation */
  --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-pill:999px;
  --e1:0 1px 2px rgba(15,23,42,.06);
  --e2:0 4px 12px rgba(15,23,42,.10);
  --e3:0 12px 28px rgba(15,23,42,.16);

  /* Layout */
  --container:1140px;
}

/* =========================================================
   2. BASE & TYPOGRAPHY
   ========================================================= */
body{
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  color:var(--text);
  background:var(--bg);
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-body);
  color:var(--color-primary);
  line-height:1.3;
  font-weight:700;
}
h1{font-size:2.5rem;line-height:1.25}
h2{font-size:2.0625rem;line-height:1.25}
h3{font-size:1.75rem}
h4{font-size:1.375rem}
h5{font-size:1.25rem;line-height:1.4}
h6{font-size:1.125rem;line-height:1.4}
@media (max-width:480px){
  h1{font-size:clamp(1.6rem,6vw,2rem)}
  h2{font-size:1.5rem}
  h3{font-size:1.3rem}
}
p{margin:0 0 var(--space-4)}
small,.entry-meta{font-size:.8rem;color:var(--text-muted)}

a{color:var(--link);text-decoration:none}
a:hover{color:var(--color-primary);text-decoration:underline}
a:visited{color:var(--link-visited)}

/* Visible keyboard focus everywhere (accessibility) */
a:focus-visible,button:focus-visible,input:focus-visible,
.wp-block-button__link:focus-visible{
  outline:3px solid var(--color-secondary);
  outline-offset:2px;
  border-radius:var(--radius-xs);
}

/* =========================================================
   3. LAYOUT / CONTAINER
   ========================================================= */
.grid-container{max-width:var(--container)}
.inside-article,.entry-content{overflow-wrap:break-word}

/* =========================================================
   4. HEADER & NAVIGATION
   ========================================================= */
.site-header{background:var(--bg);box-shadow:var(--e1)}
.main-title a,.site-logo{color:var(--color-primary)}
.site-logo img,.header-image{max-height:54px;width:auto}
@media (max-width:480px){.site-logo img,.header-image{max-height:44px}}
.main-navigation{background-color:var(--color-primary-header)}
.main-navigation .main-nav ul li a{color:#fff;font-weight:600}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item a{
  background-color:rgba(255,255,255,.12);color:#fff
}
.main-navigation .menu-toggle,
.main-navigation .mobile-bar-items a{color:#fff}
/* Reserve sticky nav height to avoid layout shift */
.navigation-stick,.main-navigation.is_stuck{box-shadow:var(--e2)}

/* =========================================================
   5. BUTTONS
   ========================================================= */
.wp-block-button__link,.button,button.gjob-btn{
  background:var(--color-primary);
  color:#fff;
  border-radius:var(--radius-md);
  padding:10px 18px;
  font-weight:600;
  line-height:1.2;
  display:inline-block;
}
.wp-block-button__link:hover,.button:hover{background:var(--color-primary-header);color:#fff}
.gjob-btn--secondary{background:var(--color-secondary)}
/* Apply Online — GOLD, reserved ONLY for the apply action */
.gjob-apply,a.gjob-apply,.wp-block-button.is-style-apply .wp-block-button__link{
  background:var(--cta);
  color:var(--cta-text);
  font-weight:700;
  border-radius:var(--radius-md);
  padding:12px 22px;
  display:inline-block;
}
.gjob-apply:hover,.wp-block-button.is-style-apply .wp-block-button__link:hover{
  background:var(--cta-hover);color:var(--cta-text);text-decoration:none
}

/* =========================================================
   6. STATUS CHIPS & BADGES (always pair colour with a label)
   ========================================================= */
.gjob-chip{
  display:inline-block;font-size:.8rem;font-weight:600;line-height:1.2;
  padding:2px 10px;border-radius:var(--radius-pill);
}
.gjob-chip--new{background:var(--chip-new-bg);color:var(--chip-new-tx)}
.gjob-chip--hot{background:var(--chip-hot-bg);color:var(--chip-hot-tx)}
.gjob-chip--result{background:var(--chip-result-bg);color:var(--chip-result-tx)}
.gjob-chip--info{background:var(--chip-info-bg);color:var(--chip-info-tx)}
.gjob-chip--closed{background:var(--chip-closed-bg);color:var(--chip-closed-tx)}
.gjob-badge{display:inline-block;color:#fff;font-size:.72rem;font-weight:700;
  padding:1px 7px;border-radius:var(--radius-xs);margin-left:6px;vertical-align:middle}
.gjob-badge--new{background:var(--new-bg)}
.gjob-badge--hot{background:var(--hot-bg)}
.gjob-badge--result{background:var(--result-bg)}

/* =========================================================
   7. HOMEPAGE: CATEGORY SECTIONS + CARD GRID
   ========================================================= */
.gjob-section{margin:0 0 var(--space-8)}
.gjob-section__head{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--color-primary);border-radius:var(--radius-md) var(--radius-md) 0 0;
  padding:10px var(--space-4);
}
.gjob-section__head h2,.gjob-section__head h3{color:#fff;margin:0;font-size:1.25rem}
.gjob-section__head a{color:#fff;font-size:.85rem;font-weight:600}
.gjob-section__body{
  border:1px solid var(--border-hairline);border-top:0;
  border-radius:0 0 var(--radius-md) var(--radius-md);background:var(--bg);
  padding:var(--space-4);
}
/* Card grid: 4 -> 2 -> 1 */
.gjob-grid,.gjob-section .wp-block-post-template.is-layout-grid{
  display:grid;gap:var(--space-4);grid-template-columns:repeat(4,1fr)
}
@media (max-width:1024px){.gjob-grid,.gjob-section .wp-block-post-template.is-layout-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.gjob-grid,.gjob-section .wp-block-post-template.is-layout-grid{grid-template-columns:1fr}}
.gjob-card,.gjob-section .wp-block-post-template>li{
  background:var(--bg-alt);border:1px solid var(--border-hairline);
  border-radius:var(--radius-md);padding:var(--space-4);box-shadow:var(--e1);
  list-style:none;margin:0;
}
.gjob-card a,.gjob-section .wp-block-post-template .wp-block-post-title a{
  color:var(--color-primary);font-weight:600
}
.gjob-card .meta,.gjob-section .wp-block-post-date{color:var(--text-muted);font-size:.8rem}

/* Plain list variant (lighter LCP) */
.gjob-list{list-style:none;margin:0;padding:0}
.gjob-list li{padding:12px 0;border-bottom:1px solid var(--border-hairline)}
.gjob-list li:last-child{border-bottom:0}
.gjob-list a{color:var(--link)}

/* =========================================================
   8. NOTIFICATION / DATA TABLES (responsive, no h-scroll)
   ========================================================= */
.entry-content table,.gjob-table{width:100%;border-collapse:collapse;margin:0 0 var(--space-4)}
.entry-content th,.entry-content td,.gjob-table th,.gjob-table td{
  padding:10px 12px;border:1px solid var(--border-hairline);text-align:left;vertical-align:top
}
.entry-content thead th,.gjob-table thead th,.gjob-table th[scope="row"]{
  background:var(--color-primary-tint);color:var(--color-primary);font-weight:700
}
.gjob-table thead.gjob-table--dark{background:#143C73}
.entry-content tbody tr:nth-child(even),.gjob-table tbody tr:nth-child(even){background:var(--bg-alt)}
/* Wide tables: horizontal scroll fallback */
.wp-block-table{overflow-x:auto}
/* 2-col stacking pattern for .gjob-table[data-stack] on phones (td needs data-label) */
@media (max-width:600px){
  .gjob-table[data-stack] thead{position:absolute;left:-9999px}
  .gjob-table[data-stack] tr{display:block;margin-bottom:14px;border:1px solid var(--border-hairline);
    border-radius:var(--radius-md);overflow:hidden}
  .gjob-table[data-stack] td{display:grid;grid-template-columns:42% 1fr;gap:8px;
    border:none;border-bottom:1px solid var(--bg-alt)}
  .gjob-table[data-stack] td:last-child{border-bottom:0}
  .gjob-table[data-stack] td::before{content:attr(data-label);font-weight:600;color:var(--color-primary)}
}

/* Important Links block (conversion) */
.gjob-links{display:grid;gap:var(--space-2);margin:var(--space-6) 0}
.gjob-links .row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:10px var(--space-4);border:1px solid var(--border-hairline);border-radius:var(--radius-md);background:var(--bg-alt)}
.gjob-links .row .label{font-weight:600;color:var(--text)}

/* =========================================================
   9. FAQ
   ========================================================= */
.gjob-faq details{border:1px solid var(--border-hairline);border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);margin:0 0 var(--space-2);background:var(--bg)}
.gjob-faq summary{font-weight:600;color:var(--color-primary);cursor:pointer}

/* =========================================================
   10. DISCLAIMER BANNER (not an official govt site)
   ========================================================= */
.gjob-disclaimer{background:var(--chip-hot-bg);color:var(--chip-hot-tx);
  border:1px solid #FED7AA;border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);font-size:.9rem;margin:0 0 var(--space-4)}

/* =========================================================
   10b. AUTHOR BOX (E-E-A-T)
   ========================================================= */
.gjob-author{display:flex;gap:var(--space-4);align-items:flex-start;
  background:var(--bg-alt);border:1px solid var(--border-hairline);border-left:4px solid var(--cta);
  border-radius:var(--radius-md);padding:var(--space-4);margin:var(--space-8) 0}
.gjob-author__av img{border-radius:var(--radius-pill);width:84px;height:84px}
.gjob-author__label{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--cta-hover)}
.gjob-author__name{margin:2px 0 6px;font-size:1.25rem}
.gjob-author__bio{margin:0;color:var(--text-muted);font-size:.95rem}
@media (max-width:480px){.gjob-author{flex-direction:column}}

/* =========================================================
   11. SIDEBAR / WIDGETS / FOOTER
   ========================================================= */
.widget-title,.sidebar .widget .widget-title{color:var(--color-primary);font-size:1.125rem;
  border-bottom:2px solid var(--color-primary-tint);padding-bottom:6px;margin-bottom:var(--space-3)}
.site-footer,.site-info{background:var(--color-primary);color:#cdd9ee}
.site-footer a,.site-info a{color:#fff}

/* =========================================================
   12. AD SLOTS (reserve height -> zero CLS, label them)
   ========================================================= */
.gjob-ad{display:block;margin:var(--space-6) auto;text-align:center;background:var(--bg-alt);
  border:1px dashed var(--border);border-radius:var(--radius-md);overflow:hidden}
.gjob-ad::before{content:"Advertisement";display:block;font-size:.7rem;color:var(--text-subtle);padding:4px 0}
.gjob-ad--inline{min-height:280px}     /* 300x250 + label */
.gjob-ad--leaderboard{min-height:110px} /* 728x90 / responsive */

/* =========================================================
   13. UTILITIES
   ========================================================= */
.gjob-band{background:var(--bg-band);border-radius:var(--radius-md);padding:var(--space-4)}
.gjob-muted{color:var(--text-muted)}
.gjob-mt{margin-top:var(--space-6)}
.screen-reader-text{position:absolute!important;left:-9999px}
img{max-width:100%;height:auto}