/*
 * RMC2 Consultancy — global styles: base, shared pieces of the section
 * blocks (container, section headings, logo, dialogs, plan accents),
 * accessibility helpers and animations. Colours and fonts are theme.json
 * presets (var(--wp--preset--…)); each section block's own styles are in
 * assets/css/blocks/<block>.css, loaded only where the block is used.
 */

:root {
	--rmc2-orange: var(--wp--preset--color--orange);
	--rmc2-orange-dark: var(--wp--preset--color--orange-dark);
	--rmc2-orange-50: var(--wp--preset--color--orange-50);
	--rmc2-orange-100: var(--wp--preset--color--orange-100);
	--rmc2-navy: var(--wp--preset--color--navy);
	--rmc2-navy-deep: var(--wp--preset--color--navy-deep);
	--rmc2-navy-soft: var(--wp--preset--color--navy-soft);
	--rmc2-slate-50: var(--wp--preset--color--slate-50);
	--rmc2-slate-100: var(--wp--preset--color--slate-100);
	--rmc2-slate-150: #e9eef4;
	--rmc2-slate-200: var(--wp--preset--color--slate-200);
	--rmc2-slate-300: var(--wp--preset--color--slate-300);
	--rmc2-slate-400: var(--wp--preset--color--slate-400);
	--rmc2-slate-500: var(--wp--preset--color--slate-500);
	--rmc2-slate-600: var(--wp--preset--color--slate-600);
	--rmc2-slate-700: var(--wp--preset--color--slate-700);
	--rmc2-font-sans: var(--wp--preset--font-family--sans);
	--rmc2-font-display: var(--wp--preset--font-family--display);
	--rmc2-font-subtitle: var(--wp--preset--font-family--subtitle);
	--rmc2-font-serif: var(--wp--preset--font-family--serif);
	--rmc2-font-mono: var(--wp--preset--font-family--mono);
	--rmc2-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--rmc2-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--rmc2-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--rmc2-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--rmc2-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--rmc2-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
	--rmc2-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--rmc2-header-offset: calc(80px + var(--wp-admin--admin-bar--height, 0px));
}

/* ------------------------------------------------------------------ Base */

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

html {
	scroll-behavior: smooth;
}

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

::selection {
	background: var(--rmc2-orange);
	color: #fff;
}

/* The hidden attribute always wins, even over display rules below. */
[hidden] {
	display: none !important;
}

/* No gaps between the header, the sections and the footer. */
.wp-site-blocks > * + *,
.rmc2-main > * + * {
	margin-block-start: 0;
}

/* Reset inside the section blocks: they set their own spacing. */
:where([class*="wp-block-rmc2-main-website-"]) :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, fieldset, legend) {
	margin: 0;
}

:where([class*="wp-block-rmc2-main-website-"]) :where(ul, ol) {
	list-style: none;
	padding: 0;
}

:where([class*="wp-block-rmc2-main-website-"]) :where(button, input, select, textarea) {
	font: inherit;
	color: inherit;
}

:where([class*="wp-block-rmc2-main-website-"]) :where(button) {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

:where([class*="wp-block-rmc2-main-website-"]) :where(img) {
	display: block;
	max-width: 100%;
	height: auto;
}

:where(.rmc2-icon) {
	display: block;
	flex-shrink: 0;
	width: 1em;
	height: 1em;
}

/* ------------------------------------------------------- Accessibility */

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

/* Keyboard focus is always visible (WCAG 2.2: 2.4.7, 2.4.11). */
:where(a, button, input, select, textarea, summary, dialog, [tabindex]):focus-visible {
	outline: 2px solid var(--rmc2-orange);
	outline-offset: 2px;
}

/* Respect the visitor's "reduce motion" setting. */
@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

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

/* ------------------------------------------------------ Layout pieces */

.rmc2-container {
	width: 100%;
	max-width: 80rem;
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.rmc2-section {
	padding-block: 6rem;
}

/* Anchor links land below the fixed header. */
[id] {
	scroll-margin-top: var(--rmc2-header-offset);
}

.rmc2-section-head {
	max-width: 48rem;
	margin: 0 auto 4rem;
	text-align: center;
}

.rmc2-section-head--wide-gap {
	margin-bottom: 5rem;
}

.rmc2-eyebrow {
	font-size: 0.75rem;
	line-height: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--rmc2-orange);
}

.rmc2-eyebrow--display {
	font-family: var(--rmc2-font-display);
	font-weight: 600;
}

.rmc2-eyebrow--subtitle {
	font-family: var(--rmc2-font-subtitle);
	font-weight: 700;
	animation: rmc2-fade-in 0.25s var(--rmc2-ease) both;
}

.rmc2-eyebrow--sans {
	font-family: var(--rmc2-font-sans);
	font-weight: 700;
}

.rmc2-section-title {
	margin-top: 0.75rem;
	font-family: var(--rmc2-font-display);
	font-size: 1.875rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.025em;
	color: var(--rmc2-navy);
}

.rmc2-rule {
	width: 3rem;
	height: 2px;
	margin: 1rem auto 0;
	border-radius: 0.25rem;
	background: var(--rmc2-orange);
}

.rmc2-rule--start {
	margin-inline: 0;
}

.rmc2-lead {
	margin-top: 1.25rem;
	font-family: var(--rmc2-font-sans);
	font-weight: 300;
	line-height: 1.625;
}

.rmc2-lead--muted {
	color: var(--rmc2-slate-600);
}

/* ------------------------------------------------------------- Logo */

.rmc2-logo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	user-select: none;
}

.rmc2-logo__emblem,
.rmc2-logo__image {
	width: 3rem;
	height: 3rem;
	flex-shrink: 0;
	object-fit: contain;
}

.rmc2-logo__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.rmc2-logo__title {
	font-family: var(--rmc2-font-display);
	font-size: 1.5rem;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--rmc2-navy);
	transition: color 0.15s;
}

.rmc2-logo__subtitle {
	margin-top: 0.25rem;
	font-family: var(--rmc2-font-subtitle);
	font-size: 9px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgb(47 47 49 / 0.7);
	transition: color 0.15s;
}

a:hover .rmc2-logo__title,
a:focus-visible .rmc2-logo__title {
	color: var(--rmc2-orange);
}

.rmc2-logo.is-light .rmc2-logo__title {
	color: #fff;
}

.rmc2-logo.is-light .rmc2-logo__subtitle {
	color: var(--rmc2-slate-400);
}

/* --------------------------------------------------- Dialogs (modals) */

.rmc2-modal {
	width: calc(100% - 2rem);
	max-width: 36rem;
	max-height: calc(100dvh - 2rem);
	padding: 0;
	overflow: auto;
	border: 1px solid var(--rmc2-slate-200);
	border-radius: 0.75rem;
	background: #fff;
	color: var(--rmc2-navy);
	box-shadow: var(--rmc2-shadow-2xl);
}

.rmc2-modal[open] {
	animation: rmc2-zoom-in 0.35s var(--rmc2-ease);
}

.rmc2-modal::backdrop {
	background: rgb(0 5 50 / 0.45);
	backdrop-filter: blur(4px);
}

html:has(.rmc2-modal[open]) {
	overflow: hidden;
}

/* -------------------------------------- Plan accent gradients (Plans) */

.rmc2-accent--orange { background-image: linear-gradient(to right, #f97316, #c2410c); }
.rmc2-accent--teal { background-image: linear-gradient(to right, #0d9488, #134e4a); }
.rmc2-accent--navy { background-image: linear-gradient(to right, #000b54, #1e1b4b); }
.rmc2-accent--orange-navy { background-image: linear-gradient(to right, #c54f00, #000b54); }
.rmc2-accent--orange-red { background-image: linear-gradient(to right, #ea580c, #b91c1c); }
.rmc2-accent--emerald { background-image: linear-gradient(to right, #047857, #134e4a); }
.rmc2-accent--rose-indigo { background-image: linear-gradient(to right, #f43f5e, #312e81); }
.rmc2-accent--teal-navy { background-image: linear-gradient(to right, #0d9488, #000b54); }
.rmc2-accent--rose-red { background-image: linear-gradient(to right, #e11d48, #991b1b); }
.rmc2-accent--cyan-orange { background-image: linear-gradient(to right, #0891b2, #c54f00); }
.rmc2-accent--orange-indigo { background-image: linear-gradient(to right, #e2630d, #312e81); }
.rmc2-accent--amber-navy { background-image: linear-gradient(to right, #d97706, #101961); }

/* ----------------------------------------------------------- Motion */

.rmc2-reveal {
	opacity: 0;
	animation: rmc2-rise 0.8s var(--rmc2-ease) forwards;
}

[role="tabpanel"]:not([hidden]) {
	animation: rmc2-panel 0.3s var(--rmc2-ease);
}

@keyframes rmc2-rise {

	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes rmc2-panel {

	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes rmc2-fade-in {

	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes rmc2-zoom-in {

	from {
		opacity: 0;
		transform: scale(0.96);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes rmc2-ping {

	75%,
	100% {
		transform: scale(2);
		opacity: 0;
	}
}

@keyframes rmc2-pulse {

	50% {
		opacity: 0.5;
	}
}

/* ------------------------------------------- Pages other than the home */

.rmc2-page {
	padding-block: calc(var(--rmc2-header-offset) + 4rem) 6rem;
	padding-inline: 1.5rem;
}

.rmc2-page .wp-block-post-title,
.rmc2-page .wp-block-query-title {
	margin-bottom: 1.5rem;
}

.rmc2-page .wp-block-post-featured-image img {
	border-radius: 1rem;
}

/* ------------------------------------------------------ Breakpoints */

@media (min-width: 640px) {

	.rmc2-section-title {
		font-size: 2.25rem;
		line-height: 1.111;
	}

	.rmc2-logo__title {
		font-size: 1.875rem;
	}

	.rmc2-logo__subtitle {
		font-size: 10px;
	}
}

@media (min-width: 768px) {

	.rmc2-container {
		padding-inline: 3rem;
	}

	.rmc2-section-title {
		font-size: 3rem;
		line-height: 1;
	}
}