/*
Theme Name: RozgarExpress.in
Theme URI: https://rozgarexpress.in
Author: Pankaj Sharma
Description: Lightweight Hindi/Hinglish Jobs & News theme with dark mode, responsive grid, and clean typography.
Version: 1.3.3
Text Domain: rozgarexpress
*/

/* ===================== */
/* Vars + Base           */
/* ===================== */
:root{
  --bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --brand:#2563eb;
  --accent:#f97316;

  /* Glassmorphism Vars - Light */
  --card-bg: rgba(248, 250, 252, 0.75); /* --card color with transparency */
  --header-bg: rgba(255, 255, 255, 0.7);
  --border-color: rgba(229, 231, 235, 0.9); /* --border color */

  /* UI sizes */
  --radius:16px;
  --btn-h:32px;
  --btn-px:10px;
  --btn-gap:8px;
}
html[data-theme="dark"]{
  --bg:#0b1220;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --brand:#60a5fa;
  --accent:#fb923c;
  
  /* Glassmorphism Vars - Dark */
  --card-bg: rgba(15, 23, 42, 0.6); /* --card dark color with transparency */
  --header-bg: rgba(11, 18, 32, 0.7);
  --border-color: rgba(31, 41, 55, 0.9); /* --border dark color */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Inter","Noto Sans Devanagari",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.65;
}
body.no-scroll { overflow: hidden; }
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:100%; margin:0 auto; padding:0 32px}

/* Typography */
h1,h2,h3,h4,h5,h6 { font-family: 'Orbitron', sans-serif; }


/* ===================== */
/* Header + Nav          */
/* ===================== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--header-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom:1px solid var(--border-color);
}
.site-header .topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height: 80px; /* Force height for the header bar */
}
.site-header .branding{display:flex;align-items:center;gap:10px;}
.custom-logo{
  max-height: 70px; /* Significantly increased logo size */
  width:auto;
  height:auto;
  padding: 0; /* Removed padding from image */
}
@media (min-width:980px){
  .custom-logo{
    max-height:85px; /* Increased desktop logo size */
  }
}
.site-header .branding .tag{margin:0;font-size:.8rem;line-height:1.15;color:var(--muted); display: none;}
@media (min-width:640px){ .site-header .branding .tag { display: block; } }

.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px;}

/* Pill-style header menu (Desktop) */
.nav-header{padding:0;border-top:0;}
.nav-header .menu{
  display:flex;align-items:center;gap:var(--btn-gap);
  list-style:none;margin:0;padding:0;
}
.nav-header .menu > li {
  position: relative; /* This is the FIX for submenu positioning */
}
.nav-header .menu > li > a{
  display:inline-flex;align-items:center;gap:6px;
  height:var(--btn-h); line-height:var(--btn-h);
  padding:0 var(--btn-px);
  border:1px solid var(--border-color);
  background:var(--card-bg);
  color:var(--text);
  text-decoration:none;
  border-radius:999px;
  font-size:.9rem;
  transition:all .2s ease;
}
.nav-header .menu > li > a:hover{
  border-color:color-mix(in srgb, var(--brand) 25%, var(--border-color));
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  transform: translateY(-1px);
}
.nav-header .menu > .current-menu-item > a,
.nav-header .menu > .current-menu-ancestor > a{
  background:var(--brand);color:#fff;border-color:var(--brand);
  box-shadow:0 2px 8px rgba(37,99,235,.25);
}
.nav-header .menu > li.menu-item-has-children > a::after{
  content:"▾";font-size:.78em;opacity:.9;line-height:1;margin-left:2px;
}
.nav-header .menu .sub-menu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:200px;
  display:none;list-style:none;margin:0;padding:6px;
  background:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  z-index:1000;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.nav-header .menu li:hover > .sub-menu,
.nav-header .menu li:focus-within > .sub-menu{display:block;}
.nav-header .menu .sub-menu li a{
  display:block;padding:8px 10px;border-radius:8px;color:var(--text);text-decoration:none;font-size:.92rem;
}
.nav-header .menu .sub-menu li a:hover{background:var(--header-bg);}

/* Mobile Menu & Toggle */
.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px;
  z-index: 1001;
  width: var(--btn-h);
  height: var(--btn-h);
}
.mobile-menu-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--text);
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.mobile-menu-toggle .icon-bar + .icon-bar { margin-top: 5px; }
.mobile-menu-toggle.is-active .icon-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-toggle.is-active .icon-bar:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.is-active .icon-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  z-index: 999;
  transform: translateX(100%);
  transition: transform 0.35s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-nav-panel.is-active { transform: translateX(0); }
.mobile-nav-panel .menu-mobile {
  list-style: none; padding: 0; margin: 0; text-align: center;
}
.mobile-nav-panel .menu-mobile a {
  display: block;
  padding: 15px;
  font-size: 1.5rem;
  color: var(--text);
  text-decoration: none;
  font-family: 'Orbitron', sans-serif;
}

@media (max-width: 980px) {
  .nav-header { display: none; }
  .mobile-menu-toggle { display: block; }
  .container { padding: 0 16px; } /* Less padding on mobile */
}


/* Dark-mode toggle */
#themeToggle{
  border:1px solid var(--border-color);background:var(--card-bg);color:var(--text);
  height:var(--btn-h);padding:0 10px;border-radius:999px;cursor:pointer;
  transition: all .2s ease;
}
#themeToggle:hover { transform: scale(1.05); }

/* ===================== */
/* Layout & Hero         */
/* ===================== */
.layout{display:grid;grid-template-columns:1fr;gap:24px;margin-top:20px}
@media (min-width:980px){.layout{grid-template-columns:1fr 320px}}

/* --- HERO SECTION UPDATED --- */
.hero-section {
  position: relative;
  text-align: center;
  padding: 80px 20px;
  margin-bottom: 20px;
  border-radius: var(--radius);
  color: #ffffff;
  background-image: url('assets/images/hero-bg.jpg');
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}
.hero-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(11, 18, 32, 0.6); /* Dark overlay for text readability */
  z-index: 1;
}
.hero-section .hero-content {
  position: relative;
  z-index: 2; /* Places content above the overlay */
}
.hero-section h1 {
  font-size: 2.5rem;
  margin: 0;
  color: #ffffff;
}
.hero-section .meta {
  color: rgba(255, 255, 255, 0.85);
}
@media(min-width: 640px) {
  .hero-section h1 { font-size: 3.5rem; }
  .hero-section { padding: 120px 20px; }
}


/* ===================== */
/* Cards grid            */
/* ===================== */
.posts-grid{display:grid;gap:18px;grid-template-columns:repeat(1,minmax(0,1fr))}
@media (min-width:640px){.posts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:980px){.posts-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1400px){.posts-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

.card{
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
html[data-theme="dark"] .card:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
.card img{width:100%;height:180px;object-fit:cover;display:block}
.card-body{padding:14px;display:flex;flex-direction:column;gap:10px}
.card .meta{font-size:.78rem;color:var(--muted)}
.card h2,.card h3{margin:0;font-size:1.05rem;line-height:1.35}
.tagpill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.7rem;color:#fff;background:var(--accent)}

/* ===================== */
/* Article               */
/* ===================== */
.article{
  background:var(--card-bg);border:1px solid var(--border-color);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius:var(--radius);padding:20px;
}
.article h1{margin:0 0 6px;font-size:1.8rem}
.article .meta{color:var(--muted);font-size:.85rem;margin-bottom:14px}
.article img{width:100%;height:auto;border-radius:12px}

/* ===================== */
/* Sidebar               */
/* ===================== */
.widget{
  background:var(--card-bg);border:1px solid var(--border-color);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius:var(--radius);padding:14px;margin-bottom:18px;
}
.widget-title{margin:0 0 10px;font-size:1rem}

/* ===================== */
/* Footer                */
/* ===================== */
.site-footer{border-top:1px solid var(--border-color);margin-top:28px}
.site-footer .inner{padding:18px 0;color:var(--muted);font-size:.9rem;text-align:center}
.site-footer nav .menu{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
  list-style:none;margin:0 0 10px;padding:0;
}
.site-footer nav .menu a{text-decoration:none;color:var(--brand);}
.site-footer nav .menu a:hover{text-decoration:underline;}

/* ===================== */
/* Forms                 */
/* ===================== */
input[type="search"]{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border-color);
  background:var(--bg);color:var(--text);
}
button,input[type="submit"]{
  background:var(--brand);color:#fff;border:none;padding:10px 14px;border-radius:10px;cursor:pointer;
}
button:hover,input[type="submit"]{opacity:.9}

/* ===================== */
/* Pagination            */
/* ===================== */
.pagination{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.pagination a,.pagination span{
  padding:6px 10px;border:1px solid var(--border-color);border-radius:8px;background:var(--header-bg);
}
.pagination .current{background:var(--brand);color:#fff;border-color:var(--brand)}