/* The pager, shared.

   WHY ITS OWN FILE. These classes are rendered by TWO components: the
   programme listing and the FAQ accordion. They lived in listing.css, which is
   enqueued only where the listing shortcode is, so the FAQ page reused the
   class names and got none of the rules. The buttons fell through to Hello
   Elementor's reset.css and rendered with a #CC3366 pink border and a 3px
   radius. Seen live on /frequently-asked-questions/ on 14 Sept 2026.

   Both milpark-listing and milpark-faqs declare this as a dependency, so it
   loads wherever either of them does and there is still ONE definition rather
   than two that drift.

   ROUND, matching .mk-slider-btn in slider.css exactly: 40px, 2px border,
   fully rounded, same hover and disabled treatment. The Elementor archive
   pagination is matched to this in elementor.css, so a third rendering of the
   same control does not appear on /news/. */

.mk-pager[hidden],.mk-faq-pager[hidden]{display:none}
.mk-pager,.mk-faq-pager{display:flex;align-items:center;justify-content:center;gap:8px;margin:32px 0 0;flex-wrap:wrap}
.mk-pager-list{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none}
.mk-pager-list li{margin:0;padding:0}

.mk-pager-btn,.mk-pager-num{display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  min-width:40px;height:40px;padding:0 10px;border:2px solid #1C3687;border-radius:999px;background:#fff;
  color:#1C3687;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:14px;font-weight:700;line-height:1;cursor:pointer;
  transition:background-color .12s ease,color .12s ease}
.mk-pager-btn{width:40px;padding:0}

/* Hello's reset.css paints `[type="button"]:hover` and `:focus` a #CC3366
   fill at two of specificity. Every state is declared here and scoped under
   the pager wrapper, which is three, so ours wins on specificity rather than
   on load order. Both wrappers are listed because the two components name
   theirs differently. */
.mk-pager .mk-pager-btn:hover,.mk-pager .mk-pager-btn:focus,
.mk-pager .mk-pager-num:hover,.mk-pager .mk-pager-num:focus,
.mk-faq-pager .mk-pager-btn:hover,.mk-faq-pager .mk-pager-btn:focus,
.mk-faq-pager .mk-pager-num:hover,.mk-faq-pager .mk-pager-num:focus{background:#1C3687;color:#fff}

.mk-pager .mk-pager-btn:focus-visible,.mk-pager .mk-pager-num:focus-visible,
.mk-faq-pager .mk-pager-btn:focus-visible,.mk-faq-pager .mk-pager-num:focus-visible{outline:2px solid #1C3687;outline-offset:2px}

.mk-pager .mk-pager-btn:disabled,
.mk-faq-pager .mk-pager-btn:disabled{opacity:.3;cursor:default;background:#fff;color:#1C3687}

/* The current page. aria-current is the selector rather than a class, so the
   thing a screen reader announces and the thing a sighted visitor sees can
   never come apart. */
.mk-pager .mk-pager-num[aria-current="page"],
.mk-faq-pager .mk-pager-num[aria-current="page"]{background:#54D3EB;border-color:#54D3EB;color:#1A134A}
.mk-pager .mk-pager-num[aria-current="page"]:hover,
.mk-pager .mk-pager-num[aria-current="page"]:focus,
.mk-faq-pager .mk-pager-num[aria-current="page"]:hover,
.mk-faq-pager .mk-pager-num[aria-current="page"]:focus{background:#3AC7E0;border-color:#3AC7E0;color:#1A134A}

.mk-pager-btn--prev svg{transform:rotate(180deg)}
.mk-pager-gap{padding:0 2px;color:#5a6b85;font-size:14px;font-weight:700}

@media (max-width:600px){
	.mk-pager,.mk-faq-pager{gap:6px}
	.mk-pager-btn,.mk-pager-num{min-width:36px;height:36px;padding:0 8px;font-size:13px}
	.mk-pager-btn{width:36px;padding:0}
}

@media (prefers-reduced-motion:reduce){
	.mk-pager-btn,.mk-pager-num{transition:none}
}