/*
Supplemental rules for the Hugo build.
Keeps the original hand-written look while accommodating Hugo's markup
(code highlighting, responsive images) and making the page usable on phones.
*/

/* --- Page frame ----------------------------------------------------------------
   The original 2x2 layout table, sized to the viewport so the outer page never
   scrolls:
     (1,1) logo      (1,2) title
     (2,1) sidebar    (2,2) content
   The logo cell and the sidebar cell share column 1, so they are always the
   same width. Both bottom cells hold an <iframe>; only the content iframe
   scrolls, so the sidebar stays fixed on screen (like the old frameset).

     layouts/baseof.html       -> the table shell (default HTML output)
     layouts/baseof.bare.html  -> main.html, the frameless page for cell (2,2)
     layouts/sidebar.html      -> /sidebar/, the document for cell (2,1)
*/
:root {
	--side-w: 220pt;   /* width of column 1: logo cell + sidebar cell */
}

/* Only the shell document is pinned to the viewport; the framed documents
   (main.html, /sidebar/) must scroll normally inside their <iframe>. */
body.wp-theme-i18ncook.shell {
	height: 100vh;
	height: 100dvh;
	margin: 0;
	overflow: hidden;
}
table.maintable {
	width: 100%;
	height: 100vh;
	height: 100dvh;
	table-layout: fixed;
	border-spacing: 0;
	border: 0;
}
.maintable td {
	box-sizing: border-box;
}
/* Row 1 is as tall as the logo/title need; row 2 absorbs the rest. */
tr.row-head td {
	height: 0;
	vertical-align: middle;
}
td.celllogo {
	width: var(--side-w);
	text-align: center;
	padding: 5pt;
}
td.celltitle {
	background-color: #E4E7EF;
	font-size: 28pt;
	font-style: italic;
	font-weight: bold;
	line-height: 0.6;
	color: #0A246A;
	padding: 5pt 5pt 5pt 10pt;
	overflow: hidden;
}
tr.row-body td {
	height: 100%;
	vertical-align: top;
	padding: 0;
}
td.celltoc {
	width: var(--side-w);
}
td.cellmain {
	border-top: medium solid #6080A0;
}
.chrome-side,
.chrome-main {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Documents loaded inside the frames. */
body.frame-sidebar {
	margin: 0;
	padding: 0;
	background: #fff;
}
body.wp-theme-i18ncook.bare {
	margin: 0;
}
.barewrap {
	padding: 30pt;
}

/* --- Phones ------------------------------------------------------------------
   Same fixed-viewport model, but the header becomes a flex bar and the sidebar
   becomes a short frame above the content frame. */
@media (max-width: 700px) {
	.maintable {
		display: block;
	}
	.maintable > tbody {
		display: flex;
		flex-direction: column;
		height: 100vh;
		height: 100dvh;
	}
	.maintable > tbody > tr.row-head {
		display: flex;
		align-items: center;
		flex: 0 0 auto;
		background: #E4E7EF;
	}
	.maintable > tbody > tr.row-body {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
	}
	tr.row-head td,
	tr.row-body td {
		display: block;
		width: auto;
		height: auto;
	}
	td.celllogo {
		flex: 0 0 auto;
		padding: 4pt;
	}
	td.celllogo img {
		width: 44px;
		height: auto;
	}
	td.celltitle {
		flex: 1 1 auto;
		font-size: 15pt;
		padding: 4pt 6pt;
	}
	.disclaimer {
		font-size: 8pt;
	}
	td.celltoc {
		flex: 0 0 38vh;
		border-bottom: medium solid #6080A0;
	}
	td.cellmain {
		flex: 1 1 auto;
		min-height: 0;
	}
	.barewrap {
		padding: 12pt;
	}
}

/* --- Content -------------------------------------------------------------------
   Keep long words, wide code blocks and big screenshots inside the column. */
.entry img,
#post_content img,
#page_content img {
	max-width: 100%;
	height: auto;
}
#post_content,
#page_content,
.entry {
	overflow-wrap: break-word;
}
.entry pre,
.entry .highlight {
	overflow-x: auto;
}

/* Fenced code blocks: mimic the original ".code" boxes (pale yellow). */
div.highlight {
	padding: 0;
	margin: 0;
	overflow: auto;
}
.chroma {
	background-color: #ffc !important;
	padding: 1em;
	margin: 0;
}
.entry pre,
.entry pre code,
.entry .highlight code {
	font-family: Consolas, "Courier New", Monospace;
	font-size: 9pt;
}

/* Sidebar nested category lists. */
#sidebar ul.children {
	background-color: transparent;
	padding: 0 0 0 12pt;
	margin: 0;
}
#sidebar ul li {
	list-style: none;
}