/* ==========================================================================
   HireBeep — layout & responsive behaviour
   --------------------------------------------------------------------------
   WHY THIS FILE EXISTS
   The page was authored with layout in inline `style=` attributes. Inline
   style beats any stylesheet rule, so a media query could never override it —
   which is why the site had no responsive behaviour at all and simply clipped
   everything past the viewport edge. Layout that must change with viewport
   width lives here, as classes; purely decorative inline style (colour,
   border, shadow) is left in the markup where it does no harm.

   RULE: if you add a layout declaration here, delete it from the element's
   inline style — otherwise the inline value silently wins and this file
   appears to do nothing.

   BREAKPOINTS
     1024px  side-by-side feature panels stack
      900px  3-up card grids go 2-up; desktop nav becomes a menu
      640px  everything is single column
   ========================================================================== */

/* --- anchor targets ------------------------------------------------------
   The nav is sticky, so an un-offset #anchor jump parks the section heading
   underneath it. This matters more now that the mobile menu makes those
   in-page links the primary way to navigate. Keep roughly in step with the
   nav's height (18px band padding + ~62px pill). */
:is(section, footer)[id] { scroll-margin-top: 96px; }

/* --- containers & section rhythm ---------------------------------------- */
/* Fluid padding: no breakpoint needed, scales continuously down to phones. */
.hb-container { max-width: 1120px; margin: 0 auto; }
.hb-container--narrow { max-width: 960px; margin: 0 auto; }
.hb-container--prose  { max-width: 760px; margin: 0 auto; }

.hb-section {
  padding: clamp(56px, 9vw, 80px) clamp(20px, 5vw, 24px);
}
.hb-section--hero   { padding: clamp(40px, 7vw, 70px) clamp(20px, 5vw, 24px) clamp(64px, 10vw, 96px); }
.hb-section--pricing{ padding: clamp(64px, 10vw, 90px) clamp(20px, 5vw, 24px); }
/* sections that only carry a card and sit flush under the previous one */
.hb-section--band   { padding: 0 clamp(20px, 5vw, 24px) clamp(56px, 9vw, 80px); }
.hb-section--cta    { padding: clamp(32px, 5vw, 40px) clamp(20px, 5vw, 24px) clamp(64px, 10vw, 90px); }

/* --- fluid type ---------------------------------------------------------
   The fixed 64px/40px headings were the single biggest source of the mangled
   hero on phones. min values are chosen so nothing drops below a comfortable
   reading size; max values preserve the original desktop scale exactly. */
.hb-h1 { font-size: clamp(34px, 8.5vw, 64px); }
.hb-h2 { font-size: clamp(27px, 5.4vw, 40px); }
.hb-h2--cta { font-size: clamp(27px, 5.6vw, 42px); }
.hb-h3 { font-size: clamp(21px, 3.4vw, 26px); }
.hb-lead { font-size: clamp(16px, 1.6vw, 19px); }
.hb-lead--sm { font-size: clamp(15px, 1.4vw, 17px); }

/* The highlighted phrase in the hero headline.
   "compliant by design" is held on one line so the yellow bar underneath it
   (an absolutely-positioned child) tracks the phrase. That bar can't follow a
   line break — it would stretch one rule across the whole two-line box — and
   the phrase itself is wider than a small phone at any readable size, which is
   what used to shove the headline off the screen.
   Under 640px the phrase is allowed to wrap and the bar is swapped for a
   background gradient with box-decoration-break:clone, which paints one
   highlight per line fragment. Static rather than animated, but the brand beat
   survives on the screens most people actually see. */
.hb-mark { white-space: nowrap; }

@media (max-width: 640px) {
  .hb-mark {
    white-space: normal;
    background-image: linear-gradient(var(--yellow-500), var(--yellow-500));
    background-size: 100% .28em;
    background-position: 0 92%;
    background-repeat: no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  .hb-mark-bar { display: none; }
}

/* --- hero eyebrow badge --------------------------------------------------
   The label is held on one line so the pill keeps its shape. That phrase is
   ~250px of text, which is wider than a small phone's content column — it hung
   off the right edge and got silently clipped by the hero's overflow:hidden.
   Below 430px it's allowed to wrap into a two-line pill instead. */
.hb-hero-badge-text { white-space: nowrap; }

@media (max-width: 430px) {
  .hb-hero-badge { max-width: 100%; }
  .hb-hero-badge-text { white-space: normal; text-align: left; }
}

/* --- card grids ---------------------------------------------------------- */
.hb-grid { display: grid; gap: 20px; }

.hb-grid-3 { grid-template-columns: repeat(3, 1fr); }
.hb-grid-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) {
  .hb-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hb-grid-3,
  .hb-grid-2 { grid-template-columns: 1fr; }
}

/* --- hero product mockup ------------------------------------------------- */
.hb-mockup-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 16px;
  text-align: left;
}
@media (max-width: 900px) {
  .hb-mockup-grid { grid-template-columns: 1fr; }
}
/* The floating stat chips are anchored outside the mockup's box (left:-28px /
   right:-26px). With room to spare that reads as depth; on a phone they sit on
   top of the content and get clipped, so they're dropped rather than shrunk. */
@media (max-width: 900px) {
  .hb-float-chip { display: none; }
}

/* --- EU AI Act band ------------------------------------------------------ */
.hb-band {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  padding: clamp(24px, 4vw, 36px) clamp(22px, 4vw, 40px);
}

/* --- assessment showcase ------------------------------------------------- */
.hb-showcase {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 14px;
}
@media (max-width: 900px) {
  .hb-showcase { grid-template-columns: 1fr; }
}
.hb-showcase-detail { padding: clamp(16px, 3vw, 22px) clamp(16px, 3vw, 24px); }
/* The grade slab is a fixed square; shrink it rather than let it crowd the
   name/role column out of the row. */
.hb-grade-slab { width: 132px; height: 132px; }
.hb-grade-num  { font-size: 56px; }
@media (max-width: 640px) {
  .hb-grade-slab { width: 96px; height: 96px; }
  .hb-grade-num  { font-size: 40px; }
}

/* --- adoption split ------------------------------------------------------ */
.hb-split {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 36px;
  align-items: center;
  padding: clamp(24px, 4vw, 36px) clamp(22px, 4vw, 40px);
}
@media (max-width: 900px) {
  .hb-split { grid-template-columns: 1fr; gap: 28px; }
  /* the 1px rule is a vertical divider between two columns — meaningless once
     they're stacked */
  .hb-split-divider { display: none; }
}

/* --- pricing ------------------------------------------------------------- */
.hb-vs-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
}
@media (max-width: 900px) {
  .hb-vs-grid { grid-template-columns: 1fr; }
}

.hb-plan-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 1024px) {
  .hb-plan-grid { grid-template-columns: 1fr; }
}

.hb-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
}
@media (max-width: 640px) {
  .hb-feature-grid { grid-template-columns: 1fr; }
}
.hb-panel { padding: clamp(24px, 4vw, 32px) clamp(22px, 4vw, 34px); }
.hb-cta-card { padding: clamp(44px, 7vw, 66px) clamp(22px, 4vw, 40px); }

/* --- footer -------------------------------------------------------------- */
.hb-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 900px) {
  /* brand blurb spans the full width, link columns pair up beneath it */
  .hb-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .hb-footer-brand { grid-column: 1 / -1; }
}

/* ==========================================================================
   NAV
   Desktop: one pill with links + actions inline.
   ≤900px:  links/actions are hidden and cloned into a drop panel by
            js/modules/navmenu.js, toggled by the hamburger.
   ========================================================================== */
.hb-navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 18px clamp(20px, 5vw, 24px);
  background: linear-gradient(var(--surface-canvas), rgba(248, 246, 240, .72) 72%, transparent);
}

/* These two carry the desktop row layout. It lives here rather than inline
   precisely so the `display:none` below can win under the breakpoint — an
   inline `display:flex` would outrank it and the menu would never engage. */
.hb-navlinks {
  display: flex;
  gap: 2px;
}
.hb-navactions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hb-navtoggle {
  display: none; /* desktop */
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--ink-700);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.hb-navtoggle:hover { background: var(--cream-100); }
.hb-navtoggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Without working JS the drop panel is never populated, so the toggle would be
   a button that visibly does nothing. Hide it instead: the page is one
   continuous scroll and the footer repeats every nav link, so nothing becomes
   unreachable. (Higher specificity than the breakpoint rule below, so it wins
   wherever it lands.) */
.no-js .hb-navtoggle { display: none; }

.hb-navtoggle .hb-icon-menu,
.hb-navtoggle .hb-icon-close { display: inline-flex; }
.hb-navtoggle .hb-icon-close { display: none; }
.hb-navtoggle[aria-expanded="true"] .hb-icon-menu { display: none; }
.hb-navtoggle[aria-expanded="true"] .hb-icon-close { display: inline-flex; }

.hb-menu {
  display: none; /* only ever shown under the mobile breakpoint */
  max-width: 1180px;
  margin: 10px auto 0;
  padding: 12px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

@media (max-width: 900px) {
  .hb-navlinks,
  .hb-navactions { display: none; }

  .hb-navtoggle { display: inline-flex; }

  .hb-menu[data-open="1"] { display: block; }

  /* Cloned subtrees: re-flow the inline row layout into a vertical stack.
     `display` is set on the clone by the module, not inline in the markup,
     so these rules win. */
  .hb-menu .hb-navlinks,
  .hb-menu .hb-navactions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .hb-menu .hb-navactions {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    gap: 8px;
  }
  /* comfortable touch targets — the desktop 8px/14px pill is too small to hit */
  .hb-menu .hb-navlink,
  .hb-menu .hb-link-signin {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 8px 14px;
    font-size: 15px;
    border-radius: var(--radius-md);
  }
  .hb-menu button {
    width: 100%;
    justify-content: center;
    min-height: 46px;
  }
}

/* An open menu is closed by the module on resize past the breakpoint; this is
   the belt-and-braces for the instant before that fires. */
@media (min-width: 901px) {
  .hb-menu { display: none !important; }
}

/* --- reduced motion ------------------------------------------------------
   The drifting blobs, floats and pings loop forever. Honour the OS setting —
   this is also the accessibility default the boilerplate never covered. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}