/* kate: space-indent on; indent-width 2; replace-tabs on; hl CSS; */

body {
  font-family:   "Georgia", "Times New Roman", serif;
  font-size:     18px; /* 14pt */
  line-height:   1.6;  /* improves readability */
}

h1, h2, h3, h4, h5, h6 {
  font-family:   "Roboto", "Open Sans", Arial, sans-serif;
  font-weight:   bold;
  margin-top:    1rem;
  margin-bottom: 0.5rem;
}

h1 { font-size: 48px; /* 36pt */ }
h2 { font-size: 42px; /* 32pt */ }
h3 { font-size: 36px; /* 28pt */ }
h4 { font-size: 32px; /* 24pt */ }
h5 { font-size: 26px; /* 20pt */ }
h6 { font-size: 22px; /* 16pt */ }

.short-message {
  font-family:   "Arial", "Verdana", sans-serif;
  font-size:     22px;
  font-weight:   bold;
  padding:       10px;
}

code {
  color: var(--color-text);
  font-size: 16px /* 12pt */;
}

.codehilite {
  background-color: var(--color-background) !important; /* override pygments.css */
}

.ticketmessage-body {
  .ticketmessage-content h1 { font-size: 22px; }
  .ticketmessage-content h2 { font-size: 18px; margin-left:  5px; }
  .ticketmessage-content h3 { font-size: 18px; margin-left: 15px; }
  .ticketmessage-content h4 { font-size: 18px; margin-left: 30px; }
  .ticketmessage-content h5 { font-size: 18px; margin-left: 45px; }
  .ticketmessage-content h6 { font-size: 18px; margin-left: 60px; }
}

a.ticketmessage-link {
  font-family:   "Georgia", "Times New Roman", serif;
}

button, .button {
  font-family:   "Helvetica", "Tahoma", sans-serif;
  font-size:     18px;
  font-weight:   bold;
  padding:       10px 15px;
  border:        none;
  cursor:        pointer;
  transition:    background-color 0.2s ease;
}

button:hover, .button:hover {
  background-color: #0056b3;
}

div.ticketmessage-composeform {
  div.ticket-title-edit {
    input { /* h6 */
      font-family:   "Roboto", "Open Sans", Arial, sans-serif;
      font-weight:   bold;
      font-size:     22px;
    }
  }
}

div.search-bar-container {
  font-size: 16px;
  button {
    font-size: 16px;
  }
  input {
    font-size: 16px;
  }
}


@media screen and (max-width:576px /* bootstrap xs */) {
  /* https://www.learnui.design/blog/mobile-desktop-website-font-size-guidelines.html */
  h1    { font-size: 36px; }
  h2    { font-size: 32px; }
  h3    { font-size: 26px; }
  h4    { font-size: 22px; }
  h5    { font-size: 20px; }
  h6    { font-size: 18px; }
  body  { font-size: 16px; font-family: "Roboto", "Open Sans", Arial, sans-serif; }
  input { font-size: 16px; }
}