/* Canaan Adventures — shared styles (recreated from Claude Design handoff) */
html { scroll-behavior: smooth; }
body { margin: 0; background: #0C1424; font-family: 'Jost', sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }

/* Hover states (converted from the prototype's inline style-hover).
   !important is required to override the elements' inline base styles. */
a { transition: color .2s ease, background .2s ease, border-color .2s ease; }
.hv-gold:hover         { color: #E3C87E !important; }
.hv-bronze:hover       { color: #A5843B !important; }
.hv-bg-gold:hover      { background: #E3C87E !important; }
.hv-bg-navy:hover      { background: #101B30 !important; }
.hv-outline:hover      { border-color: #E3C87E !important; color: #E3C87E !important; }
.hv-outline-navy:hover { border-color: #1A2436 !important; color: #1A2436 !important; }
.hv-border-navy:hover  { border-color: #1A2436 !important; }
.hv-details-dark:hover { color: #F4F1EA !important; border-color: #F4F1EA !important; }
.hv-details-light:hover{ color: #1A2436 !important; border-color: #1A2436 !important; }

/* Image placeholder slots (replaces the drag-fill <image-slot> component).
   Reads as a "photo goes here" panel on both light and dark sections. */
.img-slot {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(135deg, #101B30 0%, #18263F 100%);
  border: 1px solid rgba(198,162,78,0.28);
  color: #93A0B6; padding: 24px;
}
.img-slot > span {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 240px; font-size: 14px; letter-spacing: 0.05em; line-height: 1.5;
}
.img-slot .ph-mark {
  font-size: 26px; color: #C6A24E; line-height: 1;
}
.img-slot .ph-tag {
  font-size: 11px; letter-spacing: 0.3em; color: #C6A24E; font-weight: 500;
}