/****************************
 * Global style
*****************************/
/* Main sections */
.site-sticky {position:fixed; z-index:40; top:0; left:0; right:0;}
.site-header {position:relative; z-index:20;}
.site-content {position:relative; z-index:30;}
.site-footer {position:relative; z-index:10;}


body.page-template-default:not(.is-container-lg) .site-content .container {--px-container:1080px;}


/* Footer stick to bottom */
html, body {min-height:100vh;}
body {
    display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex;
    -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column;
    -webkit-box-pack:justify; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between;
}

/* Disables pull-to-refresh and overscroll glow effect.
Still keeps swipe navigations. */
body {
    overscroll-behavior-y:none;
}

/* Admin bar */
body.admin-bar [data-menu*="sticky"] {top:32px;}
@media screen and (max-width:782px) {
    html.has-admin-bar {margin-top:0 !important;}
    body.admin-bar [data-menu*="sticky"] {top:46px;}
}

/* Admin bar can cause conflict with Woocommerce Selector (select-2 dropdown) */
/* Move a little bit, equal with wp-admin bar height */
body.admin-bar .select2-container--open .select2-dropdown {margin-top:-32px;}


/****************************
 * Editor style
****************************/
p:empty {display:none;}

/* Button group */
p.px-button-group {display:flex; flex-wrap:wrap; gap:8px 11px;}
p[style*="text-align:center"].px-button-group,
p[style*="text-align: center"].px-button-group {justify-content:center;}

/* Force white text color */
.txt_color_white {
    --px-color-heading:var(--px-color-white);
    --px-color-permalink:var(--px-color-white);
    --px-color-permalink-highlight:var(--px-color-primary-highlight);
}

/* Text color */
.main_content .txt_color_primary {color:var(--px-color-primary); transition:var(--px-transition);}
.main_content .txt_color_primary:hover {color:var(--px-color-permalink-highlight);}

/* Text size */
.main_content .txt_16px {font-size:var(--px-size-16);}
.main_content .txt_size_large {font-size:var(--px-size-large); line-height:1;}

/* Text alignment */
.txt_inline_block {display:inline-block;}
.txt_right {text-align:right; display:block;}
.txt_center {text-align:center; display:block;}
.txt_italic {font-style:italic;}
.txt_center_justify {text-align:justify; -moz-text-align-last:center; text-align-last:center; display:block;}

/* permalink > word break to avoid horizontal scroll */
.wpb_text_column p a:not([class]) {word-wrap:break-word;}

/* Image */
.main_content .wpb_text_column img.size-full { /* width:100%; */}

/****************************
 * Spacing
****************************/
/* the last element in a text block will have no spacing */
.wpb_text_column :last-child {margin-bottom:0;}

/* Spacing: Custom */
.no-margin-bottom {margin-bottom:0 !important;}
.margin-bottom-default {margin-bottom:var(--px-spacing-default) !important;}
.margin-bottom-paragraph {margin-bottom:var(--px-spacing-paragraph) !important;}
.margin-bottom-heading {margin-bottom:var(--px-spacing-heading) !important;}
.margin-bottom-72px {margin-bottom:var(--px-spacing-72) !important;}
.margin-bottom-64px {margin-bottom:var(--px-spacing-64) !important;}
.margin-bottom-48px {margin-bottom:var(--px-spacing-48) !important;}
.margin-bottom-32px {margin-bottom:var(--px-spacing-32) !important;}
.margin-bottom-18px {margin-bottom:var(--px-spacing-18) !important;}
.margin-bottom-4px {margin-bottom:4px !important;}

.pt-default {padding-top:var(--px-spacing-default);}
.pt-heading {padding-top:var(--px-spacing-heading);}

.gap-20 {gap:20px;}

/****************************
 * Miscellaneous
****************************/
/* Visibility Classes */
.hidden-mobile, .hidden-tablet-v, .hidden-tablet-h, .hidden-touch-devices {display:block;}
.show-mobile, .show-tablet-v, .show-tablet-h, .show-touch-devices {display:none;}

/* Placeholder */
body ::-webkit-input-placeholder {font-family:inherit; font-weight:inherit; font-size:inherit; color:var(--px-color-placeholder); transition:var(--px-transition);}
body ::-moz-placeholder {font-family:inherit; font-weight:inherit; font-size:inherit; color:var(--px-color-placeholder); transition:var(--px-transition);}
body :-ms-input-placeholder {font-family:inherit; font-weight:inherit; font-size:inherit; color:var(--px-color-placeholder); transition:var(--px-transition);}
body :-moz-placeholder {font-family:inherit; font-weight:inherit; font-size:inherit; color:var(--px-color-placeholder); transition:var(--px-transition);}

/* Full width */
.px-full-width {margin-left:calc(-1 * var(--px-gap-side) - 0.5px); margin-right:calc(-1 * var(--px-gap-side));}

/* Background color */
.px-bg-gray {background-color:var(--px-color-gray);}
.px-bg-primary {background-color:var(--px-color-primary); color:var(--px-color-on-primary);}
.px-bg-black {background-color:var(--px-color-black); color:var(--px-color-white);}
.px-bg-black-200 {background-color:#222;}

/* A11y focus */
a:focus-visible,
button:focus-visible,
.a11y-focus:focus-visible {outline:2px solid var(--px-color-primary); border-radius:3px; transition:none;}

/* disabled focus visible */
.a11y-disable a:focus-visible,
.a11y-disable button:focus-visible,
.a11y-disable:focus-visible {outline:none; border-radius:0;}

/* focus visible inset */
.a11y-focus-inset, .a11y-focus-inset a, .a11y-focus-inset button {position:relative;}
.a11y-focus-inset:focus-visible,
.a11y-focus-inset a:focus-visible, .a11y-focus-inset button:focus-visible {outline:none;}
.a11y-focus-inset:focus-visible:after,
.a11y-focus-inset a:focus-visible:after, .a11y-focus-inset button:focus-visible:after {
    content:""; z-index:1; position:absolute;
    inset:0; pointer-events:none; border:2px solid var(--px-color-primary); border-radius:3px;
}

/* Select p if the next element is btn_primary */
.main_content p:has(+ p [class*="btn_primary"]) {--px-spacing-paragraph:var(--px-spacing-24);}

/* custom scrollbar */
/* Works on Chrome, Edge, and Safari */
body::-webkit-scrollbar,
.px-custom-scroll-bar::-webkit-scrollbar {width:var(--px-scroll-bar-width);}
body::-webkit-scrollbar-track,
.px-custom-scroll-bar::-webkit-scrollbar-track {background:var(--px-color-gray);}
body::-webkit-scrollbar-thumb,
.px-custom-scroll-bar::-webkit-scrollbar-thumb {background-color:var(--px-color-primary);}

/* Hover effect for image */
.px-hover-image {position:relative; overflow:hidden;}
.px-hover-image:before {
    content:"";
    position:absolute; inset:0; background:var(--px-color-black); z-index:1; pointer-events:none;
    opacity:0; transition:opacity 0.3s;
}
.px-hover-image img {transition:transform 0.3s;}
a.px-hover-image:hover:before, a:hover .px-hover-image:before,
.px-hover-image:hover:before {opacity:0.3;}
a.px-hover-image:hover img, a:hover .px-hover-image img,
.px-hover-image:hover img {transform:scale(1.05);}

.txt_underline_hover {position:relative; display:inline-block;}
.txt_underline_hover:after {content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--px-color-text); transition:var(--px-transition);}
.txt_underline_hover:hover:after {width:100%;}

/****************************
 * Sticky element
****************************/
body .px-sticky, body .px-sticky-desktop-only {}
body [class*="px-sticky"] {
    --offset:20px;
    --extra-offset:0px;

    position:sticky; left:0;
    top:calc(var(--extra-offset) + var(--offset));
    transition:var(--px-transition);
}
body.scroll-up [class*="px-sticky"] {--extra-offset:var(--px-header-height-sticky);}

body.admin-bar [class*="px-sticky"] {--extra-offset:32px;}
body.admin-bar.scroll-up [class*="px-sticky"] {--extra-offset:calc(var(--px-header-height-sticky) + 32px);}

/* follow breakpoint of VC */
@media only screen and (max-width:767px) {
    body .px-sticky-desktop-only {position:static; top:unset;}
}

/* iframe size */
iframe {max-width:100%;}
.wpb_raw_code iframe,
.wpb_text_column p iframe {width:100%; height:auto; aspect-ratio:16/9;}

/* Back to top */
.px-back-to-top {
    width:40px; position:fixed;
    bottom:10px; right:10px; border:1px solid rgba(255, 255, 255, 0.2);
    opacity:0; visibility:hidden;
}
.px-back-to-top button {background:var(--px-color-black); font-size:var(--px-size-14); color:#fff; height:100%;}
.px-back-to-top button:hover {background:var(--px-color-primary);}
.px-back-to-top button:hover i {color:var(--px-color-black);}

body.scroll-middle .px-back-to-top {opacity:1; visibility:visible;}

@media only screen and (max-width:768px) {
    .px-back-to-top {width:30px;}
}