/* ----------------------------------------------------------------
	Custom CSS for Canvas Header & Navigation
	Overrides Canvas float-based nav for clean Flexbox centering
-----------------------------------------------------------------*/

.primary-menu .menu-container {
	display: flex !important;
	justify-content: center !important;
	align-items: center;
	flex-wrap: wrap;
	width: auto !important;
	margin: 0 auto !important;
	padding: 0 !important;
	float: none !important;
	text-align: center;
	list-style: none;
}

.primary-menu .menu-item {
	float: none !important;
	margin: 0 1rem;
}

/* Backgrounds for Build Page */
.bg-light-gray { background-color: #f7f7f7; }
.bg-soft-blue  { background-color: #dfe9f3; }
.bg-deep-blue  { background-color: #284b63; color: white; }
.bg-white      { background-color: #fff; }
.bg-cream      { background-color: #fcf8f3; }

.text-light    { color: white; }
.text-dark     { color: #212529; }

.row-large-link a {
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-color: #d8d8f0;
  color: #6c85aa;
}

.row-large-link a:hover {
  text-decoration: none;
  color: #4a5e7a;
}

.bg-summerland-blue {
    background-color: #7a93b6 !important;
    color: white;
}



/* Make the header row a flex line and give the nav the middle, growable area */
#header-wrap .header-row{
  display:flex;
  align-items:center;
}

/* Hide the burger on desktop so it doesn’t reserve space */
#header-wrap .primary-menu-trigger{ display:none; }          /* or add class d-lg-none in markup */

/* Let the nav own the middle and center its items */
#header-wrap .primary-menu{ flex:1 1 auto; }
#header-wrap .primary-menu > .menu-container{
  display:flex;
  justify-content:center;   /* centers the li’s */
}

/* Keep the button docked to the right edge */
#header-wrap .header-misc{
  flex:0 0 auto;
  margin-left:auto;         /* pushes it to the far right */
}

.sca-events-logo {
  max-width: 600px;
  width: 100%;
  height: auto;
}

h1 {
  color: #566a85;
}