/* ==========================================================================
   FixHire Design System
   Companion plugin global stylesheet: tokens + layout/component utilities.

   Scope:   page-body template kit only (no header / mega menu / footer).
   Prefix:  fh- (classes), --fh- (custom properties).
   Breakpoints (from FIXHIRE_DESIGN_SYSTEM.md s4.4):
     Desktop      1025px+
     Tablet       768px - 1024px
     Mobile       <= 767px
     Small mobile <= 480px
   All classes are theme-neutral and future-ready for a custom FixHire theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --fh-blue: #0F2A8C;
  --fh-blue-hover: #0c2273;
  --fh-red: #DA0025;
  --fh-red-hover: #b8001f;
  --fh-skyblue: #e8f3ff;

  /* Product Studio packages */
  --fh-clarify: #1245b4;
  --fh-validate: #3f8946;
  --fh-launch: #7132af;
  --fh-scale: #e77414;

  /* Product pale backgrounds */
  --fh-clarify-bg: #EEF4FF;
  --fh-validate-bg: #EEF8F0;
  --fh-launch-bg: #F4EEFF;
  --fh-scale-bg: #FFF3EA;

  /* Venture Studio stages */
  --fh-pre-validate: #e2ab1e;
  --fh-pre-launch: #1e8f9f;
  --fh-pre-scale: #6443aa;
  --fh-post-scale: #df6724;

  /* Venture pale backgrounds */
  --fh-pre-validate-bg: #FFF8E8;
  --fh-pre-launch-bg: #EAFBFC;
  --fh-pre-scale-bg: #F4F0FF;
  --fh-post-scale-bg: #FFF1EA;

  /* Neutrals */
  --fh-ink: #101828;
  --fh-text: #344054;
  --fh-muted: #667085;
  --fh-border: #E5EAF3;
  --fh-border-soft: #EEF2F7;
  --fh-bg: #FFFFFF;
  --fh-bg-soft: #F6FAFF;
  --fh-icon-bg: #EEF4FF;
  --fh-card: #FFFFFF;

  /* Status / utility */
  --fh-success: #3f8946;
  --fh-warning: #e2ab1e;
  --fh-danger: #DA0025;

  /* Typography */
  --fh-font: Inter, "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Radius */
  --fh-radius-xs: 6px;
  --fh-radius-sm: 8px;
  --fh-radius-md: 12px;
  --fh-radius-lg: 16px;
  --fh-radius-xl: 20px;
  --fh-radius-pill: 999px;

  /* Shadows */
  --fh-shadow-card: 0 8px 24px rgba(15, 42, 140, 0.04);
  --fh-shadow-soft: 0 12px 32px rgba(16, 24, 40, 0.06);

  /* Layout */
  --fh-container: 1180px;
  --fh-container-wide: 1240px;
  --fh-section-pad: 80px;
  --fh-section-pad-compact: 56px;
  --fh-gap-card: 20px;

  /* Per-context accent + pale bg. Defaults to brand; overridden by accent classes. */
  --fh-accent: var(--fh-blue);
  --fh-accent-bg: var(--fh-icon-bg);

  /* Focus ring */
  --fh-focus: 0 0 0 3px rgba(15, 42, 140, 0.35);
}

/* --------------------------------------------------------------------------
   2. Accent context classes
   Apply to a section / page wrapper so child components inherit the colour.
   -------------------------------------------------------------------------- */
.fh-accent-clarify      { --fh-accent: var(--fh-clarify);      --fh-accent-bg: var(--fh-clarify-bg); }
.fh-accent-validate     { --fh-accent: var(--fh-validate);     --fh-accent-bg: var(--fh-validate-bg); }
.fh-accent-launch       { --fh-accent: var(--fh-launch);       --fh-accent-bg: var(--fh-launch-bg); }
.fh-accent-scale        { --fh-accent: var(--fh-scale);        --fh-accent-bg: var(--fh-scale-bg); }
.fh-accent-pre-validate { --fh-accent: var(--fh-pre-validate); --fh-accent-bg: var(--fh-pre-validate-bg); }
.fh-accent-pre-launch   { --fh-accent: var(--fh-pre-launch);   --fh-accent-bg: var(--fh-pre-launch-bg); }
.fh-accent-pre-scale    { --fh-accent: var(--fh-pre-scale);    --fh-accent-bg: var(--fh-pre-scale-bg); }
.fh-accent-post-scale   { --fh-accent: var(--fh-post-scale);   --fh-accent-bg: var(--fh-post-scale-bg); }

/* --------------------------------------------------------------------------
   3. Base scope
   Only applied where the kit's wrapper class is present, to stay theme-neutral.
   -------------------------------------------------------------------------- */
.fh-scope,
.fh-section,
.fh-container {
  box-sizing: border-box;
}
/* Defensive guard: page bodies never scroll horizontally. Uses clip (not hidden)
   so it creates no scroll container and does not affect the vertical overlap cards. */
.fh-scope { overflow-x: clip; }
.fh-scope *,
.fh-section *,
.fh-container * {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   4. Layout utilities
   -------------------------------------------------------------------------- */
.fh-container {
  width: 100%;
  max-width: var(--fh-container);
  margin-inline: auto;
  padding-inline: 20px;
}
.fh-container-wide { max-width: var(--fh-container-wide); }

.fh-section {
  padding-block: var(--fh-section-pad);
}
.fh-section-compact {
  padding-block: var(--fh-section-pad-compact);
}
.fh-section-soft { background: var(--fh-bg-soft); }
.fh-section-sky  { background: var(--fh-skyblue); }
.fh-section-accent-bg { background: var(--fh-accent-bg); }

/* Grids */
.fh-grid { display: grid; gap: var(--fh-gap-card); }
.fh-grid-2 { grid-template-columns: repeat(2, 1fr); }
.fh-grid-3 { grid-template-columns: repeat(3, 1fr); }
.fh-grid-4 { grid-template-columns: repeat(4, 1fr); }
.fh-grid-5 { grid-template-columns: repeat(5, 1fr); }
.fh-grid-6 { grid-template-columns: repeat(6, 1fr); }
.fh-grid-7 { grid-template-columns: repeat(7, 1fr); }
.fh-grid-auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Split (two-column editorial / hero) */
.fh-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.fh-split-reverse > :first-child { order: 2; }
.fh-split-reverse > :last-child  { order: 1; }

/* --------------------------------------------------------------------------
   5. Typography utilities
   -------------------------------------------------------------------------- */
.fh-scope, .fh-section, .fh-container { font-family: var(--fh-font); color: var(--fh-text); }

.fh-h1 { font-size: clamp(34px, 5vw, 60px); line-height: 1.1; font-weight: 700; color: var(--fh-ink); margin: 0 0 16px; }
.fh-h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.2; font-weight: 700; color: var(--fh-ink); margin: 0 0 14px; }
.fh-h3 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.25; font-weight: 700; color: var(--fh-ink); margin: 0 0 12px; }
.fh-card-title { font-size: 17px; line-height: 1.3; font-weight: 600; color: var(--fh-ink); margin: 0 0 8px; }

.fh-lead { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.7; color: var(--fh-text); }
.fh-body { font-size: 16px; line-height: 1.7; color: var(--fh-text); }
.fh-small { font-size: 14px; line-height: 1.6; color: var(--fh-muted); }
.fh-meta { font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--fh-muted); }

.fh-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--fh-accent);
  margin: 0 0 12px;
}
.fh-eyebrow-numbered {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fh-accent);
  margin: 0 0 12px;
}

.fh-section-header { margin-bottom: 40px; }
.fh-section-header--center { max-width: 700px; margin-inline: auto; text-align: center; }
.fh-section-header--split { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.fh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--fh-radius-sm);
  border: 1px solid transparent;
  font-family: var(--fh-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.fh-btn .fh-icon { transition: transform .18s ease; }
.fh-btn:hover .fh-icon { transform: translateX(2px); }

.fh-btn-primary { background: var(--fh-blue); color: #fff; border-color: var(--fh-blue); }
.fh-btn-primary:hover { background: var(--fh-blue-hover); border-color: var(--fh-blue-hover); }

.fh-btn-secondary { background: #fff; color: var(--fh-red); border-color: var(--fh-red); }
.fh-btn-secondary:hover { background: #fff5f6; }

.fh-btn-outline-blue { background: #fff; color: var(--fh-blue); border-color: var(--fh-blue); }
.fh-btn-outline-blue:hover { background: var(--fh-icon-bg); }

.fh-btn-outline-red { background: #fff; color: var(--fh-red); border-color: var(--fh-red); }
.fh-btn-outline-red:hover { background: #fff5f6; }

/* Accent-driven buttons for package / stage pages */
.fh-btn-package, .fh-btn-stage { background: var(--fh-accent); color: #fff; border-color: var(--fh-accent); }
.fh-btn-package:hover, .fh-btn-stage:hover { filter: brightness(0.93); }
.fh-btn-accent-outline { background: #fff; color: var(--fh-accent); border-color: var(--fh-accent); }
.fh-btn-accent-outline:hover { background: var(--fh-accent-bg); }

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.fh-card {
  background: var(--fh-card);
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius-md);
  padding: 24px;
}
.fh-card-compact { padding: 20px; border-radius: var(--fh-radius-sm); }
.fh-card-large { padding: 32px; border-radius: var(--fh-radius-lg); }
.fh-card-soft { background: var(--fh-bg-soft); border-color: var(--fh-border-soft); }
.fh-card-accent { border-color: color-mix(in srgb, var(--fh-accent) 35%, var(--fh-border)); }
.fh-card-equal { display: flex; flex-direction: column; height: 100%; }
.fh-card-equal .fh-card-cta { margin-top: auto; }

.fh-card-clickable { transition: border-color .18s ease, box-shadow .18s ease; }
.fh-card-clickable:hover {
  border-color: color-mix(in srgb, var(--fh-accent) 45%, transparent);
  box-shadow: var(--fh-shadow-card);
}

/* Icon holder used in icon cards */
.fh-icon-card .fh-icon-holder,
.fh-icon-holder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--fh-radius-sm);
  background: var(--fh-accent-bg);
  color: var(--fh-accent);
  margin-bottom: 16px;
}
.fh-icon-holder--round { border-radius: var(--fh-radius-pill); }

/* Package / stage cards share anatomy; accent comes from context class */
.fh-package-card, .fh-stage-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius-lg);
  padding: 28px;
}
.fh-package-card .fh-icon-holder,
.fh-stage-card .fh-icon-holder { background: var(--fh-accent-bg); color: var(--fh-accent); }

.fh-legal-panel {
  background: #fff;
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius-sm);
  padding: 24px;
}
.fh-trust-card {
  background: var(--fh-bg-soft);
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius-lg);
  padding: 28px;
}

/* --------------------------------------------------------------------------
   8. CTA utilities
   -------------------------------------------------------------------------- */
.fh-bottom-cta, .fh-cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: var(--fh-skyblue);
  border-radius: var(--fh-radius-xl);
  padding: 48px;
}
.fh-cta-band__actions { display: flex; gap: 12px; flex-shrink: 0; }
.fh-cta-card {
  position: relative;
  overflow: hidden;
  background: var(--fh-accent-bg);
  border-radius: var(--fh-radius-lg);
  padding: 36px;
}
.fh-trust-cta { --fh-accent: var(--fh-pre-scale); background: var(--fh-pre-scale-bg); }
.fh-legal-cta { background: var(--fh-bg-soft); }

.fh-contact-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.fh-contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--fh-ink);
  text-decoration: none;
}
.fh-contact-chip .fh-icon { color: var(--fh-accent); }

/* Decorative CTA pattern placeholder (real SVG arrives Batch 2) */
.fh-cta-pattern {
  position: absolute;
  inset: 0 0 0 auto;
  width: 40%;
  pointer-events: none;
  background:
    radial-gradient(circle at 80% 20%, rgba(15,42,140,.06) 0 2px, transparent 3px) 0 0/22px 22px;
  opacity: .6;
}

/* --------------------------------------------------------------------------
   9. Timeline
   -------------------------------------------------------------------------- */
.fh-timeline { display: grid; gap: 24px; }
.fh-timeline-horizontal { grid-auto-flow: column; grid-auto-columns: 1fr; }
.fh-timeline-vertical { grid-auto-flow: row; }
.fh-timeline-step { position: relative; padding-top: 8px; }
.fh-timeline-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--fh-radius-pill);
  background: var(--fh-accent-bg);
  color: var(--fh-accent);
  font-weight: 700;
  margin-bottom: 12px;
}
.fh-timeline-connector { height: 2px; background: var(--fh-border); }

/* --------------------------------------------------------------------------
   10. FAQ
   -------------------------------------------------------------------------- */
.fh-faq-grid { display: grid; gap: 16px; }
.fh-faq-grid-2 { grid-template-columns: repeat(2, 1fr); }
.fh-faq-grid-3 { grid-template-columns: repeat(3, 1fr); }

.fh-faq-item {
  background: #fff;
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius-sm);
  overflow: hidden;
}
.fh-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
  background: transparent;
  border: 0;
  font-family: var(--fh-font);
  font-size: 15px;
  font-weight: 600;
  color: var(--fh-ink);
  text-align: left;
  cursor: pointer;
}
.fh-faq-answer { padding: 0 18px 16px; color: var(--fh-text); font-size: 14px; line-height: 1.65; overflow: hidden; transition: height .22s ease; }
.fh-faq-answer p { margin: 0; }

/* Plus / minus icon driven by aria-expanded */
.fh-faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--fh-accent);
}
.fh-faq-icon::before,
.fh-faq-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform .18s ease, opacity .18s ease;
}
.fh-faq-icon::before { top: 8px; left: 0; width: 18px; height: 2px; }
.fh-faq-icon::after  { left: 8px; top: 0; width: 2px; height: 18px; }
.fh-faq-question[aria-expanded="true"] .fh-faq-icon::after { opacity: 0; transform: scaleY(0); }

/* --------------------------------------------------------------------------
   11. Forms (structural; field styling lives in fixhire-forms.css)
   -------------------------------------------------------------------------- */
.fh-form-card {
  background: #fff;
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius-lg);
  padding: 32px;
}
.fh-form-card--placeholder {
  background: var(--fh-bg-soft);
  border-style: dashed;
  text-align: center;
}
.fh-form-row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.fh-form-field { display: flex; flex-direction: column; gap: 6px; }
.fh-form-field--full { grid-column: 1 / -1; }
.fh-form-note { font-size: 13px; color: var(--fh-muted); margin: 8px 0 0; }

/* --------------------------------------------------------------------------
   12. Legal matrix
   -------------------------------------------------------------------------- */
.fh-legal-grid { display: grid; gap: 16px; }
.fh-legal-grid-4 { grid-template-columns: repeat(4, 1fr); }
.fh-legal-grid-5 { grid-template-columns: repeat(5, 1fr); }
.fh-legal-number { font-weight: 700; color: var(--fh-blue); }

/* Permitted / not-permitted: never colour alone (icon + text required) */
.fh-legal-yes { color: var(--fh-success); }
.fh-legal-no { color: var(--fh-danger); }

/* --------------------------------------------------------------------------
   13. Icons
   -------------------------------------------------------------------------- */
.fh-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   14. Trust shield (placeholder; full SVG in Batch 2)
   -------------------------------------------------------------------------- */
.fh-trust-shield {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fh-blue);
}
.fh-trust-shield__svg { display: block; width: 100%; height: auto; }
.fh-trust-shield--large { width: 240px; max-width: 100%; }
.fh-trust-shield--medium { width: 168px; max-width: 100%; }
.fh-trust-shield--small { width: 104px; max-width: 100%; }
/* Icon-based fallback sizing (if a glyph is used instead of the full SVG). */
.fh-trust-shield--large .fh-icon { width: 120px; height: 120px; }
.fh-trust-shield--medium .fh-icon { width: 88px; height: 88px; }
.fh-trust-shield--small .fh-icon { width: 56px; height: 56px; }

/* --------------------------------------------------------------------------
   15. Helpers
   -------------------------------------------------------------------------- */
.fh-stack-mobile { /* opt-in: forces stacking at mobile (see media queries) */ }
.fh-list-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fh-list-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--fh-text); }
.fh-list-checks li .fh-icon { color: var(--fh-accent); margin-top: 2px; }
.fh-img { display: block; width: 100%; height: auto; border-radius: var(--fh-radius-lg); }

/* Accessibility: visible focus on all interactive elements within the kit */
.fh-scope a:focus-visible,
.fh-scope button:focus-visible,
.fh-scope input:focus-visible,
.fh-scope select:focus-visible,
.fh-scope textarea:focus-visible,
.fh-btn:focus-visible,
.fh-faq-question:focus-visible,
.fh-contact-chip:focus-visible {
  outline: none;
  box-shadow: var(--fh-focus);
}

/* --------------------------------------------------------------------------
   16. Responsive: Tablet (768px - 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --fh-section-pad: 64px; --fh-section-pad-compact: 48px; }
  .fh-container { padding-inline: 32px; }

  .fh-split { gap: 48px; }
  .fh-grid-3, .fh-grid-4, .fh-grid-5,
  .fh-grid-6, .fh-grid-7 { grid-template-columns: repeat(2, 1fr); }
  .fh-timeline-horizontal { grid-auto-flow: row; }
  .fh-faq-grid-2, .fh-faq-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .fh-legal-grid-4, .fh-legal-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .fh-cta-band, .fh-bottom-cta { padding: 36px; }
}

/* --------------------------------------------------------------------------
   16b. Responsive: Tablet hero stacking (<= 900px)
   Heroes stack below ~900px per RESPONSIVE_RULES.md. Targets only split heroes
   (.fh-split.fh-hero), leaving editorial/deliverables splits 2-col on tablet.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .fh-split.fh-hero { grid-template-columns: 1fr; gap: 32px; }
}

/* --------------------------------------------------------------------------
   17. Responsive: Mobile (<= 767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root { --fh-section-pad: 48px; --fh-section-pad-compact: 40px; }
  .fh-container { padding-inline: 20px; }

  .fh-split,
  .fh-split-reverse > :first-child,
  .fh-split-reverse > :last-child { grid-template-columns: 1fr; order: 0; }
  .fh-split { gap: 28px; }

  .fh-grid-2, .fh-grid-3, .fh-grid-4, .fh-grid-5,
  .fh-grid-6, .fh-grid-7, .fh-grid-auto { grid-template-columns: 1fr; }

  .fh-section-header--split { flex-direction: column; align-items: flex-start; }

  .fh-faq-grid-2, .fh-faq-grid-3 { grid-template-columns: 1fr; }
  .fh-legal-grid-4, .fh-legal-grid-5 { grid-template-columns: 1fr; }

  .fh-form-row { grid-template-columns: 1fr; }

  .fh-bottom-cta, .fh-cta-band { flex-direction: column; align-items: stretch; text-align: left; padding: 28px; }
  .fh-cta-band__actions { flex-direction: column; }
  .fh-cta-pattern { display: none; }

  /* Full-width CTAs on mobile */
  .fh-btn-full-mobile,
  .fh-bottom-cta .fh-btn,
  .fh-cta-band .fh-btn { width: 100%; }

  .fh-timeline-horizontal { grid-auto-flow: row; }
}

/* --------------------------------------------------------------------------
   18. Responsive: Small mobile (<= 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .fh-card, .fh-package-card, .fh-stage-card, .fh-form-card { padding: 20px; }
  .fh-h1 { font-size: clamp(30px, 8vw, 40px); }
}

/* --------------------------------------------------------------------------
   19. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}