<style>
/* ===============================
   CaribCareerHub – Global Theme
   =============================== */
:root{
  --bg:#F3F8FF;            /* page bg */
  --panel:#ffffff;         /* cards/panels */
  --ink:#0A2458;           /* text/headings */
  --muted:#5F6D8C;         /* secondary text */
  --brand:#1E6CFF;         /* primary */
  --brand-2:#3FA2FF;       /* gradient partner */
  --accent:#FFA03B;        /* callouts */
  --radius:18px;
  --shadow:0 10px 30px rgba(16,40,120,.12);
  --ring:0 0 0 3px rgba(30,108,255,.12);
}

/* Smoother night theme (higher contrast, softer panels) */
body.dark{
  --bg:#0c1324;
  --panel:#111a2e;
  --ink:#eaf1ff;
  --muted:#b3c0de;
  --brand:#78A6FF;
  --brand-2:#2F7BFF;
  --accent:#ffb86c;
  --shadow:0 14px 40px rgba(0,0,0,.5);
  --ring:0 0 0 3px rgba(122,170,255,.22);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;            /* no sideways scroll */
  -webkit-font-smoothing:antialiased;
  transition: background .25s ease,color .25s ease;
}

/* ===============================
   Top Banner (full-bleed, sticky)
   =============================== */
.highlight-banner{
  position:sticky; top:0; left:0; right:0; z-index:1000;
  width:100%;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#fff;
  text-align:center;
  font-weight:800;
  padding:10px 16px;
  font-size:14px;
  letter-spacing:.3px;
  box-shadow:var(--shadow);
}

/* ===============================
   Header (logo + right rail)
   =============================== */
.header{
  max-width:1100px; margin:14px auto 0; padding:0 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand .logo{
  width:44px; height:44px;              /* safe, non-overlapping */
  object-fit:contain; flex:0 0 auto;
}
.brand-name{
  font-size: clamp(18px, 3.8vw, 26px);
  font-weight:900; letter-spacing:4px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}

/* Right rail: toggle + login sit neatly side-by-side */
.right-rail{
  display:flex; align-items:center; gap:10px; flex:0 0 auto;
}
.theme-toggle{
  border:1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  padding:8px 10px; border-radius:12px;
  background:var(--panel); color:var(--ink);
  cursor:pointer; font-weight:900; line-height:1;
  box-shadow:var(--shadow);
}
body.dark .theme-toggle{
  border-color:rgba(255,255,255,.15);
  background:#0e1a34; color:#eaf1ff;      /* visible in dark */
}
.login-btn{
  display:inline-block; padding:10px 14px; border-radius:12px;
  font-weight:800; text-decoration:none; color:#fff;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  box-shadow:var(--shadow); white-space:nowrap;
}
.login-btn:focus-visible,.theme-toggle:focus-visible{
  outline:none; box-shadow:var(--ring);
}

/* ===============================
   Main Panel (hero + map)
   =============================== */
.panel{
  max-width:1100px; margin:16px auto 32px; padding:24px;
  border-radius:var(--radius);
  background:color-mix(in oklab, var(--panel) 92%, transparent);
  box-shadow:var(--shadow);
  border:1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.panel-content{ display:grid; grid-template-columns:1.1fr .9fr; gap:24px }

/* Hero */
.hero-title{
  font-size: clamp(30px, 6vw, 54px);
  font-weight:900; line-height:1.18; margin:10px 0 10px; text-align:center;
  letter-spacing:.4px;
}
.lede{
  font-size:16px; line-height:1.75; color:var(--muted);
  margin:0 auto 16px; text-align:center; max-width:720px;
}
.employer-callout{
  margin:16px auto 0; padding:12px 14px; border-radius:12px;
  background:#fff6e9; border:1px solid #ffd9a8; color:#9d5f00; font-weight:700;
  max-width:720px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.employer-callout a{
  background:var(--accent); color:#fff; text-decoration:none; font-weight:900;
  padding:8px 12px; border-radius:10px; box-shadow:var(--shadow);
}
body.dark .employer-callout{ background:#2a1e0e; border-color:#5a3d13; color:#ffd6a1 }

/* ===============================
   Jobs list (cards polish)
   =============================== */
.jobs-list{ margin-top:18px }
.job-card{
  display:grid; gap:8px;
  border:1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  border-radius:12px; padding:14px; background:var(--panel); box-shadow:var(--shadow);
}
.job-card, .job-card *{
  word-break: normal; overflow-wrap: anywhere; hyphens:auto;
}
.job-title{ margin:0; font-size:18px; font-weight:900; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.job-company{ margin:0; color:var(--muted); font-weight:700;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.job-location{ margin:0; color:var(--brand); font-weight:800;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.desc{ margin:6px 0 8px; font-size:14px; color:var(--ink);
  opacity:.95; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.card-actions{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.card-actions .apply{
  display:inline-block; padding:8px 12px; border-radius:10px; font-weight:800; color:#fff;
  background:linear-gradient(90deg,var(--brand),var(--brand-2)); text-decoration:none; box-shadow:var(--shadow);
}
.card-actions .badge{ font-size:12px; color:var(--muted); font-weight:800; margin-left:auto }

/* Load more */
.load-more{
  display:inline-block; margin:12px auto 0; padding:10px 14px; font-weight:900; border:none; border-radius:12px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#fff; cursor:pointer; box-shadow:var(--shadow)
}

/* Map */
.map-wrap{ display:flex; align-items:center; justify-content:center }
.map-wrap img{ width:100%; max-width:520px; height:auto; object-fit:contain; opacity:.9 }

/* ===============================
   Footer
   =============================== */
.footer{
  max-width:1100px; margin:10px auto 40px; padding:0 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.footer .links{
  display:flex; gap:min(8vw,22px); flex-wrap:wrap;           /* neat, balanced spacing */
}
.footer a{
  color:var(--ink); text-decoration:none; font-weight:900;
  border-bottom:2px solid transparent; padding-bottom:2px
}
.footer a:hover{ border-color: color-mix(in oklab, var(--brand) 50%, transparent) }
.copy{ color:var(--muted); font-weight:700 }

/* ===============================
   Utilities
   =============================== */
.wrap{ word-break: break-word; overflow-wrap:anywhere }

/* ===============================
   Responsive tweaks
   =============================== */
@media (max-width: 900px){
  .panel-content{ grid-template-columns:1fr }
  .brand .logo{ width:40px; height:40px }
  .brand-name{ letter-spacing:3px }
  .right-rail{ gap:8px }
}
@media (max-width: 420px){
  .brand-name{ font-size:18px; letter-spacing:2px }
  .theme-toggle{ padding:7px 9px }
  .login-btn{ padding:8px 12px }
}
</style>
