/* fixed footer menu*/

#chicagoFixedFooterMenu {
  display: none;
  visibility: hidden;
}



:root{
	--height-of-thumb-menu:3rem;
	--mobile-menu-top-padding:3rem; /* add padding to allow close berger*/
}

/* header.site-header.didScroll{
	   position: fixed;
  top: 0;
  transition: top 0.2s ease-in-out;
  width:100%;
  z-index:9999;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.15));
background:#fff;
} */

/* .site-header{
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.15));
background:#fff;
} */

header.site-header.didScroll{
  position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width:100%;
z-index:9999;
/* border-bottom:solid 1px var(--neutral-300); */
/*filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.15));*/
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
/* background is NOT set here — the fixed bar inherits the header's own
 * background (the hero-bg--* colour, or the white base below) so it never
 * overrides the active header colour on scroll. */
}

header.site-header.didScroll > .wp-container-core-group-is-layout-bc384794 {
  display: none;
  transition: all .3s ease-in-out;
	}

@media screen and (min-width: 600px) {
	.admin-bar header.site-header.didScroll{
		top:32px;
	}
}
.admin-bar header.site-header.nav-up ,
header.site-header.nav-up {
  top: -200px;

}


@media screen and (min-width: 769px) {

  .main-navigation:not(.also-hasberger) button.menu-toggle {
    display: none;
  }

  
  
  
  
  
} /* end of min 769*/


/* Tablet and lower */

@media screen and (min-width: 600px) { /* admin menu is no longer fixed at < 600*/

	.admin-bar .ma-has-thumbmenu  .wp-block-navigation__responsive-container.is-menu-open.has-modal-open{

		top:46px;
		height: calc(100dvh - var(--height-of-thumb-menu) - 46px);
		bottom:var(--height-of-thumb-menu);
	}
	
	
		.admin-bar.noThumbMenu  .site-header nav.wp-block-naviagation.ma-has-thumbmenu   .wp-block-navigation__responsive-container.is-menu-open.has-modal-open{
top:46px;
			bottom: 0;
		height: calc(100dvh  - 46px);
	}
	
		.admin-bar .ma-has-thumbmenu  .wp-block-navigation__responsive-container.is-menu-open.has-modal-open{

		height: calc(100dvh - var(--height-of-thumb-menu) -46px);
		
	}
	
	}


@media screen and (max-width: 599.99px) {
    	.ma-has-thumbmenu .wp-block-navigation__responsive-container.is-menu-open.has-modal-open{

	/* Dynamic viewport height — accounts for iOS Safari's URL bar
	   so the menu top isn't clipped above the visible viewport. */
	height: calc(100dvh - var(--height-of-thumb-menu) );
	width:100vw;
padding:0;
	}
	
	
	
	.admin-bar .ma-has-thumbmenu  .wp-block-navigation__responsive-container.is-menu-open.has-modal-open{

		bottom: var(--height-of-thumb-menu);
		height: calc(100dvh - var(--height-of-thumb-menu)); 
       
	}
}


@media screen and (max-width: 768px) {



	
	









  .menu-primary-menu-container {
    display: none;
    visibility: hidden;
  }

  .site-header nav.wp-block-naviagation.ma-has-thumbmenu.toggled .menu-primary-menu-container {
    display: block;
    visibility: visible;
	/*23	padding: 5rem 1.5rem 0; -maybe dvh don't ned container padding*/ /* Top padding is mainly for the iPhone browser chrome overlap */
  }

  .site-header nav.wp-block-naviagation.ma-has-thumbmenu .close-mega-menu{ /* hide mega close icon for mobile,*/
    display: none;
    visibility: hidden;
  }
	
	
	
	
	
	
	
	
	
	
#chicagoFixedFooterMenu {
	background: var(--neutral-100);
	z-index: 9999;
}

#chicagoFixedFooterMenu > ul > li:nth-child(n+2) {
}



 #chicagoFixedFooterMenu {
    position: fixed;
    display: block;
    visibility: visible;
    bottom: 0;
    text-align: center;
    margin: 0;
    padding: 0 .2rem .2rem;
    height: var(--height-of-thumb-menu);
    max-height: var(--height-of-thumb-menu);
    width: 100%;
		box-sizing: border-box;
		border: 1px solid var(--neutral-500);
		will-change: transform;
transition: transform 0.18s ease-out;
  }

html.is-ios-chrome #chicagoFixedFooterMenu {
    top: 100dvh;
    bottom: auto;
    transform: translateY(-100%);
}


  #chicagoFixedFooterMenu ul {
    padding: 0;
    margin: 0;
    height: 100%;
    list-style: none;
    display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
	display: -ms-flexbox;  /* TWEENER - IE 10 */
	display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: no-wrap;
    -ms-flex-wrap: no-wrap;
    -webkit-justify-content: space-around;
    flex-flow: row no-wrap;
    color: white;
  }

  #chicagoFixedFooterMenu ul li {
    flex: 1 1 25%;
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: center;
		align-items: center;
  }

	#chicagoFixedFooterMenu > ul > li:nth-child(n+2) {
    position: relative;
	}

  #chicagoFixedFooterMenu li button {
    background: none;
    border: none;
    margin: 0;
    padding:0;
    cursor:pointer;
    /* Bar bg is --neutral-100 (light); the ul sets color:white, so labels/icons
       were invisible. Set primary-dark for contrast + brand. (Was commented out.) */
    color: var(--ma-thumb, var(--wp--preset--color--primary-dark, #131A3A));
    font-size: .7rem;
    line-height: 1;
    padding: 0 .2rem;
  }

/* 22 1.1.6 accessibility transition
 
 *   removing the double action of the<a and <button
 * */

/* --- Thumb-menu interactive states (parent defaults; child brands the tokens) ---
   One colour token drives label + icon (icon ::before uses currentColor) across
   every state. Fallbacks keep the parent usable standalone. */
#chicagoFixedFooterMenu li > a,
#chicagoFixedFooterMenu li > button {
  /* Fill the <li> so the whole segment is the tap target (bigger; better for
     mobile + WCAG target-size). Icon + label stay centred via this inner flex. */
  flex: 1;
  align-self: stretch;
  margin-inline: var(--ma-thumb-gap, .4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  font-family: var(--ma-thumb-font, inherit);
  font-weight: var(--ma-thumb-weight, 600);
  font-size: var(--ma-thumb-size, .7rem);
  line-height: 1.1;
  text-decoration: none;
  color: var(--ma-thumb, var(--wp--preset--color--primary-dark, #131A3A));
  transition: color .15s ease, background-color .15s ease;
}
#chicagoFixedFooterMenu li > a:hover,
#chicagoFixedFooterMenu li > button:hover { color: var(--ma-thumb-hover, var(--wp--preset--color--primary-action, #cf2e2e)); background-color: var(--ma-thumb-hover-bg, var(--neutral-200, #DFE5EB)); }
#chicagoFixedFooterMenu li > a:active,
#chicagoFixedFooterMenu li > button:active { color: var(--ma-thumb-active, var(--wp--preset--color--primary-action, #cf2e2e)); background-color: var(--ma-thumb-active-bg, var(--neutral-300, #D6D7D8)); }
#chicagoFixedFooterMenu li > a:focus,
#chicagoFixedFooterMenu li > button:focus { outline: none; }
#chicagoFixedFooterMenu li > a:focus-visible,
#chicagoFixedFooterMenu li > button:focus-visible {
  outline: 2px solid var(--ma-thumb-focus-ring, var(--wp--preset--color--primary-action, #cf2e2e));
  outline-offset: 2px;
  border-radius: 2px;
}

#chicagoFixedFooterMenu li > a::before,
  #chicagoFixedFooterMenu li > button::before {
    /* Inline-SVG masks painted with currentColor (replaces an unloaded icon
       font that rendered as empty squares). Masks live in ../icons/. */
    content: "";
    display: block;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin: 0;
    background-color: currentColor;
    -webkit-mask: var(--fd-menu-icon, url("../icons/question-circle.svg")) no-repeat center / contain;
            mask: var(--fd-menu-icon, url("../icons/question-circle.svg")) no-repeat center / contain;
  }
  
  #chicagoFixedFooterMenu li > a{
  	text-decoration:none;
  }
  
/* phone (tel: quick-dial) */
#chicagoFixedFooterMenu li > a.phone::before,
#chicagoFixedFooterMenu li > button.phone::before { --fd-menu-icon: url("../icons/phone.svg"); transform-origin: center; }
/* home: the breadcrumb compass */
#chicagoFixedFooterMenu li > a.home::before,
#chicagoFixedFooterMenu li > button.home::before { --fd-menu-icon: url("../icons/compass.svg"); }
/* main-menu toggle (hamburger); swaps to close (X) when open */
#chicagoFixedFooterMenu li > a.mainmenu::before,
#chicagoFixedFooterMenu li > button.mainmenu::before { --fd-menu-icon: url("../icons/bars.svg"); }
#chicagoFixedFooterMenu li > button.is-showing-now::before { --fd-menu-icon: url("../icons/times.svg"); }

  .footer-menu-item-box {
    position: fixed;
    bottom: 5em;
    background: var(--neutral-100);
    width: 100%;
    left: 0;
    height: 0;
    opacity: 0;
    transition: opacity 0s ease-out, height 0s .15s ease-out;
    z-index: -1;
    visibility: hidden;
    padding: 0 1em;
    box-sizing: border-box;
  }

  .footer-menu-item-box.isVisibile {
    height: calc(100vh - 2em);
    z-index: 1;
    visibility: visible;
    opacity: 1;
    transition: opacity .10s ease-in, height 0s ease-in;


  display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
	display: -ms-flexbox;  /* TWEENER - IE 10 */
	display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: no-wrap;
    -ms-flex-wrap: no-wrap;
    -webkit-justify-content: center;
    -webkit-align-content:center;
    flex-flow: row no-wrap;


    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
  }

  .admin-bar .footer-menu-item-box.isVisibile {
    height: calc(100vh - 4em);
  }



}

/* ===== Pilot menu fixes (2026-07) ===== */

/* Fixed-footer thumb-menu glyphs for classes exposed via the
   mercury_atlas_footer_menu_items filter (SVG masks; see the icon block above).
   phone is handled by the .phone mask rule above. */
#chicagoFixedFooterMenu li > a.case-study::before,
#chicagoFixedFooterMenu li > button.case-study::before,
#chicagoFixedFooterMenu li > a.case-sudy::before,
#chicagoFixedFooterMenu li > button.case-sudy::before { --fd-menu-icon: url("../icons/file-alt.svg"); }

/* Keep phone numbers from wrapping mid-number. */
a[href^="tel:"] {
	white-space: nowrap;
}

/* Icons-only on narrow screens: hide the labels (SVG-mask icons keep their
   rem size) so the thumb bar stays compact on phones. */
@media screen and (max-width: 520px) {
  #chicagoFixedFooterMenu li > a,
  #chicagoFixedFooterMenu li > button { font-size: 0; }
}

/* Segment divider: a short vertical rule centred in the gap between touch
   targets (replaces the old full-height li border so it reads cleanly now
   that the targets are spaced). Height token-tunable. */
#chicagoFixedFooterMenu > ul > li:nth-child(n+2)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: var(--ma-thumb-divider-height, 55%);
  border-left: 1px solid var(--neutral-500);
  pointer-events: none;
}

/* Phone ring: reuse the shared ma-phone-ring keyframes (defined once in
   style.css, also used by the icon-phone button block style) — not redefined
   here. Rings on hover and keyboard focus only. */
#chicagoFixedFooterMenu li > a.phone:hover::before,
#chicagoFixedFooterMenu li > button.phone:hover::before,
#chicagoFixedFooterMenu li > a.phone:focus-visible::before,
#chicagoFixedFooterMenu li > button.phone:focus-visible::before {
  animation: ma-phone-ring 0.6s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  #chicagoFixedFooterMenu li > a.phone:hover::before,
  #chicagoFixedFooterMenu li > button.phone:hover::before,
  #chicagoFixedFooterMenu li > a.phone:focus-visible::before,
  #chicagoFixedFooterMenu li > button.phone:focus-visible::before { animation: none; }
}

/* Reserve the thumb-menu height under the open mobile menu for the non-admin
   (logged-out) case. WP core pins the responsive container top:0/bottom:0, so a
   height override alone is ignored — bottom must be lifted by the bar height.
   The .admin-bar rules above are more specific and still add their 46px top. */
@media screen and (max-width: 767.98px) {
  .ma-has-thumbmenu .wp-block-navigation__responsive-container.is-menu-open.has-modal-open {
    bottom: var(--height-of-thumb-menu);
    height: calc(100dvh - var(--height-of-thumb-menu));
  }
}

/* Prevent the thumb bar from jumping when the mobile menu opens. WP core sets
   html.has-modal-open{overflow:hidden}, which removes the page scrollbar; with
   the bar at width:100% that widens the viewport and re-centres the bar. Reserve
   the gutter at thumb-menu widths so open/close keeps the same layout width.
   (Real mobile browsers use overlay scrollbars, so this is a no-op there.) */
@media screen and (max-width: 767.98px) {
  html { scrollbar-gutter: stable; }
}