/*
 * SiteQode — base.css
 * Design tokens + reset + base typography.
 */

@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,200..900;1,200..900&display=swap');

:root {
	/* Color */
	--sq-color-ink: #1c498c;
	--sq-color-ink-rgb: 1, 69, 240;
	--sq-color-ink-soft: #388bcd;
	--sq-color-muted: #3acfce;
	--sq-color-bg: #ffffff;
	--sq-color-surface: #ffffff;
	--sq-color-surface-tint: #eaf3f1;
	--sq-color-base: #666666;
	--sq-color-border: #DCDCDC;

	--sq-color-accent-white: #ffffff;
	--sq-color-accent-black: #000000;

	--sq-color-ink-900: rgba(var(--sq-color-ink-rgb), 0.09);
	--sq-color-ink-700: rgba(var(--sq-color-ink-rgb), 0.07);
	--sq-color-ink-600: rgba(var(--sq-color-ink-rgb), 0.06);
	--sq-color-ink-500: rgba(var(--sq-color-ink-rgb), 0.05);
	--sq-color-ink-300: rgba(var(--sq-color-ink-rgb), 0.03);
	--sq-color-ink-100: rgba(var(--sq-color-ink-rgb), 0.01);

	--sq-color-amber-700: #a3630f;
	--sq-color-amber-600: #c97a1f;
	--sq-color-amber-100: #f8e9d3;

	--sq-color-danger: #b3311f;
	--sq-color-focus: #3e9c90;

	/* Type */
	--sq-font-head: "Mona Sans", sans-serif;
	--sq-font-body: "Mona Sans", sans-serif;
	--sq-font-mono: "Mona Sans", sans-serif;

	--sq-text-base: clamp(0.875rem, 0.8462rem + 0.1282vw, 1rem);

	--sq-h6: clamp(1.125rem, 1.0971rem + 0.1274vw, 1.25rem);
	--sq-h5: clamp(1.25rem, 1.1943rem + 0.2548vw, 1.5rem);
	--sq-h4: clamp(1.375rem, 1.2914rem + 0.3822vw, 1.75rem);
	--sq-h3: clamp(1.375rem, 0.8761rem + 1.0408vw, 2.125rem);
	--sq-h2: clamp(2rem, 1.6099rem + 1.7834vw, 3.75rem);
	--sq-h1: clamp(2.375rem, 1.9291rem + 2.0382vw, 4.375rem);

	/* Space (4px grid) */
	--sq-space-1: 0.25rem;
	--sq-space-2: 0.5rem;
	--sq-space-3: 0.75rem;
	--sq-space-4: 1rem;
	--sq-space-5: 1.5rem;
	--sq-space-6: 2rem;
	--sq-space-8: 3rem;
	--sq-space-10: 4rem;
	--sq-space-12: 5rem;
	--sq-space-16: 6rem;

	/* Layout */
	--sq-container-width: 1320px;
	--sq-container-padding: clamp(1.25rem, 4vw, 2.5rem);
	--sq-btn-padding: 10px 20px;
	--sq-input-padding: 10px 24px;

	/* Radius / shadow */
	--sq-radius-sm: 8px;
	--sq-radius-md: 14px;
	--sq-radius-lg: 22px;
	--sq-radius-full: 999px;

	--sq-shadow-sm: 0 2px 10px rgba(16, 30, 43, 0.05);
	--sq-shadow-md: 0 8px 28px rgba(16, 30, 43, 0.08);
	--sq-shadow-lg: 0 24px 56px rgba(16, 30, 43, 0.14);

	/* Motion */
	--sq-transition: 375ms cubic-bezier(0.7, 0, 0.3, 1);

	/* Z-index scale */
	--sq-z-header: 100;
	--sq-z-mobile-panel: 200;
	--sq-z-skip-link: 300;
}

/* Reset ------------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

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

body {
	margin: 0;
	background: var(--sq-color-bg);
	color: var(--sq-color-base);
	font-family: var(--sq-font-body);
	font-size: var(--sq-text-base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;

	overflow-x: hidden;
}

body .sq-site { overflow-x: clip; }

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

svg { width: 1em; height: 1em; }

ul[class],
ol[class] {
	list-style: none;
	margin: 0;
	padding: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

input,
textarea,
select {
	font: inherit;
	color: inherit;
}

/* Typography --------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--sq-font-head);
	font-weight: normal;
	line-height: 1.2;
	letter-spacing: -.04em;
	color: var(--sq-color-ink);
	margin: 0 0 var(--sq-space-4);
}

h1 {
	font-size: var(--sq-h1);
}
h2 {
	font-size: var(--sq-h2);
}
h3 {
	font-size: var(--sq-h3);
}
h4 {
	font-size: var(--sq-h4);
}
h5 {
	font-size: var(--sq-h5);
}
h6 {
	font-size: var(--sq-h6);
	font-family: var(--sq-font-body);
	font-weight: 600;
}

p {
	margin: 0;
	letter-spacing: -.02em;
}

/* The one signature detail: stat/metric figures read like a monitor
   readout — tabular mono numerals with a little tracking, not a plain
   bold sans number in a circle. Used by the (Phase 3) Stats widget and
   anywhere else a bare metric appears. */
.sq-metric {
	font-family: var(--sq-font-mono);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--sq-color-ink-700);
}

.sq-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sq-space-2);
	font-family: var(--sq-font-mono);
	font-size: var(--sq-text-base);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--sq-color-ink-700);
}

/** 
	Utilities
*/

	.sq-container { width: min(100% - (var(--sq-container-padding) * 2), var(--sq-container-width)); margin-inline: auto; }

	.sq-skip-link,
	.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; 
		overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

	.sq-skip-link { z-index: var(--sq-z-skip-link); background: var(--sq-color-ink); color: var(--sq-color-accent-white); 
		padding: var(--sq-btn-padding);  }

	.sq-skip-link:hover,
	.sq-skip-link:focus { position: fixed; top: var(--sq-space-3); left: var(--sq-space-3); color: var(--sq-color-accent-white);
		width: auto; height: auto; clip: auto; overflow: visible; background-color: var(--sq-color-ink-soft); }

	.sq-scroll-lock { overflow: hidden; }

	/* Keyboard focus is always visible — never suppressed for mouse-only use. */
	/* a:focus-visible,
	button:focus-visible,
	input:focus-visible,
	textarea:focus-visible,
	select:focus-visible,
	[tabindex]:focus-visible { outline: 1px solid var(--sq-color-focus); outline-offset: 2px; border-radius: 0px; } */

/** 
	Buttons
*/

	.sq-btn { display: inline-flex; align-items: center; border: 1px solid transparent;
		font-weight: normal; font-size: var(--sq-text-base); padding: var(--sq-btn-padding); border-radius: var(--sq-radius-sm);
		transition: var(--sq-transition); white-space: nowrap;
	}
	.sq-btn { background: var(--sq-color-ink); color: var(--sq-color-accent-white); }
	.sq-btn:hover,
	.sq-btn:focus { background: var(--sq-color-ink-soft); box-shadow: var(--sq-shadow-sm); color: var(--sq-color-accent-white); }

	.sq-btn[class*="sq-button--"] { padding: 3px 3px 3px 20px; gap: 10px; transition: var(--sq-transition); }


	.sq-btn[class*="sq-button--"] .sq-btn__icon { width: 40px; height: 40px; font-size: 1.2rem; 
		display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; }
	.sq-btn[class*="sq-button--"] .sq-btn__icon svg { width: 1em; height: 1em; }
		
	.sq-btn[class*="sq-button--"] .sq-btn__icon { 
		background-color: var(--sq-color-accent-white); color: var(--sq-color-ink); transition: var(--sq-transition); }
	.sq-btn[class*="sq-button--"]:hover .sq-btn__icon,
	.sq-btn[class*="sq-button--"]:focus .sq-btn__icon { color: var(--sq-color-ink-soft); }

	.sq-btn[class*="sq-button--"] .sq-btn__icon { background-color: var(--sq-color-accent-white); color: var(--sq-color-ink); }
	.sq-btn[class*="sq-button--outline"]:hover .sq-btn__icon,
	.sq-btn[class*="sq-button--outline"]:focus .sq-btn__icon { color: var(--sq-color-ink-soft); }


	.sq-btn[class*="sq-button--"] .sq-btn__icon .sq-btn__icon-grp { overflow: hidden; position: relative; display: flex;}
	.sq-btn[class*="sq-button--"] .sq-btn__icon .sq-btn__icon-grp i { transform: translate(0px, 0px); 
		transition: var(--sq-transition); display: inline-flex; font-size: 18px; }
	.sq-btn[class*="sq-button--"] .sq-btn__icon .sq-btn__icon-grp i:nth-child(2) { position: absolute; 
		top: 0; right: 0; bottom: 0; left: 0; transform: translate(-20px, 20px); }

	.sq-btn[class*="sq-button--"]:hover .sq-btn__icon .sq-btn__icon-grp i:nth-child(1),
	.sq-btn[class*="sq-button--"]:focus .sq-btn__icon .sq-btn__icon-grp i:nth-child(1) { transform: translate(20px, -20px); }
	.sq-btn[class*="sq-button--"]:hover .sq-btn__icon .sq-btn__icon-grp i:nth-child(2),
	.sq-btn[class*="sq-button--"]:focus .sq-btn__icon .sq-btn__icon-grp i:nth-child(2) { transform: translate(0px, 0px); }


	/* Button dark BG */

	.sq-btn[class*="sq-button--"].sq-button--dark-bg { background-color: var(--sq-color-accent-white); color: var(--sq-color-ink); }
	.sq-btn[class*="sq-button--"].sq-button--dark-bg:hover,
	.sq-btn[class*="sq-button--"].sq-button--dark-bg:focus { background-color: transparent; 
		color: var(--sq-color-accent-white); border-color: currentColor; }
	
	.sq-btn[class*="sq-button--"].sq-button--dark-bg .sq-btn__icon { 
		background-color: var(--sq-color-ink); color: var(--sq-color-accent-white); 
	}
	.sq-btn[class*="sq-button--"].sq-button--dark-bg:hover .sq-btn__icon,
	.sq-btn[class*="sq-button--"].sq-button--dark-bg:focus .sq-btn__icon { 
		background-color: var(--sq-color-accent-white); color: var(--sq-color-ink); 
	}

	




















	/* Prose — plain WordPress-editor content only (Elementor sections manage
	their own spacing/width and never wrap in this). */

	/* .sq-prose { max-width: 74ch; }
	.sq-prose > * + * { margin-top: var(--sq-space-4); }
	.sq-prose h2,
	.sq-prose h3,
	.sq-prose h4 { margin-top: var(--sq-space-8); }

	.sq-prose ul,
	.sq-prose ol { padding-left: 1.25em; list-style: revert; }

	.sq-prose a { color: var(--sq-color-ink-700); text-decoration: underline; text-underline-offset: 0.15em; }

	.sq-prose img { border-radius: var(--sq-radius-md); } */