/**
 * FunFex site styles for the ja_nova template.
 *
 * Loaded by T4 after template.css and the style CSS (Path::findInTheme('css/custom.css')),
 * so these rules refine the compiled SCSS without editing it. This is also the file the
 * T4 admin "Custom CSS" editor writes to.
 */

/* -------------------------------------------------------------------------
 * Page heading in a section title (t4section chrome).
 * Service landing pages render their h1 as the module title with header_class "h1"
 * (plus a colour class). The chrome uppercases every .section-title, which suits the
 * small section labels but not a page headline.
 * The template caps the title box at 700px, which wraps page headlines and long section
 * headings into three or four lines; 1000px applies to every chrome section title.
 * ------------------------------------------------------------------------ */
.mod-title-wrap {
  max-width: 1000px;
}

.mod-title-wrap h1.section-title {
  text-transform: none;
  margin-bottom: 0;
}

/* Extra Field "Section title" rendered as a heading (main-section-tag): keep normal case
   at every level, and zero margins like the default span's my-0. */
.mod-title-wrap .section-title.main-title {
  text-transform: none;
  margin-top: 0;
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * ACM pricing (tabs) detail list.
 * The template's "50% 50%" columns plus a column gap are wider than the pane, so long
 * items run past its edge. Same two columns, sized to fit. Below 992px the template's
 * own single-column rule still applies.
 * ------------------------------------------------------------------------ */
@media (min-width: 992px) {
  .acm-pricing.style-1 .pricing-plan-list ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.acm-pricing.style-1 .pricing-plan-list p {
  margin-bottom: 1.25rem;
}

/* "landing-tabs" (module class suffix): the pricing layout used as a topic switcher with
 * six tabs. The template sizes tabs for three plans (h3 text, 30px padding and gaps), which
 * makes the tab column far taller than the detail pane. Desktop only: below 1200px the
 * template already turns the tabs into a compact row. */
@media (min-width: 1200px) {
  .landing-tabs .acm-pricing.style-1 .nav-tabs li + li {
    margin-top: 0.75rem;
  }

  .landing-tabs .acm-pricing.style-1 .nav-tabs .nav-link {
    font-size: var(--h4-font-size);
    line-height: 1.3;
    padding: 1.125rem 1.5rem;
  }
}

/* -------------------------------------------------------------------------
 * FAQ Wizard accordion (mod_faqwizard, com_faqwizard, {faqwizard} shortcode).
 * Matches the ja_nova card look: separate rounded cards on the section grey, the open
 * question highlighted in the brand purple, and a round toggle icon. Scoped to the
 * extension's own ids so other Bootstrap accordions are untouched.
 * ------------------------------------------------------------------------ */
.accordion[id^="faq-accordion-"] {
  --t4-accordion-border-width: 0;
  --t4-accordion-bg: transparent;
  --t4-accordion-btn-bg: transparent;
  --t4-accordion-active-bg: transparent;
  --t4-accordion-active-color: var(--color-primary);
  --t4-accordion-btn-focus-box-shadow: none;
  --t4-accordion-btn-padding-x: 1.75rem;
  --t4-accordion-btn-padding-y: 1.375rem;
  --t4-accordion-body-padding-x: 1.75rem;
  --t4-accordion-body-padding-y: 0;
  --t4-accordion-btn-icon-width: 2.25rem;
  --t4-accordion-btn-icon-transform: rotate(-180deg);
  --t4-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235e48db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
  --t4-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
  display: grid;
  gap: 1rem;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.accordion[id^="faq-accordion-"] .accordion-item {
  background-color: #f7f7f7;
  border: 1px solid transparent;
  border-radius: 1rem;
  overflow: hidden;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.accordion[id^="faq-accordion-"] .accordion-item:hover {
  border-color: rgba(94, 72, 219, 0.25);
}

.accordion[id^="faq-accordion-"] .accordion-item:has(.accordion-button:not(.collapsed)) {
  background-color: var(--color-white);
  border-color: rgba(94, 72, 219, 0.35);
  box-shadow: 0 12px 32px rgba(94, 72, 219, 0.1);
}

/* Section already grey (module "light" background, or a grey T4 layout section such as
 * the article pages' bottom-1): white cards so they stay visible. */
.bg-light .accordion[id^="faq-accordion-"] .accordion-item,
.bg-gray-light .accordion[id^="faq-accordion-"] .accordion-item {
  background-color: var(--color-white);
}

.accordion[id^="faq-accordion-"] .accordion-header {
  margin: 0;
}

.accordion[id^="faq-accordion-"] .accordion-button {
  gap: 1rem;
  color: var(--heading-color);
  font-family: var(--heading-font-family);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 1rem;
}

.accordion[id^="faq-accordion-"] .accordion-button:hover {
  color: var(--color-primary);
}

.accordion[id^="faq-accordion-"] .accordion-button:not(.collapsed) {
  box-shadow: none;
}

/* Keyboard focus stays visible after dropping Bootstrap's focus shadow. */
.accordion[id^="faq-accordion-"] .accordion-button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* Round toggle: purple chevron on white, white chevron on purple when open. */
.accordion[id^="faq-accordion-"] .accordion-button::after {
  height: var(--t4-accordion-btn-icon-width);
  border-radius: 50%;
  background-color: var(--color-white);
  background-position: center;
  background-size: 1rem;
  box-shadow: 0 0 0 1px rgba(94, 72, 219, 0.2);
}

.accordion[id^="faq-accordion-"] .accordion-button:not(.collapsed)::after {
  background-color: var(--color-primary);
  box-shadow: none;
}

.accordion[id^="faq-accordion-"] .accordion-body {
  padding-bottom: 1.5rem;
  color: var(--body-text-color);
  line-height: 1.7;
}

.accordion[id^="faq-accordion-"] .accordion-body > :last-child {
  margin-bottom: 0;
}

/* Search box above the accordion (when enabled on the collection). */
.faqwizard-search-wrapper {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.faqwizard-search-wrapper .form-control {
  border-color: var(--border-color);
  border-radius: 999px;
  padding: 0.875rem 1.5rem;
}

.faqwizard-search-wrapper .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.25rem rgba(94, 72, 219, 0.15);
}

@media (max-width: 767.98px) {
  .accordion[id^="faq-accordion-"] {
    --t4-accordion-btn-padding-x: 1.25rem;
    --t4-accordion-btn-padding-y: 1.125rem;
    --t4-accordion-body-padding-x: 1.25rem;
    --t4-accordion-btn-icon-width: 2rem;
  }

  .accordion[id^="faq-accordion-"] .accordion-button {
    font-size: 1rem;
  }
}

/* -------------------------------------------------------------------------
 * Breadcrumb on home-layout pages (service landings, Services, About, Contact).
 * The template pads the breadcrumb only above, so the first section starts right
 * under it. Home itself has no breadcrumb.
 * ------------------------------------------------------------------------ */
.layout-home .t4-breadcrumb .mod-breadcrumbs {
  padding-bottom: 2rem;
}

@media (max-width: 767.98px) {
  .layout-home .t4-breadcrumb .mod-breadcrumbs {
    padding-bottom: 1.25rem;
  }
}

/* -------------------------------------------------------------------------
 * Landing page components (lp-*).
 * mod_custom sections written by the Services Landing 2 seeder, inside the same
 * t4section chrome as the ACM blocks:
 *   .lp-flow     stages joined by arrows (--column: beside the intro, --row: below it)
 *   .lp-journey  numbered channel timeline next to an intro column
 *   .lp-stack    category cards with technology chips
 *   .lp-hub      the site in the middle, connected systems on both sides
 *   .lp-results  intro with a checklist beside a purple panel of metrics
 * Below 992px every component is a single column.
 * ------------------------------------------------------------------------ */
.lp {
  --lp-purple: var(--color-primary, #5e48db);
  --lp-purple-soft: #efedfc;
  --lp-line: rgba(94, 72, 219, 0.3);
  --lp-section-bg: var(--color-white, #fff);
}

.bg-light .lp {
  --lp-section-bg: #f7f7f7;
}

.lp-flow-stages,
.lp-journey,
.lp-stack,
.lp-hub-side,
.lp-chips,
.lp-checks,
.lp-metrics {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Intro: heading, text, button */
.lp-title {
  margin: 0 0 1.5rem;
}

.lp-lead p:last-child {
  margin-bottom: 0;
}

.lp-action {
  margin-top: 2rem;
}

.lp-head {
  row-gap: 0.5rem;
  margin-bottom: 3rem;
}

@media (min-width: 992px) {
  .lp-head .lp-title {
    margin-bottom: 0;
    padding-right: 2rem;
  }
}

/* Card shared by all components: icon, h3, optional tag, text, chips */
.lp-card {
  position: relative;
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background-color: var(--color-white, #fff);
  border: 1px solid rgba(94, 72, 219, 0.12);
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(20, 16, 50, 0.05);
}

.lp-icon {
  display: flex;
  flex: 0 0 3rem;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--lp-purple-soft);
  color: var(--lp-purple);
  font-size: 1.125rem;
}

.lp-item-body {
  min-width: 0;
}

.lp-item-title {
  margin: 0 0 0.375rem;
  font-size: 1.125rem;
  line-height: 1.35;
}

.lp-item-body p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.lp-tag {
  display: inline-block;
  margin-bottom: 0.5rem;
  color: var(--lp-purple);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.875rem;
}

.lp-chips li {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background-color: var(--lp-purple-soft);
  color: var(--lp-purple);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
}

/* Highlighted card (the key stage of a flow) */
.lp-card.is-key {
  background-color: var(--lp-purple);
  border-color: var(--lp-purple);
  box-shadow: 0 16px 40px rgba(94, 72, 219, 0.28);
}

.lp-card.is-key .lp-item-title {
  color: #fff;
}

.lp-card.is-key p {
  color: rgba(255, 255, 255, 0.88);
}

.lp-card.is-key .lp-icon,
.lp-card.is-key .lp-chips li {
  background-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* Flow: cards stacked with a line and an arrow badge between them */
.lp-flow--column .row {
  row-gap: 3rem;
}

.lp-flow-stages {
  display: grid;
  gap: 2.5rem;
}

.lp-flow-stages > li + li::before,
.lp-flow-stages > li + li::after {
  position: absolute;
  left: 50%;
  content: "";
}

.lp-flow-stages > li + li::before {
  top: calc(-2.5rem - 1px);
  width: 2px;
  height: 2.5rem;
  margin-left: -1px;
  background-color: var(--lp-purple);
}

.lp-flow-stages > li + li::after {
  top: -2.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-left: -0.875rem;
  border-radius: 50%;
  background-color: var(--lp-purple);
  box-shadow: 0 0 0 0.25rem var(--lp-section-bg);
  color: #fff;
  font: 900 0.75rem/1 "Font Awesome 5 Free";
  content: "\f078";
}

@media (min-width: 992px) {
  .lp-flow--column .lp-intro {
    padding-right: 2rem;
  }

  /* Row: four stages side by side, arrows pointing right */
  .lp-flow--row .lp-flow-stages {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }

  .lp-flow--row .lp-card {
    flex-direction: column;
  }

  .lp-flow--row .lp-flow-stages > li + li::before {
    top: calc(3rem - 1px);
    left: calc(-2.5rem - 1px);
    width: 2.5rem;
    height: 2px;
    margin-left: 0;
  }

  .lp-flow--row .lp-flow-stages > li + li::after {
    top: 2.125rem;
    left: -2.125rem;
    margin-left: 0;
    content: "\f054";
  }
}

/* Journey: numbered dots on a vertical line */
.lp-journey-wrap .row {
  row-gap: 3rem;
}

.lp-journey {
  position: relative;
  display: grid;
  gap: 1.25rem;
  padding-left: 3.75rem;
  counter-reset: lp-step;
}

.lp-journey::before {
  position: absolute;
  top: 2rem;
  bottom: 2rem;
  left: calc(1.25rem - 1px);
  width: 2px;
  background: linear-gradient(var(--lp-purple), var(--lp-line));
  content: "";
}

.lp-journey > li {
  counter-increment: lp-step;
}

.lp-journey > li::before {
  position: absolute;
  top: 50%;
  left: -3.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-top: -1.25rem;
  border-radius: 50%;
  background-color: var(--lp-purple);
  box-shadow: 0 0 0 0.375rem var(--lp-section-bg);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  content: counter(lp-step, decimal-leading-zero);
}

@media (max-width: 575.98px) {
  .lp-journey {
    padding-left: 2.75rem;
  }

  .lp-journey::before {
    left: calc(1rem - 1px);
  }

  .lp-journey > li::before {
    left: -2.75rem;
    width: 2rem;
    height: 2rem;
    margin-top: -1rem;
    font-size: 0.75rem;
  }
}

@media (min-width: 992px) {
  .lp-journey-wrap .lp-intro {
    padding-right: 2rem;
  }
}

/* Stack: 3 x 3 category grid */
.lp-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.lp-stack .lp-card {
  flex-direction: column;
}

@media (max-width: 991.98px) {
  .lp-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .lp-stack {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Hub: the site as a circle, systems on both sides joined by connector lines */
.lp-hub-map {
  display: grid;
  grid-template-areas: "left core right";
  grid-template-columns: minmax(0, 1fr) 14rem minmax(0, 1fr);
  column-gap: 3rem;
}

.lp-hub-left {
  grid-area: left;
}

.lp-hub-right {
  grid-area: right;
}

.lp-hub-side {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 1.25rem;
}

.lp-hub-core {
  position: relative;
  display: flex;
  grid-area: core;
  align-items: center;
  justify-content: center;
  background: linear-gradient(var(--lp-line), var(--lp-line)) center / 100% 2px no-repeat;
}

/* Vertical bus on each side, from the first card's centre to the last one's */
.lp-hub-core::before,
.lp-hub-core::after {
  position: absolute;
  top: calc((100% - 3.75rem) / 8);
  bottom: calc((100% - 3.75rem) / 8);
  width: 2px;
  background-color: var(--lp-line);
  content: "";
}

.lp-hub-core::before {
  left: 0;
}

.lp-hub-core::after {
  right: 0;
}

.lp-hub-left .lp-card::after,
.lp-hub-right .lp-card::before {
  position: absolute;
  top: 50%;
  width: calc(3rem + 1px);
  height: 2px;
  background-color: var(--lp-line);
  content: "";
}

.lp-hub-left .lp-card::after {
  right: calc(-3rem - 1px);
}

.lp-hub-right .lp-card::before {
  left: calc(-3rem - 1px);
}

.lp-hub-circle {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  width: 12rem;
  height: 12rem;
  padding: 1.5rem;
  border-radius: 50%;
  background-color: var(--lp-purple);
  box-shadow: 0 0 0 0.75rem var(--lp-purple-soft), 0 20px 50px rgba(94, 72, 219, 0.3);
  color: #fff;
  font-family: var(--heading-font-family);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

.lp-hub-circle .lp-icon {
  background-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

@media (max-width: 991.98px) {
  .lp-hub-map {
    grid-template-areas: "core" "left" "right";
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.25rem;
  }

  .lp-hub-core {
    margin-bottom: 1.75rem;
    background: none;
  }

  .lp-hub-core::before,
  .lp-hub-core::after,
  .lp-hub-left .lp-card::after,
  .lp-hub-right .lp-card::before {
    display: none;
  }

  .lp-hub-circle {
    width: 10rem;
    height: 10rem;
    font-size: 1rem;
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .lp-hub-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Results: intro and checklist on the left, the purple metrics panel on the right */
.lp-results .row {
  row-gap: 3rem;
}

@media (min-width: 992px) {
  .lp-results .lp-intro {
    padding-right: 2rem;
  }
}

.lp-checks {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.lp-checks li {
  position: relative;
  padding-left: 2.125rem;
  color: var(--heading-color);
  font-weight: 500;
}

/* Decorative check; the empty alt text keeps screen readers from announcing the glyph. */
.lp-checks li::before {
  position: absolute;
  top: 0.125rem;
  left: 0;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background-color: var(--lp-purple-soft);
  color: var(--lp-purple);
  font: 900 0.625rem/1.375rem "Font Awesome 5 Free";
  text-align: center;
  content: "\f00c";
  content: "\f00c" / "";
}

.lp-panel {
  padding: 2.5rem;
  border-radius: 1.5rem;
  background-color: var(--lp-purple);
  box-shadow: 0 24px 60px rgba(94, 72, 219, 0.3);
  color: #fff;
}

.lp-panel-title {
  margin: 0 0 1.5rem;
  color: #fff;
  font-size: var(--h4-font-size);
  line-height: 1.3;
}

.lp-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

/* Metric cards keep the standard light .lp-card look on the purple panel, without the shadow.
 * The panel's white text colour would otherwise carry into the card text. */
.lp-panel .lp-card {
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  box-shadow: none;
  color: var(--body-text-color);
}

.lp-panel-note {
  margin: 1.5rem 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.9375rem;
}

@media (max-width: 575.98px) {
  .lp-panel {
    padding: 1.5rem;
  }

  .lp-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .lp-panel .lp-card {
    flex-direction: row;
  }
}

/* -------------------------------------------------------------------------
 * Copyright bar: legal links row.
 * mod_menu modules in the "copyright" position (footer menu of each language) with
 * menu class " footer-legal", shown under the copyright line as one centred row that
 * wraps on small screens. Links keep the footer's link colour.
 * T4 wraps the menu in .navbar and gives it .navbar-nav (a column), hence the resets.
 * ------------------------------------------------------------------------ */
.t4-copyright .navbar:has(> .footer-legal) {
  justify-content: center;
  padding: 0;
}

.t4-copyright .footer-legal {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.t4-copyright .footer-legal > li {
  display: flex;
  align-items: center;
}

/* Decorative separator; the empty alt text keeps screen readers from announcing it. */
.t4-copyright .footer-legal > li + li::before {
  margin: 0 0.75rem;
  opacity: 0.5;
  content: "·";
  content: "·" / "";
}

.t4-copyright .footer-legal a {
  padding: 0;
}

/* Phones: the row wraps, and a dot would start the wrapped lines; spacing only. */
@media (max-width: 575.98px) {
  .t4-copyright .footer-legal {
    gap: 0.5rem 1.25rem;
  }

  .t4-copyright .footer-legal > li + li::before {
    display: none;
  }
}

.t4-copyright .footer-legal a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Colour utilities: -light and -dark shades.
 * Extend the template's .text-{name} / .bg-{name} classes (generated from $colors in
 * scss/_typo.scss) with a light and a dark shade of each hue. -light is a 10% tint
 * (10% of the colour on white), the same formula as the template's own purple-light
 * and green-light, which already exist and are not repeated. -dark is a 40% shade
 * (the colour mixed 40% toward black); every -dark has at least 5:1 contrast on
 * white, so it is safe for body text. The -light colours are for dark backgrounds or
 * for use as .bg-*.
 * indigo (#020202 in this theme) and gray (already has -light/-dark) are left out.
 * ------------------------------------------------------------------------ */
.text-blue-light {
  color: #E7F0FF;
}

.text-blue-dark {
  color: #084298;
}

.text-purple-dark {
  color: #382B83;
}

.text-pink-light {
  color: #FBEBF3;
}

.text-pink-dark {
  color: #801F4F;
}

.text-red-light {
  color: #FDEBF0;
}

.text-red-dark {
  color: #8F223E;
}

.text-orange-light {
  color: #FFF2E8;
}

.text-orange-dark {
  color: #984C0C;
}

.text-yellow-light {
  color: #FEF7E7;
}

.text-yellow-dark {
  color: #95670A;
}

.text-green-dark {
  color: #02683E;
}

.text-teal-light {
  color: #E9FAF5;
}

.text-teal-dark {
  color: #13795B;
}

.text-cyan-light {
  color: #EAF9FE;
}

.text-cyan-dark {
  color: #1B7593;
}

.bg-blue-light {
  background-color: #E7F0FF;
}

.bg-blue-dark {
  background-color: #084298;
}

.bg-purple-dark {
  background-color: #382B83;
}

.bg-pink-light {
  background-color: #FBEBF3;
}

.bg-pink-dark {
  background-color: #801F4F;
}

.bg-red-light {
  background-color: #FDEBF0;
}

.bg-red-dark {
  background-color: #8F223E;
}

.bg-orange-light {
  background-color: #FFF2E8;
}

.bg-orange-dark {
  background-color: #984C0C;
}

.bg-yellow-light {
  background-color: #FEF7E7;
}

.bg-yellow-dark {
  background-color: #95670A;
}

.bg-green-dark {
  background-color: #02683E;
}

.bg-teal-light {
  background-color: #E9FAF5;
}

.bg-teal-dark {
  background-color: #13795B;
}

.bg-cyan-light {
  background-color: #EAF9FE;
}

.bg-cyan-dark {
  background-color: #1B7593;
}

/* -------------------------------------------------------------------------
 * Colour utilities: additional hues.
 * New hues alongside the template's $colors utilities, each as a base colour plus
 * -light and -dark, all as .text-* and .bg-*. Same formulas as the section above:
 * -light is a 10% tint, -dark a 40% shade with at least 5:1 contrast on white.
 * Base lime, gold, coral, sky and olive are too light for body text on white (2.0-3.8:1):
 * use them as .bg-* or for large text, and their -dark for body text.
 * ------------------------------------------------------------------------ */
.text-navy {
  color: #1E3A8A;
}

.text-navy-light {
  color: #E8EBF3;
}

.text-navy-dark {
  color: #122353;
}

.text-sky {
  color: #0EA5E9;
}

.text-sky-light {
  color: #E7F6FD;
}

.text-sky-dark {
  color: #08638C;
}

.text-slate {
  color: #64748B;
}

.text-slate-light {
  color: #F0F1F3;
}

.text-slate-dark {
  color: #3C4653;
}

.text-plum {
  color: #8E4585;
}

.text-plum-light {
  color: #F4ECF3;
}

.text-plum-dark {
  color: #552950;
}

.text-magenta {
  color: #C026D3;
}

.text-magenta-light {
  color: #F9E9FB;
}

.text-magenta-dark {
  color: #73177F;
}

.text-coral {
  color: #FF6F61;
}

.text-coral-light {
  color: #FFF1EF;
}

.text-coral-dark {
  color: #99433A;
}

.text-brown {
  color: #A0522D;
}

.text-brown-light {
  color: #F6EEEA;
}

.text-brown-dark {
  color: #60311B;
}

.text-gold {
  color: #D4A017;
}

.text-gold-light {
  color: #FBF6E8;
}

.text-gold-dark {
  color: #7F600E;
}

.text-olive {
  color: #6B8E23;
}

.text-olive-light {
  color: #F0F4E9;
}

.text-olive-dark {
  color: #405515;
}

.text-lime {
  color: #84CC16;
}

.text-lime-light {
  color: #F3FAE8;
}

.text-lime-dark {
  color: #4F7A0D;
}

.bg-navy {
  background-color: #1E3A8A;
}

.bg-navy-light {
  background-color: #E8EBF3;
}

.bg-navy-dark {
  background-color: #122353;
}

.bg-sky {
  background-color: #0EA5E9;
}

.bg-sky-light {
  background-color: #E7F6FD;
}

.bg-sky-dark {
  background-color: #08638C;
}

.bg-slate {
  background-color: #64748B;
}

.bg-slate-light {
  background-color: #F0F1F3;
}

.bg-slate-dark {
  background-color: #3C4653;
}

.bg-plum {
  background-color: #8E4585;
}

.bg-plum-light {
  background-color: #F4ECF3;
}

.bg-plum-dark {
  background-color: #552950;
}

.bg-magenta {
  background-color: #C026D3;
}

.bg-magenta-light {
  background-color: #F9E9FB;
}

.bg-magenta-dark {
  background-color: #73177F;
}

.bg-coral {
  background-color: #FF6F61;
}

.bg-coral-light {
  background-color: #FFF1EF;
}

.bg-coral-dark {
  background-color: #99433A;
}

.bg-brown {
  background-color: #A0522D;
}

.bg-brown-light {
  background-color: #F6EEEA;
}

.bg-brown-dark {
  background-color: #60311B;
}

.bg-gold {
  background-color: #D4A017;
}

.bg-gold-light {
  background-color: #FBF6E8;
}

.bg-gold-dark {
  background-color: #7F600E;
}

.bg-olive {
  background-color: #6B8E23;
}

.bg-olive-light {
  background-color: #F0F4E9;
}

.bg-olive-dark {
  background-color: #405515;
}

.bg-lime {
  background-color: #84CC16;
}

.bg-lime-light {
  background-color: #F3FAE8;
}

.bg-lime-dark {
  background-color: #4F7A0D;
}

/* -------------------------------------------------------------------------
 * Cookie consent banner (plg_system_eprivacy, alert mode).
 * The plugin JS (patched) renders a fixed bottom container with template-native
 * .btn-primary / .btn-outline-primary buttons; this turns the alert into a compact
 * white ja_nova card: text on the left, buttons side by side on the right, no shield
 * icon. Scoped to the plugin's own ids.
 * ------------------------------------------------------------------------ */
#plg_system_eprivacy_alert {
  align-items: center;
  background-color: var(--color-white);
  border: 1px solid rgba(94, 72, 219, 0.25);
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(94, 72, 219, 0.1);
  margin: 0 0 1rem;
  padding: 0.875rem 1.25rem;
}

#plg_system_eprivacy_alert > .col {
  justify-content: center !important;
}

#plg_system_eprivacy_alert h5 {
  font-family: var(--heading-font-family);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--heading-color);
  text-transform: none;
  letter-spacing: normal;
  margin: 0 0 0.25rem;
}

#plg_system_eprivacy_alert p {
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}

#plg_system_eprivacy_alert a {
  color: var(--color-primary);
  font-weight: 600;
}

#plg_system_eprivacy_alert .fa-stack {
  display: none !important;
}

/* Buttons column: auto width, buttons in one row. */
#plg_system_eprivacy_alert > .col-lg-2 {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  flex-direction: row !important;
  gap: 0.5rem;
}

#plg_system_eprivacy_alert .btn {
  margin-top: 0 !important;
  padding: 0.4375rem 1.125rem;
  white-space: nowrap;
}

/* No consent-compatible plugins are installed, so the Details accordion is empty. */
#plg_system_eprivacy_details:not(:has(li)) {
  display: none;
}

@media (max-width: 991.98px) {
  #plg_system_eprivacy_container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  #plg_system_eprivacy_alert {
    margin-bottom: 0.75rem;
    padding: 0.75rem 0.5rem;
  }

  #plg_system_eprivacy_alert > .col,
  #plg_system_eprivacy_alert > .col-lg-2 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  #plg_system_eprivacy_alert > .col-lg-2 {
    margin-top: 0.625rem;
  }

  #plg_system_eprivacy_alert h5 {
    font-size: 1rem;
  }

  #plg_system_eprivacy_alert p {
    font-size: 0.8125rem;
  }
}