/* ==========================================================
   PHRENOLOGY DATABASE
   ========================================================== */

/* ---------- Colours ---------- */

:root {
    --background: #fcfcfc;
    --text: #222222;
    --heading: #2f4a63;
    --link: #1d5ea8;
    --link-hover: #0d3f73;
    --border: #dddddd;
    --light: #f8f8f8;
}

/* ---------- Page ---------- */

body {

    font-family: Georgia, "Times New Roman", serif;

    font-size: 15px;

    line-height: 1.5;

    color: var(--text);

    background: var(--background);

    max-width: 1100px;

    margin: auto;

    padding: 2rem 2.5rem;

}

/* ---------- Headings ---------- */

h1 {

    color: var(--heading);

    font-size: 1.8rem;

    font-weight: normal;

    margin-bottom: .25rem;

}

h2 {

    color: var(--heading);

    font-size: 1.25rem;

    font-weight: normal;

    margin-top: 0;

    margin-bottom: .5rem;

}

h3 {

    color: var(--heading);

    font-size: 1.05rem;

    margin-top: 2rem;

    margin-bottom: .6rem;

    padding-bottom: .35rem;

    border-bottom: 1px solid var(--border);

    font-weight: normal;

}

/* ---------- Navigation ---------- */

nav {

    margin: .75rem 0 1.75rem 0;

    padding-bottom: .75rem;

    border-bottom: 1px solid var(--border);

    font-size: .95rem;

}

.record-navigation {

    background: var(--light);

    border: 1px solid var(--border);

    border-radius: 4px;

    padding: .75rem 1rem;

    margin: 1rem 0 2rem 0;

    font-size: .95rem;

}

/* ---------- Links ---------- */

a {

    color: var(--link);

    text-decoration: none;

}

a:hover {

    color: var(--link-hover);

    text-decoration: underline;

}

/* ---------- Paragraphs ---------- */

p {

    margin: .7rem 0;

    max-width: 80ch;

}

/* ---------- Tables ---------- */

table {

    width: 100%;

    border-collapse: collapse;

    margin: 1rem 0 2rem 0;

    font-size: .95rem;

}

th,
td {

    border: 1px solid var(--border);

    padding: .6rem .8rem;

    vertical-align: top;

    text-align: left;

}

th {

    width: 170px;

    background: var(--light);

    font-weight: 600;

}

/* ---------- Entry list ---------- */

.child-row td:first-child,
.child-row td:nth-child(2) {

    padding-left: 2rem;

}

.entry-type {

    color: #777;

    font-style: italic;

    margin-left: .4rem;

    font-size: .85em;

}

.child-row a {

    font-weight: normal;

}

tr:not(.child-row) a {

    font-weight: 600;

}

tbody tr:hover {

    background: #fafafa;

}

/* ---------- Metadata ---------- */

.metadata {

    margin-bottom: 1.5rem;

}

.metadata p {

    margin: .3rem 0;

    line-height: 1.45;

}

.metadata strong {

    color: #444;

    font-weight: 600;

    display: inline-block;

    min-width: 9rem;

}

/* ---------- Horizontal rules ---------- */

hr {

    border: none;

    border-top: 1px solid var(--border);

    margin: 2rem 0;

}

/* ---------- Details ---------- */

details {

    margin-top: 1rem;

}

summary {

    cursor: pointer;

    color: var(--heading);

    font-weight: 600;

}

pre {

    white-space: pre-wrap;

    word-break: break-word;

    background: #fafafa;

    border: 1px solid var(--border);

    border-radius: 4px;

    padding: 1rem;

    overflow-x: auto;

    font-size: .9rem;

    line-height: 1.45;

}

/* ---------- Lists ---------- */

ul {

    padding-left: 1.3rem;

}

li {

    margin-bottom: .4rem;

}

/* ---------- Responsive ---------- */

@media (max-width: 800px) {

    body {

        padding: 1rem;

        font-size: 15px;

    }

    th {

        width: 140px;

    }

}