/*
=====================================================
RTH CORE TERMINAL
RESPONSIVE SYSTEM v2
MOBILE CONTROL LAYER
=====================================================
*/



/* =====================================
   TABLET
===================================== */


@media(max-width:900px){



.rth-hero {


padding:

60px 25px;


}



.rth-hero-title {


font-size:

48px;



letter-spacing:

4px;


}



.rth-hero-description {


font-size:

18px;


}



.rth-smart-panel {


width:

100%;


}



.rth-module {


margin-bottom:

20px;


}


}




/* =====================================
   MOBILE NAV RESET
===================================== */


@media(max-width:768px){



#site-navigation {


display:none!important;


}



body {


padding-top:

0!important;


}



/* =====================================
   MOBILE TRIGGER
===================================== */


.rth-mobile-trigger {


display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:5px;



position:fixed;



top:

calc(16px + env(safe-area-inset-top, 0px));



right:

18px;



z-index:

200002;



width:

48px;



height:

48px;



padding:0;



border-radius:


14px;



background:

linear-gradient(
135deg,
rgba(255,255,255,.16),
rgba(15,23,42,.62)
);



border:


1px solid rgba(255,255,255,.22);



backdrop-filter:


blur(16px);


-webkit-backdrop-filter:

blur(16px);



box-shadow:

0 15px 40px rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.15);



cursor:pointer;


transition:

border-color .3s ease,
box-shadow .3s ease;


}


.rth-mobile-trigger:active {

transform:
scale(.96);

}


.rth-mobile-trigger span {


display:block;

width:20px;

height:2px;

border-radius:2px;

background:white;

transition:

transform .35s var(--rth-ease),
opacity .2s ease;

}


/* morph the three bars into an X while the drawer is open */

.rth-mobile-trigger.active span:nth-child(1) {

transform:
translateY(7px)
rotate(45deg);

}


.rth-mobile-trigger.active span:nth-child(2) {

opacity:0;

}


.rth-mobile-trigger.active span:nth-child(3) {

transform:
translateY(-7px)
rotate(-45deg);

}



/* =====================================
   MOBILE BACKDROP
===================================== */


.rth-mobile-backdrop {


display:block;


position:fixed;


inset:0;


background:

rgba(2,6,15,.55);


backdrop-filter:

blur(2px);


opacity:0;


pointer-events:none;


transition:

opacity .35s ease;


z-index:

199999;


}


.rth-mobile-backdrop.active {


opacity:1;


pointer-events:auto;


}


/* prevent background scroll while the drawer is open */

body.rth-noscroll {

overflow:hidden;

}




/* =====================================
   MOBILE DRAWER
===================================== */


.rth-mobile-drawer {


display:block;



position:fixed;



top:

0;



left:

0;



width:


300px;



height:


100vh;



background:


rgba(10,15,25,.94);



backdrop-filter:


blur(25px);



-webkit-backdrop-filter:


blur(25px);



transform:


translateX(-100%);



transition:


transform .45s var(--rth-ease);



z-index:


200001;



border-right:


1px solid rgba(255,255,255,.1);


}




.rth-mobile-drawer.active {


transform:


translateX(0);


}



.rth-mobile-drawer-brand {

position:absolute;

top:calc(20px + env(safe-area-inset-top, 0px));

left:28px;

display:flex;

align-items:center;

gap:8px;

font-size:11px;

letter-spacing:.2em;

text-transform:uppercase;

color:rgba(255,255,255,.5);

}


.rth-mobile-drawer-brand::before {

content:"";

width:7px;

height:7px;

border-radius:50%;

background:var(--rth-accent);

box-shadow:0 0 10px var(--rth-accent);

}


.rth-mobile-drawer-close {

position:absolute;

top:calc(14px + env(safe-area-inset-top, 0px));

right:18px;

width:38px;

height:38px;

display:flex;

align-items:center;

justify-content:center;

border-radius:10px;

background:rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.16);

color:white;

font-size:22px;

line-height:1;

cursor:pointer;

}


.rth-mobile-drawer .current-menu-item > a,
.rth-mobile-drawer a.current-menu-item,
.rth-mobile-drawer .current_page_item > a,
.rth-mobile-drawer .current-menu-ancestor > a {

color:var(--rth-accent);

}




.rth-mobile-drawer-inner {


padding:


120px 35px;



display:flex;



flex-direction:column;



gap:


4px;

}




.rth-mobile-drawer-inner nav {

display:flex;

flex-direction:column;

}




.rth-mobile-drawer-inner nav > li {

list-style:none;

border-bottom:1px solid rgba(255,255,255,.08);

opacity:0;

transform:translateX(-16px);

transition:
opacity .4s var(--rth-ease),
transform .4s var(--rth-ease);

}




.rth-mobile-drawer-inner nav > li:last-child {

border-bottom:none;

}




.rth-mobile-drawer.active .rth-mobile-drawer-inner nav > li {

opacity:1;

transform:translateX(0);

}




.rth-mobile-drawer-inner nav > li:nth-child(1) { transition-delay:.06s; }
.rth-mobile-drawer-inner nav > li:nth-child(2) { transition-delay:.11s; }
.rth-mobile-drawer-inner nav > li:nth-child(3) { transition-delay:.16s; }
.rth-mobile-drawer-inner nav > li:nth-child(4) { transition-delay:.21s; }
.rth-mobile-drawer-inner nav > li:nth-child(5) { transition-delay:.26s; }
.rth-mobile-drawer-inner nav > li:nth-child(6) { transition-delay:.31s; }




.rth-mobile-drawer a {


position:relative;


display:block;


padding:14px 4px 14px 16px;



color:


white;



text-decoration:none;



font-size:


18px;



letter-spacing:


.04em;



transition:
opacity .25s ease,
color .25s ease;

}




.rth-mobile-drawer a::before {

content:"";

position:absolute;

left:0;

top:50%;

transform:translateY(-50%);

width:4px;

height:4px;

border-radius:50%;

background:rgba(255,255,255,.25);

transition:
background .25s ease,
box-shadow .25s ease;

}




.rth-mobile-drawer .current-menu-item > a::before,
.rth-mobile-drawer .current_page_item > a::before,
.rth-mobile-drawer .current-menu-ancestor > a::before {

background:var(--rth-accent);

box-shadow:0 0 10px var(--rth-accent);

}




.rth-mobile-drawer a:hover {


opacity:


.7;

}




/* =====================================
   TYPOGRAPHY
===================================== */


h1 {


font-size:


36px;


}



h2 {


font-size:


28px;


}



.rth-action-panel {


padding:


28px;


}




/* =====================================
   RECEPTION MOBILE
===================================== */


.rth-smart-wrapper {


padding:


20px;


}



.rth-smart-panel {


padding:


35px 25px;



border-radius:


20px;


}



.rth-smart-content h2 {


font-size:


28px;


}



.rth-smart-question {


font-size:


20px;


}



.rth-smart-navigation {


gap:


15px;


}




/* =====================================
   FORMS MOBILE
===================================== */


input,
textarea,
select {


font-size:


16px;


}



/* =====================================
   BUTTONS MOBILE
===================================== */


.rth-button,
.wp-element-button,
button {


width:


auto;


max-width:


100%;


}




}



/* =====================================
   SMALL MOBILE
===================================== */


@media(max-width:480px){



.rth-mobile-drawer {


width:


260px;


}



.rth-smart-panel {


padding:


30px 20px;


}



.rth-action-title {


font-size:


26px;


}



}