/* ==========================================================================
   LPEN news hub — /news-hub/, page 49525
   --------------------------------------------------------------------------
   Source file: unscoped and readable. `build_news_hub.py::scope_css()` prefixes
   every selector with `#lpen-nh` at deploy time, because the Elementor kit
   emits `.elementor-kit-8 h3 {…}` at specificity (0,1,1) and would otherwise
   silently revert the type scale (CLAUDE.md §18b.3).

   Three selectors are exempt from scoping and are listed in `_SKIP` in the
   builder, because they style *native* containers that sit outside the html
   widget: `#lpen-nh-rail`, `#lpen-nh-shell`, `#lpen-nh-hero`.

   Every value below comes from LPEN-Design-System.md. No new colours, no new
   radii, no new type sizes.
   ========================================================================== */

:root {
  --nh-navy-900: #012032;
  --nh-navy-800: #022E48;
  --nh-navy-700: #0B4465;
  --nh-navy-50:  #E5EEF3;
  --nh-action:   #0F5C96;
  --nh-gold-700: #8A5A08;
  --nh-gold-50:  #FDF3E0;
  --nh-ink:      #111820;
  --nh-muted:    #4A5666;
  --nh-subtle:   #6B7684;
  --nh-border:   #CFD6DD;
  --nh-border-strong: #78848F;
  --nh-surface-1: #F6F8FA;
  --nh-surface-2: #EEF2F5;
  --nh-white:    #FFFFFF;
  --nh-focus:    #6A3FD4;
  --nh-focus-halo: #F3F7F9;
  --nh-radius-sm: 2px;
  --nh-radius-md: 4px;
  --nh-radius-lg: 8px;
  --nh-radius-pill: 999px;
  --nh-e1: 0 1px 3px rgba(1,32,50,.08), 0 1px 2px rgba(1,32,50,.06);
  --nh-fast: 120ms;
  --nh-ease: cubic-bezier(.2,0,.2,1);
  --nh-font: "Source Sans 3","Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}

/* --------------------------------------------------------------------------
   1. Shell — the two-column arrangement of the native containers
   --------------------------------------------------------------------------
   The rail is `position: sticky` rather than an Elementor motion effect: it is
   one line of CSS, it needs no Pro feature, and it cannot be knocked out by an
   editor toggling something in the Motion Effects panel.

   `align-items: flex-start` on the shell is load-bearing — a stretched flex
   child cannot be sticky, and the default `stretch` silently disables it.
   -------------------------------------------------------------------------- */

#lpen-nh-shell {
  align-items: flex-start !important;
}

#lpen-nh-rail {
  position: sticky;
  /* --lpen-sticky-top is published by the header script (§18c); the fallback
     covers the case where this page renders under a header that doesn't set
     it, and the admin bar is handled by WordPress's own html margin. */
  top: calc(var(--lpen-sticky-top, 24px) + 24px);
}

@media (max-width: 1023px) {
  #lpen-nh-rail { position: static; top: auto; }
}

/* --------------------------------------------------------------------------
   2. The feed block itself
   -------------------------------------------------------------------------- */

#lpen-nh {
  font-family: var(--nh-font);
  color: var(--nh-ink);
}

#lpen-nh *,
#lpen-nh *::before,
#lpen-nh *::after { box-sizing: border-box; }

#lpen-nh :focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--nh-focus), 0 0 0 4px var(--nh-focus-halo);
  border-radius: var(--nh-radius-md);
}

/* --------------------------------------------------------------------------
   3. Control bar — search + sort
   --------------------------------------------------------------------------
   The <input> and its wrapper are built in JS. The sanitiser strips a
   server-rendered <input> (§18b.1), and it strips <select> too — verified by
   probe on 2026-08-22 — so sort is a two-button segmented control, not a
   dropdown. Two options did not deserve a dropdown anyway.
   -------------------------------------------------------------------------- */

#lpen-nh .lpen-nh__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

#lpen-nh .lpen-nh__search {
  position: relative;
  flex: 1 1 280px;
  min-width: 0;
}

#lpen-nh .lpen-nh__search input {
  width: 100%;
  height: 44px;
  padding: 0 40px 0 42px;
  font: 400 16px/24px var(--nh-font);
  color: var(--nh-ink);
  background: var(--nh-white);
  /* border-strong, not border: this is a control boundary the user must
     perceive to operate it (§3.5). */
  border: 1px solid var(--nh-border-strong);
  border-radius: var(--nh-radius-md);
  -webkit-appearance: none;
  appearance: none;
}

#lpen-nh .lpen-nh__search input::placeholder { color: var(--nh-subtle); }

#lpen-nh .lpen-nh__search input:focus-visible {
  border-color: var(--nh-action);
  box-shadow: 0 0 0 2px var(--nh-focus), 0 0 0 4px var(--nh-focus-halo);
}

#lpen-nh .lpen-nh__search .lpen-i {
  position: absolute;
  left: 13px;
  top: 12px;
  background-color: var(--nh-subtle);
  pointer-events: none;
}

#lpen-nh .lpen-nh__clear {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 32px;
  height: 32px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border-radius: var(--nh-radius-md);
}

#lpen-nh .lpen-nh__clear .lpen-i { background-color: var(--nh-muted); }
#lpen-nh .lpen-nh__clear:hover { background: var(--nh-surface-2); }
#lpen-nh.is-searching .lpen-nh__clear { display: flex; }

#lpen-nh .lpen-nh__sort {
  display: flex;
  border: 1px solid var(--nh-border-strong);
  border-radius: var(--nh-radius-md);
  overflow: hidden;
  flex: 0 0 auto;
}

#lpen-nh .lpen-nh__sort button {
  min-height: 44px;
  padding: 0 16px;
  font: 600 14px/20px var(--nh-font);
  color: var(--nh-muted);
  background: var(--nh-white);
  border: 0;
  cursor: pointer;
  transition: background var(--nh-fast) var(--nh-ease);
}

#lpen-nh .lpen-nh__sort button + button { border-left: 1px solid var(--nh-border); }
#lpen-nh .lpen-nh__sort button:hover { background: var(--nh-surface-1); }

#lpen-nh .lpen-nh__sort button[aria-pressed="true"] {
  background: var(--nh-navy-800);
  color: var(--nh-white);
}

/* --------------------------------------------------------------------------
   4. Topic chips
   -------------------------------------------------------------------------- */

#lpen-nh .lpen-nh__filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--nh-surface-1);
  border: 1px solid var(--nh-border);
  border-radius: var(--nh-radius-lg);
  margin-bottom: 16px;
}

#lpen-nh .lpen-nh__group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

#lpen-nh .lpen-nh__glabel {
  flex: 0 0 92px;
  font: 600 12px/16px var(--nh-font);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nh-subtle);
  padding-top: 7px;
}

#lpen-nh .lpen-nh__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 12px;
  font: 500 14px/20px var(--nh-font);
  color: var(--nh-navy-800);
  background: var(--nh-white);
  border: 1px solid var(--nh-border-strong);
  border-radius: var(--nh-radius-pill);
  cursor: pointer;
  transition: background var(--nh-fast) var(--nh-ease),
              color var(--nh-fast) var(--nh-ease),
              border-color var(--nh-fast) var(--nh-ease);
}

#lpen-nh .lpen-nh__chip:hover { background: var(--nh-navy-50); }

#lpen-nh .lpen-nh__chip[aria-pressed="true"] {
  background: var(--nh-navy-800);
  border-color: var(--nh-navy-800);
  color: var(--nh-white);
}

#lpen-nh .lpen-nh__n {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--nh-subtle);
}

#lpen-nh .lpen-nh__chip[aria-pressed="true"] .lpen-nh__n { color: var(--nh-navy-50); }

/* The province row is a disclosure: 8 more chips is a lot to show a reader who
   only wants "Express Entry". `hidden` is toggled by the script. */
#lpen-nh .lpen-nh__disclose {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 4px 4px 0;
  font: 600 14px/20px var(--nh-font);
  color: var(--nh-action);
  background: none;
  border: 0;
  cursor: pointer;
}

#lpen-nh .lpen-nh__disclose .lpen-i {
  background-color: currentColor;
  transition: transform var(--nh-fast) var(--nh-ease);
}

#lpen-nh .lpen-nh__disclose[aria-expanded="true"] .lpen-i { transform: rotate(180deg); }

#lpen-nh .lpen-nh__reset {
  align-self: flex-start;
  font: 600 14px/20px var(--nh-font);
  color: var(--nh-action);
  background: none;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   5. Result count / status line
   -------------------------------------------------------------------------- */

#lpen-nh .lpen-nh__count {
  margin: 0 0 16px;
  font: 400 14px/22px var(--nh-font);
  color: var(--nh-muted);
}

#lpen-nh .lpen-nh__count b { color: var(--nh-ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   6. Lead story
   -------------------------------------------------------------------------- */

#lpen-nh .lpen-nh__lead {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0;
  background: var(--nh-white);
  border: 1px solid var(--nh-border);
  border-radius: var(--nh-radius-lg);
  overflow: hidden;
  margin-bottom: 24px;
}

/* Stretched link — one anchor per story, on the title, covering the whole card.
   The thumbnail is deliberately NOT a link: `tabindex` is stripped from an html
   widget, so an `aria-hidden` wrapper anchor would stay keyboard-focusable and
   put a nameless duplicate tab stop on every card. */
#lpen-nh .lpen-nh__lead,
#lpen-nh .lpen-nh__card { position: relative; }

/* Nothing between the card and this anchor may be positioned, or `inset: 0`
   resolves against that element instead of the card and the overlay collapses
   to the size of the heading. */
#lpen-nh .lpen-nh__lead h2 a::after,
#lpen-nh .lpen-nh__card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--nh-radius-lg);
}

#lpen-nh .lpen-nh__lead-media {
  display: block;
  order: 2;
  background: var(--nh-surface-2);
  min-height: 220px;
}

#lpen-nh .lpen-nh__lead-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#lpen-nh .lpen-nh__lead-body {
  order: 1;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

#lpen-nh .lpen-nh__lead h2 {
  margin: 0;
  font: 600 30px/38px var(--nh-font);
  letter-spacing: -.01em;
  color: var(--nh-navy-800);
}

#lpen-nh .lpen-nh__lead h2 a { color: inherit; text-decoration: none; }
#lpen-nh .lpen-nh__lead h2 a:hover { color: var(--nh-action); text-decoration: underline; }

#lpen-nh .lpen-nh__lead p {
  margin: 0;
  font: 400 16px/26px var(--nh-font);
  color: var(--nh-muted);
  max-width: 60ch;
}

@media (max-width: 767px) {
  #lpen-nh .lpen-nh__lead { grid-template-columns: 1fr; }
  #lpen-nh .lpen-nh__lead-media { order: 1; min-height: 180px; max-height: 220px; }
  #lpen-nh .lpen-nh__lead-body { order: 2; padding: 20px; }
  #lpen-nh .lpen-nh__lead h2 { font-size: 22px; line-height: 30px; }
}

/* --------------------------------------------------------------------------
   7. Card grid — browse mode
   -------------------------------------------------------------------------- */

#lpen-nh .lpen-nh__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

#lpen-nh .lpen-nh__card {
  display: flex;
  flex-direction: column;
  background: var(--nh-white);
  border: 1px solid var(--nh-border);
  border-radius: var(--nh-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--nh-fast) var(--nh-ease),
              border-color var(--nh-fast) var(--nh-ease);
}

#lpen-nh .lpen-nh__card:hover {
  box-shadow: var(--nh-e1);
  border-color: var(--nh-border-strong);
}

#lpen-nh .lpen-nh__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--nh-surface-2);
  overflow: hidden;
}

#lpen-nh .lpen-nh__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#lpen-nh .lpen-nh__card-body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

#lpen-nh .lpen-nh__card h3 {
  margin: 0;
  font: 600 18px/26px var(--nh-font);
  color: var(--nh-navy-800);
}

#lpen-nh .lpen-nh__card h3 a { color: inherit; text-decoration: none; }
#lpen-nh .lpen-nh__card h3 a:hover { color: var(--nh-action); text-decoration: underline; }

#lpen-nh .lpen-nh__card p {
  margin: 0;
  font: 400 14px/22px var(--nh-font);
  color: var(--nh-muted);
}

/* --------------------------------------------------------------------------
   8. Meta line and topic pills
   -------------------------------------------------------------------------- */

#lpen-nh .lpen-nh__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font: 400 12px/18px var(--nh-font);
  color: var(--nh-subtle);
}

#lpen-nh .lpen-nh__pill {
  display: inline-block;
  padding: 1px 8px;
  font: 600 12px/18px var(--nh-font);
  color: var(--nh-navy-700);
  background: var(--nh-navy-50);
  border-radius: var(--nh-radius-sm);
}

/* --------------------------------------------------------------------------
   9. Results mode — dense rows, no images
   --------------------------------------------------------------------------
   Search and filtering run against an index fetched from wp/v2 that carries no
   media URLs, so results are rendered as rows rather than cards. That is a
   feature, not a fallback: scanning 60 hits for the right one is faster in a
   list than in a picture grid.
   -------------------------------------------------------------------------- */

#lpen-nh .lpen-nh__list { display: none; flex-direction: column; }

#lpen-nh.is-filtered .lpen-nh__list { display: flex; }
#lpen-nh.is-filtered .lpen-nh__grid,
#lpen-nh.is-filtered .lpen-nh__lead { display: none; }

#lpen-nh .lpen-nh__row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--nh-border);
}

#lpen-nh .lpen-nh__row:first-child { border-top: 1px solid var(--nh-border); }

#lpen-nh .lpen-nh__row time {
  font: 400 14px/24px var(--nh-font);
  color: var(--nh-subtle);
  font-variant-numeric: tabular-nums;
}

#lpen-nh .lpen-nh__row h3 {
  margin: 0 0 4px;
  font: 600 17px/24px var(--nh-font);
  color: var(--nh-navy-800);
}

#lpen-nh .lpen-nh__row h3 a { color: inherit; text-decoration: none; }
#lpen-nh .lpen-nh__row h3 a:hover { color: var(--nh-action); text-decoration: underline; }

#lpen-nh .lpen-nh__row mark {
  background: #FDF3E0;
  color: inherit;
  padding: 0 1px;
  border-radius: var(--nh-radius-sm);
}

@media (max-width: 599px) {
  #lpen-nh .lpen-nh__row { grid-template-columns: 1fr; gap: 4px; }
  #lpen-nh .lpen-nh__row time { line-height: 18px; }
}

/* --------------------------------------------------------------------------
   10. Load more, loading and empty states
   -------------------------------------------------------------------------- */

#lpen-nh .lpen-nh__more-wrap {
  display: flex;
  justify-content: center;
  padding: 32px 0 0;
}

#lpen-nh .lpen-nh__load {
  min-height: 44px;
  padding: 10px 24px;
  font: 600 16px/24px var(--nh-font);
  color: var(--nh-action);
  background: var(--nh-white);
  border: 1px solid var(--nh-action);
  border-radius: var(--nh-radius-md);
  cursor: pointer;
  transition: background var(--nh-fast) var(--nh-ease),
              color var(--nh-fast) var(--nh-ease);
}

#lpen-nh .lpen-nh__load:hover { background: var(--nh-action); color: var(--nh-white); }
#lpen-nh .lpen-nh__load[aria-busy="true"] { opacity: .65; }

#lpen-nh .lpen-nh__note {
  margin: 24px 0 0;
  padding: 16px 20px;
  font: 400 16px/26px var(--nh-font);
  color: var(--nh-muted);
  background: var(--nh-surface-1);
  border: 1px solid var(--nh-border);
  border-radius: var(--nh-radius-lg);
}

#lpen-nh .lpen-nh__note b { color: var(--nh-ink); }

/* A failed fetch is a real state, not an edge case: the archive lives behind
   Cloudflare and the request can be blocked. Say so, and keep the browse feed
   on screen rather than emptying the page. */
#lpen-nh .lpen-nh__note--error {
  background: var(--nh-gold-50);
  border-color: #E8B64A;
  color: var(--nh-gold-700);
}

/* --------------------------------------------------------------------------
   11. Icons — Tabler via CSS mask (§18a, §18b.1)
   --------------------------------------------------------------------------
   Inline <svg> is stripped from an html widget, so glyphs are mask-images with
   `background-color: currentColor`. Colour inheritance is preserved and no icon
   font has to load. The individual mask URLs are appended by the builder.
   -------------------------------------------------------------------------- */

#lpen-nh .lpen-i {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  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;
}

#lpen-nh .lpen-i--16 { width: 16px; height: 16px; vertical-align: -2px; }

/* --------------------------------------------------------------------------
   12. Rail cards — native containers, so these selectors skip scoping
   -------------------------------------------------------------------------- */

#lpen-nh-rail .lpen-nh-railcard { width: 100%; }

/* The Elementor Form widget inherits the kit's Primary global typography for
   any sub-element whose own control is unset — on this site Primary is 48/700,
   which renders a subscribe button at display size. The header hit exactly this
   with the side cart (§18c); these rules are not redundant, do not remove them. */
#lpen-nh-rail .elementor-field-group > label,
#lpen-nh-rail .elementor-field-type-select select,
#lpen-nh-rail .elementor-field-type-email input {
  font: 400 15px/22px var(--nh-font);
}

#lpen-nh-rail .elementor-field-type-submit button {
  font: 600 16px/24px var(--nh-font);
}

/* --------------------------------------------------------------------------
   13. Reduced motion — WCAG 2.1 obligation, not a nicety (design system §4)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #lpen-nh *,
#lpen-nh *::before,
#lpen-nh *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
  #lpen-nh .lpen-nh__disclose .lpen-i { transition: none; }
}

/* ============ GENERATED ICONS — DO NOT EDIT ============ */
/* Tabler 3.46.0 — 3 glyphs, generated by build_news_hub.py */
.lpen-i--chevron-down{-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='m5.7 8-.6.5v.9l6.4 6.5h.9L19 9.5v-1a1 1 0 0 0-1.2-.4c-.2 0-.5.3-3 2.8L12 13.6l-2.7-2.7a21 21 0 0 0-3-2.8z'/></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='m5.7 8-.6.5v.9l6.4 6.5h.9L19 9.5v-1a1 1 0 0 0-1.2-.4c-.2 0-.5.3-3 2.8L12 13.6l-2.7-2.7a21 21 0 0 0-3-2.8z'/></svg>")}
.lpen-i--search{-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='M9.2 2a8 8 0 0 0-6.4 4.5 8 8 0 0 0 11.7 10.1l.4-.3 2.7 2.7 3 2.9q.7.3 1.3-.4v-1L19 17.6 16.3 15l.3-.4A8 8 0 0 0 9.2 2m1.4 2a6 6 0 1 1-1.2 12 6 6 0 0 1 1.2-12'/></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='M9.2 2a8 8 0 0 0-6.4 4.5 8 8 0 0 0 11.7 10.1l.4-.3 2.7 2.7 3 2.9q.7.3 1.3-.4v-1L19 17.6 16.3 15l.3-.4A8 8 0 0 0 9.2 2m1.4 2a6 6 0 1 1-1.2 12 6 6 0 0 1 1.2-12'/></svg>")}
.lpen-i--x{-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='m5.7 5-.6.5v.9l2.8 2.9 2.7 2.7-2.7 2.7L5 18l.1.5.6.5.7-.1 2.9-2.8 2.7-2.7 2.7 2.7L18 19l.5-.1.5-.6-.1-.7-2.8-2.9-2.7-2.7 2.7-2.7L19 6l-.1-.5a1 1 0 0 0-1.2-.4c-.2 0-.5.3-3 2.8L12 10.6 9.3 7.9a21 21 0 0 0-3-2.8z'/></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='m5.7 5-.6.5v.9l2.8 2.9 2.7 2.7-2.7 2.7L5 18l.1.5.6.5.7-.1 2.9-2.8 2.7-2.7 2.7 2.7L18 19l.5-.1.5-.6-.1-.7-2.8-2.9-2.7-2.7 2.7-2.7L19 6l-.1-.5a1 1 0 0 0-1.2-.4c-.2 0-.5.3-3 2.8L12 10.6 9.3 7.9a21 21 0 0 0-3-2.8z'/></svg>")}