/* =========================================================
   BLOG SIDE BAR TYPOGRAPHY in WPBakery Blog Page / MSC Widget 3
   ========================================================= */

h2.wp-block-heading {
    font-size: 1.25rem !important; /* Dive Into Blog Headline On Blog Side Bar */
    line-height: 1.2;
    margin-bottom: 1.5625rem;
}
.intro-text-blog {
    font-size: 1rem; /* Intro after Dive Into Blog Headline On Blog Side Bar */ 
    line-height: 1.25rem;
}
.wp-block-search__label {
    font-weight: bold; /* Search Bar Label On Blog Side Bar */
    font-size: 0.875rem;
    color: #333;
}
.wp-block-categories-list {
    list-style: none; /* Cat List On Blog Side Bar */
    padding-left: 0;
}
.wp-block-categories-list .cat-item::before {
    content: "▸"; /* Right Triangle */
    color: #ee4d28; /* Adjust color if needed */
    font-size: 1.2em;
    font-weight: bold;
    margin-right: 0.5rem;
    display: inline-block;
}
.wp-block-categories-list .cat-item:hover::before {
    color: #333; /* change color on hover */
}
.wp-block-categories-list .cat-item {
    padding-left: 0.3125rem;
}
.blog-footer-widget-title {
    font-size: 1.25rem !important;
    line-height: 1.2;
    margin-top: 1.5625rem;
    margin-bottom: 1.5625rem;
}

/* =========================================================
   UTILITY BAR WIDGET HTML LAYOUT
   Custom flex and animation styles for top notice bar content. 
   This is not part of the theme. This is per MY site to style Raw HTML block in widget.
   ========================================================= */
   
/* Typing animation for notice text in left section */
.utilitybar .typing {
    display: inline-block;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    padding-top: 5px;
    animation: typing 3s steps(40, end) forwards;
}
@keyframes typing {
    from { width: 0; }
    to { width: 40ch; }
}

@media only screen and (max-width: 677px) {

    .utilitybar .typing {
        padding-top: 20px;
    }

}

/* =========================================================
   STORE NOTICE TEXT LIMIT (≤650px)
   Prevent notice text from wrapping on small screens.
   Text longer than 59 characters is truncated.
   ========================================================= */

@media (max-width: 650px) {

    p.demo_store,
    .woocommerce-store-notice,
    .woocommerce-store-notice.demo_store {
        position: relative;
        display: block;
        width: 100%;
        max-width: 100%;
        padding-right: 5.5rem; /* room for Dismiss */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
    }
	body.woocommerce-demo-store { /* Remove page offset below notice from max-width 782*/
		padding-top: 0;
	}
    .woocommerce-store-notice__dismiss-link,
    a.woocommerce-store-notice__dismiss-link {
        position: absolute;
        top: 50%;
        right: 0.75rem;
        transform: translateY(-50%);
        white-space: nowrap;
        z-index: 2;
    }

}

/* =========================================================
   WOOCOMMERCE ACCOUNT LINK AND MINI-CART IN UTILITY BAR
   Conditional from coding in header01.php, header02.php, header03.php.
   ========================================================= */
   
/* ==== UTILITY BAR ACCOUNT ICONS ==== */

.utilitybar .wc-block-mini-cart__button {
    padding-top: 0;
    padding-bottom: 0;
}
.utilitybar .left,
.utilitybar .right > i,
.utilitybar .right > strong {
    position: relative;
    top: 2px;
}