/* Set Foundation */

html {
  /* Set base font but support user-defined browser font size */
  /* SEE: https://snook.ca/archives/html_and_css/font-size-with-rem */
  font-size: 62.5%; /* 16px */
}

body {
  font-size: 1.6rem;
}



/* Organize Content */

main > dl {

  & :is(dt, dd):not(.no-demo-styles > *) {
    font-family: var(--global-font-family--sans);
    color: var(--global-color-primary--xx-dark);
    line-height: normal;
  }
  & dt:not(.no-demo-styles > *) {
    font-size: 1.6rem;
    margin-bottom: 10px;
  }
  & dt:not(.no-demo-styles > *) { font-weight: var(--bold); }
  & dl dt:not(.no-demo-styles > *) { font-weight: var(--medium); }
  & dl dl dt:not(.no-demo-styles > *) { font-weight: var(--regular); }

  & dt:not(:first-of-type):not(.no-demo-styles > *) {
    margin-top: 20px;
  }
  & dd:not(.no-demo-styles > *) {
    margin-bottom: 10px;
    margin-left: 25px;
  }

  & dl:not(.no-demo-styles) {
    margin-block: 0;
    padding-left: unset; /* undo html-elements.cms.css */
  }

}



/* Lay Out */

body > main {
  width: 80vw;
  margin-inline: auto;
  padding-block: 1em;
}

/* To show when body is covered by a full-width background */
body:has(main > section) {
  --color-light: var(--global-color-primary--xx-light);
  --color-dark: var(--global-color-primary--x-light);

  background-color: var(--color-dark);
  background: repeating-linear-gradient( 90deg,
    var(--color-dark),
    var(--color-dark) 1px,
    var(--color-light) 1px,
    var(--color-light) 20px
  );
}

/* To give equal block spacing to rulers */
hr {
  margin-top: var(--global-space--hr-buffer-above);

  margin-bottom: var(--global-space--hr-buffer-below);
}



/* Background */

/* To show when body is covered by a full-width background */
body:has(body > .o-section) {
  --color-light: var(--global-color-primary--xx-light);
  --color-dark: var(--global-color-primary--x-light);

  background-color: var(--color-dark);
  background: repeating-linear-gradient( -45deg,
    var(--color-dark),
    var(--color-dark) 1px,
    var(--color-light) 1px,
    var(--color-light) 20px
  );
}