/* ============================================================================
   MPNEWJOBS.IN — CUSTOM STYLE SHEET
   ============================================================================
   WHERE THIS GOES: Appearance → Customize → Additional CSS
   (or a child-theme style.css / a snippet enqueued after the theme stylesheet)

   WHY THIS FILE EXISTS
   Tailwind (used only in the HTML prototypes) will NOT be loaded on the live
   WordPress site. Everything below is written as plain, dependency-free CSS
   using semantic class names (job-card, section-bar, tile, note-red, etc.)
   so it keeps working no matter how each region is actually built —
   Elementor widget, ACF flexible-content PHP loop, or theme template.

   HOW TO USE
   Keep these exact class names on the matching elements:
     - Elementor widgets → add the class under Advanced → CSS Classes
     - ACF flexible-content PHP loop → hardcode the class in the template,
       e.g. echo '<table class="job-table">...
   ============================================================================ */

:root{
  --brand: #1B4F9C;
  --brand-dark: #123A73;
  --brand-light: #EAF1FC;
  --ink: #1B2033;
  --whatsapp: #25D366;
  --telegram: #0088CC;
  --lastdate: #DC2626;
  --amber: #FBBF24;
  --tile-magenta:#D6247A; --tile-navy:#161B33; --tile-maroon:#7A1319; --tile-orange:#C1591C;
  --tile-purple:#4B1E6B; --tile-red:#C0202B; --tile-teal:#0F4C42; --tile-tan:#6B5B4D;
  --font-display: 'Yantramanav', system-ui, sans-serif;
  --font-body: 'Yantramanav', system-ui, sans-serif;
  --radius-lg: 14px;
  --radius-md: 10px;
  --shadow-card: 0 1px 2px rgba(16,24,64,0.06), 0 6px 18px -8px rgba(16,24,64,0.12);
}

/* Devanagari text tends to need a touch more line-height to avoid clipped matras */
body, .rich-text, .qualification-list, .dates-list, .promo-box__l1{
  line-height: 1.65;
}

/* ---------------------------------------------------------------------------
   NAV
--------------------------------------------------------------------------- */
.nav-link{
  padding: .55rem .9rem;
  border-radius: 8px;
  color: #374151;
  transition: color .15s ease, background-color .15s ease;
}
.nav-link:hover{ color: var(--brand); background: var(--brand-light); }
.nav-link--active{ color: var(--brand); background: var(--brand-light); }

.mobile-nav-link{
  display:block;
  padding: .9rem 1.1rem;
  border-bottom: 1px solid #EEF1F6;
  color:#374151;
}
.mobile-nav-link--active{ color: var(--brand); }

/* ---------------------------------------------------------------------------
   TICKER (marquee)
--------------------------------------------------------------------------- */
.ticker{ position: relative; }
.ticker__track{
  display:flex;
  gap: 3rem;
  white-space: nowrap;
  list-style:none;
  margin:0; padding:0;
  animation: ticker-scroll 26s linear infinite;
}
.ticker__track li{ display:inline-flex; align-items:center; height: 2.25rem; opacity:.92; }
.ticker:hover .ticker__track{ animation-play-state: paused; }
@keyframes ticker-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ---------------------------------------------------------------------------
   HERO
--------------------------------------------------------------------------- */
.hero-highlight{
  display:inline-block;
  margin: 0 .35rem;
  padding: .05em .4em;
  background: var(--amber);
  color: var(--ink);
  border: 2px solid #92400E;
  border-radius: 6px;
  transform: rotate(-1deg);
  max-width: 100%;
}
.chip{
  display:inline-flex; align-items:center;
  padding:.4rem .9rem;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color:#fff;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  transition: background-color .2s ease, transform .2s ease;
}
.chip:hover{ background: rgba(255,255,255,.26); transform: translateY(-1px); }
.chip:active{ transform: translateY(0); }

/* ---------------------------------------------------------------------------
   FEATURED TILES
--------------------------------------------------------------------------- */
.tile{
  --tile-color: var(--brand) !important;
  position: relative;
  overflow: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height: 76px;
  padding: .7rem .9rem;
  border-radius: var(--radius-md);
  background: var(--tile-color) !important;
  color:#fff !important;
  box-shadow: var(--shadow-card);
  transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s cubic-bezier(.22,1,.36,1), filter .28s ease;
}
.tile::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 55%);
  opacity:0;
  transition: opacity .28s ease;
  pointer-events:none;
}
.tile:hover,
.tile:focus-visible{
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -14px rgba(0,0,0,.4);
  filter: brightness(1.05);
}
.tile:hover::after,
.tile:focus-visible::after{ opacity:1; }
.tile:active{ transform: translateY(-1px) scale(.99); transition-duration: .1s; }
.tile:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
.tile__title{ font-family: var(--font-display); font-weight:600; font-size:.78rem; line-height:1.3; }

/* ---------------------------------------------------------------------------
   CTA BUTTONS (WhatsApp / Telegram)
--------------------------------------------------------------------------- */
.btn-cta{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  height: 3.1rem;
  border-radius: var(--radius-md);
  font-family: var(--font-display); font-weight:700; font-size:.95rem;
  color:#fff !important;
  box-shadow: var(--shadow-card);
  transition: filter .15s ease, transform .15s ease;
}
.btn-cta:hover{ filter: brightness(1.06); transform: translateY(-1px); }
.btn-cta--whatsapp{ background: var(--whatsapp) !important; }
.btn-cta--telegram{ background: var(--telegram) !important; }
.btn-cta--whatsapp svg{ animation: pulse-soft 2.6s ease-in-out infinite; }

@keyframes pulse-soft{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.12); }
}

/* ---------------------------------------------------------------------------
   TRUST STRIP
--------------------------------------------------------------------------- */
.trust-item{
  display:flex; align-items:flex-start; gap:.75rem;
  background:#fff; border:1px solid #E7ECF5;
  border-radius: var(--radius-md);
  padding: .9rem 1rem;
}
.trust-item svg{ width:22px; height:22px; color: var(--brand); flex-shrink:0; margin-top:2px; }

/* ---------------------------------------------------------------------------
   COLUMN HEADER ("Latest Updates" / "MP Vacancy" / "Result")
--------------------------------------------------------------------------- */
.col-header{
  display:flex; align-items:center; justify-content:space-between;
  background: var(--brand);
  border-radius: 10px 10px 0 0;
  padding: .8rem 1rem;
}
.col-header h2{
  font-family: var(--font-display); font-weight:800; font-size:1rem; color:#fff !important; margin:0;
}
.col-header__link{
  font-family: var(--font-display); font-weight:600; font-size:.78rem;
  color:#fff !important; background: rgba(255,255,255,.18) !important;
  padding:.3rem .7rem; border-radius: 999px;
  transition: background-color .15s ease;
}
.col-header__link:hover{ background: rgba(255,255,255,.3); }

/* ---------------------------------------------------------------------------
   JOB CARD (used on homepage columns, related posts, sidebar-adjacent lists)
--------------------------------------------------------------------------- */
.job-card{
  display:block;
  background:#fff;
  border:1px solid #E7ECF5;
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-md);
  padding: .85rem 1rem;
  box-shadow: var(--shadow-card);
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1), border-left-color .25s ease;
}
.job-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -14px rgba(16,24,64,.28);
  border-left-color: var(--brand-dark);
}
.job-card__title{
  display:block;
  font-family: var(--font-display); font-weight:600; font-size:.92rem;
  color: var(--ink);
  margin-bottom:.55rem;
  transition: color .15s ease;
}
.job-card__title:hover{ color: var(--brand); }
.job-card__meta{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap;
}

.countdown-badge{
  font-size:.72rem; color: var(--lastdate); font-family: var(--font-body);
}
.countdown-badge strong{ font-weight:700; }
.countdown-badge--urgent{ animation: urgent-pulse 1.6s ease-in-out infinite; }
.countdown-badge--closed{ color:#6B7280; }
.countdown-badge--sm{ font-size:.68rem; }
@keyframes urgent-pulse{
  0%,100%{ opacity:1; } 50%{ opacity:.55; }
}

.badge-closed{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.72rem; font-weight:600; color:#065F46 !important;
  background:#D1FAE5 !important; padding:.2rem .55rem; border-radius:6px;
}

.btn-apply-sm{
  display:inline-flex; align-items:center;
  font-family: var(--font-display); font-weight:700; font-size:.76rem;
  color:#fff !important; background: var(--brand) !important;
  padding:.35rem .8rem; border-radius:6px;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-apply-sm:hover{
  background: var(--brand-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -6px rgba(27,79,156,.5);
}
.btn-apply-sm:active{ transform: translateY(0); box-shadow:none; }

/* ---------------------------------------------------------------------------
   SOCIAL RAIL (sticky, left edge)
--------------------------------------------------------------------------- */
.social-rail{
  position: fixed;
  left: 0;
  top: 45%;
  transform: translateY(-50%);
  z-index: 30;
  display:flex; flex-direction:column;
  border-radius: 0 10px 10px 0;
  overflow:hidden;
  box-shadow: var(--shadow-card);
  opacity:0;
  pointer-events:none;
  transition: opacity .25s ease;
}
.social-rail.is-visible{ opacity:1; pointer-events:auto; }
.social-rail__item{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  background: var(--c, var(--brand));
  color:#fff;
  border:none; cursor:pointer;
}
.social-rail__item svg{ width:17px; height:17px; }
.social-rail__item:hover{ filter:brightness(1.08); }

@media (max-width: 1023px){
  .social-rail{ display:none; } /* keep mobile UI uncluttered; CTA buttons already present */
}

/* ---------------------------------------------------------------------------
   FOOTER
--------------------------------------------------------------------------- */
.footer-h{ font-family: var(--font-display); font-weight:700; color:#fff; font-size:.95rem; margin-bottom:1rem; }
.footer-link{ color:#94A3B8; transition: color .15s ease; }
.footer-link:hover{ color:#fff; }
.footer-social{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; background: rgba(255,255,255,.08); color:#fff;
  transition: background-color .15s ease;
}
.footer-social:hover{ background: var(--brand); }

/* ---------------------------------------------------------------------------
   BACK TO TOP
--------------------------------------------------------------------------- */
.back-to-top{
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 30;
  width: 46px; height:46px;
  border-radius:999px;
  background: var(--brand);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 24px -8px rgba(16,24,64,.4);
  border:none; cursor:pointer;
  opacity:0; visibility:hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background: var(--brand-dark); }
.back-to-top svg{ width:20px; height:20px; }

/* =============================================================================
   SINGLE POST / ACF FLEXIBLE-CONTENT COMPONENTS
   (all of these render from the PHP flexible-content loop described in post.html)
============================================================================= */

.badge-category{
  display:inline-flex; align-items:center;
  font-family: var(--font-display); font-weight:600; font-size:.72rem;
  color: var(--brand); background: var(--brand-light);
  padding:.28rem .7rem; border-radius:999px;
  transition: background-color .15s ease;
}
.badge-category:hover{ background:#DCE8FB; }

/* colour variants — used on homepage "More Job Updates" so post type is scannable at a glance */
.badge-category--amber{ color:#92400E; background:#FEF3C7; }
.badge-category--amber:hover{ background:#FDE8A6; }
.badge-category--purple{ color:#4B1E6B; background:#F1E7FB; }
.badge-category--purple:hover{ background:#E6D5F7; }
.badge-category--green{ color:#065F46; background:#D1FAE5; }
.badge-category--green:hover{ background:#B9F3D4; }
.badge-category--pink{ color:#9D174D; background:#FCE7F3; }
.badge-category--pink:hover{ background:#FBCFE8; }
.badge-category--teal{ color:#0F4C42; background:#DFF5F0; }
.badge-category--teal:hover{ background:#C7EDE2; }

.follow-icon{
  width:30px; height:30px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:#F1F5F9; color:#475569;
  transition: background-color .15s ease, color .15s ease;
}
.follow-icon svg{ width:15px; height:15px; }
.follow-icon:hover{ background: var(--brand); color:#fff; }

.promo-box{
  border: 1.5px dashed var(--brand);
  border-radius: var(--radius-md);
  background: var(--brand-light);
  padding: 1rem 1.1rem;
  text-align:center;
}
.promo-box__l1{ color:#B3175A; font-weight:700; margin:0 0 .2rem; }
.promo-box__l2{ color:#166534; font-weight:600; font-size:.9rem; margin:0 0 .35rem; }
.promo-box__link{ color: var(--brand); font-weight:700; font-size:.85rem; text-decoration: underline; }

.section-bar{
  display:flex; align-items:center; gap:.55rem;
  background: linear-gradient(90deg, var(--brand), var(--brand-dark));
  color:#fff;
  font-family: var(--font-display); font-weight:700; font-size:.95rem;
  padding: .75rem 1.1rem;
  border-radius: 8px;
  margin: 0 0 .85rem;
}
.section-bar--plain{ padding-left: 1.1rem; }
.section-bar__icon{ width:19px; height:19px; flex-shrink:0; opacity:.9; }

.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling: touch; }
.table-title{ font-family: var(--font-display); font-weight:700; color: var(--brand); text-align:center; margin: 0 0 .6rem; font-size:.92rem; }

.job-table{
  width:100%;
  border-collapse: collapse;
  background:#fff;
  font-size:.87rem;
  min-width: 420px;
}
.job-table th, .job-table td{
  border: 1px solid #E2E8F0;
  padding: .6rem .75rem;
  text-align:center;
}
.job-table th{
  background: var(--brand-light);
  color: var(--brand-dark);
  font-family: var(--font-display); font-weight:700; font-size:.78rem;
}
.job-table tbody tr:nth-child(even){ background:#FAFBFE; }
.job-table__total td{ font-weight:800; background: #FEF3C7; }
.job-table--links td:first-child{ text-align:left; font-weight:600; background: var(--brand-light); width:55%; }
.link-cell{ color: var(--brand); font-weight:700; text-decoration: underline; }
.align-middle{ vertical-align: middle; }

.qualification-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.qualification-list li{
  position:relative; padding-left:1.4rem; font-size:.9rem; color:#374151;
}
.qualification-list li::before{
  content:''; position:absolute; left:0; top:.5em;
  width:8px; height:8px; border-radius:999px; background: var(--brand);
}

.dates-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; border:1px solid #E2E8F0; border-radius:8px; overflow:hidden; }
.dates-list li{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.65rem .9rem; font-size:.87rem;
}
.dates-list li:nth-child(even){ background:#FAFBFE; }
.dates-list li span{ color:#475569; }
.dates-list li strong{ color: var(--ink); font-family: var(--font-display); white-space:nowrap; }
.text-lastdate{ color: var(--lastdate) !important; }

.note-red{
  margin-top:.7rem;
  font-size:.85rem;
  color:#991B1B;
  background:#FEF2F2;
  border-left:3px solid var(--lastdate);
  padding:.55rem .8rem;
  border-radius:0 6px 6px 0;
}

.rich-text{ font-size:.92rem; color:#374151; display:flex; flex-direction:column; gap:.5rem; }
.rich-text strong{ color: var(--ink); }

/* ---------------------------------------------------------------------------
   AUTHOR BOX
--------------------------------------------------------------------------- */
.author-box{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:#fff; border:1px solid #E7ECF5; border-radius: var(--radius-lg);
  padding:1.75rem 1.25rem; margin-top:2rem;
  box-shadow: var(--shadow-card);
}
.author-box__photo{ width:88px; height:88px; border-radius:999px; object-fit:cover; border:3px solid #EAF1FC; }
.author-box__name{ display:block; margin-top:.8rem; font-family: var(--font-display); font-weight:700; color: var(--brand); font-size:1.05rem; }
.author-box__social{ display:flex; justify-content:center; gap:.6rem; margin-top:.7rem; }
.author-box__bio{ max-width:44rem; font-size:.85rem; color:#475569; margin:1rem auto 0; line-height:1.65; }

@media (max-width: 639px){
  .author-box{ flex-direction:column; align-items:flex-start; }
}

/* ---------------------------------------------------------------------------
   SIDEBAR WIDGET ("Latest Updates")
--------------------------------------------------------------------------- */
.sidebar-widget{
  background:#fff; border:1px solid #E7ECF5; border-radius: var(--radius-lg);
  overflow:hidden; box-shadow: var(--shadow-card);
}
.sidebar-widget__title{
  background: var(--brand); color:#fff;
  font-family: var(--font-display); font-weight:800; font-size:.9rem;
  padding:.85rem 1.1rem; margin:0;
}
.sidebar-widget__list{ list-style:none; margin:0; padding:.4rem; display:flex; flex-direction:column; gap:.3rem; }
.sidebar-post{
  display:block; padding:.65rem .75rem; border-radius:8px;
}
.sidebar-post a{
  display:block; font-size:.83rem; font-weight:600; color: var(--ink); margin-bottom:.35rem;
}
.sidebar-post a:hover{ color: var(--brand); }
.sidebar-post.is-current{
  background: var(--brand-light);
  border-left: 3px solid var(--brand);
}
.sidebar-post.is-current a{ color: var(--brand); }

/* ---------------------------------------------------------------------------
   ACCESSIBILITY / MOTION / PRINT
--------------------------------------------------------------------------- */
:focus-visible{ outline: 3px solid #93C5FD; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  .ticker__track, .btn-cta--whatsapp svg, .countdown-badge--urgent{ animation: none !important; }
  *{ transition-duration: 0.01ms !important; }
}

@media print{
  header, footer, .social-rail, .back-to-top, #mobile-menu,
  .sidebar-widget, .btn-cta, .promo-box, .col-header__link,
  aside.lg\:col-span-4 { display:none !important; }
  body{ background:#fff; }
  .job-table, .job-table th, .job-table td{ border-color:#000; }
  .section-bar{ background:#eee !important; color:#000 !important; -webkit-print-color-adjust: exact; }
  a[href]::after{ content: " (" attr(href) ")"; font-size: .75em; color:#555; }
}

/* =============================================================================
   ELEMENTOR-CONVERSION ADDITIONS
   ============================================================================
   Everything above this line is unchanged from the original stylesheet.
   The classes below were added ONLY because a handful of elements in the
   original HTML had no custom-style.css class at all — they were styled
   purely with Tailwind utility classes (bg-brand, rounded-lg, max-w-[1280px],
   text-sm, etc.), which don't exist in this file and won't do anything in
   WordPress. Since Elementor widgets can't carry inline/utility styling and
   the brief for this conversion was "zero CSS work beyond this stylesheet,"
   these small classes recreate that missing styling natively. Nothing here
   changes how any existing class behaves.
============================================================================= */

/* Header/footer logo lockup (was: bare Tailwind utilities on <span> tags) */
.logo-badge{
  width:2.5rem; height:2.5rem; border-radius:.75rem;
  background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:1.125rem;
  flex-shrink:0;
}
.logo-badge--footer{ width:2.25rem; height:2.25rem; border-radius:.5rem; font-size:1rem; }
.logo-wordmark{ font-family:var(--font-display); font-weight:800; font-size:1.25rem; color:var(--ink); line-height:1.2; }
.logo-wordmark .accent{ color:var(--brand); }
.logo-wordmark--footer{ color:#fff; }
.logo-wordmark--footer .accent{ color:#FBBF24; }
.logo-tagline{ font-size:.6875rem; color:#64748B; margin-top:-.125rem; }

/* Hero section text (was: bare Tailwind utilities) */
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.375rem;
  border-radius:999px; background:rgba(255,255,255,.15); color:#fff;
  font-family:var(--font-display); font-weight:600; font-size:.75rem;
  padding:.375rem .75rem;
}
.hero-subtitle{ color:rgba(234,241,252,.9); font-size:.875rem; max-width:36rem; margin:.75rem auto 0; text-align:center; }
.hero-search-input{
  width:100%; height:3rem; border-radius:.75rem; border:none;
  padding-left:2.75rem; padding-right:1rem; font-size:.875rem;
  box-shadow:var(--shadow-card);
}
.hero-search-btn{
  height:3rem; padding:0 1.5rem; border-radius:.75rem; border:none; cursor:pointer;
  background:#FBBF24; color:var(--ink);
  font-family:var(--font-display); font-weight:700; font-size:.875rem;
  transition:background-color .15s ease;
}
.hero-search-btn:hover{ background:#FCD34D; }

/* Trust strip title/description (was: bare Tailwind utilities on <p> tags) */
.trust-item__title{ font-family:var(--font-display); font-weight:700; font-size:.875rem; margin:0 0 .15rem; }
.trust-item__desc{ font-size:.75rem; color:#64748B; margin:0; }

/* Generic content-width wrapper (was: Tailwind's max-w-[1280px] mx-auto px-3 sm:px-6, repeated everywhere) */
.section-container{ max-width:1280px; margin-left:auto; margin-right:auto; padding-left:.75rem; padding-right:.75rem; }

/* Single-post breadcrumb + H1 + meta row (was: bare Tailwind utilities) */
.breadcrumb{ font-size:.8125rem; color:#64748B; margin-bottom:.75rem; }
.breadcrumb a:hover{ color:var(--brand); }
.breadcrumb__current{ color:#334155; }
.post-h1{ font-family:var(--font-display); font-weight:800; font-size:1.75rem; line-height:1.3; color:var(--ink); margin:0; }
.post-meta{ display:flex; align-items:center; gap:.625rem; margin-top:1rem; padding-bottom:1rem; border-bottom:1px solid #E2E8F0; }
.post-meta img{ width:2.5rem; height:2.5rem; border-radius:999px; object-fit:cover; }
.post-meta__name{ font-family:var(--font-display); font-weight:600; color:var(--ink); }
.post-meta__date{ font-size:.75rem; color:#64748B; }

/* Vacancy-table Agency / भर्ती-का-प्रकार line (was: bare Tailwind utilities) */
.agency-line{ font-size:.875rem; margin:0; }
.agency-line strong{ font-family:var(--font-display); font-weight:600; color:var(--brand); }

/* Footer bottom copyright bar (was: bare Tailwind utilities) */
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); }
.footer-bottom p{ max-width:1280px; margin:0 auto; padding:1rem .75rem; font-size:.75rem; color:#64748B; }

/* 8 tile background-color modifiers — Elementor widgets can't emit the inline
   style="--tile-color:#hex" the original <a class="tile" style="..."> used,
   so each tile now takes one of these instead of an inline custom property. */
.tile--magenta{ --tile-color: var(--tile-magenta); }
.tile--navy{ --tile-color: var(--tile-navy); }
.tile--maroon{ --tile-color: var(--tile-maroon); }
.tile--orange{ --tile-color: var(--tile-orange); }
.tile--purple{ --tile-color: var(--tile-purple); }
.tile--red{ --tile-color: var(--tile-red); }
.tile--teal{ --tile-color: var(--tile-teal); }
.tile--tan{ --tile-color: var(--tile-tan); }

/* Same issue for the 5 social-rail icon colors (was: inline style="--c:#hex") */
.social-rail__item--facebook{ --c:#1877F2; }
.social-rail__item--x{ --c:#0F1419; }
.social-rail__item--whatsapp{ --c:#25D366; }
.social-rail__item--telegram{ --c:#0088CC; }
.social-rail__item--youtube{ --c:#FF0000; }
.social-rail__item--share{ --c:#1B4F9C; }

/* =============================================================================
   STANDALONE THEME LAYOUT ADDITIONS
   ============================================================================
   Everything above this line is the original design-system stylesheet,
   unchanged. Everything below is layout/wrapper CSS for the plain-PHP theme
   templates (header.php, front-page.php, single.php, category.php) — no
   page-builder classes anywhere, just semantic wrapper classes + CSS Grid.
============================================================================= */

.section-container{ max-width:1280px; margin-left:auto; margin-right:auto; padding-left:.75rem; padding-right:.75rem; }

/* ---- Ticker bar ---- */
.ticker-bar{ background:#0F1B33; color:#fff; font-size:.8125rem; display:flex; align-items:center; gap:.75rem; min-height:2.25rem; padding:0 .75rem; }
.ticker__bell-wrap{ display:flex; align-items:center; gap:.4rem; flex-shrink:0; }
.ticker__bell{ color:#FCD34D; font-size:.9rem; }
.ticker__label{ font-family:var(--font-display); font-weight:600; color:#FCD34D; white-space:nowrap; }

/* ---- Header ---- */
.site-header-bar{ position:sticky; top:0; z-index:40; background:rgba(255,255,255,.97); border-bottom:1px solid #E2E8F0; transition:box-shadow .2s ease; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:1rem; }
.logo-lockup-link{ display:flex; align-items:center; gap:.65rem; text-decoration:none; }
.logo-badge{ width:2.5rem; height:2.5rem; border-radius:.75rem; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:1.125rem; flex-shrink:0; }
.logo-badge--footer{ width:2.25rem; height:2.25rem; border-radius:.5rem; font-size:1rem; }
.logo-wordmark{ font-family:var(--font-display); font-weight:800; font-size:1.25rem; color:var(--ink); line-height:1.2; }
.logo-wordmark .accent{ color:var(--brand); }
.logo-wordmark--footer{ color:#fff; }
.logo-wordmark--footer .accent{ color:#FBBF24; }
.logo-tagline{ display:block; font-size:.6875rem; color:#64748B; margin-top:-.125rem; }

.site-nav__list{ display:flex; align-items:center; gap:.25rem; list-style:none; margin:0; padding:0; font-family:var(--font-display); font-weight:600; font-size:.9375rem; }
.site-nav__list li{ margin:0; }
.site-nav__list a{ display:block; padding:.55rem .9rem; border-radius:8px; color:#374151; text-decoration:none; }
.site-nav__list a:hover, .site-nav__list .current-menu-item > a{ color:var(--brand); background:var(--brand-light); }

.header-mobile-icon{ width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; color:#374151; }
.header-mobile-icon:hover{ background:#F1F5F9; }

.mobile-menu-panel{ background:#fff; border-top:1px solid #E2E8F0; }
.mobile-nav-link{ list-style:none; margin:0; padding:0; }
.mobile-nav-link li{ border-bottom:1px solid #EEF1F6; }
.mobile-nav-link a{ display:block; padding:.9rem 1.1rem; color:#374151; font-family:var(--font-display); font-weight:600; text-decoration:none; }

.desktop-only{ display:flex; }
.mobile-only{ display:none; }
@media (max-width: 767px){
  .desktop-only{ display:none !important; }
  .mobile-only{ display:flex !important; }
}

/* ---- Hero ---- */
.hero-section{ position:relative; overflow:hidden; background:var(--brand); padding:3rem 1rem 3.5rem; text-align:center; }
.hero-eyebrow{ display:inline-flex; align-items:center; gap:.375rem; border-radius:999px; background:rgba(255,255,255,.15); color:#fff; font-family:var(--font-display); font-weight:600; font-size:.75rem; padding:.375rem .75rem; }
.hero-h1{ font-family:var(--font-display); font-weight:800; color:#fff; font-size:28px; line-height:1.25; max-width:48rem; margin:1rem auto 0; }
@media (min-width:640px){ .hero-h1{ font-size:40px; } }
@media (min-width:1024px){ .hero-h1{ font-size:46px; } }
.hero-subtitle{ color:rgba(234,241,252,.9); font-size:.875rem; max-width:36rem; margin:.75rem auto 0; }
.hero-search-form{ display:flex; align-items:stretch; gap:.5rem; max-width:36rem; margin:2rem auto 0; }
.hero-search-input{ flex:1; height:3rem; border-radius:.75rem; border:none; padding-left:1rem; padding-right:1rem; font-size:.875rem; box-shadow:var(--shadow-card); }
.hero-search-btn{ height:3rem; padding:0 1.5rem; border-radius:.75rem; border:none; cursor:pointer; background:#FBBF24; color:var(--ink); font-family:var(--font-display); font-weight:700; font-size:.875rem; }
.hero-search-btn:hover{ background:#FCD34D; }
.hero-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-top:1rem; }

/* ---- Featured tiles ---- */
.tiles-panel{ position:relative; margin-top:-2rem; }
.tiles-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:.65rem; background:#fff; border-radius:16px; box-shadow:var(--shadow-card); padding:.75rem; }
@media (min-width:768px){ .tiles-grid{ grid-template-columns:repeat(4, 1fr); } }
.tiles-grid .tile{ width:100%; }

/* ---- CTA + trust strip ---- */
.cta-trust-section{ margin-top:1.5rem; }
.btn-cta-row{ display:grid; grid-template-columns:1fr; gap:.75rem; }
@media (min-width:640px){ .btn-cta-row{ grid-template-columns:1fr 1fr; } }
.trust-strip{ display:grid; grid-template-columns:1fr; gap:.75rem; margin-top:1.5rem; }
@media (min-width:640px){ .trust-strip{ grid-template-columns:repeat(3, 1fr); } }

/* ---- Three-column listing ---- */
.listing-section{ margin-top:2.5rem; }
.listing-grid{ display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media (min-width:768px){ .listing-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1024px){ .listing-grid{ grid-template-columns:repeat(3, 1fr); } }
.listing-col .job-card{ margin-bottom:.75rem; }
.listing-col .job-card:last-child{ margin-bottom:0; }
.listing-empty{ color:#94A3B8; font-size:.875rem; padding:1rem 0; }

/* ---- More Job Updates grid ---- */
.more-updates-section{ margin-top:2.5rem; }
.more-updates-grid{ display:grid; grid-template-columns:1fr; gap:.75rem; margin-top:.75rem; }
@media (min-width:640px){ .more-updates-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1024px){ .more-updates-grid{ grid-template-columns:repeat(3, 1fr); } }

/* ---- Single post: top, layout, sidebar ---- */
.post-search-strip{ background:var(--brand); padding:1rem; }
.post-search-form{ display:flex; gap:.5rem; max-width:28rem; margin:0 auto; }
@media (min-width:768px){ .post-search-form{ margin:0; } }
.post-search-input{ flex:1; height:2.75rem; border-radius:8px; border:none; padding:0 .9rem; font-size:.875rem; }
.post-search-btn{ height:2.75rem; padding:0 1.25rem; border-radius:8px; border:none; cursor:pointer; background:#FBBF24; color:var(--ink); font-family:var(--font-display); font-weight:700; font-size:.875rem; }
.post-search-btn:hover{ background:#FCD34D; }

.post-top{ padding-top:1.5rem; }
.badge-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0; }
.post-layout{ display:grid; grid-template-columns:1fr; gap:2rem; padding-top:1rem; padding-bottom:2rem; align-items:start; }
@media (min-width:1024px){ .post-layout{ grid-template-columns:2fr 1fr; } }
.post-main-col > *{ margin-bottom:1.25rem; }
.post-sidebar{ display:flex; flex-direction:column; gap:1.25rem; position:sticky; top:6rem; }
.agency-lines{ display:flex; flex-wrap:wrap; gap:0 1.5rem; margin-top:.5rem; }

.related-posts-section{ margin-top:2rem; }
.related-posts-grid{ display:grid; grid-template-columns:1fr; gap:.75rem; margin-top:.75rem; }
@media (min-width:640px){ .related-posts-grid{ grid-template-columns:repeat(2, 1fr); } }

/* ---- Footer ---- */
.site-footer{ margin-top:3.5rem; background:#0F1B33; color:#CBD5E1; padding:3rem 1rem; }
.site-footer__inner{ display:grid; grid-template-columns:1fr; gap:2rem; }
@media (min-width:640px){ .site-footer__inner{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1024px){ .site-footer__inner{ grid-template-columns:repeat(4, 1fr); } }
.footer-col--about{ max-width:20rem; }
.footer-bio{ margin-top:1rem; font-size:.875rem; line-height:1.65; color:#94A3B8; }
.footer-link-list{ list-style:none; margin:0; padding:0; }
.footer-link-list li{ margin-bottom:.6rem; }
.footer-link-list a{ display:flex; align-items:center; gap:.4rem; color:#94A3B8; font-size:.875rem; text-decoration:none; }
.footer-link-list a::before{ content:'\f105'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:.6rem; color:#475569; }
.footer-link-list a:hover{ color:#fff; }
.footer-social-icons{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
.footer-social{ width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); color:#fff; text-decoration:none; }
.footer-social:hover{ background:var(--brand); }
.footer-email{ display:flex; align-items:center; gap:.5rem; margin-top:1.25rem; font-size:.875rem; color:#94A3B8; text-decoration:none; }
.footer-email:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); background:#0F1B33; }
.footer-bottom p{ max-width:1280px; margin:0 auto; padding:1rem .75rem; font-size:.75rem; color:#64748B; text-align:center; }
@media (min-width:640px){ .footer-bottom p{ text-align:left; } }

/* ---- Category archive / search / static page ---- */
.archive-top{ margin-bottom:.5rem; }
.archive-h1{ font-family:var(--font-display); font-weight:800; font-size:1.75rem; color:var(--ink); margin:0; }
.archive-desc{ margin-top:.5rem; font-size:.9rem; color:#64748B; }
.archive-list .job-card{ margin-bottom:.75rem; }
.archive-list .job-card:last-child{ margin-bottom:0; }
.pagination{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-top:1.5rem; font-family:var(--font-display); font-weight:600; font-size:.875rem; }
.pagination a, .pagination span{ padding:.5rem .85rem; border-radius:8px; color:var(--brand); background:var(--brand-light); text-decoration:none; }
.pagination .current{ background:var(--brand); color:#fff; }
.page-content{ padding-bottom:3rem; }

/* ---- Small shared utility text styles ---- */
.text-note-sm{ font-size:.75rem; color:#64748B; margin-top:.5rem; }
.apply-note{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; margin-top:.7rem; }
.apply-note-text{ font-size:.8125rem; color:#64748B; margin:0; }
.badge-wrap{ display:block; margin-bottom:.5rem; }

/* ---- Apply Now button ---- */
.apply-now-btn{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--brand); color:#fff; text-decoration:none;
  font-family:var(--font-display); font-weight:800; font-size:1rem;
  padding:1rem 1.2rem; border-radius:10px;
  border:2px dashed rgba(255,255,255,.55);
  box-shadow:var(--shadow-card);
}
.apply-now-btn:hover{ background:var(--brand-dark); }

/* ---- Countdown "days left" pill (server-rendered by PHP now, no JS calc needed) ---- */
.days-left-pill{ margin-left:.4rem; opacity:.85; }

/* ---- Comments (native WP comment form) ---- */
.comments-area{ margin-top:2.5rem; }
.comment-list{ list-style:none; margin:0; padding:0; }
.comment-list li{ background:#fff; border:1px solid #E7ECF5; border-radius:10px; padding:1rem; margin-bottom:.75rem; }
.comment-form input, .comment-form textarea{ width:100%; border-radius:8px; border:1px solid #E2E8F0; padding:.6rem .8rem; font-size:.875rem; margin-bottom:.75rem; }
.comment-form .submit input{ width:auto; background:var(--brand); color:#fff; border:none; padding:.7rem 1.4rem; cursor:pointer; font-family:var(--font-display); font-weight:700; }

/* ---- Toast (copy-link feedback) ---- */
.toast{
  position:fixed; left:50%; bottom:1.4rem; transform:translate(-50%, 12px);
  background:var(--ink); color:#fff; font-family:var(--font-display); font-weight:600; font-size:.85rem;
  padding:.65rem 1.1rem; border-radius:999px; box-shadow:0 10px 24px -8px rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:60;
}
.toast.is-visible{ opacity:1; transform:translate(-50%, 0); }

.copy-link-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-display); font-weight:600; font-size:.78rem;
  color:var(--brand); background:var(--brand-light);
  padding:.4rem .8rem; border-radius:999px; border:none; cursor:pointer;
}
.copy-link-btn:hover{ background:#DCE8FB; }
.copy-link-btn.is-copied{ background:#D1FAE5; color:#065F46; }

/* ---- "blue" fallback modifiers (default color name used when no specific
   tile/badge color is chosen in the post editor) ---- */
.tile--blue{ --tile-color: var(--brand); }
.badge-category--blue{ color:var(--brand); background:var(--brand-light); }

/* ---- A few remaining wrapper classes ---- */
.author-box__body{ flex:1; min-width:0; }
.footer-col{ min-width:0; }
.post-meta__photo{ width:40px; height:40px; border-radius:999px; object-fit:cover; }
.site-nav{ display:flex; }
.job-post-details{ margin-top:1.25rem; }
.job-post-details > *{ margin-bottom:1.25rem; }