/* HTHC block-pattern layout + presentational utilities.
   Typography size/family and color come from theme.json presets via native
   block attributes (fontSize / fontFamily / textColor) — not from here. */

/* The hidden attribute must always win over element display rules (several
   filterable directory cards / modals set display:flex, which otherwise
   overrides [hidden] and leaves filtered-out items visible). */
[hidden] { display: none !important; }

/* Smooth the default (solid) Button hover/darken. Outline button styles carry
   their own transition via register_block_style inline CSS. */
.wp-block-button__link { transition: background-color .18s ease, color .18s ease, border-color .18s ease; }

.section-header { align-items: flex-start; margin-bottom: var(--wp--preset--spacing--40); }
.section-label { letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 var(--wp--preset--spacing--10); }
/* A heading belongs to what follows it, so it gets more room above than below.
   The block gap is one value between every pair of siblings, which left a
   heading floating equidistant from the paragraph it introduces and the one it
   follows, grouping it with neither.
   The space *under* a heading is not its own margin-bottom — the flow layout
   puts it as margin-block-start on the next block, so that is what is tightened.
   Scoped to post content on purpose. Applying it site-wide would need to outrank
   :root :where(.is-layout-constrained) > * (0,1,0), and at that weight it would
   also beat the per-container rules the editor generates when someone sets Block
   spacing on a group — silently overriding a control that should win, which is
   the fault just fixed in the footer. Here it is (0,1,1): it beats the default
   gap, and any group with its own spacing still outranks it. */
.wp-block-post-content > * + :is(h1, h2, h3, h4, h5, h6) {
    margin-block-start: var(--wp--preset--spacing--40);
}
.wp-block-post-content > :is(h1, h2, h3, h4, h5, h6) + * {
    margin-block-start: var(--wp--preset--spacing--20);
}

/* Tighten the gap between an eyebrow (line or plain) and the heading or
   paragraph it labels. Matches .section-label's 8px so eyebrows sit close to
   their title regardless of the layout's block gap.
   An eyebrow is a tighter binding than the heading rule above, so it has to keep
   the last word: :is() rather than :where() on the right-hand side puts it at
   (0,1,1), level with that rule, and it is written after it so it wins on order.
   It was :where() before, which lost the moment the heading rule arrived. */
:is(.is-style-eyebrow, .is-style-eyebrow-plain) + :is(h1, h2, h3, h4, h5, h6, p) { margin-top: var(--wp--preset--spacing--10); }

/* Styling for this lives with the "Link — See all" block style in inc/blocks.php
   so the editor can pick it from the Styles panel; .see-all-link is the legacy
   hand-typed alias it also covers. */

.news-grid { gap: var(--wp--preset--spacing--30); }

/* Combinable arrow modifier — add the extra CSS class "has-arrow" to any button
   (solid, outline, text-link…) to append a trailing arrow that nudges on hover. */
.wp-block-button.has-arrow > .wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; }
.wp-block-button.has-arrow > .wp-block-button__link::after { content: "\2192"; font-size: 1.05em; line-height: 1; transition: transform .18s ease; }
.wp-block-button.has-arrow > .wp-block-button__link:hover::after { transform: translateX(3px); }

/* Outbound links get the design's diagonal "leaves the site" arrow. The
   is-external class is added at render time (inc/links.php) because CSS cannot
   tell an external host from an internal one without hard-coding the domain.
   Drawn as a mask rather than a background image so it inherits currentColor.

   The arrow is switched on by a custom property rather than keyed directly to
   .is-external. render_block never runs in the editor, so the canvas has no such
   class and showed no arrow; the editor turns the same property on instead
   (hthc_external_link_editor_preview), which keeps one set of declarations
   rather than a second copy that could drift from this one.
   The property is unset by default, so content resolves to none and no
   pseudo-element is generated on ordinary links. */
:is(a, .wp-block-button__link).is-external { --hthc-ext: ""; }
/* A link that is only an image (logo, card thumbnail) should not sprout one.
   :has() carries its argument's specificity, so this outranks the line above. */
:is(a, .wp-block-button__link):has(> img:only-child) { --hthc-ext: none; }

:is(a, .wp-block-button__link)::after {
    content: var(--hthc-ext, none);
    display: inline-block;
    width: 0.72em;
    height: 0.72em;
    margin-left: 0.35em;
    vertical-align: baseline;
    background-color: currentColor;
    -webkit-mask: var(--hthc-external-arrow) center / contain no-repeat;
    mask: var(--hthc-external-arrow) center / contain no-repeat;
}
/* The card's look belongs to the "Home events cards" block further down, which
   is where it was redesigned. This rule kept a background and a 4px radius that
   were already being overridden there, and a border that was not — so every
   card carried a stray hairline in the divider colour, loudest on the dark
   sections where the divider is light and the card is white. What is left here
   is the column layout the card body relies on. */
.ev-card { display: flex; flex-direction: column; }
/* The <figure> owns the 16/9 frame; the <img> inside has to fill it. object-fit
   only does anything on a replaced element, so on the figure it was inert and
   the image kept its own height — leaving a strip of page background between the
   picture and the card body. */
.ev-card-img, .news-card-img { aspect-ratio: 16 / 9; width: 100%; overflow: hidden; }
.ev-card-img img, .news-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* News card fallback when a post has no featured image (see hthc_news_card_image_fallback).
   Inherits the 16/9 frame so cards with and without a picture line up. */
.news-card-img.is-fallback { display: block; border-top-left-radius: 14px; border-top-right-radius: 14px; }
.card-body { padding: var(--wp--preset--spacing--30); display: flex; flex-direction: column; gap: 10px; }
.ev-meta { opacity: 0.75; margin: 0; }
.news-cat { text-transform: uppercase; letter-spacing: 0.06em; }
.card-title { line-height: 1.2; margin: 0; }
.card-title a, .news-cat a, .ev-tags a { color: inherit; text-decoration: none; }
.card-excerpt { margin: 0; font-size: var(--wp--preset--font-size--xs); }
.ev-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.hero-label { letter-spacing: 0.08em; text-transform: uppercase; }
.hero-sub { max-width: 46ch; }
.hero-visual-inner { max-width: 520px; margin-inline: auto; }
.stats-inner { gap: var(--wp--preset--spacing--40); }

.has-divider-top { border-top: 0.5px solid var(--divider); }

/* Separator, default variation. Core gives every separator a 2px rule and pins
   any non-wide/dots one at width:100px, which is why the alignment toolbar looked
   inert — max-width from the layout cannot widen a fixed width. The default is now
   the design's hairline, filling whatever box the layout hands it, so Default /
   Wide / Full all behave. The repeated class only carries specificity: core's
   width rule is a three-class selector, so a two-class one would lose. */
.wp-block-separator:not(.is-style-dots) {
    border: 0;
    border-top: 0.5px solid var(--divider, rgba(61, 84, 100, 0.12));
    height: 0;
    margin-block: 0;
    opacity: 1;
}
.wp-block-separator.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
    width: 100%;
}
/* Picking a colour makes the editor set a *background* as well as a text colour,
   and core switches technique on that: `.has-background` drops the border and
   draws a filled box instead, 1px tall or 2px when not wide. That box stacked on
   top of the border above, so a coloured separator measured 3px against the
   uncoloured 0.5px. Keep the same hairline and turn our border off so the two
   can't add up. Both of core's selectors are matched (the doubled class only
   carries specificity — core's taller rule has three classes). */
.wp-block-separator.wp-block-separator.has-background:not(.is-style-dots),
.wp-block-separator.wp-block-separator.has-background:not(.is-style-wide):not(.is-style-dots) {
    border: 0;
    height: 0.5px;
}


/* Cycling word (hthc/word-cycle rich-text format). Until word-cycle.js builds
   the stack the span holds one plain word, so there is no flash and no layout
   work before paint. is-cycling is added by the script, which also keeps the
   grid off the editor canvas where it would sit under the caret. */
.hthc-cycle.is-cycling { display: inline-grid; vertical-align: bottom; }
.hthc-cycle.is-cycling > .hthc-cycle__word {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.hthc-cycle.is-cycling > .hthc-cycle__word.is-active { opacity: 1; transform: none; }
/* Make the format visible while editing — the alternatives live in an attribute
   and are otherwise invisible in the canvas. */
.editor-styles-wrapper .hthc-cycle {
    border-bottom: 1px dashed currentColor;
    opacity: 0.85;
}


/* Body-copy links: bold with a rule under them, per the design's .see-all-link
   (font-weight 600 + border-bottom 2px solid currentColor). Scoped to running
   text — headings are excluded so card titles keep their own treatment, and the
   cards/meta/CTAs that already set their own link styling opt out below. */
.wp-block-post-content :is(p, li, blockquote, dd, dt, figcaption) a:not(.wp-element-button) {
    /* No colour shift: the design reserves red for buttons, nav, the logo and
       category labels, and gives links the text colour (.see-all-link is
       var(--fg)). Weight and the rule underneath carry the affordance, which
       also means links stay legible as the scroll colour moves under them. */
    color: inherit;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid currentColor;
    padding-bottom: 1px;
    transition: opacity 0.15s ease;
}
.wp-block-post-content :is(p, li, blockquote, dd, dt, figcaption) a:not(.wp-element-button):hover,
.wp-block-post-content :is(p, li, blockquote, dd, dt, figcaption) a:not(.wp-element-button):focus-visible {
    opacity: 0.65;
}
/* Same shape as the rule above (:not keeps the specificity equal) so this later
   rule wins — a plain class selector here would lose to it.

   .wp-block-navigation is here because a Navigation block used inside page
   content — a section subnav, say — is built from <li> elements, so the prose
   rule above claimed every one of its links and served them bold with a rule
   underneath. That is the treatment for a link inside a sentence; a row of
   navigation is not a sentence. The header's nav was never affected: it lives
   in a template part, outside .wp-block-post-content entirely. */
.wp-block-post-content :is(.card-title, .news-cat, .ev-tags, .cc-role,
.cc-info, .jp-email, .ev-back-link, .dc-name, .discount-value, .mlinks, .ms-role,
.pcat, .pnames, .toc-nav, .wp-block-navigation, .hthc-footer__col) a:not(.wp-element-button) {
    font-weight: inherit;
    border-bottom: 0;
    padding-bottom: 0;
}

/* Image captions sit inside the picture.

   WordPress colours .wp-element-caption a fixed #555, and the scroll-colour
   system moves the page underneath it — a caption that reads fine against the
   beige at the top of a page is grey-on-charcoal further down, and nothing
   about the caption knows the section changed. Inside the image it brings its
   own background and stops depending on the section entirely.

   Grid rather than absolute positioning: the figure is as wide as its column,
   which is not always as wide as the image, and an absolutely positioned
   caption would float away from a narrower picture. One grid cell holds both,
   so the caption is placed against the image itself.

   The chip is deliberate rather than a full-width scrim: the radius lives on
   the <img> (core serialises the border there), so CSS on the figure cannot
   know what to round the scrim's corners to, and a square scrim under a
   rounded image shows its corners. Same treatment as the event card badges. */
.wp-block-image:has(> figcaption) { display: grid; justify-items: start; }
.wp-block-image:has(> figcaption) > :is(img, a) { grid-area: 1 / 1; }
.wp-block-image:has(> figcaption) > figcaption {
    grid-area: 1 / 1;
    align-self: end;
    /* No justify-self here: the caption takes the container's justify-items,
       which is what keeps it over the picture. For a centred image the grid
       track is the whole figure, not the image, so pinning the chip to the
       track's start throws it hundreds of pixels clear of the photo. */
    margin: 0 12px 12px;
    padding: 5px 11px;
    max-width: calc(100% - 24px);
    border-radius: 8px;
    background: rgba(61, 84, 100, 0.72);
    backdrop-filter: blur(4px);
    color: var(--wp--preset--color--beige);
    font-size: var(--wp--preset--font-size--2-xs);
    line-height: 1.4;
    text-align: left;
}
/* Aligned images need saying twice. Core gives them display:table with a
   display:table-caption caption, at a specificity that beats the rule above —
   which drops the caption out of the grid and back underneath the picture. */
.wp-block-image:is(.aligncenter, .alignleft, .alignright):has(> figcaption) { display: grid; }
.wp-block-image:is(.aligncenter, .alignleft, .alignright):has(> figcaption) > figcaption { display: block; }
.wp-block-image.aligncenter:has(> figcaption) { justify-items: center; }
.wp-block-image.alignright:has(> figcaption) { justify-items: end; }

/* Captions on everything else — gallery, video, embed — at least follow the
   page colour instead of core's fixed grey. */
.wp-element-caption { color: var(--fg, currentColor); opacity: 0.75; }
.wp-block-image > figcaption.wp-element-caption { opacity: 1; }

.audience-grid { gap: var(--wp--preset--spacing--40); }
.audience-grid .wp-block-column { display: flex; align-items: center; gap: 14px; }
.aud-strip-icon { font-size: clamp(28px, 3vw, 40px); flex-shrink: 0; }
.audience-title { margin: 0; }

.pathways { position: relative; overflow: hidden; }
.pathways > :not(svg) { position: relative; z-index: 1; }
.pathway-flow { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: var(--wp--preset--spacing--20); margin-top: var(--wp--preset--spacing--30); }
.pathway-steps { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); }
.pw-step { display: grid; grid-template-columns: 52px 1fr; column-gap: var(--wp--preset--spacing--20); align-items: start; }
.pw-num { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
.pw-step h4 { grid-column: 2; margin: 0 0 4px; }
.pw-step p:not(.pw-num) { grid-column: 2; margin: 0; }

.testimonial { line-height: 1.35; border: 0; padding: 0; margin: 0; }
.testimonial cite {
    display: block; margin-top: var(--wp--preset--spacing--20);
    font-family: inherit; font-style: normal; font-size: var(--wp--preset--font-size--2-xs);
    color: var(--wp--preset--color--charcoal); opacity: 0.75;
}
.gtxt { fill: var(--wp--preset--color--charcoal); }
.gtxt-muted { fill: var(--wp--preset--color--charcoal); opacity: 0.6; }

.newsletter-section, .contact-section { position: relative; overflow: hidden; }
.newsletter-section .section-label,
.contact-section .section-label { opacity: 0.6; }
.newsletter-section h2 { max-width: 24ch; }
.newsletter-section p:not(.section-label) { max-width: 46ch; }

/* The newsletter sign-up is a HubSpot embed, so the theme does not style it.
   .newsletter-form / .nl-fields / .nl-input / .nl-consent / .nl-btn / .nl-note
   dressed the placeholder form the pattern shipped ("HubSpot newsletter embed
   goes here (later deliverable)") and went with it. The section's own layout
   rules above stay — they frame whatever sits inside. */

.contact-cards { gap: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--30); }
.cc-name { margin: 0 0 8px; }
.cc-role, .cc-info { margin: 0 0 4px; }
.cc-role a, .cc-info a { color: inherit; text-decoration: none; }
.cc-info { opacity: 0.65; }

/* About page */
.accent { background: transparent; color: var(--wp--preset--color--brand-red); }
.block-label { letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 8px; }
.divline { border: 0; border-top: 0.5px solid var(--divider); margin: 0 0 12px; max-width: 100%; }
.pcat { text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.6; margin: 0; font-size: var(--wp--preset--font-size--2-xs); }
.pnames { margin: 0 0 var(--wp--preset--spacing--20); font-family: var(--wp--preset--font-family--ppcirka); font-size: var(--wp--preset--font-size--l); line-height: 1.45; }

/* Post category terms → subtle grey pill (not a bare coral link). Skips the
   coral card terms (they set has-coral-color) so only the plain sidebar/article
   category becomes a pill. */
.wp-block-post-terms:not(.has-coral-color) > a {
    display: inline-block;
    background: rgba(61, 84, 100, 0.08);
    color: var(--wp--preset--color--charcoal);
    font-size: 11px;
    font-weight: 400;
    padding: 3px 9px;
    border-radius: 20px;
    margin-bottom: 18px;
    text-decoration: none;
}
.wp-block-post-terms:not(.has-coral-color) > a:hover { background: rgba(61, 84, 100, 0.14); }

/* Team + board grids (rendered by hthc/team-members) */
.team-grid, .board-grid {
    display: grid; gap: var(--wp--preset--spacing--20);
    grid-template-columns: repeat(var(--tm-cols, 4), minmax(0, 1fr));
    margin-top: var(--wp--preset--spacing--40);
}
.tc { position: relative; overflow: hidden; border-radius: 4px; }
/* height:auto so the 3/4 aspect-ratio wins over the img's HTML height attribute. */
.tc img, .bc img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
/* Fallback tile for a member with no photo, keeps the card's 3/4 shape. */
.tc-ph, .bc-ph {
    display: flex; align-items: center; justify-content: center;
    width: 100%; aspect-ratio: 3 / 4; border-radius: 4px;
    background: var(--wp--preset--color--muted); color: var(--wp--preset--color--off-white);
    font-family: var(--wp--preset--font-family--ppcirka); font-size: var(--wp--preset--font-size--3-xl);
    line-height: 1; letter-spacing: 0.02em;
}
.tc-base { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; background: linear-gradient(transparent, rgba(26,26,26,0.6)); }
.tc-name { margin: 0; color: var(--wp--preset--color--off-white); font-size: var(--wp--preset--font-size--s); }
.tc-overlay {
    position: absolute; inset: 0; display: flex; align-items: flex-end;
    padding: var(--wp--preset--spacing--20); opacity: 0; transition: opacity 0.2s ease;
    background: rgba(61,84,100,0.92); color: var(--wp--preset--color--off-white);
}
.tc:hover .tc-overlay, .tc:focus-within .tc-overlay { opacity: 1; }
.ov-name { font-family: var(--wp--preset--font-family--ppcirka); font-size: var(--wp--preset--font-size--xl); margin: 0; }
.ov-role { font-size: var(--wp--preset--font-size--2-xs); opacity: 0.85; margin: 2px 0 8px; }
.ov-bio { font-size: var(--wp--preset--font-size--2-xs); margin: 0 0 10px; }
.ov-links { display: flex; flex-direction: column; gap: 4px; font-size: var(--wp--preset--font-size--2-xs); }
.ov-links a { color: inherit; }
.bc { display: block; position: relative; color: inherit; text-decoration: none; }
.bc-base { padding: 8px 0 0; }
.bc-name { font-family: var(--wp--preset--font-family--ppcirka); margin: 0; color: var(--wp--preset--color--charcoal); }
.bc-role { font-size: var(--wp--preset--font-size--2-xs); opacity: 0.7; margin: 0; }
a.bc:hover .bc-name { color: var(--wp--preset--color--coral); }

/* Stat dividers between counter-stat items (opt-in via class, e.g. About impact). */
.stat-dividers > .counter-stat + .counter-stat { border-left: 0.5px solid var(--divider); padding-left: var(--wp--preset--spacing--40); }
@media (max-width: 600px) { .stat-dividers > .counter-stat + .counter-stat { border-left: 0; padding-left: 0; } }

/* Mobile: team card shows data below the image instead of a hover overlay */
@media (max-width: 781px) {
    .team-grid, .board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tc { overflow: visible; }
    .tc-base { display: none; }
    .tc-overlay { position: static; opacity: 1; inset: auto; background: transparent; color: inherit; padding: 8px 0 0; }
    .ov-links a { color: var(--wp--preset--color--coral); }
}

/* Membership page */
.membership-stats .stats-inner { gap: var(--wp--preset--spacing--30); }

/* Hero half-width columns (text left, stats/space right) */
.hero-cols { align-items: center; gap: var(--wp--preset--spacing--50); }

/* Hero stat list — stacked rows: big number + label with hairline rules */
.hero-stats { display: flex; flex-direction: column; }
.hero-stat {
    display: grid; grid-template-columns: minmax(90px, auto) 1fr;
    gap: var(--wp--preset--spacing--30); align-items: center;
    padding: 20px 0; border-bottom: 0.5px solid var(--divider);
}
.hero-stats > .hero-stat:first-child { border-top: 0.5px solid var(--divider); }
.hero-stat-num { margin: 0; line-height: 1; }
.hero-stat-label { margin: 0; line-height: 1.45; }
@media (max-width: 781px) {
    .hero-stat { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
    .hero-col-spacer { display: none; }
    /* Pillars 2×2 grid → single column so the text-heavy cards aren't cramped */
    .pillars-grid { grid-template-columns: 1fr !important; }
}

/* Pillars — native details accordion */
.wp-block-details.pillar {
    border-top: 0.5px solid var(--divider);
    padding: var(--wp--preset--spacing--20) 0;
}
.wp-block-details.pillar:last-of-type { border-bottom: 0.5px solid var(--divider); }
.wp-block-details.pillar > summary {
    cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
    font-family: var(--wp--preset--font-family--ppcirka); font-size: var(--wp--preset--font-size--xl);
    padding: var(--wp--preset--spacing--10) 0;
}
.wp-block-details.pillar > summary::-webkit-details-marker { display: none; }
.wp-block-details.pillar > summary::after {
    content: "+"; font-size: 1.4em; line-height: 1; color: var(--wp--preset--color--coral); margin-left: 16px;
}
.wp-block-details.pillar[open] > summary::after { content: "–"; }
.pillar-items { columns: 2; gap: var(--wp--preset--spacing--30); margin: var(--wp--preset--spacing--20) 0; }
.pillar-items li { break-inside: avoid; margin-bottom: 6px; }

/* Accordion (core/accordion) — minimal FAQ styling per the design: hairline
   rows, charcoal text, and a rotating chevron in place of core's +/- glyph. */
.wp-block-accordion-item {
    border: 0;
    border-bottom: 0.5px solid var(--divider, rgba(61, 84, 100, 0.12));
    background: none;
}
.wp-block-accordion-heading { margin: 0; }
.wp-block-accordion-heading__toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px 0;
    background: none;
    border: 0;
    text-align: left;
    font-family: inherit;
    font-size: clamp(14px, 1.2vw, 15.5px);
    font-weight: 500;
    color: var(--wp--preset--color--charcoal);
    cursor: pointer;
    transition: color 0.2s ease;
}
.wp-block-accordion-heading__toggle:hover,
.wp-block-accordion-heading__toggle[aria-expanded="true"] {
    color: rgba(61, 84, 100, 0.65);
}
/* The toggle's bottom padding is the entire gap between an open question and the
   first line of its answer — the panel adds no top padding and its first child no
   top margin — so it is the one number to trim. 20% off, 16px to 12.8px.
   Open state only: taking it off the base rule would leave every closed row
   padded 16 top against 12.8 bottom, with its text visibly high between the
   hairlines. */
.wp-block-accordion-heading__toggle[aria-expanded="true"] {
    padding-bottom: 12.8px;
}

/* Chevron: hide core's "+"/"-" text and draw a caret that flips up when open. */
.wp-block-accordion-heading__toggle-icon {
    flex-shrink: 0;
    position: relative;
    width: 18px;
    height: 18px;
    font-size: 0;
    color: currentColor;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}
.wp-block-accordion-heading__toggle-icon::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 5px;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.22s ease;
}
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-icon,
.wp-block-accordion-heading__toggle[aria-expanded="true"] .wp-block-accordion-heading__toggle-icon {
    opacity: 0.4;
}
.wp-block-accordion-heading__toggle[aria-expanded="true"] .wp-block-accordion-heading__toggle-icon::before {
    transform: rotate(-135deg);
}

.wp-block-accordion-panel {
    color: var(--wp--preset--color--charcoal);
    line-height: 1.75;
    max-width: 660px;
    /* The item's flow layout puts a 24px block gap between the question and the
       answer, which reads as a hole when a row opens. The design runs the answer
       straight on from the question and spaces it off the next hairline instead
       (.faq-answer padding: 0 0 18px; .pillar-item-detail 2px 0 10px). */
    margin-top: 0;
    padding-bottom: 18px;
}
.wp-block-accordion-panel > :first-child { margin-top: 0; }
.wp-block-accordion-panel p {
    font-size: clamp(14px, 1.2vw, 15.5px);
    font-weight: 400;
    margin: 0 0 18px;
}

/* Blockquote — coral hairline on the left, slightly narrower than body text. */
.wp-block-quote {
    border-left: 2px solid var(--wp--preset--color--coral);
    padding-left: var(--wp--preset--spacing--20);
    margin-left: 0;
    font-style: normal;
}
.wp-block-quote cite {
    display: block;
    margin-top: 10px;
    font-size: var(--wp--preset--font-size--2xs);
    font-style: normal;
    opacity: 0.7;
}

/* Pullquote — big decorative opening quote in PP Cirka, italic body, no rules. */
.wp-block-pullquote {
    border: 0;
    padding: 4px 0 8px 24px;
    margin: 44px 0;
    text-align: left;
}
.wp-block-pullquote::before {
    content: "\201C";
    display: block;
    font-family: var(--wp--preset--font-family--ppcirka);
    font-weight: 300;
    font-size: 130px;
    line-height: 0.65;
    color: var(--wp--preset--color--charcoal);
    margin-bottom: -44px;
    margin-left: -8px;
}
.wp-block-pullquote blockquote { margin: 0; }
.wp-block-pullquote p {
    font-size: clamp(17px, 1.65vw, 20px);
    font-style: italic;
    line-height: 1.6;
    margin: 0;
}
.wp-block-pullquote cite {
    display: block;
    margin-top: 12px;
    font-style: normal;
    font-size: var(--wp--preset--font-size--2xs);
    text-transform: none;
    opacity: 0.7;
}

/* Member stories — typography only. The divided-grid look now comes from the
   Divider — top/right column styles, so the same treatment is available on any
   Columns block instead of being welded to these class names. */
.ms-quote { line-height: 1.55; margin: 0 0 var(--wp--preset--spacing--30); }
.ms-name { margin: 0; font-weight: 700; }
.ms-role { margin: 4px 0 0; }

/* Join — person card + presentational form */
.join-person {
    padding: var(--wp--preset--spacing--40);
    background: var(--wp--preset--color--off-white);
    border: 0.5px solid var(--divider); border-radius: 8px;
}
.jp-initials {
    display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
    border-radius: 50%; margin: 0 0 var(--wp--preset--spacing--20);
    background: var(--wp--preset--color--salmon); color: var(--wp--preset--color--coral);
    font-family: var(--wp--preset--font-family--ppcirka); font-size: var(--wp--preset--font-size--s);
}
.jp-name { margin: 0; }
.jp-role { margin: 2px 0 var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--2-xs); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.65; }
.jp-email a { color: var(--wp--preset--color--coral); text-decoration: none; }
/* The join form is a HubSpot embed, so the theme does not style it.
   .join-form / .jf-fields / .jf-full / .join-input / .join-btn dressed the
   presentational form the pattern shipped and went with it. The person card
   above is not part of the form and stays. */
/* Join section on the dark navy band (membership) */
.join-dark .join-person { background: rgba(253, 238, 227, 0.05); border-color: rgba(253, 238, 227, 0.18); }

@media (max-width: 781px) {
    .pillar-items { columns: 1; }
}

/* Event card image + topic tags — shared by the home-events query loop.
   (The former hthc/event-directory grid/modal CSS was removed with the block;
   its .ev-detail-* modal rules are superseded by the .event-detail block below.) */
.ev-card-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.ev-tags { font-size: var(--wp--preset--font-size--2-xs); opacity: 0.85; }

/* Event detail (single event) */
.ev-back-link { font-size: var(--wp--preset--font-size--s); margin-bottom: var(--wp--preset--spacing--30); }
.ev-back-link a { color: var(--wp--preset--color--coral); text-decoration: none; }
.event-detail { max-width: 820px; margin: 0 auto; }
.event-detail--empty { opacity: 0.7; padding: var(--wp--preset--spacing--40) 0; }
.ev-detail-media { position: relative; border-radius: 14px; overflow: hidden; margin-bottom: var(--wp--preset--spacing--30); }
.ev-detail-media img { display: block; width: 100%; height: auto; }
.ev-detail-noimg { width: 100%; padding-top: 42%; background: var(--wp--preset--color--beige); }
.ev-detail-datebadge { position: absolute; top: 16px; left: 16px; background: var(--wp--preset--color--off-white); border-radius: 10px; padding: 8px 12px; text-align: center; line-height: 1.05; }
.ev-detail-day { display: block; font-family: var(--wp--preset--font-family--ppcirka); font-size: var(--wp--preset--font-size--xl); }
.ev-detail-mon { display: block; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--wp--preset--font-size--2-xs); opacity: 0.7; }
.event-detail .ev-detail-tags { text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--wp--preset--font-size--2-xs); opacity: 0.7; margin: 0 0 8px; }
.ev-detail-title { font-family: var(--wp--preset--font-family--ppcirka); font-size: var(--wp--preset--font-size--4-xl); margin: 0 0 var(--wp--preset--spacing--20); }
.ev-detail-info { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); margin-bottom: var(--wp--preset--spacing--30); }
.ev-detail-info-row { display: flex; flex-direction: column; gap: 2px; }
.ev-detail-info-lbl { text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--wp--preset--font-size--2-xs); opacity: 0.6; }
.ev-detail-info-val { font-size: var(--wp--preset--font-size--s); }
.event-detail .ev-detail-desc { line-height: 1.6; margin-bottom: var(--wp--preset--spacing--40); }
.ev-detail-subhead { font-family: var(--wp--preset--font-family--ppcirka); font-size: var(--wp--preset--font-size--xl); margin: 0 0 var(--wp--preset--spacing--20); }
.event-detail .ev-detail-speakers { margin-bottom: var(--wp--preset--spacing--40); }
.ev-detail-splist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--20); }
.ev-sp-item { display: flex; align-items: center; gap: 12px; }
.ev-sp-av { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--wp--preset--color--off-white); font-size: var(--wp--preset--font-size--2-xs); text-transform: uppercase; flex: 0 0 auto; background: var(--wp--preset--color--charcoal); }
.ev-sp-item:nth-of-type(5n+2) .ev-sp-av { background: var(--wp--preset--color--salmon); }
.ev-sp-item:nth-of-type(5n+3) .ev-sp-av { background: var(--wp--preset--color--coral); }
.ev-sp-item:nth-of-type(5n+4) .ev-sp-av { background: var(--wp--preset--color--coral); }
.ev-sp-item:nth-of-type(5n+5) .ev-sp-av { background: var(--wp--preset--color--beige); color: var(--wp--preset--color--charcoal); }
.ev-sp-name { font-size: var(--wp--preset--font-size--s); }
.ev-detail-gate { background: var(--wp--preset--color--beige); border-radius: 14px; padding: var(--wp--preset--spacing--30); margin-bottom: var(--wp--preset--spacing--40); }
.ev-detail-gate-note { margin: 0 0 var(--wp--preset--spacing--20); }
.ev-detail-cta { display: inline-block; background: var(--wp--preset--color--coral); color: var(--wp--preset--color--off-white); text-decoration: none; padding: 10px 20px; border-radius: 999px; font-size: var(--wp--preset--font-size--s); }
.ev-detail-signin { display: inline-block; margin-left: 12px; color: var(--wp--preset--color--coral); text-decoration: none; font-size: var(--wp--preset--font-size--s); }
.ev-detail-related { margin-top: var(--wp--preset--spacing--50); border-top: 0.5px solid var(--divider); padding-top: var(--wp--preset--spacing--40); }
.ev-detail-relgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--30); }
.ev-rel-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 6px; }
.ev-rel-card img, .ev-rel-noimg { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; display: block; }
.ev-rel-noimg { background: var(--wp--preset--color--beige); }
.ev-rel-date { font-size: var(--wp--preset--font-size--2-xs); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.6; }
.ev-rel-title { font-size: var(--wp--preset--font-size--s); }
@media (max-width: 782px) {
    .ev-detail-relgrid { grid-template-columns: 1fr; }
    .ev-detail-info { flex-direction: column; gap: var(--wp--preset--spacing--20); }
}

/* Event archive — Concept A: filter sidebar + month-grouped accordion list.
   Colours are the brand palette (charcoal / beige / coral / muted / warm). */
.event-archive { --ea-ink: #3d5464; --ea-beige: #fdeee3; --ea-muted: #8ea4ac; --ea-pop: #ff0808; }
/* No horizontal padding: the block sits inside a section that already pads, and
   adding its own stacked a second inset on top (38px from core's has-background
   group rule + 72px here), pushing the archive well inside the hero's content
   edge. Padding is the container's job; this only owns the bottom gap. */
/* No max-width here. It used to be pinned to the wide size, matching the
   design's .ca-layout — so the block capped itself at the wide width and Full
   width, which block.json offers, could not do anything: the wrapper went to
   max-width:none and this held the grid at the wide size anyway. The alignment
   the editor picks decides the width now, and Wide follows whatever wideSize
   is in theme.json rather than a number repeated here. */
.ea-layout { display: grid; grid-template-columns: clamp(260px, 20vw, 320px) 1fr; align-items: start; margin: 0 auto; padding: 0 0 var(--wp--preset--spacing--60); }

/* Sidebar */
.ea-sidebar { position: sticky; top: 96px; padding: 28px 40px 28px 0; border-right: 0.5px solid rgba(61, 84, 100, 0.1); }
.ea-search { margin: 0 0 24px; }
.ea-search-input { width: 100%; padding: 9px 14px; border: 0.5px solid rgba(61, 84, 100, 0.2); border-radius: 8px; font-size: var(--wp--preset--font-size--s); font-family: inherit; color: var(--ea-ink); background: transparent; }
.ea-search-input:focus-visible { outline: 2px solid var(--ea-ink); outline-offset: 1px; }
.ea-side-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ea-muted); margin-bottom: 14px; }
.ea-sftag { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; margin-bottom: 2px; font-size: 15px; color: var(--ea-ink); text-decoration: none; transition: background 0.12s, color 0.12s; }
.ea-sftag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(61, 84, 100, 0.2); flex-shrink: 0; transition: background 0.12s; }
.ea-sftag:hover { background: rgba(61, 84, 100, 0.06); }
.ea-sftag.is-active { background: rgba(61, 84, 100, 0.08); font-weight: 500; }
.ea-sftag.is-active::before { background: var(--ea-pop); }
.ea-side-div { height: 0.5px; background: rgba(61, 84, 100, 0.1); margin: 18px 0; }
/* The divider exists to separate one facet group from the next, so it is noise
   when nothing follows it. That is the common case now the result count is gone
   and only the topic facet has terms — on mobile it left two rules 40px apart,
   the second being the sidebar's own bottom border. */
.ea-sidebar > .ea-side-div:last-child { display: none; }

/* Main column */
.ea-main { padding: 8px 0 0 clamp(24px, 4vw, 56px); min-width: 0; }
.ea-main-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 12px; }
.ea-main-title { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ea-muted); }
.ea-toggle { font-size: 13px; color: var(--ea-muted); text-decoration: none; white-space: nowrap; transition: color 0.15s; }
.ea-toggle:hover { color: var(--ea-ink); }
.ea-month { padding: 22px 0 10px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ea-muted); border-bottom: 1px solid rgba(61, 84, 100, 0.08); }

/* Row — native <details> accordion */
.ea-row { border-bottom: 0.5px solid rgba(61, 84, 100, 0.07); scroll-margin-top: 100px; }
.ea-rowhead { list-style: none; cursor: pointer; display: grid; grid-template-columns: 52px 68px 1fr auto; gap: 0 18px; align-items: center; padding: 16px 10px; margin: 0 -10px; border-radius: 8px; transition: background 0.12s; }
.ea-rowhead::-webkit-details-marker { display: none; }
.ea-row:hover .ea-rowhead, .ea-row[open] .ea-rowhead { background: var(--ea-ink); }
.ea-row[open] .ea-rowhead { border-radius: 8px 8px 0 0; }
.ea-thumb { width: 52px; height: 52px; border-radius: 8px; flex-shrink: 0; background-size: cover; background-position: center; background-color: rgba(61, 84, 100, 0.12); }
.ea-thumb.ea-cat-ai { background-color: #3d5464; }
.ea-thumb.ea-cat-funding { background-color: #8ea4ac; }
.ea-thumb.ea-cat-regulatory { background-color: #4a6048; }
.ea-thumb.ea-cat-market { background-color: #5a7080; }
.ea-thumb.ea-cat-community { background-color: #c4927a; }
.ea-date { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ea-day { display: block; font-family: var(--wp--preset--font-family--ppcirka); font-weight: 300; font-size: 36px; color: var(--ea-ink); line-height: 1; }
.ea-day-tbd { font-size: 14px; letter-spacing: 0.5px; color: var(--ea-muted); }
.ea-mon { display: block; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ea-ink); margin-top: 3px; }
.ea-content { min-width: 0; }
.ea-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.ea-tag { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: 8px; background: rgba(61, 84, 100, 0.09); color: var(--ea-ink); }
.ea-tag.ea-cat-funding { background: rgba(142, 164, 172, 0.2); color: #4a6070; }
.ea-tag.ea-cat-market { background: rgba(90, 114, 128, 0.15); }
.ea-tag.ea-cat-regulatory { background: rgba(85, 107, 90, 0.15); color: #3a5040; }
.ea-tag.ea-cat-community { background: rgba(196, 146, 122, 0.2); color: #7a4a35; }
.ea-tag.ea-aud-members, .ea-tag.ea-aud-investors { background: rgba(110, 49, 49, 0.1); color: var(--wp--preset--color--coral); }
.ea-name { display: block; font-family: var(--wp--preset--font-family--ppcirka); font-weight: 300; font-size: 20px; color: var(--ea-ink); line-height: 1.2; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ea-meta { font-size: 13px; color: var(--ea-ink); }
.ea-cta { display: flex; align-items: center; gap: 14px; }
.ea-row[open] .ea-cta-btn { display: none; }
.ea-cta-btn { padding: 9px 18px; border-radius: 20px; font-size: 13px; white-space: nowrap; text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.ea-cta-signup { border: 1.5px solid var(--ea-pop); color: var(--ea-pop); }
.ea-cta-signup:hover { background: var(--ea-pop); color: var(--ea-beige); }
.ea-cta-apply { border: 1.5px solid var(--ea-ink); color: var(--ea-ink); }
.ea-cta-apply:hover { background: var(--ea-ink); color: var(--ea-beige); }
.ea-cta-notify { border: 1.5px solid rgba(61, 84, 100, 0.35); color: var(--ea-ink); opacity: 0.9; }
.ea-cta-notify:hover { background: var(--ea-ink); color: var(--ea-beige); border-color: var(--ea-ink); }
/* Nothing to sign up for — the row is the destination, so this one reads as a
   quiet invitation rather than competing with the sign-up buttons above it. */
.ea-cta-readmore { border: 1.5px solid transparent; color: var(--ea-ink); opacity: 0.75; padding-right: 8px; }
.ea-cta-readmore::after { content: " \2192"; }
.ea-cta-readmore:hover { opacity: 1; }
.ea-chev { width: 10px; height: 10px; flex-shrink: 0; border-right: 1.5px solid rgba(61, 84, 100, 0.4); border-bottom: 1.5px solid rgba(61, 84, 100, 0.4); transform: rotate(45deg); transition: transform 0.2s, border-color 0.2s; margin: 6px 0 0; }
.ea-row[open] .ea-chev { transform: rotate(-135deg); margin: 9px 0 0; }

/* Row hover / open — dark panel, light text (echoes the concept) */
.ea-row:hover .ea-day, .ea-row[open] .ea-day,
.ea-row:hover .ea-name, .ea-row[open] .ea-name { color: var(--ea-beige); }
.ea-row:hover .ea-mon, .ea-row[open] .ea-mon,
.ea-row:hover .ea-meta, .ea-row[open] .ea-meta { color: rgba(253, 238, 227, 0.6); }
.ea-row:hover .ea-tag, .ea-row[open] .ea-tag { background: rgba(253, 238, 227, 0.15); color: rgba(253, 238, 227, 0.85); }
.ea-row:hover .ea-thumb, .ea-row[open] .ea-thumb { opacity: 0.75; }
.ea-row:hover .ea-chev, .ea-row[open] .ea-chev { border-color: rgba(253, 238, 227, 0.6); }
.ea-row:hover .ea-cta-signup, .ea-row:hover .ea-cta-apply, .ea-row:hover .ea-cta-notify { border-color: rgba(253, 238, 227, 0.5); color: var(--ea-beige); }
.ea-row:hover .ea-cta-signup:hover, .ea-row:hover .ea-cta-apply:hover, .ea-row:hover .ea-cta-notify:hover { background: var(--ea-pop); border-color: var(--ea-pop); }
.ea-row:hover .ea-cta-readmore { color: var(--ea-beige); opacity: 0.9; }

/* Smooth drawer expand on the native <details> row (modern browsers; older
   ones just snap open — no regression). */
@media (prefers-reduced-motion: no-preference) {
    .ea-row { interpolate-size: allow-keywords; }
    .ea-row::details-content {
        block-size: 0;
        /* Clip only vertically for the height animation; keep horizontal visible
           so the expand's -10px card overhang and rounded bottom corners show. */
        overflow: visible clip;
        transition: block-size 0.35s cubic-bezier(0.4, 0, 0.2, 1), content-visibility 0.35s allow-discrete;
    }
    .ea-row[open]::details-content { block-size: auto; }
}

/* Expanded panel — matches the events concept (charcoal drawer, no image/gradient) */
.ea-expand { background: var(--ea-ink); border-radius: 0 0 10px 10px; border-bottom: 0.5px solid rgba(253, 238, 227, 0.08); margin: 0 -10px; }
/* Optional banner image at the top of the drawer — no gradient overlay. */
.ea-expand-img { height: 160px; background-size: cover; background-position: center; }
.ea-expand-body { display: grid; grid-template-columns: 1fr 160px; gap: 72px; padding: 20px 60px 24px 166px; }
.ea-expand-desc { font-size: 14px; color: rgba(253, 238, 227, 0.85); line-height: 1.75; margin: 0 0 12px; }
.ea-expand-desc > :first-child { margin-top: 0; }
.ea-expand-desc > :last-child { margin-bottom: 0; }
.ea-expand-desc p { margin: 0 0 12px; }
.ea-expand-desc a { color: var(--ea-beige); text-decoration: underline; }
.ea-expand-desc a:hover { text-decoration: none; }
.ea-expand-desc img { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; }
.ea-expand-desc h1, .ea-expand-desc h2, .ea-expand-desc h3, .ea-expand-desc h4 { color: var(--ea-beige); font-family: var(--wp--preset--font-family--ppcirka); font-weight: 300; line-height: 1.2; margin: 14px 0 8px; }
.ea-expand-desc ul, .ea-expand-desc ol { margin: 0 0 12px; padding-left: 1.2em; }
.ea-expand-speakers { margin-top: 8px; margin-bottom: 14px; }
.ea-expand-spk-lbl { font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(253, 238, 227, 0.45); margin-bottom: 8px; }
.ea-expand-spk { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.ea-expand-spk-av { width: 30px; height: 30px; border-radius: 50%; background: rgba(253, 238, 227, 0.2); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--ea-beige); flex-shrink: 0; margin-top: 1px; }
.ea-expand-spk-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ea-expand-spk-name { font-size: 13px; color: rgba(253, 238, 227, 0.9); }
.ea-expand-spk-title { font-size: 11px; color: rgba(253, 238, 227, 0.45); }
.ea-expand-spk-desc { font-size: 12px; color: rgba(253, 238, 227, 0.72); line-height: 1.5; margin-top: 3px; }
.ea-expand-right { display: flex; flex-direction: column; gap: 16px; }
.ea-expand-cta { align-self: flex-start; padding: 9px 22px; border-radius: 20px; font-size: 14px; border: 1.5px solid var(--ea-pop); background: var(--ea-pop); color: var(--ea-beige); text-decoration: none; transition: background 0.18s, border-color 0.18s; }
.ea-expand-cta:hover { background: #c00; border-color: #c00; }
.ea-expand-info { display: flex; flex-direction: column; gap: 10px; }
.ea-expand-info-item { display: flex; flex-direction: column; gap: 2px; }
.ea-expand-lbl { font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(253, 238, 227, 0.4); }
.ea-expand-val { font-size: 13px; color: rgba(253, 238, 227, 0.88); }
.ea-expand-close-row { padding: 0 24px 16px 166px; display: flex; align-items: center; gap: 18px; }
.ea-expand-collapse { font-family: inherit; font-size: 13px; color: rgba(253, 238, 227, 0.4); background: none; border: 0; padding: 0; cursor: pointer; transition: color 0.15s ease; }
.ea-expand-collapse:hover { color: rgba(253, 238, 227, 0.8); }
/* Only editors ever see this, so it stays as quiet as the Close button and
   sits after it in reading order without pushing the visitor's eye anywhere. */
.ea-expand-edit { order: 1; margin-left: auto; font-size: 13px; color: rgba(253, 238, 227, 0.4); text-decoration: none; border-bottom: 1px solid rgba(253, 238, 227, 0.25); transition: color 0.15s ease, border-color 0.15s ease; }
.ea-expand-edit:hover { color: rgba(253, 238, 227, 0.85); border-color: rgba(253, 238, 227, 0.6); }

/* Pagination + empty */
.ea-pagination { margin-top: var(--wp--preset--spacing--40); }
.ea-pagination .page-numbers { display: inline-block; padding: 6px 12px; text-decoration: none; color: inherit; border: 0.5px solid rgba(61, 84, 100, 0.2); border-radius: 8px; margin-right: 6px; }
.ea-pagination .page-numbers.current { background: var(--ea-ink); color: var(--ea-beige); border-color: var(--ea-ink); }
.ea-pag-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.ea-pag { display: inline-block; padding: 6px 12px; text-decoration: none; color: inherit; border: 0.5px solid rgba(61, 84, 100, 0.2); border-radius: 8px; }
.ea-pag.is-current { background: var(--ea-ink); color: var(--ea-beige); border-color: var(--ea-ink); }
.ea-empty { opacity: 0.7; padding: var(--wp--preset--spacing--40) 0; }
/* Inline HubSpot registration form — light card so the form stays legible on
   the dark expanded panel (and fine on the light single-event page). */
.ev-hsform { background: var(--wp--preset--color--off-white); color: var(--wp--preset--color--charcoal); border-radius: 8px; padding: 16px 18px; }
.ev-hsform-loading { margin: 0; font-size: var(--wp--preset--font-size--s); opacity: 0.7; }
.ev-hsform .hs-button { cursor: pointer; }
/* Full-width registration form revealed below the body (needs room the narrow
   right column can't give). */
.ea-expand-signup { padding: 0 60px 24px 166px; }
.ea-expand-signup[hidden] { display: none; }
.ea-expand-signup .ev-hsform { max-width: 560px; }
.ev-noform { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(253, 238, 227, 0.55); }
/* AJAX loading state */
.event-archive.is-loading .ea-main { opacity: 0.5; transition: opacity 0.15s ease; pointer-events: none; }

@media (max-width: 900px) {
    .ea-layout { grid-template-columns: 1fr; }
    /* min-width:0 because the sidebar is a grid item, and a grid item defaults
       to min-width:auto — once the filters stop wrapping it would grow to fit
       the whole row and drag the page wider instead of letting them scroll. */
    .ea-sidebar { position: static; top: auto; min-width: 0; border-right: 0; border-bottom: 0.5px solid rgba(61, 84, 100, 0.1); padding: 0 0 20px; margin-bottom: 8px; }
    /* Stacked, the five filters cost more than half a phone screen before the
       first event is visible. Running them along one scrollable row keeps every
       category discoverable — a chip cut off at the edge shows there are more,
       which a collapsed menu cannot do — and hands the space back to the events. */
    .ea-sftags {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .ea-sftags::-webkit-scrollbar { width: 0; height: 0; display: none; }
    /* The design has its own horizontal filter concept (events_concepts.html,
       .filter-row/.ftag) and it does not look like the sidebar: outlined pills,
       smaller text, and a filled charcoal active state instead of a tinted row.
       The leading dot goes with it — it reads as a list marker, which is exactly
       what these stop being once they sit side by side. Pills are also narrower,
       so more categories fit in one swipe. */
    .ea-sftag {
        flex: none;
        margin-bottom: 0;
        white-space: nowrap;
        gap: 0;
        padding: 6px 14px;
        border: 1px solid rgba(61, 84, 100, 0.18);
        border-radius: 20px;
        font-size: 13px;
        background: transparent;
    }
    .ea-sftag::before { display: none; }
    .ea-sftag:hover,
    .ea-sftag.is-active {
        background: var(--ea-ink);
        border-color: var(--ea-ink);
        color: var(--ea-beige);
        font-weight: 400;
    }
    .ea-main { padding-left: 0; }
    .ea-expand-body { grid-template-columns: 1fr; gap: 18px; padding: 18px 16px 22px; }
    .ea-expand-close-row { padding: 0 16px 16px; }
    .ea-expand-signup { padding: 0 16px 20px; }
}
/* Mobile: the collapsed row is date + name only, and the CTA arrives with the
   rest of the detail when the row opens. Every row already renders a second CTA
   inside the panel (.ea-expand-cta, plus the sign-up form), so the one in the
   head is a duplicate that costs a line per event on the widths with least room
   for it — it wrapped onto its own grid row below 560px. Desktop keeps it: there
   the row has a column to spare, and it is the affordance that makes a collapsed
   row actionable without opening it. */
@media (max-width: 782px) {
    .ea-rowhead .ea-cta { display: none; }
}
@media (max-width: 560px) {
    .ea-rowhead { grid-template-columns: 44px 54px 1fr; row-gap: 10px; }
    .ea-name { white-space: normal; }
}

/* Event nav (single-event prev/next) */
.ev-nav { max-width: 820px; margin: var(--wp--preset--spacing--40) auto 0; padding-top: var(--wp--preset--spacing--30); border-top: 0.5px solid var(--divider); display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); }
.ev-nav-prev, .ev-nav-next { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; max-width: 48%; }
.ev-nav-next { margin-left: auto; text-align: right; }
.ev-nav-label { font-size: var(--wp--preset--font-size--2-xs); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.6; }
.ev-nav-title { font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--coral); }
.ev-nav-empty { opacity: 0.7; padding: var(--wp--preset--spacing--20) 0; }
@media (max-width: 782px) {
    .ev-nav { flex-direction: column; gap: var(--wp--preset--spacing--20); }
    .ev-nav-prev, .ev-nav-next { max-width: 100%; text-align: left; margin-left: 0; }
}


/* Single-event filter links */
.event-detail .ev-detail-tag-link,
.event-detail .ev-detail-loc-link { color: var(--wp--preset--color--coral); text-decoration: none; }
.event-detail .ev-detail-tag-link:hover,
.event-detail .ev-detail-loc-link:hover { text-decoration: underline; }

/* Events filter block */
.ev-filter { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ev-filter-label { margin-top: 12px; font-size: var(--wp--preset--font-size--2-xs); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.6; }
.ev-filter-label:first-child { margin-top: 0; }
.ev-filter-chip { display: inline-block; padding: 2px 0; font-size: var(--wp--preset--font-size--s); color: inherit; text-decoration: none; background: transparent; border: 0; cursor: pointer; }
.ev-filter-chip:hover { color: var(--wp--preset--color--coral); }
.ev-filter-chip.is-active { color: var(--wp--preset--color--coral); font-weight: 500; }
.ev-filter-chip.is-members::before,
.ev-filter-chip.is-investors::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.ev-filter-chip.is-members::before { background: var(--wp--preset--color--salmon); }
.ev-filter-chip.is-investors::before { background: var(--wp--preset--color--coral); }
.ev-filter-div { width: 100%; max-width: 160px; height: 0.5px; background: var(--divider); margin: 6px 0; }
.ev-filter-count { margin-top: 12px; font-size: var(--wp--preset--font-size--2-xs); opacity: 0.6; }

/* HubSpot form block */
.hthc-hsform { max-width: 520px; margin-top: var(--wp--preset--spacing--20); }
.hthc-hsform-placeholder { padding: 16px; border: 1px dashed var(--divider); font-size: var(--wp--preset--font-size--2-xs); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; }
.hthc-hsform .hs-input { width: 100%; padding: 10px 14px; border: 0.5px solid var(--divider); border-radius: 999px; font-family: inherit; font-size: var(--wp--preset--font-size--s); background: transparent; color: inherit; }
.hthc-hsform .hs-button { padding: 10px 22px; border: 0; border-radius: 999px; cursor: pointer; background: var(--wp--preset--color--coral); color: var(--wp--preset--color--off-white); font-family: inherit; font-size: var(--wp--preset--font-size--s); }

/* Counter Stats / Counter Stat blocks (hthc/counter-stats, hthc/counter-stat)
   Matches the home "stats-band" pattern look: big PP Cirka numbers in
   brand-red, small uppercase muted labels. Per-block inline color styles
   (numberColor/labelColor/descriptionColor) win over these defaults since
   they're applied via the style attribute on the same elements. */
.counter-stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--wp--preset--spacing--40);
}
/* Block font-size (typography support) drives the number; default matches the
   home stats-band (4xl). Set a size on the block in the editor to adjust it. */
.counter-stat { display: flex; flex-direction: column; gap: 4px; font-size: var(--wp--preset--font-size--4-xl); }
.counter-stat__icon { margin-bottom: 8px; }
.counter-stat__icon svg { width: 32px; height: 32px; }
.counter-stat__number {
    font-family: var(--wp--preset--font-family--ppcirka);
    font-size: 1em; /* inherits the block's font-size */
    line-height: 1.05;
    color: var(--wp--preset--color--charcoal);
}
.counter-stat__label {
    font-size: var(--wp--preset--font-size--m);
    color: var(--wp--preset--color--charcoal);
}
.counter-stat__description {
    margin: 4px 0 0;
    font-size: var(--wp--preset--font-size--s);
    color: var(--wp--preset--color--charcoal);
    opacity: 0.75;
}

/* Details block (native core/details), themed as an accordion row: a right-side
   chevron in place of the default disclosure marker, a hairline divider, and
   comfortable answer spacing. Targets the native block class, so any Details
   block the editor inserts (e.g. the FAQ page) gets the look — no bespoke
   classes. The chevron/marker need pseudo-elements, which theme.json can't set. */
.wp-block-details { border-bottom: 0.5px solid var(--divider); }
.wp-block-details > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font-weight: 500; transition: opacity 0.2s; }
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::after { content: ""; flex-shrink: 0; width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -4px; opacity: 0.55; transition: transform 0.22s ease; }
.wp-block-details[open] > summary::after { transform: rotate(-135deg); margin-top: 2px; }
.wp-block-details > summary:hover { opacity: 0.65; }
.wp-block-details > :not(summary) { max-width: 680px; line-height: 1.75; }
/* The block gap would otherwise drop a 24px hole between the question and the
   answer when a row opens; the design runs them straight on (.faq-answer). */
.wp-block-details > summary + * { margin-top: 0; }
.wp-block-details > :not(summary):last-child { margin-bottom: 0; padding-bottom: 18px; }

/* Home events cards (hthc/home-events) — image/gradient header with badges,
   date · location, topic pills, read-more. Ported from the homepage design. */
.home-events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: var(--wp--preset--spacing--30); }
.ev-card { background: var(--wp--preset--color--white); border-radius: 14px; overflow: hidden; color: var(--wp--preset--color--charcoal); transition: transform 0.2s, box-shadow 0.2s; }
.ev-card:hover { transform: translateY(-3px); box-shadow: 0 10px 36px rgba(61, 84, 100, 0.14); }
.ev-card .ev-card-img { position: relative; aspect-ratio: 16 / 9; background-size: cover; background-position: center; }
.ev-badge { position: absolute; top: 12px; left: 12px; background: var(--wp--preset--color--coral); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; }
.ev-type { position: absolute; top: 12px; right: 12px; background: rgba(61, 84, 100, 0.7); color: var(--wp--preset--color--beige); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; backdrop-filter: blur(4px); }
.ev-card .card-body { padding: 18px 20px 22px; }
.ev-card .ev-meta { font-size: var(--wp--preset--font-size--2-xs); color: var(--wp--preset--color--muted); opacity: 1; margin: 0; }
.ev-card .card-title { font-family: var(--wp--preset--font-family--ppcirka); font-weight: 300; font-size: var(--wp--preset--font-size--l); line-height: 1.3; }
.ev-tag { font-size: 11px; padding: 3px 9px; border-radius: 20px; background: rgba(61, 84, 100, 0.08); color: var(--wp--preset--color--charcoal); }
.card-link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--wp--preset--font-size--s); font-weight: 500; color: var(--wp--preset--color--charcoal); text-decoration: none; transition: opacity 0.15s; }
.card-link:hover { opacity: 0.6; }
@media (max-width: 900px) { .home-events-grid { grid-template-columns: 1fr; } }

/* Rounded media corners. All three media blocks carry the radius as a block
   setting now — Image has it from core, Video and Embed get it in
   inc/blocks.php — and theme.json starts each of them at 10px, so the control
   always holds a number and a single block can be set to something else.

   Image puts its radius straight on the <img>. Video and Embed put theirs on
   the <figure>, which is the wrong box: the caption sits in there too, so the
   media itself would keep square corners. Inheriting hands the figure's value
   down to the element that actually paints, whatever it has been set to, and
   the embed wrapper needs overflow:hidden because the provider iframe is a
   separate, square box inside it. */
.wp-block-video video { border-radius: inherit; }
.wp-block-embed .wp-block-embed__wrapper { border-radius: inherit; overflow: hidden; }

/* Click-to-play YouTube (inc/blocks.php → assets/js/embed-facade.js). The
   button stands in for the iframe, so it has to fill the same box: core sizes
   responsive embeds by absolutely positioning the iframe inside a padded
   wrapper, and a plain button would ignore that and collapse. Without the
   aspect-ratio classes there is no padded wrapper to fill, so it carries 16/9
   itself. */
.wp-block-embed__wrapper .hthc-embed-facade { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: var(--wp--preset--color--charcoal, #3d5464); cursor: pointer; overflow: hidden; border-radius: inherit; }
.wp-has-aspect-ratio .wp-block-embed__wrapper .hthc-embed-facade { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.hthc-embed-facade-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease, opacity 0.2s ease; }
.hthc-embed-facade:hover .hthc-embed-facade-img { transform: scale(1.03); opacity: 0.9; }
/* The play badge is YouTube's shape but the theme's colour — a borrowed logo
   would be the one thing on the page pretending to be someone else's. */
.hthc-embed-facade-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 48px; border-radius: 14px; background: var(--wp--preset--color--coral, #e4572e); transition: background 0.18s ease, transform 0.18s ease; }
.hthc-embed-facade-play::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%); border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent var(--wp--preset--color--off-white, #fdeee3); }
.hthc-embed-facade:hover .hthc-embed-facade-play { transform: translate(-50%, -50%) scale(1.08); }
.hthc-embed-facade:focus-visible { outline: 2px solid var(--wp--preset--color--coral, #e4572e); outline-offset: 3px; }
.wp-has-aspect-ratio .hthc-embed-facade-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.hthc-embed-facade-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }