/* SPS Companies — the footprint section, for a Kadence page.

   Everything is scoped to .sps-fp-root, the element the [sps_footprint] shortcode prints,
   so nothing here reaches the theme and the theme's own styling is held off at the door.

   How the scoping is weighted, because it is the part that is easy to break:
   - Kadence styles bare elements, up to `button:hover` and `.entry-content h2` at (0,1,1).
   - The reset below is `html .sps-fp-root button` and friends, (0,1,2): just enough to
     beat the theme whatever order the stylesheets load in.
   - Every design rule is `.sps-fp-root .class`, (0,2,0) or more: just enough to beat the
     reset. A design rule written with a bare element selector would lose to the reset,
     so give it a class. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/archivo-400.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/archivo-500.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/archivo-600.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/archivo-700.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-600.woff2) format('woff2')}

/* ============================================================
   TOKENS — on the section, not :root, so they cannot collide with the theme's.
   Navy scale derived from the SPS corporate mark (#3137A0 / #303078)
   ============================================================ */
.sps-fp-root{
  --ink:#0a1531;
  --navy-800:#142450;
  --brand:#3137a0;
  --steel-00:#ffffff;
  --steel-50:#f5f7fa;
  --steel-100:#eaeef4;
  --steel-300:#c0c9d9;
  --steel-400:#8e9ab1;
  --steel-500:#5f6b83;
  --accent:#d9833f;
  --hair-l:rgba(9,18,40,.12);
  --ff-display:'Archivo',system-ui,sans-serif;
  --ff-text:'Inter',system-ui,sans-serif;
  --ff-label:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);

  display:block;width:100%;
  font-family:var(--ff-text);font-size:17px;line-height:1.62;color:var(--navy-800);
  -webkit-font-smoothing:antialiased;text-align:left
}
.sps-fp-root,.sps-fp-root *,.sps-fp-root *::before,.sps-fp-root *::after{box-sizing:border-box}

/* ============================================================
   RESET — (0,1,2), see the note at the top
   ============================================================ */
html .sps-fp-root button,
html .sps-fp-root button:where(:hover,:focus,:active,:visited,:disabled){
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:none;text-decoration:none;text-shadow:none;
  background:none;border:0;border-radius:0;box-shadow:none;outline-offset:3px;
  margin:0;padding:0;width:auto;height:auto;min-width:0;min-height:0;
  cursor:pointer;-webkit-appearance:none;appearance:none;transition:none
}
html .sps-fp-root a,
html .sps-fp-root a:where(:hover,:focus,:active,:visited){color:inherit;text-decoration:none;box-shadow:none}
html .sps-fp-root img{display:block;max-width:100%;height:auto;margin:0;border:0;box-shadow:none;border-radius:0}
html .sps-fp-root p,
html .sps-fp-root h2{margin:0;padding:0}
html .sps-fp-root h2{
  font-family:var(--ff-display);font-weight:600;letter-spacing:-.014em;line-height:1.12;
  color:inherit;text-transform:none
}
html .sps-fp-root em,html .sps-fp-root b,html .sps-fp-root i{font:inherit}
.sps-fp-root :focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ============================================================
   SECTION HEAD
   ============================================================ */
.sps-fp-root .mono{font-family:var(--ff-label);font-size:13.5px;letter-spacing:0;font-weight:600}
.sps-fp-root .eyebrow{display:flex;align-items:center;gap:12px;color:var(--brand);margin-bottom:22px}
.sps-fp-root .eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6;flex:none}
.sps-fp-root .h2{font-size:clamp(30px,4.4vw,54px);color:var(--navy-800)}
.sps-fp-root .lede{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--steel-500);max-width:62ch}
.sps-fp-root .sec-head{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-bottom:clamp(40px,5vw,68px)}
@media(min-width:900px){
  .sps-fp-root .sec-head{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:end}
}

/* ============================================================
   FOOTPRINT
   ============================================================ */
.sps-fp-root .fp{display:grid;gap:36px}
@media(min-width:1040px){.sps-fp-root .fp{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:48px;align-items:start}}
.sps-fp-root .fp > *{min-width:0}

/* company roster: logo tiles rather than a list of names. Sticky beside the map on wide
   screens; raise --sps-fp-sticky-top on the root if the theme's sticky header is taller. */
.sps-fp-root .fp-cos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(min-width:1040px){.sps-fp-root .fp-cos{position:sticky;top:var(--sps-fp-sticky-top,104px)}}
.sps-fp-root .fp-co{
  position:relative;
  display:flex;flex-direction:column;justify-content:space-between;gap:12px;text-align:left;
  background:#fff;border:1px solid var(--hair-l);border-radius:10px;padding:14px 14px 12px;
  min-height:92px;transition:border-color .22s,box-shadow .22s var(--ease),transform .22s var(--ease)
}
.sps-fp-root .fp-co:hover{background:#fff;border-color:var(--steel-300);transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(20,36,80,.3)}
/* A wordmark padded onto a square canvas needs a box of its own to clip the transparent
   margin against — object-fit cannot do it, because `cover` would crop the wide wordmarks
   horizontally instead. Flex-centred, so the window sits over the middle of the artwork. */
.sps-fp-root .fp-co-logo{display:flex;align-items:center;height:36px;overflow:hidden}
.sps-fp-root .fp-co-logo img{max-width:106px;max-height:106px;width:auto;height:auto;object-fit:contain;
  object-position:left center;filter:grayscale(1);opacity:.62;transition:.24s var(--ease)}
.sps-fp-root .fp-co:hover .fp-co-logo img,.sps-fp-root .fp-co[aria-pressed="true"] .fp-co-logo img{filter:none;opacity:1}
.sps-fp-root .fp-co[data-light-art="true"] .fp-co-logo{
  width:fit-content;border-radius:6px;padding:0 9px;margin:0 -9px;
  background:transparent;transition:background .32s var(--ease)
}
.sps-fp-root .fp-co[data-light-art="true"] .fp-co-logo img{
  filter:grayscale(1) brightness(.42) contrast(1.2);opacity:.85;
  transition:filter .32s var(--ease),opacity .32s var(--ease)
}
.sps-fp-root .fp-co:hover[data-light-art="true"] .fp-co-logo,.sps-fp-root .fp-co[aria-pressed="true"][data-light-art="true"] .fp-co-logo{
  background:var(--steel-100)
}
.sps-fp-root .fp-co:hover[data-light-art="true"] .fp-co-logo img,.sps-fp-root .fp-co[aria-pressed="true"][data-light-art="true"] .fp-co-logo img{
  filter:none;opacity:1
}
.sps-fp-root .fp-co-name{font-size:12px;font-weight:600;color:var(--navy-800);line-height:1.3}
.sps-fp-root .fp-co-n{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--steel-500)}
.sps-fp-root .fp-co-n i{width:9px;height:9px;border-radius:50%;flex:none;display:block}
/* Selection is multi-select, so a picked tile has to read as picked at a glance from
   across a row of nine — a 1px border did not. Ring plus a tick in the corner. */
.sps-fp-root .fp-co[aria-pressed="true"]{border-color:var(--co);box-shadow:inset 0 0 0 2px var(--co),0 10px 24px -18px rgba(20,36,80,.4)}
.sps-fp-root .fp-co[aria-pressed="true"] .fp-co-n{color:var(--navy-800);font-weight:600}
.sps-fp-root .fp-co::after{
  content:"";position:absolute;top:9px;right:9px;width:16px;height:16px;border-radius:50%;
  background:var(--co) center/9px 9px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.4l3 3L10.5 3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity:0;transform:scale(.6);transition:opacity .18s var(--ease),transform .18s var(--ease)
}
.sps-fp-root .fp-co[aria-pressed="true"]::after{opacity:1;transform:none}

/* A selected company's facilities, directly under its own row of tiles. The block spans
   the tile column so the tiles below simply move down. */
.sps-fp-root .fp-fac{
  grid-column:1/-1;
  display:grid;gap:9px;
  padding:12px 13px 13px;margin:-2px 0 2px;
  background:var(--steel-50);border:1px solid var(--hair-l);border-left:3px solid var(--co);
  border-radius:10px
}
.sps-fp-root .fp-fac-co{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--co)}
.sps-fp-root .fp-band{display:grid;gap:5px}
.sps-fp-root .fp-band-name{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--steel-400)}
.sps-fp-root .fp-chips{display:flex;flex-wrap:wrap;gap:5px}
.sps-fp-root .fp-chip{
  position:relative;
  font-size:11.5px;font-weight:500;line-height:1.2;color:var(--navy-800);
  background:#fff;border:1px solid var(--hair-l);border-radius:100px;padding:5px 10px;
  cursor:pointer;transition:border-color .16s var(--ease),background .16s var(--ease),
    color .16s var(--ease),opacity .16s var(--ease)
}
.sps-fp-root .fp-chip:hover{background:#fff;color:var(--navy-800);border-color:var(--co)}
/* Nothing is picked to begin with, so a chip's default is plain and the emphasis goes on
   the picked state: filled in the company's own colour, with a dot that mirrors the one
   pulsing on the map. */
.sps-fp-root .fp-chip[aria-pressed="true"],.sps-fp-root .fp-chip[aria-pressed="true"]:hover{
  color:#fff;background:var(--co);border-color:var(--co);padding-left:22px;
  box-shadow:0 6px 16px -10px color-mix(in srgb,var(--co) 70%,transparent)
}
.sps-fp-root .fp-chip[aria-pressed="true"]:hover{filter:brightness(1.08)}
.sps-fp-root .fp-chip[aria-pressed="true"]::before{
  content:"";position:absolute;left:9px;top:50%;width:6px;height:6px;margin-top:-3px;
  border-radius:50%;background:#fff;animation:spsChipBlink 1.5s var(--ease) infinite
}
@keyframes spsChipBlink{0%,55%,100%{opacity:1}25%{opacity:.35}}
@media (prefers-reduced-motion:reduce){
  .sps-fp-root .fp-chip[aria-pressed="true"]::before{animation:none}
}

/* One line under the map when companies are picked: what it adds up to, and where to go. */
.sps-fp-root .fp-sum{display:flex;align-items:center;gap:14px;flex-wrap:wrap;width:100%}
.sps-fp-root .fp-sum-n{font-family:var(--ff-display);font-size:15px;font-weight:600;color:var(--navy-800);
  display:inline-flex;align-items:baseline;gap:8px}
.sps-fp-root .fp-sum-n em{font-family:var(--ff-text);font-size:12.5px;font-weight:500;font-style:normal;
  color:var(--brand);background:color-mix(in srgb,var(--brand) 9%,transparent);
  border-radius:100px;padding:2px 9px}
.sps-fp-root .fp-sum-links{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px}
.sps-fp-root .fp-sum-links a,.sps-fp-root .fp-sum-links a:hover,.sps-fp-root .fp-sum-links a:focus{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--brand);text-decoration:none}
.sps-fp-root .fp-sum-links a .arw{transition:transform .26s var(--ease)}
.sps-fp-root .fp-sum-links a:hover .arw{transform:translate(2px,-2px)}
.sps-fp-root .fp-sum-links span{color:var(--steel-500)}
.sps-fp-root .fp-sep{width:1px;height:12px;background:var(--hair-l);display:block}
.sps-fp-root .fp-sum .fpd-close{margin-left:auto}

/* map */
.sps-fp-root .fp-panel{background:#fff;border:1px solid var(--hair-l);border-radius:12px;padding:clamp(8px,1.2vw,16px)}
.sps-fp-root .fp-map{position:relative;aspect-ratio:1000/620;overflow:hidden}
.sps-fp-root .fp-map svg{position:absolute;inset:0;width:100%;height:100%;max-width:none;overflow:hidden}
.sps-fp-root .geo-us{fill:#e6ebf4;stroke:#c2cddf;stroke-width:1;stroke-linejoin:round}
.sps-fp-root .geo-mx{fill:#e9edf5;stroke:#c8d2e2;stroke-width:1;stroke-linejoin:round}
.sps-fp-root .geo-mesh{fill:none;stroke:#fff;stroke-width:1.2}

.sps-fp-root .node{position:absolute;transform:translate(-50%,-50%);z-index:2;padding:0;line-height:0;
  border-radius:50%;transition:opacity .24s,z-index 0s}
.sps-fp-root .node b{
  display:block;width:13px;height:13px;border-radius:50%;background:var(--co);
  border:2px solid #fff;box-shadow:0 1px 4px rgba(20,36,80,.34);transition:transform .22s var(--ease)
}
.sps-fp-root .node[data-hq="true"] b{width:17px;height:17px;box-shadow:0 0 0 3px rgba(20,36,80,.13),0 1px 4px rgba(20,36,80,.34)}
.sps-fp-root .node:hover{z-index:5}
.sps-fp-root .node:hover b,.sps-fp-root .node:focus-visible b{transform:scale(1.3)}
.sps-fp-root .node[aria-pressed="true"]{z-index:6}
.sps-fp-root .node[aria-pressed="true"] b{transform:scale(1.42);box-shadow:0 0 0 3px rgba(20,36,80,.2),0 2px 8px rgba(20,36,80,.4)}
.sps-fp-root .node em{
  position:absolute;left:17px;top:50%;transform:translateY(-50%);white-space:nowrap;font-style:normal;
  font-size:12.5px;font-weight:500;color:#fff;z-index:9;line-height:1.3;
  opacity:0;transition:opacity .2s;pointer-events:none;background:var(--navy-800);padding:5px 10px;border-radius:7px;
  box-shadow:0 6px 18px -8px rgba(20,36,80,.5)
}
.sps-fp-root .node[data-flip="true"] em{left:auto;right:17px}
.sps-fp-root .node:hover em,.sps-fp-root .node:focus-visible em{opacity:1}
/* dim the rest when a company is selected */
.sps-fp-root .fp[data-focus="true"] .node{opacity:.18}
.sps-fp-root .fp[data-focus="true"] .node[data-on="true"]{opacity:1}

/* Hovering a chip or card marks its dot; picking one makes it pulse. The dot stays fully
   visible even where a selection has dimmed it, or the pulse would be pointing at nothing. */
.sps-fp-root .node[data-hot="true"]{z-index:7;opacity:1!important}
.sps-fp-root .node[data-hot="true"] b{transform:scale(1.35)}
.sps-fp-root .node.is-pulse{z-index:8;opacity:1!important}
.sps-fp-root .node.is-pulse b{animation:spsNodePulse 1.5s var(--ease) infinite}
.sps-fp-root .node.is-pulse::after{
  content:"";position:absolute;left:50%;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;
  border-radius:50%;border:2px solid var(--co);animation:spsNodeRing 1.5s var(--ease) infinite;
  pointer-events:none
}
@keyframes spsNodePulse{0%{transform:scale(1)}22%{transform:scale(1.5)}55%,100%{transform:scale(1)}}
@keyframes spsNodeRing{0%{transform:scale(1);opacity:.8}70%,100%{transform:scale(3.6);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .sps-fp-root .node.is-pulse b{animation:none;transform:scale(1.45)}
  .sps-fp-root .node.is-pulse::after{animation:none;opacity:0}
}

/* detail slot under the map */
.sps-fp-root .fp-detail{margin-top:14px;border:1px solid var(--hair-l);border-radius:10px;background:#fff;
  padding:16px 18px;min-height:104px;display:flex;align-items:center}
.sps-fp-root .fp-detail-hint{font-size:13px;color:var(--steel-400);display:flex;align-items:center;gap:10px}
.sps-fp-root .fp-detail-hint svg{flex:none;color:var(--steel-300)}
.sps-fp-root .fpd{width:100%}
.sps-fp-root .fpd-place{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-bottom:11px;margin-bottom:12px;border-bottom:1px solid var(--hair-l)}
.sps-fp-root .fpd-place strong{font-family:var(--ff-display);font-size:17px;font-weight:600;letter-spacing:-.015em;color:var(--navy-800)}
.sps-fp-root .fpd-close{font-size:12.5px;color:var(--steel-500);padding:3px 8px;border-radius:6px}
.sps-fp-root .fpd-close:hover,.sps-fp-root .fpd-close:focus{background:var(--steel-50);color:var(--navy-800)}

/* One card per facility, not per company: an address can hold several business units. */
.sps-fp-root .fpd-cards{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(204px,1fr))}
.sps-fp-root .fpd-card-co{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--steel-400)}
.sps-fp-root .fpd-card-co i{width:7px;height:7px;border-radius:50%;background:var(--co);flex:none}

/* A card is a button: clicking it pulses its own dot on the map. */
.sps-fp-root .fpd-card{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  min-width:0;width:100%;text-align:left;cursor:pointer;
  padding:11px 13px 12px;background:var(--steel-00);
  border:1px solid var(--hair-l);border-radius:11px;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)
}
.sps-fp-root .fpd-card:hover{background:var(--steel-00);border-color:var(--co);
  box-shadow:0 12px 26px -20px rgba(20,36,80,.5);transform:translateY(-1px)}
.sps-fp-root .fpd-card[aria-pressed="true"],.sps-fp-root .fpd-card[aria-pressed="true"]:hover{border-color:var(--co);
  box-shadow:inset 0 0 0 1px var(--co),0 10px 24px -20px rgba(20,36,80,.5)}
.sps-fp-root .fpd-card[aria-pressed="true"] .fpd-card-co{color:var(--co)}
.sps-fp-root .fpd-types{display:flex;flex-wrap:wrap;gap:4px}
.sps-fp-root .fpd-type{
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--steel-500);background:var(--steel-50);
  border-radius:4px;padding:3px 6px;line-height:1.25;white-space:nowrap
}
.sps-fp-root .fpd-type.is-hq{color:#fff;background:var(--navy-800)}
.sps-fp-root .fpd-addr{font-size:14px;font-weight:600;line-height:1.3;color:var(--navy-800);
  overflow-wrap:anywhere}

@media (prefers-reduced-motion:reduce){
  .sps-fp-root *,.sps-fp-root *::before,.sps-fp-root *::after{transition-duration:.001ms!important}
}