/* ==========================================================================
   PalosVerdesLife.com — wayfinding (campus maps & plaza directories)
   Load after pv.css. Uses pv.css tokens; markup is documented in wayfind.js.
   ========================================================================== */

/* ---------- Map + list split view ---------- */
.wf {
  display: grid;
  grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  height: clamp(540px, calc(100vh - 130px), 740px);
  height: clamp(540px, calc(100dvh - 130px), 740px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.wf-map-col { position: relative; min-width: 0; min-height: 0; }
.wf-map { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: var(--mist); }
.wf-map.leaflet-container { font-family: var(--sans); }
.wf-side {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  border-left: 1px solid var(--line); background: var(--card);
}
.wf-side-head { padding: 18px 20px 12px; border-bottom: 1px solid var(--line); background: var(--paper); }
.wf-side-head h2, .wf-side-head .wf-title {
  font-family: var(--serif); font-size: 1.35rem; line-height: 1.15; margin-bottom: 10px;
}
.wf-search { position: relative; }
.wf-search input {
  display: block; width: 100%;
  font-family: var(--sans); font-size: 1rem;  /* 16px: no iOS zoom on focus */
  padding: 11px 14px 11px 38px; min-height: 46px;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--field-line); border-radius: var(--r);
  -webkit-appearance: none; appearance: none;
}
.wf-search input:focus { outline: 2px solid var(--sea); outline-offset: 1px; border-color: var(--sea); }
.wf-search::before {
  content: ""; position: absolute; left: 13px; top: 50%; width: 13px; height: 13px; margin-top: -8px;
  border: 2px solid var(--ink-3); border-radius: 50%; pointer-events: none;
}
.wf-search::after {
  content: ""; position: absolute; left: 25px; top: 50%; width: 2px; height: 7px; margin-top: 2px;
  background: var(--ink-3); transform: rotate(-45deg); pointer-events: none;
}
.wf-hint { font-size: .78rem; color: var(--ink-3); margin-top: 6px; }

/* ---------- Category chips ---------- */
.wf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.wf-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: .78rem; font-weight: 700; line-height: 1.2;
  padding: 8px 12px; min-height: 38px;
  color: var(--ink-2); background: var(--card);
  border: 1px solid var(--line-dark); border-radius: 999px; cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.wf-chip:hover { border-color: var(--ocean); color: var(--ocean); }
.wf-chip.on, .wf-chip[aria-pressed="true"] { background: var(--ocean); border-color: var(--ocean); color: #fff; }
.wf-chip .wf-chip-n { font-weight: 600; opacity: .8; }
.wf-chip-arrival { border-style: dashed; border-color: var(--ocean); color: var(--ocean); }
.wf-chip-arrival.on { border-style: solid; }
.wf-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--c, var(--ocean)); box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(0,0,0,.18);
}
.wf-chip.on .wf-dot { box-shadow: 0 0 0 1.5px #fff; }

.wf-count { font-size: .82rem; color: var(--ink-3); margin-top: 10px; min-height: 1.3em; }
.wf-arrival-note {
  font-size: .84rem; line-height: 1.5; color: #123f4e; margin-top: 8px;
  background: #e9f0f1; border-left: 3px solid var(--ocean); border-radius: 0 var(--r) var(--r) 0; padding: 8px 12px;
}

/* ---------- The list ---------- */
.wf-list {
  list-style: none; margin: 0; padding: 0;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.wf-item { border-bottom: 1px solid var(--line); }
.wf-item:last-child { border-bottom: none; }
.wf-item[hidden] { display: none; }
.wf-item-btn {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 11px 18px; min-height: 52px;
  font: inherit; text-align: left; color: inherit;
  background: none; border: 0; border-left: 3px solid transparent; cursor: pointer;
}
span.wf-item-btn { cursor: default; } /* static no-JS list */
.wf-item-btn:hover { background: var(--mist); }
.wf-item-btn:focus-visible { outline-offset: -3px; }
.wf-item.is-active > .wf-item-btn { background: #eaf2f3; border-left-color: var(--tile); }
.wf-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-top: 1px; border-radius: 50%;
  background: var(--c, var(--ocean)); color: #fff;
  font-size: .72rem; font-weight: 800; line-height: 1;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.wf-item.is-approx .wf-num { box-shadow: inset 0 0 0 2px rgba(255,255,255,.85); opacity: .9; }
.wf-item-main { display: flex; flex-direction: column; min-width: 0; }
.wf-item-name { font-weight: 700; font-size: .95rem; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.wf-item-sub { font-size: .8rem; line-height: 1.4; color: var(--ink-3); margin-top: 2px; }
.wf-badge {
  display: inline-block; vertical-align: 1px; margin-left: 4px;
  font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 3px; background: var(--mist); color: var(--ink-2); white-space: nowrap;
}
.wf-badge-warn { background: #f8ece4; color: var(--tile-deep); }
.wf-badge-muted { background: transparent; border: 1px dashed var(--line-dark); color: var(--ink-3); }
.wf-item-more { padding: 0 18px 14px 59px; font-size: .88rem; line-height: 1.55; color: var(--ink-2); }
.wf-item-more[hidden] { display: none; }
.wf-item-more p { margin-top: 4px; }
.wf-addr, .wf-where { color: var(--ink-3); }
.wf-note-sm { font-size: .8rem; color: var(--ink-3); font-style: italic; }
.wf-links { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 6px !important; }
.wf-links a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- Map markers ---------- */
.wf-mk { background: none; border: 0; }
.wf-pin {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c, var(--ocean)); color: #fff;
  font: 800 11px/1 var(--sans); letter-spacing: -.02em;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
  transition: transform .12s ease, box-shadow .12s ease;
  cursor: pointer;
}
.wf-mk.is-approx .wf-pin { border-style: dashed; }
.wf-mk.is-closed .wf-pin { opacity: .7; }
.wf-mk:hover .wf-pin { transform: scale(1.12); }
.wf-mk.is-active .wf-pin {
  transform: scale(1.32);
  box-shadow: 0 0 0 2px var(--c, var(--ocean)), 0 0 0 5px rgba(255,255,255,.9), 0 3px 10px rgba(0,0,0,.4);
}
.wf-far .wf-mk .wf-pin { transform: scale(.5); color: transparent; }
.wf-far .wf-mk.is-active .wf-pin { transform: scale(1); color: #fff; }

/* ---------- Building / area labels (halo text) ---------- */
.wf-label { background: none; border: 0; pointer-events: none; }
.wf-label span {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  white-space: nowrap; pointer-events: none;
  font-family: var(--sans); font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #4d3a1c;
  text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 0 0 6px rgba(255,255,255,.95);
}
.wf-label-field span, .wf-label-green span, .wf-label-court span, .wf-label-track span { color: #2c5520; }
.wf-label-pool span { color: #0b4f75; }
.wf-label-parking span { color: #3f4a54; }
.wf-label-item span {
  transform: translate(18px, -50%);
  font-size: .72rem; letter-spacing: .01em; text-transform: none; color: var(--ocean-night);
}
.wf-nolabels .wf-label { display: none; }
.wf-sat .wf-label span {
  color: #fff;
  text-shadow: 0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 0 6px rgba(0,0,0,.9);
}

/* ---------- Arrival & parking overlay ---------- */
.wf-arrow-mk { background: none; border: 0; pointer-events: none; }
.wf-arrow { display: block; width: 18px; height: 18px; transform-origin: 50% 50%; }
.wf-arrow svg { display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.wf-callout { background: none; border: 0; pointer-events: none; }
.wf-callout span {
  position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 10px));
  white-space: nowrap; padding: 4px 9px; border-radius: 4px;
  font-family: var(--sans); font-size: .7rem; font-weight: 800; letter-spacing: .04em;
  color: #fff; background: var(--ocean-night); box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.wf-callout span::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--ocean-night);
}
.wf-callout-in span { background: #0b5c8a; }   .wf-callout-in span::after { border-top-color: #0b5c8a; }
.wf-callout-out span { background: #b04500; }  .wf-callout-out span::after { border-top-color: #b04500; }
.wf-callout-staff span { background: #4f5b66; } .wf-callout-staff span::after { border-top-color: #4f5b66; }
.leaflet-tooltip.wf-tip { font-family: var(--sans); font-size: .78rem; font-weight: 700; color: var(--ink); }

/* ---------- Map controls (Map / Satellite, Fit all) ---------- */
.wf-ctl { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.wf-ctl-group {
  display: flex; overflow: hidden;
  background: #fff; border: 1px solid rgba(0,0,0,.22); border-radius: 6px; box-shadow: 0 1px 5px rgba(0,0,0,.18);
}
.wf-ctl-btn {
  font-family: var(--sans); font-size: .76rem; font-weight: 700; letter-spacing: .02em;
  min-height: 36px; padding: 8px 12px;
  color: var(--ink-2); background: #fff; border: 0; cursor: pointer;
}
.wf-ctl-group .wf-ctl-btn + .wf-ctl-btn { border-left: 1px solid var(--line); }
.wf-ctl-btn:hover { background: var(--mist); color: var(--ink); }
.wf-ctl-btn.on, .wf-ctl-btn[aria-pressed="true"] { background: var(--ocean); color: #fff; }
.wf-ctl-fit { border: 1px solid rgba(0,0,0,.22); border-radius: 6px; box-shadow: 0 1px 5px rgba(0,0,0,.18); }
.wf-ctl-btn:focus-visible { outline: 2px solid var(--tile); outline-offset: -2px; }

/* ---------- Popups ---------- */
.wf-popup .leaflet-popup-content-wrapper { border-radius: var(--r); }
.wf-popup .leaflet-popup-content { margin: 12px 14px 12px; font-family: var(--sans); font-size: .86rem; line-height: 1.5; }
.wf-pop-cat {
  display: flex; align-items: center; gap: 6px; margin-bottom: 2px; padding-right: 18px;
  font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c, var(--ocean));
}
.wf-pop-cat .wf-dot { background: var(--c, var(--ocean)); }
.wf-pop-name { font-weight: 800; font-size: 1rem; line-height: 1.25; color: var(--ink); padding-right: 16px; }
.wf-pop-sub { font-size: .8rem; color: var(--ink-3); margin-top: 1px; }
.wf-pop-body p { margin: 5px 0 0; color: var(--ink-2); }
.wf-pop-body .wf-links { margin-top: 6px !important; }
.wf-pop-list {
  display: none; margin-top: 6px; padding: 6px 0; min-height: 32px;
  font: 700 .78rem var(--sans); color: var(--ocean); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Legend & stamp ---------- */
.wf-legend { margin-top: 12px; gap: 8px 18px; font-size: .8rem; }
.wf-sw { display: inline-block; width: 16px; height: 12px; border: 1px solid; border-radius: 2px; flex: none; }
.wf-sw-line { height: 0; border: 0; border-top: 2px dashed; border-radius: 0; }
.wf-sw-route { height: 0; border: 0; border-top: 4px solid; border-radius: 2px; }
.wf-sw-route.is-dashed { border-top-style: dashed; }
.wf-credit { font-size: .74rem; color: var(--ink-3); margin-top: 10px; }
.wf-stamp { font-size: .82rem; color: var(--ink-3); margin-top: 10px; }
.wf-stamp a { font-weight: 700; }

/* ---------- Page furniture shared by campus & plaza pages ---------- */
.wf-facts {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 26px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.wf-facts > div { padding: 14px 18px; border-right: 1px solid var(--line); min-width: 0; }
.wf-facts > div:last-child { border-right: none; }
.wf-facts dt { font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.wf-facts dd { font-size: .92rem; font-weight: 600; color: var(--ink); margin-top: 3px; overflow-wrap: anywhere; }
.wf-facts dd a { font-weight: 700; }
@media (max-width: 960px) {
  .wf-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wf-facts > div { border-bottom: 1px solid var(--line); }
  .wf-facts > div:nth-child(2n) { border-right: none; }
  .wf-facts > div:last-child { grid-column: 1 / -1; border-bottom: none; }
}
.wf-faq details { border-bottom: 1px solid var(--line); }
.wf-faq details:first-child { border-top: 1px solid var(--line); }
.wf-faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 16px 36px 16px 0; font-weight: 700; font-size: 1rem; color: var(--ink);
}
.wf-faq summary::-webkit-details-marker { display: none; }
.wf-faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.3rem; font-weight: 400; color: var(--tile);
}
.wf-faq details[open] summary::after { content: "\2212"; }
.wf-faq details > div { padding: 0 0 16px; color: var(--ink-2); font-size: .95rem; }
.wf-faq details > div p + p { margin-top: 8px; }
.wf-steps { margin: 10px 0 0 20px; color: var(--ink-2); font-size: .93rem; }
.wf-steps li { margin-bottom: 7px; }
.wf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.wf-btn-link {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px;
  font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--ocean); border-radius: 3px; color: var(--ocean); background: var(--card);
}
.wf-btn-link:hover { background: var(--ocean); color: #fff; }

/* ---------- Phones & tablets: map on top, then the list in the page flow ---------- */
@media (max-width: 860px) {
  .wf { display: block; height: auto; overflow: visible; }
  .wf-map-col { height: 58vh; min-height: 320px; max-height: 560px; border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; }
  .wf-side { border-left: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .wf-list { overflow: visible; flex: none; }
  .wf-side-head { padding: 16px 16px 12px; }
  .wf-item-btn { padding: 12px 16px; }
  .wf-item-more { padding: 0 16px 14px 57px; }
  .wf-pop-list { display: inline-block; }
}
/* Phones: full-size touch targets (44px) with readable labels */
@media (max-width: 480px) {
  .wf-chips { gap: 8px; }
  .wf-chip { padding: 8px 13px; font-size: .82rem; min-height: 44px; }
  .wf-ctl { gap: 6px; }
  .wf-ctl-btn { padding: 8px 12px; font-size: .8rem; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-pin, .wf-chip { transition: none; }
}

/* ---------- Print: the list is the map ---------- */
@media print {
  .ribbon, .masthead, .skip-link, .colophon, .wf-map-col, .wf-chips, .wf-search, .wf-hint, .wf-actions, .wf-pop-list { display: none !important; }
  .wf { display: block; height: auto; border: 0; box-shadow: none; overflow: visible; }
  .wf-side { border: 0; max-height: none; }
  .wf-side-head { background: none; border: 0; padding: 0 0 8px; }
  .wf-list { overflow: visible; }
  .wf-item { break-inside: avoid; page-break-inside: avoid; }
  .wf-item[hidden] { display: block !important; }
  .wf-item-btn { padding: 6px 0; min-height: 0; border: 0; }
  .wf-item-more, .wf-item-more[hidden] { display: block !important; padding: 0 0 6px 38px; }
  .wf-links a[href^="http"]::after { content: ""; }
  .wf-facts { box-shadow: none; }
  .wf-faq details > div { display: block !important; }
  .section { padding: 18px 0; }
}

/* ==========================================================================
   Appended at integration (Oct 2, 2026)
   ========================================================================== */
/* Plaza directory pages: the static A-Z table and inline suite lists (moved from page <style>, v2) */
.wf-dir-table th[scope=row] { min-width: 12em; }
.wf-dir-table .wf-num { width: 22px; height: 22px; margin: 0 8px 0 0; font-size: .66rem; vertical-align: -5px; display: inline-flex; }
.wf-dir-table .wf-dot { margin-right: 6px; vertical-align: 0; }
.wf-dir-table .wf-badge { margin-left: 6px; }
.wf-dir-table td[data-label="Links"] a { display: inline-block; margin-right: 12px; font-weight: 700; white-space: nowrap; }
.wf-dir-table .wf-unit { display: block; font-weight: 700; color: var(--ink); }
.wf-dir-table .wf-street { color: var(--ink-3); }
.wf-dir-table .wf-note-sm { display: block; margin-top: 2px; }
.wf-dir-table td[data-label="Phone"] { white-space: nowrap; }
@media (max-width: 640px) { .wf-dir-table th[scope=row] { min-width: 0; } }
.wf-inline-list { display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; margin-top: 10px; font-size: .9rem; }
.wf-inline-list a { font-weight: 600; }
/* shopping-centers.html: business search, center cards, overview map (moved from page <style>, v2) */
.sc-search { max-width: 780px; }
.sc-label { display: block; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.sc-try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.sc-try > span { font-size: .8rem; font-weight: 700; color: var(--ink-3); margin-right: 2px; }
.sc-results { list-style: none; margin-top: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; }
.sc-results:empty { display: none; }
.sc-hit + .sc-hit { border-top: 1px solid var(--line); }
.sc-hit a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 56px; color: inherit; }
.sc-hit a:hover { background: var(--mist); }
.sc-hit a:focus-visible { background: var(--mist); outline-offset: -3px; }
.sc-hit-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.sc-hit-name { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.sc-hit-sub { font-size: .82rem; line-height: 1.45; color: var(--ink-3); }
.sc-hit-go { flex: none; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ocean); }
.sc-card { display: flex; flex-direction: column; }
.sc-card .overline { display: flex; align-items: center; gap: 8px; }
.sc-card h3 { margin: 6px 0 6px; }
.sc-card .sc-count { font-weight: 700; color: var(--ink); }
.sc-card .sc-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.sc-card p.sc-incl { font-size: .86rem; color: var(--ink-3); margin-top: 8px; }
.sc-card .sc-go { margin-top: auto; padding-top: 14px; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ocean); }
.sc-area-link { margin-top: 18px; }
@media (max-width: 420px) { .sc-hit-go { display: none; } .sc-hit a { padding: 12px 14px; } }

/* ---------- Integration fixes (v2) ---------- */
/* .wf-chip sets display:inline-flex, which would otherwise beat the hidden attribute */
.wf-chip[hidden] { display: none; }
/* Split view: 12-14 category chips made the side head tall and squeezed the list;
   cap the chip block at about three rows and let it scroll */
@media (min-width: 861px) {
  .wf-side-head .wf-chips { max-height: 132px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 2px 4px 2px 2px; margin-left: -2px; }
}

/* ---------- Phone fixes (v3) ---------- */
/* On phones the list sits in the page under the map. Long directories (156 businesses on the Western
   Avenue page) made it thousands of pixels tall, so cap it at about two-thirds of the screen and let it
   scroll; the inset shade at the bottom says there is more. Scroll chaining stays on, so a swipe that
   reaches the end of the list carries on down the page. */
@media (max-width: 860px) {
  .wf-list {
    max-height: 70vh; max-height: 70dvh; overflow-y: auto; overscroll-behavior: auto;
    box-shadow: inset 0 -14px 12px -12px rgba(6, 42, 53, .22);
  }
  .wf-list:focus-visible { outline: 2px solid var(--sea); outline-offset: -2px; }
}
@media print { .wf-list { max-height: none; overflow: visible; box-shadow: none; } }