/* ZipYell.com — minimal overrides on top of Bootstrap 5.3.8 */
:root {
  --zy-brand: #1a47c2;
  --zy-brand-dark: #12348f;
  --zy-accent: #ffc933;
  --bs-link-color: #1a47c2;
  --bs-link-color-rgb: 26, 71, 194;
  --bs-link-hover-color: #12348f;
  --bs-link-hover-color-rgb: 18, 52, 143;
  --bs-primary: #1a47c2;
  --bs-primary-rgb: 26, 71, 194;
}

body { text-rendering: optimizeLegibility; }

.bg-brand { background: var(--zy-brand); }
.navbar-brand { letter-spacing: .02em; }
.brand-mark {
  display: inline-grid; place-items: center;
  width: 1.9rem; height: 1.9rem; border-radius: .5rem;
  background: var(--zy-accent); color: #1b1b1b; font-weight: 800;
}
.nav-search .form-control { min-width: 11rem; }

.skip-link {
  position: absolute; left: .5rem; top: .5rem; z-index: 1080;
  background: #fff; padding: .5rem .75rem; border-radius: .375rem;
}

.btn-primary { --bs-btn-bg: var(--zy-brand); --bs-btn-border-color: var(--zy-brand); --bs-btn-hover-bg: var(--zy-brand-dark); --bs-btn-hover-border-color: var(--zy-brand-dark); --bs-btn-active-bg: var(--zy-brand-dark); }
.btn-outline-primary { --bs-btn-color: var(--zy-brand); --bs-btn-border-color: var(--zy-brand); --bs-btn-hover-bg: var(--zy-brand); --bs-btn-hover-border-color: var(--zy-brand); --bs-btn-active-bg: var(--zy-brand-dark); }

.hero { background: linear-gradient(135deg, #eef3ff 0%, #fff8e1 100%); }

.facts-table th { width: 34%; font-weight: 600; color: #333; }

/* Map iframe */
.map-frame { border-radius: .75rem; overflow: hidden; background: #e9ecef; }
.map-frame iframe { border-radius: .75rem; }

/* Nearby ZIP cards */
.nearby-card { transition: transform .15s ease, box-shadow .15s ease; }
.nearby-card:hover, .nearby-card:focus-within { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.08); border-color: var(--zy-brand); }
.nearby-card a { color: var(--zy-brand); }

.nearby-places { columns: 2; column-gap: 2rem; padding-left: 1.1rem; }
.nearby-places li { break-inside: avoid; margin-bottom: .25rem; }

/* Carousel */
.zip-carousel { border-radius: .75rem; overflow: hidden; background: #000; }
.zip-carousel .carousel-item img { max-height: 480px; object-fit: cover; width: 100%; height: auto; }

/* State pages */
.state-link { padding: .6rem .8rem; border: 1px solid #dee2e6; border-radius: .5rem; text-decoration: none; min-height: 44px; }
.state-link:hover, .state-link:focus { border-color: var(--zy-brand); background: #f3f6ff; }
.zip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .25rem 1rem; }
.zip-grid a { display: inline-block; padding: .3rem 0; min-height: 32px; }
.county-jump li { margin-bottom: .35rem; }
.search-links .btn { min-height: 36px; }

.site-footer { background: #1f2430; color: #e6e8ee; }
.site-footer a { color: #fff; }

.accordion-button { font-weight: 600; }

@media (max-width: 575.98px) {
  h1.display-6 { font-size: 1.6rem; }
  .lead { font-size: 1.05rem; }
  .display-5 { font-size: 2rem; }
  .nearby-places { columns: 1; }
  .zip-carousel .carousel-item img { max-height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .nearby-card { transition: none; }
  html { scroll-behavior: auto !important; }
}

/* City browsing */
.letter-bar .btn { min-width: 2.4rem; min-height: 2.4rem; font-weight: 600; }
.city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .15rem 1.25rem; }
.city-grid a { display: inline-block; padding: .3rem 0; }

/* Remote photo credits & YouTube facade */
.zip-carousel .carousel-item { position: relative; }
.photo-credit { position: absolute; left: 0; right: 0; bottom: 0; padding: .35rem .75rem 1.9rem; font-size: .75rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.75)); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.yt-facade-wrap { border-radius: .75rem; overflow: hidden; background: #000; }
.yt-facade { position: absolute; inset: 0; border: 0; padding: 0; background: #000; cursor: pointer; width: 100%; height: 100%; }
.yt-facade img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.yt-facade:hover img, .yt-facade:focus-visible img { opacity: 1; }
.yt-play { position: absolute; top: 50%; left: 50%; width: 72px; height: 50px; margin: -25px 0 0 -36px; border-radius: 12px; background: #e62117; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.yt-play::after { content: ""; position: absolute; left: 29px; top: 15px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.yt-facade-wrap iframe { border: 0; }
.credits ul { padding-left: 1.1rem; }
.city-photo { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }
.site-logo { width: auto; max-width: 260px; object-fit: contain; }