/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
*/

/* ==========================================================================
   ROLAND WORKS
   PERSONAL SITE SYSTEM
   Version: 2026.05
   ========================================================================== */

/* --------------------------------------------------------------------------
   [01] TOKENS
   -------------------------------------------------------------------------- */

:root{
    --rw-color-light:#fafafa;
    --rw-color-dark:#1e1e1e;
    --rw-color-muted:rgba(30,30,30,.72);
    --rw-color-muted-dark:rgba(250,250,250,.72);
    --rw-color-purple:#6667ab;
    --rw-color-berry:#bb2649;
    --rw-color-accent:#e1523d;
    --rw-font:Inter,"Open Sans",sans-serif;
}

/* --------------------------------------------------------------------------
   [02] BASE
   -------------------------------------------------------------------------- */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:var(--rw-color-light);
    color:var(--rw-color-dark);
    font-family:var(--rw-font);
    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision;
}

body.dark-mode{
    background:var(--rw-color-dark);
    color:var(--rw-color-light);
}

p{
    color:var(--rw-color-muted);
}

body.dark-mode p{
    color:var(--rw-color-muted-dark);
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6{
    color:var(--rw-color-light);
}

/* --------------------------------------------------------------------------
   [03] TYPOGRAPHY
   -------------------------------------------------------------------------- */

h1{
    font-size:clamp(3.25rem,7vw,5rem);
    line-height:.98;
    font-weight:650;
    letter-spacing:-.03em;
}

h2{
    font-size:clamp(2.25rem,5vw,3rem);
    line-height:1.05;
    font-weight:650;
}

h3{
    font-size:clamp(1.25rem,2vw,1.5rem);
}

.centered-paragraph,
.left-aligned-paragraph,
.right-aligned-paragraph{
    font-size:clamp(1.125rem,2vw,1.3125rem);
    line-height:1.45;
}

/* --------------------------------------------------------------------------
   [04] GRADIENT
   -------------------------------------------------------------------------- */

.gradient-text{
    display:inline-block;
    background:linear-gradient(120deg,var(--rw-color-purple),var(--rw-color-berry));
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    line-height:1.15;
    padding-bottom:.08em;
}

/* --------------------------------------------------------------------------
   [05] TOGGLE
   -------------------------------------------------------------------------- */

.toggle-switch{
    position:relative;
    width:21px;
    height:21px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.toggle-switch input{
    position:absolute;
    opacity:0;
    width:100%;
    height:100%;
    z-index:2;
    cursor:pointer;
}

.toggle-switch label{
    position:absolute;
    inset:0;
    cursor:pointer;
}

.toggle-switch .slider{
    position:absolute;
    inset:0;
    background:transparent;
}

.toggle-switch .slider::before{
    content:"";
    position:absolute;
    inset:0;
    width:21px;
    height:21px;
    border-radius:50%;
    background:var(--rw-color-light);
    box-shadow:inset 5px -2px 0 var(--rw-color-dark);
    transition:.3s ease;
}

.toggle-switch input:checked + label .slider::before{
    transform:rotate(180deg);
    background:var(--rw-color-light);
    box-shadow:inset 0 0 0 2px var(--rw-color-dark);
}

body.dark-mode .toggle-switch .slider::before{
    background:var(--rw-color-dark);
    box-shadow:inset 5px -2px 0 var(--rw-color-light);
}

body.dark-mode .toggle-switch input:checked + label .slider::before{
    background:var(--rw-color-dark);
    box-shadow:inset 0 0 0 2px var(--rw-color-light);
}

/* --------------------------------------------------------------------------
   [06] ICONS
   -------------------------------------------------------------------------- */

.custom-up-icon .elementor-icon{
    color:var(--rw-color-dark);
}

body.dark-mode .custom-up-icon .elementor-icon{
    color:var(--rw-color-light);
}

.custom-up-icon .elementor-icon:hover{
    color:var(--rw-color-accent);
}

/* --------------------------------------------------------------------------
   [07] SOCIAL
   -------------------------------------------------------------------------- */

.custom-social-icons .elementor-social-icon{
    background:var(--rw-color-light);
}

.custom-social-icons .elementor-social-icon i{
    color:var(--rw-color-dark);
}

body.dark-mode .custom-social-icons .elementor-social-icon{
    background:var(--rw-color-dark);
}

body.dark-mode .custom-social-icons .elementor-social-icon i{
    color:var(--rw-color-light);
}

/* --------------------------------------------------------------------------
   [08] PARTICLES
   -------------------------------------------------------------------------- */

#particles-js{
    position:relative;
}

.particles-js-canvas-el{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
}

/* --------------------------------------------------------------------------
   [09] CONFETTI
   -------------------------------------------------------------------------- */

canvas#confetti{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:1000;
}

/* --------------------------------------------------------------------------
   [10] LOTTIE
   -------------------------------------------------------------------------- */

#lottie-island,
#lottie-astronaut{
position:absolute;
top:0;
left:0;
width:100%;
max-width:300px;
height:300px;
display:flex;
align-items:center;
justify-content:center;
margin:-14px 0;
z-index:1;
pointer-events:none;
}

#lottie-island svg,
#lottie-astronaut svg{
width:100%!important;
height:100%!important;
display:block;
}

body.dark-mode .lottie-animation{
filter:invert(1);
}

/* --------------------------------------------------------------------------
   [11] BUTTONS
   -------------------------------------------------------------------------- */

.case-study-button .elementor-button{
    border-radius:999px;
    box-shadow:0 4px 20px rgba(0,0,0,.08);
}

.case-study-button .elementor-button:hover{
    background:var(--rw-color-accent);
}

/* --------------------------------------------------------------------------
   [12] REDUCED MOTION
   -------------------------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){
    *{
        animation:none!important;
        transition:none!important;
    }
}

/* --------------------------------------------------------------------------
   [13] EXPANDED SECTIONS
   -------------------------------------------------------------------------- */

.rw-expanded-content{
	display:none;
	width:100%;
}

.rw-expanded-content.is-active{
	display:flex;
}

.rw-expanded-inner{
	width:100%;
	max-width:1200px;
	margin:0 auto;
}

#rw-expanded-body{
	width:100%;
}

.rw-expanded-close{
	position:sticky;
	top:24px;
	z-index:100;
	margin-bottom:32px;
	display:flex;
	justify-content:center;
	pointer-events:none;
}

.rw-expanded-close .elementor-button{
	border-radius:999px;
	backdrop-filter:blur(12px);
	-webkit-backdrop-filter:blur(12px);
	box-shadow:0 4px 20px rgba(0,0,0,.08);
}

.rw-expanded-close .elementor-button-wrapper{
	pointer-events:auto;
}

#rw-expanded-body .elementor-posts-container,
#rw-expanded-body .elementor-gallery__container{
	width:100%;
}

#rw-expanded-body img{
	max-width:100%;
	height:auto;
}

.rw-case-study-source,
.rw-gallery-source{
	display:none!important;
}

@media(max-width:767px){

	.rw-expanded-close{
		top:16px;
		margin-bottom:24px;
	}

}