body {
  font-family: system-ui, Arial, sans-serif;
  margin: 0;
}

/* Your base.html uses Bootstrap container classes,
   but you still have this .container rule — keep it harmless. */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}

.site-header {
  border-bottom: 1px solid #ddd;
}

.logo {
  font-weight: 700;
  text-decoration: none;
  margin-right: 16px;
}

.nav a {
  margin-right: 12px;
  text-decoration: none;
}

.site-footer {
  border-top: 1px solid #ddd;
  margin-top: 40px;
  padding: 16px 0;
}

/* --- Guidebook cards --- */

.kb-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  border-radius: 10px;
  overflow: hidden;
}

.kb-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.kb-card .form-label {
  font-weight: 500;
  font-size: 0.75rem;
  color: #666;
}

/* Thumbnail images */
.card-img-top {
  border-bottom: 1px solid #eee;
}

/* --- Histogram (clickable bars + labels) --- */

.kb-histo-wrap {
  margin-top: 6px;
}

/* Bars row */
.kb-histo {
  height: 88px;                 /* bar + label space */
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 6px 0 2px;
}

/* Each grade column is an <a> so it can be clicked */
.kb-bar-link {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 4px;
  text-decoration: none;
  position: relative;
  z-index: 2;                   /* above stretched-link */
}

/* The actual bar */
.kb-bar {
  width: 100%;
  border-radius: 2px;
  background: rgba(0,0,0,0.35);
  transition: background 0.15s ease;
}

.kb-bar:hover {
  background: rgba(0,0,0,0.55);
}

.kb-bar--empty {
  opacity: 0.2;
}

/* Grade label under the bar */
.kb-grade{
  text-align: center;
  font-size: 0.6rem;
  line-height: 1;
  color: #6c757d;
  user-select: none;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.kb-grade{
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  font-size: 0.6rem;
}

.kb-bar-link:hover .kb-grade {
  color: #495057;
}

/* Ensure histogram and buttons stay clickable above stretched-link */
.kb-histo-clickable {
  position: relative;
  z-index: 2;
}

.kb-card .btn {
  position: relative;
  z-index: 2;
}

.kb-card .stretched-link {
  z-index: 1;
}

/* --- Map tooltip label styling (if you use it elsewhere) --- */

.kb-map-label {
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

.kb-map-label:before {
  display: none;
}

.kb-label{
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

.kb-card .border.rounded-3 {
  background: rgba(0,0,0,0.02);
}

.kb-toast-wrap{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2000;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}

.kb-toast{
  pointer-events: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

/* --- Fix star appearance (view + edit mode) --- */
.kb-stars,
.kb-stars-view {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.kb-star {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 2px !important;

  font-size: 16px !important;
  line-height: 1 !important;

  color: #c9c9c9 !important;
  cursor: pointer;
}

.kb-star.is-on {
  color: #f2b01e !important;
}

.kb-star:hover {
  color: #f2b01e;
}

/* --- Landing gallery --- */
.kb-gallery{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}

.kb-gallery-item{
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: #eee;
}

.kb-gallery-item img{
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
  transition: transform .15s ease;
}

.kb-gallery-item:hover img{
  transform: scale(1.03);
}

/* =========================
   Home Gallery: Masonry Grid
   ========================= */

.kb-masonry {
  column-count: 3;
  column-gap: 2px;        /* horizontal spacing */
}

@media (max-width: 1200px) { .kb-masonry { column-count: 3; } }
@media (max-width: 768px)  { .kb-masonry { column-count: 2; } }
@media (max-width: 480px)  { .kb-masonry { column-count: 1; } }

.kb-masonry-item {
  position: relative;
  display: inline-block;
  width: 100%;

  /* ✅ vertical spacing between tiles (NO negative margin needed) */
  margin: 0 0 2px;

  break-inside: avoid;
  -webkit-column-break-inside: avoid;

  border-radius: 0;      /* no rounding */
  overflow: hidden;
  text-decoration: none;

  /* prevents inline-block baseline gap issues */
  vertical-align: top;

  /* optional: helps avoid odd column layout glitches */
  transform: translateZ(0);
}

.kb-masonry-item img {
  width: 100%;
  height: auto;
  display: block;

  transition: transform 0.25s ease;
}

/* Overlay container */
.kb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;

  background: linear-gradient(
    to top,
    rgba(0,0,0,0.6),
    rgba(0,0,0,0.0) 60%
  );

  opacity: 0;
  transition: opacity 0.25s ease;

  /* ✅ ensures overlay doesn't affect clicking */
  pointer-events: none;
}

/* Title text */
.kb-overlay-title {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 10px 12px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* Hover effects */
.kb-masonry-item:hover .kb-overlay {
  opacity: 1;
}

.kb-masonry-item:hover img {
  transform: scale(1.02);
}

/* Optional: subtle hover elevation (kept subtle, but safe) */
.kb-masonry-item:hover {
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}

/* =========================
   Guidebook Regions: KY SVG Map
   ========================= */

.kb-ky-map-wrap {
  max-width: 980px;
  margin: 0 auto;
}

.kb-ky-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Don't let the outline intercept clicks */
#state_outline {
  pointer-events: none;
}

/* Interactive regions */
.region {
  cursor: pointer;
}

.region,
.region path {
  transition: opacity 150ms ease, filter 150ms ease;
}

/* Hover */
.region:hover,
.region:hover path {
  filter: brightness(1.12);
  opacity: 0.96;
  stroke: #ffffff;
  stroke-width: 0.6;
}

/* Keyboard focus */
.region:focus-visible,
.region:focus-visible path {
  outline: none;
  filter: brightness(1.18);
}

a.kb-sort {
  color: inherit;
  text-decoration: none;
}

a.kb-sort:hover {
  text-decoration: underline;
}

.kb-sort-disabled a.kb-sort {
  pointer-events: none;
  opacity: 0.55;
  text-decoration: none !important;
}

.kb-media-ico{
  display: inline-block;
  margin-left: 6px;
  font-size: 0.95rem;
  line-height: 1;
  vertical-align: text-top;
  opacity: 0.85;
}
.kb-media-ico:hover{
  opacity: 1;
}
/* Profile → Recent activity hover polish */
.list-group-item.position-relative {
  transition: background-color 0.12s ease, transform 0.12s ease;
}

.list-group-item.position-relative:hover {
  background-color: rgba(0, 0, 0, 0.02); /* subtle light lift */
}

.list-group-item.position-relative:active {
  background-color: rgba(0, 0, 0, 0.04); /* nicer mobile tap feedback */
}
.list-group-item.position-relative:hover {
  background-color: rgba(0, 0, 0, 0.04);
  transform: translateY(-1px);
}