/* Pixel Porch — shared style.css
   Edit this stylesheet for every page in this website.
   Theme controls provide --page-bg, --surface, --text, --link, --font,
   --page-width, --sidebar-width and --tile. */
* { box-sizing: border-box; }
body { cursor: var(--cursor); margin: 0; padding: 36px 18px; background: var(--page-bg); background-image: var(--tile); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.7; }
.site { width: 100%; max-width: var(--page-width); margin: 0 auto; background: var(--surface); padding: 38px; border: var(--page-border-width) solid currentColor; min-height: 480px; }
.site-layout { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); gap: 28px; }
.site-layddout.sidebar-right { grid-template-columns: minmax(0, 1fr) var(--sidebar-width); }
.sidebar-right > .site-sidebar { order: 2; }
.site-sidebar { min-width: 0; padding-right: 20px; border-right: 1px solid currentColor; }
.sidebar-right > .site-sidebar { padding: 0 0 0 20px; border-left: 1px solid currentColor; border-right: 0; }
.site-sidebar nav { flex-direction: column; gap: 8px; }
.page-content { min-width: 0; }
h2 { font-size: 2em; line-height: 1.2; margin: 0 0 16px; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }
a { color: var(--link); }
.block { position: relative; margin: 0 0 22px; min-width: 0; overflow-wrap: anywhere; }
.block:last-child { margin-bottom: 0; }
.block-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.block-columns > .block { margin: 0; }
.block-image img { max-width: 100%; vertical-align: middle; }
hr { border: 0; border-top: 1px solid currentColor; opacity: .5; }
nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
nav a[aria-current] { font-weight: bold; }
img, iframe { max-width: 100%; }
pre { white-space: pre-wrap; }
.table-scroll { overflow-x: auto; }
.content-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.content-table td, .content-table th { vertical-align: top; padding: 8px; }
.content-table.with-borders td, .content-table.with-borders th { border: 1px solid currentColor; }
.content-table.no-borders td, .content-table.no-borders th { border: none; }
caption { text-align: left; font-weight: bold; padding-bottom: 8px; }
@media (max-width: 600px) {
  body { padding: 14px 10px; }
  .site { padding: 24px 18px; }
  .block-columns, .site-layout, .site-layout.sidebar-right { grid-template-columns: 1fr; }
  .site-sidebar, .sidebar-right > .site-sidebar { order: 0; padding: 0 0 20px; border: 0; border-bottom: 1px solid currentColor; }
  h2 { font-size: 1.7em; }
}


/* Pixel Porch three-column support */
.site-layout { display: grid; gap: 28px; }
.site-layout.has-left { grid-template-columns: var(--left-sidebar-width) minmax(0, 1fr); max-width: calc(var(--page-width) + var(--left-sidebar-width) + 28px); }
.site-layout.has-right { grid-template-columns: minmax(0, 1fr) var(--right-sidebar-width); max-width: calc(var(--page-width) + var(--right-sidebar-width) + 28px); }
.site-layout.has-left.has-right { grid-template-columns: var(--left-sidebar-width) minmax(0, 1fr) var(--right-sidebar-width); max-width: calc(var(--page-width) + var(--left-sidebar-width) + var(--right-sidebar-width) + 56px); }
.left-sidebar { padding-right: 20px; border-right: 1px solid currentColor; }
.right-sidebar { padding: 0 0 0 20px; border-left: 1px solid currentColor; border-right: 0; }
.link-group h3 { margin: 0 0 8px; font-size: 1em; }
.link-group ul { margin: 0; padding: 0; list-style: none; }
.link-group li { margin: 0 0 5px; }
@media (max-width: 700px) {
  .site-layout, .site-layout.has-left, .site-layout.has-right, .site-layout.has-left.has-right { grid-template-columns: 1fr; max-width: var(--page-width); }
  .site-sidebar { padding: 0 0 20px; border: 0; border-bottom: 1px solid currentColor; }
  .right-sidebar { padding: 20px 0 0; border: 0; border-top: 1px solid currentColor; border-bottom: 0; }
}

/* Pixel Porch mobile table support */
@media (max-width: 700px) {
  .table-mobile-stack { overflow: visible; }
  .table-mobile-stack .content-table, .table-mobile-stack tbody, .table-mobile-stack tr, .table-mobile-stack td { display: block; width: 100%; }
  .table-mobile-stack tr { margin-bottom: 14px; }
  .table-mobile-stack th { display: none; }
  .table-mobile-stack td[data-label] { display: grid; grid-template-columns: minmax(7em, 35%) minmax(0, 1fr); gap: 10px; }
  .table-mobile-stack td[data-label]::before { content: attr(data-label); font-weight: bold; overflow-wrap: anywhere; }
  .table-mobile-scroll .content-table { width: max-content; min-width: 100%; table-layout: auto; }
  .table-mobile-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-mobile-shrink .content-table { table-layout: fixed; font-size: .88em; }
  .table-mobile-shrink td, .table-mobile-shrink th { padding: 5px; overflow-wrap: anywhere; }
}

/* Pixel Porch custom font support */
h1 { font-family: var(--h1-font); }
h2, h3, h4, h5, h6 { font-family: var(--heading-font); }

/* Pixel Porch type styling support */
body { font-size: var(--body-size); font-weight: var(--body-weight); line-height: var(--body-line-height); letter-spacing: var(--body-letter-spacing); }
h1 { color: var(--h1-color); font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-line-height); letter-spacing: var(--h1-letter-spacing); }
h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: var(--heading-weight); line-height: var(--heading-line-height); letter-spacing: var(--heading-letter-spacing); }
h2 { font-size: var(--heading-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }
h5 { font-size: var(--h5-size); }
h6 { font-size: var(--h6-size); }