/* ==========================================================================
   ProjonmoSoft — component layer
   theme.json owns colour, type and spacing tokens. This file only carries
   what theme.json cannot express: grids, hover states, and block styles.
   ========================================================================== */

/* --- Shared helpers ------------------------------------------------------ */

.pms-eyebrow,
.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	margin-bottom: 0;
}

.pms-section-head > * { margin-block-start: 0; }

/* The head spans the wide container so its text lines up with the grid below,
   while the text itself stays at a readable measure. */
.pms-section-head > * {
	max-width: 680px;
	margin-inline: 0;
}

/* --- Header -------------------------------------------------------------- */

.pms-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-block-end: 1px solid var(--wp--preset--color--border);
	backdrop-filter: saturate(180%) blur(12px);
	background-color: rgba(255, 255, 255, .88) !important;
}

/* Hide the text fallback only when a logo image is actually present.
   core/site-logo can render an empty wrapper when no logo is set, which
   would otherwise hide the site title too and leave no branding at all. */
.pms-header .wp-block-site-logo:has(img) + .pms-sitetitle-fallback { display: none; }

.pms-header .wp-block-navigation a {
	color: var(--wp--preset--color--ink);
	position: relative;
	padding-block: .25rem;
	white-space: nowrap;
}

.pms-header .wp-block-button__link { white-space: nowrap; }

.pms-header .wp-block-navigation a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .18s ease;
}

.pms-header .wp-block-navigation a:hover::after,
.pms-header .wp-block-navigation .current-menu-item > a::after { transform: scaleX(1); }

.pms-nav-wrap { gap: var(--wp--preset--spacing--40); }

@media (max-width: 600px) {
	.pms-header-cta { display: none; }
}

/* --- Hero ---------------------------------------------------------------- */

.pms-hero { position: relative; overflow: hidden; }

/* Soft radial glow behind the headline, purely decorative. */
.pms-hero::before {
	content: "";
	position: absolute;
	inset-block-start: -35%;
	inset-inline-end: -10%;
	width: min(720px, 80vw);
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(70, 185, 241, .22) 0%, rgba(70, 185, 241, 0) 68%);
	pointer-events: none;
}

.pms-hero-inner { position: relative; }

/* 62ch at the hero's 22px size is ~860px — too long a measure to read
   comfortably. Cap it tighter and keep it flush left inside the centred group. */
.pms-hero-sub {
	max-width: 46ch;
	margin-inline: 0;
}

.pms-btn-lg .wp-block-button__link {
	padding: 1.05rem 2rem;
	font-size: var(--wp--preset--font-size--medium);
}

/* --- Buttons: extra styles ---------------------------------------------- */

.is-style-outline-light .wp-block-button__link {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5);
}

.is-style-outline-light .wp-block-button__link:hover {
	background: rgba(255, 255, 255, .12);
	color: #fff;
	box-shadow: inset 0 0 0 1.5px #fff;
}

.is-style-on-accent .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--primary-dark);
}

.is-style-on-accent .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: #fff;
}

/* --- Cards --------------------------------------------------------------- */

.pms-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: var(--wp--preset--spacing--30);
}

.is-style-card,
.is-style-card-hover {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--40);
	box-shadow: var(--wp--preset--shadow--soft);
	height: 100%;
}

.is-style-card-hover {
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.is-style-card-hover:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--lift);
	border-color: rgba(70, 185, 241, .55);
}

.pms-card > *:first-child { margin-block-start: 0; }
.pms-card > *:last-child { margin-block-end: 0; }

.pms-card h3 a {
	color: inherit;
	text-decoration: none;
}

.pms-card h3 a:hover { color: var(--wp--preset--color--primary); }

.pms-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-block-end: var(--wp--preset--spacing--30);
	border-radius: 12px;
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--surface-alt);
}

/* --- Trust bar ----------------------------------------------------------- */

.pms-logo-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.pms-logo { margin: 0; }

.pms-logo img {
	height: 44px;
	width: auto;
	filter: grayscale(1);
	opacity: .55;
	transition: filter .2s ease, opacity .2s ease;
}

.pms-logo img:hover {
	filter: grayscale(0);
	opacity: 1;
}

/* --- Stats --------------------------------------------------------------- */

.pms-stat-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
	gap: var(--wp--preset--spacing--40);
	text-align: center;
}

.pms-stat > * { margin-block: 0; }

.pms-stat-n {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: clamp(2.25rem, 5vw, 3.25rem);
	line-height: 1.05;
	letter-spacing: -.03em;
	margin-block-end: .35rem;
}

/* --- Process steps ------------------------------------------------------- */

.pms-step-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: var(--wp--preset--spacing--40);
}

.pms-step { position: relative; padding-block-start: var(--wp--preset--spacing--30); }

.pms-step::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 2px;
	background: var(--wp--preset--color--border);
}

.pms-step-n {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: .06em;
	color: var(--wp--preset--color--primary);
	margin: 0;
}

.pms-step > *:last-child { margin-block-end: 0; }

/* --- Checklist ----------------------------------------------------------- */

.is-style-checklist {
	list-style: none;
	padding-inline-start: 0;
}

.is-style-checklist li {
	position: relative;
	padding-inline-start: 1.9rem;
	margin-block-end: .6rem;
}

/* On dark sections the primary blue tick only reaches 2.91:1 against navy.
   Switch to the lighter accent, which reaches 7.55:1. */
.pms-hero .is-style-checklist li::before,
.pms-proof .is-style-checklist li::before,
.pms-stats .is-style-checklist li::before,
.pms-footer .is-style-checklist li::before {
	border-color: var(--wp--preset--color--accent);
}

.is-style-checklist li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .45em;
	width: 1.05rem;
	height: .55rem;
	border-inline-start: 2.5px solid var(--wp--preset--color--primary);
	border-block-end: 2.5px solid var(--wp--preset--color--primary);
	transform: rotate(-45deg);
}

/* --- Quotes -------------------------------------------------------------- */

.pms-quote-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: var(--wp--preset--spacing--30);
}

.pms-quote-text {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	color: var(--wp--preset--color--ink);
}

.pms-quote-text::before { content: "\201C"; }
.pms-quote-text::after { content: "\201D"; }

.pms-quote-by { color: var(--wp--preset--color--body); margin-block-end: 0; }

/* --- FAQ ----------------------------------------------------------------- */

.pms-faq > * {
	max-width: 760px;
	margin-inline: 0;
}

.pms-faq-item {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--20);
}

.pms-faq-item summary {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	list-style: none;
	padding-inline-end: 2rem;
	position: relative;
}

.pms-faq-item summary::-webkit-details-marker { display: none; }

.pms-faq-item summary::after {
	content: "";
	position: absolute;
	inset-inline-end: .25rem;
	inset-block-start: .45em;
	width: .55rem;
	height: .55rem;
	border-inline-end: 2px solid var(--wp--preset--color--primary);
	border-block-end: 2px solid var(--wp--preset--color--primary);
	transform: rotate(45deg);
	transition: transform .2s ease;
}

.pms-faq-item[open] summary::after { transform: rotate(-135deg); }

.pms-faq-item p { margin-block-end: 0; }

/* --- Images -------------------------------------------------------------- */

.is-style-rounded-lg img,
.is-style-rounded-lg {
	border-radius: 16px;
	overflow: hidden;
}

.pms-about-img img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

/* --- Post grid ----------------------------------------------------------- */

.pms-post-grid { gap: var(--wp--preset--spacing--30); }

.pms-post-grid .wp-block-post-title a { text-decoration: none; color: inherit; }
.pms-post-grid .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }

.pms-meta { color: var(--wp--preset--color--body); gap: var(--wp--preset--spacing--20); }

/* --- Footer -------------------------------------------------------------- */

.pms-footer a {
	color: #fff;
	text-decoration: none;
}

.pms-footer a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.pms-footer .pms-footer-list {
	list-style: none;
	padding-inline-start: 0;
}

.pms-footer .pms-footer-list li { margin-block-end: .55rem; }

.pms-footer-list a { color: var(--wp--preset--color--muted); }

.pms-footer-rule { border-color: rgba(255, 255, 255, .14); }

.pms-footer-logo img { filter: brightness(0) invert(1); opacity: .95; }

.pms-contact-list .pms-contact-item strong {
	display: block;
	color: #fff;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: .08em;
	margin-block-end: .25rem;
}

/* --- Accessibility ------------------------------------------------------- */

:where(a, button, summary, input, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 4px;
}

.pms-hero :focus-visible,
.pms-cta :focus-visible,
.pms-footer :focus-visible {
	outline-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- Doptory proof block ------------------------------------------------- */

.pms-proof-list {
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--40);
}

.pms-proof-list .is-style-checklist li:last-child { margin-block-end: 0; }