@charset "UTF-8";
/* ========= Child Theme Override: Top-Fixed, Right-Justified Nav ========= */
/* This file replaces the parent nav.css in full. */

/* ===== Base ===== */
nav {
  position: fixed;        /* Make it stick */
  top: 7rem;
  right: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  padding: 0 1rem;
  box-shadow: unset;
  background-color: var(--nav-background-color);
  opacity: var(--nav-background-opacity);
  z-index: 110;
}


/* Space beneath fixed nav so content doesn't hide under it */

body {
  padding-top: var(--header-height);
}

/* header background */
body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: calc( var(--header-height) - var(--nav-height) );
  background-color: var(--header-background-color);
  opacity: var(--header-background-opacity);
  z-index: 90;
}

/* background blur */
nav,
body::before {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* ===== Logo Adjustments ===== */

.md-custom-logo {
  display: block;
  position: fixed;
  left: 50%;
  top: 1rem;
  width: 40%;
  height: 5rem;
  transform: translateX(-50%);
  overflow: hidden;
  z-index: 120;
  /*background: rgba(0,0,0,0.1);*/
}

.md-page-meta {
  display: none;
}

.md-custom-logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.md-custom-logo-mobile {
  display: none;
}

/* social icons */
#md-h-social {
  display: block;
  position: fixed;
  top: 1rem;
  right: max(1rem, calc( (100% - 1500px) / 2 ) );
  width: calc( 25% );
  z-index: 120;
}
.md-social {
  display: flex;
  flex-flow: wrap;
  position: relative;
  width: 100%;
  justify-content: flex-end;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 120;
}
.md-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10rem;
  text-decoration: none;
}
.md-social i {
  font-size: 1rem;
}

#md-h-social {
  display: none; /* Hide header social icons */
}

/* ===== Hamburger (preserved) ===== */

#the-bars {
  display: none;
  background: none;
  border: none;
  margin-left: auto;
  font-size: 1.75rem;
  cursor: pointer;
}

/* ===== Menu Container ===== */

#the-nav {
  display: flex;
  justify-content: center;   /* center menu */
  align-items: center;
}

.menu-header-menu-container,
.menu-header-menu-es-container {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 3rem;
  margin-left: var(--left-padding);
  margin-right: var(--right-padding);
}

/* ===== Menu (desktop) ===== */

.menu-header-menu-container .menu,
.menu-header-menu-es-container .menu {
  list-style: none;
  display: flex;
  flex-direction: row;
  flex: 1 1 0;
  justify-content: center;   /* RIGHT aligned */
  padding: 0;
  margin: 0;
  width: 100%;
}

/* submenu - aligns under correct menu item */
.menu-header-menu-container .menu > li,
.menu-header-menu-es-container .menu > li {
  position: relative;       /* required for submenu anchoring */
  flex: 1 1 0;
  height: var(--nav-height);
  margin: 0;
  padding: 0;
}

.menu-header-menu-container .menu > li > a,
.menu-header-menu-es-container .menu > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.75rem;
  font-size: 1rem;
  height: var(--nav-height);
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  color: var(--msa-white);
  border-bottom: 3px solid transparent;
}

/* colors and decorations */
nav {
  color: var(--msa-white);
  background-color: var( --msa-light-blue);
}

nav .menu > li.msa-nav-pricing { background-color: var(--msa-teal);}
nav .menu > li.msa-nav-faqs { background-color: var(--msa-magenta);}
nav .menu > li.msa-nav-blog { background-color: var(--msa-light-purple);}
nav .menu > li.msa-nav-about-us { background-color: var(--msa-purple);}
nav .menu > li.msa-nav-contact-us { background-color: var(--msa-light-teal);}
nav .menu > li.msa-nav-process-servers { background-color: var(--msa-orange);}

.menu-header-menu-container .menu > li > a:hover,
.menu-header-menu-es-container .menu > li > a:hover {
  border-bottom: 3px solid var(--msa-orange);
}

/* Current page */
.menu-header-menu-container .menu > li.current_page_item > a,
.menu-header-menu-es-container .menu > li.current_page_item > a {
  border-bottom: 3px solid var(--msa-orange);
  font-weight: bold;
}

/* ===== Dropdown (unchanged structurally) ===== */
.menu-header-menu-container .sub-menu,
.menu-header-menu-es-container .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;      /* anchor submenu under its own LI */
  min-width: 12rem;
  padding: 0.5em;
  list-style: none;
  background: #fff;
  box-shadow: 0 3px 5px rgba(0,0,0,0.15);
  z-index: 1000;
}

/* submenu is-open */
.menu-header-menu-container .menu > li.is-open > .sub-menu,
.menu-header-menu-es-container .menu > li.is-open > .sub-menu {
  display: block;
}

.menu-header-menu-container .sub-menu li a,
.menu-header-menu-es-container .sub-menu li a {
  display: block;
  padding: 0.35em 0.5em;
  text-decoration: none;
  color: #333;
}

/* ===== Footer Menu ===== */
footer {
  display: block;
  position: relative;
  text-align: unset;
  font-size: 0.75em;
  padding: 1rem;
  height: var(--footer-height);
  margin: 0;
  background: var(--msa-light-gray);
  z-index: 100;
}

footer .menu-footer-menu-container,
footer .menu-footer-menu-es-container {
  position: absolute;
  top: 1rem;
  left: calc( 10rem + var(--left-padding) );
  width: 30%;
  margin: 0; 
  z-index: 120;
}
 
.menu-footer-menu-container ul,
.menu-footer-menu-es-container ul {
  display: grid;
	grid-template-columns: repeat(2, auto);
	grid-template-rows: repeat(4, auto);
	grid-auto-flow: column;
	gap: 0.5rem 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu-footer-menu-container ul li,
.menu-footer-menu-es-container ul li { 
  margin: 0; 
  padding: 0;
  height: 1rem;
}

.menu-footer-menu-container ul li a,
.menu-footer-menu-es-container ul li a { 
  padding: 0;
  color: var(--msa-blue) !important;
  text-decoration: none;
}

#md-footer-meta {
  position: absolute;
  right: var(--right-padding);
  bottom: 1rem;
  width: calc(50% - 1rem);
}

#md-footer-meta div {
  text-align: right;
  color: var(--msa-blue);
  height: 1rem;
}

#md-footer-meta div#md-f-social {
  display: flex;
  flex-direction: row;
  height: 3rem;
  align-items: center;
}

#md-footer-image {
  position: absolute;
  left: calc( var(--left-padding) - 5rem );
  bottom: 0;
  width: 20rem;
  height: calc( var(--footer-height) - 2rem );
  overflow: hidden;
  z-index: 101;
}
#md-footer-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ===== Mobile (≤768px) ===== */
@media (max-width: 768px) {

  /* Root */

  :root {
    --header-height: 7rem;
  }

  /* header background */
  body::before {
    height: calc( var(--header-height) );
  }

  /* The nav */
  #the-bars {
    display: block;
    font-size: 3rem;
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 120;
  }
  #the-bars i {
    display: block;
  }

  /* Collapsible mobile nav */
  nav {
    position: fixed;
    top: var(--header-height);
    right: 0;
    left: 0;
    width: 100%;
    background: rgba(255,255,255,0.98);
  }
  
  #the-nav,
  #the-nav.is-collapsed {
    display: none;
  }
  #the-nav:not(.is-collapsed) {
    display: block;
  }

  /* menu */
  nav {
    padding: 0;
  }
  .menu-header-menu-container,
  .menu-header-menu-es-container {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
  }
  /* Stack menu vertically */
  .menu-header-menu-container .menu,
  .menu-header-menu-es-container .menu {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    background: #fff;
}
  .menu-header-menu-container .menu > li,
  .menu-header-menu-es-container .menu > li {
    margin: 0;
    width: 100%;
    height: 2rem;
}

  .menu-header-menu-container .menu > li > a,
  .menu-header-menu-es-container .menu > li > a {
    display: block;
    padding: 0.375rem 0.75rem 0.375rem 0.75rem;
    margin: 0;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }

  /* Submenus inline */
  .menu-header-menu-container .sub-menu,
  .menu-header-menu-es-container .sub-menu {
    position: static;
    box-shadow: none;
    padding: 0 0 0.25em 0;
    background: #fff;
  }
  .menu-header-menu-container .sub-menu li,
  .menu-header-menu-es-container .sub-menu li {
    text-align: center;
  }

  /* footer */
  footer {
    display: block;
    position: relative;
    text-align: unset;
    font-size: 0.75em;
    padding: 1rem;
    height: calc( 6rem + var(--footer-height) );
    margin: 0;
    background: var(--msa-light-gray);
    z-index: 100;
  }

  footer .menu-footer-menu-container,
  footer .menu-footer-menu-es-container {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: auto;
  }
  
  .menu-footer-menu-container ul,
  .menu-footer-menu-es-container ul {
    display: grid;
    grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-auto-flow: row;
		justify-items: end;
    grid-auto-flow: unseet;
    gap: 0.5rem;
  }

  /* footer meta */
  #md-footer-meta {
    right: 1rem;
    bottom: 1rem;
    width: auto;
    z-index: 110;
  }
  
}


/* ===== Large Desktop (≥1501px) ===== */
@media screen and (min-width: 1501px) {
  .md-custom-logo {
    width: calc( var(--site-max-width) * 0.4 );
  }
}

/* ===== Desktop guard (≥769px) ===== */
@media (min-width: 769px) {
  :root {
    --header-height: 9rem;
  }

  /* nav */
  #the-nav,
  #the-nav.is-collapsed { 
    display: flex; 
  }

  #the-bars { 
    display: none; 
  }

  .md-custom-logo { 
    display: block; 
  }

  .md-custom-logo-mobile { 
    display: none; 
  }
}