/*
Theme Name: Kitarack
Theme URI: https://rubahbesi.com
Author: Kitarack
Author URI: https://wordpress.org
Description: Exclusive WordPress theme for Kitarack.
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.0
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kitarack
Tags: wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news, company profile
*/


@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

:root {
    --color-black: #000;
    --color-darker: #17181c;
    --color-gray: #7f7f7f;
    --color-orange: #F96F27;
    --color-orange-darker: #F96F27ee;

    --color-primary: var(--color-orange);
    --color-primary-active: var(--color-orange-darker);

    --text-font-size: 17px;
    --text-font-family: 'Nunito', sans-serif;
    --heading-font-family: 'Rubik', sans-serif;
}


body { background-color:var(--color-black); color:#fff; font-size:var(--text-font-size); font-family: var(--text-font-family); font-weight:lighter; }
.site { min-height:100vh; width:100%; overflow-x:hidden; }


/** ELEMENTS **/
h1, h2, h3, h4, h5 { font-family:var(--heading-font-family); }
h1, h2 { font-size:3em; }
a { text-decoration:none; color:var(--color-orange); transition:color .2s ease; }
strong { font-weight:700; }
small { font-size:.8em; }

details { 
    summary { cursor:pointer; list-style-type:none; }
    & > *:not(summary) { max-height:0; opacity:0; overflow:hidden; transition:all 0.4s ease; display:inline-block !important; }
    &[open] > *:not(summary) { max-height:500px; opacity:1; }
}

.btn.btn-primary { background:var(--color-primary); border-color:var(--color-primary); color:#fff; 
    &:hover, &:focus, &:not(.btn-check) + &:active { background-color:var(--color-primary); border-color:var(--color-primary-active); color:#fff; }
}
.btn.btn-outline-primary { border-color:var(--color-primary) !important; color:#fff; font-weight:normal;
    &:hover, &:focus, &:not(.btn-check) + .btn:active { background-color:var(--color-primary-active); border-color:var(--color-primary); color:#fff; }
}
.border-primary { border-color:var(--color-primary) !important; }
.text-primary { color:var(--color-primary) !important; }

.link-light-hover { a { color:#fff; &:hover { color:var(--color-primary); } } }

.wp-block-embed__wrapper {
    iframe { aspect-ratio:16 / 9; width:100%; height:auto; }
}

/* Special class for 5 columns Bootstrap */
@media (min-width:768px) {  
    .col-md-24 { flex:0 0 auto; width:20%; }
    .offset-md-24 { margin-left:20%; }
    .offset-md-36 { margin-left:30%; }
}


/**  HEADER  **/
#header { background:linear-gradient(to top, transparent 0%, var(--color-black) 100%); position:fixed; width:100%; z-index:1000; }

#search-btn { background-color:var(--color-orange); color:#fff; padding:1em 1em; padding-right:2.3em; }

/***  LOGO  **/
@media only screen and (max-width: 768px) {
    .brand-logo {
        img { max-height:30px; }
    }
}

/**  SUPERFISH  **/
.sf-menu {
    li { background:none;
        &:hover { background-color:var(--color-darker); 
            > a { color:var(--color-primary); }
        }
        &.current-menu-item > a { color:var(--color-primary); font-weight:bold; }
        &.current-page-ancestor > a { color:var(--color-primary); }
        a { border:none; color:#fff; padding:1em 1em; }
        ul { background-color:var(--color-darker);
            li { background-color:var(--color-darker); 
                &:hover { background-color:var(--color-darker) }
                a { padding:0.8em 1em; font-size:17px; }
            }
        }
    }
}


/***  Mobile Menu  ***/
#mobile-menu-btn { background-color: var(--color-orange); color: #fff; padding: 1em 1em; }

.mobile-menu { position:fixed; width:100%; height:100%; background:var(--color-black); z-index:100; transition:all ease-in-out 0.1s; overflow:hidden; opacity:0; z-index: -1;
    ul { margin:0; padding:0.75rem;
        li { list-style:none; margin:0; padding:0.25rem; overflow:hidden; position:relative; border-bottom:1px solid var(--color-darker);
            &.menu-item-has-children .sub-menu { height:0; position:absolute; opacity:0; left:-100vw; transition:all ease-out .2s; z-index:-100; overflow:hidden; padding-right:0;
                li { display:none; border:none; }
                &.active { z-index:10; height:auto; left:0; opacity:1; position:relative;
                    li { display:block; }
                }
            }
            a { padding:0.5rem 0.35rem; display:inline-block; }
        }
    }
    &.active { height:100vh; opacity:1; z-index:100; }
    .arrow-up::before,
    .arrow-down::before { content:"\F235"; font-family:'bootstrap-icons'; font-size:1rem; height:3rem; width:2rem; position:absolute; top:0; right:0; background:none; border-radius:100rem; display:flex; align-items:center; justify-content:center; text-align:center; opacity:0.6; }
    .arrow-down::before { content:"\F229"; }
}

@media only screen and (max-width: 768px) {
    #mobile-menu-btn { padding:.4em 1em; }
}


/***  FAQ - Dropdown ***/
.details-wrapper { margin-top:.5em;
    .details-group { display:none; }
    .details-group.active { display:block; }
}

.details-wrapper details { margin-bottom:1em;
    summary { padding-left:1.5em; position:relative; 
        &::before { content:"\f4fe"; /* plus icon */ position:absolute; top:-.2em; left:-.1em; font-family:'bootstrap-icons'; font-size:1.5em; color:var(--color-orange); }
        & + div { padding:.5em .5em .5em 1.5em; }
    }
}
.details-wrapper details[open] summary::before { content:"\f2ea"; /* dash icon */ }


/*** PAGINATION ***/
.wp-pagenavi { display:flex; flex-wrap:wrap; justify-content:center; margin:2em 1em;
    & .current, .page { display:flex; width:30px; aspect-ratio:1/1; background:#fff; justify-content:center; align-items:center; text-align:center; margin:0 2px; border-radius:100%; font-size:14px; line-height:1; color:var(--color-black); transition:all ease-in-out 0.2s; }
    & .current { background-color:var(--color-orange); color:#fff; }
    & .page:hover { background-color:var(--color-orange); color:#fff; }
    & .previouspostslink, .nextpostslink { color:#fff; font-size:20px; font-weight:bold; margin:0 10px; transition:color ease-in 0.2s; 
        & :hover { color:var(--color-orange); }
    }
}

.slider-cust-nav {
    a { display:flex; width:30px; aspect-ratio:1/1; background:#fff; justify-content:center; align-items:center; text-align:center; margin:0 2px; border-radius:100%; font-size:14px; line-height:1; color:var(--color-black); transition:all ease-in-out 0.2s; border:none;
        &:hover, &.active { background-color:var(--color-primary); color:#fff; }
    }
    button { color:#fff; font-size:20px; font-weight:bold; }
}


.owl-carousel {
    .owl-nav {
        [class*=owl-] { position:absolute; top:calc(50% - 30px); z-index:2; left:1em; height:40px; width:40px; text-align:center; }
        .owl-next { left:unset; right:1em; }
    }
}


/**  FOOTER  **/
.footer { border-top:2px solid var(--color-orange); 
    .left-box img { max-width:150px; }
    .copyr { color:#fff; background-color:var(--color-orange); font-size:.8em; }
}

.socmed { list-style:none; margin:1em 0; padding:0; text-align:right; 
    li { display:inline-block; padding:.2em; 
        a { color:#fff; font-size:1.3em; }
    }
}


/** Search Modal **/
.search-modal { background-color:#111; position:fixed; top:0; left:0; right:0; bottom:0; z-index:-1; height:100%; width:100%; opacity:0; transition:all ease 0.1s;
    input {
        &:focus { color:var(--color-darker); }
    }
    [type=submit] { position:absolute; top:0; right:0; padding:1rem; border:0; height:56px; line-height:0; background:none; opacity:0.7; z-index:50;
        &:hover { opacity:1; }
    }
    &.active, &.show { opacity:1; z-index:9999; }
    .close-search { position:absolute; top:5px; right:5px; height:48px; aspect-ratio:1/1; line-height:0; border:none; border-radius:100%; }
}


/**  MAIN PAGE  **/
.page-wrapper { position:relative;
    .page-cont { position:relative; z-index:2; 
        & > .sect-block:first-child { padding-top:6em !important; }
    }
}

.page-header { margin-bottom:2em;
    span.prime { color:var(--color-orange); }
}
.cont-wrapper-border { border:1px solid var(--color-primary); }

.orn-layers { position:absolute; height:100%; width:100%; top:0; left:0; z-index:-1;
    .orn-layer-1 { position:absolute; top:0; left:0; }
    .orn-layer-2 { position:absolute; bottom:0; right:0; }
    & [class^="orn-layer-"] { max-width:20%; }
}

.single-post {
    .page-content {
        p { margin-bottom:1.75em; }
        h2 { font-size:1.2em;}
    }
}

/* Full Viewport */
.fvp { display:flex; min-height:100vh; width:100%; }
.sect-block { display:flex; justify-content:center; align-items:center; position:relative; width:100%; min-height:75svh; padding:4em 0 1em 0; background-size:cover; background-repeat:no-repeat; background-position:top center;
    .inner { z-index:5; position:relative; width:100%; }
    .orn.top-0 > img { max-width:130px; padding-top:100px; }
    .orn.bottom-0 > img { max-width:230px; }
}
.sect-block.top-minus { padding-top:0 !important; }







/** STRENGTH PAGE **/
.str-card { border:2px solid var(--color-orange); border-radius:2em; margin-top:calc(50% + 1em); background-color:var(--color-black); min-height:460px;
    .str-card-thumb { aspect-ratio:1/1; display:block; position:relative; width:100%; margin-top:-50%; padding:0 25px;  background:none;
        & > img { width:100%; height:100%; object-fit:contain; }
    }
    .str-card-title { text-align:center; padding:0 1em 1em 1em; color:var(--color-orange); }
    .str-card-body { padding:0 2em 2em 2em; font-weight:normal; 
        small { font-weight:lighter; color:#ededed; }
    }
}


/** CONTACT PAGE **/
.address-section { border-top:2px solid var(--color-orange); padding:2em 0; font-size:.9em; background-color:var(--color-black);
    h4 { color:var(--color-orange); }
    h4 + strong { font-size:1.2em; }
}

.contact-block { position:relative; padding-left:3.2em; margin-bottom:1em;
    .bi { position:absolute; top:25%; left:1em; color:var(--color-orange);
        &::after { content:""; border-radius:100%; border:1px solid var(--color-orange); height:2em; width:2em; position:absolute; top:-.3em; left:-.5em }
    }
    a { color:#fff; &:hover { color:var(--color-orange); } }
}


/*** POST CARD ***/
.post-card { background:#fff; border-radius:1em; color:var(--color-darker); overflow:hidden; height:100%;
    .thumb { width:100%; aspect-ratio:3 / 1; background-color:#efefef; margin-bottom:20px; border-radius:1em 1em 0 0;
        img { object-fit:contain; }
    }
}


/*** PRODUCTS ***/
.product-card { border-radius:1.7em; background:#fff;
    .product-card__thumb { aspect-ratio:1/1; display:block; width:100%; border-radius:1.7em 1.7em 0 0; overflow:hidden;
        img { object-fit:cover; }
    }
    .product-card__body { background-color:#fff; border-radius:0 0 1.7em 1.7em; overflow:hidden; color:var(--color-darker); }
    .product-card__title {
        a { color:var(--color-darker);
            &:hover { color:var(--color-primary); }
        }
    }
    .product-card__cat {
        a { color:var(--color-gray); font-weight:normal;
            &:hover { color:var(--color-primary); }
        }
    }
    .product-card__feat {
        ul { list-style:none; padding:0; margin:10px 0 0 0; display:grid; grid-template-columns: repeat(2, 1fr); gap:.2px;
            li { font-size:10px; margin:3px 0; padding:0 5px 0 30px; line-height:1.1em; position:relative; height:27px;
                .icon { position:absolute; height:25px; width:25px; background-color:#f9f9f9; top:0; left:0; border-radius:4px; }
            }
        }
    }
}

@media screen and (max-width:768px) {
    .product-card .product-card__feat ul { grid-template-columns:repeat(1, 1fr); }
}

.products-filter { margin:20px 0;
    details { margin-bottom:5px;
        summary { background:#fff; border-radius:6px; text-transform:uppercase; font-weight:bold; color:var(--color-darker); padding:6px 40px 6px 10px; margin-bottom:6px; line-height:1em;  position:relative;
            &::before { content:''; height:100%; width:3px; position:absolute; background:var(--color-primary); top:0; left:-8px; border-radius:0 3px 3px 0; }
            &::after { content:'+'; height:100%; color:var(--color-primary); font-size:1.8em; position:absolute; top:-2px; right:10px; line-height:0; display:flex; align-items:center; }
        }
        ul { padding:0; margin:0; width:100%;
            li { list-style-type:none; padding:2px; margin:0; width:100%; position:relative;
                label { display:flex; justify-content:space-between; width:100%; }
            }
        }

        &[open] summary::after { content:'–'; }
    }
}

.best-seller { position:relative;
    &::after { content:'Best Seller'; position:absolute; top:-1.5em; right:0; color:#fff; padding:5px 10px; font-size:1.8em; text-transform:uppercase; font-weight:bold; line-height:1em; }
}

.icon-tokopedia {
  background: url('images/tokpeed.svg') no-repeat center;
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  vertical-align: middle;
}

.icon-shopee {
  background: url('images/shopee.svg') no-repeat center;
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  vertical-align: middle;
}



/*** GALLERY ***/
.gallery-item {
    .thumb { 
        img { z-index:1; position:relative; }
        .hovered { position:absolute; height:100%; width:100%; background-color:#00000000; color:#fff; display:flex; justify-content:center; align-items:center; z-index:5; font-size:2em; line-height:1em; transition:background-color ease-in-out 0.1s; top:0; left:0;
            > .bi { opacity:0; transition:opacity ease-in-out 0.2s; }
        }
        &:hover {
            .hovered { background-color:#00000090; 
            > .bi { opacity:1; }
            }
        }
    }
}


/*** CLIENTS ***/
.hexagon { background:url(images/hexagon.png) no-repeat center center / contain; padding:5px; }