/* One hover colour for buttons and menu items, by mode. Loaded last on every page.
   Light mode: amber #E7B139 with black text.  Dark mode: teal #0E756D with white text.
   Not touched: the FAQ questions, the light/dark switch, disabled buttons, delete (red) buttons and the selected tab. */
:root { --hv-bg: #E7B139; --hv-ink: #000; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hv-bg: #0E756D; --hv-ink: #fff; } }
:root[data-theme="dark"] { --hv-bg: #0E756D; --hv-ink: #fff; }

/* hover colours only where there is a real mouse: on touch screens a hover stays stuck after a tap */
@media (hover: hover) and (pointer: fine) {
button:not(.tswitch):not(.danger):not(:disabled):not(.on):hover,
button:not(.tswitch):not(.danger):not(:disabled):not(.on):focus-visible,
.btn:not(.on):hover, .btn:not(.on):focus-visible,
.lp-btn:hover, .lp-btn:focus-visible,
nav a:not(.on):hover, nav a:not(.on):focus-visible,
#more-btn:not(.on):hover,
.menu a:not(.on):hover, .menu a:not(.on):focus-visible,
.lp-menu > a:hover, .lp-menu > a:focus-visible,
.lp-links a:hover, .lp-links a:focus-visible,
a.g-btn:hover, a.g-btn:focus-visible,
a.auth-close:hover {
  background: var(--hv-bg) !important;
  background-color: var(--hv-bg) !important;
  color: var(--hv-ink) !important;
  border-color: var(--hv-bg) !important;
  filter: none !important;
  box-shadow: none;
}
nav a:not(.on):hover, #more-btn:not(.on):hover { box-shadow: none !important; }
.lp-btn:hover { transform: translateY(-1px); }

/* amber buttons (Get started now, Log in / Create account, Subscribe...): they turn teal with white text on hover, in light mode too,
   because amber-to-amber would barely change */
.lp-btn.solid:hover, .lp-btn.solid:focus-visible,
.lp-cta .lp-btn.solid:hover, .lp-actions .lp-btn.solid:hover,
.auth-go:hover:not(:disabled), .auth-go:focus-visible,
.trial-bar .btn.primary:hover, .trial-bar .btn.primary:focus-visible {
  background: #0E756D !important;
  background-color: #0E756D !important;
  border-color: #0E756D !important;
  color: #fff !important;
  filter: none !important;
}
}

@media (min-width: 901px), (pointer: fine) { .sb-nav a:not(.on):hover, .sb-nav a:not(.on):focus-visible { background: var(--hv-bg) !important; color: var(--hv-ink) !important; } .side-toggle:hover { background: var(--hv-bg) !important; color: var(--hv-ink) !important; border-color: var(--hv-bg) !important; } }

/* touch screens: no grey/blue tap box, and a quick press-in instead of hover colours */
html { -webkit-tap-highlight-color: transparent; }
a, button, label, input, select, textarea, summary, [role="button"] { touch-action: manipulation; } /* no wait for a possible double-tap zoom */
@media (hover: none), (pointer: coarse) {
  button, .btn, .mb-act > span, .mb-tile, .tabbar a, .tabbar button, .lp-btn, .store-badge, .sel-pop button { transition: transform .1s ease, filter .1s ease; }
  button:active:not(:disabled), .btn:active, .lp-btn:active, .store-badge:active, .mb-tile:active { transform: scale(.96); filter: brightness(1.08); }
  .mb-act:active > span { transform: scale(.9); filter: brightness(1.15); }
  .tabbar a:active svg, .tabbar button:active svg { transform: scale(.88); }
  a:focus, button:focus { outline: none; }
  a:focus-visible, button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
}

/* home page FAQ questions use the same hover colour as the feature buttons */
.faq summary:hover, .faq summary:focus-visible { background: var(--hv-bg) !important; color: var(--hv-ink) !important; }
.faq summary:hover::after, .faq summary:focus-visible::after { border-color: currentColor; }
.faq summary { padding-left: 12px; border-radius: 8px; } /* room so the hover colour does not touch the text */

/* home page phone menu: Download (amber) and Log in (teal) swap colours while either one is hovered */
@media (max-width: 860px) and (pointer: coarse) {
  .lp-menu > a.lp-dl { background: #FEBF3F !important; color: #1a1300 !important; border-color: #FEBF3F !important; }
  .lp-menu > a[href="/login.html"] { background: #0F776F !important; color: #fff !important; border-color: #0F776F !important; }
  .lp-menu:has(> a.lp-dl:hover, > a[href="/login.html"]:hover, > a.lp-dl:focus-visible, > a[href="/login.html"]:focus-visible) > a.lp-dl { background: #0F776F !important; color: #fff !important; border-color: #0F776F !important; }
  .lp-menu:has(> a.lp-dl:hover, > a[href="/login.html"]:hover, > a.lp-dl:focus-visible, > a[href="/login.html"]:focus-visible) > a[href="/login.html"] { background: #FEBF3F !important; color: #1a1300 !important; border-color: #FEBF3F !important; }
}

/* light mode is switched off for now (theme.js): hide the light/dark switches */
#theme, #theme-btn, body.has-sidebar .tools #theme, .sb-theme { display: none !important; } /* the phone header and the side menu have their own copies */