/*
 * WPAnkit Product: the few rules theme.json cannot express.
 * Colours, type and spacing come from theme.json presets only.
 */

html {
	scroll-padding-top: var(--wp--custom--header-offset);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizelegibility;
}

/* Visible focus on every interactive element. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

:where(.wp-element-button, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--wp--preset--color--primary-soft);
}

/* Sections sit flush: no block gap between header, main and footer. */
.wp-site-blocks > main,
.wp-site-blocks > footer,
body .wpankit-canvas > * {
	margin-block-start: 0;
}

/* Inline links in running text. */
:where(.wp-block-post-content, .wpankit-prose) :where(p, li) a:where(:not(.wp-element-button)) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* Header: logo left, menu centred, Pricing + Get Pro right. */
.wpankit-site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	border-bottom: 1px solid transparent;
	transition: border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

/* The frosted background sits on a pseudo-element. backdrop-filter on the header itself
   would make it the containing block for the fixed mobile menu overlay, trapping the
   overlay inside the header strip. */
.wpankit-site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: rgb(255 255 255 / 0.92);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
	pointer-events: none;
}

.wpankit-site-header.is-scrolled {
	border-bottom-color: var(--wp--preset--color--border);
	box-shadow: 0 4px 20px rgb(11 27 52 / 0.05);
}

.wpankit-header__brand {
	min-width: 0;
}

.wpankit-header__brand .wp-block-site-logo img {
	display: block;
	height: auto;
}

/* A wordmark logo names the product; show the title only without one. */
.wpankit-header__brand:has(.wp-block-site-logo img) .wp-block-site-title {
	display: none;
}

.wpankit-header__brand .wp-block-site-title {
	white-space: nowrap;
}

.wpankit-header__nav .wp-block-navigation-item__content,
.wpankit-header__link a {
	display: inline-block;
	padding: 0.5em 0.9em;
	border-radius: var(--wp--custom--radius--input);
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.wpankit-header__nav .wp-block-navigation-item__content:hover,
.wpankit-header__link a:hover {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary-hover);
}

.wpankit-header__nav .current-menu-item > .wp-block-navigation-item__content,
.wpankit-header__link a[aria-current="page"] {
	background-color: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary-hover);
}

.wpankit-header__actions {
	margin-inline-start: auto;
}

.wpankit-header__actions .wp-block-button__link {
	white-space: nowrap;
}

/* Mobile overlay: full-width rows with dividers and 48px tap targets. */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--lg);
}

.wpankit-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	padding-top: var(--wp--preset--spacing--60);
}

.wpankit-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: stretch;
	gap: 0;
	width: 100%;
}

.wpankit-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.wpankit-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0.7em 0;
	border-radius: 0;
	font-weight: 600;
}

.wpankit-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wpankit-header__nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	background-color: transparent;
	color: var(--wp--preset--color--primary-hover);
}

@media (min-width: 900px) {

	.wpankit-site-header .wpankit-header__row {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}

	.wpankit-header__brand {
		justify-self: start;
	}

	.wpankit-header__nav {
		justify-self: center;
	}

	.wpankit-header__actions {
		justify-self: end;
	}
}

@media (max-width: 899px) {

	.wpankit-header__link {
		display: none;
	}

	.wpankit-header__brand .wp-block-site-logo img {
		width: 150px;
	}

	.wpankit-header__nav {
		margin-inline-start: auto;
	}

	.wpankit-header__nav .wp-block-navigation__container {
		flex-wrap: nowrap;
	}

	.wpankit-header__nav .wp-block-navigation-item__content {
		padding-inline: 0.6em;
	}

	.wpankit-header__actions {
		margin-inline-start: 0;
	}
}

@media (max-width: 599px) {

	.wpankit-header__link {
		display: none;
	}

	.wpankit-header__brand {
		flex: 1 1 auto;
	}

	.wpankit-header__brand .wp-block-site-logo img {
		width: 150px;
	}

	.wpankit-header__brand .wp-block-site-title {
		font-size: var(--wp--preset--font-size--md);
		line-height: 1.25;
		white-space: normal;
	}

	.wpankit-header__nav {
		order: 3;
		margin-inline-start: 0;
	}
}

@media (max-width: 600px) {

	/* The admin bar scrolls away on small screens. */
	.wpankit-site-header {
		top: 0;
	}
}

/* Paragraph "Eyebrow" style */
.is-style-eyebrow {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Section intro: heading + lead paragraph */
.wpankit-lead {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--lg);
}

/* Cards built from core groups (contact page, docs landing). */
.wpankit-card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--base);
	transition: box-shadow var(--wp--custom--transition);
}

a.wpankit-card:hover,
.wpankit-card:has(a:hover) {
	box-shadow: var(--wp--preset--shadow--card);
}

/* Card headings that link read as headings, not as raw inline links. */
.wpankit-card :where(h1, h2, h3, h4, h5, h6) a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: color var(--wp--custom--transition);
}

.wpankit-card :where(h1, h2, h3, h4, h5, h6) a:hover {
	color: var(--wp--preset--color--primary-hover);
}

.wpankit-card :where(h1, h2, h3, h4, h5, h6) a:focus-visible {
	border-radius: 2px;
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* Placeholder slot for a form plugin block. */
.wpankit-slot {
	border: 2px dashed var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	color: var(--wp--preset--color--muted);
}

/* Docs layout */
.wpankit-docs-sidebar {
	align-self: flex-start;
}

@media (min-width: 782px) {

	.wpankit-docs-sidebar {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--custom--header-offset));
		max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - var(--wp--custom--header-offset) - 24px);
		overflow-y: auto;
	}
}

/* Doc articles: smaller section headings than landing pages. */
.wpankit-prose .wp-block-post-content > h2 {
	margin-block-start: var(--wp--preset--spacing--70);
	padding-block-end: var(--wp--preset--spacing--20);
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--xl);
}

.wpankit-prose .wp-block-post-content > h3 {
	margin-block-start: var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--lg);
}

/* Tables */
.wp-block-table table {
	border-collapse: collapse;
}

.wp-block-table table td,
.wp-block-table table th {
	padding: 0.6em 0.9em;
	border: 1px solid var(--wp--preset--color--border);
}

.wp-block-table table tr > :first-child {
	background-color: var(--wp--preset--color--surface);
}

/* Footer: brand + link columns, bottom bar with legal and social. */
.wpankit-site-footer a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.wpankit-site-footer a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--primary-hover);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.wpankit-footer .wpankit-footer__main {
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

.wpankit-footer__brand {
	max-width: 22rem;
}

.wpankit-footer__identity > * {
	margin-block: 0;
}

.wpankit-footer__identity .wp-block-site-logo img {
	display: block;
	height: auto;
}

/* Same rule as the header: a wordmark logo replaces the text title. */
.wpankit-footer__identity:has(.wp-block-site-logo img) .wp-block-site-title {
	display: none;
}

.wpankit-footer__tagline {
	margin-block-start: var(--wp--preset--spacing--30);
}

.wpankit-footer__credit,
.wpankit-footer__credit a {
	color: var(--wp--preset--color--muted);
}

.wpankit-footer__actions .wp-block-button__link {
	padding: 0.55em 1.1em;
	font-size: var(--wp--preset--font-size--sm);
}

.wpankit-footer__heading {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wpankit-footer__list,
.wpankit-footer__legal {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpankit-footer__heading + .wpankit-footer__list {
	margin-block-start: var(--wp--preset--spacing--40);
}

.wpankit-footer__list li + li {
	margin-block-start: var(--wp--preset--spacing--30);
}

.wpankit-footer__bottom {
	color: var(--wp--preset--color--muted);
}

.wpankit-footer__bottom > * {
	margin-block: 0;
}

.wpankit-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
}

.wpankit-footer__legal a {
	color: var(--wp--preset--color--muted);
}

/* Newsletter placeholder hides until a form block is in its slot. */
.wpankit-newsletter:has(.wpankit-form-slot:empty) {
	display: none;
}

@media (min-width: 900px) {

	.wpankit-footer .wpankit-footer__main {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
		column-gap: var(--wp--preset--spacing--90);
	}
}

@media (max-width: 599px) {

	.wpankit-footer__bottom,
	.wpankit-footer__meta {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Newsletter band in the footer (visible once a form is set). */
.wpankit-newsletter {
	align-items: center;
	margin-block: var(--wp--preset--spacing--70) 0;
	padding: var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--base);
}

.wpankit-newsletter__text {
	flex: 1 1 18rem;
}

.wpankit-newsletter__text > * {
	margin-block: 0;
}

.wpankit-newsletter .wpankit-form-slot {
	flex: 1 1 26rem;
}

/* Fluent Forms, styled with theme tokens. */
.fluentform .ff-el-group {
	margin-block-end: var(--wp--preset--spacing--50);
}

.fluentform .ff-el-input--label label {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
	color: var(--wp--preset--color--danger);
}

.fluentform .ff-el-form-control {
	padding: 0.7em 0.9em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--input);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.4;
	transition: border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

.fluentform .ff-el-form-control::placeholder {
	color: var(--wp--preset--color--muted);
}

.fluentform .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--primary);
	outline: none;
	box-shadow: 0 0 0 3px var(--wp--preset--color--primary-soft);
}

.fluentform .ff-el-form-check-input,
.fluentform input[type="checkbox"] {
	accent-color: var(--wp--preset--color--primary);
}

.fluentform .ff-el-tc,
.fluentform .ff_t_c {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
}

.fluentform .ff-el-help-message,
.fluentform .ff-el-tooltip {
	color: var(--wp--preset--color--muted);
}

.fluentform .error,
.fluentform .text-danger {
	color: var(--wp--preset--color--danger);
	font-size: var(--wp--preset--font-size--xs);
}

.fluentform .ff-el-is-error .ff-el-form-control {
	border-color: var(--wp--preset--color--danger);
}

.wp-site-blocks .fluentform .ff-btn.ff-btn-submit {
	padding: 0.75em 1.4em;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--button);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	transition: background-color var(--wp--custom--transition);
}

.wp-site-blocks .fluentform .ff-btn.ff-btn-submit:hover {
	border-color: var(--wp--preset--color--primary-hover);
	background-color: var(--wp--preset--color--primary-hover);
	opacity: 1;
}

.wp-site-blocks .fluentform .ff-btn.ff-btn-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--wp--preset--color--primary-soft);
}

.ff-message-success {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--input);
	background-color: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--contrast);
	box-shadow: none;
}

/* Blog and search listings */
.wpankit-post-card {
	padding-block: var(--wp--preset--spacing--60);
	border-block-end: 1px solid var(--wp--preset--color--border);
}

.wp-block-post-featured-image img {
	border-radius: var(--wp--custom--radius--card);
}

.wp-block-search__input {
	border-radius: var(--wp--custom--radius--input);
	border-color: var(--wp--preset--color--border);
}

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

	.wpankit-site-header,
	.wpankit-card,
	.wpankit-card :where(h1, h2, h3, h4, h5, h6) a {
		transition: none;
	}
}

/* Centered section intro (eyebrow, heading, lead). */
.wpankit-section-intro {
	text-align: center;
}

.wpankit-section-intro > * {
	margin-inline: auto;
}

.wpankit-footer {
	border-top: 1px solid var(--wp--preset--color--border);
}