/*
 * Base layer: Elementor kit 5 (uploads/elementor/css/post-5.css) reproduced under the theme's
 * .roc-kit body class, value for value and selector for selector, so pages keep their look once
 * the kit stops loading (docs/elementor-removal-implementation.md §6.1).
 *
 * Keep every selector form and its specificity exactly as the kit has it: theme rules that lose
 * to the kit today must keep losing. New components outrank these rules on purpose (two-class
 * selectors), so the kit's button look never leaks into the chrome.
 *
 * The one intentional change is visible keyboard focus (WCAG 2.4.7), at the end of this file.
 */

.roc-kit {
	--roc-kit-primary: #000000;
	--roc-kit-secondary: #FFFFFF;
	--roc-kit-text: #000000;
	--roc-kit-accent: #2563EB;
	color: var(--roc-kit-text);
	font-family: "Roboto", Sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 25.6px;
}

.roc-kit button,
.roc-kit input[type="button"],
.roc-kit input[type="submit"],
.roc-kit .elementor-button {
	background-color: var(--roc-kit-accent);
	font-family: "Raleway", Sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 18.78px;
	color: var(--roc-kit-secondary);
	box-shadow: 0px 4px 33px 0px rgba(55, 231, 255, 0.15);
	border-style: none;
	border-radius: 5px 5px 5px 5px;
	padding: 13px 30px 13px 30px;
}

.roc-kit button:hover,
.roc-kit button:focus,
.roc-kit input[type="button"]:hover,
.roc-kit input[type="button"]:focus,
.roc-kit input[type="submit"]:hover,
.roc-kit input[type="submit"]:focus,
.roc-kit .elementor-button:hover,
.roc-kit .elementor-button:focus {
	background-color: var(--roc-kit-primary);
	color: var(--roc-kit-secondary);
}

.roc-kit a {
	color: var(--roc-kit-accent);
}

.roc-kit a:hover {
	color: var(--roc-kit-text);
}

.roc-kit h1 {
	color: var(--roc-kit-primary);
	font-family: "Raleway", Sans-serif;
	font-size: 48px;
	font-weight: 800;
	line-height: 57.6px;
}

.roc-kit h2 {
	color: var(--roc-kit-primary);
	font-family: "Roboto", Sans-serif;
	font-size: 48px;
	font-weight: 600;
	line-height: 56.25px;
}

/*
 * Visible keyboard focus site-wide. style.css resets `a, button, input, textarea, select` with
 * `outline: none !important`, so this rule needs !important plus a more specific selector, as
 * investment-tools/hub.css already does for its own page. Mouse users see no change.
 */
.roc-kit :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid #2563eb !important;
	outline-offset: 2px !important;
}

/* style.css never defines it (only style-rtl.css does), so WordPress's skip-link and
   screen-reader text would otherwise show on every page. */
.roc-kit .screen-reader-text:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}