/* ==============================
   JOBVORO GLOBAL CSS - OPTIMIZED
   Google AdSense, SEO & Responsive
============================== */

/* ---------- ROOT VARIABLES ---------- */
:root {
  --bg-light:#f5f7fb;
  --bg-card:#fff;
  --text-dark:#111827;
  --text-muted:#6b7280;
  --primary:#1d4ed8;
  --primary-hover:#3b82f6;
  --accent:#10b981;
  --btn-gradient:linear-gradient(90deg,var(--accent),#059669);
  --shadow-light:0 4px 20px rgba(0,0,0,0.05);
  --shadow-hover:0 12px 24px rgba(0,0,0,0.12);
  --radius:8px;
}


/* ---------- BASE RESET ---------- */
*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif;}
body{background:var(--bg-light);color:var(--text-dark);line-height:1.6;scroll-behavior:smooth;}
a{text-decoration:none;color:inherit;transition:0.3s;}
img{max-width:100%;display:block;border-radius:var(--radius);}
ul{list-style:none;padding:0;margin:0;}
button{
  cursor:pointer;
  border:none;
}
button:focus-visible{
  outline:3px solid var(--primary);
  outline-offset:2px;
}


/* ---------- LAYOUT ---------- */
.main-layout{display:flex;gap:30px;max-width:1300px;margin:30px auto;padding:0 20px;}
.left-panel{flex:5;max-width:270px;background:var(--bg-card);padding:25px;border-radius:12px;box-shadow:var(--shadow-light);position:sticky;top:20px;transition:all 0.3s;}
.main-content{flex:3;}

/* ---------- PANELS ---------- */
.left-panel h3{font-size:1.2rem;margin-bottom:10px;color:#1f2937;font-weight:600;}
.panel-section{margin-bottom:30px;}
.titles-two-column{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 15px;}
.titles-two-column a{font-size:14px;padding:4px 6px;border-radius:6px;transition:all 0.3s;color:#4b5563;}
.titles-two-column a:hover{background:linear-gradient(90deg,#4f46e5,#3b82f6);color:#fff;}
.btn-search-titles{display:inline-block;margin-top:12px;padding:10px 16px;background:var(--btn-gradient);color:#fff;border-radius:var(--radius);font-weight:600;font-size:14px;transition:0.3s;}
.btn-search-titles:hover{opacity:.95;transform:translateY(-2px);}

/* ---------- HERO ---------- */
.hero{background:linear-gradient(135deg,#4f46e5,#3b82f6);color:#fff;text-align:center;padding:100px 20px;border-radius:14px;margin-bottom:50px;box-shadow:0 8px 30px rgba(0,0,0,0.1);}
.hero h1{font-size:3rem;margin-bottom:15px;font-weight:700;animation:fadeInDown 1s ease;}
.hero p{font-size:1.25rem;margin-bottom:30px;animation:fadeInUp 1s ease;}
.btn-primary{background:var(--btn-gradient);color:#fff;padding:14px 35px;border-radius:var(--radius);font-weight:600;transition:0.4s;}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,0.2);}
.btn-secondary{display:inline-block;margin-top:20px;background:linear-gradient(90deg,#3b82f6,#2563eb);color:#fff;padding:12px 30px;border-radius:var(--radius);font-weight:600;font-size:15px;transition:0.4s;}
.btn-secondary:hover{transform:translateY(-2px);box-shadow:0 6px 15px rgba(0,0,0,0.15);}

/* ---------- GRID CARDS ---------- */
.jobs-grid,.companies-grid,.blogs-grid{display:grid;gap:25px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.job-card,.company-card,.blog-card{background:var(--bg-card);padding:20px;border-radius:12px;box-shadow:var(--shadow-light);text-align:center;transition:all 0.3s;word-wrap:break-word;}
.job-card:hover,.company-card:hover,.blog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);}
.job-card h3,.company-card h3,.blog-card h3{font-size:1.15rem;margin:15px 0 10px;color:#1f2937;font-weight:600;}
.job-card p,.company-card p,.blog-card p{color:var(--text-muted);font-size:.95rem;line-height:1.4;}

/* ---------- ADSENSE ---------- */
.google-ads,.ads-panel{margin:60px 0;text-align:center;}
.ad-slot{background:#f3f4f6;border:1px dashed #9ca3af;width:320px;height:250px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#6b7280;border-radius:var(--radius);transition:all 0.3s;}
.ad-slot:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,0.12);}
.ads-panel .ad-slot{width:100%;height:250px;margin-bottom:15px;}

/* ---------- ACCESSIBILITY: FOCUS STATES ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid var(--primary);
  outline-offset:2px;
}

/* ---------- TOP SEARCH BAR ---------- */
.top-search-bar{background:#e5e5e5;padding:18px 20px;border-radius:var(--radius);margin:20px auto 30px;max-width:1200px;}
.search-form{display:flex;gap:12px;flex-wrap:wrap;}
.search-input{flex:1;background:#fff;padding:12px 14px;border-radius:6px;display:flex;align-items:center;}
.search-input input{
  border:none;
  outline:3px solid transparent;
  outline-offset:2px;
  width:100%;
  font-size:15px;
  color:#111827;
}
.search-input input:focus-visible{
  outline-color:var(--primary);
}
.search-btn{background:#ff7a1a;color:#fff;padding:14px 28px;font-weight:600;border-radius:6px;transition:.3s;}
.search-btn:hover{background:#e96b12;}
.detailed-search a{font-size:14px;color:#333;}

/* ---------- PAGINATION ---------- */
.pagination{margin-top:20px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.pagination a{padding:8px 12px;background:#f3f4f6;color:#111827;border-radius:6px;text-align:center;flex:1 1 auto;}
.pagination a.active{background:#4f46e5;color:#fff;}
.pagination a:hover{background:#3b82f6;color:#fff;}

/* ---------- FOOTER ---------- */
.site-footer{background:#111827;color:#e5e7eb;padding:25px 15px;margin-top:40px;font-size:.85rem;}
.footer-container{max-width:1100px;margin:auto;text-align:center;}
.footer-links a{color:#93c5fd;text-decoration:none;margin:0 6px;font-weight:500;}
.footer-links a:hover{text-decoration:underline;}
.footer-copy{font-size:.75rem;color:#9ca3af;}

/* ---------- JOB ALERT PANEL ---------- */
.left-job-alert{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:16px;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,0.05);}
.left-job-alert .alert-title{font-size:1.05rem;font-weight:700;color:#111827;margin-bottom:6px;}
.left-job-alert .alert-underline{display:block;width:36px;height:3px;background:linear-gradient(90deg,#4f46e5,#3b82f6);margin:6px auto 10px;border-radius:4px;}
.left-job-alert .alert-subtext{font-size:.85rem;color:#4b5563;margin-bottom:12px;line-height:1.45;}
.left-job-alert-form input,.left-job-alert-form select{width:100%;padding:9px 11px;font-size:.85rem;border-radius:6px;border:1px solid #d1d5db;}
.left-job-alert-form input::placeholder{color:#9ca3af;}
.left-job-alert-form input:focus,.left-job-alert-form select:focus{outline:none;border-color:#4f46e5;box-shadow:0 0 0 2px rgba(79,70,229,.15);}
.left-job-alert-form button{padding:10px;background:var(--btn-gradient);color:#fff;font-size:.9rem;font-weight:700;border-radius:var(--radius);transition:transform .15s,box-shadow .15s;}
.left-job-alert-form button:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,0.15);}

/* ---------- HERO ANIMATIONS ---------- */
@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px);}100%{opacity:1;transform:translateY(0);}}
@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px);}100%{opacity:1;transform:translateY(0);}}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1200px){.main-layout{flex-direction:column}.left-panel{max-width:100%;margin-bottom:25px;position:relative;top:auto;}}
@media(max-width:768px){.hero{padding:60px 15px}.hero h1{font-size:2rem}.hero p{font-size:1rem}.titles-two-column{grid-template-columns:1fr;gap:10px 0}.panel-section{padding:10px;}}
@media(max-width:480px){.hero h1{font-size:1.6rem}.hero p{font-size:.95rem}.btn-primary,.btn-secondary,.btn-search-titles{width:100%;font-size:14px;padding:12px}.jobs-grid,.companies-grid,.blogs-grid{grid-template-columns:1fr;display:flex;overflow-x:auto;flex-wrap:nowrap;gap:15px;padding-bottom:10px}.job-card,.company-card,.blog-card{flex:0 0 260px}.job-card h3,.company-card h3,.blog-card h3{font-size:.95rem}.job-card p,.company-card p,.blog-card p{font-size:.85rem;line-height:1.3;}}
@media(max-width:320px){.hero h1{font-size:1.4rem}.hero p{font-size:.85rem}.btn-primary,.btn-secondary,.btn-search-titles{padding:10px;font-size:13px;}}