/* Disclosures Embed — minimal layout for stacked legal/disclosure text.
   See disclosures_hubdb_module_spec.md in this folder for the
   field/HubL logic this pairs with.

   Text size/color are no longer hardcoded here — they come from the
   Style group's text_style/text_color fields (module.style.text_style,
   module.style.text_color), which apply one of the rich-text--*
   classes below to the wrapper. Those classes are copied straight from
   the rich text module's own rich-text-presets.css so the two modules
   stay visually consistent; keep them in sync if that palette ever
   changes. The title uses its own heading_style/heading_color fields
   in the same Style group instead — see the Preset Title Style block
   further down this file. */

.disclosures-embed {
  display: flex;
  flex-direction: column;
  /* Spacing between disclosures now comes from .disclosure-item's own
     padding + border-bottom below (same convention as the FAQ and
     Accordion modules' item lists), not a container gap — otherwise
     the two would stack and leave uneven, doubled-up space. */
  gap: 0;
}

.disclosure-item {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 16px 0;
  /* Line color: driven by the --disclosure-line-color custom property,
     set per swatch by the .disclosures-embed--line-* classes further
     down this file (from Style > Line color). Falls back to the same
     #e5e5e5 hairline the FAQ/Accordion modules use by default when
     Line color is left on Default (no class applied at all). */
  border-bottom: 1px solid var(--disclosure-line-color, #e5e5e5);
}

/* Every group of items only gets bottom borders from the rule above,
   so the very top of the list has no line. Add one to the first item
   so the whole list reads as a fully bordered block, top and bottom —
   same fix the FAQ module uses for its own item list. */
.disclosure-item:first-child {
  border-top: 1px solid var(--disclosure-line-color, #e5e5e5);
}

/* "No line": a real border:0 override, not just a transparent color —
   removes the border box entirely (no 1px reserved) rather than
   leaving it in place but invisible. Higher specificity than the
   plain .disclosure-item/.disclosure-item:first-child rules above
   (two classes vs. one), so this wins regardless of source order.
   Padding also drops from 16px to 8px — the wider spacing was sized
   to give the divider line room to breathe; with no line to separate
   items, that much whitespace just reads as a gap with nothing
   marking it, so this tightens it up instead. */
.disclosures-embed--line-none .disclosure-item {
  border-bottom: 0;
  padding: 8px 0;
}
.disclosures-embed--line-none .disclosure-item:first-child {
  border-top: 0;
}

/* Line color swatches — same 13 neutral/utility hex values as Text
   Color above, reused rather than duplicated with new names, but kept
   as a separate field since a divider line and body text don't need
   to change together. Sets the custom property; .disclosure-item
   above is what actually reads it. */
.disclosures-embed--line-black { --disclosure-line-color: var(--color-black, #000000); }
.disclosures-embed--line-dark-gray { --disclosure-line-color: var(--color-dark-gray, #444444); }
.disclosures-embed--line-navy { --disclosure-line-color: var(--color-navy, #021947); }
.disclosures-embed--line-heather { --disclosure-line-color: var(--color-heather, #D4D0C9); }
.disclosures-embed--line-white { --disclosure-line-color: var(--color-white, #FFFFFF); }
.disclosures-embed--line-heather-2 { --disclosure-line-color: var(--color-heather-2, #AAA6A1); }
.disclosures-embed--line-heather-3 { --disclosure-line-color: var(--color-heather-3, #6E6C69); }
.disclosures-embed--line-mist { --disclosure-line-color: var(--color-mist, #BFC9DB); }
.disclosures-embed--line-cloud { --disclosure-line-color: var(--color-cloud, #9CB3CC); }
.disclosures-embed--line-dusk { --disclosure-line-color: var(--color-dusk, #6B87A3); }
.disclosures-embed--line-slate { --disclosure-line-color: var(--color-slate, #425B75); }
.disclosures-embed--line-gray-20 { --disclosure-line-color: var(--color-gray-20, #C3CCCC); }
.disclosures-embed--line-gray-40 { --disclosure-line-color: var(--color-gray-40, #9EA8A8); }
.disclosures-embed--line-gray-60 { --disclosure-line-color: var(--color-gray-60, #687070); }

/* No titles mode: content still stacks the same way, just without the
   heading — no layout change needed, .disclosure-title simply isn't
   rendered by module.html in that case. */

/* Preview-draft indicator — module.html only adds this class when
   BOTH `preview` is true (HubSpot preview or the content editor) AND
   this specific row has draft_headline/draft_content set, so it never
   appears for real visitors and never appears on a row with no draft
   content pending. A left accent bar rather than anything louder,
   since this is a reviewer convenience, not a visitor-facing state.
   Deliberately not compensating the rest of .disclosure-item's padding
   to keep content perfectly flush — this is a dev/reviewer affordance,
   not something that needs to be pixel-exact, and it keeps this one
   rule simple regardless of whatever Line color (including "No line")
   is otherwise doing to this same element's padding. */
.disclosure-item.disclosure-item--previewing-draft {
  border-left: 3px solid #F5A623;
  /* Two classes combined (vs. the single-class selector above) so this
     reliably beats .disclosures-embed--line-none .disclosure-item's
     `padding: 8px 0` shorthand when "No line" is also selected —
     otherwise that rule's implicit padding-left: 0 would win and this
     gap would silently disappear in that combination. */
  padding-left: 16px;
}

.disclosure-number {
  flex: 0 0 auto;
  font-weight: 600;
  min-width: 1.5em;
}

/* Numbering style hook: .disclosures-embed--numbering-arabic/roman/
   alpha/symbol is always present when Number the list is on (see
   module.html). No style difference by default — symbol markers
   (*, †, ‡...) currently share the same sizing/spacing as digits and
   letters via .disclosure-number above. Add scheme-specific rules
   here if symbols end up needing different treatment (e.g. slightly
   larger, since * and † read smaller than a digit at the same
   font-size), e.g.:
   .disclosures-embed--numbering-symbol .disclosure-number { ... } */

.disclosure-body {
  flex: 1 1 auto;
  min-width: 0;
}

.disclosure-title {
  margin: 0 0 4px;
  /* Fallback size/weight only — in practice Style > Heading Style
     always adds a heading--* class too (defaults to H6 - Phonic),
     which overrides these via the rules further down this file. These
     just cover the edge case where heading_style somehow ends up blank. */
  font-size: 1em;
  font-weight: 600;
  /* `.disclosure-title` is an <h3> — sitewide theme CSS commonly sets
     its own default color for heading tags, which can beat a color
     merely inherited from an ancestor div (that's what made a navy
     preset color invisible against a navy section background: the
     paragraph text picked up the preset correctly, but the title's
     own theme heading-color rule won instead). `inherit` forces it
     back to whatever color the wrapper's preset class set — and also
     acts as the fallback for Style > Heading Color when it's left on
     "Match body text color" (see the heading--color-* rules near the
     bottom of this file, which override this when a title color is
     explicitly chosen). */
  color: inherit;
}

.disclosure-content {
  margin: 0;
}

.disclosure-content > *:first-child {
  margin-top: 0;
}

.disclosure-content > *:last-child {
  margin-bottom: 0;
}

/* ================================================================
   Accordion display style — copied from the sitewide Accordion
   module's own module.css (accordion.module), under THIS module's
   own class names (disclosure-item--accordion / disclosure-accordion-
   icon) rather than the shared ones (accordion-item--accordion /
   accordion-icon) it was copied from.

   Deliberate, not an oversight: the Accordion module's own module.js
   does a blanket document.querySelectorAll('.accordion-item--accordion')
   with no per-module scoping. If this module reused that exact class
   name, a page running both the generic Accordion module AND this
   Disclosures module (in Accordion display style) would have the
   Accordion module's own analytics script ALSO fire — and double-
   count — on every disclosure toggle, mislabeled as generic accordion
   engagement. Same reasoning the FAQ module already followed
   (.faq-item--accordion, not .accordion-item--accordion) despite
   being the exact same visual pattern. See disclosures-embed-module's
   own module.js for the disclosure-specific tracking script this
   pairs with.

   No font-weight/padding/border copied over from the source file's
   .accordion-item-level rules — those are handled by .disclosure-item
   above instead (padding, line color), and font-weight comes from
   whatever Heading Style preset is chosen rather than a hardcoded
   600, so summary text stays consistent with the title look used in
   Always-open mode. #}

.disclosure-item--accordion {
  display: block !important;
  width: 100% !important;
  flex: 1 1 auto;
  min-width: 0;
}

/* !important throughout this rule: the live HTML output was confirmed
   correct (right classes, no stray elements, single icon) and this
   exact rule was confirmed present and matching in the loaded
   stylesheet via DevTools — yet the marker still rendered and the
   icon still sat immediately after the text instead of flush right.
   That combination only makes sense if something else on the page
   (most likely a sitewide CSS reset targeting bare `summary`/`details`
   elements) is winning despite matching lower specificity than
   expected. !important forces it rather than chasing an invisible
   competing rule further. */
.disclosure-item--accordion summary {
  cursor: pointer !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
}
/* Two different ways browsers render (and need suppressing) the
   native disclosure triangle — bug hit live: BOTH showed up at once
   ("double arrows"), one immediately before the title text and one
   right after it, alongside our own Font Awesome icon. `list-style:
   none` above handles older engines; -webkit-details-marker covers
   Safari/older Chrome; ::marker is the newer standard pseudo-element
   modern Chrome/Firefox also render for <summary>. Forcing `display:
   flex !important` on `summary` above should already remove the
   marker box entirely on its own (the native marker only generates
   when `summary` computes to `display: list-item`), but these three
   stay in as a defensive backup in case something re-forces list-item
   behavior specifically. */
.disclosure-item--accordion summary::-webkit-details-marker {
  display: none !important;
}
.disclosure-item--accordion summary::marker {
  content: "" !important;
  display: none !important;
}

/* Title text grows to fill the remaining space in the flex row so
   the icon is genuinely flush against the far right edge, not just
   sitting immediately after however wide the text happens to be. */
.disclosure-item--accordion summary .disclosure-title {
  flex: 1 1 auto;
  min-width: 0;
}

/* Two separate icons, toggled via the [open] attribute — an actual
   icon swap, not a CSS rotation trick. Assumes Font Awesome is
   already loaded sitewide, same assumption every other module with
   an accordion option in this project makes. */
.disclosure-item--accordion .disclosure-accordion-icon--open {
  display: none;
}
.disclosure-item--accordion[open] .disclosure-accordion-icon--closed {
  display: none;
}
.disclosure-item--accordion[open] .disclosure-accordion-icon--open {
  display: inline-block;
}

.disclosure-item--accordion .disclosure-content {
  margin-top: 8px;
}

/* Text Style / Text Color / Heading Style / Heading Color
   ---------------------------------------------------------
   The rich-text--* and heading--* classes this module applies in
   module.html are sitewide presets, loaded from theme-overrides.css in the
   main stylesheet. Earlier versions carried a full copy here; removed 
   2026-10-01 so there is one definition. */