/*
 * Shared base styles for the expat-finance Kadence child themes.
 * Copied into each theme by build.sh — edit here, in themes/shared/.
 *
 * Colours come from Kadence's global palette (Customizer → Colors), so the
 * swatches in the editor always match the page:
 *   palette1 accent (links, buttons)     palette6 subtle text / borders
 *   palette2 accent hover                palette7 borders, rules
 *   palette3 headings                    palette8 tinted section background
 *   palette4 body text                   palette9 page background (white)
 *   palette5 secondary text
 * Each site's style.css sets the few --xf-* extras below.
 */

:root {
	--xf-accent: var(--global-palette1);      /* card top borders, rules */
	--xf-focus: var(--global-palette1);       /* keyboard focus outline */
	--xf-hero-bg: var(--global-palette9);
	--xf-hero-text: var(--global-palette3);
	--xf-radius: 4px;
	--xf-section-pad: clamp(3rem, 7vw, 5.5rem);
	--xf-measure: 68ch;                       /* comfortable reading line length */
	--xf-header-offset: 90px;                 /* anchor jumps clear the sticky header */
}

/* ---------- Page-wide ---------- */

/* White pages. Kadence paints the whole site in palette8 by default; here
   palette8 is only for tinted bands, so a grey page looks dated. */
body,
.content-bg,
body.content-style-unboxed .site {
	background-color: var(--global-palette9);
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

[id] {
	scroll-margin-top: var(--xf-header-offset);
}

/* Links are underlined in body copy — clearer for readers, and the norm on
   information-first sites. */
.entry-content a:not(.wp-block-button__link):not(.kb-button) {
	text-decoration: underline;
	text-decoration-thickness: max(1px, 0.0625em);
	text-underline-offset: 0.18em;
}
.entry-content a:not(.wp-block-button__link):not(.kb-button):hover {
	text-decoration-thickness: max(3px, 0.1875em);
}

:focus-visible {
	outline: 3px solid var(--xf-focus);
	outline-offset: 2px;
}

/* Articles read at a comfortable width even in full-width layouts. */
.single-post .entry-content > :not(.alignwide):not(.alignfull) {
	max-width: var(--xf-measure);
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Sections (landing page) ---------- */

/*
 * Sections run full width (so tinted bands reach the screen edges) but their
 * content sits in a centred 1120px column with a gutter on small screens.
 * Done with padding rather than WordPress's "constrained" layout, which
 * Kadence (a classic theme) doesn't switch on — without this the content
 * runs flush to the left edge.
 */
.xf-section {
	/* Same left edge as the header logo: Kadence's content width + edge padding. */
	--xf-gutter: max(
		var(--global-content-edge-padding, 1.5rem),
		calc((100% - var(--global-content-width, 1290px)) / 2 + var(--global-content-edge-padding, 1.5rem))
	);
	padding-top: var(--xf-section-pad);
	padding-bottom: var(--xf-section-pad);
}
/* Two+ classes deep: Kadence zeroes side padding on .entry-content .alignfull. */
.entry-content .xf-section,
.xf-section.xf-section.xf-section {
	padding-left: var(--xf-gutter);
	padding-right: var(--xf-gutter);
}
/*
 * Everything in a section starts on the same left edge. WordPress's
 * "constrained" layout (always on in the block editor, and on the page when
 * WordPress outputs it) centres each child with margin:auto !important —
 * which centres the width-limited headline and lead paragraph but not the
 * label or buttons, so the hero looked scattered. Override it.
 */
.entry-content .xf-section > *,
.entry-content .xf-section > .wp-block-group__inner-container > *,
.xf-section.xf-section.xf-section > *,
.xf-section.xf-section.xf-section > .wp-block-group__inner-container > * {
	margin-left: 0 !important;
	margin-right: auto !important;
}
.xf-section--tint {
	background: var(--global-palette8);
}

.xf-eyebrow {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--global-palette5);
	margin-bottom: 0.5rem;
}

.xf-lead {
	font-size: clamp(1.1rem, 1.6vw, 1.3rem);
	line-height: 1.55;
	color: var(--global-palette4);
	max-width: 60ch;
}

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

.xf-hero {
	background: var(--xf-hero-bg);
	color: var(--xf-hero-text);
	padding-top: clamp(4rem, 10vw, 7.5rem);
	padding-bottom: clamp(4rem, 10vw, 7.5rem);
}
.xf-hero h1 {
	color: inherit;
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	line-height: 1.1;
	max-width: 18ch;
	margin-top: 0;
}
.xf-hero .xf-lead {
	color: inherit;
	opacity: 0.92;
}

/* ---------- Cards (topics, who-it's-for) ---------- */

.xf-cards {
	gap: 1.5rem;
}
.xf-card {
	background: var(--global-palette9);
	border: 1px solid var(--global-palette7);
	border-top: 4px solid var(--xf-accent);
	border-radius: var(--xf-radius);
	padding: 1.75rem 1.5rem;
	height: 100%;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.xf-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
}
.xf-card h3 {
	margin-top: 0;
	font-size: 1.25rem;
}
.xf-card p:last-child {
	margin-bottom: 0;
}

/* ---------- Numbered steps ---------- */

.xf-steps {
	counter-reset: xf-step;
	gap: 2rem;
}
.xf-step {
	counter-increment: xf-step;
	position: relative;
	padding-top: 3.5rem;
}
.xf-step::before {
	content: counter(xf-step);
	position: absolute;
	top: 0;
	left: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--global-palette1);
	color: var(--global-palette9);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.xf-step h3 {
	margin-top: 0;
	font-size: 1.15rem;
}

/* ---------- FAQ (core Details block) ---------- */

.xf-faq .wp-block-details {
	border-bottom: 1px solid var(--global-palette7);
	padding: 1.1rem 0;
	margin: 0;
}
.xf-faq .wp-block-details:first-of-type {
	border-top: 1px solid var(--global-palette7);
}
.xf-faq .wp-block-details summary {
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--global-palette3);
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 2.5rem;
}
.xf-faq .wp-block-details summary::-webkit-details-marker {
	display: none;
}
.xf-faq .wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 0.25rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--global-palette1);
}
.xf-faq .wp-block-details[open] summary::after {
	content: "−";
}
.xf-faq .wp-block-details > :not(summary) {
	margin-top: 0.75rem;
	color: var(--global-palette4);
	max-width: var(--xf-measure);
}

/* ---------- Article boxes ---------- */

.xf-takeaways {
	background: var(--global-palette8);
	border-left: 5px solid var(--xf-accent);
	border-radius: 0 var(--xf-radius) var(--xf-radius) 0;
	padding: 1.5rem 1.75rem;
	margin: 2rem 0;
}
.xf-takeaways h2,
.xf-takeaways h3 {
	margin-top: 0;
	font-size: 1.15rem;
}
.xf-takeaways ul {
	margin-bottom: 0;
}

.xf-article-cta {
	border: 1px solid var(--global-palette7);
	border-top: 4px solid var(--xf-accent);
	border-radius: var(--xf-radius);
	padding: 1.75rem;
	margin: 3rem 0 1rem;
}
.xf-article-cta h3 {
	margin-top: 0;
}

/* ---------- Contact band ---------- */

.xf-contact {
	background: var(--global-palette3);
	color: var(--global-palette9);
}
.xf-contact h2,
.xf-contact p {
	color: inherit;
}
.xf-contact .xf-lead {
	opacity: 0.9;
}
.xf-contact .xf-form-slot {
	background: var(--global-palette9);
	color: var(--global-palette4);
	border-radius: var(--xf-radius);
	padding: 1.75rem;
}

/* ---------- Enquiry form (Fluent Forms) ---------- */

/*
 * Fluent Forms reads its colours from --fluentform-* variables set on :root.
 * Redefining them on the form wrapper re-skins every field, the button and
 * the error text without fighting its selectors. Each site's style.css can
 * override --xf-form-accent / --xf-radius.
 */
.fluentform {
	--xf-form-accent: var(--global-palette1);
	--fluentform-primary: var(--xf-form-accent);
	--fluentform-border-color: var(--global-palette7);
	--fluentform-border-radius: var(--xf-radius);
	color: var(--global-palette4);
}
.fluentform.fluentform .ff-el-input--label label {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--global-palette3);
}
.fluentform.fluentform .ff-el-is-required.asterisk-right label::after {
	color: var(--global-palette5);
}
.fluentform.fluentform .ff-el-form-control,
.fluentform.fluentform .choices__inner {
	border-radius: var(--xf-radius);
	border-color: var(--global-palette6);
	font-size: 1rem;
}
.fluentform.fluentform .ff-el-form-control:focus,
.fluentform.fluentform .choices.is-focused .choices__inner {
	border-color: var(--xf-form-accent);
	box-shadow: 0 0 0 2px var(--xf-form-accent);
	outline: none;
}
.fluentform.fluentform .ff-el-form-control::placeholder {
	color: var(--global-palette6);
}
.fluentform.fluentform .ff-el-form-check-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}
.fluentform.fluentform .ff-el-form-check-input {
	accent-color: var(--xf-form-accent);
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
}
.fluentform.fluentform .ff-btn-submit:not(.ff_btn_no_style) {
	background-color: var(--xf-form-accent);
	border-radius: var(--xf-radius);
	font-weight: 600;
	font-size: 1rem;
	padding: 0.8rem 1.75rem;
}
.fluentform.fluentform .ff-btn-submit:not(.ff_btn_no_style):hover {
	opacity: 1;
	background-color: var(--xf-form-accent-hover, var(--global-palette2));
}
.fluentform.fluentform .ff-message-success {
	border: 0;
	border-left: 5px solid var(--xf-form-accent);
	background: var(--global-palette8);
	color: var(--global-palette3);
	box-shadow: none;
	border-radius: 0;
	padding: 1.25rem 1.5rem;
}

/* ---------- Latest guides (Query Loop) ---------- */

.xf-guides .wp-block-post-template {
	gap: 1.5rem;
}
.xf-guides .wp-block-post {
	border-top: 4px solid var(--xf-accent);
	padding-top: 1rem;
}
.xf-guides .wp-block-post-title {
	font-size: 1.2rem;
	margin: 0.25rem 0 0.5rem;
}
.xf-guides .wp-block-post-title a {
	text-decoration: none;
}
.xf-guides .wp-block-post-title a:hover {
	text-decoration: underline;
}
.xf-guides .wp-block-post-date {
	font-size: 0.85rem;
	color: var(--global-palette5);
}

/* ---------- Small screens ---------- */

@media (max-width: 781px) {
	.xf-card:hover { transform: none; }
	.xf-step { padding-top: 3.25rem; }
}