/* ==========================================================================
   site-chrome.css — workstager.app marketing header + footer, ported from the
   WordPress theme (Netstager_Creative_Suite-3.0: css/style.css + jquery.mmenu)
   for the signup pages. See partials/site-header / partials/site-footer.

   Isolation rules — this file must never affect page content:
     • every selector starts with .wsh (header) or .wsf (footer);
     • no html / body / bare-element rules, no Bootstrap;
     • elements here set their own font / colour / spacing, so the page's
       Tailwind preflight and onboarding CSS can't leak in either.
   Sizes are the theme's rem values; the onboarding root font-size uses the
   same desktop scale (100vw / 120), so they land 1:1 with workstager.app.
   ========================================================================== */

.wsh, .wsf {
  --wsc-green: #86BE41;
  --wsc-ink: #242424;
  --wsc-muted: #9D9D9D;
  --wsc-line: #DDDDDD;
  --wsc-dark: #0D493D;
  font-family: 'Plus Jakarta Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
.wsh *, .wsh *::before, .wsh *::after,
.wsf *, .wsf *::before, .wsf *::after { box-sizing: border-box; }
.wsh ul, .wsf ul { list-style: none; margin: 0; padding: 0; }
.wsh img, .wsf img { display: block; max-width: 100%; height: auto; border: 0; }
.wsh a, .wsf a { text-decoration: none; transition: color .3s, background .3s, border-color .3s; }
.wsh [hidden], .wsf [hidden] { display: none !important; }

.wsh__container, .wsf__container {
  width: 100%;
  max-width: 101.25rem;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ---------- Header bar ---------- */
.wsh {
  position: sticky;
  top: 0;
  z-index: 60;
  width: 100%;
  background: #fff;
  transition: box-shadow .4s;
}
.wsh.is-scrolled { box-shadow: 0 0 1rem 0 rgb(0 0 0 / 20%); }

.wsh__bar {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  min-height: 7.813rem;
  transition: min-height .4s;
}
.wsh.is-scrolled .wsh__bar { min-height: 5.313rem; }

.wsh__logo { display: flex; align-items: center; flex: 0 0 auto; width: 13.75rem; }
.wsh__logo img { width: 100%; }

.wsh__nav { flex: 1 1 auto; display: flex; justify-content: center; }
.wsh__menu { display: flex; align-items: stretch; }
.wsh__item { display: flex; align-items: center; padding: 0 0.938rem; }

.wsh__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.25rem;
  line-height: 1.875rem;
  font-weight: 500;
  color: var(--wsc-ink);
  white-space: nowrap;
}
.wsh__link:hover, .wsh__link.is-current,
.wsh__item--mega.is-open > .wsh__link { color: var(--wsc-green); }
.wsh__caret { width: 1rem; height: 1rem; transition: transform .3s; }
.wsh__item--mega.is-open .wsh__caret { transform: rotate(180deg); }

.wsh__actions { display: flex; align-items: center; gap: 0.938rem; flex: 0 0 auto; }

.wsh__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.563rem;
  min-width: 10.625rem;
  padding: 0.625rem 2.125rem;
  border-radius: 4rem;
  border: 0.063rem solid transparent;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.25rem;
  line-height: 2rem;
  font-weight: 600;
  white-space: nowrap;
}
.wsh__btn--primary { background: linear-gradient(90deg, #00FF66 0%, #A7FF55 100%); color: #000; }
.wsh__btn--outline { background: #fff; border-color: #000; color: #000; }
.wsh__btn--primary:hover, .wsh__btn--outline:hover { background: var(--wsc-dark); border-color: var(--wsc-dark); color: #fff; }

/* ---------- Mega menus ---------- */
.wsh__mega {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-top: 0.063rem solid var(--wsc-line);
  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.08);
  padding-top: 1.5rem;
  text-align: left;
}
.wsh__item--mega.is-open > .wsh__mega { display: block; }
@media (hover: hover) and (min-width: 1200px) {
  .wsh__item--mega:hover > .wsh__mega,
  .wsh__item--mega:focus-within > .wsh__mega { display: block; }
  .wsh__item--mega:hover > .wsh__link { color: var(--wsc-green); }
}

.wsh__eyebrow, .wsh__col-title {
  margin: 0 0 1.5rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.25rem;
  line-height: 2.25rem;
  font-weight: 600;
}
.wsh__eyebrow { text-transform: uppercase; color: var(--wsc-muted); }
.wsh__col-title { color: #000; }
.wsh__col-title--spacer { visibility: hidden; }

.wsh__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 1.5rem; }
.wsh__grid + .wsh__col-title { margin-top: 0.5rem; }

.wsh__entry { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 2rem; }
.wsh__entry img { width: 2.5rem; height: 2.5rem; flex: 0 0 auto; object-fit: contain; }
.wsh__entry a {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.25rem;
  line-height: 1.875rem;
  font-weight: 500;
  color: var(--wsc-ink);
}
.wsh__entry a:hover { color: var(--wsc-green); }
.wsh__viewall { display: inline-flex; align-items: center; gap: 0.25rem; }
.wsh__viewall img { width: 2rem; height: 2rem; }

.wsh__demo {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0 0 1.5rem;
  border-radius: 1.5rem;
  overflow: hidden;
  background: #0D493D url('menu-bg.png') center / cover no-repeat;
}
.wsh__demo h3 {
  margin: 0 0 1rem;
  font-family: 'Spline Sans', sans-serif;
  font-size: 1.5rem;
  line-height: normal;
  font-weight: 600;
  color: #fff;
}
.wsh__demo p {
  margin: 0 1.5rem 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 1.25rem;
  line-height: 2rem;
  color: #fff;
}
.wsh__demo-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; }
.wsh__demo-row a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 4.5rem;
  font-size: 1.25rem;
  font-weight: 500;
  color: #fff;
}
.wsh__demo-row a img { width: 2rem; height: 2rem; }
.wsh__demo-row > img { width: 50%; }

.wsh__strip {
  display: grid;
  grid-template-columns: 5fr 3fr 2fr 2fr;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-top: 0.063rem solid var(--wsc-line);
}
.wsh__strip p, .wsh__strip a {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.25rem;
  line-height: 2.25rem;
  font-weight: 400;
  color: var(--wsc-muted);
}
.wsh__strip a { display: inline-flex; align-items: center; gap: 0.313rem; }
.wsh__strip a:hover { color: var(--wsc-green); }
.wsh__strip img { width: 2rem; height: 2rem; }

/* ---------- Mobile toggle + drawer ---------- */
.wsh__burger {
  display: none;
  align-self: center;
  margin-left: auto;
  padding: 0.5rem;
  border: 0;
  background: none;
  cursor: pointer;
}
.wsh__burger span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 0 4px;
  border-radius: 4px;
  background: #82ba41;
  transition: transform .4s, opacity .4s;
}
.wsh__burger span:last-child { margin: 0; }
.wsh.is-drawer-open .wsh__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.wsh.is-drawer-open .wsh__burger span:nth-child(2) { opacity: 0; }
.wsh.is-drawer-open .wsh__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.wsh__drawer {
  border-top: 0.063rem solid var(--wsc-line);
  background: #fff;
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  padding: 0.5rem 0 1.5rem;
}
.wsh__drawer-list > li { border-bottom: 0.063rem solid #f0f0f0; }
.wsh__drawer-link {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0.875rem 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: 500;
  color: var(--wsc-ink);
}
.wsh__drawer-link.is-current, .wsh__drawer-link:hover { color: var(--wsc-green); }
.wsh__drawer-link[aria-expanded="true"] .wsh__caret { transform: rotate(180deg); }
.wsh__drawer-sub { padding: 0 0 0.75rem 1rem; }
.wsh__drawer-sub a {
  display: block;
  padding: 0.5rem 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  color: #515151;
}
.wsh__drawer-sub a:hover { color: var(--wsc-green); }
.wsh__drawer-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.wsh__drawer-actions .wsh__btn { flex: 1 1 12rem; height: 3rem; font-size: 1rem; }

@media (max-width: 1199.98px) {
  .wsh__nav, .wsh__actions { display: none; }
  .wsh__burger { display: block; }
  .wsh__bar, .wsh.is-scrolled .wsh__bar { min-height: 5rem; }
  .wsh__logo { width: 11.25rem; }
}
@media (min-width: 1200px) {
  .wsh__container, .wsf__container { padding: 0; }
  .wsh__drawer { display: none !important; }
}

/* ---------- Footer ---------- */
.wsf { width: 100%; background: #fff; padding-top: 5rem; }
.wsf__top { display: grid; grid-template-columns: 3fr 9fr; gap: 1.5rem; }
.wsf__logo img { width: 14.5rem; margin-bottom: 1.5rem; }
.wsf__about {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.25rem;
  line-height: 2rem;
  font-weight: 400;
  color: #999999;
}
/* .wsf prefix: must outrank the `.wsf ul { margin: 0 }` reset above */
.wsf .wsf__social { display: flex; align-items: center; gap: 1.875rem; margin-top: 2rem; }
.wsf__social a { display: block; width: 1.25rem; height: 1.25rem; }
.wsf__social img { width: 100%; height: 100%; object-fit: contain; }

.wsf__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.5rem; }
.wsf__title {
  margin: 0 0 1.25rem;
  font-family: 'Spline Sans', sans-serif;
  font-size: 1.25rem;
  line-height: 2rem;
  font-weight: 600;
  color: #999999;
  text-transform: none;
}
.wsf__links { margin-bottom: 3.5rem !important; }
.wsf__links li { margin-bottom: 0.75rem; }
.wsf__links a {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.25rem;
  line-height: 2rem;
  font-weight: 500;
  color: #515151;
}
.wsf__links a:hover, .wsf__links a.is-current { color: var(--wsc-green); }

.wsf__copy {
  max-width: 101.25rem;
  margin: 0 auto;
  padding: 1.25rem 0;
  border-top: 0.063rem solid var(--wsc-line);
  text-align: center;
}
.wsf__copy p {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.25rem;
  line-height: normal;
  font-weight: 400;
  color: #515151;
}

@media (max-width: 1199.98px) {
  .wsf { padding-top: 3rem; }
  .wsf__top { grid-template-columns: 1fr; }
  .wsf__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wsf__logo img { width: 11rem; margin-bottom: 1rem; }
  .wsf__about, .wsf__links a, .wsf__copy p { font-size: 1rem; line-height: 1.625rem; }
  .wsf__title { font-size: 1.063rem; line-height: 1.688rem; margin-bottom: 0.75rem; }
  .wsf .wsf__social { margin: 1rem 0 1.5rem; }
  .wsf__links { margin-bottom: 1.875rem !important; }
}