/*
 Theme Name:   ST—Studio	
 Theme URI:    https://simotamas.studio
 Description:  This theme is not available for you to download or buy. It can be a full custom theme, but it could also be a customization of a pre-existing theme.
 Author:       Tamás Simó
 Author URI:   https://simotamas.studio
 Template:     bricks
 Version:      1.0
 Text Domain:  ST—Studio
*/

/* Import Google Font Here*/

@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");

/* ------------------------- Selection Styling ------------------------- */
::selection {
  background: var(--color-black);
  color: var(--color-white);
  text-shadow: none;
}

::-moz-selection {
  background: var(--color-black);
  color: var(--color-white);
  text-shadow: none;
}

/* ------------------------- Scrollbar Styling ------------------------- */
::-webkit-scrollbar {
  width: 8px;
  height: 6px;
  background: var(--color-white);
}
::-webkit-scrollbar-thumb {
  background: var(--color-black);
  border-radius: 20px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* Global Styles & Variables*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* outline: 2px solid lime; */
}
* {
  overscroll-behavior: contain;
}

/* Base CSS*/

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  font-family: var(--ff-base), system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;
  transition: var(--animation-primary);
  word-break: break-word;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  line-height: 1.6;
}

body,
h1,
h2,
h3,
h4,
h5,
h6 p,
figure,
blockquote,
dl,
dd,
label {
  margin-block-end: 0;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
label {
  line-height: 1.1;
}

p,
li,
figcaption {
  max-width: 75ch;
}

img,
picture {
  width: 100%;
  max-width: 100%;
  display: block;
}
img::selection {
  background: transparent;
}
svg {
  display: block;
}
section,
header,
footer {
  position: relative;
}
a {
  color: inherit;
  text-decoration: none;
}
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

ul {
  padding: 0;
}

video {
  width: 100%;
  object-fit: cover;
}
header,
footer {
  width: 100%;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 2rem;
  scroll-margin-block: 5rlh;
}

td,
math,
time[datetime*=":"] {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Lenis CSS*/
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* Screen reader only*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Base Div Classes*/

.container {
  margin: 0 auto;
}
.row {
  display: flex;
  width: 100%;
  position: relative;
}

.col {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Bricks CSS*/
[class*="brxe-"] {
  max-width: 100vw;
}

:where(p:last-of-type) + h1,
:where(p:last-of-type) + h2,
:where(p:last-of-type) + h3,
:where(p:last-of-type) + h4,
:where(p:last-of-type) + h5,
:where(p:last-of-type) + h6 {
  margin-top: 0;
}

/* Coookie Button Styling */

.cky-notice-btn-wrapper .cky-btn {
  padding: 10px;
  border-radius: var(--br-main);
}

/* CSS for the blur effect */

#brx-content {
  position: relative;
  transition: filter 1s ease; /* Transition for the blur effect */
}
.blur-effect {
  filter: blur(3px);
}
#brx-content::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8); /* Semi-transparent black overlay */
  opacity: 0; /* Start fully transparent */
  transition: opacity 0.5s ease; /* Smooth transition for the overlay */
  pointer-events: none; /* Ensures text underneath is still selectable */
  z-index: 200;
}
.active-overlay::after {
  opacity: 1 !important; /* Fully visible when active */
}