/* CANAL PASS — Operational Network block front-end styles.
   Self-contained: does not depend on the theme or any other plugin CSS. */

.cponw-section {
  padding: clamp(60px, 8vw, 100px) 0;
}
.cponw-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
  box-sizing: border-box;
}
.cponw-container * { box-sizing: border-box; }

.cponw-head { max-width: 720px; margin-bottom: 3rem; }
.cponw-eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
  font-weight: 600;
  color: #c9a86a;
  margin: 0 0 1rem;
}
.cponw-title {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 600;
  color: #0b1b2b;
  margin: 0 0 .75rem;
  line-height: 1.25;
}
.cponw-description {
  color: #3b4e62;
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
}

/* ---- Map ---- */
.cponw-map-wrap {
  position: relative;
  background: #0a3d62;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 1000 / 480;
  box-shadow: inset 0 0 80px rgba(0,0,0,.18);
}
.cponw-map-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: .95;
}

.cponw-pin {
  position: absolute;
  width: 12px; height: 12px;
  margin-left: -6px; margin-top: -6px;
  background: #c9a86a;
  border-radius: 50%;
  box-shadow:
    0 0 0 3px rgba(201,168,106,.35),
    0 0 24px 6px rgba(201,168,106,.55);
  z-index: 2;
  cursor: pointer;
  border: none;
  transition: transform .2s ease;
  display: block;
}
.cponw-pin--hq {
  width: 16px; height: 16px;
  margin-left: -8px; margin-top: -8px;
  background: radial-gradient(circle at center, #fff 0 30%, #c9a86a 31% 100%);
  box-shadow:
    0 0 0 3px rgba(201,168,106,.45),
    0 0 32px 8px rgba(201,168,106,.7);
  animation: cponw-pulse 2.4s ease-in-out infinite;
}
.cponw-pin--primary {
  width: 14px; height: 14px;
  margin-left: -7px; margin-top: -7px;
  box-shadow:
    0 0 0 3px rgba(201,168,106,.4),
    0 0 28px 7px rgba(201,168,106,.65);
}
.cponw-pin--office {
  opacity: .92;
}
/* Sub offices: smaller and in a light blue, so they read as a second
   tier against the gold agent network rather than competing with it. */
.cponw-pin--sub {
  width: 9px; height: 9px;
  margin-left: -4.5px; margin-top: -4.5px;
  background: #7ec8e3;
  box-shadow:
    0 0 0 2px rgba(126, 200, 227, .3),
    0 0 16px 4px rgba(126, 200, 227, .45);
}
a.cponw-pin--sub:hover,
a.cponw-pin--sub:focus {
  box-shadow:
    0 0 0 2px rgba(126, 200, 227, .3),
    0 0 16px 4px rgba(126, 200, 227, .45);
}
/* A pin that links is an <a>, so the theme would otherwise give it
   link colour, underline and its own hover. Everything visual stays
   with .cponw-pin above; this just stops the theme interfering. */
a.cponw-pin {
  text-decoration: none;
  color: inherit;
  font-size: 0;
  line-height: 0;
}
a.cponw-pin:hover,
a.cponw-pin:focus {
  text-decoration: none;
  box-shadow:
    0 0 0 3px rgba(201, 168, 106, .4),
    0 0 28px 7px rgba(201, 168, 106, .65);
}

.cponw-pin:hover,
.cponw-pin:focus-visible {
  transform: scale(1.3);
  outline: none;
  /* The tooltip is this pin's ::after, so it can only ever paint as
     high as the pin itself. Leaving every pin on the same z-index let
     any pin later in the markup sit on top of an open tooltip. Lifting
     the hovered pin takes its tooltip clear of the other pins and of
     the legend (z-index 3) too. */
  z-index: 10;
}
/* Keyboard users need to see where they are; a linked pin gets a ring
   rather than the browser's default outline, which the rule above
   removes. */
a.cponw-pin:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.cponw-pin:hover::after,
.cponw-pin:focus-visible::after {
  content: attr(data-label);
  position: absolute;
  left: 50%; bottom: calc(100% + 10px);
  transform: translateX(-50%);
  background: #ffffff;
  color: #0b1b2b;
  padding: 6px 12px;
  border-radius: 4px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  font-size: 13px;
  font-weight: 600;
  /* A linked pin is an <a>, which carries line-height: 0 so the anchor
     itself stays invisible — and the tooltip, being that anchor's
     ::after, used to inherit it and collapse into a flat strip while
     every unlinked pin's tooltip kept the theme's line height. Stating
     it here keeps all tooltips the same box, linked or not. */
  line-height: 1.65;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(11,27,43,.25);
  pointer-events: none;
  z-index: 5;
}

@keyframes cponw-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(201,168,106,.45), 0 0 32px 8px rgba(201,168,106,.7); }
  50%      { box-shadow: 0 0 0 6px rgba(201,168,106,.18), 0 0 40px 12px rgba(201,168,106,.5); }
}

.cponw-legend {
  position: absolute;
  bottom: 20px; left: 20px;
  background: rgba(255,255,255,.95);
  border-radius: 8px;
  padding: 12px 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  font-size: .82rem;
  color: #0b1b2b;
  box-shadow: 0 1px 2px rgba(11,27,43,.06), 0 1px 1px rgba(11,27,43,.04);
  z-index: 3;
}
.cponw-legend strong { display: block; font-size: .8rem; margin-bottom: 4px; }
.cponw-legend-key { display: flex; align-items: center; gap: 8px; color: #3b4e62; }
.cponw-legend-key + .cponw-legend-key { margin-top: 6px; }
.cponw-legend-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #c9a86a;
  box-shadow: 0 0 0 4px rgba(201,168,106,.25);
  display: inline-block;
  flex-shrink: 0;
}
.cponw-legend-dot--sub {
  width: 7px; height: 7px;
  background: #7ec8e3;
  box-shadow: 0 0 0 3px rgba(126, 200, 227, .25);
  /* Keeps the two dots' centres aligned despite the size difference. */
  margin: 0 1.5px;
}