/* Network bridge v1 — applies the product-page look to the Network section:
   BGP Communities, Latency and Locations.

   All three are Kadence-block pages whose content is data: six BGP community
   tables, the [latency_table] shortcode and the [network_locations_points]
   accordion + map. Nothing here touches that markup; it only skins it.

   The latency table styling is ported from https://edgeuno.cloud/latency, with
   its horizontal scroll designed out (see that section). */

/* ============ Latency matrix ============
   The reference page sets min-width:1320px on the table and lets the wrapper
   scroll. That guarantees a horizontal scrollbar even on a wide desktop, which
   is the thing to avoid: this is a 26x26 POP matrix whose cells hold two or
   three digits, so it fits once the sizing stops being generous.

   Compact type and padding remove the scroll on desktop. Below ~1100px it has
   to scroll — 26 columns cannot fit a phone — so the first column and the
   header row stick, keeping the axis labels visible instead of leaving the
   reader lost in a grid of numbers. */
.single-content .overflow-x-auto:has(#latency-table) {
  border: 1px solid rgba(160, 160, 160, .24);
  border-radius: var(--radius-card);
  background: var(--color-surface-card);
  box-shadow: 0 18px 48px rgba(0, 0, 76, .08);
}

#latency-table {
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  table-layout: fixed;
}

#latency-table td,
#latency-table th {
  border-left: 1px solid rgba(160, 160, 160, .22);
  border-top: 1px solid rgba(160, 160, 160, .28);
  padding: 5px 3px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

#latency-table td:first-child,
#latency-table th:first-child {
  border-left: 0;
}

#latency-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid rgba(160, 160, 160, .34);
  border-top: 0;
  background: rgba(216, 243, 243, .96);
  color: var(--color-brand-navy-deep);
  font-weight: 700;
}

/* Row labels stay put while the matrix scrolls sideways. */
#latency-table tbody th:first-child,
#latency-table tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--color-surface-card);
  color: var(--color-brand-navy-deep);
  font-weight: 700;
}

#latency-table thead th:first-child {
  z-index: 3;
  background: rgba(216, 243, 243, .96);
}

#latency-table tbody tr:hover td,
#latency-table tbody tr:hover th {
  background: rgba(216, 243, 243, .32);
}

#latency-table td span {
  color: var(--color-brand-navy-deep);
}

/* The buttons inside cells are just the number; strip the control chrome so a
   cell reads as data rather than as 26 columns of widgets. */
#latency-table .no-btn {
  padding: 0;
  color: inherit;
  font: inherit;
}

/* The controls above the table (origin/destination selects). */
.single-content .latency-controls select,
.single-content select.w-full {
  border: 1px solid rgba(160, 160, 160, .45);
  border-radius: var(--radius-button);
  font-family: var(--font-sans);
  font-size: .9375rem;
}

/* ============ Data tables (BGP Communities, Locations) ============
   Inherit the .single-content table rules from the editorial bridge, plus a
   card frame so a page of six tables reads as sections rather than a wall. */
.page-id-636 .single-content table,
.page-id-712 .single-content table {
  border: 1px solid rgba(160, 160, 160, .28);
  border-radius: var(--radius-card);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

.page-id-636 .single-content th,
.page-id-712 .single-content th {
  border-bottom: 1px solid rgba(160, 160, 160, .3);
  background: rgba(216, 243, 243, .5);
}

.page-id-636 .single-content tbody tr:hover td,
.page-id-712 .single-content tbody tr:hover td {
  background: rgba(216, 243, 243, .28);
}

/* ============ Locations: country list + map =============================
   Reworked from the original 399px sidebar. Three things were wrong there:
   the address column was 169px so every address wrapped to three lines, the
   Brazil panel ran 997px tall against a 588px map so opening it scrolled the
   map out of view, and 13 country cards at 89px each meant a lot of scrolling
   before reaching any data.

   Fixes: give the row the full window, let the map follow the list, and turn
   the four-column table into one row per PoP. Styling only — the Kadence
   blocks and the page content are untouched. */

.single-content .wp-block-kadence-accordion .kt-accordion-panel-inner,
.single-content .wp-block-kadence-accordion .kt-blocks-accordion-header {
  font-family: var(--font-sans);
}

/* Country panel = the inventory card treatment. */
.page-id-712 .single-content .kt-accordion-pane {
  border: 1px solid rgba(160, 160, 160, .3);
  border-radius: var(--radius-card);
  background: var(--color-surface-card);
  margin-bottom: 8px;
  overflow: hidden;
}

/* Kadence ships 32px of vertical padding on the header, which is why the list
   of 13 countries was over 1100px tall before a single one was opened. The
   doubled class outweighs Kadence's own generated selector. */
body.page-id-712 .single-content .accordion-locations.accordion-locations .kt-accordion-header-wrap .kt-blocks-accordion-header {
  padding: 13px 16px;
  color: var(--color-brand-navy-deep);
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.35;
  transition: background-color .15s ease, color .15s ease;
}

body.page-id-712 .single-content .accordion-locations.accordion-locations .kt-accordion-header-wrap .kt-blocks-accordion-header:hover {
  background: var(--color-brand-teal-soft);
}

/* Open country mirrors the active markers on the map, which turn navy too, so
   the link between the two halves is visible rather than implied. */
body.page-id-712 .single-content .accordion-locations.accordion-locations .kt-accordion-header-wrap .kt-blocks-accordion-header.kt-accordion-panel-active {
  background: var(--color-brand-navy);
  color: #fff;
}

body.page-id-712 .single-content .accordion-locations.accordion-locations .kt-accordion-header-wrap .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger::after,
body.page-id-712 .single-content .accordion-locations.accordion-locations .kt-accordion-header-wrap .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger::before {
  background: #fff;
}

/* Header children are flex items, so the badge can be ordered between the
   label and the chevron even though ::after is always last in the DOM. */
body.page-id-712 .single-content .accordion-locations .kt-blocks-accordion-title-wrap { flex: 1 1 auto; order: 1; }
body.page-id-712 .single-content .accordion-locations .kt-blocks-accordion-header::after { order: 2; }
body.page-id-712 .single-content .accordion-locations .kt-blocks-accordion-icon-trigger { order: 3; }

/* Flags sized like the cloud inventory cards. */
.page-id-712 .single-content .kt-blocks-accordion-header img {
  width: 22px;
  height: auto;
  flex: 0 0 auto;
  border-radius: 4px;
}

/* How many PoPs sit behind each country, so the list answers "where are you
   biggest?" without opening all 13. Set as a custom property from JS and drawn
   as a pseudo-element: a real child node would land inside the header's
   innerText, which is what the accordion reads to drive the map. */
.page-id-712 .single-content .kt-blocks-accordion-header::after {
  content: var(--e1-count, "");
  margin-right: 10px;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--color-brand-teal-soft);
  color: var(--color-brand-teal-contrast);
  font-size: .6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.page-id-712 .single-content .kt-blocks-accordion-header.kt-accordion-panel-active::after {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

/* ---- One row per PoP, instead of a four-column table in a narrow box ----
   Layout is by position because the header labels are translated on /es/,
   /pt-br/ and /zh/ and cannot be matched on text:
   1 = row number (dropped, it carried no information), 2 = PoP code,
   3 = city, 4 = street address. */
.page-id-712 .single-content .accordion-locations .kt-accordion-panel-inner { padding: 0; }
.page-id-712 .single-content .accordion-locations figure.wp-block-table { margin: 0; }

.page-id-712 .single-content .accordion-locations table {
  display: block;
  border: 0;
  border-radius: 0;
}

.page-id-712 .single-content .accordion-locations thead { display: none; }
.page-id-712 .single-content .accordion-locations tbody { display: block; }

.page-id-712 .single-content .accordion-locations tbody tr {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "code city"
    "code addr";
  column-gap: 12px;
  row-gap: 1px;
  padding: 10px 16px;
  border-top: 1px solid rgba(160, 160, 160, .22);
  transition: background-color .15s ease;
}

.page-id-712 .single-content .accordion-locations tbody tr:first-child { border-top: 0; }
.page-id-712 .single-content .accordion-locations tbody tr:hover { background: rgba(216, 243, 243, .35); }

.page-id-712 .single-content .accordion-locations tbody td {
  display: block;
  padding: 0;
  border: 0;
  background: none;
}

/* The stripe style and hover both painted cells; the row owns that now. The
   core is-style-stripes grey (#f0f0f0) reads as unstyled next to the rest of
   the page, so keep the banding for scannability but tint it. */
.page-id-712 .single-content .accordion-locations tbody tr:hover td,
.page-id-712 .single-content .accordion-locations tbody tr:nth-child(odd) td { background: none; }

.page-id-712 .single-content .accordion-locations.accordion-locations .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background-color: rgba(216, 243, 243, .28);
}

.page-id-712 .single-content .accordion-locations tbody td:nth-child(1) { display: none; }

.page-id-712 .single-content .accordion-locations tbody td:nth-child(2) {
  grid-area: code;
  align-self: center;
  min-width: 54px;
  padding: 3px 8px;
  border-radius: var(--radius-button);
  background: var(--color-brand-teal-soft);
  color: var(--color-brand-teal-contrast);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .75rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.page-id-712 .single-content .accordion-locations tbody td:nth-child(3) {
  grid-area: city;
  color: var(--color-text-slate);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.35;
}

.page-id-712 .single-content .accordion-locations tbody td:nth-child(4) {
  grid-area: addr;
  color: var(--color-text-muted);
  font-size: .75rem;
  line-height: 1.4;
}

/* The map column gets the reference's soft framed panel. */
.page-id-712 .single-content #AppContainer,
.page-id-712 .single-content #map {
  border-radius: var(--radius-card);
  overflow: hidden;
}

.page-id-712 .single-content #AppContainer {
  border: 1px solid rgba(160, 160, 160, .24);
  background: var(--color-surface-page);
  box-shadow: 0 18px 48px rgba(0, 0, 76, .08);
}

.page-id-712 .single-content .e1-netmap {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid rgba(160, 160, 160, .24);
  box-shadow: 0 18px 48px rgba(0, 0, 76, .08);
}

/* ---- Wide layout: use the window, and keep the map on screen ---- */
@media (min-width: 1025px) {
  .page-id-712 .single-content .kb-row-layout-id712_233439-0b .kt-row-column-wrap {
    max-width: min(1680px, 100% - 48px);
    grid-template-columns: minmax(390px, 30%) minmax(0, 1fr);
    gap: 28px;
  }

  /* Brazil alone is 12 PoPs. Without this the map scrolls away exactly when
     the list it is linked to becomes interesting. */
  .page-id-712 .single-content .e1-netmap {
    position: sticky;
    top: 100px;
  }

  /* Long country lists scroll inside their own panel rather than pushing the
     page down by another thousand pixels. */
  .page-id-712 .single-content .accordion-locations .kt-accordion-panel-inner {
    max-height: 60vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-brand-teal) transparent;
  }
}

/* Kadence keeps two columns down to phone width, which squeezed the list to
   315px on a tablet — narrower than the 399px we started from. Below the
   desktop breakpoint the list gets the whole width instead, and the map goes
   above it so both are reachable without a sideways glance. */
@media (max-width: 1024px) {
  .page-id-712 .single-content .kb-row-layout-id712_233439-0b .kt-row-column-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .page-id-712 .single-content .kb-row-layout-id712_233439-0b .kt-row-column-wrap > .wp-block-kadence-column:first-child { order: 2; }
  .page-id-712 .single-content .kb-row-layout-id712_233439-0b .kt-row-column-wrap > .wp-block-kadence-column:last-child { order: 1; }

  .page-id-712 .single-content .accordion-locations tbody tr { padding: 9px 12px; }
}

/* The open panel scrolls at 60vh, so the last row is deliberately cut. Fade it
   out to say so. Over a short list the gradient lands on white and is
   invisible, which is the right behaviour without measuring anything. */
.page-id-712 .single-content .kt-accordion-pane { position: relative; }

.page-id-712 .single-content .kt-accordion-pane::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 28px;
  background: linear-gradient(to top, var(--color-surface-card) 20%, rgba(255, 255, 255, 0));
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.page-id-712 .single-content .kt-accordion-pane:has(.kt-blocks-accordion-header.kt-accordion-panel-active)::after { opacity: 1; }

/* ============ Latency page, ported from edgeuno.cloud/latency ============
   Layout and typography for the hero grid, the explainer stack and the tool
   chrome. The .latency-table rules from the reference are deliberately not
   ported: they carry the min-width that forces the horizontal scroll, and our
   own table styling above already covers the visual. */
.contact-page,.latency-page,.thankyou-page{background:#ffffff;color:#656b78;font-size:18px;line-height:1.7}
.latency-tool{padding:48px 0 68px}
.latency-description h2{margin:0;color:#20232b;font-size:32px;font-weight:500;line-height:40px}
.latency-description p{margin:12px 0 0;color:#656b78;font-size:14px;line-height:24px}
.latency-description ul{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:4px 18px;margin:16px 0 0;padding:0;color:#6c757d;font-size:14px;line-height:24px;list-style:none}
.latency-description strong{color:#404652;font-weight:700}
.latency-controls{display:grid;grid-template-columns:minmax(220px,320px) auto auto minmax(150px,auto);align-items:end;gap:14px;margin:28px 0 20px}
.contact-form label,.contact-phone label,.latency-controls label{display:grid;align-content:start;align-self:start;gap:7px;color:#20232b;font-size:14px;font-weight:500;line-height:24px}
.contact-form input,.contact-form select,.contact-form textarea,.latency-controls select{width:100%;min-height:44px;border:1px solid #d4d9e4;border-radius:4px;background:#ffffff;padding:8px 12px;color:#4f5664;font:inherit;font-size:14px;font-weight:400}
.latency-controls button{min-height:44px;border:1px solid var(--edge-primary);border-radius:4px;background:#ffffff;padding:0 18px;color:var(--edge-primary);font-size:14px;font-weight:700;transition:background .16s ease,color .16s ease}
.latency-controls button:focus-visible,.latency-controls button:hover{background:var(--edge-primary);color:#ffffff}
.latency-controls button:disabled{cursor:wait;opacity:.7}
.latency-controls p{margin:0;color:#6c757d;font-size:14px;line-height:24px}
.latency-updated-at{min-width:150px;text-align:right}
.latency-pop-label{display:inline-grid;width:68px;min-height:38px;place-items:center;gap:1px;min-width:0;text-align:center;white-space:normal}
.latency-pop-top{display:flex;width:100%;align-items:center;justify-content:center;gap:2px;line-height:1}
.latency-pop-flag{font-size:13px;line-height:1}
.latency-pop-code{color:inherit;font-size:11px;font-weight:800;letter-spacing:0}
.latency-pop-city{color:var(--color-text-muted);font-size:10px;font-weight:600;letter-spacing:0;line-height:1.08;overflow-wrap:normal;white-space:normal}
.latency-spinner{display:inline-block;width:18px;height:18px;overflow:hidden;border:2px solid rgba(24,41,199,.18);border-top:2px solid var(--edge-primary);border-radius:999px;color:transparent!important;animation:latency-spin .7s linear infinite}
@keyframes latency-spin{to{transform:rotate(1turn)}}
.home-latency-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:32px}
@media (max-width:1023px){.home-latency-grid,.home-product-grid,.home-testimonial-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.home-differential-pills,.home-latency-grid,.home-product-grid,.home-testimonial-grid{grid-template-columns:1fr}}
@media (max-width:860px){.latency-description ul{grid-template-columns:repeat(3,minmax(120px,1fr))}.contact-layout,.latency-controls,.thankyou-layout{grid-template-columns:1fr}}
@media (max-width:520px){.contact-page,.latency-page,.thankyou-page{font-size:16px}.contact-form-grid,.contact-phone,.contact-topic>div,.latency-description ul{grid-template-columns:1fr}.latency-description h2{font-size:26px;line-height:34px}}
@media (max-width:767px){.home-page .home-differential-pills,.home-page .home-latency-grid,.home-page .home-product-grid{grid-template-columns:1fr}}
.contact-page,.latency-page,.legal-page{background:var(--color-surface-page);color:var(--color-text-slate);font-family:var(--font-sans)}
.contact-redesign-hero,.latency-redesign-hero,.legal-redesign-hero{padding:84px 0 68px}
.latency-redesign-hero,.legal-redesign-hero{padding:78px 0 56px}
.latency-redesign-hero .redesign-hero-copy h1{max-width:760px;font-size:clamp(3rem,5vw,4.5rem);line-height:.98}
.latency-redesign-hero .redesign-hero-copy>p:not(.redesign-eyebrow){max-width:740px;font-size:clamp(1rem,1.55vw,1.15rem);line-height:1.58}
.latency-redesign-hero-grid{grid-template-columns:minmax(0,.92fr) minmax(280px,.52fr);grid-template-columns:minmax(0,1fr);gap:0}
.contact-page .contact-info h2,.contact-page .latency-description h2{color:var(--color-brand-navy-deep);font-weight:700;letter-spacing:0}
.contact-page .contact-form input,.contact-page .contact-form select,.contact-page .contact-form textarea,.contact-page .contact-search-select>button,.latency-page .latency-controls select{min-height:48px;border-color:rgba(160,160,160,.42);border-radius:var(--radius-button);color:var(--color-text-slate);font-size:.95rem}
.latency-page>.e1c-site-container{padding-top:0;padding-bottom:92px}
.latency-page .latency-tool{display:grid;gap:24px;padding:0}
.latency-page .latency-page-stack{display:grid;gap:24px}
.latency-page .latency-description{border:1px solid rgba(160,160,160,.24);border-radius:var(--radius-card);background:var(--color-surface-card);padding:28px;box-shadow:0 14px 36px rgba(0,0,76,.06)}
.latency-page .latency-description h2{color:var(--color-brand-navy-deep);font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;line-height:1.05}
.latency-page .latency-description p{color:var(--color-text-muted);font-size:1rem;line-height:1.6}
.latency-page .latency-description ul{grid-template-columns:repeat(4,minmax(130px,1fr));gap:8px 18px;color:var(--color-text-muted)}
.latency-page .latency-description strong{color:var(--color-brand-navy-deep)}
.latency-page .latency-description a{color:var(--color-brand-navy-deep);font-weight:700;text-decoration:underline;text-underline-offset:.16em}
.latency-page .latency-description a:focus-visible,.latency-page .latency-description a:hover{color:var(--color-brand-teal-contrast)}
.latency-page .latency-controls{align-items:end;border:1px solid rgba(160,160,160,.24);border-radius:var(--radius-card);background:var(--color-surface-card);margin:0;padding:20px;box-shadow:0 14px 36px rgba(0,0,76,.05)}
.latency-page .latency-controls label{color:var(--color-text-slate);font-weight:700}
.latency-page .latency-controls button{min-height:48px;border-color:var(--color-brand-teal-contrast);border-radius:var(--radius-button);background:var(--color-brand-teal-contrast);color:#ffffff}
.latency-page .latency-controls button:focus-visible,.latency-page .latency-controls button:hover{border-color:var(--color-brand-navy-deep);background:var(--color-brand-navy-deep)}
.latency-page .latency-controls p{color:var(--color-text-muted);font-size:.9rem}
.latency-page .latency-spinner{border-color:rgba(71,175,180,.22);border-top-color:var(--color-brand-teal-contrast)}
@media (max-width:1023px){.latency-redesign-hero-grid{grid-template-columns:1fr;gap:32px}.latency-redesign-hero .redesign-hero-copy h1,.legal-redesign-hero .redesign-hero-copy h1{font-size:3.5rem}.latency-page .latency-description ul{grid-template-columns:repeat(3,minmax(130px,1fr))}.latency-page .latency-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.contact-redesign-hero,.latency-redesign-hero,.legal-redesign-hero{padding:64px 0 48px}.contact-redesign-hero .redesign-hero-copy h1,.latency-redesign-hero .redesign-hero-copy h1,.legal-redesign-hero .redesign-hero-copy h1{font-size:2.5rem}.latency-redesign-hero .redesign-hero-copy>p:not(.redesign-eyebrow),.legal-redesign-hero .redesign-hero-copy>p:not(.redesign-eyebrow){font-size:1rem}.latency-page>.e1c-site-container{padding-top:32px;padding-bottom:64px}.contact-page .contact-form-wrap,.latency-page .latency-controls,.latency-page .latency-description,.legal-document-body{padding:18px}.latency-page .latency-controls,.latency-page .latency-description ul{grid-template-columns:1fr}}

/* ============ BGP Communities: reference-document UX ====================
   Six tables of routing codes read as a wall unless the page helps: the TOC
   follows the reader, the codes are monospaced so digits line up, and rows
   alternate so the eye can track across a wide row. */

/* The anchor list is a sidebar column; make it follow the reader instead of
   scrolling away after the first table. */
.page-id-636 .single-content .wp-block-kadence-column:first-child:not(:has(table)) > .kt-inside-inner-col {
  position: sticky;
  top: 96px;
}

.page-id-636 .single-content .wp-block-kadence-column:first-child:not(:has(table)) .wp-block-kadence-advancedheading a {
  display: block;
  border-left: 2px solid transparent;
  padding: 7px 12px;
  color: var(--color-text-slate);
  font-size: .9375rem;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.page-id-636 .single-content .wp-block-kadence-column:first-child:not(:has(table)) .wp-block-kadence-advancedheading a:hover {
  border-left-color: var(--color-brand-teal);
  background: var(--color-brand-teal-soft);
  color: var(--color-brand-navy-deep);
}

/* Community codes are the data: monospace keeps the digit groups aligned
   down the column, which is how you actually scan them. */
.page-id-636 .single-content td:first-child {
  color: var(--color-brand-navy-deep);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .8125rem;
  white-space: nowrap;
}

.page-id-636 .single-content tbody tr:nth-child(even) td {
  background: rgba(247, 247, 247, .7);
}

/* Long tables lose their header on scroll otherwise. */
.page-id-636 .single-content thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Breathing room between the six sections. */
.page-id-636 .single-content h2 {
  scroll-margin-top: 96px;
}

.page-id-636 .single-content table {
  margin-bottom: 40px;
}

@media (max-width: 1024px) {
  .page-id-636 .single-content .wp-block-kadence-column:first-child:not(:has(table)) > .kt-inside-inner-col {
    position: static;
  }
}

/* ============ Locations directory =======================================
   Filter toolbar, product availability and the fixes the critique surfaced.
   Kept in the theme stylesheet rather than inline so it is cached with the
   rest of the page CSS; the toolbar's markup and copy stay server-rendered
   (see inc/locations-directory.php) so the translator can reach them. */

/* The block's own Custom CSS caps the country list at 588.5px against ~793px
   of content, hiding four countries — including the USA, the second largest by
   PoP count — behind a scrollbar macOS does not draw. The list is the page's
   primary content; it does not get to be a peephole. */
.page-id-712 .single-content .accordion-locations.accordion-locations {
  max-height: none;
  overflow: visible;
}

/* Kadence measures each pane's height after first paint. Capping the inner
   panel then leaves the pane shorter than its content and the overflow is
   clipped one level up, where nothing can scroll it — 4 of Brazil's 12 rows
   were unreachable at 1440. Let the pane own its height. */
.page-id-712 .single-content .accordion-locations .kt-accordion-panel-inner {
  max-height: none;
  overflow: visible;
}

/* ---- Filter toolbar ---- */
.e1-loc-toolbar {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.e1-loc-search {
  position: relative;
  display: flex;
  align-items: center;
}

.e1-loc-search-icon {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 18px;
  color: var(--color-brand-teal-contrast);
  pointer-events: none;
}

.e1-loc-search input {
  width: 100%;
  min-height: 44px;
  padding: 10px 40px 10px 38px;
  border: 1px solid rgba(0, 0, 128, .18);
  border-radius: var(--radius-button);
  background: var(--color-surface-card);
  color: var(--color-text-slate);
  font-family: var(--font-sans);
  font-size: .9375rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.e1-loc-search input::placeholder { color: var(--color-text-muted); }

.e1-loc-search input:focus {
  border-color: var(--color-brand-teal);
  box-shadow: 0 0 0 3px rgba(71, 175, 180, .22);
  outline: none;
}

/* Safari draws its own clear affordance over ours. */
.e1-loc-search input::-webkit-search-cancel-button { display: none; }

.e1-loc-clear {
  position: absolute;
  right: 6px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.e1-loc-clear svg { width: 18px; height: 18px; }
.e1-loc-clear:hover { background: var(--color-brand-teal-soft); color: var(--color-brand-navy); }

.e1-loc-filters { display: flex; flex-wrap: wrap; gap: 6px; }

.e1-loc-chip {
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid rgba(0, 0, 128, .16);
  border-radius: 20px;
  background: var(--color-surface-card);
  color: var(--color-text-slate);
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.e1-loc-chip:hover { border-color: var(--color-brand-teal); background: var(--color-brand-teal-soft); }

.e1-loc-chip[aria-pressed="true"] {
  border-color: var(--color-brand-navy);
  background: var(--color-brand-navy);
  color: #fff;
}

/* The per-service counts arrive after locations.json loads. Reserving their
   width up front stops the chip row rewrapping and shifting the page at ~1.9s. */
.e1-loc-chip::after {
  content: " " attr(data-n);
  display: inline-block;
  min-width: 2.2ch;
  text-align: right;
  opacity: .55;
  font-variant-numeric: tabular-nums;
}

.e1-loc-count,
.e1-loc-empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: .8125rem;
}

.e1-loc-count { display: flex; gap: 14px; }

.e1-loc-stat {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .6875rem;
  font-weight: 600;
}

.e1-loc-stat b {
  margin-left: 4px;
  color: var(--color-brand-navy);
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.e1-loc-empty {
  padding: 14px 16px;
  border: 1px dashed rgba(0, 0, 128, .22);
  border-radius: var(--radius-card);
  color: var(--color-text-slate);
}

/* ---- Product availability ---- */
.e1-loc-services {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.e1-loc-badge {
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(0, 0, 128, .06);
  color: var(--color-brand-navy-deep);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.5;
  white-space: nowrap;
}

/* Connectivity is on 52 of 53 sites, so it carries no signal; the products
   that vary by site are the ones worth colouring. */
.e1-loc-badge--baremetal,
.e1-loc-badge--cloud,
.e1-loc-badge--colocation {
  background: var(--color-brand-teal-soft);
  color: var(--color-brand-teal-contrast);
}

.page-id-712 .single-content .accordion-locations tbody tr[hidden] { display: none; }

/* ============ Network map (adapted edgeuno.cloud asset) =================
   Node and label state is keyed off data-country, written into the SVG by
   analysis/edgeuno-cloud/build-network-map.py. Opening a country in the list
   lights its sites and drops everything else back, which is the connection the
   reference artwork does not have. */

/* The panel was a teal-tinted gradient, which is the one hue that cannot sit
   behind this map: the land fill, the peering edges and the nodes are all
   teal, so the background competed with the content instead of carrying it.
   A cool neutral reads as water and leaves teal to mean "network". */
.e1-netmap {
  position: relative;
  margin: 0;
  border: 1px solid rgba(0, 0, 76, .1);
  border-radius: var(--radius-card);
  background: #e9eff3;
  box-shadow: 0 18px 48px rgba(0, 0, 76, .08);
  overflow: hidden;
}

/* The artwork draws continents at 5% teal with a 45%-opacity outline, which
   measures 1.66:1 against its own background — the geography was effectively
   invisible and the nodes floated in a void. Land becomes a solid shape and
   the coastline an outline you can actually follow, so a site reads as being
   *somewhere*. */
.e1-map-svg path[fill-opacity="0.05"] {
  fill: #ffffff;
  fill-opacity: 1;
  /* #8098a8 measures 3.01:1 against the white land, which is the WCAG 1.4.11
     floor for a graphic you need to read to understand the content — and the
     coastline is exactly that: it is what tells you where a site sits. */
  stroke: #8098a8;
  stroke-opacity: 1;
  stroke-width: 0.9;
}

/* London, Frankfurt and Istanbul sit outside the only landmasses the artwork
   draws, so with the continents filled in they floated on open water. The
   inset frames them as reach beyond the home region rather than as an
   oversight. */
.e1-map-inset rect {
  fill: #ffffff;
  fill-opacity: .55;
  stroke: #8098a8;
  stroke-opacity: .6;
  stroke-width: 0.8;
  stroke-dasharray: 4 4;
}

/* Country captions sat on near-white; on solid land they need to hold their
   own without shouting over the site labels. */
.e1-map-country {
  fill: #7d94a3;
  fill-opacity: .95;
}

.e1-map-svg { display: block; width: 100%; height: auto; }

/* Nodes inherit their colour so a state change is one custom property. */
.e1-map-node { color: var(--color-brand-teal); transition: color .2s ease, opacity .2s ease; }
.e1-map-label { transition: opacity .2s ease, fill .2s ease; }

/* Focused country: its sites go navy and come forward, the rest recede far
   enough to read as background without disappearing. */
.e1-netmap--focused .e1-map-node,
.e1-netmap--focused .e1-map-label,
.e1-netmap--focused .e1-map-country,
.e1-netmap--focused .home-network-edge,
.e1-netmap--focused .home-network-packet,
.e1-netmap--focused .home-network-hub-pulse { opacity: .32; }

.e1-netmap--focused .e1-map-node.is-active {
  color: var(--color-brand-navy);
  opacity: 1;
}

.e1-netmap--focused .e1-map-label.is-active {
  opacity: 1;
  fill: var(--color-brand-navy);
  font-weight: 800;
}

.e1-netmap--focused .e1-map-country.is-active { opacity: .9; }

/* The artwork's own legend and live mark sit inside the SVG; they should not
   fade when a country is picked. */
.e1-netmap--focused .home-network-live-blink { opacity: 1; }

/* Nodes are interactive: clicking one opens its country in the list. */
.e1-map-node { cursor: pointer; }
.e1-map-node:hover { color: var(--color-brand-teal-contrast); }

.e1-map-hit {
  fill: transparent;
  cursor: pointer;
}

.e1-map-hit:focus-visible {
  outline: 2px solid var(--color-brand-navy);
  outline-offset: 2px;
}

/* Motion here is decoration; the map is fully readable without it. */
@media (prefers-reduced-motion: reduce) {
  .e1-netmap .home-network-edge,
  .e1-netmap .home-network-packet,
  .e1-netmap .home-network-hub-pulse { animation: none; }
  .e1-netmap .home-network-packet { display: none; }
}

/* ============ Latency matrix ============================================
   625 numbers with no visual encoding meant finding a fast route required
   reading every cell. The bands are cut from the live distribution (4-248ms,
   quartiles 64/110/150) so roughly a fifth of the pairs land in each, which is
   what makes the colour discriminate rather than wash. */

.page-id-709 .single-content #latency-table td {
  transition: background-color .15s ease;
}

.page-id-709 .single-content #latency-table td.e1-lat-a { background: #cfeeea; }
.page-id-709 .single-content #latency-table td.e1-lat-b { background: #e3f3dd; }
.page-id-709 .single-content #latency-table td.e1-lat-c { background: #fdf1d3; }
.page-id-709 .single-content #latency-table td.e1-lat-d { background: #fbe0cb; }
.page-id-709 .single-content #latency-table td.e1-lat-e { background: #f8d3d3; }

/* Every band is a pale tint carrying dark slate text, so the colour is the
   signal and legibility never depends on it. */
.page-id-709 .single-content #latency-table td span { color: var(--color-text-slate); }

/* The stripe would tint every other row on top of the band. */
.page-id-709 .single-content #latency-table tbody tr:nth-child(even) td[class*="e1-lat-"] { background-image: none; }

/* Self-pairs are never measured; an em dash says so, a spinner implies the
   number is still coming. */
.page-id-709 .single-content #latency-table td.is-empty span::after {
  content: "\2014";
  color: var(--color-border-muted);
}

.page-id-709 .single-content #latency-table td.is-empty { background: transparent; }

/* ---- Legend ---- */
.e1-lat-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0 0 12px;
}

.e1-lat-legend-title {
  margin: 0;
  color: var(--color-brand-navy);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.e1-lat-legend ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.e1-lat-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}

.e1-lat-sw {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(0, 0, 76, .12);
  border-radius: 3px;
}

.e1-lat-sw.e1-lat-a { background: #cfeeea; }
.e1-lat-sw.e1-lat-b { background: #e3f3dd; }
.e1-lat-sw.e1-lat-c { background: #fdf1d3; }
.e1-lat-sw.e1-lat-d { background: #fbe0cb; }
.e1-lat-sw.e1-lat-e { background: #f8d3d3; }

.e1-lat-hint {
  flex-basis: 100%;
  margin: 0;
  color: var(--color-brand-teal-contrast);
  font-size: .75rem;
}

/* ---- Responsive ----
   The matrix was squeezed to the viewport instead of scrolling, so on a phone
   25 columns shared 364px: every value rendered at 11px in a 14px cell. A
   minimum column width and a real scroll container trade one axis of panning
   for numbers that can actually be read. */
.page-id-709 .single-content .overflow-x-auto {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-brand-teal) transparent;
  overscroll-behavior-x: contain;
}

.page-id-709 .single-content #latency-table {
  min-width: 1180px;
  font-variant-numeric: tabular-nums;
}

.page-id-709 .single-content #latency-table th,
.page-id-709 .single-content #latency-table td { white-space: nowrap; }

/* The row header has to stay put or a scrolled column has no meaning. */
.page-id-709 .single-content #latency-table tbody th {
  position: sticky;
  left: 0;
  z-index: 2;
  box-shadow: 1px 0 0 rgba(0, 0, 76, .1);
}

.page-id-709 .single-content #latency-table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
}

@media (max-width: 767px) {
  .page-id-709 .single-content #latency-table { min-width: 980px; }
  .page-id-709 .single-content #latency-table td,
  .page-id-709 .single-content #latency-table th { padding-top: 10px; padding-bottom: 10px; }
}

/* The caption is for assistive tech and machines; the visible page already
   explains the matrix in the card above it. */
.e1-lat-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The dropdowns are div/li widgets, so they have no default focus ring. */
.page-id-709 .single-content [role="button"]:focus-visible,
.page-id-709 .single-content [role="option"]:focus-visible {
  outline: 2px solid var(--color-brand-navy);
  outline-offset: 2px;
}