/**
 * AM2027 — generic pages.
 * The page title block and the default node template: the page grid plus
 * readable typography for editor-entered rich text.
 */

/* ---------- page title ---------- */
.page-title{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(28px,4.5vw,48px) 28px 0;
}
.page-title h1{
  margin:0;font-size:calc((clamp(26px,3.4vw,34px)) * var(--fs,1));font-weight:700;
  letter-spacing:-.015em;line-height:1.15;color:var(--navy);
}
.page-title h1::after{
  content:"";display:block;width:56px;height:2px;background:var(--teal);margin:14px 0 0;
}

/* ---------- default node body ---------- */
.node-page{
  max-width:var(--maxw);margin:0 auto;
  padding:26px 28px clamp(48px,7vw,80px);
}

/* ---------- rich text ---------- */
.prose{font-size:calc((15.5px) * var(--fs,1));line-height:1.68;color:var(--slate);max-width:145ch}
.prose > div{max-width:none}
/* A page wrapper keeps the site's grid width even though it is also .prose.
   Both are single-class selectors and .prose comes later, so the 145ch
   measure was silently winning -- and because `ch` scales with the font, the
   one-point type increase in section 24 stretched it from 1205px to 1288px,
   putting basic pages 88px wider than the header and footer columns. The
   145ch measure still does its job inside narrower containers. */
.node-page.prose{max-width:var(--maxw)}

.prose p{margin:0 0 15px}
.prose p:last-child{margin-bottom:0}
.prose strong,.prose b{color:var(--navy);font-weight:700}

.prose h2,.prose h3,.prose h4{color:var(--navy);letter-spacing:-.008em;line-height:1.3}
.prose h2{margin:34px 0 12px;font-size:calc((21px) * var(--fs,1));font-weight:700}
.prose h3{margin:28px 0 10px;font-size:calc((17px) * var(--fs,1));font-weight:700}
.prose h4{
  margin:24px 0 8px;font-size:calc((13.5px) * var(--fs,1));font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--teal);
}
.prose > :first-child{margin-top:0}

.prose ul,.prose ol{margin:0 0 15px;padding-left:22px}
.prose li{margin:0 0 7px}
.prose li:last-child{margin-bottom:0}
.prose ul ul,.prose ol ol{margin:7px 0 0}

/* `:not(.btn)` matters: `.prose a` is more specific than `.btn-solid`, so
   without it a button placed inside prose loses its own text colour and ends
   up the same colour as its own background -- invisible. */
.prose a:not(.btn){color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.prose a:not(.btn):hover{color:var(--teal-dark)}

.prose blockquote{
  margin:22px 0;padding:4px 0 4px 20px;
  border-left:3px solid var(--teal);color:var(--navy);font-size:calc((16px) * var(--fs,1));
}
.prose hr{border:0;border-top:1px solid var(--line);margin:30px 0}
.prose img{border-radius:8px;margin:20px 0}

/* A table stays a real table so its columns stretch to the full width. The
   horizontal scroll lives on a wrapper instead: `display:block` on the table
   itself made it shrink-to-fit inside a full-width box, which is what left a
   wide empty band to the right of the pricing table. Cells wrap, so a table
   pasted without a wrapper still will not push the page sideways. */
.prose table{
  width:100%;border-collapse:collapse;margin:22px 0;font-size:calc((14.5px) * var(--fs,1));
}
.prose th,.prose td{
  border:1px solid var(--line);padding:10px 12px;text-align:left;
  vertical-align:top;overflow-wrap:break-word;
}
.prose th{background:var(--wash);color:var(--navy);font-weight:700}
.table-scroll{overflow-x:auto;margin:22px 0}
.table-scroll table{margin:0}

@media(max-width:700px){
  .page-title{padding-left:20px;padding-right:20px}
  .node-page{padding-left:20px;padding-right:20px}
}

/* ---------- sub banner ----------
   The strip at the top of an interior page. The artwork is solid navy on the
   left third, fading into a photo montage, so the copy sits on the flat area.
   A navy gradient is laid over it as insurance: `cover` crops the image at
   narrow widths and the flat area shrinks with it. */

.sub-banner{
  position:relative;
  display:flex;align-items:center;
  min-height:clamp(140px,12.5vw,232px);
  /* No scrim over the artwork -- the picture shows as supplied. The solid
     colour underneath is only what fills the box before the image loads, or
     when a banner has no image. */
  background:
    var(--sub-banner-image, none) center right / cover no-repeat,
    var(--banner-navy);
  color:#fff;
}
.sub-banner-in{
  position:relative;z-index:1;
  width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(22px,3vw,34px) 28px;
  /* One centred page title now, rather than the old intro/title/tagline stack. */
  text-align:center;
}

.sub-banner-intro{
  margin:0;font-size:calc((clamp(21px,2.6vw,34px)) * var(--fs,1));font-weight:400;line-height:1.1;
  letter-spacing:-.01em;
}
/* The short rule under the intro line, in the wordmark's green. */
.sub-banner-intro::after{
  content:"";display:block;width:56px;height:3px;
  background:var(--brand-green);margin:10px 0 0;
}

.sub-banner-title{
  margin:12px 0 0;font-size:calc((clamp(26px,3.6vw,48px)) * var(--fs,1));font-weight:700;line-height:1.08;
  letter-spacing:-.02em;color:#fff;
}
.sub-banner-tagline{
  margin:12px 0 0;font-size:calc((clamp(12px,1.1vw,16px)) * var(--fs,1));font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;line-height:1.4;
}

@media(max-width:700px){
  .sub-banner{
    /* Below this the montage is cropped so hard it reads as noise behind the
       copy, so the flat navy takes over entirely. */
    background:var(--banner-navy);
  }
  .sub-banner-in{padding-left:20px;padding-right:20px}
}

/* ---------- interior page title ----------
   Rendered from the node title inside Layout Builder, beneath the banner —
   the page-title block is hidden on these pages because it would otherwise
   appear above it. */
.page-heading{
  margin:clamp(18px,3vw,34px) 0 0;
  font-size:calc((clamp(26px,3.2vw,34px)) * var(--fs,1));font-weight:700;
  letter-spacing:-.015em;line-height:1.15;color:var(--navy);
}
/* The same teal rule the page-title block carries, so an interior page looks
   the same whether its title comes from the block or from Layout Builder. */
.page-heading::after{
  content:"";display:block;width:56px;height:2px;background:var(--teal);margin:14px 0 0;
}

/* ---------- Layout Builder pages ----------
   These compose their own sections. A sub banner has to reach the viewport
   edges, so the article sets no width of its own and each component claims
   the page grid instead. Non-Layout-Builder pages keep the wrapper's width
   and are untouched by this. */
.node-page.node-page--layout{
  max-width:none;padding-left:0;padding-right:0;
  /* Components supply their own top spacing, and an opening banner needs
     to meet the header with nothing between them. */
  padding-top:0;
}
.node-page--layout .layout__region > *{
  max-width:var(--maxw);margin-inline:auto;padding-inline:28px;
}
.node-page--layout .layout__region > .sub-banner{
  max-width:none;
  /* Cancel main's side padding so the background reaches the viewport edges,
     then put the same amount back as padding. A negative margin against a
     matching padding adds no horizontal overflow the way a 100vw breakout
     would, and the padding leaves the inner container the exact content box
     the body column gets, so the banner copy stays aligned with the page. */
  margin-inline:calc(var(--main-pad) * -1);
  padding-inline:var(--main-pad);
}
@media(max-width:700px){
  .node-page--layout .layout__region > *{padding-inline:20px}
  .node-page--layout .sub-banner-in{padding-inline:20px}
}

/* A banner opening a Layout Builder page sits flush under the header, so it
   also absorbs main's top padding. */
.node-page--layout .layout__region > .sub-banner:first-child{
  margin-top:calc(var(--main-pad) * -1);
}

/* ---------- pricing page ----------
   Scoped to its own classes so nothing here reaches other prose pages. The
   markup this styles replaced a paste of last year's page, which carried
   Bootstrap classes (container / row / col-lg-3 / table-striped) that this
   theme has never loaded, so every one of them was inert. */
.pricing-kicker{
  display:inline-block;margin:0 0 6px;
  font-size:calc((11.5px) * var(--fs,1));font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);
}
.pricing-card{
  border:1px solid var(--line);border-radius:10px;
  padding:26px 28px;margin:20px 0 28px;background:#fff;
}
.prose .pricing-card > :first-child{margin-top:0}
.prose .pricing-card > :last-child{margin-bottom:0}
.prose .pricing-card h4{margin-top:0}
.pricing-lead{color:var(--navy)}

/* The four columns the pasted markup asked for with col-lg-3, done with a
   grid that actually collapses on narrow screens instead of relying on a
   framework that is not here. */
.prose .pricing-incl{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:0 26px;margin:0 0 15px;
}

.pricing-note{
  border-left:3px solid var(--orange);background:var(--wash);
  border-radius:0 6px 6px 0;padding:14px 18px;margin:18px 0;
}
.prose .pricing-note p{margin:0}

/* The header's date line is secondary to the tier name above it. */
.pricing-table th span{
  display:block;margin-top:3px;
  font-weight:400;font-size:calc((12.5px) * var(--fs,1));color:var(--slate);
}
.pricing-table td:not(:first-child),
.pricing-table th:not(:first-child){white-space:nowrap}

.pricing-cta{margin:26px 0;text-align:center}
/* The button keeps .btn .btn-solid, so it follows the Button colors screen
   like every other button on the site. */
.prose .pricing-cta a{text-decoration:none}

@media(max-width:700px){
  .pricing-card{padding:20px}
}

/* ---------- policy accordion ----------
   The layout the conference-policy pages use: a stack of collapsible rows,
   one hairline between each. Native <details>, so there is no JavaScript to
   load, no ARIA to keep in sync, and the keyboard works for free. */
.policy-intro{margin:0 0 22px}
.policies{border-top:1px solid var(--line);margin:6px 0 10px}
.policy{border-bottom:1px solid var(--line)}
.policy > summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:17px 8px;cursor:pointer;
  /* Both are needed: the second is Safari's. */
  list-style:none;
}
.policy > summary::-webkit-details-marker{display:none}
.policy > summary:hover{background:var(--wash)}
.policy-title{
  font-size:calc((17px) * var(--fs,1));font-weight:700;line-height:1.35;
  letter-spacing:-.005em;color:var(--navy);
}
.policy-chevron{
  width:20px;height:20px;flex:none;color:var(--teal);
  transition:transform .2s ease;
}
.policy[open] > summary .policy-chevron{transform:rotate(180deg)}
.policy-body{padding:0 8px 22px}
.policy-body > :first-child{margin-top:0}
.policy-body > :last-child{margin-bottom:0}

@media(prefers-reduced-motion:reduce){
  .policy-chevron{transition:none}
}