/* ============================================================
   Theme-local components.

   Why this file exists: assets/css/styles.css is a PRE-COMPILED
   Tailwind build, so it only contains the utility classes the
   design HTML actually used. Arbitrary values generated by PHP -
   bg-[#0a4dda], text-[14px] and friends - resolve to nothing at
   all, which is how the pagination "current" chip ended up with
   correct markup and zero styling. Anything the templates build
   at runtime needs real rules here.

   Accent colour follows the design system (#2477dd - see
   assets/css/pages/blogshow.css), not an invented blue.
   ============================================================ */

/* ---------- Pagination ---------- */
.ip-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 44px 0 0;
	padding: 0;
	list-style: none;
}

.ip-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border: 1px solid #e5e7eb;
	border-radius: 9999px;
	background: #fff;
	color: #161616;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.ip-pager a.page-numbers:hover {
	border-color: #2477dd;
	color: #2477dd;
}

/* The selected page: paginate_links() emits a <span>, not an <a>. */
.ip-pager .page-numbers.current,
.ip-pager .page-numbers[aria-current="page"] {
	border-color: #2477dd;
	background: #2477dd;
	color: #fff;
	cursor: default;
	pointer-events: none;
}

/* Disabled prev/next on the first and last page. */
.ip-pager .page-numbers.prevdisabled,
.ip-pager .page-numbers.nextdisabled,
.ip-pager span.page-numbers.prev,
.ip-pager span.page-numbers.next {
	color: #b3b9c2;
	border-color: #eef0f3;
	cursor: default;
	pointer-events: none;
}

/* Ellipsis produced by paginate_links(). */
.ip-pager .page-numbers.dots {
	min-width: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: #8a8f98;
}

@media (max-width: 639px) {
	.ip-pager {
		gap: 6px;
		margin-top: 34px;
	}

	.ip-pager .page-numbers {
		min-width: 36px;
		height: 36px;
		padding: 0 11px;
		font-size: 13px;
	}
}

/* ---------- Author bio (bottom of an article) ----------
   Clean card: eyebrow, identity row with a ring around the photo, hairline
   divider, then the text. The old version leaned on a 3px blue left stripe and
   a grey fill, which read like a callout rather than a signature. */
.ip-bio {
	margin-top: 56px;
	padding: 30px 32px 32px;
	border: 1px solid #e8ecf2;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(16, 42, 84, .05);
}

.ip-bio-label {
	margin: 0 0 16px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #2477dd;
}

.ip-bio-head {
	display: flex;
	align-items: center;
	gap: 18px;
	padding-bottom: 22px;
	border-bottom: 1px solid #eef1f5;
}

.ip-bio-avatar {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	border: 3px solid #eaf2fe;
	border-radius: 9999px;
	background: #fff;
	object-fit: cover;
	box-shadow: 0 4px 14px rgba(16, 42, 84, .10);
}

.ip-bio-name {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: #161616;
}

.ip-bio-role {
	margin: 5px 0 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: #8a8f98;
}

.ip-bio-text {
	margin: 22px 0 0;
	font-size: 16px;
	line-height: 1.85;
	color: #4b5563;
}

@media (max-width: 639px) {
	.ip-bio {
		margin-top: 42px;
		padding: 24px 20px 26px;
		border-radius: 14px;
	}

	.ip-bio-head {
		gap: 14px;
		padding-bottom: 18px;
	}

	.ip-bio-avatar {
		width: 60px;
		height: 60px;
		border-width: 2px;
	}

	.ip-bio-name {
		font-size: 18px;
	}

	.ip-bio-text {
		margin-top: 18px;
		font-size: 15.5px;
	}
}

/* ---------- Blog sidebar search ----------
   The design's own reset paints every input with a transparent border
   (assets/css/styles.css: input,textarea { border: 1px solid #0000 }) and only
   darkens it on focus, while the `border-line` utility used in the markup never
   made it into the compiled Tailwind build. The field therefore read as an empty
   strip with a floating magnifier. Give it a real outline that answers hover and
   focus, in the site blue. */
.ip-search input[type="search"],
.ip-search input[type="text"] {
	background: #fff;
	border: 1px solid #dfe3ea;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.ip-search:hover input[type="search"],
.ip-search:hover input[type="text"] {
	border-color: #c7cfdb;
}

.ip-search:focus-within input[type="search"],
.ip-search:focus-within input[type="text"] {
	border-color: #2477dd;
	box-shadow: 0 0 0 3px rgba(36, 119, 221, .12);
	outline: none;
}

/* The magnifier is a real submit button now, so it must not look like one. */
.ip-search .ip-search-submit {
	background: none;
	border: 0;
	line-height: 1;
	padding: 0;
}

.ip-search .ip-search-submit:hover {
	color: #2477dd;
}

/* ---------- LuckyWP Table of Contents, in the design's left rail ----------
   The plugin owns the markup and the anchors; this only restyles it to the
   approved .bs-toc-list / .bs-toc-link look so the rail is unchanged. */
.bs-toc-div .lwptoc {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	width: auto;
	float: none;
}

.bs-toc-div .lwptoc_i {
	padding: 0;
	background: none;
}

.bs-toc-div .lwptoc_header {
	display: none;
}

.bs-toc-div .lwptoc_items {
	margin: 0;
	max-height: none;
	overflow: visible;
}

.bs-toc-div .lwptoc_item {
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	font-size: 15px;
	line-height: 1.35;
}

.bs-toc-div .lwptoc_item:last-child {
	margin-bottom: 0;
}

.bs-toc-div .lwptoc_item a {
	display: block;
	text-decoration: none;
	transition: color .2s ease;
}

/*
 * Colours.
 *
 * The plugin prints an inline stylesheet in wp_head -
 *   .lwptoc .lwptoc_i A{color:#161616} / A:hover{color:#2e7ddf} / A:visited{...}
 * - which sits at the same specificity as a two-class theme rule and therefore
 * won, so the rail used to follow the plugin palette. Every selector below adds
 * one more class than the plugin's worst case (:hover / :visited included) so the
 * theme decides, and stays readable if the plugin's colour settings change.
 *
 * Brief: item = #161616, hover = #2477DD, no weight change on hover (a bolder
 * hover reflows the rail and makes every other line jump a pixel).
 */
.bs-toc-div .lwptoc .lwptoc_i .lwptoc_item > a,
.bs-toc-div .lwptoc .lwptoc_i .lwptoc_item > a:visited {
	color: #161616;
	font-weight: 400;
}

.bs-toc-div .lwptoc .lwptoc_i .lwptoc_item > a:hover,
.bs-toc-div .lwptoc .lwptoc_i .lwptoc_item > a:focus {
	color: #2477dd;
	font-weight: 400;
}

/* Current section: colour plus a bar, so it is not colour-only. */
.bs-toc-div .lwptoc .lwptoc_i .lwptoc_item.bs-toc-here > a,
.bs-toc-div .lwptoc .lwptoc_i .lwptoc_item.bs-toc-here > a:visited {
	color: #2477dd;
	font-weight: 600;
}

/* Numbers are off by design intent: the rail lists sections, not steps. */
.bs-toc-div .lwptoc_item_number {
	display: none;
}

.bs-toc-div .lwptoc_item_label {
	display: inline;
}

/* Nested levels stay readable without competing with H2s. */
.bs-toc-div .lwptoc_item-hierarchical {
	padding-left: 12px;
	font-size: 14px;
}

.bs-toc-div .lwptoc_toggle {
	display: none;
}

/* ---------- TOC rail: scrolling, hide / show ----------
   No left rule and no indent: the entries sit flush under the heading, and the
   current section is carried by colour + weight only. */
.bs-toc-div .bs-toc-list {
	max-height: calc(100vh - 300px);
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 4px;
	scrollbar-width: thin;
}

.bs-toc-div .bs-toc-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

.bs-toc-div .bs-toc-actions {
	display: flex;
	flex: none;
	align-items: center;
}

.bs-toc-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 2px 2px 6px;
	border: 0;
	background: none;
	cursor: pointer;
	color: #161616;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .08em;
	text-transform: uppercase;
	transition: color .2s ease;
}

.bs-toc-toggle:hover,
.bs-toc-toggle:focus {
	color: #2477dd;
}

.bs-toc-toggle:focus-visible {
	outline: 2px solid #2477dd;
	outline-offset: 2px;
	border-radius: 4px;
}

.bs-toc-toggle svg {
	width: 13px;
	height: 13px;
	flex: none;
}

/*
 * One button per state, exactly like the reference implementation: only the
 * control that matches the current state is in view, so the rail never shows
 * two contradictory labels.
 */
.bs-toc-div:not([data-bs-toc-state="collapsed"]) .bs-toc-toggle--expand {
	display: none;
}

.bs-toc-div[data-bs-toc-state="collapsed"] .bs-toc-toggle--collapse {
	display: none;
}

/* The list stays in the DOM: the scroll-spy keeps tracking while it is hidden. */
.bs-toc-div[data-bs-toc-state="collapsed"] .bs-toc-list {
	display: none;
}

/* ---------- Guide (eBook) listing ----------
   Written as real rules rather than Tailwind arbitrary values for the same
   reason as the pagination above: styles.css is a frozen build. */
.ip-wp-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 36px;
	margin-top: 40px;
}

.ip-wp-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ip-wp-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(16, 42, 67, 0.13);
}

.ip-wp-cover {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: #eef2f7;
}

.ip-wp-body {
	padding: 22px 24px 26px;
}

.ip-wp-tag {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #2477dd;
}

.ip-wp-title {
	margin: 8px 0 10px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
	color: #131f39;
}

.ip-wp-excerpt {
	font-size: 15px;
	line-height: 1.6;
	color: #545454;
}

.ip-wp-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	font-size: 15px;
	font-weight: 600;
	color: #2477dd;
}

.ip-wp-meta {
	margin-top: 12px;
	font-size: 13px;
	color: #8a94a6;
}

@media (max-width: 767px) {
	.ip-wp-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}

/* ---------- Guide landing page ---------- */
.ip-ebook {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
	gap: 48px;
	align-items: start;
	margin-top: 40px;
}

.ip-ebook-figure {
	margin: 0 0 26px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
	background: #eef2f7;
}

.ip-ebook-figure img {
	display: block;
	width: 100%;
	height: auto;
}

.ip-ebook-lead {
	font-size: 17px;
	line-height: 1.75;
	color: #334159;
}

.ip-ebook-points {
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.ip-ebook-points li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 12px;
	font-size: 15.5px;
	line-height: 1.6;
	color: #334159;
}

.ip-ebook-points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 12px;
	height: 12px;
	border: 2px solid #2477dd;
	border-radius: 9999px;
}

.ip-ebook-aside {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	padding: 26px 24px 24px;
	box-shadow: 0 10px 30px rgba(16, 42, 67, 0.07);
}

.ip-ebook-aside h2 {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 700;
	color: #131f39;
}

.ip-ebook-note {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.6;
	color: #6b7686;
}

@media (max-width: 1023px) {
	.ip-ebook {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
}

@media (min-width: 1024px) {
	.ip-ebook-aside {
		position: sticky;
		top: 124px;
	}
}

/* ---------- Guide landing: text column and friendlier form card ---------- */
.ip-ebook-eyebrow {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #2477dd;
}

.ip-ebook-h1 {
	margin: 0 0 18px;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.25;
	color: #131f39;
}

.ip-ebook-h2 {
	margin: 30px 0 4px;
	font-size: 20px;
	font-weight: 700;
	color: #131f39;
}

.ip-ebook-points li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding-left: 0;
}

/* The list now draws its own tick icon, so the older dot pseudo-element is off. */
.ip-ebook-points li::before {
	content: none;
}

.ip-ebook-tick {
	flex: 0 0 auto;
	margin-top: 3px;
	color: #2477dd;
}

.ip-ebook-figure figcaption {
	padding: 10px 16px;
	background: #f7f9fc;
	font-size: 13px;
	color: #8a94a6;
}

.ip-ebook-aside-title {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 700;
	color: #131f39;
}

.ip-ebook-aside-sub {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.65;
	color: #545454;
}

.ip-ebook-assure {
	margin: 22px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid #eef0f3;
	list-style: none;
}

.ip-ebook-assure li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 10px;
	font-size: 13.5px;
	line-height: 1.6;
	color: #6b7686;
}

.ip-ebook-assure li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	color: #2477dd;
	font-weight: 700;
}

.ip-wp-h1 {
	margin: 0;
	font-size: 42px;
	font-weight: 700;
	line-height: 1.2;
	color: #131f39;
}

.ip-wp-lead {
	max-width: 760px;
	margin: 14px 0 0;
	font-size: 17px;
	line-height: 1.7;
	color: #545454;
}

.ip-wp-body {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
	padding-top: 8px;
	padding-bottom: 84px;
}

.ip-wp-rail {
	position: sticky;
	top: 124px;
}

.ip-wp-rail-title {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8a94a6;
}

.ip-wp-rail ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 1px solid #e5e7eb;
}

.ip-wp-rail li a {
	display: block;
	padding: 9px 0 9px 16px;
	margin-left: -1px;
	border-left: 2px solid transparent;
	font-size: 15px;
	color: #545454;
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.ip-wp-rail li a:hover {
	color: #2477dd;
	border-left-color: #2477dd;
}

.ip-wp-rail-note {
	margin: 20px 0 0;
	padding: 14px 16px;
	background: #f5f8fd;
	border-radius: 10px;
	font-size: 13.5px;
	line-height: 1.6;
	color: #5a6472;
}

.ip-wp-group {
	margin-bottom: 60px;
	scroll-margin-top: 132px;
}

.ip-wp-h2 {
	margin: 0 0 24px;
	padding-bottom: 14px;
	border-bottom: 1px solid #eef0f3;
	font-size: 25px;
	font-weight: 700;
	color: #131f39;
}

@media (max-width: 1023px) {
	.ip-wp-body {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.ip-wp-rail {
		position: static;
	}
}

/* ---------- Guides listing ----------
   Plain white, three cards per row, no category rail. Written as real rules rather
   than Tailwind arbitrary values because styles.css is a frozen pre-compiled build
   that has no rules for values generated by PHP. */
.ip-wp-wrap {
	padding-top: 28px;
	padding-bottom: 84px;
	background: #fff;
}

.ip-wp-head {
	margin: 22px 0 6px;
}

.ip-wp-h1 {
	margin: 0;
	font-size: 38px;
	font-weight: 700;
	line-height: 1.2;
	color: #131f39;
}

.ip-wp-lead {
	max-width: 780px;
	margin: 12px 0 0;
	font-size: 16.5px;
	line-height: 1.7;
	color: #545454;
}

.ip-wp-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	margin-top: 36px;
}

.ip-wp-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.ip-wp-card:hover {
	transform: translateY(-4px);
	border-color: #cdd9ee;
	box-shadow: 0 16px 36px rgba(16, 42, 67, 0.12);
}

.ip-wp-coverwrap {
	display: block;
	padding: 12px 12px 0;
	background: #fff;
}

.ip-wp-cover {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border: 1px solid #eef0f3;
	border-radius: 8px;
	background: #f5f8fd;
}

.ip-wp-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 16px 18px 18px;
}

.ip-wp-title {
	margin: 0 0 5px;
	font-size: 17.5px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -0.01em;
	color: #131f39;
}

.ip-wp-excerpt {
	flex: 1 1 auto;
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #545454;
}

.ip-wp-cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 14px;
	font-size: 14.5px;
	font-weight: 600;
	color: #2477dd;
}

.ip-wp-card .ip-wp-cta svg {
	transition: transform 0.25s ease;
}

.ip-wp-card:hover .ip-wp-cta svg {
	transform: translateX(4px);
}

@media (max-width: 1100px) {
	.ip-wp-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 679px) {
	.ip-wp-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	.ip-wp-h1 {
		font-size: 28px;
	}
}

/* ---------- Breadcrumb ----------
   Mirrors .bs-crumb in blogshow.css so the trail looks identical here, where that
   stylesheet is not loaded: muted grey text, links a shade darker that turn brand
   blue on hover, small chevron separators, current item in near-black. */
.ip-crumb {
	font-size: 14px;
	line-height: 1.5;
	color: #8a8f98;
}

.ip-crumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ip-crumb li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ip-crumb a {
	color: #4b5563;
	text-decoration: none;
	transition: color 0.2s ease;
}

.ip-crumb a:hover {
	color: #2477dd;
}

.ip-crumb .sep {
	width: 12px;
	height: 12px;
	color: #b3b9c2;
	flex: 0 0 auto;
}

.ip-crumb .cur {
	color: #161616;
}

/* ============================================================
   Guides listing - authoritative spacing.
   Last in the file on purpose: the section above accumulated two generations of
   .ip-wp-* rules during the redesign, and the older page-level `.ip-wp-body`
   carried `gap: 56px` meant for a two-column page layout. That gap leaked into
   each card's text column and pushed ~56px of air between the title, the summary
   and the button. Every property that matters is restated here so the card owns
   its own spacing and nothing can inherit it again.
   ============================================================ */
.ip-wp-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	margin-top: 36px;
}

.ip-wp-card .ip-wp-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0;
	padding: 16px 18px 18px;
}

.ip-wp-card .ip-wp-title {
	margin: 0 0 5px;
	font-size: 17.5px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -0.01em;
	color: #131f39;
}

.ip-wp-card .ip-wp-excerpt {
	flex: 0 0 auto;
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #545454;
}

.ip-wp-card .ip-wp-cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: auto;
	padding-top: 16px;
	font-size: 14.5px;
	font-weight: 600;
	color: #2477dd;
}

@media (max-width: 1100px) {
	.ip-wp-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 679px) {
	.ip-wp-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}
}


/* ============================================================
   Need Assistance FAQ accordion (/resource/)

   resource.js already implements the accordion correctly - exclusive open, and it
   syncs .ant-collapse-item-active plus .ant-collapse-content-active/-hidden, the
   aria state and the arrow. What was missing is the one rule those class names
   depend on: the Ant Design stylesheet that normally carries
   `.ant-collapse-content { display: none }` is not loaded on this site, so every
   answer stayed on screen and clicking a header changed classes with no visible
   effect. Hiding is declared here, so the existing script works as written.
   ============================================================ */
.ip-faq-collapse .ant-collapse-content {
	display: none;
}

.ip-faq-collapse .ant-collapse-content-active {
	display: block;
	animation: ip-faq-open 0.22s ease;
}

@keyframes ip-faq-open {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Open state gets the same brand-blue treatment the hover state already has, so
   the reader can see which question they are inside at a glance. */
.ip-faq-collapse .ant-collapse-item-active > .ant-collapse-header .ant-collapse-header-text {
	color: #2477dd;
}

.ip-faq-collapse .ant-collapse-content-box {
	padding: 0 16px 16px 42px;
}

@media (prefers-reduced-motion) {
	.ip-faq-collapse .ant-collapse-content-active {
		animation: none;
	}
}


/* ---------- FAQ header layout (/resource/) ----------
   The panel markup is Ant Design's, but the stylesheet that lays the header out as
   a row was never loaded, so the caret - a block-level div wrapping a <button> -
   stacked on its own line above the question. Only border-radius, hover and text
   weight were patched in earlier, which is why the colours worked and the geometry
   did not. Declared here: caret, then title on the same row, caret fixed width so
   wrapped titles still align. */
.ip-faq-collapse .ant-collapse-header {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;
	padding: 15px 16px;
	cursor: pointer;
}

.ip-faq-collapse .ant-collapse-expand-icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 16px;
	color: #161616;
}

/* The caret is a real <button>, so it inherits the user-agent chrome; strip it and
   let the caret colour follow the row state the script already maintains. */
.ip-faq-collapse .ant-collapse-expand-icon > button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	line-height: 0;
	cursor: pointer;
}

.ip-faq-collapse .ant-collapse-header-text {
	flex: 1 1 auto;
	font-size: 15px;
	line-height: 1.5;
	color: #161616;
}

.ip-faq-collapse .ant-collapse-item-active > .ant-collapse-header .ant-collapse-expand-icon {
	color: #2477dd;
}

.ip-faq-collapse .ant-collapse-expand-icon > button:focus-visible {
	outline: 2px solid #2477dd;
	outline-offset: 3px;
	border-radius: 2px;
}


/* ---------- Sidebar search box (/blog/, tags, search) ----------
   The field was a bare input with a magnifier glyph floating over its right edge:
   no border, no focus ring, and the native <button> kept its user-agent chrome. The
   rules above already key off .ip-search, which the shell now adds to the wrapper.
   .form-search also carries a stray "opacity:0" in the compiled Tailwind build (it
   was written for the mobile drawer reveal and never scoped), so opacity is pinned
   here instead of relying on the unscoped override two rules later. */
.form-search.ip-search {
	opacity: 1;
}

.form-search.ip-search input[type="search"] {
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #fff;
	color: #161616;
	font-size: 14px;
	/* Room for the 32px button plus its 8px inset on each side. */
	padding: 0 48px 0 16px;
	box-shadow: 0 1px 2px rgba(22, 22, 22, .04);
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.form-search.ip-search input[type="search"]::placeholder {
	color: #9ca0a6;
	opacity: 1;
}

/* Chrome/Safari draw a clear "x" on the same edge as the submit button. */
.form-search.ip-search input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

.form-search.ip-search input[type="search"]:hover {
	border-color: #cfd4da;
}

.form-search.ip-search:hover input[type="search"] {
	border-color: #cfd4da;
}

/* ---------- Search button ----------
   Reads as a control now: circular hit area, icon centred, brand blue on hover. */
.form-search.ip-search .ip-search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	border-radius: 9999px;
	background: transparent;
	color: #696c70;
	font-size: 17px;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.form-search.ip-search .ip-search-submit:hover {
	background: #2477dd;
	color: #fff;
}

.form-search.ip-search .ip-search-submit:focus-visible {
	outline: 2px solid #2477dd;
	outline-offset: 2px;
}

.form-search.ip-search:focus-within .ip-search-submit {
	color: #2477dd;
}

/* ---------- Archive heading line (shell 'intro' arg) ---------- */
.ip-archive-intro {
	margin: 0 0 22px;
	color: #6b7280;
	font-size: 15px;
	line-height: 1.6;
}

/* ---------- Empty state ----------
   Replaces the grid when a term or query has no posts; without it the page showed a
   bare sidebar next to an empty <div class="list-blog">. */
.ip-archive-empty {
	padding: 44px 28px;
	border: 1px dashed #d8dce2;
	border-radius: 12px;
	background: #fafbfc;
	text-align: center;
}

.ip-archive-empty-title {
	margin-bottom: 8px;
	color: #161616;
	font-size: 18px;
	font-weight: 700;
}

.ip-archive-empty-text {
	margin: 0;
	color: #6b7280;
	font-size: 14px;
	line-height: 1.65;
}


/* ---------- Search box: vertical alignment ----------
   Browser measurement: the button sat 16px above the field's own top edge. The input
   is an inline-level element, so the line box of its block parent pushed the 48px
   field down by roughly one line-height (24px) below the wrapper, while the button is
   absolutely positioned against the wrapper and centred with top:50%. Making the form
   and the input block-level removes the line box, so both share the wrapper's box. */
.form-search.ip-search form {
	display: block;
	height: 100%;
}

.form-search.ip-search input[type="search"] {
	display: block;
}

/* ---------- Search box: focus state ----------
   The .ip-search:focus-within rule earlier in this file has exactly the same
   specificity as the field rules above and sits earlier in the source, so it lost and
   the border never changed on focus. Re-declared with one more class-level selector. */
.form-search.ip-search:focus-within input[type="search"],
.form-search.ip-search input[type="search"]:focus {
	border-color: #2477dd;
	box-shadow: 0 0 0 3px rgba(36, 119, 221, .12);
	outline: none;
}

/* ---------- Listing column must not shrink to its content ----------
   .left is a flex container whose child <section> has no width of its own. With an
   empty result set the section collapsed to max-content (734px instead of 952px) and
   the empty state was centred in a column that no longer matched the other listings. */
.blog.list .left > section {
	width: 100%;
}

/* ---------- Equal card heights ----------
   A post without an excerpt printed <p> with no content and therefore no height, so
   any row holding such a card was ~20px shorter than the rows around it. Reserve the
   two clamped lines the design already uses; line-clamp keeps the text at two lines. */
.list-blog p.line-clamp-2 {
	min-height: 2.8em;
}


/* ---------- Card cover placeholder (no featured image) ----------
   Replaces the old fallback that stretched the site logo to fill the whole cover slot
   (a 93px logo blown up to 304px). The logo now sits centred at its own proportions.
   aspect-ratio is declared here rather than left to the aspect-[9/6] utility so the
   block cannot collapse if the pre-compiled Tailwind build is ever trimmed. */
.ip-card-nocover {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 9 / 6;
	min-height: 150px;
	padding: 16px;
	background: #f2f4f7;
	border-bottom: 1px solid #e5e7eb;
	text-align: center;
}

.ip-card-nocover img {
	width: 46%;
	max-width: 150px;
	height: auto;
	opacity: .9;
}

/* Hover state of the card should keep the placeholder consistent with the cover it
   replaced, which darkens slightly on the design's lift animation. */
a:hover > .ip-card-nocover {
	background: #eceff3;
}


/* ---------- .screen-reader-text ----------
   screen-reader-text is WordPress' own convention, and a classic theme has to ship the
   rule itself: the definition lives in wp-admin / block-editor stylesheets, never in
   front-end core CSS. The theme never defined it, so the label rendered as real text
   (measured: position static, 23px line box above the field) and pushed the 48px search
   input 24px below its wrapper - which is what made the absolutely positioned magnifier
   look detached from the box. .sr-only, used by the mobile drawer label, does exist in
   the compiled Tailwind build, which is why only this one label leaked.
   Rule is WordPress' standard clipping technique: no text is shown, no line box is
   created, and keyboard focus restores it for the element that receives it. */
.screen-reader-text {
	position: absolute;
	border: 0;
	clip-path: inset(50%);
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip-path: none;
	clip: auto;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	display: block;
	left: 5px;
	top: 5px;
	z-index: 100000;
	padding: 10px 14px;
	border-radius: 6px;
	background: #fff;
	color: #161616;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(22, 22, 22, .18);
}

/* ---------- Author avatar ------------------------------------------- */
/* The byline markup carries Ant Design class names (ant-avatar /
   ant-avatar-circle) but no Ant stylesheet is loaded, so the span had only the
   Tailwind overflow-hidden and square corners: every author photo on /blog/,
   the tag/category archives and the search results rendered as a square.
   cases.css already rounds its own grid at .cs-grid>a .ant-avatar; this is the
   site-wide rule the three card templates were missing. Both the box and the
   img are rounded so a photo without the clip parent still reads as a circle. */
.ant-avatar,
.ant-avatar-circle {
	border-radius: 50%;
}

.ant-avatar img {
	border-radius: 50%;
}