/*
(DEPRECATED) Document

Styles for elements within a document page or section

Styleguide Trumps.Scopes.Document
*/

.s-document {
  margin-bottom: var(--global-space--large);
}





/* ELEMENTS */

/* ELEMENTS: Text Content */

.s-document blockquote {
  opacity: 0.75;
  border: var(--global-border--normal);

  padding: 1em;
}
.s-document blockquote > *:last-child { margin-bottom: 0; }

@media only screen and (min-width: 768px) {
  blockquote { width: 600px; }
}

/* Treat nested definition lists like other nested lists */
/* NOTE: See `../elments/html-elements.html` for `dl dl` reference styles */
p + dl.small {
  padding-left: var(--global-space--list-indent);
}

/* ELEMENTS: Text Content */
/* ELEMENTS: Inline Text Semantics */
/* ELEMENTS: Image & Multimedia */
/* ELEMENTS: Interactive Elements */

/* FAQ: Pulls images, code, and some lists closer to paragraph above */
.s-document p + ul.small /* Bootstrap class */,
.s-document p + ol.small /* Bootstrap class */,
.s-document p + dl.small /* Bootstrap class */,
.s-document p + pre,
.s-document p + img,
.s-document p + details {
  margin-top: -0.75rem;
  margin-bottom: 1rem; /* mirror Bootstrap `_reboot.css` <p> */
}

/* ELEMENTS: Inline Text Semantics */

/* (any content or context) */ code,
/* (content has only output) */ pre > samp {
  background-color: var(--global-color-primary--x-light);

  border-width: var(--global-border-width--normal);
  border-style: solid;
  border-color: var(--global-color-primary--light);
}


/* ELEMENTS: Image & Multimedia */

/* NOTE: The `data_transfer.html` template uses <figure>'s */
.s-document img {
  display: block;
  width: 100%;
  max-width: 800px;

  border: var(--global-border--normal);
}
.s-document i.icon--as-image {
  font-size: 2.8em; /* body line-height * 2 */
  display: inline-block;
  padding: 0.25em;
  border: var(--global-border--normal);
}


/* ELEMENTS: Table Content */

.s-document table {
  width: 100%;
  max-width: 500px;

  text-align: center;
}

/* ELEMENTS: Interactive Elements */

/* FAQ: Indent details content, but not the summary */
.s-document details {
  --buffer-horz: 1em; padding-left: var(--buffer-horz);
}
.s-document summary { margin-left: calc( var(--buffer-horz) * -1 ); }

.s-document details[open] > summary { margin-bottom: 0.5em; }

/* Add explanation to summary toggle */
/* FAQ: The <details>/<summary> feature is not common in a paragraph context */
.s-document summary::after {
  display: inline-block;
  margin-left: 0.2rem;

  opacity: 0.75;
}
.s-document details[open] > summary::after { content: '(hide)'; }
.s-document details:not([open]) > summary::after { content: '(show)'; }





/* COMPONENTS */

/* COMPONENTS: Bootstrap */

.s-document .row > .col > *:last-child {
  margin-bottom: 0;
}
.s-document .row .row {
  padding: var(--global-space--normal) 0;
}
.s-document .row .row:nth-child(even) {
  background-color: var(--global-color-primary--x-light);
}