/* City page top section ([pvp_city_hero], inc/city_hero.php). Added 2026-10-09.
   Option A: photo with the title, white "Where is your wedding?" card overlapping the photo's
   bottom edge, with three location slots (Ceremony / Formals / Reception). */

.pvp-city-top {
  --pvp-teal: #0BB7B3;
  --pvp-teal-dark: #0A7F7C;
  --pvp-navy: #1A395C;
  --pvp-ink: #1A1A2E;
  --pvp-text: #555;
  font-family: 'Fira Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Elements hidden by the script stay hidden even where a rule sets display. */
.pvp-city-top [hidden] { display: none !important; }

/* ---------- Photo and title ---------- */
.pvp-city-top .pvp-hero {
  position: relative;
  padding: 64px 24px 170px;
  text-align: center;
  background-color: #2a3340;
  background-image: linear-gradient(rgba(10, 18, 30, .55), rgba(10, 18, 30, .55)), var(--pvp-hero-img, none);
  background-size: cover;
  background-position: 50% 55%;
  background-repeat: no-repeat;
}
.pvp-city-top .pvp-hero__inner { max-width: 900px; margin: 0 auto; }

.pvp-city-top .pvp-hero__crumbs { font-size: 14px; color: #dfe7ee; }
.pvp-city-top .pvp-hero__crumbs a { color: #bff1ef; text-decoration: none; }
.pvp-city-top .pvp-hero__crumbs a:hover { text-decoration: underline; }
.pvp-city-top .pvp-hero__crumbs span { margin: 0 8px; opacity: .7; }

.pvp-city-top .pvp-hero__title {
  margin: 14px 0;
  font-family: 'Old Standard TT', Georgia, serif;
  font-weight: 400;
  font-size: 54px;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.pvp-city-top .pvp-hero__lede { max-width: 720px; margin: 0 auto; font-size: 19px; line-height: 1.5; color: #eef2f5; }
.pvp-city-top .pvp-hero__counts { margin: 16px 0 0; font-size: 14px; color: #dfe7ee; }
.pvp-city-top .pvp-hero__counts b { color: #fff; font-weight: 600; }

/* ---------- Card ---------- */
.pvp-city-top .pvp-hero__card-wrap {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin: -120px auto 0;
  padding: 0 24px;
}

.pvp-city-top .pvp-loc-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(16, 24, 40, .18);
  padding: 26px 28px 22px;
  text-align: left;
}

.pvp-city-top .pvp-loc-card__demo {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #FFF3D6;
  color: #5C3D00;
  font-size: 12px;
  font-weight: 600;
}

.pvp-city-top .pvp-loc-card__title {
  margin: 0 0 6px;
  font-family: 'Fira Sans Extra Condensed', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  color: var(--pvp-ink);
}
.pvp-city-top .pvp-loc-card__help { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--pvp-text); }

.pvp-city-top .pvp-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.pvp-city-top .pvp-slot { position: relative; min-width: 0; }
.pvp-city-top .pvp-slot__label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pvp-navy);
}
/* Plain select (no-JavaScript fallback) */
.pvp-city-top .pvp-slot__select {
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 12px;
  border: 1.5px solid #cfd8dc;
  border-radius: 12px;
  background: #fff;
  color: var(--pvp-ink);
  font: 16px 'Fira Sans', sans-serif;
}

.pvp-city-top .pvp-loc-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  font-size: 14px;
  color: var(--pvp-text);
}
.pvp-city-top .pvp-loc-card__btn {
  height: 52px;
  margin: 0;
  padding: 0 30px;
  border: 0;
  border-radius: 12px;
  background: var(--pvp-teal);
  color: var(--pvp-ink);
  font: 600 16px 'Fira Sans', sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.pvp-city-top .pvp-loc-card__btn:hover,
.pvp-city-top .pvp-loc-card__btn:focus { background: #09a3a0; color: var(--pvp-ink); }
.pvp-city-top .pvp-loc-card__missing { color: var(--pvp-teal-dark); font-weight: 500; }
.pvp-city-top .pvp-loc-card__fine { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: #6b7780; }
.pvp-city-top .pvp-loc-card__msg { flex-basis: 100%; margin: 0; color: #a12c20; font-size: 14px; }
.pvp-city-top .pvp-loc-card.is-flagged .pvp-dd__trigger { border-color: #c0392b; }

.pvp-city-top a:focus-visible,
.pvp-city-top button:focus-visible { outline: 3px solid var(--pvp-navy); outline-offset: 2px; }

/* ---------- Styled dropdown (built by assets/js/city_hero.js) ---------- */
.pvp-city-top .pvp-dd { position: relative; }

.pvp-city-top .pvp-dd__trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 40px 0 14px;
  border: 1.5px solid #cfd8dc;
  border-radius: 12px;
  background: #F9FAFA;
  color: #6b7780;
  font: 16px 'Fira Sans', sans-serif;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.pvp-city-top .pvp-dd__trigger:hover { border-color: var(--pvp-teal); background: #fff; color: #6b7780; }
.pvp-city-top .pvp-dd.is-open .pvp-dd__trigger,
.pvp-city-top .pvp-dd__trigger:focus-visible {
  border-color: var(--pvp-teal);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(11, 183, 179, .15);
  outline: none;
}
.pvp-city-top .pvp-dd__trigger.has-value { color: var(--pvp-ink); font-weight: 500; background: #fff; border-color: #9fd9d7; }
.pvp-city-top .pvp-dd__pin { flex: 0 0 auto; color: var(--pvp-teal-dark); }
.pvp-city-top .pvp-dd__label { flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pvp-city-top .pvp-dd__chev {
  position: absolute;
  right: 14px;
  top: 18px;
  color: var(--pvp-navy);
  transition: transform .15s;
  pointer-events: none;
}
.pvp-city-top .pvp-dd.is-open .pvp-dd__chev { transform: rotate(180deg); }
.pvp-city-top .pvp-dd__trigger.has-value .pvp-dd__chev { display: none; }

.pvp-city-top .pvp-dd__clear {
  position: absolute;
  right: 8px;
  top: 10px;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #EEF2F2;
  color: var(--pvp-navy);
  font-size: 18px;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
}
.pvp-city-top .pvp-dd__clear:hover,
.pvp-city-top .pvp-dd__clear:focus { background: #dbe5e5; color: var(--pvp-navy); }

.pvp-city-top .pvp-dd__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  width: max(100%, 320px);
  background: #fff;
  border: 1px solid #e3e9ea;
  border-radius: 14px;
  box-shadow: 0 20px 44px rgba(16, 24, 40, .18);
  overflow: hidden;
}
.pvp-city-top .pvp-slot:last-child .pvp-dd__panel { left: auto; right: 0; }

.pvp-city-top .pvp-dd__search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px;
  padding: 0 12px;
  border: 1px solid #e3e9ea;
  border-radius: 10px;
  background: #F9FAFA;
  color: #8A96A3;
}
.pvp-city-top .pvp-dd__search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pvp-ink);
  font: 15px 'Fira Sans', sans-serif;
  box-shadow: none;
}
.pvp-city-top .pvp-dd__search input:focus { outline: none; box-shadow: none; }
.pvp-city-top .pvp-dd__search:focus-within { border-color: var(--pvp-teal); background: #fff; }

.pvp-city-top .pvp-dd__list { max-height: 300px; overflow-y: auto; padding: 0 6px 8px; overscroll-behavior: contain; }

.pvp-city-top .pvp-dd__group {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 12px 10px 6px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pvp-teal-dark);
}
.pvp-city-top .pvp-dd__group.is-muted { color: #8A96A3; }

.pvp-city-top .pvp-dd__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--pvp-ink);
  font-size: 15px;
  cursor: pointer;
}
.pvp-city-top .pvp-dd__opt:hover,
.pvp-city-top .pvp-dd__opt.is-active { background: #F1FAF9; }
.pvp-city-top .pvp-dd__opt.is-selected { background: #E3F6F5; font-weight: 600; }
.pvp-city-top .pvp-dd__name { flex: 1 1 auto; min-width: 0; }
.pvp-city-top .pvp-dd__meta { flex: 0 0 auto; font-size: 13px; color: var(--pvp-teal-dark); font-weight: 500; white-space: nowrap; }
.pvp-city-top .pvp-dd__badge {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: #EEF2F2;
  color: #1A395C;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.pvp-city-top .pvp-dd__empty { margin: 4px 16px 14px; font-size: 14px; color: var(--pvp-text); }

/* ---------- Phones and narrow screens ---------- */
@media (max-width: 900px) {
  .pvp-city-top .pvp-slots { grid-template-columns: 1fr; gap: 12px; }
  .pvp-city-top .pvp-dd__panel,
  .pvp-city-top .pvp-slot:last-child .pvp-dd__panel { left: 0; right: 0; width: auto; }
}
@media (max-width: 767px) {
  .pvp-city-top .pvp-hero { padding: 40px 16px 120px; }
  .pvp-city-top .pvp-hero__title { font-size: 34px; }
  .pvp-city-top .pvp-hero__lede { font-size: 17px; }
  .pvp-city-top .pvp-hero__card-wrap { margin-top: -90px; padding: 0 16px; }
  .pvp-city-top .pvp-loc-card { padding: 22px 18px 18px; }
  .pvp-city-top .pvp-loc-card__title { font-size: 26px; }
  .pvp-city-top .pvp-loc-card__btn { flex: 1 1 100%; }
  .pvp-city-top .pvp-dd__list { max-height: 260px; }
}

.pvp-city-top .pvp-loc-card__help strong { font-weight: 500; color: var(--pvp-ink); }

/* Places without photos yet: visible but not selectable (2026-10-10). */
.pvp-city-top .pvp-dd__opt.is-empty { cursor: default; color: #8A96A3; }
.pvp-city-top .pvp-dd__opt.is-empty:hover { background: transparent; }
.pvp-city-top .pvp-dd__opt.is-empty .pvp-dd__meta {
  padding: 2px 8px; border-radius: 999px; background: #F1F3F4; color: #6b7780; font-size: 12px; font-weight: 500;
}
.pvp-city-top .pvp-dd__opt.is-empty .pvp-dd__badge { opacity: .6; }