/*
 * Custom properties for theming
 */

:root {
    --primary-color: rgb(46, 46, 46);
    --bg-color: rgb(249, 252, 255);
    --link-color: rgb(68, 56, 147);
    --accent: rgb(67, 102, 147);
    --faded-text-color: rgb(96, 96, 96);
    --accent-color-bright: rgb(82, 153, 242);
    --code-bg-color: rgb(235, 245, 255);
    --code-border-color: rgb(211, 211, 211);
    --warn-bg-color: rgb(255, 255, 228);
    --warn-border-color: rgb(239, 226, 124);
    --caution-bg-color: rgb(255, 196, 196);
    --caution-border-color: rgb(239, 125, 125);
    --callout-text-color: rgb(46, 46, 46);
    --callout-link-color: rgb(68, 56, 147);
    --section-border-color: rgb(223, 223, 223);
    --table-head-color: rgb(232, 232, 232);
    --table-stripe-color: rgb(235, 245, 255);
    --input-bg-color: rgb(253, 255, 215);
}

[data-theme="dark"] {
    --primary-color: rgb(247, 247, 247);
    --bg-color: rgb(38, 42, 60);
    --link-color: rgb(178, 190, 255);
    --accent: rgb(159, 201, 255);
    --faded-text-color: rgb(216, 216, 216);
    --accent-color-bright: rgb(82, 153, 242);
    --code-bg-color: rgb(84, 76, 137);
    --code-border-color: rgb(102, 62, 167);
    --warn-bg-color: rgb(226, 226, 120);
    --warn-border-color: rgb(168, 153, 32);
    --caution-bg-color: rgb(208, 147, 147);
    --caution-border-color: rgb(136, 72, 72);
    --callout-text-color: rgb(46, 46, 46);
    --callout-link-color: rgb(36, 47, 134);
    --section-border-color: rgb(68, 67, 67);
    --table-head-color: rgb(53, 54, 57);
    --table-stripe-color: rgb(61, 63, 70);
    --input-bg-color: rgb(253, 255, 215);
}

.logo img {
    content: url("logo-light.svg");
}

[data-theme="dark"] .logo img {
    content: url("logo-dark.svg");
}

/*
 * Fonts
 */

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    src: url(fonts/MaterialIcons-Outlined.woff2) format('woff2');
}
  
.material-icons {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'liga';
    vertical-align: bottom;
}

/*
 *  Global
 */

body {
    background-color: var(--bg-color);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 15px;
    color: var(--primary-color);
}

a {
    color: var(--link-color);
}

.nowrap { 
    white-space: nowrap; /* For Chrome, etc */
    word-break: keep-all; /* For Safari and friends */
}


/*
 *  Layout
 */

.main {
    max-width: 52em;
    margin: 1em auto;
    padding: 0.5em 1em 3em 1em;
    line-height: 1.7;
}


/*
 * Header
 */

.header {
    border-bottom: 1px solid var(--section-border-color);
    margin-bottom: 2em;
    font-weight: bold;
}

.header a {
    color: var(--primary-color);
}

.header h1 {
    font-size: 1.45em;
    margin: 0;
}

.header .nav-ctr {
    text-align: center;
}

.header img {
    max-width: 11em;
}

.header a {
    text-decoration: none;
}

.top-nav {
    margin: 1em auto;
}

.top-nav ul {
    padding: 0;
    margin: 0;
}

.top-nav li {
    display: inline-block;
    margin: auto 2em auto auto;
}

.main-sections {
    display: flex;
    row-gap: 1em;
    column-gap: 1em;
    flex-wrap: wrap;
    margin-bottom: 3em;
}

.main-sections a {
    color: var(--primary-color);
    text-decoration: none;
}

.main-sections > div {
    margin: 0 auto;
    text-align: center;
    width: 15em;
    height: 10em;
    overflow: hidden;
}

.section-link {
    padding: 0.5em;
}

.section-link .material-icons {
    font-size: 2em;
    color: var(--accent);
}

.section-link-title {
    font-weight: bold;
    color: var(--accent);
}

.section-link-desc {
    font-size: 0.9em;
    color: var(--faded-text-color);
}

.logo {
    margin: 1em 0 1.5em 0;
}



/*
 * Content Styles
 */


.anchor {
    visibility: hidden;
    text-decoration: none;
    color: var(--accent-color-bright);
    margin-left: 0.1em;
}

h1:hover a,
h2:hover a, 
h3:hover a,
h4:hover a {
    visibility: visible;
}

.content h1 {
    font-size: 1.65em;
}

.content h2 {
    font-size: 1.4em;
    border-bottom: 1px solid var(--section-border-color);
    margin-top: 2em;
}

.content h3, .content h4 {
    margin-bottom: 0.5em;
}

.content h3 + p, .content h4 + p {
    margin-top: 0.5em;
}

.content div + h2,
.content li + h2,
.content ul + h2,
.content p + h2,
.content table + h2,
.content div + h3,
.content li + h3,
.content ul + h3,
.content p + h3,
.content table + h3,
.content div + h4,
.content li + h4,
.content ul + h4,
.content p + h4,
.content table + h4 {
    margin-top: 2.5em;
}

.content :not(pre) > code {
    background-color: var(--code-bg-color);
    border: 1px solid var(--code-border-color);
    padding: 0.13em 0.35em;
    font-size: 0.9em;
}

.content pre {
    background-color: var(--code-bg-color);
    border: 1px solid var(--code-border-color);
    padding: 0.5em;
    overflow-x: auto;
    font-size: 0.9em;
}

.content img {
    max-width: 100%;
}

.content .list-cols-narrow ul {
    columns: 13em;
    column-gap: 2.5em;
}

.warning {
    background-color: var(--warn-bg-color);
    border-color: var(--warn-border-color);
    color: var(--callout-text-color);
    border-style: solid;
    border-width: 1px 1px 1px 5px;
    border-radius: 7px;
    font-size: 0.96em;
    padding: 0em 1em;
    margin-bottom: 2em;
}

.red-warning {
    background-color: var(--caution-bg-color);
    border-color: var(--caution-border-color);
    color: var(--callout-text-color);
    border-style: solid;
    border-width: 1px 1px 1px 5px;
    border-radius: 7px;
    font-size: 0.96em;
    padding: 0em 1em;
    margin-bottom: 2em;
}

.warning a, .red-warning a {
    color: var(--callout-link-color);
}


/* Tables */

.content table {
    border: 1px solid var(--section-border-color);
    border-collapse: collapse;
    margin: 1em 0;
}

.content .h-scroll {
    overflow-x: auto;
}

.content .h-scroll table {
    white-space: nowrap;
}

.content thead {
    background-color: var(--table-head-color);
}

.content td, .content th {
    padding: 0.2em 1em;
}

.content tr:nth-child(even) {
  background-color: var(--table-stripe-color);
}


/* Forms */

.content input[type="text"] {
    background-color: var(--input-bg-color);
    padding: 0.5em;
    border-radius: 7px;
    border: 2px solid rgb(81, 81, 81);
}


/*
 * Footer
 */

.footer {
    font-size: 0.9em;
    text-align:center;
    margin: 4em 0 2em 0;
    border-top: 1px solid var(--section-border-color);
}


/*
 * Search
 */

#search {
    max-width: 90%;
    width: 30em;
    font-size: 1.2em;
    margin: 0 auto;
    display: block;
}

#search-results {
    margin: 2em 0;
}

.result-line {
    margin-bottom: 1em;
}

.result-desc {
    font-size: 0.9em;
    font-style: italic;
}


/*
 * Narrow screens
 */

@media (max-width: 40em) {
    .top-nav ul {
        padding: 0;
        margin: 0;
    }
    
    .top-nav li {
        display: block;
        margin: auto;
    }
}