/* Import Google Fonts - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');




:root {
    --prime-yellow: #F3C623; /* Deep Lemon */
    --prime-blue: #302B62; /* Deep Koamaru */
    --prime-dark-blue: #0F0C29; /* Deep Koamaru */
    --prime-blue-gradient: linear-gradient(to right, #0f0c29, #302b63, #24243e); /* Deep Koamaru Gradient */
    --prime-dark-gradient: linear-gradient(to right, #111, #2f2f2f, #111); /* Deep Koamaru Gradient */
}


/* * { outline:1px solid red; } */


/* Apply Inter font to the body */
body {
    font-family: 'Inter', sans-serif; color:#313e3f;
}

h1 { font-size:28px; font-weight:bold; }
h2 { font-size:24px; font-weight:bold; }
h3 { font-size:22px; font-weight:bold; }
h4 { font-size:20px; font-weight:bold; }
h5 { font-size:18px; font-weight:bold; }
h6 { font-size:16px; font-weight:bold; }

a { text-decoration:none; color:var(--prime-blue); transition:all 0.3s ease; &:hover { color:var(--prime-yellow); } }



/* Quotation/Blockquote Style */
blockquote { border-left:4px solid var(--prime-yellow); background:#faf8ee; color:#222; margin:2em 0; padding:1.25em 2em 1.25em 1.5em; font-style:italic; font-size:1.2em; position:relative; border-radius:0.375em; font-family:'Times New Roman', serif;
}
blockquote::before { content:"“"; font-size:3em; position:absolute; top:-0.5em; left:0px; color:var(--prime-yellow); opacity:0.3;
}
blockquote p, .wp-block-quote p { margin:0 !important; line-height:1.6; color:#333; }
blockquote cite { display:block; margin-top:1em; font-size:0.95em; color:var(--prime-blue); font-style:normal; font-weight:500; text-align:right; }


@media screen and (max-width: 768px) {
    .container { padding-left:1.5em; padding-right:1.5em; }
}


/** Owl Carousel **/
.owl-carousel .owl-dots { text-align:center;
    button.owl-dot { width:10px; height:10px; background:#aaa; border-radius:100%; margin:0 .25em; transition:all 0.3s ease; 
        &.active { background:var(--prime-yellow); }
    }
}


/** Breadcrumbs **/
.breadcrumb-wrapper { font-size:14px; }


.web-header { background:var(--prime-blue-gradient); min-height:54px; display:flex; align-items:center; position:fixed; width:100%; top:0; transition: top 0.3s; z-index:1021;
    .logo { display:inline-block;
        img { height:38px; padding:6px 0; width:auto; display:block; }
    }
    .right-side {
        a:not(.btn) { color:#fff;
            &:hover { color:var(--prime-yellow); }
        }
    }
}


.web-footer {
    background:var(--prime-dark-gradient); color:#eee;
    .footer-top { display:block; padding-top:4em; padding-bottom:3em; }
    .footer-bottom { display:block; 
        .copyr { border-top:1px solid #ffffff20; 
            small { opacity:.7; }
        }
    }
    a { color:#eee; &:hover { color:var(--prime-yellow); } }
}
.footer-logo { max-width:160px; }


.sf-menu { 
    li { border:0; background:none;
        a { color:#fff; border:0; background:none; padding-top:1.1em; padding-bottom:1.1em; transition:all 0.3s ease; }
        &:hover { color:var(--prime-yellow); background:none; 
            a { color:var(--prime-yellow); background:none; }
        }
        &.menu-item-has-children:hover { background:var(--prime-dark-blue); }
    }
    .sub-menu { background:var(--prime-dark-blue);
        li { background:none;
            a { color:#fff; background:none; &:hover { color:var(--prime-yellow); } }
        }
    }
}



/** Mobile Menu **/
.mobile-menu { background:var(--prime-dark-blue); color:#fff; }

.mmenu {
    ul { list-style:none; padding:0;
        li { 
            list-style:none; position:relative; padding:.125em 0; border-bottom:1px solid #ffffff20; 
            a { font-size:1.125em; color:#fff; padding:.45em 0; display:inline-block; }
            .sub-menu li { border-bottom:none; }
            .sub-menu, 
            .sub-menu li .submenu {
                transition:all ease-in-out .1s; height:0; opacity:0; font-size:.925em; position:relative; z-index:-1;
            }
            &.active .sub-menu,
            .sub-menu li.active .submenu {
                height:unset; opacity:1; padding-left:1em; z-index:1;
            }
            .mmtgr { position:absolute; top:.6em; right:1em; }
            .sub-menu i.bi { color:#fff; }
        }
    }
}


.page-wrapper { padding-top:54px; }


/** Article Area **/
.wp-block-heading { margin-top:1em; margin-bottom:1.5em; }
.wp-block-image { margin-bottom:2em; }

.post-content { position:relative;
    a:not(.btn) { color:var(--prime-blue); text-decoration:underline; transition:all 0.3s ease; &:hover { color:var(--prime-yellow); text-decoration:none; } }
    p { margin-bottom:1.5em; line-height:1.6; color:#333; }
    h2 { font-weight:bold; margin-bottom:.55em; margin-top:.25em; }
    .wp-block-image img { border-radius:.35em; }
    figcaption { font-size:13px; color:#555; margin-top:.5em; margin-bottom:1.5em; text-align:center; padding-left:1em; padding-right:1em; }
}
.main-content { padding-left:calc(150px + 1.5em); 

    h3 { margin-top:2em; margin-bottom:.45em; font-weight:bold; font-size:1.15em; }

}
.side-content { height:100%; }
.side-content__inner { width:150px;
    img { max-width:100%; }
}
.side-content { position:absolute; top:0; left:0; }

@media (max-width: 768px) {
    .main-content { padding-left:0; }
    .side-content { display:none; }
}

.author-avatar > img { border-radius:100%; }


.post-full-header { 
    background:var(--prime-dark-gradient); color:#fff; 
    a { color:#fff; &:hover { color:var(--prime-yellow); } }
    .breadcrumb-wrapper {
        li { color:#bbb;
            a { color:#fff; &:hover { color:var(--prime-yellow); } }
        }
        .breadcrumb-item::before { color:#555; }
    }
    .post-excerpt { color:#aaa; }
}


.post-related {
    .slide {
        a {
            h6 { font-weight:bold; }
            &:hover { h6 { color:var(--prime-yellow); } }
        }
    }
}



/** Sidebar : Trending List **/
.trending-list__item { padding-left:55px; position:relative; margin-bottom:1em;
    .number { position:absolute; left:0; top:6px; 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; }


/** Home Area **/
.home-hero__main { position:relative;
    .thumb {  aspect-ratio: 16 / 6; 
        img { object-fit:cover; object-position:center center; }
    }
    .cont { background:#fff; position:absolute; bottom:-3em; left:3em; padding:2em; width:70%; max-width:100%; 
        h2 a { font-size:1.3em; font-weight:bold; }
    }
}
.home-hero__list  { padding:3em 3em 2em 3em; background:var(--prime-dark-gradient); border-radius:0 0 0.375em 0.375em; }
.home-hero__item {
    a { color:#fff; &:hover { color:var(--prime-yellow); } }
}

@media screen and (max-width: 768px) {
    .home-hero__main .thumb { aspect-ratio: 16 / 9; }
    .home-hero__main .cont { position:relative; bottom:0; left:0; width:100%; }
    .home-hero__list { padding:2em; border-radius:0; }
}


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




/** AI Messages **/
.prompt-messages { background:url(images/AI-640x480.png) no-repeat center center; background-size:cover; height:100%; }