/* @import url('http://example.com/example_style.css'); */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

:root {
  --nm-accent: #008ACB;
  --nm-tertiary: #F1861F;
  --nm-light: #E2DBCA;
  --nm-half-light: #F4F0E6;
  --nm-quote: #363636;
  --nm-arrow-size: 56px;  /* diameter of the circle */
  --nm-arrow-icon: 24px;  /* SVG size inside circle */
  --nm-aot-inset: 12px;   /* circle offset from side (tweak as desired) */
}

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/* Base/top section */
.header__section.header__section--top {
  background-color: var(--nm-accent) !important;

  /* ACT3 reads these tokens for text/links/icons */
  --text: #ffffff;
  --link: #ffffff;

  /* Ensure actual computed color is white for inherit chains */
  color: var(--text);
}

/* Menu overlap & sticky variants (depending on what the theme toggles) */
.header--overlap .header__section.header__section--top,
.is-overlap .header__section.header__section--top,
.is-sticky .header__section.header__section--top,
.header--sticky .header__section.header__section--top {
  background-color: var(--nm-accent) !important;
  --text: #ffffff;
  --link: #ffffff;
  color: var(--text);
}

/*****************************************/

/* Forms – Adjust legal copy size */
.nm-frm-slc .legal-consent-container .hs-richtext {
  font-size: 12px !important;
}

/*****************************************/

/* Badges – Create extra badge colors */
.badge--orange {
  background-color: var(--nm-tertiary);
  color: #ffffff;
}

/*****************************************/

/* Buttons - Adjustments */
.btn {
  font-weight: 600;
}
.btn--medium {
    padding: .64rem 1rem;
}

/*****************************************/

/* ===== Nemag × Splide — unified arrow styling =====
   - Non-AOT sliders: centered 56px circular arrows
   - AOT (sneakpeek) sliders: tall side columns with a 56px circle inside
   - Keeps slide masking intact, only arrows can overflow
   -------------------------------------------------- */

/* Core safety: mask off-canvas slides; allow arrows to escape */
.splide .splide__track { overflow: hidden !important; }
.splide .splide__arrows { overflow: visible !important; z-index: 3; }

/* Small reset used by both variants */
.splide .splide__arrow { line-height: 0; border: 0; }
.splide .splide__arrow .splide__arrow-icon { display: none !important; } /* hide ACT3 pill if present */
.splide.splide--white-arrows .splide__arrow { color: #fff; } /* icon color only; circle stays blue */

/* =========================
   Non-AOT fallback (default)
   ========================= */
.splide:not(.splide--sp-aot-lg):not(.splide--sp-aot-md):not(.splide--sp-aot-sm) .splide__arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);     /* vertically centered */
  width: var(--nm-arrow-size);
  height: var(--nm-arrow-size);
  border-radius: 9999px;
  background: var(--nm-tertiary);
  color: #fff;                     /* SVG uses currentColor */
  display: flex;
  align-items: center;
  justify-content: center;
  /* left/right positions come from ACT3; we don't override them */
}
.splide:not(.splide--sp-aot-lg):not(.splide--sp-aot-md):not(.splide--sp-aot-sm) .splide__arrow:hover{
  transform: translateY(-50%) scale(1.05);
}
.splide:not(.splide--sp-aot-lg):not(.splide--sp-aot-md):not(.splide--sp-aot-sm) .splide__arrow svg{
  width: var(--nm-arrow-icon);
  height: var(--nm-arrow-icon);
  display: block;
}

/* ==========================================
   AOT (Arrows-On-Top / sneakpeek) variants
   - Keep tall side columns for big hit area
   - Render our 56px circle INSIDE those columns
   ========================================== */
.splide.splide--sp-aot-lg .splide__arrow,
.splide.splide--sp-aot-md .splide__arrow,
.splide.splide--sp-aot-sm .splide__arrow{
  position: absolute;
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;         /* tall click column */
  width: var(--splide-sp-lg, var(--splide-sp-md, var(--splide-sp-sm, var(--nm-arrow-size)))) !important; /* use module gutter vars */
  margin-top: 0 !important;
  background: none !important;     /* column stays transparent */
  color: inherit;
  display: block;
  transform: none !important;      /* we animate the circle instead */
}

/* The blue circle inside each column */
.splide.splide--sp-aot-lg .splide__arrow::after,
.splide.splide--sp-aot-md .splide__arrow::after,
.splide.splide--sp-aot-sm .splide__arrow::after{
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--nm-arrow-size);
  height: var(--nm-arrow-size);
  border-radius: 9999px;
  background: var(--nm-tertiary);
  transition: transform .15s ease-in-out;
  pointer-events: none;            /* keep column itself clickable */
}

/* Place the circle towards the edge (logical for RTL/LTR) */
.splide.splide--sp-aot-lg .splide__arrow--prev::after,
.splide.splide--sp-aot-md .splide__arrow--prev::after,
.splide.splide--sp-aot-sm .splide__arrow--prev::after{
  inset-inline-start: var(--nm-aot-inset);
}
.splide.splide--sp-aot-lg .splide__arrow--next::after,
.splide.splide--sp-aot-md .splide__arrow--next::after,
.splide.splide--sp-aot-sm .splide__arrow--next::after{
  inset-inline-end: var(--nm-aot-inset);
}

/* Hover micro-interaction on the circle */
.splide.splide--sp-aot-lg .splide__arrow:hover::after,
.splide.splide--sp-aot-md .splide__arrow:hover::after,
.splide.splide--sp-aot-sm .splide__arrow:hover::after{
  transform: translateY(-50%) scale(1.05);
}

/* White 24px icon above the circle */
.splide.splide--sp-aot-lg .splide__arrow svg,
.splide.splide--sp-aot-md .splide__arrow svg,
.splide.splide--sp-aot-sm .splide__arrow svg{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--nm-arrow-icon);
  height: var(--nm-arrow-icon);
  color: #fff;                     /* relies on fill="currentColor" in paths */
  z-index: 1;
}

/* Align the icon horizontally to the circle center */
.splide.splide--sp-aot-lg .splide__arrow--prev svg,
.splide.splide--sp-aot-md .splide__arrow--prev svg,
.splide.splide--sp-aot-sm .splide__arrow--prev svg{
  inset-inline-start: calc(var(--nm-aot-inset) + (var(--nm-arrow-size) - var(--nm-arrow-icon)) / 2);
}
.splide.splide--sp-aot-lg .splide__arrow--next svg,
.splide.splide--sp-aot-md .splide__arrow--next svg,
.splide.splide--sp-aot-sm .splide__arrow--next svg{
  inset-inline-end: calc(var(--nm-aot-inset) + (var(--nm-arrow-size) - var(--nm-arrow-icon)) / 2);
}

/* Accessible focus ring (optional) */
.splide.splide--sp-aot-lg .splide__arrow:focus-visible,
.splide.splide--sp-aot-md .splide__arrow:focus-visible,
.splide.splide--sp-aot-sm .splide__arrow:focus-visible{
  outline: 2px solid rgba(255,255,255,.45);
  outline-offset: 2px;
}

/*****************************************/

/* Headings - Adjustments */
.h1, .h2, .h3, h1, h2, h3  {
  text-transform: uppercase;

}

/* Adjust – Overline color */
.nm-si-ol .section-intro__overline {
  color: var(--nm-accent);
  text-transform: uppercase;
  font-weight: 500;
}

/* Heading – Adjust H3 for Features */
.nm-ha-h3 h3 {
  margin-bottom: 12px;
  font-weight: 500;
  color: var(--nm-accent);
}

/*****************************************/


/* Progress bar – Color change */
.pillar-nav__progress-bar {
  background: var(--nm-tertiary) !important;
}

/* Pillar Nav Chevron – Adjust color */
.pillar-nav__button-arrow {
  color: var(--nm-tertiary);
}

/*****************************************/

/* Breadcrumbs – Add options for breadcrumb design */
.nm-bc {
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}

.nm-bc-lst {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

.nm-bc-itm {
  margin: 0;
}

.nm-bc-itm + .nm-bc-itm::before {
  content: "/";
  display: inline-block;
  margin: 0 0.5rem;
  color: var(--light-gray);
}

.nm-bc-lnk {
  color: var(--text);
  text-decoration: none;
}

.nm-bc-lnk:hover {
  text-decoration: underline;
}

.nm-bc-actv {
  color: var(--text);
  font-weight: 600;
}

.nm-bc-actv .nm-bc-lnk {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}

/*****************************************/

/* Module – Go Card – Service version - Adjust title */
.nm-gc-ta .go-card__title {
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--nm-accent);
  text-transform: uppercase;
}

/* Module – Go Card – Service version - Adjust alignment text */
.nm-gc-ia .go-card__body {
  align-items: start !important;
}

/* Module – Go Card – Product version - Adjust title */
.nm-gc-pc .go-card__title {
  font-weight: 500;
  text-transform: uppercase;
}

/* Module – Go Card – Product version - Adjust arrows */
.nm-gc-pc .go-card__arrow {
  padding: 12px;
  background-color: var(--nm-tertiary);
  border-radius: 99px;
  color: #ffffff;
}

/*****************************************/

/* Module – Rich Text Editor - Large quote */
.nm-rte-lq {
  font-family: "Roboto Slab", serif;
  font-size: 1.4rem;
  line-height: 120%;
}

/* Module – Rich Text Editor - Quote author */
.nm-rte-qa {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 120%;
  text-transform: uppercase;
}

/* Module – Rich Text Editor - Quote author function */
.nm-rte-af {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 120%;
  text-transform: uppercase;
}

/*****************************************/

/* Module – Image plus text updates */
.nm-ipt-bm .img-txt__btn.inline-items {
  margin-bottom: 96px;
}

@media (max-width: 768px), (max-width: 1140px) {
  .nm-ipt-bm .img-txt__btn.inline-items {
    margin-bottom: 0px !important;
  }
}

/*****************************************/

/* Content Card – Background color adjustment */
.nm-cc-qt-bg .content-card--light {
    background: var(--nm-half-light) !important;
}

/* Content Card – Large quotes on card */
.nm-cc-qt .content-card__desc.small-text.clear.txt--light p{
  font-family: "Roboto Slab", serif;
  font-size: 1.2rem;
  line-height: 120%;
  color: var(--nm-quote);
}

/* Content Card – Label color, size and font-weight */
.nm-cc-qt .content-card__label {
  font-weight: 500;
  font-size: .77rem;
  color: var(--dark);
  margin-bottom: .46rem;
}

/* Content Card – Title tag font-weight */
.nm-cc-qt .content-card__title-tag {
  font-weight: 600;
}

/*****************************************/

/* Module – Accordion adjust title color */
.nm-ac-ta .accordion__group-title {
  color: var(--nm-accent);
}

/* Module – Accordion adjust title font-weight */
.accordion__group-title .h1,.h2,.h3,.h4,.h5,.h6 {
  font-weight: 600;
}

/* Default: stack vertically */
.accordion__title-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* title and summary align left */
  justify-content: flex-start;
}

/* If the summary is empty → center the title vertically */
.accordion__title-summary:has(.accordion__summary:empty) {
  flex-direction: row;       /* switch to row so we can center */
  align-items: center;       /* center the title vertically */
  justify-content: flex-start;
}

.accordion__title-summary:has(.accordion__summary:empty) .accordion__title {
  flex: 1; /* let the title span if needed */
}

/*****************************************/

/* Footer - Add margin + Remove on mobile + Links padding*/
.footer__nav {
  margin-top: 24px;
}

@media screen and (max-width: 767px) {
  .footer__nav {
    margin-top 0px;
  }
  .footer__links ul li {
      margin: .5rem .84rem .5rem 0rem !important;
  }
}

@media (max-width: 1139px) {
    .module--footer_icons {
        margin-bottom: 32px !important;
    }
}

/* Footer - Social Icons Hover state (new) */
.nm-ftr-si .icon--accent.icon--fill:hover {
  background: var(--nm-tertiary) !important;
}