/**
 * Styling for the "Identification Details" node type (scanned-ID records).
 *
 * Problem this fixes: the global dark theme sets near-white body text
 * (#f7f7f7). On an identification_details node the field labels/values
 * inherited that color, and on an UNPUBLISHED node the article background is
 * Drupal's pink (#fff4f4) — so near-white text sat on near-white/pink and was
 * effectively illegible. The theme also shipped no node-type styling, so the
 * ID fields rendered as flush, zero-spacing full-width blocks.
 *
 * IMPORTANT scoping note: the Note field is a `comment`-type field. A posted
 * comment renders as `article.comment` containing its OWN `.field` elements
 * (comment-body, profile fields) and a links list. Earlier this stylesheet
 * used a descendant selector (`.node-... .field`) which leaked the row/grid
 * layout into those nested comment fields and pulled the "Add new comment"
 * link into the middle of the data grid. The record's own fields are direct
 * children of `.node__content`, so every layout rule below is anchored to
 * `.node__content > .field` and never reaches into the comment thread.
 *
 * Scope is limited to `.node--type-identification-details`. Bootstrap 4.6
 * breakpoints (md = 768px) match the theme's grid.
 */

.node--type-identification-details {
  /* Readable light surface regardless of published state, dark text for
     contrast against both white and the unpublished pink background. */
  background-color: #ffffff;
  color: #212529;
  padding: 1.5rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  max-width: 720px;
  margin: 1.5rem auto;
}

/* Keep Drupal's unpublished cue visible without the illegible pink wash:
   a clear left accent stripe instead. */
.node--type-identification-details.node--unpublished {
  border-left: 4px solid #dc3545;
}

/* --- The record's own fields (direct children of .node__content only) --- */
.node--type-identification-details .node__content > .field {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
  border-bottom: 1px solid #e9ecef;
}

.node--type-identification-details .node__content > .field:last-child {
  border-bottom: 0;
}

/* Labels — applies to the record's own field labels and harmlessly to any
   field__label, but color/weight is safe everywhere on the white surface. */
.node--type-identification-details .field__label {
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6c757d;
  margin-bottom: 0.125rem;
}

.node--type-identification-details .field__item,
.node--type-identification-details .field__items {
  color: #212529;
  font-size: 1rem;
  word-break: break-word;
}

/* Links (address, references, comment actions) use brand teal darkened for
   contrast against the white surface. */
.node--type-identification-details a {
  color: #2a8c8a;
}

.node--type-identification-details a:hover,
.node--type-identification-details a:focus {
  color: #57c4c1;
}

/* --- The Note (comment) field: thread + add-comment form --- */
.node--type-identification-details .field--name-field-note {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid #dee2e6;
}

/* The comment field's own label ("Note") should read as a section heading,
   not an uppercase micro-label. */
.node--type-identification-details .field--name-field-note > .field__label,
.node--type-identification-details .field--name-field-note > h2.title {
  text-transform: none;
  font-size: 1.25rem;
  font-weight: 700;
  color: #212529;
  margin-bottom: 0.75rem;
}

/* Posted comments: a light card, indented, clearly separated. Reset the
   nested comment-body field so it is NOT treated as a data row. */
.node--type-identification-details article.comment {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.node--type-identification-details article.comment .field {
  display: block;
  border-bottom: 0;
  padding: 0;
}

/* The comment article and ALL its descendants must stay within the card.
   The theme/classy default makes .comment__meta a `display:flex` footer that
   resolves to the full viewport width (1920px observed) — at wide viewports
   its content ("Submitted by … on …") escaped the card and floated to the far
   right. Force block flow and clamp width so it can never exceed the card. */
.node--type-identification-details article.comment,
.node--type-identification-details article.comment * {
  max-width: 100%;
}

.node--type-identification-details .comment__meta {
  display: block;
  width: auto;
  float: none;
  font-size: 0.8125rem;
  color: #6c757d;
  margin-bottom: 0.25rem;
}

/* The profile/submitted line inside the meta footer. */
.node--type-identification-details .comment__meta .comment__submitted,
.node--type-identification-details .comment__meta .profile {
  display: inline;
  width: auto;
  float: none;
}

.node--type-identification-details .comment .links.inline {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 1rem;
  font-size: 0.875rem;
}

.node--type-identification-details .comment .links.inline li {
  margin: 0;
}

/* The add-comment form, separated from the posted thread above it. */
.node--type-identification-details .comment-form__title,
.node--type-identification-details .comment-form {
  margin-top: 1rem;
}

/* The comment field renders BOTH a standalone ".comment-add" link AND the full
   inline add-comment form below it. The link is redundant here (the form is
   always shown) and, being unstyled/inline, it floated into the data-grid
   column with no spacing. Hide it; the form below is the canonical entry. */
.node--type-identification-details .comment-add {
  display: none;
}

/* Two-column label/value grid on wider viewports for the record's scalar ID
   fields, single column on mobile (below Bootstrap md = 768px). Anchored to
   direct children of .node__content and explicitly excludes the comment field
   and the multi-line address. */
@media (min-width: 768px) {
  .node--type-identification-details .node__content > .field:not(.field--name-field-note):not(.field--name-field-address) {
    flex-direction: row;
    align-items: baseline;
  }

  .node--type-identification-details .node__content > .field:not(.field--name-field-note):not(.field--name-field-address) > .field__label {
    flex: 0 0 200px;
    margin-bottom: 0;
  }
}