/*
 * Insights: blog index (templates/home.html), webinars page (templates/insights-webinars.html)
 * and article (templates/single-post.html).
 * Plain CSS on purpose: this theme copy has no build step. Loaded by includes/insights.php.
 *
 * Margin resets on "> *" are prefixed with .nh-insights / .nh-article on purpose:
 * the theme's inline global styles add `:root :where(.is-layout-flow) > * { margin-block-start: 20px }`,
 * which has the same specificity as a single class and loads later.
 */

.nh-insights,
.nh-article {
  --nh-insights-border: var(--nh-color-neutral-4, #e3e9eb);
  --nh-insights-muted: var(--nh-color-neutral, #536772);
  --nh-insights-ink: var(--nh-color-secondary, #0c1a3d);
  --nh-insights-accent: var(--nh-color-primary, #3559c7);
  --nh-insights-chip-bg: color-mix(in srgb, var(--nh-insights-accent) 10%, #fff);
  --nh-insights-radius: 8px;
  --nh-insights-max: 1280px;
  /*
   * Armin Grotesk sits high in its line box: there is ~0.2em more room under
   * the baseline than above the caps. Moving this much padding from the bottom
   * to the top centres the text in pills and chips.
   */
  --nh-insights-text-nudge: 0.1em;
  /* .wp-site-blocks is a centred flex column; without this, main sizes to its content. */
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  color: var(--nh-insights-ink);
}

/* ---------- Pills (profession, outcome) and tag chips ---------- */

.nh-insights-pills,
.nh-insights-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

.nh-insights-pill,
.nh-insights-chip {
  display: inline-flex;
  padding: calc(3px + var(--nh-insights-text-nudge)) 10px calc(3px - var(--nh-insights-text-nudge));
  border-radius: 9999px;
  font-weight: 600;
  text-decoration: none;
  color: var(--nh-insights-accent);
}

.nh-insights-pill {
  border: 1px solid color-mix(in srgb, var(--nh-insights-accent) 30%, #fff);
  background: #fff;
}

.nh-insights-pill.is-nh_outcome {
  border-color: color-mix(in srgb, var(--nh-color-tertiary, #4a7963) 35%, #fff);
  color: var(--nh-color-tertiary, #4a7963);
}

.nh-insights-chip {
  /* Same box as the bordered pills, so mixed rows line up. */
  border: 1px solid transparent;
  background: var(--nh-insights-chip-bg);
}

.nh-insights-pill:hover,
.nh-insights-chip:hover {
  background: color-mix(in srgb, currentColor 12%, #fff);
}

/* ---------- Index: intro ---------- */

.nh-insights__intro,
.nh-insights__layout {
  box-sizing: border-box;
  max-width: var(--nh-insights-max);
  margin-inline: auto;
  padding-inline: 32px;
}

.nh-insights__intro {
  padding-block: 64px 16px;
}

.nh-insights__eyebrow {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nh-insights-accent);
}

.nh-insights__title {
  margin: 0 0 12px;
}

.nh-insights__lead {
  max-width: 64ch;
  margin: 0;
  font-size: 18px;
  color: var(--nh-insights-muted);
}

/* ---------- Index: sidebar + results ---------- */

.nh-insights__layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "sidebar search"
    "sidebar results";
  gap: 32px 40px;
  align-items: start;
  padding-block: 24px 96px;
}

/* An empty listing renders no search or filters (nh_insights_listing_is_empty): one column. */
.nh-insights__layout:not(:has(.nh-insights-filters)) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "results";
}

.nh-insights__layout:not(:has(.nh-insights-filters)) .nh-insights__sidebar {
  display: none;
}

.nh-insights-search {
  grid-area: search;
}

.nh-insights__sidebar {
  grid-area: sidebar;
}

.nh-insights__results {
  grid-area: results;
}

.nh-insights .nh-insights__layout > * {
  margin-block: 0;
}

/*
 * The theme sets overflow-x: hidden on .wp-site-blocks, which makes it a scroll
 * container and stops position: sticky from following the page. clip hides
 * horizontal overflow the same way without creating a scroll container.
 */
.wp-site-blocks:has(.nh-insights__sidebar) {
  overflow-x: clip;
  overflow-y: visible;
}

/*
 * The sidebar stays put below the floating site header (110px) while the cards
 * scroll; when the filters are taller than the screen they scroll inside it.
 */
.nh-insights__sidebar {
  position: sticky;
  top: 110px;
  max-height: calc(100vh - 134px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--nh-color-neutral-3, #ced1d3) transparent;
  /* Room so focus outlines and the scrollbar don't clip the controls. */
  padding: 2px 10px 24px 2px;
}

.nh-insights .nh-insights__sidebar > * {
  margin-block: 0;
}

/* ---------- Index: search bar + profession chips (above the cards) ---------- */

.nh-insights-search {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nh-insights .nh-insights-search > * {
  margin-block: 0;
}

.nh-insights-search__field {
  position: relative;
}

.nh-insights-search__field svg {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nh-insights-muted);
  pointer-events: none;
}

.nh-insights-search__field input {
  box-sizing: border-box;
  width: 100%;
  padding: 16px 18px 16px 50px;
  border: 1px solid var(--nh-color-neutral-3, #ced1d3);
  border-radius: var(--nh-insights-radius);
  font: inherit;
  font-size: 17px;
  color: var(--nh-insights-ink);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.nh-insights-search__field input:focus {
  border-color: var(--nh-insights-accent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nh-insights-accent) 20%, transparent);
}

/* Professions as toggle chips. */
.nh-insights-filters__group--chips {
  margin: 0;
}

.nh-insights-filters__group--chips legend {
  /* Visually hidden: the chips speak for themselves. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.nh-insights-filters__group--chips .nh-insights-filters__options {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.nh-insights-filters__group--chips .nh-insights-filters__option {
  position: relative;
  gap: 0;
  padding: calc(7px + var(--nh-insights-text-nudge)) 14px calc(7px - var(--nh-insights-text-nudge));
  border: 1px solid var(--nh-insights-border);
  border-radius: 9999px;
  font-weight: 500;
  color: var(--nh-insights-ink);
  background: #fff;
}

.nh-insights-filters__group--chips .nh-insights-filters__option:hover {
  border-color: var(--nh-insights-accent);
  background: #fff;
}

/* The checkbox stays focusable and clickable, but the chip itself shows the state. */
.nh-insights-filters__group--chips .nh-insights-filters__option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.nh-insights-filters__group--chips .nh-insights-filters__option:has(input:checked) {
  border-color: var(--nh-insights-accent);
  color: #fff;
  background: var(--nh-insights-accent);
}

.nh-insights-filters__group--chips .nh-insights-filters__option:has(input:focus-visible) {
  outline: 2px solid var(--nh-insights-accent);
  outline-offset: 2px;
}

.nh-insights-filters__group--chips .nh-insights-filters__more {
  padding: 8px 6px;
}

/* ---------- Index: sidebar groups ---------- */

.nh-insights-filters__option input:focus-visible,
.nh-insights-filters__more:focus-visible {
  outline: 2px solid var(--nh-insights-accent);
  outline-offset: 2px;
}

/* "More ..." per group: a text button after the options. */
.nh-insights-filters__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--nh-insights-accent);
  background: none;
  cursor: pointer;
}

.nh-insights-filters__more::after {
  content: "+";
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.nh-insights-filters__more[aria-expanded="true"]::after {
  content: "\2212";
}

.nh-insights-filters__more:hover {
  text-decoration: underline;
}

.nh-insights-filters__more[hidden] {
  display: none;
}

/* With JS, advanced options wait for their group's "More ..."; without it they're all shown. */
.nh-insights.is-enhanced .nh-insights-filters__group:not(.is-expanded) .is-advanced,
.nh-insights.is-enhanced .nh-insights-filters__group:not(.is-expanded) .is-overflow {
  display: none;
}

/* "All" only works with JS (it has no value to submit). */
.nh-insights:not(.is-enhanced) .is-all {
  display: none;
}

.nh-insights-filters__group {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  min-width: 0;
}

.nh-insights-filters__group legend {
  margin-bottom: 10px;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nh-insights-filters__options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nh-insights-filters__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--nh-insights-muted);
  cursor: pointer;
}

.nh-insights-filters__option:hover {
  background: var(--nh-color-neutral-5, #eff2f3);
}

.nh-insights-filters__option input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--nh-insights-accent);
  cursor: pointer;
}

.nh-insights-filters__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nh-insights-filters__apply,
.nh-insights-filters__clear {
  padding: 8px 14px;
  border: 1px solid var(--nh-insights-border);
  border-radius: 3px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: var(--nh-insights-muted);
  background: #fff;
  cursor: pointer;
}

.nh-insights-filters__apply {
  border-color: var(--nh-insights-accent);
  color: #fff;
  background: var(--nh-insights-accent);
}

/* With JS, filters apply as you click. */
.nh-insights.is-enhanced .nh-insights-filters__apply {
  display: none;
}

.nh-insights-filters__clear[hidden] {
  display: none;
}

.nh-insights__results {
  min-width: 0;
  transition: opacity 0.15s;
}

.nh-insights__results[aria-busy="true"] {
  opacity: 0.5;
}

.nh-insights-count {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--nh-insights-muted);
}

.nh-insights__empty {
  padding: 64px 0;
  text-align: center;
  color: var(--nh-insights-muted);
}

/* ---------- Index: cards ---------- */

.nh-insights .nh-insights__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nh-insights__grid > li {
  display: flex;
  margin: 0;
}

.nh-insights-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--nh-insights-border);
  border-radius: var(--nh-insights-radius);
  background: #fff;
  transition: box-shadow 0.2s, transform 0.2s;
}

.nh-insights-card:hover {
  box-shadow: 0 6px 24px rgb(12 26 61 / 8%);
  transform: translateY(-2px);
}

.nh-insights .nh-insights-card > * {
  margin-block: 0;
}

.nh-insights-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 0;
  /* Placeholder for posts without a featured image. */
  background: var(--nh-color-neutral-4, #e3e9eb) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23a1a9ac' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.6'/%3E%3Cpath d='m21 15-4.5-4.5L7 21'/%3E%3C/svg%3E") center / 28px no-repeat;
}

.nh-insights-card__media .wp-block-post-featured-image {
  position: absolute;
  inset: 0;
  margin: 0;
}

.nh-insights-card__media .wp-block-post-featured-image a,
.nh-insights-card__media .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nh-insights-card__media .nh-insights-pills {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 1;
  /* The theme's flow layout adds a top margin to every child after the first. */
  margin: 0;
}

.nh-insights-card__media .nh-insights-pill {
  box-shadow: 0 1px 3px rgb(12 26 61 / 12%);
}

.nh-insights-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
}

.nh-insights .nh-insights-card__body > * {
  margin-block: 0;
}

.nh-insights .nh-insights-card__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: break-word;
  hyphens: auto;
}

.nh-insights-card__title a {
  color: inherit;
  text-decoration: none;
}

.nh-insights-card__title a:hover {
  color: var(--nh-insights-accent);
}

.nh-insights-card__excerpt {
  flex: 1;
  margin: 0;
  font-size: 14px;
  color: var(--nh-insights-muted);
}

.nh-insights-card__excerpt p {
  margin: 0;
}

.nh-insights .nh-insights-cta {
  align-self: flex-start;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--nh-insights-accent);
}

.nh-insights-cta::after {
  content: " \2192";
}

/* ---------- Webinars: upcoming ---------- */

.nh-insights__section {
  box-sizing: border-box;
  max-width: var(--nh-insights-max);
  margin-inline: auto;
  padding: 24px 32px 0;
}

.nh-insights .nh-insights__section > * {
  margin-block: 0;
}

.nh-insights .nh-insights__section-title,
.nh-insights .nh-insights-upcoming__title {
  margin: 0 0 20px;
  font-size: 28px;
}

.nh-insights .nh-insights-upcoming {
  margin-bottom: 56px;
}

.nh-insights-upcoming__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nh-insights-upcoming__item {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 24px;
  border-radius: var(--nh-insights-radius);
  background: var(--nh-color-neutral-5, #eff2f3);
}

.nh-insights-upcoming__date {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 72px;
  border-radius: var(--nh-insights-radius);
  color: #fff;
  background: var(--nh-insights-accent);
}

.nh-insights-upcoming__day {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.nh-insights-upcoming__month {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.nh-insights-upcoming__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.nh-insights .nh-insights-upcoming__name {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

.nh-insights-upcoming__name a {
  color: inherit;
  text-decoration: none;
}

.nh-insights-upcoming__name a:hover {
  color: var(--nh-insights-accent);
}

.nh-insights-upcoming__when {
  flex: 1;
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--nh-insights-muted);
}

.nh-insights-upcoming__when::first-letter {
  text-transform: uppercase;
}

/* ---------- Index: load more ---------- */

.nh-insights__more {
  margin-top: 48px;
}

.nh-insights__more .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: var(--nh-insights-ink);
  background: var(--nh-color-neutral-5, #eff2f3);
}

.nh-insights__more .wp-block-query-pagination-next::after {
  content: "+";
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

.nh-insights__more .wp-block-query-pagination-next:hover {
  background: var(--nh-insights-border);
}

.nh-insights__more[aria-busy="true"] .wp-block-query-pagination-next {
  opacity: 0.6;
  pointer-events: none;
}

/* ---------- Article: header ---------- */

.nh-article__hero {
  margin: 0;
  background: var(--nh-color-neutral-5, #eff2f3);
}

.nh-article__hero-inner {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  max-width: var(--nh-insights-max);
  margin-inline: auto;
  padding: 72px 32px;
}

/* No featured image: let the heading use the full width. */
.nh-article__hero-inner:not(:has(.nh-article__image)) {
  grid-template-columns: minmax(0, 860px);
}

.nh-article .nh-article__hero-inner > *,
.nh-article .nh-article__heading > * {
  margin-block: 0;
}

.nh-article__heading {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.nh-article .nh-article__title {
  margin: 0;
  line-height: 1.1;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Shown at its own aspect ratio: never cropped to a forced format. */
.nh-article__image {
  margin: 0;
}

.nh-article__image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  border-radius: 16px;
}

.nh-insights-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}

.nh-insights-breadcrumbs li + li::before {
  content: "\203A";
  margin-right: 8px;
  color: var(--nh-insights-muted);
}

.nh-insights-breadcrumbs a {
  text-decoration: none;
  color: var(--nh-insights-ink);
}

.nh-insights-breadcrumbs a:hover {
  color: var(--nh-insights-accent);
}

.nh-insights-meta p {
  margin: 0;
}

.nh-insights-meta__author {
  font-weight: 600;
}

.nh-insights-meta__line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  font-size: 15px;
  color: var(--nh-insights-muted);
}

.nh-insights-meta__line > span + span::before {
  content: "\00b7";
  margin-inline: 10px;
}

.nh-insights-meta__line a {
  color: inherit;
}

.nh-article__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.nh-article .nh-article__chips > * {
  margin: 0;
}

.nh-article__chips:not(:has(a)) {
  display: none;
}

/* ---------- Article: body ---------- */

.nh-article__body {
  padding: 56px 32px 96px;
  font-size: 17px;
  line-height: 1.7;
}

/*
 * Article typography, pinned to Terapeut Booking's post styles. Physica and
 * Psykbase style posts through a WPCode snippet instead ("WP POSTS CSS":
 * system font, bold headings), so without this the same template would look
 * different per brand. "body.single-post" outranks both sources.
 */
body.single-post .nh-article .nh-article__body {
  font-family: "Armin Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
  font-weight: 250;
  line-height: 1.8;
}

body.single-post .nh-article .nh-article__body :is(h1, h2, h3, h4, h5, h6) {
  margin: 1.8em 0 0.6em;
  font-family: "Armin Grotesk", sans-serif;
  font-weight: 300;
  line-height: 1.1;
  text-wrap: balance;
}

body.single-post .nh-article .nh-article__body h2 {
  font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
}

body.single-post .nh-article .nh-article__body h3 {
  font-size: clamp(1.5rem, 1.125rem + 1.25vw, 2rem);
}

body.single-post .nh-article .nh-article__body h4 {
  font-size: clamp(1.25rem, 1rem + 0.75vw, 1.5rem);
}

/*
 * The theme makes post content a flex column and centres each child with
 * auto margins, so a child narrower than the column (a short paragraph, a
 * list, a heading with its own max-width) drifts towards the middle. That hits
 * classic-editor posts hardest: their bare <p>/<ul>/<h2> shrink to their text.
 * Every child spans the column instead; floated and wide/full blocks keep
 * their own sizing.
 */
.nh-article .nh-article__body > :not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.nh-article__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--nh-insights-radius);
}

/* Video and audio (core Video, Audio and Embed blocks). */
.nh-article__body .wp-block-embed.is-type-video .wp-block-embed__wrapper,
.nh-article__body .wp-block-video video {
  overflow: hidden;
  border-radius: var(--nh-insights-radius);
}

.nh-article__body .wp-block-audio audio {
  width: 100%;
}

/*
 * Pull quote (core Pullquote block) in the brand style of the NH Blockquote
 * card. Unaligned it's a full-width card; "Align right" floats it beside the
 * text as the sidebar variant, reaching into the margin on wide screens.
 * Selectors start with ".nh-article .nh-article__body" to beat the theme's
 * "body.single-post .entry-content blockquote/figure/.alignright" rules.
 */
.nh-article .nh-article__body figure.wp-block-pullquote {
  position: relative;
  box-sizing: border-box;
  margin-block: 2.5em;
  padding: 64px 40px 40px;
  border: 0;
  border-radius: 28px;
  text-align: left;
  color: #fff;
  background: var(--nh-insights-accent);
}

.nh-article .nh-article__body figure.wp-block-pullquote::before {
  content: "\201C";
  position: absolute;
  top: 18px;
  left: 36px;
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  color: #93aeff;
}

/*
 * The theme lays post content out as a flex column, where floats don't work.
 * Posts with a floated pull quote go back to normal flow so text wraps around it.
 */
.nh-article .nh-article__body:has(> .wp-block-pullquote.alignright, > .wp-block-pullquote.alignleft) {
  display: flow-root;
}

.nh-article .nh-article__body .wp-block-pullquote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
  color: inherit;
}

.nh-article .nh-article__body .wp-block-pullquote p {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.4;
  color: inherit;
}

.nh-article .nh-article__body .wp-block-pullquote cite {
  display: block;
  margin-top: 24px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #c9d6ff;
}

.nh-article .nh-article__body figure.wp-block-pullquote.alignright,
.nh-article .nh-article__body figure.wp-block-pullquote.alignleft {
  width: 320px;
  max-width: 45%;
  margin-block: 0.4em 1.5em;
  padding: 52px 28px 28px;
  border-radius: 20px;
}

.nh-article .nh-article__body figure.wp-block-pullquote.alignright {
  float: right;
  margin-inline: 2em 0;
}

.nh-article .nh-article__body figure.wp-block-pullquote.alignleft {
  float: left;
  margin-inline: 0 2em;
}

.nh-article .nh-article__body figure.wp-block-pullquote.alignright::before,
.nh-article .nh-article__body figure.wp-block-pullquote.alignleft::before {
  top: 12px;
  left: 26px;
  font-size: 56px;
}

.nh-article .nh-article__body figure.wp-block-pullquote.alignright p,
.nh-article .nh-article__body figure.wp-block-pullquote.alignleft p {
  font-size: 20px;
}

@media (min-width: 1200px) {
  .nh-article .nh-article__body figure.wp-block-pullquote.alignright {
    margin-right: -160px;
  }

  .nh-article .nh-article__body figure.wp-block-pullquote.alignleft {
    margin-left: -160px;
  }
}

/* ---------- Responsive ---------- */

.nh-insights-filters__toggle {
  display: none;
}

@media (max-width: 1100px) {
  .nh-insights .nh-insights__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .nh-article__hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding-block: 48px;
  }
}

@media (max-width: 860px) {
  .nh-insights__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "search"
      "sidebar"
      "results";
    gap: 24px;
  }

  .nh-insights__sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
  }

  .nh-insights-filters__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--nh-insights-border);
    border-radius: 3px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--nh-insights-ink);
    background: #fff;
    cursor: pointer;
  }

  .nh-insights-filters__toggle::after {
    content: "\25BE";
  }

  .nh-insights__sidebar.is-open .nh-insights-filters__toggle::after {
    content: "\25B4";
  }

  /* Only collapse when the toggle exists (i.e. JS ran). */
  .nh-insights.is-enhanced .nh-insights__sidebar:not(.is-open) .nh-insights-filters {
    display: none;
  }

  .nh-insights.is-enhanced .nh-insights-filters {
    margin-top: 16px;
  }

  .nh-article .nh-article__body figure.wp-block-pullquote.alignright,
  .nh-article .nh-article__body figure.wp-block-pullquote.alignleft {
    float: none;
    width: auto;
    max-width: none;
    margin-inline: 0;
  }
}

@media (max-width: 600px) {
  .nh-insights__intro,
  .nh-insights__layout,
  .nh-article__hero-inner,
  .nh-article__body {
    padding-inline: 20px;
  }

  .nh-insights .nh-insights__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}