/* Additions to the simplysoft.net stylesheet. style.css stays unchanged. */

/* Without JavaScript script.js cannot set the header height. */
.large-header { min-height: 100vh; }
.no-js .scroll-down { display: none; }

.title-section { width: 90%; }

/* Details are visible by default. They collapse only when JavaScript runs. */
.js .expandable .item-details { display: none; }
.js .expandable.open .item-details { display: block; }
.no-js .expand-toggle { display: none; }

button.expand-toggle {
  background: none;
  border: 0;
  padding: 0;
  margin-right: 0.3em;
  font: inherit;
  color: inherit;
}
button.expand-toggle:focus-visible { outline: 2px solid #0ca2e3; outline-offset: 2px; }

.item-title { font-weight: bold; }
.item-tagline { font-weight: normal; }
.item-details, .item-details * { user-select: text; cursor: auto; }
.item-details a { cursor: pointer; }
.item-details p { margin: 0.6em 0; }

.status {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.1em 0.6em;
  border-radius: 1em;
  font-size: 0.8em;
  font-weight: bold;
  vertical-align: middle;
}
.status-live { background: #1f7a3d; color: #fff; }
.status-planned { background: #e6e0d4; color: #444; }

.meta { color: #555; }
.live-stats {
  padding: 0.5em 0.7em;
  border-left: 3px solid #1f7a3d;
  background: #f1f6f2;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-down { animation: none; }
}