:root {
    /* Palette recovered from the legacy Forte/Vertex configuration and
       custom.css.  The configured highlight was d90d3c; the site-specific
       module, breadcrumb and footer overrides used 990a2f/aa0a2f. */
    --forte-red: #d90d3c;
    --forte-red-dark: #990a2f;
    --forte-red-row: #990a2f;
    --forte-ink: #040404;
    --forte-grey: #686868;
    --forte-line: #e0dfdf;
    --forte-soft: #f3f3f3;
    /* Responsive menu start/stop colours from the legacy Vertex settings. */
    --forte-footer: #373737;
    --forte-width: min(96%, 1500px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--forte-ink);
    background: #fff;
    font-family: "PT Sans", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    overflow-x: hidden;
}
a { color: var(--forte-red); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
img { max-width: 100%; height: auto; }
.forte-container, .forte-header__inner { width: var(--forte-width); margin-inline: auto; }
.forte-shell { width: var(--forte-width); min-height: 100vh; margin-inline: auto; background: #fff; }
.forte-skip-link { position: absolute; left: -9999px; top: 0; z-index: 20; padding: .5rem 1rem; background: var(--forte-red); color: #fff; }
.forte-skip-link:focus { left: 1rem; }

/* Header/menu follows the legacy 82px white Shape5 header. */
.forte-header { min-height: 82px; border-bottom: 1px solid var(--forte-line); background: #fff; }
.forte-header__inner { position: relative; display: flex; align-items: center; width: 100%; min-height: 82px; margin-inline: 0; gap: 1rem; }
.forte-brand { flex: 0 0 auto; display: block; margin-left: 40px; line-height: 0; }
.forte-brand img { display: block; width: 270px; height: 82px; object-fit: contain; object-position: left center; }
.forte-header__tools { display: flex; align-items: center; gap: 1rem; margin-left: auto; order: 2; }
.forte-header__tools .forte-module:empty { display: none; }
.forte-nav { order: 1; margin-left: auto; }
.forte-nav ul, .forte-mobile-menu ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.forte-nav li { margin: 0; }
.forte-nav li > a, .forte-nav li > span { display: block; padding: 1.55rem .8rem; color: var(--forte-grey); font-size: .95rem; line-height: 1.2; text-transform: uppercase; }
.forte-nav li.current > a, .forte-nav li.active > a, .forte-nav li > a:hover, .forte-nav li > a:focus { color: #fff; background: var(--forte-red); text-decoration: none; }
.forte-nav--mobile { display: none; }
.forte-nav--mobile summary { cursor: pointer; padding: .6rem 1rem; color: #fff; background: var(--forte-footer); font-weight: 600; text-transform: uppercase; }
.forte-nav--mobile summary::marker { color: var(--forte-red); }
.forte-mobile-menu { padding: .75rem 1rem; background: var(--forte-footer); }
.forte-mobile-menu ul { display: block; }
.forte-mobile-menu li > a, .forte-mobile-menu li > span { display: block; padding: .35rem 0; color: #fff; }

.forte-row { border-bottom: 1px solid var(--forte-line); }
.forte-grid { display: grid; width: 100%; margin-inline: 0; padding: 40px 40px 0; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.forte-grid__item { min-width: 0; padding: 0 5px 25px 0; }
.forte-grid__item > :first-child, .forte-module > :first-child { margin-top: 0; }
.forte-row--top, .forte-row--above-columns, .forte-row--below-columns { background: #fff; }
.forte-custom--top, .forte-custom--bottom { width: 100%; margin-inline: 0; }
.forte-custom--top { padding: 1rem 0; }
.forte-custom--bottom { padding: 2rem 0; }

.forte-breadcrumb-bar { color: #fff; background: var(--forte-red-dark); }
.forte-breadcrumb-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; margin-inline: 0; min-height: 51px; padding: .6rem 40px; }
.forte-breadcrumb { flex: 1 1 auto; min-width: 0; }
.forte-account { flex: 0 1 auto; min-width: 0; }
/* Joomla's breadcrumbs override renders an ordered list (not a ul). Reset
   Bootstrap's float/list defaults so the trail stays one compact row on
   desktop and wraps cleanly on narrow screens. */
.forte-breadcrumb .mod-breadcrumbs__wrapper { min-width: 0; }
.forte-breadcrumb ol,
.forte-breadcrumb ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.forte-breadcrumb li { float: none !important; margin: 0; padding: 0; }
.forte-breadcrumb .mod-breadcrumbs__here,
.forte-breadcrumb .mod-breadcrumbs__divider { display: none; }
.forte-breadcrumb li:not(:last-child)::after { content: "/"; margin-left: .35rem; color: #aaa; }
.forte-breadcrumb a, .forte-breadcrumb .active, .forte-account a { color: #fff; }

/* The legacy site did not expose article metadata, article neighbour links,
   the empty-category diagnostic, or the synthetic visitor counter. Keep the
   content available in the DOM for accessibility/SEO while removing these
   presentation-only remnants from the public layout. */
.forte-content .article-info,
.forte-content .pagenavigation,
.forte-content .com-content-category-blog > .alert.alert-info,
.forte-sidebar .mod-whosonline { display: none !important; }

.forte-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; border-bottom: 1px solid var(--forte-line); }
.forte-layout--left { grid-template-columns: 25% minmax(0, 1fr); }
.forte-layout--right { grid-template-columns: minmax(0, 1fr) 20%; }
.forte-layout--left.forte-layout--right { grid-template-columns: 25% minmax(0, 1fr) 20%; }
.forte-sidebar { min-width: 0; padding: 40px 20px 0 0; }
.forte-sidebar--left { padding-left: 5px; }
.forte-sidebar--right { padding-right: 0; padding-left: 20px; background: #fff; }
.forte-content { min-width: 0; padding: 40px; overflow-x: auto; }
.forte-content .forte-grid { width: 100%; padding: 0; }
.forte-content .forte-row { border: 0; }
.forte-component { min-width: 0; }
.forte-component > :first-child { margin-top: 0; }

.module, .moduletable { margin: 0 0 2rem; }
.module-title, .moduletable h3 { margin: 0 0 1rem; padding: .7rem 1rem; color: #fff; background: var(--forte-red-dark); font-size: 1.1rem; font-weight: 600; line-height: 1.3; }
.forte-sidebar .module, .forte-sidebar .moduletable { padding: 1.25rem; background: var(--forte-soft); }
.forte-sidebar .module-title, .forte-sidebar .moduletable h3 { margin: -1.25rem -1.25rem 1rem; background: var(--forte-red-dark); }
.forte-sidebar ul { padding-left: 1.2rem; }
.btn, .button, button, .readon, .readmore a { display: inline-block; border: 0; border-radius: 30px; padding: .7rem 2.2rem; color: #fff !important; background: var(--forte-red); cursor: pointer; font-size: .9em; line-height: 1.6; text-decoration: none; }
.btn:hover, .button:hover, button:hover, .readon:hover, .readmore a:hover { background: var(--forte-red-dark); text-decoration: none; }
input, textarea, select { max-width: 100%; min-height: 40px; border: 1px solid #dad9d9; padding: .65rem; background: #fff; }
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid var(--forte-line); padding: .5rem; }
.forte-content table { display: block; max-width: 100%; overflow-x: auto; }

.forte-row--footer { color: #fff; background: var(--forte-red-row); border: 0; }
.forte-row--footer .forte-grid { padding-top: 28px; }
.forte-row--footer .forte-grid__item { padding-bottom: 28px; }
.forte-row--footer a, .forte-row--footer .module-title, .forte-row--footer .moduletable h3 { color: #fff; background: transparent; }
.forte-footer { color: #fff; background: var(--forte-red-dark); font-size: .9rem; }
.forte-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.75rem 0; }
.forte-footer a { color: #fff; }
.forte-footer__menu ul { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.forte-scroll-top { position: fixed; right: 1rem; bottom: 1rem; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 0; background: var(--forte-red-dark); }
.legacy-panel { margin: .65rem 0; border: 1px solid #d8d8d8; border-top: 3px solid var(--forte-red); background: #fff; }
.legacy-panel > summary { cursor: pointer; padding: .7rem 1rem; font-weight: 700; color: #222; }
.legacy-panel > summary::marker { color: var(--forte-red); }
.legacy-panel__content { padding: .25rem 1rem 1rem; }
.forte-static-slider img { display: block; width: 100%; height: auto; max-height: 550px; object-fit: cover; }

/* Legacy Forte spacing and type scale. These selectors cover core Joomla
   article/contact/search output without loading the old template styles. */
.forte-row--top .forte-grid,
.forte-row--above-columns .forte-grid,
.forte-row--below-columns .forte-grid,
.forte-row--bottom .forte-grid { padding: 5px; }
.forte-row--footer .forte-grid { padding: 28px; }
.forte-row--footer .forte-grid__item { padding-bottom: 28px; }
.forte-row--above-body .forte-grid__item,
.forte-row--below-body .forte-grid__item,
.forte-row--middle-top .forte-grid__item,
.forte-row--middle-bottom .forte-grid__item { grid-column: 1 / -1; }
/* Editorial rows are full-width within the content column.  The content
   section has horizontal padding, so remove it for the above-body feature
   row; otherwise a six-column grid leaves the feature module needlessly
   narrow even though its grid item spans all columns. */
.forte-row--above-body { margin-inline: -40px; }
.forte-row--above-body .forte-grid { padding-inline: 0; }
/* Vertex calculated a single occupied below-columns position at 100%.
   Forte6 emits only active positions, but keeps a six-column grid class for
   stable row markup; make the sole below-columns slider span that row instead
   of inheriting a 1/6-wide cell. */
.forte-row--below-columns .forte-position-below_columns_2 {
    grid-column: 1 / -1;
    padding-right: 0;
}
.forte-row--below-columns .forte-slider {
    width: 100%;
    max-width: none;
}
.forte-row--below-columns .forte-slide__body {
    max-width: 100%;
    overflow-wrap: anywhere;
}
.forte-row--below-columns .forte-slide__body h3 {
    line-height: 1.3;
}
@media (max-width: 720px) {
  .forte-row--above-body { margin-inline: -20px; }
}
.forte-row, .forte-breadcrumb-bar, .forte-layout, .forte-footer { font-size: .9em; }
.forte-content h1, .forte-content h2 { color: #191919; font-weight: 500; line-height: 1.3; }
.forte-content h1 { font-size: 2em; margin: 0 0 .25rem; }
.forte-content h2 { font-size: 2em; margin: 0 0 1.25rem; }
.forte-content h3 { font-size: 1.8em; line-height: 1.3; }
.module_round_box, .module, .moduletable { min-width: 0; }
.module_round_box, .module { background: #fff; }
.forte-sidebar .module, .forte-sidebar .moduletable { border: 0; }
.forte-sidebar .module-title, .forte-sidebar .moduletable h3 { background: var(--forte-red-dark); }
.forte-custom--bottom { padding: .5rem 20px; }

@media (max-width: 970px) {
    :root { --forte-width: 100%; }
    .forte-header__inner, .forte-container { padding-inline: 20px; }
    .forte-brand { margin-left: 20px; }
    .forte-grid { padding-inline: 20px; }
    .forte-grid__item { padding-right: 20px; }
    .forte-nav li > a, .forte-nav li > span { padding-inline: .55rem; }
}
@media (max-width: 750px) {
    .forte-header__inner { flex-wrap: wrap; justify-content: center; padding-block: 0 .75rem; }
    .forte-brand { margin-left: 0; }
    .forte-brand img { width: 270px; }
    .forte-header__tools { display: none; }
    .forte-nav--desktop { display: none; }
    .forte-nav--mobile { display: block; width: 100%; order: 3; }
    .forte-grid, .forte-layout, .forte-layout--left, .forte-layout--right, .forte-layout--left.forte-layout--right { grid-template-columns: 1fr; }
    .forte-grid { padding-top: 20px; }
    .forte-grid__item { padding: 0 0 20px; }
    .forte-sidebar, .forte-sidebar--left, .forte-sidebar--right, .forte-content { padding: 20px; }
    .forte-breadcrumb-bar__inner, .forte-footer__inner { display: block; padding: .75rem 20px; }
    .forte-account { margin-top: .5rem; }
}

/* Desktop header fidelity.  The legacy template fixed the header at 82px,
   used 20px horizontal menu padding and kept all first-level items on one
   line.  The clean flex layout otherwise lets the last item wrap beside the
   language/search tools, increasing the header to ~136px at 1280px. */
@media (min-width: 971px) {
    .forte-header,
    .forte-header__inner { min-height: 82px; height: 82px; }
    .forte-header { overflow: hidden; }
    .forte-header__inner { align-items: stretch; }
    .forte-nav { flex: 1 1 auto; min-width: 0; margin-left: 0; }
    .forte-nav ul { flex-wrap: nowrap; height: 82px; line-height: 1; }
    .forte-nav li { flex: 0 0 auto; }
    .forte-nav li > a,
    .forte-nav li > span {
        height: 82px;
        padding: 29px 20px 0;
        font-size: .9em;
        font-weight: 600;
        line-height: 1em;
        white-space: nowrap;
    }
    .forte-header__tools {
        flex: 0 0 auto;
        align-self: stretch;
        height: 82px;
        gap: 18px;
        margin-left: 0;
    }
    .forte-language p {
        margin: 0 0 .25rem;
        line-height: 1.15;
    }
    .forte-language ul,
    .forte-search { line-height: 1.15; }
}

/* Post-QA desktop composition.  The first clean header used flex sizing for
   logo, navigation and tools independently.  At 1280px the navigation's
   flex item was allowed to occupy the same visual space as the tools.  A
   three-column grid gives each region an explicit, non-overlapping area while
   preserving the legacy 82px header. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (min-width: 971px) {
    .forte-header__inner {
        display: grid;
        grid-template-columns: 310px minmax(0, 1fr) 290px;
        gap: 0;
        align-items: stretch;
    }
    .forte-brand {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }
    .forte-nav {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        min-width: 0;
    }
    .forte-nav ul {
        width: 100%;
        justify-content: flex-start;
    }
    .forte-header__tools {
        grid-column: 3;
        grid-row: 1;
        justify-content: flex-end;
        width: 290px;
        min-width: 0;
        gap: 12px;
        margin: 0;
    }
    .forte-language {
        width: 95px;
        min-width: 95px;
    }
    .forte-language p { margin: 0; }
    .forte-language ul {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;
        line-height: 1;
    }
    .forte-language li { margin: 0; padding: 0; }
    .forte-search {
        width: 145px;
        min-width: 145px;
        margin: 0;
    }
    .forte-search search,
    .forte-search form { display: block; margin: 0; }
    .forte-search label {
        display: block;
        margin: 0 0 2px;
        font-size: .8rem;
        line-height: 1.1;
    }
    .forte-search input {
        width: 145px;
        min-height: 32px;
        padding: 5px 8px;
        font-size: .8rem;
    }

    /* Keep the login path and its controls usable, but fit them into the
       legacy 51px breadcrumb strip instead of allowing the full vertical
       module to expand the strip to hundreds of pixels. */
    .forte-breadcrumb-bar {
        height: 51px;
        min-height: 51px;
        overflow: hidden;
    }
    .forte-breadcrumb-bar__inner {
        height: 51px;
        min-height: 51px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .forte-account {
        height: 51px;
        max-width: 100%;
        margin-left: auto;
        overflow: hidden;
    }
    .forte-account .mod-login,
    .forte-account .mod-login__userdata {
        display: flex;
        align-items: center;
        height: 51px;
        margin: 0;
        padding: 0;
    }
    .forte-account .mod-login__userdata { gap: 8px; }
    .forte-account .mod-login .form-group,
    .forte-account .mod-login__username,
    .forte-account .mod-login__password,
    .forte-account .mod-login__remember,
    .forte-account .mod-login__submit { margin: 0; }
    .forte-account .mod-login__username .input-group,
    .forte-account .mod-login__password .input-group {
        display: flex;
        align-items: center;
    }
    .forte-account .mod-login input[type="text"],
    .forte-account .mod-login input[type="password"] {
        width: 118px;
        min-height: 32px;
        height: 32px;
        padding: 5px 7px;
        font-size: .78rem;
    }
    .forte-account .mod-login .input-password-toggle {
        width: 32px;
        min-width: 32px;
        height: 32px;
        min-height: 32px;
        padding: 0;
        border-radius: 2px;
    }
    .forte-account .mod-login__remember,
    .forte-account .mod-login__remember .form-check {
        white-space: nowrap;
        font-size: .75rem;
    }
    .forte-account .mod-login__remember input[type="checkbox"] {
        width: auto;
        min-height: 0;
        height: auto;
    }
    .forte-account .mod-login__submit .btn {
        min-height: 32px;
        padding: 4px 12px;
        border-radius: 2px;
        font-size: .78rem;
        line-height: 1.2;
    }
    .forte-account .mod-login__options {
        display: flex;
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;
        white-space: nowrap;
        font-size: .68rem;
        line-height: 1.1;
    }
}

/* Compact tablet variant: preserve a single-line header where there is less
   room, without applying desktop dimensions to phone/mobile breakpoints. */
@media (min-width: 971px) and (max-width: 1100px) {
    .forte-header__inner { grid-template-columns: 290px minmax(0, 1fr) 240px; }
    .forte-header__tools { width: 240px; gap: 8px; }
    .forte-language { width: 76px; min-width: 76px; }
    .forte-search,
    .forte-search input { width: 125px; min-width: 125px; }
    .forte-nav li > a,
    .forte-nav li > span { padding-inline: 8px; font-size: .82em; }
}

/* Undo the fixed desktop strip for phones/tablets so the complete login
   route remains readable and wraps naturally without horizontal overflow. */
@media (max-width: 970px) {
    .forte-breadcrumb-bar {
        height: auto;
        min-height: 51px;
        overflow: visible;
    }
    .forte-breadcrumb-bar__inner {
        height: auto;
        min-height: 51px;
    }
    .forte-account,
    .forte-account .mod-login,
    .forte-account .mod-login__userdata {
        height: auto;
        max-width: 100%;
    }
    .forte-account .mod-login__userdata {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .5rem .75rem;
    }
    .forte-account .mod-login__username,
    .forte-account .mod-login__password {
        flex: 1 1 150px;
        min-width: 0;
    }
    .forte-account .mod-login__remember,
    .forte-account .mod-login__submit {
        flex: 0 0 auto;
        width: auto;
    }
    .forte-account .mod-login__submit .btn { width: auto; }
    .forte-account .mod-login__options {
        flex: 1 1 100%;
        display: flex;
        flex-wrap: wrap;
        gap: .25rem 1rem;
        margin: 0;
        padding: 0;
        white-space: normal;
    }
}