/* =============================================================================
   Church Map - fullscreen map page (page-map.php). Port of the style block in
   find-a-church.html, moved onto the theme tokens so light AND dark work.
   Loaded only on this template, so page-wide selectors are safe.
   ========================================================================== */

html,body{height:100%;overflow:hidden}
body{background:var(--bg-2)}
#map{position:fixed;inset:0;width:100vw;height:100vh;z-index:0}

.topbar{position:fixed;top:14px;left:14px;right:14px;z-index:1000;display:flex;align-items:center;gap:10px;pointer-events:none}
.topbar>*{pointer-events:auto}
/* labelled so the filters are never a mystery icon */
.burger{height:48px;border-radius:12px;border:none;cursor:pointer;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:var(--shadow);flex:none;font-weight:700;font-size:13.5px;font-family:inherit;padding:0 16px}
.burger svg{width:22px;height:22px}
@media (max-width:420px){.burger{padding:0 13px}.burger .lbl{display:none}}
.brand{background:var(--card);border-radius:12px;padding:10px 16px;box-shadow:var(--shadow);display:flex;align-items:center;gap:10px;border-bottom:3px solid var(--gold);text-decoration:none;color:inherit}
.brand svg{width:26px;height:26px}
.brand h1{font-family:"Fraunces",serif;font-weight:500;font-size:18px;margin:0;color:var(--ink)}
.brand h1 em{font-style:italic;color:var(--gold)}

.newslink{background:var(--card);border-radius:12px;padding:0 14px;height:48px;display:flex;align-items:center;gap:7px;box-shadow:var(--shadow);color:var(--ink);text-decoration:none;font-weight:700;font-size:13px;flex:none}
.newslink svg{width:17px;height:17px}
@media (max-width:560px){.newslink span{display:none}.newslink{padding:0 14px}}
/* mode switch: Churches / Events */
.mode{margin-left:auto;background:var(--card);border-radius:999px;padding:4px;box-shadow:var(--shadow);display:flex;gap:2px}
.mode button{border:none;background:none;padding:8px 14px;border-radius:999px;font-weight:700;font-size:13px;color:var(--muted);cursor:pointer;display:flex;gap:6px;align-items:center}
.mode button svg{width:15px;height:15px}
.mode button.on{background:var(--navy);color:#fff}
.mode .n{background:rgba(255,255,255,.2);border-radius:999px;padding:0 7px;font-size:11px}
.mode button:not(.on) .n{background:var(--stone);color:var(--ink)}

/* cluster bubbles */
.cluster{width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-family:"Manrope",sans-serif;font-weight:800;font-size:14px;
  border:3px solid var(--gold);box-shadow:0 4px 12px rgba(28,35,64,.35)}
.cluster.big{width:50px;height:50px;font-size:16px}
.cluster.ev-cl{background:#7B4FB8;border-color:#fff}

/* mode switch inside the drawer */
.drawer-mode{display:flex;gap:6px;padding:14px 18px 0}
.drawer-mode button{flex:1;border:1.5px solid var(--stone);background:var(--card);color:var(--muted);
  padding:10px 8px;border-radius:10px;font-weight:700;font-size:13.5px;cursor:pointer;
  display:flex;gap:7px;align-items:center;justify-content:center}
.drawer-mode button svg{width:15px;height:15px}
.drawer-mode button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.drawer-mode .n{background:var(--stone);color:var(--ink);border-radius:999px;padding:0 7px;font-size:11px}
.drawer-mode button.on .n{background:rgba(255,255,255,.2);color:#fff}

.scrim{position:fixed;inset:0;background:rgba(28,35,64,.45);z-index:1100;opacity:0;pointer-events:none;transition:opacity .25s ease}
.drawer{position:fixed;top:0;left:0;bottom:0;width:min(400px,92vw);z-index:1200;background:var(--ivory);box-shadow:var(--shadow);transform:translateX(-105%);transition:transform .28s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}
body.open .scrim{opacity:1;pointer-events:auto}
body.open .drawer{transform:none}
/* Docked mode (>=900px): the drawer opens by default and sits beside the map, so no
   scrim and the map stays fully interactive. Below that it would cover the screen,
   so it keeps the overlay behaviour and starts closed. */
@media (min-width:900px){
  body.open .scrim{opacity:0;pointer-events:none}
  .drawer{box-shadow:0 12px 40px rgba(16,20,36,.18)}
}
.drawer-head{background:var(--navy);color:#fff;padding:16px 18px;display:flex;align-items:center;gap:12px;border-bottom:3px solid var(--gold)}
.drawer-head h2{font-family:"Fraunces",serif;font-weight:500;font-size:20px;margin:0;flex:1;color:#fff}
.close{background:none;border:none;color:#fff;cursor:pointer;width:36px;height:36px;border-radius:8px;display:grid;place-items:center}
.close:hover{background:rgba(255,255,255,.12)}
.close svg{width:20px;height:20px}
.drawer-body{flex:1;overflow-y:auto;min-height:0}
.filters{padding:18px 18px 10px;border-bottom:1px solid var(--stone)}
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.search{position:relative}
.search input{width:100%;padding:11px 12px 11px 38px;border:1.5px solid var(--stone);border-radius:10px;background:var(--card);color:var(--ink)}
.search input::placeholder{color:var(--muted)}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--muted)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.filters select,.filters input[type=date]{width:100%;padding:10px 12px;border:1.5px solid var(--stone);border-radius:10px;background:var(--card);color:var(--ink);appearance:none}
.filters select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6758' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.chips{display:flex;flex-wrap:wrap;gap:7px}

/* picker + sugg + chip come from app.css */

/* near me: place autocomplete + geolocation + radius */
.near{display:flex;gap:8px}
.near .search{flex:1}
/* Primary action: almost everyone arrives wanting "near me", so it gets the
   weight instead of hiding behind a 44px icon. */
.geo-primary{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:12px;border:none;border-radius:var(--radius-btn);background:var(--gold);
  color:var(--navy);font-weight:800;font-size:14.5px;cursor:pointer;
  box-shadow:var(--shadow-soft);transition:filter .15s ease}
.geo-primary:hover{filter:brightness(1.06)}
.geo-primary svg{width:18px;height:18px}
/* "or" rule between the two ways of setting a location */
.near-or{display:flex;align-items:center;gap:10px;margin:10px 0 9px;color:var(--muted);
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.near-or::before,.near-or::after{content:"";flex:1;height:1px;background:var(--stone)}
.near-on{display:flex;gap:8px;align-items:center;margin-top:9px}
.near-tag{flex:1;display:inline-flex;align-items:center;gap:7px;background:var(--gold-soft);
  color:var(--navy);font-weight:700;font-size:12.5px;border-radius:999px;padding:7px 12px;
  overflow:hidden;white-space:nowrap}
[data-theme="dark"] .near-tag{color:var(--ink)}
.near-tag span{overflow:hidden;text-overflow:ellipsis}
.near-tag svg{width:13px;height:13px;flex:none}
.near-on select{width:auto;padding:8px 30px 8px 10px;font-size:13px}
.near-x{width:32px;height:32px;flex:none;border:none;border-radius:8px;background:var(--stone);
  color:var(--ink);cursor:pointer;display:grid;place-items:center}
.near-x svg{width:14px;height:14px}

.card .mi{margin-left:auto;background:var(--gold-soft);color:var(--navy);font-weight:800;
  font-size:11.5px;padding:2px 8px;border-radius:6px;white-space:nowrap}
[data-theme="dark"] .card .mi{color:var(--ink)}
.clear{background:none;border:none;color:var(--muted);font-size:12px;padding:0;cursor:pointer;text-decoration:underline;margin-top:4px}
.only-church,.only-event{display:none}
body[data-mode=churches] .only-church{display:block}
body[data-mode=events] .only-event{display:block}

.list-head{padding:14px 18px 6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.list{padding:4px 12px 16px}
.list .card{display:grid;grid-template-columns:6px 1fr;gap:12px;background:var(--card);border:1px solid var(--stone);border-radius:var(--radius);padding:12px 14px 12px 12px;margin-bottom:8px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.list .card:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.list .card.active{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-soft)}
.card .bar{border-radius:4px;background:var(--c)}
.list .card h3{font-family:"Fraunces",serif;font-weight:600;font-size:17px;margin:0 0 2px;line-height:1.2}
.card .den{font-size:12px;font-weight:700;color:var(--c)}
.card .addr{font-size:13px;color:var(--muted);margin:4px 0 0}
.card .when{font-size:12px;margin-top:6px;display:flex;gap:6px;align-items:center}
.card .when svg{width:13px;height:13px;color:var(--gold)}
.card .date{display:inline-block;background:var(--gold-soft);color:var(--navy);font-weight:700;font-size:12px;padding:2px 8px;border-radius:6px;margin-top:6px}
[data-theme="dark"] .card .date{color:var(--ink)}
.empty{text-align:center;padding:40px 20px;color:var(--muted);font-size:14px}
.empty b{display:block;font-family:"Fraunces",serif;font-size:20px;color:var(--ink);margin-bottom:6px;font-weight:500}
.empty .clear{display:block;margin:10px auto 0}
/* "show more": the list renders a page at a time so a city with 200 churches
   does not build 200 cards up front */
.more-btn{width:100%;margin-top:4px;padding:11px;border:1.5px solid var(--stone);
  border-radius:var(--radius-btn);background:var(--card);color:var(--ink);
  font-weight:700;font-size:13.5px;cursor:pointer}
.more-btn:hover{border-color:var(--gold)}
.drawer-foot{padding:14px 18px;border-top:1px solid var(--stone);background:var(--ivory)}
.apply{width:100%;padding:14px;border:none;border-radius:12px;background:var(--navy);color:#fff;font-weight:700;font-size:15px;cursor:pointer;box-shadow:var(--shadow)}

/* pins */
.pin{width:30px;height:38px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.3))}
.pin svg{width:30px;height:38px}
.pin.hl svg path:first-child{stroke:var(--gold);stroke-width:2.5}
.pin.ev{width:34px;height:42px}
.pin.ev svg{width:34px;height:42px}

/* popup */
.leaflet-popup-content-wrapper{border-radius:16px;padding:0;overflow:hidden;box-shadow:var(--shadow);font-family:"Manrope",sans-serif;background:var(--card);color:var(--ink)}
.leaflet-popup-tip{background:var(--card)}
.leaflet-popup-content{margin:0;width:270px!important}
.pp-ph{height:100px;overflow:hidden;position:relative;background:var(--stone)}
.pp-ph img{width:100%;height:100%;object-fit:cover;display:block}
.pp-head{background:var(--c);color:#fff;padding:11px 16px 10px;text-align:left}
.pp-head .den{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.pp-head h4{font-family:"Fraunces",serif;font-weight:600;font-size:18px;margin:3px 0 0;line-height:1.2;color:#fff}
.pp-body{padding:12px 16px 14px;font-size:13px;color:var(--ink)}
.pp-body p{margin:0 0 8px;display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.pp-body svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--gold)}
.pp-ev{display:block;text-decoration:none;color:inherit;background:var(--gold-soft);
  border:1px solid transparent;border-radius:10px;padding:8px 10px;margin-bottom:8px;font-size:12px;
  transition:border-color .15s}
.pp-ev:hover{border-color:var(--gold)}
.pp-ev b{display:block;color:var(--navy)}
[data-theme="dark"] .pp-ev b{color:var(--ink)}
.pp-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pp-actions a{flex:1;text-align:center;padding:9px;border-radius:9px;font-size:13px;font-weight:700;text-decoration:none;border:1.5px solid var(--navy);color:var(--navy)}
[data-theme="dark"] .pp-actions a{border-color:var(--gold);color:var(--ink)}
.pp-actions a.primary{background:var(--navy);color:#fff}
[data-theme="dark"] .pp-actions a.primary{background:var(--gold);color:var(--navy)}
.leaflet-container a.leaflet-popup-close-button{color:#fff;top:8px;right:8px;
  width:24px;height:24px;line-height:24px;border-radius:50%;background:rgba(16,20,36,.55);
  text-align:center;font-size:14px}
.leaflet-container a.leaflet-popup-close-button:hover{background:rgba(16,20,36,.8);color:#fff}
.leaflet-bottom.leaflet-right{margin-bottom:10px}

@media (max-width:600px){
  .brand{display:none}
  .mode button{padding:8px 10px}
  .mode button span.lbl{display:none}
}
/* share button inside a popup: its own row under the two links. Three across a
   270px popup squashed all of them, so the pair keeps the first line and share
   takes the second at full width */
.pp-actions .pp-share{flex:1 0 100%;padding:9px;display:flex;align-items:center;justify-content:center;gap:7px;
  font:inherit;font-size:13px;font-weight:700;
  border-radius:9px;border:1.5px solid var(--navy);background:transparent;color:var(--navy);cursor:pointer}
.pp-actions .pp-share:hover{background:var(--navy);color:#fff}
.pp-body .pp-share svg{width:16px;height:16px;margin:0;color:inherit}
[data-theme="dark"] .pp-actions .pp-share{border-color:var(--gold);color:var(--ink)}
[data-theme="dark"] .pp-actions .pp-share:hover{background:var(--gold);color:var(--navy)}
/* The "still loading" state, over the map and in the middle of it. The first
   version was a pill in the topbar and the owner could not find it among the
   other controls. A dimmed map with one box in the centre cannot be missed. It
   takes no pointer events: a stalled fetch must never trap the page behind it.
   Sits between the map (z 0) and the topbar (z 1000), so the controls stay on top. */
.loading-overlay{position:fixed;inset:0;z-index:900;display:grid;place-items:center;
  background:rgba(28,35,64,.38);backdrop-filter:blur(2px);pointer-events:none}
.loading-overlay[hidden]{display:none}
.loading-box{display:flex;align-items:center;gap:14px;background:var(--card);color:var(--ink);
  border-radius:16px;padding:18px 24px;box-shadow:var(--shadow);border-bottom:3px solid var(--gold);
  font-size:15px;font-weight:700;max-width:min(420px,90vw)}
.loading-box i{width:22px;height:22px;border-radius:50%;border:3px solid var(--gold);border-top-color:transparent;
  animation:pill-spin .8s linear infinite;flex:none}
@keyframes pill-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.loading-box i{animation:none;border-top-color:var(--gold)}}