/* Socios custom styles */

/* --- Variables --- */
:root {
	/* Primitives - Spacing */
	--spacing-4: 4px;
	--spacing-8: 8px;
	--spacing-12: 12px;
	--spacing-16: 16px;
	--spacing-20: 20px;
	--spacing-24: 24px;
	--spacing-32: 32px;
	--spacing-40: 40px;
	--spacing-64: 64px;
	--spacing-80: 80px;

	/* Primitives - Border Radius */
	--radius-2: 2px;
	--radius-4: 4px;
	--radius-8: 8px;
	--radius-16: 16px;
	--radius-20: 20px;
	--radius-32: 32px;
	--radius-80: 80px;
	--radius-full: 9999px;

	/* Primitives - Sizing */
	--sizing-12: 12px;
	--sizing-16: 16px;
	--sizing-20: 20px;
	--sizing-24: 24px;
	--sizing-32: 32px;
	--sizing-40: 40px;
	--sizing-48: 48px;
	--sizing-56: 56px;
	--sizing-60: 60px;

	/* Primitives - Font Size */
	--font-size-8: 8px;
	--font-size-10: 10px;
	--font-size-12: 12px;
	--font-size-14: 14px;
	--font-size-16: 16px;
	--font-size-18: 18px;
	--font-size-20: 20px;
	--font-size-22: 22px;
	--font-size-24: 24px;
	--font-size-26: 26px;
	--font-size-28: 28px;
	--font-size-30: 30px;
	--font-size-32: 32px;
	--font-size-34: 34px;
	--font-size-36: 36px;
	--font-size-38: 38px;
	--font-size-40: 40px;
	--font-size-42: 42px;
	--font-size-48: 48px;
	--font-size-58: 58px;
	--font-size-60: 60px;

	/* Primitives - Border Width */
	--border-width-1: 1px;
	--border-width-1-5: 1.5px;
	--border-width-2: 2px;
	--border-width-4: 4px;

	/* Primitives - Breakpoints */
	--breakpoint-desktop: 1280px;
	--breakpoint-mobile: 375px;

	/* Font Families */
	--font-family-text: 'Manrope', sans-serif;
	--font-family-display: 'Sharp Grotesk', sans-serif;

	/* Palette - Blue */
	--blue-50: #E7EBFE;
	--blue-100: #C4CCFC;
	--blue-200: #98A4F9;
	--blue-300: #697AF5;
	--blue-400: #4357F2;
	--blue-500: #1833CB;
	--blue-600: #1730BF;
	--blue-700: #1B2E98;
	--blue-800: #192873;
	--blue-900: #162258;
	--blue-1000: #121B3C;

	/* Palette - Orange */
	--orange-50: #FFEDE7;
	--orange-100: #FFCFC4;
	--orange-200: #FFA598;
	--orange-300: #FF7C69;
	--orange-400: #FF6249;
	--orange-500: #FF5132;
	--orange-600: #EB492D;
	--orange-700: #BC432D;
	--orange-800: #913929;
	--orange-900: #6F3226;
	--orange-1000: #4D271E;

	/* Palette - Light Neutral */
	--light-neutral-0: #FDFDFD;
	--light-neutral-50: #F9F9F9;
	--light-neutral-100: #F6F6F6;
	--light-neutral-200: #F2F3F3;
	--light-neutral-300: #F0F1F1;
	--light-neutral-400: #ECEDED;
	--light-neutral-500: #E7E8E8;
	--light-neutral-600: #D6D7D7;
	--light-neutral-700: #C2C3C3;
	--light-neutral-800: #A7A8A8;
	--light-neutral-900: #939494;
	--light-neutral-1000: #7C7C7D;

	/* Palette - Dark Neutral */
	--dark-neutral-50: #EBEBEB;
	--dark-neutral-100: #CCCCCC;
	--dark-neutral-200: #999999;
	--dark-neutral-300: #737373;
	--dark-neutral-400: #4D4D4D;
	--dark-neutral-500: #212121;
	--dark-neutral-600: #1E1E1E;
	--dark-neutral-700: #181818;
	--dark-neutral-800: #131313;
	--dark-neutral-900: #0E0E0E;

	/* Palette - Decorative */
	--decorative-purple: #9338FE;
	--decorative-green: #03CA8A;
	--decorative-red: #FB4747;
	--decorative-yellow: #FFB800;

	/* Semantic - Backgrounds */
	--bg-main-container: var(--light-neutral-0);
	--bg-main-surface: var(--light-neutral-50);
	--bg-brand-enabled: var(--blue-500);
	--bg-brand-hover: var(--blue-700);
	--bg-brand-disabled: var(--light-neutral-400);
	--bg-secondary-enabled: var(--orange-500);
	--bg-secondary-hover: var(--orange-700);
	--bg-footer: var(--dark-neutral-500);
	--bg-header: var(--light-neutral-0);

	/* Semantic - Text */
	--text-main-enabled: var(--dark-neutral-500);
	--text-main-secondary: var(--dark-neutral-300);
	--text-main-disabled: var(--light-neutral-600);
	--text-on-dark-enabled: var(--light-neutral-0);
	--text-on-dark-secondary: var(--light-neutral-600);
	--text-brand-enabled: var(--blue-500);

	/* Semantic - Borders */
	--border-main-enabled: var(--light-neutral-400);
	--border-brand-enabled: var(--blue-500);
	--border-brand-hover: var(--blue-700);

	/* Semantic - Status */
	--status-success: var(--decorative-green);
	--status-warning: var(--decorative-yellow);
	--status-error: var(--decorative-red);

	/* Responsive - Desktop defaults */
	--padding-screen: 32px;
	--padding-large: 80px;
	--layout-width: 1280px;
}

/* --- Fonts --- */

/* Sharp Grotesk - Display font (add your font files to ./fonts/SharpGrotesk/) */
@font-face {
	font-family: 'Sharp Grotesk';
	src: url('../fonts/SharpGrotesk/woff2/SharpGrotesk-Medium20.woff2') format('woff2'),
		url('../fonts/SharpGrotesk/woff/SharpGrotesk-Medium20.woff') format('woff');
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: 'Sharp Grotesk';
	src: url('../fonts/SharpGrotesk/woff2/SharpGrotesk-SemiBold20.woff2') format('woff2'),
		url('../fonts/SharpGrotesk/woff/SharpGrotesk-SemiBold20.woff') format('woff');
	font-weight: 600;
	font-display: swap;
}
@font-face {
	font-family: 'Sharp Grotesk';
	src: url('../fonts/SharpGrotesk/woff2/SharpGrotesk-Bold20.woff2') format('woff2'),
		url('../fonts/SharpGrotesk/woff/SharpGrotesk-Bold20.woff') format('woff');
	font-weight: 700;
	font-display: swap;
}

/* Manrope - Text font (loaded via Google Fonts in functions.php) */

/* --- Global Styles --- */
body {
	font-family: var(--font-family-text);
	font-weight: 400;
	font-size: var(--font-size-16);
	line-height: 1.5;
	color: var(--text-main-enabled);
	background-color: #EDEEEE;
	margin: 0;
	margin-bottom: 0 !important;
}

a {
	color: var(--text-brand-enabled);
}

p {
	margin-top: 0;
	margin-bottom: var(--spacing-32);
}

h1 {
	font-family: var(--font-family-display);
	font-weight: 600;
	font-size: var(--font-size-60);
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
}

h2 {
	font-family: var(--font-family-display);
	font-size: var(--font-size-48);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
}

h3 {
	font-family: var(--font-family-text);
	font-size: var(--font-size-24);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.5px;
}

h4 {
	font-family: var(--font-family-text);
	font-size: var(--font-size-20);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
}

h5 {
	font-family: var(--font-family-text);
	font-size: var(--font-size-24);
	font-weight: 600;
	line-height: 1.15;
}

h6 {
	font-family: var(--font-family-text);
	font-size: var(--font-size-20);
	font-weight: 600;
	line-height: 1.15;
}

/* ─── Block title / subtitle shared utilities ─────────────────────────────── */

.sc-block-title {
	margin: 0;
}

.sc-block-subtitle {
	font-family: var(--font-family-text);
	font-size: var(--font-size-24);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	margin: 0;
}

@media (max-width: 767px) {
	h1 {
		font-size: var(--font-size-40);
	}

	h2 {
		font-size: var(--font-size-32);
	}

	h3 {
		font-size: var(--font-size-20);
	}

	h4 {
		font-size: var(--font-size-18);
	}

	.sc-block-subtitle {
		font-size: var(--font-size-20);
	}
}

.container {
	max-width: var(--layout-width);
	margin: 0 auto;
	padding: 0 var(--padding-screen);
}

/* --- Button Styles --- */

.btn {
	display: inline-flex;
	padding: var(--spacing-12) var(--spacing-24);
	justify-content: center;
	align-items: center;
	gap: var(--spacing-8);
	border-radius: 100px;
	font-size: var(--font-size-16);
	font-style: normal;
	font-weight: 500;
	line-height: 1em;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease;
}

.btn:hover {
	color: inherit;
	text-decoration: none;
}

.btn-primary {
	font-family: var(--font-family-display);
	background: var(--bg-brand-enabled);
	color: var(--text-on-dark-enabled);
	border: var(--border-width-1-5) solid var(--bg-brand-enabled);
	letter-spacing: 0.5px;
	overflow: hidden;
}

.btn-primary:hover {
	color: var(--text-on-dark-enabled);
	background: var(--bg-brand-hover);
	border-color: var(--bg-brand-hover);
}

.btn-secondary {
	font-family: var(--font-family-display);
	background: transparent;
	color: var(--text-brand-enabled);
	border: var(--border-width-1-5) solid var(--border-brand-enabled);
	letter-spacing: 0.5px;
	overflow: hidden;
}

.btn-secondary:hover {
	color: var(--text-on-dark-enabled);
	background: var(--bg-brand-hover);
	border-color: var(--bg-brand-hover);
}

.btn:focus,
.btn:focus-visible,
.btn:focus-within {
	outline: none;
	box-shadow: none;
	border-color: inherit;
}

.btn:visited {
	text-decoration: none;
}

/* Apply the default brand button style to Gutenberg buttons. */
.wp-block-button__link {
	display: inline-flex;
	padding: var(--spacing-12) var(--spacing-24);
	justify-content: center;
	align-items: center;
	gap: var(--spacing-8);
	border-radius: 100px;
	font-family: var(--font-family-display);
	font-size: var(--font-size-16);
	font-style: normal;
	font-weight: 500;
	line-height: 1em;
	letter-spacing: 0.5px;
	text-decoration: none;
	background: var(--bg-brand-enabled);
	color: var(--text-on-dark-enabled);
	border: var(--border-width-1-5) solid var(--bg-brand-enabled);
	box-shadow: none;
	overflow: hidden;
	cursor: pointer;
	transition: all 0.3s ease;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
	color: var(--text-on-dark-enabled);
	background: var(--bg-brand-hover);
	border-color: var(--bg-brand-hover);
	text-decoration: none;
}

.wp-block-button__link:focus,
.wp-block-button__link:focus-visible {
	outline: none;
	box-shadow: none;
}

.wp-block-button__link:visited {
	color: var(--text-on-dark-enabled);
	text-decoration: none;
}

/* Outline button variant maps to the secondary brand style. */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button__link.is-style-outline {
	background: transparent;
	color: var(--text-brand-enabled);
	border-color: var(--border-brand-enabled);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus,
.wp-block-button__link.is-style-outline:hover,
.wp-block-button__link.is-style-outline:focus {
	background: var(--bg-brand-hover);
	color: var(--text-on-dark-enabled);
	border-color: var(--bg-brand-hover);
}

/* --- Template Styles --- */

.entry-content {
	display: flex;
	flex-direction: column;
	gap: 64px;
	max-width: 1400px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.is-root-container > .wp-block {
	margin-top: 64px;
	margin-bottom: 64px;
}

/* styleguide-template.php */
#styleguide-section .container-styleguide {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

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

@media screen and (max-width: 1024px) {
	:root {
		--padding-screen: 24px;
	}

	.container {
		padding: 0 var(--padding-screen);
	}
}

@media screen and (max-width: 768px) {
	:root {
		--padding-screen: 16px;
		--padding-large: 40px;
	}

	.container {
		padding: 0 var(--padding-screen);
	}
}