/*
Theme Name: ABCX
Theme URI: https://abcxsolutions.com
Author: ABCX Solutions
Author URI: https://abcxsolutions.com
Description: Block theme for ABCX Solutions — a CX agency that configures, optimizes, automates and custom-develops SaaS support and CRM platforms. Full Site Editing, core blocks only, self-hosted fonts, no build step.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: abcx
Tags: block-theme, full-site-editing, business, one-column, custom-colors, custom-logo, custom-menu, block-patterns, editor-style, accessibility-ready, translation-ready
*/

/* -------------------------------------------------------------------------
 * ABCX theme stylesheet.
 *
 * Design tokens live in theme.json. This file only carries what theme.json
 * cannot express: focus rings, the mobile gutter switch, motion rules and
 * (from step 2 onwards) the component styles for header, cards and bands.
 * ---------------------------------------------------------------------- */

/* --- Foundations ------------------------------------------------------- */

:root {
	color-scheme: light;
}

html {
	scroll-behavior: smooth;
}

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

/* Brief: 24px side gutter, 16px on phones. theme.json sets the 24px; this
   narrows the root padding below the mockup's 480px breakpoint. */
@media (max-width: 480px) {
	body {
		--wp--style--root--padding-left: var(--wp--custom--gutter--mobile);
		--wp--style--root--padding-right: var(--wp--custom--gutter--mobile);
	}
}

h1, h2, h3, h4 {
	text-wrap: balance;
}

/* In-page jump targets (skip link, hero's "Book a discovery call"/
   "Explore our services" buttons) land below the sticky header. */
#main-content,
#services,
#about,
#contact {
	scroll-margin-top: 96px;
}

img {
	max-width: 100%;
	height: auto;
}

/* --- Focus visibility -------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--teal-bright);
	outline-offset: var(--wp--custom--focus--offset);
	border-radius: var(--wp--custom--radius--focus);
}

/* --- Buttons ----------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--button--min-height);
	text-decoration: none;
	transition:
		background-color var(--wp--custom--transition),
		border-color var(--wp--custom--transition),
		color var(--wp--custom--transition);
}

/* Ghost button: 1.5px charcoal border, transparent background. */
.wp-block-button.is-style-abcx-ghost > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--charcoal);
	border: 1.5px solid var(--wp--preset--color--charcoal);
}

.wp-block-button.is-style-abcx-ghost > .wp-block-button__link:hover,
.wp-block-button.is-style-abcx-ghost > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--white);
}

/* Light button: white on the teal contact band. */
.wp-block-button.is-style-abcx-light > .wp-block-button__link {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--charcoal);
}

.wp-block-button.is-style-abcx-light > .wp-block-button__link:hover,
.wp-block-button.is-style-abcx-light > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--white);
}

/* --- Eyebrow --------------------------------------------------------------
 * Shared small-label treatment (brief: 13px bold uppercase, 0.16em
 * tracking) used across hero, service pages, case studies and the 404
 * page. Only the font-size came from the "eyebrow" preset before — this
 * was the missing piece, which is why eyebrow text was rendering as a
 * plain, unstyled sentence instead of a label.
 * ------------------------------------------------------------------------- */

.abcx-eyebrow {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

/* --- Header -------------------------------------------------------------
 * parts/header.html: a white band with a bottom border, the logo pattern
 * left, a core Navigation block right (its own overlay menu handles mobile,
 * per brief section 4.1 — this is a deliberate upgrade on the mockup's
 * flex-wrap, which only wraps rather than collapsing to a menu).
 * ---------------------------------------------------------------------- */

/* Sticky goes on the template-part <header> wrapper, not .abcx-site-header
 * inside it — the wrapper is exactly the band's height, so a sticky child
 * has no room to stick and scrolls away with the page. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: env(safe-area-inset-top, 0px);
	z-index: 100;
}

/* Full-width colour bands (and the footer) butt up edge to edge — the
 * global 24px blockGap would otherwise show as a white strip between them. */
#main-content,
#main-content > .alignfull,
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/* Logged in: sit below the admin bar (fixed above 600px; below that it
 * scrolls away, so no offset). */
@media (min-width: 601px) {
	body.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: var(--wp-admin--admin-bar--height, 32px);
	}
}

.abcx-logo {
	display: inline-flex;
}

.abcx-logo img {
	display: block;
}

@media (max-width: 640px) {
	.abcx-logo img {
		height: 48px;
		width: auto;
	}
}

.abcx-nav-links .wp-block-navigation-item__content {
	color: var(--wp--preset--color--charcoal);
	font-weight: 500;
	text-decoration: none;
}

.abcx-nav-links .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--teal-deep);
}

/* The Contact link, styled to match the primary button. */
.abcx-nav-links .wp-block-navigation-item.is-style-abcx-cta > .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--button--min-height-compact);
	padding: 0 20px;
	border-radius: var(--wp--custom--radius--button);
	background-color: var(--wp--preset--color--teal-deep);
	color: var(--wp--preset--color--white);
	transition: background-color var(--wp--custom--transition);
}

.abcx-nav-links .wp-block-navigation-item.is-style-abcx-cta > .wp-block-navigation-item__content:hover,
.abcx-nav-links .wp-block-navigation-item.is-style-abcx-cta > .wp-block-navigation-item__content:focus {
	background-color: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--white);
}

/* --- Footer -------------------------------------------------------------
 * parts/footer.html: charcoal band, logo in a white tile (hard rule 1),
 * a brand column plus two link columns, and a copyright row below a
 * hairline in --rule-dark (not a palette color — see theme.json custom).
 * ---------------------------------------------------------------------- */

.abcx-logo-tile {
	background-color: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--logo-tile);
	padding: 12px;
	width: fit-content;
}

.abcx-logo-tile img {
	display: block;
}

.abcx-footer-brand {
	flex: 1 1 260px;
	min-width: 0;
}

.abcx-footer-col {
	flex: 1 1 200px;
	min-width: 0;
}

.abcx-footer-col a {
	color: var(--wp--preset--color--fog);
}

.abcx-footer-col a:hover {
	color: var(--wp--preset--color--white);
}

.abcx-footer-bottom {
	font-size: 14px;
}

.abcx-footer-bottom a {
	color: var(--wp--preset--color--fog);
}

.abcx-footer-bottom a:hover {
	color: var(--wp--preset--color--white);
}

/* Facebook / LinkedIn icons — abcx_social_links_markup() in functions.php.
 * --dark sits on the charcoal footer, --light on page backgrounds. */
.wp-block-social-links.abcx-social {
	gap: 14px;
	margin-top: 8px;
	font-size: 22px;
}

.wp-block-social-links.abcx-social .wp-social-link {
	transition: color 0.15s ease;
}

.wp-block-social-links.is-style-logos-only.abcx-social--dark .wp-social-link {
	color: var(--wp--preset--color--fog);
}

.wp-block-social-links.is-style-logos-only.abcx-social--dark .wp-social-link:hover {
	color: var(--wp--preset--color--white);
}

.wp-block-social-links.is-style-logos-only.abcx-social--light .wp-social-link {
	color: var(--wp--preset--color--slate);
}

.wp-block-social-links.is-style-logos-only.abcx-social--light .wp-social-link:hover {
	color: var(--wp--preset--color--teal);
}

/* --- Hero -----------------------------------------------------------------
 * patterns/hero.php. The H1 is hand-authored (see that file); this just
 * sizes it off the "hero" preset (capped 120px per the brief's review fix)
 * and reproduces the mockup's two-column foot row.
 * ------------------------------------------------------------------------- */

.abcx-hero-heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--hero);
	line-height: 1;
}

/* The lead line ("A Better Platform. A Better Team.") — same Oswald
   display face and uppercase treatment as the big line below it (inherited
   from the global h1 styles), in charcoal to match the big line's own
   base color (not slate — this reads as the same headline's lead-in, not
   a separate, disconnected caption), and sized down a little so "A Better
   Customer Experience." keeps the emphasis. */
.abcx-hero-lead {
	display: block;
	font-size: 0.7em;
	line-height: 1.1;
	color: var(--wp--preset--color--charcoal);
	margin-bottom: 0.2em;
}

.abcx-hero-foot {
	align-items: flex-start;
}

.abcx-hero-lede {
	flex: 1 1 380px;
	min-width: 0;
	max-width: 560px;
	margin: 0;
}

.abcx-hero-actions {
	flex-wrap: wrap;
}

/* --- Services -------------------------------------------------------------
 * patterns/services.php: mist band, a section head and 4 cards with inline
 * teal-stroke icons.
 * ------------------------------------------------------------------------- */

.abcx-section-lede {
	max-width: 460px;
}

.abcx-card-icon {
	width: 40px;
	height: 40px;
	stroke: var(--wp--preset--color--teal);
	flex-shrink: 0;
}

.abcx-card-link a {
	font-weight: 700;
	text-decoration: none;
}

.abcx-card-link a:hover {
	text-decoration: underline;
}

/* --- Statement band ---------------------------------------------------- */

.abcx-statement-heading {
	flex: 999 1 560px;
	min-width: 0;
	margin: 0;
	font-size: var(--wp--preset--font-size--statement);
}

.abcx-statement-copy {
	flex: 1 1 300px;
	min-width: 0;
	font-size: 18px;
}

/* --- Steps (Our Approach page) ------------------------------------------
 * patterns/approach.php. A real <ol>: list-style is removed and replaced
 * with a CSS counter, but the sequence still reaches screen readers via
 * the native list markup. Step titles stay in the body font, NOT the
 * Oswald/uppercase treatment the rest of the heading system uses — this
 * matches the approved mockup's own .steps h3 rule exactly (the rule was
 * written for the homepage's old 4-step section; Our Approach reuses the
 * same component for its 7 steps).
 * ------------------------------------------------------------------------- */

.abcx-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: step;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* One step per row, number left — the PDF's own layout, and it reads
 * evenly at 7 steps (a card grid left step 7 alone on its row). */
.abcx-steps li {
	display: grid;
	grid-template-columns: 72px 1fr;
	column-gap: 24px;
	row-gap: 8px;
	padding: 28px 0;
	border-top: 1px solid var(--wp--preset--color--line);
	counter-increment: step;
}

.abcx-steps li::before {
	content: counter(step, decimal-leading-zero);
	grid-row: span 2;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 44px;
	line-height: 1;
	color: var(--wp--preset--color--teal);
}

.abcx-steps h3 {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 700;
	text-transform: none;
	line-height: 1.3;
}

.abcx-steps p {
	margin: 0;
	color: var(--wp--preset--color--slate);
}

@media (max-width: 480px) {
	.abcx-steps li {
		grid-template-columns: 52px 1fr;
		column-gap: 16px;
	}

	.abcx-steps li::before {
		font-size: 34px;
	}
}

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

.abcx-contact-copy {
	flex: 999 1 520px;
	min-width: 0;
}

.abcx-contact-actions {
	flex: 1 1 300px;
	min-width: 0;
	align-items: flex-start;
}

.abcx-contact-email {
	user-select: all;
}

/* --- Platform / client strips -------------------------------------------- */

.abcx-wordmark {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--charcoal);
}

.abcx-client-tile {
	min-height: 80px;
	border-radius: var(--wp--custom--radius--tile);
	text-align: center;
}

.abcx-client-tile p {
	margin: 0;
}

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

.abcx-stat-number {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(40px, 5vw, 64px);
	line-height: 1;
	color: var(--wp--preset--color--teal-deep);
}

.abcx-stat-label {
	margin-top: 8px;
}

/* --- Testimonial ------------------------------------------------------- */

.abcx-quote {
	margin: 0;
	border: 0;
	padding: 0;
}

.abcx-quote p {
	font-family: var(--wp--preset--font-family--sub);
	font-weight: 300;
	color: var(--wp--preset--color--charcoal);
}

.abcx-quote cite {
	display: block;
	margin-top: 16px;
	font-style: normal;
	font-weight: 600;
	font-size: 15px;
	color: var(--wp--preset--color--slate);
}

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

.abcx-faq-item {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-block: 20px;
}

.abcx-faq-item summary {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 18px;
	cursor: pointer;
}

.abcx-faq-item p {
	margin: 12px 0 0;
}

/* --- Service page & contact page ---------------------------------------- */

.abcx-contact-page {
	margin-top: 0;
}

/* --- Skip link ----------------------------------------------------------
 * Printed via wp_body_open() in functions.php, targeting the
 * id="main-content" anchor every template's <main> carries.
 * ------------------------------------------------------------------------- */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	clip: auto !important;
	clip-path: none;
	width: auto;
	height: auto;
	overflow: visible;
	z-index: 100000;
	padding: 12px 20px;
	border-radius: var(--wp--custom--radius--button);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--charcoal);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	text-decoration: none;
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--teal-bright);
	outline-offset: 0;
}

/* --- Motion --------------------------------------------------------------
 * Card lift + arrow shift (hover and keyboard focus alike), and an
 * opt-in scroll reveal. The reveal is CSS-inert by default — .abcx-reveal
 * elements render at full opacity with no transform. Only once
 * assets/js/reveal.js confirms IntersectionObserver support and that the
 * visitor hasn't asked for reduced motion does it add "js-reveal-ready" to
 * <html>, which is what actually switches these elements to fade/slide in.
 * No JS, slow JS, or a JS error before that point: content stays visible.
 * ------------------------------------------------------------------------- */

.abcx-card {
	transition: transform var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

.abcx-card:hover,
.abcx-card:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(30, 34, 38, 0.12);
}

.abcx-card-link a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.abcx-arrow {
	display: inline-block;
	transition: transform var(--wp--custom--transition);
}

/* Buttons are inline-flex, which swallows the space before the arrow. */
.wp-block-button__link .abcx-arrow {
	margin-left: 0.35em;
}

.abcx-card:hover .abcx-arrow,
.abcx-card-link a:focus-visible .abcx-arrow {
	transform: translateX(4px);
}

.abcx-reveal {
	opacity: 1;
	transform: none;
}

.js-reveal-ready .abcx-reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 500ms ease, transform 500ms ease;
}

.js-reveal-ready .abcx-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* Print (and Print-to-PDF) renders the full page without dispatching the
   scroll events IntersectionObserver relies on, so anything not yet
   revealed on screen would otherwise print blank. */
@media print {
	.js-reveal-ready .abcx-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.js-reveal-ready .abcx-reveal {
		opacity: 1;
		transform: none;
	}
}

/* --- Fluent Forms (plugin, not theme) ------------------------------------
 * The plugin is explicitly out of theme scope (brief: "Plugin
 * compatibility... do not duplicate their features"), but its default
 * submit-button blue (#1a7efb, via Fluent Forms' own --fluentform-primary
 * custom property) visibly clashed with the brand on the Contact page, so
 * this one declaration repoints it at the theme's own teal-deep. Scoped to
 * the ABCX contact form specifically (id 3) rather than every Fluent Forms
 * instance site-wide, in case a differently-branded form is ever embedded
 * elsewhere.
 * ------------------------------------------------------------------------- */

.fluent_form_3 {
	--fluentform-primary: var(--wp--preset--color--teal-deep);
}

.fluent_form_3 .ff-btn-submit:hover,
.fluent_form_3 .ff-btn-submit:focus {
	background-color: var(--wp--preset--color--charcoal) !important;
}

/* --- Inner pages ----------------------------------------------------------
 * patterns/page-hero.php + service-hero.php: mist title band framed by the
 * logo's teal corner brackets. Below it, the About / Platforms / Approach
 * components (pull quote, value + principle cards, platform cards, the
 * certified panel).
 * ------------------------------------------------------------------------- */

.abcx-page-hero {
	position: relative;
	overflow: hidden;
}

.abcx-page-hero::before,
.abcx-page-hero::after {
	content: "";
	position: absolute;
	width: clamp(56px, 9vw, 120px);
	height: clamp(56px, 9vw, 120px);
	border: 0 solid var(--wp--preset--color--teal);
	pointer-events: none;
}

.abcx-page-hero::before {
	top: clamp(24px, 4vw, 48px);
	left: max(24px, calc(50% - 620px));
	border-top-width: 6px;
	border-left-width: 6px;
}

.abcx-page-hero::after {
	bottom: clamp(24px, 4vw, 48px);
	right: max(24px, calc(50% - 620px));
	border-bottom-width: 6px;
	border-right-width: 6px;
}

.abcx-page-hero > * {
	position: relative;
}

@media (max-width: 781px) {
	.abcx-page-hero::before,
	.abcx-page-hero::after {
		border-width: 0;
		width: 40px;
		height: 40px;
	}

	.abcx-page-hero::before {
		top: 20px;
		left: 16px;
		border-top-width: 4px;
		border-left-width: 4px;
	}

	.abcx-page-hero::after {
		bottom: 20px;
		right: 16px;
		border-bottom-width: 4px;
		border-right-width: 4px;
	}
}

.abcx-page-body > :first-child {
	margin-top: 0;
}

.abcx-pullquote {
	margin: var(--wp--preset--spacing--60) 0;
	padding-left: 28px;
	border-left: 6px solid var(--wp--preset--color--teal);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 600;
	line-height: 1.08;
	text-transform: uppercase;
	color: var(--wp--preset--color--charcoal);
}

.abcx-pullquote span {
	color: var(--wp--preset--color--teal);
}

/* Short teal rule above each card title — same accent on About's values
 * and Approach's principles. */
.abcx-value::before,
.abcx-principle::before,
.abcx-platform-card::before {
	content: "";
	display: block;
	width: 32px;
	height: 3px;
	margin-bottom: 18px;
	background-color: var(--wp--preset--color--teal);
}

.abcx-principle > p:first-of-type {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.abcx-certified-copy {
	flex: 1 1 420px;
	margin: 0;
}

.abcx-badges {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.abcx-badges li {
	padding: 10px 18px;
	border: 1px solid var(--wp--preset--color--teal-bright);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.abcx-badges li::before {
	content: "✓";
	margin-right: 8px;
	color: var(--wp--preset--color--teal-bright);
}