/* =========================================================
   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.
   ========================================================= */

/* Internal flex container */
.utilitybar .container-topbar {
    display: flex;
    align-items: center; /* Vertical centering */
    justify-content: space-between;
    height: 2.8rem;
    max-height: 2.8rem;
    padding: 0 1rem;
    box-sizing: border-box;
}

/* Remove default widget spacing */
.utilitybar .container-topbar > * {
    margin-top: 0;
    margin-bottom: 0;
}

/* Left and right sections */
.utilitybar .left,
.utilitybar .right {
    display: flex;
    align-items: center;
    width: 50%;
    min-width: 0;
}

/* Right section (icons, links) */
.utilitybar .right {
    justify-content: flex-end;
    white-space: nowrap;
    gap: 0.75rem; /* 12px */
    font-size: 0.85rem;
}

/* Typing animation for notice text */
.utilitybar .typing {
    display: inline-block;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    animation: typing 3s steps(40, end) forwards;
}

@keyframes typing {
    from { width: 0; }
    to { width: 40ch; }
}

/* =========================================================
   RESPONSIVE BEHAVIOR: UTILITY BAR INTERNAL LAYOUT
   Flex structure for ContainerTopBar, Left, and Right regions
   ========================================================= */

@media (max-width: 768px) {
    .utilitybar .container-topbar {
        display: flex;
        flex-wrap: wrap;
        row-gap: 0.375rem; /* 6px */
        justify-content: center;
        padding: 0.75rem 1rem; /* 12px 16px */
        box-sizing: border-box;
        height: auto;
    }

    .utilitybar .left {
        flex: 1 1 100%;
        text-align: center;
        min-width: 0;
        overflow: hidden;
    }

    .utilitybar .right {
        flex: 1 1 100%;
        display: flex;
        justify-content: center;
        gap: 0.75rem; /* 12px */
        white-space: normal;
    }
}

/* =========================================================
   RESPONSIVE BEHAVIOR: UTILITY BAR STACKED MOBILE LAYOUT
   Mobile adjustments for narrower screens
   ========================================================= */

@media only screen and (max-width: 600px) {
    .utilitybar .container-topbar {
        display: block;
        text-align: center;
        padding: 0.5rem 0.75rem; /* 8px 12px */
        height: auto;
    }

    .utilitybar .left,
    .utilitybar .right {
        display: block;
        width: 100% !important;
        text-align: center;
        margin-bottom: 0.375rem; /* 6px */
    }

    .utilitybar .right a {
        display: inline-block;
        margin: 0.25rem 0.375rem; /* 4px 6px */
    }
}

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