/* =========================================================================
   HAIBRIDGE ENHANCEMENTS
   Mega menu, sticky header, off-canvas navigation, sticky sidebar,
   scroll-to-top, breadcrumbs and reading progress — the features a
   commercial theme framework would normally put behind a licence.

   Everything here consumes tokens from tokens.css. No hard-coded values.

   Deliberately not built: white label, blog masonry, WooCommerce
   quick-view, and any typography / colour / spacing module, because the
   token system and the Customizer already cover those. Unused CSS is
   weight and maintenance surface.
   ====================================================================== */

/* -------------------------------------------------------------------------
   1. STICKY HEADER
   Condenses on scroll rather than simply pinning. On a 175-course catalogue
   the header is competing with content for vertical space on every scroll.
   ---------------------------------------------------------------------- */

.hie-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--hie-z-header);
  background-color: var(--hie-color-bg);
  border-block-end: 1px solid var(--hie-color-border);
  transition:
    padding-block var(--hie-dur-mid) var(--hie-ease-out),
    box-shadow var(--hie-dur-mid) var(--hie-ease-out);
  padding-block: var(--hie-space-md);
}

.hie-header.is-condensed {
  padding-block: var(--hie-space-xs);
  box-shadow: var(--hie-shadow-sm);
}

.hie-header.is-condensed .hie-header__logo {
  transform: scale(0.86);
}

.hie-header__logo {
  transition: transform var(--hie-dur-mid) var(--hie-ease-out);
  transform-origin: left center;
}

/* Transparent variant, for pages that open on a dark hero. Add
   .hie-header--transparent to the header and .hie-hero--dark to the page. */
.hie-header--transparent:not(.is-condensed) {
  position: absolute;
  inset-inline: 0;
  background-color: transparent;
  border-block-end-color: transparent;
}

.hie-header--transparent:not(.is-condensed) .hie-menu-link {
  color: var(--hie-color-text-inverse);
}

/* The element the observer watches. Zero height, no layout impact — using a
   scroll listener instead would fire hundreds of times per second. */
.hie-header-sentinel {
  block-size: 1px;
  margin-block-end: -1px;
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   2. MEGA MENU
   Ten course categories will not fit in a conventional dropdown without
   becoming a scrolling wall.
   ---------------------------------------------------------------------- */

.hie-nav {
  display: flex;
  align-items: center;
  gap: var(--hie-space-lg);
}

.hie-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hie-nav > ul {
  display: flex;
  align-items: center;
  gap: var(--hie-space-lg);
}

.hie-nav > ul > li {
  position: relative;
}

.hie-menu-link {
  display: inline-flex;
  align-items: center;
  gap: var(--hie-space-3xs);
  font-family: var(--hie-font-body);
  font-size: var(--hie-text-sm);
  font-weight: var(--hie-weight-medium);
  color: var(--hie-color-text);
  text-decoration: none;
  padding-block: var(--hie-space-2xs);
}

.hie-menu-link:hover,
.hie-menu-link:focus-visible {
  color: var(--hie-color-link);
}

.hie-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: currentColor;
}

.hie-menu-toggle__icon {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--hie-dur-fast) var(--hie-ease-out);
}

.hie-menu-toggle[aria-expanded="true"] .hie-menu-toggle__icon {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* The panel. Full-bleed on desktop so ten categories get real room. */
.hie-mega-panel {
  position: absolute;
  inset-block-start: calc(100% + var(--hie-space-sm));
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(-6px);
  inline-size: min(64rem, calc(100vw - 3rem));
  background-color: var(--hie-color-bg);
  border: 1px solid var(--hie-color-border);
  border-radius: var(--hie-radius-lg);
  box-shadow: var(--hie-shadow-lg);
  padding: var(--hie-space-lg);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--hie-dur-fast) var(--hie-ease-out),
    transform var(--hie-dur-fast) var(--hie-ease-out),
    visibility 0s linear var(--hie-dur-fast);
}

.hie-has-mega.is-open > .hie-mega-panel,
.hie-mega-panel:focus-within {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}

.hie-mega-panel__grid {
  display: grid;
  gap: var(--hie-space-xs) var(--hie-space-lg);
}

.hie-mega-panel[data-columns="2"] .hie-mega-panel__grid { grid-template-columns: repeat(2, 1fr); }
.hie-mega-panel[data-columns="3"] .hie-mega-panel__grid { grid-template-columns: repeat(3, 1fr); }
.hie-mega-panel[data-columns="4"] .hie-mega-panel__grid { grid-template-columns: repeat(4, 1fr); }

.hie-mega-panel .hie-menu-link {
  display: block;
  padding: var(--hie-space-2xs) var(--hie-space-xs);
  border-radius: var(--hie-radius-sm);
  font-size: var(--hie-text-sm);
}

.hie-mega-panel .hie-menu-link:hover,
.hie-mega-panel .hie-menu-link:focus-visible {
  background-color: var(--hie-navy-050);
  color: var(--hie-navy-700);
}

/* Conventional dropdown for non-mega parents. */
.hie-submenu {
  position: absolute;
  inset-block-start: calc(100% + var(--hie-space-2xs));
  inset-inline-start: 0;
  min-inline-size: 14rem;
  background-color: var(--hie-color-bg);
  border: 1px solid var(--hie-color-border);
  border-radius: var(--hie-radius-md);
  box-shadow: var(--hie-shadow-md);
  padding: var(--hie-space-2xs);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--hie-dur-fast) var(--hie-ease-out),
    visibility 0s linear var(--hie-dur-fast);
}

li.is-open > .hie-submenu,
.hie-submenu:focus-within {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.hie-submenu .hie-menu-link {
  display: block;
  padding: var(--hie-space-2xs) var(--hie-space-xs);
  border-radius: var(--hie-radius-sm);
}

.hie-submenu .hie-menu-link:hover,
.hie-submenu .hie-menu-link:focus-visible {
  background-color: var(--hie-navy-050);
}

/* -------------------------------------------------------------------------
   3. OFF-CANVAS MOBILE NAVIGATION
   ---------------------------------------------------------------------- */

.hie-offcanvas-trigger {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 1px solid var(--hie-color-border);
  border-radius: var(--hie-radius-md);
  background: none;
  cursor: pointer;
}

.hie-offcanvas-trigger__bars,
.hie-offcanvas-trigger__bars::before,
.hie-offcanvas-trigger__bars::after {
  display: block;
  inline-size: 1.125rem;
  block-size: 2px;
  background-color: var(--hie-color-text);
  transition: transform var(--hie-dur-fast) var(--hie-ease-out);
}

.hie-offcanvas-trigger__bars::before,
.hie-offcanvas-trigger__bars::after {
  content: "";
  position: absolute;
}

.hie-offcanvas-trigger__bars::before { transform: translateY(-6px); }
.hie-offcanvas-trigger__bars::after  { transform: translateY(6px); }

.hie-offcanvas {
  position: fixed;
  inset: 0;
  z-index: var(--hie-z-overlay);
  visibility: hidden;
  pointer-events: none;
}

.hie-offcanvas.is-open {
  visibility: visible;
  pointer-events: auto;
}

.hie-offcanvas__scrim {
  position: absolute;
  inset: 0;
  background-color: rgb(10 22 40 / 0.5);
  opacity: 0;
  transition: opacity var(--hie-dur-mid) var(--hie-ease-out);
}

.hie-offcanvas.is-open .hie-offcanvas__scrim { opacity: 1; }

.hie-offcanvas__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(22rem, 88vw);
  background-color: var(--hie-color-bg);
  box-shadow: var(--hie-shadow-lg);
  padding: var(--hie-space-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--hie-dur-mid) var(--hie-ease-out);
}

.hie-offcanvas.is-open .hie-offcanvas__panel { transform: translateX(0); }

.hie-offcanvas__close {
  position: absolute;
  inset-block-start: var(--hie-space-md);
  inset-inline-end: var(--hie-space-md);
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: var(--hie-text-xl);
  line-height: 1;
  color: var(--hie-color-text);
}

/* Inside the panel, everything is a stacked accordion — no hover states
   exist on touch, so a hover-driven mega menu is unusable here. */
.hie-offcanvas .hie-nav,
.hie-offcanvas .hie-nav > ul {
  display: block;
}

.hie-offcanvas .hie-mega-panel,
.hie-offcanvas .hie-submenu {
  position: static;
  transform: none;
  inline-size: auto;
  border: 0;
  box-shadow: none;
  padding: 0 0 0 var(--hie-space-sm);
  opacity: 1;
  visibility: visible;
  display: none;
}

.hie-offcanvas li.is-open > .hie-mega-panel,
.hie-offcanvas li.is-open > .hie-submenu {
  display: block;
}

.hie-offcanvas .hie-mega-panel__grid {
  grid-template-columns: 1fr !important;
}

.hie-offcanvas .hie-menu-link {
  padding-block: var(--hie-space-xs);
  font-size: var(--hie-text-md);
}

.hie-offcanvas li {
  border-block-end: 1px solid var(--hie-color-border);
}

/* Locks background scroll while the panel is open. */
body.hie-offcanvas-open {
  overflow: hidden;
}

@media (max-width: 1024px) {
  .hie-offcanvas-trigger { display: inline-flex; }
  .hie-header .hie-nav { display: none; }
}

/* -------------------------------------------------------------------------
   4. STICKY SIDEBAR
   Carries the enrolment card down a long course page. Pure CSS — no
   position:fixed maths, no scroll listener.
   ---------------------------------------------------------------------- */

.hie-sticky {
  position: sticky;
  inset-block-start: calc(var(--hie-header-height, 5rem) + var(--hie-space-md));
}

@media (max-width: 1024px) {
  /* Below the breakpoint the enrolment card becomes a bottom sheet instead,
     because a sticky sidebar on a narrow screen eats the content. */
  .hie-sticky { position: static; }

  .hie-sticky--sheet {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--hie-z-sheet);
    background-color: var(--hie-color-bg);
    border-block-start: 1px solid var(--hie-color-border);
    box-shadow: 0 -4px 20px rgb(10 22 40 / 0.08);
    padding: var(--hie-space-sm) var(--hie-space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hie-space-sm);
  }
}

/* -------------------------------------------------------------------------
   5. READING PROGRESS
   ---------------------------------------------------------------------- */

.hie-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  z-index: var(--hie-z-dropdown);
  background-color: transparent;
  pointer-events: none;
}

.hie-progress__bar {
  block-size: 100%;
  inline-size: 0;
  background-color: var(--hie-brass-400);
  transition: inline-size 80ms linear;
}

/* -------------------------------------------------------------------------
   6. SCROLL TO TOP
   ---------------------------------------------------------------------- */

.hie-to-top {
  position: fixed;
  inset-block-end: var(--hie-space-lg);
  inset-inline-end: var(--hie-space-lg);
  z-index: var(--hie-z-sticky);
  inline-size: 2.75rem;
  block-size: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hie-color-border);
  border-radius: var(--hie-radius-pill);
  background-color: var(--hie-color-bg);
  box-shadow: var(--hie-shadow-md);
  color: var(--hie-color-text);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity var(--hie-dur-mid) var(--hie-ease-out),
    transform var(--hie-dur-mid) var(--hie-ease-out),
    visibility 0s linear var(--hie-dur-mid);
}

.hie-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.hie-to-top__icon {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-inline-start: 2px solid currentColor;
  border-block-start: 2px solid currentColor;
  transform: rotate(45deg) translate(1px, 1px);
}

/* Sits above the mobile bottom sheet when both are present. */
@media (max-width: 1024px) {
  .hie-to-top { inset-block-end: calc(var(--hie-space-lg) + 4.5rem); }
}

/* -------------------------------------------------------------------------
   7. BREADCRUMBS
   ---------------------------------------------------------------------- */

.hie-breadcrumbs {
  font-size: var(--hie-text-sm);
  color: var(--hie-color-text-muted);
  padding-block: var(--hie-space-sm);
}

.hie-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hie-space-3xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.hie-breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin-inline-start: var(--hie-space-3xs);
  color: var(--hie-color-text-subtle);
}

.hie-breadcrumbs a {
  color: var(--hie-color-text-muted);
  text-decoration: none;
}

.hie-breadcrumbs a:hover,
.hie-breadcrumbs a:focus-visible {
  color: var(--hie-color-link);
  text-decoration: underline;
}

.hie-breadcrumbs [aria-current="page"] {
  color: var(--hie-color-text);
  font-weight: var(--hie-weight-medium);
}

/* -------------------------------------------------------------------------
   8. MOTION AND CONTRAST SAFETY
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hie-header,
  .hie-header__logo,
  .hie-mega-panel,
  .hie-submenu,
  .hie-offcanvas__panel,
  .hie-offcanvas__scrim,
  .hie-to-top,
  .hie-progress__bar {
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .hie-mega-panel,
  .hie-submenu,
  .hie-offcanvas__panel,
  .hie-to-top {
    border: 1px solid CanvasText;
  }

  .hie-progress__bar {
    background-color: Highlight;
  }
}

/* =========================================================================
   9. STANDALONE THEME TEMPLATES  (added 3.0.0)
   Styles for the markup this theme now renders itself, having no parent.
   ====================================================================== */

/* Skip link. Must be reachable and must clear the sticky header when it
   receives focus — hence the dedicated z-index token. */
.hie-skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--hie-space-md);
  z-index: var(--hie-z-skiplink);
  padding: var(--hie-space-xs) var(--hie-space-md);
  background-color: var(--hie-color-cta-bg);
  color: var(--hie-color-cta-text);
  font-weight: var(--hie-weight-semibold);
  border-radius: 0 0 var(--hie-radius-md) var(--hie-radius-md);
  text-decoration: none;
}

.hie-skip-link:focus {
  inset-block-start: 0;
  clip: auto;
  inline-size: auto;
  block-size: auto;
}

.hie-site {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
}

.hie-main {
  flex: 1 0 auto;
}

.hie-main:focus {
  outline: none;
}

/* Header layout */
.hie-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hie-space-lg);
}

.hie-wordmark {
  font-family: var(--hie-font-display);
  font-size: var(--hie-text-xl);
  font-weight: var(--hie-weight-bold);
  letter-spacing: var(--hie-tracking-display);
  color: var(--hie-navy-700);
  text-decoration: none;
}

/* Footer */
.hie-footer {
  margin-block-start: var(--hie-space-2xl);
  padding-block: var(--hie-space-xl);
  background-color: var(--hie-color-bg-sunken);
  border-block-start: 1px solid var(--hie-color-border);
}

.hie-footer__menu,
.hie-footer__legal-menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hie-space-md);
  list-style: none;
  margin: 0 0 var(--hie-space-md);
  padding: 0;
  font-size: var(--hie-text-sm);
}

.hie-footer__legal {
  border-block-start: 1px solid var(--hie-color-border);
  padding-block-start: var(--hie-space-md);
  margin-block-start: var(--hie-space-md);
}

.hie-footer__trading,
.hie-footer__copyright {
  font-size: var(--hie-text-sm);
  color: var(--hie-color-text-muted);
  margin-block: 0 var(--hie-space-xs);
}

/* Archive and single */
.hie-archive-header,
.hie-page-header,
.hie-entry-header {
  margin-block-end: var(--hie-space-lg);
}

.hie-entry-meta {
  font-size: var(--hie-text-sm);
  color: var(--hie-color-text-muted);
}

.hie-entry-meta__sep {
  margin-inline: var(--hie-space-2xs);
}

.hie-entry-thumbnail {
  margin: 0 0 var(--hie-space-lg);
}

.hie-entry-thumbnail img {
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--hie-radius-lg);
}

/* Post list */
.hie-post-list {
  display: grid;
  gap: var(--hie-space-lg);
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

.hie-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hie-color-border);
  border-radius: var(--hie-radius-lg);
  overflow: hidden;
  background-color: var(--hie-color-surface);
  transition: box-shadow var(--hie-dur-fast) var(--hie-ease-out);
}

.hie-card:hover {
  box-shadow: var(--hie-shadow-md);
}

.hie-card__media img {
  inline-size: 100%;
  block-size: auto;
  display: block;
}

.hie-card__body {
  padding: var(--hie-space-md);
}

.hie-card__title {
  font-size: var(--hie-text-lg);
  margin-block: 0 var(--hie-space-2xs);
}

.hie-card__title a {
  text-decoration: none;
  color: var(--hie-navy-700);
}

.hie-card__meta {
  font-size: var(--hie-text-sm);
  color: var(--hie-color-text-muted);
  margin-block-end: var(--hie-space-xs);
}

/* Pagination */
.hie-pagination {
  margin-block-start: var(--hie-space-xl);
}

.hie-pagination__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hie-space-2xs);
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}

.hie-pagination__list a,
.hie-pagination__list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.5rem;
  block-size: 2.5rem;
  padding-inline: var(--hie-space-xs);
  border: 1px solid var(--hie-color-border);
  border-radius: var(--hie-radius-md);
  text-decoration: none;
  font-size: var(--hie-text-sm);
}

.hie-pagination__list .current {
  background-color: var(--hie-navy-700);
  border-color: var(--hie-navy-700);
  color: var(--hie-color-text-inverse);
}

/* Search form and empty states */
.hie-search-form {
  display: flex;
  gap: var(--hie-space-2xs);
  margin-block: var(--hie-space-md);
}

.hie-search-form__field {
  flex: 1 1 auto;
  padding: var(--hie-space-xs) var(--hie-space-sm);
  border: 1px solid var(--hie-color-border-strong);
  border-radius: var(--hie-radius-md);
  font-family: var(--hie-font-body);
  font-size: var(--hie-text-md);
}

.hie-empty-state,
.hie-404 {
  padding-block: var(--hie-space-2xl);
  text-align: center;
}

.hie-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hie-space-xs);
  justify-content: center;
  margin-block: var(--hie-space-lg);
}

/* Post navigation */
.hie-post-navigation {
  display: flex;
  justify-content: space-between;
  gap: var(--hie-space-md);
  margin-block-start: var(--hie-space-xl);
  padding-block-start: var(--hie-space-md);
  border-block-start: 1px solid var(--hie-color-border);
}

.hie-nav-label {
  display: block;
  font-size: var(--hie-text-sm);
  color: var(--hie-color-text-muted);
}

/* -------------------------------------------------------------------------
   10. CONTENT + SIDEBAR LAYOUT
   Collapses to a single column when the sidebar holds no widgets, because
   sidebar.php returns early and the grid has nothing to place.
   ---------------------------------------------------------------------- */

.hie-layout {
  display: grid;
  gap: var(--hie-space-xl);
  align-items: start;
}

.hie-layout:has(.hie-sidebar) {
  grid-template-columns: minmax(0, 1fr) 18rem;
}

.hie-layout__main {
  min-inline-size: 0;
}

.hie-sidebar {
  font-size: var(--hie-text-sm);
}

.hie-widget + .hie-widget {
  margin-block-start: var(--hie-space-lg);
}

.hie-widget__title {
  font-size: var(--hie-text-md);
  margin-block-end: var(--hie-space-xs);
}

@media (max-width: 900px) {
  .hie-layout:has(.hie-sidebar) {
    grid-template-columns: 1fr;
  }
}

/* Comments */
.hie-comments {
  margin-block-start: var(--hie-space-2xl);
  padding-block-start: var(--hie-space-lg);
  border-block-start: 1px solid var(--hie-color-border);
}

.hie-comments__list {
  list-style: none;
  margin: 0 0 var(--hie-space-xl);
  padding: 0;
}

.hie-comments__list .children {
  list-style: none;
  margin-inline-start: var(--hie-space-lg);
  padding: 0;
}

.hie-comments__list li {
  padding-block: var(--hie-space-md);
  border-block-end: 1px solid var(--hie-color-border);
}

.hie-comments .comment-form label {
  display: block;
  font-size: var(--hie-text-sm);
  font-weight: var(--hie-weight-medium);
  margin-block-end: var(--hie-space-3xs);
}

.hie-comments .comment-form input[type="text"],
.hie-comments .comment-form input[type="email"],
.hie-comments .comment-form input[type="url"],
.hie-comments .comment-form textarea {
  inline-size: 100%;
  padding: var(--hie-space-xs) var(--hie-space-sm);
  border: 1px solid var(--hie-color-border-strong);
  border-radius: var(--hie-radius-md);
  font-family: var(--hie-font-body);
  font-size: var(--hie-text-md);
}

/* WooCommerce container inherits the site's rhythm rather than Woo's. */
.hie-woocommerce {
  padding-block: var(--hie-space-xl);
}

/* -------------------------------------------------------------------------
   11. COURSE CATALOGUE
   Rendered by [hie_courses] from the credentials plugin.
   ---------------------------------------------------------------------- */

.hie-catalogue__filters {
  display: grid;
  gap: var(--hie-space-sm);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  align-items: end;
  padding: var(--hie-space-md);
  background-color: var(--hie-color-bg-sunken);
  border: 1px solid var(--hie-color-border);
  border-radius: var(--hie-radius-lg);
  margin-block-end: var(--hie-space-lg);
}

.hie-filter label {
  display: block;
  font-size: var(--hie-text-sm);
  font-weight: var(--hie-weight-medium);
  margin-block-end: var(--hie-space-3xs);
}

.hie-filter input,
.hie-filter select {
  inline-size: 100%;
  padding: var(--hie-space-2xs) var(--hie-space-xs);
  border: 1px solid var(--hie-color-border-strong);
  border-radius: var(--hie-radius-md);
  font-family: var(--hie-font-body);
  font-size: var(--hie-text-sm);
  background-color: var(--hie-color-bg);
  min-block-size: 2.75rem;
}

.hie-catalogue__count {
  font-size: var(--hie-text-sm);
  color: var(--hie-color-text-muted);
  margin-block-end: var(--hie-space-md);
}

.hie-catalogue__grid {
  display: grid;
  gap: var(--hie-space-lg);
}

.hie-catalogue__grid[data-columns="2"] { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
.hie-catalogue__grid[data-columns="3"] { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.hie-catalogue__grid[data-columns="4"] { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }

.hie-course-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--hie-color-border);
  border-radius: var(--hie-radius-lg);
  background-color: var(--hie-color-surface);
  overflow: hidden;
  transition: box-shadow var(--hie-dur-fast) var(--hie-ease-out),
              transform var(--hie-dur-fast) var(--hie-ease-out);
}

.hie-course-card:hover {
  box-shadow: var(--hie-shadow-md);
  transform: translateY(-2px);
}

.hie-course-card__body {
  padding: var(--hie-space-md);
}

.hie-course-card__level {
  display: inline-block;
  font-size: var(--hie-text-xs);
  font-weight: var(--hie-weight-semibold);
  letter-spacing: var(--hie-tracking-label);
  text-transform: uppercase;
  color: var(--hie-navy-500);
  background-color: var(--hie-navy-050);
  padding: 2px var(--hie-space-2xs);
  border-radius: var(--hie-radius-sm);
  margin-block-end: var(--hie-space-2xs);
}

.hie-course-card__title {
  font-size: var(--hie-text-lg);
  line-height: var(--hie-leading-snug);
  margin-block: 0 var(--hie-space-2xs);
}

.hie-course-card__title a {
  color: var(--hie-navy-700);
  text-decoration: none;
}

.hie-course-card__excerpt {
  font-size: var(--hie-text-sm);
  color: var(--hie-color-text-muted);
  margin-block-end: var(--hie-space-xs);
}

.hie-course-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hie-space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--hie-text-xs);
  color: var(--hie-color-text-subtle);
}

.hie-course-card__meta li:not(:last-child)::after {
  content: "·";
  margin-inline-start: var(--hie-space-xs);
}

.hie-course-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hie-space-sm);
  padding: var(--hie-space-sm) var(--hie-space-md);
  border-block-start: 1px solid var(--hie-color-border);
  background-color: var(--hie-color-bg-sunken);
}

.hie-course-card__footer .hie-price__amount {
  font-size: var(--hie-text-lg);
}

.hie-catalogue__empty {
  padding-block: var(--hie-space-2xl);
  text-align: center;
}

.hie-my-credentials {
  display: grid;
  gap: var(--hie-space-md);
}

/* -------------------------------------------------------------------------
   12. COURSE ASSISTANT
   Rendered by [hie_assistant]. Extractive search — everything shown was
   written and published by a person.
   ---------------------------------------------------------------------- */

.hie-assistant {
  border: 1px solid var(--hie-color-border);
  border-radius: var(--hie-radius-lg);
  padding: var(--hie-space-lg);
  background-color: var(--hie-color-bg-sunken);
}

.hie-assistant__heading {
  font-size: var(--hie-text-xl);
  margin-block: 0 var(--hie-space-sm);
}

.hie-assistant__form {
  display: flex;
  gap: var(--hie-space-2xs);
}

.hie-assistant__input {
  flex: 1 1 auto;
  min-block-size: 2.75rem;
  padding: var(--hie-space-2xs) var(--hie-space-sm);
  border: 1px solid var(--hie-color-border-strong);
  border-radius: var(--hie-radius-md);
  font-family: var(--hie-font-body);
  font-size: var(--hie-text-md);
  background-color: var(--hie-color-bg);
}

.hie-assistant__suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hie-space-2xs);
  margin-block-start: var(--hie-space-sm);
  font-size: var(--hie-text-sm);
  color: var(--hie-color-text-muted);
}

.hie-assistant__suggestions button {
  border: 1px solid var(--hie-color-border);
  background-color: var(--hie-color-bg);
  border-radius: var(--hie-radius-pill);
  padding: 4px var(--hie-space-xs);
  font-size: var(--hie-text-sm);
  cursor: pointer;
  color: var(--hie-color-link);
}

.hie-assistant__suggestions button:hover {
  background-color: var(--hie-navy-050);
}

.hie-assistant__results:not(:empty) {
  margin-block-start: var(--hie-space-lg);
}

.hie-assistant__count {
  font-size: var(--hie-text-sm);
  color: var(--hie-color-text-muted);
  margin-block-end: var(--hie-space-xs);
}

.hie-assistant__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--hie-space-sm);
}

.hie-assistant__item {
  background-color: var(--hie-color-bg);
  border: 1px solid var(--hie-color-border);
  border-radius: var(--hie-radius-md);
  padding: var(--hie-space-sm) var(--hie-space-md);
}

.hie-assistant__item h3 {
  font-size: var(--hie-text-md);
  margin-block: 0 var(--hie-space-3xs);
}

.hie-assistant__item h3 a {
  text-decoration: none;
  color: var(--hie-navy-700);
}

.hie-assistant__meta {
  font-size: var(--hie-text-xs);
  color: var(--hie-color-text-subtle);
  margin-block: 0 var(--hie-space-3xs);
}

.hie-assistant__excerpt {
  font-size: var(--hie-text-sm);
  color: var(--hie-color-text-muted);
  margin: 0;
}

/* A gated answer is reviewed copy, not a search result. It should not look
   like one — the visual difference is part of the honesty. */
.hie-assistant__card {
  background-color: var(--hie-color-bg);
  border: 1px solid var(--hie-color-border);
  border-radius: var(--hie-radius-md);
  padding: var(--hie-space-md);
}

.hie-assistant__card--gated {
  border-inline-start: 4px solid var(--hie-navy-500);
}

.hie-assistant__card h3 {
  font-size: var(--hie-text-md);
  margin-block: 0 var(--hie-space-2xs);
}

.hie-assistant__fine {
  font-size: var(--hie-text-sm);
  color: var(--hie-color-text-muted);
}

.hie-assistant__note {
  font-size: var(--hie-text-xs);
  color: var(--hie-color-text-subtle);
  margin-block: var(--hie-space-md) 0;
}