/**
 * Hub page (/pdf/) visual redesign.
 * Scoped to :is(body.page-template-page-hub, body.page-template-front-page-html) - the "page-hub" template is assigned
 * only to the /pdf/ page, so no other page is affected.
 *
 * Design system: site tokens from theme.css (brand red #E5322D / charcoal #33333B
 * / soft blue #5B7CFA), inherited in both light and dark modes.
 *
 * @package BFPT_Theme
 */

/* ---------- Hero ---------- */
:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-hub-intro .bfpt-eyebrow {
	display: block;
	text-align: center;
	color: var(--c-pri);
	letter-spacing: 0.1em;
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-hub-intro__title {
	color: var(--c-ink);
	font-size: clamp(2.25rem, 1.7rem + 2.6vw, 3.25rem);
	letter-spacing: -0.03em;
	line-height: 1.08;
	margin: 0.25rem 0 0.75rem 0;
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-hub-intro__subtitle {
	color: var(--c-body);
	font-size: 1.125rem;
	line-height: 1.55;
	max-width: 56ch;
	margin: 0 auto 1.75rem auto;
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-hub-cta-wrap {
	margin: 0;
}

/* Banner */
:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-hub-banner-wrap {
	max-width: 720px;
	margin: 2.5rem auto 0 auto;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--c-bdr);
	background-color: var(--c-surf);
	box-shadow: 0 12px 28px -18px rgba(20, 23, 31, 0.25);
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-hub-banner__img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 43 / 24;
	object-fit: cover;
}

/* ---------- Search ---------- */
:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-search-box {
	position: relative;
	width: 100%;
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-search-input-wrapper {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 56px;
	padding: 0 16px;
	background: var(--c-input-bg);
	border: 1px solid var(--c-bdr-s);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(20, 23, 31, 0.05);
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-search-input-wrapper:focus-within {
	border-color: var(--c-pri);
	box-shadow: 0 0 0 3px var(--c-focus-ring);
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-search-icon {
	color: var(--c-muted);
	flex-shrink: 0;
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-search-input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 1rem;
	color: var(--c-ink);
	outline: none;
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-search-input::placeholder {
	color: var(--c-muted);
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-search-shortcut {
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--c-muted);
	background: var(--c-surf-s);
	border: 1px solid var(--c-bdr);
	border-radius: 6px;
	padding: 3px 8px;
	line-height: 1;
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-search-results {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: var(--c-surf);
	border: 1px solid var(--c-bdr);
	border-radius: 12px;
	box-shadow: 0 12px 32px -8px rgba(20, 23, 31, 0.16);
	padding: 8px;
	z-index: 30;
	max-height: 380px;
	overflow: auto;
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-search-result-item {
	display: block;
	padding: 10px 12px;
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
	transition: background-color 120ms ease;
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-search-result-item:hover,
:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-search-result-item:focus-visible {
	background: var(--c-pri-s);
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-search-result-item__title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--c-ink);
	line-height: 1.3;
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-search-result-item__desc {
	font-size: 0.8125rem;
	color: var(--c-muted);
	margin-top: 2px;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-search-empty {
	padding: 16px 12px;
	font-size: 0.875rem;
	color: var(--c-muted);
	text-align: center;
}

/* ---------- Directory: container, pills, cards, tiles ---------- */
:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-directory-wrap {
	max-width: 1200px;
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-filter-pills-wrap {
	margin-bottom: 28px;
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-filter-pill {
	height: 40px;
	padding: 0 20px;
	background-color: var(--c-surf);
	color: var(--c-body);
	border: 1px solid var(--c-bdr);
	font-size: 0.875rem;
	font-weight: 500;
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-filter-pill:hover {
	border-color: var(--c-accent);
	color: var(--c-accent-ink);
	background-color: var(--c-accent-s);
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-filter-pill.is-active,
:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-filter-pill[aria-pressed="true"] {
	background-color: var(--c-pri);
	color: var(--c-pri-txt);
	border-color: var(--c-pri);
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-filter-pill:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--c-focus-ring);
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-grid {
	gap: 18px;
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-card {
	background-color: var(--c-surf);
	border: 1px solid var(--c-bdr);
	border-radius: 18px;
	padding: 28px;
	min-height: 232px;
	gap: 10px;
	transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-card:hover {
	transform: translateY(-3px);
	border-color: var(--c-bdr-s);
	box-shadow: 0 12px 28px -14px rgba(32, 32, 36, 0.22), 0 2px 6px rgba(32, 32, 36, 0.06);
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-card:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--c-focus-ring);
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-tile {
	border: none;
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-tile--organize { background-color: #E9ECFF; color: #4B4FD8; }
:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-tile--compress,
:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-tile--optimize { background-color: #DDF5E8; color: #12805C; }
:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-tile--convert { background-color: #FFF0D6; color: #B26A00; }
:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-tile--edit { background-color: #F3E8FF; color: #7C3AED; }
:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-tile--secure,
:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-tile--security { background-color: #E4EEF8; color: #25507F; }
:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-tile--extract { background-color: #DDF3F5; color: #0B7A8A; }
:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-tile--accent { background-color: #FFE4EE; color: #C2275F; }

[data-theme="dark"] :is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-tile--organize { background-color: #2A2D4A; color: #AAB2FF; }
[data-theme="dark"] :is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-tile--compress,
[data-theme="dark"] :is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-tile--optimize { background-color: #17352A; color: #6FE0B4; }
[data-theme="dark"] :is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-tile--convert { background-color: #3A2D12; color: #F0B85C; }
[data-theme="dark"] :is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-tile--edit { background-color: #2E1F4A; color: #C9A6FF; }
[data-theme="dark"] :is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-tile--secure,
[data-theme="dark"] :is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-tile--security { background-color: #1A2C40; color: #8FB8E8; }
[data-theme="dark"] :is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-tile--extract { background-color: #123338; color: #6FD0DC; }
[data-theme="dark"] :is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-tile--accent { background-color: #3D1A28; color: #FF92BE; }

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-card__title {
	color: var(--c-ink);
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-card__desc {
	color: var(--c-muted);
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-card__badge {
	top: 16px;
	right: 16px;
	background-color: var(--c-pri-s);
	color: var(--c-pri);
	border-color: transparent;
}

[data-theme="dark"] :is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-card__badge {
	color: var(--c-pri-ink);
}

/* ---------- How it works (shared pattern, hub-scoped restyle) ---------- */
:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-how-it-works .bfpt-eyebrow {
	color: var(--c-pri);
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-how-it-works .bfpt-section-header--editorial {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-how-it-works .bfpt-section-header--editorial a {
	color: var(--c-pri) !important;
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-how-it-works .bfpt-section-header--editorial a:hover {
	color: var(--c-pri-h) !important;
}

/* ---------- FAQ (shared pattern, hub-scoped restyle) ---------- */
:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-faq .bfpt-eyebrow {
	color: var(--c-pri);
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-faq .bfpt-section__title {
	color: var(--c-ink);
	font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
	letter-spacing: -0.02em;
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-faq__item {
	background-color: var(--c-surf);
	border: 1px solid var(--c-bdr);
	border-radius: 14px;
	padding: 0 22px;
	margin-bottom: 12px;
	transition: border-color 140ms ease;
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-faq__item[open] {
	border-color: var(--c-bdr-s);
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-faq__item summary {
	padding: 18px 0;
	font-size: 1rem;
	color: var(--c-ink);
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-faq__item summary:hover {
	color: var(--c-pri);
}

:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-faq__item p {
	color: var(--c-body);
	padding-bottom: 18px;
	margin-top: 0;
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
	:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-tool-card {
		min-height: 0;
		padding: 20px;
		border-radius: 14px;
	}

	:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-search-shortcut {
		display: none;
	}

	:is(body.page-template-page-hub, body.page-template-front-page-html) .bfpt-hub-banner-wrap {
		border-radius: 12px;
	}
}