/* ============================================================
   homepage-overrides.css — CSS-only refresh, no markup changes
   ------------------------------------------------------------
   Load AFTER all existing legacy CSS. Uses tokens.css.

   This file overrides the LEGACY class names that already exist
   in the WorkDirectory.ca homepage markup. We DO NOT change the
   HTML structure — we just retarget the visual layer.

   STATUS LEGEND
     [SEEDED]  — derived from default.css; should work as-is.
     [TODO]    — needs verification against live HTML. Claude Code,
                 inspect the homepage in DevTools, identify the
                 real selector, and replace this placeholder.
   ============================================================ */

/* ────────────── 0 · Type & body ────────────── */
/* [SEEDED] Replace Arial/Verdana site-wide for the homepage only.
   We scope to a wrapper added to the homepage body — see brief. */

body.page-home,
body.page-home p,
body.page-home a,
body.page-home div,
body.page-home span,
body.page-home li,
body.page-home td {
  font-family: var(--font-sans) !important;
}

body.page-home {
  color: var(--ink-1);
  font-size: var(--size-md);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

body.page-home h1, body.page-home h2, body.page-home h3, body.page-home h4 {
  font-family: var(--font-sans) !important;
  letter-spacing: -0.015em;
  color: var(--ink-1);
}

/* ────────────── 1 · Brand colors ────────────── */
/* [SEEDED] These all override default.css's #FD6301 / #0B480B with
   the reconciled tokens. */

body.page-home .theme-cl,
body.page-home p a,
body.page-home a.theme-cl {
  color: var(--brand-orange) !important;
}

/* ────────────── 2 · Buttons ────────────── */
/* [SEEDED] Map the legacy button classes onto the system buttons. */

/* Primary green button on the legacy site (e.g., "Find Jobs" submit) */
body.page-home .theme-btn,
body.page-home a.theme-btn,
body.page-home button.theme-btn {
  background: var(--brand-green) !important;
  border: 1px solid var(--brand-green) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  height: 44px;
  padding: 0 18px;
  font-weight: var(--weight-medium);
  font-size: var(--size-sm);
  transition: background var(--duration) var(--easing);
}
body.page-home .theme-btn:hover,
body.page-home .theme-btn:focus,
body.page-home a.theme-btn:hover {
  background: var(--brand-green-deep) !important;
  border-color: var(--brand-green-deep) !important;
  color: #fff !important;
}

/* Orange outlined button → primary orange CTA (Sign up etc.) */
body.page-home .btn.theme-btn-outlined,
body.page-home a.theme-btn-outlined,
body.page-home .btn-signup,
body.page-home a.btn-signup,
body.page-home .red-btn,
body.page-home a.red-btn {
  background: var(--brand-orange) !important;
  border: 1px solid var(--brand-orange) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
}
body.page-home .btn.theme-btn-outlined:hover,
body.page-home a.theme-btn-outlined:hover,
body.page-home .btn-signup:hover {
  background: var(--brand-orange-hover) !important;
  border-color: var(--brand-orange-hover) !important;
  color: #fff !important;
}

/* Light buttons → ghost style */
body.page-home .btn.light-btn,
body.page-home a.light-btn {
  background: var(--surface-0) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink-1) !important;
}
body.page-home .btn.light-btn:hover {
  background: var(--surface-1) !important;
  color: var(--ink-1) !important;
}

/* ────────────── 3 · Hero / main banner ────────────── */
/* [SEEDED] The legacy uses .main-banner with a :before overlay.
   We retune the overlay to the new gradient. */

body.page-home .main-banner {
  background-color: var(--brand-green) !important;
}
body.page-home .main-banner:before {
  background: linear-gradient(180deg, var(--brand-green) 0%, var(--brand-green-deep) 100%) !important;
  opacity: 1 !important;
}

/* Hero headline — [TODO] verify the actual selector for the H1
   inside .main-banner. Likely .main-banner h1 or .banner-content h1. */
body.page-home .main-banner h1,
body.page-home .banner-content h1 {
  font-size: var(--size-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: #fff;
  max-width: 18ch;
}
body.page-home .main-banner p,
body.page-home .banner-content p {
  font-size: var(--size-lg);
  color: rgba(255,255,255,0.82);
  max-width: 52ch;
}

/* ────────────── 4 · Navigation (Bootstrap "bootsnav") ────────────── */
/* [SEEDED] default.css references nav.navbar.bootsnav — Bootstrap pattern.
   Override the visual styles only; keep all of Bootstrap's behavior. */

body.page-home nav.navbar.bootsnav {
  background: var(--surface-0) !important;
  border-bottom: 1px solid var(--line-1) !important;
  box-shadow: none !important;
}
body.page-home nav.navbar.bootsnav ul.nav > li > a {
  color: var(--ink-2) !important;
  font-weight: var(--weight-medium);
  font-size: var(--size-sm);
  padding: var(--space-3) var(--space-4) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body.page-home nav.navbar.bootsnav ul.nav > li > a:hover,
body.page-home nav.navbar.bootsnav ul.nav > li.active > a {
  color: var(--ink-1) !important;
  background: var(--surface-1) !important;
}

/* Specifically restyle the sign-up CTA already referenced in default.css */
body.page-home nav.navbar.bootsnav ul.nav > li > a.btn-signup.red-btn {
  background: var(--brand-orange) !important;
  color: #fff !important;
  border-radius: var(--radius-sm);
}

/* ────────────── 5 · Search box ────────────── */
/* [TODO] Identify the search form wrapper on the homepage.
   Likely .banner-search, .job-search, or .advance-search. */

body.page-home .banner-search,
body.page-home .job-search,
body.page-home .advance-search {
  background: var(--surface-0) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-2);
  padding: 6px !important;
}
body.page-home .banner-search input[type="text"],
body.page-home .banner-search input[type="search"],
body.page-home .banner-search select {
  border: 0 !important;
  background: transparent !important;
  font-size: var(--size-md) !important;
  color: var(--ink-1) !important;
  height: auto;
  box-shadow: none !important;
}
body.page-home .banner-search button[type="submit"] {
  background: var(--brand-orange) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  font-weight: var(--weight-medium);
}

/* ────────────── 6 · Cards / company / category boxes ────────────── */
/* [SEEDED] default.css references .cmp-overview, .category-box.
   These likely render the homepage's content blocks. */

body.page-home .cmp-overview,
body.page-home .category-box,
body.page-home .package {
  background: var(--surface-0) !important;
  border: 1px solid var(--line-1) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}
body.page-home .cmp-overview .cmp-icon i.fa,
body.page-home .category-box .category-desc i {
  background: var(--surface-1) !important;
  color: var(--brand-green) !important;
  border-radius: var(--radius-sm) !important;
}

/* ────────────── 7 · Tabs (nav-tabs.nav-advance) ────────────── */
/* [SEEDED] default.css references .nav-tabs.nav-advance. */

body.page-home .nav-tabs.nav-advance {
  border-bottom: 1px solid var(--line-1) !important;
}
body.page-home .nav-tabs.nav-advance > li > a {
  color: var(--ink-2) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  font-weight: var(--weight-medium);
}
body.page-home .nav-tabs.nav-advance > li.active > a,
body.page-home .nav-tabs.nav-advance > li > a:hover,
body.page-home .nav-tabs.nav-advance > li > a:focus {
  color: var(--brand-green) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--brand-green) !important;
}

/* ────────────── 8 · Pagination ────────────── */
/* [SEEDED] */

body.page-home .pagination > li > a,
body.page-home .pagination > li > span {
  color: var(--ink-2) !important;
  border-color: var(--line-1) !important;
  background: var(--surface-0) !important;
}
body.page-home .pagination > .active > a,
body.page-home .pagination > .active > span {
  background: var(--brand-green) !important;
  border-color: var(--brand-green) !important;
  color: #fff !important;
}
body.page-home .pagination li:first-child a {
  background: var(--surface-0) !important;
  border-color: var(--line-1) !important;
  color: var(--ink-2) !important;
}

/* ────────────── 9 · Footer ────────────── */
/* [SEEDED] default.css references .footer. */

body.page-home .footer {
  background: var(--surface-0) !important;
  color: var(--ink-2) !important;
  border-top: 1px solid var(--line-1) !important;
}
body.page-home .footer h4 {
  color: var(--ink-3) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--size-xs);
  font-weight: var(--weight-medium);
}
body.page-home .footer a {
  color: var(--ink-2) !important;
}
body.page-home .footer a:hover {
  color: var(--ink-1) !important;
}
body.page-home .footer .f-social-box ul li a i:hover {
  background: var(--brand-green) !important;
  border-color: var(--brand-green) !important;
}

/* ────────────── 10 · Generic Bootstrap shape overrides ────────────── */
/* [SEEDED] Job Hill theme uses Bootstrap's .btn and rounded corners
   throughout. Soften those to match the system. */

body.page-home .btn {
  border-radius: var(--radius-sm) !important;
  font-weight: var(--weight-medium) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body.page-home .form-control {
  border-radius: var(--radius-sm) !important;
  border-color: var(--line-2) !important;
  box-shadow: none !important;
  font-size: var(--size-md);
  color: var(--ink-1);
}
body.page-home .form-control:focus {
  border-color: var(--brand-green) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-green) 18%, transparent) !important;
}

/* ────────────── 11 · Sections / spacing ────────────── */
/* [TODO] These are guesses. Verify the homepage section classes
   and adjust padding to match the new system rhythm. */

body.page-home section,
body.page-home .section-padding {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

/* ────────────── TODO catalog ────────────── */
/*
   To finish this file, Claude Code needs to inspect the live homepage
   and confirm or replace selectors for:

   - Hero headline & subhead containers
   - The search box wrapper (banner-search vs job-search vs other)
   - The "Active Jobs Count" element near the search
   - The Jobs by Category / Jobs by Location tabs container
   - The employer list rows (likely an .item-list or .company-list)
   - The "Visit our USA site" link
   - The mobile hamburger menu (if any) — leave Bootstrap behavior
     intact, just retune visual

   For each: open DevTools on the live page, copy the element's
   most specific class chain, add an override block following the
   pattern above. Always use body.page-home as the prefix.
*/