/* =====================================================
 * Custom front/back end styles for NEBCA Website 2025
 * They are both enqueued &  added to the editor styles 
 * in functions.php 
 * =====================================================
 */
 
/* WP search block
-----------------------------------------------*/
/* Input styles */
.wp-block-search .wp-block-search__input {
	border-radius: 4px;
	background-color: #ccc;
}
/* Button styles */
.wp-block-search .wp-block-search__button {
	border-radius: 4px;
	background-color: #00f;
	color: #fff;
}
.wp-block-search .wp-block-search__button:hover {
	border-radius: 4px;
	background-color: #02d;
}

/* Navigation menu
--------------------------------------------- */
/* main menu items*/
.wp-block-navigation .wp-block-navigation-item__content {
	font-size: 24px;
	font-weight: 500;
	color: #000;
}
/* sub menu items */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 15px;
}
/* all items */
.wp-block-navigation .wp-block-navigation-item__content:hover {
    color: #00a;
}
.wp-block-navigation .wp-block-navigation-item__content:active {
    color: #008;
}

/* only for dropdown menu */
@media (min-width:600px){
	/* styles for sub menu items */
	.wp-block-navigation .wp-block-navigation-item__content {
		font-size: 18px;		
	}
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		background-color: #ddd;
	}
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		background-color: #ccc;
	}	
}

/* use compact masthead for mobile
--------------------------------------------- */
.site-masthead-mobile { display: block;}
.site-masthead{ display: none;}
/* use stacked masthead for non-mobile 
--------------------------------------------- */
@media (min-width:600px){
.site-masthead-mobile { display: none;}
.site-masthead{ display: block;}
}
	
/* hide left border when sidebar is stacked */
/* wordpress transition is min-width = 782  
--------------------------------------------- */
@media (max-width:781px){
.home-page-sidebar { border-style: none;}
}

/* material icons (font loaded in theme.json)
--------------------------------------------- */
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

/* password protected form
--------------------------------------------*/
.post-password-form { 
	& div{ display: flex; width: 40%;}
	& .post-password-label { color: #000; margin-bottom: 5px;}
	& input.post-password-input {border: 1px solid #000; padding: 10px; background-color: #eee; font-size: medium; }
	& input.post-password-input+input{ margin-left: 10px;}
	& input.post-password-input:hover { border-width: 2px; }
 }
 
/* modal styles
--------------------------------------------*/
.modal-width-auto{
	width: auto;
}

/* gradient background for footer
--------------------------------------------*/
.site-footer{
	background-color: #abb8c3;  /* fallback if linear-gradient not supported */
	background-image: none;
    background-image: linear-gradient(#abb8c3 4%,  #f0f0f0 8%,  #f0f0f0 92%, #abb8c3 96%); 
}
