/*
 * PBK — theme blocks used on the front page: rhythm and high contrast.
 *
 * Rationale (see the patch note):
 * 1. Section spacing is owned exclusively by the front page container
 *    (.pbk-front-page-content and its gap).
 * 2. Internal rhythm of a component is owned by its own gap. Headings,
 *    paragraphs, lists and action containers generated by the block render
 *    receive margin-block: 0 only inside that component. Intentional,
 *    asymmetric offsets present in the original design are re-expressed
 *    explicitly instead of relying on utility classes that the shared
 *    content baseline (content-base.css) currently outranks.
 * 3. Technical lists (ul/li grids) are reset; editorial lists are untouched.
 * 4. Selectors are limited to concrete .wp-block-pbk-* / component scopes,
 *    with low specificity via :where(). No global resets, no !important.
 * 5. Editor-selected spacing on the outer block wrapper (inline styles and
 *    preset classes) is not touched and stays authoritative.
 *
 * The same file is loaded on the front end and registered as an editor
 * style, so the editor canvas and the front end stay in sync. The high
 * contrast section is scoped to html[data-pbk-color-mode="high-contrast"]
 * and is inert inside the editor.
 */

/* ------------------------------------------------------------------ */
/* Home hero                                                           */
/* ------------------------------------------------------------------ */

.pbk-home-hero :where(
  .pbk-home-hero__eyebrow,
  .pbk-home-hero__title,
  .pbk-home-hero__lead,
  .pbk-home-hero__actions
) {
  margin-block: 0;
}

/* Restore the component colour taken over by the shared heading rule. */
.pbk-home-hero :where(.pbk-home-hero__title) {
  color: var(--pbk-color-text, #0f172a);
}

.pbk-home-hero :where(.pbk-home-hero__lead) {
  color: var(--pbk-color-text-muted, #475569);
}

/* ------------------------------------------------------------------ */
/* Section intro (also used by the FAQ section)                        */
/* ------------------------------------------------------------------ */

.pbk-section-intro :where(
  .pbk-section-intro__eyebrow,
  .pbk-section-intro__title,
  .pbk-section-intro__lead
) {
  margin-block: 0;
}

.pbk-section-intro :where(.pbk-section-intro__title) {
  color: var(--pbk-color-text, #0f172a);
}

/* ------------------------------------------------------------------ */
/* Page pathways                                                       */
/* ------------------------------------------------------------------ */

/* Technical grid list: the layout is owned by grid + gap only. */
.pbk-page-pathways :where(.pbk-page-pathways__grid) {
  margin-block: 0;
  padding-inline-start: 0;
  list-style: none;
}

.pbk-page-pathways :where(.pbk-page-pathways__item) {
  margin-block: 0;
}

.pbk-page-pathways :where(.pbk-page-pathways__title) {
  margin-block: 0;
  color: var(--pbk-color-on-dark, #fff);
}

/* Intentional asymmetric offset between title and excerpt (originally mt-2). */
.pbk-page-pathways :where(.pbk-page-pathways__excerpt) {
  margin-block: 0.5rem 0;
}

/* ------------------------------------------------------------------ */
/* Studies rail (block wrapper and template-rendered rail)             */
/* ------------------------------------------------------------------ */

.pbk-studies-rail :where(.kt-card-content) :where(h2, h3) {
  margin-block: 0;
}

/* EUCT metadata line directly under the title (originally mt-2). */
.pbk-studies-rail :where(.kt-card-content) :where(h2 + p) {
  margin-block: 0.5rem 0;
}

/* Technical metadata list (originally m-0 mt-6 list-none p-0). */
.pbk-studies-rail :where(.kt-card-content) > :where(ul) {
  margin-block: 1.5rem 0;
  padding-inline-start: 0;
  list-style: none;
}

.pbk-studies-rail :where(.kt-card-content) :where(li) {
  margin-block: 0;
}

/* Card lead paragraph (originally m-0 mt-6, direct child of the card body). */
.pbk-studies-rail :where(.kt-card-content) > :where(p) {
  margin-block: 1.5rem 0;
}

/* ------------------------------------------------------------------ */
/* Cards with media / icon feature card                                */
/* ------------------------------------------------------------------ */

.pbk-icon-feature-card :where(
  .pbk-icon-feature-card__title,
  .pbk-icon-feature-card__text
) {
  margin-block: 0;
}

.pbk-icon-feature-card :where(.pbk-icon-feature-card__title) {
  color: var(--pbk-color-text, #0f172a);
}

/* ------------------------------------------------------------------ */
/* Latest posts                                                        */
/* ------------------------------------------------------------------ */

.pbk-latest-posts :where(article h3) {
  margin-block: 0;
}

/* Technical category chip list (originally mb-3, unstyled). */
.pbk-latest-posts :where(article ul) {
  margin-block: 0 0.75rem;
  padding-inline-start: 0;
  list-style: none;
}

.pbk-latest-posts :where(article li) {
  margin-block: 0;
}

/* Date line (originally mt-3). */
.pbk-latest-posts :where(article p) {
  margin-block: 0.75rem 0;
}

/* ------------------------------------------------------------------ */
/* Global CTA                                                          */
/* ------------------------------------------------------------------ */

/* White text on the navy surface again: the title inherits the surface
 * foreground instead of the shared strong-heading colour. */
.pbk-global-cta :where(.pbk-global-cta__title) {
  margin-block: 0;
  color: inherit;
}

.pbk-global-cta :where(.pbk-global-cta__body) :where(p) {
  margin-block: 0;
}

.pbk-global-cta :where(.pbk-global-cta__body) :where(p + p) {
  margin-block-start: 1em;
}

.pbk-global-cta :where(.pbk-global-cta__body) :where(a) {
  color: inherit;
}

.pbk-global-cta :where(.pbk-global-cta__actions) {
  margin-block: 0;
}

/* ================================================================== */
/* High contrast for theme blocks                                      */
/*                                                                     */
/* One simple semantic set: black page background, yellow highlighted  */
/* surface, black content on yellow, yellow content/borders on black.  */
/* Values come from the semantic tokens redefined by                   */
/* accessibility-preferences.css, not from per-element exceptions.     */
/* Photographs are not colour-processed; text placed on photos keeps   */
/* the dark overlay and uses yellow content.                           */
/* ================================================================== */

/* Neutral block interiors: yellow text on the black page background. */
html[data-pbk-color-mode="high-contrast"] .pbk-layout [class*="wp-block-pbk-"] :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption, time) {
  color: var(--pbk-color-text, #ff0);
}

/* Neutral component surfaces fall back to the page background. */
html[data-pbk-color-mode="high-contrast"] .pbk-layout :is(
  .pbk-home-hero__inner,
  .pbk-cards-with-media__media--fill
) {
  background-color: var(--pbk-color-surface, #000);
}

html[data-pbk-color-mode="high-contrast"] .pbk-layout .pbk-icon-feature-card {
  border-color: var(--pbk-color-border, #ff0);
  background-color: var(--pbk-color-surface-raised, #000);
}

html[data-pbk-color-mode="high-contrast"] .pbk-layout .pbk-cards-with-media__cards > .pbk-icon-feature-card {
  border-color: var(--pbk-color-border, #ff0);
}

/* Coloured icon panel becomes a yellow surface with black content. */
html[data-pbk-color-mode="high-contrast"] .pbk-layout .pbk-icon-feature-card__icon-shell {
  background-color: var(--pbk-color-action, #ff0);
  color: var(--pbk-color-on-action, #000);
}

/* Rail arrows: yellow on black, inverted pair on hover/focus. */
html[data-pbk-color-mode="high-contrast"] .pbk-layout .pbk-studies-rail__nav-btn {
  border-color: var(--pbk-color-border, #ff0);
  background-color: var(--pbk-color-surface, #000);
  color: var(--pbk-color-text, #ff0);
}

html[data-pbk-color-mode="high-contrast"] .pbk-layout .pbk-studies-rail__nav-btn:hover:not(:disabled),
html[data-pbk-color-mode="high-contrast"] .pbk-layout .pbk-studies-rail__nav-btn:focus-visible:not(:disabled) {
  border-color: var(--pbk-color-action, #ff0);
  background-color: var(--pbk-color-action, #ff0);
  color: var(--pbk-color-on-action, #000);
}

/* Pathways cards on photos: keep the dark overlay, use yellow content. */
html[data-pbk-color-mode="high-contrast"] .pbk-layout .pbk-page-pathways__card .pbk-page-pathways__excerpt {
  color: var(--pbk-color-text, #ff0);
}

html[data-pbk-color-mode="high-contrast"] .pbk-layout .pbk-page-pathways__card .pbk-page-pathways__overlay {
  background-image: linear-gradient(to top, rgb(0 0 0 / 0.75), transparent);
}

html[data-pbk-color-mode="high-contrast"] .pbk-layout .pbk-page-pathways__clover {
  background-color: var(--pbk-color-text, #ff0);
}

/* Pathways fallback (no photo): the navy stand-in surface becomes yellow
 * via the compatibility layer, so its content turns black and the overlay
 * is dropped. */
html[data-pbk-color-mode="high-contrast"] .pbk-layout .pbk-page-pathways__card:has(> .bg-blue-800) :is(
  .pbk-page-pathways__title,
  .pbk-page-pathways__excerpt
) {
  color: var(--pbk-color-on-action, #000);
}

html[data-pbk-color-mode="high-contrast"] .pbk-layout .pbk-page-pathways__card:has(> .bg-blue-800) .pbk-page-pathways__overlay {
  background-image: none;
}

html[data-pbk-color-mode="high-contrast"] .pbk-layout .pbk-page-pathways__card:has(> .bg-blue-800) .pbk-page-pathways__clover {
  background-color: var(--pbk-color-on-action, #000);
}

/* Global CTA: the navy text panel becomes yellow (compatibility layer),
 * so every piece of its content is black. */
html[data-pbk-color-mode="high-contrast"] .pbk-layout .pbk-global-cta :is(
  .pbk-global-cta__title,
  .pbk-global-cta__body,
  .pbk-global-cta__body p,
  .pbk-global-cta__body a
) {
  color: var(--pbk-color-on-action, #000);
}