/* ============================================================================
   Microform Precision — site header
   Lockup and contact on top, navigation in its own tinted band beneath, with
   the search field at the end of the band. Montserrat on the lockup and the
   menu; everything you read stays Open Sans.

   All classes are namespaced .mfh-* so nothing here collides with the existing
   theme. No Bootstrap, no jQuery, no icon font — the dropdowns and the mobile
   menu run on header.js, which is about forty lines.
   ========================================================================== */

.mfh {
  background: #fff;
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  position: relative;
  z-index: 50;
}

.mfh__row1 {
  max-width: 1170px;
  margin: 0 auto;
  padding: 18px 15px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* ---- the lockup: SVG mark + live type, replacing the logo PNG ------------ */
.mfh__lock {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-width: 0;
}
.mfh__lock svg { flex: none; width: 42px; height: 42px; display: block; }
.mfh__wm { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mfh__name {
  font-size: 21px;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
}
.mfh__name b { font-weight: 700; color: #1c1b1f; }
.mfh__name i { font-style: normal; font-weight: 400; color: #b8b8b8; }
.mfh__tagline {
  font-size: 8.5px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8a8a8c;
  white-space: nowrap;
}

/* ---- contact ------------------------------------------------------------- */
.mfh__contact { display: flex; align-items: center; gap: 16px; }
.mfh__mail,
.mfh__tel {
  font-size: 14px;
  font-weight: 600;
  color: #1c1b1f;
  text-decoration: none;
  white-space: nowrap;
}
.mfh__mail { font-weight: 500; color: #55545a; }
.mfh__mail:hover,
.mfh__tel:hover { color: #ee2e24; }
.mfh__quote {
  border: 1px solid #ee2e24;
  color: #ee2e24;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 9px 16px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.mfh__quote:hover,
.mfh__quote:focus { background: #ee2e24; color: #fff; }

/* ---- the menu button, phone only ---------------------------------------- */
.mfh__burger {
  display: none;
  align-items: center;
  gap: 9px;
  border: 1px solid #cfcdc9;
  background: #fff;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #3a3a3c;
  cursor: pointer;
}
.mfh__burger:hover { border-color: #ee2e24; color: #ee2e24; }
.mfh__burger i {
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
  position: relative;
}
.mfh__burger i::before,
.mfh__burger i::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  background: currentColor;
}
.mfh__burger i::before { top: -5px; }
.mfh__burger i::after { top: 5px; }
.mfh__burger[aria-expanded="true"] i { background: transparent; }
.mfh__burger[aria-expanded="true"] i::before { top: 0; transform: rotate(45deg); }
.mfh__burger[aria-expanded="true"] i::after { top: 0; transform: rotate(-45deg); }

/* ---- navigation band ----------------------------------------------------- */
.mfh__band {
  background: #f7f6f4;
  border-top: 1px solid #ecebe7;
  border-bottom: 1px solid #e6e4e0;
}
.mfh__bandinner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.mfh__nav > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 24px;
}
.mfh__nav ul { margin: 0; padding: 0; list-style: none; }
.mfh__nav li { position: relative; }
.mfh__nav > ul > li > a {
  display: block;
  padding: 14px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #55545a;
  text-decoration: none;
  white-space: nowrap;
}
.mfh__nav > ul > li > a:hover,
.mfh__nav > ul > li:focus-within > a { color: #ee2e24; }
.mfh__nav > ul > li > a[aria-current="page"] {
  color: #ee2e24;
  box-shadow: inset 0 -2px 0 #ee2e24;
}
.mfh__sub a[aria-current="page"] { color: #ee2e24; }

/* the caret is a real button, so the submenu opens from the keyboard too */
.mfh__caret {
  position: absolute;
  top: 50%;
  right: -14px;
  transform: translateY(-50%);
  width: 14px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: #9a9896;
}
.mfh__caret::before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
}
.mfh__caret:hover { color: #ee2e24; }

/* ---- submenus ------------------------------------------------------------ */
.mfh__sub {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 248px;
  margin: 0;
  padding: 6px 0;
  background: #fff;
  border: 1px solid #e2e0dc;
  box-shadow: 0 10px 24px rgba(28, 27, 31, .09);
  display: none;
  flex-direction: column;
  gap: 0;
  z-index: 60;
}
.mfh__nav li:hover > .mfh__sub,
.mfh__nav li:focus-within > .mfh__sub,
.mfh__nav li > .mfh__sub[data-open="true"] { display: flex; }
.mfh__sub li { width: 100%; }
.mfh__sub a {
  display: block;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #3a3a3c;
  text-decoration: none;
  white-space: nowrap;
}
.mfh__sub a:hover,
.mfh__sub a:focus { background: #f7f6f4; color: #ee2e24; }

/* ---- search -------------------------------------------------------------- */
.mfh__search { display: flex; align-items: center; flex: none; }
.mfh__srlabel {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.mfh__search input[type="search"] {
  width: 168px;
  padding: 7px 10px;
  border: 1px solid #ddd9d4;
  border-right: 0;
  border-radius: 0;
  background: #fff;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.3;
  color: #1c1b1f;
  -webkit-appearance: none;
  appearance: none;
}
.mfh__search input[type="search"]::placeholder { color: #9a9896; }
.mfh__search input[type="search"]:focus {
  outline: 0;
  border-color: #ee2e24;
}
.mfh__search button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 33px;
  padding: 0;
  border: 1px solid #ddd9d4;
  background: #fff;
  color: #55545a;
  cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s;
}
.mfh__search button svg { width: 15px; height: 15px; display: block; }
.mfh__search button:hover,
.mfh__search input[type="search"]:focus + button {
  background: #ee2e24;
  border-color: #ee2e24;
  color: #fff;
}
.mfh__search button:focus-visible { outline: 2px solid #ee2e24; outline-offset: 2px; }

/* ---- narrow screens ------------------------------------------------------
   The contact block and the band fold away behind the Menu button; the band
   then becomes a stacked panel with search at the top. */
@media (max-width: 900px) {
  .mfh__row1 { padding: 14px 15px 13px; }
  .mfh__name { font-size: 18px; }
  .mfh__lock svg { width: 36px; height: 36px; }
  .mfh__contact { display: none; }
  .mfh__burger { display: inline-flex; }

  .mfh__band { display: none; }
  .mfh__band[data-open="true"] { display: block; }
  .mfh__bandinner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 15px 16px;
  }

  .mfh__search { order: -1; margin: 0 0 12px; }
  .mfh__search input[type="search"] { width: 100%; flex: 1; }

  .mfh__nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .mfh__nav > ul > li { border-top: 1px solid #e6e4e0; }
  .mfh__nav > ul > li > a { padding: 12px 0; font-size: 12.5px; }

  .mfh__caret {
    position: static;
    transform: none;
    width: 44px;
    height: 44px;
    margin: -44px 0 0 auto;
    display: block;
  }
  .mfh__caret::before { transform: rotate(45deg); }
  .mfh__caret[aria-expanded="true"]::before { transform: rotate(-135deg) translate(-2px, -2px); }

  /* hovering a list on a touch screen should not open anything */
  .mfh__nav li:hover > .mfh__sub,
  .mfh__nav li:focus-within > .mfh__sub { display: none; }
  .mfh__nav li > .mfh__sub[data-open="true"] { display: flex; }
  .mfh__sub {
    position: static;
    min-width: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0 0 8px 14px;
  }
  .mfh__sub a { padding: 7px 0; }

  /* the contact details move into the open panel */
  .mfh__mobile { display: flex; flex-direction: column; gap: 10px;
                 border-top: 1px solid #e6e4e0; padding: 14px 0 0; margin: 10px 0 0; }
  .mfh__mobile a { font-size: 13.5px; font-weight: 600; color: #1c1b1f;
                   text-decoration: none; }
  .mfh__mobile .mfh__quote { align-self: flex-start; }
}

.mfh__mobile { display: none; }

/* Below about 420px the Menu button and the wordmark were colliding: the
   wordmark is nowrap, so it refused to give up any width. */
@media (max-width: 420px) {
  .mfh__row1 { gap: 10px; }
  .mfh__lock { min-width: 0; gap: 9px; }
  .mfh__lock svg { width: 32px; height: 32px; }
  .mfh__name { font-size: 16px; }
  .mfh__tagline { display: none; }
  .mfh__burger { padding: 8px 11px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .mfh__quote, .mfh__search button { transition: none; }
}

/* ============================================================================
   Page banner subtitle
   The theme's banner prints the page title; this is the optional line under it,
   filled per page from a custom field. Lives here because header.css is the
   stylesheet every page already loads.
   ========================================================================== */
.entry-subtitle {
  margin: 14px auto 0;
  max-width: 56ch;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  color: rgba(255, 255, 255, .93);
  /* the banner mask is only 54% black, so the type carries its own shadow */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .45);
}
@media (max-width: 700px) {
  .entry-subtitle { font-size: 15px; max-width: none; }
}