/* LiveUE / Urban Exchange microsite chrome + page styles.
   SCOPED to .ue-page only - never loaded on, and must never leak into, the
   main matchboxrealty.com site (assets/app.css + assets/chrome.js). The live
   microsite at matchboxrealty.com/liveue/ genuinely has its own distinct
   look: a dark contact-info bar, a white nav bar with the black/white "URBAN
   EXCHANGE" wordmark, a Lato body font (confirmed via getComputedStyle on
   the live site - unlike the main site, this is a real Google Font, not an
   Adobe Fonts substitution), and a light-gray footer. Colors/measurements
   below were sampled from the live site with getComputedStyle() on
   2026-09-11: contact bar #353434 bg / white text, body links #333
   underlined (no green/red brand accent on this microsite), footer #f6f6f6. */

.ue-page {
  margin: 0;
  font-family: "Lato", -apple-system, "Segoe UI", sans-serif;
  color: #333;
  background: #fff;
  line-height: 1.6;
}
.ue-page * { box-sizing: border-box; }
.ue-page img { max-width: 100%; display: block; }
.ue-page a { color: #333; text-decoration: underline; }
.ue-page a:hover { color: #000; }
.ue-page h1, .ue-page h2, .ue-page h3 { font-family: "Lato", sans-serif; font-weight: 700; color: #222; margin: 0 0 0.5em; }

.ue-container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* Dark contact-info bar */
.ue-topbar {
  background: #353434;
  color: #fff;
  font-size: 0.85rem;
}
.ue-topbar .ue-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.ue-topbar a { color: #fff; text-decoration: none; }
.ue-topbar a:hover { text-decoration: underline; }
.ue-topbar__social { display: flex; gap: 12px; margin-left: auto; list-style: none; padding: 0; margin-top: 0; margin-bottom: 0; }
.ue-topbar__social a { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }

/* White nav bar with wordmark logo */
.ue-navbar {
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
}
.ue-navbar .ue-container {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.ue-navbar__logo img { height: 56px; width: auto; }
.ue-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.ue-nav > li { position: relative; }
.ue-nav > li > a { display: inline-block; padding: 8px 0; text-decoration: none; }
.ue-nav > li > a:hover { color: #a71c20; }
.ue-nav__submenu {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 220px;
  background: #fff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  text-transform: none;
  font-weight: 400;
  z-index: 20;
  display: none;
}
.ue-nav > li:hover .ue-nav__submenu,
.ue-nav > li:focus-within .ue-nav__submenu { display: block; }
.ue-nav__submenu a { display: block; padding: 8px 16px; text-decoration: none; }
.ue-nav__submenu a:hover { background: #f6f6f6; }
.ue-nav__toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: #222;
}

@media (max-width: 1280px) {
  .ue-navbar .ue-container { flex-wrap: wrap; }
  .ue-nav__toggle { display: block; order: 2; }
  .ue-nav {
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    margin: 0;
    display: none;
  }
  .ue-navbar.is-open .ue-nav { display: flex; }
  .ue-nav > li > a { display: block; padding: 10px 0; border-top: 1px solid #eee; }
  .ue-nav__submenu { position: static; border: 0; box-shadow: none; display: block; padding-left: 12px; }
  .ue-nav > li:hover .ue-nav__submenu, .ue-nav > li:focus-within .ue-nav__submenu { display: block; }
}

/* Hero
   The live microsite's .page-header has a real bxSlider photo carousel behind
   the title (confirmed via DOM inspection on /liveue/faqs/, /liveue/intro/ and
   /liveue/floorplans-pricing/ on 2026-09-11 - the plugin markup, real hotlinked
   photos, and auto-advancing slide position all present on every page checked).
   The exact photo SET varies per page on the live site (faqs/ cycles ~5 photos,
   intro/ cycles 2, floorplans-pricing/ shows just 1), but the pattern - a
   rotating real-photo background behind the white title - is shared by every
   /liveue/* page. We don't have per-page photo assignments transcribed, so
   this reproduces the pattern with one shared rotation (the 10 real,
   hotlinkable photos confirmed on faqs/) applied uniformly across pages,
   dependency-free (no bxSlider): a CSS @keyframes animation swaps
   background-image at each step - browsers don't tween background-image, so
   this reads as a slideshow snapping between photos, which is closer to the
   live site's slide-style transition than a crossfade would be anyway.
   The live site has no separate overlay div; it keeps its title legible with
   plain white text + a drop shadow over real photos. Our seed photos are more
   variable in brightness/composition than a hand-picked set, so we add a
   semi-transparent dark tint (::before) as a belt-and-suspenders contrast aid -
   still matches the "dark, muted photo behind white text" look. */
.ue-hero {
  position: relative;
  overflow: hidden;
  background: #222;
  color: #fff;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
}
.ue-hero__inner { padding: 32px 0; position: relative; z-index: 2; }
.ue-hero h1 { color: #fff; font-size: 2.4rem; margin: 0; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.ue-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  animation: ue-hero-slide 40s infinite;
}
.ue-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.45);
}

@keyframes ue-hero-slide {
  0%, 10%     { background-image: url("https://matchboxrealty.com/liveue/wp-content/uploads/sites/14/2017/05/image-10-2.jpg"); }
  10.01%, 20% { background-image: url("https://d2xoii0w5vafme.cloudfront.net/uploads/2017/05/community-room-1792.jpg"); }
  20.01%, 30% { background-image: url("https://d2xoii0w5vafme.cloudfront.net/uploads/2017/05/image-9-2.jpg"); }
  30.01%, 40% { background-image: url("https://d2xoii0w5vafme.cloudfront.net/uploads/2017/05/image-3-2.jpg"); }
  40.01%, 50% { background-image: url("https://d2xoii0w5vafme.cloudfront.net/uploads/2017/05/Urban-apartments-4762.jpg"); }
  50.01%, 60% { background-image: url("https://d2xoii0w5vafme.cloudfront.net/uploads/2017/05/secured-parking-1032.jpg"); }
  60.01%, 70% { background-image: url("https://d2xoii0w5vafme.cloudfront.net/uploads/2017/05/downtown-loft-2247.jpg"); }
  70.01%, 80% { background-image: url("https://d2xoii0w5vafme.cloudfront.net/uploads/2017/05/ue-mason-hburg-2551.jpg"); }
  80.01%, 90% { background-image: url("https://d2xoii0w5vafme.cloudfront.net/uploads/2017/05/ue-large-windows-2361.jpg"); }
  90.01%, 100% { background-image: url("https://d2xoii0w5vafme.cloudfront.net/uploads/2017/05/open-floorplan-2302.jpg"); }
}

@media (prefers-reduced-motion: reduce) {
  .ue-hero::after {
    animation: none;
    background-image: url("https://matchboxrealty.com/liveue/wp-content/uploads/sites/14/2017/05/image-10-2.jpg");
  }
}

/* Sections */
.ue-section { padding: 40px 0; }
.ue-section--alt { background: #f6f6f6; }
.ue-section h2 { font-size: 1.6rem; }
.ue-section h3 { font-size: 1.15rem; margin-top: 1.5em; }
.ue-prose p { margin: 0 0 1em; }
.ue-prose ul { margin: 0 0 1em; padding-left: 1.3em; }
.ue-prose li { margin-bottom: 0.4em; }

.ue-cta {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 22px;
  background: #353434;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border-radius: 3px;
}
.ue-cta:hover { background: #000; color: #fff; text-decoration: none; }

.ue-directory { margin: 0 0 2em; }
.ue-directory h3 { border-bottom: 2px solid #e5e5e5; padding-bottom: 6px; }
.ue-directory dl { margin: 0 0 1.2em; }
.ue-directory dt { font-weight: 700; margin-top: 1em; }
.ue-directory dd { margin: 0 0 0.2em; color: #555; }

.ue-quote {
  border-left: 4px solid #353434;
  padding-left: 16px;
  font-style: italic;
  color: #555;
  margin: 1.5em 0;
}

/* Footer */
.ue-footer {
  background: #f6f6f6;
  color: #212121;
  font-size: 0.9rem;
}
.ue-footer .ue-container { padding-top: 36px; padding-bottom: 20px; }
.ue-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 20px;
}
.ue-footer h3 { font-size: 1.05rem; margin-bottom: 0.6em; }
.ue-footer ul { list-style: none; margin: 0; padding: 0; }
.ue-footer li { margin-bottom: 0.4em; }
.ue-footer a { color: #333; }
.ue-footer__social { display: flex; gap: 12px; list-style: none; margin: 10px 0; padding: 0; }
.ue-footer__bottom {
  border-top: 1px solid #e0e0e0;
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.ue-footer__credit { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.ue-footer__credit img { height: 20px; width: auto; }

@media (max-width: 700px) {
  .ue-footer__grid { grid-template-columns: 1fr; }
  .ue-hero h1 { font-size: 1.8rem; }
}