/* /employers/ — the employer pillar.
 *
 * Written as a stylesheet from the start rather than extracted from a page
 * body, which is the point of the migration: new pages no longer need to carry
 * their own <style>, so they can be edited through the API from the day they
 * are published.
 *
 * The vocabulary follows the existing pages — uw-pg for the shared chrome, a
 * page-specific prefix (uwe-) for everything else — so the two look like one
 * site rather than one site and a newer page.
 */

.wp-block-post-content > *:first-child,
.entry-content > *:first-child {
  margin-block-start: var(--wp--style--block-gap, 1.2rem);
}

.wp-block-post-title, .entry-title { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; font-size: 0 !important; }
.wp-site-blocks > main { margin-top: 0 !important; padding-top: 0 !important; }
.wp-site-blocks > header, .wp-site-blocks > footer, .skip-link { display: none !important; }
.wp-block-post-content { max-width: none !important; padding: 0 !important; }
.has-global-padding { padding: 0 !important; }
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: none !important; }
html, body { overflow-x: hidden !important; }

.uw-pg { font-family: 'Inter', system-ui, sans-serif; color: #0F172A; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.uw-pg.lang-en .jp { display: none !important; }
.uw-pg.lang-jp .en { display: none !important; }
.uw-pg a { text-decoration: none; color: inherit; }

.uw-pg-n { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 16px 24px; }
.uw-pg-n-logo { font-size: 17px; font-weight: 700; letter-spacing: -.3px; }
.uw-pg-n-logo b { color: #2563EB; }
.uw-pg-n-links { display: flex; gap: 16px; align-items: center; }
.uw-pg-n-links > a { font-size: 14px; color: #475569; font-weight: 500; }
.uw-pg-n-links > a:hover { color: #0F172A; }
.uw-pg-lt { display: flex; border: 1px solid #E2E8F0; border-radius: 6px; overflow: hidden; }
.uw-pg-lt button { padding: 5px 12px; border: none; background: #fff; cursor: pointer; color: #64748B; font-size: 12px; font-weight: 600; }
.uw-pg-lt button.on { background: #0F172A; color: #fff; }
.uw-pg-n-cta { background: #2563EB; color: #fff !important; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; }

/* Hero */
.uwe-hero { background: #0F172A; color: #fff; padding: 88px 24px 96px; }
.uwe-hero-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.uwe-tag { display: inline-block; background: rgba(37, 99, 235, .18); color: #93C5FD; padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; margin-bottom: 24px; }
.uwe-hero h1 { font-size: 44px; line-height: 1.2; font-weight: 800; letter-spacing: -1px; margin: 0 0 20px; text-wrap: balance; }
.uwe-lede { font-size: 18px; color: #CBD5E1; line-height: 1.7; margin: 0 auto 32px; max-width: 640px; }
.uwe-cta-primary { display: inline-block; background: #2563EB; color: #fff !important; padding: 15px 34px; border-radius: 10px; font-weight: 600; font-size: 16px; }
.uwe-cta-primary:hover { background: #1D4ED8; }

/* Sections */
.uwe-s { max-width: 860px; margin: 0 auto; padding: 64px 24px; }
.uwe-s h2 { font-size: 30px; font-weight: 800; letter-spacing: -.6px; margin: 56px 0 20px; text-wrap: balance; }
.uwe-s h2:first-child { margin-top: 0; }
.uwe-s p { font-size: 16px; color: #334155; margin: 0 0 18px; line-height: 1.8; }
.uwe-note { font-size: 15px; color: #475569; background: #F8FAFC; border-left: 3px solid #2563EB; padding: 18px 22px; border-radius: 0 8px 8px 0; }

.uwe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 28px 0; }
.uwe-card { border: 1px solid #E2E8F0; border-radius: 12px; padding: 26px 24px; background: #fff; }
.uwe-card h3 { font-size: 17px; font-weight: 700; margin: 0 0 10px; }
.uwe-card p { font-size: 14.5px; color: #475569; margin: 0; line-height: 1.7; }

.uwe-steps { counter-reset: step; list-style: none; padding: 0; margin: 28px 0; }
.uwe-steps li { position: relative; padding: 0 0 22px 52px; font-size: 16px; color: #334155; line-height: 1.75; }
.uwe-steps li:before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 34px; height: 34px; background: #2563EB; color: #fff; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; }
.uwe-steps b { color: #0F172A; }

.uwe-faq { margin: 24px 0; }
.uwe-q { border-bottom: 1px solid #F1F5F9; padding: 22px 0; }
.uwe-q:last-child { border-bottom: none; }
.uwe-q h3 { font-size: 17px; font-weight: 700; margin: 0 0 8px; }
.uwe-q p { font-size: 15.5px; color: #475569; margin: 0; }

.uwe-links { list-style: none; padding: 0; margin: 20px 0; }
.uwe-links li { padding: 11px 0; border-bottom: 1px solid #F1F5F9; }
.uwe-links a { color: #2563EB; font-weight: 500; font-size: 15.5px; }
.uwe-links a:hover { text-decoration: underline; }

.uwe-cta { background: linear-gradient(135deg, #0F172A, #1E293B); border-radius: 16px; padding: 56px 40px; text-align: center; }
.uwe-cta h2 { color: #fff; font-size: 27px; margin: 0 0 12px; }
.uwe-cta p { color: #94A3B8; font-size: 15.5px; margin: 0 0 26px; }
.uwe-cta a { display: inline-block; background: #2563EB; color: #fff !important; padding: 14px 32px; border-radius: 10px; font-weight: 600; font-size: 15.5px; }

@media (max-width: 860px) {
  .uwe-hero { padding: 56px 20px 64px; }
  .uwe-hero h1 { font-size: 32px; }
  .uwe-grid { grid-template-columns: 1fr; }
  .uwe-s { padding: 48px 20px; }
  .uwe-s h2 { font-size: 25px; }
  .uw-pg-n-links > a { display: none; }
  .uw-pg-n { padding: 14px 18px; }
}

/* Added with the final copy: the talent-pool list, the sub-line under the hero
 * CTA, and the mid-page call to action. An employer decides somewhere in the
 * middle of the page, and the nearest CTA was previously the footer. */
.uwe-hero-sub { font-size: 13.5px; color: #94A3B8; margin: 16px 0 0; }

.uwe-pool { list-style: none; padding: 0; margin: 24px 0; }
.uwe-pool li { position: relative; padding: 14px 0 14px 30px; border-bottom: 1px solid #F1F5F9; font-size: 15.5px; color: #334155; line-height: 1.75; }
.uwe-pool li:last-child { border-bottom: none; }
.uwe-pool li:before { content: ""; position: absolute; left: 4px; top: 23px; width: 8px; height: 8px; border-radius: 50%; background: #2563EB; }
.uwe-pool b { color: #0F172A; font-weight: 700; }

.uwe-cta-mid { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 12px; padding: 22px 26px; margin: 40px 0; }
.uwe-cta-mid p { margin: 0; font-size: 16px; font-weight: 600; color: #0F172A; }
.uwe-cta-mid a { flex-shrink: 0; background: #2563EB; color: #fff !important; padding: 11px 24px; border-radius: 9px; font-weight: 600; font-size: 14.5px; }

@media (max-width: 860px) {
  .uwe-cta-mid { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ---------------------------------------------------------------------------
 * Visual Plan elements — data/visual-plans.json, /employers/
 *
 * Three stretches of prose became a comparison, a stage table and a checklist.
 * They are plain semantic HTML because post content on this host has to be:
 * the WAF rejects any POST body containing <script> or <style>, so structure
 * lives in the markup and presentation lives here.
 *
 * The tables scroll inside themselves on a narrow screen rather than widening
 * the page. Three columns of bilingual text will not fit in 390px at a legible
 * size, and the alternative to a scroll container is either a horizontal
 * scrollbar on the whole document or type below the floor.
 * ------------------------------------------------------------------------- */
.uwe-table {
  width: 100%; border-collapse: collapse; margin: 24px 0 8px;
  font-size: 14.5px; line-height: 1.65;
}
.uwe-table th,
.uwe-table td {
  border: 1px solid #E2E8F0; padding: 12px 14px; text-align: left;
  vertical-align: top; color: #0F172A;
}
.uwe-table thead th {
  background: #F8FAFC; font-weight: 600; font-size: 13.5px;
  color: #0F172A; white-space: nowrap;
}
.uwe-table tbody td:first-child { font-weight: 600; white-space: nowrap; }
.uwe-table-flow tbody td:first-child { color: #1D4ED8; }

.uwe-check { margin: 14px 0 4px; padding-left: 0; list-style: none; }
.uwe-check li {
  position: relative; padding: 7px 0 7px 26px; font-size: 15px;
  line-height: 1.6; color: #0F172A;
}
.uwe-check li::before {
  content: "✓"; position: absolute; left: 0; top: 7px;
  color: #1D4ED8; font-weight: 700;
}

@media (max-width: 768px) {
  .uwe-table { display: block; overflow-x: auto; white-space: normal; }
  .uwe-table thead th,
  .uwe-table tbody td:first-child { white-space: normal; }
  .uwe-table th, .uwe-table td { min-width: 150px; }
}