/* ============================================================
   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.
*/
/* =========================================================
   local-fix.css — bridges legacy Bootstrap quirks to design system
   Loaded AFTER homepage-overrides.css. Fold into homepage-overrides.css
   once stable, then delete.
   ========================================================= */

/* F44 dropped FontAwesome — social icons are now inline SVG in footer.php.
   Removed @import to save a request. */

/* F1 — Bootstrap clearfix pseudos make CSS-grid count extra items.
   Neutralize them inside page-home scope. */
body.page-home .row:before, body.page-home .row:after,
body.page-home .container:before, body.page-home .container:after {
  display: none !important;
  content: none !important;
}

/* F2 — Hero: force left-alignment (legacy .caption / .text-center / inline cl-white were centering content) */
body.page-home .hero,
body.page-home .hero .container,
body.page-home .hero h1,
body.page-home .hero .sub,
body.page-home .hero .eyebrow { text-align: left !important; }
body.page-home .hero .eyebrow { display: inline-flex !important; }

/* F3 — Search card: kill .form-control legacy padding/height/border on inputs inside the design's search-card */
body.page-home .search-card .field input,
body.page-home .search-card .field select {
  height: auto !important;
  line-height: normal !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  background: transparent !important;
  padding: 2px 0 0 !important;
  font-size: var(--size-md) !important;
  color: var(--ink-1) !important;
}
body.page-home .search-card .field input:focus,
body.page-home .search-card .field select:focus {
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  border-color: transparent !important;
}
/* Re-establish the design's label-above-input flow inside .field */
body.page-home .search-card .field {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 2px !important;
}
body.page-home .search-card .field label {
  font-size: 10.5px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  font-weight: var(--weight-medium) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* F4 — Tabs: kill orange Bootstrap theme-bg, restyle to design system + sit on the hero seam */
body.page-home .nav-tabs.theme-bg { background: transparent !important; border: 0 !important; }
body.page-home .nav-tabs.nav-advance {
  display: inline-flex !important;
  gap: 2px !important;
  padding: 4px !important;
  background: var(--surface-0) !important;
  border: 1px solid var(--line-1) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-2) !important;
  margin: calc(var(--space-6) * -1) auto var(--space-8) !important;
  position: relative !important;
  z-index: 2 !important;
  width: auto !important;
  float: none !important;
  list-style: none !important;
}
body.page-home .nav-tabs .nav-item { float: none !important; margin: 0 !important; display: inline-block !important; }
body.page-home .nav-tabs .nav-link {
  padding: var(--space-2) var(--space-4) !important;
  border-radius: 3px !important;
  font-size: var(--size-sm) !important;
  font-weight: var(--weight-medium) !important;
  color: var(--ink-2) !important;
  background: transparent !important;
  border: 0 !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
}
body.page-home .nav-tabs .nav-link:hover { color: var(--ink-1) !important; background: var(--surface-1) !important; }
body.page-home .nav-tabs .nav-link.active,
body.page-home .nav-tabs li.active > .nav-link { background: var(--ink-1) !important; color: #fff !important; }
body.page-home .nav-tabs .nav-link b, body.page-home .nav-tabs .nav-link strong { font-weight: var(--weight-medium) !important; }
body.page-home .nav-tabs .disPlayMObil { display: none !important; }

/* Wrapper: center the tabs above the hero/employers seam */
body.page-home .container > .nav-tabs.nav-advance { display: inline-flex !important; }
body.page-home > section > .container:first-child,
body.page-home section .container { /* keep container as is, just center inline-flex children when needed */ }
body.page-home .tab-content { text-align: left !important; }

/* F5 — Employer cards: design wants 4-col grid of named links, not bulleted list */
body.page-home .sponsorLinksSction { padding: 0 !important; margin: var(--space-6) 0 !important; }
body.page-home .sponsorLinksSction ul {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  column-gap: var(--space-8) !important;
  row-gap: 0 !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.page-home .sponsorLinksSction ul li {
  display: list-item !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--line-1) !important;
}
body.page-home .sponsorLinksSction ul li:before { content: none !important; display: none !important; }
body.page-home .sponsorLinksSction ul li a {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: var(--space-3) !important;
  padding: var(--space-3) 0 !important;
  font-size: var(--size-sm) !important;
  color: var(--ink-1) !important;
  text-decoration: none !important;
  transition: background var(--duration) var(--easing), color var(--duration) var(--easing);
}
body.page-home .sponsorLinksSction ul li a:hover { background: var(--surface-1) !important; color: var(--brand-green) !important; }

/* F6 — Section headings like "Current employers list" — left-align, replace bold-only with design typography */
body.page-home .currentEMP {
  color: var(--ink-1) !important;
  text-align: left !important;
  font-size: var(--size-xl) !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: -0.015em !important;
  line-height: var(--leading-tight) !important;
  margin: var(--space-12) 0 var(--space-6) !important;
}

/* F7 — Suppress the `<br/>` between body and header that adds whitespace */
body.page-home > br:first-of-type { display: none !important; }

/* F8 — Hide legacy elements that fight the design: marrrrr1 paragraph, mar40 spacer if still present */
body.page-home .marrrrr1, body.page-home .mar40 { display: none !important; }

/* ============================================================
   ROUND 2 FIXES
   ============================================================ */

/* F9 — Section spacing: legacy <section> elements lacked the design's
   .section padding; add it for page-home. Also pull tabs onto the hero seam. */
body.page-home > section,
body.page-home section.section,
body.page-home main > section,
body.page-home .container > section {
  padding: var(--space-12) 0 var(--space-8) !important;
}
body.page-home .hero { padding: var(--space-16) 0 var(--space-12) !important; }

/* Tabs nest INSIDE a section; the section has top-padding. Pull tabs up by
   that amount + an extra ~24px to overlap the hero seam. */
body.page-home .nav-tabs.nav-advance {
  margin-top: calc((var(--space-12) + var(--space-6)) * -1) !important;
  margin-bottom: var(--space-10) !important;
}

/* F10 — Employer cards: ellipsis on long names, single line per row */
body.page-home .sponsorLinksSction ul li a {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.page-home .sponsorLinksSction ul li a > * {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0;
}

/* F11 — Category cards inside the tabs panel (the legacy .col-md-3 grid).
   Make them look more like design's clean rows. Light hover. */
body.page-home .grid-job-widget {
  height: auto !important;
  padding: var(--space-3) 0 !important;
  border-bottom: 1px solid var(--line-1) !important;
  margin-bottom: 0 !important;
  background: transparent !important;
}
body.page-home .grid-job-widget h5 {
  margin: 0 !important;
  font-size: var(--size-sm) !important;
  font-weight: var(--weight-medium) !important;
}
body.page-home .grid-job-widget h5 a {
  color: var(--ink-1) !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.page-home .grid-job-widget h5 a:hover { color: var(--brand-green) !important; }
body.page-home .tab-content { padding-top: var(--space-6) !important; }

/* F12 — "Current employers list" section header: container padding + alignment */
body.page-home .currentEMP {
  max-width: 1240px !important;
  margin: var(--space-12) auto var(--space-6) !important;
  padding: 0 var(--space-6) !important;
  text-align: left !important;
  color: var(--ink-1) !important;
}

/* Wrap sponsor section in design container constraints */
body.page-home .sponsorLinksSction {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 var(--space-6) !important;
  width: 100% !important;
}

/* F13 — Hide stray legacy bits that look broken in the new design context */
body.page-home hr { display: none !important; }
body.page-home .marrrrr1, body.page-home .mar40 { display: none !important; }

/* F14 — Tab-pane row should also use grid like design (4 columns, not Bootstrap floats) */
body.page-home .tab-content .row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 var(--space-8) !important;
  margin: 0 !important;
}
body.page-home .tab-content .col-md-3 {
  width: auto !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ============================================================
   ROUND 3 — final positioning + tab content visibility
   ============================================================ */

/* F15 — Don't apply padding-top to the section right after hero (it holds tabs) */
body.page-home .hero + section,
body.page-home .hero ~ section:first-of-type {
  padding-top: 0 !important;
}

/* F16 — Ensure active tab-pane is actually displayed (no Bootstrap fade-out leftovers) */
body.page-home .tab-content .tab-pane.fade.in,
body.page-home .tab-content .tab-pane.active {
  display: block !important;
  opacity: 1 !important;
}
body.page-home .tab-content .tab-pane:not(.in):not(.active) {
  display: none !important;
}

/* F17 — Pull tabs precisely onto the green/white seam.
   Hero bottom padding is var(--space-12) = 48px; we want tabs to overlap
   green by ~24px (half of the tabs' height). */
body.page-home .nav-tabs.nav-advance {
  margin-top: calc(var(--space-6) * -2) !important;  /* -48px */
  margin-bottom: var(--space-8) !important;
}

/* F18 — Kill the dangling/broken bits visible below the footer (orange divider + ghost Sign-up) */
body.page-home footer ~ *, body.page-home footer + * {
  display: none !important;
}

/* ============================================================
   ROUND 4 — final polish: hover underline, tab/section spacing,
   employer cycle, footer social horizontal, footer whitespace
   ============================================================ */

/* F19 — Kill the green underline on tab hover (and any anchor hover inside tabs).
   Keep the subtle background + dark-text hover state. */
body.page-home .nav-tabs .nav-link:hover,
body.page-home .nav-tabs .nav-link:focus,
body.page-home .nav-tabs a:hover,
body.page-home .nav-tabs a:focus { text-decoration: none !important; }

/* F20 — Tighten section padding. The "<section>" holding tabs + category list
   had too much breathing room top and bottom. */
body.page-home .hero + section { padding: 0 0 var(--space-6) !important; }
body.page-home .tab-content { padding-top: var(--space-4) !important; }
body.page-home .tab-content .tab-pane { padding: 0 var(--space-6) !important; }

/* F21 — Employer "stream": kill the legacy 170px clip + JS marquee feel.
   Render the same data as a clean static 4-col grid (already F5). Also
   collapse extra top spacing the section had. */
body.page-home .sponsorLinksSction.scroll-text {
  height: auto !important;
  overflow: visible !important;
  animation: none !important;
}
body.page-home #demo2 { transform: none !important; }

/* Slight padding above the employer list so it doesn't slam into the section above */
body.page-home .sponsorLinksSction { margin-top: var(--space-6) !important; padding-bottom: var(--space-8) !important; }

/* F22 — Footer social icons: horizontal, design-system styled */
body.page-home footer .f-social-box ul {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: var(--space-3) !important;
  list-style: none !important;
  padding: 0 !important;
  margin: var(--space-2) 0 0 !important;
}
body.page-home footer .f-social-box ul li {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.page-home footer .f-social-box ul li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border: 1px solid var(--line-1) !important;
  border-radius: var(--radius-pill) !important;
  color: var(--ink-2) !important;
  background: transparent !important;
  transition: background var(--duration) var(--easing), color var(--duration) var(--easing), border-color var(--duration) var(--easing);
}
body.page-home footer .f-social-box ul li a:hover {
  background: var(--brand-green-tint) !important;
  color: var(--brand-green) !important;
  border-color: var(--brand-green) !important;
}
body.page-home footer .f-social-box ul li a i {
  font-size: 14px !important;
  color: inherit !important;
}

/* F23 — Footer whitespace: tighten bottom padding so it doesn't trail off into nothing */
body.page-home footer { padding-bottom: var(--space-6) !important; }
body.page-home footer .container > .row { padding-bottom: var(--space-6) !important; }

/* F24 — Belt-and-suspenders: kill underline on ALL footer + section anchor hovers
   that aren't specifically overridden by the design system. */
body.page-home footer a:hover,
body.page-home section a:hover { text-decoration: none !important; }

/* ============================================================
   ROUND 5 — full disparity pass (2026-05-26)
   Levi's seven explicit call-outs + comprehensive audit. All fixes
   here, not piecemeal. Replaces patch-then-screenshot loop.
   ============================================================ */

/* F25-pre — Header-right: prevent "Employer Login" from wrapping to 2 lines.
   Force nowrap on both items and give the column auto-width breathing room. */
body.page-home .header .row { grid-template-columns: auto 1fr auto !important; }
body.page-home .header-right { white-space: nowrap !important; flex-shrink: 0 !important; }
body.page-home .header-right .btn-text { white-space: nowrap !important; }
body.page-home .header-right a { white-space: nowrap !important; }

/* F25 — "Sign up" button text centering.
   Bootstrap .btn (common.css L6) injects float:left + vertical-align:middle
   + line-height:1.42857 + text-align:center, which fights the design's
   inline-flex+align-items:center. The float on a flex CHILD doesn't fully
   neutralize but the inherited line-height pushes baseline down ~1px.
   Lock the design's intended geometry hard. */
body.page-home .header-right .btn,
body.page-home .header-right a.btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  padding: 9px 18px !important;
  text-align: center !important;
  white-space: nowrap !important;
  min-height: 36px !important;
}

/* F26 — Hero count/freshness redundancy.
   Eyebrow already says "Live · Canada-wide · N active jobs". The chip below
   the search-card repeats "N active jobs · updated …". Hide the chip; keep
   the trending-links portion of .active-strip visible. Per Levi's call-out #2. */
body.page-home .hero .active-strip .chip { display: none !important; }
body.page-home .hero .active-strip {
  justify-content: flex-end !important;  /* push trending links to the right of where chip was */
}

/* F27 — Hide the category list under the tabs.
   Design's homepage.html shows the two tabs as a control, not as a list-below.
   Legacy renders .tab-content with .grid-job-widget pill cards (green border,
   shadow, ugly). Cleanest: hide the entire .tab-content. Per Levi's call-out #3. */
body.page-home .tab-content { display: none !important; }

/* F28 — Reclaim the vertical employer marquee.
   Three-column grid of single-line employer names, container has fixed
   height + overflow hidden + CSS animation scrolls content upward. Full
   names fit on each line (no ellipsis). Per Levi's call-out #4. */
body.page-home .sponsorLinksSction.scroll-text {
  height: 320px !important;
  max-height: 320px !important;
  overflow: hidden !important;
  position: relative !important;
  max-width: 1240px !important;
  margin: var(--space-6) auto var(--space-10) !important;
  padding: var(--space-3) var(--space-6) !important;
  border-top: 1px solid var(--line-1) !important;
  border-bottom: 1px solid var(--line-1) !important;
  /* Soft fade at top + bottom so names "appear" / "vanish" cleanly */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}
body.page-home .sponsorLinksSction.scroll-text ul {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;  /* 3 wide cols → names fit */
  grid-auto-flow: row !important;
  column-gap: var(--space-8) !important;
  row-gap: 0 !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  animation: wdc-scroll-up 80s linear infinite !important;
  will-change: transform;
}
body.page-home .sponsorLinksSction.scroll-text ul li {
  display: block !important;
  width: auto !important;             /* defeat legacy 25% */
  float: none !important;             /* defeat legacy float:left */
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  list-style: none !important;
  min-width: 0 !important;            /* let grid item shrink-fit content */
}
body.page-home .sponsorLinksSction.scroll-text ul li::before { content: none !important; display: none !important; }
body.page-home .sponsorLinksSction.scroll-text ul li a {
  display: block !important;
  grid-template-columns: none !important;
  white-space: nowrap !important;     /* one line per name */
  overflow: hidden !important;
  text-overflow: clip !important;     /* clip not ellipsis (column is wide enough) */
  padding: 4px 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--ink-2) !important;
  text-decoration: none !important;
  background: transparent !important;
}
body.page-home .sponsorLinksSction.scroll-text ul li a:hover {
  color: var(--brand-green) !important;
  background: transparent !important;
}
body.page-home #demo2 { transform: none !important; }  /* kill jquery scrollbox JS transform */

@keyframes wdc-scroll-up {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

/* F29 — Footer FontAwesome: glyphs aren't loading because no FA stylesheet
   is linked. @import sits at top of this file (above F1). Belt-and-suspenders:
   ALSO paint the social <i> with inline SVG background — works even if FA
   CDN fails. Hide FA's ::before glyph so we don't double-render. */

/* SVG-glyph fallback: paint the icon as a background
   on the <i>. Works even if FA didn't load. */
body.page-home footer .f-social-box ul li a i.fa {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  font-style: normal !important;
}
body.page-home footer .f-social-box ul li a i.fa-facebook {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='%234B5563'><path d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/></svg>") !important;
}
body.page-home footer .f-social-box ul li a i.fa-twitter {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%234B5563'><path d='M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z'/></svg>") !important;
}
body.page-home footer .f-social-box ul li a i.fa-linkedin {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%234B5563'><path d='M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z'/></svg>") !important;
}
/* Hover: tint icon green via mask trick. Keep simple — recolor on hover via filter. */
body.page-home footer .f-social-box ul li a:hover i.fa { filter: hue-rotate(0) brightness(1.05); }
/* Suppress FA's ::before glyph so we don't double-render on top of SVG bg.
   The SVG background is the source of truth; FA is optional. */
body.page-home footer .f-social-box ul li a i.fa::before { content: "" !important; display: none !important; }

/* F30a — THE orange line: it's `.footer.dark-bg .copyright { border-top:
   1px solid #FD6301 }` from style.css L4740. That copyright row is INSIDE
   the footer (it's the "Copyright © 2026" row at the bottom). Border-top
   on it draws across the full footer width = the orange line Levi saw.
   Kill it. */
body.page-home footer .copyright,
body.page-home .footer.dark-bg .copyright {
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  padding-top: var(--space-4) !important;
  margin-top: var(--space-4) !important;
}

/* F30 — "Orange line at the bottom" + empty <div>&nbsp;</div> spacers.
   F18 hides direct siblings of <footer>. But two <div>&nbsp;</div> sit
   BEFORE the footer (between section and footer at lines 1538-1539) adding
   blank rows. Hide them by targeting empty divs at body root. Also: stray
   scripts/styles post-</html> get re-parented to body — F18 catches them
   as footer-siblings. Belt: zero out any body bottom border/decoration. */
body.page-home > div:empty,
body.page-home > div:not([class]):not([id]) { display: none !important; }
body.page-home { border-bottom: 0 !important; box-shadow: none !important; }
body.page-home::after { display: none !important; content: none !important; }
html { border-bottom: 0 !important; }
/* Belt-suspenders on footer-siblings (already in F18 but reinforce with
   universal sibling combinator at any depth via :has() — modern browsers). */
body.page-home > footer ~ * { display: none !important; }
/* Belt: legacy .scroll-text {height:170px; overflow:hidden} from inline <style>
   after </footer> gets applied globally. We already override under .sponsorLinksSction
   in F28. No-op the bare .scroll-text outside that context. */

/* F31 — Footer whitespace: the empty space below the footer was from the
   demo2 inline <style> + scripts being parsed inside body. F30 handles the
   element-side; also tighten the body so the page doesn't run on forever. */
body.page-home main, body.page-home > div:last-of-type { margin-bottom: 0 !important; }
body.page-home footer { margin-bottom: 0 !important; padding-bottom: var(--space-8) !important; }

/* F32 — Section spacing: too much whitespace between employer list end and
   the footer. The sponsor section's bottom padding (F21 added var(--space-8))
   stacks with #currentEmp's section padding (F9: var(--space-12) bottom).
   Collapse the trailing pad. Per Levi's call-out #5. */
body.page-home #currentEmp { padding-bottom: 0 !important; }
body.page-home .sponsorLinksSction.scroll-text + * { display: none !important; }  /* stray <hr> after employer list */

/* F33 — Current employers section header: kill the legacy <hr/> right under
   the "Current employers list" h4 (line 1020 in served HTML). F13 already
   sets hr {display:none}; reinforce inside #currentEmp scope. */
body.page-home #currentEmp hr { display: none !important; }

/* F34 — Footer social icons container: ensure proper size + spacing now
   that backgrounds carry the glyph. Reinforces F22. */
body.page-home footer .f-social-box ul li a {
  background-color: var(--surface-1) !important;
  border-color: var(--line-1) !important;
}
body.page-home footer .f-social-box ul li a:hover {
  background-color: var(--brand-green-tint) !important;
  border-color: var(--brand-green) !important;
}
body.page-home footer .f-social-box ul li a:hover i.fa {
  /* recolor SVG to green on hover via mask-image swap */
  background-image: var(--icon-svg-hover, none);
}

/* F35 — General typography parity with design. The design uses Noto Sans
   throughout; legacy body inherits sans-serif fallback. Force the font on
   page-home <body> + footer (legacy footer has its own font-family rule). */
body.page-home, body.page-home footer, body.page-home footer * {
  font-family: var(--font-sans) !important;
}
body.page-home footer { background: var(--ink-1) !important; color: #fff !important; }
body.page-home footer a, body.page-home footer h4 { color: #fff !important; }
body.page-home footer h4 { font-size: var(--size-sm) !important; font-weight: var(--weight-bold) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; opacity: 0.7; margin: 0 0 var(--space-3) !important; }
body.page-home footer ul li { list-style: none !important; padding: 0 !important; }
body.page-home footer ul li a { font-size: var(--size-sm) !important; line-height: 2 !important; opacity: 0.85 !important; }
body.page-home footer ul li a:hover { opacity: 1 !important; color: var(--brand-orange) !important; }
body.page-home footer .copyright p { font-size: var(--size-xs) !important; opacity: 0.6 !important; margin: var(--space-4) 0 0 !important; }
body.page-home footer .row > .col-md-8 > .row { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: var(--space-6) !important; }
body.page-home footer .col-md-4footer { width: auto !important; float: none !important; padding: 0 !important; }
body.page-home footer .container > .row:first-child { display: grid !important; grid-template-columns: 2fr 1fr !important; gap: var(--space-8) !important; }

/* F36 — Hero h1 weight + size parity. Design uses 36px / weight-bold. */
body.page-home .hero h1 { font-size: var(--size-2xl) !important; font-weight: var(--weight-bold) !important; line-height: var(--leading-tight) !important; letter-spacing: -0.02em !important; }

/* F37 — Tabs centering: design centers the tabs control. Local has it
   pulled left because the wrap is inside a container with grid. Force center. */
body.page-home .container > .nav-tabs.nav-advance,
body.page-home .hero + section .container { text-align: center !important; }
body.page-home .nav-tabs.nav-advance { margin-left: auto !important; margin-right: auto !important; }

/* ============================================================
   ROUND 6 — vertical proportions site-wide + tabs clickable
   + social icons inline-SVG + footer tighten + mobile parity
   ============================================================ */

/* F38 — Tighten the tabs-section: had ~120px+ trailing gap before the
   "Current employers list" header. Section had var(--space-12) top
   (F9) + nav-tabs negative margin still left a big bottom gap. Lock
   it to a tight rhythm and zero out the section's bottom pad. */
body.page-home .hero + section,
body.page-home .hero ~ section:first-of-type {
  padding: 0 0 var(--space-4) !important;
  margin-bottom: 0 !important;
}
body.page-home .nav-tabs.nav-advance {
  margin-bottom: var(--space-4) !important;
}

/* F39 — Tabs CLICKABLE: when JS toggles .tabs-open on parent section,
   reveal the tab-content. Default stays hidden (matches design). */
body.page-home .tab-content { display: none !important; }
body.page-home section.tabs-open .tab-content,
body.page-home section:has(.nav-tabs .nav-link.active.is-open) .tab-content {
  display: block !important;
  padding-top: var(--space-6) !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  text-align: left !important;
}

/* F40 — "Current employers list" header: tighten top margin (was
   var(--space-12) ~64px). Bring header closer to tabs. */
body.page-home #currentEmp { padding-top: var(--space-4) !important; padding-bottom: 0 !important; }
body.page-home .currentEMP,
body.page-home #currentEmp .currentEMP,
body.page-home h4.currentEMP.mar-70 {
  margin: var(--space-6) auto var(--space-4) !important;
}

/* F41 — Employer marquee: tighten its surrounding gaps (top + bottom). */
body.page-home .sponsorLinksSction.scroll-text {
  margin: var(--space-4) auto var(--space-6) !important;
}

/* F42 — Footer: tighten vertical padding. Was var(--space-8) (F31). */
body.page-home footer {
  padding-top: var(--space-6) !important;
  padding-bottom: var(--space-4) !important;
  margin-bottom: 0 !important;
}
body.page-home footer .container > .row {
  padding-bottom: var(--space-5) !important;
}
body.page-home footer .container > .row:last-child {
  padding-bottom: 0 !important;
}
body.page-home footer .copyright {
  margin-top: var(--space-3) !important;
  padding-top: var(--space-3) !important;
}
body.page-home footer .copyright p {
  margin: 0 !important;
}

/* F43 — Kill any residual whitespace below footer. The body sometimes
   gets trailing inline scripts/styles parsed as body children. F18
   already hides footer siblings; reinforce body height. */
body.page-home { margin-bottom: 0 !important; padding-bottom: 0 !important; }
html, body { min-height: 0 !important; }

/* F44 — Social icons: replace FontAwesome with inline SVG. Hide any
   leftover <i> and style the <a> as a clean circular button. */
body.page-home footer .f-social-box ul {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: var(--space-2) 0 0 !important;
}
body.page-home footer .f-social-box ul li {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.page-home footer .f-social-box ul li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: all 120ms ease;
  opacity: 0.85;
}
body.page-home footer .f-social-box ul li a:hover {
  background: var(--brand-green) !important;
  color: #fff !important;
  border-color: var(--brand-green) !important;
  opacity: 1;
}
body.page-home footer .f-social-box ul li a svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
}
/* Hide any leftover FontAwesome <i> (F29 SVG-bg trick) — we use inline SVG now */
body.page-home footer .f-social-box ul li a i,
body.page-home footer .f-social-box ul li a i.fa {
  display: none !important;
  background-image: none !important;
}

/* F45 — Mobile (≤768px): stack footer columns, single-column employer
   grid, smaller hero, center tabs cleanly. */
@media (max-width: 768px) {
  body.page-home .hero { padding: var(--space-10) 0 var(--space-8) !important; }
  body.page-home .hero h1 { font-size: var(--size-xl) !important; }
  body.page-home .hero .sub { font-size: var(--size-sm) !important; }

  body.page-home .nav-tabs.nav-advance {
    margin-top: calc(var(--space-5) * -1) !important;
    margin-bottom: var(--space-4) !important;
  }
  body.page-home .nav-tabs .nav-link { padding: var(--space-2) var(--space-3) !important; font-size: 12px !important; }

  body.page-home .sponsorLinksSction.scroll-text ul {
    grid-template-columns: 1fr 1fr !important;
    column-gap: var(--space-4) !important;
  }
  body.page-home .sponsorLinksSction.scroll-text { height: 260px !important; padding: var(--space-3) var(--space-4) !important; }

  /* Footer stacks */
  body.page-home footer .container > .row:first-child {
    display: block !important;
  }
  body.page-home footer .row > .col-md-8 > .row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-5) !important;
    margin-bottom: var(--space-5) !important;
  }
  body.page-home footer .col-md-4footer { margin-bottom: var(--space-4) !important; }
  body.page-home footer { padding: var(--space-5) var(--space-4) !important; }
  body.page-home footer .container { padding: 0 !important; }

  body.page-home .header-right .btn,
  body.page-home .header-right a.btn-primary { padding: 6px 10px !important; font-size: 11px !important; min-height: 26px !important; line-height: 1 !important; }
  /* Belt: ensure body never scrolls horizontally on mobile */
  body.page-home { overflow-x: hidden !important; }

  /* F46 — Mobile header: prevent right side from overflowing. Hide
     brand tagline + USA-site link, tighten gaps. */
  body.page-home .header { padding: 8px 12px !important; }
  body.page-home .header .row {
    gap: 6px !important;
    grid-template-columns: 1fr auto !important;
    display: grid !important;
  }
  body.page-home .header .brand .tag,
  body.page-home .header-mid,
  body.page-home .header .usa-link { display: none !important; }
  body.page-home .header-right {
    gap: 6px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
    justify-content: flex-end !important;
  }
  body.page-home .header-right > a:not(.btn) { font-size: 11px !important; white-space: nowrap !important; }
  body.page-home .header .brand .wordmark { font-size: 18px !important; }
  body.page-home .header .container.row { padding: 0 12px !important; }

  /* F47 — Mobile nav (Home/Employer/etc.): allow wrap, smaller font */
  body.page-home nav, body.page-home .main-nav, body.page-home .navbar {
    font-size: 12px !important;
  }

  /* F48 — Mobile footer columns: ensure they fit inside viewport. The
     legacy grid has fixed widths; force fluid. */
  body.page-home footer .container,
  body.page-home footer .row {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  body.page-home footer .col-md-8,
  body.page-home footer .col-md-4footer,
  body.page-home footer .col-sm-8,
  body.page-home footer .col-sm-4 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* F49 — Kill any trailing blank space below footer on mobile too */
  body.page-home footer { padding-bottom: var(--space-3) !important; }

  /* F50 — Mobile social icons: ensure the column displays inline icons.
     Some Bootstrap legacy may set list-style oddities; nail them. */
  body.page-home footer .f-social-box {
    margin-top: var(--space-3) !important;
    display: block !important;
  }
  body.page-home footer .f-social-box ul { display: flex !important; flex-wrap: wrap !important; }
  body.page-home footer .f-social-box ul li { display: inline-block !important; }
  body.page-home footer .f-social-box ul li a {
    width: 36px !important; height: 36px !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    color: #fff !important;
  }
}

/* F51 — Social icons visibility. Footer renders LIGHT (white bg) on this
   page despite F35 trying to set dark. Match light context: dark glyph,
   gray border, green hover. */
body.page-home footer .f-social-box ul li a {
  border: 1px solid var(--line-1, #E5E7EB) !important;
  background: var(--surface-0, #fff) !important;
  color: var(--ink-2, #4B5563) !important;
  opacity: 1 !important;
}
body.page-home footer .f-social-box ul li a:hover {
  background: var(--brand-green, #10B981) !important;
  border-color: var(--brand-green, #10B981) !important;
  color: #fff !important;
}
body.page-home footer .f-social-box ul li a svg { fill: currentColor !important; }
body.page-home footer .f-social-box h4 { margin-bottom: 12px !important; }


/* ============================================================
   ROUND 7 — Sign up hover stability + footer link rhythm
   ============================================================ */

/* F52 — Sign up button hover: defeat legacy width:100% / height:46px expansion.
   Match Find Jobs behavior (darker orange, no size change). */
body.page-home .btn.btn-primary:hover,
body.page-home .btn.btn-primary:focus,
body.page-home a.btn.btn-primary:hover,
body.page-home a.btn.btn-primary:focus {
  width: auto !important;
  height: auto !important;
  padding: 9px 16px !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--brand-orange-hover) !important;
  background: var(--brand-orange-hover) !important;
  color: #fff !important;
  transform: none !important;
  font-size: var(--size-sm) !important;
  font-weight: var(--weight-medium) !important;
  line-height: 1.2 !important;
}

/* F53 — Footer link spacing: tighten the vertical rhythm between menu items.
   Legacy used margin-bottom:15px + line-height:0.8 which made huge gaps. */
body.page-home footer .footer ul li a,
body.page-home footer ul li a {
  margin-bottom: 6px !important;
  line-height: 1.4 !important;
  font-size: var(--size-sm) !important;
  font-weight: var(--weight-regular) !important;
  display: block !important;
}

/* F54 — Footer link hover: kill the legacy font-size jump on hover (15px → 16px bold).
   Match design: subtle color change only. */
body.page-home footer .footer ul li a:hover,
body.page-home footer .footer ul li a:focus,
body.page-home footer ul li a:hover,
body.page-home footer ul li a:focus {
  font-size: var(--size-sm) !important;
  font-weight: var(--weight-regular) !important;
  color: var(--ink-1) !important;
  text-decoration: none !important;
}

/* F55 — Footer column headers (h4): less space below to keep them paired with links */
body.page-home footer h4,
body.page-home footer .footer h4 { margin-bottom: var(--space-3) !important; }

body.page-home .active-strip--links-only{justify-content:flex-end !important}

/* ── Cross-browser header fix (Chrome + Safari/WebKit) — 2026-05-28 ──────────
   Root cause: a global `grid-template-columns:auto 1fr auto !important` forced
   3 columns at ALL widths, but compact fixes only applied <768px. The 768–1080
   zone had no room → WebKit wrapped it badly (Safari), Blink less so (Chrome).
   Fix: below 1080 drop the secondary USA link and use a clean 2-col brand|actions
   layout that cannot cram; below 560 stack cleanly. */
@media (max-width:1080px){
  body.page-home .header .row{grid-template-columns:auto auto !important;justify-content:space-between !important;gap:var(--space-3) !important}
  body.page-home .header-mid,body.page-home .header .usa-link{display:none !important}
  body.page-home .header-right{flex-wrap:nowrap !important;justify-content:flex-end !important}
  body.page-home .header .brand .wordmark{font-size:20px !important}
}
@media (max-width:560px){
  body.page-home .header .row{grid-template-columns:1fr !important;justify-content:start !important;row-gap:var(--space-2) !important}
  body.page-home .header-right{justify-content:flex-start !important}
}

/* ── Mobile polish (≤560) — match reference mobile design — 2026-05-28 ──── */
@media (max-width:560px){
  html,body.page-home{overflow-x:hidden;max-width:100%}
  /* header: brand stacked, compact actions row, USA link hidden */
  body.page-home .header .row{grid-template-columns:1fr !important;row-gap:var(--space-3) !important}
  body.page-home .header-right{display:flex !important;justify-content:flex-start !important;align-items:center;gap:var(--space-3) !important;flex-wrap:nowrap !important}
  body.page-home .header-right a.btn-primary{width:auto !important;display:inline-flex !important;align-items:center;padding:9px 18px !important;font-size:14px !important;min-height:0 !important;border-radius:8px}
  body.page-home .header-right .btn-text{font-size:14px !important;padding:0 !important}
  /* nav: wrap cleanly instead of clipping */
  body.page-home .nav ul{flex-wrap:wrap !important;row-gap:2px}
  body.page-home .nav a{padding:6px 10px !important}
  /* hero: contain within viewport, comfortable padding */
  body.page-home .hero .container,body.page-home .container{padding-left:18px !important;padding-right:18px !important}
  body.page-home .hero .sub,body.page-home .hero h1{max-width:100%}
  /* trending strip wraps within viewport (chip already removed) */
  body.page-home .active-strip{flex-wrap:wrap !important;justify-content:flex-start !important;row-gap:var(--space-2)}
  body.page-home .active-strip .links{flex-wrap:wrap !important;justify-content:flex-start !important}
  /* search button full-width tap target but inside the card */
  body.page-home .search-card button.submit{width:auto !important}
}
/* ── Mobile overflow containment — legacy fixed-width elements (scrollbox, banner) ── */
@media (max-width:560px){
  body.page-home #demo2,body.page-home .sponsorLinksSction,body.page-home .scroll-text,body.page-home #currentEmp{width:auto !important;max-width:100% !important;overflow-x:hidden !important}
  body.page-home .fadeImg,body.page-home .fadeImg img{max-width:100% !important;width:auto !important}
  body.page-home section,body.page-home .hero,body.page-home .nav,body.page-home .header{max-width:100vw;overflow-x:clip}
  body.page-home .nav .container,body.page-home .nav ul{max-width:100% !important}
}