/*
Theme Name: dic-theme
Description: Classic theme for don.dream-in-color.net, preserving the site's look and its sitemap-style navigation (parents, siblings, children of the current page) via the dic-migration plugin.
Version: 0.1.0
*/

/* Without this, any element combining a percentage width with padding
   (e.g. .site-header-bar's width:100% + padding:4px 10px) renders wider
   than its containing box, since content-box adds padding on top of the
   specified width instead of inside it — that's what was pushing the
   whole page a bit past 100% and causing horizontal scroll. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	/* #main's own left/right padding, and #navbar's width + the extra
	   clearance beyond it — named so h2's full-bleed background (further
	   down) can break out to exactly the page edge and the navbar without
	   duplicating these as separate hardcoded numbers that could drift
	   out of sync with #main/#navbar's own rules. */
	--main-gutter: 20px;
	--nav-width: 240px;
	--nav-gap: 10px;
}

body {
	margin: 0;
	background: #FFFFEE;
	color: #111111;
	font-family: Trebuchet, Verdana, Tahoma, Helvetica, Arial, sans-serif;
	/* Explicit, rather than relying on the browser default happening to
	   match — anything that isn't inside a <p>/<td>/etc (e.g. a diary or
	   book-review entry's unwrapped first line, before its own inner
	   <p> tags start) inherits this directly, and needs to visually
	   match the paragraphs around it. */
	font-size: 16px;
}

a:link { color: #FF0000; text-decoration: none; }
a:visited { color: #770000; text-decoration: none; }
a:active { color: #FF7777; text-decoration: none; }
a:hover { color: #FF7777; text-decoration: none; }

.site-header-bar {
	/* Fixed (not in normal flow) so it stays anchored to the very top of
	   the viewport at all times, matching #navbar's own fixed behavior
	   below — previously it was in-flow, which scrolled it away with the
	   rest of the page and left a blank gap above #navbar (which stays
	   put) the moment the page was scrolled at all. z-index keeps it
	   painting above scrolling #main content passing underneath it. */
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	/* A fixed, explicit height (rather than one driven by font metrics
	   and padding) is what lets #navbar's "top" below line up against it
	   exactly, with no gap, regardless of font rendering. */
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	background: #EEEEDD;
	padding: 0 10px;
}

.site-header-bar b {
	font-size: 1.6em;
	font-family: Impact, Helvetica, Arial, sans-serif;
}

#main {
	/* Compensates for .site-header-bar now being fixed/out of flow —
	   without this, #main (the next element after it in the DOM) would
	   rise to fill the space vacated at the top of the page and render
	   underneath the fixed header bar. */
	margin-top: 40px;
	margin-right: calc(var(--nav-width) + var(--nav-gap));
	padding: 0 var(--main-gutter);
}

#navbar {
	/* fixed, not absolute (the original CSS's technique): with a page
	   taller than the viewport, "bottom: 0" on an absolutely positioned
	   element doesn't reliably extend to the actual bottom of the page in
	   this context — it was leaving a gap once scrolled. Fixed positioning
	   anchors directly to the viewport, so it always spans top to bottom
	   of the visible screen regardless of page length or scroll position. */
	position: fixed;
	width: var(--nav-width);
	right: 0;
	background: #DDEEFF;
	top: 40px;
	bottom: 0;
	overflow-y: auto;
	padding: 10px;
}

/* The WP admin toolbar is itself fixed at the true viewport top, so it
   would sit directly on top of .site-header-bar (also now fixed at
   top:0) unless both #navbar and .site-header-bar are pushed down to
   make room for it. WP's toolbar is 32px tall normally, 46px at its own
   mobile breakpoint (782px) — matched here so everything stays flush
   with no gap or overlap in either case. */
body.admin-bar .site-header-bar {
	top: 32px;
}

body.admin-bar #navbar {
	top: calc(40px + 32px);
}

body.admin-bar #main {
	margin-top: calc(40px + 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .site-header-bar {
		top: 46px;
	}

	body.admin-bar #navbar {
		top: calc(40px + 46px);
	}

	body.admin-bar #main {
		margin-top: calc(40px + 46px);
	}
}

#navbar .updated,
#navbar #dic-email-link {
	/* Same size as the nav-tree links (.ll) — this used to be a
	   relative 0.8em (of whatever #navbar happened to inherit) for the
	   "updated" line, and the default inherited size for the email
	   link, so the two never actually matched each other or the tree. */
	font-size: 12px;
}

#navbar #dic-email-link {
	display: block;
	margin-top: 0.75em;
}

/* Half of a standard paragraph gap (~1em), both above (separating it from
   the last nav-tree entry) and below (separating it from "Page last
   updated") — a distinct but tight gap, not a full blank line's worth. */
#dic-home-link {
	margin: 0.5em 0;
}

/* Site-navigation landmark (the nav tree + the standalone "Home" link
   below it — see header.php): covers the "Home" link directly (it isn't
   inside a <ul>, so this is the only rule it gets its 12px from). The
   <ul> tree needs its OWN separate font-size below on top of this one —
   the site-wide "p, td, ul, ol" rule further down has a direct rule on
   <ul> itself, and a direct rule on an element always beats an inherited
   value regardless of which ancestor it would've come from, so 12px set
   only here wouldn't reach anything inside a <ul>. */
#navbar nav {
	font-size: 12px;
	white-space: nowrap;
}

#navbar nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 12px;
}

/* The site-wide "li { margin-left: 1em }" rule (for ordinary content
   bullet lists) is a direct rule on <li> and so — same trap as <ul>'s
   font-size above — beats whatever the tree's own indent scheme intends;
   left unset, every level's <li> silently added its own 12px on top of
   the 10px below, doubling the indent per level. Zeroed here so the only
   source of indentation is the nested-<ul> margin below. */
#navbar nav li {
	margin-left: 0;
}

/* Each nested <ul> is one level deeper than its own parent <li> — since
   levels nest arbitrarily deep, this compounds naturally through the box
   model without needing a rule per depth. */
#navbar nav ul ul {
	margin-left: 10px;
}

/* The current page (nav tree or the standalone "Home" link) is a
   non-interactive <span aria-current="page"> rather than a link — bolded
   here so it still reads as "you are here" visually, now on top of being
   announced to assistive tech via the attribute itself. */
#navbar nav [aria-current="page"] {
	font-weight: bold;
}

p, td, ul, ol {
	margin-right: 5px;
	font-size: 16px;
}

p, td {
	margin-left: 5px;
}

li {
	padding-left: 0;
	margin-left: 1em;
}

ol, ul {
	padding-left: 0;
	margin-left: 1em;
}

/* Every h2 in the content is this style (the old h1-table look — the
   yellow band came from the table row's bgcolor, easy to lose sight of
   once it's a plain heading) — targeted directly since nothing else on
   the site uses <h2>, unlike .h2 below which is shared with <span>. */
h2 {
	background: #FFFFCC;
	font-size: 18px;
	font-weight: bold;
	/* The band should touch the true page edge on the left and the navbar
	   on the right, breaking out of #main's own gutter — negative margins
	   pull the box out exactly that far, and padding adds the same amount
	   straight back so the TEXT lands at the same spot it would without
	   any of this, still inside #main's normal margins as everything else
	   is. (2px/5px below is h2's own original small inset around the
	   text, kept as-is on top of that.) */
	margin: 0 calc(-1 * (var(--main-gutter) + var(--nav-gap))) 0.5em calc(-1 * var(--main-gutter));
	padding: 2px calc(var(--main-gutter) + var(--nav-gap) + 5px) 2px calc(var(--main-gutter) + 5px);
}

/* Same reasoning as h2 above — h3 isn't used for anything but this
   style (section sub-headings from div.h2, and book titles in
   dic_render_book_row()), so it's targeted directly. No bottom margin:
   the original div/span versions had none, so the following text
   (a review, or a theatre's description) sat right underneath. */
h3 {
	font-size: 16px;
	font-weight: bold;
	margin: 0.75em 0 0;
}

blockquote {
	margin-left: 40px;
	margin-right: 40px;
	font-size: 12px;
}

table {
	font-size: 12px;
}

/* Books-landing year chart (page-books-landing.php): its <td> cells would
   otherwise pick up the site-wide 16px "p, td, ul, ol" rule instead of
   this table's smaller 12px — a <td> with its own direct rule always
   beats an inherited value, even one meant to set the table's default. */
.book-count-cell {
	font-size: 12px;
}

.book-count-title {
	font-size: 16px;
}

/* --- Music Diary page --- */
#leftcontent {
	float: left;
	width: 240px;
	background: #FFFFDD;
	border-right: 2px solid #DDDDBB;
	border-bottom: 2px solid #DDDDBB;
	margin-right: 10px;
	/* Matches the main content's text size — no font-size override here
	   (it used to be a smaller 12px; the user wants this box's text the
	   same as everything else, so it just inherits the site-wide size
	   like any other content, no special-casing needed). */
}

.diary-placeholder {
	font-style: italic;
	color: #777;
}

/* --- Imported-content figures and promo boxes (see cli-import.php's
   dic_convert_picture_table() / dic_convert_amazon_promo_table()) --- */
figure {
	margin: 0 0 1em;
	max-width: 100%;
	/* Shrink to the widest child's rendered width — normally the image.
	   Without this a non-floated figure would just fill its container. */
	width: fit-content;
}

figure.align-left {
	float: left;
	margin: 0 15px 10px 0;
}

figure.align-right {
	float: right;
	margin: 0 0 10px 15px;
}

figcaption {
	font-size: 12px;
	text-align: center;
	/* A caption is text with no natural width, so left alone it would be
	   sized to fit its whole sentence on one unwrapped line — which is
	   usually wider than the image — making *that* the figure's shrink-
	   to-fit width instead. width:0 excludes it from that calculation
	   entirely; min-width:100% then stretches it back to match whatever
	   width the image (the only other, and fixed-size, child) settled on. */
	width: 0;
	min-width: 100%;
}

/* The Date/Author/Title sort control (dic_books_sort_link()): a real
   <nav> of three equal-width options, laid out with flex to reproduce
   the original 3-cell table look. The active option is a non-interactive
   <span aria-current="true">, the other two are <a> links — the active
   one gets no background (matching the original's plain <th> cell),
   the links get the original #CCCCCC. */
.sort-links ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sort-links li {
	/* The site-wide "li { margin-left: 1em }" rule is a direct rule and
	   so beats this <ul>'s own margin:0 by inheritance — same trap as
	   the nav tree's indentation, zeroed here for the same reason. */
	margin-left: 0;
	flex: 1;
}

.sort-links a,
.sort-links span {
	display: block;
	padding: 2px 0;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}

.sort-links a {
	background: #CCCCCC;
}

aside.featured-recording,
aside.amazon-link {
	background: #000000;
	color: #FFFFFF;
	padding: 8px;
}

aside.featured-recording {
	float: left;
	width: 37%;
	margin: 0 15px 10px 0;
}

aside.amazon-link {
	float: right;
	width: 130px;
	margin: 0 0 10px 15px;
}

aside.featured-recording p,
aside.amazon-link p {
	color: #FFFFFF;
	margin: 0 0 0.5em;
}

aside.featured-recording a,
aside.amazon-link a {
	color: #FFFFFF;
}

.promo-cover {
	text-align: center;
	margin: 0.5em 0;
}

.promo-review {
	font-size: 0.85em;
}

/* The "If I were the comics editor" page's two mock-newspaper-page grids
   (originally a <table> per page, purely for a 2-column layout — a
   one-off content fix, not something the importer produces generally).
   CSS columns reproduces the 2-column look from a flat, semantic <ul>;
   break-inside avoids splitting a single strip's name across the column
   break. */
.comics-list {
	columns: 2;
	column-gap: 20px;
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
}

.comics-list li {
	/* Same site-wide "li { margin-left: 1em }" direct-rule trap as the
	   nav tree and sort-links — zeroed for the same reason. */
	margin-left: 0;
	break-inside: avoid;
}

.comics-list mark {
	/* Reproduces the original bgcolor("currently in the trib")
	   highlight — background only, default browser <mark> text color
	   overridden back to the surrounding text's own color. */
	background: #FFCCCC;
	color: inherit;
}

/* The "My personality type" page's Keirsey chart: originally a <table>
   whose sole purpose was centering a single <pre> cell — width:fit-
   content + margin:auto is the non-table equivalent (same technique as
   figure's own centering). */
.centered-pre {
	width: fit-content;
	margin: 0 auto;
}

/* Same page's Enneagram score table — genuinely tabular data (unlike
   the two above), so it stays a <table>, just with real <th scope="col">
   headers instead of the original's all-<td> markup. It was also
   trapped inside a <figcaption> by the legacy source's own structure
   (a <span class="caption"> that happened to wrap both the caption
   text and this whole table) — moved back out to sit as its own table
   as part of this same one-off fix. */
.enneagram-scores {
	margin: 0 auto;
}