/* Divi Content Kit — collection layout + the front-end editor.
 *
 * LAYOUT ONLY for the collection itself: what sits on its own line, what the
 * gaps are. No colours, no fonts, no sizes — those belong to the theme's token
 * file so a brand change stays a one-file change. Every rule is a single class
 * so a theme override wins without !important.
 *
 * The editor chrome DOES carry its own colours, because it is tooling rather
 * than design: it must be legible on any client's palette, including one it
 * has never seen.
 */

/* ── collection layouts ─────────────────────────────────────────────── */

.dck-collection { position: relative; }

.dck-collection--row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
}

.dck-collection--wrap { display: flex; flex-wrap: wrap; gap: 10px; }

.dck-collection--stack { display: flex; flex-direction: column; gap: 14px; }

.dck-collection--grid {
  display: grid;
  grid-template-columns: repeat(var(--dck-cols, 3), minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 782px) {
  /* Two across, never one: a trust bar stacked four deep pushes the page's
     first real content below the fold on a phone. */
  .dck-collection--row  { justify-content: flex-start; }
  .dck-collection--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .dck-collection--grid { grid-template-columns: 1fr; }
}

/* ── items ──────────────────────────────────────────────────────────── */

.dck-item { display: block; }
.dck-item--icon-text { display: flex; align-items: center; gap: 9px; }
.dck-item--chip { display: inline-block; }

.dck-item--card,
.dck-item--step,
.dck-item--faq { display: flex; flex-direction: column; gap: 9px; }

.dck-item--card { text-decoration: none; color: inherit; }

.dck-item__icon { display: inline-flex; flex-shrink: 0; }
.dck-item__icon .dck-icon { display: block; }

.dck-item__title { display: block; }
.dck-item__body  { margin: 0; }
.dck-item__num   { display: block; line-height: 1; }
.dck-item__cta   { display: inline-block; }

/* ── edit handle ────────────────────────────────────────────────────── */

.dck-edit-handle {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c3c4c7;
  border-radius: 999px;
  background: #fff;
  color: #1d2327;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease;
  z-index: 20;
}

/* Hidden until the block is approached, so an editor browsing their own site
   is not looking at pencils on every section. Focus reveals it too, or it
   would be unreachable by keyboard. */
.dck-collection:hover .dck-edit-handle,
.dck-edit-handle:focus { opacity: 1; }
.dck-edit-handle:focus { outline: 2px solid #2271b1; outline-offset: 2px; }

/* ── panel ──────────────────────────────────────────────────────────── */

body.dck-panel-open { overflow: hidden; }

.dck-panel {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(11, 26, 43, .55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (min-width: 783px) { .dck-panel { align-items: center; } }

.dck-panel__sheet {
  background: #fff;
  width: min(640px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .25);
}

@media (min-width: 783px) { .dck-panel__sheet { border-radius: 12px; } }

.dck-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid #e0e0e0;
}

.dck-panel__title { font-size: 16px; color: #1d2327; }

.dck-panel__close {
  border: 0; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: #646970; padding: 0 4px;
}

.dck-panel__body { padding: 8px 18px 16px; overflow-y: auto; }

.dck-panel__foot {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid #e0e0e0;
}

.dck-panel__status { font-size: 13px; color: #646970; margin-left: auto; }
.dck-panel__status.is-ok  { color: #1a7f37; }
.dck-panel__status.is-err { color: #b32d2e; }

.dck-btn {
  border-radius: 6px; padding: 10px 18px; font-size: 14px; font-weight: 600;
  cursor: pointer; min-height: 44px;   /* touch target */
}
.dck-btn--primary { background: #2271b1; border: 1px solid #2271b1; color: #fff; }
.dck-btn--primary:disabled { opacity: .6; cursor: default; }
.dck-btn--ghost { background: #fff; border: 1px solid #c3c4c7; color: #1d2327; }

/* ── rows and fields ────────────────────────────────────────────────── */

.dck-empty { color: #646970; font-size: 14px; padding: 12px 0; }

.dck-row {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px 14px 14px;
  margin-top: 12px;
}

.dck-row__bar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.dck-row__n { font-size: 12px; font-weight: 700; color: #646970; margin-right: auto; }

.dck-row__move,
.dck-row__del {
  border: 1px solid #c3c4c7; background: #fff; border-radius: 5px;
  cursor: pointer; font-size: 13px; color: #1d2327;
  min-width: 34px; min-height: 34px; padding: 0 8px;
}
.dck-row__move:disabled { opacity: .4; cursor: default; }
.dck-row__del { color: #b32d2e; border-color: #e3b3b2; }

.dck-field { display: block; margin-top: 10px; }
.dck-field__label { display: block; font-size: 12px; font-weight: 600; color: #1d2327; margin-bottom: 4px; }

.dck-field input,
.dck-field textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid #8c8f94; border-radius: 5px;
  padding: 10px 11px; font: inherit; font-size: 14px; color: #1d2327;
  background: #fff;
}
.dck-field input:focus,
.dck-field textarea:focus { outline: 2px solid #2271b1; outline-offset: 1px; border-color: #2271b1; }

.dck-iconpick { display: flex; flex-wrap: wrap; gap: 6px; }

.dck-iconpick__opt {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #c3c4c7; border-radius: 6px; background: #fff;
  cursor: pointer; color: #1d2327; font-size: 14px;
}
.dck-iconpick__opt:hover { border-color: #2271b1; }
.dck-iconpick__opt.is-on { border-color: #2271b1; box-shadow: inset 0 0 0 1px #2271b1; }

/* Builder-only placeholder. A module that renders nothing on the front end is
   correct; a module that renders nothing in the BUILDER is one nobody can
   select again, so there it says what it is waiting for. */
.dck-placeholder {
  padding: 22px;
  border: 1px dashed #8c8f94;
  border-radius: 8px;
  background: #f6f7f7;
  color: #50575e;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  text-align: center;
}

/* Editor-only empty state. A visitor never sees this: the renderer returns an
   empty string for them. It exists because a collection with no items used to
   render nothing at all, which left no pencil to click and made creating one
   from the front end impossible. */
.dck-collection--empty {
  display: block;
  padding: 18px 22px;
  border: 1px dashed #8c8f94;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  text-align: center;
}
.dck-collection__hint {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  color: #8c8f94;
}

/* Loop output. The ITEM's look comes from the Divi Library template, so there
   is nothing to style here beyond the arrangement — which is the point of
   templating in Divi rather than shipping markup. */
.dck-loop { display: grid; grid-template-columns: repeat(var(--dck-cols, 3), minmax(0, 1fr)); gap: 18px; }
.dck-loop.dck-collection--row   { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; }
.dck-loop.dck-collection--wrap  { display: flex; flex-wrap: wrap; gap: 10px; }
.dck-loop.dck-collection--stack { display: flex; flex-direction: column; gap: 14px; }
.dck-loop__item { min-width: 0; }

/* Divi rows inside a looped item carry their own width and padding, which
   would fight the grid cell they now live in. */
.dck-loop__item .et_pb_row { width: 100%; max-width: none; padding: 0; margin: 0; }

@media (max-width: 782px) { .dck-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .dck-loop { grid-template-columns: 1fr; } }

/* Icon picker with search. The grid scrolls rather than growing, because a
   search can return sixty icons and the panel still has fields under it. */
.dck-iconpick-wrap { display: block; }

.dck-iconpick__search {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #8c8f94;
  border-radius: 5px;
  padding: 9px 11px;
  font: inherit;
  font-size: 13.5px;
  margin-bottom: 6px;
}
.dck-iconpick__search:focus { outline: 2px solid #2271b1; outline-offset: 1px; border-color: #2271b1; }

.dck-iconpick__note { font-size: 12px; color: #646970; min-height: 16px; margin-bottom: 4px; }

.dck-iconpick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 190px;
  overflow-y: auto;
  padding: 2px;
}

/* Standalone icon. inline-flex so it sits on the text baseline rather than
   pushing the line height around, which is what a bare inline <svg> does. */
.dck-icon-wrap { display: inline-flex; align-items: center; vertical-align: middle; }
.dck-icon-wrap .dck-icon { display: block; }

/* One item rendered without the grid: it takes the width of whatever column
   it was dropped into, which is the whole reason to use it over the loop. */
.dck-single { display: block; }
.dck-single .et_pb_row { width: 100%; max-width: none; padding: 0; margin: 0; }

/* Editor-only note. Amber rather than the neutral placeholder grey, because
   this one is telling you something is wrong rather than merely unfinished. */
.dck-placeholder--note {
  border-color: #dba617;
  background: #fcf9e8;
  color: #674f00;
  text-align: left;
  font-size: 13px;
  line-height: 1.55;
}

/* The token beside its label. Small and monospaced so it reads as the thing
   you type rather than as part of the label. */
.dck-field__token {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 400;
  color: #646970;
  background: #f0f0f1;
  border-radius: 3px;
  padding: 1px 5px;
}

/* Copy the exact call instead of writing it from memory. */
.dck-callbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: #f6f7f7;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 8px 10px;
  margin: 10px 0 4px;
}
.dck-callbar__label { font-size: 12px; font-weight: 600; color: #50575e; }
.dck-callbar__code  { font-size: 11px; color: #1d2327; flex-grow: 1; word-break: break-all; }
.dck-callbar__copy,
.dck-row__copy {
  border: 1px solid #c3c4c7;
  background: #fff;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  color: #1d2327;
  min-height: 30px;
  padding: 0 10px;
  white-space: nowrap;
}
.dck-row__copy { margin-right: 4px; }
.dck-callbar__copy:hover,
.dck-row__copy:hover { border-color: #2271b1; color: #2271b1; }

/* ── Placeholder preview ───────────────────────────────────────────────
   Editor-only, and it has to look it. A preview that could be mistaken for
   the real section is how sample copy ends up in a screenshot sent to a
   client. */
.dck-preview { outline: 1px dashed var(--dck-preview-line, #b8860b); outline-offset: 6px; position: relative; }

.dck-preview__flag {
  grid-column: 1 / -1;
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dck-preview-ink, #7a5410);
  background: var(--dck-preview-bg, #fff6e8);
  border: 1px solid var(--dck-preview-line, #e8c68a);
  border-radius: 3px;
  padding: 5px 9px;
  display: inline-block;
}

/* The length each card was rendered at, so a side-by-side comparison says
   which is which without anyone counting characters. */
.dck-preview [data-dck-length]::before {
  content: attr(data-dck-length);
  display: block;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dck-preview-ink, #7a5410);
  margin-bottom: 4px;
}

/* Editor-only notes and diagnostics. Loud on purpose: a silent empty row is
   the failure these exist to replace. */
.dck-note, .dck-debug {
  background: var(--dck-note-bg, #fff6e8);
  border: 1px solid var(--dck-note-line, #e8c68a);
  color: var(--dck-note-ink, #7a5410);
  padding: 10px 13px; border-radius: 4px; font-size: 14px; line-height: 1.5;
}
.dck-note__detail { font-size: 12.5px; opacity: .85; }
.dck-debug__t { width: 100%; border-collapse: collapse; margin: 8px 0 4px; font-size: 13px; }
.dck-debug__t th {
  text-align: left; vertical-align: top; white-space: nowrap;
  padding: 4px 12px 4px 0; font-weight: 600; width: 1%;
}
.dck-debug__t td { padding: 4px 0; font-family: ui-monospace, monospace; word-break: break-word; }

/* ── Tabbed loop ───────────────────────────────────────────────────────
   A list of items on one side, the selected one's panel on the other. The
   OX Floors services pattern: pick a service, see its panel.

   Without JavaScript every panel is visible and stacked, which is a usable
   section rather than a broken one. The script collapses them. */

.dck-tabs {
  display: grid;
  grid-template-columns: minmax(180px, var(--dck-tabs-w, 260px)) minmax(0, 1fr);
  gap: var(--dck-tabs-gap, 0);
  align-items: start;
}

.dck-tabs__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dck-tabs__tab {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  width: 100%;
  padding: var(--dck-tab-pad, 16px 22px);
  font-weight: 700;
  font-size: var(--dck-tab-size, 16px);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--dck-tab-ink, inherit);
  background: var(--dck-tab-bg, transparent);
  transition: background-color .14s ease, color .14s ease;
}

@media (prefers-reduced-motion: reduce) {
  .dck-tabs__tab { transition: none; }
}

.dck-tabs__tab:hover { color: var(--dck-tab-ink-hover, inherit); }

.dck-tabs__tab.is-active {
  color: var(--dck-tab-ink-active, #fff);
  background: var(--dck-tab-bg-active, #333);
}

.dck-tabs__tab:focus-visible {
  outline: 2px solid var(--dck-tab-focus, currentColor);
  outline-offset: -2px;
}

.dck-tabs__panels { min-width: 0; }
.dck-tabs__panel[hidden] { display: none; }

/* No script: every panel shows, each with the item's name above it, so the
   section still reads as a list of services. */
.dck-tabs:not([data-dck-tabs-ready]) .dck-tabs__panel { display: block !important; }
.dck-tabs[data-dck-tabs-ready] .dck-tabs__panel-label { display: none; }

.dck-tabs__panel-label { font-weight: 700; margin: 0 0 8px; }

@media (max-width: 780px) {
  .dck-tabs { grid-template-columns: minmax(0, 1fr); }
  .dck-tabs__list { flex-direction: row; overflow-x: auto; }
  .dck-tabs__tab { width: auto; white-space: nowrap; }
}

/* ── Accordion ─────────────────────────────────────────────────────────
   Native <details>, so there is no script here at all. Keyboard support,
   screen-reader semantics and find-in-page opening the right section are
   the browser's job. Exclusive opening comes from the `name` attribute;
   an older browser lets several stand open, which is a difference rather
   than a fault. */

.dck-acc { display: grid; gap: var(--dck-acc-gap, 0); }

.dck-acc__item {
  border-bottom: 1px solid var(--dck-acc-line, rgba(0, 0, 0, .12));
}

.dck-acc__head {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--dck-acc-pad, 16px 0);
  font-weight: 700;
  font-size: var(--dck-acc-size, 17px);
  line-height: 1.3;
  color: var(--dck-acc-ink, inherit);
}

.dck-acc__head::-webkit-details-marker { display: none; }

/* The marker is drawn rather than typed, so it can rotate. A glyph that
   swaps between + and - jumps; this one turns. */
.dck-acc__head::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}

.dck-acc__item[open] > .dck-acc__head::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
  .dck-acc__head::after { transition: none; }
}

.dck-acc__head:focus-visible {
  outline: 2px solid var(--dck-acc-focus, currentColor);
  outline-offset: 2px;
}

.dck-acc__item[open] > .dck-acc__head { color: var(--dck-acc-ink-open, inherit); }

.dck-acc__body { padding: var(--dck-acc-body-pad, 0 0 20px); }