/**
Theme Name: The Mainstay
Author: Creative Blazer / Updated by Van Albert (see comments labeled VA! 3/4/2025) 
Author URI: https://creativeblazer.com
Description: Built using Astra!
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: the-mainstay
Template: astra
**/


/* VA! START - Modifications made by Van Albert 3/4/2025  */

/* Adding the !important directive because I'm not sure about the property hierarchy with Elementor  */
/* VA! Header element sizes up to iPhone Max  */
@media screen and (max-width: 767px)   {

    /* hamburger menu position */
    .menu-toggle {
        display: flex !important;
        align-items: center !important;
        height: 2.5rem !important;
        margin: .5rem .25rem 0 0 !important;
        padding: 0 .25rem !important;
        font-size: 1.75rem !important;
        line-height: 1rem !important;
    }

    /* hamburger menu size */
    .menu-toggle-icon {
        /* color: black !important; */
        /* height: 1rem !important; */
        padding: 0 .375rem !important;
        margin: 0 !important;
    }

    /* logo container size and position */
    .site-branding {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 120px;
        /* max-width: 150px; */
        height: 80px !important;
        margin: 0  !important;
        padding: 0  !important;
     }

     /* Logo parent - sets the padding on the logo container */
     .ast-site-identity {
        padding: .5rem 0 !important;
     }

    /* logo image size  */
     .custom-logo {
        width: 110px !important;
        height: auto !important;
     }


    /* .charlie-byrd {
        width: 260px !important;
        height: auto;
    }  */
}


/*  Make the individual main menu items wrap inside their container instead of having the entire main menu wrap below the site-branding container whenever the viewport is resized below the total width of the two children within the header parent. This can't be done within the Astra header theme, and the main menu was too wide for anything viewport size except full resolution desktop. This is a workaround fix. The main menu needs to be redesigned ro vw more mobile-friendly.  */
@media screen and (min-width: 921px) {

    /*  Position the site-branding container absolutely so the main-header-menu items will wrap without dropping below the site-branding  */
    .site-branding {
        position: absolute;
    }

    /* Set a margin so main-header-menu won't overlap the site logo  */
    .main-header-menu {
        margin-left: 210px !important;
    }

    /* set a fixed height for the parent container that's about the same height as site-branding. */
    .main-header-container {
        /* display: flex;
        justify-content: flex-start; */
        height: 180px;
    }
}

/* VA! END /

/* VA! I don't know where the CSS below originated, but if there's any behavior that can't be identified in Elementor or Astra, this is probably the source  */

/* main nav header tweaks especially between "collapse" and "tab" widths */
/* reduce height of main header links - mostly for hover animation */
.main-header-bar {
	line-height: 3;
}
/* menu items bg always white when in collapse mode */
.main-header-bar-navigation.toggle-on #site-navigation {
	background-color: #ffffff;
}
/* menu items color in collapsed menu */
.main-header-bar-navigation.toggle-on #site-navigation  li a {
	color: #1d727d;
}
/* link color white when hover and focus to contrast changing bg color */
.main-header-bar-navigation #site-navigation  li:hover a, .main-header-bar-navigation #site-navigation  li a:focus {
	color: #ffffff;
}
/* always bold active header links */
.main-header-bar-navigation #site-navigation li.current-menu-item a {
	font-weight: 600;
}
/* non-collapsed menu items are always bold */
.main-header-bar-navigation:not(.toggle-on) #site-navigation li a {
	font-weight: 600;
}
/* custom menu button stay yellow in collapsed version */
.main-header-bar-navigation.toggle-on #site-navigation .button-custom-menu-item {
	text-align: center;
	border: 2px solid #F7A923;
}
.main-header-bar-navigation.toggle-on #site-navigation .button-custom-menu-item a {
	background-color: #f7a923;
	color: #ffffff;
	font-weight: 600;
}
.main-header-bar-navigation.toggle-on #site-navigation .button-custom-menu-item:hover a, .main-header-bar-navigation.toggle-on #site-navigation .button-custom-menu-item a:focus {
	background-color: #ffffff;
	color: #f7a923;
}

/* About Page - Timeline */
#cb-timline .timeline-entry > div > .elementor-column {
    width: 2%;
}
.timeline-col-2 {
    position: relative;
}
.timeline-entry:nth-child(2)::before {
    top: 28%;
}
.timeline-entry:last-child::before {
    bottom: 58%;
}
@media(max-width:767.98px){
	.timeline-entry .timeline-col-1 {
        width: 50%;
        order: 0;
    }
    .timeline-entry .timeline-col-2 {
        width: 50%;
        order: -1;
    }
    .timeline-entry .timeline-col-1 .elementor-heading-title{
        text-align: left;
    }
    .timeline-entry .timeline-col-2 .elementor-icon-wrapper {
        display:flex;
        justify-content: flex-end;
    }
}
@media(min-width: 768px) {
    .timeline-entry::before {
        display: none;
    }
    .timeline-col-2::before {
        content:'';
        position: absolute;
        top: 0px;
        bottom: 0;
        left: 50%;
        background: #D70C17;
        width: 5px;
        transform: translateX(calc(-50%));
    }
    .timeline-entry:nth-child(2) .timeline-col-2::before {
        top: 50%;
    }
    .timeline-entry:last-child .timeline-col-2::before {
        bottom: 58%;
    }
}