/* Demo-only presentation for job-discovery-demo. Kept separate from the production CSS files
   (variables/base/layout/components.css, copied verbatim from job-discovery) so those stay
   byte-for-byte traceable to the real V1 frontend, and every demo-specific addition lives in one
   clearly-scoped place. Intentionally small and visually secondary per the demo product contract
   (disclosure + reset must never dominate the real UI). Reset Demo itself reuses the production
   .text-link primitive (components.css) rather than a demo-specific link style. */

/* Groups the footer's text content (byline, disclosure, Reset Demo) into one column so they sit
   together on the opposite side of the footer from the LinkedIn icon, same two-child
   space-between layout .global-nav-footer already uses. Alignment (center -> flex-start) and gap
   (8px -> 16px at the same 768px breakpoint) mirror the existing .lead-card__role/.lead-card__post
   text-stack pattern in components.css rather than introducing new spacing values. */
.global-nav-footer__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

@media (min-width: 768px) {
  .global-nav-footer__group {
    align-items: flex-start;
    gap: 16px;
  }
}

.demo-disclosure {
  font: var(--text-caption-mobile);
  color: var(--text-secondary);
  text-align: center;
  margin: 0;
}

@media (min-width: 768px) {
  .demo-disclosure {
    font: var(--text-caption-desktop);
    text-align: left;
  }
}

/* .text-link carries its own built-in hit-target padding (components.css: 8px 12px mobile,
   12px 16px tablet+) so its label sits inset from its edges by design everywhere else it's used
   (e.g. "Edit Prompt", standalone/centered). Here it's stacked flush against left-aligned plain
   text (byline, disclosure), so the same padding reads as a stray left/top offset. Negative
   margins exactly matching that padding pull the *visible label* back flush with the group while
   leaving the padding — and therefore the full click/tap target — untouched; the primitive itself
   isn't modified, only this one instance's box position. */
.global-nav-footer__reset {
  margin: -8px -12px;
}

@media (min-width: 768px) {
  .global-nav-footer__reset {
    margin: -12px -16px;
  }
}