/*
 Theme Name:   susam
 Theme URI:    https://susam.co
 Description:  susam theme
 Author:       susam
 Author URI:   https://susam.co
 Template:     bricks
 Version:      2.0
 Text Domain:  susam
*/

/* Body Background */
/* Grain overlay */
body::before {
	content: '';
	background-image: url(grain.webp);
	background-repeat: repeat;
	background-size: 100px auto;
	opacity: 0.05;
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 2;
}
/* Default radial gradient background on body */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		radial-gradient(
			circle at var(--secondary-animation-blue-x) var(--secondary-animation-blue-y),
			var(--secondary-animation-blue) var(--blob-size-small),
			transparent var(--secondary-animation-blue-size)
		),
		radial-gradient(
			circle at var(--secondary-animation-purple-x) var(--secondary-animation-purple-y),
			var(--secondary-animation-purple) var(--blob-size-small),
			transparent var(--secondary-animation-purple-size)
		);
	animation: secondary-gradient-animation 10s linear infinite alternate;
	background-blend-mode: normal, normal;
}
/* End Body Background */

/* Start Standard Fixes */
* {
	scroll-behavior: smooth;
}
main section:first-of-type:first-child>*:first-child, body>article#brx-content {
	margin-block-start: var(--header-offset);
}
body {
	min-block-size: 100dvh;
	font-size: var(--text-m);
	color: var(--text-body);
	background-color: var(--dark);
}
.brxe-container {
	inline-size: min(100%, var(--content-width));
	max-inline-size: min(100%, var(--max-width));
}
:where(.brxe-section) {
	padding: var(--space-l) var(--space-s);
	color: var(--text-body);
}
main :where(a, .brxe-text-link):not(.brxe-button):not(header *):not(footer *) {
	color: var(--light);
	text-decoration: underline;
	transition: var(--transition);
}

main :where(a, .brxe-text-link):not(.brxe-button):not(header *):not(footer *):hover {
	color: var(--light-50);
}
:where(.brxe-container) p:has(+ ul) {
	margin-block-end: 0;
}
div.stagger-text p {
    margin-block-end: revert;
}
main ul {
	padding-inline-start: 1rem;
	column-gap: var(--space-s);
	row-gap: var(--space-s);
}
mark {
	background-color: unset;
	background: var(--gradient-primary);
	color: var(--light);
}
.is-layout-flex {
	display: flex;
}
/* Start Popup Scroll Fixes */
.brx-popup, #menu.brx-open > div {
	overflow-y: auto;
	overscroll-behavior: contain;
}
/* End Popup Scroll Fixes */
/* End Standard Fixes */

/* Start Text Defaults */
body {
	font-family: var(--body-font);
}
h1 {
	font-size: var(--text-4xl);
}
h2 {
	font-size: var(--text-3xl);
}
h3 {
	font-size: var(--text-2xl);
}
h4 {
	font-size: var(--text-xl);
}
h5 {
	font-size: var(--text-l);
}
h6 {
	font-size: var(--text-m);
}
h1, h2, h3, h4, h5, h6 {
	color: var(--text-title);
	line-height: 1.5;
	font-family: var(--title-font);
}
h1, h2 {
	font-weight: 800;
}
.cite-ref {
	background: none;
	color: var(--light);
    min-inline-size: 24px;
	min-block-size: 24px;
}
/* End Text Defaults */

/* Start Section & Container Defaults */
:where(.brxe-section):not(header *):not(footer *)
	:where(.brxe-container):not(.hero__container):not(.blog__content):not(.card):not(ul) {
	margin-block-start: var(--space-l);
	margin-block-end: var(--space-l);
	column-gap: var(--space-m);
	row-gap: var(--space-m);
}
/* End Section & Container Defaults */

/* Start Button Defaults */
button, a.brxe-button {
	transition: var(--transition);
}
button:hover, a.brxe-button:hover {
	scale: 1.05;
}
.bricks-button {
	padding: var(--space-2xs) var(--space-s);
	border-radius: var(--radius-s);
	box-shadow: var(--shadow-m);
	font-size: var(--text-m);
}
.bricks-button:has(> svg) svg {
	width: var(--text-s);
	height: var(--text-s);
}
.bricks-button.xl {
	padding: var(--space-s) var(--space-l);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-l);
	font-size: var(--text-xl);
}
.bricks-button.lg {
	padding: var(--space-xs) var(--space-m);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-m);
	font-size: var(--text-l);
}
.bricks-button.sm {
	padding: var(--space-2xs) var(--space-s);
	border-radius: var(--radius-xs);
	box-shadow: var(--shadow-s);
	font-size: var(--text-s);
}
.bricks-button.bricks-background-muted {
	color: var(--dark-l-70);
	background: var(--light-30);
	box-shadow: none;
}
.bricks-button.bricks-background-muted:hover {
	scale: none;
}
.bricks-background-primary {
	background: var(--light);
	color: var(--dark);
}
.brxe-button.bricks-background-secondary {
	background: var(--dark-60);
	box-shadow: none;
}
.bricks-background-secondary:hover {
	background: var(--dark);
}
.bricks-button.bricks-background-light {
	background: var(--blue);
	color: var(--light);
}
.bricks-button.bricks-background-dark {
	background: var(--dark);
}
.bricks-button.bricks-background-light.xl, .bricks-button.bricks-background-dark.xl {
	box-shadow: var(--shadow-l-blue);
}
.bricks-button.bricks-background-light.lg, .bricks-button.bricks-background-dark.lg, .bricks-button.bricks-background-light, .bricks-button.bricks-background-dark {
	box-shadow: var(--shadow-m-blue);
}
.bricks-button.bricks-background-light.sm, .bricks-button.bricks-background-dark.sm {
	box-shadow: var(--shadow-s-blue);
}
/* End Button Defaults */

/* Start Image Defaults */
img {
	border-radius: var(--radius-l);
	inline-size: auto;
	block-size: auto;
}
/* End Image Defaults */

/* Start Form Defaults */
:where(.brxe-form) .form-group {
	padding: 2rem 0;
	position: relative;
}
:where(.brxe-form) .form-group:not(.file):has(:is(input:not([type="checkbox"]):not([type="radio"]), select, textarea)) > label {
	opacity: 0;
	transition: var(--transition);
	position: absolute;
	transform: translateY(50%);
}
:where(.brxe-form) .form-group:not(.file):has(:is(input:not([type="checkbox"]):not([type="radio"]), select, textarea)):focus-within > label {
	transform: translateY(-50%);
	opacity: 1;
}
:where(.brxe-form) .form-group:has(:is(input[type="checkbox"], input[type="radio"])) > :is(.label, label),
:where(.brxe-form) .form-group:has(input[type="file"]) > label:not(.choose-files) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
input, textarea, select, :where(.brxe-form) .form-group.file>label.choose-files {
	border-color: var(--light);
	border-width: 0;
	border-block-end-width: 2px;
	background: none;
	padding: var(--space-3xs);
	transition: var(--transition);
}
select {
	background-image: linear-gradient(45deg, transparent 50%, gray 0), linear-gradient(135deg, gray 50%, transparent 0);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
	background-repeat: no-repeat;
	background-size: 4px 4px, 4px 4px;
}
input:focus, textarea:focus, :where(.brxe-form) .form-group.file>label.choose-files:hover, .form-group>select:focus {
	scale: 1.05;
}
input[type=radio], input[type=checkbox] {
	block-size: var(--text-m);
	inline-size: var(--text-m);
}
:where(.brxe-form) .options-wrapper input[name^="consent"] + label {
  font-size: var(--text-xs);
}
:where(.brxe-form) .options-wrapper li:has(> input[name^="consent"]) {
  align-items: unset;
}
input[type=radio]+label, input[type=checkbox]+label {
	display: inline;
}
:where(.brxe-form) .form-group.file>label.choose-files {
	font-size: var(--text-body);
}
:where(.brxe-form) .form-group.file>.file-result.show .bricks-button {
	background: var(--dark-60);
	box-shadow: none;
	color: var(--light);
}
:where(.brxe-form) .form-group.file>.file-result.show .bricks-button:hover {
	background: var(--dark);
}
/* End Form Defaults */

/* Start Preloader */
#preloader {
	position: fixed;
	inset-block-end: -350px;
	inline-size: 100%;
	block-size: 300px;
	z-index: 1004;
}
#preloader::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--gradient-full);
	animation: animate 10s linear infinite;
	background-size: 300%;
	filter: blur(100px);
}
@keyframes animate {
	0% {background-position: 0 0}
	100% {background-position: 300% 0}
}
/* End Preloader */

/* Start Accessibility */
.sr-only {
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}
/* Start Focus Fixes */
body.bricks-is-frontend input:not([type="checkbox"]):not([type="radio"]):focus, body.bricks-is-frontend textarea:focus, body.bricks-is-frontend select:focus {
	outline: none;
	box-shadow: none;
}

body.bricks-is-frontend.user-is-tabbing :focus:not(main, section, article, div, header, footer, nav, aside), input[type="submit"]:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
	box-shadow:
		0 0 0 calc(var(--focus-offset) + var(--focus-width)) var(--light),
		0 0 0 calc(var(--focus-offset) + (2 * var(--focus-width))) var(--dark);
}

/* If focus-visible exists, prefer it (more accurate than JS heuristics) */
@supports selector(:focus-visible) {
    body.bricks-is-frontend :focus-visible:not(main, section,
article, div, header, footer, nav, aside) {
        outline: var(--focus-width) solid var(--focus-color);
        outline-offset: var(--focus-offset);
        box-shadow:
            0 0 0 calc(var(--focus-offset) + var(--focus-width))
var(--light),
            0 0 0 calc(var(--focus-offset) + (2 *
var(--focus-width))) var(--dark);
    }
}
/* iOS Browser Focus Fix */
@media (hover: none) and (pointer: coarse) {
	.brxe-nav-nested .brxe-toggle:focus,
	.brxe-nav-nested .brx-nav-nested-items a:focus {
		outline: none;
		box-shadow: none;
	}
}
/* End Focus Fixes */
/* Start Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        animation-delay: -1ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        background-attachment: initial !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
    [style*="opacity"] {
        opacity: 1 !important;
        visibility: visible !important;
    }
    [style*="transform"] {
        transform: none !important;
    }
    body {
        opacity: 1 !important;
    }
}
/* End Reduced Motion */
/* Start Reflow */
h1, h2, h3, h4, h5, h6, p, li, a, span, blockquote {
    overflow-wrap: break-word;
}
html {
    overflow-x: clip;
}
.card > * {
	min-inline-size: 0;
}
/* End Reflow */
/* End Accessibility */

/* Start Gradient Background Animations */
:root {
	/* Positioning values */
	--position-5: 5%;
	--position-20: 20%;
	--position-80: 80%;
	--position-95: 95%;
	/* Size values */
	--blob-size-small: 20%;
	--blob-size-medium: 50%;
	--blob-size-large: 80%;
}
/* Main Animation Properties */
@property --main-animation-blue {
	syntax: '<color>';
	inherits: false;
	initial-value: hsla(214, 100%, 56%, 0.2);
}
@property --main-animation-purple {
	syntax: '<color>';
	inherits: false;
	initial-value: hsla(283, 75%, 63%, 0.8);
}
@property --main-animation-blue-size {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 50%;
}
@property --main-animation-purple-size {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 80%;
}
/* Secondary Animation Properties */
@property --secondary-animation-blue {
	syntax: '<color>';
	inherits: false;
	initial-value: hsla(214, 100%, 56%, 0.3);
}
@property --secondary-animation-purple {
	syntax: '<color>';
	inherits: false;
	initial-value: hsla(283, 75%, 63%, 0.5);
}
@property --secondary-animation-blue-x {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 5%;
}
@property --secondary-animation-blue-y {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 95%;
}
@property --secondary-animation-purple-x {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 95%;
}
@property --secondary-animation-purple-y {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 5%;
}
@property --secondary-animation-blue-size {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 50%;
}
@property --secondary-animation-purple-size {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 50%;
}

/* Main Gradient Animation */
@keyframes main-gradient-animation {
	0% {
		--main-animation-blue: var(--blue-d-20);
		--main-animation-blue-size: var(--blob-size-medium);
		--main-animation-purple: var(--purple-80);
		--main-animation-purple-size: var(--blob-size-large);
	}
	100% {
		--main-animation-blue: var(--blue-d-60);
		--main-animation-blue-size: var(--blob-size-large);
		--main-animation-purple: var(--purple);
		--main-animation-purple-size: var(--blob-size-medium);
	}
}

/* Secondary Gradient Animation */
@keyframes secondary-gradient-animation {
	0% {
		--secondary-animation-blue-x: 5%;
		--secondary-animation-blue-y: 95%;
		--secondary-animation-blue: var(--blue-d-30);
		--secondary-animation-blue-size: var(--blob-size-medium);
		--secondary-animation-purple-x: 80%;
		--secondary-animation-purple-y: 20%;
		--secondary-animation-purple: var(--purple-30);
		--secondary-animation-purple-size: var(--blob-size-medium);
	}
	100% {
		--secondary-animation-blue-x: 95%;
		--secondary-animation-blue-y: 95%;
		--secondary-animation-blue: var(--blue-d-10);
		--secondary-animation-blue-size: var(--blob-size-large);
		--secondary-animation-purple-x: 95%;
		--secondary-animation-purple-y: 5%;
		--secondary-animation-purple: var(--purple-20);
		--secondary-animation-purple-size: var(--blob-size-large);
	}
}

/* Main Gradient Background */
.main-gradient-bg {
	background-color: var(--blue-d-80);
	background-image:
		radial-gradient(
			circle at var(--position-5) var(--position-95),
			var(--main-animation-blue) var(--blob-size-small),
			transparent var(--main-animation-blue-size)
		),
		radial-gradient(
			circle at var(--position-95) var(--position-5),
			var(--main-animation-purple) var(--blob-size-small),
			transparent var(--main-animation-purple-size)
		);
	animation: main-gradient-animation 10s linear infinite alternate;
	background-blend-mode: normal, normal;
}

/* Secondary Gradient Background */
.radial-gradient-bg {
	background-image:
		radial-gradient(
			circle at var(--secondary-animation-blue-x) var(--secondary-animation-blue-y),
			var(--secondary-animation-blue) var(--blob-size-small),
			transparent var(--secondary-animation-blue-size)
		),
		radial-gradient(
			circle at var(--secondary-animation-purple-x) var(--secondary-animation-purple-y),
			var(--secondary-animation-purple) var(--blob-size-small),
			transparent var(--secondary-animation-purple-size)
		);
	animation: secondary-gradient-animation 10s linear infinite alternate;
	background-blend-mode: normal, normal;
	background-attachment: fixed;
}

/* Mobile-specific background */
@media (max-width: 767px) {
	/* Remove original background */
	.radial-gradient-bg {
		background: none;
		animation: none;
		position: relative;
	}
	/* Create fixed background with pseudo-element */
	.radial-gradient-bg::before {
		content: '';
		position: fixed;
		inset: 0;
		z-index: -1;
		background-image:
			radial-gradient(
				circle at 50% 95%,
				var(--blue-d-30) 0%,
				transparent 30%
			),
			radial-gradient(
				circle at 90% 10%,
				var(--purple-30) 0%,
				transparent 30%
			);
		pointer-events: none;
	}
}
/* End Gradient Background Animations */