/* ==========================================================================
   HR hub — the floating section nav, /hr-new/ (page 49591)
   --------------------------------------------------------------------------
   Source file: unscoped and readable. build_hr.py prefixes every selector
   with #lpen-hrnav at deploy time (§18b.3), because the Elementor kit emits
   `.elementor-kit-8 h3 {...}` at specificity (0,1,1) and would otherwise
   outbid every bare class in here.

   ⚠️ The scoper KEEPS `.lpen-hn` rather than collapsing it into the scope id.
   #lpen-hrnav sits on the SECTION container; .lpen-hn is the root div inside
   the html widget and the script adds `is-ready` to it. Collapsing them
   would leave the no-JS state applied forever. Same trap as cpd-deadline and
   passes — do not "harmonise" this with build_immigration_hub.py.

   TWO LAYOUTS, ONE MARKUP
   -----------------------
   >= 1520px  a fixed vertical rail in the left margin, with a progress spine.
              The threshold is arithmetic, not taste: content is boxed at
              1120px, the rail is 180px wide and wants 16px of air, so it
              needs 1120 + 2*196 = 1512px of viewport before it can sit
              beside the content instead of on top of it.
   < 1520px   a fixed horizontal pill bar under the site header. It scrolls
              horizontally and the script keeps the active chip centred.

   Both appear only after the reader has left the hero. Before that the nav
   is in normal flow, so the first thing a visitor sees is a page, not
   chrome. A spacer preserves the in-flow height so nothing jumps when it
   detaches.
   ========================================================================== */

#lpen-hrnav .lpen-hn {
  --navy-900: #012032;
  --navy-800: #022e48;
  --navy-700: #0b4465;
  --navy-100: #c9dde8;
  --navy-50: #e5eef3;
  --navy-25: #f3f7f9;
  --action: #0f5c96;
  --gold-500: #c8901f;
  --border: #cfd6dd;
  --border-strong: #78848f;
  --surface: #f6f8fa;
  --text: #111820;
  --secondary: #4a5666;
  --subtle: #6b7684;
  --white: #fff;
  --focus: #6a3fd4;

  /* Overwritten at runtime by the script, which measures the real sticky
     header rather than assuming one. §18c does the same thing. */
  --hn-top: 16px;

  font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  position: relative;
  z-index: 40;
}

/* ------------------------------------------------------------------ icons
   Tabler as CSS mask data URIs: the html-widget sanitiser strips <svg>
   (§18b.1), and `background-color: currentColor` keeps §18a's colour
   inheritance without loading an icon font. */
#lpen-hrnav .lpen-hn .lpen-i {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ------------------------------------------------------------------ shell */
#lpen-hrnav .lpen-hn__spacer { display: none; }
#lpen-hrnav .lpen-hn.is-detached .lpen-hn__spacer { display: block; }

#lpen-hrnav .lpen-hn__bar {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(1, 32, 50, 0.08), 0 1px 2px rgba(1, 32, 50, 0.06);
  /* Clips the progress hairline to the rounded corners. Without it the gold
     line runs past the radius at both ends and reads as a rendering fault. */
  overflow: hidden;
}

/* The reading-progress hairline. Sits on the bar's top edge and is the only
   thing on the page that uses gold outside a CPD context, which is a
   deliberate exception: it is a position indicator, not decoration. */
#lpen-hrnav .lpen-hn__progress {
  height: 3px;
  border-radius: 10px 10px 0 0;
  background: var(--navy-50);
  overflow: hidden;
}
#lpen-hrnav .lpen-hn__progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold-500);
  transition: width 120ms cubic-bezier(0.2, 0, 0.2, 1);
}
#lpen-hrnav .lpen-hn:not(.is-ready) .lpen-hn__progress { display: none; }

#lpen-hrnav .lpen-hn__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
#lpen-hrnav .lpen-hn__list li { margin: 0; }

#lpen-hrnav .lpen-hn__link {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--secondary);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 120ms cubic-bezier(0.2, 0, 0.2, 1),
              background-color 120ms cubic-bezier(0.2, 0, 0.2, 1);
}
#lpen-hrnav .lpen-hn__link:hover { color: var(--action); }
#lpen-hrnav .lpen-hn__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus), 0 0 0 4px var(--navy-25);
  border-radius: 4px;
}
/* The active state is carried by colour, weight AND a solid marker, never by
   colour alone (§12 of the design system). */
#lpen-hrnav .lpen-hn__link[aria-current="true"] {
  color: var(--navy-800);
  font-weight: 600;
}

/* The "buy" chip is a real CTA, not a section link. It never takes the
   active state and it sits apart from the list. */
#lpen-hrnav .lpen-hn__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  background: var(--action);
  color: var(--white);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 4px;
  white-space: nowrap;
  transition: background-color 120ms cubic-bezier(0.2, 0, 0.2, 1);
}
#lpen-hrnav .lpen-hn__cta:hover,
#lpen-hrnav .lpen-hn__cta:focus { background: var(--navy-700); color: var(--white); }
#lpen-hrnav .lpen-hn__cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus), 0 0 0 4px var(--navy-25);
}

#lpen-hrnav .lpen-hn__eyebrow {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--subtle);
}

/* ==========================================================================
   < 1520px — horizontal pill bar
   ========================================================================== */
#lpen-hrnav .lpen-hn__bar { padding: 0; }

#lpen-hrnav .lpen-hn__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
}

#lpen-hrnav .lpen-hn__scroll {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#lpen-hrnav .lpen-hn__scroll::-webkit-scrollbar { display: none; }

#lpen-hrnav .lpen-hn__list { gap: 2px; }

#lpen-hrnav .lpen-hn__link {
  padding: 8px 12px;
  border-radius: 999px;
}
#lpen-hrnav .lpen-hn__link[aria-current="true"] {
  background: var(--navy-50);
}
#lpen-hrnav .lpen-hn__link .lpen-hn__dot { display: none; }
#lpen-hrnav .lpen-hn__num {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
  color: var(--subtle);
}
#lpen-hrnav .lpen-hn__link[aria-current="true"] .lpen-hn__num { color: var(--action); }

#lpen-hrnav .lpen-hn__eyebrow { display: none; }

/* Fixed once the reader is past the hero. `position: fixed` rather than
   `sticky`, because a sticky element can only stick inside its own section
   container and this nav has to follow the whole page — which is the one
   real defect in the live page's version of this. */
#lpen-hrnav .lpen-hn.is-detached .lpen-hn__bar {
  position: fixed;
  top: var(--hn-top);
  left: 16px;
  right: 16px;
  z-index: 40;
  box-shadow: 0 4px 16px rgba(1, 32, 50, 0.12), 0 2px 6px rgba(1, 32, 50, 0.08);
}
#lpen-hrnav .lpen-hn.is-detached .lpen-hn__inner {
  max-width: 1120px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  #lpen-hrnav .lpen-hn__cta span:not(.lpen-i) { display: none; }
  #lpen-hrnav .lpen-hn__cta { padding: 9px 11px; }
}

/* ==========================================================================
   >= 1520px — vertical rail in the left margin
   ========================================================================== */
@media (min-width: 1520px) {
  /* Before it detaches the rail is still a horizontal bar in normal flow,
     which is what a visitor sees at the top of the page. Only the detached
     state becomes the vertical rail. */
  #lpen-hrnav .lpen-hn.is-detached .lpen-hn__progress { display: none; }

  #lpen-hrnav .lpen-hn.is-detached .lpen-hn__bar {
    position: fixed;
    top: var(--hn-top);
    left: calc(50% - 560px - 196px);
    right: auto;
    width: 180px;
    max-height: calc(100vh - var(--hn-top) - 24px);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    box-shadow: 0 4px 16px rgba(1, 32, 50, 0.1),
                0 2px 6px rgba(1, 32, 50, 0.06);
  }
  #lpen-hrnav .lpen-hn.is-detached .lpen-hn__bar::-webkit-scrollbar { display: none; }

  /* Padding lives on the inner, not the bar, so the spine and its dots sit
     inside the card instead of straddling its border. */
  #lpen-hrnav .lpen-hn.is-detached .lpen-hn__inner {
    display: block;
    padding: 14px 12px 14px 14px;
    max-width: none;
  }
  #lpen-hrnav .lpen-hn.is-detached .lpen-hn__scroll { overflow: visible; }

  #lpen-hrnav .lpen-hn.is-detached .lpen-hn__eyebrow {
    display: block;
    margin: 0 0 10px 12px;
  }

  /* The spine: a 2px rule the whole list hangs off, with each item's marker
     sitting on it. Reads as a progress track without needing a second
     element per row. */
  #lpen-hrnav .lpen-hn.is-detached .lpen-hn__list {
    display: block;
    border-left: 2px solid var(--border);
    padding-left: 0;
    margin-left: 5px;
  }
  #lpen-hrnav .lpen-hn.is-detached .lpen-hn__link {
    padding: 7px 6px 7px 16px;
    border-radius: 0 4px 4px 0;
    background: transparent;
    white-space: normal;
    position: relative;
    line-height: 19px;
  }
  #lpen-hrnav .lpen-hn.is-detached .lpen-hn__link[aria-current="true"] { background: transparent; }
  #lpen-hrnav .lpen-hn.is-detached .lpen-hn__num { display: none; }

  #lpen-hrnav .lpen-hn.is-detached .lpen-hn__dot {
    display: block;
    position: absolute;
    left: -6px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--border);
    transition: background-color 120ms cubic-bezier(0.2, 0, 0.2, 1),
                border-color 120ms cubic-bezier(0.2, 0, 0.2, 1),
                transform 120ms cubic-bezier(0.2, 0, 0.2, 1);
  }
  #lpen-hrnav .lpen-hn.is-detached .lpen-hn__link:hover .lpen-hn__dot {
    border-color: var(--action);
  }
  #lpen-hrnav .lpen-hn.is-detached .lpen-hn__link[aria-current="true"] .lpen-hn__dot {
    background: var(--action);
    border-color: var(--action);
    transform: scale(1.15);
  }
  /* Sections already read get a filled-but-quiet marker, so the rail says
     where you are AND how far in you are. */
  #lpen-hrnav .lpen-hn.is-detached .lpen-hn__link.is-past .lpen-hn__dot {
    background: var(--navy-100);
    border-color: var(--navy-100);
  }

  #lpen-hrnav .lpen-hn.is-detached .lpen-hn__cta {
    display: flex;
    justify-content: center;
    margin: 14px 0 0;
  }
}

/* ==========================================================================
   Motion — WCAG 2.1 obligation, not a nicety (design system §4)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #lpen-hrnav .lpen-hn * {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
  #lpen-hrnav .lpen-hn.is-detached .lpen-hn__link[aria-current="true"] .lpen-hn__dot {
    transform: none;
  }
}

/* Printing a nav that follows the scroll is meaningless. */
@media print {
  #lpen-hrnav .lpen-hn { display: none; }
}

/* ==========================================================================
   PAGE CHROME — reaching a native widget from a scoped sheet
   --------------------------------------------------------------------------
   build_hr.py's scoper exempts selectors starting `#lpen-hr-`, this page's
   own section ids, so these rules apply to the pass section without leaking
   site-wide. Keep this block small and always anchored on a section id.

   Two defects it fixes, both found by looking at the rendered draft rather
   than by reading JSON:

   1. WooCommerce's add-to-cart is NOT an Elementor button, so the
      `typography_text_decoration: none` that fixes every other button on the
      page misses it, and the theme underlines every <a> (§18i). Same gap is
      presumably live on /hrcpd/ and /passes/.
   2. That button ships a `fas fa-shopping-cart` icon from WooCommerce, not
      from the tree — invisible to the build's §18a guard. It is replaced
      here with the Tabler glyph as a CSS mask, so no Font Awesome renders
      inside this page's own content.
   ========================================================================== */
#lpen-hr-pass a.add_to_cart_button,
#lpen-hr-pass a.added_to_cart,
#lpen-hr-pass .elementor-widget-wc-add-to-cart a {
  text-decoration: none;
}

#lpen-hr-pass .elementor-widget-wc-add-to-cart .fa,
#lpen-hr-pass .elementor-widget-wc-add-to-cart [class*="fa-"] {
  /* Neutralise the Font Awesome glyph and reuse its box for the Tabler mask,
     rather than hiding it and leaving the label off-centre. */
  font-size: 0;
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: -3px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: var(--lpen-cart-mask);
  mask-image: var(--lpen-cart-mask);
}
#lpen-hr-pass .elementor-widget-wc-add-to-cart [class*="fa-"]::before {
  content: none;
}

/* ---------------------------------------------------------- course covers
   Each course's own featured image, run full-bleed across the top of its
   card. All eight are 1920x1080 and all eight use one template:

       |<-- photo, left 32% -->|<-- #87ACA4 panel, course title in caps -->|

   Measured, not eyeballed: a column scan of every file finds the flat panel
   starting at exactly 32% in all eight.

   Showing the whole banner puts the course title on the card TWICE, once
   burned into the artwork and once as the h3 below it, in a sage green that
   is in neither the design system nor the LearnDash palette. So the card
   shows the PHOTOGRAPH only.

   How: the image is blown up to 1/0.32 = 312.5% of the card width, anchored
   left, and the wrapper clips it. What survives is the left 32% of the
   source, which is the photo, cropped to a short band. Set --lpen-cover-photo
   if the template ever changes.

   `align-self: stretch` alone is not enough: Elementor gives the widget
   wrapper its own width, so the negative margins slid the image left without
   widening it and the cover stopped 22px short of the card's right edge.
   44px is the card's two 22px paddings. */
#lpen-hr-courses {
  --lpen-cover-photo: 32%;
  --lpen-cover-h: 156px;
}
#lpen-hr-courses .lpen-cover {
  width: calc(100% + 44px);
  max-width: none;
  margin: -22px -22px 4px;
  align-self: stretch;
  height: var(--lpen-cover-h);
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  background: var(--surface, #f6f8fa);
}
#lpen-hr-courses .lpen-cover img {
  width: calc(100% / 0.32);
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
}

@media (max-width: 767px) {
  #lpen-hr-courses { --lpen-cover-h: 132px; }
}

/* Instructor avatars. The five source images are 800x800, 392x590, 768x1024,
   950x950 and 406x443. Run full width at 4:5 they made each card ~370px of
   face before a word of copy, which is what the owner flagged. A fixed 96px
   rounded square carries the same recognition, keeps the row even whatever
   the source ratio, and lets the copy lead.

   `object-position: 50% 22%` is top-weighted because three of the five are
   portraits where a centred square crops the chin up. */
#lpen-hr-instructors .lpen-avatar {
  width: 96px;
  flex: 0 0 96px;
}
#lpen-hr-instructors .lpen-avatar img {
  width: 96px;
  height: 96px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
  border-radius: 8px;
  background: var(--surface, #f6f8fa);
}

@media (max-width: 480px) {
  #lpen-hr-instructors .lpen-avatar,
#lpen-hr-instructors .lpen-avatar img { width: 76px; flex-basis: 76px; }
  #lpen-hr-instructors .lpen-avatar img { height: 76px; }
}

/* ============ GENERATED ICONS — DO NOT EDIT ============ */
/* Tabler 3.46.0 — 2 glyphs, generated by build_hr.py */
#lpen-hr-pass{--lpen-cart-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='m3.7 2-.6.5v1q.2.4.6.4l.7.1H5v12.1l-.3.2Q3.5 17 3 18.2q-.1.8 0 1.6a3 3 0 0 0 2 2q1 .3 1.7 0a3 3 0 0 0 2-2c.2-.4.2-1.3 0-1.7l2.7-.1H14v1.8a3 3 0 0 0 2 2q.3.3.9.2l.8-.1a3 3 0 0 0 2-2q.3-1 0-1.7a3 3 0 0 0-2-2l-.3-.2H7v-2h12.3l.6-.5.6-3.8L21 6a1 1 0 0 0-.8-.9L7.1 4 7 3.5l-.1-.9-.6-.4zm9.2 4.4 6 .4-.8 5v.1H7V6zM6.2 18.1q.7.1.7.9 0 .5-.5.9h-1a1 1 0 0 1-.2-1.6 1 1 0 0 1 1-.2m11 0q.6.1.7.9 0 .5-.5.9h-1a1 1 0 0 1-.2-1.6 1 1 0 0 1 1-.2'/></svg>")}
.lpen-i--ticket{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M4.5 4a3 3 0 0 0-2.4 2.2v4.3l.7.5q.5 0 .8.2.6.6.2 1.4-.2.3-.8.4h-.4l-.5.5v4.3a3 3 0 0 0 2 2l.4.2h15l.3-.1 1-.6a3 3 0 0 0 1-1.5c.2-.3.2-.3.2-2.2v-1.9l-.1-.2q-.3-.4-1-.5-1-.1-.9-1.2 0-.7 1.2-.8.4 0 .7-.5V6.2a3 3 0 0 0-2-2l-.4-.2zM14 6.7l.1.8a1 1 0 0 0 1.8 0v-.8L16 6h1.6c1.8 0 1.8 0 2.1.3s.3.4.3 1.7v1.1l-.3.2q-1.2.6-1.6 1.9c-.1.4-.1 1.2 0 1.6q.4 1.3 1.6 1.9l.3.2v1c0 1.3 0 1.5-.2 1.7l-.3.3h-1.8L16 18v-.6l-.1-.9a1 1 0 0 0-1.8 0v.9l-.1.6H4.7l-.2-.1-.3-.3C4 17.3 4 17.2 4 16v-1.1l.3-.2Q5.5 14 6 12.8c.1-.4.1-1.2 0-1.6Q5.5 10 4.3 9.3L4 9.1v-1c0-1.4 0-1.5.3-1.8s0-.3 5.1-.3H14zm.7 3.4-.6.4v3a1 1 0 0 0 1.8 0v-3a1 1 0 0 0-1.2-.4'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M4.5 4a3 3 0 0 0-2.4 2.2v4.3l.7.5q.5 0 .8.2.6.6.2 1.4-.2.3-.8.4h-.4l-.5.5v4.3a3 3 0 0 0 2 2l.4.2h15l.3-.1 1-.6a3 3 0 0 0 1-1.5c.2-.3.2-.3.2-2.2v-1.9l-.1-.2q-.3-.4-1-.5-1-.1-.9-1.2 0-.7 1.2-.8.4 0 .7-.5V6.2a3 3 0 0 0-2-2l-.4-.2zM14 6.7l.1.8a1 1 0 0 0 1.8 0v-.8L16 6h1.6c1.8 0 1.8 0 2.1.3s.3.4.3 1.7v1.1l-.3.2q-1.2.6-1.6 1.9c-.1.4-.1 1.2 0 1.6q.4 1.3 1.6 1.9l.3.2v1c0 1.3 0 1.5-.2 1.7l-.3.3h-1.8L16 18v-.6l-.1-.9a1 1 0 0 0-1.8 0v.9l-.1.6H4.7l-.2-.1-.3-.3C4 17.3 4 17.2 4 16v-1.1l.3-.2Q5.5 14 6 12.8c.1-.4.1-1.2 0-1.6Q5.5 10 4.3 9.3L4 9.1v-1c0-1.4 0-1.5.3-1.8s0-.3 5.1-.3H14zm.7 3.4-.6.4v3a1 1 0 0 0 1.8 0v-3a1 1 0 0 0-1.2-.4'/></svg>")}