/* Buttons for Articulation page---------------------------------------------------- */
.articulation-page .section-nav{
  display:flex; gap:.5rem; flex-wrap:wrap; margin:0 0 1rem 0;
}
.articulation-page .section-nav .btn{
  display:inline-block; padding:.5rem .9rem; border-radius:6px;
  background:#f0f4ff; color:#2a42aa; text-decoration:none;
  border:1px solid #c7d3f5; font-weight:700; line-height:1;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}
.articulation-page .section-nav .btn:hover{
  color: #1b2379 !important;           /* slightly darker than #2a42aa */
  background: #e8ecff !important;      /* subtle tint on hover */
  border-color: #b9c6ff !important;    /* optional: a touch darker border */
  text-decoration: none !important;    /* remove the underline */
 }
 
 /* (nice focus style for keyboard users) */
.articulation-page .section-nav .btn:focus-visible,
.articulation-page .section-nav a:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(34,48,143,.2) !important;
}

.articulation-page .section-nav .btn.is-active{
  background:#e8edff; border-color:#a5b4fc;
}

.articulation-page h2{ margin-top:1.25rem }
.articulation-page h3{ margin-top:1rem }
.articulation-page ol.pledges{ padding-left:1.25rem; margin:.5rem 0 1.25rem }
.articulation-page ol.pledges > li{ margin:.6rem 0 }
.articulation-page ol.pledges > li > strong{ display:block; margin-bottom:.25rem }

/* tidy inner spacing */
body.path-articulation blockquote p{ margin:.4rem 0; }
body.path-articulation blockquote p:last-child{ margin-bottom:0; }

/* Only /constitutional-model page (wrapper) */
#constitutional-page .section-nav{
  display:flex; gap:.5rem; flex-wrap:wrap;
  margin:4px 0 12px 0;
}
#constitutional-page .section-nav .btn{
  display:inline-block; padding:.5rem .9rem; line-height:1;
  border:1px solid #c7d3f5; border-radius:6px;
  background:#f0f4ff; color:#2a42aa; text-decoration:none;
  font-weight:700; transition: color .15s, background .15s, box-shadow .15s;
}
#constitutional-page .section-nav .btn:hover{ text-decoration:underline; }
#constitutional-page .section-nav .btn.is-active{ background:#e8edff; border-color:#a5b4fc; }

/* tighten top space inside the wrapper */
#constitutional-page{ margin-top:0; }
#constitutional-page > :first-child{ margin-top:0; }

/* 1) Pull the whole wrapper up regardless of intermediate containers */
.region-content .articulation-page{
  margin-top: -12px !important;   /* tweak -6 to -20 to taste */
}

/* 2) Make the button row render the same even if Basic HTML wraps it in <p> */
.articulation-page .section-nav,
.articulation-page .section-nav > p{
  display: flex !important;
  gap: .5rem !important;
  flex-wrap: wrap !important;
  margin: 0 0 12px 0 !important;   /* kill the top margin */
  padding: 0 !important;
}

/* Kill default margins on any p inside the nav */
.articulation-page .section-nav p{
  margin: 0 !important;
}

/* 3) Button styling (applies whether anchors are direct or wrapped) */
.articulation-page .section-nav a{
  display: inline-block !important;
  padding: .5rem .9rem !important;
  line-height: 1 !important;
  border: 1px solid #c7d3f5 !important;
  border-radius: 6px !important;
  background: #f0f4ff !important;
  color: #2a42aa !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}
.articulation-page .section-nav a:hover{ text-decoration: underline !important; }
.articulation-page .section-nav a.is-active{
  background: #e8edff !important;
  border-color: #a5b4fc !important;
}

/* Optional: if a <nav> is the very first thing inside your wrapper, keep it flush */
.articulation-page > .section-nav:first-child{ margin-top: 0 !important; }

/* Policy cards grid */
.articulation-page .policy-cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

/* Flatten the UL so each LI becomes a grid item */
.articulation-page .policy-cards ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: contents;   /* key: makes each <li> a grid child */
}

/* Card */
.articulation-page .policy-cards li{
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 14px 16px;
}
.articulation-page .policy-cards li:hover{
  border-color: #a5b4fc;
}

/* Typography inside cards */
.articulation-page .policy-cards li > strong{
  display: block;
  font-size: 18px;
  margin-bottom: 4px;
}
.articulation-page .policy-cards li em{ color:#64748b; }

/* Stack policy cards in a single column */
.articulation-page .policy-cards{
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

/* Row layout */
.articulation-page .policy-cards .card-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

/* Lightweight container buttons (“chips”) */
.articulation-page .policy-cards .chip{
  display:inline-block;
  padding:6px 12px;
  border:1px solid #c7d3f5;
  border-radius:9999px;            /* soft pill */
  background:#f0f4ff;
  color:#2a42aa;
  text-decoration:none;
  font-weight:700;
  font-size:14.5px;
  line-height:1;
}

/* Hover / active: subtle, not shouty */
.articulation-page .policy-cards .chip:hover{
  background:#e8ecff;
  border-color:#b3c0ff;
  color:#1b2379;
  text-decoration:none;
}

/* Keyboard focus */
.articulation-page .policy-cards .chip:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(27,35,121,.18);
}

/* If the old bold line is still present, hide it */
.articulation-page .policy-cards li > strong:last-child{
  display:none;
}