@font-face{
  font-family:"Moderat";
  font-weight:300;
  font-style:normal;
  src:url("../fonts/Moderat-Light.woff2") format("woff2");
  font-display:swap;
}
@font-face{
  font-family:"Moderat";
  font-weight:400;
  font-style:normal;
  src:url("../fonts/Moderat-Regular.woff2") format("woff2");
  font-display:swap;
}
@font-face{
  font-family:"Moderat";
  font-weight:700;
  font-style:normal;
  src:url("../fonts/Moderat-Bold.woff2") format("woff2");
  font-display:swap;
}

:root{
  --vocus-blue:#020E92;
  --vocus-blue-dark:#0f1c47;
  --vocus-blue-light03:#4E56B3;
  --vocus-blue-light02:#9A9FD3;
  --vocus-blue-lightest:#E6E7F4;
  --vocus-grey:#F1F0EE;
  --vocus-yellow:#FFCC00;
  --vocus-orange:#FF8B2F;
  --vocus-teal:#00FFFF;
  --vocus-green:#4DFF4D;
  --vocus-magenta:#FF4DD7;
  --text-dark:#1a1a2e;
  --text-muted:#5a5f7a;
  --border-color:#dcdce8;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  font-family:"Moderat","-apple-system",BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:400;
  color:var(--text-dark);
  background:#ffffff;
  line-height:1.5;
}
a{color:var(--vocus-blue);}
h1,h2,h3{font-weight:700;}

/* ---------- Sticky-footer layout ---------- */
/* .site-content wraps everything except the footer. It grows to fill any
   leftover vertical space so the footer always sits at the bottom of the
   viewport on short pages, and follows normal flow on long pages. */
.site-content{
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
}
footer.site-footer{flex:0 0 auto;}

/* ---------- Header ---------- */
header.site-header{
  background:var(--vocus-blue);
  padding:18px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex:0 0 auto;
}
.logo{display:flex;align-items:center;gap:10px;}
.logo img{height:26px;width:auto;display:block;}
.header-links{display:flex;gap:24px;}
.header-links a{
  color:#fff;
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  opacity:0.9;
}
.header-links a:hover{opacity:1;text-decoration:underline;}
.header-links a[aria-current="page"]{opacity:1;font-weight:700;text-decoration:underline;}

/* ---------- Breadcrumb / Hero ---------- */
.hero{
  background:var(--vocus-blue-lightest);
  padding:48px 40px 40px;
  border-bottom:1px solid var(--border-color);
  flex:0 0 auto;
}
.breadcrumb{
  font-size:13px;
  color:var(--text-muted);
  margin-bottom:14px;
}
.breadcrumb a{color:var(--text-muted);text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}
.hero h1{
  font-size:32px;
  color:var(--vocus-blue);
  margin:0 0 6px;
}
.hero .updated{
  font-size:13px;
  color:var(--text-muted);
  margin-bottom:16px;
  font-weight:400;
}
.hero p{
  max-width:780px;
  color:var(--text-dark);
  font-size:15px;
  font-weight:300;
}

/* ---------- Layout ---------- */
.page-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:0 40px;
  width:100%;
}

nav.section-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:24px 0 0;
  max-width:1100px;
  margin:0 auto;
  width:100%;
  flex:0 0 auto;
  box-sizing:border-box;
}
nav.section-nav a{
  text-decoration:none;
  background:#fff;
  border:1px solid var(--vocus-blue-light02);
  color:var(--vocus-blue);
  font-size:13px;
  font-weight:700;
  padding:8px 14px;
  border-radius:20px;
}
nav.section-nav a:hover{
  background:var(--vocus-blue);
  color:#fff;
}

/* ---------- Accordion (BGP Communities page) ---------- */
.accordion-item{
  border-bottom:1px solid var(--border-color);
}
.accordion-item:last-of-type{border-bottom:none;}

.accordion-trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:none;
  border:none;
  cursor:pointer;
  padding:26px 0;
  text-align:left;
  font-family:inherit;
}
.accordion-trigger h2{
  font-size:22px;
  color:var(--vocus-blue-dark);
  margin:0;
  font-weight:700;
}
.accordion-icon{
  flex:0 0 auto;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--vocus-blue-lightest);
  color:var(--vocus-blue);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:700;
  transition:transform 0.25s ease, background 0.25s ease;
}
.accordion-trigger[aria-expanded="true"] .accordion-icon{
  transform:rotate(45deg);
  background:var(--vocus-blue);
  color:#fff;
}
.accordion-trigger:hover .accordion-icon{
  background:var(--vocus-blue);
  color:#fff;
}

.accordion-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.35s ease;
}
.accordion-panel-inner{
  padding:0 0 40px;
}

.community-section > p.section-intro{
  color:var(--text-muted);
  max-width:820px;
  margin-bottom:20px;
  font-size:15px;
  font-weight:300;
}

/* ---------- Static sections (Peering Policy page) ---------- */
.static-section{
  padding:36px 0;
  border-bottom:1px solid var(--border-color);
}
.static-section:first-of-type{padding-top:40px;}
.static-section:last-of-type{border-bottom:none;}
.static-section h2{
  font-size:22px;
  color:var(--vocus-blue-dark);
  margin:0 0 14px;
  font-weight:700;
}
.static-section h3{
  font-size:16px;
  color:var(--vocus-blue);
  margin:22px 0 6px;
  font-weight:700;
}
.static-section p{
  font-size:15px;
  color:var(--text-dark);
  max-width:820px;
  margin:0 0 14px;
  font-weight:400;
}
.static-section p:last-child{margin-bottom:0;}

.note{
  background:var(--vocus-grey);
  border-left:3px solid var(--vocus-orange);
  padding:10px 16px;
  font-size:13px;
  color:var(--text-dark);
  margin-bottom:20px;
  border-radius:0 4px 4px 0;
}
.note strong{color:var(--vocus-orange);font-weight:700;}

table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  background:#fff;
}
caption{
  text-align:left;
  font-size:13px;
  font-weight:700;
  color:var(--vocus-blue);
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-bottom:8px;
}
thead th{
  background:var(--vocus-blue);
  color:#fff;
  text-align:left;
  padding:10px 14px;
  font-weight:700;
  font-size:13px;
}
tbody td{
  padding:9px 14px;
  border-bottom:1px solid var(--border-color);
  font-weight:400;
}
tbody tr:nth-child(even){background:var(--vocus-grey);}
tbody tr:hover{background:var(--vocus-blue-lightest);}
.tbody-trsep{
  background:var(--vocus-blue-light02);
  font-weight:700;
}
code, .mono{
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  background:var(--vocus-grey);
  padding:2px 6px;
  border-radius:3px;
  font-size:13px;
  color:var(--vocus-blue-dark);
}
.table-scroll{overflow-x:auto;margin-bottom:14px;}

.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}
@media (max-width:800px){
  .two-col{grid-template-columns:1fr;}
  header.site-header{padding:16px 20px;flex-direction:column;gap:12px;}
  .hero, .page-wrap{padding-left:20px;padding-right:20px;}
}

.placeholder-tag{
  display:inline-block;
  font-size:11px;
  background:var(--vocus-yellow);
  color:var(--vocus-blue-dark);
  padding:2px 8px;
  border-radius:3px;
  font-weight:700;
  margin-left:8px;
  vertical-align:middle;
}

/* Grey bar footer, matching the Vocus Looking Glass site: a full-bleed
   light-grey strip with a top border, holding a single row of bold links
   each marked with a small external-link icon. */
footer.site-footer{
  background:var(--vocus-grey);
  border-top:1px solid var(--border-color);
  padding:18px 40px;
}
.footer-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.75rem;
}
.footer-links a {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--text);
font-size: 0.88rem;
text-decoration: none;
}
.footer-links a:hover{color:var(--vocus-blue);}
.footer-links a[aria-current="page"]{color:var(--vocus-blue);}
.footer-links a svg{
  width:0.85em;
  height:0.85em;
  flex:0 0 auto;
  opacity:0.7;
}
@media (max-width:800px){
  footer.site-footer{padding:16px 20px;}
  .footer-links{gap:14px 20px;}
}