/* Web-edition additions on top of the sign's style.css (kept identical to the Pi's copy). */

/* the city menu is a real <select> here, focusable with a TV remote */
.wordmark:focus-visible { outline: 0.35vh solid var(--gold); outline-offset: 0.6vh; border-radius: 0.4vh; }
.wordmark { max-width: 40vw; text-overflow: ellipsis; }

.qr-box.hidden { display: none; }

/* small controls in the top bar's own flow, just left of the clock, so they can't overlap anything on
   any screen shape; they fade out (keeping their space) when the remote or mouse sits still */
.web-controls {
  display: flex; gap: 1vh; flex: none; margin: 0 2.4vh 0 1.6vh;
  transition: opacity 0.4s ease;
}
.web-btn {
  font: 700 1.6vh/1 Arial, sans-serif; color: var(--white); text-decoration: none; cursor: pointer;
  background: rgba(13, 42, 85, 0.85); border: 0.15vh solid rgba(255, 255, 255, 0.35);
  border-radius: 0.8vh; padding: 1vh 1.4vh;
}
.web-btn:hover, .web-btn:focus-visible { border-color: var(--gold); outline: none; }
body.idle .web-controls { opacity: 0; pointer-events: none; }
body.idle, body.idle * { cursor: none !important; }

/* headline ticker: a clear gap and a gold bullet between stories */
.ticker-content { white-space: nowrap; }
.tk-sep { display: inline-block; margin: 0 4.5vh; color: var(--gold); }

.web-credit { position: absolute; right: 1.2vh; bottom: 0.6vh; font-size: 1.2vh; opacity: 0.45; }

/* headless screenshots: no transitions to catch half-way */
html.still *, html.still *::before, html.still *::after { transition: none !important; }