.cms-site-nav {
  background-color: var(--site-nav-bg, #ffffff);
  position: sticky;
  top: 0;
  z-index: var(--site-nav-z-index, 100);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Author-configurable responsive width (mirrors teaser/container width model).
     Defaults to 100% so the nav bar spans its zone as before; authors may narrow
     it per breakpoint. */
  box-sizing: border-box;
  width: var(--cms-w-desktop, 100%);
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .cms-site-nav { width: var(--cms-w-small-desktop, 100%); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cms-site-nav { width: var(--cms-w-tablet, 100%); }
}
@media (max-width: 767px) {
  .cms-site-nav { width: var(--cms-w-mobile, 100%); }
}

.cms-site-nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ---- Header row: logo / title on the left, burger on the right ---- */
.cms-site-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--site-nav-height, 64px);
}

.cms-site-nav-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cms-site-nav-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.cms-site-nav-logo {
  height: 40px;
  width: auto;
  object-fit: contain;
}

.cms-site-nav-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: inherit;
}

/* ---- Menu bar: sits on its own row below the header ---- */
.cms-site-nav-menu {
  border-top: 1px solid var(--site-nav-border-color, rgba(0, 0, 0, 0.08));
}

.cms-site-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.cms-site-nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.cms-site-nav-link,
.cms-site-nav-sublink {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--site-nav-link-color, inherit);
  text-decoration: none;
  font-weight: 500;
  line-height: 1.2;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.cms-site-nav-link {
  padding: 0.85rem 1.1rem;
}

/* Grouping labels have no link of their own — they only reveal a dropdown. Keep
   the text unselectable and show a default cursor on desktop (where hover opens
   the submenu); on mobile the whole label is a tap target that drills in. */
.cms-site-nav-group {
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}
.cms-site-nav-item.has-children > .cms-site-nav-group,
.cms-site-nav-subitem.has-children > .cms-site-nav-group {
  cursor: pointer;
}

/* When an item has a submenu the link sits beside a chevron toggle button, so
   tighten the link's right padding to keep the caret near the text. */
.cms-site-nav-item.has-children > .cms-site-nav-link {
  padding-right: 0.4rem;
}

.cms-site-nav-item:hover > .cms-site-nav-link,
.cms-site-nav-link:focus-visible {
  color: var(--site-nav-link-hover-color, var(--color-primary, #0066cc));
  background-color: var(--site-nav-hover-bg, rgba(0, 0, 0, 0.04));
}

.cms-site-nav-link.active,
.cms-site-nav-sublink.active {
  color: var(--site-nav-link-hover-color, var(--color-primary, #0066cc));
  font-weight: 600;
}

/* Chevron toggle button — the only control that opens a submenu. On desktop the
   dropdowns still open on hover so this is mainly a visual affordance; on mobile
   it is what drills into the submenu, while the link itself always navigates. */
.cms-site-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  padding: 0 0.85rem;
}

.cms-site-nav-toggle:focus-visible {
  outline: 2px solid var(--site-nav-link-hover-color, var(--color-primary, #0066cc));
  outline-offset: -2px;
}

/* Caret: a small rotated square that reads as a chevron. Default points down
   (top-level dropdown); the `-end` modifier points right (sub-item flyout). */
.cms-site-nav-caret {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -0.15rem;
  opacity: 0.7;
}

.cms-site-nav-caret-end {
  transform: rotate(-45deg);
  margin-top: 0;
}

/* ---- Dropdown boxes (each level is its own bordered, shadowed box) ---- */
.cms-site-nav-submenu {
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--site-nav-dropdown-bg, #ffffff);
  border: 1px solid var(--site-nav-border-color, rgba(0, 0, 0, 0.12));
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}

/* Open a level-one dropdown when hovering its top-level item. Because the box
   sits directly beneath the item (top:100%) there is no gap, so moving the
   pointer away closes it (pure :hover). */
.cms-site-nav-item:hover > .cms-site-nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.cms-site-nav-subitem {
  position: relative;
  display: flex;
  align-items: center;
}

.cms-site-nav-sublink {
  flex: 1 1 auto;
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  white-space: nowrap;
}

.cms-site-nav-subitem:hover > .cms-site-nav-sublink {
  color: var(--site-nav-link-hover-color, var(--color-primary, #0066cc));
  background-color: var(--site-nav-hover-bg, rgba(0, 0, 0, 0.05));
}

/* Third level opens to the right of the current menu, as its own box. */
.cms-site-nav-submenu-flyout {
  top: -0.35rem;
  left: 100%;
  margin-left: 0.25rem;
  transform: translateX(4px);
}

.cms-site-nav-subitem:hover > .cms-site-nav-submenu-flyout {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Back rows only appear in the mobile drill-down. */
.cms-site-nav-back {
  display: none;
}

/* ---- Burger (hidden on desktop) ---- */
.cms-site-nav-burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: inherit;
}

.cms-site-nav-burger-line {
  width: 24px;
  height: 2px;
  background-color: currentColor;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
  .cms-site-nav-burger {
    display: flex;
  }

  /* The menu becomes a full-screen overlay that slides in from the right and
     takes over the viewport below the header. */
  .cms-site-nav-menu {
    position: fixed;
    top: var(--site-nav-height, 64px);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--site-nav-height, 64px));
    background: var(--site-nav-mobile-bg, #ffffff);
    border-top: none;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow: hidden;
    z-index: var(--site-nav-z-index, 100);
  }

  .cms-site-nav-menu.open {
    transform: translateX(0);
  }

  /* With JS enabled each list/submenu is a full-screen sliding panel. The root
     list is visible; opening a parent slides its child panel in from the right,
     ON TOP of the panel it came from (which stays in place). Because the panels
     are nested in the DOM, a child paints above its parent automatically — so we
     must NOT translate the previous panel (doing so would drag the active child
     off-screen with it and leave the menu blank). Without JS the lists simply
     stack and scroll (graceful fallback). */
  .cms-site-nav.cms-nav-js .cms-site-nav-list,
  .cms-site-nav.cms-nav-js .cms-site-nav-submenu {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: var(--site-nav-mobile-bg, #ffffff);
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 1;
    visibility: visible;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
  }

  /* Root list is the base panel — always in view underneath. */
  .cms-site-nav.cms-nav-js .cms-site-nav-list {
    transform: translateX(0);
  }

  /* An opened submenu slides in and covers the panel it came from. */
  .cms-site-nav.cms-nav-js .cms-site-nav-submenu.is-active {
    transform: translateX(0);
  }

  .cms-site-nav-item,
  .cms-site-nav-subitem {
    position: static;
    align-items: stretch;
  }

  .cms-site-nav-link,
  .cms-site-nav-sublink {
    flex: 1 1 auto;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--site-nav-border-color, rgba(0, 0, 0, 0.08));
    font-size: 1.05rem;
  }

  /* Full padding again on mobile (the desktop caret-hugging override is undone),
     because the chevron now lives in its own toggle button beside the link. */
  .cms-site-nav-item.has-children > .cms-site-nav-link {
    padding-right: 1.25rem;
  }

  /* The chevron toggle is a wide, easy tap target on its own, separated from the
     link so tapping the label navigates and only the chevron opens the submenu. */
  .cms-site-nav-toggle {
    flex: 0 0 auto;
    min-width: 3.5rem;
    padding: 0 1rem;
    border-bottom: 1px solid var(--site-nav-border-color, rgba(0, 0, 0, 0.08));
    border-left: 1px solid var(--site-nav-border-color, rgba(0, 0, 0, 0.08));
  }

  /* All carets read as a right chevron in the drill-down (they open a panel). */
  .cms-site-nav-caret {
    transform: rotate(-45deg);
    margin-top: 0;
    opacity: 0.6;
  }

  /* Back row at the top of every sub-panel. */
  .cms-site-nav-back {
    display: block;
  }

  .cms-site-nav-back-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.9rem 1.25rem;
    background: var(--site-nav-hover-bg, rgba(0, 0, 0, 0.04));
    border: none;
    border-bottom: 1px solid var(--site-nav-border-color, rgba(0, 0, 0, 0.08));
    font-weight: 600;
    font-size: 1rem;
    color: inherit;
    cursor: pointer;
    text-align: left;
  }

  .cms-site-nav-back-btn::before {
    content: "";
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
  }

  .cms-site-nav-burger[aria-expanded="true"] .cms-site-nav-burger-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .cms-site-nav-burger[aria-expanded="true"] .cms-site-nav-burger-line:nth-child(2) {
    opacity: 0;
  }

  .cms-site-nav-burger[aria-expanded="true"] .cms-site-nav-burger-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}

/* Prevent background scroll while the mobile menu overlay is open. */
body.cms-nav-no-scroll {
  overflow: hidden;
}


/*
 * Container component.
 *
 * A container occupies a configurable percentage of the available width at each
 * breakpoint. Multiple containers placed in the same zone render *beside each
 * other* (like the editor's base container columns): because the box uses
 * `box-sizing: border-box`, the padding is drawn inside the declared width, so
 * two 50% containers — even with padding — still sit on a single row and total
 * 100% of the row.
 *
 * Widths are keyed off `.cms-container` (the base class the template always
 * emits) so nested containers naturally compute width relative to their parent:
 * a 50% container inside a 50% parent occupies 25% of the viewport. The
 * `.cms-instance-container` alias below preserves the old rule so the publisher-
 * wrapped output (which also adds that class) keeps working.
 */

/* The container root — `inline-flex` so the container itself still packs side
   by side with sibling containers (inline-level, like the old inline-block),
   while laying its own columns out as a flex row. Using flexbox for the columns
   (instead of inline-block) avoids the sub-pixel rounding trap where two columns
   whose widths total exactly 100% (e.g. 25% + 75%) overflow the line by a
   fraction of a pixel and wrap the last column underneath the first. `flex-wrap`
   preserves the intended cascade: columns that genuinely total MORE than 100%
   (e.g. 100% + 100% on mobile) still wrap onto the next line and stack. Width
   comes from the per-breakpoint custom properties set inline on this element. */
.cms-container {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-start;
  vertical-align: top;
  box-sizing: border-box;
  width: var(--cms-container-w-desktop, 100%);
  /* Optional background colour driven by the inline --cms-container-bg custom
     property (set from the dialog's Background Color field). Defaults to
     transparent when no colour is configured. */
  background-color: var(--cms-container-bg, transparent);
}

/* Legacy alias: the publisher also tags each container's root with
   `cms-instance-container`. Keep the flex/width rules here so any historically-
   authored CSS or wrapper markup that relies on this class keeps working. */
.cms-instance-container {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-start;
  vertical-align: top;
  box-sizing: border-box;
  width: var(--cms-container-w-desktop, 100%);
}

/*
 * Optional centered layout.
 *
 * When the author ticks "Center Container" in the container dialog the template
 * emits `cms-container-center-true`; the class-per-value pattern avoids nested
 * {{#ifEquals}} blocks which the template engine can't parse. Centered
 * containers render as a block with auto side-margins so they sit in the middle
 * of the parent's content width (which is what "centered" means when the
 * container is narrower than 100%). This deliberately breaks the inline-block
 * containers stack vertically instead. `display: flex` (block-level flex) is
 * used rather than plain `block` so the container keeps laying its columns out
 * as a flex row while the auto side-margins centre the block within its parent.
 */
.cms-container-center-true {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-left: auto;
  margin-right: auto;
}

/*
 * Full-width background bleed.
 *
 * When the author picks "Full width" for Background Width, the container is
 * tagged with `cms-container-bleed-full`. The container itself keeps its
 * configured width so the authored content stays constrained, but a positioned
 * pseudo element paints the background colour edge-to-edge across the viewport
 * (100vw) behind the content. The negative z-index keeps the band behind the
 * content.
 */
.cms-container-bleed-full {
  position: relative;
  /* The bleed band supplies the colour; keep the box itself transparent so the
     colour isn't drawn twice. */
  background-color: transparent;
}

.cms-container-bleed-full::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background-color: var(--cms-container-bg, transparent);
}

/*
 * Container columns. Each authored column is wrapped in its own
 * `.cms-container__column` element inside the container. The container is a
 * flex row (see `.cms-container` above) so each column is a flex item whose
 * per-breakpoint width comes from custom properties set inline on it (derived
 * from the editor's 12-unit grid spans). `flex: 0 0 <width>` (no grow, no
 * shrink) plus a matching `max-width` makes each column occupy exactly its
 * configured fraction; because flexbox lays them out against the same content
 * box, columns that total exactly 100% (e.g. 25% + 75%) always share one row
 * without the sub-pixel overflow that used to wrap the last column underneath.
 */
.cms-container__column {
  flex: 0 0 var(--col-w-desktop, 100%);
  max-width: var(--col-w-desktop, 100%);
  box-sizing: border-box;
  /* Column indent is a symmetric horizontal inset: the same amount is applied
     to the left AND right so the column's content is centred within its track
     rather than only pushed rightward. Because the box is border-box the
     padding is drawn inside the declared width, so columns still pack tightly. */
  padding-left: var(--col-pl-desktop, 0);
  padding-right: var(--col-pl-desktop, 0);
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .cms-container__column {
    flex-basis: var(--col-w-small-desktop, 100%);
    max-width: var(--col-w-small-desktop, 100%);
    padding-left: var(--col-pl-small-desktop, 0);
    padding-right: var(--col-pl-small-desktop, 0);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .cms-container__column {
    flex-basis: var(--col-w-tablet, 100%);
    max-width: var(--col-w-tablet, 100%);
    padding-left: var(--col-pl-tablet, 0);
    padding-right: var(--col-pl-tablet, 0);
  }
}

@media (max-width: 767px) {
  .cms-container__column {
    flex-basis: var(--col-w-mobile, 100%);
    max-width: var(--col-w-mobile, 100%);
    padding-left: var(--col-pl-mobile, 0);
    padding-right: var(--col-pl-mobile, 0);
  }
}

/* Padding variations — applied on all sides, inside the width (border-box). */
.cms-container-padding-none {
  padding: 0;
}
.cms-container-padding-sm {
  padding: var(--container-padding-sm, 0.5rem);
}
.cms-container-padding-md {
  padding: var(--container-padding-md, 1rem);
}
.cms-container-padding-lg {
  padding: var(--container-padding-lg, 2rem);
}

/*
 * Container indent — symmetric horizontal inset that shifts the container's
 * content inward from both edges while the container itself keeps its
 * configured width. Explicit `padding-left` + `padding-right` longhands are
 * used (rather than the `padding-inline` logical shorthand) so the values
 * reliably override the horizontal components of the `padding` shorthand set
 * by the padding classes above in every browser, without relying on
 * physical-vs-logical cascade ordering. The vertical padding from the padding
 * class is left untouched, so the visible content block stays horizontally
 * centered inside the container while keeping its top/bottom spacing.
 */
.cms-container-indent-none {
  /* No-op: leave the padding class's horizontal values in effect. */
}
.cms-container-indent-sm {
  padding-left: var(--container-indent-sm, 1rem);
  padding-right: var(--container-indent-sm, 1rem);
}
.cms-container-indent-md {
  padding-left: var(--container-indent-md, 2rem);
  padding-right: var(--container-indent-md, 2rem);
}
.cms-container-indent-lg {
  padding-left: var(--container-indent-lg, 4rem);
  padding-right: var(--container-indent-lg, 4rem);
}

/* Per-breakpoint container widths. Keyed off .cms-container so the width takes
   effect regardless of whether the publisher's wrapper class is present. */

/* Small desktop */
@media (min-width: 1024px) and (max-width: 1279px) {
  .cms-container,
  .cms-instance-container {
    width: var(--cms-container-w-small-desktop, 100%);
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .cms-container,
  .cms-instance-container {
    width: var(--cms-container-w-tablet, 100%);
  }
}

/* Mobile: containers take their configured mobile width (default 100% = stack) */
@media (max-width: 767px) {
  .cms-container,
  .cms-instance-container {
    width: var(--cms-container-w-mobile, 100%);
  }
}

.cms-title {
  color: var(--title-color, inherit);
  font-family: var(--title-font-family, inherit);
  margin-bottom: var(--title-margin-bottom, 1rem);
  margin-top: 0;
  line-height: 1.2;
  /* Author-configurable responsive width (mirrors teaser/container width model).
     Rendered inline-block so multiple width-constrained components in the same
     zone pack side by side; a full-width (default 100%) component still occupies
     its own row. */
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  width: var(--cms-w-desktop, 100%);
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .cms-title { width: var(--cms-w-small-desktop, 100%); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cms-title { width: var(--cms-w-tablet, 100%); }
}
@media (max-width: 767px) {
  .cms-title { width: var(--cms-w-mobile, 100%); }
}

/* Responsive font sizes based on heading level */
.cms-title {
  font-size: 2rem;
  font-weight: 700;
}

/* Adjust sizes for different heading levels */
h1.cms-title {
  font-size: 2.5rem;
}

h2.cms-title {
  font-size: 2rem;
}

h3.cms-title {
  font-size: 1.75rem;
}

h4.cms-title {
  font-size: 1.5rem;
}

h5.cms-title {
  font-size: 1.25rem;
}

h6.cms-title {
  font-size: 1rem;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  h1.cms-title {
    font-size: 2rem;
  }

  h2.cms-title {
    font-size: 1.75rem;
  }

  h3.cms-title {
    font-size: 1.5rem;
  }

  h4.cms-title {
    font-size: 1.25rem;
  }

  h5.cms-title {
    font-size: 1.125rem;
  }

  h6.cms-title {
    font-size: 1rem;
  }
}

.cms-richtext {
  color: var(--richtext-color, inherit);
  font-size: var(--richtext-font-size, 1rem);
  line-height: var(--richtext-line-height, 1.6);
  padding: var(--richtext-padding, 0);
  /* Author-configurable responsive width (mirrors teaser/container width model).
     Rendered inline-block so multiple width-constrained components in the same
     zone pack side by side; a full-width (default 100%) component still occupies
     its own row. */
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  width: var(--cms-w-desktop, 100%);
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .cms-richtext { width: var(--cms-w-small-desktop, 100%); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cms-richtext { width: var(--cms-w-tablet, 100%); }
}
@media (max-width: 767px) {
  .cms-richtext { width: var(--cms-w-mobile, 100%); }
}

/* Link styles */
.cms-richtext a:not(.btn) {
  color: var(--richtext-link-color, var(--color-primary, #0066cc));
  text-decoration: underline;
}

.cms-richtext a:not(.btn):hover {
  text-decoration: none;
}

/* Button-styled link base styles */
.cms-richtext .btn {
  display: inline-block;
  padding: var(--richtext-btn-padding, 0.5rem 1rem);
  border-radius: var(--richtext-btn-border-radius, 4px);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 2px solid transparent;
}

/* Primary button style */
.cms-richtext .btn-primary {
  background-color: var(--richtext-btn-primary-bg, var(--color-primary, #0066cc));
  color: var(--richtext-btn-primary-color, #ffffff);
}

.cms-richtext .btn-primary:hover {
  opacity: 0.9;
}

/* Secondary button style */
.cms-richtext .btn-secondary {
  background-color: var(--richtext-btn-secondary-bg, var(--color-secondary, #6c757d));
  color: var(--richtext-btn-secondary-color, #ffffff);
}

.cms-richtext .btn-secondary:hover {
  opacity: 0.9;
}

/* Outline button style */
.cms-richtext .btn-outline {
  background-color: transparent;
  border-color: var(--richtext-btn-outline-border, var(--color-primary, #0066cc));
  color: var(--richtext-btn-outline-color, var(--color-primary, #0066cc));
}

.cms-richtext .btn-outline:hover {
  background-color: var(--richtext-btn-outline-border, var(--color-primary, #0066cc));
  color: var(--richtext-btn-primary-color, #ffffff);
}

/* Typography elements */
.cms-richtext h1,
.cms-richtext h2,
.cms-richtext h3,
.cms-richtext h4,
.cms-richtext h5,
.cms-richtext h6 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.3;
  font-weight: 600;
}

.cms-richtext h1 { font-size: 2em; }
.cms-richtext h2 { font-size: 1.75em; }
.cms-richtext h3 { font-size: 1.5em; }
.cms-richtext h4 { font-size: 1.25em; }
.cms-richtext h5 { font-size: 1.125em; }
.cms-richtext h6 { font-size: 1em; }

.cms-richtext p {
  margin-bottom: 1em;
}

/* List styles */
.cms-richtext ul,
.cms-richtext ol {
  margin-bottom: 1em;
  padding-left: 2em;
}

.cms-richtext li {
  margin-bottom: 0.5em;
}

/* Blockquote styles */
.cms-richtext blockquote {
  margin: 1.5em 0;
  padding: 1em 1.5em;
  border-left: 4px solid var(--richtext-link-color, var(--color-primary, #0066cc));
  background-color: rgba(0, 0, 0, 0.03);
  font-style: italic;
}

/* Horizontal rule */
.cms-richtext hr {
  margin: 2em 0;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Inline code */
.cms-richtext code {
  font-family: var(--richtext-code-font, ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace);
  font-size: 0.9em;
  background-color: var(--richtext-code-bg, rgba(0, 0, 0, 0.06));
  color: var(--richtext-code-color, inherit);
  padding: 0.15em 0.35em;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Code block (preformatted) */
.cms-richtext pre {
  font-family: var(--richtext-code-font, ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace);
  font-size: 0.9em;
  line-height: 1.5;
  background-color: var(--richtext-pre-bg, #1e1e1e);
  color: var(--richtext-pre-color, #f8f8f2);
  padding: 1em 1.25em;
  margin: 1.5em 0;
  border-radius: 6px;
  overflow-x: auto;
  white-space: pre;
}

/* A <code> inside a <pre> is a plain span of the block, not a pill. */
.cms-richtext pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
  border-radius: 0;
}

/* Highlighted text */
.cms-richtext mark {
  background-color: var(--richtext-mark-bg, #fff3a3);
  color: var(--richtext-mark-color, inherit);
  padding: 0.05em 0.15em;
  border-radius: 2px;
}

/* Subscript / superscript (keep the line height stable) */
.cms-richtext sub,
.cms-richtext sup {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

.cms-richtext sup {
  top: -0.5em;
}

.cms-richtext sub {
  bottom: -0.25em;
}

/* Image styles */
.cms-richtext img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1em 0;
}

/* Text formatting */
.cms-richtext strong {
  font-weight: 700;
}

.cms-richtext em {
  font-style: italic;
}

.cms-richtext u {
  text-decoration: underline;
}

.cms-richtext s {
  text-decoration: line-through;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .cms-richtext {
    font-size: 0.9375rem;
  }

  .cms-richtext h1 { font-size: 1.75em; }
  .cms-richtext h2 { font-size: 1.5em; }
  .cms-richtext h3 { font-size: 1.375em; }
  .cms-richtext h4 { font-size: 1.25em; }
  .cms-richtext h5 { font-size: 1.125em; }
  .cms-richtext h6 { font-size: 1em; }

  .cms-richtext .btn {
    display: block;
    text-align: center;
    margin: 0.5em 0;
  }
}

.cms-table-wrapper {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  width: var(--cms-w-desktop, 100%);
  margin-bottom: var(--table-margin-bottom, 1.5rem);
  overflow-x: auto;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .cms-table-wrapper { width: var(--cms-w-small-desktop, 100%); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cms-table-wrapper { width: var(--cms-w-tablet, 100%); }
}
@media (max-width: 767px) {
  .cms-table-wrapper { width: var(--cms-w-mobile, 100%); }
}

.cms-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--table-font-family, inherit);
  color: var(--table-color, inherit);
  background-color: var(--table-bg, transparent);
  font-size: var(--table-font-size, 1rem);
}

.cms-table__caption {
  caption-side: top;
  text-align: left;
  padding: var(--table-caption-padding, 0.5rem 0);
  font-size: var(--table-caption-font-size, 0.875rem);
  color: var(--table-caption-color, #555555);
  font-style: italic;
}

.cms-table__head {
  background-color: var(--table-head-bg, #f5f5f5);
  color: var(--table-head-color, inherit);
}

.cms-table__top-title,
.cms-table__side-title {
  font-weight: 600;
  text-align: left;
  padding: var(--table-cell-padding, 0.5rem 0.75rem);
  border: var(--table-border, 1px solid #e0e0e0);
}

.cms-table__side-title {
  background-color: var(--table-side-title-bg, #f9f9f9);
}

.cms-table__corner {
  padding: var(--table-cell-padding, 0.5rem 0.75rem);
  border: var(--table-border, 1px solid #e0e0e0);
  background-color: var(--table-head-bg, #f5f5f5);
}

.cms-table__cell {
  padding: var(--table-cell-padding, 0.5rem 0.75rem);
  border: var(--table-border, 1px solid #e0e0e0);
  vertical-align: top;
}

.cms-table__row:nth-child(even) .cms-table__cell {
  background-color: var(--table-row-alt-bg, transparent);
}

/* Every title and cell renders rich-text HTML (paragraphs, lists, links,
 * icons, brand styles). Trim the outer margins of the first/last block-level
 * children so single-paragraph values still sit flush against the cell
 * padding while multi-block content keeps its normal rhythm. */
.cms-table__top-title > *:first-child,
.cms-table__side-title > *:first-child,
.cms-table__cell > *:first-child { margin-top: 0; }
.cms-table__top-title > *:last-child,
.cms-table__side-title > *:last-child,
.cms-table__cell > *:last-child { margin-bottom: 0; }

/* Nested lists inside a cell should keep their bullets/numbers visible even
 * when a site-wide reset removes list-style from the default `ul`/`ol`. */
.cms-table__cell ul,
.cms-table__side-title ul { list-style: disc inside; padding-left: 0.25rem; }
.cms-table__cell ol,
.cms-table__side-title ol { list-style: decimal inside; padding-left: 0.25rem; }

@media (max-width: 767px) {
  .cms-table {
    font-size: var(--table-font-size-mobile, 0.875rem);
  }
  .cms-table__cell,
  .cms-table__top-title,
  .cms-table__side-title,
  .cms-table__corner {
    padding: var(--table-cell-padding-mobile, 0.375rem 0.5rem);
  }
}

/* Tabs component styles.
 *
 * Renders a horizontal tab bar (role="tablist") above a single visible panel
 * (role="tabpanel"). The active tab uses the theme's primary background so it
 * reads as selected; inactive tabs are transparent buttons. Panels other than
 * the active one are hidden via the `hidden` attribute (native, no CSS
 * needed) — the [hidden] rule below is a safety net for older UAs. */

.cms-tabs {
  display: block;
  width: 100%;
}

.cms-tabs__tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid var(--color-border, #d1d5db);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cms-tabs__tab {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
  color: var(--color-text, #374151);
  cursor: pointer;
  font: inherit;
  padding: 0.5rem 0.875rem;
  margin-bottom: -1px;
}

.cms-tabs__tab:hover {
  color: var(--color-text-strong, #111827);
}

.cms-tabs__tab[aria-selected='true'] {
  background: var(--color-background1, #ffffff);
  border-color: var(--color-border, #d1d5db);
  color: var(--color-text-strong, #111827);
  font-weight: 500;
}

.cms-tabs__tab:focus-visible {
  outline: 2px solid var(--color-primary, #2563eb);
  outline-offset: 2px;
}

.cms-tabs__panel {
  padding: 1rem 0;
}

.cms-tabs__panel[hidden] {
  display: none !important;
}

.cms-teaser {
  background-color: var(--teaser-bg, transparent);
  border-radius: var(--teaser-border-radius, 0);
  padding: var(--teaser-padding, 1rem);
  /* inline-flex (rather than flex) so multiple width-constrained teasers flow
     onto the same row and wrap, instead of each block taking a full line. */
  display: inline-flex;
  vertical-align: top;
  gap: 1rem;
  overflow: hidden;
  box-sizing: border-box;
  /* Author-configurable width as a percentage of the container (25–100%).
     Desktop-first: the base value is the desktop width; narrower breakpoints
     override below. Defaults to 100% when unset. */
  width: var(--teaser-width-desktop, 100%);
}

/*
 * Equal-height rows.
 *
 * The teaser element itself is `display: inline-flex` so several width-
 * constrained teasers on the same line wrap naturally via inline layout.
 * Inline layout does not equalise sibling heights though, so the moment two
 * teasers sit next to each other their content boxes end up at different
 * heights.
 *
 * When a parent element directly contains two or more teasers we promote it
 * to a wrapping flex row with `align-items: stretch`. Every teaser on a row
 * then stretches to the tallest sibling's height. Layouts with a single
 * teaser (or teasers separated by other components) match the `:has`
 * selector's negative case and keep the original inline-flex flow behaviour.
 *
 * A `gap` (default 15px, themeable via `--teaser-gap`) separates adjacent
 * teasers horizontally and wrapped rows vertically. Each teaser's flex-basis
 * subtracts that gap (see below) so e.g. three 33% teasers still fit three to a
 * line WITH the gap, rather than wrapping to two.
 */
:has(> .cms-teaser + .cms-teaser) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--teaser-gap, 15px);
}

/*
 * Inside such a parent teasers become flex items. The flex-basis is the
 * author-configured width MINUS the row gap so the gaps fit within 100% and the
 * intended number of teasers stay on one line. `flex-grow: 0`/`flex-shrink: 0`
 * keep them at that basis; `height: auto` lets the row's stretch alignment
 * drive the final height.
 */
:has(> .cms-teaser + .cms-teaser) > .cms-teaser {
  flex: 0 0 calc(var(--teaser-width-desktop, 100%) - var(--teaser-gap, 15px));
  height: auto;
}

@media (max-width: 1280px) {
  :has(> .cms-teaser + .cms-teaser) > .cms-teaser {
    flex-basis: calc(var(--teaser-width-small, 100%) - var(--teaser-gap, 15px));
  }
}

/* Small desktop */
@media (max-width: 1280px) {
  .cms-teaser {
    width: var(--teaser-width-small, 100%);
  }
}

/* Linked teaser styles */
.cms-teaser--linked {
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cms-teaser--linked:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Image positioning layouts */
.cms-teaser--top {
  flex-direction: column;
}

.cms-teaser--bottom {
  flex-direction: column-reverse;
}

.cms-teaser--left {
  flex-direction: row;
}

.cms-teaser--right {
  flex-direction: row-reverse;
}

/* Image container */
.cms-teaser__image {
  flex-shrink: 0;
}

.cms-teaser--top .cms-teaser__image,
.cms-teaser--bottom .cms-teaser__image {
  width: 100%;
}

.cms-teaser--left .cms-teaser__image,
.cms-teaser--right .cms-teaser__image {
  width: 40%;
  min-width: 200px;
}

.cms-teaser__image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.cms-teaser--left .cms-teaser__image img,
.cms-teaser--right .cms-teaser__image img {
  height: 100%;
  min-height: 200px;
}

/* Icon media (shown instead of an image). Sized via a custom property so a
   site theme can override it; centred within the media slot. */
.cms-teaser__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teaser-icon-color, var(--color-primary, #0066cc));
}

.cms-teaser--top .cms-teaser__icon,
.cms-teaser--bottom .cms-teaser__icon {
  justify-content: flex-start;
}

.cms-teaser__icon i {
  font-size: var(--teaser-icon-size, 3rem);
  line-height: 1;
}

/* Content area */
.cms-teaser__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Title */
.cms-teaser__title {
  color: var(--teaser-title-color, inherit);
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Description */
.cms-teaser__description {
  margin: 0;
  line-height: 1.6;
  flex: 1;
}

/* CTA buttons container */
.cms-teaser__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: auto;
}

/* CTA button styles */
.cms-teaser__cta {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: var(--teaser-cta-bg, var(--color-primary, #0066cc));
  color: var(--teaser-cta-color, #ffffff);
  border-radius: var(--teaser-cta-border-radius, 4px);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s ease;
  cursor: pointer;
}

.cms-teaser__cta:hover {
  opacity: 0.9;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .cms-teaser {
    width: var(--teaser-width-tablet, 100%);
  }

  :has(> .cms-teaser + .cms-teaser) > .cms-teaser {
    flex-basis: calc(var(--teaser-width-tablet, 100%) - var(--teaser-gap, 15px));
  }

  .cms-teaser--left,
  .cms-teaser--right {
    flex-direction: column;
  }

  .cms-teaser--left .cms-teaser__image,
  .cms-teaser--right .cms-teaser__image {
    width: 100%;
  }

  .cms-teaser--left .cms-teaser__image img,
  .cms-teaser--right .cms-teaser__image img {
    height: auto;
    min-height: auto;
  }
}

@media (max-width: 768px) {
  .cms-teaser {
    width: var(--teaser-width-mobile, 100%);
    padding: var(--teaser-padding, 0.75rem);
  }

  :has(> .cms-teaser + .cms-teaser) > .cms-teaser {
    flex-basis: calc(var(--teaser-width-mobile, 100%) - var(--teaser-gap, 15px));
  }

  .cms-teaser__title {
    font-size: 1.25rem;
  }

  .cms-teaser__ctas {
    flex-direction: column;
  }

  .cms-teaser__cta {
    text-align: center;
    width: 100%;
  }
}