/*
Theme Name: SJ Theme
Description: Hello Elementor child theme for Stephen James: Fractional Webmaster.
Author: Stephen James
Template: hello-elementor
Version: 1.0.0
Text Domain: sj-theme
*/

/*
 * Brand tokens. Navy matches the supplied SVG logo; the remaining palette
 * values are visual matches to the supplied reference.
 * Fonts are self-hosted; see fonts/ for the font files and their licences.
 */
:root {
	--color-navy: #090b1b;
	--color-yellow: #f0ed1a;
	--color-lime: #91c83e;
	--color-green: #56a646;
	--color-forest: #4b9250;
	--color-offwhite: #f2f7f4;
	--color-white: #ffffff;
	--color-orange-red: #ec4424;
	--color-pixel: #f3f7f3;

	/* Shared spotlight settings: 1px pixels or small, changing binary digits. */
	--sj-pixel-color: var(--color-pixel);
	--sj-pixel-size: 1px;
	--sj-pixel-spacing: 12px;
	--sj-pixel-radius: 220px;
	--sj-pixel-opacity: 0.75;
	--sj-pixel-fade-duration: 180ms;
	--sj-pixel-pulse-strength: 2;
	--sj-pixel-pulse-duration: 600ms;
	--sj-binary-font-size: 16px;
	--sj-binary-opacity: 0.10;
	--sj-binary-change-interval: 160ms;

	--color-text: var(--color-navy);
	--color-background: var(--color-white);

	/* Shared component colours follow the supplied SJ header reference. */
	--color-surface: var(--color-white);
	--color-on-surface: var(--color-navy);
	--color-surface-dark: var(--color-navy);
	--color-on-surface-dark: var(--color-white);
	--color-header-background: var(--color-navy);
	--color-header-text: var(--color-white);
	--color-header-search-background: color-mix(in srgb, var(--color-offwhite) 8%, var(--color-navy));
	--color-submenu-background: var(--color-white);
	--color-submenu-text: var(--color-navy);
	--color-submenu-tile-border: var(--color-offwhite);
	--color-button-background: var(--color-yellow);
	--color-button-text: var(--color-navy);
	--color-button-hover-background: var(--color-lime);
	--color-button-focus-background: var(--color-lime);
	--color-button-hover-text: var(--color-navy);
	--color-button-active-background: var(--color-lime);
	--color-button-active-text: var(--color-navy);
	--color-button-disabled-background: var(--color-yellow);
	--color-button-disabled-text: var(--color-navy);
	--color-focus-inner: var(--color-navy);
	--color-focus-outer: var(--color-offwhite);

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 28px;
	--space-8: 32px;
	--radius-small: 0px;
	--radius-medium: 0px;
	--radius-large: 0px;
	--radius-full: 999px;
	--radius-button: 0px;
	--sj-site-width: 1280px;
	--sj-grid-six: repeat(6, minmax(0, 1fr));
	--sj-site-gutter: 32px;
	--sj-cell-pad: 32px;
	--sj-rule-ink: color-mix(in srgb, var(--color-navy) 30%, var(--color-offwhite));
	--sj-rule-on-dark: color-mix(in srgb, var(--color-offwhite) 28%, var(--color-navy));
	--size-touch-target: 40px;
	--duration-short: 160ms;
	--duration-medium: 240ms;
	--ease-standard: cubic-bezier(0.2, 0, 0, 1);

	--font-heading: 'Bricolage Grotesque', ui-sans-serif, sans-serif;
	--font-secondary: 'Bricolage Grotesque', ui-sans-serif, sans-serif;
	--font-body: 'IBM Plex Mono', ui-monospace, monospace;
	--font-accent: 'IBM Plex Mono', ui-monospace, monospace;
	--font-weight-heading: 700;
	--font-weight-secondary: 600;
	--font-weight-body: 500;
	--font-weight-accent: 600;
	--font-size-body: 16px;
	--line-height-body: 1.5;
	--font-size-label: 0.875rem;
	--line-height-label: 1.428571;
	--font-size-nav: 1rem;
}

@media (max-width: 767px) {
	:root { --font-size-body: 14px; }
}

/* Pixelarticons Base: use whole 24px multiples to preserve the pixel grid. */
.sj-icon {
	display: inline-block;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	font-size: 24px;
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
}

body {
	color: var(--color-text);
	background-color: var(--color-background);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
}

/* Native text selection uses the existing brand palette on every surface. */
::selection {
	background-color: var(--color-yellow);
	color: var(--color-navy);
	text-shadow: none;
}
@media (forced-colors: active) {
	::selection { background-color: Highlight; color: HighlightText; }
}

/* Shared dark section treatment, including future Elementor containers. */
.sj-dark-section,
.elementor .sj-dark-section.e-con {
	color: var(--color-offwhite);
	background: var(--color-navy);
}

.sj-light-section,
.elementor .sj-light-section.e-con {
	color: var(--color-navy);
	background: var(--color-surface);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
}

button,
input,
select,
textarea {
	font-family: var(--font-body);
}

/* Shared action buttons. The header styles its navigation controls separately. */
body :is(button, input[type="button"], input[type="reset"], input[type="submit"], .button, .wp-element-button, .wp-block-button__link, .elementor-button):where(:not(.sj-header *)) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--size-touch-target);
	padding: var(--space-2) var(--space-6);
	border: 0;
	border-radius: var(--radius-button);
	background: var(--color-button-background);
	color: var(--color-button-text);
	font-family: var(--font-body);
	font-size: var(--font-size-label);
	font-weight: 600;
	line-height: var(--line-height-label);
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	box-shadow: none;
	transition: background-color var(--duration-short) var(--ease-standard), color var(--duration-short) var(--ease-standard);
}

/* Elementor's visited rule must not replace dark button text with white. */
body :is(.button, .wp-element-button, .wp-block-button__link, .elementor-button):where(:not(.sj-header *)):visited {
	color: var(--color-button-text);
}

body :is(button, input[type="button"], input[type="reset"], input[type="submit"], .button, .wp-element-button, .wp-block-button__link, .elementor-button):where(:not(.sj-header *)):where(:not(:disabled)):is(:hover, :focus, :focus-visible) {
	border: 0;
	background: var(--color-button-hover-background);
	color: var(--color-button-hover-text);
	text-decoration: none;
}

body :is(button, input[type="button"], input[type="reset"], input[type="submit"], .button, .wp-element-button, .wp-block-button__link, .elementor-button):where(:not(.sj-header *)):where(:not(:disabled)):is(:focus, :focus-visible) {
	background: var(--color-button-focus-background);
}

body :is(button, input[type="button"], input[type="reset"], input[type="submit"], .button, .wp-element-button, .wp-block-button__link, .elementor-button):where(:not(.sj-header *)):where(:not(:disabled)):active {
	border: 0;
	background: var(--color-button-active-background);
	color: var(--color-button-active-text);
}

body :is(button, input[type="button"], input[type="reset"], input[type="submit"], .button, .wp-element-button, .wp-block-button__link, .elementor-button):where(:not(.sj-header *)):focus-visible,
body :is(button, input[type="button"], input[type="reset"], input[type="submit"], .button, .wp-element-button, .wp-block-button__link, .elementor-button)[tabindex]:where(:not(.sj-header *)):focus-visible {
	/* The light halo and dark outline remain visible on both surface colours. */
	outline: 2px solid var(--color-focus-inner);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--color-focus-outer);
}

body :is(button, input[type="button"], input[type="reset"], input[type="submit"], .button, .wp-element-button, .wp-block-button__link, .elementor-button):where(:not(.sj-header *)):disabled,
body :is(button, input[type="button"], input[type="reset"], input[type="submit"], .button, .wp-element-button, .wp-block-button__link, .elementor-button):where(:not(.sj-header *)):disabled:is(:hover, :focus, :focus-visible, :active) {
	border: 0;
	background: var(--color-button-disabled-background);
	color: var(--color-button-disabled-text);
	opacity: 1;
	cursor: default;
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	body :is(button, input[type="button"], input[type="reset"], input[type="submit"], .button, .wp-element-button, .wp-block-button__link, .elementor-button):where(:not(.sj-header *)) {
		transition: none;
	}
}