/*
Theme Name: JobsWorld
Theme URI: https://jobsworldapp.com
Author: A3 Digital Services
Author URI: https://a3digitalservices.com
Description: A recruitment and manpower platform theme for JobsWorld, built for Indian & overseas (Gulf) job listings, CV submissions and a WordPress-managed vacancy poster slider. Converted and redesigned from the JobsWorld static frontend package.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jobsworld
Tags: custom-menu, featured-images, full-width-template, translation-ready
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root{
  /* Palette pulled directly from the JobsWorld logo (blue swirl, orange &
     green leaf, teal backdrop) so the site reads as one consistent brand. */
  --navy-900:#0a2440;
  --navy-800:#0f2f57;
  --navy-700:#153c6e;
  --navy-600:#1449a8;
  --teal-500:#1c94a4;
  --teal-400:#33acbd;
  --amber-500:#f79b05;
  --amber-400:#fca70a;
  --leaf-green:#2cb831;
  --ink:#101828;
  --body:#3f4b5e;
  --muted:#6b7688;
  --line:#e6ebf2;
  --surface:#ffffff;
  --surface-soft:#f5f8fc;
  --surface-navy-tint:#eaf6f7;
  --success:#2cb831;
  --danger:#d64545;
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(7,26,54,.06), 0 1px 1px rgba(7,26,54,.04);
  --shadow-md:0 8px 24px rgba(7,26,54,.08);
  --shadow-lg:0 24px 60px -12px rgba(7,26,54,.28);
  --container:1180px;
  --font-head:"Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body:"Inter", "Segoe UI", system-ui, sans-serif;
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--body);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  font-size:16px;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--navy-900);margin:0 0 .5em;line-height:1.2;font-weight:600;}
h1{font-size:clamp(32px,5vw,52px);font-weight:700;letter-spacing:-.02em;}
h2{font-size:clamp(26px,3.4vw,36px);letter-spacing:-.01em;}
h3{font-size:19px;}
p{margin:0 0 1em;}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
.skip-link{position:absolute;left:-999px;top:0;background:var(--navy-900);color:#fff;padding:10px 18px;z-index:10000;border-radius:0 0 8px 0;}
.skip-link:focus{left:0;}

.container{max-width:var(--container);margin:0 auto;padding:0 24px;}

/* ==========================================================================
   3. Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:999px;font-weight:600;font-size:15px;
  border:1px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn.primary{background:linear-gradient(135deg,var(--teal-400),var(--teal-500));color:#fff;box-shadow:0 10px 24px -8px rgba(28,148,164,.5);}
.btn.primary:hover{box-shadow:0 14px 30px -8px rgba(28,148,164,.6);color:#fff;}
.btn.outline{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.06);backdrop-filter:blur(2px);}
.btn.outline:hover{background:rgba(255,255,255,.16);}
.btn.dark{background:var(--navy-900);color:#fff;}
.btn.dark:hover{background:var(--navy-700);}
.btn.full{width:100%;}
.btn:focus-visible{outline:3px solid var(--amber-400);outline-offset:2px;}

/* ==========================================================================
   4. Top bar & header / nav
   ========================================================================== */
.top{background:var(--navy-900);color:#cfe0f5;font-size:13px;}
.top .container{display:flex;align-items:center;justify-content:space-between;padding-top:8px;padding-bottom:8px;gap:12px;}
.top span:last-child{display:flex;align-items:center;gap:6px;color:var(--amber-400);font-weight:600;}

.nav{position:sticky;top:0;z-index:999;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.navin{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;gap:20px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:700;font-size:21px;color:var(--navy-900);height:46px;}
.brand-logo-img{height:100%;max-height:46px;width:auto;max-width:52px;object-fit:contain;display:block;}
.brand-text-dark{font-weight:700;color:var(--navy-900);font-size:20px;font-family:var(--font-head);letter-spacing:-.01em;}
.brand-text{font-weight:700;color:#fff;font-size:19px;font-family:var(--font-head);}
/* Fallback synthetic mark (used only if no logo image is set) */
.logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--teal-400),var(--navy-700));position:relative;display:inline-block;flex:none;}
.logo::after{content:"J";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:17px;font-family:var(--font-head);}
.menu{display:flex;align-items:center;gap:22px;}
.menu a{font-weight:500;font-size:15px;color:var(--navy-800);position:relative;padding:6px 0;white-space:nowrap;}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--teal-500);transform:scaleX(0);transform-origin:left;transition:transform .2s ease;}
.menu a:hover::after,.menu a.current::after{transform:scaleX(1);}
.menu a:hover{color:var(--navy-900);}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 10px;cursor:pointer;flex:none;}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--navy-900);margin:4px 0;transition:transform .2s ease,opacity .2s ease;}
.nav-actions{display:flex;align-items:center;gap:16px;}

/* ==========================================================================
   5. Hero
   ========================================================================== */
.hero{
  background:radial-gradient(1200px 500px at 85% -10%,rgba(51,172,189,.35),transparent 60%),
             linear-gradient(160deg,var(--navy-900),var(--navy-700) 65%,var(--navy-600));
  color:#fff;padding:56px 0 44px;position:relative;overflow:hidden;text-align:center;
}
.hero .container{max-width:760px;display:flex;flex-direction:column;align-items:center;}
.eyebrow{display:inline-flex;align-self:center;width:fit-content;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:var(--amber-400);font-weight:700;font-size:12.5px;letter-spacing:.08em;padding:8px 16px;border-radius:999px;margin-bottom:20px;}
.hero h1{color:#fff;margin-bottom:18px;}
.hero h1 span{color:var(--amber-400);}
.hero p{color:#c9d6ea;font-size:17px;max-width:560px;margin:0 auto 28px;}
.actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}

/* Full-width homepage poster slider (edge-to-edge, sits between the hero
   copy and the quick-search bar; randomised entrance animation per slide) */
.poster-full{position:relative;width:100%;overflow:hidden;background:var(--navy-900);}
.poster-full .poster-frame{position:relative;width:100%;height:clamp(260px,42vw,560px);overflow:hidden;}
.poster-full img{width:100%;height:100%;object-fit:cover;display:block;}
.posterbar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:linear-gradient(0deg,rgba(4,12,26,.85),transparent);color:#fff;font-size:14px;}
.slide-dot{display:flex;gap:6px;}
.slide-dot i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);display:inline-block;}
.slide-dot i.active{background:var(--amber-400);}

@keyframes posterFade{from{opacity:0}to{opacity:1}}
@keyframes posterSlideLeft{from{opacity:0;transform:translateX(70px) scale(1.02)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes posterSlideRight{from{opacity:0;transform:translateX(-70px) scale(1.02)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes posterSlideUp{from{opacity:0;transform:translateY(50px) scale(1.02)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes posterZoom{from{opacity:0;transform:scale(1.14)}to{opacity:1;transform:scale(1)}}
.anim-fade{animation:posterFade .9s ease both;}
.anim-slide-left{animation:posterSlideLeft .9s ease both;}
.anim-slide-right{animation:posterSlideRight .9s ease both;}
.anim-slide-up{animation:posterSlideUp .9s ease both;}
.anim-zoom{animation:posterZoom .9s ease both;}
@media (prefers-reduced-motion:reduce){
  .anim-fade,.anim-slide-left,.anim-slide-right,.anim-slide-up,.anim-zoom{animation:none;}
}

/* Quick search bar — sits cleanly below the poster slider (no overlap;
   overlapping margins broke on mobile once the slider shrank and the
   search fields stacked taller than the overlap amount). */
.quick{position:relative;z-index:5;padding:34px 0 4px;}
.quickbox{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:14px;display:grid;grid-template-columns:1.6fr 1fr 1fr auto;gap:10px;}
.input{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;background:var(--surface-soft);width:100%;}
.input:focus{outline:none;border-color:var(--teal-500);background:#fff;}

/* ==========================================================================
   6. Sections
   ========================================================================== */
section{padding:78px 0;}
section.light{background:var(--surface-soft);}
.head{max-width:680px;margin:0 auto 44px;text-align:center;}
.kicker{display:inline-block;color:var(--teal-500);font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;}
.head p{color:var(--muted);font-size:16px;}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);
  padding:30px 26px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
a.card{display:block;}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent;}
.card .ico{width:52px;height:52px;border-radius:14px;background:var(--surface-navy-tint);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:18px;}
.card h3{margin-bottom:8px;font-size:18px;}
.card p{color:var(--muted);font-size:14.5px;margin-bottom:0;}
.card.country h3{display:flex;align-items:center;gap:8px;}

/* Stats */
.stats{background:var(--navy-900);padding:52px 0;}
.statsgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;}
.stat strong{display:block;font-family:var(--font-head);font-size:26px;color:#fff;margin-bottom:6px;}
.stat span{color:#9db2d4;font-size:14px;}

/* Feature split (upload CV / app) */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.feature-copy .checks{margin:22px 0 28px;}
.check{display:flex;align-items:center;gap:10px;margin-bottom:10px;color:var(--body);font-size:15px;}
.check b{width:22px;height:22px;border-radius:50%;background:var(--teal-500);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;flex:none;}
.upload{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow-md);}
.upload h3{margin-bottom:6px;}
.drop{margin-top:16px;border:2px dashed var(--line);border-radius:var(--radius-md);padding:26px;text-align:center;background:var(--surface-soft);}
.drop strong{display:block;margin:8px 0 4px;color:var(--navy-900);}
.drop small{color:var(--muted);}

/* App phone mock */
.appbox{display:flex;justify-content:center;}
.phone{width:270px;background:var(--navy-900);border-radius:36px;padding:14px;box-shadow:var(--shadow-lg);position:relative;}
.notch{width:70px;height:6px;border-radius:6px;background:rgba(255,255,255,.25);margin:0 auto 10px;}
.screen{background:linear-gradient(160deg,var(--navy-800),var(--navy-700));border-radius:22px;padding:22px 18px;color:#fff;min-height:380px;}
.screen h3{color:#fff;font-size:20px;margin:14px 0 2px;}
.screen small{color:#9db2d4;}
.jobmini{background:rgba(255,255,255,.08);border-radius:12px;padding:12px 14px;margin-top:14px;}
.jobmini b{display:block;font-size:14px;}
.jobmini small{color:#9db2d4;}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:26px;position:relative;}
.num{font-family:var(--font-head);font-weight:700;font-size:26px;color:var(--teal-500);opacity:.55;margin-bottom:10px;}

/* FAQ */
.faq{max-width:760px;margin:0 auto;}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:6px 22px;margin-bottom:12px;}
.faq summary{cursor:pointer;padding:16px 0;font-weight:600;color:var(--navy-900);list-style:none;display:flex;justify-content:space-between;align-items:center;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-size:22px;color:var(--teal-500);}
.faq details[open] summary::after{content:"–";}
.faq details p{color:var(--muted);padding-bottom:16px;margin:0;}

/* CTA banner */
.cta{background:linear-gradient(135deg,var(--navy-900),var(--navy-700));color:#fff;}
.ctabox{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.ctabox h2{color:#fff;}
.ctabox p{color:#c9d6ea;margin:0;}
.ctabox > div:last-child{display:flex;gap:12px;flex-wrap:wrap;}

/* ==========================================================================
   7. Forms (contact / CV upload)
   ========================================================================== */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:34px;max-width:760px;margin:0 auto;}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.formgrid .full{grid-column:1 / -1;}
.formgrid input,.formgrid select,.formgrid textarea{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;width:100%;background:var(--surface-soft);}
.formgrid input:focus,.formgrid select:focus,.formgrid textarea:focus{outline:none;border-color:var(--teal-500);background:#fff;}
.formgrid textarea{min-height:130px;resize:vertical;}
.formgrid .note{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted);}
.formgrid .note input{width:auto;margin-top:3px;}
.upload .drop input[type=file]{margin-top:10px;}
.admin-note{margin-top:18px;font-size:13px;color:var(--muted);background:var(--surface-navy-tint);border-radius:var(--radius-sm);padding:12px 16px;}
.form-success{background:#e9f8ef;border:1px solid #bfe8cc;color:var(--success);padding:14px 18px;border-radius:var(--radius-sm);margin-bottom:20px;font-weight:600;}
.form-error{background:#fdeceb;border:1px solid #f3bcb7;color:var(--danger);padding:14px 18px;border-radius:var(--radius-sm);margin-bottom:20px;font-weight:600;}
.honeypot-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}

/* ==========================================================================
   8. Single job / archive
   ========================================================================== */
.job-meta-row{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 26px;}
.job-pill{background:var(--surface-navy-tint);color:var(--navy-800);font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;}
.job-apply-box{background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--radius-md);padding:24px;margin-top:36px;}
.job-body{max-width:820px;}
.job-body h2,.job-body h3{margin-top:1.6em;}
.breadcrumbs{font-size:13.5px;color:var(--muted);margin-bottom:18px;}
.breadcrumbs a{color:var(--teal-500);}
.job-list-item{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 26px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);margin-bottom:14px;transition:box-shadow .2s ease,transform .2s ease;}
.job-list-item:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.job-list-item h3{margin-bottom:4px;}
.job-list-item .meta{color:var(--muted);font-size:13.5px;display:flex;gap:10px;flex-wrap:wrap;}
.pagination{display:flex;gap:10px;justify-content:center;margin-top:30px;}
.pagination a,.pagination span{padding:9px 15px;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:14px;}
.pagination .current{background:var(--navy-900);color:#fff;border-color:var(--navy-900);}

/* Generic page content (about/terms/privacy) */
.page-content{max-width:820px;margin:0 auto;}
.page-content h2{margin-top:1.4em;}
.entry-content{max-width:820px;margin:0 auto;}
.entry-content h2,.entry-content h3{margin-top:1.4em;}
.entry-content ul{list-style:disc;padding-left:1.3em;margin-bottom:1em;}
.entry-content ol{list-style:decimal;padding-left:1.3em;margin-bottom:1em;}

/* ==========================================================================
   9. Footer
   ========================================================================== */
.footer{background:var(--navy-900);color:#b9c8e2;padding:64px 0 0;}
.footergrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1);}
.footergrid h4{color:#fff;font-size:14px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:16px;}
.footergrid a{display:block;color:#b9c8e2;font-size:14.5px;margin-bottom:10px;}
.footergrid a:hover{color:var(--teal-400);}
.footergrid p{color:#93a5c4;font-size:14px;}
.copyright{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;font-size:13px;color:#8296b8;flex-wrap:wrap;gap:8px;}
.credit{text-align:center;padding:14px 24px 22px;font-size:12.5px;color:#6f84a8;border-top:1px solid rgba(255,255,255,.08);}
.credit a{color:#9ddbe4;font-weight:600;}
.credit a:hover{color:var(--amber-400);}

/* ==========================================================================
   10. WordPress core helpers
   ========================================================================== */
.alignwide{width:100%;}
.alignfull{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;}
.wp-block-image img{border-radius:var(--radius-md);}
.wp-caption-text{font-size:13px;color:var(--muted);text-align:center;}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}

/* ==========================================================================
   11. Responsive
   ========================================================================== */
@media (max-width:960px){
  .grid{grid-template-columns:repeat(2,1fr);}
  .statsgrid{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr);}
  .feature{grid-template-columns:1fr;}
  .footergrid{grid-template-columns:1fr 1fr;}
  .quickbox{grid-template-columns:1fr 1fr;}
  .quickbox button{grid-column:1 / -1;}
}
/* Nav collapses to a hamburger earlier (880px) than the content breakpoints
   below, so tablets and small laptops never show a squeezed, wrapping menu. */
@media (max-width:880px){
  .menu{
    position:absolute;top:100%;left:0;right:0;
    background:#fff;flex-direction:column;align-items:stretch;
    padding:10px 24px 20px;gap:0;
    max-height:calc(100vh - 100%);overflow-y:auto;
    box-shadow:var(--shadow-lg);border-bottom:1px solid var(--line);
    transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .2s ease,opacity .2s ease,visibility .2s;
  }
  .menu.open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;}
  .menu a{width:100%;padding:14px 4px;border-bottom:1px solid var(--line);white-space:normal;}
  .nav-toggle{display:inline-block;}
  .nav-actions .btn.primary{display:none;}
}
@media (max-width:720px){
  .grid{grid-template-columns:1fr;}
  .statsgrid{grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:1fr;}
  .formgrid{grid-template-columns:1fr;}
  .footergrid{grid-template-columns:1fr;}
  .ctabox{flex-direction:column;align-items:flex-start;}
  .top .container{font-size:12px;}
  .job-list-item{flex-direction:column;align-items:flex-start;}
}