/**

Theme Name: Glo With Ally

Author: Brainstorm Force

Author URI: http://wpastra.com/about/

Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!

Version: 1.0.0

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Text Domain: glo-with-ally

Template: astra

*/

/* ==========================================================================
   Color Pallet
   ========================================================================== */
:root {
    /* Brand Accents */
    --gwa-gold-primary: #C5A059;   /* Circle 1 - Primary brand accent */
    --gwa-gold-hover: #A38041;     /* Circle 2 - Deeper hover/active accent */
    --gwa-gold-thin: #D4AF37;      /* Circle 7 - Border accents / decorative lines */

    /* Typography Tones */
    --gwa-espresso: #2C2621;       /* Circle 3 - Deep luxury charcoal for headers */
    --gwa-taupe: #7A6F64;          /* Circle 4 - Soft readable muted tone for body copy */

    /* Canvas Backgrounds */
    --gwa-alabaster: #FAF6F0;      /* Circle 6 - Warm, crisp baseline site canvas */
    --gwa-tan: #EFE6DA;            /* Circle 5 - Contrast tan section background */
    --gwa-dark-bg: #2C2621;        /* Circle 9 - Dark alternative / rich footer style */
	
    /* The Metallic Logo Luxury Gradient */
    --gwa-gold-gradient: linear-gradient(
        135deg,
        #a38041 0%,
        #d5b875 25%,
        #f3e2a9 50%,
        #c5a059 75%,
        #a38041 100%
    );
}


/* ==========================================================================
   1. LARGE DESKTOP STYLINGS (Screens larger than 1024px)
   ========================================================================== */
@media screen and (min-width: 1024px) {

	/* Base State: Fixed and Transparent */
    #masthead.site-header {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        background-color: transparent !important;
        transition: background-color 0.4s ease, box-shadow 0.4s ease;
        margin: 0;
        min-height: 104px;
    }

    /* Scrolled State: Managed via JS toggle */
    #masthead.site-header.scrolled {
        background-color: #ffffff !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    /* --- MENU LINKS --- */
    /* Normal Links on Scroll: Off-black */
    .ast-theme-transparent-header #masthead.site-header.scrolled .main-header-menu .menu-link {
        color: rgba(0, 0, 0, 0.72) !important;
    }

    /* Active & Hover Links on Scroll: Pure Black */
    .ast-theme-transparent-header #masthead.site-header.scrolled .main-header-menu .current-menu-item > .menu-link,
    .ast-theme-transparent-header #masthead.site-header.scrolled .main-header-menu .menu-item:hover > .menu-link {
        color: #000000 !important;
    }

    /* --- ICONS --- */
    .ast-theme-transparent-header #masthead.site-header.scrolled .ast-header-social-wrap .ast-builder-social-element svg {
        fill: rgba(0, 0, 0, 0.72) !important;
    }
    .ast-theme-transparent-header #masthead.site-header.scrolled .ast-header-social-wrap .ast-builder-social-element svg:hover {
        fill: #000000 !important;
    }

    /* --- BUTTON --- */
    /* Scrolled CTA State */
    .ast-theme-transparent-header #masthead.site-header.scrolled [CLASS*="ast-header-button-"] .ast-custom-button {
        background-color: var(--gwa-gold-primary) !important;
        color: #ffffff !important;
        border-color: var(--gwa-gold-primary) !important;
        background: var(--gwa-gold-primary) !important;
    }

    /* Scrolled CTA Hover State */
    .ast-theme-transparent-header #masthead.site-header.scrolled [CLASS*="ast-header-button-"] .ast-custom-button:hover {
        background-color: #A38041 !important;
        border-color: #A38041 !important;
        color: #ffffff !important;
        background: #A38041 !important;
    }

    /* Global transition matching */
    .site-header.scrolled .ast-custom-button {
        transition: all 0.4s ease !important;
    }	
}

/* ==========================================================================
   2. SMALL DESKTOP / LARGE TABLET LANDSCAPE (922px to 1024px)
   ========================================================================== */
@media screen and (max-width: 1023.98px) and (min-width: 922px) {
    
	/* Base State: Fixed and Transparent */
    #masthead.site-header {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        background-color: transparent !important;
        transition: background-color 0.4s ease, box-shadow 0.4s ease;
        margin: 0;
        min-height: 104px;
    }

    /* Scrolled State: Managed via JS toggle */
    #masthead.site-header.scrolled {
        background-color: #ffffff !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    /* --- MENU LINKS --- */
    /* Normal Links on Scroll: Off-black */
    .ast-theme-transparent-header #masthead.site-header.scrolled .main-header-menu .menu-link {
        color: rgba(0, 0, 0, 0.72) !important;
    }

    /* Active & Hover Links on Scroll: Pure Black */
    .ast-theme-transparent-header #masthead.site-header.scrolled .main-header-menu .current-menu-item > .menu-link,
    .ast-theme-transparent-header #masthead.site-header.scrolled .main-header-menu .menu-item:hover > .menu-link {
        color: #000000 !important;
    }

    /* --- ICONS --- */
    .ast-theme-transparent-header #masthead.site-header.scrolled .ast-header-social-wrap .ast-builder-social-element svg {
        fill: rgba(0, 0, 0, 0.72) !important;
    }
    .ast-theme-transparent-header #masthead.site-header.scrolled .ast-header-social-wrap .ast-builder-social-element svg:hover {
        fill: #000000 !important;
    }

    /* --- BUTTON --- */
    /* Scrolled CTA State */
    .ast-theme-transparent-header #masthead.site-header.scrolled [CLASS*="ast-header-button-"] .ast-custom-button {
        background-color: #C5A059 !important;
        color: #ffffff !important;
        border-color: #C5A059 !important;
        background: #C5A059 !important;
    }

    /* Scrolled CTA Hover State */
    .ast-theme-transparent-header #masthead.site-header.scrolled [CLASS*="ast-header-button-"] .ast-custom-button:hover {
        background-color: #A38041 !important;
        border-color: #A38041 !important;
        color: #ffffff !important;
        background: #A38041 !important;
    }

    /* Global transition matching */
    .site-header.scrolled .ast-custom-button {
        transition: all 0.4s ease !important;
    }	

}

/* ==========================================================================
   3. STANDARD TABLET PORTRAIT (769px to 921px)
   ========================================================================== */
@media screen and (max-width: 921px) and (min-width: 769px) {
    
    #masthead.site-header {
		position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        background-color: #ffffff !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
	
	/* Normal Links on Scroll: Off-black */
    .ast-theme-transparent-header #masthead.site-header .main-header-menu .menu-link {
        color: rgba(0, 0, 0, 0.72) !important;
    }

    /* Active & Hover Links on Scroll: Pure Black */
    .ast-theme-transparent-header #masthead.site-header .main-header-menu .current-menu-item > .menu-link,
    .ast-theme-transparent-header #masthead.site-header .main-header-menu .menu-item:hover > .menu-link {
        color: #000000 !important;
    }

}

/* ==========================================================================
   4. MOBILE ONLY STYLINGS (768px and down)
   ========================================================================== */
@media screen and (max-width: 768px) {
    
    #masthead.site-header {
		position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
		margin: 0px;
        z-index: 9999;
        background-color: #ffffff !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
	
	/* Normal Links on Scroll: Off-black */
    .ast-theme-transparent-header #masthead.site-header .main-header-menu .menu-link {
        color: rgba(0, 0, 0, 0.72) !important;
    }

    /* Active & Hover Links on Scroll: Pure Black */
    .ast-theme-transparent-header #masthead.site-header .main-header-menu .current-menu-item > .menu-link,
    .ast-theme-transparent-header #masthead.site-header .main-header-menu .menu-item:hover > .menu-link {
        color: #000000 !important;
    }


}

/* ==========================================================================
   5. GLOBAL UTILITIES (Fallback rules applying across ALL sizes)
   ========================================================================== */
/* Global modifications go here */

.second-line-heading.wp-block-spectra-content {
	background: var(--gwa-gold-gradient);
    
    /* Standard clipping tricks to mask the background inside the lettering */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* Makes the internal text fill clear so the background shows through */
    -webkit-text-fill-color: transparent;
    color: transparent;
    
    /* Hardware acceleration smooth layout render fix */
    display: inline-block;
}