/*
Theme Name: QMN Testing Theme
Theme URI: https://github.com/qualitymedianetwork/sitebar-nextgen
Description: Carries the Sitebar v27.0.0 layout test pages. Every case from doc/sitebar/v27_config_testcases.md is a selectable page template — pick one under Page Attributes → Template when you create a page or post. Each page prints the QMN container with that case's configuration on it; the ad itself comes from the site's own delivery, so install this on a site where the sitebar already runs. Built on the stock Twenty Twenty stylesheet (GPLv2+, wordpress.org/themes/twentytwenty), included verbatim as assets/twentytwenty.css.
Author: Quality Media Network
Version: 1.0.0
Requires at least: 5.3
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: qmn-testing-theme
*/

/* ---------------------------------------------------------------------------
 * Page ground
 *
 * The content column is a white card on a grey page so the free band beside it
 * is visible without a devtools overlay — every verdict in the test doc is a
 * visual one, so the band has to be readable at a glance.
 * ------------------------------------------------------------------------ */

body.qmn-tc {
	background: #eef2f7;
}

body.qmn-tc .qmn-tc-site-content {
	padding: 40px 0 80px;
}

/* One flow segment of the article column. Only the first one carries id="main";
 * a full-bleed block between two segments closes one and opens the next. */
.qmn-tc-main {
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #dbe3ec;
	padding: 28px 32px;
}

.qmn-tc-main + .qmn-tc-main,
.qmn-tc-bleed + .qmn-tc-main {
	border-top: 0;
}

.qmn-tc-main p {
	font-size: 1.7rem;
	line-height: 1.6;
	margin: 0 0 1.2em;
}

.qmn-tc-main h3 {
	font-size: 2.2rem;
	margin: 1.4em 0 .5em;
}

.qmn-tc-main > *:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Test case panel — case id, configuration, steps, expected picture.
 * Sits at the top of the article column, so it is ordinary page content and
 * the content detector sees it as such. That is deliberate: it makes the
 * column start where a real article starts.
 * ------------------------------------------------------------------------ */

.qmn-tc-panel {
	border: 2px solid #0f172a;
	background: #f8fafc;
	padding: 20px 24px;
	margin: 0 0 32px;
	font-size: 1.5rem;
	line-height: 1.5;
}

.qmn-tc-panel .qmn-tc-eyebrow {
	margin: 0 0 4px;
	font-size: 1.2rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #64748b;
}

.qmn-tc-panel h2 {
	margin: 0 0 14px;
	font-size: 2.4rem;
	line-height: 1.2;
}

.qmn-tc-panel h2 .qmn-tc-id {
	font-family: monospace;
	background: #0f172a;
	color: #fff;
	padding: 2px 8px;
	margin-right: 8px;
}

.qmn-tc-panel dl {
	margin: 0 0 14px;
	font-family: monospace;
	font-size: 1.4rem;
}

.qmn-tc-panel dl div {
	padding: 3px 0;
	border-bottom: 1px dotted #cbd5e1;
}

.qmn-tc-panel dt {
	display: inline;
	font-weight: 700;
}

.qmn-tc-panel dt:after {
	content: " = ";
	font-weight: 400;
	color: #64748b;
}

.qmn-tc-panel dd {
	display: inline;
	margin: 0;
	color: #b91c1c;
}

.qmn-tc-panel dd:empty:before {
	content: '""';
	color: #94a3b8;
}

.qmn-tc-panel .qmn-tc-viewport {
	display: inline-block;
	background: #fef3c7;
	border: 1px solid #f59e0b;
	padding: 2px 10px;
	margin: 0 0 12px;
	font-family: monospace;
}

.qmn-tc-panel .qmn-tc-expect {
	margin: 0;
	padding: 10px 14px;
	background: #ecfdf5;
	border-left: 4px solid #10b981;
}

.qmn-tc-panel .qmn-tc-steps {
	margin: 0 0 12px;
	padding-left: 22px;
}

.qmn-tc-panel .qmn-tc-note {
	margin: 12px 0 0;
	padding: 10px 14px;
	background: #eff6ff;
	border-left: 4px solid #3b82f6;
}

.qmn-tc-panel .qmn-tc-actions {
	margin-top: 14px;
}

.qmn-tc-panel button {
	font-size: 1.4rem;
	padding: 8px 16px;
	margin: 0 8px 8px 0;
	background: #0f172a;
	color: #fff;
	border: 0;
	cursor: pointer;
}

.qmn-tc-panel button:hover {
	background: #334155;
}

.qmn-tc-panel .qmn-tc-links {
	margin: 6px 0 0;
	font-size: 1.3rem;
}

/* ---------------------------------------------------------------------------
 * Scaffolding boxes
 *
 * Every box carries its own label as real text, so the content detector always
 * classifies it as content unless the case explicitly puts it on the VCO
 * ignore list (.qmn-vco-skip). Colour follows the role.
 * ------------------------------------------------------------------------ */

.qmn-tc-box {
	box-sizing: border-box;
	padding: 8px 10px;
	font-family: monospace;
	font-size: 13px;
	line-height: 1.35;
	color: #0f172a;
	overflow: hidden;
}

.qmn-tc-box .qmn-tc-box-label {
	display: block;
	font-weight: 700;
}

.qmn-tc-box .qmn-tc-box-sub {
	display: block;
	font-weight: 400;
	opacity: .75;
}

.qmn-tc-role-plain    { background: #e2e8f0; border: 1px solid #94a3b8; }
.qmn-tc-role-blocker  { background: #fecaca; border: 2px solid #dc2626; }
.qmn-tc-role-obstacle { background: #fed7aa; border: 2px solid #ea580c; }
.qmn-tc-role-master   { background: #ddd6fe; border: 2px dashed #7c3aed; }
.qmn-tc-role-overlay  { background: rgba(56, 189, 248, .55); border: 2px solid #0284c7; }
.qmn-tc-role-hide     { background: #fbcfe8; border: 2px solid #db2777; }
.qmn-tc-role-anchor   { background: #fde68a; border: 2px solid #d97706; }
.qmn-tc-role-wrap     { background: #cffafe; border: 2px solid #0891b2; }
.qmn-tc-role-deco     { background: #e9d5ff; border: 1px dashed #a855f7; }
.qmn-tc-role-gate     { background: #dcfce7; border: 2px solid #16a34a; }

/* A full-bleed block: same box, but it spans the whole page width in flow. */
.qmn-tc-bleed {
	box-sizing: border-box;
	width: 100%;
}

/* Marks a box the case has put on data-sitebar_vco_ignore_subtree. Dotted
 * outline so it is obvious on screen which boxes the detector cannot see. */
.qmn-vco-skip {
	outline: 2px dotted rgba(15, 23, 42, .35);
	outline-offset: -6px;
}

/* Keeps the document tall enough that every absolutely positioned box can be
 * scrolled into view. Empty and background-less on purpose: nothing for the
 * content detector to find. */
.qmn-tc-spacer {
	width: 1px;
}

/* The admin bar is suppressed from inc/sitebar-embed.php instead of here: the
 * rule it has to beat sits on <html>, which body_class() cannot reach. */