/* ============================================================================
   ComicsPRO — WordPress glue
   Everything here exists only so core blocks can wear the mockup's .cp-*
   classes. Visual truth stays in tokens/base/components/layout.css, which are
   verbatim copies of the mockup. Keep this file small; if a rule here is
   re-describing a .cp-* component, the markup is wrong, not the CSS.
   ============================================================================ */

/* ---- Neutralise block-layout defaults ------------------------------------ */
figure { margin: 0; }
.wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.wp-block-post-template > li { margin: 0; }
.wp-block-group.cp-wrap { box-sizing: border-box; }

/* ---- Header -------------------------------------------------------------- */
.cp-header .wp-block-site-logo a { display: inline-flex; }
/* Specificity guard: core's .wp-block-navigation layout CSS would otherwise win over .cp-nav. */
nav.cp-nav.wp-block-navigation { display: flex; gap: var(--space-1); flex-wrap: nowrap; }
.cp-nav .wp-block-navigation__container,
.cp-nav .wp-block-navigation-item:not(.has-child) { display: contents; }
.cp-nav .wp-block-navigation-item__content { color: var(--cp-ink); }
.cp-nav--members .wp-block-navigation-item__content { color: var(--cp-ink-50); }
.cp-header.is-open .cp-nav.wp-block-navigation { flex-direction: column; }

/* Submenu (e.g. members "Resources"): the parent keeps a real box so the
   dropdown can anchor to it; core's block CSS handles open-on-hover/focus.
   margin:0 beats the global li margin-bottom, which would otherwise lift the
   centered label above its siblings; the trimmed anchor padding plus zeroed
   icon margin keep the chevron snug against the label. */
.cp-nav .wp-block-navigation-item.has-child { position: relative; display: inline-flex; align-items: center; margin: 0; }
.cp-nav .has-child > .wp-block-navigation-item__content { padding-right: 4px; }
.cp-nav .wp-block-navigation__submenu-icon { color: inherit; margin-left: 0; }
.cp-nav .wp-block-navigation__submenu-container {
  background: var(--cp-white);
  border: var(--stroke-hair) solid var(--border-ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop-sm);
  padding: var(--space-2);
  min-width: 220px;
  z-index: 30;
  left: 8px; /* under the label, not the item box (whose padding starts 14px earlier) */
}
.cp-nav .wp-block-navigation__submenu-container .wp-block-navigation-item { display: block; margin: 0; }
.cp-nav .wp-block-navigation__submenu-container a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}
.cp-nav .wp-block-navigation__submenu-container a:hover { background: var(--cp-cyan-tint); color: var(--cp-ink); }
/* Open mobile menu: the dropdown flows inline, indented under its parent. */
.cp-header.is-open .cp-nav .wp-block-navigation-item.has-child { display: block; }
.cp-header.is-open .cp-nav .wp-block-navigation__submenu-container {
  position: static; visibility: visible; opacity: 1; min-width: 0;
  border: 0; box-shadow: none; padding: 0 0 0 var(--space-4);
}

/* Utility-bar "Member Login" is a core/button bound to Site Settings; it
   renders as the mockup's plain cyan link, not a pill. */
.cp-utility__right .wp-block-button__link {
  background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0;
  color: var(--cp-cyan); font-weight: var(--fw-bold); font-size: inherit; line-height: inherit;
  display: inline-flex; align-items: center; gap: 6px;
}
.cp-utility__right .wp-block-button__link:hover { color: var(--cp-cyan-tint); transform: none; }
.cp-utility__right .wp-block-button__link::before {
  content: ""; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' x2='3' y1='12' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' x2='3' y1='12' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Buttons ------------------------------------------------------------- */
.wp-block-buttons.cp-hero__actions { gap: var(--space-4); }
.wp-block-button.is-style-cp-block { width: 100%; }
.cp-btn--arrow::after {
  content: ""; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.is-style-cp-lead { font-size: var(--fs-body-lg); }
.cp-hero__copy > .cp-tag { margin-bottom: var(--space-5); }
.cp-stat p { margin: 0; }
.cp-badge p { margin: 0; }
.cp-meetfeature__fact p { margin: 0; }

/* ---- Check lists: the mockup's inline <svg> check becomes a CSS mask ----- */
.cp-mcard__list li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Images -------------------------------------------------------------- */
.wp-block-image.cp-frame { margin: 0; }
.wp-block-image.cp-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Post cards (news query loop) --------------------------------------- */
.cp-pull { position: relative; }
.cp-pull .wp-block-post-title a,
.cp-member__name a { color: inherit; text-decoration: none; }
.cp-pull .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.cp-pull .wp-block-post-excerpt__more-text { display: none; }
/* Post-terms rendered as a .cp-tag pill (news cards, post/resource headers):
   the link inside must take the pill's ink colour, not the section's link colour. */
.wp-block-post-terms.cp-tag a { color: inherit; text-decoration: none; }
.cp-pull .wp-block-post-date { font-size: var(--fs-caption); }

/* ---- Board grid: the vacancy card and the query loop share one grid ------ */
.cp-board-grid > .wp-block-query,
.cp-board-grid .wp-block-post-template { display: contents; }
.cp-member__photo.wp-block-post-featured-image { margin: 0; }

/* ---- News filters: core/categories rendered as .cp-tag pills ------------ */
.cp-filters .wp-block-categories,
.cp-filters .wp-block-categories li { display: contents; }
.cp-filters .current-cat > a { background: var(--cp-cyan); color: var(--cp-ink); }
.cp-filters .wp-block-categories-list { margin: 0; padding: 0; }

/* ---- FAQ: core/details inside .cp-faq ----------------------------------- */
.cp-faq .wp-block-details > :not(summary) { padding-inline: var(--space-5); font-size: var(--fs-body-sm); }
.cp-faq .wp-block-details > :last-child:not(summary) { padding-bottom: var(--space-5); margin-bottom: 0; }

/* ---- Footer: navigation blocks + social links --------------------------- */
.cp-footer .wp-block-navigation { font-size: var(--fs-body-sm); }
.cp-footer .wp-block-navigation__container { gap: var(--space-2); }
.cp-footer .wp-block-navigation-item__content:hover { color: var(--cp-cyan); text-decoration: underline; }
.cp-colophon .wp-block-navigation__container,
.cp-colophon .wp-block-navigation-item { display: contents; }
/* The Image block wraps the footer logo in a <figure>, so the mockup's
   `.cp-footer img.cp-footer__logo` rule never matches; and Social Links is a
   <ul>, so it also matches `.cp-footer ul { flex-direction: column }`. */
.cp-footer .wp-block-image.cp-footer__logo { margin: 0 0 var(--space-4); }
.cp-footer .wp-block-image.cp-footer__logo img { height: 52px; width: auto; }
.cp-footer ul.wp-block-social-links.cp-social { flex-direction: row; gap: var(--space-2); margin-top: var(--space-5); }
.cp-footer .cp-social .wp-social-link {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: none; color: var(--cp-white);
  border: var(--stroke-hair) solid var(--cp-white); border-radius: var(--radius-sm);
  transition: background var(--dur) ease, color var(--dur) ease, transform var(--dur-fast) var(--ease-pop);
}
.cp-footer .cp-social .wp-social-link a { padding: 0; width: 100%; height: 100%; display: grid; place-items: center; color: inherit; }
.cp-footer .cp-social .wp-social-link svg { width: 19px; height: 19px; }
.cp-footer .cp-social .wp-social-link:hover { background: var(--cp-cyan); color: var(--cp-ink); border-color: var(--cp-ink); transform: translate(-1px, -1px); }

/* ---- Board member bio page + clickable member cards --------------------- */
.cp-member { position: relative; transition: transform var(--dur) var(--ease-pop), box-shadow var(--dur) var(--ease-pop); }
.cp-member:has(.cp-member__name a):hover { transform: var(--lift); box-shadow: var(--shadow-pop-lg); }
.cp-member__name a::after { content: ""; position: absolute; inset: 0; }
.cp-phead .cp-tag { margin-bottom: var(--space-3); }
.cp-phead > .cp-wrap > p:last-child { margin: var(--space-2) 0 0; color: var(--cp-gray-light); }
.cp-bio__photo.wp-block-post-featured-image { margin: 0 0 var(--space-6); max-width: 360px; }
.cp-bio__photo img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; }
.cp-bio__shop .cp-h-sm { margin-bottom: var(--space-2); }
.cp-bio__shop .wp-block-buttons { margin-top: var(--space-4); }
.cp-bio > .wp-block-post-content > p:first-child { font-size: var(--fs-body-lg); }
.cp-member-nav { border-top: var(--stroke-hair) solid var(--border-soft); padding-top: var(--space-5); }
.cp-member-nav .wp-block-post-navigation-link { font-weight: var(--fw-bold); }
.cp-member-nav .post-navigation-link-next { margin-left: auto; text-align: right; }
.cp-member-nav .wp-block-post-navigation-link a { text-decoration: none; }
.cp-member-nav .wp-block-post-navigation-link a:hover { text-decoration: underline; }

/* ---- Page header / single post ------------------------------------------ */
.cp-phead .wp-block-post-title { margin-bottom: var(--space-3); }
.cp-phead .wp-block-post-date { font-size: var(--fs-caption); color: var(--cp-gray-light); }
.cp-post-nav { display: flex; justify-content: space-between; gap: var(--space-5); margin-top: var(--space-8); }

/* ---- Pagination ---------------------------------------------------------- */
.cp-pagination { display: flex; gap: var(--space-3); align-items: center; justify-content: center; margin-top: var(--space-7); }
.cp-pagination a, .cp-pagination .page-numbers { font-weight: var(--fw-bold); }

/* ---- Search block (404 + search results; the mockup has no search UI) --- */
.cp-search .wp-block-search__inside-wrapper { display: flex; gap: var(--space-3); align-items: stretch; }
.cp-search .wp-block-search__input.cp-input { flex: 1; margin: 0; }
.cp-search .wp-block-search__button.cp-btn { margin: 0; }
.cp-phead .cp-search { max-width: 560px; margin-top: var(--space-5); }

/* ---- Quote card: photo beside a pull-quote ------------------------------- */
.cp-quote { display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-7); /* the mockup's inline margin on the blockquote (conference.html:129) */ }
.cp-quote__photo { width: 96px; height: 96px; flex: none; }
.cp-quote__photo img { width: 96px; height: 96px; object-fit: cover; object-position: top; border-radius: 50%; border: var(--stroke-hair) solid var(--border-ink); }
.cp-quote > .wp-block-group { flex: 1; min-width: 24ch; }
.cp-quote p:last-child { margin: 0; }