/* =========================================================================
   PAGE SECTIONS  —  Haibridge  v3.3.0

   Homepage and category-page components rendered by inc/class-hie-sections.php
   and inc/class-hie-claims.php.

   Tokens only. verify-code.py fails the build on an undeclared token, which is
   what keeps this file from drifting away from the palette.
   ====================================================================== */

/* -------------------------------------------------------------------------
   HERO
   ---------------------------------------------------------------------- */

.hie-lede {
  font-size: var(--hie-text-lg);
  line-height: var(--hie-leading-snug);
  color: var(--hie-color-text);
  max-inline-size: var(--hie-measure-prose);
}

.hie-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hie-space-sm);
  margin-block: var(--hie-space-lg);
}

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

/* -------------------------------------------------------------------------
   CATEGORY GRID

   Ten cards. The count is the useful part — it tells someone whether a
   category is a shelf or a single course before they click into it.
   ---------------------------------------------------------------------- */

.hie-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--hie-space-md);
  list-style: none;
  margin: var(--hie-space-lg) 0;
  padding: 0;
}

.hie-cat-grid[data-columns="2"] { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.hie-cat-grid[data-columns="4"] { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.hie-cat-card__link {
  display: block;
  block-size: 100%;
  padding: var(--hie-space-md);
  background-color: var(--hie-color-surface);
  border: 1px solid var(--hie-color-border);
  border-radius: var(--hie-radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--hie-dur-fast) var(--hie-ease-out),
              box-shadow var(--hie-dur-fast) var(--hie-ease-out);
}

.hie-cat-card__link:hover,
.hie-cat-card__link:focus-visible {
  border-color: var(--hie-navy-500);
  box-shadow: var(--hie-shadow-md);
}

.hie-cat-card__title {
  font-family: var(--hie-font-display);
  font-size: var(--hie-text-md);
  line-height: var(--hie-leading-heading);
  margin: 0 0 var(--hie-space-2xs);
  color: var(--hie-navy-700);
}

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

.hie-cat-card__count {
  font-family: var(--hie-font-mono);
  font-size: var(--hie-text-xs);
  letter-spacing: var(--hie-tracking-label);
  text-transform: uppercase;
  color: var(--hie-brass-600);
  margin: 0;
}

/* -------------------------------------------------------------------------
   BRIDGE METHOD

   The letters are decorative — the stage name is the real heading and is what
   a screen reader announces. The letter carries aria-hidden for that reason:
   "B Benchmark" read aloud is noise.
   ---------------------------------------------------------------------- */

.hie-bridge {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--hie-space-md);
  list-style: none;
  margin: var(--hie-space-lg) 0;
  padding: 0;
  counter-reset: none;
}

.hie-bridge__step {
  padding-block-start: var(--hie-space-sm);
  border-block-start: var(--hie-border-thick) solid var(--hie-brass-400);
}

.hie-bridge__letter {
  display: block;
  font-family: var(--hie-font-display);
  font-size: var(--hie-text-2xl);
  font-weight: var(--hie-weight-bold);
  line-height: 1;
  color: var(--hie-brass-600);
}

.hie-bridge__name {
  font-family: var(--hie-font-display);
  font-size: var(--hie-text-md);
  margin: var(--hie-space-2xs) 0;
  color: var(--hie-navy-700);
}

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

/* -------------------------------------------------------------------------
   AUDIENCE CARDS
   ---------------------------------------------------------------------- */

.hie-audience {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--hie-space-md);
  list-style: none;
  margin: var(--hie-space-lg) 0;
  padding: 0;
}

.hie-audience__link {
  display: block;
  block-size: 100%;
  padding: var(--hie-space-md);
  background-color: var(--hie-color-bg-sunken);
  border-radius: var(--hie-radius-md);
  border-inline-start: var(--hie-border-thick) solid var(--hie-navy-700);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--hie-dur-fast) var(--hie-ease-out);
}

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

.hie-audience__title {
  font-family: var(--hie-font-display);
  font-size: var(--hie-text-md);
  margin: 0 0 var(--hie-space-2xs);
  color: var(--hie-navy-700);
}

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

/* -------------------------------------------------------------------------
   CLAIMS

   A published claim is ordinary text and gets no special styling — the point
   is that it reads as a normal sentence.

   The blocked state is visible ONLY to editors and is deliberately loud. It
   appears where an unsubstantiated claim would have gone, so the gap is
   obvious to whoever is building the page rather than discovered by a
   regulator.
   ---------------------------------------------------------------------- */

.hie-claim--blocked,
.hie-claim--unknown {
  display: inline-block;
  padding: var(--hie-space-2xs) var(--hie-space-xs);
  font-family: var(--hie-font-mono);
  font-size: var(--hie-text-xs);
  color: var(--hie-status-expired);
  background-color: var(--hie-status-expired-bg);
  border: 1px dashed var(--hie-status-expired);
  border-radius: var(--hie-radius-xs);
}

@media print {
  .hie-claim--blocked,
  .hie-claim--unknown {
    display: none !important;
  }
}

/* -------------------------------------------------------------------------
   COURSE DETAIL

   The pre-enrolment block is the single most compliance-sensitive component
   on the site. It is styled to be read, not skimmed past: it sits inside a
   bordered block immediately above the enrol control, and the disclosure is
   never smaller than body text. "Prominent" is the standard it is held to.
   ---------------------------------------------------------------------- */

.hie-pre-enrol {
  margin-block: var(--hie-space-lg);
  padding: var(--hie-space-md);
  background-color: var(--hie-color-bg-sunken);
  border: 1px solid var(--hie-color-border);
  border-radius: var(--hie-radius-md);
}

.hie-positioning--course {
  margin-block-end: var(--hie-space-md);
  padding-block-end: var(--hie-space-md);
  border-block-end: 1px solid var(--hie-color-border);
  border-inline-start: none;
  padding-inline-start: 0;
}

.hie-course-meta {
  padding: var(--hie-space-md);
  background-color: var(--hie-color-surface);
  border: 1px solid var(--hie-color-border);
  border-radius: var(--hie-radius-md);
}

.hie-course-meta__price {
  font-family: var(--hie-font-display);
  font-size: var(--hie-text-2xl);
  font-weight: var(--hie-weight-bold);
  color: var(--hie-navy-700);
  margin: 0 0 var(--hie-space-sm);
}

.hie-course-meta__list {
  margin: 0;
  font-size: var(--hie-text-sm);
}

.hie-course-meta__row {
  display: flex;
  justify-content: space-between;
  gap: var(--hie-space-sm);
  padding-block: var(--hie-space-2xs);
  border-block-end: 1px solid var(--hie-color-border);
}

.hie-course-meta__row dt {
  color: var(--hie-color-text-muted);
  margin: 0;
}

.hie-course-meta__row dd {
  margin: 0;
  font-weight: var(--hie-weight-semibold);
  text-align: end;
}

.hie-course-meta__credential {
  margin: var(--hie-space-md) 0 0;
  font-size: var(--hie-text-xs);
  color: var(--hie-color-text-muted);
}

/* Administrator-only alert when the disclosure failed to render. */
.hie-compliance-alert {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--hie-z-toast);
  padding: var(--hie-space-sm) var(--hie-space-md);
  background-color: var(--hie-status-revoked);
  color: var(--hie-white);
  font-size: var(--hie-text-sm);
  font-weight: var(--hie-weight-semibold);
  text-align: center;
}

/* -------------------------------------------------------------------------
   CATALOGUE — sticky rail, bottom sheet, free chip

   The enhanced behaviour is layered over a working server-rendered catalogue
   (ADR-015). Everything below degrades to a plain stacked form.
   ---------------------------------------------------------------------- */

.hie-catalogue.is-loading .hie-catalogue__grid {
  opacity: 0.45;
  transition: opacity var(--hie-dur-fast) var(--hie-ease-out);
}

.hie-catalogue__chip {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding: var(--hie-space-2xs) var(--hie-space-md);
  font-size: var(--hie-text-sm);
  font-weight: var(--hie-weight-semibold);
  text-decoration: none;
  color: var(--hie-green-700);
  background-color: var(--hie-green-050);
  border: 1px solid var(--hie-green-700);
  border-radius: var(--hie-radius-pill);
}

.hie-catalogue__chip.is-on {
  background-color: var(--hie-green-700);
  color: var(--hie-white);
}

.hie-catalogue__more {
  display: block;
  margin: var(--hie-space-lg) auto 0;
}

/* The numbered links stay in the DOM for crawlers and keyboard users even
   once load-more is available — hidden visually, never removed. */
.hie-pagination--enhanced {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hie-catalogue__sheet-toggle {
  display: none;
}

/* Desktop: sticky filter rail beside the grid. */
@media (min-width: 1025px) {
  .hie-catalogue {
    display: grid;
    grid-template-columns: var(--hie-rail-width) 1fr;
    gap: var(--hie-space-xl);
    align-items: start;
  }

  .hie-catalogue__filters {
    position: sticky;
    inset-block-start: calc(var(--hie-header-height) + var(--hie-space-md));
    display: flex;
    flex-direction: column;
    gap: var(--hie-space-md);
  }

  .hie-catalogue__count,
  .hie-catalogue__grid,
  .hie-catalogue__empty,
  .hie-catalogue__more,
  .hie-pagination {
    grid-column: 2;
  }

  .hie-catalogue__filters {
    grid-column: 1;
    grid-row: 1 / span 4;
  }
}

/* Mobile: the rail becomes a bottom sheet behind a Filters button. */
@media (max-width: 1024px) {
  .hie-catalogue__sheet-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    inline-size: 100%;
    margin-block-end: var(--hie-space-md);
    padding: var(--hie-space-xs) var(--hie-space-md);
    font-family: var(--hie-font-body);
    font-size: var(--hie-text-base);
    font-weight: var(--hie-weight-semibold);
    color: var(--hie-color-text-inverse);
    background-color: var(--hie-navy-700);
    border: none;
    border-radius: var(--hie-radius-sm);
    cursor: pointer;
  }

  /* Without JavaScript the toggle never renders, so the form must stay
     visible by default rather than be hidden and waiting to be revealed. */
  .hie-catalogue__sheet-toggle ~ .hie-catalogue__filters {
    display: none;
  }

  .hie-catalogue__filters.is-open {
    display: flex;
    flex-direction: column;
    gap: var(--hie-space-md);
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    max-block-size: 80vh;
    overflow-y: auto;
    z-index: var(--hie-z-sheet);
    padding: var(--hie-space-lg);
    background-color: var(--hie-color-surface);
    border-start-start-radius: var(--hie-radius-lg);
    border-start-end-radius: var(--hie-radius-lg);
    box-shadow: var(--hie-shadow-lg);
  }

  body.hie-sheet-open {
    overflow: hidden;
  }
}

/* -------------------------------------------------------------------------
   TEAM DASHBOARD  (hie-corporate)

   Rendered on the front end, not in wp-admin. A training manager at a council
   is not a WordPress user and must never need an admin login to do their job.
   ---------------------------------------------------------------------- */

.hie-team__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hie-space-md);
  margin-block-end: var(--hie-space-lg);
}

.hie-team__notice {
  padding: var(--hie-space-sm) var(--hie-space-md);
  border-radius: var(--hie-radius-sm);
  font-size: var(--hie-text-sm);
  border-inline-start: var(--hie-border-thick) solid;
}

.hie-team__notice--success {
  color: var(--hie-green-900);
  background-color: var(--hie-green-050);
  border-color: var(--hie-green-700);
}

.hie-team__notice--error {
  color: var(--hie-status-revoked);
  background-color: var(--hie-status-revoked-bg);
  border-color: var(--hie-status-revoked);
}

.hie-pool {
  margin-block-end: var(--hie-space-xl);
  padding: var(--hie-space-lg);
  background-color: var(--hie-color-surface);
  border: 1px solid var(--hie-color-border);
  border-radius: var(--hie-radius-md);
}

.hie-pool__title {
  font-family: var(--hie-font-display);
  margin: 0 0 var(--hie-space-2xs);
}

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

/* Seat usage. The number above it is the accessible value — the bar is
   decorative and carries no information a sighted user gets and others do not. */
.hie-pool__bar {
  block-size: var(--hie-space-2xs);
  background-color: var(--hie-grey-200);
  border-radius: var(--hie-radius-pill);
  overflow: hidden;
  margin-block-end: var(--hie-space-md);
}

.hie-pool__bar-fill {
  display: block;
  block-size: 100%;
  background-color: var(--hie-navy-500);
}

.hie-pool__assign {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--hie-space-sm);
  align-items: end;
  margin-block-end: var(--hie-space-md);
}

@media (max-width: 720px) {
  .hie-pool__assign {
    grid-template-columns: 1fr;
  }
}

.hie-pool__assign label,
.hie-pool__bulk label {
  display: block;
  font-size: var(--hie-text-sm);
  font-weight: var(--hie-weight-semibold);
  margin-block-end: var(--hie-space-3xs);
}

.hie-pool__bulk summary {
  cursor: pointer;
  font-size: var(--hie-text-sm);
  font-weight: var(--hie-weight-semibold);
  color: var(--hie-color-link);
  margin-block-end: var(--hie-space-sm);
}

.hie-pool__table {
  inline-size: 100%;
  border-collapse: collapse;
  margin-block-start: var(--hie-space-md);
  font-size: var(--hie-text-sm);
}

.hie-pool__table th,
.hie-pool__table td {
  text-align: start;
  padding: var(--hie-space-xs);
  border-block-end: 1px solid var(--hie-color-border);
  vertical-align: top;
}

/* Status carries a text label, never colour alone (WCAG 1.4.1), so it also
   survives Windows High Contrast Mode. */
.hie-seat-status {
  display: inline-block;
  padding: var(--hie-space-3xs) var(--hie-space-xs);
  border-radius: var(--hie-radius-pill);
  font-size: var(--hie-text-xs);
  font-weight: var(--hie-weight-semibold);
}

.hie-seat-status--enrolled {
  color: var(--hie-green-900);
  background-color: var(--hie-green-050);
}

.hie-seat-status--assigned {
  color: var(--hie-status-expired);
  background-color: var(--hie-status-expired-bg);
}

.hie-seat-status--released {
  color: var(--hie-grey-700);
  background-color: var(--hie-grey-100);
}

.hie-btn--small {
  min-block-size: 36px;
  padding: var(--hie-space-3xs) var(--hie-space-sm);
  font-size: var(--hie-text-sm);
}

.hie-team__disclosure {
  margin-block-start: var(--hie-space-xl);
  padding-block-start: var(--hie-space-md);
  border-block-start: 1px solid var(--hie-color-border);
  font-size: var(--hie-text-sm);
  color: var(--hie-color-text-muted);
}

/* -------------------------------------------------------------------------
   ENQUIRY FORMS

   Honeypot is positioned off-screen rather than display:none — some bots
   check for the latter, and a screen reader is kept out with aria-hidden and
   tabindex instead.
   ---------------------------------------------------------------------- */

.hie-form{max-inline-size:var(--hie-measure-prose)}
.hie-form__hp{position:absolute;inset-inline-start:-9999px;inline-size:1px;block-size:1px;overflow:hidden}
.hie-form__intro{color:var(--hie-color-text-muted)}

.hie-form__step{
  border:1px solid var(--hie-color-border);
  border-radius:var(--hie-radius-md);
  padding:var(--hie-space-lg);
  margin-block-end:var(--hie-space-lg);
}

.hie-form__step legend{
  font-family:var(--hie-font-display);
  font-size:var(--hie-text-lg);
  color:var(--hie-ink-blue);
  padding-inline:var(--hie-space-xs);
}

.hie-form__stepno{
  display:block;
  font-family:var(--hie-font-mono);
  font-size:var(--hie-text-xs);
  letter-spacing:var(--hie-tracking-label);
  color:var(--hie-signal-blue);
}

.hie-form__field{margin-block-end:var(--hie-space-md)}

.hie-form__field label,
.hie-form__group legend{
  display:block;
  font-weight:var(--hie-weight-semibold);
  font-size:var(--hie-text-sm);
  margin-block-end:var(--hie-space-3xs);
}

.hie-form input[type="text"],
.hie-form input[type="email"],
.hie-form input[type="tel"],
.hie-form select,
.hie-form textarea{
  inline-size:100%;
  min-block-size:44px;
  padding:var(--hie-space-xs) var(--hie-space-sm);
  font-family:var(--hie-font-body);
  font-size:var(--hie-text-base);
  color:var(--hie-color-text);
  background-color:var(--hie-white);
  /* Control edges use border-strong: 3:1, the non-text minimum (WCAG 1.4.11).
     A hairline that only just shows is not a visible boundary. */
  border:1px solid var(--hie-color-border-strong);
  border-radius:var(--hie-radius-sm);
}

.hie-form textarea{min-block-size:120px}

.hie-form__group{border:none;padding:0;margin:0}

.hie-form__check{
  display:flex;
  align-items:flex-start;
  gap:var(--hie-space-2xs);
  font-weight:var(--hie-weight-regular);
  font-size:var(--hie-text-sm);
  margin-block-end:var(--hie-space-3xs);
}

.hie-form__consent{
  margin-block:var(--hie-space-md);
  font-size:var(--hie-text-sm);
}

.hie-form__consent label{display:flex;gap:var(--hie-space-2xs);align-items:flex-start}

.hie-form__footnote,
.hie-form__disclosure{
  font-size:var(--hie-text-sm);
  color:var(--hie-color-text-muted);
  margin-block-start:var(--hie-space-md);
}

.hie-form__done{
  padding:var(--hie-space-lg);
  background-color:var(--hie-green-050);
  border-inline-start:var(--hie-border-thick) solid var(--hie-green-700);
  border-radius:0 var(--hie-radius-md) var(--hie-radius-md) 0;
}

.hie-form__done h3{color:var(--hie-green-900);margin-block-start:0}

/* -------------------------------------------------------------------------
   FAQ  ·  STICKY ENROLMENT
   ---------------------------------------------------------------------- */

.hie-faq{max-inline-size:var(--hie-measure-prose);margin-block:var(--hie-space-lg)}
.hie-faq__item{border-block-end:1px solid var(--hie-color-border)}
.hie-faq__item summary{
  cursor:pointer;padding:var(--hie-space-sm) 0;
  font-weight:var(--hie-weight-semibold);color:var(--hie-ink-blue);
}
.hie-faq__item summary:focus-visible{outline:var(--hie-border-thick) solid var(--hie-color-focus);outline-offset:2px}
.hie-faq__answer{padding-block-end:var(--hie-space-sm);color:var(--hie-color-text)}
.hie-faq__answer p{margin:0}

/* Repeats the price and the enrol control, never the disclosure — a floating
   copy of a single-sourced legal string is both a duplicate and easy to
   dismiss, which is the opposite of prominent. It links to it instead. */
.hie-sticky-enrol{
  position:fixed;inset-inline:0;inset-block-end:0;z-index:var(--hie-z-sticky);
  background:var(--hie-color-surface);
  border-block-start:1px solid var(--hie-color-border);
  box-shadow:var(--hie-shadow-lg);
}
.hie-sticky-enrol__inner{
  max-inline-size:var(--hie-container-max);margin-inline:auto;
  padding:var(--hie-space-sm) var(--hie-gutter);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--hie-space-md);flex-wrap:wrap;
}
.hie-sticky-enrol__price{
  display:block;font-family:var(--hie-font-display);
  font-size:var(--hie-text-lg);font-weight:var(--hie-weight-bold);color:var(--hie-ink-blue);
}
.hie-sticky-enrol__meta{font-size:var(--hie-text-sm);color:var(--hie-color-text-muted)}
.hie-sticky-enrol__actions{display:flex;align-items:center;gap:var(--hie-space-md)}
.hie-sticky-enrol__note{font-size:var(--hie-text-sm);color:var(--hie-color-link)}

/* Desktop: the card leaves the bottom edge and becomes a right rail. */
@media (min-width:1025px){
  .hie-sticky-enrol{
    position:sticky;inset-block-start:calc(var(--hie-header-height) + var(--hie-space-md));
    inset-block-end:auto;inline-size:var(--hie-rail-width);margin-inline-start:auto;
    border:1px solid var(--hie-color-border);border-radius:var(--hie-radius-md);
    box-shadow:var(--hie-shadow-md);
  }
  .hie-sticky-enrol__inner{flex-direction:column;align-items:stretch;padding:var(--hie-space-md)}
  .hie-sticky-enrol__actions{flex-direction:column;align-items:stretch}
}

@media print{.hie-sticky-enrol{display:none}}

/* -------------------------------------------------------------------------
   LOCATIONS

   The role label sits ABOVE the address, not after it. "By appointment"
   discovered before reading the street line sets the right expectation;
   discovered after, it reads as a retraction.
   ---------------------------------------------------------------------- */

.hie-locations{list-style:none;margin:var(--hie-space-md) 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--hie-space-md)}
.hie-locations__item{padding-inline-start:var(--hie-space-md);
  border-inline-start:var(--hie-border-thick) solid var(--hie-ink-blue)}
.hie-locations__role{display:block;font-family:var(--hie-font-mono);
  font-size:var(--hie-text-xs);letter-spacing:var(--hie-tracking-label);
  text-transform:uppercase;color:var(--hie-signal-blue);margin-block-end:var(--hie-space-3xs)}
.hie-locations__address{display:block;color:var(--hie-color-text)}