/* 60-application.css */

/*
 * These styles are for elements rendered in a/v/v2/layouts/application.
 *
 * I'm excluding the site-modal and site-nav styles so this file doesn't
 * become too large.
 */

#site-header {
  /* positioning */
	position: fixed;
  left: 0;
  right: 0;
	top: 0;
  z-index: 1;

  /* layout */
  height: 3em;

  /* appearance */
  background: var(--header-background-color);
}

#site-main {
  /* positioning */
  position: relative;
  top: 4em; /* push the top down below the header */

  /* layout */
  margin-left: 0.5em;
  margin-right: 0.5em;
}

#site-footer {
  /* positioning */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;

  /* layout */
  height: 1.5em;

  /* appearance */
  background: var(--footer-background-color);
}

#copyright {
  font-size: 0.8em;
}

#pwa-install-button {
  /* positioning */
  float: right;

  /* layout */
  display: none; /* shown by JS when prompt available */
  margin-left: 1rem;
  padding: 0.45rem 0.9rem;

  /* appearance */
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 6px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.18);
  font-weight: 700;
}

#pwa-install-button:focus {
  /* appearance */
  outline: 2px solid rgba(255,255,255,0.6);
  outline-offset: 2px;
}