/*
* Theme Name: IndSight Blog
* Theme Slug: indsight-blog
* Theme URI: https://nolimit.id
* Author: NoLimit Indonesia
* Author URI: https://nolimit.id
* Description: Exclusive and modern blog theme for IndSight.id
* Version: 1.0.0
* PLicense: GNU General Public License v3 or later
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: indisght-blog
* Tags: custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
* Requires at least: 5.0
* Tested up to: 6.8
* Requires PHP: 7.0
*/

/* @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'); */


:root {
    --text-prime: #1657ac;
    --text-prime-light: #247BA0;
    --text-prime-dark: #1D3461;
}

::placeholder { color:#ccc !important; }


body { font-family: 'Open Sans', sans-serif; font-size:17px; color:#313131; }


.container { max-width:1140px; }


/* * Elements * */
a { text-decoration:none; transition:all .2s ease-in-out; color:var(--text-prime); 
    &:hover { color:var(--text-prime); }
}
label > sup { color:red; }


article { font-size:1.1rem; 
    p { line-height:2rem; margin-bottom:2rem; }
    h1, h2, h3, h4, h5, h6 { line-height:2.5rem; margin-bottom:1.2rem; font-weight:bold; }
    h2 { font-size:1.8rem; }
    blockquote { border-left: 5px solid #f2f2f2; padding:20px 2rem; font-style:italic; background-color:#f8f8f8; margin-bottom:2rem; }
    ul, ol { margin-bottom:2rem;
        li { margin-bottom:.5rem; }
    }
    figure { margin-bottom:2rem; }
}


.btn.with-indicator { display:inline-block; min-width:calc(45% + 1em); padding-left:1em; padding-right:1em; }
.htmx-indicator { display:none; &.htmx-request { display:inline-block; } }




/** Owl Carousel **/
.owl-carousel {
    .owl-nav {
        > button[class^="owl-"] {
            aspect-ratio:1/1; width:2.4em; background:#fff; border-radius:50%; padding:0 1rem; margin:0 1rem; color:#000; font-size:1.5rem; font-weight:bold; text-align:center; position:absolute; top:50%; left:0; transform:translate(calc(-50% - 1.2rem), -50%); z-index:2; color:#111; text-align:center; box-shadow:0 0 10px rgba(1, 1, 1, .15);
        }
        button.owl-next { left:unset; right:0%; transform:translate(calc(50% + 1.2rem), -50%); }
    }
    .owl-dots { text-align:center; margin-top:1rem;
        .owl-dot { display:inline-block; width:12px; height:12px; background:#eee; border-radius:100%; margin:0 .3em; transition:all .2s ease-in-out; }
        .owl-dot.active { background:var(--text-prime); }
    }
    &.hide-nav-mobile {
        .owl-nav { 
            @media (max-width: 768px) { display:none; }
        }
    }
}




/** Header **/
.web-header { border-bottom:1px solid #eee;
    .logo { display:inline-block;
        img { width:auto; height:38px; display:inline-block; }
    }
}

.sf-menu {
    & > li { background:none; border:none; position:relative;
        a { background:none; color:#111;
            /* &:before { content:""; position:absolute; bottom:0; left:0; width:100%; height:1px; background:#111; z-index:-1; transition:all .2s ease-in-out; opacity:0; } */
        }
        &:hover { background:none;
            a { background:#f1f1f1; 
                /* &:before { opacity:1; } */
            }
        }
    }
}


/** WP Pagenavi **/
.wp-pagenavi { margin:2em 0; font-size:.9em;
    a, span { display:inline-block; padding:.5em .65em; background:#fff; margin-right:.3em; border-radius:3px; }
    a:hover { background:var(--text-prime); color:#fff; }
    .current { background:var(--text-prime); color:#fff; }
}


/** Footer **/
.web-footer { background:#111; color:#ffffffb3; 
    a { color:#ffffffb3; &:hover { color:#fff; } }
}


.hero-slider {
    .slide { position:relative; aspect-ratio: 16/9; overflow:hidden;
        .overlay { position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;
            &:before { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)); z-index:1; }
        }
        .slide-content { 
            position:absolute; z-index:2; padding:2rem 1rem; color:#fff; bottom:0; left:0; right:0; width:100%; height:auto; display:flex; flex-direction:column; justify-content:end;
            .slide-title { text-decoration:none; display:inline-block; margin-bottom:.7rem;
                * { color:#fff; }
            }
        }
    }
    @media all and (max-width: 769px) {
        .slide { aspect-ratio: 4/3; }
    }
}

@media all and (max-width: 768px) {
    .hero-slider .slide .slide-content { padding:1rem .5rem; }
    .hero-slider .slide .slide-content .slide-title { font-size:1.2rem; line-height:1.5rem; }
}



.page-wrapper {
    a:not(.btn) { color:var(--text-prime); &:hover { color:var(--text-prime-light); text-decoration:underline; } }
}


.post-thumb { position:relative; }

.frame-top { position:absolute; width:24%; top:0; left:50%; transform:translateX(-50%); z-index:2;}
.frame-bottom { position:absolute; width:100%; bottom:0; z-index:2; }



.article-title { line-height:3rem; }
.article-block { padding-left:4em; position:relative; }
.side-share { position:absolute; top:0; left:.5em; width:2.4em; height:100%; z-index:2;
    a { font-size:1.2em; margin-bottom:1em; }
}
.side-share__inner {  display:flex; flex-direction:column; align-items:start; padding:1em 0; }



@media (max-width: 768px) {
    .article-block { padding-left:0; position:relative; }
    .side-share { position:relative;
        a { font-size:1.5em; margin-bottom:.5em; padding-right:.5em; }
    }
    .side-share__inner { flex-direction:row; align-items:center; }
}



/** Section **/
.section-head { display:block; border-bottom:1px solid #eee; margin-bottom:1.2em; } 
.section-head__title { display:inline-block; font-size:1.5rem; font-weight:bold; border-bottom:1px solid #111; padding:.3em 0; margin:0; }



/** Cards **/
.card-title { font-size:1.1em; display:inline-block; margin-bottom:.3em; line-height:1.45em; &:hover { color:var(--text-prime-light); } }


/** Sidebar : Trending List **/
.trending-list__item { padding-left:55px; position:relative; margin-bottom:1em;
    .number { position:absolute; left:0; top:0; aspect-ratio:1/1; width:40px; border-radius:100%; background:#eee; display:flex; justify-content:center; align-items:center; margin-top:.15em; }
    .title { font-size:.9em; font-weight:bold; display:inline;
        span { display:inline-block; line-height:1.4em; margin-bottom:.2em; }
    }
    .date { font-size:.75em; }
}


/** Sidebar : Categories **/
.category-list { list-style:none; padding-left:0; }
.category-list__item { display:block; margin-bottom:.4em;
    a { display:flex; justify-content:space-between; align-items:center; width:100%; }
}

/** Sidebar : Tags **/
.tag-list a { font-size:.8em; }

/** Author Box **/
.author-avatar { width:90px; height:90px; 
    img { width:90px; height:90px; border-radius:100%; }
}

.mobile-menu {
    ul { list-style:none; 
        li { margin:0; padding:0; 
            a { display:block; padding:1em 0; color:#111; font-size:1.1em; font-weight:bold; text-decoration:none; transition:all .2s ease-in-out; &:hover { background:#f1f1f1; } }
        }
    }
}