/* CODUS MONO V14.8 — working UI refinements loaded across every theme template. */

/* Keep the body scrollable under the desktop dropdown. The core theme handles
   scrollbar-gutter and only locks fullscreen mobile navigation. */
body.mono-theme.menu-open:not(.mono-mobile-menu-open):not(.mono-modal-open) { overflow-y: auto; }

/* Pagination: clearly indicate the selected page; other pages remain links. */
.mono-pagination { flex-wrap: wrap; }
.mono-pagination a {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid #555;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}
.mono-pagination a { transition: color .2s ease, background .2s ease, border-color .2s ease; }
.mono-pagination a:hover,
.mono-pagination a:focus-visible { background: #eee; border-color: #eee; color: #111; }
.mono-pagination a[aria-current="page"] {
  background: #f2f2f2;
  color: #080808;
  border-color: #f2f2f2;
  font-weight: 800;
}
.mono-pagination a[aria-current="page"]:hover { background: #fff; color: #080808; border-color: #fff; }

/* Font glyphs ↗ vary in baseline and proportions; use one optically centered icon. */
.mono-btn > span[aria-hidden="true"],
.mono-header__action > span[aria-hidden="true"],
.mono-footer-v7__start > span[aria-hidden="true"],
.mono-start-form__submit > span[aria-hidden="true"] {
  display: inline-grid;
  place-items: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  line-height: 1;
  font-size: 0;
  align-self: center;
}
.mono-btn > span[aria-hidden="true"]::before,
.mono-header__action > span[aria-hidden="true"]::before,
.mono-footer-v7__start > span[aria-hidden="true"]::before,
.mono-start-form__submit > span[aria-hidden="true"]::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"%3E%3Cpath d="M4 14 14 4M6 4h8v8" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="square"/%3E%3C/svg%3E') center / contain no-repeat;
  mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"%3E%3Cpath d="M4 14 14 4M6 4h8v8" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="square"/%3E%3C/svg%3E') center / contain no-repeat;
  transition: transform .25s ease;
}
.mono-btn:hover > span[aria-hidden="true"]::before,
.mono-header__action:hover > span[aria-hidden="true"]::before,
.mono-footer-v7__start:hover > span[aria-hidden="true"]::before,
.mono-start-form__submit:hover > span[aria-hidden="true"]::before {
  transform: translate(2px, -2px);
}

/* The contact dialog animates independently of GSAP, including when loaded slowly. */
@keyframes monoModalShadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes monoModalShadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes monoModalPanelIn {
  from { opacity: 0; transform: translate3d(0, 22px, 0) scale(.97); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes monoModalPanelOut {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(0, 12px, 0) scale(.985); }
}
.mono-start-modal:not([hidden]):not(.is-closing) .mono-start-modal__shade {
  animation: monoModalShadeIn .34s ease-out both;
}
.mono-start-modal:not([hidden]):not(.is-closing) .mono-start-modal__panel {
  animation: monoModalPanelIn .45s cubic-bezier(.2,.8,.2,1) both;
}
.mono-start-modal.is-closing .mono-start-modal__shade {
  animation: monoModalShadeOut .24s ease-in both;
}
.mono-start-modal.is-closing .mono-start-modal__panel {
  animation: monoModalPanelOut .24s ease-in both;
}

/* Touch screens: activate the same card interactions via IntersectionObserver. */
@media (hover: none), (pointer: coarse), (max-width: 900px) {
  .mono-service.is-in-view {
    --active-accent: var(--visual-accent);
    background: #101010 !important;
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  }
  .mono-service.is-in-view::before { opacity: 1; }
  .mono-service.is-in-view::after { opacity: 1; animation: monoBorderSpin 4.5s linear infinite; }
  .mono-service.is-in-view .mono-service__icon {
    color: var(--active-accent);
    transform: translate(6px,-5px) rotate(-7deg);
    filter: drop-shadow(0 0 13px var(--active-accent));
  }
  .mono-service.is-in-view h3 { transform: translateY(-4px); }
  .mono-service.is-in-view .mono-service__arrow {
    background: #efefef;
    color: #090909;
    border-color: var(--visual-accent);
    box-shadow: 0 0 24px color-mix(in srgb,var(--visual-accent) 30%,transparent);
    transform: translate(3px,-3px) rotate(45deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mono-pagination a,
  .mono-btn > span[aria-hidden="true"]::before,
  .mono-header__action > span[aria-hidden="true"]::before,
  .mono-footer-v7__start > span[aria-hidden="true"]::before,
  .mono-start-form__submit > span[aria-hidden="true"]::before { transition: none; }
  .mono-start-modal .mono-start-modal__shade,
  .mono-start-modal .mono-start-modal__panel { animation: none !important; }
  .mono-service.is-in-view,
  .mono-service.is-in-view::before,
  .mono-service.is-in-view::after,
  .mono-service.is-in-view .mono-service__icon,
  .mono-service.is-in-view h3,
  .mono-service.is-in-view .mono-service__arrow {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}