/*
 * Plinth — hand-written plugin compatibility (layout and offsets).
 * Colours for plugin screens come from the generated sheets in compat/.
 */

@media screen and (min-width: 783px) {
	/* Plinth's top bar is 48px; plugins that read core's variable follow it. */
	html.wp-toolbar:has(body.plinth) {
		--wp-admin--admin-bar--height: 48px;
	}

	/* WooCommerce page header: fixed at 32px / 160px sidebar in core layouts. */
	body.plinth .woocommerce-layout__header {
		top: var(--pl-bar-h);
		width: calc(100% - var(--pl-side-w));
	}
	body.plinth.folded .woocommerce-layout__header {
		width: calc(100% - var(--pl-side-folded));
	}

	/* Elementor 4 "editor one" layout (Home, Editor, Theme Builder…). */
	body.plinth.e-has-sidebar-navigation {
		--editor-one-wordpress-admin-bar-height: 48px;
		--e-admin-bar-height: 48px;
		--editor-one-sidebar-left-offset: var(--pl-side-w);
		--editor-one-sidebar-left-offset-collapsed: var(--pl-side-folded);
	}
}

/* Ink that reads on both modes (tokens, not the plugins' fixed colours). */
body.plinth .notice-yoast .notice-yoast__header-heading {
	color: var(--pl-text);
}
body.plinth .acf-field-object > .handle .row-options a.delete-field,
body.plinth.post-type-acf-field-group .acf-field-object.open .handle a.delete-field {
	color: var(--pl-crit) !important;
}
body.plinth .acf-field-object > .handle .row-options a.delete-field:hover {
	color: color-mix(in srgb, var(--pl-crit) 70%, var(--pl-text)) !important;
}

/* ---------- 0.3.4: from the 0.3.3 check on Winora ---------- */

/* Wordfence dashboard widget: its section headings ("Top 5 IPs Blocked",
   "Updates Needed") were #222 on the dark card. */
body.plinth #wordfence_activity_report_widget :is(h1, h2, h3, h4, h5, h6) {
	color: var(--pl-text) !important;
}
/* Wordfence's own dashboard isn't responsive: let it scroll inside its frame
   on phones rather than pushing the whole page sideways; status labels read. */
@media screen and (max-width: 782px) {
	body.plinth .wrap.wordfence,
	body.plinth #wordfenceWrap,
	body.plinth .wordfence .wf-container-fluid {
		max-width: 100%;
		overflow-x: auto;
	}
}
body.plinth .wordfence :is(.wf-status-circle-label, .wf-block-labeled-value-label, .wf-dashboard-item-subtitle) {
	color: var(--pl-text-2) !important;
}

/* Imunify's dashboard widget: grey status lines were 3.97:1. */
body.plinth #dashboard-widgets [id*="imunify" i] :is(p, span, small, li, a:not([class*="btn"])) {
	color: var(--pl-text-2);
}

/* WooCommerce settings on phones: "Selling location(s)" and other fixed-width
   selects (and their select2 boxes) fit the column. */
@media screen and (max-width: 782px) {
	body.plinth .woocommerce table.form-table :is(select, .select2-container, input.regular-text) {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* ACF (free and PRO): ACF's blue with white text was 4.06:1 — a step darker. */
/* ACF's own sheet loads later with the same weight, so these need !important
   (the review still measured #0783BE, 4.2:1). #06699a is 5.9:1. */
body.plinth :is(.acf-admin-page, .acf-admin-toolbar, .acf-headerbar) .acf-btn:not(.acf-btn-secondary):not(.acf-btn-tertiary):not(.acf-btn-clear),
body.plinth.acf-admin-page :is(a, button).acf-btn:not(.acf-btn-secondary):not(.acf-btn-tertiary):not(.acf-btn-clear) {
	background-color: #06699a !important;
	border-color: #06699a !important;
	color: #fff !important;
}
body.plinth :is(.acf-admin-page, .acf-admin-toolbar) .acf-btn:not(.acf-btn-secondary):not(.acf-btn-tertiary):not(.acf-btn-clear):hover {
	background-color: #055a84 !important;
}
/* Toolbar tabs. ACF's toolbar is always its own navy (#344054), in either
   mode, so the tabs are light (nhsdachurch M2: Plinth's light-mode text was
   1.29:1 there). #D0D5DD is 7.1:1, white 10.4:1. The "More" menu sits on a
   Plinth surface and keeps Plinth's text colour. */
body.plinth .acf-admin-toolbar > :is(.acf-tab, .acf-more > .acf-tab),
body.plinth .acf-admin-toolbar :is(.acf-tab, .acf-more > .acf-tab):not(.acf-more ul *) {
	color: #D0D5DD !important;
}
body.plinth .acf-admin-toolbar .acf-tab.is-active,
body.plinth .acf-admin-toolbar .acf-tab:hover,
body.plinth .acf-admin-toolbar .acf-more:hover > .acf-tab {
	color: #FFFFFF !important;
}
body.plinth .acf-admin-toolbar .acf-more ul a {
	color: var(--pl-text-2) !important;
}
body.plinth .acf-admin-toolbar .acf-more ul a:hover {
	color: var(--pl-text) !important;
}
/* ACF PRO screens: header bar and list rows on Plinth surfaces (the free
   ACF sheet covers these; PRO's markup sometimes isn't picked up). */
body.plinth:not(.plinth-light).acf-admin-page .acf-headerbar {
	background: var(--pl-surface);
	border-color: var(--pl-border);
	color: var(--pl-text);
}
body.plinth:not(.plinth-light).acf-admin-page .acf-headerbar :is(h1, .acf-page-title) {
	color: var(--pl-text);
}
body.plinth:not(.plinth-light).acf-admin-page .wp-list-table :is(tr, td, th) {
	background: transparent;
	color: var(--pl-text-2);
}

/* Simple History: its header bar is white in a dark admin. */
body.plinth:not(.plinth-light) .sh-PageHeader {
	background: var(--pl-surface);
	color: var(--pl-text);
	border-color: var(--pl-border);
}

/* Inputs on phones: 16 px text so iOS Safari doesn't zoom in when a field is
   tapped (core sets this; Plinth's own input rule had overridden it). */
@media screen and (max-width: 782px) {
	body.plinth :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
		font-size: 16px;
	}
}

/* 0.3.6 (0.3.4 review) ---------------------------------------------------- */

/* Wordfence: labeled values on a coloured banner ("Wordfence Protection
   Activated" on purple) keep white text (was 1.28:1). admin.js marks the
   blocks whose own background is dark with .pl-wf-on-dark. */
body.plinth .wordfence .wf-block-labeled-value.pl-wf-on-dark :is(.wf-block-labeled-value-label, .wf-block-labeled-value-value, .wf-block-labeled-value-label *, .wf-block-labeled-value-value *) {
	color: #fff !important;
}
/* Wordfence status circles: the percentage reads (was 2.32:1). */
body.plinth .wordfence .wf-status-circle :is(.wf-status-circle-text, .wf-status-circle-value, div, span, p) {
	color: var(--pl-text) !important;
}
body.plinth .wordfence .wf-status-circle text {
	fill: var(--pl-text) !important;
}

/* WooCommerce: select2 keeps the original select (hidden) at min-width 350 px,
   which still pushed phones 33 px sideways. */
body.plinth .select2-hidden-accessible {
	min-width: 0 !important;
}

/* 0.3.10 (nhsdachurch retest) ---------------------------------------------- */

/* Elementor's notices on its own screens: the "Opt in" button was white on a
   16 % tint (1.1:1). */
body.plinth .e-notice :is(.e-button--cta, .e-notice__actions .e-button:first-child) {
	background: var(--pl-accent) !important;
	border-color: var(--pl-accent) !important;
	color: var(--pl-on-accent, #fff) !important;
}
/* Wordfence's status banner in its enabled (purple) state, also before
   admin.js has marked it. */
body.plinth .wordfence [class*="wf-global-status-full-enabled"] :is(.wf-block-labeled-value-label, .wf-block-labeled-value-value),
body.plinth .wordfence .wf-block-labeled-value[class*="wf-global-status-full-enabled"] :is(.wf-block-labeled-value-label, .wf-block-labeled-value-value) {
	color: #fff !important;
}

/* Smash Balloon (Facebook / Instagram Feed): its menu badges were placed
   absolutely at left: 46px, over the labels (nhsdachurch M7). They sit in
   the row like core's counts instead. */
body.plinth #adminmenu :is(.cff-notice-alert, .sbi-notice-alert, .ctf-notice-alert, .sby-notice-alert) {
	position: static !important;
	inset: auto !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	min-width: 18px;
	height: 18px;
	margin: 0 0 0 auto !important;
	padding: 0 5px;
	box-sizing: border-box;
	border-radius: 9px;
	background: var(--pl-surface-3, var(--pl-surface-2));
	color: var(--pl-text-2);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	vertical-align: middle;
}