/*
 * DELIBERATE DESIGN FIXES — divergences from the live Squarespace site,
 * approved by Bao 2026-07-12 ("it's possible that the original site has
 * them but we want to fix its bugs and major design issues").
 *
 * Keep each rule documented; this file is the ledger of where the clone
 * intentionally improves on live. (The parity clone's compensating patches
 * live in clone-fixes.css; runtime design fixes in clone-interactive.js §8.)
 */

/* Forms sat flush against the bottom edge of their dark sections on phones
   (SUBMIT touching the section boundary). Give every form breathing room. */
@media (max-width: 767px) {
  .sqs-block-form .form-wrapper {
    margin-bottom: 40px;
  }
}

/* Form name row: our rebuilt form markup lacks the negative gutter
   Squarespace's stock fieldset CSS assumes, so First/Last name sat indented
   7px and narrower than the fields below (Bao: "forms not nicely aligned").
   Match live's geometry: flush left/right edges, 10px between the two. */
.form-item.fields.name {
  display: flex;
  justify-content: space-between;
}
.form-item.fields.name .field {
  margin: 0;
  width: calc(50% - 5px);
  flex: none;
}

/* Open mobile menu: the overlay is white and the header visual goes
   transparent, leaving the white logo + white burger-X nearly invisible.
   Flip them dark while the menu is open. */
body.header--menu-open #header .top-bun,
body.header--menu-open #header .patty,
body.header--menu-open #header .bottom-bun {
  background-color: #000 !important;
}
body.header--menu-open #header .header-title-logo img,
body.header--menu-open #header .header-mobile-logo img {
  filter: invert(1);
}
body.header--menu-open #header .header-title-text a,
body.header--menu-open #header .header-title {
  color: #000;
}

/* The closed mobile-menu overlay is a full-viewport fixed element with
   explicit pointer-events:auto in stock CSS (only visibility:hidden keeps it
   from swallowing taps — fragile on iOS). Make it inert whenever closed. */
body:not(.header--menu-open) .header-menu {
  pointer-events: none;
}

/* Footer wordmark: object-fit contain + 50% focal point centered the logo
   art inside its box while the social icons under it are left-aligned
   (Bao flagged the misalignment). Left-align the wordmark. The inline style
   reads object-position from this variable, so no !important needed. */
#footer-sections .sqs-block-image {
  --image-component-focal-point: 0% 50%;
}