/* Knickerbocker Plaza — additions for the kp/* blocks (front end + editor canvas).
   Small utilities that replace the inline styles of the old templates. */

.m-display--h2.kp-h2-md { font-size: clamp(28px, 2.6vw, 38px); }
.m-display--h2.kp-h2-sm { font-size: clamp(26px, 2.4vw, 34px); }
.kp-sub-label { margin: 40px 0 14px; }
.m-sec__head.kp-mb-0 { margin-bottom: 0; }
.kp-mt-40 { margin-top: 40px; }
.kp-m-32-40 { margin: 32px 0 40px; }

/* Map block: real Google map filling the design's map box */
.m-map .kp-map__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------------------- editor canvas only */
.editor-styles-wrapper .kp-contents { display: contents; }
.editor-styles-wrapper .kp-contents > .block-list-appender,
.editor-styles-wrapper .block-list-appender { position: relative; }
.editor-styles-wrapper .kp-img-ph {
  display: flex; align-items: center; justify-content: center;
  min-height: 160px; background: #ece5d8; outline: 1px dashed #b9ad97;
}
.editor-styles-wrapper .kp-ph {
  display: grid; gap: 6px; padding: 22px 24px;
  background: #fff; border: 1px dashed #b9ad97; color: #4f5a67; font-size: 14px;
}
.editor-styles-wrapper .kp-ph strong { color: #0e2240; font-size: 16px; font-weight: 500; }
.editor-styles-wrapper .kp-gallery-edit { margin: 12px 0 24px; }
.editor-styles-wrapper .m-btn [data-rich-text-placeholder]::after { opacity: .6; }
.editor-styles-wrapper .m-step,
.editor-styles-wrapper .m-plans__link { cursor: text; }
/* Hidden gallery groups stay visible while editing */
.editor-styles-wrapper .m-gallery__group[hidden] { display: block; }

/* Page hero with a narrower photo (--img-w): fade the photo's own left edge into the background
   instead of laying a gradient over it, so no hard edge shows where the photo starts. */
@media (min-width: 1024px) {
  .m-phero--photo[style*="--img-w"] { background: #f6f1e7; }
  .m-phero--photo[style*="--img-w"] .m-phero__img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .35) 14%, #000 38%);
            mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .35) 14%, #000 38%);
  }
  .m-phero--photo[style*="--img-w"] .m-phero__fade {
    background: linear-gradient(90deg, #f6f1e7 0%, rgba(246, 241, 231, .85) 34%, rgba(246, 241, 231, 0) 50%);
  }
}

/* "Nothing found" box: the 44px icon rule must not hit the arrow inside its button */
.m-empty .m-btn svg { width: 16px; height: 16px; color: currentColor; }
.m-empty .m-btn { white-space: nowrap; }

/* Header dropdown: the current page keeps the same padding as the other items
   (.m-nav a[aria-current] zeroes padding-bottom for the top-level underline). */
.m-nav .m-nav__menu a[aria-current] { padding: 10px 22px; box-shadow: none; font-weight: 500; }

/* Formidable Signature pad, theme-styled. The plugin's mode buttons use Formidable's icon font, which the theme
   doesn't load (its form CSS is replaced by ours) — show them as "Draw it / Type it" tabs instead. */
.m-frm .frm_form_field .sigWrapper { position: relative; border: 0 !important; height: auto !important; background: none; }
.m-frm .frm_form_field ul.sigNav { position: static; display: flex !important; gap: 18px; margin: 0 0 8px; padding: 0; background: none; }
.m-frm .frm_form_field .sigPad ul.sigNav li { margin: 0; }
.m-frm .frm_form_field .sigNav a,
.m-frm .frm_form_field .sigNav a.current { display: inline-block; padding: 0 0 3px; border-radius: 0; background: none; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid transparent; }
.m-frm .frm_form_field .sigNav a.current { color: var(--navy); border-bottom-color: var(--navy); }
.m-frm .frm_form_field .sigNav a::after { content: attr(title); }
.m-frm .frm_form_field .sigNav a i { display: none; }
/* canvas keeps its own pixel size: stretching it with CSS would offset the stroke from the pointer */
.m-frm .frm_form_field .sigPad canvas { display: block; max-width: 100%; border: 1px solid var(--line); background: #faf7f1; }
.m-frm .frm_form_field .sigPad .typed input { width: 100% !important; max-width: 100%; }
.m-frm .frm_form_field .sigPad .clearButton { margin-top: 6px; }
.m-frm .frm_form_field .sigPad .clearButton a { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--burgundy); text-decoration: none; }
.m-frm .frm_form_field .sigPad .clearButton a:hover { text-decoration: underline; }

/* Apply Online: "Additional Supporting Documents" label needs its space (the h3 reset was winning) */
.m-sub-label.kp-sub-label { margin: 40px 0 14px; }
/* Document list: the same look for every item, linked or not */
.m-doclist a { text-decoration: none; }
.m-doclist a:hover, .m-doclist a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* Numbered list as <ol>: the design draws its own 01/02/03, hide the browser's numbers */
ol.m-numlist, ol.m-letter__list { list-style: none; padding-left: 0; }
/* Typed signature: smaller, sitting just above the signature line */
.m-frm .frm_form_field .sigPad .typed { font-size: 16px; line-height: normal; height: 150px; }
.m-frm .frm_form_field .sigPad .typed input[type="text"],
.m-frm .frm_form_field .sigPad .typed input[type="text"]:focus {
  height: 128px !important; padding: 0 !important; font-size: 38px !important; line-height: 1 !important;
  background: transparent !important; color: var(--navy);
}

/* Photo viewer (gallery + floor plans) */
html.kp-lb-lock { overflow: hidden; }
.kp-lb { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 56px 72px; background: rgba(9, 20, 38, .94);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.kp-lb.is-open { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }
.kp-lb__fig { transform: scale(.94); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.kp-lb.is-open .kp-lb__fig { transform: none; }
.kp-lb__img { transition: opacity .25s ease, transform .3s cubic-bezier(.2, .7, .2, 1); }
.kp-lb__img.is-out-next { opacity: 0; transform: translateX(-28px); }
.kp-lb__img.is-out-prev { opacity: 0; transform: translateX(28px); }
.kp-lb__img.is-in-next { opacity: 0; transform: translateX(28px); transition: none; }
.kp-lb__img.is-in-prev { opacity: 0; transform: translateX(-28px); transition: none; }
.kp-lb__img.is-loading { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .kp-lb, .kp-lb.is-open, .kp-lb__fig, .kp-lb__img { transition: none; transform: none; }
}
.kp-lb__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; max-height: 100%; }
.kp-lb__img { display: block; max-width: min(1400px, 100%); max-height: calc(100vh - 150px); width: auto; height: auto; object-fit: contain; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.kp-lb__cap { color: #f5f0e7; font: 400 15px/1.4 "Jost", "Helvetica Neue", sans-serif; letter-spacing: .04em; text-align: center; }
.kp-lb__count { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; text-align: center; color: rgba(245, 240, 231, .7); font: 500 12px/1 "Jost", sans-serif; letter-spacing: .2em; }
.kp-lb button { border: 0; background: none; color: #fff; cursor: pointer; font-family: Georgia, serif; line-height: 1; }
.kp-lb button:focus-visible { outline: 2px solid #f5f0e7; outline-offset: 3px; }
.kp-lb__close { position: absolute; top: 14px; right: 18px; width: 48px; height: 48px; font-size: 40px; }
.kp-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 80px; font-size: 64px; opacity: .85; }
.kp-lb__nav:hover, .kp-lb__close:hover { opacity: 1; color: #d9c49a; }
.kp-lb__prev { left: 10px; }
.kp-lb__next { right: 10px; }
.kp-lb--single .kp-lb__nav { display: none; }
@media (max-width: 767px) {
  .kp-lb { padding: 64px 12px 48px; }
  .kp-lb__nav { top: auto; bottom: 4px; transform: none; width: 52px; height: 52px; font-size: 48px; }
  .kp-lb__img { max-height: calc(100vh - 170px); }
}

/* Sticky header: hidden while scrolling down, shown when scrolling up */
.m-header { position: sticky; top: 0; z-index: 50; transition: transform .3s ease, box-shadow .3s ease; will-change: transform; }
.m-header.is-stuck { box-shadow: 0 6px 24px rgba(14, 34, 64, .12); }
.m-header.is-hidden { transform: translateY(-100%); box-shadow: none; }
.admin-bar .m-header { top: 32px; }
.admin-bar .m-header.is-hidden { transform: translateY(calc(-100% - 32px)); }
@media (max-width: 782px) {
  .admin-bar .m-header { top: 0; } /* the admin bar scrolls away on small screens */
  .admin-bar .m-header.is-hidden { transform: translateY(-100%); }
}
@media (prefers-reduced-motion: reduce) { .m-header { transition: none; } }

/* ---------------------------------------------------------------- button hovers
   All .m-btn: smooth colour change; the arrow slides out to the right and comes back in from the left,
   the download arrow gives a small drop. Outline buttons fill from the left. */
.m-btn { position: relative; overflow: hidden; isolation: isolate; transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.m-btn .kp-i { flex: none; }
.m-btn:hover, .m-btn:focus-visible { background-color: var(--navy-2, #17325c); border-color: var(--navy-2, #17325c); }

/* outline: navy fill sweeps in from the left */
.m-btn--outline::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy, #0e2240); transform: scaleX(0); transform-origin: left center; transition: transform .4s cubic-bezier(.65, 0, .35, 1); }
.m-btn--outline:hover, .m-btn--outline:focus-visible { background-color: rgba(255, 255, 255, .55); border-color: var(--navy, #0e2240); color: #fff !important; }
.m-btn--outline:hover::before, .m-btn--outline:focus-visible::before { transform: scaleX(1); }

/* accent keeps its own darker burgundy */
.m-btn--accent:hover, .m-btn--accent:focus-visible { background-color: var(--burgundy-2); border-color: var(--burgundy-2); }

/* white outline on photos (CTA banner): fills white, text turns navy */
.m-cta .m-btn--outline::before { background: #fff; }
.m-cta .m-btn--outline:hover, .m-cta .m-btn--outline:focus-visible { background: transparent; border-color: #fff; color: var(--navy, #0e2240) !important; }

@keyframes kp-arrow-loop {
  0%   { transform: translateX(0); opacity: 1; }
  45%  { transform: translateX(14px); opacity: 0; }
  46%  { transform: translateX(-14px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes kp-arrow-drop {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(4px); }
  70%      { transform: translateY(-1px); }
}
.m-btn:hover .kp-i--arrow, .m-btn:focus-visible .kp-i--arrow,
.m-step:hover .kp-i--arrow, .m-step:focus-visible .kp-i--arrow { animation: kp-arrow-loop .5s cubic-bezier(.65, 0, .35, 1); }
.m-btn:hover .kp-i--download, .m-btn:focus-visible .kp-i--download { animation: kp-arrow-drop .5s ease; }

/* "next step" tiles: arrow + soft lift */
.m-step { transition: background-color .3s ease, transform .3s ease; }
.m-step:hover, .m-step:focus-visible { transform: translateY(-3px); }

/* form submit buttons (Formidable) get the same colour transition */
.m-frm .frm_button_submit, .m-frm button[type=submit], .m-frm input[type=submit], .m-form button[type=submit] { transition: background-color .3s ease, border-color .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .m-btn, .m-btn--outline::before, .m-step { transition: none; }
  .m-btn .kp-i, .m-step .kp-i { animation: none !important; }
  .m-step:hover { transform: none; }
}

/* ---------------------------------------------------------------- site popup (Popup Maker #637)
   Lives outside .dir-m, so colours / fonts are literal here. */
.pum-overlay:has(.kp-pop) { background-color: rgba(9, 20, 38, .72) !important; backdrop-filter: blur(2px); }
.pum-container:has(.kp-pop) { width: min(820px, 92vw) !important; max-width: none !important; left: 50% !important; margin-left: 0 !important; transform: translateX(-50%);
  padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: #faf7f1 !important; box-shadow: 0 30px 80px rgba(9, 20, 38, .35) !important; overflow: hidden; }
.pum-container:has(.kp-pop) .pum-content { margin: 0 !important; }
.pum-container:has(.kp-pop) .pum-close { top: 12px !important; right: 12px !important; left: auto !important; width: 40px !important; height: 40px !important; padding: 0 !important;
  border: 0 !important; border-radius: 50% !important; background: rgba(250, 247, 241, .92) !important; box-shadow: 0 2px 10px rgba(9, 20, 38, .18) !important;
  color: #0e2240 !important; font-size: 0 !important; line-height: 40px !important; text-align: center; cursor: pointer; transition: background-color .2s ease; }
.pum-container:has(.kp-pop) .pum-close::before { content: "\00d7"; font: 300 26px/40px Georgia, serif; color: #0e2240; }
.pum-container:has(.kp-pop) .pum-close:hover, .pum-container:has(.kp-pop) .pum-close:focus-visible { background: #fff !important; }

.kp-pop { display: grid; grid-template-columns: 40% 1fr; min-height: 440px; font-family: "Jost", "Helvetica Neue", sans-serif; color: #1d2733; }
.kp-pop > p:empty, .kp-pop br { display: none; } /* Popup Maker runs wpautop on the content */
.kp-pop__img { grid-column: 1; grid-row: 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.kp-pop__body { grid-column: 2; grid-row: 1; }
.kp-pop__body { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 48px 48px 44px; border-top: 3px solid #6e1c24; }
.kp-pop__eyebrow { margin: 0; display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: #0e2240; }
.kp-pop__eyebrow::after { content: ""; flex: 0 0 70px; height: 1px; background: #b38b4d; }
.kp-pop__title { margin: 0; font: 400 clamp(28px, 3vw, 38px)/1.12 "Libre Caslon Display", Georgia, serif; color: #6e1c24; }
.kp-pop__text { margin: 0; font: 400 16px/1.65 "Libre Caslon Text", Georgia, serif; color: #4f5a67; }
.kp-pop__actions { margin: 10px 0 0; }
.kp-pop .m-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 50px; padding: 12px 30px; border: 1px solid #6e1c24; background: #6e1c24; color: #fff !important;
  font: 500 13px/1 "Jost", sans-serif; letter-spacing: .17em; text-transform: uppercase; text-decoration: none; transition: background-color .3s ease; }
.kp-pop .m-btn:hover, .kp-pop .m-btn:focus-visible { background: #57151c; border-color: #57151c; }
.kp-pop .m-btn svg { width: 16px; height: 16px; }
.kp-pop .m-btn:hover .kp-i--arrow { animation: kp-arrow-loop .5s cubic-bezier(.65, 0, .35, 1); }
@media (max-width: 680px) {
  .kp-pop { grid-template-columns: 1fr; min-height: 0; }
  .kp-pop__img, .kp-pop__body { grid-column: 1; grid-row: auto; }
  .kp-pop .kp-pop__img { height: 210px !important; max-height: 210px; object-position: 50% 35%; }
  .kp-pop__body { padding: 28px 24px 30px; gap: 12px; }
  .kp-pop__title { font-size: 26px; }
  .kp-pop__text { font-size: 15px; }
}

/* numbered list item with a heading line (Management: Our Commitment to Residents) */
.m-numlist li strong { display: block; margin-bottom: 4px; font-weight: 500; color: var(--ink, inherit); }

/* Apartment Listings — "No Apartments Currently Listed" */
.m-nolist { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 28px; align-items: stretch; }
.m-nolist > div:first-child { padding: 40px 44px; background: var(--cream); border-top: 2px solid var(--burgundy); }
.m-nolist h3 { font-family: "Libre Caslon Display", Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.2; color: var(--navy); }
.m-nolist p { font-size: 17px; line-height: 1.65; margin-top: 10px; max-width: 560px; }
.m-nolist .m-actions, .m-nolist .m-hero__actions { margin-top: 26px; }
@media (max-width: 860px) {
  .m-nolist { grid-template-columns: 1fr; gap: 20px; }
  .m-nolist > div:first-child { padding: 30px 24px; }
  .m-nolist h3 { font-size: 26px; }
}

/* listing card description */
.m-listing__text { font-size: 15px; line-height: 1.6; margin-top: 10px; color: var(--muted, inherit); }
.m-avail__status--available { color: var(--navy); }
.m-avail__status--available::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--gold); vertical-align: 2px; }