/*
 Theme Name:   Rupcharcha
 Template:     generatepress
 Version:      1.3
*/

/* ==========================================================================
   1. Global Variables & Base Styles
   ========================================================================== */

:root {
    /* Spacing & Sizing */
    --header-sticky-height: 80px; /* Adjust to match your sticky header's height */

    /* Borders & Shadows */
    --border-radius-main: 5px;
    --box-shadow-light: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    --box-shadow-subtle: rgba(0, 0, 0, 0.16) 0px 1px 4px;

    /* Brand Colors */
    --brand-facebook: #3b5998;
    --brand-twitter: #000000;
    --brand-whatsapp: #25d366;
    --brand-telegram: #0088cc;
    --brand-more: #555555;
}

/* ==========================================================================
   2. Layout & Navigation
   ========================================================================== */

/* Add a subtle shadow to the main navigation bar */
.main-navigation {
    box-shadow: var(--box-shadow-subtle);
}

/* Make main content area expand when next to a sidebar */
.auto-width.gb-query-loop-wrapper {
    flex: 1;
}

/* ==========================================================================
   3. Typography & Headings
   ========================================================================== */

/* Style for headings with a decorative line through the middle */
.inb-hp-heading:before,
.inb-home-heading:before {
    content: "";
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: -1;
}

.inb-hp-heading:before {
    border-top: 2px solid var(--text-1);
}

.inb-home-heading:before {
    border-top: 1px solid var(--border-color);
}

/* Post Meta (Date, Author etc.) */
.post-dates {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-1);
}


/* ==========================================================================
   4. Sidebars & Widgets
   ========================================================================== */

/* --- Sticky Sidebar --- */
@media (min-width: 769px) {
    #right-sidebar .inside-right-sidebar {
        height: 100%; /* Ensure container has height for stickiness */
    }

    /* The 'top' value should match your sticky header's height */
    .sticky-container > .gb-inside-container,
    .sticky-container {
        position: -webkit-sticky; /* For Safari */
        position: sticky;
        top: var(--header-sticky-height, 80px);
    }
}

/* --- Widgets --- */

/* Full-width category dropdown widget */
select#wp-block-categories-1 {
    width: 100%;
}

/* Tag Cloud Widget Styling */
.widget_epcl_tag_cloud a,
.widget_tag_cloud a,
.wp-block-tag-cloud a,
div.tags a {
    display: inline-block;
    color: #333;
    background: #fff;
    border: 1px solid #333;
    border-radius: 25px;
    padding: 5px 15px;
    margin: 0 8px 8px 0;
    line-height: 1.3;
    font-size: 13px !important; /* Overriding default styles */
    transition: all 0.2s ease-in-out;
}

.widget_epcl_tag_cloud a:hover,
.widget_tag_cloud a:hover,
.wp-block-tag-cloud a:hover,
div.tags a:hover {
    background: #333;
    color: #fff;
    border-color: #333;
}


/* ==========================================================================
   5. Media & Ads
   ========================================================================== */

/* Margin for banner ad containers */
.wplite-banner-ads {
    margin-bottom: 20px;
}

/* Default WP Image Margins */
.size-auto, .size-full, .size-large, .size-medium, .size-thumbnail {
    margin-bottom: 20px;
}

/* Images inside GenerateBlocks Containers */
.gb-container .wp-block-image img {
    border-radius: var(--border-radius-main);
    margin-bottom: 5px;
}


/* ==========================================================================
   6. Plugin-Specific Styles
   ========================================================================== */

/* --- Rank Math SEO Breadcrumbs --- */
.rank-math-breadcrumb p {
    background: #f1f1f1;
    color: #000000;
    padding: 8px 12px;
    border-radius: var(--border-radius-main);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 25px;
}

/* --- Table of Contents --- */
#toc_container {
    background: #f9f9f9;
    border: 1px solid #ddd;
    padding: 0px;
    margin-bottom: 25px;
}

#toc_container span.toc_toggle {
    font-weight: 700;
    background: #f1f1f1;
    padding: 10px 20px;
    font-size: 18px;
    text-transform: capitalize;
    text-align: left;
    display: block;
    cursor: pointer;
}

#toc_container li a {
    display: block;
    width: 100%;
    color: var(--link-text);
    padding: 10px 1.5em;
    border-top: 1px solid #e5e5e5;
    transition: background-color 0.2s ease;
}

#toc_container li a:hover {
    background-color: #efefef;
}


/* ==========================================================================
   7. Social Sharing & Icons
   ========================================================================== */

/* --- Custom Inline Social Share Buttons --- */
.wpjankari-social-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Modern way to space flex items */
    margin: 20px 0;
}

.wpjankari-social-sharing {
    flex: 1; /* Allows items to grow and fill space */
    padding: 10px;
    border-radius: var(--border-radius-main);
    text-align: center;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.wpjankari-social-sharing:hover {
    transform: translateY(-4px);
    box-shadow: var(--box-shadow-light);
}

.wpjankari-social-sharing svg {
    display: inline-block;
    vertical-align: middle;
}

/* Social Network Colors */
.wpjankari-social-facebook {
    fill: #fff;
    background-color: var(--brand-facebook);
}
.wpjankari-social-twitter {
    fill: #fff;
    background-color: var(--brand-twitter);
}
.wpjankari-social-whatsapp {
    fill: #fff;
    background-color: var(--brand-whatsapp);
}
.wpjankari-social-telegram {
    fill: #fff;
    background-color: var(--brand-telegram);
}
.wpjankari-social-more {
    fill: #fff;
    background-color: var(--brand-more);
}

/* --- Sticky Social Icons --- */
.sticky-social-icons {
    position: fixed !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%); /* Better vertical centering */
    z-index: 1000;
}


/* ==========================================================================
   8. Animations & Highlights
   ========================================================================== */

.whatsapphighlight, .telegramhighlight {
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    border-width: 2px; /* Border needs a width to be visible */
    border-style: solid;
}

.whatsapphighlight {
    animation-name: WPLiteTheme-GreenBorderAnimation;
}

.telegramhighlight {
    animation-name: WPLiteTheme-BlueBorderAnimation;
}

@keyframes WPLiteTheme-GreenBorderAnimation {
    0%   { border-color: transparent; }
    50%  { border-color: var(--brand-whatsapp); }
    100% { border-color: transparent; }
}

@keyframes WPLiteTheme-BlueBorderAnimation {
    0%   { border-color: transparent; }
    50%  { border-color: var(--brand-telegram); }
    100% { border-color: transparent; }
}


/* ==========================================================================
   9. Mobile & Responsive Styles
   ========================================================================== */

/* --- Sticky Footer Menu (Mobile Only) --- */
.sticky-footer-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #fff; /* Ensure it has a background */
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    z-index: 99999;
}

/* Hide Sticky Footer on Desktop */
@media (min-width: 961px) {
    .sticky-footer-menu {
        display: none !important;
    }
}

/* Tablet and smaller screens */
@media (max-width: 768px) {
    /* Adjust breadcrumb margins on mobile */
    .rank-math-breadcrumb p {
        margin-left: 15px;
        margin-right: 15px;
    }
}

/* Small mobile screens */
@media (max-width: 600px) {
    /* Make social share buttons stack in a two-column grid */
    .wpjankari-social-sharing {
        flex-basis: calc(50% - 5px); /* 50% width minus half the gap */
        flex-grow: 0;
    }
}