/* HRM Divi Modules: HRM Requirements Table (.hrm-rt) + HRM Requirements Row.
   Same look as the hand-written .hrm-reqtable in wp-child/css/support.css (System Requirements page), but self-contained
   so the module works on any page. Palette variables only (set by the Divi-child theme), so dark mode and the named
   palettes apply; the fallbacks after the commas are for a site without the child theme. */

.hrm-rt { margin-bottom: 0; }
.hrm-rt .hrm-rt__heading { font-family: Outfit, Inter, "Open Sans", sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--hrm-ink, #1d2329); margin: 0 0 12px; padding: 0; }
.hrm-page .hrm-rt p.hrm-rt__intro, .hrm-rt p.hrm-rt__intro { font-size: 16px; line-height: 1.6; color: var(--hrm-muted, #5d6670); margin: 0 0 14px; padding: 0; }

.hrm-rt__card { border: 1px solid var(--hrm-line, #dde3e8); border-radius: 14px; background: var(--hrm-panel, #fff); overflow: hidden; }
.hrm-rt .hrm-rt__table { width: 100%; border-collapse: collapse; border: 0 !important; margin: 0 !important; table-layout: fixed; }
.hrm-rt__table col.hrm-rt__col-item { width: 24%; }
/* !important: Divi's .entry-content table rules set borders, padding and #555 text */
.hrm-rt__table th, .hrm-rt__table td { border: 0 !important; text-align: left; vertical-align: top; padding: 16px 20px !important; font-size: 15.5px; line-height: 1.55; color: var(--hrm-ink, #1d2329) !important; }
.hrm-rt__table thead th { background: var(--hrm-rail, #f3f5f7); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hrm-muted, #5d6670) !important; padding-top: 12px !important; padding-bottom: 12px !important; }
html.hrm-dark .hrm-rt__table thead th { background: rgba(255, 255, 255, 0.04); }
.hrm-rt__table tbody tr + tr > th, .hrm-rt__table tbody tr + tr > td,
.hrm-rt__table thead + tbody tr:first-child > th, .hrm-rt__table thead + tbody tr:first-child > td { border-top: 1px solid var(--hrm-line, #dde3e8) !important; }
/* rows carry Divi's et_pb_module class: drop its module spacing (it shows once a row is not display:table-row) */
.hrm-rt .hrm-rt__table tr.hrm_requirements_row { margin: 0 !important; }
.hrm-rt__table tbody th { font-family: Outfit, Inter, "Open Sans", sans-serif; font-weight: 600; font-size: 16.5px; }
.hrm-rt__item { display: flex; align-items: center; gap: 12px; }
.hrm-rt__table .hrm-rt__img { width: 32px; height: 32px; flex: none; object-fit: contain; }
.hrm-rt .hrm-rt__icon.et-pb-icon { flex: none; width: 32px; font-size: 26px; line-height: 32px; text-align: center; color: var(--hrm-primary, #2b6cb0); }

/* cell text: rich-text fields may arrive wrapped in <p> (TinyMCE); keep them flush */
.hrm-page .hrm-rt .hrm-rt__text p, .hrm-rt .hrm-rt__text p { margin: 0; padding: 0; font-size: inherit; line-height: inherit; color: inherit; }
.hrm-rt .hrm-rt__text p + p { margin-top: 6px; }
.hrm-rt__table td b, .hrm-rt__table td strong { font-weight: 600; }
.hrm-rt__table td small { display: block; color: var(--hrm-muted, #5d6670) !important; font-size: 14px; margin-top: 4px; line-height: 1.45; }
.hrm-rt__table td a { color: var(--hrm-primary, #2b6cb0); text-decoration: underline; text-underline-offset: 2px; }
.hrm-rt__table .hrm-reqnew, .hrm-rt__table .hrm-rt-new { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--hrm-link, #82c230); color: #0b1829; border-radius: 999px; padding: 2px 7px; margin-left: 6px; vertical-align: 2px; line-height: 1.5; }

/* note callout under the table */
.hrm-rt__note { display: flex; gap: 14px; align-items: flex-start; margin-top: 16px; padding: 16px 20px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--hrm-primary, #2b6cb0) 35%, transparent); background: color-mix(in srgb, var(--hrm-primary, #2b6cb0) 8%, transparent); }
.hrm-rt__note > svg { flex: none; color: var(--hrm-primary, #2b6cb0); margin-top: 3px; }
.hrm-rt__notetext { flex: 1; min-width: 0; }
.hrm-page .hrm-rt .hrm-rt__notetext p, .hrm-rt .hrm-rt__notetext, .hrm-rt .hrm-rt__notetext p { margin: 0; padding: 0; font-size: 15px; line-height: 1.6; color: var(--hrm-ink, #1d2329); }
.hrm-rt .hrm-rt__notetext p + p { margin-top: 8px; }
.hrm-rt__notetext a { color: var(--hrm-primary, #2b6cb0); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Visual Builder only (body.et-fb): the builder puts an absolutely positioned "mousetrap" <span> inside the selected or
   hovered module, here a <tr>; Chrome then adds an anonymous cell and the row shifts one column to the right. In the
   builder the table is laid out as one grid per row with the same column widths (24% + two equal columns, which is what
   table-layout:fixed with the 24% <col> gives), so the extra span has no effect. The front end keeps real table layout. */
@media (min-width: 681px) {
  body.et-fb .hrm-rt .hrm-rt__table { display: block; }
  body.et-fb .hrm-rt__table colgroup { display: none; }
  body.et-fb .hrm-rt__table thead, body.et-fb .hrm-rt__table tbody { display: block; }
  body.et-fb .hrm-rt__table tr { display: grid; grid-template-columns: 24% minmax(0, 1fr) minmax(0, 1fr); }
  body.et-fb .hrm-rt__table th, body.et-fb .hrm-rt__table td { display: block; min-width: 0; }
  body.et-fb .hrm-rt__table [colspan="2"] { grid-column: span 2; }
}

/* phones: each row becomes a small card; the column names come from data-label */
@media (max-width: 680px) {
  .hrm-rt .hrm-rt__table, .hrm-rt__table tbody, .hrm-rt__table tr, .hrm-rt__table th, .hrm-rt__table td { display: block; width: 100%; }
  .hrm-rt__table colgroup, .hrm-rt__table thead { display: none; }
  .hrm-rt__table tbody tr { padding: 14px 16px; }
  .hrm-rt__table tbody tr + tr { border-top: 1px solid var(--hrm-line, #dde3e8); }
  .hrm-rt__table tbody tr + tr > th, .hrm-rt__table tbody tr + tr > td,
  .hrm-rt__table thead + tbody tr:first-child > th, .hrm-rt__table thead + tbody tr:first-child > td { border-top: 0 !important; }
  .hrm-rt__table th, .hrm-rt__table td { padding: 0 !important; }
  .hrm-rt__table tbody th { margin-bottom: 8px; }
  .hrm-rt__table td + td { margin-top: 8px; }
  .hrm-rt__table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hrm-muted, #5d6670); margin-bottom: 2px; }
}

/* ---------- HRM Roadmap Board (.hrm-rb) + HRM Roadmap Item (.hrm-roaditem) ----------
   The board renders the classes of the former hand-written roadmap (wp-child/css/company.css: .hrm-legend, .hrm-roadcols,
   .hrm-roadcol, .hrm-roaditem, .hrm-badge--*). The same look is repeated here, scoped to .hrm-rb, so the module also works
   on a page or site without company.css. Palette variables only; fallbacks after the commas. */
.hrm-rb { margin-bottom: 0; }
.hrm-rb .hrm-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 2px 7px; margin-left: 0; vertical-align: middle; }
.hrm-rb .hrm-badge--shipped { background: var(--hrm-link, #82c230); color: #0b1829; }
.hrm-rb .hrm-badge--progress { background: var(--hrm-primary, #2b6cb0); color: #fff; }
.hrm-rb .hrm-badge--planned { background: transparent; color: var(--hrm-muted, #5d6670); border: 1px solid var(--hrm-line, #dde3e8); padding-top: 1px; padding-bottom: 1px; }
.hrm-rb .hrm-badge--explore { background: transparent; color: var(--hrm-muted, #5d6670); border: 1px dashed var(--hrm-muted, #5d6670); padding-top: 1px; padding-bottom: 1px; }
.hrm-rb .hrm-legend { display: flex; gap: 10px; flex-wrap: wrap; margin: -10px 0 18px; }
.hrm-rb .hrm-roadcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.hrm-rb .hrm-rb__cols--1 { grid-template-columns: minmax(0, 1fr); }
.hrm-rb .hrm-rb__cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hrm-rb .hrm-rb__cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hrm-rb .hrm-roadcol { background: var(--hrm-rail, #f3f5f7); border: 1px solid var(--hrm-line, #dde3e8); border-radius: 16px; padding: 16px; }
html.hrm-dark .hrm-rb .hrm-roadcol { background: rgba(255, 255, 255, 0.04); }
.hrm-rb .hrm-roadcol > header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 6px 6px 14px; flex-wrap: wrap; }
.hrm-rb .hrm-roadcol > header h3 { font-size: 19px; margin: 0; padding: 0; }
.hrm-rb .hrm-roadcol > header span { font-size: 13.5px; font-weight: 600; color: var(--hrm-muted, #5d6670); }
.hrm-rb .hrm-roaditems { display: grid; gap: 10px; }
/* items carry Divi's module classes: no module margins inside the column grid */
.hrm-rb .hrm-roaditem { margin: 0 !important; background: var(--hrm-panel, #fff); border: 1px solid var(--hrm-line, #dde3e8); border-radius: 14px; padding: 16px 18px; }
.hrm-rb .hrm-roaditem h4 { margin: 10px 0 4px; font-size: 16.5px; padding: 0; color: var(--hrm-ink, #1d2329); }
.hrm-rb .hrm-roaditem p { margin: 0; padding: 0; font-size: 14.5px; line-height: 1.55; color: var(--hrm-muted, #5d6670); }
.hrm-rb .hrm-roaditem p + p { margin-top: 8px; }
/* the optional link runs on at the end of the text, as in the hand-written cards */
.hrm-rb .hrm-rb__text { font-size: 14.5px; line-height: 1.55; color: var(--hrm-muted, #5d6670); }
.hrm-rb .hrm-roaditem .hrm-rb__body { display: inline; }
.hrm-rb .hrm-roaditem .hrm-rb__body > p:last-child { display: inline; }
.hrm-rb .hrm-rb__more { font-size: 14.5px; line-height: 1.55; }
.hrm-rb a.hrm-textlink { color: var(--hrm-primary, #2b6cb0); font-weight: 600; text-decoration: none; }
.hrm-rb a.hrm-textlink:hover { text-decoration: underline; }
.hrm-rb .hrm-rb__note { margin-top: 18px; }
.hrm-rb .hrm-rb__note, .hrm-rb .hrm-rb__note p { font-size: 14px; color: var(--hrm-muted, #5d6670); }
.hrm-rb .hrm-rb__note p { margin: 0; padding: 0; }
@media (max-width: 980px) {
  .hrm-rb .hrm-roadcols, .hrm-rb .hrm-rb__cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hrm-rb .hrm-rb__cols--1 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .hrm-rb .hrm-roadcols, .hrm-rb .hrm-rb__cols--2, .hrm-rb .hrm-rb__cols--4 { grid-template-columns: minmax(0, 1fr); }
}