/* Studio XIXI - mobile header + form fixes (loaded after the Webflow stylesheet) */

@media screen and (max-width: 991px) {
  /* Menu icon: same height as the logo (23.4px), starting on the logo's top edge (24px).
     The logo is position:fixed with a fixed 24px top inset (set elsewhere in the site's
     own CSS) - it isn't actually inside this bar's box model, so nothing here can shift
     it. The only way to make the bar look centered around it is to make the bar itself
     symmetric: 24px of padding above AND below the icon, so the bar's total height
     (24 + 23.5 + 24 = 71.5px) puts exactly 24px of space below the logo too. */
  .menu-button-3 { padding: 24px 16px; }
  .menu-button-icon,
  .close-icon { width: 24px; height: 23.5px; }
  .menu-button-icon { display: block; }

  /* Open menu fills the screen below the header bar instead of overflowing it */
  .nav-menu { height: calc(100vh - 71.5px); height: calc(100dvh - 71.5px); }
}

/* Header bar goes solid beige (logo visible) when the menu is open, and on pages whose
   hero image is hidden at this screen size (nothing there to scroll past, so the
   scroll animation never turns the bar on). Classes are set by nav-fix.js. */
html.nav-open .container-12,
html.nav-open .navbar-grid,
html.nav-hero-hidden .container-12,
html.nav-hero-hidden .navbar-grid { background-color: var(--bg) !important; }
html.nav-open .text-logo-5,
html.nav-hero-hidden .text-logo-5 { opacity: 1 !important; }
html.nav-open .navlink,
html.nav-hero-hidden .navlink { color: var(--dark-grey) !important; }

/* Menu icon is white while the header is transparent over a photo, dark otherwise */
html.nav-over-image .menu-button-icon { filter: invert(1); }

/* Date fields: stop iPhone Safari from sizing them wider than the form */
input[type="date"].response-field {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 40px;
  box-sizing: border-box;
}
input[type="date"].response-field::-webkit-date-and-time-value { text-align: left; }
.form-field { min-width: 0; }

/* Home hero: the 767px breakpoint's 150px margin-bottom was still cascading down
   under the 479px breakpoint's taller 88vh hero, stacking into a huge gap before
   the intro blurb. Hero is already nearly full-screen at this width, so cut it back. */
@media screen and (max-width: 479px) {
  .hero.home { margin-bottom: 40px; }
}