/* =========================================
   HEADER (MASTHEAD)
   Sticky header with shadow for modern UI
========================================= */
#masthead {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    position: sticky;
    top: 0;
    z-index: 999;
    background: #ffffff;
}


/* =========================================
   MOBILE HEADER LAYOUT
   Responsive layout optimization (≤768px)
========================================= */
@media (max-width: 768px) {

    /* Header container layout */
    #masthead .inside-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 15px;
        min-height: auto;
    }

    /* Logo + branding container */
    #masthead .site-branding-container {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
        min-width: 0;
    }

    /* Logo sizing */
    #masthead .site-logo img,
    #masthead .header-image {
        max-height: 48px;
        width: auto;
        height: auto;
    }

    /* Branding wrapper */
    #masthead .site-branding {
        display: flex;
        align-items: center;
        min-width: 0;
    }

    /* Site title */
    #masthead .main-title {
        margin: 0;
        line-height: 1.2;
        font-size: 28px;
    }

    #masthead .main-title a {
        font-size: 28px;
        white-space: nowrap;
    }

    /* Mobile menu button */
    #mobile-menu-control-wrapper {
        margin-left: 10px;
    }

    #mobile-menu-control-wrapper .menu-toggle {
        padding: 8px 10px;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    #mobile-menu-control-wrapper .gp-icon {
        font-size: 24px;
        line-height: 1;
    }

    /* Remove extra spacing */
    #masthead .inside-header > * {
        margin-bottom: 0;
    }
}


/* =========================================
   MOBILE HEADER CLEANUP
   Hide site title on smaller screens
========================================= */
@media (max-width: 768px) {
    #masthead .site-branding {
/*         display: none !important; */
    }
}


/* =========================================
   HERO SECTION (ELEMENTOR)
   Gradient background + text color styling
========================================= */
.elementor-element-f26eaa1{
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #06b6d4 100%);
    margin-top: -35px;
}

/* Python Programming */
.elementor-element-0955f41 {
    background-image: url("https://codecreatorshub.org/wp-content/uploads/2026/03/hero-python.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.elementor-element-e6d48de {
	background-color: #EFFFE8; /* light soft lightgreen */
}

/* Search Engine Optimization */
.elementor-element-e204b66 {
    background-image: url("https://codecreatorshub.org/wp-content/uploads/2026/03/seo-page.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Scratch Programming */
.elementor-element-284d2e9 {
	background-image: url("https://codecreatorshub.org/wp-content/uploads/2026/03/scratch-programming-3.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.elementor-element-38111c6 {
	background-image: url("https://codecreatorshub.org/wp-content/uploads/2026/03/scratch-journey-1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* =========================================
   SOCIAL SHARING (JETPACK / SHAREDADDY)
   Disable all sharing elements
========================================= */

/* Hide entire sharing block */
.sharedaddy {
    display: none !important;
}

/* Hide sharing container */
.sd-content {
    display: none !important;
}

/* Hide "Share this:" title */
.sd-title {
    display: none !important;
}

/* Hide individual buttons */
.share-twitter,
.share-facebook {
    display: none !important;
}

/* =========================================
   Section: SEO Page
   Class: .elementor-element-af0c97f
   Purpose: Add light background styling
========================================= */

.elementor-element-1522b8f {
    background-color: #f9fafb; /* light soft gray */
}


/* =========================================
   ELEMENTOR FOOTER SECTION
   Light grey background styling
========================================= */
.elementor-element-7ba72ba, .elementor-element-4832c3a3, .elementor-element-583115d9 {
    background-color: #f3f4f6; /* Light grey */
}


/* =========================================
   GENERATEPRESS FOOTER (SITE-INFO)
   Hide default footer elements
========================================= */

/* Hide entire footer */
.site-info {
    display: none !important;
}

/* Optional: Hide only copyright */
/*
.copyright-bar {
    display: none !important;
}
*/

/* Optional: Hide "Built with GeneratePress" link */
/*
.site-info a[href*="generatepress"] {
    display: none !important;
}
*/