/*
Theme Name: Index Of
Theme URI: https://example.com/
Author: You
Description: A block theme that renders your site like an old-school Apache "Index of /" directory listing. Categories become folders, posts become files, pages become text files. Includes sortable column headers, three colour variations, and a dynamic "Directory Listing" block.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: indexof
*/

body { margin: 0; }

.oi-header,
.oi-footer { padding-block: 0.75rem; font-size: 0.8rem; }
.oi-header p,
.oi-footer p { margin: 0; }
.oi-header a { text-decoration: none; }
.oi-header .oi-logo { margin: 0; text-align: center; }
.oi-header .oi-logo a { display: block; line-height: 0; }
.oi-header .oi-logo img { display: block; width: 100%; max-width: 640px; height: auto; margin-inline: auto; }

main { padding-block: 1.5rem 3rem; }
main h1 { font-size: 1.6rem; font-weight: 700; margin: 0 0 1rem; }

/* ---------- The listing ---------- */
.oi-listing { overflow-x: auto; }
.oi-listing h1 { margin-bottom: 0.75rem; word-break: break-all; }

.oi-listing table {
	border-collapse: collapse;
	width: 100%;
	min-width: 0;
}
.oi-listing th,
.oi-listing td {
	text-align: left;
	vertical-align: top;
	padding: 0.1rem 1.5rem 0.1rem 0;
	white-space: nowrap;
	font-weight: 400;
}
.oi-listing th { font-weight: 700; }
.oi-listing th a { text-decoration: none; }
.oi-listing th a:hover { text-decoration: underline; }
.oi-listing .oi-name { white-space: normal; word-break: break-all; min-width: 12ch; }
.oi-listing .oi-size,
.oi-listing th.oi-size { text-align: right; }
.oi-listing .oi-desc { white-space: normal; opacity: 0.75; }
.oi-listing .oi-icon { color: inherit; opacity: 0.7; }
.oi-listing hr {
	border: 0;
	border-top: 1px solid currentColor;
	margin: 0.25rem 0;
	opacity: 0.9;
}
.oi-listing .oi-empty { opacity: 0.6; }
.oi-listing address {
	font-style: italic;
	font-size: 0.85rem;
	margin-top: 0.5rem;
}
.oi-listing a:focus-visible,
.oi-header a:focus-visible { outline: 2px dashed currentColor; outline-offset: 2px; }

@media (max-width: 720px) {
	.oi-listing .oi-desc,
	.oi-listing .oi-icon { display: none; }
	.oi-listing th,
	.oi-listing td { padding-right: 1rem; }
}

/* ---------- Single posts / pages ---------- */
.oi-meta { gap: 1.5rem; font-size: 0.85rem; opacity: 0.8; margin-bottom: 1rem; }

/* Mix pages: centre the title, date and artist line */
.single main .wp-block-post-title,
.single main .oi-meta { text-align: center; }
.single main .oi-meta { justify-content: center; }
.oi-meta p { margin: 0; }
.oi-cd { margin-top: 2rem; }
.wp-block-post-content { max-width: 70ch; }
.wp-block-post-content iframe { max-width: 100%; }

/* ---------- Comments ---------- */
.oi-comments { margin-top: 2.5rem; max-width: 70ch; }
.oi-comments h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.75rem; }
.oi-comments hr,
.oi-comment { border: 0; }
.oi-comment { border-top: 1px dashed currentColor; padding: 0.75rem 0; margin: 0; }
.oi-comment-meta { gap: 1rem; font-size: 0.85rem; opacity: 0.8; }
.oi-comment-meta p,
.oi-comment-actions p { margin: 0; }
.oi-comment .wp-block-comment-content p { margin: 0.4rem 0; }
.oi-comment-actions { gap: 1rem; font-size: 0.85rem; }
.oi-comment ol,
.oi-comment ul { list-style: none; padding-left: 1.5rem; }

/* The comment *form* is supplied by WordPress.com/Jetpack and styled from
   Settings > Discussion (colour scheme), so it is deliberately not styled here. */