/* This stylesheet is loaded first, then all of Instiki's styles. Apart from
 * loading the global ROOL stylesheet, it further provides styles that can
 * optionally give a visual impression similar to Acorn's original PRMs and
 * Style Guide, along with ROOL's updated reprints. A few miscellaneous other
 * fixes/modifications are included too.
 */

@import url("/theme/riscosone.css");

/*****************************************************************************\
 * PRM-like fonts
\*****************************************************************************/

@font-face {
  font-family: "PRM";
  font-weight: normal;
  src: local("ITC Novarese Std Book");
}

@font-face {
  font-family: "PRM";
  font-weight: normal;
  font-style: italic;
  src: local("ITC Novarese Std Book Italic");
}

@font-face {
  font-family: "PRM";
  font-weight: bold;
  src: local("ITC Novarese Std Bold");
}

@font-face {
  font-family: "PRM";
  font-weight: bold;
  font-style: italic;
  src: local("ITC Novarese Std Bold Italic");
}

@font-face {
  font-family: "PRM";
  font-weight: 600;
  src: local("ITC Novarese Std Medium");
}

@font-face {
  font-family: "PRM";
  font-weight: 600;
  font-style: italic;
  src: local("ITC Novarese Std Medium Italic");
}

@font-face {
  font-family: "PRM";
  font-weight: 900;
  src: local("ITC Novarese Std Ultra");
}

/*****************************************************************************\
 * PRM-like styles
\*****************************************************************************/

div.prm_style#pageTitle {
  padding-top: 20px;
  border-top: 6px solid #b3b3b3;

  padding-bottom: 20px;
  border-bottom: 6px solid #b3b3b3;
  margin-bottom: 40px;
}

@media (prefers-color-scheme: dark) {
  div.prm_style#pageTitle {
    border-top-color: #666;
    border-bottom-color: #666;
  }
}

div.prm_style#pageTitle h1 {
  font-family: sans-serif;
  font-weight: normal;
  font-size: 250%;
}

/* ITC Novarese is the commercial PRM font; Lora is a similar no-charge font
 * from Google Fonts that can be used as a fallback.
 */

div.prm_style#pageContent {
  font-family: "PRM", "Lora", serif;
  font-size: 13pt;
}

div.prm_style#pageContent h2 {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 140%;
}

div.prm_style#pageContent h3 {
  font-family: sans-serif;
  font-weight: 600;
  font-size: 120%;
}

div.prm_style#pageContent h4,
div.prm_style#pageContent h5,
div.prm_style#pageContent h6,
div.prm_style#pageContent div.property {
  font-family: sans-serif;
  font-weight: bold;
}

@media (min-width: 800px) {
  div.prm_style#pageContent div.content:has(> div#toc_heading),
  div.prm_style#pageContent div.content:has(> div#toc),
  div.prm_style#pageContent div.content:has(> div.property),
  div.prm_style#pageContent div.content:has(> h1:first-child, > h2:first-child, > h3:first-child, > h4:first-child, > h5:first-child, > h6:first-child) {
    margin-left: 120px;
  }

  div.prm_style#pageContent div.content:has(> div#toc_heading) > div#toc_heading > h2,
  div.prm_style#pageContent div.content:has(> div#toc_heading) > div#toc,
  div.prm_style#pageContent div.content:has(> div#toc_heading) > div.property,
  div.prm_style#pageContent div.content:has(> div#toc_heading) > h1,
  div.prm_style#pageContent div.content:has(> div#toc_heading) > h2,
  div.prm_style#pageContent div.content:has(> div#toc) > div#toc_heading > h2,
  div.prm_style#pageContent div.content:has(> div#toc) > div#toc,
  div.prm_style#pageContent div.content:has(> div#toc) > div.property,
  div.prm_style#pageContent div.content:has(> div#toc) > h1,
  div.prm_style#pageContent div.content:has(> div#toc) > h2,
  div.prm_style#pageContent div.content:has(> div.property) > div#toc_heading > h2,
  div.prm_style#pageContent div.content:has(> div.property) > div#toc,
  div.prm_style#pageContent div.content:has(> div.property) > div.property,
  div.prm_style#pageContent div.content:has(> div.property) > h1,
  div.prm_style#pageContent div.content:has(> div.property) > h2,
  div.prm_style#pageContent div.content:has(> h1:first-child, > h2:first-child, > h3:first-child, > h4:first-child, > h5:first-child, > h6:first-child) > h1,
  div.prm_style#pageContent div.content:has(> h1:first-child, > h2:first-child, > h3:first-child, > h4:first-child, > h5:first-child, > h6:first-child) > h2 {
    margin-left: -120px;
  }


  div.prm_style#pageContent div.content:has(> div#toc_heading) > h3,
  div.prm_style#pageContent div.content:has(> div#toc_heading) > h4,
  div.prm_style#pageContent div.content:has(> div#toc_heading) > h5,
  div.prm_style#pageContent div.content:has(> div#toc_heading) > h6,
  div.prm_style#pageContent div.content:has(> div#toc) > h3,
  div.prm_style#pageContent div.content:has(> div#toc) > h4,
  div.prm_style#pageContent div.content:has(> div#toc) > h5,
  div.prm_style#pageContent div.content:has(> div#toc) > h6,
  div.prm_style#pageContent div.content:has(> div.property) > h3,
  div.prm_style#pageContent div.content:has(> div.property) > h4,
  div.prm_style#pageContent div.content:has(> div.property) > h5,
  div.prm_style#pageContent div.content:has(> div.property) > h6,
  div.prm_style#pageContent div.content:has(> h1:first-child, > h2:first-child, > h3:first-child, > h4:first-child, > h5:first-child, > h6:first-child) > h3,
  div.prm_style#pageContent div.content:has(> h1:first-child, > h2:first-child, > h3:first-child, > h4:first-child, > h5:first-child, > h6:first-child) > h4,
  div.prm_style#pageContent div.content:has(> h1:first-child, > h2:first-child, > h3:first-child, > h4:first-child, > h5:first-child, > h6:first-child) > h5,
  div.prm_style#pageContent div.content:has(> h1:first-child, > h2:first-child, > h3:first-child, > h4:first-child, > h5:first-child, > h6:first-child) > h6 {
    margin-left: -43px;
  }

  div.prm_style#pageContent div.content:has(> h3:first-child) > h3,
  div.prm_style#pageContent div.content:has(> h4:first-child) > h4,
  div.prm_style#pageContent div.content:has(> h5:first-child) > h5,
  div.prm_style#pageContent div.content:has(> h6:first-child) > h6 {
    margin-left: -120px;
  }
}

/*****************************************************************************\
 * Miscellaneous
\*****************************************************************************/

/* Ad-hoc emergence of a series of H6 navigation entries at the top of pages
 * allows us to define a special case set of styles that catch a good many of
 * these, providing additional visual separation between navigation and body.
 */

#pageContent h6 + *,
#pageContent h6:first-child {
  margin-top: 20px;
}

#pageContent h6 + h6 {
  margin-top: 2px;
}

/* Header-plus-table needs some room */

h2 + table, h3 + table, h4 + table, h5 + table, h6 + table {
  margin-top: 1em;
}

/* Push the time and author attribution further from the main content */

#pageContent div.byline {
  margin-top: 40px;
}

/* Improve markup help behaviour, especially in narrower viewports */

div#wikiEditorWithMarkupHelp {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 0.5em;
  gap: 0.5em;
}

@media (max-width: 480px) {
  div#wikiEditorWithMarkupHelp {
    flex-direction: column;
  }
}

div#wikiEditorWithMarkupHelp div#markupHelpContainer {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
}

div#wikiEditorWithMarkupHelp div#MarkupHelp {
  float: none;
  min-width: fit-content;
}

div#wikiEditorWithMarkupHelp div#MarkupHelp td {
  white-space: normal;
}