/*
 * ForgeFi theme styles.
 * Colours, fonts and the type scale come from theme.json presets. The house
 * style is flat: no gradients, shadows, outlines, glass or small labels.
 * Surfaces are told apart by a step in tone, never by a line.
 */

:root {
	--ff-ink: var(--wp--preset--color--ink, #0a0a0b);
	--ff-mist: var(--wp--preset--color--mist, #f2f2f4);
	--ff-silver: var(--wp--preset--color--silver, #c7c7cc);
	--ff-steel: var(--wp--preset--color--steel, #6e6e73);
	--ff-serif: var(--wp--preset--font-family--serif);
	--ff-sans: var(--wp--preset--font-family--sans);
	--ff-gutter: max(16px, 4vw, env(safe-area-inset-left), env(safe-area-inset-right));

	/* Motion. The same curves drive the GSAP scroll motion in forgefi-motion.js. */
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

	--ff-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4'/%3E%3C/svg%3E");
}

/* Overscroll above the header and below the footer shows ink, not white. */
html {
	background: var(--ff-ink);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	scrollbar-color: var(--ff-steel) #fff;
}

html,
body {
	overflow-x: hidden;
	overflow-x: clip;
}

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

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
h1, h2, h3, h4, p, li, summary { overflow-wrap: break-word; }
.wp-block-column { min-width: 0; }

a {
	text-underline-offset: 0.2em;
	text-decoration-thickness: from-font;
}

a,
button,
summary {
	touch-action: manipulation;
}

::selection {
	background: var(--ff-ink);
	color: #fff;
}
.ff-header ::selection,
.has-ink-background-color ::selection {
	background: #fff;
	color: var(--ff-ink);
}

input,
textarea,
select {
	caret-color: var(--ff-ink);
	accent-color: var(--ff-ink);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 2px;
}

/* Sections sit flush against each other; spacing lives inside them. */
:where(.wp-site-blocks) > *,
.wp-block-post-content > .alignfull,
.ff-main > * {
	margin-block: 0;
}

/* ---------- Type ---------- */

/* Running text stops at a comfortable measure; named classes below can override. */
:where(.ff-section, .ff-hero, .ff-panel) p { max-width: 68ch; }

.ff-lede {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	max-width: 36rem;
}

/* A statement paragraph: never larger than 36px, so it never reads as a headline. */
.ff-statement {
	font-family: var(--ff-serif);
	font-size: clamp(1.5rem, 2.6vw, 2.25rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	max-width: 30ch;
	margin: 0;
}

.ff-meta { font-size: var(--wp--preset--font-size--small); }

/* ---------- Header: a plain bar ---------- */

.ff-header {
	background: var(--ff-ink);
	color: #fff;
	padding: 20px var(--ff-gutter);
}

.ff-header__bar {
	max-width: 1240px;
	margin-inline: auto;
	gap: 24px;
}

.ff-header__logo { margin: 0; flex: none; }
.ff-header__logo a { display: block; }
.ff-header__logo img { display: block; width: 116px; height: auto; }

.ff-nav { font-size: var(--wp--preset--font-size--medium); }
.ff-nav .wp-block-navigation__container { gap: 32px; }
.ff-nav .wp-block-navigation-item__content {
	color: #fff;
	text-decoration: none;
	text-underline-offset: 6px;
}
.ff-nav .current-menu-item > .wp-block-navigation-item__content,
.ff-nav [aria-current="page"] {
	text-decoration: underline;
}
.ff-nav .wp-block-navigation__responsive-container-open { color: #fff; }

/* Mobile menu: a full-screen ink panel with large serif links. */
.ff-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: calc(28px + var(--wp-admin--admin-bar--height, 0px)) var(--ff-gutter) max(40px, env(safe-area-inset-bottom));
	background: var(--ff-ink) !important;
	color: #fff !important;
}
.ff-nav .is-menu-open .wp-block-navigation__container { gap: 0.5rem; }
.ff-nav .is-menu-open .wp-block-navigation-item__content {
	font-family: var(--ff-serif);
	font-size: 2.5rem;
	line-height: 1.1;
}

.ff-header__cta { flex: none; }

/* ---------- Buttons: one flat fill, fully round ---------- */

.wp-block-button__link {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.16s var(--ease-out);
}
.wp-block-button__link:active { transform: scale(0.97); }

.ff-btn-light .wp-block-button__link {
	background: #fff;
	color: var(--ff-ink);
}

/* The second action is a plain link, not a second button. */
.ff-btn-text .wp-block-button__link {
	background: transparent;
	color: inherit;
	padding-inline: 0.2rem;
	text-decoration: underline;
	text-underline-offset: 6px;
}

.ff-link-arrow a { font-weight: 500; }
.ff-link-arrow a::after {
	content: "";
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-left: 0.4em;
	vertical-align: -0.08em;
	background: currentColor;
	-webkit-mask: var(--ff-icon-arrow) center / contain no-repeat;
	mask: var(--ff-icon-arrow) center / contain no-repeat;
	transition: transform 0.2s var(--ease-out);
}

/* Hover states only where a real pointer hovers; a tap must not leave one stuck on. */
@media (hover: hover) and (pointer: fine) {
	.ff-nav .wp-block-navigation-item__content:hover { text-decoration: underline; }
	.ff-btn-light .wp-block-button__link:hover { background: var(--ff-mist); color: var(--ff-ink); }
	.ff-btn-text .wp-block-button__link:hover {
		background: transparent;
		color: inherit;
		text-decoration-thickness: 2px;
	}
	.ff-link-arrow a:hover::after { transform: translateX(3px); }
	.ff-footer a:hover { text-decoration: underline; }
}

/* ---------- Dark sections that carry the glass drops ---------- */

.ff-orbs {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.ff-orbs > * { position: relative; z-index: 1; }

/* A long heading wraps before it reaches the drops on the right. */
.ff-orbs:not(.ff-hero) h2 { max-width: 24ch; }

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

.ff-hero { padding-block: clamp(4rem, 9vw, 7.5rem) clamp(4.5rem, 10vw, 8.5rem) !important; }
.ff-hero--compact { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3.5rem, 7vw, 5.5rem) !important; }

.ff-hero h1 { margin-block: 0 2rem; max-width: 14ch; }
.ff-hero--compact h1 { max-width: 16ch; }
.ff-hero .wp-block-buttons { margin-top: 2.5rem; gap: 1.25rem; align-items: center; }

/*
 * The hero rises in on load. This is CSS on purpose: it plays while the page
 * is still loading, so it must not wait on the main thread. "backwards" fill
 * hands the element back to its own styles once it lands.
 */
@keyframes ff-rise {
	from { opacity: 0; transform: translateY(18px); }
}
@keyframes ff-fade {
	from { opacity: 0; }
}
/* The hero copy sits in an inner group, so these match at any depth. */
body:not(.woocommerce-page) .ff-hero :is(h1, h1 ~ p, .wp-block-buttons) {
	animation: ff-rise 0.9s var(--ease-out) backwards;
}
body:not(.woocommerce-page) .ff-hero h1 ~ p { animation-delay: 0.08s; }
body:not(.woocommerce-page) .ff-hero .wp-block-buttons { animation-delay: 0.16s; }

/* Section headings are split into masked lines by forgefi-motion.js; room for descenders. */
.ff-mask-line-mask,
[class*="mask"]:has(> .ff-line) {
	padding-bottom: 0.14em;
	margin-bottom: -0.14em;
}

/* ---------- Sections ---------- */

.ff-section { padding-block: clamp(5rem, 11vw, 9rem) !important; }
.ff-section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.ff-section-head h2 { max-width: 16ch; margin: 0; }
.ff-section-head .ff-lede { margin-top: 1.5rem; }

/* Home: the services as a list beside their heading. */
.ff-service-list { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
.ff-service-item h3 { margin: 0 0 0.6rem; }
.ff-service-item p { margin: 0 0 0.6rem; }

/* Ordered steps: the order is the list's, so no numbers are drawn. */
.ff-steps {
	list-style: none;
	/* The top margin stays: it is the block gap under a heading. */
	margin-inline: 0;
	margin-bottom: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	gap: clamp(2rem, 4vw, 3.5rem);
}
.ff-steps--stack { grid-template-columns: 1fr; gap: 2rem; }
.ff-steps li { margin: 0; }
.ff-steps strong {
	display: block;
	margin-bottom: 0.75rem;
	font-family: var(--ff-serif);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/* Three points set as text columns, unboxed. */
.ff-point h3 { margin: 0 0 0.75rem; }
.ff-point p { margin: 0; }

/* Service detail rows. */
.ff-service { padding-block: clamp(2.5rem, 5vw, 4rem); scroll-margin-top: 24px; }
.ff-service:first-child { padding-top: 0; }
.ff-service h2 { font-size: var(--wp--preset--font-size--x-large); margin: 0 0 1rem; }
.ff-service h3 {
	font-family: var(--ff-sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0;
	margin: 0 0 0.75rem;
}

.ff-checks { margin: 0; padding-left: 1.2em; display: grid; gap: 0.5rem; }

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

.ff-faq { display: grid; gap: 0.5rem; }
.ff-faq .wp-block-details { padding-block: 1rem; }
.ff-faq summary {
	position: relative;
	display: block;
	padding-right: 2.75rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--ff-serif);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.15;
	letter-spacing: -0.01em;
}
.ff-faq summary::-webkit-details-marker { display: none; }

/* Plus drawn from two bars; opening turns the upright bar flat, leaving a minus. */
.ff-faq summary::before,
.ff-faq summary::after {
	content: "";
	position: absolute;
	top: 0.575em;
	right: 0.25rem;
	width: 1rem;
	height: 1.5px;
	margin-top: -0.75px;
	background: currentColor;
}
.ff-faq summary::after {
	transform: rotate(90deg);
	transition: transform 0.25s var(--ease-out);
}
.ff-faq details[open] summary::after { transform: rotate(180deg); }
.ff-faq details > p { max-width: 40rem; margin-top: 1rem; }

/* The answer opens instead of appearing, where the browser can animate to "auto". */
@supports selector(::details-content) {
	.ff-faq details { interpolate-size: allow-keywords; }
	.ff-faq details::details-content {
		block-size: 0;
		overflow: clip;
		opacity: 0;
		transition: block-size 0.25s var(--ease-out), opacity 0.25s var(--ease-out), content-visibility 0.25s allow-discrete;
	}
	.ff-faq details[open]::details-content {
		block-size: auto;
		opacity: 1;
	}
}

/* ---------- Panels: a tone step, no edge ---------- */

.ff-panel {
	padding: clamp(1.5rem, 4vw, 2.5rem) !important;
	background: var(--ff-mist);
}
.ff-panel h2 { font-size: var(--wp--preset--font-size--x-large); margin: 0 0 1.5rem; }

/* ---------- Footer: a designed close ---------- */

.ff-footer {
	padding-block: clamp(5rem, 10vw, 8rem) max(2.5rem, calc(1.5rem + env(safe-area-inset-bottom))) !important;
	font-size: var(--wp--preset--font-size--medium);
}
.ff-footer a { color: #fff; text-decoration: none; text-underline-offset: 5px; }
.ff-footer__tagline {
	font-family: var(--ff-serif);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.1;
	color: #fff;
	max-width: 14ch;
	margin: 0;
}
.ff-footer__heading {
	font-family: var(--ff-sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
	color: #fff;
	margin: 0 0 1rem;
}
.ff-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.ff-footer__name { margin: clamp(4rem, 8vw, 6rem) 0 0; }
.ff-footer__name img { display: block; width: 100%; height: auto; }
.ff-footer__bottom {
	margin-top: 2rem !important;
	font-size: var(--wp--preset--font-size--small);
}
.ff-footer__bottom p { margin: 0; }

/* ---------- Posts (blog fallback) ---------- */

.ff-post-item { padding-block: 2rem; }
.ff-post-item h2 a { text-decoration: none; }

/* ---------- Touch ---------- */

/* Fingers need 44px targets, and a tap needs a visible answer now the grey flash is off. */
@media (pointer: coarse) {
	.ff-header__logo a { padding-block: 8px; margin-block: -8px; }
	.ff-nav .wp-block-navigation-item__content { padding-block: 0.5rem; }
	.ff-nav .wp-block-navigation__responsive-container-open,
	.ff-nav .wp-block-navigation__responsive-container-close { padding: 10px; margin: -10px; }
	.ff-footer__links { gap: 0; }
	.ff-footer__links a { display: inline-block; padding-block: 0.6rem; }
	.ff-nav a:active,
	.ff-footer a:active,
	.ff-link-arrow a:active { opacity: 0.6; }
}

/* ---------- Responsive ---------- */

@media (max-width: 781px) {
	.ff-header { padding-block: 14px; }
	.ff-header__logo img { width: 100px; }
	.ff-header__bar { gap: 12px; }
	.ff-header__cta .wp-block-button__link { padding: 0.75rem 1rem; }
}

/* Reduced motion keeps the fades that explain a change and drops the movement. */
@media (prefers-reduced-motion: reduce) {
	body:not(.woocommerce-page) .ff-hero :is(h1, h1 ~ p, .wp-block-buttons) {
		animation-name: ff-fade;
		animation-duration: 0.4s;
	}
	.wp-block-button__link { transition: background-color 0.2s ease, color 0.2s ease; }
	.wp-block-button__link:active { transform: none; }
	.ff-link-arrow a::after,
	.ff-faq summary::after { transition: none; }
	@supports selector(::details-content) {
		.ff-faq details::details-content {
			transition: opacity 0.2s ease, content-visibility 0.2s allow-discrete;
		}
	}
}