/*
Theme Name: Biographica
Theme URI: https://example.com/biographica
Author: James
Author URI: https://example.com
Description: A Wikipedia Monobook-inspired WordPress theme purpose-built for biography content. Mobile-first, WCAG AAA, HTTPS-enforced, with live AJAX search, contact form + email framework, comment reply subscriptions (email and WhatsApp via Meta Cloud API), human verification, a Wikipedia-Main-Page-style homepage, biography infobox, server-rendered TOC, /wiki/Article_Name permalinks with case and underscores preserved, unified @graph schema with Yoast/Rank Math auto-detection and LiteSpeed Cache compatibility. British English UI.
Version: 1.4.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: biographica
Tags: biography, encyclopedia, wiki, classic, two-columns, right-sidebar, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =========================================================================
 *  MOBILE-FIRST ARCHITECTURE
 *
 *  Base layer (no media query) = phone (320-480px)
 *  @media (min-width: 481px)  = large phone / small tablet
 *  @media (min-width: 721px)  = tablet / homepage row becomes 2-col
 *  @media (min-width: 961px)  = desktop / full Monobook frame restored
 *
 *  Every enhancement is additive. Removing any @media block still leaves a
 *  working, usable mobile layout.
 * ===================================================================== */

/* -------------------------------------------------------------------------
 *  1.  DESIGN TOKENS  (WCAG AAA verified)
 * ---------------------------------------------------------------------- */
:root {
	/* Surface palette — the signature Monobook blue-grays */
	--bgph-canvas:         #f6f6f6;
	--bgph-rule:           #a7d7f9;
	--bgph-rule-soft:      #aaaaaa;
	--bgph-panel:          #ffffff;
	--bgph-panel-border:   #a7d7f9;
	--bgph-tab-bg:         #f8fcff;
	--bgph-tab-active:     #ffffff;
	--bgph-nav-heading-bg: #cfe3f2;
	--bgph-infobox-bg:     #f9f9f9;
	--bgph-infobox-border: #aaaaaa;
	--bgph-infobox-header: #ccccff;   /* the signature pale violet */
	--bgph-toc-bg:         #f9f9f9;
	--bgph-toc-border:     #aaaaaa;
	--bgph-hatnote-bg:     #f9f9f9;
	--bgph-footer-bg:      #f9f9f9;
	--bgph-mp-welcome-bg:  #f5faff;
	--bgph-mp-box-header:  #cfe3f2;

	/* Typography */
	--bgph-serif: "Linux Libertine", "Georgia", "Times New Roman", Times, serif;
	--bgph-sans:  "Helvetica Neue", "Helvetica", Arial, "Nimbus Sans L", sans-serif;
	--bgph-mono:  "Courier New", Courier, monospace;

	/* Text — AAA on white */
	--bgph-text:        #212121;   /* 16.1 : 1 */
	--bgph-text-muted:  #54595d;   /*  7.22 : 1 */
	--bgph-text-subtle: #72777d;

	/* Links — Wikipedia's canonical AAA-verified palette */
	--bgph-link:         #0645ad;  /* 8.59 : 1 */
	--bgph-link-visited: #0b0080;  /* 13.81 : 1 */
	--bgph-link-hover:   #3366bb;
	--bgph-link-external:#36b;

	/* Layout */
	--bgph-fs-base:  16px;   /* 16px base prevents iOS auto-zoom on input focus */
	--bgph-lh-base:  1.6;
	--bgph-measure:  960px;  /* desktop content column */
	--bgph-sidebar:  176px;  /* desktop left portlet column */
	--bgph-gap:      12px;
	--bgph-pad-mobile:   14px;
	--bgph-pad-desktop:  22px;
	--bgph-tap:     44px;    /* minimum touch target */
}

/* -------------------------------------------------------------------------
 *  2.  RESET + GLOBAL BASE  (applies at every breakpoint)
 * ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body.bgph-body {
	margin: 0;
	padding: 0;
	background: var(--bgph-canvas);
	color: var(--bgph-text);
	font: var(--bgph-fs-base)/var(--bgph-lh-base) var(--bgph-sans);
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }

:focus-visible {
	outline: 2px solid var(--bgph-link);
	outline-offset: 2px;
}

.bgph-sr-only {
	position: absolute;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.bgph-skip-link {
	position: absolute; top: -50px; left: 0;
	background: #000; color: #fff;
	padding: 10px 16px; z-index: 10000; text-decoration: none;
	font-weight: bold;
}
.bgph-skip-link:focus { top: 0; }

/* -------------------------------------------------------------------------
 *  3.  FRAME  —  mobile base: single column, everything stacks
 * ---------------------------------------------------------------------- */

.bgph-globalwrapper { width: 100%; }

/* -- Topbar -- */
.bgph-topbar {
	background: linear-gradient(to bottom, #f6f6f6 0%, #e6e6e6 100%);
	border-bottom: 1px solid #c0c0c0;
	padding: 8px var(--bgph-pad-mobile);
	font-size: 12px;
	color: var(--bgph-text-muted);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 12px;
}
.bgph-topbar a {
	color: var(--bgph-text-muted);
	text-decoration: none;
	padding: 4px 0;   /* enlarge tap area */
	display: inline-block;
}
.bgph-topbar a:hover { text-decoration: underline; }
.bgph-topbar a:focus-visible { color: var(--bgph-link); }
.bgph-topbar-right { display: flex; gap: 12px; }

/* -- Site identity (logo + tab bar) — mobile = stacked -- */
.bgph-siteidentity {
	padding: 14px var(--bgph-pad-mobile) 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.bgph-logo { text-align: left; }
.bgph-logo img { max-width: 140px; height: auto; }
.bgph-logo .bgph-logo-fallback {
	display: inline-block;
	font-family: var(--bgph-serif);
	font-size: 22px;
	color: var(--bgph-text);
	text-decoration: none;
	line-height: 1.15;
}
.bgph-logo .bgph-logo-tag {
	display: block;
	font-family: var(--bgph-serif);
	font-style: italic;
	font-size: 12px;
	color: var(--bgph-text-muted);
	margin-top: 2px;
}

/* -- Tab bar -- */
.bgph-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--bgph-panel-border);
	-webkit-overflow-scrolling: touch;
}
.bgph-tabs li { margin: 0 2px -1px 0; }
.bgph-tabs a {
	display: inline-block;
	padding: 10px 16px;      /* ≥44px tap target including text */
	min-height: var(--bgph-tap);
	background: var(--bgph-tab-bg);
	border: 1px solid var(--bgph-panel-border);
	border-bottom: none;
	border-radius: 4px 4px 0 0;
	font-size: 13px;
	color: var(--bgph-link);
	text-decoration: none;
	font-family: var(--bgph-sans);
	line-height: 1.2;
}
.bgph-tabs a:hover { background: #fff; text-decoration: underline; }
.bgph-tabs .current a,
.bgph-tabs a[aria-current="page"] {
	background: var(--bgph-tab-active);
	color: var(--bgph-text);
	font-weight: normal;
	cursor: default;
}

/* -- Frame  — mobile = single column, article first then portlets -- */
.bgph-frame {
	max-width: calc(var(--bgph-measure) + var(--bgph-sidebar) + 24px);
	margin: 0 auto;
	padding: 0 var(--bgph-pad-mobile) 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Article comes before portlets in visual order on mobile */
.bgph-article { order: 1; }
.bgph-portlets { order: 2; }

/* -- Article panel -- */
.bgph-article {
	background: var(--bgph-panel);
	border: 1px solid var(--bgph-panel-border);
	padding: 16px var(--bgph-pad-mobile) 24px;
	font-family: var(--bgph-serif);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--bgph-text);
	min-height: 200px;
	position: relative;
}

/* "From X, the free biographical reference" italic sub */
.bgph-siteSub {
	font-family: var(--bgph-sans);
	font-size: 0.85rem;
	font-style: italic;
	color: var(--bgph-text-muted);
	margin-bottom: 0.8em;
}

/* -------------------------------------------------------------------------
 *  4.  ARTICLE TYPOGRAPHY  (mobile base, scales up at breakpoints)
 * ---------------------------------------------------------------------- */

.bgph-article h1.bgph-firstHeading {
	font-family: var(--bgph-serif);
	font-weight: normal;
	font-size: 1.7rem;
	line-height: 1.2;
	margin: 0 0 0.3em;
	padding-bottom: 0.2em;
	border-bottom: 1px solid var(--bgph-rule);
	color: var(--bgph-text);
	word-wrap: break-word;
}
.bgph-article h2 {
	font-family: var(--bgph-serif);
	font-weight: normal;
	font-size: 1.35rem;
	line-height: 1.25;
	margin: 1.2em 0 0.3em;
	padding-bottom: 0.2em;
	border-bottom: 1px solid var(--bgph-rule);
	color: var(--bgph-text);
}
.bgph-article h3 {
	font-family: var(--bgph-serif);
	font-weight: bold;
	font-size: 1.15rem;
	margin: 1em 0 0.2em;
	line-height: 1.3;
}
.bgph-article h4,
.bgph-article h5,
.bgph-article h6 {
	font-size: 1rem;
	font-weight: bold;
	font-family: var(--bgph-serif);
	margin: 0.9em 0 0.2em;
}

.bgph-article p { margin: 0.5em 0 0.6em; }

.bgph-article a { color: var(--bgph-link); text-decoration: none; }
.bgph-article a:visited { color: var(--bgph-link-visited); }
.bgph-article a:hover   { text-decoration: underline; }
.bgph-article a:focus-visible { text-decoration: underline; }

.bgph-article a.external::after {
	content: "";
	display: inline-block;
	width: 10px; height: 10px;
	margin-left: 2px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='%2336b' d='M14 3h3v3m0-3L9 11m-4-6H3v12h12v-2'/></svg>") no-repeat center/contain;
	vertical-align: baseline;
}

.bgph-article ul,
.bgph-article ol { margin: 0.4em 0 0.4em 1.6em; padding: 0; }
.bgph-article li { margin-bottom: 0.15em; }

.bgph-article blockquote {
	margin: 1em 0;
	padding: 0.5em 1em;
	border-left: 3px solid var(--bgph-rule-soft);
	color: var(--bgph-text-muted);
	font-style: italic;
}

.bgph-article code,
.bgph-article kbd,
.bgph-article samp {
	font-family: var(--bgph-mono);
	font-size: 0.92em;
	background: #f8f9fa;
	border: 1px solid #eaecf0;
	padding: 1px 4px;
	border-radius: 2px;
}
.bgph-article pre {
	font-family: var(--bgph-mono);
	font-size: 0.9em;
	background: #f8f9fa;
	border: 1px solid #eaecf0;
	padding: 0.9em;
	overflow-x: auto;
	max-width: 100%;
}

.bgph-article table {
	border-collapse: collapse;
	margin: 0.6em 0;
	background: #fff;
	display: block;
	overflow-x: auto;
	max-width: 100%;
}
.bgph-article table th,
.bgph-article table td {
	border: 1px solid #a2a9b1;
	padding: 0.3em 0.5em;
	text-align: left;
	vertical-align: top;
}
.bgph-article table th { background: #eaecf0; font-weight: bold; }

.bgph-article img { max-width: 100%; height: auto; }
.bgph-article hr {
	border: 0;
	border-top: 1px solid var(--bgph-rule-soft);
	margin: 1em 0;
}

.bgph-hatnote {
	font-style: italic;
	padding-left: 1em;
	margin: 0 0 0.6em;
	color: var(--bgph-text-muted);
	font-size: 0.95em;
}

/* -------------------------------------------------------------------------
 *  5.  INFOBOX  — mobile base: full width, no float
 * ---------------------------------------------------------------------- */
.bgph-infobox {
	width: 100%;
	margin: 0.6em 0 1.2em;
	border: 1px solid var(--bgph-infobox-border);
	background: var(--bgph-infobox-bg);
	font-family: var(--bgph-sans);
	font-size: 0.92rem;
	line-height: 1.45;
	padding: 0;
	color: var(--bgph-text);
}
.bgph-infobox-caption {
	background: var(--bgph-infobox-header);
	color: var(--bgph-text);
	text-align: center;
	font-weight: bold;
	font-size: 1.2rem;
	padding: 8px 6px;
	line-height: 1.25;
	font-family: var(--bgph-serif);
}
.bgph-infobox-caption-sub {
	font-weight: normal;
	font-size: 0.8rem;
	display: block;
	margin-top: 2px;
	font-style: italic;
	font-family: var(--bgph-sans);
}
.bgph-infobox-image { text-align: center; padding: 8px; }
.bgph-infobox-image img {
	max-width: 280px; width: 100%;
	height: auto;
	border: 1px solid #ccc;
}
.bgph-infobox-image-caption {
	font-size: 0.82rem;
	font-style: italic;
	color: var(--bgph-text-muted);
	padding: 4px 4px 0;
}
.bgph-infobox-rows {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}
.bgph-infobox-rows th,
.bgph-infobox-rows td {
	text-align: left;
	vertical-align: top;
	padding: 6px 8px;
	border: none;
	font-size: 0.92rem;
}
.bgph-infobox-rows th {
	width: 40%;
	font-weight: bold;
	padding-right: 10px;
	background: transparent;
}
.bgph-infobox-rows tr + tr th,
.bgph-infobox-rows tr + tr td { border-top: 1px solid #eaecf0; }

/* -------------------------------------------------------------------------
 *  6.  TABLE OF CONTENTS  — mobile: full-width block
 * ---------------------------------------------------------------------- */
.bgph-toc {
	display: block;
	background: var(--bgph-toc-bg);
	border: 1px solid var(--bgph-toc-border);
	padding: 10px;
	margin: 1em 0;
	font-family: var(--bgph-sans);
	font-size: 0.95rem;
	color: var(--bgph-text);
}
.bgph-toc-title {
	font-weight: bold;
	text-align: center;
	padding: 0 0 4px;
	font-family: var(--bgph-sans);
}
.bgph-toc-toggle {
	font-size: 0.85rem;
	font-weight: normal;
	color: var(--bgph-link);
	background: none;
	border: 0;
	cursor: pointer;
	padding: 4px 8px;
	min-height: var(--bgph-tap);
}
.bgph-toc-toggle:hover { text-decoration: underline; }
.bgph-toc ol {
	list-style: none;
	counter-reset: bgph-toc;
	margin: 0;
	padding: 0;
}
.bgph-toc li {
	counter-increment: bgph-toc;
	margin: 0;
	padding: 3px 0;
}
.bgph-toc li::before {
	content: counters(bgph-toc, ".") " ";
	font-weight: normal;
	color: var(--bgph-text);
}
.bgph-toc ol ol {
	counter-reset: bgph-toc-sub;
	margin-left: 1.3em;
}
.bgph-toc ol ol li { counter-increment: bgph-toc-sub; }
.bgph-toc a { color: var(--bgph-link); text-decoration: none; }
.bgph-toc a:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
 *  7.  PORTLETS  — mobile: full-width below article
 * ---------------------------------------------------------------------- */
.bgph-portlets {
	font-size: 0.9rem;
	font-family: var(--bgph-sans);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.bgph-portlet { margin: 0; }
.bgph-portlet-h {
	background: var(--bgph-nav-heading-bg);
	color: var(--bgph-text);
	font-size: 0.85rem;
	font-weight: normal;
	padding: 6px 10px;
	margin: 0;
	border: 1px solid var(--bgph-panel-border);
	border-bottom: none;
	font-variant: small-caps;
	text-transform: lowercase;
	letter-spacing: 0.4px;
}
.bgph-portlet-body {
	background: var(--bgph-panel);
	border: 1px solid var(--bgph-panel-border);
	padding: 10px 12px;
}
.bgph-portlet ul { list-style: none; margin: 0; padding: 0; }
.bgph-portlet li { padding: 4px 0; line-height: 1.4; }
.bgph-portlet a {
	color: var(--bgph-link);
	text-decoration: none;
	display: inline-block;
	padding: 4px 0;
}
.bgph-portlet a:hover { text-decoration: underline; }
.bgph-portlet a:visited { color: var(--bgph-link-visited); }

/* Search portlet — bigger inputs on mobile */
.bgph-search-form {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.bgph-search-form input[type="search"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #a2a9b1;
	font-family: var(--bgph-sans);
	font-size: 1rem;          /* 16px — no iOS zoom */
	background: #fff;
	color: var(--bgph-text);
	min-height: var(--bgph-tap);
	-webkit-appearance: none;
	border-radius: 0;
}
.bgph-search-form button {
	padding: 10px 14px;
	font-size: 0.9rem;
	min-height: var(--bgph-tap);
	cursor: pointer;
	background: #f8f9fa;
	border: 1px solid #a2a9b1;
	color: var(--bgph-text);
	font-family: var(--bgph-sans);
}
.bgph-search-form button:hover { background: #fff; }
.bgph-search-buttons { display: flex; gap: 6px; }
.bgph-search-buttons button { flex: 1; }

/* Live search dropdown — mobile-first */
.bgph-search-input-wrap {
	position: relative;
}
.bgph-live-search-dropdown {
	position: absolute;
	top: calc(100% + 2px);
	left: 0;
	right: 0;
	min-width: 100%;
	max-height: 70vh;
	overflow-y: auto;
	overflow-x: hidden;
	background: #fff;
	border: 1px solid var(--bgph-panel-border);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
	z-index: 100;
	font-family: var(--bgph-sans);
	font-size: 0.95rem;
	color: var(--bgph-text);
}
.bgph-live-search-dropdown[hidden] { display: none; }

.bgph-live-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bgph-live-item {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #eaecf0;
}
.bgph-live-item:last-child { border-bottom: none; }

.bgph-live-link {
	display: flex;
	gap: 10px;
	padding: 10px 12px;
	color: var(--bgph-text);
	text-decoration: none;
	align-items: flex-start;
	min-height: var(--bgph-tap);
	transition: background-color 0.08s ease;
}
.bgph-live-link:hover,
.bgph-live-item.bgph-live-active > .bgph-live-link {
	background: #eaf3ff;
	text-decoration: none;
}
.bgph-live-link:focus-visible {
	outline: 2px solid var(--bgph-link);
	outline-offset: -2px;
}

.bgph-live-thumb {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border: 1px solid var(--bgph-panel-border);
	object-fit: cover;
	background: #f6f6f6;
	display: block;
}
.bgph-live-thumb-placeholder {
	background: linear-gradient(135deg, #eaecf0 0%, #dce3eb 100%);
}

.bgph-live-text {
	flex: 1 1 auto;
	min-width: 0;      /* enables text-overflow inside flex */
}
.bgph-live-title {
	font-family: var(--bgph-serif);
	font-size: 1rem;
	font-weight: 500;
	color: var(--bgph-link);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bgph-live-title mark {
	background: #fff2a8;
	color: inherit;
	font-weight: bold;
	padding: 0;
}
.bgph-live-sub {
	font-size: 0.8rem;
	color: var(--bgph-text-muted);
	font-style: italic;
	margin-top: 1px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bgph-live-excerpt {
	font-size: 0.82rem;
	color: var(--bgph-text-muted);
	line-height: 1.45;
	margin-top: 4px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bgph-live-loading,
.bgph-live-empty,
.bgph-live-error {
	padding: 12px 14px;
	font-size: 0.9rem;
	color: var(--bgph-text-muted);
	font-style: italic;
}
.bgph-live-loading::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 8px;
	border: 2px solid var(--bgph-panel-border);
	border-top-color: var(--bgph-link);
	border-radius: 50%;
	vertical-align: -2px;
	animation: bgph-live-spin 0.7s linear infinite;
}
@keyframes bgph-live-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.bgph-live-loading::before { animation: none; }
}
.bgph-live-error { color: #b32424; }

.bgph-live-more {
	display: block;
	padding: 10px 14px;
	background: #f8f9fa;
	border-top: 1px solid #eaecf0;
	color: var(--bgph-link);
	font-size: 0.88rem;
	text-decoration: none;
	text-align: right;
	font-weight: bold;
	min-height: var(--bgph-tap);
	line-height: 1.5;
}
.bgph-live-more:hover { background: #eaf3ff; text-decoration: underline; }

/* -------------------------------------------------------------------------
 *  8.  REFERENCES / CATEGORIES / ARTICLE META
 * ---------------------------------------------------------------------- */
.bgph-references {
	font-size: 0.9rem;
	font-family: var(--bgph-sans);
	margin-top: 1em;
}
.bgph-references ol { margin-left: 1.8em; }
.bgph-references li { margin-bottom: 0.4em; }

.bgph-categories {
	margin-top: 1.4em;
	padding: 8px 12px;
	border: 1px solid #aaa;
	background: #f9f9f9;
	font-family: var(--bgph-sans);
	font-size: 0.88rem;
	line-height: 1.6;
}
.bgph-categories strong { margin-right: 6px; }
.bgph-categories a {
	color: var(--bgph-link);
	text-decoration: none;
	margin: 0 3px;
}
.bgph-categories a:hover { text-decoration: underline; }
.bgph-categories .bgph-cat-sep::before {
	content: "|";
	color: #aaa;
	margin: 0 3px;
}

.bgph-article-meta {
	font-size: 0.82rem;
	color: var(--bgph-text-muted);
	font-family: var(--bgph-sans);
	margin: 1.2em 0 0.4em;
	padding-top: 0.6em;
	border-top: 1px solid #eaecf0;
	font-style: italic;
}

/* -------------------------------------------------------------------------
 *  9.  HOMEPAGE — Wikipedia Main Page layout
 * ---------------------------------------------------------------------- */
.bgph-frontpage { padding-bottom: 18px; }

/* Welcome box */
.bgph-mp-welcome {
	background: var(--bgph-mp-welcome-bg);
	border: 1px solid var(--bgph-panel-border);
	padding: 18px var(--bgph-pad-mobile);
	margin: 0 0 14px;
	text-align: center;
}
.bgph-mp-welcome-h {
	font-family: var(--bgph-serif);
	font-weight: normal;
	font-size: 1.7rem;
	line-height: 1.2;
	margin: 0 0 0.2em;
	padding: 0;
	border: 0;
}
.bgph-mp-welcome-sub {
	font-family: var(--bgph-serif);
	font-size: 1rem;
	color: var(--bgph-text-muted);
	margin: 0 0 0.4em;
}
.bgph-mp-welcome-count {
	font-family: var(--bgph-sans);
	font-size: 0.9rem;
	color: var(--bgph-text);
	margin: 0 0 0.6em;
}
.bgph-mp-welcome-count strong { font-weight: bold; }

.bgph-mp-portals {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-top: 10px;
}
.bgph-mp-portal {
	display: inline-block;
	padding: 8px 12px;
	background: #fff;
	border: 1px solid var(--bgph-panel-border);
	border-radius: 3px;
	color: var(--bgph-link);
	text-decoration: none;
	font-family: var(--bgph-sans);
	font-size: 0.88rem;
	min-height: var(--bgph-tap);
	line-height: 1.8;
}
.bgph-mp-portal:hover { background: var(--bgph-mp-welcome-bg); text-decoration: underline; }
.bgph-mp-portal-count {
	color: var(--bgph-text-muted);
	font-size: 0.82rem;
	margin-left: 3px;
}

/* Homepage row — mobile = stacks */
.bgph-mp-row {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 14px;
}

.bgph-mp-box {
	background: #fff;
	border: 1px solid var(--bgph-panel-border);
	font-family: var(--bgph-sans);
}
.bgph-mp-box-h {
	background: var(--bgph-mp-box-header);
	color: var(--bgph-text);
	font-family: var(--bgph-serif);
	font-weight: normal;
	font-size: 1.15rem;
	line-height: 1.2;
	margin: 0;
	padding: 10px 14px;
	border: 0;
	border-bottom: 1px solid var(--bgph-panel-border);
}
.bgph-mp-box-h span {
	font-weight: normal;
	color: var(--bgph-text-muted);
	font-size: 0.9em;
}
.bgph-mp-box-body {
	padding: 12px 14px;
	font-size: 0.95rem;
	line-height: 1.55;
}
.bgph-mp-box-body a { color: var(--bgph-link); text-decoration: none; }
.bgph-mp-box-body a:hover { text-decoration: underline; }
.bgph-mp-box-body a:visited { color: var(--bgph-link-visited); }
.bgph-mp-box-body ul {
	list-style: disc;
	margin: 0.3em 0 0.3em 1.4em;
	padding: 0;
}
.bgph-mp-box-body li { margin: 0.3em 0; }
.bgph-mp-box-body p { margin: 0.4em 0; }
.bgph-mp-box-body p:first-child { margin-top: 0; }
.bgph-mp-box-body p:last-child { margin-bottom: 0; }
.bgph-mp-box-body h3 {
	font-family: var(--bgph-sans);
	font-size: 1rem;
	margin: 0.8em 0 0.3em;
}

/* Featured biography thumb — mobile stacks above text */
.bgph-mp-featured-thumb {
	display: block;
	float: none;
	margin: 0 0 10px;
	text-align: center;
}
.bgph-mp-featured-thumb img {
	border: 1px solid var(--bgph-panel-border);
	max-width: 100%;
	height: auto;
}
.bgph-mp-featured-meta { color: var(--bgph-text-muted); }
.bgph-mp-more { margin-top: 0.6em; font-weight: bold; }

/* News thumb */
.bgph-mp-news-thumb {
	display: block;
	float: none;
	margin: 0 0 10px;
	text-align: center;
}
.bgph-mp-news-thumb img {
	border: 1px solid var(--bgph-panel-border);
	max-width: 240px;
	height: auto;
}

/* On this day */
.bgph-mp-otd .bgph-otd-year {
	color: var(--bgph-text-muted);
	font-weight: bold;
	display: inline-block;
	min-width: 3em;
}

/* Featured picture */
.bgph-mp-picture-body {
	text-align: center;
	padding: 12px;
}
.bgph-mp-picture-body img {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--bgph-panel-border);
}
.bgph-mp-picture-caption {
	margin-top: 8px;
	font-style: italic;
	color: var(--bgph-text-muted);
	font-size: 0.9rem;
}

/* Other areas — mobile stacks */
.bgph-mp-other-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
.bgph-mp-other-grid > div { min-width: 0; }
.bgph-mp-modified {
	color: var(--bgph-text-subtle);
	font-size: 0.82em;
}

/* -------------------------------------------------------------------------
 *  10.  ARCHIVE / LISTING  +  PAGINATION
 * ---------------------------------------------------------------------- */
.bgph-list {
	list-style: disc;
	margin: 0.5em 0 1em 1.6em;
	padding: 0;
}
.bgph-list li { margin: 0.4em 0; line-height: 1.5; }
.bgph-list .bgph-list-excerpt {
	display: block;
	color: var(--bgph-text-muted);
	font-size: 0.92em;
	margin-top: 2px;
}
.bgph-archive-desc {
	background: var(--bgph-hatnote-bg);
	border-left: 3px solid var(--bgph-panel-border);
	padding: 8px 12px;
	margin-bottom: 1em;
	font-size: 0.95em;
	color: var(--bgph-text-muted);
}

.bgph-pagination {
	margin: 1.2em 0;
	font-family: var(--bgph-sans);
	font-size: 0.92rem;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.bgph-pagination .page-numbers {
	display: inline-block;
	padding: 10px 14px;
	min-height: var(--bgph-tap);
	line-height: 1.2;
	border: 1px solid var(--bgph-panel-border);
	text-decoration: none;
	color: var(--bgph-link);
	background: #fff;
}
.bgph-pagination .page-numbers.current {
	background: var(--bgph-nav-heading-bg);
	color: var(--bgph-text);
	border-color: #a2a9b1;
	font-weight: bold;
}
.bgph-pagination a.page-numbers:hover { background: #f8f9fa; }

/* -------------------------------------------------------------------------
 *  11.  FOOTER  — mobile: stacked
 * ---------------------------------------------------------------------- */
.bgph-footer {
	max-width: calc(var(--bgph-measure) + var(--bgph-sidebar) + 24px);
	margin: 18px auto 0;
	padding: 16px var(--bgph-pad-mobile) 36px;
	font-family: var(--bgph-sans);
	font-size: 0.82rem;
	color: var(--bgph-text-muted);
	line-height: 1.6;
	border-top: 1px solid #c0c0c0;
	background: var(--bgph-footer-bg);
}
.bgph-footer-copy { margin-bottom: 10px; }
.bgph-footer-links {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
}
.bgph-footer-links a {
	color: var(--bgph-link);
	text-decoration: none;
	display: inline-block;
	padding: 6px 0;
	min-height: var(--bgph-tap);
	line-height: 1.4;
}
.bgph-footer-links a:hover { text-decoration: underline; }

/* =========================================================================
 *  MEDIA QUERIES — progressive enhancement from mobile base
 * ===================================================================== */

/* -------------------------------------------------------------------------
 *  @  481px — large phone / portrait tablet
 *  Infobox begins floating right, type scales up, more padding.
 * ---------------------------------------------------------------------- */
@media (min-width: 481px) {
	.bgph-article {
		padding: 18px var(--bgph-pad-desktop) 28px;
	}
	.bgph-article h1.bgph-firstHeading { font-size: 1.9rem; }
	.bgph-article h2 { font-size: 1.5rem; }
	.bgph-article h3 { font-size: 1.2rem; }

	.bgph-mp-welcome-h { font-size: 2rem; }
	.bgph-mp-welcome-sub { font-size: 1.1rem; }

	.bgph-footer-links {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 4px 18px;
	}

	.bgph-mp-featured-thumb {
		float: right;
		margin: 0 0 10px 14px;
		max-width: 45%;
	}
	.bgph-mp-news-thumb {
		float: right;
		margin: 0 0 10px 14px;
		max-width: 35%;
	}
}

/* -------------------------------------------------------------------------
 *  @  721px — tablet landscape / narrow laptop
 *  Homepage rows split to 2 columns, infobox floats right in article,
 *  "other areas" grid becomes 2-col, topbar/identity use bigger paddings.
 * ---------------------------------------------------------------------- */
@media (min-width: 721px) {
	.bgph-topbar { padding: 6px 18px; font-size: 11px; }

	.bgph-siteidentity {
		padding: 18px 18px 0;
	}

	.bgph-infobox {
		float: right;
		clear: right;
		width: 22em;
		max-width: 40%;
		margin: 0.5em 0 1em 1.2em;
	}

	.bgph-toc {
		display: table;
		min-width: 260px;
	}

	.bgph-mp-row {
		flex-direction: row;
		gap: 14px;
	}
	.bgph-mp-row > .bgph-mp-box { flex: 1 1 0; min-width: 0; }

	.bgph-mp-other-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.bgph-pagination .page-numbers {
		padding: 4px 10px;
		min-height: 0;
	}
}

/* -------------------------------------------------------------------------
 *  @  961px — desktop
 *  Restore the full Monobook frame: left portlet column + article panel
 *  side by side. Site identity grid aligns logo + tabs.
 * ---------------------------------------------------------------------- */
@media (min-width: 961px) {

	:root { --bgph-fs-base: 15px; }

	.bgph-siteidentity {
		max-width: calc(var(--bgph-measure) + var(--bgph-sidebar) + 24px);
		margin: 0 auto;
		padding: 18px 12px 0;
		display: grid;
		grid-template-columns: var(--bgph-sidebar) 1fr;
		gap: var(--bgph-gap);
		align-items: end;
	}
	.bgph-logo {
		grid-column: 1;
		text-align: center;
	}
	.bgph-tabs {
		grid-column: 2;
		flex-wrap: nowrap;
	}
	.bgph-tabs a {
		padding: 6px 14px 4px;
		min-height: 0;
		font-size: 12px;
	}

	.bgph-frame {
		display: grid;
		grid-template-columns: var(--bgph-sidebar) 1fr;
		gap: var(--bgph-gap);
		align-items: start;
		padding: 0 12px 24px;
	}
	.bgph-portlets {
		order: 1;   /* desktop: left column */
		font-size: 12px;
		gap: 12px;
	}
	.bgph-article {
		order: 2;
		padding: 1em 1.4em 2em;
		font-size: 14px;
	}

	/* portlet density tightens on desktop */
	.bgph-portlet-h { font-size: 12px; padding: 2px 8px; }
	.bgph-portlet-body { padding: 6px 8px 8px 8px; }
	.bgph-portlet li { padding: 1px 0; }
	.bgph-portlet a { padding: 0; }

	.bgph-search-form input[type="search"] {
		padding: 3px 4px;
		font-size: 12px;
		min-height: 0;
	}
	.bgph-search-form button {
		padding: 2px 6px;
		font-size: 11px;
		min-height: 0;
	}

	/* Desktop: the sidebar portlet is narrow (~160px). Widen the live-search
	   dropdown so it's actually readable — extends rightward into the article area. */
	.bgph-live-search-dropdown {
		min-width: 340px;
		right: auto;
		font-size: 0.9rem;
	}
	.bgph-live-thumb { width: 38px; height: 38px; }
	.bgph-live-title { font-size: 0.95rem; }
	.bgph-live-excerpt { font-size: 0.78rem; }

	.bgph-article h1.bgph-firstHeading { font-size: 1.9em; }
	.bgph-article h2 { font-size: 1.5em; }
	.bgph-article h3 { font-size: 1.2em; }

	.bgph-topbar { padding: 6px 12px; }

	.bgph-footer-links {
		gap: 4px 14px;
	}
	.bgph-footer-links a {
		padding: 0;
		min-height: 0;
	}
}

/* -------------------------------------------------------------------------
 *  PRINT
 * ---------------------------------------------------------------------- */
@media print {
	.bgph-topbar,
	.bgph-portlets,
	.bgph-tabs,
	.bgph-footer-links,
	.bgph-search-form,
	.bgph-skip-link { display: none !important; }
	.bgph-frame { display: block; max-width: 100%; padding: 0; }
	.bgph-article { border: none; padding: 0; }
	a::after { content: " (" attr(href) ")"; font-size: 85%; color: #555; }
	.bgph-article a::after { content: ""; }
	.bgph-infobox { float: none; width: 100%; margin: 0 0 1em; page-break-inside: avoid; }
}

/* -------------------------------------------------------------------------
 *  REDUCED MOTION
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
	html { scroll-behavior: auto !important; }
}

/* -------------------------------------------------------------------------
 *  UTILITIES
 * ---------------------------------------------------------------------- */
.bgph-clear { clear: both; }
.bgph-float-right { float: right; }
.bgph-float-left  { float: left; }
.bgph-text-center { text-align: center; }
.bgph-muted       { color: var(--bgph-text-muted); }

/* =========================================================================
 *  v1.3.0 — CONTACT FORM, COMMENT SUBSCRIPTIONS, CAPTCHA
 * ===================================================================== */

.bgph-contact {
	max-width: 640px;
	margin: 1em auto;
	font-family: var(--bgph-sans);
}
.bgph-contact-h {
	font-family: var(--bgph-serif);
	font-size: 1.6rem;
	font-weight: normal;
	margin: 0 0 0.3em;
	padding-bottom: 0.2em;
	border-bottom: 1px solid var(--bgph-rule);
}
.bgph-contact-intro {
	color: var(--bgph-text-muted);
	margin: 0 0 1.2em;
}

.bgph-contact-form .bgph-field,
.bgph-comment-subs,
.bgph-field-comment-phone {
	margin: 0 0 16px;
}
.bgph-contact-form label,
.bgph-field-comment-phone label {
	display: block;
	font-weight: bold;
	margin-bottom: 4px;
	font-size: 0.95rem;
}
.bgph-contact-form input[type="text"],
.bgph-contact-form input[type="email"],
.bgph-contact-form input[type="tel"],
.bgph-contact-form textarea,
.bgph-field-comment-phone input[type="tel"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #a2a9b1;
	font-family: inherit;
	font-size: 1rem;
	background: #fff;
	color: var(--bgph-text);
	min-height: var(--bgph-tap);
	-webkit-appearance: none;
	border-radius: 0;
}
.bgph-contact-form textarea {
	resize: vertical;
	min-height: 120px;
}
.bgph-contact-form input:focus-visible,
.bgph-contact-form textarea:focus-visible,
.bgph-field-comment-phone input:focus-visible {
	outline: 2px solid var(--bgph-link);
	outline-offset: -1px;
}
.bgph-field-help {
	font-size: 0.82rem;
	color: var(--bgph-text-muted);
	margin: 4px 0 0;
	font-style: italic;
}
.bgph-req {
	color: #b32424;
	font-weight: normal;
	margin-left: 2px;
}

.bgph-field-subs,
.bgph-comment-subs {
	border: 1px solid var(--bgph-panel-border);
	background: #f8fcff;
	padding: 10px 14px;
	margin: 0 0 16px;
}
.bgph-field-subs legend,
.bgph-comment-subs legend {
	font-weight: bold;
	padding: 0 6px;
	font-size: 0.9rem;
}
.bgph-field-subs label,
.bgph-comment-subs label {
	display: block;
	font-weight: normal;
	padding: 6px 0;
	line-height: 1.5;
	cursor: pointer;
	min-height: var(--bgph-tap);
}
.bgph-field-subs input[type="checkbox"],
.bgph-comment-subs input[type="checkbox"] {
	margin-right: 6px;
	width: 18px;
	height: 18px;
	vertical-align: -3px;
}

.bgph-captcha {
	background: #f9f9f9;
	border: 1px solid var(--bgph-panel-border);
	padding: 10px 14px;
	margin: 0 0 16px;
}
.bgph-captcha-math label {
	font-weight: normal;
	font-size: 0.95rem;
	margin-right: 8px;
	display: inline-block;
	margin-bottom: 6px;
}
.bgph-captcha-math input[type="text"] {
	width: 90px;
	padding: 8px 10px;
	border: 1px solid #a2a9b1;
	font-family: var(--bgph-mono);
	font-size: 1rem;
	min-height: var(--bgph-tap);
	-webkit-appearance: none;
}
.bgph-captcha-help {
	font-size: 0.8rem;
	color: var(--bgph-text-muted);
	margin: 4px 0 0;
	font-style: italic;
}

.bgph-btn-primary {
	background: var(--bgph-link);
	color: #fff;
	border: 1px solid #0a3c8a;
	padding: 12px 28px;
	font-family: var(--bgph-sans);
	font-size: 1rem;
	font-weight: bold;
	cursor: pointer;
	min-height: var(--bgph-tap);
	-webkit-appearance: none;
	border-radius: 3px;
}
.bgph-btn-primary:hover { background: #053a87; }
.bgph-btn-primary:focus-visible { outline: 2px solid #0b0080; outline-offset: 2px; }

.bgph-submit { margin-top: 20px; }

.bgph-contact-notice {
	padding: 14px 16px;
	margin: 0 0 18px;
	border: 1px solid;
	font-family: var(--bgph-sans);
}
.bgph-contact-success {
	background: #e6f4ea;
	border-color: #8fd19e;
	color: #1a7f37;
}
.bgph-contact-errors {
	background: #fbeaea;
	border-color: #e0a6a6;
	color: #b32424;
}
.bgph-contact-notice ul { margin: 6px 0 0 1.4em; }

/* Admin settings — test result inline feedback + section headings */
.bgph-settings-section {
	margin-top: 28px;
	padding: 6px 10px;
	background: #f0f6fc;
	border-left: 4px solid #2271b1;
	font-size: 14px;
}
.bgph-test-result {
	display: inline-block;
	margin-left: 8px;
	font-style: italic;
	font-size: 13px;
}

@media (min-width: 721px) {
	.bgph-contact-form .bgph-field-subs label,
	.bgph-comment-subs label {
		display: inline-block;
		margin-right: 18px;
	}
}

/* =========================================================================
 *  v1.3.1 — DISCUSSION VIEW  (comments live at ?view=discussion, not below article)
 * ===================================================================== */

/* "View discussion (N) →" affordance shown at the foot of the article view */
.bgph-discussion-link {
	margin: 1.6em 0 0.2em;
	padding: 10px 14px;
	background: #f8fcff;
	border: 1px solid var(--bgph-panel-border);
	font-family: var(--bgph-sans);
	font-size: 0.95rem;
	text-align: center;
}
.bgph-discussion-link a {
	color: var(--bgph-link);
	text-decoration: none;
	font-weight: bold;
}
.bgph-discussion-link a:hover { text-decoration: underline; }

/* Discussion page — cosmetic adjustments to make it feel like a separate view */
.bgph-discussion-page .bgph-firstHeading {
	font-family: var(--bgph-serif);
	color: var(--bgph-text);
}
.bgph-discussion-prefix {
	color: var(--bgph-text-muted);
	font-style: italic;
	font-weight: normal;
	margin-right: 4px;
}

.bgph-discussion-note {
	background: #f8fcff;
	border: 1px solid var(--bgph-panel-border);
	padding: 10px 14px;
	margin: 0.6em 0 1.4em;
	font-family: var(--bgph-sans);
	font-size: 0.92rem;
	color: var(--bgph-text);
}
.bgph-discussion-note p { margin: 0.2em 0; }
.bgph-discussion-note p + p { margin-top: 0.4em; }
.bgph-discussion-back a {
	color: var(--bgph-link);
	text-decoration: none;
	font-weight: bold;
}
.bgph-discussion-back a:hover { text-decoration: underline; }

.bgph-discussion-closed {
	background: #f9f9f9;
	border: 1px solid var(--bgph-rule-soft);
	padding: 14px 16px;
	font-style: italic;
	color: var(--bgph-text-muted);
}