/* Integration single templates — ports prototype single-page look
   (integration-directory/prototype/src/head.html, "SINGLE INTEGRATION PAGES" section).
   ACSS variables where they exist, prototype hex values as fallbacks.
   Loaded only on is_singular('integration') — see functions.php. */

/* prototype .page is 920px; template structure is Bricks section>container (not editable here).
   width (not max-width): Bricks sets a fixed container width, so max-width alone can't shrink it on mobile */
.single-integration #brx-content .brxe-container{width:min(920px,100%)}
/* the 100vw CTA band spills by the scrollbar width; clip it so it never creates a horizontal scrollbar */
body.single-integration{overflow-x:clip}

/* back link (prototype .crumbs) */
.bd-single-back{display:inline-block;font-size:13px;color:var(--neutral-dark,#5C6B62);text-decoration:none;margin:22px 0 6px}
.bd-single-back:hover{color:var(--base-dark,#2B3B32);text-decoration:underline}

/* hero (prototype .phero) — icon + chips share one row, rest full-width */
.bd-single-hero{display:flex;flex-wrap:wrap;align-items:center;column-gap:16px;width:100%;
  padding:10px 0 24px;border-bottom:1px solid var(--neutral-light,#E2E4E1);margin-bottom:4px}
/* 4px + the container's 24px row-gap = 28px to the stats strip; intro's own 18px mb is redundant inside the padded hero */
.bd-single-hero .bd-single-intro{margin-bottom:0}
.bd-single-icon{flex:0 0 auto}
.bd-single-icon p{margin:0;line-height:0}
.bd-single-icon img{width:56px;height:56px;border-radius:13px;object-fit:contain}
.bd-single-icon img[src=""]{display:none}
.bd-single-chips{display:flex;flex-wrap:wrap;gap:7px}
.bd-chip{font-size:12.5px;font-weight:500;padding:4px 10px;border-radius:5px;
  background:var(--neutral-ultra-light,#EDEFEC);color:var(--base-dark,#2B3B32)}
/* no max-width ch caps here: they clamp the flex base size and break row wrapping */
.bd-single-hero h1{flex-basis:100%;font-size:clamp(27px,3.9vw,40px);line-height:1.2;font-weight:600;margin:20px 0 0}
.bd-single-lede{flex-basis:100%;font-size:17px;line-height:1.6;color:var(--base-dark,#2B3B32);margin:16px 0 0}
.bd-single-lede:empty{display:none}
.bd-single-hero .bd-single-doclink{margin:24px 0 0}
.bd-single-doclink{font-size:14px;text-decoration:underline;text-underline-offset:3px;color:var(--action,#224035)}

/* stat strip (prototype .stats) — flex so 1–4 cells always fill the row (okta has one) */
.bd-single-stats{display:flex;flex-wrap:wrap;gap:1px;width:100%;
  background:var(--neutral-light,#E2E4E1);border:1px solid var(--neutral-light,#E2E4E1);
  border-radius:var(--radius-m,11px);overflow:hidden;margin:0 0 34px}
.bd-single-stats>*{flex:1 1 180px;background:var(--white,#fff);padding:15px 17px}
.bd-single-stats p{margin:0}
.bd-single-stats small{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;color:var(--neutral-dark,#5C6B62);margin-bottom:5px}
.bd-single-stats strong{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.bd-single-stats strong a{color:inherit;text-decoration:none}
.bd-single-stats strong a:hover{text-decoration:underline}

/* section headings (prototype .sec h2) */
.bd-single-h2{font-size:23px;line-height:1.2;font-weight:600;margin:38px 0 18px;width:100%}

/* tools list (prototype table.tools look: one bordered box, row dividers) */
.bd-single-tools{display:flex;flex-direction:column;width:100%;margin-bottom:26px;
  border:1px solid var(--neutral-light,#E2E4E1);border-radius:var(--radius-m,11px);
  overflow:hidden;background:var(--white,#fff)}
.bd-single-tool{display:grid;grid-template-columns:220px 90px 1fr;gap:12px;align-items:baseline;
  padding:12px 16px;border-bottom:1px solid var(--neutral-light,#E2E4E1)}
.bd-single-tool:last-of-type{border-bottom:0}
.bd-tool-name{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:500;overflow-wrap:anywhere}
.bd-tool-op{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--neutral-dark,#5C6B62)}
.bd-tool-desc{font-size:14px;line-height:1.55;color:var(--base-dark,#2B3B32)}

/* use cases (prototype .ucards: 2-col cards) */
.bd-single-usecases{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;width:100%;margin-bottom:26px}
.bd-single-usecase{display:flex;flex-direction:column;gap:7px;padding:19px;
  border:1px solid var(--neutral-light,#E2E4E1);border-radius:var(--radius-m,11px);
  background:var(--white,#fff);box-shadow:0 1px 2px rgba(34,64,53,.06)}
.bd-uc-title{font-size:16px;font-weight:600;line-height:1.3}
.bd-uc-tags{font-size:14px;line-height:1.55;color:var(--base-dark,#2B3B32)}

/* Bricks query markers are empty divs — keep them out of the grids */
.bd-single-tools .brx-query-trail,.bd-single-usecases .brx-query-trail{display:none}

.bd-single-note{font-size:15px;line-height:1.6;color:var(--base-dark,#2B3B32);margin-bottom:10px}

/* ---- MCP spec sections (template 6757) ---- */

/* intro + lead paragraphs */
.bd-single-intro,.bd-single-lead{font-size:15px;line-height:1.6;color:var(--base-dark,#2B3B32);margin:0 0 18px;width:100%}
.bd-single-lead{font-size:16px}

/* sub-headings (e.g. "Tools Available") */
.bd-single-h3{font-size:17px;line-height:1.3;font-weight:600;margin:26px 0 12px;width:100%}

/* inline "see full list" / "setup guide" links */
.bd-single-seefull,.bd-single-setuplink{display:inline-block;font-size:14px;font-weight:500;
  color:var(--action,#224035);text-decoration:underline;text-underline-offset:3px;margin:2px 0 26px}
.bd-single-seefull:hover,.bd-single-setuplink:hover{opacity:.75}

/* §5 risks (prototype .risks: red-edged cards) */
.bd-single-risks{display:flex;flex-direction:column;gap:11px;width:100%;margin:0 0 26px}
.bd-risk{font-size:14px;line-height:1.55;color:var(--base-dark,#2B3B32);
  background:var(--white,#fff);border:1px solid var(--neutral-light,#E2E4E1);
  border-left:3px solid var(--cap-d,#9A3A21);border-radius:0 var(--radius-m,11px) var(--radius-m,11px) 0;
  padding:15px 17px;margin:0}
.bd-risk strong{color:var(--ink,#000)}

/* §6 + §7 tables (prototype table.grid2) — border/radius on the wrapper so radius clips reliably */
.bd-single-glance{width:100%;margin:0 0 26px;
  border:1px solid var(--neutral-light,#E2E4E1);border-radius:var(--radius-m,11px);
  overflow:hidden;background:var(--white,#fff)}

/* §7 AI-client logo grid (Jim's rebuild: <a.bd-single-clients> wrapping ACSS grid--auto-4) */
.bd-single-clients{display:block;width:100%;margin:0 0 26px;text-decoration:none;color:inherit}
.bd-single-clients:hover{text-decoration:none;color:inherit} /* beats ACSS body a:hover orange underline */
/* view-all CTA under the grid: centered like the bottom-CTA row; 14 + 26 wrapper mb + 24 row-gap = 64px above */
.bd-aiclients-cta{width:100%;display:flex;justify-content:center;margin-top:14px}
.bd-client-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  text-align:center;padding:16px 12px;min-height:74px;
  border:1px solid var(--neutral-light,#E2E4E1);border-radius:var(--radius-m,11px);
  background:var(--white,#fff)}
/* explicit box: viewBox-only SVGs have no intrinsic width and collapse to 0 under width:auto */
.bd-client-logo img,img.bd-client-logo{width:28px;height:28px;object-fit:contain;display:block}
.bd-client-logo p{margin:0}
.bd-client-name{font-size:13.5px;font-weight:500;line-height:1.3;color:var(--base-dark,#2B3B32)}
.bd-glance,.bd-clients{width:100%;border-collapse:collapse;font-size:14.5px;margin:0}
.bd-glance th,.bd-glance td,.bd-clients th,.bd-clients td{text-align:left;padding:12px 16px;
  border-bottom:1px solid var(--neutral-light,#E2E4E1)}
.bd-glance tr:last-child td,.bd-clients tr:last-child td{border-bottom:0}
.bd-glance th,.bd-clients th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--neutral-dark,#5C6B62);font-weight:600;background:var(--neutral-ultra-light,#EDEFEC)}
.bd-glance td:first-child,.bd-clients td:first-child{font-weight:500}
.bd-glance td:last-child{color:var(--cap-c,#1F5B41);font-weight:500}
.bd-clients td a{color:var(--action,#224035);text-decoration:underline;text-underline-offset:3px}

/* §6 feature bullets (prototype .feats: 2-col cards) */
.bd-single-features{width:100%;margin:0 0 26px}
.bd-features{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:0;padding:0}
/* beat ACSS .brxe-text>:is(ul,ol) padding + .brxe-text>ul *+li margin (higher specificity) — they staggered the grid */
.bd-single-features .bd-features{padding-inline-start:0}
.bd-single-features .bd-features li{margin-block:0}
.bd-features li{font-size:14px;line-height:1.55;color:var(--base-dark,#2B3B32);
  background:var(--white,#fff);border:1px solid var(--neutral-light,#E2E4E1);
  border-radius:var(--radius-m,11px);padding:18px;box-shadow:0 1px 2px rgba(34,64,53,.06)}
.bd-features li strong{color:var(--ink,#000);font-size:15.5px}

/* §8 numbered steps (prototype .steps) */
.bd-single-steps{width:100%;margin:0 0 8px}
.bd-steps{list-style:none;counter-reset:s;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
/* same ACSS .brxe-text list-leak override as .bd-features */
.bd-single-steps .bd-steps{padding-inline-start:0}
.bd-single-steps .bd-steps li{margin-block:0}
/* absolute gutter marker (not flex): <strong>headline</strong> + body must flow as one inline paragraph */
.bd-steps li{counter-increment:s;position:relative;padding-inline-start:40px;font-size:15px;font-weight:500}
.bd-steps li::before{content:counter(s);position:absolute;inset-inline-start:0;top:0;width:26px;height:26px;border-radius:50%;
  background:var(--action,#224035);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600}

/* §10 FAQ accordion (prototype .faq) — native details/summary, +/− affordance */
.bd-single-faq{width:100%;margin:0 0 26px}
.bd-faq{border:1px solid var(--neutral-light,#E2E4E1);border-radius:var(--radius-m,11px);
  overflow:hidden;background:var(--white,#fff)}
.bd-faq__item{border-bottom:1px solid var(--neutral-light,#E2E4E1)}
.bd-faq__item:last-child{border-bottom:0}
.bd-faq__q{cursor:pointer;padding:21px 17px;font-size:15px;font-weight:500;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.bd-faq__q::-webkit-details-marker{display:none}
.bd-faq__q::after{content:"+";font-size:19px;font-weight:400;color:var(--neutral-dark,#5C6B62);line-height:1;flex:0 0 auto}
.bd-faq__item[open] .bd-faq__q::after{content:"\2212"}
.bd-faq__q:hover{background:var(--neutral-ultra-light,#EDEFEC)}
/* open item: 4+14=18px visible gap above the answer, 18px below — symmetric; closed rows keep 21/21 */
.bd-faq__item[open] .bd-faq__q{padding-bottom:4px}
.bd-faq__a{padding:14px 17px 18px;font-size:14.5px;color:var(--base-dark,#2B3B32);line-height:1.6;margin:0}

/* §11 CTA (prototype .pcta) — full-bleed forest band from inside the 920px container */
/* full-bleed via box-shadow+clip-path: 100vw/negative-margin tricks inflate flex ancestors'
   min-content width (page shifts sideways once a scrollbar appears); shadow paint is layout-neutral */
.bd-single-cta{width:100%;margin:44px 0 0;
  background:var(--action,#224035);box-shadow:0 0 0 100vmax var(--action,#224035);
  clip-path:inset(0 -100vmax);color:#fff;text-align:center;padding:62px 24px}
.bd-single-cta .bd-single-h2{color:#fff;font-size:clamp(24px,3.4vw,34px);max-width:20ch;margin:0 auto}
.bd-cta-body{max-width:54ch;margin:14px auto 24px;color:rgba(255,255,255,.78);font-size:15px;line-height:1.6}
.bd-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.bd-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;
  border-radius:var(--radius,5px);border:1px solid var(--mint,#4DFFBE);background:var(--mint,#4DFFBE);
  color:#0B1310;font-size:14px;font-weight:500;letter-spacing:-.4px;text-decoration:none;transition:.15s}
.bd-btn:hover{opacity:.86}
.bd-btn--ghost{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}

/* ---- IdP single (template 6759) ---- */
/* two-column Q&A block → cards (same weight as tools/use-case cards above) */
.bd-single-cols > div{border:1px solid var(--neutral-light,#E2E4E1);border-radius:var(--radius-m,11px);
  padding:24px;background:var(--white,#fff);box-shadow:0 1px 2px rgba(34,64,53,.06)}
/* setup section → branded forest CTA card: contained + rounded + left-aligned row,
   distinct from the centered full-bleed bottom band; mint .bd-btn pops on forest as-is */
.bd-single-setup-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border-radius:14px;background:var(--action,#224035);padding:30px 32px;width:100%}
.bd-setup-cta__body{flex:1 1 30ch}
.bd-setup-cta__h{font-size:20px;line-height:1.25;font-weight:600;color:#fff;margin:0 0 6px}
/* .bd-single-lead is width:100% globally (L75) — inside the card it must share the row */
.bd-single-setup-cta .bd-single-lead{width:auto;flex:1 1 30ch;margin:0;color:rgba(255,255,255,.85)}

@media (max-width:820px){
  .bd-single-usecases{grid-template-columns:1fr}
  .bd-single-tool{grid-template-columns:1fr;gap:3px}
  .bd-single-icon img{width:46px;height:46px}
  .bd-features{grid-template-columns:1fr}
  .bd-single-cta{padding:48px 20px}
}