/*
 Theme Name:   KA GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  GeneratePress child theme by Kim Aldis
 Author:       Kim Aldis
 Author URI:   https://aldis.co.uk
 Template:     generatepress
 Version:      0.1
*/

nav#mobile-header .inside-navigation {
    display: flex;
    flex-direction: column;
}
body {
	background: white;
	font-family:  "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	color: #888;
	position: relative;   
}

/* Site Title */
.main-title {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 35px;
	font-weight: 100;
	letter-spacing: 4px;
	color: rgb(100,100,100);
}
/* site tagline */
.site-description {
	font-weight: 200;
	font-size: 14px;
	color: rgb(100,100,100);
}

/* masthead bg color*/
.site-header {
	background-color: #f8f8f8;
	border-bottom: solid 1px #ddd;
	/* lock menubar to top of screen using fixed */
	 position: absolute;
	 top: 0; left: 0; right: 0;
	 z-index: 9999999;
}
/* moves content down from behind menu bar */
/* switches to hamberger at 768, 55px padding-top for mobile, 70px for larger*/
.site-content {
	padding-top: 72px; 
}
/* @media (max-width: 768px) {
	.site-content {
		padding-top: 25px; 
	}
	
} */
/* wp's admin bar to the bottom so we can see it */
#wpadminbar {
	top: auto;
	bottom: 0;
}
/* Hide Generatepress footer */
.inside-site-info {
	display: none;
}

/* hide post title on front page and adjust margins */
.home .entry-title {
	display: none;
}
.home .site-main {
	margin: 0;   
}
.home .inside-article {
	padding-top: 0;
}

/* --- Menus ------------------------------------*/

/* todo: BSUP: set 'current-menu-item' because red line not showing over client home menu item when we're in the client home page */
 .main-navigation .menu > .menu-item > a::after {
    content: "";									/* empty bar */
    position: absolute;
    right: 50%;
    left: 50%;
    color: #ccabc1;  
    top: 0px; 
    -webkit-transform: translateX(-50%);			/* centre over menu item */
    transform: translateX(-50%);
    display: block;
    width: 0;
    height: 2px; 									/* height of the red bar */
    background-color: currentColor;
    transition: 0.3s width ease;					/* grow width */
}

/* animated line over menu item, current & hover */
/* .main-navigation .menu > .menu-item > a:hover::after,
.main-navigation .menu > .menu-item > a:focus::after,
.home-menu > a::after,
.main-navigation .menu > .current-menu-item > a::after{
    width: 75%; 
    color: #e78953;
} */

/* menu blocks */
  .main-navigation li:hover {
	/* position: relative; */
	background: #eee;
  }
  .main-navigation ul ul {
	  box-shadow: 0 1 0 0;
  }


/* menu height & separation bars */
  .main-navigation ul li {
	height: 50px;
	background: #f8f8f8;
}

.main-navigation .main-nav ul > li > a {
	display: flex;
	height: 100%;
	justify-content: left;
	align-items: center;
	line-height: 1 !important;
	text-align: center;
	box-sizing: border-box;
	border-right: 1px solid #ddd;

	color: #999;
	padding-left: 8px;
	padding-right: 8px;
	font-size: 12px;
}
/* Separators */
.main-navigation .main-nav ul > li:last-child > a {   /* todo: not working on site */
	border: none;
}

  /* width of sub menus */
  .main-navigation ul ul {
	width: 250px;
  }


  @media (max-width: 768px) {
    .main-navigation .navigation-logo {
        width: 100%;
        float: none;
    }

    .main-navigation .site-logo.navigation-logo img {
        height: auto;
        margin: 0 auto;
    }

    .menu-logo .main-navigation:not(.mobile-header-navigation) .menu-toggle {
        float: none;
        width: 100%;
    }

	/* fix centred header when this theme goes to aldis.co.uk. Why!!?? */
	/* todo: Header appears differently in plugins.local to aldis.co.uk. Need to figure out why and fix */

	.site-branding {
		float: left!important;
	}
	.main-navigation {
		float: right!important;
		clear: none!important;
	}
}

/* Post & Page titles */

.entry-title {

}

@media (max-width: 768px) {
	.entry-title {
		margin-top: 10px;
	}
}