/* ==========================================================================
   HireBeep — content pages (guides, legal, company)
   --------------------------------------------------------------------------
   WHY THIS FILE EXISTS
   index.html is a marketing page: short strings inside heavily styled boxes,
   authored with inline `style=`. The content pages are the opposite — long
   prose that has to stay readable for several screens — so they are authored
   as semantic markup + classes and get their typography from here. Nothing in
   this file is loaded by index.html; link it only from the content pages.

   Follows the same rule as css/layout.css: layout that must react to viewport
   width lives here as a class, never in an inline `style=` (inline style beats
   any stylesheet rule, so a media query could never override it).

   READING MEASURE
   Body copy is 17px/1.7 and the column is capped at 68ch. That's wider type
   than the marketing page's 14-15px, on purpose: those sizes are tuned for
   glanceable card blurbs, and reading three screens of regulation at 14px is
   punishing. The 68ch cap is the reason .hb-doc-layout hands the prose column
   a fixed max rather than letting it fill the grid track.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ANCHOR TARGETS
   layout.css offsets `section[id]` and `footer[id]` for the sticky nav. On
   these pages the link targets are headings inside <main>, which that
   selector doesn't reach — without this, clicking a TOC entry parks the
   heading underneath the nav pill.
   -------------------------------------------------------------------------- */
.hb-prose :is(h2, h3)[id],
.hb-doc-section[id] { scroll-margin-top: 96px; }

/* ==========================================================================
   PAGE HEADER
   ========================================================================== */
.hb-doc-hero {
  position: relative;
  overflow: hidden; /* clips the glow blob to the header band */
  padding: clamp(28px, 5vw, 44px) clamp(20px, 5vw, 24px) clamp(36px, 6vw, 56px);
  border-bottom: 1px solid var(--border);
}

/* Decorative wash, echoing the home page hero without its parallax layers. */
.hb-doc-hero::before {
  content: "";
  position: absolute;
  top: -220px;
  left: 50%;
  width: 900px;
  height: 420px;
  margin-left: -450px;
  background: radial-gradient(closest-side, rgba(255, 207, 45, .28), transparent);
  pointer-events: none;
}

.hb-doc-hero > * { position: relative; } /* above the wash */

.hb-doc-hero-inner { max-width: 860px; margin: 0 auto; }

.hb-doc-title {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  letter-spacing: var(--ls-tight);
  line-height: 1.06;
  color: var(--text-strong);
  font-size: clamp(32px, 5.6vw, 50px);
  margin: 0;
}

.hb-doc-lead {
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 660px;
  margin: 18px 0 0;
}

/* --- breadcrumbs --------------------------------------------------------- */
.hb-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--text-subtle);
  margin-bottom: 18px;
}
.hb-crumbs a { color: var(--text-muted); font-weight: var(--fw-semibold); }
.hb-crumbs a:hover { color: var(--yellow-600); }
.hb-crumbs-sep { color: var(--cream-400); }

/* --- the eyebrow chip above the title ------------------------------------ */
.hb-doc-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 7px;
  margin-bottom: 18px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-xs);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-body);
}
.hb-doc-tag-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--yellow-100);
  color: var(--yellow-600);
}

/* --- "Last reviewed" / reading-time meta row ----------------------------- */
.hb-doc-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 24px;
  font-size: var(--fs-sm);
  color: var(--text-subtle);
}
.hb-doc-meta-item { display: inline-flex; align-items: center; gap: 7px; }

/* ==========================================================================
   DOC LAYOUT — sticky table of contents beside the prose
   ========================================================================== */
.hb-doc-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 64px) clamp(20px, 5vw, 24px) clamp(56px, 8vw, 80px);
}

/* Below the nav breakpoint the sidebar can't be sticky in any useful way —
   it would eat the top of a phone screen. It becomes a normal block above the
   prose, collapsed into a <details> in the markup. */
@media (max-width: 900px) {
  .hb-doc-layout { grid-template-columns: 1fr; }
}

.hb-toc {
  position: sticky;
  top: 96px; /* clears the sticky nav pill */
  /* Long TOCs must not run past the viewport with no way to reach the end. */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
@media (max-width: 900px) {
  .hb-toc { position: static; max-height: none; }
}

.hb-toc-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 14px;
}

.hb-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 2px solid var(--border);
}
.hb-toc-list a {
  display: block;
  padding: 7px 0 7px 14px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}
.hb-toc-list a:hover {
  color: var(--ink-700);
  border-left-color: var(--brand);
}

/* Mobile: the TOC ships inside <details>. Style the summary as a real control
   rather than leaving the browser's default triangle. */
.hb-toc-details {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 4px 16px;
}
.hb-toc-details > summary {
  cursor: pointer;
  padding: 12px 0;
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  list-style: none;
}
.hb-toc-details > summary::-webkit-details-marker { display: none; }
.hb-toc-details > summary::after {
  content: "＋";
  float: right;
  color: var(--text-subtle);
  font-weight: var(--fw-regular);
}
.hb-toc-details[open] > summary::after { content: "－"; }
.hb-toc-details .hb-toc-list { margin-bottom: 12px; }

/* On desktop the sidebar is always visible, so the disclosure wrapper must not
   behave like one. */
@media (min-width: 901px) {
  .hb-toc-details {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  .hb-toc-details > summary { display: none; }
}

/* ==========================================================================
   PROSE
   ========================================================================== */
.hb-prose {
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-body);
}

.hb-prose > p { margin: 0 0 20px; }

.hb-prose h2 {
  font-family: var(--font-display);
  font-size: clamp(23px, 3vw, 29px);
  font-weight: var(--fw-extra);
  letter-spacing: var(--ls-snug);
  line-height: 1.2;
  color: var(--text-strong);
  margin: 52px 0 16px;
  padding-top: 4px;
}
.hb-prose > h2:first-child { margin-top: 0; }

.hb-prose h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--fw-bold);
  line-height: 1.35;
  color: var(--text-strong);
  margin: 34px 0 12px;
}

.hb-prose h4 {
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  margin: 26px 0 8px;
}

/* Body links must be unmistakably links. base.css paints every <a> in
   --text-link (ink-700) with no underline — which is the same colour as body
   copy, so an inline citation would be invisible mid-sentence. */
.hb-prose a:not(.hb-btn-brand):not(.hb-chip) {
  color: var(--ink-700);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-decoration-color: var(--yellow-500);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.hb-prose a:not(.hb-btn-brand):not(.hb-chip):hover {
  color: var(--yellow-700);
  text-decoration-color: var(--yellow-600);
}

.hb-prose strong { font-weight: var(--fw-bold); color: var(--text-strong); }

.hb-prose ul,
.hb-prose ol { margin: 0 0 20px; padding-left: 22px; }
.hb-prose li { margin-bottom: 9px; padding-left: 4px; }
.hb-prose li::marker { color: var(--yellow-600); font-weight: var(--fw-bold); }

.hb-prose hr {
  height: 1px;
  border: 0;
  background: var(--border);
  margin: 44px 0;
}

.hb-prose code {
  font-family: var(--font-mono);
  font-size: .87em;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--cream-200);
  color: var(--ink-700);
}

.hb-prose blockquote {
  margin: 0 0 22px;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--brand);
  font-size: 16px;
  color: var(--text-muted);
}
.hb-prose blockquote p { margin: 0; }

/* A definition-style list for "term → what it means" runs. */
.hb-deflist { margin: 0 0 22px; }
.hb-deflist dt {
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  margin-top: 16px;
}
.hb-deflist dd {
  margin: 4px 0 0;
  color: var(--text-muted);
}

/* ==========================================================================
   CALLOUTS
   `.hb-callout` is the neutral base; the modifiers only retint it.
   ========================================================================== */
.hb-callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 24px;
  padding: 18px 20px;
  background: var(--cream-100);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-size: 15px;
  line-height: 1.62;
}
.hb-callout p { margin: 0; }
.hb-callout p + p { margin-top: 10px; }
.hb-callout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--ink-700);
}
.hb-callout-title {
  display: block;
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  margin-bottom: 4px;
}

.hb-callout--brand { background: var(--yellow-50); border-color: var(--yellow-200); }

.hb-callout--warn { background: var(--amber-100); border-color: var(--amber-500); }
.hb-callout--warn .hb-callout-icon { background: var(--amber-500); color: #fff; }

.hb-callout--info { background: var(--blue-100); border-color: var(--blue-500); }
.hb-callout--info .hb-callout-icon { background: var(--blue-500); color: #fff; }

.hb-callout--ok { background: var(--success-bg); border-color: var(--success); }
.hb-callout--ok .hb-callout-icon { background: var(--success); color: #fff; }

/* ==========================================================================
   TODO PLACEHOLDER
   --------------------------------------------------------------------------
   Marks a fact only HireBeep can supply — a legal entity, a DPO address, a
   retention period. These are deliberately loud. A half-written privacy policy
   that *looks* finished is worse than no policy at all: it is a representation
   to candidates and regulators, and on a site whose entire pitch is
   compliance-first it is the most expensive possible place to bluff. If one of
   these ever reaches production it should be impossible to miss.

   Do not "tidy" this style. Fill the blanks and delete the element.
   ========================================================================== */
.hb-todo {
  display: block;
  margin: 0 0 20px;
  padding: 16px 18px;
  background: repeating-linear-gradient(
    45deg,
    var(--amber-100),
    var(--amber-100) 12px,
    #FEF6E4 12px,
    #FEF6E4 24px
  );
  border: 2px dashed var(--amber-500);
  border-radius: var(--radius-md);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--amber-700);
}
.hb-todo-label {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  background: var(--amber-500);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  vertical-align: 1px;
}
.hb-todo code {
  background: rgba(255, 255, 255, .6);
  color: var(--amber-700);
}

/* Page-level banner for a document that is entirely a scaffold. */
.hb-draft-banner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px clamp(20px, 5vw, 24px);
  background: var(--amber-500);
  color: var(--ink-900);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  text-align: center;
}
.hb-draft-banner strong { font-weight: var(--fw-extra); }

/* ==========================================================================
   TABLES
   ========================================================================== */
/* A regulation table has real columns and will not survive a 360px phone.
   Let it scroll inside its own box rather than widen the page. */
.hb-table-wrap {
  margin: 0 0 24px;
  overflow-x: auto;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.hb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  /* Stops a long cell from collapsing its neighbours to one word per line. */
  min-width: 520px;
}
.hb-table th,
.hb-table td {
  padding: 13px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.hb-table th {
  background: var(--cream-100);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.hb-table tr:last-child td { border-bottom: none; }
.hb-table td strong { color: var(--text-strong); }
.hb-table-cite {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ==========================================================================
   FACT / FEATURE CARDS
   ========================================================================== */
.hb-factgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 0 0 28px;
}
.hb-fact {
  padding: 20px 22px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.hb-fact-k {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--fw-extra);
  line-height: 1.1;
  color: var(--text-strong);
}
.hb-fact-v {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: 6px;
}

/* ==========================================================================
   TIMELINE — dated obligations (the AI Act's staged application)
   ========================================================================== */
.hb-timeline {
  list-style: none;
  margin: 0 0 28px;
  padding: 0 0 0 26px;
  border-left: 2px solid var(--border);
}
.hb-timeline > li {
  position: relative;
  padding: 0 0 26px 4px;
  margin: 0;
}
.hb-timeline > li:last-child { padding-bottom: 0; }
.hb-timeline > li::before {
  content: "";
  position: absolute;
  left: -33px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--cream-400);
  border: 2px solid var(--surface-canvas);
}
/* The entry that matters most on the page. */
.hb-timeline > li[data-now]::before {
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--yellow-100);
}
.hb-timeline > li[data-done]::before { background: var(--success); }
.hb-timeline-date {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  color: var(--yellow-700);
}
.hb-timeline-title {
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  margin: 2px 0 4px;
}
.hb-timeline-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* ==========================================================================
   CHIPS / TAGS
   ========================================================================== */
.hb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--cream-100);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
}
.hb-chip--brand { background: var(--yellow-100); border-color: var(--yellow-200); color: var(--yellow-800); }
.hb-chiprow { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 22px; }

/* ==========================================================================
   SOURCES
   Every regulatory claim on these pages is footnoted to a primary source.
   ========================================================================== */
.hb-sources {
  margin: 48px 0 0;
  padding: 24px 26px;
  background: var(--cream-200);
  border-radius: var(--radius-lg);
}
.hb-sources-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.hb-sources ol {
  margin: 0;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
}
.hb-sources li { margin-bottom: 9px; }
.hb-sources a { color: var(--ink-600); text-decoration: underline; text-decoration-color: var(--cream-400); }
.hb-sources a:hover { color: var(--yellow-700); }

/* ==========================================================================
   RELATED PAGES
   ========================================================================== */
.hb-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.hb-related-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.hb-related-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.hb-related-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}
.hb-related-card-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
/* The whole card is the hit target, so the title must not also look clickable
   in its own right. */
.hb-related-card:hover .hb-related-card-title { color: var(--yellow-700); }

/* ==========================================================================
   CLOSING CTA — a lighter echo of index.html's, sized for a doc page
   ========================================================================== */
.hb-doc-cta {
  position: relative;
  overflow: hidden;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 56px) clamp(24px, 4vw, 48px);
  background: var(--surface-inverse);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.hb-doc-cta::before {
  content: "";
  position: absolute;
  top: -90px;
  right: -50px;
  width: 320px;
  height: 320px;
  background: radial-gradient(closest-side, rgba(255, 207, 45, .22), transparent);
  pointer-events: none;
}
.hb-doc-cta > * { position: relative; }
.hb-doc-cta-title {
  font-family: var(--font-display);
  font-size: clamp(21px, 3vw, 27px);
  font-weight: var(--fw-extra);
  letter-spacing: var(--ls-snug);
  line-height: 1.2;
  color: #fff;
  margin: 0;
}
.hb-doc-cta-body {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
  margin: 10px 0 0;
  max-width: 520px;
}
.hb-doc-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ==========================================================================
   CONTACT / CAREERS BLOCKS
   ========================================================================== */
.hb-panel-card {
  padding: clamp(22px, 3vw, 30px);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.hb-role {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px 22px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  margin-bottom: 12px;
}
.hb-role-title { font-size: 17px; font-weight: var(--fw-bold); color: var(--text-strong); }
.hb-role-meta { font-size: 13.5px; color: var(--text-muted); margin-top: 4px; }

/* ==========================================================================
   PRINT — legal pages get printed and filed; the chrome should not come along
   ========================================================================== */
@media print {
  .hb-navbar,
  .hb-doc-cta,
  .hb-toc,
  #hb-progress,
  footer { display: none !important; }

  .hb-doc-layout { display: block; padding: 0; }
  .hb-prose { max-width: none; font-size: 11pt; }
  .hb-doc-hero::before { display: none; }
  /* Unstyled, a TODO prints as invisible cream-on-white. */
  .hb-todo { border: 2px dashed #000; background: none; color: #000; }
}