/* Import CSS partials here.
 * Example: @import 'partials/footer.css';
 */

/* Pattern: kindling/split-card — see consolidated rules below at "Pattern: kindling/split-card (full)". */

.hitek-split-card__image.is-style-grayscale img {
	filter: grayscale(100%);
}

.wp-block-cover.is-style-grayscale img.wp-block-cover__image-background,
.wp-block-cover.is-style-grayscale video.wp-block-cover__video-background,
.hitek-hero-simple img.wp-block-cover__image-background,
.hitek-hero-simple video.wp-block-cover__video-background {
	filter: grayscale(100%);
}

.hitek-cta-figma__body {
	max-width: 634px;
	margin-left: auto;
	margin-right: auto;
}

/* CTA Default (wp_block 74) — moved off inline style so core/group save()
 * output matches stored HTML (otherwise editor flags block validation). */
.hitek-cta-figma {
	background:
		linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.60) 100%),
		url('/wp-content/uploads/2026/04/cta-background-1920-bw-scaled.jpg') lightgray -0.375px -900.047px / 114.431% 439.363% no-repeat;
}

/* Separator — flipped variant used on Why Hi-Tek, AI, and M&A pages.
 * Moved off inline style="transform:scaleX(-1)" on the figure so core/image
 * save() output matches stored HTML. */
.hitek-separator-squares--flipped img {
	transform: scaleX(-1);
}

.hitek-resources-cards .wp-block-columns {
	align-items: stretch;
}
.hitek-resources-cards .wp-block-column {
	display: flex;
	flex-direction: column;
	min-height: 340px;
}
.hitek-resources-cards .wp-block-column > .wp-block-buttons {
	margin-top: auto;
}

/* Mobile: strip nested compare-list padding & let process-cards fill width */
@media (max-width: 781px) {
	.hitek-comparison-table .hitek-compare-list {
		padding-left: 0 !important;
	}
	.hitek-process-cards .hitek-process-card {
		flex-basis: 100% !important;
		max-width: 100% !important;
	}
}

/* Pattern: kindling/split-card (full)
 * wp_block 112. Gradient bg is a theme.json preset (hitek-split-card-red).
 * Scatter-squares overlay is scoped to the TEXT column only via ::before
 * so we don't need a wp:html <img> for the pattern artwork. */
.hitek-split-card__inner {
	position: relative;
	overflow: hidden;
	min-height: 622px;
}

.hitek-split-card__text {
	position: relative;
	overflow: hidden;
}
.hitek-split-card__text::before {
	content: "";
	position: absolute;
	top: 0;
	right: -138px;
	width: 250%;
	aspect-ratio: 1280 / 720;
	background-image: url("/wp-content/uploads/2026/04/governance-pattern-squares-1.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	transform: scale(-1, -1);
	opacity: 0.5;
	pointer-events: none;
	z-index: 0;
}
.hitek-split-card__text > * {
	position: relative;
	z-index: 1;
}

/* Desktop: force the columns to flex-row with an explicit 50/50 split.
 * min-width:0 on image-col stops the raster image from pushing the
 * column wider than its flex-basis (caused cardH 7389, imgW 0 before). */
@media (min-width: 782px) {
	.hitek-split-card__inner > .wp-block-columns {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		min-height: 622px;
		position: relative;
		z-index: 1;
	}
	.hitek-split-card__image-col {
		flex: 0 0 50%;
		min-width: 0;
		align-self: stretch;
	}
	.hitek-split-card__image {
		height: 100%;
		margin: 0;
	}
	.hitek-split-card__image img {
		width: 100%;
		height: 100%;
		min-height: 622px;
		object-fit: cover;
		display: block;
	}
}

@media (max-width: 781px) {
	.hitek-split-card__inner {
		padding: 0 !important;
		min-height: 0;
	}
	.hitek-split-card__text::before {
		right: -60px;
		width: 220%;
		opacity: 0.28;
	}
	.hitek-split-card .wp-block-columns {
		padding: 0 !important;
		margin: 0 !important;
	}
	.hitek-split-card .wp-block-column:first-child {
		padding: 40px 32px !important;
	}
	.hitek-split-card .wp-block-column:last-child {
		padding: 0 !important;
	}
	.hitek-split-card__image {
		aspect-ratio: 4 / 3;
		border-radius: 0;
		margin: 0;
	}
	.hitek-split-card__image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		border-radius: 0;
	}
}

/* About Us — Mission & Values bullet rows (wp_block 102).
 * Red square via ::before so we don't need a wp:html <span> per row. */
.hitek-mv-row {
	position: relative;
	padding-left: 38px;
}
.hitek-mv-row::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	background: var(--wp--preset--color--theme-06);
}

/* Square-bullet lists (pages 51, 52, services CPTs 251-256, service single template).
 * Replaces the old wp:html <ul class="hitek-square-bullets"> pattern.
 * Each list-item gets a red square ::before instead of a standard bullet. */
.hitek-square-bullets {
	list-style: none;
	padding: 0;
	margin: 0;
}
.hitek-square-bullets > li {
	position: relative;
	padding-left: 36px;
	padding-bottom: 16px;
}
.hitek-square-bullets > li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 8px;
	width: 18px;
	height: 18px;
	background: var(--wp--preset--color--theme-06);
}
.hitek-square-bullets > li:last-child {
	padding-bottom: 0;
}

/* Footer: remove underlines; white icons via currentColor on inline SVG */
.hitek-footer a {
	text-decoration: none;
}
.hitek-footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
}
.hitek-footer-links li + li {
	margin-top: 16px;
}
.hitek-footer a:hover,
.hitek-footer a:focus {
	text-decoration: underline;
}
.hitek-footer-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: #ffffff;
	flex-shrink: 0;
}
.hitek-footer-icon svg {
	width: 24px;
	height: 24px;
}

/* Pattern: kindling/feature-grid — inline icon sizing (process-steps now uses
 * bare SVGs with explicit width/height, centered via block layout, no wrapper) */
.hitek-feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 70px;
	height: 70px;
}

.hitek-feature-icon svg {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
}

/* Pattern: kindling/logo-cloud — Figma compliance logos */
.hitek-logo-cloud__logo {
	margin: 0;
}

.hitek-logo-cloud__logo img {
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(100%);
}

.hitek-logo-cloud__logo.is-nist img {
	width: 233px;
	height: 101px;
	filter: brightness(0) invert(1) grayscale(100%);
}

.hitek-logo-cloud__logo.is-soc2 img {
	width: 131px;
	height: 131px;
}

.hitek-logo-cloud__logo.is-hipaa img {
	width: 195px;
	height: 108px;
}

/* Pattern: kindling/blog-list — placeholder thumbnail */
.hitek-blog-list__thumb {
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: #e5e7eb;
	border-radius: 8px;
	background-image: linear-gradient(135deg, transparent 45%, rgba(0, 0, 0, 0.08) 50%, transparent 55%);
}

/* Pattern: kindling/contact-form — form styling (raw <input>/<textarea>/<button>
 * inside wp:html, no block-attribute equivalent). Icon sizing is inlined on
 * the spans in wp_block #105. */
.hitek-contact__form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.hitek-contact__field-row {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

@media (min-width: 600px) {
	.hitek-contact__field-row {
		flex-direction: row;
	}

	.hitek-contact__field-row .hitek-contact__field {
		flex: 1 0 0;
	}
}

.hitek-contact__field {
	display: block;
}

.hitek-contact__field input,
.hitek-contact__field textarea {
	width: 100%;
	background-color: var(--wp--preset--color--theme-02);
	border: 0;
	border-radius: 4px;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.7;
	color: rgba(0, 0, 0, 0.8);
	box-sizing: border-box;
}

.hitek-contact__field textarea {
	min-height: 139px;
	resize: vertical;
}

.hitek-contact__submit {
	align-self: flex-start;
	background-color: var(--wp--preset--color--theme-06);
	color: var(--wp--preset--color--theme-01);
	border: 0;
	border-radius: 12px;
	padding: 18px 20px;
	font-family: inherit;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	cursor: pointer;
}

.hitek-contact__submit:hover,
.hitek-contact__submit:focus-visible {
	background-color: var(--wp--preset--color--theme-05);
}

/* Gravity Forms overrides — inherit the hitek-contact form look inside #373737 card */
.hitek-contact .gform_wrapper {
	color: #ffffff;
}
.hitek-contact .gform_wrapper form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.hitek-contact .gform_wrapper .gform_fields {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 0;
	margin: 0;
	list-style: none;
}
.hitek-contact .gform_wrapper .gfield {
	padding: 0;
	margin: 0;
	width: 100%;
}
.hitek-contact .gform_wrapper .gfield_label,
.hitek-contact .gform_wrapper legend.gfield_label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
.hitek-contact .gform_wrapper input[type="text"],
.hitek-contact .gform_wrapper input[type="email"],
.hitek-contact .gform_wrapper input[type="tel"],
.hitek-contact .gform_wrapper input[type="url"],
.hitek-contact .gform_wrapper textarea {
	width: 100%;
	background-color: var(--wp--preset--color--theme-02);
	border: 0;
	border-radius: 4px;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.7;
	color: rgba(0, 0, 0, 0.8);
	box-sizing: border-box;
}
.hitek-contact .gform_wrapper textarea {
	min-height: 139px;
	resize: vertical;
}
.hitek-contact .gform_wrapper .ginput_complex {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
@media (min-width: 600px) {
	.hitek-contact .gform_wrapper .ginput_complex {
		flex-direction: row;
	}
	.hitek-contact .gform_wrapper .ginput_complex > span {
		flex: 1 0 0;
	}
}
.hitek-contact .gform_wrapper .ginput_complex > span {
	display: block;
}
.hitek-contact .gform_wrapper .ginput_complex label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
.hitek-contact .gform_wrapper .gfield_required {
	color: inherit;
}
.hitek-contact .gform_wrapper .gform_footer {
	padding: 0;
	margin: 0;
}
.hitek-contact .gform_wrapper .gform_button,
.hitek-contact .gform_wrapper input[type="submit"],
.hitek-contact .gform_wrapper .gform_footer input.button,
.hitek-contact .gform_wrapper button[type="submit"] {
	align-self: flex-start !important;
	background-color: var(--wp--preset--color--theme-06) !important;
	background-image: none !important;
	color: var(--wp--preset--color--theme-01) !important;
	border: 0 !important;
	border-radius: 12px !important;
	padding: 18px 20px !important;
	font-family: inherit !important;
	font-weight: 500 !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	cursor: pointer !important;
	width: auto !important;
	height: auto !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
}
.hitek-contact .gform_wrapper .gform_button:hover,
.hitek-contact .gform_wrapper input[type="submit"]:hover,
.hitek-contact .gform_wrapper .gform_footer input.button:hover,
.hitek-contact .gform_wrapper button[type="submit"]:hover,
.hitek-contact .gform_wrapper .gform_button:focus-visible,
.hitek-contact .gform_wrapper input[type="submit"]:focus-visible,
.hitek-contact .gform_wrapper .gform_footer input.button:focus-visible,
.hitek-contact .gform_wrapper button[type="submit"]:focus-visible {
	background-color: var(--wp--preset--color--theme-05) !important;
}
.hitek-contact .gform_wrapper .validation_error,
.hitek-contact .gform_wrapper .gfield_validation_message {
	color: #ff8080;
}
.hitek-contact .gform_confirmation_message {
	color: #ffffff;
}

/* ---------------------------------------------------------------------------
 * Editor-only: make patterns render at their designed full width inside the
 * post editor canvas instead of the 800px content-size. Scoped via
 * .editor-styles-wrapper so it never affects the front-end.
 *
 * Core WP applies this rule to the root container's direct children:
 *   .block-editor-block-list__layout.is-root-container > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
 *     max-width: 800px; margin-left: auto !important; margin-right: auto !important;
 *   }
 * Gutenberg's post editor doesn't always add the `alignfull` class to a group
 * with `align:full` when the layout is default, so we override at the root-
 * container-child level directly — every direct child of post-content gets
 * full canvas width, and their own alignfull children inherit cleanly.
 * ------------------------------------------------------------------------- */
.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > *,
.editor-styles-wrapper .is-root-container > * {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
}
/* Ref'd wp:block wrappers + any nested alignfull go full-width too */
.editor-styles-wrapper .wp-block-block,
.editor-styles-wrapper [data-type="core/block"],
.editor-styles-wrapper .wp-block[data-align="full"],
.editor-styles-wrapper .wp-block.alignfull {
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Uniform-dark cards across the site — converts the "first card is light" Figma
 * pattern (Amanda's Loom called it a hover-state preview) into a uniform dark
 * resting state. CSS-only, no asset rework: black-fill icons in those originally-
 * light cards get filter: invert(1) so they appear white on the now-dark bg.
 *
 * IMPORTANT: this block must come BEFORE the hover rule below. Specificity is a
 * tie (both selectors are 0-2-0 with !important); source-order then wins, so
 * placing uniform-dark FIRST lets the later :hover rule override it on hover. */

/* Variant-class light cards (Feature Grid wp_block 106, Process Steps wp_block 110) */
.hitek-feature-card--light,
.hitek-process-card--light {
	background-color: #2b2b2b !important;
	color: #ffffff !important;
}
.hitek-feature-card--light :is(h3, p),
.hitek-process-card--light :is(h3, p) {
	color: #ffffff !important;
}
.hitek-feature-card--light .wp-block-image img,
.hitek-process-card--light .wp-block-image img {
	filter: invert(1);
}

/* Inline-style light cards (no class variant) — matched via attribute selector
 * on the inline style. Targets:
 *   - .hitek-ai-card with #e4e4e4 bg (cards 1 + 4 on /ai-integrations-...)
 *   - .hitek-stability-card with #e4e4e4 bg (services Automation/Governed/Reduced)
 *   - .hitek-core-card with rgba(255,255,255,0.85) bg (services Core Service Areas)
 * If the source palette changes, update these selectors too. */
.hitek-ai-card[style*="#e4e4e4"],
.hitek-stability-card[style*="#e4e4e4"],
.hitek-core-card[style*="255,255,255,0.85"] {
	background-color: #2b2b2b !important;
	color: #ffffff !important;
}
.hitek-ai-card[style*="#e4e4e4"] :is(h3, p),
.hitek-stability-card[style*="#e4e4e4"] :is(h3, p),
.hitek-core-card[style*="255,255,255,0.85"] :is(h3, p) {
	color: #ffffff !important;
}
.hitek-ai-card[style*="#e4e4e4"] .wp-block-image img,
.hitek-stability-card[style*="#e4e4e4"] .wp-block-image img,
.hitek-core-card[style*="255,255,255,0.85"] .wp-block-image img {
	filter: invert(1);
}

/* HiTek card hover — pins #1, #2, #7, #8, #10, #11.
 * Loom spec (Amanda, ~min 9): cards lighten on hover, color change only.
 * Reviewer (pin #1) constrained Amanda's "maybe expand a bit" — strictly color.
 * Inline `style="background-color:#2b2b2b"` from block attrs requires !important.
 * Icons flip via `filter: brightness(0)` — white SVG icons go black on the light
 * hover bg; black icons (used on --light variant cards) are unchanged. */
:is(.hitek-ai-card,
    .hitek-feature-card,
    .hitek-process-card,
    .hitek-stability-card,
    .hitek-core-card) {
	transition: background-color 200ms ease, color 200ms ease;
}
:is(.hitek-ai-card,
    .hitek-feature-card,
    .hitek-process-card,
    .hitek-stability-card,
    .hitek-core-card) :is(h3, p) {
	transition: color 200ms ease;
}
:is(.hitek-ai-card,
    .hitek-feature-card,
    .hitek-process-card,
    .hitek-stability-card,
    .hitek-core-card) .wp-block-image img {
	transition: filter 200ms ease;
}
:is(.hitek-ai-card,
    .hitek-feature-card,
    .hitek-process-card,
    .hitek-stability-card,
    .hitek-core-card):hover {
	background-color: #e4e4e4 !important;
	color: #000000 !important;
}
:is(.hitek-ai-card,
    .hitek-feature-card,
    .hitek-process-card,
    .hitek-stability-card,
    .hitek-core-card):hover :is(h3, p) {
	color: #000000 !important;
}
:is(.hitek-ai-card,
    .hitek-feature-card,
    .hitek-process-card,
    .hitek-stability-card,
    .hitek-core-card):hover .wp-block-image img {
	filter: brightness(0);
}

/* Pin #2 — keep the 3 process-cards in a horizontal row at desktop.
 * Block wrapper sets flexWrap:wrap which lets cards stack at the narrow markup.io
 * iframe width. Force nowrap + equal flex at >=768px so the row stays horizontal. */
@media (min-width: 768px) {
	.hitek-process-cards {
		flex-wrap: nowrap !important;
	}
	.hitek-process-card {
		flex: 1 1 0 !important;
		min-width: 0;
	}
}

/* Gravity Forms inside the dark form card on /contact/ + /it-assessment/.
 * Scoped to .hitek-contact so we don't override GF styling elsewhere on the site.
 * Spec: Figma node 33083:17008 (form card) + 33083:17192 (submit button). */
.hitek-contact .gform_wrapper .gfield_label,
.hitek-contact .gform_wrapper .gform_required_legend,
.hitek-contact .gform_wrapper .gform_page_steps,
.hitek-contact .gform_wrapper .gf_step_label,
.hitek-contact .gform_wrapper .gf_step_number {
	color: #ffffff;
}
.hitek-contact .gform_wrapper .gfield_required,
.hitek-contact .gform_wrapper .gfield_required_text {
	color: rgba(255, 255, 255, 0.7);
}

/* GF foundation theme renders labels at height:1px (screen-reader-only). For
 * text-style fields we use placeholders inside the input (per Figma 33083:17008);
 * for radio/checkbox/select fields the label IS the question, so restore real
 * height + spacing. */
.hitek-contact .gform_wrapper .gfield--type-radio .gfield_label,
.hitek-contact .gform_wrapper .gfield--type-checkbox .gfield_label,
.hitek-contact .gform_wrapper .gfield--type-select .gfield_label {
	height: auto !important;
	margin-bottom: 12px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}
/* Radio + checkbox choice labels (the answer options) — make them readable on the dark card */
.hitek-contact .gform_wrapper .gchoice label,
.hitek-contact .gform_wrapper .gfield_radio label,
.hitek-contact .gform_wrapper .gfield_checkbox label {
	color: #ffffff;
	font-size: 15px;
	line-height: 1.5;
}

/* Next / Previous / Submit buttons — match Figma button spec (33079:8285 / 8289 / 8291).
 * GF foundation theme uses high-specificity rules; need !important on every prop. */
.hitek-contact .gform_wrapper .gform_next_button,
.hitek-contact .gform_wrapper .gform_previous_button,
.hitek-contact .gform_wrapper .gform_button {
	background-color: #c43635 !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 12px !important;
	padding: 18px 20px !important;
	font-family: var(--wp--preset--font-family--poppins, 'Poppins', sans-serif) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	height: auto !important;
	cursor: pointer;
	transition: background-color 180ms ease, color 180ms ease;
}
.hitek-contact .gform_wrapper .gform_next_button:hover,
.hitek-contact .gform_wrapper .gform_previous_button:hover,
.hitek-contact .gform_wrapper .gform_button:hover {
	background-color: #ffffff !important;
	color: #c43635 !important;
}
.hitek-contact .gform_wrapper .gform_next_button:active,
.hitek-contact .gform_wrapper .gform_previous_button:active,
.hitek-contact .gform_wrapper .gform_button:active {
	background-color: #7c0a0c !important;
	color: #ffffff !important;
}

/* Card heading links — inherit text color (cards manage their own contrast),
 * remove default underline, animate underline on hover. Used on Feature Grid
 * cards that link to /services/<slug>/ pages. */
.hitek-feature-card h3 a,
.hitek-process-card h3 a,
.hitek-stability-card h3 a,
.hitek-core-card h3 a,
.hitek-ai-card h3 a {
	color: inherit;
	text-decoration: none;
	transition: text-decoration-color 180ms ease;
}
.hitek-feature-card h3 a:hover,
.hitek-process-card h3 a:hover,
.hitek-stability-card h3 a:hover,
.hitek-core-card h3 a:hover,
.hitek-ai-card h3 a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}