/**
 * KC Popup Modal – v1.1.1
 */

/* ------------------------------------------------------------------
   CTA trigger — button style
------------------------------------------------------------------ */
.kc-pm__trigger--button {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  padding:          13px 32px;
  background:       var(--kc-pm-btn-bg, #111);
  color:            var(--kc-pm-btn-color, #fff);
  font-size:        14px;
  font-weight:      600;
  line-height:      1.2;
  letter-spacing:   0.04em;
  border:           2px solid var(--kc-pm-btn-bg, #111);
  border-radius:    4px;
  cursor:           pointer;
  text-decoration:  none;
  transition:       background 200ms ease, color 200ms ease, border-color 200ms ease, opacity 200ms ease;
}

.kc-pm__trigger--button:hover,
.kc-pm__trigger--button:focus-visible {
  opacity: 0.82;
  outline: none;
}

.kc-pm__trigger--button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ------------------------------------------------------------------
   CTA trigger — simple text link style
------------------------------------------------------------------ */
.kc-pm__trigger--link {
  display:         inline;
  background:      none;
  border:          none;
  padding:         0;
  color:           var(--kc-pm-link-color, inherit);
  font-size:       inherit;
  font-weight:     600;
  line-height:     inherit;
  cursor:          pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition:      opacity 180ms ease;
}

.kc-pm__trigger--link:hover,
.kc-pm__trigger--link:focus-visible {
  opacity: 0.65;
  outline: none;
}

.kc-pm__trigger--link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Scroll lock when modal is open
------------------------------------------------------------------ */
body.kc-pm-body-lock {
  overflow: hidden;
}


/* Keep popup instances from being trapped underneath theme stacking contexts. */
.kc-pm__wrap {
  position: relative;
  z-index: auto;
}

/* ------------------------------------------------------------------
   Modal overlay (backdrop)
------------------------------------------------------------------ */
.kc-pm__overlay {
  position:        fixed;
  inset:           0;
  z-index:         2147483647 !important;
  background:      rgba(0, 0, 0, 0.72);
  isolation:       isolate;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         24px 16px;
  opacity:         0;
  transition:      opacity 220ms ease;
  /* [hidden] keeps it out of the flow and inaccessible until opened */
}

.kc-pm__overlay[hidden] {
  display: none;
}

.kc-pm__overlay.kc-pm--open {
  opacity: 1;
}

/* ------------------------------------------------------------------
   Modal dialog box
------------------------------------------------------------------ */
.kc-pm__dialog {
  position:         relative;
  z-index:          2147483647 !important;
  background:       #fff;
  border-radius:    8px;
  padding:          48px 40px 40px;
  width:            100%;
  max-width:        680px;
  max-height:       88vh;
  overflow-y:       auto;
  box-shadow:       0 24px 64px rgba(0, 0, 0, 0.28);

  /* Slide-up entrance */
  transform:        translateY(16px);
  transition:       transform 220ms ease;
}

.kc-pm__overlay.kc-pm--open .kc-pm__dialog {
  transform: translateY(0);
}

/* ------------------------------------------------------------------
   Close button
------------------------------------------------------------------ */
.kc-pm__close {
  position:      absolute;
  top:           14px;
  right:         14px;
  width:         36px;
  height:        36px;
  padding:       0;
  background:    rgba(0, 0, 0, 0.06);
  border:        none;
  border-radius: 999px;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         #444;
  transition:    background 180ms ease, color 180ms ease;
  flex-shrink:   0;
}

.kc-pm__close:hover,
.kc-pm__close:focus-visible {
  background: rgba(0, 0, 0, 0.14);
  color:      #000;
  outline:    none;
}

.kc-pm__close:focus-visible {
  outline: 2px solid #444;
  outline-offset: 2px;
}

.kc-pm__close svg {
  width:  18px;
  height: 18px;
  display: block;
}

/* ------------------------------------------------------------------
   Modal title
------------------------------------------------------------------ */
.kc-pm__title {
  margin:      0 0 20px;
  font-size:   22px;
  font-weight: 700;
  line-height: 1.3;
  color:       #111;
  padding-right: 32px; /* clear the close button */
}

/* ------------------------------------------------------------------
   Modal body content
------------------------------------------------------------------ */
.kc-pm__body {
  font-size:   16px;
  line-height: 1.7;
  color:       #333;
}

.kc-pm__body > *:first-child { margin-top:    0; }
.kc-pm__body > *:last-child  { margin-bottom: 0; }

.kc-pm__body p   { margin: 0 0 1em; }
.kc-pm__body h1,
.kc-pm__body h2,
.kc-pm__body h3,
.kc-pm__body h4  { margin: 1.4em 0 0.5em; color: #111; }
.kc-pm__body a   { color: inherit; text-decoration: underline; }
.kc-pm__body a:hover { opacity: 0.7; }

.kc-pm__body img {
  max-width:     100%;
  height:        auto;
  border-radius: 4px;
  display:       block;
}

.kc-pm__body ul,
.kc-pm__body ol {
  padding-left: 1.4em;
  margin:       0 0 1em;
}

.kc-pm__body li { margin-bottom: 0.35em; }

/* ------------------------------------------------------------------
   Mobile
------------------------------------------------------------------ */
@media (max-width: 600px) {
  .kc-pm__dialog {
    padding:    40px 24px 28px;
    max-height: 90vh;
  }

  .kc-pm__title {
    font-size: 18px;
  }

  .kc-pm__body {
    font-size: 15px;
  }
}


/* Lock background page scrolling */
html:has(.kc-pm__overlay.kc-pm--open) {
    overflow: hidden !important;
}

body.kc-pm-body-lock {
    overflow: hidden !important;
}

/* Fixed modal overlay */
.kc-pm__overlay.kc-pm--open {
    position: fixed !important;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: 2147483647 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    overscroll-behavior: contain;
}

.kc-pm__overlay[hidden] {
    display: none !important;
}

/* Modal dialog container */
.kc-pm__dialog {
    position: relative;
    display: flex;
    flex-direction: column;

    width: 100%;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);

    overflow: hidden;
    box-sizing: border-box;
}

/* Title remains stationary */
.kc-pm__title {
    flex-shrink: 0;
}

/* Only modal content scrolls */
.kc-pm__body {
    flex: 1 1 auto;
    min-height: 0;

    overflow-y: auto !important;
    overflow-x: hidden;

    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

/* Close button remains accessible */
.kc-pm__close {
    position: absolute;
    z-index: 10;
}

/* Mobile */
@media (max-width: 767px) {
    .kc-pm__overlay.kc-pm--open {
        padding: 12px;
    }

    .kc-pm__dialog {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
    }
}



/* Allow modal body to scroll independently */
.kc-pm__overlay.kc-pm--open .kc-pm__dialog {
    min-height: 0;
    overflow: hidden !important;
}

.kc-pm__overlay.kc-pm--open .kc-pm__body {
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Prevent Salient's smooth-scroll handlers
   from moving the underlying page */
html:has(.kc-pm__overlay.kc-pm--open),
body.kc-pm-body-lock {
    overflow: hidden !important;
}
