/* ============================================================
 * HPortal — Unified Stylesheet
 * Version: 0.1.3
 * Built: 2026-03-28
 *
 * This file is auto-generated by build.py.
 * Do NOT edit directly — modify the source files in
 * css/settings/, css/core/, and css/components/.
 *
 * Browser compatibility: IE11+, Safari 9+, Chrome 49+,
 * Firefox 52+, Edge 16+.
 * ============================================================ */

/* --- css/settings/_variables.css --- */
/* ============================================================
 * HPortal Design Tokens
 * Version: 0.1.2
 *
 * All design decisions in one place. Components reference
 * these variables exclusively — never hard-code raw values.
 *
 * Browser note: CSS custom properties are supported in
 * Chrome 49+, Firefox 31+, Safari 9.1+, Edge 15+.
 * IE11 requires a polyfill (see get-started guide).
 * ============================================================ */

/* --- Font Faces ------------------------------------------- */
@font-face {
  font-family: 'Transport';
  src: url("../fonts/transport-light.1fb317291a0b.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Transport';
  src: url("../fonts/transport-mid.d8450b4ada76.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url("../fonts/JetBrainsMono-Light.c91599d112d3.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Root Variables --------------------------------------- */
:root {
  /* -- Colour: Brand -------------------------------------- */
  --hp-clr-main:          #2F73A1;
  --hp-clr-main-dark:     #1c577e;
  --hp-clr-main-light:    #a3d6ff;
  --hp-clr-deepblue:      #3B368F;
  --hp-clr-accent:        #F19337;
  --hp-clr-accent-dark:   #b0610f;
  --hp-clr-red:           #B30101;
  --hp-clr-green:         #068348;

  /* -- Colour: Neutrals ----------------------------------- */
  --hp-clr-black:         #0A0B0C;
  --hp-clr-dark:          #282828;
  --hp-clr-grey:          #585858;
  --hp-clr-grey-mid:      #b3b3b3;
  --hp-clr-grey-light:    #eaeaea;
  --hp-clr-grey-dark:     #4D4C4B;
  --hp-clr-off-white:     #F5F5F5;
  --hp-clr-white:         #FFFFFF;

  /* -- Colour: Semantic ----------------------------------- */
  --hp-clr-text:          #282828;
  --hp-clr-text-secondary:#585858;
  --hp-clr-text-muted:    #b3b3b3;
  --hp-clr-bg:            #FFFFFF;
  --hp-clr-bg-light:      #F5F5F5;
  --hp-clr-bg-mid:        #eaeaea;
  --hp-clr-border:        #0A0B0C;
  --hp-clr-border-light:  #b3b3b3;
  --hp-clr-link:          #2F73A1;
  --hp-clr-link-hover:    #1c577e;
  --hp-clr-link-visited:  #3B368F;
  --hp-clr-focus:         #F19337;
  --hp-clr-focus-text:    #0A0B0C;
  --hp-clr-error:         #B30101;
  --hp-clr-success:       #068348;

  /* -- Typography ----------------------------------------- */
  --hp-ff-base:           'Transport', 'Helvetica Neue', Arial, sans-serif;
  --hp-ff-mono:           'JetBrains Mono', 'Menlo', 'Consolas', 'Courier New', monospace;
  --hp-fs-base:           18px;
  --hp-fs-sm:             16px;
  --hp-fs-md:             19px;
  --hp-fs-lg:             24px;
  --hp-fs-xl:             32px;
  --hp-fs-2xl:            36px;
  --hp-fs-3xl:            48px;
  --hp-fw-normal:         400;
  --hp-fw-bold:           700;
  --hp-lh-base:           1.5;
  --hp-lh-heading:        1.2;

  /* -- Spacing (based on 5px unit) ------------------------ */
  --hp-sp-1:  5px;
  --hp-sp-2:  10px;
  --hp-sp-3:  15px;
  --hp-sp-4:  20px;
  --hp-sp-5:  25px;
  --hp-sp-6:  30px;
  --hp-sp-7:  40px;
  --hp-sp-8:  50px;
  --hp-sp-9:  60px;

  /* -- Layout --------------------------------------------- */
  --hp-page-width:        1000px;

  /* -- Borders -------------------------------------------- */
  --hp-border-w:          2px;

  /* -- Shadows -------------------------------------------- */
  --hp-shadow-sm:         0 1px 3px rgba(0,0,0,.12);
  --hp-shadow-md:         0 2px 6px rgba(0,0,0,.15);
}


/* --- css/settings/_reset.css --- */
/* ============================================================
 * HPortal CSS Reset
 * Version: 0.1.0
 *
 * A minimal, modern reset for cross-browser consistency.
 * Based on modern-normalize principles; compatible with
 * IE11+, Safari 9+, Chrome 49+, Firefox 52+, Edge 16+.
 * ============================================================ */

/* --- Box Sizing ------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* --- Document --------------------------------------------- */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
}

/* --- Body ------------------------------------------------- */
body {
  margin: 0;
  font-family: var(--hp-ff-base);
  font-size: var(--hp-fs-base);
  line-height: var(--hp-lh-base);
  color: var(--hp-clr-text);
  background-color: var(--hp-clr-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Sections --------------------------------------------- */
main {
  display: block; /* IE11 */
}

/* --- Typography ------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  font-weight: var(--hp-fw-bold);
}

p {
  margin-top: 0;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

/* Prevent sub/sup from affecting line-height */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }

/* --- Links ------------------------------------------------ */
a {
  background-color: transparent; /* IE11 */
}

/* --- Media ------------------------------------------------ */
img {
  border-style: none; /* IE11 */
  max-width: 100%;
  height: auto;
}

/* --- Forms ------------------------------------------------ */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible; /* IE11 */
}

button,
select {
  text-transform: none;
}

/* Correct inability to style clickable types in iOS/Safari */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/* Remove inner border and padding in Firefox */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

textarea {
  overflow: auto; /* IE11 */
}

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: table; /* IE11 */
  max-width: 100%;
  padding: 0;
  white-space: normal; /* IE11 */
}

/* --- Tables ----------------------------------------------- */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* --- Lists ------------------------------------------------ */
ul, ol {
  padding-left: 20px;
}

/* --- Misc ------------------------------------------------- */
[hidden] {
  display: none !important;
}

/* Remove default summary marker in webkit */
summary {
  display: list-item;
}

/* Correct display in IE11 */
template {
  display: none;
}


/* --- css/core/_typography.css --- */
/* ============================================================
 * HPortal Typography
 * Version: 0.1.0
 *
 * Heading scale, body text, lead paragraphs, lists,
 * captions, and section breaks.
 * ============================================================ */

/* --- Headings --------------------------------------------- */
.hp-heading-xl {
  font-size: var(--hp-fs-3xl);
  line-height: var(--hp-lh-tight);
  margin-bottom: var(--hp-sp-6);
  font-weight: var(--hp-fw-bold);
}

.hp-heading-l {
  font-size: var(--hp-fs-2xl);
  line-height: var(--hp-lh-tight);
  margin-bottom: var(--hp-sp-5);
  font-weight: var(--hp-fw-bold);
}

.hp-heading-m {
  font-size: var(--hp-fs-lg);
  line-height: var(--hp-lh-tight);
  margin-bottom: var(--hp-sp-4);
  font-weight: var(--hp-fw-bold);
}

.hp-heading-s {
  font-size: var(--hp-fs-md);
  line-height: var(--hp-lh-tight);
  margin-bottom: var(--hp-sp-4);
  font-weight: var(--hp-fw-bold);
}

/* Responsive heading sizes for mobile */
@media screen and (max-width: 640px) {
  .hp-heading-xl { font-size: var(--hp-fs-2xl); }
  .hp-heading-l  { font-size: var(--hp-fs-xl); }
  .hp-heading-m  { font-size: var(--hp-fs-md); }
  .hp-heading-s  { font-size: var(--hp-fs-sm); }
}

/* --- Body Text -------------------------------------------- */
.hp-body {
  font-size: var(--hp-fs-base);
  line-height: var(--hp-lh-base);
  margin-bottom: var(--hp-sp-4);
  color: var(--hp-clr-text);
}

.hp-body-s {
  font-size: var(--hp-fs-sm);
  line-height: var(--hp-lh-base);
  margin-bottom: var(--hp-sp-4);
  color: var(--hp-clr-text);
}

.hp-body-l {
  font-size: var(--hp-fs-lg);
  line-height: var(--hp-lh-base);
  margin-bottom: var(--hp-sp-4);
  color: var(--hp-clr-text);
}

/* Lead paragraph — used as the first paragraph under a heading */
.hp-lead {
  font-size: var(--hp-fs-lg);
  line-height: var(--hp-lh-base);
  margin-bottom: var(--hp-sp-6);
  font-weight: var(--hp-fw-bold);
}

/* Caption — sits above a heading to provide context */
.hp-caption {
  font-size: var(--hp-fs-xl);
  line-height: var(--hp-lh-tight);
  margin-bottom: var(--hp-sp-1);
  color: var(--hp-clr-text-secondary);
  font-weight: var(--hp-fw-normal);
}

.hp-caption-m {
  font-size: var(--hp-fs-md);
  line-height: var(--hp-lh-tight);
  margin-bottom: var(--hp-sp-1);
  color: var(--hp-clr-text-secondary);
  font-weight: var(--hp-fw-normal);
}

/* --- Lists ------------------------------------------------ */
.hp-list {
  font-size: var(--hp-fs-base);
  line-height: var(--hp-lh-base);
  margin-bottom: var(--hp-sp-4);
  padding-left: var(--hp-sp-4);
}

.hp-list > li {
  margin-bottom: var(--hp-sp-1);
}

/* Bullet list */
.hp-list--bullet {
  list-style-type: disc;
}

/* Numbered list */
.hp-list--number {
  list-style-type: decimal;
}

/* No-bullet list */
.hp-list--plain {
  list-style: none;
  padding-left: 0;
}

/* --- Section Break ---------------------------------------- */
.hp-section-break {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--hp-clr-border-light);
}

.hp-section-break--visible {
  border-bottom: var(--hp-border-w) solid var(--hp-clr-border-light);
}

.hp-section-break--l {
  margin-top: var(--hp-sp-6);
  margin-bottom: var(--hp-sp-6);
}

.hp-section-break--m {
  margin-top: var(--hp-sp-4);
  margin-bottom: var(--hp-sp-4);
}

.hp-section-break--s {
  margin-top: var(--hp-sp-2);
  margin-bottom: var(--hp-sp-2);
}


/* --- css/core/_layout.css --- */
/* ============================================================
 * HPortal Layout
 * Version: 0.1.0
 *
 * Container, grid system, and width utilities.
 * ============================================================ */

/* --- Container -------------------------------------------- */
.hp-container {
  max-width: var(--hp-page-width);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--hp-sp-3);
  padding-left: var(--hp-sp-3);
}

@media screen and (min-width: 641px) {
  .hp-container {
    padding-right: var(--hp-sp-6);
    padding-left: var(--hp-sp-6);
  }
}

/* Full-width variant */
.hp-container--full {
  max-width: none;
}

/* --- Main Wrapper ----------------------------------------- */
.hp-main-wrapper {
  padding-top: var(--hp-sp-4);
  padding-bottom: var(--hp-sp-4);
  display: block;
}

@media screen and (min-width: 641px) {
  .hp-main-wrapper {
    padding-top: var(--hp-sp-7);
    padding-bottom: var(--hp-sp-7);
  }
}

/* --- Grid ------------------------------------------------- */
.hp-grid-row {
  margin-right: -15px;
  margin-left: -15px;
  display: flex;
  flex-wrap: wrap;
}

.hp-grid-row::after {
  content: "";
  display: table;
  clear: both;
}

/* Grid columns — mobile-first (full width by default) */
.hp-grid-col {
  box-sizing: border-box;
  width: 100%;
  padding-right: var(--hp-sp-3);
  padding-left: var(--hp-sp-3);
}

/* Float columns for tablet+ */
@media screen and (min-width: 641px) {
  .hp-grid-col {
    float: left;
  }

  .hp-grid-col--full        { width: 100%; }
  .hp-grid-col--three-quarters { width: 75%; }
  .hp-grid-col--two-thirds  { width: 66.6666%; }
  .hp-grid-col--one-half    { width: 50%; }
  .hp-grid-col--one-third   { width: 33.3333%; }
  .hp-grid-col--one-quarter { width: 25%; }
}

/* --- Width Utilities -------------------------------------- */
.hp-u-w-full        { width: 100% !important; }
.hp-u-w-three-quarters { width: 75% !important; }
.hp-u-w-two-thirds  { width: 66.66% !important; }
.hp-u-w-one-half    { width: 50% !important; }
.hp-u-w-one-third   { width: 33.33% !important; }
.hp-u-w-one-quarter { width: 25% !important; }

/* Max-width for form elements */
.hp-input--w-30 { max-width: 59ex; }
.hp-input--w-20 { max-width: 41ex; }
.hp-input--w-10 { max-width: 23ex; }
.hp-input--w-5  { max-width: 10.8ex; }
.hp-input--w-4  { max-width: 9ex; }
.hp-input--w-3  { max-width: 7.2ex; }
.hp-input--w-2  { max-width: 5.4ex; }


/* --- css/core/_utilities.css --- */
/* ============================================================
 * HPortal Utilities
 * Version: 0.1.0
 *
 * Spacing, alignment, visibility, and display helpers.
 * All utilities use !important to ensure they override
 * component styles when applied.
 * ============================================================ */

/* --- Text Alignment --------------------------------------- */
.hp-u-text-left    { text-align: left !important; }
.hp-u-text-center  { text-align: center !important; }
.hp-u-text-right   { text-align: right !important; }

/* --- Font Weight ------------------------------------------ */
.hp-u-fw-normal { font-weight: 400 !important; }
.hp-u-fw-bold   { font-weight: 700 !important; }

/* --- Display ---------------------------------------------- */
.hp-u-d-block        { display: block !important; }
.hp-u-d-inline       { display: inline !important; }
.hp-u-d-inline-block { display: inline-block !important; }
.hp-u-d-none         { display: none !important; }

/* --- Visibility ------------------------------------------- */
/* Visually hidden but accessible to screen readers */
.hp-u-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* Focusable variant — becomes visible on focus */
.hp-u-visually-hidden--focusable:active,
.hp-u-visually-hidden--focusable:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: inherit !important;
  overflow: visible !important;
  clip: auto !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  white-space: inherit !important;
}

/* --- Spacing ---------------------------------------------- */
/* Margin-bottom */
.hp-u-mb-0 { margin-bottom: 0 !important; }
.hp-u-mb-1 { margin-bottom: var(--hp-sp-1) !important; }
.hp-u-mb-2 { margin-bottom: var(--hp-sp-2) !important; }
.hp-u-mb-3 { margin-bottom: var(--hp-sp-3) !important; }
.hp-u-mb-4 { margin-bottom: var(--hp-sp-4) !important; }
.hp-u-mb-5 { margin-bottom: var(--hp-sp-5) !important; }
.hp-u-mb-6 { margin-bottom: var(--hp-sp-6) !important; }
.hp-u-mb-7 { margin-bottom: var(--hp-sp-7) !important; }
.hp-u-mb-8 { margin-bottom: var(--hp-sp-8) !important; }
.hp-u-mb-9 { margin-bottom: var(--hp-sp-9) !important; }

/* Margin-top */
.hp-u-mt-0 { margin-top: 0 !important; }
.hp-u-mt-1 { margin-top: var(--hp-sp-1) !important; }
.hp-u-mt-2 { margin-top: var(--hp-sp-2) !important; }
.hp-u-mt-3 { margin-top: var(--hp-sp-3) !important; }
.hp-u-mt-4 { margin-top: var(--hp-sp-4) !important; }
.hp-u-mt-5 { margin-top: var(--hp-sp-5) !important; }
.hp-u-mt-6 { margin-top: var(--hp-sp-6) !important; }

/* Padding */
.hp-u-p-0 { padding: 0 !important; }
.hp-u-p-2 { padding: var(--hp-sp-2) !important; }
.hp-u-p-4 { padding: var(--hp-sp-4) !important; }
.hp-u-p-6 { padding: var(--hp-sp-6) !important; }

/* --- Clearfix --------------------------------------------- */
.hp-u-clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* --- Colour overrides ------------------------------------- */
.hp-u-clr-main   { color: var(--hp-clr-main) !important; }
.hp-u-clr-error  { color: var(--hp-clr-error) !important; }
.hp-u-clr-muted  { color: var(--hp-clr-text-muted) !important; }
.hp-u-clr-white  { color: var(--hp-clr-white) !important; }


/* --- css/components/_skip-link.css --- */
/* ============================================================
 * HPortal Component: Skip Link
 * Class: .hp-skip
 *
 * Accessible skip-to-content link. Hidden by default,
 * appears on keyboard focus.
 * ============================================================ */

.hp-skip {
  position: absolute;
  top: -9999px;
  left: 0;
  display: block;
  padding: var(--hp-sp-2) var(--hp-sp-3);
  font-size: var(--hp-fs-sm);
  font-weight: var(--hp-fw-bold);
  color: var(--hp-clr-focus-text);
  background-color: var(--hp-clr-focus);
  text-decoration: none;
  z-index: 9999;
}

.hp-skip:focus {
  position: static;
  top: auto;
  outline: 3px solid var(--hp-clr-focus);
  outline-offset: 0;
}


/* --- css/components/_link.css --- */
/* ============================================================
 * HPortal Component: Link
 * Class: .hp-link
 *
 * Standard hyperlink styles with variants for colour,
 * underline behaviour, and accessible focus state.
 *
 * Anti-jump: total (border-bottom + padding-bottom) is kept
 * constant at 3px across default / hover / focus states.
 * ============================================================ */

.hp-link {
  font-weight: var(--hp-fw-bold);
  color: var(--hp-clr-link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;  /* 1px border */
  padding-bottom: 2px;                    /* + 2px pad = 3px total */
  cursor: pointer;
}

.hp-link--normal {
  font-weight: var(--hp-fw-normal);
}

.hp-link--muted {
  color: var(--hp-clr-text-secondary);
}

.hp-link--inverse {
  color: var(--hp-clr-white);
}

.hp-link--no-underline {
  border-bottom: none;
  padding-bottom: 3px;
}

/* Hover */
.hp-link:hover {
  color: var(--hp-clr-link-hover);
  border-bottom-width: 3px;               /* 3px border */
  padding-bottom: 0;                      /* + 0px pad = 3px total */
}

.hp-link--inverse:hover {
  color: var(--hp-clr-off-white);
}

/* Visited */
.hp-link:visited {
  color: var(--hp-clr-link-visited);
}

.hp-link--inverse:visited {
  color: var(--hp-clr-off-white);
}

/* Focus — high-contrast focus ring */
.hp-link:focus {
  color: var(--hp-clr-focus-text);
  background-color: var(--hp-clr-focus);
  box-shadow: 0 -2px var(--hp-clr-focus), 0 4px var(--hp-clr-focus-text);
  border-bottom: none;                    /* 0px border */
  padding-bottom: 3px;                    /* + 3px pad = 3px total */
  outline: none;
  text-decoration: none;
}

/* Disabled */
.hp-link--disabled,
.hp-link[aria-disabled="true"] {
  pointer-events: none;
  color: var(--hp-clr-text-muted);
  border-bottom-color: var(--hp-clr-text-muted);
}

/* No-visited variant — stays in link colour */
.hp-link--no-visited:visited {
  color: var(--hp-clr-link);
}


/* --- css/components/_button.css --- */
/* ============================================================
 * HPortal Component: Button
 * Class: .hp-btn
 *
 * Primary, secondary, warning, and inverse button variants.
 * Includes disabled state and grouped buttons.
 * ============================================================ */

.hp-btn {
  font-family: var(--hp-ff-base);
  font-weight: var(--hp-fw-bold);
  font-size: var(--hp-fs-md);
  line-height: 1;
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  width: auto;
  margin: 0 0 22px 0;
  padding: 8px 10px 7px;
  border: var(--hp-border-w) solid transparent;
  border-radius: 0;
  text-align: center;
  vertical-align: top;
  cursor: pointer;
  -webkit-appearance: none;
  text-decoration: none;

  color: var(--hp-clr-white);
  background-color: var(--hp-clr-main);
  box-shadow: 0 2px 0 var(--hp-clr-main-dark);
}

.hp-btn:link,
.hp-btn:visited {
  color: var(--hp-clr-white);
}

.hp-btn:hover {
  background-color: var(--hp-clr-main-dark);
  color: var(--hp-clr-white);
  text-decoration: none;
}

.hp-btn:active {
  top: 2px;
  box-shadow: none;
}

.hp-btn:focus {
  border-color: var(--hp-clr-focus);
  outline: 3px solid transparent;
  box-shadow: inset 0 0 0 1px var(--hp-clr-focus);
}

.hp-btn:focus:not(:active):not(:hover) {
  border-color: var(--hp-clr-focus);
  color: var(--hp-clr-focus-text);
  background-color: var(--hp-clr-focus);
  box-shadow: 0 2px 0 var(--hp-clr-focus-text);
}

/* --- Secondary -------------------------------------------- */
.hp-btn--secondary {
  background-color: var(--hp-clr-off-white);
  color: var(--hp-clr-text);
  box-shadow: 0 2px 0 var(--hp-clr-grey-mid);
}

.hp-btn--secondary:link,
.hp-btn--secondary:visited {
  color: var(--hp-clr-text);
}

.hp-btn--secondary:hover {
  background-color: var(--hp-clr-grey-light);
  color: var(--hp-clr-text);
}

/* --- Warning ---------------------------------------------- */
.hp-btn--warning {
  background-color: var(--hp-clr-red);
  box-shadow: 0 2px 0 #6b0101;
}

.hp-btn--warning:hover {
  background-color: #900101;
}

/* --- Accent (Yellow) -------------------------------------- */
.hp-btn--accent {
  background-color: var(--hp-clr-accent);
  color: var(--hp-clr-focus-text);
  box-shadow: 0 2px 0 var(--hp-clr-accent-dark);
}

.hp-btn--accent:link,
.hp-btn--accent:visited,
.hp-btn--accent:hover {
  color: var(--hp-clr-focus-text);
}

.hp-btn--accent:hover {
  background-color: var(--hp-clr-accent-dark);
}

/* --- Inverse (on dark backgrounds) ----------------------- */
.hp-btn--inverse {
  background-color: var(--hp-clr-white);
  color: var(--hp-clr-main);
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
}

.hp-btn--inverse:link,
.hp-btn--inverse:visited {
  color: var(--hp-clr-main);
}

.hp-btn--inverse:hover {
  background-color: var(--hp-clr-off-white);
  color: var(--hp-clr-main);
}

/* --- Disabled --------------------------------------------- */
.hp-btn--disabled,
.hp-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.hp-btn--disabled:hover,
.hp-btn[disabled]:hover {
  background-color: var(--hp-clr-main);
}

/* --- Button Group ----------------------------------------- */
.hp-btn-group {
  margin-bottom: var(--hp-sp-4);
}

.hp-btn-group .hp-btn {
  margin-right: var(--hp-sp-3);
}


/* --- css/components/_input.css --- */
/* ============================================================
 * HPortal Component: Text Input
 * Class: .hp-input
 *
 * Text inputs with label, hint, error, and width variants.
 * ============================================================ */

/* Form group wrapper */
.hp-form-group {
  margin-bottom: var(--hp-sp-4);
}

.hp-form-group--error {
  padding-left: var(--hp-sp-3);
  border-left: 4px solid var(--hp-clr-error);
}

/* Label */
.hp-label {
  display: block;
  margin-bottom: var(--hp-sp-1);
  font-weight: var(--hp-fw-bold);
  font-size: var(--hp-fs-md);
  color: var(--hp-clr-text);
}

.hp-label--s {
  font-size: var(--hp-fs-base);
  font-weight: var(--hp-fw-normal);
}

/* Hint text */
.hp-hint {
  display: block;
  margin-bottom: var(--hp-sp-3);
  font-size: var(--hp-fs-base);
  color: var(--hp-clr-text-secondary);
}

/* Text input */
.hp-input {
  -webkit-border-radius: 0;
  border-radius: 0;
  border: var(--hp-border-w) solid var(--hp-clr-border);
  height: 40px;
  width: 100%;
  outline: none;
  font-size: var(--hp-fs-base);
  font-family: var(--hp-ff-base);
  padding: var(--hp-sp-1) var(--hp-sp-2);
  -webkit-appearance: none;
  appearance: none;
}

.hp-input::placeholder {
  color: var(--hp-clr-text-muted);
}

.hp-input:focus {
  border: 3px solid var(--hp-clr-focus-text);
  outline: 3px solid var(--hp-clr-focus);
  outline-offset: 0;
}

/* Error state */
.hp-input--error {
  border-color: var(--hp-clr-error);
}

.hp-input--error:focus {
  border-color: var(--hp-clr-focus-text);
}

/* Readonly */
.hp-input[readonly] {
  color: var(--hp-clr-text-secondary);
  background-color: var(--hp-clr-bg-mid);
  cursor: not-allowed;
}

/* --- Input with prefix/suffix ----------------------------- */
.hp-input-wrapper {
  display: table;
  width: 100%;
}

.hp-input-wrapper .hp-input {
  display: table-cell;
}

.hp-input__prefix,
.hp-input__suffix {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 1%;
  white-space: nowrap;
  padding: 0 var(--hp-sp-2);
  font-size: var(--hp-fs-base);
  background-color: var(--hp-clr-bg-mid);
  border: var(--hp-border-w) solid var(--hp-clr-border);
}

.hp-input__prefix {
  border-right: 0;
}

.hp-input__suffix {
  border-left: 0;
}


/* --- css/components/_textarea.css --- */
/* ============================================================
 * HPortal Component: Textarea
 * Class: .hp-textarea
 * ============================================================ */

.hp-textarea {
  -webkit-border-radius: 0;
  border-radius: 0;
  border: var(--hp-border-w) solid var(--hp-clr-border);
  width: 100%;
  min-height: 120px;
  outline: none;
  font-size: var(--hp-fs-base);
  font-family: var(--hp-ff-base);
  padding: var(--hp-sp-1) var(--hp-sp-2);
  -webkit-appearance: none;
  appearance: none;
  resize: vertical;
}

.hp-textarea:focus {
  border: 3px solid var(--hp-clr-focus-text);
  outline: 3px solid var(--hp-clr-focus);
  outline-offset: 0;
}

.hp-textarea--error {
  border-color: var(--hp-clr-error);
}


/* --- css/components/_select.css --- */
/* ============================================================
 * HPortal Component: Select (Dropdown)
 * Class: .hp-select
 * ============================================================ */

.hp-select {
  -webkit-border-radius: 0;
  border-radius: 0;
  height: 40px;
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
  padding: var(--hp-sp-1);
  border: var(--hp-border-w) solid var(--hp-clr-border);
  font-size: var(--hp-fs-base);
  font-family: var(--hp-ff-base);
  color: var(--hp-clr-text);
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23282828' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
}

.hp-select:focus {
  outline: 3px solid var(--hp-clr-focus);
  outline-offset: 0;
  box-shadow: inset 0 0 0 2px var(--hp-clr-border);
}

.hp-select--error {
  border-color: var(--hp-clr-error);
}

.hp-select option:checked {
  color: var(--hp-clr-white);
  background-color: var(--hp-clr-main);
}


/* --- css/components/_fieldset.css --- */
/* ============================================================
 * HPortal Component: Fieldset / Legend
 * Class: .hp-fieldset
 * ============================================================ */

.hp-fieldset {
  padding: 0;
  margin: 0;
  border: 0;
  min-width: 0;
}

.hp-fieldset__legend {
  font-size: var(--hp-fs-md);
  font-weight: var(--hp-fw-bold);
  margin-bottom: var(--hp-sp-2);
  padding: 0;
  display: table; /* IE11 fix */
  max-width: 100%;
}

.hp-fieldset__legend--l {
  font-size: var(--hp-fs-lg);
}

.hp-fieldset__legend--xl {
  font-size: var(--hp-fs-2xl);
}

.hp-fieldset__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}


/* --- css/components/_checkbox.css --- */
/* ============================================================
 * HPortal Component: Checkbox
 * Class: .hp-chk
 *
 * Custom-styled checkboxes with accessible focus states.
 * ============================================================ */

.hp-chk-group {
  padding: 0;
  margin: 0;
  list-style: none;
}

.hp-chk {
  font-weight: var(--hp-fw-normal);
  display: block;
  position: relative;
  min-height: 40px;
  padding-left: 36px;
  clear: left;
  margin-bottom: var(--hp-sp-2);
}

.hp-chk:last-child {
  margin-bottom: 0;
}

/* Hidden native input */
.hp-chk__input {
  cursor: pointer;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  margin: 0;
  opacity: 0;
}

/* Label */
.hp-chk__label {
  display: inline-block;
  margin-bottom: 0;
  padding: 7px var(--hp-sp-3) 7px;
  cursor: pointer;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  font-size: var(--hp-fs-base);
  line-height: 1.25;
}

/* Custom checkbox box */
.hp-chk__label::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: var(--hp-border-w) solid currentColor;
  background: transparent;
}

/* Checkmark (hidden by default) */
.hp-chk__label::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 8px;
  left: 6px;
  width: 23px;
  height: 12px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border: solid;
  border-width: 0 0 3px 3px;
  border-top-color: transparent;
  opacity: 0;
  background: transparent;
}

/* Checked state */
.hp-chk__input:checked + .hp-chk__label::after {
  opacity: 1;
}

/* Focus state */
.hp-chk__input:focus + .hp-chk__label::before {
  border-width: 4px;
  box-shadow: 0 0 0 3px var(--hp-clr-focus);
}

/* Hover */
.hp-chk:hover .hp-chk__input:not(:disabled) + .hp-chk__label::before {
  box-shadow: 0 0 0 10px rgba(0,0,0,.05);
}

.hp-chk:hover .hp-chk__input:focus + .hp-chk__label::before {
  box-shadow: 0 0 0 3px var(--hp-clr-focus), 0 0 0 10px rgba(0,0,0,.05);
}

/* Disabled */
.hp-chk__input:disabled + .hp-chk__label {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Hint under checkbox — aligned with label text */
.hp-chk__hint {
  display: block;
  padding-left: var(--hp-sp-3);
  margin-top: -2px;
  color: var(--hp-clr-text-secondary);
  font-size: var(--hp-fs-sm);
}

/* Divider between checkbox options */
.hp-chk__divider {
  font-size: var(--hp-fs-sm);
  font-weight: var(--hp-fw-bold);
  color: var(--hp-clr-text-secondary);
  margin: var(--hp-sp-2) 0;
  padding-left: var(--hp-sp-3);
}


/* --- css/components/_radio.css --- */
/* ============================================================
 * HPortal Component: Radio
 * Class: .hp-radio
 *
 * Custom-styled radio buttons with accessible focus states.
 * ============================================================ */

.hp-radio-group {
  padding: 0;
  margin: 0;
  list-style: none;
}

.hp-radio {
  font-weight: var(--hp-fw-normal);
  display: block;
  position: relative;
  min-height: 40px;
  padding-left: 36px;
  clear: left;
  margin-bottom: var(--hp-sp-2);
}

.hp-radio:last-child {
  margin-bottom: 0;
}

/* Hidden native input */
.hp-radio__input {
  cursor: pointer;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  margin: 0;
  opacity: 0;
}

/* Label */
.hp-radio__label {
  display: inline-block;
  margin-bottom: 0;
  padding: 7px var(--hp-sp-3) 7px;
  cursor: pointer;
  touch-action: manipulation;
  font-size: var(--hp-fs-base);
  line-height: 1.25;
}

/* Custom radio circle */
.hp-radio__label::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: var(--hp-border-w) solid currentColor;
  border-radius: 50%;
  background: transparent;
}

/* Inner dot (hidden by default) */
.hp-radio__label::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
}

/* Selected state */
.hp-radio__input:checked + .hp-radio__label::after {
  opacity: 1;
}

/* Focus */
.hp-radio__input:focus + .hp-radio__label::before {
  border-width: 4px;
  box-shadow: 0 0 0 3px var(--hp-clr-focus);
}

/* Hover */
.hp-radio:hover .hp-radio__input:not(:disabled) + .hp-radio__label::before {
  box-shadow: 0 0 0 10px rgba(0,0,0,.05);
}

.hp-radio:hover .hp-radio__input:focus + .hp-radio__label::before {
  box-shadow: 0 0 0 3px var(--hp-clr-focus), 0 0 0 10px rgba(0,0,0,.05);
}

/* Disabled */
.hp-radio__input:disabled + .hp-radio__label {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Divider between radio options — left-aligned with label text */
.hp-radio__divider {
  font-size: var(--hp-fs-sm);
  font-weight: var(--hp-fw-bold);
  color: var(--hp-clr-text-secondary);
  margin: var(--hp-sp-2) 0;
  padding-left: var(--hp-sp-3);
}

/* Hint under radio label — aligned with the label text */
.hp-radio__hint {
  display: block;
  padding-left: var(--hp-sp-3);
  margin-top: -2px;
  color: var(--hp-clr-text-secondary);
  font-size: var(--hp-fs-sm);
}


/* --- css/components/_search.css --- */
/* ============================================================
 * HPortal Component: Search
 * Class: .hp-search
 *
 * Search input + button composition using display:table
 * for reliable side-by-side layout (IE11+ compatible).
 * ============================================================ */

.hp-search {
  display: table;
  width: 100%;
  max-width: 500px;
}

.hp-search__input {
  display: table-cell;
  width: 100%;
  -webkit-border-radius: 0;
  border-radius: 0;
  border: var(--hp-border-w) solid var(--hp-clr-border);
  border-right: 0;
  height: 40px;
  font-size: var(--hp-fs-base);
  font-family: var(--hp-ff-base);
  padding: var(--hp-sp-1) var(--hp-sp-2);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  vertical-align: top;
  box-sizing: border-box;
}

.hp-search__input:focus {
  border: 3px solid var(--hp-clr-focus-text);
  outline: 3px solid var(--hp-clr-focus);
  outline-offset: 0;
}

/* Wrapper to allow table-cell sizing of the button */
.hp-search__btn-wrap {
  display: table-cell;
  width: 40px;
  vertical-align: top;
}

.hp-search__btn {
  display: block;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: var(--hp-clr-main);
  color: var(--hp-clr-white);
  cursor: pointer;
  text-align: center;
  line-height: 40px;
  box-sizing: border-box;
  vertical-align: top;
}

.hp-search__btn:hover {
  background-color: var(--hp-clr-main-dark);
}

.hp-search__btn:focus {
  border: 3px solid var(--hp-clr-focus-text);
  outline: 2px solid var(--hp-clr-focus);
  box-shadow: inset 0 0 0 1px var(--hp-clr-focus-text);
}

/* SVG icon inside the search button */
.hp-search__icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  pointer-events: none;
}


/* --- css/components/_tag.css --- */
/* ============================================================
 * HPortal Component: Tag
 * Class: .hp-tag
 *
 * Status indicators with colour variants.
 * ============================================================ */

.hp-tag {
  display: inline-block;
  background-color: var(--hp-clr-main);
  color: var(--hp-clr-white);
  font-weight: var(--hp-fw-bold);
  font-size: var(--hp-fs-sm);
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.5;
}

/* Colour variants */
.hp-tag--grey {
  background-color: var(--hp-clr-grey-mid);
  color: var(--hp-clr-white);
}

.hp-tag--green {
  background-color: var(--hp-clr-green);
}

.hp-tag--red {
  background-color: var(--hp-clr-red);
}

.hp-tag--blue {
  background-color: var(--hp-clr-deepblue);
}

.hp-tag--accent {
  background-color: var(--hp-clr-accent);
  color: var(--hp-clr-focus-text);
}

/* Outline variant — uses inset box-shadow to avoid affecting layout */
.hp-tag--outline {
  background-color: transparent;
  color: var(--hp-clr-main);
  box-shadow: inset 0 0 0 2px var(--hp-clr-main);
}


/* --- css/components/_panel.css --- */
/* ============================================================
 * HPortal Component: Panel
 * Class: .hp-panel
 *
 * Styled panels with title bar and content area.
 * Colour variants: default (blue), red, green, deepblue, plain.
 * Border uses 5px to match notification banner weight.
 * ============================================================ */

.hp-panel {
  background-color: var(--hp-clr-off-white);
  border: 5px solid var(--hp-clr-main);
  margin-bottom: var(--hp-sp-4);
}

.hp-panel--red    { border-color: var(--hp-clr-red); }
.hp-panel--green  { border-color: var(--hp-clr-green); }
.hp-panel--blue   { border-color: var(--hp-clr-deepblue); }
.hp-panel--plain  { border-color: var(--hp-clr-grey-dark); }

/* Title bar */
.hp-panel__title {
  font-weight: var(--hp-fw-bold);
  background-color: var(--hp-clr-main);
  color: var(--hp-clr-white);
  padding: var(--hp-sp-1) var(--hp-sp-2);
  font-size: var(--hp-fs-base);
  margin: 0;
}

.hp-panel--red   .hp-panel__title { background-color: var(--hp-clr-red); }
.hp-panel--green .hp-panel__title { background-color: var(--hp-clr-green); }
.hp-panel--blue  .hp-panel__title { background-color: var(--hp-clr-deepblue); }

.hp-panel--plain .hp-panel__title {
  background-color: var(--hp-clr-bg-mid);
  color: var(--hp-clr-text);
}

/* Content area */
.hp-panel__body {
  padding: var(--hp-sp-2) var(--hp-sp-3);
}

.hp-panel__body > *:last-child {
  margin-bottom: 0;
}

/* --- Confirmation Panel (full-colour, for success pages) -- */
.hp-panel--confirm {
  background-color: var(--hp-clr-main);
  color: var(--hp-clr-white);
  border: none;
  text-align: center;
  padding: var(--hp-sp-7) var(--hp-sp-3);
}

.hp-panel--confirm .hp-panel__title {
  font-size: var(--hp-fs-2xl);
  background: none;
  padding: 0;
  margin-bottom: var(--hp-sp-6);
}

.hp-panel--confirm .hp-panel__body {
  font-size: var(--hp-fs-2xl);
  padding: 0;
}


/* --- css/components/_table.css --- */
/* ============================================================
 * HPortal Component: Table
 * Class: .hp-tbl
 * ============================================================ */

.hp-tbl {
  width: 100%;
  margin-bottom: var(--hp-sp-4);
  font-size: var(--hp-fs-base);
  border-collapse: collapse;
}

.hp-tbl__caption {
  font-weight: var(--hp-fw-bold);
  font-size: var(--hp-fs-lg);
  text-align: left;
  margin-bottom: var(--hp-sp-2);
  caption-side: top;
}

.hp-tbl__header,
.hp-tbl__cell {
  padding: var(--hp-sp-2) var(--hp-sp-4) var(--hp-sp-2) 0;
  border-bottom: 1px solid var(--hp-clr-border-light);
  text-align: left;
  vertical-align: top;
}

.hp-tbl__header {
  font-weight: var(--hp-fw-bold);
  border-bottom-width: 2px;
  border-bottom-color: var(--hp-clr-border);
}

/* Numeric column alignment */
.hp-tbl__header--numeric,
.hp-tbl__cell--numeric {
  text-align: right;
}

/* Small variant */
.hp-tbl--small {
  font-size: var(--hp-fs-sm);
}

.hp-tbl--small .hp-tbl__header,
.hp-tbl--small .hp-tbl__cell {
  padding: var(--hp-sp-1) var(--hp-sp-2) var(--hp-sp-1) 0;
}


/* --- css/components/_breadcrumbs.css --- */
/* ============================================================
 * HPortal Component: Breadcrumbs
 * Class: .hp-crumbs
 *
 * Anti-jump: total (border-bottom + padding-bottom) is kept
 * constant at 2px across default / hover / focus states.
 * ============================================================ */

.hp-crumbs {
  margin-top: var(--hp-sp-2);
  margin-bottom: var(--hp-sp-2);
  font-size: var(--hp-fs-sm);
  color: var(--hp-clr-text);
}

.hp-crumbs__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hp-crumbs__item {
  display: inline-block;
  margin-bottom: var(--hp-sp-1);
}

/* Separator */
.hp-crumbs__item::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent var(--hp-clr-text-secondary);
  margin-right: var(--hp-sp-1);
  vertical-align: middle;
}

.hp-crumbs__item:first-child::before {
  content: none;
}

.hp-crumbs__link {
  color: var(--hp-clr-link);
  font-weight: var(--hp-fw-normal);
  text-decoration: none;
  border-bottom: 1px solid currentColor;  /* 1px border */
  padding-bottom: 1px;                    /* + 1px pad = 2px total */
}

.hp-crumbs__link:hover {
  color: var(--hp-clr-link-hover);
  border-bottom-width: 2px;               /* 2px border */
  padding-bottom: 0;                      /* + 0px pad = 2px total */
}

.hp-crumbs__link:focus {
  color: var(--hp-clr-focus-text);
  background-color: var(--hp-clr-focus);
  box-shadow: 0 -2px var(--hp-clr-focus), 0 4px var(--hp-clr-focus-text);
  border-bottom: none;                    /* 0px border */
  padding-bottom: 2px;                    /* + 2px pad = 2px total */
  outline: none;
}

/* Collapse on mobile */
@media screen and (max-width: 640px) {
  .hp-crumbs__item {
    display: none;
  }
  .hp-crumbs__item:nth-last-child(2) {
    display: inline-block;
  }
  .hp-crumbs__item:nth-last-child(2)::before {
    content: "";
    border-width: 5px 7px 5px 0;
    border-color: transparent var(--hp-clr-text-secondary) transparent transparent;
  }
}


/* --- css/components/_pagination.css --- */
/* ============================================================
 * HPortal Component: Pagination
 * Class: .hp-pag
 *
 * Pagination links use border-bottom (not text-decoration)
 * for consistency with hp-link. To prevent height jump on
 * hover, the total (border + padding-bottom) is kept constant
 * at 3px across all states.
 * ============================================================ */

.hp-pag {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: var(--hp-sp-6);
  font-size: var(--hp-fs-base);
}

/* Prev / Next links — border + padding = 3px in every state. */
.hp-pag__link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: var(--hp-clr-link);
  text-decoration: none;
  font-weight: var(--hp-fw-bold);
  border-bottom: 1px solid currentColor;  /* 1px border */
  padding-bottom: 2px;                    /* + 2px pad = 3px total */
}

.hp-pag__link:hover {
  color: var(--hp-clr-link-hover);
  border-bottom-width: 3px;               /* 3px border */
  padding-bottom: 0;                      /* + 0px pad = 3px total */
  text-decoration: none;
}

.hp-pag__link:focus {
  color: var(--hp-clr-focus-text);
  background-color: var(--hp-clr-focus);
  box-shadow: 0 -2px var(--hp-clr-focus), 0 4px var(--hp-clr-focus-text);
  border-bottom: none;                    /* 0px border */
  padding-bottom: 3px;                    /* + 3px pad = 3px total */
  outline: none;
}

.hp-pag__link--prev .hp-pag__icon {
  margin-right: var(--hp-sp-1);
}

.hp-pag__link--next .hp-pag__icon {
  margin-left: var(--hp-sp-1);
}

.hp-pag__link--next {
  margin-left: auto;
}

/* Arrow icons */
.hp-pag__icon {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
}

.hp-pag__icon--prev {
  border-width: 6px 8px 6px 0;
  border-color: transparent currentColor transparent transparent;
}

.hp-pag__icon--next {
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent currentColor;
}

/* Label text */
.hp-pag__link-title {
  display: block;
  font-size: var(--hp-fs-sm);
  font-weight: var(--hp-fw-normal);
  color: var(--hp-clr-text-secondary);
}

/* Number list (for numbered pagination) */
.hp-pag__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2px;
}

.hp-pag__item {
  min-width: 40px;
  text-align: center;
}

/* Number links */
.hp-pag__number {
  display: block;
  padding: var(--hp-sp-1) var(--hp-sp-2);
  color: var(--hp-clr-link);
  text-decoration: none;
  font-weight: var(--hp-fw-normal);
}

.hp-pag__number:hover {
  background-color: var(--hp-clr-bg-mid);
}

.hp-pag__number:focus {
  color: var(--hp-clr-focus-text);
  background-color: var(--hp-clr-focus);
  outline: none;
}

.hp-pag__item--current .hp-pag__number {
  font-weight: var(--hp-fw-bold);
  border-bottom: 3px solid var(--hp-clr-main);
}

.hp-pag__item--ellipsis {
  padding: var(--hp-sp-1);
  color: var(--hp-clr-text-secondary);
}


/* --- css/components/_notification.css --- */
/* ============================================================
 * HPortal Component: Notification Banner
 * Class: .hp-notif
 * ============================================================ */

.hp-notif {
  padding: var(--hp-sp-3);
  margin-bottom: var(--hp-sp-6);
  border: 5px solid var(--hp-clr-main);
  background-color: var(--hp-clr-off-white);
}

.hp-notif:focus {
  outline: 3px solid var(--hp-clr-focus);
}

.hp-notif__title {
  font-size: var(--hp-fs-md);
  font-weight: var(--hp-fw-bold);
  margin: 0 0 var(--hp-sp-3) 0;
  padding: var(--hp-sp-1) var(--hp-sp-2);
  background-color: var(--hp-clr-main);
  color: var(--hp-clr-white);
  display: inline-block;
}

.hp-notif__content p {
  font-size: var(--hp-fs-base);
  margin-bottom: var(--hp-sp-2);
}

.hp-notif__content p:last-child {
  margin-bottom: 0;
}

/* --- Success variant -------------------------------------- */
.hp-notif--success {
  border-color: var(--hp-clr-green);
}

.hp-notif--success .hp-notif__title {
  background-color: var(--hp-clr-green);
}

/* --- Warning variant -------------------------------------- */
.hp-notif--warning {
  border-color: var(--hp-clr-accent);
}

.hp-notif--warning .hp-notif__title {
  background-color: var(--hp-clr-accent);
  color: var(--hp-clr-focus-text);
}

/* --- Error variant ---------------------------------------- */
.hp-notif--error {
  border-color: var(--hp-clr-red);
}

.hp-notif--error .hp-notif__title {
  background-color: var(--hp-clr-red);
}


/* --- css/components/_error.css --- */
/* ============================================================
 * HPortal Component: Error Message / Error Summary
 * Class: .hp-err, .hp-err-summary
 *
 * Note: Links inside error summary use border-bottom (not
 * text-decoration) for consistency with hp-link. See the
 * link style convention in CONTRIBUTING.md.
 *
 * Anti-jump: total (border-bottom + padding-bottom) is kept
 * constant at 3px across default / hover / focus states.
 * ============================================================ */

/* Inline error message (below form fields) */
.hp-err {
  font-size: var(--hp-fs-base);
  font-weight: var(--hp-fw-bold);
  color: var(--hp-clr-error);
  display: block;
  margin-bottom: var(--hp-sp-3);
  clear: both;
}

/* Em-dash prefix instead of triangle — simpler and clearer */
.hp-err::before {
  content: "\2014\00a0";
}

/* Error summary panel (top of page) */
.hp-err-summary {
  padding: var(--hp-sp-4);
  margin-bottom: var(--hp-sp-6);
  border: 4px solid var(--hp-clr-error);
  color: var(--hp-clr-text);
}

.hp-err-summary:focus {
  outline: 3px solid var(--hp-clr-focus);
}

.hp-err-summary__title {
  font-size: var(--hp-fs-lg);
  font-weight: var(--hp-fw-bold);
  margin: 0 0 var(--hp-sp-3) 0;
}

.hp-err-summary__body p,
.hp-err-summary__body ul {
  margin-bottom: var(--hp-sp-2);
}

.hp-err-summary__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hp-err-summary__list li {
  margin-bottom: var(--hp-sp-1);
}

/* Links inside error summary — border-bottom underline
 * consistent with hp-link (not text-decoration). */
.hp-err-summary__list a {
  color: var(--hp-clr-error);
  font-weight: var(--hp-fw-bold);
  text-decoration: none;
  border-bottom: 1px solid currentColor;  /* 1px border */
  padding-bottom: 2px;                    /* + 2px pad = 3px total */
}

.hp-err-summary__list a:hover {
  color: var(--hp-clr-text);
  border-bottom-width: 3px;               /* 3px border */
  padding-bottom: 0;                      /* + 0px pad = 3px total */
}

.hp-err-summary__list a:focus {
  color: var(--hp-clr-focus-text);
  background-color: var(--hp-clr-focus);
  box-shadow: 0 -2px var(--hp-clr-focus), 0 4px var(--hp-clr-focus-text);
  border-bottom: none;                    /* 0px border */
  padding-bottom: 3px;                    /* + 3px pad = 3px total */
  outline: none;
}


/* --- css/components/_details.css --- */
/* ============================================================
 * HPortal Component: Details (Disclosure)
 * Class: .hp-details
 *
 * Collapsible content block. Works natively with <details>
 * and <summary> elements. JS polyfill available for IE11.
 *
 * Note: The summary link-like underline uses border-bottom
 * (not text-decoration) to avoid descender collision — this
 * is consistent with hp-link. See CONTRIBUTING.md.
 *
 * The total (border-bottom + padding-bottom) is kept at 3px
 * across all states to prevent height jump on hover.
 * ============================================================ */

.hp-details {
  margin-bottom: var(--hp-sp-4);
  font-size: var(--hp-fs-base);
}

.hp-details__summary {
  display: inline-block;
  position: relative;
  padding-left: 25px;
  color: var(--hp-clr-link);
  cursor: pointer;
  font-weight: var(--hp-fw-normal);
  /* border-bottom (not text-decoration) for underline,
   * consistent with hp-link, to prevent descender collision. */
  text-decoration: none;
  border-bottom: 1px solid currentColor;  /* 1px border */
  padding-bottom: 2px;                    /* + 2px pad = 3px total */
}

.hp-details__summary:hover {
  color: var(--hp-clr-link-hover);
  border-bottom-width: 3px;               /* 3px border */
  padding-bottom: 0;                      /* + 0px pad = 3px total */
}

.hp-details__summary:focus {
  color: var(--hp-clr-focus-text);
  background-color: var(--hp-clr-focus);
  box-shadow: 0 -2px var(--hp-clr-focus), 0 4px var(--hp-clr-focus-text);
  outline: none;
  text-decoration: none;
  border-bottom: none;                    /* 0px border */
  padding-bottom: 3px;                    /* + 3px pad = 3px total */
}

/* Triangle indicator — vertically centred with the text */
.hp-details__summary::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 0;
  margin-top: -7px;  /* half of 14px triangle height */
  border-style: solid;
  border-color: transparent;
  border-left-color: currentColor;
  border-width: 7px 0 7px 12px;
}

/* Rotated when open */
.hp-details[open] > .hp-details__summary::before {
  margin-top: -6px;  /* half of 12px triangle height */
  border-left-color: transparent;
  border-top-color: currentColor;
  border-width: 12px 7px 0 7px;
}

/* Remove native marker */
.hp-details__summary::-webkit-details-marker {
  display: none;
}

.hp-details__summary::marker {
  content: none;
}

/* Content area */
.hp-details__text {
  padding: var(--hp-sp-3);
  padding-left: var(--hp-sp-4);
  border-left: 4px solid var(--hp-clr-border-light);
  margin-top: var(--hp-sp-1);
}


/* --- css/components/_tabs.css --- */
/* ============================================================
 * HPortal Component: Tabs
 * Class: .hp-tabs
 *
 * Tabbed interface. Requires hp-tabs.js for interactivity.
 * Progressive enhancement: content stacks without JS.
 * ============================================================ */

.hp-tabs {
  margin-bottom: var(--hp-sp-4);
}

.hp-tabs__title {
  font-size: var(--hp-fs-md);
  font-weight: var(--hp-fw-bold);
  margin-bottom: var(--hp-sp-2);
}

/* Tab list */
.hp-tabs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 2px solid var(--hp-clr-border-light);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.hp-tabs__item {
  margin: 0;
  margin-bottom: -2px;
}

.hp-tabs__tab {
  display: inline-block;
  padding: var(--hp-sp-2) var(--hp-sp-4);
  text-decoration: none;
  color: var(--hp-clr-link);
  font-weight: var(--hp-fw-normal);
  border-bottom: 3px solid transparent;
  margin-bottom: 0;
}

.hp-tabs__tab:hover {
  color: var(--hp-clr-link-hover);
  border-bottom-color: var(--hp-clr-text-secondary);
}

/* Focus state — yellow background + box-shadow ring.
 * No border-bottom needed here; the box-shadow provides
 * a sufficient visual indicator, and showing an additional
 * black border would be redundant. */
.hp-tabs__tab:focus {
  color: var(--hp-clr-focus-text);
  background-color: var(--hp-clr-focus);
  box-shadow: 0 -2px var(--hp-clr-focus), 0 4px var(--hp-clr-focus-text);
  outline: none;
  border-bottom-color: transparent;
}

/* Active / selected tab */
.hp-tabs__item--selected .hp-tabs__tab {
  color: var(--hp-clr-text);
  font-weight: var(--hp-fw-bold);
  border-bottom-color: var(--hp-clr-main);
  background-color: var(--hp-clr-white);
}

/* When a selected tab is also focused, the focus ring takes
 * priority — hide the blue active border to avoid conflict. */
.hp-tabs__item--selected .hp-tabs__tab:focus {
  border-bottom-color: transparent;
}

/* Tab panel */
.hp-tabs__panel {
  padding: var(--hp-sp-4) 0;
}

/* Without JS: show all panels stacked */
.hp-tabs__panel--hidden {
  display: none;
}

/* Mobile: display as stacked headings */
@media screen and (max-width: 640px) {
  .hp-tabs__list {
    display: none;
  }

  .hp-tabs__panel {
    border-bottom: 1px solid var(--hp-clr-border-light);
    padding: var(--hp-sp-3) 0;
  }

  .hp-tabs__panel--hidden {
    display: block;
  }
}


/* --- css/components/_phase-banner.css --- */
/* ============================================================
 * HPortal Component: Phase Banner
 * Class: .hp-phase
 *
 * Shows alpha / beta / prototype status of a service.
 * ============================================================ */

.hp-phase {
  padding: var(--hp-sp-2) 0;
  border-bottom: 1px solid var(--hp-clr-border-light);
  margin-bottom: var(--hp-sp-2);
  font-size: var(--hp-fs-sm);
}

.hp-phase__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.hp-phase__content .hp-tag {
  margin-right: var(--hp-sp-2);
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.hp-phase__text {
  margin: 0;
}


/* --- css/components/_summary-list.css --- */
/* ============================================================
 * HPortal Component: Summary List
 * Class: .hp-sumlist
 *
 * Key-value pairs, often used on check-answers pages.
 * ============================================================ */

.hp-sumlist {
  font-size: var(--hp-fs-base);
  margin-bottom: var(--hp-sp-4);
}

.hp-sumlist__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: var(--hp-sp-2) 0;
  border-bottom: 1px solid var(--hp-clr-border-light);
}

.hp-sumlist__key {
  font-weight: var(--hp-fw-bold);
  width: 30%;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: var(--hp-sp-4);
}

.hp-sumlist__value {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding-right: var(--hp-sp-4);
}

.hp-sumlist__actions {
  text-align: right;
  white-space: nowrap;
}

.hp-sumlist__actions a {
  color: var(--hp-clr-link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.hp-sumlist__actions a:hover {
  color: var(--hp-clr-link-hover);
}

.hp-sumlist__actions a:focus {
  color: var(--hp-clr-focus-text);
  background-color: var(--hp-clr-focus);
  box-shadow: 0 -2px var(--hp-clr-focus), 0 4px var(--hp-clr-focus-text);
  border-bottom: none;
  outline: none;
}

/* Stacked layout for mobile */
@media screen and (max-width: 640px) {
  .hp-sumlist__row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .hp-sumlist__key {
    width: 100%;
    padding-right: 0;
    margin-bottom: var(--hp-sp-1);
  }

  .hp-sumlist__actions {
    text-align: left;
    margin-top: var(--hp-sp-1);
  }
}


/* --- css/components/_inset-text.css --- */
/* ============================================================
 * HPortal Component: Inset Text
 * Class: .hp-inset
 * ============================================================ */

.hp-inset {
  padding: var(--hp-sp-3);
  margin: var(--hp-sp-4) 0;
  border-left: 4px solid var(--hp-clr-border-light);
  clear: both;
}

.hp-inset > *:first-child {
  margin-top: 0;
}

.hp-inset > *:last-child {
  margin-bottom: 0;
}


/* --- css/components/_warning.css --- */
/* ============================================================
 * HPortal Component: Warning Text
 * Class: .hp-warn
 * ============================================================ */

.hp-warn {
  position: relative;
  padding: var(--hp-sp-2) 0 var(--hp-sp-2) 60px;
  margin-bottom: var(--hp-sp-4);
}

.hp-warn__icon {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 35px;
  height: 35px;
  border: 3px solid var(--hp-clr-black);
  border-radius: 50%;
  text-align: center;
  line-height: 29px;
  font-weight: var(--hp-fw-bold);
  font-size: var(--hp-fs-lg);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.hp-warn__text {
  font-weight: var(--hp-fw-bold);
  font-size: var(--hp-fs-base);
}

.hp-warn__assistive {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}


/* --- css/components/_captcha.css --- */
/* ============================================================
 * HPortal Component: Captcha
 * Class: .hp-captcha
 * ============================================================ */

.hp-captcha {
  margin-bottom: var(--hp-sp-4);
}

.hp-captcha__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  gap: var(--hp-sp-2);
}

.hp-captcha__img {
  cursor: pointer;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.hp-captcha__img img {
  display: block;
  height: 40px;
}

.hp-captcha__field {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  min-width: 120px;
}


/* --- css/components/_header.css --- */
/* ============================================================
 * HPortal Component: Header
 * Class: .hp-hdr
 * ============================================================ */

.hp-hdr {
  background: var(--hp-clr-bg-light);
  border-bottom: var(--hp-sp-2) solid var(--hp-clr-main);
}

.hp-hdr__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  max-width: var(--hp-page-width);
  margin: 0 auto;
  padding: 0 var(--hp-sp-3);
  min-height: 60px;
}

@media screen and (min-width: 641px) {
  .hp-hdr__container {
    padding: 0 var(--hp-sp-6);
  }
}

/* Logo */
.hp-hdr__logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-decoration: none;
  padding: var(--hp-sp-2) 0;
  margin-right: auto;
}

.hp-hdr__logo:focus {
  outline: 3px solid var(--hp-clr-focus);
  outline-offset: 2px;
}

.hp-hdr__logo-img {
  height: 40px;
  width: auto;
}

.hp-hdr__logo-text {
  font-weight: var(--hp-fw-bold);
  font-size: var(--hp-fs-lg);
  color: var(--hp-clr-text);
  margin-left: var(--hp-sp-2);
  text-decoration: none;
}

/* Navigation */
.hp-hdr__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.hp-hdr__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.hp-hdr__nav-item {
  margin: 0;
}

.hp-hdr__nav-link {
  display: inline-block;
  padding: var(--hp-sp-4) var(--hp-sp-2);
  font-weight: var(--hp-fw-bold);
  font-size: var(--hp-fs-sm);
  color: var(--hp-clr-text);
  text-decoration: none;
  border-bottom: 4px solid transparent;
}

.hp-hdr__nav-link:hover {
  border-bottom-color: var(--hp-clr-text-secondary);
  color: var(--hp-clr-text-secondary);
}

.hp-hdr__nav-link:focus {
  color: var(--hp-clr-focus-text);
  background-color: var(--hp-clr-focus);
  border-bottom-color: var(--hp-clr-focus-text);
  outline: none;
}

.hp-hdr__nav-link--active,
.hp-hdr__nav-item--active .hp-hdr__nav-link {
  border-bottom-color: var(--hp-clr-main);
}

/* Service name (sits below logo row on some layouts) */
.hp-hdr__service-name {
  font-size: var(--hp-fs-md);
  font-weight: var(--hp-fw-bold);
  color: var(--hp-clr-text);
  text-decoration: none;
  display: block;
  padding: var(--hp-sp-1) 0;
}

.hp-hdr__service-name:hover {
  text-decoration: underline;
}

.hp-hdr__service-name:focus {
  color: var(--hp-clr-focus-text);
  background-color: var(--hp-clr-focus);
  outline: none;
}

/* Mobile menu toggle */
.hp-hdr__menu-btn {
  display: none;
  font-weight: var(--hp-fw-bold);
  font-size: var(--hp-fs-sm);
  padding: var(--hp-sp-1) var(--hp-sp-2);
  background: none;
  border: 1px solid var(--hp-clr-text);
  cursor: pointer;
  color: var(--hp-clr-text);
}

.hp-hdr__menu-btn:focus {
  outline: 3px solid var(--hp-clr-focus);
  outline-offset: 0;
}

@media screen and (max-width: 640px) {
  .hp-hdr__menu-btn {
    display: inline-block;
  }

  .hp-hdr__nav {
    width: 100%;
    display: none !important;
  }

  .hp-hdr__nav-open {
    display: block !important;
  }

  .hp-hdr__nav-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .hp-hdr__nav-link {
    display: block;
    padding: var(--hp-sp-2);
    border-bottom: 1px solid var(--hp-clr-border-light);
  }
}

/* --- Inverted header (dark background) -------------------- */
.hp-hdr--inv {
  background: var(--hp-clr-dark);
  border-bottom-color: var(--hp-clr-accent);
}

.hp-hdr--inv .hp-hdr__logo-text,
.hp-hdr--inv .hp-hdr__service-name,
.hp-hdr--inv .hp-hdr__menu-btn {
  color: var(--hp-clr-white);
}

/* Nav link in inverted header — default colour overridden to white,
 * but focus state MUST win with --hp-clr-focus-text. We split the
 * selector so that the :focus rule below has equal specificity and
 * wins by source order. */
.hp-hdr--inv .hp-hdr__nav-link {
  color: var(--hp-clr-white);
}

/* Focus state — specificity matches the rule above so it wins by
 * cascade order. The colour is --hp-clr-focus-text (black). */
.hp-hdr--inv .hp-hdr__nav-link:focus {
  color: var(--hp-clr-focus-text);
  background-color: var(--hp-clr-focus);
  border-bottom-color: var(--hp-clr-focus-text);
}

.hp-hdr--inv .hp-hdr__menu-btn {
  border-color: var(--hp-clr-white);
}

.hp-hdr--inv .hp-hdr__nav-link:hover {
  color: var(--hp-clr-off-white);
}

/* Active nav link on inverted header — accent bg with dark text
 * so the text remains readable over the yellow highlight. */
.hp-hdr--inv .hp-hdr__nav-item--active .hp-hdr__nav-link {
  border-bottom-color: var(--hp-clr-accent);
  background-color: var(--hp-clr-accent);
  color: var(--hp-clr-focus-text);
}

/* Invert the SVG logo colours on dark header via CSS filter. */
.hp-hdr--inv .hp-hdr__logo-img {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}


/* --- css/components/_footer.css --- */
/* ============================================================
 * HPortal Component: Footer
 * Class: .hp-ftr
 *
 * Anti-jump: total (border-bottom + padding-bottom) is kept
 * constant at 2px across default / hover / focus states.
 *
 * The .hp-ftr__line divider is hidden when there is no
 * .hp-ftr__nav preceding it (first visible child scenario).
 * ============================================================ */

.hp-ftr {
  background-color: var(--hp-clr-bg-light);
  border-top: 1px solid var(--hp-clr-border-light);
  padding: var(--hp-sp-6) 0 var(--hp-sp-4) 0;
  font-size: var(--hp-fs-sm);
  color: var(--hp-clr-text-secondary);
}

.hp-ftr__container {
  max-width: var(--hp-page-width);
  margin: 0 auto;
  padding: 0 var(--hp-sp-3);
}

@media screen and (min-width: 641px) {
  .hp-ftr__container {
    padding: 0 var(--hp-sp-6);
  }
}

/* Navigation links in footer */
.hp-ftr__nav {
  margin-bottom: var(--hp-sp-6);
}

.hp-ftr__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: var(--hp-sp-3);
}

.hp-ftr__link {
  color: var(--hp-clr-link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;  /* 1px border */
  padding-bottom: 1px;                    /* + 1px pad = 2px total */
}

.hp-ftr__link:hover {
  color: var(--hp-clr-link-hover);
  border-bottom-width: 2px;               /* 2px border */
  padding-bottom: 0;                      /* + 0px pad = 2px total */
}

.hp-ftr__link:focus {
  color: var(--hp-clr-focus-text);
  background-color: var(--hp-clr-focus);
  box-shadow: 0 -2px var(--hp-clr-focus), 0 4px var(--hp-clr-focus-text);
  border-bottom: none;                    /* 0px border */
  padding-bottom: 2px;                    /* + 2px pad = 2px total */
  outline: none;
}

/* Divider — hidden when .hp-ftr__nav is absent (i.e. the line
 * is the first child of the container, meaning no nav above). */
.hp-ftr__line {
  background: var(--hp-clr-border-light);
  height: 1px;
  border: 0;
  margin: var(--hp-sp-4) 0;
}

.hp-ftr__line:first-child {
  display: none;
}

/* Meta section (copyright, licence) */
.hp-ftr__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: var(--hp-sp-4);
}

.hp-ftr__logo {
  height: 30px;
  width: auto;
}

.hp-ftr__logo svg {
  height: 100%;
  width: auto;
  fill: var(--hp-clr-text-secondary);
}

.hp-ftr__licence {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.hp-ftr__copyright {
  white-space: nowrap;
}


/* --- css/components/_nav.css --- */
/* ============================================================
 * HPortal Component: Navigation Menu (Dropdown)
 * Class: .hp-nav
 *
 * Sub-navigation panel that opens below the header.
 * ============================================================ */

.hp-nav {
  background-color: var(--hp-clr-bg-mid);
  border-bottom: 5px solid var(--hp-clr-main);
  padding: var(--hp-sp-2) 0;
}

.hp-nav__container {
  max-width: var(--hp-page-width);
  margin: 0 auto;
  padding: 0 var(--hp-sp-3);
}

@media screen and (min-width: 641px) {
  .hp-nav__container {
    padding: 0 var(--hp-sp-6);
  }
}

.hp-nav__section-title {
  font-size: var(--hp-fs-md);
  font-weight: var(--hp-fw-bold);
  margin: var(--hp-sp-2);
}

.hp-nav__menu {
  padding: var(--hp-sp-1);
  margin-bottom: var(--hp-sp-4);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.hp-nav__item {
  padding: var(--hp-sp-1);
  width: 350px;
  max-width: 100%;
}

.hp-nav__item-link {
  display: block;
  font-weight: var(--hp-fw-bold);
  color: var(--hp-clr-link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  margin-bottom: var(--hp-sp-1);
}

.hp-nav__item-link:hover {
  color: var(--hp-clr-link-hover);
}

.hp-nav__item-link:focus {
  color: var(--hp-clr-focus-text);
  background-color: var(--hp-clr-focus);
  box-shadow: 0 -2px var(--hp-clr-focus), 0 4px var(--hp-clr-focus-text);
  border-bottom: none;
  outline: none;
}

.hp-nav__item-desc {
  font-size: var(--hp-fs-sm);
  color: var(--hp-clr-text-secondary);
}

/* Inverted variant */
.hp-nav--inv {
  background-color: var(--hp-clr-accent);
}


/* --- css/components/_widget.css --- */
/* ============================================================
 * HPortal Component: Widget (Image + Place)
 * Class: .hp-widget
 *
 * Lightweight display widgets for images with captions
 * and place/location cards.
 * ============================================================ */

/* --- Image Widget ----------------------------------------- */
.hp-widget-img {
  text-align: center;
  margin-bottom: var(--hp-sp-4);
}

.hp-widget-img img {
  max-width: 100%;
  height: auto;
}

.hp-widget-img__caption {
  color: var(--hp-clr-text-muted);
  font-style: italic;
  font-size: var(--hp-fs-sm);
  margin-top: var(--hp-sp-1);
}

/* --- Place Widget ----------------------------------------- */
.hp-widget-place {
  margin-bottom: var(--hp-sp-4);
}

.hp-widget-place__title-line {
  margin-bottom: var(--hp-sp-1);
}

.hp-widget-place__title {
  font-weight: var(--hp-fw-bold);
}

.hp-widget-place__desc {
  color: var(--hp-clr-text-secondary);
  margin-left: var(--hp-sp-2);
}