/* ================================================
   PROPERTY ANGELS DESIGN TOKENS
   Single source of truth for brand colour, radius and
   elevation. Everything below (and the templates) should
   reference these — never raw hexes.
   Gold is an accent: small elements, rules, buttons with
   navy text. Large surfaces are navy, cream or white.
   ================================================ */
:root {
  /* Brand colour */
  --pa-gold: #b19260;        /* the only resting gold */
  --pa-gold-light: #c9ad7a;  /* tints, notification bar */
  --pa-gold-dark: #9a7d4f;   /* hover/active states only */
  --pa-gold-tint: rgba(177, 146, 96, 0.15);
  --pa-cream: #f0eadd;
  --pa-navy: #142f5b;
  --pa-navy-deep: #0a1628;   /* footer + gradient ends */
  --pa-navy-tint: rgba(20, 47, 91, 0.08);

  /* Grey ramp */
  --pa-ink: #1a1a1a;
  --pa-text: #333;
  --pa-muted: #666;

  /* Shared surfaces */
  --pa-grad-navy: linear-gradient(135deg, var(--pa-navy) 0%, var(--pa-navy-deep) 100%);
  --pa-grad-hero: linear-gradient(135deg, var(--pa-cream) 0%, #ffffff 100%);

  /* Radius scale: sm for buttons/inputs/tags, base for cards/modals/panels */
  --pa-radius-sm: 4px;
  --pa-radius: 8px;

  /* Elevation scale */
  --pa-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.06);
  --pa-shadow-2: 0 4px 20px rgba(0, 0, 0, 0.1);
  --pa-shadow-3: 0 12px 40px rgba(0, 0, 0, 0.18);
}

/* Hero Gradient Section - Reusable beige/wheat gradient */
.hero-gradient {
  background: var(--pa-grad-hero);
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.hero-gradient .container {
  text-align: center;
}

.hero-gradient h1 {
  color: var(--pa-ink);
}

.hero-gradient p {
  color: var(--pa-text);
}

/* Custom Property Map Markers */
.custom-property-marker {
  background: none !important;
  border: none !important;
}

.property-marker {
  position: relative;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.property-marker:hover {
  transform: scale(1.1);
}

.marker-icon-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.marker-icon-circle {
  background: white;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  border: 2px solid var(--pa-gold);
}

.marker-favicon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.marker-price {
  background: white;
  color: var(--pa-text);
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  white-space: nowrap;
  margin-top: 2px;
}

.property-marker:hover .marker-icon-circle {
  border-color: var(--pa-gold-dark);
  transform: scale(1.05);
}

.property-marker:hover .marker-price {
  background: var(--pa-gold);
  color: var(--pa-navy);
  border-color: var(--pa-gold);
}

/* Map Popup Styles */
.leaflet-popup-content {
  margin: 0 !important;
  padding: 0 !important;
}

.map-popup {
  min-width: 280px;
  max-width: 300px;
}

.map-popup .btn:hover {
  background-color: var(--pa-gold-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* ================================================
   ASSESSMENT CTA COMPONENTS
   ================================================ */

/* Shared Button Styles — two solid treatments, chosen by surface:
   navy buttons on light surfaces, white (pa-btn-light) on navy surfaces.
   Gold is trim only (rules, eyebrows, icons, borders) — a large solid
   gold fill reads bronze, so pa-btn-gold is reserved for small elements
   and should not appear at btn-lg sizes. Gold text is always navy. */
.pa-btn-light {
  background-color: #fff;
  color: var(--pa-navy);
  border: none;
  border-radius: var(--pa-radius-sm);
  font-weight: 600;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.pa-btn-light:hover,
.pa-btn-light:focus-visible {
  background-color: var(--pa-cream);
  color: var(--pa-navy);
  transform: translateY(-1px);
}
.pa-btn-light:active {
  background-color: var(--pa-cream);
  color: var(--pa-navy);
  transform: none;
}
.pa-btn-light:disabled,
.pa-btn-light.disabled {
  background-color: #fff;
  color: var(--pa-navy);
  opacity: 0.55;
  transform: none;
}

.pa-btn-gold {
  background-color: var(--pa-gold);
  color: var(--pa-navy);
  border: none;
  border-radius: var(--pa-radius-sm);
  font-weight: 600;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.pa-btn-gold:hover,
.pa-btn-gold:focus-visible {
  background-color: var(--pa-gold-dark);
  color: var(--pa-navy);
  transform: translateY(-1px);
}
.pa-btn-gold:active {
  background-color: var(--pa-gold-dark);
  color: var(--pa-navy);
  transform: none;
}
.pa-btn-gold:disabled,
.pa-btn-gold.disabled {
  background-color: var(--pa-gold);
  color: var(--pa-navy);
  opacity: 0.55;
  transform: none;
}

.pa-btn-navy {
  background-color: var(--pa-navy);
  color: #fff;
  border: none;
  border-radius: var(--pa-radius-sm);
  font-weight: 600;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.pa-btn-navy:hover,
.pa-btn-navy:focus-visible {
  background-color: var(--pa-navy-deep);
  color: #fff;
  transform: translateY(-1px);
}
.pa-btn-navy:active {
  background-color: var(--pa-navy-deep);
  color: #fff;
  transform: none;
}
.pa-btn-navy:disabled,
.pa-btn-navy.disabled {
  background-color: var(--pa-navy);
  color: #fff;
  opacity: 0.55;
  transform: none;
}

.pa-btn-outline-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--pa-radius-sm);
  font-weight: 600;
  transition: all 0.2s ease;
}
.pa-btn-outline-light:hover,
.pa-btn-outline-light:focus-visible {
  border-color: var(--pa-gold);
  color: var(--pa-gold-light);
  transform: translateY(-1px);
}

/* Full-width CTA band: navy gradient with gold accent rules.
   Replaces the old 90%-gold photo-wash bands (bronze-mud effect
   + hotlinked Unsplash). Pair with .text-white content. */
.pa-band-navy {
  background: var(--pa-grad-navy);
  position: relative;
}
.pa-band-navy::before,
.pa-band-navy::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--pa-gold) 50%, transparent 100%);
}
.pa-band-navy::before { top: 0; }
.pa-band-navy::after { bottom: 0; }

/* --- Notification Bar ---
   Cream with a gold hairline: gold as trim, never a full-width fill. */
.pa-notification-bar {
  background: var(--pa-cream);
  border-bottom: 1px solid rgba(177, 146, 96, 0.5);
  padding: 0.55rem 0;
  position: relative;
  z-index: 1100;
}
.pa-notification-bar .container {
  position: relative;
}
.pa-notification-bar-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.pa-notification-bar-text {
  color: var(--pa-navy);
  font-size: 0.85rem;
  font-weight: 500;
}
.pa-notification-bar-link {
  color: var(--pa-navy);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--pa-gold);
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.pa-notification-bar-link:hover {
  opacity: 0.75;
  color: var(--pa-navy);
}
.pa-notification-bar-close {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--pa-navy);
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  padding: 0.25rem;
  line-height: 1;
}
.pa-notification-bar-close:hover {
  opacity: 1;
}

/* --- Assessment Banner (Homepage) --- */
.pa-assessment-banner {
  background: var(--pa-grad-navy);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}
.pa-assessment-banner::before,
.pa-assessment-banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--pa-gold) 50%, transparent 100%);
}
.pa-assessment-banner::before { top: 0; }
.pa-assessment-banner::after { bottom: 0; }

.pa-assessment-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--pa-gold);
  margin-bottom: 0.75rem;
}
.pa-assessment-banner-title {
  color: #fff;
  font-size: 2rem;
  margin-bottom: 1rem;
}
.pa-assessment-banner-subtitle {
  color: rgba(255,255,255,0.7);
  font-size: 1rem;
  margin-bottom: 2.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.pa-assessment-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(177,146,96,0.25);
  border-radius: var(--pa-radius);
  padding: 2.5rem 2rem;
  height: 100%;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.pa-assessment-card:hover {
  transform: translateY(-4px);
  border-color: var(--pa-gold);
  box-shadow: var(--pa-shadow-3);
}

.pa-assessment-card-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}
.pa-assessment-card-icon--compliance {
  background: rgba(177,146,96,0.15);
  color: var(--pa-gold);
}
.pa-assessment-card-icon--health {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.pa-assessment-card-heading {
  color: #fff;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.pa-assessment-card-desc {
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}
.pa-assessment-card-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}
.pa-assessment-card-list li {
  color: rgba(255,255,255,0.8);
  font-size: 0.9rem;
  padding: 0.4rem 0 0.4rem 1.5rem;
  position: relative;
}
.pa-assessment-card-list li::before {
  content: "\f145";
  font-family: "finder-icons";
  position: absolute;
  left: 0;
  color: var(--pa-gold);
  font-size: 0.8rem;
}
.pa-assessment-card-time {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.03em;
  margin-bottom: 1.5rem;
}
.pa-assessment-card-time i {
  margin-right: 0.3rem;
}

/* --- Editorial card ---
   The house card style: white surface, navy hairline, gold appears only
   as the short dash (.pa-card-dash) above the eyebrow. Replaces the
   generic gold-left-border card that used to appear across the site. */
.pa-card {
  background: #fff;
  border: 1px solid rgba(20, 47, 91, 0.12);
  border-radius: var(--pa-radius);
  box-shadow: var(--pa-shadow-1);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
a.pa-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pa-shadow-2);
  border-color: rgba(177, 146, 96, 0.55);
}
.pa-card-dash {
  display: block;
  width: 36px;
  height: 2px;
  background: var(--pa-gold);
  margin-bottom: 0.75rem;
}

/* --- Notice strip --- cream surface, gold hairline all round */
.pa-notice {
  background: var(--pa-cream);
  border: 1px solid rgba(177, 146, 96, 0.35);
  border-radius: var(--pa-radius-sm);
}

/* --- Inline Contextual CTA --- */
.pa-inline-cta {
  background: var(--pa-cream);
  border: 1px solid rgba(177, 146, 96, 0.35);
  border-radius: var(--pa-radius);
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 2rem 0;
  transition: box-shadow 0.3s ease;
}
.pa-inline-cta:hover {
  box-shadow: var(--pa-shadow-2);
}
.pa-inline-cta-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pa-gold);
  font-size: 1.25rem;
  box-shadow: var(--pa-shadow-1);
}
.pa-inline-cta-body {
  flex: 1;
}
.pa-inline-cta-heading {
  font-size: 1rem;
  color: var(--pa-navy);
  margin-bottom: 0.15rem;
}
.pa-inline-cta-desc {
  font-size: 0.85rem;
  color: var(--pa-muted);
  margin-bottom: 0;
}
.pa-inline-cta-action {
  flex-shrink: 0;
}
@media (max-width: 767.98px) {
  .pa-inline-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
  }
}

/* --- Location Page CTA --- */
.pa-location-cta {
  background: var(--pa-cream);
  padding: 4rem 0;
  position: relative;
}
.pa-location-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--pa-gold);
  border-radius: 2px;
}
.pa-location-cta-title {
  color: var(--pa-navy);
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
}
.pa-location-cta-subtitle {
  color: var(--pa-muted);
  font-size: 1rem;
  margin-bottom: 2.5rem;
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
}

.pa-location-card {
  background: #fff;
  border-radius: var(--pa-radius);
  padding: 2rem 1.75rem;
  text-align: center;
  box-shadow: var(--pa-shadow-1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pa-location-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pa-shadow-3);
}
.pa-location-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  font-size: 1.3rem;
}
.pa-location-card-icon--compliance {
  background: rgba(177,146,96,0.15);
  color: var(--pa-gold);
}
.pa-location-card-icon--health {
  background: rgba(20,47,91,0.08);
  color: var(--pa-navy);
}
.pa-location-card-heading {
  font-size: 1rem;
  color: var(--pa-navy);
  margin-bottom: 0.5rem;
}
.pa-location-card-desc {
  font-size: 0.85rem;
  color: var(--pa-muted);
  margin-bottom: 1.5rem;
  flex: 1;
}

/* --- Exit Intent Modal --- */
.pa-exit-modal .modal-content {
  background: var(--pa-grad-navy);
  border: 1px solid rgba(177,146,96,0.2);
  border-radius: var(--pa-radius);
  overflow: hidden;
}
.pa-exit-modal .modal-body {
  padding: 3rem 2.5rem;
  position: relative;
}
.pa-exit-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 1.25rem;
  cursor: pointer;
  transition: color 0.2s ease;
  padding: 0.25rem;
  line-height: 1;
}
.pa-exit-modal-close:hover {
  color: #fff;
}
.pa-exit-modal-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(177,146,96,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.75rem;
  color: var(--pa-gold);
  font-size: 1.75rem;
}
.pa-exit-modal-heading {
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.pa-exit-modal-desc {
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
  margin-bottom: 1.75rem;
}
.pa-exit-modal-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  text-align: left;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}
.pa-exit-modal-list li {
  color: rgba(255,255,255,0.8);
  font-size: 0.9rem;
  padding: 0.5rem 0 0.5rem 1.75rem;
  position: relative;
}
.pa-exit-modal-list li::before {
  content: "\f145";
  font-family: "finder-icons";
  position: absolute;
  left: 0;
  color: var(--pa-gold);
  font-size: 0.85rem;
}
.pa-exit-modal-time {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  margin-bottom: 1.75rem;
}
.pa-exit-modal-dismiss {
  display: block;
  text-align: center;
  margin-top: 1rem;
  color: rgba(255,255,255,0.35);
  font-size: 0.8rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
  width: 100%;
}
.pa-exit-modal-dismiss:hover {
  color: rgba(255,255,255,0.6);
}

/* Small gold status badge (trim-scale, so gold is fine here) */
.pa-badge-gold {
  background: var(--pa-gold);
  color: var(--pa-navy);
}

/* --- Navbar Assessment Badge --- */
.pa-nav-badge {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--pa-gold);
  color: var(--pa-navy);
  padding: 0.1rem 0.35rem;
  border-radius: 2px;
  margin-left: 0.5rem;
  vertical-align: middle;
}
/* ── Keyboard focus visibility (WCAG 2.4.7) ──
   The vendored theme zeroes its focus ring (--fn-btn-focus-box-shadow: 0 0 0 0)
   and ships a 10%-opacity ring token, leaving keyboard position invisible.
   Override the tokens and give every interactive element a visible ring. */
:root,
[data-bs-theme=light] {
  --fn-focus-ring-color: rgba(20, 47, 91, 0.35);
  --fn-btn-focus-box-shadow: 0 0 0 3px rgba(20, 47, 91, 0.35);
}
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--pa-navy) !important;
  outline-offset: 2px;
}
/* Light ring variant on dark navy surfaces (footer, CTA bands, exit modal) */
footer a:focus-visible,
.pa-exit-modal a:focus-visible,
.pa-exit-modal button:focus-visible,
[class*="btn-outline-light"]:focus-visible {
  outline-color: var(--pa-cream) !important;
}

/* ── Brand token override: retire the theme's demo red ──
   The vendored Finder theme ships --fn-primary:#d85151 (its demo palette),
   which leaks onto btn-primary CTAs, links in markdown content and badges.
   Repoint the tokens at the Property Angels palette here instead of editing
   the minified theme (styles.css loads after theme.min.css, so this wins).
   Button colours mirror .pa-btn-gold: gold bg + navy text (4.5:1). */
:root,
[data-bs-theme=light] {
  --fn-primary: var(--pa-gold);
  --fn-primary-rgb: 177, 146, 96;
  --fn-link-color: var(--pa-navy);
  --fn-link-color-rgb: 20, 47, 91;
  --fn-link-hover-color: var(--pa-navy-deep);
  --fn-link-hover-color-rgb: 10, 22, 40;
}
.btn-primary {
  --fn-btn-color: #fff;
  --fn-btn-bg: var(--pa-navy);
  --fn-btn-border-color: var(--pa-navy);
  --fn-btn-hover-color: #fff;
  --fn-btn-hover-bg: var(--pa-navy-deep);
  --fn-btn-hover-border-color: var(--pa-navy-deep);
  --fn-btn-active-color: #fff;
  --fn-btn-active-bg: var(--pa-navy-deep);
  --fn-btn-active-border-color: var(--pa-navy-deep);
  --fn-btn-disabled-color: #fff;
  --fn-btn-disabled-bg: var(--pa-navy);
  --fn-btn-disabled-border-color: var(--pa-navy);
  --fn-btn-focus-shadow-rgb: 20, 47, 91;
}
.text-bg-primary {
  color: #fff !important;
  background-color: var(--pa-navy) !important;
}

/* ── Reduced motion (WCAG 2.3.3) ──
   Disable the custom transform/transition choreography for users
   who have asked the OS to minimise motion. */
@media (prefers-reduced-motion: reduce) {
  .property-marker,
  .property-marker:hover,
  .pa-btn-gold, .pa-btn-navy, .pa-btn-light, .pa-btn-outline-light,
  .pa-assessment-card, .pa-assessment-card:hover,
  .pa-location-card, .pa-location-card:hover,
  .pa-inline-cta,
  .map-popup .btn {
    transition: none !important;
    transform: none !important;
  }
}