/* ==========================================================================
   HIE BASE STYLES
   --------------------------------------------------------------------------
   Consumes tokens.css. Contains no raw colour, size or timing values.
   Loaded after tokens.css, which must be parsed first.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DOCUMENT
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background-color: var(--hie-color-bg);
  color: var(--hie-color-text);
  font-family: var(--hie-font-body);
  font-size: var(--hie-text-base);
  font-weight: var(--hie-weight-regular);
  line-height: var(--hie-leading-body);
  letter-spacing: var(--hie-tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Anchor targets clear the sticky header instead of hiding beneath it. */
:target,
[id] {
  scroll-margin-top: calc(var(--hie-header-height) + var(--hie-space-md));
}

/* --------------------------------------------------------------------------
   2. HEADINGS
   Display face, tight tracking, weight stepping down as size steps down so
   large type never looks heavy and small type never looks weak.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.hie-display {
  font-family: var(--hie-font-display);
  color: var(--hie-color-text);
  margin-block: 0 var(--hie-space-sm);
  text-wrap: balance;
}

h1 {
  font-size: var(--hie-text-3xl);
  font-weight: var(--hie-weight-bold);
  line-height: var(--hie-leading-display);
  letter-spacing: var(--hie-tracking-display);
}

h2 {
  font-size: var(--hie-text-2xl);
  font-weight: var(--hie-weight-bold);
  line-height: var(--hie-leading-heading);
  letter-spacing: var(--hie-tracking-heading);
}

h3 {
  font-size: var(--hie-text-xl);
  font-weight: var(--hie-weight-semibold);
  line-height: var(--hie-leading-heading);
  letter-spacing: var(--hie-tracking-heading);
}

h4 {
  font-size: var(--hie-text-lg);
  font-weight: var(--hie-weight-semibold);
  line-height: var(--hie-leading-snug);
}

h5 {
  font-size: var(--hie-text-md);
  font-weight: var(--hie-weight-semibold);
  line-height: var(--hie-leading-snug);
}

h6 {
  font-size: var(--hie-text-base);
  font-weight: var(--hie-weight-semibold);
  line-height: var(--hie-leading-snug);
}

/* Hero-scale display, used sparingly — homepage and category landings only. */
.hie-display--hero {
  font-size: var(--hie-text-4xl);
  font-weight: var(--hie-weight-bold);
  line-height: var(--hie-leading-display);
  letter-spacing: var(--hie-tracking-display);
}

/* Eyebrow label. Used only where it encodes something true — a category name,
   a delivery mode, a section number in an actual sequence. Not decoration. */
.hie-eyebrow {
  display: inline-block;
  font-family: var(--hie-font-body);
  font-size: var(--hie-text-xs);
  font-weight: var(--hie-weight-semibold);
  letter-spacing: var(--hie-tracking-label);
  text-transform: uppercase;
  color: var(--hie-color-text-subtle);
  margin-block-end: var(--hie-space-2xs);
}

/* --------------------------------------------------------------------------
   3. TEXT
   -------------------------------------------------------------------------- */
p {
  margin-block: 0 var(--hie-space-md);
}

p:last-child {
  margin-block-end: 0;
}

.hie-lead {
  font-size: var(--hie-text-md);
  line-height: var(--hie-leading-loose);
  color: var(--hie-color-text-muted);
  max-inline-size: var(--hie-measure-prose);
}

.hie-text-muted  { color: var(--hie-color-text-muted); }
.hie-text-subtle { color: var(--hie-color-text-subtle); }

/* Credential IDs, CPD hours, prices — tabular figures so columns of numbers
   in the manager dashboard and compliance exports align. */
.hie-numeric {
  font-family: var(--hie-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--hie-tracking-normal);
}

/* Constrain long-form policy and blog copy to a readable measure. */
.hie-prose {
  max-inline-size: var(--hie-measure-prose);
}

.hie-prose > * + * {
  margin-block-start: var(--hie-space-md);
}

/* --------------------------------------------------------------------------
   4. LINKS
   Underline offset large enough that descenders are not cut by the rule.
   -------------------------------------------------------------------------- */
a {
  color: var(--hie-color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--hie-dur-fast) var(--hie-ease-out);
}

a:hover {
  color: var(--hie-color-link-hover);
}

/* --------------------------------------------------------------------------
   5. FOCUS
   Visible on every interactive element, on both light and dark surfaces.
   WCAG 2.4.7. Never remove this.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--hie-color-focus);
  outline-offset: 2px;
  border-radius: var(--hie-radius-xs);
}

.hie-section--inverse :focus-visible,
.hie-on-dark :focus-visible {
  outline-color: var(--hie-color-focus-inverse);
}

/* --------------------------------------------------------------------------
   6. SKIP LINK
   First tab stop on every page. Required for keyboard-only navigation.
   -------------------------------------------------------------------------- */
/* The theme renders its own skip link as .hie-skip-link. The .skip-link
   selectors are kept so that if a plugin emits one instead, the two never
   look different — two visually distinct skip links is a worse keyboard
   experience than one. */
.hie-skip-link,
.skip-link.screen-reader-text:focus,
.skip-link {
  position: absolute;
  inset-inline-start: var(--hie-space-sm);
  inset-block-start: var(--hie-space-sm);
  z-index: var(--hie-z-skiplink);
  padding: var(--hie-space-2xs) var(--hie-space-sm);
  background-color: var(--hie-color-cta-bg);
  color: var(--hie-color-cta-text);
  font-weight: var(--hie-weight-semibold);
  text-decoration: none;
  border-radius: var(--hie-radius-sm);
  transform: translateY(-200%);
  transition: transform var(--hie-dur-fast) var(--hie-ease-out);
}

.hie-skip-link:focus,
.skip-link:focus {
  transform: translateY(0);
  clip-path: none;
  inline-size: auto;
  block-size: auto;
}

/* --------------------------------------------------------------------------
   7. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.hie-container {
  inline-size: 100%;
  max-inline-size: var(--hie-container-max);
  margin-inline: auto;
  padding-inline: var(--hie-gutter);
}

.hie-container--wide { max-inline-size: var(--hie-container-wide); }
.hie-container--text { max-inline-size: var(--hie-container-text); }

.hie-section {
  padding-block: var(--hie-section-y);
}

.hie-section--sunken  { background-color: var(--hie-color-bg-sunken); }

.hie-section--inverse {
  background-color: var(--hie-color-bg-inverse);
  color: var(--hie-color-text-inverse);
}

.hie-section--inverse h1,
.hie-section--inverse h2,
.hie-section--inverse h3,
.hie-section--inverse h4,
.hie-section--inverse h5,
.hie-section--inverse h6 {
  color: var(--hie-color-text-inverse);
}

.hie-section--inverse .hie-text-muted,
.hie-section--inverse .hie-eyebrow {
  color: var(--hie-grey-300);
}

.hie-section--inverse a {
  color: var(--hie-brass-400);
}

/* Asymmetric editorial grid. Children opt into spans rather than every
   section defaulting to equal thirds. */
.hie-grid {
  display: grid;
  grid-template-columns: repeat(var(--hie-grid-columns), minmax(0, 1fr));
  gap: var(--hie-grid-gap);
}

.hie-col-4  { grid-column: span 4; }
.hie-col-5  { grid-column: span 5; }
.hie-col-6  { grid-column: span 6; }
.hie-col-7  { grid-column: span 7; }
.hie-col-8  { grid-column: span 8; }
.hie-col-12 { grid-column: span 12; }

@media (max-width: 900px) {
  .hie-col-4,
  .hie-col-5,
  .hie-col-6,
  .hie-col-7,
  .hie-col-8 {
    grid-column: span 12;
  }
}

/* --------------------------------------------------------------------------
   8. BUTTONS
   Brass primary with ink text (8.2:1). Navy secondary. Ghost tertiary.
   Minimum 44px target height on all three — WCAG 2.5.5 / mobile usability.
   -------------------------------------------------------------------------- */
.hie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hie-space-2xs);
  min-block-size: 44px;
  padding: var(--hie-space-xs) var(--hie-space-lg);
  font-family: var(--hie-font-body);
  font-size: var(--hie-text-base);
  font-weight: var(--hie-weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: var(--hie-border-thick) solid transparent;
  border-radius: var(--hie-radius-sm);
  cursor: pointer;
  transition: background-color var(--hie-dur-fast) var(--hie-ease-out),
              border-color var(--hie-dur-fast) var(--hie-ease-out),
              color var(--hie-dur-fast) var(--hie-ease-out),
              transform var(--hie-dur-fast) var(--hie-ease-out);
}

.hie-btn:active {
  transform: translateY(1px);
}

.hie-btn--primary {
  background-color: var(--hie-color-cta-bg);
  color: var(--hie-color-cta-text);
  border-color: var(--hie-color-cta-bg);
}

.hie-btn--primary:hover {
  background-color: var(--hie-color-cta-bg-hover);
  border-color: var(--hie-color-cta-bg-hover);
  color: var(--hie-color-cta-text);
}

.hie-btn--secondary {
  background-color: var(--hie-navy-700);
  color: var(--hie-white);
  border-color: var(--hie-navy-700);
}

.hie-btn--secondary:hover {
  background-color: var(--hie-navy-600);
  border-color: var(--hie-navy-600);
  color: var(--hie-white);
}

.hie-btn--ghost {
  background-color: transparent;
  color: var(--hie-navy-700);
  border-color: var(--hie-color-border-strong);
}

.hie-btn--ghost:hover {
  background-color: var(--hie-navy-050, var(--hie-grey-050));
  border-color: var(--hie-navy-700);
  color: var(--hie-navy-700);
}

.hie-btn[aria-disabled="true"],
.hie-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   9. CREDENTIAL STATUS CHIP  — the signature component
   --------------------------------------------------------------------------
   This is the element the whole visual system is built around. It appears on
   the verification page, the learner dashboard, the manager dashboard, the
   certificate preview and course cards. It is the only place signal green is
   permitted, which is exactly what makes a green chip mean something.

   Accessibility: colour alone never carries the state. Every chip renders a
   dot, a text label, and a role="status" so screen readers announce a change
   after a verification lookup. Survives Windows High Contrast Mode because
   the label is real text, not a background image.
   -------------------------------------------------------------------------- */
.hie-credential-status {
  display: inline-flex;
  align-items: center;
  gap: var(--hie-space-2xs);
  padding: var(--hie-space-3xs) var(--hie-space-xs);
  font-family: var(--hie-font-body);
  font-size: var(--hie-text-sm);
  font-weight: var(--hie-weight-semibold);
  letter-spacing: var(--hie-tracking-label);
  text-transform: uppercase;
  border: var(--hie-border-hairline) solid currentColor;
  border-radius: var(--hie-radius-pill);
}

.hie-credential-status__dot {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: var(--hie-radius-pill);
  background-color: currentColor;
  flex-shrink: 0;
}

.hie-credential-status--valid {
  color: var(--hie-status-valid);
  background-color: var(--hie-status-valid-bg);
}

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

.hie-credential-status--revoked {
  color: var(--hie-status-revoked);
  background-color: var(--hie-status-revoked-bg);
}

.hie-credential-status--notfound {
  color: var(--hie-status-notfound);
  background-color: var(--hie-status-notfound-bg);
}

/* Large variant for the verification result panel, where the state is the
   entire point of the page rather than a label on a card. */
.hie-credential-status--lg {
  font-size: var(--hie-text-md);
  padding: var(--hie-space-2xs) var(--hie-space-md);
}

.hie-credential-status--lg .hie-credential-status__dot {
  inline-size: 0.75rem;
  block-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   10. COMPLIANCE NOTICE
   The non-RTO disclosure. Rendered in the footer of every page, above every
   enrolment button, and on the certificate. Styled to be legible and calm —
   it is a statement of what HIE is, not fine print to be skimmed past.
   Never reduce this below --hie-text-sm and never drop it below 4.5:1.
   -------------------------------------------------------------------------- */
.hie-compliance-notice {
  font-size: var(--hie-text-sm);
  line-height: var(--hie-leading-body);
  color: var(--hie-color-text-muted);
  max-inline-size: var(--hie-measure-prose);
}

.hie-compliance-notice--boxed {
  padding: var(--hie-space-sm) var(--hie-space-md);
  background-color: var(--hie-grey-050);
  border-inline-start: var(--hie-border-thick) solid var(--hie-navy-500);
  border-radius: var(--hie-radius-sm);
}

.hie-section--inverse .hie-compliance-notice,
.hie-on-dark .hie-compliance-notice {
  color: var(--hie-grey-300);
}

.hie-section--inverse .hie-compliance-notice--boxed,
.hie-on-dark .hie-compliance-notice--boxed {
  background-color: rgba(255, 255, 255, 0.05);
  border-inline-start-color: var(--hie-brass-400);
}

/* --------------------------------------------------------------------------
   11. SCROLL REVEAL
   Applied by assets/js/reveal.js via IntersectionObserver. The no-JS and
   reduced-motion cases both resolve to fully visible content — motion is
   never required to read the page.
   -------------------------------------------------------------------------- */
.hie-reveal {
  opacity: 1;
  transform: none;
}

.js-hie-reveal-ready .hie-reveal {
  opacity: 0;
  transform: translateY(var(--hie-reveal-shift));
  transition: opacity var(--hie-dur-slow) var(--hie-ease-out),
              transform var(--hie-dur-slow) var(--hie-ease-out);
}

.js-hie-reveal-ready .hie-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger children of a revealed group. Capped at six so a long catalogue
   grid never leaves the last card waiting seconds to appear. */
.js-hie-reveal-ready .hie-reveal[data-hie-delay="1"] { transition-delay:  60ms; }
.js-hie-reveal-ready .hie-reveal[data-hie-delay="2"] { transition-delay: 120ms; }
.js-hie-reveal-ready .hie-reveal[data-hie-delay="3"] { transition-delay: 180ms; }
.js-hie-reveal-ready .hie-reveal[data-hie-delay="4"] { transition-delay: 240ms; }
.js-hie-reveal-ready .hie-reveal[data-hie-delay="5"] { transition-delay: 300ms; }
.js-hie-reveal-ready .hie-reveal[data-hie-delay="6"] { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .js-hie-reveal-ready .hie-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   12. UTILITIES
   -------------------------------------------------------------------------- */
.hie-visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Media never overflows its container — matters most in Elementor columns
   where an editor can drop an oversized image. */
img,
picture,
video,
canvas,
svg,
iframe {
  max-inline-size: 100%;
  block-size: auto;
}

/* Images fade in as they decode rather than snapping, which is the single
   most noticeable jank on the catalogue grid. */
img {
  background-color: var(--hie-grey-100);
}

hr {
  border: 0;
  border-block-start: var(--hie-border-hairline) solid var(--hie-color-border);
  margin-block: var(--hie-space-xl);
}

/* --------------------------------------------------------------------------
   13. PRINT
   Learners and employers print certificates and course outlines. Compliance
   and pricing must survive the print stylesheet — an outline printed without
   the non-RTO disclosure is the exact document that creates a dispute.
   -------------------------------------------------------------------------- */
@media print {
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .hie-skip-link,
  .hie-btn,
  nav,
  .site-header,
  .site-footer nav {
    display: none !important;
  }

  .hie-compliance-notice {
    display: block !important;
    color: #000;
    border: 1px solid #000;
    padding: 8pt;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
  }
}

/* =========================================================================
   PRICE  (added 2.0.0)
   Catalogue prices display GST-inclusive; corporate pricing displays ex-GST.
   The notation is never optional - Australian Consumer Law requires the
   single total price to be the prominent figure for a consumer.
   ====================================================================== */

.hie-price {
  font-family: var(--hie-font-display);
  font-weight: var(--hie-weight-bold);
  color: var(--hie-navy-700);
  letter-spacing: var(--hie-tracking-heading);
  white-space: nowrap;
}

.hie-price__amount {
  font-size: var(--hie-text-2xl);
}

.hie-price__gst {
  font-family: var(--hie-font-body);
  font-size: var(--hie-text-sm);
  font-weight: var(--hie-weight-regular);
  color: var(--hie-color-text-muted);
  margin-inline-start: var(--hie-space-2xs);
  letter-spacing: normal;
}

/* Free uses the AA-compliant green, never the signal green, because this is
   body-sized text rather than a status indicator. */
.hie-price--free .hie-price__amount {
  color: var(--hie-green-700);
}