/*
 * Sitewide keyboard accessibility (CLAUDE.md S14): visible focus, skip link, carousel pause button, scroll padding.
 * Keyboard only (:focus-visible): mouse and touch appearance is unchanged.
 */
:root { --np-focus: #0c09c3; }

/* A focused control is never left underneath the sticky header, the floating call-to-action / WhatsApp buttons, or the
   cookie banner (its height is written to --npx-cc-pad while it is open). */
html { scroll-padding-top: 72px; scroll-padding-bottom: var(--npx-cc-pad, 130px); }

/* Two-tone ring: a white band next to the control plus a purple ring outside it. The white band reads on dark surfaces and
   the purple ring on light ones (about 12:1 against white), so the indicator never depends on the background behind it. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--np-focus) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #fff !important;
}

/* Controls inside an overflow-hidden card, or fixed at a screen edge, would clip an outside ring: draw it inside. */
.whatsapp_cta:focus-visible,
.gwhatsapp_cta:focus-visible,
.voip-accordion__btn:focus-visible,
.noc-faq__btn:focus-visible,
.cloud-faq__btn:focus-visible,
.yt-poster:focus-visible,
.npx-acc-btn:focus-visible,
div.yt-poster[role="button"]:focus-visible,
details > summary:focus-visible {
  outline-offset: -4px !important;
  box-shadow: inset 0 0 0 6px #fff !important;
}

/* City-page FAQ question: a native button inside the existing h3, visually identical to the plain heading text */
.npx-acc-btn { display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: inherit; text-transform: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }

/* Skip link: off screen until it receives keyboard focus */
.np-skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 100000;
  transform: translateY(-220%);
  padding: 12px 20px; border-radius: 999px;
  background: linear-gradient(84.44deg, #270678 18.57%, #0c09c3 99.11%);
  color: #fff; font: 600 14px/1.2 Montserrat, sans-serif; text-decoration: none;
  box-shadow: 0 8px 24px rgba(15, 21, 53, .3);
}
.np-skip-link:focus, .np-skip-link:focus-visible { transform: none; color: #fff; }
#main-content { outline: none; }

/* Pause / play button for auto-advancing carousels (icon only; its accessible name is set by the script) */
.npx-carousel-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin: 10px auto 0; padding: 0;
  border-radius: 50%; border: 1px solid #9aa3b8; background: #fff; color: #0f1535; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.npx-carousel-toggle:hover { border-color: #270678; color: #270678; }
.npx-carousel-toggle svg { width: 14px; height: 14px; fill: currentColor; pointer-events: none; }
.ts-dots + .npx-carousel-toggle,
.ts-dots-wrapper + .npx-carousel-toggle { display: flex; }
.ktst-controls .npx-carousel-toggle { margin: 0 0 0 8px; }

@media (prefers-reduced-motion: reduce) {
  .np-skip-link, .npx-carousel-toggle { transition: none; }
}