/*
Theme Name: QAsolved
Description: Block theme for qasolved.com, replacing the Elementor build.
Version: 0.1.0
Requires at least: 6.9
Text Domain: qasolved
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* Ported from the Elementor kit custom CSS (kit 79262). theme.json has no element for these. */
b,
strong {
	font-weight: 600;
}

a,
button {
	transition: all 0.3s ease;
}

/* Footer links (light on dark): hovered or focused links turn yellow (footer pattern, link :hover/:focus
   colours; 7.6:1 on the main footer, 12.7:1 on the legal bar) and are underlined, so the state change does
   not rely on colour alone. The brand blue was 1.8:1 there. */
footer.wp-block-template-part .has-link-color a:not(.wp-block-social-link-anchor):is(:hover, :focus) {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Social icons (labels are visually hidden, so no underline): light grey, yellow on hover/focus on top of
   core's hover zoom. Set here rather than as the block's icon colour, which core writes as an inline style
   on each <li> that no hover rule can override. Beats the "Logos only" brand colours. */
footer.wp-block-template-part .is-style-logos-only .wp-block-social-link {
	color: var(--wp--preset--color--gray-light);
}

footer.wp-block-template-part .is-style-logos-only .wp-block-social-link:is(:hover, :focus-within) {
	color: var(--wp--preset--color--yellow);
}

/* Newsletter plugin minimal form in the footer. The plugin's markup and CSS
   (.tnp-subscription-minimal input.tnp-email) are outranked by adding the wrapper class. */
.qasolved-newsletter.tnp-subscription-minimal form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.qasolved-newsletter.tnp-subscription-minimal input.tnp-email,
.qasolved-newsletter.tnp-subscription-minimal input.tnp-submit {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: var(--wp--preset--spacing--20);
	border: 0;
	border-radius: 0;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--text-small);
}

.qasolved-newsletter.tnp-subscription-minimal input.tnp-email {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--body-text);
}

.qasolved-newsletter.tnp-subscription-minimal input.tnp-submit {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	cursor: pointer;
}

.qasolved-newsletter.tnp-subscription-minimal input.tnp-submit:hover,
.qasolved-newsletter.tnp-subscription-minimal input.tnp-submit:focus {
	background-color: var(--wp--preset--color--primary);
}

/* Elementor mobile breakpoint (767px): the legal bar centres its two rows. */
@media (max-width: 767px) {
	.wp-block-group.is-layout-flex:has(> .is-style-inline) {
		justify-content: center;
		text-align: center;
	}

	.is-style-inline {
		justify-content: center;
	}
}

/* Top-level parts (top bar, header, main, footer) sit flush, like Elementor sections; core adds the root
   block gap between them. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Header: the header part sticks (Elementor sticky "top"); the top bar above it scrolls away. */
.qasolved-site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0);
	z-index: 100;
}

/* Once stuck to the top (assets/js/sticky-header.js adds is-stuck), a shadow below it. */
.qasolved-site-header.is-stuck {
	box-shadow: var(--wp--preset--shadow--card);
}

@media (prefers-reduced-motion: no-preference) {

	.qasolved-site-header {
		transition: box-shadow 0.2s ease;
	}
}

/* Main navigation dropdowns: white card, like the Elementor mega-menu panels. */
.wp-block-navigation.qasolved-main-nav .wp-block-navigation-item .wp-block-navigation__submenu-container {
	padding: var(--wp--preset--spacing--50);
	box-shadow: var(--wp--preset--shadow--card);
	font-weight: 400;
	text-transform: none;
}

/* Two-column dropdowns (navigation-submenu "Two columns" style), filled column by column like the
   Elementor panels. Core sets display: flex on the container. */
.wp-block-navigation.qasolved-main-nav .is-style-two-columns > .wp-block-navigation__submenu-container {
	display: block;
	columns: 2;
	column-gap: var(--wp--preset--spacing--60);
}

.wp-block-navigation.qasolved-main-nav .is-style-two-columns > .wp-block-navigation__submenu-container > li {
	break-inside: avoid;
}

/* Desktop dropdowns: top-level menu items fill the header row's height, so panels open at the header's
   bottom edge (below its bottom padding and border), not just below the label. The bridge keeps the hover
   across that gap. Every wrapper between the header row and the items has to stretch. */
@media (min-width: 1025px) {

	.qasolved-site-header .wp-block-group:has(> .qasolved-main-nav),
	.qasolved-site-header .qasolved-main-nav,
	.qasolved-main-nav .wp-block-navigation__container,
	.qasolved-main-nav .wp-block-navigation__container > .wp-block-navigation-item {
		align-self: stretch;
	}

	.qasolved-main-nav .wp-block-navigation__responsive-container,
	.qasolved-main-nav .wp-block-navigation__responsive-dialog,
	.qasolved-main-nav .wp-block-navigation__responsive-close,
	.qasolved-main-nav .wp-block-navigation__responsive-container-content {
		height: 100%;
	}

	/* Centred under the item (core aligns them to its right edge in a right-justified menu). With left: 50%
	   the automatic width would shrink to the space right of the item's centre, so open panels size to
	   their content. Desktop only: the mobile overlay menu sits inside this navigation too. */
	.wp-block-navigation.qasolved-main-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
		top: calc(100% + var(--wp--preset--spacing--30) + 1px);
		right: auto;
		left: 50%;
		transform: translateX(-50%);
	}

	.qasolved-main-nav .wp-block-navigation__container > .has-child:is(:hover, :focus-within) > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container,
	.qasolved-main-nav .wp-block-navigation__container > .has-child > [aria-expanded="true"] ~ .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
		width: max-content;
	}

	.wp-block-navigation.qasolved-main-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: calc(var(--wp--preset--spacing--30) + 2px); /* 1px overlap with the item: no seam */
	}
}

.qasolved-main-nav .wp-block-navigation-item__label {
	white-space: nowrap;
}

/* Mega menu panels (qasolved/mega-menu, e.g. parts/mega-industries.html): open at the header's bottom edge
   like the dropdowns above, with the same hover bridge across the gap. */
@media (min-width: 1025px) {

	.qasolved-main-nav .wp-block-qasolved-mega-menu > .qasolved-mega-menu__panel {
		top: calc(100% + var(--wp--preset--spacing--30) + 1px);
	}

	/* Short lists (Resources: four links) get a narrower panel. */
	.qasolved-main-nav .wp-block-qasolved-mega-menu > .qasolved-mega-menu__panel:has(.is-narrow) {
		width: min(34rem, calc(100vw - 2 * var(--wp--preset--spacing--30)));
	}

	.qasolved-main-nav .wp-block-qasolved-mega-menu > .qasolved-mega-menu__panel::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: calc(var(--wp--preset--spacing--30) + 2px);
	}
}

.qasolved-mega-menu__panel p {
	margin: 0;
}

.qasolved-mega-menu__eyebrow {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--text-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Column heading inside a panel (e.g. Services groups), under the eyebrow. */
.qasolved-mega-menu__heading {
	padding-inline: var(--wp--preset--spacing--20);
	padding-block-end: var(--wp--preset--spacing--10);
	border-bottom: 1px solid var(--wp--preset--color--gray-light);
	color: var(--wp--preset--color--body-text);
	font-size: var(--wp--preset--font-size--text-small);
	font-weight: 600;
}

.qasolved-mega-menu__panel a {
	color: inherit;
	text-decoration: none;
}

.qasolved-mega-menu__all a {
	color: var(--wp--preset--color--secondary);
}

.qasolved-mega-menu__all a::after {
	content: " \2192";
}

.qasolved-mega-menu__all a:hover,
.qasolved-mega-menu__all a:focus-visible {
	text-decoration: underline;
}

/* One row per page: icon + label; the whole row is the link (qasolved/menu-links list items). */
.qasolved-mega-menu__item {
	display: flex;
	position: relative;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	border-radius: 0.5rem;
	font-size: var(--wp--preset--font-size--small-title);
	font-weight: 500;
}

.qasolved-mega-menu__item a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.qasolved-mega-menu__item:hover,
.qasolved-mega-menu__item:focus-within {
	background: var(--wp--preset--color--gray-light);
	color: var(--wp--preset--color--secondary);
}

.qasolved-mega-menu__item a:focus-visible {
	outline: none;
}

.qasolved-mega-menu__item:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

/* Two-tone icon: brand-blue line icon over a light offset tint. Small, so long labels fit in three columns.
   .qasolved-menu-icon: the same icons in the mobile menu (qasolved-blocks includes/nav-icons.php). */
.qasolved-mega-menu__icon,
.qasolved-menu-icon {
	display: inline-flex;
	position: relative;
	flex: none;
	isolation: isolate;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--lead); /* 18-20px; subheading shrinks to 14px on phones */
}

.qasolved-mega-menu__icon svg,
.qasolved-menu-icon svg {
	width: 1em;
	height: 1em;
}

.qasolved-mega-menu__icon::before,
.qasolved-menu-icon::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0.15em 0.3em -0.05em -0.2em;
	border-radius: 0.3em;
	background: var(--wp--preset--color--callout-info);
}

.qasolved-main-nav .wp-block-navigation-item__content:hover,
.qasolved-main-nav .wp-block-navigation-item__content:focus,
.qasolved-main-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--secondary);
}

/* Elementor laptop breakpoint (1366px): kit "Menu Links" drops to 0.9375rem. */
@media (max-width: 1366px) {
	.qasolved-main-nav {
		font-size: 0.9375rem;
	}

	.wp-block-navigation.qasolved-main-nav {
		gap: var(--wp--preset--spacing--40);
	}
}

/* Mobile menu items with an icon: icon and label side by side, the label wrapping beside the icon. */
.qasolved-mobile-nav .wp-block-navigation-item__content:has(> .qasolved-menu-icon) {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
}


/* Mobile menu overlay (parts/mobile-menu.html): sections expand in place (accordion) instead of floating.
   The inner navigation keeps core's responsive container (overlayMenu "mobile") only so its submenus get
   their own Interactivity context; with "never" they inherit the outer overlay's open state and all
   render expanded. These rules keep that container always visible, so it never shows a second hamburger. */
.wp-block-navigation.qasolved-mobile-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
	display: none;
}

.wp-block-navigation.qasolved-mobile-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
	display: block;
	position: relative;
	z-index: auto;
	width: 100%;
	background-color: inherit;
}

.wp-block-navigation.qasolved-mobile-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close {
	display: none;
}

/* Core hides every child of an open custom overlay's content except the overlay part, and the descendant
   selector also catches this inner navigation's list. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation.qasolved-mobile-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
	display: flex;
}

.wp-block-navigation.qasolved-mobile-nav,
.wp-block-navigation.qasolved-mobile-nav .wp-block-navigation__container {
	width: 100%;
	align-items: stretch;
}

.wp-block-navigation.qasolved-mobile-nav .wp-block-navigation-item {
	flex-wrap: wrap;
	width: 100%;
}

.wp-block-navigation.qasolved-mobile-nav .wp-block-navigation-item .wp-block-navigation-submenu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--wp--preset--spacing--50); /* tap target >= 24px (WCAG 2.2) */
	min-height: var(--wp--preset--spacing--50);
	margin-inline-start: auto;
}

.wp-block-navigation.qasolved-mobile-nav .wp-block-navigation-item .wp-block-navigation__submenu-container {
	position: static;
	flex-basis: 100%;
	width: 100%;
	padding: 0;
	border: 0;
	box-shadow: none;
	font-weight: 400;
	text-transform: none;
}

/* Sections open only from the chevron (aria-expanded), not on hover/focus as core does for dropdowns. */
.wp-block-navigation.qasolved-mobile-nav .has-child:hover > .wp-block-navigation__submenu-container,
.wp-block-navigation.qasolved-mobile-nav .has-child:focus-within > .wp-block-navigation__submenu-container {
	visibility: hidden;
	height: 0;
	opacity: 0;
	overflow: hidden;
}

.wp-block-navigation.qasolved-mobile-nav .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	visibility: visible;
	height: auto;
	opacity: 1;
	overflow: visible;
	width: 100%;
	padding: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}

/* Elementor tablet breakpoint (1024px): top bar hidden, menu collapses into the overlay, smaller logo.
   Core switches the navigation overlay at 600px; these rules move that to 1024px. */
@media (max-width: 1024px) {
	.wp-block-group.qasolved-topbar {
		display: none;
	}

	.qasolved-main-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.qasolved-main-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.qasolved-site-header .wp-block-site-logo img {
		width: 120px;
	}
}

/* Hero band (Group "Hero band" style): kit pattern tiled at 25% over the gradient, as in the Elementor
   archive templates. Pseudo-element so the pattern's opacity doesn't affect the content. */
.wp-block-group.is-style-hero-band {
	position: relative;
	isolation: isolate;
}

.wp-block-group.is-style-hero-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url(assets/images/pattern-bg.png) center bottom repeat;
	opacity: 0.25;
}

/* Search "Hero" style: grey field joined to the blue button. */
.wp-block-search.is-style-hero .wp-block-search__inside-wrapper {
	border: 0;
	padding: 0;
}

.wp-block-search.is-style-hero .wp-block-search__input {
	border: 0;
	padding-inline: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--gray-light);
	color: var(--wp--preset--color--body-text);
}

.wp-block-search.is-style-hero .wp-block-search__button {
	margin: 0;
}

/* Yoast breadcrumbs separator is an ElementsKit icon-font glyph (removed with ElementsKit); draw it here
   until the Yoast separator setting is changed to text (Phase 4 to-do). */
.yoast-breadcrumbs .icon-right-arrow1 {
	font-size: 0;
}

.yoast-breadcrumbs .icon-right-arrow1::after {
	content: "\203A";
	padding-inline: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--open-sans);
	font-size: var(--wp--preset--font-size--body);
	font-style: normal;
}

.yoast-breadcrumbs .breadcrumb_last {
	color: var(--wp--preset--color--yellow);
}

/* Single post: content and sidebar side by side (2:1) above the kit's tablet breakpoint, stacked at
   1024px and below. Core Columns only stacks below 782px and forces nowrap above it, so no widths are
   set on the columns and the ratio/stacking live here. */
@media (min-width: 1025px) {
	.wp-block-columns.qasolved-post-columns > .wp-block-column:first-child {
		flex-grow: 2;
	}
}

@media (max-width: 1024px) {
	.wp-block-columns.qasolved-post-columns {
		flex-direction: column;
	}
}

/* Sticky "Get Instant Resolution" box (Elementor sticky, offset below the sticky header). */
.qasolved-sticky-box {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--preset--spacing--70));
}

/* Second line of the two-tone sidebar box headings. */
.qasolved-sidebar-subheading {
	display: block;
	font-size: var(--wp--preset--font-size--lead);
}

/* Newsletter button on a blue box: dark instead of blue. */
.is-style-box-secondary .qasolved-newsletter.tnp-subscription-minimal input.tnp-submit {
	background-color: var(--wp--preset--color--primary);
}

.is-style-box-secondary .qasolved-newsletter.tnp-subscription-minimal input.tnp-submit:hover,
.is-style-box-secondary .qasolved-newsletter.tnp-subscription-minimal input.tnp-submit:focus {
	background-color: var(--wp--preset--color--overlay-80);
}

.qasolved-meta-sep {
	opacity: 0.6;
}

/* Utility: hidden at the kit's mobile breakpoint (Elementor "hide on mobile"). */
@media (max-width: 767px) {
	.qasolved-hide-mobile {
		display: none;
	}
}

/* Sidebar box buttons: toll-free on its own row, Live Chat and Report An Issue sharing the next row
   (block width 50% doesn't subtract the gap). */
.qasolved-sticky-box .wp-block-buttons > .wp-block-button {
	flex: 1 1 calc(50% - var(--wp--preset--spacing--40));
}

.qasolved-sticky-box .wp-block-buttons > .wp-block-button:first-child {
	flex-basis: 100%;
}

/* About Author: avatar above the bio on phones. */
@media (max-width: 767px) {
	.wp-block-group.qasolved-author-box {
		flex-wrap: wrap;
	}
}

/* Author archive hero: the author-box name is the page H1, at the hero size. */
.is-style-hero-band .qasolved-author-box__name {
	font-size: var(--wp--preset--font-size--hero);
	font-weight: 400;
	line-height: 1.6;
}

/* Utilities at the kit's tablet breakpoint (Elementor "hide on tablet",
   columns at 100% on tablet). Fixed-count grid layouts stack to one column. */
@media (max-width: 1024px) {

	.qasolved-hide-tablet {
		display: none;
	}

	.is-layout-grid.qasolved-stack-tablet {
		grid-template-columns: minmax(0, 1fr);
	}

	.qasolved-align-edges :is(.has-text-align-center, .has-text-align-right) {
		text-align: left;
	}
}

/* Columns aligned left, centre and right (Home: what we do): the texts
   keep a gutter from their neighbours; the joined rules run edge to edge. */
@media (min-width: 1025px) {

	.qasolved-align-edges > :first-child > p {
		padding-right: var(--wp--preset--spacing--60);
	}

	.qasolved-align-edges > :nth-child(2) > p {
		padding-inline: var(--wp--preset--spacing--40);
	}

	.qasolved-align-edges > :last-child > p {
		padding-left: var(--wp--preset--spacing--60);
	}
}

/* Offset section rule: wider on phones, as on the Elementor dividers. */
@media (max-width: 767px) {

	.wp-block-separator.is-style-rule-offset {
		width: 90%;
		left: 5%;
	}
}

/* Full-width page sections sit flush, as Elementor sections did
   (post content's block gap still spaces ordinary blocks). */
.wp-block-post-content > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* Fixed-count grids at the kit's breakpoints: two columns on tablet,
   one on phones (Elementor columns at 50% / 100%). */
@media (max-width: 1024px) {

	.is-layout-grid.qasolved-tablet-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {

	.is-layout-grid.qasolved-tablet-2 {
		grid-template-columns: minmax(0, 1fr);
	}

	.wp-block-separator.is-style-rule-start {
		width: 90%;
		left: -5%;
	}
}

/* Offset section rules: constrained layouts centre every child with !important margins, so the rule is
   shifted with relative positioning instead (rule-offset/-start styles set width 70% and left ±15%). */

/* Pricing plan cards: the Buy button sits at the bottom of each equal-height card; features 10px apart. */
.wp-block-group.is-style-plan > .wp-block-buttons:last-child {
	margin-top: auto;
}

.wp-block-group.is-style-plan .wp-block-list > li + li {
	margin-top: var(--wp--preset--spacing--20);
}

/* Accordion (core Details, "Accordion" style): consecutive items form one bordered list. */
.wp-block-details.is-style-accordion + .wp-block-details.is-style-accordion {
	margin-block-start: 0;
	border-top-width: 0;
}

/* Links inside running text are underlined so they don't rely on colour alone (WCAG 1.4.1; the link blue
   is too close to the body text). Buttons, menus, headings and card titles keep no underline. */
.wp-block-post-content :is(p, li) a:not(.wp-element-button) {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Process steps (Elementor "How we deliver"): the number badge sits on the icon's top-left corner, and a
   dashed line (Elementor's "arrows" divider) runs from the icon towards the next step; short and centred on
   phones. */
.qasolved-step {
	position: relative;
}

.qasolved-step > .is-style-step-number {
	position: absolute;
	top: calc(-1 * var(--wp--preset--spacing--40));
	left: calc(-1 * var(--wp--preset--spacing--30));
	z-index: 1;
}

.qasolved-step--connector::after {
	content: "";
	position: absolute;
	top: calc(var(--wp--preset--font-size--icon-large) / 2);
	right: var(--wp--preset--spacing--40);
	left: calc(var(--wp--preset--font-size--icon-large) + var(--wp--preset--spacing--40));
	border-top: 2px dashed var(--wp--preset--color--meta);
}

@media (max-width: 767px) {
	.qasolved-step--connector::after {
		right: auto;
		left: 50%;
		width: 25%;
	}
}

/* Section title rule: the line under a section title runs from the screen edge to 50px past the title
   (Elementor drew it from the section edge). Drawn from the title's text (span added by
   qasolved_section_title_text), so it follows the title's width and alignment; the separator block stays
   for spacing and for the editor, which has no span and keeps showing it. */
.wp-site-blocks {
	overflow-x: clip;
}

/* Page sections only pad their top. Before a coloured band or a cover, a white section also needs its bottom
   padding (as the original's sections had), or its last row of cards runs into the band. */
.wp-block-post-content > .alignfull:not(.has-background, .wp-block-cover):has(+ .alignfull:is(.has-background, .wp-block-cover)) {
	padding-bottom: var(--wp--preset--spacing--60);
}

.qasolved-section-title__text {
	display: inline-block;
	position: relative;
}

.is-style-section-title:has(+ .is-style-rule-start) .qasolved-section-title__text::after,
.is-style-section-title:has(+ .is-style-rule-offset) .qasolved-section-title__text::after {
	content: "";
	position: absolute;
	top: calc(100% + var(--wp--preset--spacing--40));
	border-top: 2px solid var(--wp--preset--color--secondary);
}

/* On a dark section (cover) the separator is set to white: draw the rule in that colour. */
.is-style-section-title:has(+ .wp-block-separator.has-base-background-color) .qasolved-section-title__text::after {
	border-top-color: var(--wp--preset--color--base);
}

/* --qasolved-title-start/-end: gap between the text box and the longest line of a wrapped title, set by
   assets/js/section-title.js (0 for a one-line title). */
.is-style-section-title:has(+ .is-style-rule-start) .qasolved-section-title__text::after {
	right: calc(var(--qasolved-title-end, 0px) - var(--wp--preset--spacing--50) - var(--wp--preset--spacing--40));
	left: -100vw;
}

.is-style-section-title:has(+ .is-style-rule-offset) .qasolved-section-title__text::after {
	right: -100vw;
	left: calc(var(--qasolved-title-start, 0px) - var(--wp--preset--spacing--50) - var(--wp--preset--spacing--40));
}

.is-style-section-title:has(.qasolved-section-title__text) + .wp-block-separator:is(.is-style-rule-start, .is-style-rule-offset) {
	visibility: hidden;
}

/* Pagination (posts grid: blog, archives, search): "Page 2 of 37" (qasolved_pagination_status) on the left,
   round page numbers and pill Previous / Next on the right; the current page is a solid blue circle. A hairline
   above separates it from the posts. Phones: status above, only Previous / current / Next. */
.wp-block-query-pagination {
	flex-wrap: wrap;
	align-items: center;
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--custom--color--hairline);
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
}

.wp-block-query-pagination > .qasolved-pagination-status {
	margin: 0 auto 0 0;
	color: var(--wp--preset--color--body-text);
	font-size: var(--wp--preset--font-size--text-small);
	letter-spacing: 0.02em;
}

.wp-block-query-pagination-numbers {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
}

.wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: var(--wp--preset--spacing--60);
	height: var(--wp--preset--spacing--60);
	margin: 0;
	padding: 0 var(--wp--preset--spacing--20);
	border-radius: var(--wp--preset--border-radius--pill);
	color: var(--wp--preset--color--body-text);
	font-size: var(--wp--preset--font-size--small-title);
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wp-block-query-pagination-numbers .page-numbers.dots {
	min-width: auto;
	letter-spacing: 0.1em;
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background-color: var(--wp--preset--color--secondary);
	box-shadow: var(--wp--preset--shadow--card);
	color: var(--wp--preset--color--base);
	font-weight: 600;
}

.wp-block-query-pagination > :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	gap: var(--wp--preset--spacing--20);
	height: var(--wp--preset--spacing--60);
	margin: 0;
	padding: 0 var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--custom--color--hairline);
	border-radius: var(--wp--preset--border-radius--pill);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small-title);
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.wp-block-query-pagination a:is(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next):hover,
.wp-block-query-pagination a:is(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next):focus-visible {
	border-color: var(--wp--preset--color--gray-light);
	background-color: var(--wp--preset--color--gray-light);
	color: var(--wp--preset--color--primary);
}

/* Thin chevrons drawn with borders (core's "chevron" arrow is a double «); they nudge outwards on hover. */
.wp-block-query-pagination-previous::before,
.wp-block-query-pagination-next::after {
	content: "";
	width: 0.4em;
	height: 0.4em;
	border-bottom: 1.5px solid currentcolor;
	border-left: 1.5px solid currentcolor;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.wp-block-query-pagination-next::after {
	transform: rotate(-135deg);
}

.wp-block-query-pagination-previous:hover::before {
	transform: translateX(-2px) rotate(45deg);
}

.wp-block-query-pagination-next:hover::after {
	transform: translateX(2px) rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {

	.wp-block-query-pagination *,
	.wp-block-query-pagination *::before,
	.wp-block-query-pagination *::after {
		transition: none;
	}
}

@media (max-width: 767px) {

	.wp-block-query-pagination {
		justify-content: center;
	}

	.wp-block-query-pagination > .qasolved-pagination-status {
		flex-basis: 100%;
		margin: 0;
		text-align: center;
	}

	.wp-block-query-pagination-numbers .page-numbers:not(.current) {
		display: none;
	}
}

/* Icon boxes with the icon beside the text (Elementor icon-box, position left) stack on phones with the text
   centred, as Elementor's default mobile position (block-start) did. Matched by structure: a no-wrap row of an
   icon and a vertical group holding the info title. */
@media (max-width: 767px) {

	.wp-block-group.is-nowrap:has(> .wp-block-qasolved-icon:first-child + .wp-block-group.is-vertical > .is-style-info-title) {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

/* Headings the original centred on phones only (tools/mobile-center-headings.php adds the class). */
@media (max-width: 767px) {

	.wp-block-heading.qasolved-center-mobile {
		text-align: center;
	}
}

/* Image-and-text columns the original reversed on tablets and phones (Elementor reverse_order_tablet/mobile):
   stacked below 1025px with the last column (the image) first. */
@media (max-width: 1024px) {

	.wp-block-columns.qasolved-reverse-tablet {
		flex-wrap: wrap;
	}

	.wp-block-columns.qasolved-reverse-tablet > .wp-block-column {
		flex-basis: 100%;
	}

	.wp-block-columns.qasolved-reverse-tablet > .wp-block-column:last-child {
		order: -1;
	}
}

/* Pricing plans: the original's plan rows were 1200px wide and centred (Enterprise and Payroll were full
   width: qasolved-plans-wide). */
.wp-block-group.alignwide:has(> .is-style-plan):not(.qasolved-plans-wide) {
	max-width: min(var(--wp--custom--layout--plans), 100%);
	margin-right: auto;
	margin-left: auto;
}

/* The hero checklists' box tick is solid in the original (a filled box, dark tick): fill the outline icon. */
.wp-block-qasolved-icon.qasolved-icon--check-square path:first-child {
	fill: currentcolor;
}

.wp-block-qasolved-icon.qasolved-icon--check-square path:last-child {
	stroke: var(--wp--preset--color--primary);
}

/* Tables in a Columns block (the single post's content column) inherited core's
   `.wp-block-column { word-break: break-word }`, which lets auto-layout columns shrink below their
   longest word ("Growin/g"). Keep whole words, as the original did; long unbroken strings (URLs)
   still wrap via overflow-wrap. Fixed-layout tables keep core's break-word on purpose. */
.wp-block-table table:not(.has-fixed-layout) :is(th, td) {
	word-break: normal;
	overflow-wrap: break-word;
}

/* With whole words, a table's minimum width can exceed a phone screen; without this the wrapper
   would push its flex column (and the post text) past the viewport. Contained, the wrapper takes
   the column's width and core's overflow-x: auto scrolls a wide table inside it instead. */
.wp-block-table {
	contain: inline-size;
}

/* "Fixed width table cells" gives equal columns, and core breaks words to fit them: fine on
   desktop, but on tablet/phone ("Enterpris/e") the columns get too narrow. Below the kit's tablet
   breakpoint those tables size to their content like the others (and scroll in their box if wide). */
@media (max-width: 1024px) {
	.wp-block-table table.has-fixed-layout {
		table-layout: auto;
	}

	.wp-block-table table.has-fixed-layout :is(th, td) {
		word-break: normal;
		overflow-wrap: break-word;
	}
}

/* Table style "Comparison" (styles/blocks/table-comparison.json): the original's feature comparison was a grid
   of lists: plain header, centred values, the first value column shaded, hairline rows only. */
.wp-block-table.is-style-comparison :is(th, td) {
	border: 0;
	border-bottom: 1px solid var(--wp--custom--color--hairline);
	background-color: transparent;
	color: inherit;
	text-align: center;
}

.wp-block-table.is-style-comparison thead th {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	font-weight: 400;
}

.wp-block-table.is-style-comparison :is(th, td):first-child {
	text-align: left;
}

.wp-block-table.is-style-comparison thead th:first-child {
	font-size: var(--wp--preset--font-size--icon-box-title);
}

.wp-block-table.is-style-comparison :is(th, td):nth-child(2) {
	background-color: var(--wp--preset--color--gray-light);
}

/* Converted Elementor images keep their "max width" as a percentage width. A centred figure shrink-wraps the
   image, so the percentage would apply to the image itself; as a block the percentage refers to the column,
   as in the original. */
.wp-block-image.aligncenter.is-resized {
	display: block;
}

/* …and, like Elementor's max-width, never larger than the image itself. */
.wp-block-image.aligncenter.is-resized img[style*="%"] {
	max-width: max-content;
}

/* Solid icon (class qasolved-icon-solid on the Icon block): the outline's first shape filled, the mark in white,
   like Font Awesome's solid icons on the original (e.g. the welcome page's check circle). */
.wp-block-qasolved-icon.qasolved-icon-solid path:first-child {
	fill: currentcolor;
}

.wp-block-qasolved-icon.qasolved-icon-solid path:last-child {
	stroke: var(--wp--preset--color--base);
}

/* Title-only cards (error lists on support pages): on phones the original's tiles were compact (about 17px
   padding and gap); the desktop sizes already match. */
@media (max-width: 767px) {

	.wp-block-group.is-style-card:has(> .wp-block-group:only-child > .is-style-info-title:only-child) {
		padding: var(--wp--preset--spacing--30);
	}

	.wp-block-group.is-layout-grid:has(> .is-style-card > .wp-block-group:only-child > .is-style-info-title:only-child) {
		gap: var(--wp--preset--spacing--30);
	}
}

/* Text the original set larger on tablets and phones than on desktop (Enterprise hero: "Gold, Platinum, and
   Diamond", 1.1rem → 1.75rem). */
@media (max-width: 1024px) {

	.qasolved-large-tablet {
		font-size: var(--wp--preset--font-size--primary);
	}
}

/* The original's ticks were Font Awesome's solid check: bolder than the outline icon's 1.5 stroke. */
.wp-block-qasolved-icon.qasolved-icon--check path {
	stroke-width: 2.5;
}

/* Icon-and-text cards (POS "Continue your journey"): compact like the original, with a full-size tick. */
.wp-block-group.is-style-card.is-nowrap:has(> .wp-block-qasolved-icon:first-child + p:last-child) {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

.wp-block-group.is-style-card.is-nowrap > .wp-block-qasolved-icon.qasolved-icon--check:first-child {
	font-size: var(--wp--preset--font-size--icon);
}

/* Logo galleries on pages: an odd last logo stays the size of the others (core stretches it across the row). */
.page .wp-block-gallery.has-nested-images {
	justify-content: center;
}

.page .wp-block-gallery.has-nested-images figure.wp-block-image {
	flex-grow: 0;
}