/* Definitions */
:root {
    --len-dropdown: 200px;
    --len-half: 0.5rem;
    --len-line-height: 1.4; /* instead of standard 1.2 */
    --len-one: 1rem;
    --len-page: 960px; /* 60rem at 16px base; kept in px since Chota uses 62.5% html base */
    --len-quarter: 0.25rem;
    --len-thick-double: 8px;
    --len-thick: 4px;
    --len-thin: 1px;
    --size-code: 0.9em;
    --font-size: 1.8rem; /* 18px; larger than chota's default 16px */
}

/* Lock heading sizes in rem so they don't scale with body font-size */
h1 { font-size: 3.2rem; }
h2 { font-size: 2.8rem; }
h3 { font-size: 2.4rem; }
h4 { font-size: 2rem; }

/* Body overrides */
body {
    line-height: var(--len-line-height);
    max-width: var(--len-page);
    margin: auto;
    padding-left: var(--len-half);
    padding-right: var(--len-half);
}

/* Generic positioning (used in footer) */
.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }

/* Keyboard focus indicator */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Skip-to-main link: hidden until focused */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    background-color: var(--bg-color);
    color: var(--color-primary);
    padding: var(--len-half) var(--len-one);
    z-index: 100;
    text-decoration: none;
    border: solid var(--len-thin) var(--color-primary);
}
.skip-link:focus {
    transform: none;
}

/* Table captions: centered below table, minimum half page width */
caption {
    caption-side: bottom;
    text-align: center;
    min-width: calc(var(--len-page) / 2);
}

/* Code text — override Chota's red error color with neutral */
code {
    font-size: var(--size-code);
    color: var(--font-color);
}

/* Appendices */
div#appendices ol {
    list-style-type: upper-alpha;
}

/* Figures */
figure {
    text-align: center;
}
figcaption {
    text-align: center;
}

/* Footer */
footer {
    margin-top: var(--len-half);
    border-top: solid var(--color-lightGrey) var(--len-thin);
    padding-top: var(--len-half);
    margin-bottom: var(--len-half);
    text-align: center;
}

/* Headings */
h1, h2, h3 {
    margin-bottom: var(--len-thick-double);
}
h2, h3 {
    margin-top: 1.5rem;
}

/* Page heading */
h1 {
    text-align: center;
}
p.subtitle {
    text-align: center;
    font-style: italic;
}

/* Images */
img {
    height: auto;
}
img.img-90 {
    width: 90%;
}


/* Dropdown menu */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Baseline-align all items in the nav row */
.nav-left {
    align-items: baseline;
}

/* Make dropdown a flex container so its button participates in baseline alignment */
.nav .dropdown {
    display: flex;
}

.dropdown > button {
    background: none;
    border: none;
    padding: 1rem 2rem; /* match Chota's .nav a padding */
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--bg-secondary-color);
    min-width: var(--len-dropdown);
    box-shadow: 0px var(--len-thick) var(--len-thick-double) 0px rgba(0,0,0,0.2);
    border-radius: var(--len-thick);
    z-index: 1;
}

ul.dropdown-content {
    list-style: none;
    padding-left: 0;
    margin-top: 0;
}

.dropdown-content a {
    padding: var(--len-half) var(--len-one);
    display: block;
    white-space: nowrap;
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
    display: block;
}

/* Code block */
pre {
    background-color: var(--bg-secondary-color);
    padding: var(--len-half);
    padding-left: 1rem;
    overflow-x: auto;
}

/* Stronger focus ring on scrollable code blocks */
pre:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Language label for screen readers and sighted users */
pre[data-lang]::before {
    content: attr(data-lang);
    display: block;
    font-family: var(--font-family-sans);
    font-size: 0.75rem;
    color: var(--color-grey);
    margin-bottom: var(--len-quarter);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Table — Chota handles collapse and alignment; we add borders and hover */
table {
    width: auto;
    min-width: 50%;
    margin: 0 auto var(--len-half);
}

td, th {
    border: solid var(--len-thin) var(--color-lightGrey);
    padding: 1.2rem 0.8rem;
}

tr:hover {
    background-color: var(--bg-secondary-color);
}

thead {
    background-color: var(--bg-secondary-color);
}

/* Lists: 1.5rem minimum indent for legibility */
ol {
    padding-left: 1.5rem;
    margin-top: 0px;
}
ul {
    padding-left: 1.5rem;
    margin-top: 0px;
    list-style-type: disc;
}

/* Callouts and Syllabus — Chota-consistent style */
div.callout,
div.syllabus {
    border-left: 3px solid var(--color-primary);
    padding: 1rem;
    background-color: var(--bg-secondary-color);
    border-radius: 4px;
}
div.callout > :last-child,
div.syllabus > :last-child {
    margin-bottom: 0;
}

/* Definitions */
dt:not(:first-child) {
    margin-top: var(--len-quarter);
}
dd {
    margin-left: 1.5rem;
    margin-bottom: var(--len-half);
}

/* Glossary reference links: visually hidden label for screen readers */
a.gl-ref {
    position: relative;
}
a.gl-ref::after {
    content: "\00a0(glossary)";
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Collapsible explanation blocks */
details.explanation {
    margin-top: var(--len-one);
}
details.explanation > summary {
    cursor: pointer;
    color: var(--color-primary);
    list-style: disclosure-closed;
    padding: var(--len-quarter) 0;
}
details.explanation[open] > summary {
    list-style: disclosure-open;
}