/* =================================
   GLOBAL TUNING
   ================================= */
:root {
    --soft-shadow: 0 6px 18px rgba(0,0,0,.12);
    --hover-shadow: 0 10px 28px rgba(0,0,0,.18);
    --radius-sm: 6px;
    --radius-md: 10px;
    --transition-fast: 0.25s ease;
}

/* =================================
   MAIN NAVIGATION
   ================================= */
.main-navigation {
    box-shadow: 0 4px 14px rgba(0,0,0,.14);
    backdrop-filter: saturate(140%);
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.main-navigation:hover {
    box-shadow: var(--hover-shadow);
}

/* =================================
   SEARCH INPUT
   ================================= */
#wp-block-search__input-1 {
    border: none;
    background: transparent;
    padding: 10px;
    outline: none;
}

/* =================================
   STICKY SIDEBAR
   ================================= */
.auto-width.gb-query-loop-wrapper {
    flex: 1 1 auto;
}

@media (min-width: 768px) {
    .sticky-container,
    .sticky-container > .gb-inside-container {
        position: sticky;
        top: 80px;
        z-index: 20;
    }

    #right-sidebar .inside-right-sidebar {
        height: 100%;
    }
}

/* =================================
   CATEGORY DROPDOWN
   ================================= */
select#wp-block-categories-1 {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid #ddd;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

select#wp-block-categories-1:focus {
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0,115,170,.15);
}

/* =================================
   CATEGORY HEADLINE
   ================================= */
.inb-hp-heading {
    position: relative;
    text-align: center;
    z-index: 1;
}

.inb-hp-heading span {
    background: #fff;
    padding: 0 14px;
}

.inb-hp-heading::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    border-top: 2px solid #c9c9c9;
    z-index: -1;
}

/* =================================
   SOCIAL SHARING
   ================================= */
.bloggertips-social-wrapper {
    margin: 18px 0;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.wpjankari-social-sharing {
    padding: 12px;
    border-radius: var(--radius-md);
    text-align: center;
    font-weight: 600;
    box-shadow: var(--soft-shadow);
    transition: transform var(--transition-fast),
                box-shadow var(--transition-fast),
                filter var(--transition-fast);
}

.wpjankari-social-sharing:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--hover-shadow);
    filter: brightness(1.05);
}

.wpjankari-social-sharing svg {
    margin-right: 6px;
    vertical-align: middle;
}

/* =================================
   SOCIAL COLORS
   ================================= */
.wpjankari-social-facebook { background: #3b5998; fill: #fff; }
.wpjankari-social-twitter { background: #000; fill: #fff; }
.wpjankari-social-whatsapp { background: #25d366; fill: #fff; }
.wpjankari-social-telegram { background: #027ebd; fill: #fff; }
.wpjankari-social-more { background: #111; fill: #fff; }

/* =================================
   ATTENTION ANIMATIONS
   ================================= */
.whatsapphighlight {
    animation: greenGlow 1.4s infinite;
}

.telegramhighlight {
    animation: blueGlow 1.4s infinite;
}

@keyframes greenGlow {
    0% { box-shadow: 0 0 0 rgba(37,211,102,0); }
    50% { box-shadow: 0 0 14px rgba(37,211,102,.7); }
    100% { box-shadow: 0 0 0 rgba(37,211,102,0); }
}

@keyframes blueGlow {
    0% { box-shadow: 0 0 0 rgba(0,134,206,0); }
    50% { box-shadow: 0 0 14px rgba(0,134,206,.7); }
    100% { box-shadow: 0 0 0 rgba(0,134,206,0); }
}

/* =================================
   COMMENT BOX
   ================================= */
.comment-respond .comment-reply-title {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #1a365d, #244b8a);
    color: #fff !important;
    box-shadow: var(--soft-shadow);
}