/*
 * MvM Theme 1.0 — PostX / PostX Pro compatibility layer
 * PostX supplies the dynamic block; MvM owns the visual language.
 */

.mvm-postx-block,
.mvm-postx-block * {
  box-sizing: border-box;
}

.mvm-postx-block {
  --mvm-postx-blue: var(--mvm-blue, #1966AE);
  --mvm-postx-blue-dark: var(--mvm-blue-700, #114f8b);
  --mvm-postx-ink: var(--mvm-ink, #17212b);
  --mvm-postx-muted: var(--mvm-muted, #687786);
  --mvm-postx-surface: var(--mvm-surface, #fff);
  --mvm-postx-soft: var(--mvm-surface-soft, #f5f8fb);
  --mvm-postx-border: var(--mvm-border, #dce6ef);
  --mvm-postx-radius: var(--mvm-radius-lg, 18px);
  --mvm-postx-shadow: var(--mvm-shadow-soft, 0 8px 26px rgba(23,33,43,.07));
  min-width: 0;
  max-width: 100%;
  color: var(--mvm-postx-ink);
  font-family: inherit;
}

.mvm-postx-block h1,
.mvm-postx-block h2,
.mvm-postx-block h3,
.mvm-postx-block h4,
.mvm-postx-block h5,
.mvm-postx-block h6 {
  color: var(--mvm-postx-ink);
  font-family: inherit;
  letter-spacing: -.02em;
}

.mvm-postx-block p,
.mvm-postx-block .ultp-post-meta,
.mvm-postx-block [class*="post-meta"],
.mvm-postx-block [class*="excerpt"] {
  color: var(--mvm-postx-muted);
}

.mvm-postx-block a {
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
}

.mvm-postx-block a:not(.wp-element-button):not([class*="button"]):not([class*="btn"]) {
  color: inherit;
}

.mvm-postx-block a:hover,
.mvm-postx-block a:focus-visible {
  color: var(--mvm-postx-blue);
}

.mvm-postx-block img {
  max-width: 100%;
  height: auto;
}

.mvm-postx-block :is(.ultp-block-image, [class*="post-image"], [class*="featured-image"]) img {
  border-radius: var(--mvm-radius-md, 14px);
}

/* Cards and individual post shells. */
.mvm-postx-block :is(
  .ultp-block-item,
  .ultp-block-content-wrap,
  [class*="post-grid-content"],
  [class*="post-list-content"]
) {
  border-color: var(--mvm-postx-border);
}

.mvm-postx-block :is(.ultp-block-item, [class*="post-grid-item"], [class*="post-list-item"]) {
  border-radius: var(--mvm-postx-radius);
}

/* PostX headings should feel like native MvM section headings. */
.mvm-postx-block :is(.ultp-heading-wrap, .ultp-block-title, [class*="heading-wrap"], [class*="block-title"]) {
  font-family: inherit;
}

.mvm-postx-block :is(.ultp-heading-wrap, [class*="heading-wrap"])::before,
.mvm-postx-block :is(.ultp-heading-wrap, [class*="heading-wrap"])::after {
  border-color: var(--mvm-postx-blue);
}

/* Buttons, filters and pagination. */
.mvm-postx-block :is(
  button,
  .ultp-loadmore,
  .ultp-filter-navigation a,
  [class*="pagination"] a,
  [class*="loadmore"],
  [class*="filter"] button
) {
  border-radius: 999px;
  font-family: inherit;
  font-weight: 750;
}

.mvm-postx-block :is(
  .ultp-loadmore,
  [class*="loadmore"],
  [class*="pagination"] .active,
  [class*="pagination"] .current
) {
  border-color: var(--mvm-postx-blue);
  background: var(--mvm-postx-blue);
  color: #fff;
}

.mvm-postx-block :is(
  .ultp-filter-navigation a,
  [class*="filter"] button,
  [class*="pagination"] a
) {
  border-color: var(--mvm-postx-border);
}

.mvm-postx-block :is(
  .ultp-filter-navigation a,
  [class*="filter"] button,
  [class*="pagination"] a
):hover,
.mvm-postx-block :is(
  .ultp-filter-navigation a,
  [class*="filter"] button,
  [class*="pagination"] a
):focus-visible {
  border-color: var(--mvm-postx-blue);
  background: var(--mvm-blue-050, #eef6fc);
  color: var(--mvm-postx-blue);
}

/* Search and input controls. */
.mvm-postx-block :is(input[type="search"], input[type="text"], select) {
  min-height: 44px;
  border: 1px solid var(--mvm-postx-border);
  border-radius: 12px;
  background: var(--mvm-postx-surface);
  color: var(--mvm-postx-ink);
  font: inherit;
}

.mvm-postx-block :is(input[type="search"], input[type="text"], select):focus {
  outline: 2px solid color-mix(in srgb, var(--mvm-postx-blue) 35%, transparent);
  outline-offset: 2px;
  border-color: var(--mvm-postx-blue);
}

/* Accessible focus on all interactive PostX controls. */
.mvm-postx-block :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--mvm-postx-blue) 35%, transparent);
  outline-offset: 3px;
}

/* MvM dark mode always wins over imported light PostX presets. */
body.dark .mvm-postx-block,
body[data-mvm-theme="dark"] .mvm-postx-block {
  --mvm-postx-ink: var(--mvm-ink, #eef5fb);
  --mvm-postx-muted: var(--mvm-muted, #aebcca);
  --mvm-postx-surface: var(--mvm-surface, #18222c);
  --mvm-postx-soft: var(--mvm-surface-soft, #111a22);
  --mvm-postx-border: var(--mvm-border, #30404e);
  --mvm-postx-shadow: var(--mvm-shadow-soft, 0 8px 26px rgba(0,0,0,.22));
}

body.dark .mvm-postx-block :is(.ultp-block-item, [class*="post-grid-item"], [class*="post-list-item"]),
body[data-mvm-theme="dark"] .mvm-postx-block :is(.ultp-block-item, [class*="post-grid-item"], [class*="post-list-item"]) {
  border-color: var(--mvm-postx-border);
}

/* Keep PostX inside the MvM content system unless a block is explicitly wide/full. */
body.mvm-theme1-shell .mvm-page-content > .mvm-postx-block:not(.alignwide):not(.alignfull),
body.mvm-theme1-shell .mvm-single-content > .mvm-postx-block:not(.alignwide):not(.alignfull) {
  max-width: 100%;
}

body.mvm-theme1-shell .mvm-postx-block.alignwide {
  width: min(var(--mvm-content, 1280px), calc(100vw - 32px));
  max-width: none;
  margin-inline: 50%;
  transform: translateX(-50%);
}

body.mvm-theme1-shell .mvm-postx-block.alignfull {
  width: 100vw;
  max-width: none;
  margin-inline: 50%;
  transform: translateX(-50%);
}

@media (max-width: 760px) {
  .mvm-postx-block {
    min-width: 0;
  }

  .mvm-postx-block :is(
    .ultp-filter-navigation,
    [class*="filter-navigation"],
    [class*="pagination"]
  ) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.mvm-theme1-shell .mvm-postx-block.alignwide,
  body.mvm-theme1-shell .mvm-postx-block.alignfull {
    width: calc(100vw - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mvm-postx-block *,
  .mvm-postx-block *::before,
  .mvm-postx-block *::after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}