/* Layout polish found in the 2026-10 desktop and phone audit.
   Loaded on every front-end view after the theme and the other plugin sheets. */

/* Pages, articles and archives started 10px under the header, so the H1
   looked glued to it. The front page keeps its own hero spacing. */
body.page:not(.home) .site-main > .ct-container,
body.page:not(.home) .site-main > .ct-container-full,
body.single .site-main > .ct-container,
body.single .site-main > .ct-container-full,
body.archive .site-main > .ct-container,
body.search .site-main > .ct-container {
	padding-top: 36px;
}

/* The article list is capped at 1040px and centred, while the archive title
   and intro above it use the full 1170px column. Cap the title block the same
   way so title, filter chips and list share one left edge. */
body.embedonix-enhancement-articles-archive .hero-section {
	max-width: 1040px;
	margin-right: auto;
	margin-left: auto;
}

/* The footer "X" link was a 10px-wide target. */
.embedonix-discovery-footer__column a {
	min-width: 24px;
}

@media (max-width: 689px) {
	/* Author and category links in the article byline were 15px tall. */
	.entry-meta a {
		display: inline-block;
		padding: 5px 0;
	}

	body.page:not(.home) .site-main > .ct-container,
	body.page:not(.home) .site-main > .ct-container-full,
	body.single .site-main > .ct-container,
	body.single .site-main > .ct-container-full,
	body.archive .site-main > .ct-container,
	body.search .site-main > .ct-container {
		padding-top: 22px;
	}

	/* The consent banner took about a quarter of a phone screen and its three
	   buttons wrapped into uneven widths. Keep the same text and choices, in one
	   compact row of equal buttons. */
	#cookie-law-info-bar {
		padding: 12px 16px !important;
	}

	#cookie-law-info-bar .cli-bar-message {
		font-size: 13px !important;
		line-height: 1.35 !important;
	}

	#cookie-law-info-bar .cli-bar-btn_container {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
		margin-top: 10px !important;
	}

	#cookie-law-info-bar .cli-bar-btn_container > * {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 6px 6px !important;
		font-size: 12px;
		text-align: center;
	}

	/* Article tables had 14px side padding in a 343px column, which squeezed
	   three-column tables into word-per-line cells. */
	body.embedonix-enhancement-article .entry-content table td,
	body.embedonix-enhancement-article .entry-content table th {
		padding: 7px 8px;
		line-height: 1.4;
	}

	/* The consulting intro group added 16px of padding on top of the page
	   margin, so its text sat indented from every other block on the page. */
	body.embedonix-enhancement-consulting-page .entry-content .embedonix-consulting-hero {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}
}

/* Wrapped inline code kept one box per line, which cut the background mid-phrase. */
.entry-content :not(pre) > code {
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Tap-to-enlarge viewer for article diagrams on phones (figure-zoom.js). */
img.embedonix-zoomable {
	cursor: zoom-in;
}

.embedonix-figure-zoom {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	background: rgba(15, 23, 32, 0.94);
}

.embedonix-figure-zoom__close {
	flex: 0 0 auto;
	align-self: flex-end;
	min-width: 48px;
	min-height: 48px;
	margin: 4px 4px 0 0;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
}

.embedonix-figure-zoom__pane {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	overflow: auto;
	padding: 8px;
	-webkit-overflow-scrolling: touch;
}

.embedonix-figure-zoom__pane img {
	flex: 0 0 auto;
	max-width: none;
	height: auto;
	margin: auto;
	border-radius: 6px;
	background: #fff;
}

/* "Part N of M" navigation sat directly under the author card with no gap. */
.entry-content ~ .embedonix-part-nav,
.embedonix-author-trust + .embedonix-part-nav {
	margin-top: 32px;
}

/* Fluent Forms validation text was #f56c6c at 12px, about 2.9:1 on the page
   background. Keep it red but readable. */
.fluentform .error.text-danger,
.fluentform .ff-el-is-error .text-danger {
	color: #b42318;
	font-size: 13.5px;
}

/* Older posts embed YouTube with a fixed height attribute (1000px or 788px).
   The player filled only part of that, leaving a tall black box on desktop and
   a full phone screen of it on mobile. Size it by aspect ratio instead. Embeds
   inside the core responsive wrapper already do this and are left alone. */
.entry-content :not(.wp-block-embed__wrapper) > iframe[src*="youtube.com/embed"],
.entry-content :not(.wp-block-embed__wrapper) > iframe[src*="youtube-nocookie.com/embed"] {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

@media (max-width: 689px) {
	/* Callout boxes spent about a third of a phone column on indentation:
	   24px of box padding plus a 40px list indent inside it. */
	.entry-content blockquote {
		padding-right: 14px;
		padding-left: 16px;
	}

	.entry-content blockquote ul,
	.entry-content blockquote ol {
		padding-left: 1.25em;
	}
}

/* Keyboard focus was invisible on the contact form fields, its submit button
   and the table-of-contents toggle. */
.fluentform .ff-el-form-control:focus-visible,
.fluentform .ff-btn-submit:focus-visible,
.embedonix-toc > summary:focus-visible {
	outline: 2px solid #1a5fd0;
	outline-offset: 2px;
}

/* While the consent settings dialog is open, the plugin leaves the bottom bar
   at 10% opacity above the dimmed backdrop, so page text showed through it. */
body.cli-modal-open #cookie-law-info-bar {
	visibility: hidden;
	pointer-events: none;
}

/* Phone in landscape: the stacked consent bar covered a third of a 390px-high
   screen. Put the message and the three buttons on one row. */
@media (max-height: 520px) and (orientation: landscape) {
	#cookie-law-info-bar {
		padding: 8px 16px !important;
	}

	#cookie-law-info-bar .cli-bar-container {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center;
		gap: 16px;
	}

	#cookie-law-info-bar .cli-bar-message {
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0;
		font-size: 13px !important;
		line-height: 1.3 !important;
	}

	#cookie-law-info-bar .cli-bar-btn_container {
		flex: 0 0 auto;
		flex-wrap: nowrap;
		margin: 0 !important;
	}

	#cookie-law-info-bar .cli-bar-btn_container > * {
		min-height: 40px;
		white-space: nowrap;
	}
}

/* Text field borders measured about 1.3:1 against the page background, so the
   fields were hard to find. WCAG 1.4.11 asks for 3:1 on the boundary of an
   input. #7d8896 gives about 3.5:1 on #fafbfc. */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.fluentform .ff-el-form-control,
.embedonix-compact-archive select,
.search-form input[type="search"] {
	border-color: #7d8896;
}

/* Category links in article listings were 14px tall. On touch screens extend
   the hit area upward and downward without changing the row height. */
@media (pointer: coarse) {
	.article-index-item__category {
		display: inline-block;
		padding: 6px 0;
		margin: -6px 0;
	}

	/* Single-line listing titles, comment author and date links, and the legacy
	   multi-page navigation links measured 17 to 20px tall. */
	.article-index-item__title a,
	.ct-comment-meta a,
	.mpp-post-navigation a {
		display: inline-block;
		padding: 4px 0;
		margin: -4px 0;
	}
}

@media (max-width: 689px) {
	/* Static pages set H2 at 35px on a 1.5 line height, against 26px in articles,
	   and About set its H1 at 40px. Match the article scale on phones. */
	body.page:not(.home) .entry-content h2 {
		font-size: 26px;
		line-height: 1.25;
	}

	body.page:not(.home) h1 {
		font-size: 32px;
		line-height: 1.2;
	}
}

/* Around 1024px the consent buttons wrapped, leaving "Accept all" alone on a
   second row. Keep them on one row and let the message take the rest. */
@media (min-width: 690px) {
	#cookie-law-info-bar .cli-bar-container {
		flex-wrap: nowrap;
		align-items: center;
		gap: 24px;
	}

	#cookie-law-info-bar .cli-bar-message {
		flex: 1 1 0;
		width: auto !important;
		min-width: 0;
	}

	#cookie-law-info-bar .cli-bar-btn_container {
		flex: 0 0 auto;
		flex-wrap: nowrap;
	}

	#cookie-law-info-bar .cli-bar-btn_container > * {
		white-space: nowrap;
	}
}

/* An empty search page showed two identical search forms: Blocksy's own, then
   the recovery panel's. Keep the first and start the panel at the topic links. */
.embedonix-search-recovery > h2:first-child,
.embedonix-search-recovery > form[role="search"] {
	display: none;
}

/* About: the intro text sat 62px to the right of the page title because the
   media-text block pads both sides of its text column. With the portrait on the
   right, only the side next to the portrait needs the gap. */
@media (min-width: 782px) {
	body.embedonix-enhancement-about-page .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
		padding-left: 0;
	}
}

/* Off-canvas menu links were 33px tall; give them a 49px touch target. */
@media (max-width: 999px) {
	#offcanvas .mobile-menu .ct-menu-link {
		padding-top: 8px;
		padding-bottom: 8px;
	}
}