/*
 * Page frame: reset, header, layout, sidebar widgets, footer.
 * Desktop (960px and wider) unless noted; compact.css adapts it for phones
 * and tablets.
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--body);
	font-family: var(--serif);
	font-size: var(--fs);
	line-height: var(--lh);
	font-kerning: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img, svg, video, iframe { max-width: 100%; }
a {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
button { font: inherit; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap; border: 0;
}
.skip-link:focus {
	clip-path: none; width: auto; height: auto; margin: 0;
	top: 8px; left: 8px; z-index: 100;
	padding: 8px 14px; background: var(--bg); color: var(--text);
	border: 1px solid var(--rule);
}

/* Width of the body: sidebar + gap + text column, plus side gutters. */
.container {
	max-width: calc(var(--frame) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ---------- Header: a running head with a double rule beneath ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--bg);
	padding-bottom: 4px;
}
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
.site-head {
	position: relative;
	display: flex;
	align-items: center;
	height: var(--head-h);
	border-bottom: 1px solid var(--rule);
}
.site-head::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -4px;
	border-bottom: 1px solid var(--rule);
}
.site-branding { flex: none; position: relative; z-index: 1; padding-top: 2px; }
.site-title {
	margin: 0;
	font-size: var(--fs-site-title);
	font-weight: var(--weight-bold);
	line-height: 1.05;
	letter-spacing: -.01em;
}
.site-title a { color: var(--text); text-decoration: none; }
.site-description {
	margin: 4px 0 0;
	font-size: var(--fs-tagline);
	font-style: italic;
	font-weight: 400;
	line-height: 1.3;
	color: var(--muted);
}

/*
 * The 1812 register entry: a slice of the scan turned into ink (an alpha
 * mask), painted in --register-ink. The "Antonius Ladman" cell sits at 390px
 * of the 820px-wide image; the 11.5px nudge centers that cell (not the
 * image) in the free space. The second mask fades it at the box edges so it
 * never runs behind the title or the button.
 */
.site-register {
	flex: 1;
	align-self: stretch;
	margin: 6px 12px;
	background: var(--register-ink);
	-webkit-mask:
		url("/wp-content/themes/antonladman/assets/img/register.png") calc(50% + 11.5px) center / auto 100% no-repeat,
		linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
	-webkit-mask-composite: source-in;
	mask:
		url("/wp-content/themes/antonladman/assets/img/register.png") calc(50% + 11.5px) center / auto 100% no-repeat intersect,
		linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
.site-actions { position: relative; z-index: 1; display: flex; gap: 8px; margin-left: auto; }

.icon-button {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--control);
	border-radius: 50%;
	background: var(--bg);
	color: var(--text);
	cursor: pointer;
}
.icon-button:hover { border-color: var(--accent); color: var(--accent); }
.icon { width: 18px; height: 18px; }
.contents-toggle { display: none; }
.contents-toggle .icon--close { display: none; }
/* Light shows the moon (switch to dark); dark shows the sun. */
[data-theme="light"] [data-theme-toggle] .icon--sun,
[data-theme="dark"] [data-theme-toggle] .icon--moon { display: none; }
html:not([data-theme]) [data-theme-toggle] .icon--sun { display: none; }

/* ---------- Layout: sidebar on the left, text on the right ---------- */
.site-body {
	display: grid;
	grid-template-columns: var(--side) var(--col);
	grid-template-areas: "side main";
	column-gap: var(--gap);
	padding-top: 30px;
	padding-bottom: 40px;
}
.site-main { grid-area: main; min-width: 0; }
.sidebar { grid-area: side; }

/*
 * Pinned while scrolling. If the sidebar is taller than the window it pins
 * by its bottom instead (top goes negative), so its last link stays
 * reachable. --header-height and --sidebar-height come from theme.js.
 */
.sidebar__inner {
	position: sticky;
	top: min(calc(var(--header-height, 92px) + 28px), calc(100vh - var(--sidebar-height, 0px) - 24px));
}
.admin-bar .sidebar__inner {
	top: min(calc(var(--header-height, 92px) + var(--wp-admin--admin-bar--height, 32px) + 28px), calc(100vh - var(--sidebar-height, 0px) - 24px));
}

/* ---------- Sidebar widgets ---------- */
.widget { margin: 0 0 32px; }
.widget-title {
	margin: 0;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--text);
	font-size: var(--fs-widget-title);
	font-style: italic;
	font-weight: 400;
	line-height: 1.2;
	color: var(--text);
}
.widget ul, .widget ol {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--fs-widget);
	line-height: 1.35;
}
.widget li { border-bottom: 1px solid var(--hairline); }
.widget li a { display: block; padding: 6px 0; color: var(--body); text-decoration: none; }
.widget li a:hover { color: var(--accent); }
.widget p { font-size: var(--fs-widget); margin: 8px 0; }

/* A widget whose links all point to headings on this page: the section tracker. */
.widget.is-toc ul { margin-top: 6px; font-size: var(--fs-toc); }
.widget.is-toc li { border-bottom: 0; border-left: 3px solid var(--hairline); }
.widget.is-toc li a { padding: 6px 0 6px 12px; }
.widget.is-toc li.is-current { border-left-color: var(--accent); }
.widget.is-toc li.is-current a { color: var(--accent); font-weight: var(--weight-bold); }

/* ---------- Footer ---------- */
.site-footer__inner {
	padding: 20px 0 34px;
	border-top: 1px solid var(--hairline);
	text-align: right;      /* flush with the text column and the light/dark button; phones center it (compact.css) */
	font-size: var(--fs-footer);
	font-style: italic;
	line-height: 1.5;
	color: var(--muted);
}
.site-footer__inner p { margin: 0 0 2px; }
.site-footer a { color: var(--muted); }

.contents-scrim { display: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@media print {
	.site-header { position: static; }
	.sidebar, .site-actions, .site-register { display: none; }
	.site-body { display: block; }
}

/* Generic form controls in widgets (e.g. a Search widget left from an older theme). */
.widget input[type="search"],
.widget input[type="text"],
.widget select {
	width: 100%;
	padding: 6px 8px;
	border: 1px solid var(--control);
	border-radius: 0;
	background: var(--bg);
	color: var(--body);
	font: inherit;
	font-size: var(--fs-widget);
}
.widget input[type="submit"],
.widget button {
	margin-top: 6px;
	padding: 5px 12px;
	border: 1px solid var(--control);
	background: var(--bg);
	color: var(--text);
	font: inherit;
	font-size: var(--fs-widget);
	cursor: pointer;
}