/* =========================================================================
   HEADER & FOOTER  —  Haibridge  v4.0.0  (identity rev C)

   Components rendered by inc/class-hie-header-footer.php and placed into
   Header Footer Elementor templates as shortcodes.

   Loads AFTER enhancements.css. Everything here consumes tokens.css; no
   literal colour, size or timing value appears below. verify-code.py fails
   the build on an undeclared token, which is the mechanism that stops this
   file drifting away from the palette.

   Contrast notes, because they are the procurement asset:
   - CTA is Signal Blue with WHITE text (5.17:1). Black on Signal Blue is
     3.92:1 and fails AA for text — never use it.
   - The inverse header and footer put white on Ink Blue (12.31:1).
   - Links on the blue footer use --hie-color-link-inverse. Signal Blue on
     Ink Blue is 2.38:1 and is the worst pairing in the supplied palette.
   ====================================================================== */

/* -------------------------------------------------------------------------
   LOGO
   ---------------------------------------------------------------------- */

.hie-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--hie-space-xs);
  text-decoration: none;
  line-height: 1;
}

.hie-logo__mark {
  display: block;
  width: auto;
  flex: none;
}

.hie-logo__type {
  display: flex;
  flex-direction: column;
  gap: var(--hie-space-3xs);
}

.hie-logo__name {
  font-family: var(--hie-font-display);
  font-size: var(--hie-text-xl);
  font-weight: var(--hie-weight-bold);
  /* Rev C: Zilla Slab Bold, +0.05em, all caps. */
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hie-ink-blue);
}

/* The descriptor is now just "Institute". "Institute of Excellence" belongs to
   the separately registered sibling company and no longer appears anywhere on
   this site. The line stays small and quiet, always directly under
   "Haibridge", and the link's accessible name is the full brand regardless of
   what is displayed. */
/* Rev C: IBM Plex Sans SemiBold at +0.55em. The weight moved up from Medium
   because at that tracking Medium thins out and goes grey against the blue
   above it. The word is short enough that the tracking does not wrap. */
.hie-logo__descriptor {
  font-family: var(--hie-font-body);
  font-size: var(--hie-text-xs);
  font-weight: var(--hie-weight-semibold);
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  text-transform: uppercase;
  color: var(--hie-structure-black);
}

.hie-logo--light .hie-logo__name {
  color: var(--hie-color-text-inverse);
}

.hie-logo--light .hie-logo__descriptor {
  color: var(--hie-white);
}

.hie-logo--custom img {
  display: block;
  height: auto;
  max-height: var(--hie-space-3xl);
  width: auto;
}

.hie-logo:focus-visible {
  outline: var(--hie-border-thick) solid var(--hie-color-focus);
  outline-offset: var(--hie-space-3xs);
  border-radius: var(--hie-radius-xs);
}

.hie-header--inverse .hie-logo:focus-visible {
  outline-color: var(--hie-color-focus-inverse);
}

/* Drop the descriptor line on small screens. The mark plus "Haibridge" is
   still unambiguous, and two lines of type in a 56px bar is a mess. */
@media (max-width: 480px) {
  .hie-logo__descriptor {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   HEADER BAR
   ---------------------------------------------------------------------- */

.hie-header--bar {
  background-color: var(--hie-color-surface);
  border-block-end: 1px solid var(--hie-color-border);
}

.hie-header--sticky {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--hie-z-header);
}

.hie-header--inverse {
  background-color: var(--hie-navy-700);
  border-block-end-color: var(--hie-navy-600);
}

.hie-header--inverse .hie-menu-link,
.hie-header--inverse .hie-header__account {
  color: var(--hie-color-text-inverse);
}

.hie-header--inverse .hie-menu-link:hover,
.hie-header--inverse .hie-menu-link:focus-visible,
.hie-header--inverse .hie-header__account:hover,
.hie-header--inverse .hie-header__account:focus-visible {
  color: var(--hie-brass-400);
}

.hie-header--inverse .hie-offcanvas-trigger__bars,
.hie-header--inverse .hie-offcanvas-trigger__bars::before,
.hie-header--inverse .hie-offcanvas-trigger__bars::after {
  background-color: var(--hie-color-text-inverse);
}

/* The mega panel is a light surface even under an inverse bar, because a
   four-column panel of white-on-navy text at body size is heavy and the
   panel is where the reading actually happens. */
.hie-header--inverse .hie-mega-panel,
.hie-header--inverse .hie-submenu {
  background-color: var(--hie-color-surface);
}

.hie-header__inner {
  min-block-size: var(--hie-header-height);
  padding-block: var(--hie-space-2xs);
}

.hie-header__logo {
  flex: none;
}

.hie-header__actions {
  display: flex;
  align-items: center;
  gap: var(--hie-space-sm);
  flex: none;
}

.hie-header__account {
  font-size: var(--hie-text-sm);
  font-weight: var(--hie-weight-semibold);
  color: var(--hie-navy-700);
  text-decoration: none;
  white-space: nowrap;
}

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

.hie-header__cta {
  white-space: nowrap;
}

/* Verify stays visible at every width. It is the one link an employer or
   auditor arrives looking for, usually from a printed certificate, and it is
   the only navigation item with a legal dependency behind it. */
.hie-nav__verify > .hie-menu-link {
  font-weight: var(--hie-weight-semibold);
  color: var(--hie-green-700);
}

.hie-header--inverse .hie-nav__verify > .hie-menu-link {
  color: var(--hie-white);
  text-decoration: underline;
  text-underline-offset: var(--hie-space-3xs);
}

.hie-nav-empty {
  display: inline-block;
  padding: var(--hie-space-2xs) var(--hie-space-xs);
  font-size: var(--hie-text-sm);
  color: var(--hie-status-expired);
  border: 1px dashed var(--hie-status-expired);
  border-radius: var(--hie-radius-xs);
}

/* Promotional column in the Courses panel. Two routes with a short line each,
   so ten identical category links do not read as a wall. */
.hie-mega-feature > .hie-menu-link {
  font-weight: var(--hie-weight-semibold);
  color: var(--hie-navy-700);
}

.hie-mega-feature > .hie-menu-link::after {
  content: " \2192";
  color: var(--hie-brass-600);
}

/* Below the nav breakpoint the inline menu and the desktop actions give way
   to the off-canvas panel, which is focus-trapped and already built. */
@media (max-width: 1024px) {
  .hie-header__actions {
    display: none;
  }

  .hie-offcanvas__actions {
    display: flex;
    flex-direction: column;
    gap: var(--hie-space-sm);
    margin-block-start: var(--hie-space-lg);
    padding-block-start: var(--hie-space-md);
    border-block-start: 1px solid var(--hie-color-border);
  }

  .hie-offcanvas__actions .hie-header__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
}

/* -------------------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------------- */

.hie-footer--inverse {
  background-color: var(--hie-navy-700);
  color: var(--hie-color-text-inverse);
  border-block-start: none;
}

.hie-footer__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--hie-space-xl);
  padding-block: var(--hie-space-xl);
}

.hie-footer__heading {
  font-family: var(--hie-font-display);
  font-size: var(--hie-text-sm);
  font-weight: var(--hie-weight-semibold);
  letter-spacing: var(--hie-tracking-label);
  text-transform: uppercase;
  margin: 0 0 var(--hie-space-sm);
  color: var(--hie-color-text);
}

.hie-footer--inverse .hie-footer__heading,
.hie-footer--inverse .hie-footer__heading a {
  color: var(--hie-color-text-inverse);
}

.hie-footer__heading a {
  color: inherit;
  text-decoration: none;
}

.hie-footer__heading a:hover,
.hie-footer__heading a:focus-visible {
  text-decoration: underline;
}

.hie-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--hie-space-2xs);
  font-size: var(--hie-text-sm);
}

.hie-footer__list a {
  color: var(--hie-color-link);
  text-decoration: none;
}

.hie-footer__list a:hover,
.hie-footer__list a:focus-visible {
  text-decoration: underline;
}

/* grey-300 rather than grey-500: on navy 700 the lighter grey clears 4.5:1
   and the darker one does not. */
.hie-footer--inverse .hie-footer__list,
.hie-footer--inverse .hie-footer__list a {
  color: var(--hie-grey-100);
}

.hie-footer--inverse .hie-footer__list a:hover,
.hie-footer--inverse .hie-footer__list a:focus-visible {
  color: var(--hie-brass-400);
}

.hie-footer__verify {
  margin-block-start: var(--hie-space-md);
  inline-size: fit-content;
}

.hie-btn--on-dark {
  color: var(--hie-color-text-inverse);
  border-color: var(--hie-grey-300);
  background-color: transparent;
}

.hie-btn--on-dark:hover,
.hie-btn--on-dark:focus-visible {
  background-color: var(--hie-navy-600);
  border-color: var(--hie-white);
  color: var(--hie-color-text-inverse);
}

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

.hie-social__link {
  color: var(--hie-color-link);
  text-decoration: none;
}

.hie-footer--inverse .hie-social__link {
  color: var(--hie-grey-100);
}

.hie-social__link:hover,
.hie-social__link:focus-visible {
  text-decoration: underline;
}

/* -------------------------------------------------------------------------
   LEGAL BAR

   The disclosure lives here on every page. It is quiet but never faint:
   a disclosure a buyer cannot read is not a disclosure, and "prominent"
   is the standard it is actually held to.
   ---------------------------------------------------------------------- */

.hie-footer__legal {
  padding-block: var(--hie-space-lg);
  border-block-start: 1px solid var(--hie-color-border);
  font-size: var(--hie-text-sm);
}

.hie-footer--inverse .hie-footer__legal {
  border-block-start-color: var(--hie-navy-600);
}

.hie-footer--inverse .hie-footer__trading,
.hie-footer--inverse .hie-footer__copyright {
  color: var(--hie-grey-300);
}

.hie-footer__legal-nav {
  margin-block: var(--hie-space-sm);
}

.hie-footer--inverse .hie-footer__legal-menu a {
  color: var(--hie-grey-100);
}

/* The positioning statement, when shown, is visually distinct from the
   disclosure below it and never merged into it. Marketing language inside a
   disclosure stops the disclosure working as one. */
.hie-positioning {
  margin-block-end: var(--hie-space-lg);
  padding-inline-start: var(--hie-space-md);
  border-inline-start: var(--hie-border-thick) solid var(--hie-brass-400);
  max-inline-size: var(--hie-measure-prose);
}

.hie-positioning__heading {
  font-family: var(--hie-font-display);
  font-size: var(--hie-text-lg);
  font-weight: var(--hie-weight-semibold);
  line-height: var(--hie-leading-heading);
  margin: 0 0 var(--hie-space-2xs);
}

.hie-positioning__body {
  margin: 0;
  color: var(--hie-color-text-muted);
}

.hie-footer--inverse .hie-positioning__body {
  color: var(--hie-grey-300);
}

/* -------------------------------------------------------------------------
   PRINT

   An employer printing a course page or a quote should get the disclosure
   and the entity line. They should not get the navigation.
   ---------------------------------------------------------------------- */

@media print {
  .hie-header,
  .hie-offcanvas,
  .hie-offcanvas-trigger,
  .hie-footer__columns,
  .hie-social,
  .hie-footer__verify {
    display: none !important;
  }

  .hie-footer__legal {
    border: none;
  }
}

/* -------------------------------------------------------------------------
   TAGLINE

   Marketing copy. Deliberately not adjacent to the disclosure: a tagline
   butted against a regulatory disclosure is what turns the disclosure into
   promotional text.
   ---------------------------------------------------------------------- */

.hie-tagline {
  margin: var(--hie-space-md) 0 0;
  font-family: var(--hie-font-display);
  font-size: var(--hie-text-sm);
  font-weight: var(--hie-weight-medium);
  letter-spacing: var(--hie-tracking-label);
  color: var(--hie-color-text-muted);
}

.hie-footer--inverse .hie-tagline {
  color: var(--hie-brass-400);
}


/* -------------------------------------------------------------------------
   REV C — ON-DARK LINKS

   Signal Blue on Ink Blue measures 2.38:1. It is the worst pairing in the
   supplied palette and must never carry text. Anything on a blue ground uses
   the derived light blue (6.69:1) or plain white.
   ---------------------------------------------------------------------- */

.hie-footer--inverse .hie-footer__list a,
.hie-footer--inverse .hie-footer__legal-menu a,
.hie-footer--inverse .hie-social__link {
  color: var(--hie-color-link-inverse);
}

.hie-footer--inverse .hie-footer__list a:hover,
.hie-footer--inverse .hie-footer__list a:focus-visible,
.hie-footer--inverse .hie-footer__legal-menu a:hover,
.hie-footer--inverse .hie-social__link:hover {
  color: var(--hie-white);
}

.hie-footer--inverse .hie-footer__trading,
.hie-footer--inverse .hie-footer__copyright,
.hie-footer--inverse .hie-positioning__body {
  color: var(--hie-color-text-inverse-muted);
}

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

.hie-footer--inverse .hie-tagline {
  color: var(--hie-color-link-inverse);
}

/* Focus on a blue ground is white, not blue: Signal Blue there is 2.38:1 and
   fails the 3:1 an indicator needs (WCAG 1.4.11). */
.hie-header--inverse :focus-visible,
.hie-footer--inverse :focus-visible {
  outline: var(--hie-border-thick) solid var(--hie-color-focus-inverse);
  outline-offset: 2px;
}