/*
    gsml.css

    A CSS stylesheet/template/homogeniser for HTML and GSML (Gossamer Script Markup
    Language) that <em>assists</em> with semantic, responsive and accessible Web design

    Based on:
      * simple.css from simplecss.org
      * the output of Pandoc
      * Matthew James Taylor's work at matthewjamestaylor.com/web-design
      * HTML Living Standard of 30 September 2025 html.spec.what.org
      * gridbyexample.com
      * w3schools.org
      * css-tricks.com
      * various descriptions of CSS-Reset and related techniques
      * list counter style adapted from from RMF's work at stackoverflow

    Original stuff:
      * paragraph text is positioned identically to bare text
      * GSML custom tags such as x-filename and x-cmd

    Options:
      * Dark theme (commented out)
      * Grid (NOTE: This should be used carefully or commented out)

    Gotchas:
      * Responsive web design is not as simple as applying a 3-column grid and jamming everything
        in column 2.  Be on the lookout for problems such as too-small boxes with scroll bars and
        loads of white space either side.
      * Be sure that CSS variables (or "custom properties") are used to effect i.e. there are
        either multiple setters or multiple getters.

    More notes in CssNotes and csswingset.html

    TODO
      * Remove variables that are only used once or not at all DONE 2/10/25
      * Proofread comments on selectors in CssNotes DONE 3/10/2025
      * Fully understand stuff copied from elsewhere DONE 3/10/2025
      * Make the most of grids, in terms of accesibility and responsiveness DONE 3/10/2025

 */

/* Global variables for default (light) theme */

:root,
::backdrop {
  --text: #111111; /* The UX bros suggest #212121 but that's just nuts. Just a slight */
  --bg: #eeeeee;   /* bump to give a slight smoothing effect. Same for background */
}

/* Dark theme */

/*
@media (prefers-color-scheme: dark) {
  :root,
  ::backdrop {
    color-scheme: dark;
    --text: #eeeeee;
    --bg: #111111;
}
*/

html {
  /* Set the main font to a good sans-serif, proportional font */
  font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
    "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
    "Helvetica Neue", sans-serif;
}

/*  Set up a three-column grid and put all subelements in column 2
    NOTE: This is not the last word on responsive web design! Some elements must go elsewhere
 */

body {
  color: var(--text);
  background-color: var(--bg);
  line-height: 1.4; /* NOTE: Guidelines suggest 1.5 here */
  display: grid;
  grid-template-columns: 1fr min(57rem, 95%) 1fr;
  margin: 0;
}

body > * {
  grid-column: 2; /* Put all subelements in the middle column */
}

/* Elements with class "verywide" use all grid columns */

.verywide {
  grid-column: 1 / 4;
  margin-left: auto;
  margin-right: auto;
}

h1 {
  font-size: 2.7rem;
  line-height: 1.1; /* Fix line height when title wraps */
}

h2 {
  font-size: 2.6rem;
  margin-top: 3rem;
  line-height: 1.1;
}

h3 {
  font-size: 2rem;
  margin-top: 3rem;
  line-height: 1.1;
}

h4 {
  font-size: 1.44rem;
}

h5 {
  font-size: 1.15rem;
}

h6 {
  font-size: 0.96rem;
}

/* Consolidate box styling */

pre {
  /* Use mono font */
  font-family: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  border: 2px solid #898EA4;
  border-radius: .7rem; /* Give boxes a slight CRT shape */
  color: var(--code);
  background-color: #303030;
  color: lightgreen;
  margin-top: .7rem;
  margin-bottom: .7rem;
  padding-top: .7rem;
  padding-bottom: .7rem;
  padding-left: 1.2rem;
}

/* Gossamer original stuff */

p {
  margin-top: 8px;
  margin-bottom: 8px;
}

br {
  margin-bottom: .8rem;
}

x-filename {
  font-style: italic;
}

x-cmd {
  font-style: italic;
}

/*  List style adapted from from RMF's work at stackoverflow
 *  (This has to be named, possibly because it is a @counter-style.
 *  You can't just put suffix in the HTML style attribute)
 */

@counter-style lower-alpha-right-paren {
  system: extends lower-alpha;
  suffix: ') ';
}

@counter-style decimal-colon {
  system: extends decimal;
  suffix: ': ';
}