/* Layout and content tweaks on top of Pico. */

:root { --pico-font-size: 100%; }

header nav .brand { text-decoration: none; }
header nav details.dropdown ul { max-height: 70vh; overflow-y: auto; }

nav[aria-label="breadcrumb"] { margin-bottom: 1rem; }

.layout.with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 2.5rem; }
.layout aside nav { position: sticky; top: 1rem; }
.layout aside h2 { font-size: 1rem; margin-bottom: .5rem; }
.layout aside ul { padding: 0; }
.layout aside li { list-style: none; padding: .15rem 0; }
@media (max-width: 900px) {
  .layout.with-aside { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .layout aside nav { position: static; }
}

article { overflow-wrap: anywhere; }
article table { display: block; overflow-x: auto; }
article table th, article table td { overflow-wrap: normal; min-width: 6rem; }
article pre { white-space: pre; overflow-x: auto; }
article h1, article h2, article h3 { scroll-margin-top: 1rem; }
article img, article svg { max-width: 100%; height: auto; }

blockquote.alert { border-inline-start-width: .3rem; }
blockquote.alert::before { content: attr(data-alert); display: block; font-weight: 700; margin-bottom: .25rem; }
blockquote.alert-note { border-inline-start-color: #1f6feb; }
blockquote.alert-tip { border-inline-start-color: #238636; }
blockquote.alert-important { border-inline-start-color: #8957e5; }
blockquote.alert-warning { border-inline-start-color: #9e6a03; }
blockquote.alert-caution { border-inline-start-color: #da3633; }

.tags mark { font-size: .8rem; }
footer { color: var(--pico-muted-color); }