/*
 * Phones and tablets: everything below the compact breakpoint. This file is
 * loaded with media="(max-width: 959.98px)" built from
 * Config::COMPACT_BREAKPOINT, so no media query is needed for that here.
 * Phone-only rules (below 600px) are at the end.
 *
 * One column (the desktop's 580px column, centered), the header lines up
 * with it, no register image, and the sidebar becomes the Contents panel
 * that drops from under the header.
 */

:root { --gutter: 20px; }

.container { max-width: calc(var(--col) + 2 * var(--gutter)); }

.site-head { height: auto; min-height: 68px; padding: 10px 0 9px; }
.site-title { font-size: 28px; }
.site-description { font-size: 13px; margin-top: 3px; }
.site-branding { flex: 1 1 auto; min-width: 0; }
.site-register { display: none; }
.site-actions { flex: none; margin-left: 12px; }
.icon-button { width: 38px; height: 38px; }
.contents-toggle { display: grid; }
html.contents-open .contents-toggle { border-color: var(--accent); color: var(--accent); }
html.contents-open .contents-toggle .icon--contents { display: none; }
html.contents-open .contents-toggle .icon--close { display: block; }

.site-body { display: block; padding-top: 22px; }

/* ---------- The Contents panel ---------- */
.sidebar {
	display: none;
	position: fixed;
	z-index: 15;
	left: 0;
	right: 0;
	top: var(--header-bottom, 80px);
	max-height: calc(100dvh - var(--header-bottom, 80px));
	overflow: auto;
	overscroll-behavior: contain;
	padding: 18px var(--gutter) 6px;
	background: var(--bg);
	border-bottom: 1px solid var(--rule);
	box-shadow: var(--panel-shadow);
}
html.contents-open .sidebar { display: block; }
html.contents-open { overflow: hidden; }
.sidebar__inner { position: static; max-width: var(--col); margin-inline: auto; }
html.contents-open .contents-scrim { display: block; position: fixed; inset: 0; z-index: 14; background: var(--scrim); }

.widget { margin-bottom: 22px; }
.widget-title { font-size: 16px; }
.widget ul,
.widget ol,
.widget.is-toc ul { font-size: 16px; }
.widget li a { padding: 9px 0; }                 /* touch targets at least 40px tall */
.widget.is-toc li a { padding: 9px 0 9px 12px; }

/* Tablets: the widgets side by side in the panel. */
@media (min-width: 600px) {
	.sidebar__inner { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; align-items: start; }
}

/* ================= Phones (below 600px) ================= */
@media (max-width: 599.98px) {
	:root { --fs: 17px; --fs-section: 23px; --fs-page-title: 26px; --gutter: 18px; }

	/*
	 * Phone header: the title alone on the first row, sized to nearly fill the
	 * text column's width (14.3 = the title's width in ems; change it if the
	 * site title changes). Second row: the tagline in two balanced lines on
	 * the left, and the light/dark and Contents buttons on the right, centred
	 * on the tagline.
	 */
	.site-head {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 12px;
		row-gap: 4px;
		min-height: 0;
		padding: 11px 0 10px;
	}
	.site-branding { display: contents; }
	.site-title { grid-column: 1 / -1; grid-row: 1; font-size: min(25px, calc((100vw - 2 * var(--gutter)) / 14.3)); white-space: nowrap; }
	.site-description { grid-column: 1; grid-row: 2; margin: 0; font-size: 12.5px; max-width: 20em; text-wrap: balance; }
	.site-actions { grid-column: 2; grid-row: 2; margin-left: 0; align-self: center; }
	.site-actions .theme-toggle { order: -1; } /* light/dark first, Contents last (phones only) */

	/* Small floated photos would squeeze the text into a sliver: center them instead. */
	.entry-content .alignleft,
	.entry-content .alignright { float: none; margin: .4em auto 1.1em; }
	.entry-content li { margin-bottom: .35em; }

	/* The footer lines nearly fill a phone's width, so right-aligning would just look ragged: center them. */
	.site-footer__inner { text-align: center; }
}

/* Logged in on a phone: WordPress lets the admin bar scroll away below 600px, so the header pins to the very top. */
@media (max-width: 600px) {
	.admin-bar .site-header { top: 0; }
}