/*==================================================================*/
/* Variables*/
/*------------------------------------------------------------------*/
:root {
    --header-change-speed: 0.350s;
    --header-change-type: ease-in-out;
}
/*------------------------------------------------------------------*/
/*==================================================================*/


/*==================================================================*/
/*    Highlight (underline, overline, etc.) the Header (not footer) Navigation Menu Item Corresponding to the currently active page */
/*------------------------------------------------------------------*/
/* Using css tag separators of ">" means the next one must be an immediate child of the preceding tag */
/* Using css tag separators of " " only means the next tag can be any descendent level of the previous tag */
/* The final "> a {}" means it will choose the direct <a class> descendent of the preceding tag, and will ignore further nested tags*/
/* If instead, it used a  final " a {}" (no ">") it would choose the direct <a class> descendents of the preceding tag including nested tags*/

.wp-site-blocks .wp-block-group header.wp-block-template-part .wp-block-navigation .current-menu-item > a {
    text-decoration: overline;
    text-decoration-color:rgb(46, 113, 130);
    text-decoration-thickness: 0.3rem;
}

header.wp-block-template-part .wp-block-navigation .current-menu-ancestor > a {
    text-decoration: overline;
    text-decoration-color:rgb(46, 113, 130);
    text-decoration-thickness: 0.3rem;
}
/*------------------------------------------------------------------*/
/*==================================================================*/


/*==================================================================*/
/*    This causes the header background to be a different color when scrolling past a target element.
      e.g. if it is visible on the page the header is one color, otherwise the header is another color.
      The target element is marked with the custom CSS tag "header-change-trigger" */
/*------------------------------------------------------------------*/
/* NOTE: This header-effects-group CSS tag must be added to the group when editing the header component only, rather than the "sticky header" group */
/* seen in the template since that is where the background color is added*/
/* the "important" flag is also required in order to actually overwrite it due to how WP handles tags and precedence*/
/* Note, it uses "background" instead of "background-color and needs the !important tag*/

/* Initial Colors to use for the Front Page Header*/
.dynamic-header-style {
    background: hsl(0, 0%, 20%) !important; /* header banner background*/
    color: #ffffff !important; /* header text */

    /* navbar currently selected page bar color */
    .wp-block-navigation .current-menu-item > a {
    text-decoration-color:#ffffff !important;

    transition: text-decoration-color var(--header-change-speed) var(--header-change-type);
    }

    /*site tagline */
    .wp-block-site-tagline{
        transition: opacity var(--header-change-speed) var(--header-change-type);
        /*visibility:hidden;*/
        opacity: 0;
    }

    /* to change out the entire logo */
    .custom-logo{
        /* content: url("/wp-content/uploads/20XX/XX/otherlogoplaceholder.png"); */
        transition: opacity var(--header-change-speed) var(--header-change-type);
        opacity: 0;
    }

    transition: background-color var(--header-change-speed) var(--header-change-type); /*how quickly the transition occurs*/
    transition: all var(--header-change-speed) var(--header-change-type); /*how quickly the transition occurs*/
}

/* The standard header colors after scrolling past the target element*/
.dynamic-header-style.scrolled-past {
    background: #ffffff !important; /* header background */
    color: #000000 !important; /* header text */

    /* navbar currently selected page bar color */
    .wp-block-navigation .current-menu-item > a {
    text-decoration-color:#2e7182 !important;
    }

    /*site tagline */
    .wp-block-site-tagline{
        color: #2e7182;
        transition: opacity var(--header-change-speed) var(--header-change-type);
        opacity: 100;
        /* visibility: visible; */
    }
    transition: background-color var(--header-change-speed) var(--header-change-type); /*how quickly the transition occurs*/
    transition: all var(--header-change-speed) var(--header-change-type); /*how quickly the transition occurs*/

    /*swap logo */
    .custom-logo{
        /* content: url("/wp-content/uploads/20XX/XX/otherlogoplaceholder.png"); */
        transition: opacity var(--header-change-speed) var(--header-change-type);
        opacity: 100;
    }
}
/*------------------------------------------------------------------*/
/*==================================================================*/


/*==================================================================*/
/*     Change which header menu to show based on Mobile vs Desktop (screen width)  */
/*------------------------------------------------------------------*/
/*  Code is in the general misc-theme-customization.css file */
/*  Simply add the appropriate mobile/desktop hide/show CSS tag  */
/*------------------------------------------------------------------*/
/*==================================================================*/


/*==================================================================*/
/*                    Placeholder Block                             */
/*------------------------------------------------------------------*/
/*                       Code Here                                  */
/*------------------------------------------------------------------*/
/*==================================================================*/