/****************************
 * Global style
*****************************/
/* 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.vii-button-group {display:flex; flex-wrap:wrap; gap:8px 11px;}
p[style*="text-align:center"].vii-button-group,
p[style*="text-align: center"].vii-button-group {justify-content:center;}

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

/* Text color */
.main_content .txt_color_primary {color:var(--vii-color-primary);}

/* Text size */
/*.main_content .txt_16px {font-size:var(--vii-size-16);}*/

/* 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;}

/* limit line */
[class*="vii-max-lines-"] {display:-webkit-box;-webkit-box-orient:vertical; overflow:hidden;}
.vii-max-lines-2 {-webkit-line-clamp:2;}
.vii-max-lines-3 {-webkit-line-clamp:3;}
.vii-max-lines-4 {-webkit-line-clamp:4;}
.vii-max-lines-10 {-webkit-line-clamp:10;}
.vii-max-lines-15 {-webkit-line-clamp:15;}

/* button with text color white */
.txt_color_white [class*="btn_primary"] {--btn-border-color:var(--vii-color-white);}
.txt_color_white [class*="btn_primary"]:not([class*="_border"]) {
    --btn-bg-color:var(--vii-color-white); --btn-color:var(--vii-color-primary);
    --btn-bg-color-hover:rgba(0, 0, 0, 0); --btn-color-hover:var(--vii-color-white);
}
.txt_color_white [class*="btn_primary_border"] {
    --btn-color:var(--vii-color-white);
    --btn-bg-color-hover:var(--vii-color-white); --btn-color-hover:var(--vii-color-primary);
}

/* button load more */
.btn-load-more {
    width:48px; aspect-ratio:1;
    background:var(--vii-color-primary); color:var(--vii-color-on-primary); font-size:14px;
    box-shadow:inset 0 0 0 1px #000; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
}
.btn-load-more:hover, .btn-load-more:focus {background:rgba(0, 0, 0, 0); color:var(--vii-color-primary);}


/****************************
 * 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(--vii-spacing-default) !important;}
.margin-bottom-heading {margin-bottom:var(--vii-spacing-heading) !important;}
.margin-bottom-144px {margin-bottom:var(--vii-spacing-144) !important;}
.margin-bottom-120px {margin-bottom:var(--vii-spacing-120) !important;}
.margin-bottom-72px {margin-bottom:var(--vii-spacing-72) !important;}
.margin-bottom-20px {margin-bottom:var(--vii-spacing-20) !important;}
.margin-bottom-12px {margin-bottom:var(--vii-spacing-12) !important;}
.pt-12 {padding-top:12px;}

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


/****************************
 * 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(--vii-color-placeholder); transition:var(--vii-transition);}
body ::-moz-placeholder {font-family:inherit; font-weight:inherit; font-size:inherit; color:var(--vii-color-placeholder); transition:var(--vii-transition);}
body :-ms-input-placeholder {font-family:inherit; font-weight:inherit; font-size:inherit; color:var(--vii-color-placeholder); transition:var(--vii-transition);}
body :-moz-placeholder {font-family:inherit; font-weight:inherit; font-size:inherit; color:var(--vii-color-placeholder); transition:var(--vii-transition);}

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

/* Background color */
.vii-bg-gray {background-color:var(--vii-color-gray);}
.vii-bg-primary {background-color:var(--vii-color-primary); color:var(--vii-color-on-primary);}

/* A11y focus */
a:focus-visible,
button:focus-visible,
.a11y-focus:focus-visible {outline:2px solid var(--vii-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(--vii-color-primary); border-radius:3px;
}


/* custom scrollbar */
/* Works on Chrome, Edge, and Safari */
body::-webkit-scrollbar,
.vii-custom-scroll-bar::-webkit-scrollbar {width:var(--vii-scroll-bar-width);}
body::-webkit-scrollbar-track,
.vii-custom-scroll-bar::-webkit-scrollbar-track {
    background:#fff; border:1px solid rgba(0, 0, 0, .2);
}
body::-webkit-scrollbar-thumb,
.vii-custom-scroll-bar::-webkit-scrollbar-thumb {

    border:1px solid rgba(0, 0, 0, .2);
    background-color:var(--vii-color-primary);
}

/* custom scrollbar with radius */
.vii-custom-scroll-bar-with-radius::-webkit-scrollbar-thumb,
.vii-custom-scroll-bar-with-radius::-webkit-scrollbar-track {
    -webkit-border-radius:var(--vii-scroll-bar-width);
    border-radius:var(--vii-scroll-bar-width);
}


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


/****************************
 * Sticky element
****************************/
body .vii-sticky, body .vii-sticky-desktop-only {
    --offset:20px;
    --extra-offset:0px;

    position:sticky; left:0;
    top:calc(var(--extra-offset) + var(--offset));
    transition:var(--vii-transition);
}
body.scroll-up .vii-sticky,
body.scroll-up .vii-sticky-desktop-only {--extra-offset:var(--vii-header-height-sticky);}

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


/****************************
 * Gallery
****************************/
.wpb_text_column .gallery {display:flex; flex-wrap:wrap;margin:-6px !important;}
.wpb_text_column .gallery .gallery-item {
    display:block;
    margin-top:0 !important; padding:6px !important; float:unset !important;
}
.wpb_text_column .gallery .gallery-item > * {display:block; overflow:hidden; aspect-ratio:244/295;}
.wpb_text_column .gallery .gallery-item img {
    border:none !important; transition:transform .5s ease;
    width:100%; height:100%; object-fit:cover; object-position:center;
}
.wpb_text_column .gallery .gallery-item a:hover img {transform:scale(1.05)}


/*
 * Visually hidden
 * https://www.joshwcomeau.com/snippets/react-components/visually-hidden/
 */
.visually-hidden {
    position:absolute;
    overflow:hidden;
    clip:rect(0 0 0 0);
    width:1px; height:1px;
    margin:-1px; padding:0; border:0;
}

/* Override flex grid template */
.flex-grid-template {
    --grid-col:4;
}

/* accordion */
.vii-accordion > div {transform:translateZ(0);}

/* overwrite tailwind */
.txt_color_white .\!text-black {color:#fff !important;}

/* update container on large screen */
@media only screen and (min-width:1561px) {
    :root {
        --vii-container:80vw;
    }
    .container {max-width:var(--vii-container);}
}