/* ==========================================================================
   Immigration Professionals hub — course finder mockup
   --------------------------------------------------------------------------
   Source file: unscoped and readable. build_immigration_hub.py prefixes every
   selector with #lpen-cf at deploy time (CLAUDE.md §18b.3) because the kit
   stylesheet emits `.elementor-kit-8 h3 {...}` at specificity (0,1,1) and
   would otherwise outbid every class here.

   This styles ONE html widget: the placeholder standing in for the course
   filter plugin. Everything else on the page is native Elementor widgets and
   is styled through Elementor's own controls.
   ========================================================================== */

:root {
  --lpen-cf-navy-900: #012032;
  --lpen-cf-navy-800: #022E48;
  --lpen-cf-navy-700: #0B4465;
  --lpen-cf-navy-100: #C9DDE8;
  --lpen-cf-navy-50:  #E5EEF3;
  --lpen-cf-action:   #0F5C96;
  --lpen-cf-surface:  #F6F8FA;
  --lpen-cf-border:   #CFD6DD;
  --lpen-cf-text:     #111820;
  --lpen-cf-second:   #4A5666;
  --lpen-cf-subtle:   #6B7684;
  --lpen-cf-white:    #FFFFFF;
  --lpen-cf-amber:    #8A5A00;
  --lpen-cf-amber-bg: #FDF6E7;
  --lpen-cf-amber-bd: #E8CF9A;
  --lpen-cf-skel:     #E3E8ED;
  --lpen-cf-skel-hi:  #F2F5F8;
}

/* Elementor gives every widget position:relative, which would anchor any
   absolutely-positioned child to the widget rather than the section (§18b.4).
   Nothing here is absolute today, but the sticky bar needs a static wrapper
   to escape, so this stays. */
.lpen-cf-host { position: static !important; }

#lpen-cf {
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--lpen-cf-text);
  -webkit-font-smoothing: antialiased;
}

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

/* ---------------------------------------------------------------- icons
   Tabler 3.46.0 as CSS masks, not inline <svg> — the HTML-widget sanitiser
   strips <svg> (§18b.1). background-color: currentColor keeps §18a's
   colour-inheritance rule intact and loads no icon font. */
#lpen-cf .lpen-i {
  display: inline-block;
  width: 20px;
  height: 20px;
  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;
  vertical-align: -0.2em;
}
#lpen-cf .lpen-i--16 { width: 16px; height: 16px; }
#lpen-cf .lpen-i--24 { width: 24px; height: 24px; }
#lpen-cf .lpen-i--32 { width: 32px; height: 32px; }

/* ---------------------------------------------------------------- flag
   The honest label. This block is a mockup living on a page that may well be
   published before the plugin exists, so it says so, loudly, at the top. */
#lpen-cf .lpen-cf__flag {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 18px;
  margin: 0 0 20px;
  border: 1px solid var(--lpen-cf-amber-bd);
  border-left: 4px solid var(--lpen-cf-amber);
  border-radius: 0 6px 6px 0;
  background: var(--lpen-cf-amber-bg);
  color: var(--lpen-cf-amber);
}
#lpen-cf .lpen-cf__flag .lpen-i { margin-top: 2px; }
#lpen-cf .lpen-cf__flagtext { margin: 0; }
#lpen-cf .lpen-cf__flagtext b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
#lpen-cf .lpen-cf__flagtext span {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  line-height: 23px;
  color: #6E4A08;
}

/* ---------------------------------------------------------------- bar */
#lpen-cf .lpen-cf__bar {
  border: 1px solid var(--lpen-cf-border);
  border-radius: 8px;
  background: var(--lpen-cf-white);
  padding: 20px;
}

#lpen-cf .lpen-cf__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Search — the <input> is injected by the script, because the sanitiser
   removes <input> from html-widget markup (§18b.1). The wrapper and its
   icon are server-rendered so the field has a home to land in. */
#lpen-cf .lpen-cf__search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 320px;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  gap: 10px;
  border: 1px solid var(--lpen-cf-border);
  border-radius: 6px;
  background: var(--lpen-cf-surface);
  color: var(--lpen-cf-subtle);
}
#lpen-cf .lpen-cf__search:focus-within {
  border-color: var(--lpen-cf-action);
  box-shadow: 0 0 0 3px rgba(15, 92, 150, 0.16);
  background: var(--lpen-cf-white);
}
#lpen-cf .lpen-cf__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  color: var(--lpen-cf-text);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
#lpen-cf .lpen-cf__input::-webkit-search-cancel-button { display: none; }
#lpen-cf .lpen-cf__input::placeholder { color: var(--lpen-cf-subtle); opacity: 1; }

/* Sort control. Deliberately a plain element, not a <select>: it changes
   nothing yet, and a real dropdown that does nothing is worse than an
   obvious placeholder. */
#lpen-cf .lpen-cf__sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--lpen-cf-border);
  border-radius: 6px;
  background: var(--lpen-cf-white);
  color: var(--lpen-cf-second);
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
}
#lpen-cf .lpen-cf__sort em { font-style: normal; color: var(--lpen-cf-subtle); font-weight: 400; }

#lpen-cf .lpen-cf__count {
  margin: 0 0 0 auto;
  font-size: 15px;
  line-height: 24px;
  color: var(--lpen-cf-subtle);
  white-space: nowrap;
}
#lpen-cf .lpen-cf__count b { color: var(--lpen-cf-text); font-weight: 700; }

/* ---------------------------------------------------------------- chips */
#lpen-cf .lpen-cf__chips {
  list-style: none;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--lpen-cf-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
#lpen-cf .lpen-cf__chips + .lpen-cf__chips { margin-top: 10px; padding-top: 10px; border-top: 0; }

#lpen-cf .lpen-cf__chiplabel {
  display: inline-block;
  min-width: 96px;
  padding-right: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lpen-cf-subtle);
}

#lpen-cf .lpen-cf__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--lpen-cf-border);
  border-radius: 999px;
  background: var(--lpen-cf-white);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: var(--lpen-cf-second);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
#lpen-cf .lpen-cf__chip:hover { border-color: var(--lpen-cf-action); color: var(--lpen-cf-action); }
#lpen-cf .lpen-cf__chip:focus-visible {
  outline: 2px solid var(--lpen-cf-action);
  outline-offset: 2px;
}
#lpen-cf .lpen-cf__chip.is-on {
  background: var(--lpen-cf-action);
  border-color: var(--lpen-cf-action);
  color: var(--lpen-cf-white);
}
#lpen-cf .lpen-cf__chip.is-on .lpen-cf__n { background: rgba(255,255,255,.22); color: #fff; }

#lpen-cf .lpen-cf__n {
  display: inline-block;
  min-width: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--lpen-cf-navy-50);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  color: var(--lpen-cf-navy-700);
}

#lpen-cf .lpen-cf__chip--reset {
  border-style: dashed;
  color: var(--lpen-cf-subtle);
}

/* ---------------------------------------------------------------- grid */
#lpen-cf .lpen-cf__grid {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

#lpen-cf .lpen-cf__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--lpen-cf-border);
  border-radius: 8px;
  background: var(--lpen-cf-white);
  overflow: hidden;
}

#lpen-cf .lpen-cf__thumb {
  aspect-ratio: 16 / 9;
  background: var(--lpen-cf-navy-50);
  border-bottom: 1px solid var(--lpen-cf-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lpen-cf-navy-100);
}

#lpen-cf .lpen-cf__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  padding: 18px;
}

#lpen-cf .lpen-cf__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--lpen-cf-border);
}

/* Skeleton bars. The shimmer is the only motion on the page and it is
   switched off entirely under prefers-reduced-motion. */
#lpen-cf .lpen-cf__sk {
  display: block;
  height: 12px;
  border-radius: 4px;
  background: var(--lpen-cf-skel);
  background-image: linear-gradient(90deg,
      var(--lpen-cf-skel) 0%, var(--lpen-cf-skel-hi) 50%, var(--lpen-cf-skel) 100%);
  background-size: 200% 100%;
  animation: lpen-cf-shimmer 1.8s ease-in-out infinite;
}
#lpen-cf .lpen-cf__sk--tag { width: 34%; height: 18px; border-radius: 999px; }
#lpen-cf .lpen-cf__sk--h1 { width: 92%; height: 18px; }
#lpen-cf .lpen-cf__sk--h2 { width: 64%; height: 18px; }
#lpen-cf .lpen-cf__sk--meta { width: 78%; }
#lpen-cf .lpen-cf__sk--meta2 { width: 52%; }
#lpen-cf .lpen-cf__sk--price { width: 68px; height: 20px; }
#lpen-cf .lpen-cf__sk--btn { width: 116px; height: 38px; border-radius: 4px; }

@keyframes lpen-cf-shimmer {
  0%   { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

/* Slot annotations — card 1 only. With no real content in the grid, naming
   what each bar stands for is the only thing that makes the mockup legible.
   Repeating it on all six would be noise. */
#lpen-cf .lpen-cf__slot {
  display: flex;
  align-items: center;
  gap: 8px;
}
#lpen-cf .lpen-cf__slot .lpen-cf__sk { flex: 1 1 auto; }
#lpen-cf .lpen-cf__ann {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lpen-cf-navy-100);
  white-space: nowrap;
}
#lpen-cf .lpen-cf__card--annotated { border-color: var(--lpen-cf-navy-100); }
#lpen-cf .lpen-cf__card--annotated .lpen-cf__thumb { color: var(--lpen-cf-navy-100); }

/* ---------------------------------------------------------------- note */
#lpen-cf .lpen-cf__note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--lpen-cf-subtle);
}
#lpen-cf .lpen-cf__note .lpen-i { margin-top: 3px; }

/* Shown only when the script never runs. The chips and the search field both
   depend on JS, so with JS off the bar is decoration — say so rather than
   leaving dead controls on screen. */
#lpen-cf .lpen-cf__nojs {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 6px;
  background: var(--lpen-cf-navy-50);
  font-size: 15px;
  line-height: 23px;
  color: var(--lpen-cf-navy-700);
}
#lpen-cf.is-live .lpen-cf__nojs { display: none; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
  #lpen-cf .lpen-cf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  #lpen-cf .lpen-cf__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #lpen-cf .lpen-cf__bar { padding: 16px; }
  #lpen-cf .lpen-cf__count { margin-left: 0; width: 100%; }
  #lpen-cf .lpen-cf__sort { width: 100%; justify-content: space-between; }
  #lpen-cf .lpen-cf__chiplabel { min-width: 100%; }
  #lpen-cf .lpen-cf__chips { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  #lpen-cf .lpen-cf__sk { animation: none; background-image: none; }
  #lpen-cf .lpen-cf__chip { transition: none; }
}

/* ============ GENERATED ICONS — DO NOT EDIT ============ */
/* Tabler 3.46.0 — 6 glyphs, generated by build_immigration_hub.py */
.lpen-i--alert-triangle{-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='m11.4 1.7-1.3.7-.5.5-8.3 14Q1 17.4 1 18t.3 1.3q.4.9 1.3 1.3c.7.3-.2.3 9.4.3s8.7 0 9.4-.3A3 3 0 0 0 23 18q0-.7-.3-1.2L14 2.4q-.6-.5-1.3-.7zm1 2 .2.2L21 18c.1.4-.2 1-.7 1H3.7c-.5 0-.8-.7-.6-1.2L11.4 4l.6-.2zm-.7 4.4-.6.4v5q.1.2.4.3a1 1 0 0 0 1.4-.3v-5a1 1 0 0 0-1.2-.4m0 7-.6.4v1c.6.9 1.9.5 1.9-.5a1 1 0 0 0-.5-.9z'/></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='m11.4 1.7-1.3.7-.5.5-8.3 14Q1 17.4 1 18t.3 1.3q.4.9 1.3 1.3c.7.3-.2.3 9.4.3s8.7 0 9.4-.3A3 3 0 0 0 23 18q0-.7-.3-1.2L14 2.4q-.6-.5-1.3-.7zm1 2 .2.2L21 18c.1.4-.2 1-.7 1H3.7c-.5 0-.8-.7-.6-1.2L11.4 4l.6-.2zm-.7 4.4-.6.4v5q.1.2.4.3a1 1 0 0 0 1.4-.3v-5a1 1 0 0 0-1.2-.4m0 7-.6.4v1c.6.9 1.9.5 1.9-.5a1 1 0 0 0-.5-.9z'/></svg>")}
.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--info-circle{-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='M11 2a10 10 0 0 0-6 3q-3 3-3 7.3a10 10 0 0 0 3.8 7.5 10 10 0 0 0 7.6 2.1 10 10 0 0 0 5.7-2.8 10 10 0 0 0-.9-15 10 10 0 0 0-7.1-2m1.6 2a8 8 0 1 1-1.4 16 8 8 0 0 1 1.4-16m-1 4-.6.4v1c.6.9 1.9.5 1.9-.5a1 1 0 0 0-.5-.9zm-1 3-.6.4v1l.7.5h.2v1.6c0 1.7 0 1.7.2 2l.3.3h1.8q.3 0 .6-.4v-1l-.7-.5H13v-3.3l-.1-.2-.6-.4c-.2-.1-1.4-.1-1.6 0'/></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='M11 2a10 10 0 0 0-6 3q-3 3-3 7.3a10 10 0 0 0 3.8 7.5 10 10 0 0 0 7.6 2.1 10 10 0 0 0 5.7-2.8 10 10 0 0 0-.9-15 10 10 0 0 0-7.1-2m1.6 2a8 8 0 1 1-1.4 16 8 8 0 0 1 1.4-16m-1 4-.6.4v1c.6.9 1.9.5 1.9-.5a1 1 0 0 0-.5-.9zm-1 3-.6.4v1l.7.5h.2v1.6c0 1.7 0 1.7.2 2l.3.3h1.8q.3 0 .6-.4v-1l-.7-.5H13v-3.3l-.1-.2-.6-.4c-.2-.1-1.4-.1-1.6 0'/></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--sort-descending{-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='m3.7 5-.6.5v1q.2.4.6.4h9.6q.4 0 .6-.4v-1l-.6-.4zm14 0-.6.4v5.2l-.1 4.9-.7-.7q-.8-1-1-.8a1 1 0 0 0-1.2.4v.9L18 19c.4 0 .5 0 2.2-1.8q1.6-1.5 1.7-1.8v-.9a1 1 0 0 0-1.2-.4q-.2-.1-1 .8l-.7.7V5.7l-.1-.2a1 1 0 0 0-1.2-.4m-14 6-.6.4v1q.2.3.6.4h7.6q.4 0 .6-.4v-1l-.6-.4zm0 6-.6.4v1q.2.4.6.4h7.6q.4 0 .6-.4v-1l-.6-.4z'/></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='m3.7 5-.6.5v1q.2.4.6.4h9.6q.4 0 .6-.4v-1l-.6-.4zm14 0-.6.4v5.2l-.1 4.9-.7-.7q-.8-1-1-.8a1 1 0 0 0-1.2.4v.9L18 19c.4 0 .5 0 2.2-1.8q1.6-1.5 1.7-1.8v-.9a1 1 0 0 0-1.2-.4q-.2-.1-1 .8l-.7.7V5.7l-.1-.2a1 1 0 0 0-1.2-.4m-14 6-.6.4v1q.2.3.6.4h7.6q.4 0 .6-.4v-1l-.6-.4zm0 6-.6.4v1q.2.4.6.4h7.6q.4 0 .6-.4v-1l-.6-.4z'/></svg>")}
.lpen-i--video{-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 5a3 3 0 0 0-2.4 2.2v9.6a3 3 0 0 0 2 2l.4.2h9l.3-.1a3 3 0 0 0 2-2l.2-.8v-.5l3.5 1.7a2 2 0 0 0 1.6-.2q.7-.5.9-1.3V8.2l-.1-.3q-.3-.8-1.3-1.2h-1.2L16 8.4v-.5l-.1-.8a3 3 0 0 0-2-2H4.5m8.8 2q.5 0 .6.6L14 12c0 4.5 0 4.3-.2 4.6l-.3.3h-9l-.4-.6V7.7q0-.5.6-.6zM20 12v3.4l-2-1-2-1v-2.8l2-1 2-1z'/></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 5a3 3 0 0 0-2.4 2.2v9.6a3 3 0 0 0 2 2l.4.2h9l.3-.1a3 3 0 0 0 2-2l.2-.8v-.5l3.5 1.7a2 2 0 0 0 1.6-.2q.7-.5.9-1.3V8.2l-.1-.3q-.3-.8-1.3-1.2h-1.2L16 8.4v-.5l-.1-.8a3 3 0 0 0-2-2H4.5m8.8 2q.5 0 .6.6L14 12c0 4.5 0 4.3-.2 4.6l-.3.3h-9l-.4-.6V7.7q0-.5.6-.6zM20 12v3.4l-2-1-2-1v-2.8l2-1 2-1z'/></svg>")}