/* ============================================================
   PeopleTalk — component & chrome styles
   Built on the design-system tokens (colors/typography/spacing).
   Translates the PeopleTalk Online UI kit into block-theme CSS.
   ============================================================ */

/* ---------- Base / helpers ---------------------------------- */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--azure-100); color: var(--ink-900); }

/* In-page anchor links should clear the sticky header (+ admin bar). */
html { scroll-padding-top: calc(var(--header-height) + var(--wp-admin--admin-bar--height, 0px)); }

/* Pin main flush under the sticky header (removes the page-bg strip below the
   nav). Only main's top margin is zeroed, so the block-gap above the footer —
   the breathing room under the subscribe band — is preserved. */
.wp-site-blocks > main { margin-block-start: 0; }
:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Uppercase mono eyebrow */
.pt-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.pt-kicker--rule::before {
  content: "";
  width: 24px; height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.pt-kicker--inverse { color: var(--neutral-200); }

/* Short azure rule under section titles */
.is-style-pt-rule {
  border: 0 !important;
  width: 56px;
  height: 3px;
  background: var(--azure-500);
  margin-block: var(--space-3);
  border-radius: 2px;
}
hr.is-style-pt-rule:not(.alignwide):not(.alignfull) { margin-inline: 0; }

/* The site container — matches the kit's 1320px max with fluid gutter */
.pt-container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }

/* Inset chrome content to the site gutter.
   The header/footer are top-level template parts, so they sit outside the body
   template's `has-global-padding` container and WordPress's root-padding-aware
   alignments never reach their inner `.alignwide` wrappers. We reproduce the
   same 1320px + fluid-gutter inset here so the bands stay full-bleed while
   their content lines up with the body columns. */
.pt-header__bar,
.pt-footer__inner,
.pt-foot-bottom__inner {
  /* Size exactly like a WordPress `.alignwide` block so the chrome content edge
     lines up with the body content (logo ↔ carousel, footer ↔ columns). */
  width: min(var(--container-max), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* ---------- Header ------------------------------------------ */
/* Visual chrome lives on this inner element; the sticky behaviour lives on the
   template-part <header> wrapper (below). */
.pt-header {
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--duration-base) var(--ease-standard);
}
/* The search panel anchors to the sticky <header class="wp-block-template-part">
   wrapper, which is already positioned — so we deliberately do NOT set
   position:relative on the inner .pt-header. Doing so made it the containing
   block for the mobile nav's position:fixed overlay, which then rendered as a
   short, transparent, unscrollable box instead of a full-screen panel. */

/* WordPress wraps the header template part in <header class="wp-block-template-part">,
   which is the full-height direct child of .wp-site-blocks. The sticky MUST live here:
   on the inner .pt-header it was trapped inside the ~73px-tall wrapper and never
   travelled. Offset by the admin-bar height when logged in (0 otherwise). */
header.wp-block-template-part {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: var(--z-header);
}
.pt-header.is-scrolled {
  background: var(--cphr-fond); /* solid Fond — no translucent off-palette tint */
}
.pt-header .pt-header__bar {
  min-height: var(--header-height);
  align-items: center;
  gap: clamp(12px, 1.6vw, 28px);
}
/* Wordmark: "People" 800 / "Talk" 500 (no symbol), per the brand lockup */
.pt-logo {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-strong);
  text-decoration: none;
  white-space: nowrap;
}
.pt-logo b { font-weight: 800; }
.pt-logo span { font-weight: 500; }
.pt-logo:hover { text-decoration: none; }

/* Image logo (Site Logo block, editable in the Site Editor) — sized to the bar */
.pt-header .wp-block-site-logo.pt-logo { display: flex; align-items: center; line-height: 0; }
.pt-header .wp-block-site-logo.pt-logo a { display: block; }
.pt-header .wp-block-site-logo img,
.pt-header .wp-block-site-logo .custom-logo {
  height: 34px;
  width: auto;
  max-width: none;
  display: block;
}

/* Keep the logo + actions at their natural width and let the nav absorb the
   slack — prevents the Subscribe button from being squeezed into a wrap. */
.pt-logo { flex: 0 0 auto; }
.pt-header__actions { flex: 0 0 auto; }
.pt-header__actions .wp-block-button { margin: 0; }
.pt-header__actions .wp-block-button__link { white-space: nowrap; }

/* Hamburger toggle button (shown ≤1240px — see the mobile-nav section below) */
.pt-header .wp-block-navigation__responsive-container-open {
  background: transparent;
  border: 0;
  padding: 8px;
  color: var(--text-strong);
  cursor: pointer;
}
.pt-header .wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; fill: currentColor; }

/* Primary navigation — single line, never wraps */
.pt-header .wp-block-navigation {
  --wp--style--block-gap: 0px;
  flex-wrap: nowrap;
}
.pt-header .wp-block-navigation .wp-block-navigation__container {
  flex-wrap: nowrap;
}
.pt-header .wp-block-navigation .wp-block-navigation-item__content {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  color: var(--text-body);
  padding: 10px 15px;
  border-radius: 8px;
  white-space: nowrap;
}
.pt-header .wp-block-navigation .wp-block-navigation-item__content { text-decoration: underline 2px transparent; text-underline-offset: 6px; transition: color var(--duration-fast), text-decoration-color var(--duration-fast); }
.pt-header .wp-block-navigation .wp-block-navigation-item__content:is(:hover, :focus-visible) { color: var(--text-brand); text-decoration-color: currentColor; }
.pt-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.pt-header .wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
  color: var(--text-strong);
  font-weight: 700;
  text-decoration-color: var(--cphr-mid-blue);
}

/* Topics dropdown (desktop flyout): keep the sub-items at their lighter weight
   and give the panel a little breathing room. The mobile overlay restyles this
   same container within the ≤1240px block. */
.pt-header .wp-block-navigation__submenu-container {
  padding-block: 10px;
  padding-inline: 8px;
}
.pt-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-weight: 500;
  font-size: 17px;
  padding: 10px 16px;
}

/* Co-brand lockup, top left (client request Jul 13) — same pairing as the
   footer, each mark linking to its own homepage. The CPHR mark ships as a
   white PNG for the dark footer, so on the light header it is drawn as a
   masked shape tinted to the brand navy; swap in a colour asset and drop the
   mask rules when one is supplied. */
/* Mirrors the footer lockup: marks top-aligned with a short rule sitting near
   the top of the pair, rather than a full-height centred divider. */
.pt-brandlock { display: flex; align-items: flex-start; gap: 14px; flex: 0 0 auto; }
.pt-brandlock a { display: flex; align-items: flex-start; line-height: 0; text-decoration: none; }
/* The "Online" lockup stacks the ONLINE band under the wordmark, so it needs
   more height than the old single-line logo to read at the same size. */
.pt-brandlock__pt img { height: 46px; width: auto; display: block; }
/* Same 26px rule the footer uses (.pt-foot-logos__div), top-aligned. */
.pt-brandlock__div {
  width: 1px; height: 26px; background: var(--border-default); flex: 0 0 auto;
}
.pt-brandlock__cphr-mark {
  display: block;
  /* Box matches the asset's own 1.783 ratio so `contain` scales to the full
     box - a wider box just letterboxes the mark and shrinks it. */
  width: 87px; height: 49px;
  /* Official secondary 2-colour mark (white knocked out, padding trimmed).
     Two colours rule out the old mask-recolour hover, so hover dims instead. */
  background: url("../images/cphr-logo-secondary.png") center / contain no-repeat;
}
.pt-brandlock a:hover .pt-brandlock__cphr-mark { opacity: 0.82; }
/* PT logo can't use the mask trick (its white ONLINE knockout would vanish),
   so hover layers an azure-filled copy of the SVG over the base image. */
.pt-brandlock__pt { position: relative; }
.pt-brandlock__pt::after {
  content: "";
  position: absolute; inset: 0;
  background: url("../images/peopletalk-online-logo-hover.svg") center / contain no-repeat;
  opacity: 0;
}
.pt-brandlock__pt:hover::after { opacity: 1; }

@media (max-width: 600px) {
  .pt-brandlock { gap: 10px; }
  .pt-brandlock__pt img { height: 38px; }
  .pt-brandlock__cphr-mark { width: 73px; height: 41px; }
}

/* Round icon button (search) */
.pt-iconbtn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border-default);
  background: transparent;
  color: var(--text-body);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--duration-fast);
  padding: 0;
}
.pt-iconbtn:is(:hover, :focus-visible) { background: var(--cphr-bleu-clair); border-color: var(--cphr-mid-blue); color: var(--cphr-mid-blue); }
.pt-iconbtn svg { width: 18px; height: 18px; }

/* ---------- Buttons (block styles) -------------------------- */
.wp-block-button .wp-block-button__link {
  font-family: var(--font-sans);
  font-weight: 600;
  border-radius: var(--radius-pill);
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast);
  border: 1.5px solid var(--action-bg);
}
/* Hover never relies on colour alone: every button also moves its arrow
   (wrap trailing arrows in .pt-btn-arrow) and outline styles thicken. */
.pt-btn-arrow { display: inline-block; margin-left: 0.15em; transition: transform var(--duration-fast); }
.wp-block-button__link:is(:hover, :focus-visible) .pt-btn-arrow { transform: translateX(5px); }
.wp-block-button:not([class*="is-style-"]) .wp-block-button__link:is(:hover, :focus-visible),
.wp-block-button.is-style-fill .wp-block-button__link:is(:hover, :focus-visible) { background: var(--action-bg-hover); border-color: var(--action-bg-hover); }
.wp-block-button .wp-block-button__link:active { transform: translateY(1px); }

.wp-block-button.is-style-accent .wp-block-button__link {
  background: var(--accent-bg);
  color: #fff;
  border-color: var(--accent-bg);
}
.wp-block-button.is-style-accent .wp-block-button__link:hover { background: var(--accent-bg-hover); border-color: var(--accent-bg-hover); }

.wp-block-button.is-style-ghost .wp-block-button__link {
  background: transparent;
  color: var(--text-brand);
  border-color: transparent;
}
.wp-block-button.is-style-ghost .wp-block-button__link:is(:hover, :focus-visible) {
  background: transparent;
  border-color: var(--cphr-mid-blue);
  box-shadow: inset 0 0 0 0.5px var(--cphr-mid-blue);
  color: var(--cphr-mid-blue);
  text-decoration: underline; text-underline-offset: 3px;
}

.wp-block-button.is-style-pill-outline .wp-block-button__link {
  background: transparent;
  color: var(--text-strong);
  border-color: var(--border-default);
}
.wp-block-button.is-style-pill-outline .wp-block-button__link:is(:hover, :focus-visible),
.pt-btn-outline:is(:hover, :focus-visible) {
  background: transparent;
  border-color: var(--cphr-mid-blue);
  box-shadow: inset 0 0 0 1px var(--cphr-mid-blue);
  color: var(--cphr-mid-blue);
}

/* ---------- Category tag ------------------------------------ */
.pt-cat,
.wp-block-post-terms.is-style-pt-tag a {
  --tag: var(--azure-600); /* one shared hue for every topic; faint pastel fill */
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: color-mix(in srgb, var(--tag) 60%, #15181f);
  background: color-mix(in srgb, var(--tag) 15%, #ffffff);
  /* The label is all-caps, so no glyph reaches the descender space the line box
     still reserves below the baseline; with symmetric padding the ink sat ~1.5px
     high. Measured to put the caps dead-centre — 8px of clearance either side.
     Don't "tidy" this back to a symmetric shorthand. */
  padding: 8px 12px 5px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  width: max-content;
}
/* No per-category colour variants: every topic tag shares the default --tag.
   (A per-slug list lived here once — it rots as topics change; don't revive it.) */
.wp-block-post-terms.is-style-pt-tag { display: flex; gap: 8px; flex-wrap: wrap; }
/* Core injects a ", " separator span between terms; pills are already spaced
   by the flex gap, so it reads as a stray mark on multi-topic posts. */
.wp-block-post-terms .wp-block-post-terms__separator { display: none; }
/* The leading dot was removed (Jul 22) — it never sat on the pill's optical
   centre and added nothing the pastel fill wasn't already saying. */
.pt-cat--solid { background: var(--accent-bg); color: #fff; }
/* Solid tags (carousel / hero) read on the dark hero. Topics all use the same
   default navy fill (no per-topic colour); News & Updates keeps its blue. */
.pt-cat--solid.pt-cat--news       { background: var(--azure-600); }

/* ---------- Section head ------------------------------------ */
.pt-sectionhead { margin-bottom: var(--space-5); }
.pt-sectionhead h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 34px);
  letter-spacing: -0.005em;
  margin: 8px 0 0;
}

/* ---------- Article cards (Query Loop) ---------------------- */
.pt-cards { list-style: none; margin: 0; padding: 0; }
.pt-latest-grid .pt-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.pt-related-grid .pt-cards,
.pt-related-grid > .wp-block-post-template { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.pt-cards > li.wp-block-post {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--duration-base), transform var(--duration-base);
  margin: 0;
}
.pt-cards > li.wp-block-post:is(:hover, :focus-within) { border-color: var(--cphr-mid-blue); box-shadow: 0 0 0 1px var(--cphr-mid-blue), var(--shadow-lg); transform: translateY(-3px); }

.pt-cards .wp-block-post-featured-image { margin: 0; }
.pt-cards .wp-block-post-featured-image img,
.pt-cards .wp-block-post-featured-image a {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
/* Tinted placeholder when a post has no featured image */
.pt-cards .wp-block-post-featured-image:empty,
.pt-card-fallback {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, color-mix(in srgb, var(--azure-500) 22%, var(--neutral-100)), color-mix(in srgb, var(--azure-500) 7%, var(--neutral-50)));
}

.pt-cards .pt-card__body {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 16px 20px 22px;
  flex: 1;
}
.pt-cards .wp-block-post-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.13;
  letter-spacing: -0.01em;
  margin: 0;
}
.pt-cards .wp-block-post-title a { color: var(--text-strong); text-decoration: none; }
.pt-cards .wp-block-post-title a { text-decoration: underline 2px transparent; text-underline-offset: 3px; transition: color var(--duration-fast), text-decoration-color var(--duration-fast); }
.pt-cards > li.wp-block-post:is(:hover, :focus-within) .wp-block-post-title a { color: var(--text-brand); text-decoration-color: currentColor; }
.pt-cards .wp-block-post-excerpt {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-muted);
  margin: 0;
}
.pt-cards .wp-block-post-excerpt__excerpt { margin: 0; }
.pt-cards .wp-block-post-excerpt__more-link { display: none; }
.pt-card__meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  font-family: var(--font-mono); font-weight: 500;
  font-size: 14px;
  color: var(--text-muted);
}
.pt-card__meta .wp-block-avatar img { border-radius: 50%; }
.pt-card__meta .wp-block-post-author-name { color: var(--text-muted); }
.pt-card__meta .wp-block-post-date { white-space: nowrap; }
/* "Author · Date" — middot only when a date follows an author name */
.pt-card__meta .wp-block-post-author-name + .wp-block-post-date::before {
  content: "·";
  margin-right: 9px;
  color: var(--text-subtle);
}

/* ---------- Hero carousel ----------------------------------- */
.pt-hero { position: relative; }
.pt-hero__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}
/* The Query Loop post-template <ul> is the stage; each post <li> is a slide. */
.pt-hero__q { position: relative; }
.pt-hero__track {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  min-height: 440px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.pt-hero__track > li.wp-block-post {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  background-color: var(--ink-900);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-slow) var(--ease-out);
}
.pt-hero__track > li.wp-block-post.is-active { opacity: 1; visibility: visible; }
/* Featured image fills the slide */
.pt-hero__img {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}
.pt-hero__img,
.pt-hero__img a,
.pt-hero__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Navy protection gradient for headline legibility */
.pt-hero__track > li.wp-block-post::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(10,26,46,0.85) 0%, rgba(10,26,46,0.15) 45%, transparent 75%),
    linear-gradient(95deg, rgba(10,26,46,0.94) 0%, rgba(10,26,46,0.78) 38%, rgba(10,26,46,0.35) 70%, rgba(10,26,46,0.12) 100%);
  pointer-events: none;
}
.pt-hero__inner {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  max-width: 760px;
  padding: clamp(24px, 4%, 44px);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* Solid category pill */
.pt-hero__cat { margin: 0 0 18px; }
.pt-hero__cat a {
  display: inline-flex;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--azure-600);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  text-decoration: none;
}
.pt-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin: 0 0 14px;
  color: #fff;
  text-wrap: pretty;
}
.pt-hero__title a { color: #fff; text-decoration: none; }
.pt-hero__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pt-hero__excerpt {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.45;
  color: var(--neutral-100);
  margin: 0 0 16px;
  max-width: 620px;
}
.pt-hero__excerpt .wp-block-post-excerpt__excerpt { margin: 0; }
.pt-hero__excerpt .wp-block-post-excerpt__more-link { display: none; }
.pt-hero__byline-row {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 14px;
  color: var(--neutral-200);
  gap: 10px;
}
.pt-hero__byline-row .wp-block-avatar img { border-radius: 50%; }
.pt-hero__empty {
  min-height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-xl);
  color: var(--text-muted);
  padding: 40px;
}
/* Single wrapper span keeps the sentence one flex item — bare inline children
   become separate items and flex drops the whitespace between them. */
.pt-hero__empty > span { max-width: 52ch; }

/* "Link copied" confirmation bubble on the share button (clipboard fallback) */
.pt-share { position: relative; }
.pt-share.is-copied::after {
  content: "Link copied";
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink-900);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.pt-arrow {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border-default);
  background: var(--surface-card);
  color: var(--text-body);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
  padding: 0;
}
.pt-arrow:hover { background: var(--azure-600); color: #fff; border-color: var(--azure-600); }
.pt-arrow svg { width: 20px; height: 20px; }

.pt-dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.pt-dots button {
  width: 9px; height: 9px;
  border: 0; border-radius: 999px; padding: 0;
  background: var(--neutral-300);
  cursor: pointer;
  transition: width var(--duration-base), background var(--duration-base);
}
.pt-dots button.is-active { width: 28px; background: var(--navy-500); }

/* ---------- Two-column home layout -------------------------- */
.pt-two-col { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }
.pt-two-col .wp-block-column { min-width: 0; }

/* PeopleTalking column list — text headers, no branded imagery (client
   decision Jul 9 2026: the column reads as a column, not a photo feed). */
.pt-column-list .pt-textcards { display: flex; flex-direction: column; gap: 0; list-style: none; margin: 0; padding: 0; }
.pt-column-list .pt-textcards > li.wp-block-post {
  border-top: 1px solid var(--border-subtle);
  padding: 20px 0;
}
.pt-column-list .pt-textcards > li.wp-block-post:first-child { border-top: 0; padding-top: 4px; }
.pt-column-list .pt-textcard { display: flex; flex-direction: column; gap: 7px; padding: 0; }
/* Kill WP's is-layout-flow block-gap margin so the stack stays tight. */
.pt-column-list .pt-textcard > * { margin-block: 0; }
.pt-column-list .wp-block-post-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.pt-column-list .wp-block-post-excerpt {
  font-size: 15px; line-height: 1.5; color: var(--text-muted);
}
.pt-column-list .wp-block-post-excerpt__more-text { display: none; }

/* ---------- Rail cards (magazine promo + newsletters) ------- */
.pt-rail { display: flex; flex-direction: column; gap: 20px; }
.pt-mag-promo {
  border-radius: var(--radius-lg);
  background: var(--navy-900);
  color: #fff;
  padding: 24px;
}
.pt-mag-promo h3 { color: #fff; font-size: 19px; line-height: 1.2; margin: 0 0 8px; }
/* "Latest edition · <season>" badge — derived from the newest published issue,
   never hand-placed. */
.pt-mag-promo .pt-mag-promo__badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--azure-300);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--radius-pill);
  padding: 5px 9px 3px;
  margin-bottom: 10px;
}
.pt-mag-promo .pt-mag-promo__blurb { font-size: 14px; line-height: 1.45; color: rgba(255,255,255,0.78); margin: 0 0 10px; }
.pt-mag-promo a { color: var(--azure-300); font-weight: 600; }
.pt-mag-cover {
  /* The theme has no global box-sizing reset, so without this the 3/4 ratio
     sizes the CONTENT box and the 14px padding adds 28px on top — which made
     padded placeholder covers taller than image covers in the same grid row. */
  box-sizing: border-box;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 14px;
  color: #fff;
  background: linear-gradient(150deg, var(--slate-400), var(--navy-600));
}
/* Real cover art sits fully visible inside the rounded frame ("mounted print"):
   the radius + overflow clip the white mount, never the artwork. The covers'
   native ratios (~0.76-0.80) don't match the 3/4 frame, so `cover` was cropping
   the sides and the radius ate the corners. */
.pt-mag-cover--img {
  padding: 0; display: block; position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
}
/* Take the image out of flow so it cannot influence its parent's height at all.
   Sizing it in-flow (height:100%, or an aspect-ratio on the img) left image
   covers ~30px shorter than the generated covers beside them in the grid — the
   box has to come from the parent's aspect-ratio alone. */
.pt-mag-cover--img img {
  position: absolute; inset: 6px;
  width: calc(100% - 12px); height: calc(100% - 12px);
  object-fit: contain; display: block;
}
.pt-mag-cover .pt-mag-cover__season { font-family: var(--font-mono); font-weight: 500; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; opacity: .85; }
.pt-mag-cover .pt-mag-cover__theme { font-family: var(--font-sans); font-weight: 700; font-size: 22px; line-height: 1.02; letter-spacing: -0.02em; }

.pt-nl-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  padding: 24px;
}
.pt-nl-list { display: flex; flex-direction: column; }
.pt-nl-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border-subtle);
  text-decoration: none;
}
.pt-nl-list a:first-child { border-top: 0; }
.pt-nl-list .pt-nl-region { font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--text-strong); }
.pt-nl-list .pt-nl-date { font-family: var(--font-mono); font-weight: 500; font-size: 14px; color: var(--text-muted); }

/* ---------- Subscribe band ---------------------------------- */
.pt-subscribe {
  background: var(--azure-600);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 48px);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.pt-subscribe::after {
  content: "";
  position: absolute; left: -60px; bottom: -80px;
  width: 280px; height: 280px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
}
.pt-subscribe h2 { color: #fff; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.08; margin: 10px 0 8px; }
.pt-subscribe p { color: var(--azure-50); margin: 0; }
.pt-subscribe__cta { position: relative; }
/* Solid white pill on the azure band — the sign-up itself lives in the CPHR
   CRM (Gravity Forms), so this is a link out, not an on-site form. */
.pt-subscribe__cta .wp-block-button__link {
  height: 50px; display: inline-flex; align-items: center; padding: 0 28px;
  border: 0; border-radius: var(--radius-pill);
  background: #fff; color: var(--navy-600);
  font-family: var(--font-sans); font-weight: 600; font-size: 15px;
}
.pt-subscribe__cta .wp-block-button__link:is(:hover, :focus-visible) { background: var(--cphr-bleu-clair); color: var(--cphr-dark-blue); }

/* Ad slots are rendered and styled by the PeopleTalk Ads plugin
   (parts/ad-home.html, parts/ad-single.html hold its slot block). */

/* ---------- Footer ------------------------------------------ */
.pt-footer { background: var(--navy-600); color: var(--neutral-200); } /* CPHR dk blue #293E6B */
.pt-footer .pt-logo { color: #fff; }
/* Co-brand lockup: top-aligned so the PeopleTalk wordmark and the "CPHR"
   letterforms line up at the cap-top; CPHR is set taller because its box also
   carries the two-line "British Columbia & Yukon" tagline, so a larger height
   makes its main letters match PeopleTalk's cap height. */
.pt-footer .pt-foot-logos { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 16px; flex-wrap: wrap; }
.pt-footer .pt-foot-logo { height: 40px; width: auto; max-width: 100%; display: block; }
.pt-footer .pt-foot-logo--cphr { height: 46px; margin-top: -2px; }
.pt-footer .pt-foot-logos__div { width: 1px; height: 26px; background: rgba(255,255,255,0.28); }
.pt-footer a { color: var(--neutral-200); text-decoration: none; }
.pt-footer a:hover { color: #fff; }
.pt-footer h2, .pt-footer h3, .pt-footer .pt-foot-head {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neutral-300); /* AA on dk-blue footer (neutral-400 would fail) */
  margin: 0 0 14px;
  font-weight: 500;
}
.pt-footer .pt-foot-cols a { font-family: var(--font-sans); font-size: 14px; }
/* Plain marker-less link columns, matching the original footer markup */
.pt-footer .pt-foot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pt-footer .pt-foot-list li { margin: 0; }
.pt-footer .pt-foot-blurb { font-family: var(--font-sans); font-size: 18px; line-height: 1.4; color: var(--neutral-100); }
.pt-footer .pt-foot-addr { font-family: var(--font-mono); font-weight: 500; font-size: 14px; color: var(--neutral-300); line-height: 1.7; }
.pt-footer .pt-foot-legal { font-family: var(--font-mono); font-weight: 500; font-size: 14px; color: var(--neutral-300); }
.pt-footer .pt-foot-legal--links a { font-family: inherit; font-size: inherit; color: var(--neutral-300); text-decoration: none; }
.pt-footer .pt-foot-legal--links a:hover { color: #fff; text-decoration: underline; }
.pt-footer .pt-foot-legal a { white-space: nowrap; } /* break between links, never inside one */
.pt-footer .pt-foot-bottom { background: var(--navy-900); border-top: 1px solid rgba(255,255,255,0.12); } /* deep CPHR web navy #121C31 — dark-blue anchor at the very bottom */

/* Social icons (LinkedIn / Instagram / YouTube) — monochrome on the dark band */
.pt-footer .pt-foot-social { gap: 16px; margin-top: 20px; }
.pt-footer .pt-foot-social .wp-social-link {
  margin: 0;
  padding: 0;
  color: var(--neutral-200);
  background: none;
  transition: color var(--duration-fast), transform var(--duration-fast);
}
.pt-footer .pt-foot-social .wp-social-link:hover { color: #fff; transform: translateY(-2px); }
.pt-footer .pt-foot-social .wp-social-link svg { width: 22px; height: 22px; fill: currentColor; }

/* ---------- Single article ---------------------------------- */
.pt-article__back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-weight: 500; font-size: 14px; letter-spacing: 0.05em;
  color: var(--text-muted); text-decoration: none;
  text-transform: uppercase;
}
.pt-article__standfirst {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 21px;
  line-height: 1.4;
  color: var(--text-muted);
  margin: 0 0 24px;
}
.pt-article__byline {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-subtle);
}
.pt-article__byline .wp-block-avatar img { border-radius: 50%; }
.pt-article__byline .pt-byline-name { font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--text-strong); text-decoration: none; }
.pt-article__byline .pt-byline-meta { font-family: var(--font-mono); font-weight: 500; font-size: 14px; color: var(--text-muted); margin-top: 2px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.pt-article__byline .pt-byline-meta p { margin: 0; }
.pt-article__byline .pt-byline-meta > * + *::before { content: "·"; margin-right: 8px; color: var(--text-subtle); }

.pt-article__photo {
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.pt-article__photo img { display: block; width: 100%; height: auto; object-fit: cover; }
.pt-article__photo:empty {
  height: clamp(240px, 32vw, 420px);
  background: linear-gradient(135deg, color-mix(in srgb, var(--azure-500) 28%, var(--neutral-100)), color-mix(in srgb, var(--azure-500) 10%, var(--neutral-50)));
}

/* Long-form reading body + drop cap */
.pt-prose {
  font-family: var(--font-article);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}
.pt-prose p { margin-bottom: 1.4em; text-wrap: pretty; }
/* No drop cap when the article opens with a link or an image (legacy posts
   often start with a nav-style link row or a lead image). */
.pt-prose > p:first-of-type:not(:has(> a:first-child, img))::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: 0.82;
  padding: 6px 12px 0 0;
  color: var(--text-accent);
}
.pt-prose a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }
/* Subheads inside an article use the sans; only the post title keeps the
   Playfair display face. */
.pt-prose :is(h2, h3, h4, h5, h6) {
  font-family: var(--font-sans);
  line-height: 1.2;
  letter-spacing: 0;
}

/* ---------- Legacy content (migrated pre-2026 articles) ------ */
/* Classic-editor alignment classes — WP emits them but block themes ship no
   CSS for them, so migrated images sat wherever the text flow dropped them. */
.pt-prose img { max-width: 100%; height: auto; }
.pt-prose .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.pt-prose .alignleft { float: left; margin: 4px 24px 12px 0; }
.pt-prose .alignright { float: right; margin: 4px 0 12px 24px; }
.pt-prose .alignnone { display: block; margin: 0 auto 12px; }
.pt-prose .wp-caption { max-width: 100%; margin: 0 auto 24px; text-align: center; }
.pt-prose .wp-caption-text {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 8px;
}
/* Meks shortcode grids (speaker/article card layouts on the old site, built
   for its 1160px desktop viewport). Recreate as a flex grid that stacks on
   narrow screens; cells centre their imagery via .aligncenter above. */
.pt-prose .mks_col {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  justify-content: center;
  margin-bottom: 1.4em;
}
.pt-prose .mks_col::before,
.pt-prose .mks_col::after { display: none; } /* plugin clearfix pseudos */
.pt-prose .mks_one_half { flex: 1 1 calc(50% - 16px); min-width: 260px; }
.pt-prose .mks_one_third { flex: 1 1 calc(33.33% - 22px); min-width: 200px; }
.pt-prose .mks_two_third { flex: 2 1 calc(66.66% - 16px); min-width: 260px; }
.pt-prose .mks_one_quarter { flex: 1 1 calc(25% - 24px); min-width: 180px; }
/* The old separator shortcode carries an inline border with no colour (falls
   back to text colour — too heavy); soften it and give it breathing room. */
.pt-prose .mks_separator {
  margin: 32px 0;
  border-bottom-color: var(--border-default) !important;
}

.pt-authorbox {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 24px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.pt-authorbox .wp-block-avatar img { border-radius: 50%; }
.pt-authorbox .pt-authorbox__name { font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--text-strong); }
.pt-authorbox .pt-authorbox__role { font-family: var(--font-sans); font-size: 14px; color: var(--text-muted); }

/* ---------- Archive / Author hero bands --------------------- */
.pt-band {
  /* --band-accent is set per category on the body (below); azure is the default. */
  background: linear-gradient(180deg, color-mix(in srgb, var(--band-accent, var(--azure-500)) 16%, var(--surface-page)), var(--surface-page));
  border-bottom: 1px solid var(--border-subtle);
}
.pt-band .pt-kicker { color: var(--band-accent, var(--text-accent)); }

/* ALL topic archives share one neutral treatment: the plain page background,
   no per-category colour — deliberately not a per-slug list, which rotted once
   already when Leadership/Conference were added after the fact. The All-articles
   page is part of the same browse set, so it matches. PeopleTalking /
   Magazine / Newsletters keep their own look via their page templates. */
body[class*="category-"] .pt-band,
body.page-template-page-articles .pt-band {
  background: var(--surface-page);
}

/* Highlight the current topic in the archive chip row (unified navy). The
   pattern marks the active pill itself (patterns/category-pills.php) — this
   used to be a per-category body-class list that silently rotted. */
.pt-chips a.is-current {
  background: var(--navy-600);
  border-color: var(--navy-600);
  color: #fff;
  opacity: 1;
}
.pt-band--card { background: var(--surface-card); }
.pt-band h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 14px 0;
}
/* PeopleTalking wordmark (navy on transparent) replaces the heading text where
   the column is titled. The image height is tuned per context so the mark sits
   at the same optical size as the heading it replaces (its cap height is ~65%
   of the image box — the script "g" descends). */
.pt-peopletalking-logo img { display: block; width: auto; max-width: 100%; }
/* Landing-page hero band: H1 scale */
.pt-band .pt-peopletalking-logo { margin: 14px 0; }
.pt-band .pt-peopletalking-logo img { height: clamp(42px, 5.4vw, 66px); }
/* Homepage section head: H2 scale */
.pt-sectionhead .pt-peopletalking-logo { margin: 8px 0 0; }
.pt-sectionhead .pt-peopletalking-logo img { height: clamp(28px, 3vw, 38px); }
.pt-band .pt-band__lead {
  font-family: var(--font-sans);
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.5;
  color: var(--text-body);
  margin: 0;
  max-width: 680px;
}
.pt-band .pt-band__count { font-family: var(--font-mono); font-weight: 500; font-size: 14px; color: var(--text-muted); margin-top: 18px; }

/* Left-aligned page lead paragraph (matches the Magazine band lead treatment) */
.pt-page-lead { max-width: 760px; margin-inline: 0; }

/* Topic / region chips */
.pt-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.pt-chips a, .pt-chips .pt-chip {
  font-family: var(--font-mono); font-weight: 600; font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 14px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-default);
  background: transparent; color: var(--text-body);
  text-decoration: none; white-space: nowrap;
  transition: all var(--duration-fast);
}
.pt-chips a:hover, .pt-chips .pt-chip:hover { border-color: var(--azure-600); color: var(--azure-600); }
.pt-chips .is-current { background: var(--navy-600); border-color: var(--navy-600); color: #fff; }

/* ---------- Search results ---------------------------------- */
.pt-results .pt-cards { display: block; }
.pt-results .pt-cards > li.wp-block-post {
  flex-direction: row;
  gap: 20px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  padding: 24px 0;
  overflow: visible;
  align-items: flex-start;
}
.pt-results .pt-cards > li.wp-block-post:hover { box-shadow: none; transform: none; }
.pt-results .wp-block-post-featured-image { width: 200px; flex: 0 0 auto; }
.pt-results .wp-block-post-featured-image img,
.pt-results .wp-block-post-featured-image a { aspect-ratio: 16 / 10; border-radius: var(--radius-md); }
.pt-results .pt-card__body { padding: 0; }
.pt-results .wp-block-post-title { font-size: 22px; line-height: 1.15; }
.pt-results .wp-block-post-excerpt { display: block; max-width: 640px; font-size: 15.5px; }

/* ---------- Newsletters archive grid ------------------------ */
.pt-nl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pt-nl-issue {
  display: flex; flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--azure-500);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 20px 22px 22px;
  gap: 12px;
  text-decoration: none;
  color: var(--text-strong);
  transition: box-shadow var(--duration-base), transform var(--duration-base);
}
.pt-nl-issue:is(:hover, :focus-visible) { border-color: var(--cphr-mid-blue); box-shadow: 0 0 0 1px var(--cphr-mid-blue), var(--shadow-lg); transform: translateY(-3px); }
.pt-nl-issue:is(:hover, :focus-visible) .pt-nl-issue__title { color: var(--text-brand); text-decoration: underline 2px; text-underline-offset: 3px; }
.pt-nl-issue .pt-nl-issue__region { display: inline-flex; align-items: center; font-family: var(--font-mono); font-weight: 600; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--azure-600); }
.pt-nl-issue .pt-nl-issue__title { font-family: var(--font-sans); font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; }
.pt-nl-issue p { font-family: var(--font-sans); font-size: 14.5px; line-height: 1.5; color: var(--text-muted); margin: 0; }
.pt-nl-empty { font-family: var(--font-sans); font-size: 15.5px; color: var(--text-muted); padding: 8px 0; }

/* Newsletter archive pagination — reuses the .page-numbers look. */
.pt-pagination { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: clamp(36px, 5vw, 56px); }
.pt-pagination .page-numbers {
  min-width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid var(--border-default);
  font-family: var(--font-mono); font-size: 14px; font-weight: 600;
  color: var(--text-body);
  text-decoration: none;
  transition: border-color var(--duration-base), color var(--duration-base);
}
.pt-pagination a.page-numbers:hover { border-color: var(--azure-600); color: var(--azure-600); }
.pt-pagination .page-numbers.current { background: var(--navy-600); border-color: var(--navy-600); color: #fff; }
.pt-pagination .page-numbers.dots { border: 0; }

/* ---------- Magazine page ----------------------------------- */
.pt-mag-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.5vw, 32px); }
.pt-mag-tile { text-decoration: none; color: var(--text-strong); display: flex; flex-direction: column; gap: 14px; }
.pt-mag-tile .pt-mag-cover { width: 100%; }
.pt-mag-tile .pt-mag-tile__theme { font-family: var(--font-sans); font-weight: 600; font-size: 16px; line-height: 1.25; }
.pt-mag-tile:is(:hover, :focus-visible) .pt-mag-tile__theme { color: var(--text-brand); text-decoration: underline 2px; text-underline-offset: 3px; }
.pt-mag-tile .pt-mag-cover { transition: box-shadow var(--duration-base); }
.pt-mag-tile:is(:hover, :focus-visible) .pt-mag-cover { box-shadow: 0 0 0 2px var(--cphr-mid-blue), var(--shadow-lg); }
.pt-mag-tile .pt-mag-tile__season { font-family: var(--font-mono); font-weight: 500; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); }

.pt-offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.5vw, 28px); }
.pt-offer {
  border-radius: var(--radius-xl);
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  display: flex; flex-direction: column;
}
.pt-offer--filled { background: var(--azure-600); color: #fff; border: 0; }
.pt-offer--filled h3 { color: #fff; }
.pt-offer ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pt-offer li { display: flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: 14.5px; }

/* ---------- Pagination -------------------------------------- */
.wp-block-query-pagination { gap: 8px; align-items: center; justify-content: center; margin-top: clamp(36px, 5vw, 56px); }
.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers {
  min-width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--border-default);
  font-family: var(--font-mono); font-size: 14px; font-weight: 600;
  color: var(--text-body);
  text-decoration: none;
}
.wp-block-query-pagination .page-numbers.current {
  background: var(--navy-600); border-color: var(--navy-600); color: #fff;
}

/* ---------- Group block styles ------------------------------ */
.wp-block-group.is-style-pt-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 3.5vw, 48px);
}
.wp-block-group.is-style-pt-rail-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
}

/* Navy-tinted hero band variant (PeopleTalking, Magazine) */
.pt-band--navy {
  background: linear-gradient(180deg, color-mix(in srgb, var(--navy-600) 14%, var(--surface-page)), var(--surface-page));
}

/* PeopleTalking pillars */
.pt-pillar {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--navy-600);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.4vw, 28px);
  height: 100%;
}
.pt-pillar .pt-pillar__label {
  font-family: var(--font-mono); font-weight: 600; font-size: 14px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy-600);
  margin: 0 0 12px;
}
.pt-pillar p { font-family: var(--font-sans); font-size: 15.5px; line-height: 1.55; color: var(--text-muted); margin: 0; }

/* Magazine current-issue feature */
.pt-mag-feature { gap: clamp(28px, 4vw, 56px); }
/* The text column carries WP's `selfStretch:fill` class, but the matching
   layout rule is never emitted for lazily-rendered theme patterns — so the
   column had no flex-grow and its max-content width wrapped it under the
   cover. Pin the behaviour here rather than depending on that CSS. */
.pt-mag-feature > .wp-block-group { flex: 1 1 320px; min-width: 0; }

/* Offer panels: pin CTA to the bottom-left */
.pt-offer .wp-block-button__link,
.pt-offer > a.wp-block-button__link { align-self: flex-start; margin-top: auto; }
.pt-offer .pt-btn-ondark { background: var(--cphr-dark-blue); color: #fff; border: 1.5px solid var(--cphr-dark-blue); }
.pt-offer .pt-btn-ondark:is(:hover, :focus-visible) { background: #fff; color: var(--cphr-dark-blue); border-color: #fff; }
.pt-offer .pt-btn-outline { background: transparent; color: var(--text-strong); border: 1.5px solid var(--border-default); }
.pt-offer--filled li { color: rgba(255,255,255,0.95); }

/* Newsletters subscribe nudge */
.pt-nl-nudge {
  border-radius: var(--radius-xl);
  border: 1px dashed var(--border-default);
  background: var(--surface-card);
  padding: clamp(24px, 3vw, 36px);
}
.pt-nl-nudge h3 { margin: 0 0 6px; font-size: clamp(20px, 2vw, 26px); }
.pt-nl-nudge p { margin: 0; }

/* ---------- Header search ----------------------------------- */
/* Rebuilt as an icon toggle + a full-width dropdown panel (see the markup in
   parts/header.html). The panel is its own absolutely-positioned layer under
   the bar, so — unlike core's inline expandable search — it can never push or
   overlap the nav/logo. JS toggle lives in assets/js/site.js. */
.pt-search { display: flex; align-items: center; }
.pt-search__toggle {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border-default);
  background: transparent;
  color: var(--text-body);
  padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color var(--duration-base), color var(--duration-base), background var(--duration-base);
}
.pt-search__toggle:is(:hover, :focus-visible):not([aria-expanded="true"]) { background: var(--cphr-bleu-clair); border-color: var(--cphr-mid-blue); color: var(--cphr-mid-blue); }
.pt-search__toggle[aria-expanded="true"] {
  background: var(--navy-600); border-color: var(--navy-600); color: #fff;
}

/* The dropdown panel: a full-width band pinned to the bottom of the header,
   out of the flex flow entirely. Collapsed by the [hidden] attribute; JS
   removes it and adds .is-open to animate in. */
.pt-search__panel {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  z-index: var(--z-header);
  padding: clamp(14px, 2vw, 22px) 0;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.pt-search__panel[hidden] { display: none; }
.pt-search__panel.is-open { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .pt-search__panel { transition: none; transform: none; }
  .pt-cards > li.wp-block-post:hover, .pt-cards > li.wp-block-post:focus-within, .pt-nl-issue:hover,
  .wp-block-button__link:is(:hover, :focus-visible) .pt-btn-arrow { transform: none; }
}
.pt-search__form {
  display: flex; align-items: center; gap: 10px;
  width: min(var(--container-max), 100% - 2 * var(--gutter));
  margin-inline: auto;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  padding: 5px 5px 5px 18px;
}
.pt-search__form:focus-within { border-color: var(--azure-600); }
.pt-search__form-icon { color: var(--text-subtle); flex: 0 0 auto; }
.pt-search__input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent;
  font-family: var(--font-sans); font-size: 16px;
  color: var(--text-strong); padding: 10px 0;
}
.pt-search__input:focus { outline: none; }
.pt-search__submit {
  flex: 0 0 auto;
  border: 0; border-radius: var(--radius-pill);
  background: var(--action-bg); color: #fff;
  font-family: var(--font-sans); font-weight: 600; font-size: 15px;
  padding: 10px 22px; height: 42px; cursor: pointer;
  transition: background var(--duration-base);
}
.pt-search__submit:hover { background: var(--action-bg-hover); }

/* Main search field (search + 404 templates) */
.pt-search-main .wp-block-search__inside-wrapper {
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  padding: 4px 4px 4px 20px;
  max-width: 640px;
}
.pt-search-main.aligncenter .wp-block-search__inside-wrapper { margin-inline: auto; }
.pt-search-main .wp-block-search__input {
  border: 0; background: transparent;
  font-family: var(--font-sans); font-size: 16px;
  color: var(--text-strong);
}
.pt-search-main .wp-block-search__input:focus { outline: none; }
.pt-search-main .wp-block-search__button {
  border-radius: var(--radius-pill);
  background: var(--action-bg); color: #fff; border: 0;
  height: 46px; min-width: 46px;
}
.pt-search-main .wp-block-search__button:hover { background: var(--action-bg-hover); }
.pt-search-main .wp-block-search__button svg { fill: currentColor; }

/* ---------- Inline SVG icon sizing -------------------------- */
.pt-icon { display: inline-flex; flex: 0 0 auto; }
.pt-icon svg { stroke: currentColor; }

/* ---------- Mobile navigation ------------------------------- */
/* The long primary nav collapses to a hamburger + full-screen overlay below
   1240px. WordPress's `overlayMenu:"mobile"` only supplies the fixed overlay
   panel styling at ≤600px, so we reproduce that panel here for the whole
   ≤1240px range — otherwise the "overlay" is just the vertical menu dumped
   inline. The interactive open/close (is-menu-open) is not width-gated, so
   extending the CSS is all that's needed. */
@media (min-width: 1241px) {
  .pt-header .wp-block-navigation__responsive-container-open { display: none; }
  /* The secondary (About) group only exists in the mobile overlay — on desktop
     those destinations live in the footer. */
  .pt-header .wp-block-navigation-item.pt-nav-secondary { display: none; }
}
@media (max-width: 1240px) {
  /* Cluster the actions + hamburger on the right, logo alone on the left,
     and put the hamburger last so it sits at the far right edge.

     The bar's own `space-between` would strand the search button in the middle
     of the bar once the nav collapses (only two items left to space out), so
     switch to flex-start and let the brandlock's auto margin do the pushing —
     that keeps search and hamburger together as one right-hand cluster. */
  .pt-header .pt-header__bar { justify-content: flex-start; gap: 10px; }
  .pt-header .pt-brandlock,
  .pt-header .pt-logo { margin-right: auto; }
  .pt-header .pt-header__actions { order: 2; }
  .pt-header .pt-nav { order: 3; flex: 0 0 auto; }

  .pt-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  /* Hide the inline menu row until the overlay is opened. */
  .pt-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }

  /* On mobile the header bar is tight (logo + hamburger), so the search icon
     is dropped from the bar; JS relocates the search form to the top of the
     opened menu instead (see initSearch in site.js). */
  .pt-header .pt-search { display: none; }
  /* The relocated form becomes the menu's header row: it sits tight to the top
     with the close (×) button to its right — same visual row, no dead band. */
  .wp-block-navigation__responsive-container.is-menu-open .pt-search__form {
    display: flex;
    /* Sized empirically against the × button's measured position — the content
       box here is wider than the overlay's padding suggests (core quirk). */
    width: calc(100% - 108px);
    margin: 0 0 clamp(22px, 5vw, 32px);
  }

  /* Opened: a proper full-screen panel. `.is-scrolled` puts a backdrop-filter
     on the header, which would otherwise make it the containing block for this
     fixed overlay (breaking it when the menu is opened after scrolling) — drop
     that filter while the menu is open. */
  .pt-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .pt-header .wp-block-navigation__responsive-container.is-menu-open {
    /* Pin to the viewport with explicit longhands. Core already sets
       position:fixed + inset:0 here; we re-assert it and, crucially, give it an
       OPAQUE background — core's own rule uses `background-color: inherit`,
       which is transparent unless the nav has a colour, so the page bleeds
       through. z-index matches core's 100000 so nothing sits above it. */
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    background: var(--neutral-0) !important;
    /* Top padding is small: the search row IS the top of the panel. */
    padding: 18px clamp(24px, 7vw, 56px) 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .pt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    width: 100%;
    /* Core adds its own clamp() top padding here, which stacked with the
       overlay's and produced a dead white band above the close button. */
    padding-top: 0 !important;
  }
  /* Left-align the stacked list (override the desktop `justify-content:center`). */
  .pt-header .is-menu-open .wp-block-navigation,
  .pt-header .is-menu-open .wp-block-navigation__responsive-container-content,
  .pt-header .is-menu-open .wp-block-navigation__container {
    justify-content: flex-start;
    align-items: stretch;
    text-align: left;
  }

  /* Close (×) button, top-right — vertically centred on the search row.
     `top` is measured from the dialog (which starts at the overlay's padding
     edge), so a small value here lands it level with the search field. */
  .pt-header .wp-block-navigation__responsive-container-close {
    position: absolute;
    top: 4px;
    right: clamp(16px, 6vw, 40px);
    background: transparent;
    border: 0;
    padding: 8px;
    color: var(--text-strong);
    cursor: pointer;
  }
  .pt-header .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; fill: currentColor; }

  /* Stack the links as large, full-width, left-aligned tap targets. Core makes
     both the <ul> and each <li> flex columns with `align-items:center`, which
     centres the links — force left and stretch the link to fill the row. */
  .pt-header .is-menu-open .wp-block-navigation__container,
  .pt-header .is-menu-open .wp-block-navigation-item {
    flex-direction: column;
    align-items: flex-start !important;
    /* !important: core's ≤600px rules put a block-gap-driven 24px row-gap on
       the list, which stacked on every row (worst on the secondary group).
       Row spacing comes from the links' own padding + borders instead. */
    gap: 0 !important;
  }
  .pt-header .is-menu-open .wp-block-navigation-item { width: 100%; }
  /* The container-content class is needed for specificity: core zeroes link
     padding via a 4-class selector (`.responsive-container.is-menu-open
     .responsive-container-content .navigation-item__content { padding:0 }`),
     which silently beat the old 3-class version of this rule — the row rhythm
     everyone saw was actually the list's 24px gap, not this padding. */
  .pt-header .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
    width: 100%;
    align-self: stretch;
    font-size: 21px;
    font-weight: 600;
    color: var(--text-strong);
    /* With the list's row-gap zeroed (see above), ALL of the primary rows'
       rhythm comes from this padding — don't thin it. Submenu (11px) and
       secondary (10px) rows override it below. */
    padding: 16px 0;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0;
  }
  .pt-header .is-menu-open .wp-block-navigation-item__content:hover { color: var(--text-brand); }

  /* Secondary group (mirrors the footer About column; items carry
     .pt-nav-secondary). Smaller, lighter rows so it reads as a distinct tier
     below the primary menu, introduced by an "About" eyebrow on the first. */
  .pt-header .is-menu-open .wp-block-navigation-item.pt-nav-secondary .wp-block-navigation-item__content {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-muted);
    padding: 10px 0;
    border-bottom: 0;
  }
  .pt-header .is-menu-open .wp-block-navigation-item:not(.pt-nav-secondary) + .wp-block-navigation-item.pt-nav-secondary {
    margin-top: 30px;
  }
  .pt-header .is-menu-open .wp-block-navigation-item:not(.pt-nav-secondary) + .wp-block-navigation-item.pt-nav-secondary::before {
    content: "About";
    display: block;
    width: 100%;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-accent);
    padding-bottom: 6px;
  }

  /* Expand the Topics submenu inline and indent it. Between 600–1240px core's
     desktop flyout CSS is still active (its mobile submenu rules gate at ≤600),
     so these need !important to unstick the absolutely-positioned dropdown and
     render it as a static, full-width, left-aligned list. */
  .pt-header .is-menu-open .wp-block-navigation__submenu-icon { display: none; }
  .pt-header .is-menu-open .wp-block-navigation__submenu-container {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    min-width: 0 !important;
    inset: auto !important;
    transform: none !important;
    align-items: flex-start !important;
    margin: 0;
    padding: 4px 0 8px 18px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .pt-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-body);
    padding: 11px 0;
    border-bottom: 0;
  }
  /* The "Topics" parent is a non-navigating group label (url:#). */
  .pt-header .is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content {
    cursor: default;
  }

  /* Keep the header bar tidy on the smallest screens. */
  .pt-header .pt-header__bar { gap: 10px; }
}

/* ---------- Responsive -------------------------------------- */
@media (max-width: 1080px) {
  .pt-latest-grid .pt-cards { grid-template-columns: repeat(2, 1fr); }
  .pt-mag-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .pt-offer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .pt-two-col { grid-template-columns: 1fr; }
  .pt-related-grid .pt-cards,
  .pt-related-grid > .wp-block-post-template { grid-template-columns: 1fr; }
  .pt-nl-grid { grid-template-columns: 1fr; }
  .pt-mag-grid { grid-template-columns: repeat(2, 1fr); }
  .pt-results .wp-block-post-featured-image { width: 140px; }
}
@media (max-width: 560px) {
  .pt-latest-grid .pt-cards { grid-template-columns: 1fr; }
  .pt-mag-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .pt-results .wp-block-post-featured-image { display: none; }
  .pt-hero__stage { min-height: 380px; }
}