/* =========================================================================
   Local Fractional® — Brand Visual Overlay
   ---------------------------------------------------------------------------
   Layered on top of Tailwind. Remaps color palette + font families + radii
   so the site picks up the brand system WITHOUT touching any HTML content.

   Load AFTER tailwind.min.css:
     <link rel="stylesheet" href="/assets/css/tailwind.min.css">
     <link rel="stylesheet" href="/assets/css/brand-tokens.css">
     <link rel="stylesheet" href="/assets/css/brand-overlay-v2.css">

   GUARANTEE: this file makes zero assumptions about content. It only
   remaps the existing Tailwind custom color and font classes. Every page
   keeps its original HTML, copy, images, charts, and section order.
   ========================================================================= */

/* ----- Page background + base fonts ----- */
body {
  background: var(--lf-ivory) !important;
  font-family: var(--font-sans) !important;
}

/* ----- Font family remap — DM Sans → Source Serif 4, Inter → Source Sans 3 ----- */
.font-heading {
  font-family: var(--font-serif) !important;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.font-body {
  font-family: var(--font-sans) !important;
}

/* ----- Color palette remap on Tailwind custom colors ----- */

/* Navy #1a2332 → Navy Deep #0E1B2E (slight deepening; still reads navy) */
.bg-navy        { background-color: #0E1B2E !important; }
.text-navy      { color: #0E1B2E !important; }
.border-navy    { border-color: #0E1B2E !important; }

/* Brand blue #2b6cb0 → Heritage Gold #BD9542 */
.bg-brand-blue   { background-color: #BD9542 !important; }
.text-brand-blue { color: #BD9542 !important; }
.border-brand-blue { border-color: #BD9542 !important; }
.hover\:bg-blue-700:hover { background-color: #A17E36 !important; }

/* Brand-blue opacity variants → Heritage Gold tints */
.bg-brand-blue\/10 { background-color: rgba(189, 149, 66, 0.10) !important; }
.bg-brand-blue\/20 { background-color: rgba(189, 149, 66, 0.20) !important; }

/* Brand green → Heritage Gold + black text (green is out of brand palette) */
.bg-brand-green   { background-color: #BD9542 !important; color: #000 !important; }
.text-brand-green { color: #BD9542 !important; }
.hover\:bg-green-700:hover { background-color: #A17E36 !important; }
.bg-brand-green.text-white,
.bg-brand-green .text-white { color: #000 !important; }

/* Mobile sticky CTA bar — custom class, not Tailwind, so override directly */
.lf-mobile-cta .lf-cta-book { background: #BD9542 !important; color: #000 !important; }
.lf-mobile-cta .lf-cta-book:hover { background: #A17E36 !important; color: #000 !important; }

/* Light bg → Ivory (slightly warmer off-white instead of blueish gray) */
.bg-light { background-color: #F7F3EC !important; }

/* ----- Radii — brand rule: no pillowy 16px+ radii ----- */
.rounded-2xl { border-radius: 8px !important; }
.rounded-xl  { border-radius: 6px !important; }

/* ----- Nav — subtle ivory backdrop + blur when scrolled ----- */
#main-nav {
  background: rgba(247, 243, 236, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(14, 27, 46, 0.08);
}

/* ----- Phase 8: footer locations — collapse to first 5 on mobile -----
   The footer lists 12 locations (5 DFW metro + 7 expansion cities). On
   mobile the full list eats ~600px of scroll; we hide 6+ behind a
   "View all" chevron, toggled via CSS :target on #footer-locations-all.
   Desktop unchanged. */
@media (max-width: 767px) {
  footer p.font-heading + ul li:nth-child(n+6) { display: none; }
  footer:has(#footer-locations-all-toggle:checked) p.font-heading + ul li:nth-child(n+6) { display: list-item; }
  .lf-footer-more { display: inline-flex; }
}
@media (min-width: 768px) {
  .lf-footer-more { display: none; }
}
.lf-footer-more {
  margin-top: 0.5rem;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: #BD9542;
  cursor: pointer;
  user-select: none;
}
.lf-footer-more:hover { color: #A17E36; }
#footer-locations-all-toggle { display: none; }
#footer-locations-all-toggle:checked ~ .lf-footer-more .lf-footer-more-text::after {
  content: ' (showing all)';
  font-style: italic;
  opacity: 0.7;
}

/* ----- Decorative Heritage Gold rule (optional — use as `<hr class="lf-rule">`) ----- */
hr.lf-rule {
  border: 0;
  height: 2px;
  background: #BD9542;
  width: 64px;
  margin: 48px auto;
}