/* Dragonfly Home Inspections: inspection map (2026-10-17). Matches theme: navy, gold rules, Cinzel caps, Cormorant headings. */
.df-imap { position: relative; }
.df-imap-title { text-align: center; }
.df-imap-stat { text-align: center; font-family: var(--caps, Georgia, serif); letter-spacing: .14em; text-transform: uppercase; font-size: .95rem; margin: 6px 0 8px; }
.df-imap-stat strong { font-family: var(--serif, Georgia, serif); font-weight: 600; font-size: 1.9em; letter-spacing: .02em; color: var(--gold-dark, #7a5a1c); vertical-align: -0.08em; }
.df-imap-sub { text-align: center; max-width: 680px; margin: 0 auto 16px; font-family: var(--serif, Georgia, serif); font-style: italic; font-size: 1.15rem; line-height: 1.5; color: #2b3440; }
.df-imap-toolbar { display: flex; justify-content: center; gap: 0; margin: 0 auto 14px; }
.df-imap-btn { font-family: var(--caps, Georgia, serif); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; padding: 9px 18px; cursor: pointer; background: transparent; color: var(--navy, #0a2540); border: 1px solid var(--gold-dark, #7a5a1c); border-radius: 0; }
.df-imap-btn + .df-imap-btn { border-left: 0; }
.df-imap-btn:first-child { border-radius: 2px 0 0 2px; } .df-imap-btn:last-child { border-radius: 0 2px 2px 0; }
.df-imap-btn.is-active { background: var(--navy, #0a2540); color: #fff; }
.df-imap-btn:focus-visible { outline: 2px solid var(--gold, #c9a86a); outline-offset: 2px; }
.df-imap-frame { padding: 6px; border: 1px solid rgba(122,90,28,.45); background: #fff; box-shadow: 0 4px 18px rgba(10,37,64,.14); }
.df-imap-canvas { position: relative; height: 520px; background: linear-gradient(135deg, #f7f1e4, #efe5cf); display: flex; align-items: center; justify-content: center; z-index: 0; }
.df-imap-canvas.leaflet-container { display: block; font-family: system-ui, -apple-system, sans-serif; background: #e9e4d8; }
.df-imap-canvas .leaflet-tile-pane { filter: grayscale(.45) sepia(.12) brightness(1.03); }
.df-imap-load { font-family: var(--caps, Georgia, serif); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; padding: 12px 24px; background: var(--navy, #0a2540); color: #fff; border: 1px solid var(--gold, #c9a86a); border-radius: 2px; cursor: pointer; }
.df-imap-canvas.is-loading .df-imap-load { opacity: .6; cursor: progress; }
.df-imap-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 800; pointer-events: none; background: rgba(10,37,64,.82); color: #fff; font-size: .78rem; letter-spacing: .04em; padding: 5px 12px; border-radius: 2px; border: 1px solid rgba(201,168,106,.6); transition: opacity .4s; white-space: nowrap; }
.df-imap-canvas.is-engaged .df-imap-hint { opacity: 0; }
.df-imap-note { text-align: center; font-size: .82rem; color: #4a5560; margin: 10px 0 0; }
.df-imap-err { color: #4a5560; font-style: italic; }
.df-imap-city, .df-imap-cluster { display: flex !important; align-items: center; justify-content: center; border-radius: 50%; font: 600 12px/1 system-ui, -apple-system, sans-serif; color: #fff; }
.df-imap-city { background: rgba(10,37,64,.9); border: 2px solid var(--gold, #c9a86a); box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.df-imap-cluster { background: rgba(122,90,28,.92); border: 3px solid rgba(243,234,216,.9); box-shadow: 0 0 0 4px rgba(201,168,106,.35), 0 2px 8px rgba(0,0,0,.3); font-size: 13px; }
.df-imap-popup .leaflet-popup-content-wrapper { border-radius: 3px; border-top: 2px solid var(--gold-dark, #7a5a1c); }
.df-imap-popup .leaflet-popup-content { font-size: .95rem; line-height: 1.5; margin: 12px 16px; }
.df-imap-popup strong { font-family: var(--serif, Georgia, serif); font-size: 1.2rem; color: var(--navy, #0a2540); }
.df-imap-popup a { color: var(--gold-dark, #7a5a1c); font-weight: 600; }
.df-imap-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 28px; margin: 24px 0 8px; }
.df-imap-list { background: #faf7f0; border: 1px solid #e3d9c4; border-radius: 10px; padding: 16px 20px; }
.page-card .df-imap-list h3 { margin: 0 0 8px; font-size: 1.2rem; }
.page-card .df-imap-list ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 24px; }
.df-imap-list li { margin: 3px 0; break-inside: avoid; }
.df-imap-list li::marker { color: var(--gold-dark, #7a5a1c); }
.df-imap-list li span { color: #4a5560; font-size: .9em; }
.page-card .df-imap--full { margin: 8px 0 30px; }

/* Home page: floating translucent section like Services / Schedule */
.imap-section { margin: 20px 40px; border-radius: 8px; background: rgba(10,37,64,.88); border: 1px solid rgba(201,168,106,.45); color: #fff; padding: 48px 0; }
.imap-section .df-imap-title { color: #fff; font-weight: 500; font-size: 2.2rem; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,.4); line-height: 1.2; }
.imap-section .df-imap-title .script { font-size: 2.6rem; text-transform: none; letter-spacing: 0; margin-left: .15em; color: var(--gold, #c9a86a); line-height: .8; }
.imap-section .df-imap-title::after { content: ''; display: block; width: 90px; height: 1px; margin: 12px auto 18px; background: linear-gradient(90deg, transparent, var(--gold, #c9a86a), transparent); }
.imap-section .df-imap-stat { color: var(--cream, #f3ead8); }
.imap-section .df-imap-stat strong { color: var(--gold, #c9a86a); }
.imap-section .df-imap-sub { color: rgba(255,255,255,.88); }
.imap-section .df-imap-btn { color: var(--cream, #f3ead8); border-color: var(--gold, #c9a86a); }
.imap-section .df-imap-btn.is-active { background: rgba(201,168,106,.25); color: #fff; }
.imap-section .df-imap-frame { max-width: 900px; margin: 0 auto; border-color: rgba(201,168,106,.55); background: rgba(255,255,255,.08); }
.imap-section .df-imap-note { color: rgba(255,255,255,.78); }
.imap-section .df-imap-cta { text-align: center; margin: 22px 0 0; }
.imap-section .btn-primary { background: transparent; color: #fff; border: 1px solid var(--gold, #c9a86a); }
.imap-section .btn-primary:hover { background: rgba(201,168,106,.18); }
.df-imap--compact .df-imap-canvas { height: 380px; }

@media (max-width: 767px) {
  .df-imap-canvas { height: 420px; }
  .df-imap--compact .df-imap-canvas { height: 320px; }
  .df-imap-stat { font-size: .8rem; letter-spacing: .1em; }
  .df-imap-sub { font-size: 1.05rem; }
  .imap-section { margin: 16px 12px; padding: 36px 0; }
  .imap-section .df-imap-title { font-size: 1.55rem; letter-spacing: .08em; }
  .imap-section .df-imap-title .script { font-size: 2rem; display: block; }
  .page-card .df-imap-list ol { columns: 1; }
}