/**
 * Node Default component.
 */

.c--nodeDefault {
  --nodeDefault_aside-w: 21.25rem;
  --nodeDefault_gap: 3.75rem;
  --nodeDefault_top-bg: #F2F6F8;
  --cs-ref_bg: #E5F1FA;
  --cs-ref_accent: #5387AC;
  --cs-ref_border: #C2CED6;

  display: block;
}

/* Resource pages sit under the cream Knowledge library banner, so the top
   band follows that family instead of the case study blue: the banner tint
   (#F3E7CE, .field-banner-style--cream) lightened toward white. The accent
   (back link, action hover) is the Knowledge identity colour, Color/Earth. */
.c--nodeDefault--resource {
  --nodeDefault_top-bg: #FCF9F3;
  --cs-ref_accent: var(--c-earth);
}

/* Green-tinted top band used on the sponge measure page (vs. the blue case
   study default above) - same element, so this just overrides the one
   custom property .nodeDefault__top reads below. */
.c--nodeDefault--sponge-measure {
  --nodeDefault_top-bg: #F5F8F2;
}

.nodeDefault__inner {
  max-width: var(--container_m-w, 1140px);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- Header ---- */
.nodeDefault__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 2rem 2.5rem;
}

.nodeDefault__headline {
  flex: 1 1 60%;
  min-width: 0;
}

.nodeDefault__back {
  margin-block-end: 1rem;
}

.nodeDefault__back a {
    color: #0081CC;
    font-weight: 500;
    line-height: 1.5rem;
  }

.nodeDefault__back path {
    fill: #0081CC;
  }

.nodeDefault__back .c--breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--cs-ref_accent);
  font-size: 1rem;
  font-weight: 500;
}

.nodeDefault__back .c--breadcrumb svg {
  flex-shrink: 0;
}

.nodeDefault__back .c--breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.nodeDefault__back .c--breadcrumb a {
  color: inherit;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.nodeDefault__back .c--breadcrumb a:hover {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.nodeDefault__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}

.nodeDefault__title {
  margin: 0;
  font-family: var(--f-f_s, var(--f-f));
  font-size: max(2rem, min(4vw, 2.75rem));
  font-weight: 700;
  line-height: 1.10;
  letter-spacing: -0.01em;
}

.nodeDefault__badge {
  flex-shrink: 0;
  padding: 0.375rem 0.5rem;
  border: 1px solid #222222;
  border-radius: 0.625rem;
  background: #F5F5F5;
  font-family: var(--f-f);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.2;
  color: #222222;
}

.nodeDefault__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  padding-block-start: 0.5rem;
}

.nodeDefault__action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--body_c);
  font-family: var(--f-f);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.nodeDefault__action:hover {
  color: var(--cs-ref_accent);
}

/* ---- Top area (grey band, two columns) ---- */
.nodeDefault__top {
  background: linear-gradient(180deg, #FFFFFF 30%, var(--nodeDefault_top-bg) 60%);
  padding-block: 0 7.5rem;
}

.nodeDefault__grid {
  display: grid;
  grid-gap: 2.5rem;
}

/* On desktop the aside track overlays the top band and the sections (same
   grid cell), so the sticky aside can travel the whole body. The content and
   sections columns are capped to leave the aside's lane free. */
@media (min-width: 62rem) {
  .nodeDefault__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .nodeDefault__top {
    grid-area: 1 / 1;
  }

  .nodeDefault__sections {
    grid-area: 2 / 1;
  }

  .nodeDefault__aside-track {
    grid-area: 1 / 1 / 3 / 1;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    position: relative;
    z-index: 1;
    pointer-events: none;
  }

  .nodeDefault__aside {
    width: var(--nodeDefault_aside-w);
    pointer-events: auto;
  }

  .c--nodeDefault:not(.c--nodeDefault--no-sidebar) .nodeDefault__content, .c--nodeDefault:not(.c--nodeDefault--no-sidebar) .nodeDefault__sections-list {
    max-width: calc(100% - var(--nodeDefault_aside-w) - var(--nodeDefault_gap));
  }
}

/* Below lg the aside stacks between the top band and the sections. */
@media (max-width: 61.9375rem) {
  .c--nodeDefault:not(.c--nodeDefault--no-sidebar) .nodeDefault__top {
    padding-block-end: 2.5rem;
  }

  .nodeDefault__aside-track {
    padding-block: 2.5rem 0;
  }
}

.nodeDefault__heading {
  margin-bottom: 1rem;
  font-family: var(--f-f);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 130%;
  color: #222222;
}

.nodeDefault__content p {
  line-height: 1.6;
}

.nodeDefault__summary .field__label {
  display: none;
}

.nodeDefault__summary .field__item + .field__item {
  margin-block-start: 1em;
}

/* ---- Sidebar / quick reference ---- */
.nodeDefault__aside {
  align-self: start;
}

@media (min-width: 62rem) {
  .nodeDefault__aside {
    position: sticky;
    top: calc(var(--drupal-displace-offset-top, 0px) + var(--header_h) + 1.5rem);
  }
}

.nodeDefault__quickref {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.nodeDefault__quickref-heading {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #666666;
}

.nodeDefault__quickref-map .map-container {
  width: 100%;
  height: 13.75rem;
  border-radius: 1rem;
  overflow: hidden;
}

/* This map has a single pin (the case study's own location) and no popup
   content set (see CaseStudyPage::map()), so the marker isn't interactive -
   strip the pointer cursor/click affordance the module's JS still attaches. */
.nodeDefault__quickref-map .edw-marker {
  pointer-events: none;
}

/*
 * The card itself (.cs-quickref__card / __name / __row / __value) is the
 * "Case Study Quickref" component (components/cards/case-study-quickref),
 * reused as-is in the map pin popup. Only .nodeDefault__quickref-label stays
 * here too, since the Files block below reuses it for its own heading.
 */
.nodeDefault__quickref-label {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--cs-ref_accent);
  line-height: 1.125rem;
}

.nodeDefault__quickref-files {
  padding: 1.25rem 1.25rem;
  border: 1px solid #EEEEEE;
  border-radius: 1rem;
  background: #fff;
}

.nodeDefault__quickref-files .nodeDefault__quickref-label {
  display: block;
  margin-block-end: 0.25rem;
  color: #666666;
}

.nodeDefault__quickref-file-list {
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nodeDefault__quickref-file-list li {
    overflow: hidden;
    text-overflow: ellipsis;
  }

.nodeDefault__quickref-file-list a {
    color: #000000;
    font-size: 0.75rem;
    line-height: 1rem;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.nodeDefault__quickref-file-list a:hover {
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }

.nodeDefault__quickref-file-list a span {
      overflow: hidden;
      text-overflow: ellipsis;
    }

.nodeDefault__quickref-file-list a:before {
      content: '';
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="%23CC3333"><path d="M288-96q-33 0-52.5-19.5T216-168v-624q0-33 19.5-52.5T288-864h210.37q13.63 0 26.63 5 13 5 24 16l174 174q11 11 16 23.89t5 27.11v450q0 33-19.5 52.5T672-96H288Zm144-696H288v624h384v-408H540q-45 0-76.5-31.5T432-684v-108Zm72 6v102.48q0 14.52 10.35 25.02T540-648h102L504-786ZM396-240q-15.3 0-25.65-10.29Q360-260.58 360-275.79t10.35-25.71Q380.7-312 396-312h96q15.3 0 25.65 10.29Q528-291.42 528-276.21t-10.35 25.71Q507.3-240 492-240h-96Zm0-144q-15.3 0-25.65-10.29Q360-404.58 360-419.79t10.35-25.71Q380.7-456 396-456h168q15.3 0 25.65 10.29Q600-435.42 600-420.21t-10.35 25.71Q579.3-384 564-384H396Z"/></svg>');
      display: inline-block;
      width: 1.25rem;
      height: 1.25rem;
      background-position: center;
      background-repeat: no-repeat;
      flex-grow: 0;
      flex-shrink: 0;
    }

/* External links reuse the file-list panel, swapping the red document glyph for
   a link one.
   The icon is the design system's arrow rotated -45deg into the conventional
   "leaves the site" diagonal: same exported vector and stroke weight as the
   horizontal arrow used elsewhere, so the two stay visually consistent.
   Masked rather than set as a background image so it can take a theme colour -
   the exported SVG is stroked with currentColor, which an external SVG used as
   a background cannot resolve. */
.nodeDefault__quickref-links .nodeDefault__quickref-file-list a::before {
  background: var(--c-blue, #0081cc);
  -webkit-mask: url("../../icons/external-link.svg") no-repeat center;
  mask: url("../../icons/external-link.svg") no-repeat center;
  -webkit-mask-size: 1rem 1rem;
  mask-size: 1rem 1rem;
  transform: rotate(-45deg);
}

/* ---- Sections / accordion ---- */
.nodeDefault__sections {
  background: var(--body_bg, #fff);
  padding-block: 3rem 4.5rem;
}

.nodeDefault__sections-list {
  display: flex;
  flex-direction: column;
}

.nodeDefault__sections-toggle {
  align-self: flex-end;
  margin-block-end: 0.5rem;
  padding: 0.5rem 1.125rem;
  border: 1px solid var(--c-gray-200, #ccc);
  border-radius: 6.25rem;
  background: #fff;
  font-family: var(--f-f);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.nodeDefault__sections-toggle:hover {
  border-color: var(--cs-ref_accent);
  color: var(--cs-ref_accent);
}

/* The theme already styles .accordion.accordion-flush globally (summary size,
   colours, +/- icon). Only nodeDefault tweaks here. */
.nodeDefault__accordion {
  --accordion_bc: var(--c-gray-100, #e6e6e6);
  --accordion_icon_s: 1.375rem;
}

.nodeDefault__accordion .accordion-icon svg {
  transform: none !important;
}

/* Force full content height (the component clamps to 150px without
   interpolate-size support). */
.nodeDefault__accordion details[open]::details-content {
  height: auto !important;
  overflow: visible !important;
}

.nodeDefault__section-fields {
  display: grid;
  grid-gap: 1.25rem 2.5rem;
  max-width: 56.25rem;
}

@media (min-width: 36rem) {
  .nodeDefault__section-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.nodeDefault__section-fields .field {
  margin: 0;
}

.nodeDefault__section-fields .field__label {
  margin-block-end: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  color: #666666;
}

.nodeDefault__section-fields .field__item,
.nodeDefault__section-fields .field--type-text-long,
.nodeDefault__section-fields .field__items {
  line-height: 1.55;
}

.nodeDefault__section-subtitle {
  grid-column: 1 / -1;
  margin: 1.5rem 0 0.25rem;
  font-size: 1rem;
  font-weight: 700;
}

/* Paragraph reference fields rendered as tables. */
.nodeDefault__section-fields .field:has(.nodeDefault__paragraph-table) {
  grid-column: 1 / -1;
}

.nodeDefault__paragraph-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.nodeDefault__paragraph-table th,
.nodeDefault__paragraph-table td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--c-gray-100, #e6e6e6);
  text-align: start;
  vertical-align: top;
}

.nodeDefault__paragraph-table th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-gray-400, #6b7480);
  background: var(--c-gray-50, #f6f6f6);
}

.nodeDefault__paragraph-table td > * {
  margin: 0;
}

.nodeDefault__section-fields .nodeDefault__section-fields {
  grid-column: 1 / -1;
}

.nodeDefault__section-empty {
  margin: 0;
  color: var(--c-gray-400, #6b7480);
  font-style: italic;
}

/* "Related Case Studies" section: a grid of the shared node-teaser card. */
.nodeDefault__related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  grid-gap: 1.875rem;
  width: 100%;
}

/* Long-text / paragraph fields span the full width. */
.nodeDefault__section-fields .field--type-text-long,
.nodeDefault__section-fields .field--type-text-with-summary,
.nodeDefault__section-fields .field--type-entity-reference-revisions,
.nodeDefault__section-fields .field--name-field-sources,
.nodeDefault__section-fields .field--name-field-sponge-measures {
  grid-column: 1 / -1;
}

.nodeDefault__summary {
  font-size: 1.125rem;
  line-height: 150%;
  font-weight: 400;
  margin-bottom: 2.5rem;
}

/* ---- Paragraph content (Resource field_content) ---- */
/* Rich text from the editor: headings, lists, tables and captioned images,
   which otherwise only get the reboot defaults (no table rules at all). */
.nodeDefault__sections .paragraph--t--edw-rich-text {
  margin-block-end: 1.5rem;
  line-height: 1.6;
}
.nodeDefault__sections .paragraph--t--edw-rich-text h2:not(:first-child) {
    margin-block-start: 1.5em;
  }
.nodeDefault__sections .paragraph--t--edw-rich-text h3:not(:first-child) {
    margin-block-start: 1.5em;
  }
.nodeDefault__sections .paragraph--t--edw-rich-text h4:not(:first-child) {
    margin-block-start: 1.5em;
  }
.nodeDefault__sections .paragraph--t--edw-rich-text h5:not(:first-child) {
    margin-block-start: 1.5em;
  }
.nodeDefault__sections .paragraph--t--edw-rich-text h6:not(:first-child) {
    margin-block-start: 1.5em;
  }
.nodeDefault__sections .paragraph--t--edw-rich-text p, .nodeDefault__sections .paragraph--t--edw-rich-text ul, .nodeDefault__sections .paragraph--t--edw-rich-text ol, .nodeDefault__sections .paragraph--t--edw-rich-text table, .nodeDefault__sections .paragraph--t--edw-rich-text figure {
    margin-block-end: 1em;
  }
.nodeDefault__sections .paragraph--t--edw-rich-text table {
    width: 100%;
    font-size: 0.875rem;
  }
.nodeDefault__sections .paragraph--t--edw-rich-text th, .nodeDefault__sections .paragraph--t--edw-rich-text td {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--c-gray-100, #e6e6e6);
    text-align: start;
    vertical-align: top;
  }
.nodeDefault__sections .paragraph--t--edw-rich-text th {
    background: var(--c-gray-50, #f6f6f6);
    font-weight: 600;
  }
.nodeDefault__sections .paragraph--t--edw-rich-text figure {
    margin-inline: 0;
  }
.nodeDefault__sections .paragraph--t--edw-rich-text img {
    max-width: 100%;
    height: auto;
  }
.nodeDefault__sections .paragraph--t--edw-rich-text figcaption {
    margin-block-start: 0.5rem;
    font-size: 0.875rem;
    color: #666666;
  }

/* ---- Editor-embedded iframes (ckeditor_iframe) ---- */
/* The iframe button writes fixed width/height attributes, so cap the width and
   centre the box; an 800px embed would otherwise overflow the column on narrow
   screens. Covers both the description (summary) and the field_content
   paragraphs. */
.nodeDefault__summary iframe,
.nodeDefault__sections iframe {
  display: block;
  max-width: 100%;
  margin-inline: auto;
}

/* An image paragraph fills its column (the media display caps it at 480px). */
.nodeDefault__sections .paragraph--t--edw-image img {
  width: 100%;
  height: auto;
}