/* ------------------------------------------------------------------
   Sposh overrides. Loaded after the theme stylesheets so these win.
   Keep site-specific fixes here rather than editing minified vendor CSS.
   ------------------------------------------------------------------ */

/* ---- animated cursor ---------------------------------------------
   The theme ships an animated dot + ring cursor but shipped it with
   `.mouse-cursor{display:none}`, so visitors only ever saw the OS
   pointer. Enable it on real pointer devices and hide the native one
   there. Touch devices are excluded, and form fields keep their native
   caret so typing and selecting text stay usable.                     */
@media (hover: hover) and (pointer: fine) {
  .mouse-cursor { display: block !important; }

  * { cursor: none !important; }

  input, textarea, select, [contenteditable="true"] { cursor: auto !important; }
}

/* Ring is 40px and was lagging well behind the pointer; tighten the
   non-transform transitions too (the JS sets the transform timing). */
.cursor-outer { transition: opacity .15s ease-out, border-color .15s ease-out !important; }
.cursor-inner { transition: opacity .15s ease-out, background-color .15s ease-out !important; }

/* ---- scroll-to-top button ----------------------------------------
   The theme drew its arrow with a FontAwesome private-use glyph. That
   glyph was corrupted into a literal string by the same encoding damage
   that hit the page copy, so it rendered as a broken box. Draw it as an
   inline SVG instead - no icon-font dependency at all.                */
.progress-wrap::after {
  content: "" !important;
  font-family: inherit !important;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23CCCCCC" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>') center / 14px 14px no-repeat !important;
}

/* Respect users who ask for less motion: drop the custom cursor and
   give them their own pointer back. */
@media (prefers-reduced-motion: reduce) {
  .mouse-cursor { display: none !important; }
  * { cursor: auto !important; }
}

/* ---- brand casing -------------------------------------------------
   The services accordion capitalises its titles, which turned the
   product name "sposh.it" into "Sposh.It". Our titles are already
   written in the casing we want, so opt out of the transform.        */
.tcgelements-services-accordion .accordion-header .accordion-title .title,
.tcgelements-services-accordion .accordion-header .title {
  text-transform: none !important;
}

/* ---- founder link -------------------------------------------------
   The founder name links to tarunpichika.com but inherited the body
   colour, and with the native cursor hidden there was no pointer cue
   either - so it did not read as clickable. Give it a visible
   affordance, and make the portrait a link target too.               */
a.founder-link { text-decoration: none; transition: opacity .2s, color .2s; }
a.founder-link:hover { opacity: .82; }

h5 a.founder-link,
h6 a.founder-link {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255,255,255,.35);
}
h5 a.founder-link:hover,
h6 a.founder-link:hover { text-decoration-color: #1554FF; color: #fff; }

/* Screen-reader-only heading, used where a page needs an H1 for search
   engines but the design has no visible slot for one. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}