/*
 * Layout tweaks on top of the ported design stylesheet (assets/css/site.css).
 */

/* Header & footer: full-width outer bar, 1260px inner container.
 * The <header>/<footer> elements themselves are already full-bleed (no
 * width constraint in site.css) — only their inner .container needed
 * adjusting. site.css sets the header's nav row to 1440px and the footer
 * inherits the sitewide 1240px --maxw; both are unified to 1260px here.
 */
.site-header .container.nav-row,
.site-footer .container {
	max-width: 1260px;
}

/* Article share-rail (single.php): Copy link + Save states. */
.share-rail [data-share-copy].is-copied {
	border-color: var(--primary, #d5001c);
	color: var(--primary, #d5001c);
}

.share-rail [data-share-save].is-saved {
	border-color: var(--primary, #d5001c);
	color: var(--primary, #d5001c);
}

/* Breadcrumb separators ("Home / Insights / Article") — the ported markup
 * relied on raw whitespace around a literal "/" for spacing, which collapsed
 * unevenly depending on how the PHP was line-wrapped. Use an explicit span
 * with real margin instead, consistent regardless of source formatting. */
.breadcrumb-sep {
	display: inline-block;
	margin: 0 8px;
	color: var(--ink-soft, #6b6b70);
}

/* Page hero background: site.css uses the sitewide pink --bg (#FFE6EA) here,
 * shared with a few unrelated elements (tile hover, icon circles) — override
 * just .page-header rather than the shared variable so those stay pink. */
.page-header {
	background: #f0f0f0;
}

/* Search results heading: site.css caps .page-header h1 at 820px, which
 * suits short static titles (Insights, About) but wraps awkwardly for the
 * dynamic "Search results for: <query>" heading. Let it use the full
 * .page-header .container width on the search template only. */
body.search-results .page-header h1 {
	max-width: none;
}

/* Icon buttons (header search toggle/submit, empower-section prev/next
 * arrows) now hold inline SVGs (see autoreports_icon() in inc/helpers.php)
 * instead of Unicode glyphs — center them properly and let the SVG's
 * stroke inherit the button's text color via currentColor. */
.icon-btn svg,
.tab-arrow svg {
	display: block;
}

.tab-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Insight card actions (Download PDF / Read More) — same inline-SVG icon
 * treatment as the header/empower icons above. .btn already handles flex
 * alignment + gap; this just keeps the SVG crisp and gives the Read More
 * arrow the same hover-slide motion .btn-arrow uses elsewhere on the site. */
.card-actions .btn svg {
	display: block;
}

.card-actions a.btn-outline svg {
	transition: transform 0.2s ease;
}

.card-actions a.btn-outline:hover svg {
	transform: translateX(3px);
}

/* Footer logo (image uploaded via Theme Options, or the site's custom logo)
 * — cap its height so an oversized upload doesn't blow out the footer row. */
.footer-logo-image img {
	max-height: 40px;
	width: auto;
	display: block;
}

/* Post-list pagination (search results, category/tag/date archives): WP core
 * outputs a plain <nav class="navigation pagination"><div class="nav-links">
 * ...</div></nav> with no styling of its own — center it, give it breathing
 * room from the card grid above, and use the site's blue theme color for the
 * active page / hover states. Shared by search.php and archive.php. */
.site-pagination {
	margin-top: 56px;
	display: flex;
	justify-content: center;
}

.site-pagination .nav-links {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
}

.site-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--gray-line, #e5e5e5);
	border-radius: 6px;
	font-weight: 600;
	font-size: 18px;
	color: var(--ink, #1a1a1a);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.site-pagination .page-numbers.dots {
	border-color: transparent;
}

.site-pagination .page-numbers.current,
.site-pagination a.page-numbers:hover,
.site-pagination a.page-numbers:focus-visible {
	background: var(--ar2-primary, #155AC1);
	border-color: var(--ar2-primary, #155AC1);
	color: #fff;
}