/* Workforce Benefits Access V5
   Stronger card contrast, motion, and CTA correction */

/* =====================================================
   CTA FIX — ensure ghost/secondary buttons are readable
===================================================== */

body.ha-work .button.button-ghost,
body.ha-work a.button.button-ghost{
  background:#ffffff !important;
  color:#0b6170 !important;
  border:2px solid rgba(11,97,112,.32) !important;
  box-shadow:
    0 10px 24px rgba(6,45,73,.10),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
  text-shadow:none !important;
}

body.ha-work .button.button-ghost:hover,
body.ha-work a.button.button-ghost:hover{
  color:#ffffff !important;
  background:linear-gradient(135deg,#0a8992,#08729a) !important;
  border-color:#0a8992 !important;
  box-shadow:
    0 16px 34px rgba(10,137,146,.24),
    0 0 0 4px rgba(10,137,146,.08) !important;
  transform:translateY(-3px);
}

/* Keep primary CTA visually dominant */
body.ha-work .hero .actions .button:not(.button-ghost){
  position:relative;
  isolation:isolate;
  overflow:hidden;
  box-shadow:
    0 14px 32px rgba(9,145,160,.26),
    0 0 0 1px rgba(255,255,255,.08) inset !important;
}

body.ha-work .hero .actions .button:not(.button-ghost)::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-35%;
  width:28%;
  height:220%;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  animation:wbaCtaSweep 4.8s ease-in-out infinite;
  pointer-events:none;
  z-index:-1;
}

/* =====================================================
   RESOURCE / CONTENT CARD CONTRAST
===================================================== */

body.ha-work .resource-grid > a,
body.ha-work .resource-grid > article,
body.ha-work .benefit-grid > article,
body.ha-work .benefit-grid > div,
body.ha-work .audience-grid > a,
body.ha-work .employer-grid > article,
body.ha-work .route-card,
body.ha-work .recommendation,
body.ha-work .secondary-route,
body.ha-work .check-grid label,
body.ha-work .choice-grid button,
body.ha-work .timing-grid button{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    linear-gradient(160deg,#ffffff 0%,#f7fbfc 58%,#eff8f9 100%) !important;
  border:1px solid rgba(7,82,99,.18) !important;
  box-shadow:
    0 12px 30px rgba(6,45,73,.10),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    box-shadow .28s ease,
    border-color .28s ease,
    background .28s ease !important;
}

/* colored accent line */
body.ha-work .resource-grid > a::before,
body.ha-work .resource-grid > article::before,
body.ha-work .benefit-grid > article::before,
body.ha-work .benefit-grid > div::before,
body.ha-work .audience-grid > a::before,
body.ha-work .employer-grid > article::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,#10aab4,#24b986,#f5b52e);
  opacity:.88;
  transform:scaleX(.35);
  transform-origin:left;
  transition:transform .35s ease,opacity .35s ease;
  z-index:2;
}

/* ambient corner glow */
body.ha-work .resource-grid > a::after,
body.ha-work .resource-grid > article::after,
body.ha-work .benefit-grid > article::after,
body.ha-work .benefit-grid > div::after,
body.ha-work .audience-grid > a::after,
body.ha-work .employer-grid > article::after{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  right:-55px;
  bottom:-60px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(16,170,180,.16),transparent 68%);
  transition:transform .35s ease,opacity .35s ease;
  opacity:.65;
  pointer-events:none;
  z-index:-1;
}

@media (hover:hover){
  body.ha-work .resource-grid > a:hover,
  body.ha-work .resource-grid > article:hover,
  body.ha-work .benefit-grid > article:hover,
  body.ha-work .benefit-grid > div:hover,
  body.ha-work .audience-grid > a:hover,
  body.ha-work .employer-grid > article:hover,
  body.ha-work .route-card:hover,
  body.ha-work .secondary-route:hover{
    transform:translateY(-7px) scale(1.008);
    border-color:rgba(10,137,146,.38) !important;
    box-shadow:
      0 22px 44px rgba(6,45,73,.16),
      0 0 0 1px rgba(16,170,180,.07) inset !important;
    background:
      linear-gradient(160deg,#ffffff 0%,#f4fbfc 52%,#eaf8f8 100%) !important;
  }

  body.ha-work .resource-grid > a:hover::before,
  body.ha-work .resource-grid > article:hover::before,
  body.ha-work .benefit-grid > article:hover::before,
  body.ha-work .benefit-grid > div:hover::before,
  body.ha-work .audience-grid > a:hover::before,
  body.ha-work .employer-grid > article:hover::before{
    transform:scaleX(1);
  }

  body.ha-work .resource-grid > a:hover::after,
  body.ha-work .resource-grid > article:hover::after,
  body.ha-work .benefit-grid > article:hover::after,
  body.ha-work .benefit-grid > div:hover::after,
  body.ha-work .audience-grid > a:hover::after,
  body.ha-work .employer-grid > article:hover::after{
    transform:scale(1.35);
    opacity:1;
  }
}

/* Stronger card typography */
body.ha-work .resource-grid h3,
body.ha-work .resource-grid h4,
body.ha-work .benefit-grid h3,
body.ha-work .benefit-grid h4,
body.ha-work .audience-grid strong,
body.ha-work .employer-grid h3,
body.ha-work .route-card h3,
body.ha-work .recommendation h4{
  color:#0c3545 !important;
}

body.ha-work .resource-grid p,
body.ha-work .benefit-grid p,
body.ha-work .audience-grid small,
body.ha-work .employer-grid p,
body.ha-work .route-card p,
body.ha-work .recommendation p,
body.ha-work .secondary-route small{
  color:#45636f !important;
}

/* =====================================================
   ONBOARDING CHOICE CARDS
===================================================== */

body.ha-work .choice-grid button,
body.ha-work .timing-grid button,
body.ha-work .check-grid label{
  color:#173b49 !important;
}

body.ha-work .choice-grid button:hover,
body.ha-work .timing-grid button:hover,
body.ha-work .check-grid label:hover{
  transform:translateY(-4px);
  border-color:rgba(10,137,146,.42) !important;
  box-shadow:0 16px 32px rgba(6,45,73,.14) !important;
}

body.ha-work .choice-grid button.selected,
body.ha-work .timing-grid button.selected,
body.ha-work .check-grid label:has(input:checked){
  background:
    linear-gradient(145deg,#e7f9f8,#f7fcfc) !important;
  border-color:#0a9299 !important;
  box-shadow:
    0 16px 34px rgba(10,146,153,.15),
    0 0 0 3px rgba(10,146,153,.08) !important;
}

/* =====================================================
   SUBTLE IDLE MOTION
===================================================== */

body.ha-work .resource-grid > :nth-child(3n+1),
body.ha-work .benefit-grid > :nth-child(3n+1){
  animation:wbaCardDrift 8s ease-in-out infinite;
}

body.ha-work .resource-grid > :nth-child(3n+2),
body.ha-work .benefit-grid > :nth-child(3n+2){
  animation:wbaCardDrift 9.5s ease-in-out infinite reverse;
}

body.ha-work .resource-grid > :nth-child(3n),
body.ha-work .benefit-grid > :nth-child(3n){
  animation:wbaCardDrift 11s ease-in-out infinite;
  animation-delay:-2.5s;
}

/* Avoid distracting motion during interaction */
body.ha-work .resource-grid > *:hover,
body.ha-work .benefit-grid > *:hover{
  animation-play-state:paused;
}

/* =====================================================
   MOBILE TUNING
===================================================== */

@media(max-width:620px){
  body.ha-work .hero .actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:11px !important;
  }

  body.ha-work .hero .actions .button{
    width:100% !important;
    min-height:50px !important;
  }

  body.ha-work .resource-grid > a,
  body.ha-work .resource-grid > article,
  body.ha-work .benefit-grid > article,
  body.ha-work .benefit-grid > div,
  body.ha-work .audience-grid > a,
  body.ha-work .employer-grid > article{
    box-shadow:
      0 11px 26px rgba(6,45,73,.11),
      inset 0 1px 0 rgba(255,255,255,.85) !important;
  }

  /* Keep mobile motion subtle */
  body.ha-work .resource-grid > *,
  body.ha-work .benefit-grid > *{
    animation-duration:12s !important;
  }
}

/* Respect reduced-motion accessibility */
@media(prefers-reduced-motion:reduce){
  body.ha-work *,
  body.ha-work *::before,
  body.ha-work *::after{
    animation:none !important;
    transition-duration:.01ms !important;
  }
}

@keyframes wbaCardDrift{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}

@keyframes wbaCtaSweep{
  0%,18%{left:-40%;opacity:0}
  28%{opacity:.72}
  46%{left:125%;opacity:0}
  100%{left:125%;opacity:0}
}