/* ==================================================================
   BUFFALO TRAIL FAMILY — shared cross-property components
   Identical file on buffalotrailcabins.com, buffalotrailva.com and
   trailheadatvresort.com. Depends on style.css tokens.
   ================================================================== */

/* ── Top family bar ─────────────────────────────────────────────── */
.family-bar {
  background: #0a0908;
  border-bottom: 1px solid var(--color-divider, #332e28);
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 0.78rem;
  line-height: 1;
  position: relative;
  z-index: 101;
}
.family-bar-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--space-6, 1.5rem);
  display: flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  min-height: 34px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.family-bar-inner::-webkit-scrollbar { display: none; }
.family-bar-label {
  color: var(--color-text-faint, #6b6358);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: 0.68rem;
  margin-right: var(--space-3, 0.75rem);
  white-space: nowrap;
}
.family-bar a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 10px;
  color: var(--color-text-muted, #a89f92);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 600;
  border-radius: var(--radius-sm, 0.375rem);
  transition: color 160ms ease, background 160ms ease;
}
.family-bar a:hover { color: var(--color-text, #f0ece4); background: rgba(255,255,255,0.04); }
.family-bar a.is-current { color: var(--color-text, #f0ece4); }
.family-bar a.is-current .fb-tag { background: var(--color-primary, #c45c1e); color: #fff; border-color: var(--color-primary, #c45c1e); }
.fb-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 5px;
  border-radius: 3px;
  border: 1px solid var(--color-border, #3d3830);
  color: var(--color-text-faint, #6b6358);
}
@media (max-width: 768px) {
  .family-bar-label { display: none; }
  .family-bar-inner { padding: 0 var(--space-3, 0.75rem); gap: 0; }
  .family-bar a { padding: 9px 8px; font-size: 0.74rem; }
  .family-bar a.is-current { order: -1; }
}

/* ── Family strip (above footer) ───────────────────────────────── */
.family-strip {
  background:
    linear-gradient(180deg, rgba(196,92,30,0.06), rgba(0,0,0,0) 40%),
    var(--color-surface, #1a1714);
  border-top: 1px solid var(--color-divider, #332e28);
  padding: var(--space-16, 4rem) 0;
}
.family-strip-head { max-width: 640px; margin-bottom: var(--space-8, 2rem); }
.family-strip-head h2 {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: var(--text-xl);
  color: var(--color-text);
  margin: var(--space-2) 0 var(--space-3);
  line-height: 1.15;
}
.family-strip-head p:not(.eyebrow) { color: var(--color-text-muted); font-size: var(--text-base); }
.family-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4, 1rem);
}
.fam-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  background: var(--color-bg, #0f0d0b);
  border: 1px solid var(--color-border, #3d3830);
  border-radius: var(--radius-lg, 0.75rem);
  padding: var(--space-6, 1.5rem);
  min-width: 0;
}
.fam-card.is-current { border-color: var(--color-primary, #c45c1e); box-shadow: inset 0 3px 0 var(--color-primary, #c45c1e); }
.fam-tag {
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold, #d4a017);
}
.fam-card h3 {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--color-text);
  margin: 0;
}
.fam-sub { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }
.fam-addr { display: flex; gap: 6px; align-items: flex-start; color: var(--color-text-faint); font-size: 0.82rem; margin: var(--space-1) 0 0; }
.fam-addr svg { flex-shrink: 0; margin-top: 2px; }
.fam-phones { display: flex; flex-direction: column; gap: 4px; }
.fam-phone { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text); font-weight: 600; font-size: var(--text-sm); text-decoration: none; font-variant-numeric: tabular-nums; }
.fam-phone:hover { color: var(--color-primary); }
.fam-link, .fam-here {
  margin-top: auto;
  padding-top: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.fam-link { color: var(--color-primary, #c45c1e); text-decoration: none; }
.fam-link:hover { color: var(--color-gold-light, #f0c040); }
.fam-here { color: var(--color-text-faint); }
@media (max-width: 1024px) { .family-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .family-grid { grid-template-columns: minmax(0, 1fr); } .family-strip { padding: var(--space-12, 3rem) 0; } }

/* ── Header property tag next to logo ──────────────────────────── */
.nav-logo { display: inline-flex; align-items: center; gap: 10px; }
.nav-logo-tag {
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold, #d4a017);
  border: 1px solid rgba(212,160,23,0.45);
  border-radius: 3px;
  padding: 4px 6px;
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .nav { gap: var(--space-2, 0.5rem); }
  .nav-logo { gap: 6px; min-width: 0; flex-shrink: 1; }
  .nav-logo img { height: 34px !important; max-width: 100%; object-fit: contain; }
  .nav-logo-tag { font-size: 0.56rem; padding: 3px 4px; letter-spacing: 0.08em; }
  .nav-actions + .nav-hamburger { margin-left: 0; }
}
@media (max-width: 360px) { .nav-logo img { height: 28px !important; } }