/* Polished stylesheet for HourlyJobs */
*{margin:0;padding:0;box-sizing:border-box}
body{
  position: relative;
  font-family: "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background: linear-gradient(180deg,#f6f9ff 0%, #ffffff 100%);
  color:#071133;
  min-height:100vh;
}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{position:sticky;top:0;background:rgba(255,255,255,0.9);backdrop-filter:saturate(120%) blur(6px);z-index:80;border-bottom:1px solid rgba(14,165,233,0.06)}
.header-row{display:flex;align-items:center;gap:20px;padding:18px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand-icon{font-size:22px;background:#fff;padding:6px;border-radius:8px;box-shadow:0 6px 18px rgba(2,6,23,0.04)}
.brand-icon {
  padding: 2px;
}
.brand-icon img.brand-logo {
  width: 72px;
  height: 72px;
  display: block;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(2,6,23,0.06);
  background: #fff;
  padding: 6px;
}
.brand-icon { display:flex; align-items:center; justify-content:center; min-width:72px; min-height:72px; }
.brand-text {
  color: #1877f2;
  font-weight: 800;
  font-size: 20px;
  margin-left: 12px;
  letter-spacing: 0.2px;
}

/* make the whole brand (logo + text) clickable without disrupting layout */
.brand-link { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; cursor:pointer; }
.brand-link:focus { outline: 3px solid rgba(24,119,242,0.14); outline-offset: 2px; border-radius: 8px; }

@media (max-width: 900px) {
  .brand-icon img.brand-logo { width:56px; height:56px; padding:4px; border-radius:10px; }
  .brand-icon { min-width:56px; min-height:56px; }
  .brand-text { font-size: 18px; margin-left:10px; }
}
@media (max-width: 480px) {
  .brand-icon img.brand-logo { width:44px; height:44px; padding:3px; border-radius:8px; }
  .brand-icon { min-width:44px; min-height:44px; }
  .brand-text { font-size: 15px; margin-left:8px; display:none; } /* hide text on very small screens */
}
.brand-name{display:none}
.brand-name{color:#1877f2;font-weight:800;font-size:18px}
.main-nav{display:flex;gap:20px;margin-left:28px}
.nav-link{text-decoration:none;color:#475569;font-weight:600;padding:8px 10px;border-radius:8px;transition:all .15s}
.nav-link.active{color:#1877f2;background:rgba(24,119,242,0.06);box-shadow:inset 0 -2px 0 rgba(24,119,242,0.12)}
.header-actions{margin-left:auto}
.btn{padding:8px 12px;border-radius:10px;border:none;cursor:pointer;font-weight:700}
.btn.primary{background:linear-gradient(135deg,#1877f2,#0f66d6);color:#fff;box-shadow:0 8px 30px rgba(15,102,214,0.12)}
.btn.secondary{background:#fff;border:1px solid #e6eef6;color:#1877f2}

/* Hero */
.hero{padding:40px 0;display:flex;gap:28px;align-items:flex-start}
.hero-left{flex:1}
.hero-left h1{font-size:44px;line-height:1.02;margin-bottom:12px;color:#071133}
.lead{color:#475569;margin-bottom:18px;font-size:16px}
.search-row{display:flex;gap:12px;margin-top:6px}
.search-input{padding:12px 16px;font-size:15px;border-radius:12px;border:1px solid #e6eef6;flex:1;background:#fff}
.search-input:focus{outline:none;border-color:rgba(24,119,242,0.6);box-shadow:0 10px 30px rgba(24,119,242,0.06)}
.hero-right{width:380px;min-height:220px;background:linear-gradient(180deg,#fff,#fbfdff);border-radius:14px;box-shadow:0 24px 60px rgba(2,6,23,0.06)}

/* Jobs layout */
.jobs{display:grid;grid-template-columns:380px 1fr;gap:32px;align-items:start;padding:34px 0 80px}
.jobs-list{display:flex;flex-direction:column;gap:14px}
/* Make the left list independently scrollable to avoid a very long page */
.jobs-list {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  padding-right: 6px; /* breathing room for scroll */
}
.jobs-list-header{display:flex;justify-content:space-between;align-items:center;padding:6px 2px;color:#071133;font-weight:800;margin-bottom:8px}
.featured-badge{display:inline-block;background:#eef6ff;color:#2563eb;padding:6px 10px;border-radius:8px;font-weight:700;font-size:12px}
.job-card{background:#fff;border-radius:14px;padding:14px;border:1px solid #eef6fb;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease;display:flex;gap:14px;align-items:center}
.job-card:hover{transform:translateY(-8px);box-shadow:0 30px 80px rgba(2,6,23,0.08)}
.logo-circle{width:52px;height:52px;border-radius:12px;background:#fff;display:inline-flex;align-items:center;justify-content:center;color:#1877f2;font-weight:800;box-shadow:0 10px 30px rgba(2,6,23,0.06)}
.logo-circle svg { width: 28px; height: 28px; display: block; }
.logo-circle img { width: 32px; height: 32px; display: block; object-fit: contain; border-radius: 6px; }
.job-info{flex:1}
.job-title{font-weight:800;color:#071133;margin-bottom:6px;font-size:15px}
.job-company{color:#64748b;margin-bottom:6px;font-size:13px}
.salary-pill{display:inline-block;background:#f1f5f9;color:#0f172a;padding:6px 10px;border-radius:999px;font-weight:800}
.job-meta{display:flex;gap:8px;color:#6b7280;font-size:13px;margin-top:6px}
.job-card.selected{border-color:rgba(24,119,242,0.16);box-shadow:0 40px 120px rgba(24,119,242,0.06)}
.fade-in{animation:fadeIn .45s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.hero-graphic{position:relative;padding:20px;height:100%;display:flex;flex-direction:column;justify-content:center;gap:18px;}
.hero-decor-circle{position:absolute;right:-40px;top:-40px;width:220px;height:220px;border-radius:50%;background:linear-gradient(135deg,rgba(24,119,242,0.06),rgba(15,102,214,0.02));filter:blur(12px);z-index:0}
.featured-hero-card{position:relative;z-index:2;background:#fff;border-radius:14px;padding:14px;display:flex;gap:12px;align-items:center;box-shadow:0 18px 40px rgba(2,6,23,0.06);border:1px solid #f0f6fb}
.fh-logo{width:56px;height:56px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;color:#1877f2;font-weight:800;box-shadow:0 8px 20px rgba(2,6,23,0.05);font-size:18px}
.fh-logo{overflow:hidden}
.fh-logo img{width:44px;height:44px;object-fit:cover;border-radius:8px;display:block}
.fh-logo svg{width:44px;height:44px;display:block}
.fh-body{flex:1}
.fh-label{font-size:11px;color:#2563eb;font-weight:800;margin-bottom:6px}
.fh-title{font-weight:800;color:#071133;font-size:16px;margin-bottom:6px}
.fh-company{color:#64748b;font-size:13px;margin-bottom:8px}
.fh-cta .btn{padding:8px 12px;border-radius:10px}

.mini-hero-card{background:transparent;padding:8px 6px;border-radius:10px;z-index:1}
.mini-title{font-weight:800;color:#071133;margin-bottom:8px}
.mini-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;color:#475569;font-size:14px}
.mini-list li strong{color:#0f172a}
.job-panel{background:#fff;border-radius:14px;padding:24px;min-height:380px;border:1px solid #eef6fb;box-shadow:0 18px 46px rgba(2,6,23,0.04)}
/* Allow the detail panel to scroll internally if content exceeds viewport */
.job-panel {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}
.job-panel h2{margin:0 0 10px 0;font-size:20px}
.job-panel .muted{color:#64748b}
.role-specs{background:#fbfdff;border-radius:12px;padding:14px;margin:24px 0;border:1px solid #eef6fb;display:flex;justify-content:space-between;align-items:center}
.role-specs .money{background:#fff;padding:12px;border-radius:10px;box-shadow:0 8px 20px rgba(2,6,23,0.04);font-weight:800;color:#0f172a}
.apply-btn {
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: 800;
  background-image: linear-gradient(180deg, #4da3ff 0%, #1877f2 60%, #0f66d6 100%);
  background-color: #1877f2;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  box-shadow:
    0 10px 30px rgba(24,119,242,0.16),
    inset 0 2px 0 rgba(255,255,255,0.12);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: 15.5px;
  line-height: 1;
  display: inline-block;
  text-align: center;
  -webkit-font-smoothing:antialiased;
  transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease, opacity .12s ease;
  text-shadow: 0 1px 0 rgba(0,0,0,0.12);
  padding-top: 11px;
  padding-bottom: 11px;
}
.apply-btn:hover {
  transform: translateY(-3px);
  box-shadow:
    0 18px 44px rgba(15,102,214,0.22),
    inset 0 2px 0 rgba(255,255,255,0.14);
}
.apply-btn:active { transform: translateY(-1px) scale(.997); }
.apply-btn:focus { outline: 3px solid rgba(24,119,242,0.18); outline-offset: 3px; }
.check-list{list-style:none;padding:0;margin:0 0 12px 0;display:grid;gap:26px}
.check-item{display:flex;gap:28px;align-items:center}
.check-dot{width:48px;height:48px;border-radius:999px;background:#eef6ff;color:#2563eb;display:flex;align-items:center;justify-content:center;font-weight:700}

.job-panel section { margin-top: 26px; }
.job-panel h4 { margin: 0 0 12px 0; font-size: 16px; color: #071133; }

.apply-bar{margin-top:28px}

.how-it-works{padding:40px 0}
.site-footer{padding:24px 0;border-top:1px solid #eef6f7;color:#64748b;font-size:14px;text-align:center}

@media(max-width:900px){.jobs{grid-template-columns:1fr}.hero-left h1{font-size:28px}.main-nav{display:none}.hero-right{display:none}}
@media (max-width: 900px) {
  /* On narrow screens let sections flow naturally */
  .jobs-list, .job-panel { max-height: none; overflow: visible; padding-right: 0; }
}

/* Custom scrollbar (webkit) */
.jobs-list::-webkit-scrollbar, .job-panel::-webkit-scrollbar {
  width: 10px;
}
.jobs-list::-webkit-scrollbar-track, .job-panel::-webkit-scrollbar-track {
  background: transparent;
}
.jobs-list::-webkit-scrollbar-thumb, .job-panel::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(24,119,242,0.12), rgba(15,102,214,0.18));
  border-radius: 10px;
}

/* Footer partners */
.footer-inner{display:flex;flex-direction:row;gap:24px;align-items:center;justify-content:space-between;padding:28px 0}
.partners-title{font-weight:800;color:#071133;margin-bottom:8px}
.partners-logos{display:flex;gap:12px;align-items:center}
.partner-logo{background:#fff;padding:10px 14px;border-radius:10px;box-shadow:0 8px 24px rgba(2,6,23,0.04);font-weight:700;color:#64748b}
.partner-logo span{color:#0f172a}
.footer-meta{text-align:right;color:#64748b}
.footer-copy{font-weight:700;color:#071133;margin-bottom:6px}
.footer-sub{font-size:13px;opacity:0.9}

@media(max-width:900px){
  .footer-inner{flex-direction:column;align-items:flex-start;text-align:left;gap:12px}
  .footer-meta{text-align:left}
}

/* Page decorative background blobs (left & right) */
body::before,
body::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.65;
}

/* left soft bluish blob */
body::before {
  left: -8%;
  top: 6%;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle at 30% 30%, rgba(24,119,242,0.12), rgba(15,102,214,0.04) 40%, transparent 60%);
  transform: rotate(-8deg);
}

/* right gentle warm/blue overlay */
body::after {
  right: -6%;
  top: 0%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle at 70% 30%, rgba(15,102,214,0.08), rgba(24,119,242,0.03) 45%, transparent 65%);
  transform: rotate(6deg);
}

/* ensure hero and other content sits above these decorations */
.hero, .jobs, .site-header, .site-footer, .job-panel, .jobs-list, .featured-hero-card {
  position: relative;
  z-index: 2;
}