:root {
	--cyber-gradient: linear-gradient(var(--button_gradient_angle, 180deg), var(--button_gradient_top_color) var(--button_gradient_start, 0%), var(--button_gradient_bottom_color) var(--button_gradient_end, 100%));
	--cyber-special-bg-color: #f5f4f5;

	--cyber-space-xs: .5em;
	--cyber-space-sm: 1em;
	--cyber-space-md: 1.5em;
	--cyber-space-lg: 2em;
	--cyber-space-xl: 4em;

	--cyber-border-size: 2px;
	--cyber-border-color: #e7e5e5;
	--cyber-border: var(--cyber-border-size) solid var(--cyber-border-color);

	--cyber-border-radius: .5em;
	--cyber-border-radius-inset: calc(var(--cyber-border-radius) - var(--cyber-border-size));

	--cyber-font-size: clamp(0.75rem, 0.45rem + 0.63vw, 1rem);
	--cyber-h4-font-size: max( 1.1rem, calc( 1.3 * var( --cyber-font-size ) ) );
}

.component-header {
	display: grid;
	gap: 2em;
	padding-block: 4em;
	align-items: center;
	font-size: var( --cyber-font-size );

	&:has( > .component-thumbnail ) {
		grid-template-columns: 1fr 1fr;

		@media ( max-width: 768px ) {
			grid-template-columns: 1fr;

			& .component-thumbnail {
				order: -1;
			}
		}
	}

	& .component-thumbnail {
		position: relative;
		inset: 0;

		& img {
			width: 100%;
			aspect-ratio: 16 / 9;
			object-fit: cover;
			border-radius: var( --cyber-border-radius );
		}
	}

	& .component-header-content {
		display: grid;
		gap: 1em;
		padding-block: 2em;

		& * {
			margin: 0;
		}

		& .component-title {
			font-size: var( --cyber-h4-font-size );
			letter-spacing: 1.5px;
			text-transform: uppercase;
			color: var( --link_color );
			font-weight: bold;
		}

		& .component-description {
			font-size: 2em;
			line-height: 1.4 !important;
			color: var( --body_typography-color );
			text-wrap: balance;
			font-weight: bold;

			& * {
				font-size: inherit !important;
				line-height: inherit !important;
				color: inherit !important;
				text-wrap: inherit !important;
				font-weight: inherit !important;
			}

			& a:is( :hover, :focus-visible ) {
				color: var( --link_color ) !important;
			}
		}
	}

	&:has( .component-thumbnail a:is( :hover, :focus-visible ) ) .component-description a {
		color: var( --link_color ) !important;
	}
}

.posts-list {
    grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) );
    display: grid;
    gap: 3em 2em;
    list-style: none;
    padding: 0;
    margin: 0;
	font-size: var( --cyber-font-size );

	& .post-item {
		margin: 0 !important;

		& .post-item-link {
			align-content: start;
			display: grid;
			background: white;
			border-radius: var( --cyber-border-radius );
			height: 100%;
			border: var( --cyber-border );

			& * {
				margin: 0;
			}

			&:is( :hover, :focus-visible ) .entry-title {
				color: var(--link_color) !important;
			}

			& .entry-thumbnail img {
				width: 100%;
				aspect-ratio: 16 / 9;
				object-fit: cover;
				border-radius: var( --cyber-border-radius-inset ) var( --cyber-border-radius-inset ) 0 0;
			}

			& .entry-content {
				display: grid;
				gap: .5em;
				padding: 1.5em 1em;

				& .entry-category {
					font-weight: bold;
					text-transform: uppercase;
					font-size: .9em;
					letter-spacing: 1.5px;
				}

				& .entry-title {
					font-size: var( --cyber-h4-font-size ) !important;
					line-height: 1.5 !important;
					text-wrap: balance;
					color: var(--body_typography-color);
				}

				& .entry-date {
					color: var( --body_typography-color );
					font-size: .9em;
				}
			}
		}
	}
}

section.cyber-fullwidth {
	width: 100dvw;
	display: grid;
	grid-template-columns: min( var(--site_width), calc( 100dvw - 60px ) );
	margin-inline: calc( max( 60px, 100dvw - var( --site_width ) ) / -2 );
	justify-content: center;
	font-size: var( --cyber-font-size );
}

.fusion-header-wrapper:not( .fusion-is-sticky ) .fusion-custom-menu-item-contents {
	background-color: var( --header_bg_color ) !important;
}

.searchform.fusion-search-form {
	& input.s {
		background: white !important;
		color: var( --body_typography-color ) !important;
		border: var( --cyber-border ) !important;
		border-right: none !important;
		padding: .5em 1em !important;
	}

	&  .searchsubmit {
		background: var( --cyber-gradient) !important;

		&:is( :hover, :focus-visible ) {
			opacity: .8;
		}
	}
}

.fusion-flyout-search .searchform.fusion-search-form {
	& input.s {
		font-size: var( --cyber-h4-font-size ) !important;
		height: 50px !important;
		width: min( 500px, calc( 100vw - 150px ) ) !important;
	}

	& .search-button {
		display: block !important;
	}
}