/**
 * Equinox Connected Line Styles
 * Supports:
 * - Mode 1: Horizontal Process Rail (.rail) from index.html
 * - Mode 2: Vertical Timeline List (.timelinelist .trow) from about.html
 * - Full Gutenberg Editor Grid & Vertical Layouts (100% responsive width)
 * - Customizer Button styles integration
 * - Synchronous responsive switching between Wide (3 columns) and Narrow (Mobile 2 columns)
 */

/* ==========================================================================
   Base Container & Wrapper
   ========================================================================== */
.equinox-connected-line-wrap {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 32px 0;
  position: relative;
  container-type: inline-size;
}

.equinox-connected-line {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  position: relative;
}

/* ==========================================================================
   MODE 1: HORIZONTAL PROCESS RAIL (.rail) - FRONTEND
   ========================================================================== */
.equinox-connected-line.mode-horizontal,
.equinox-connected-line.rail {
  display: grid;
  grid-template-columns: repeat(var(--eq-columns, 3), minmax(0, 1fr));
  column-gap: 52px;
  row-gap: 36px;
  align-items: stretch;
  position: relative;
  width: 100%;
}

/* ==========================================================================
   MODE 1: GUTENBERG EDITOR HORIZONTAL GRID (100% Full Width Grid)
   ========================================================================== */
.editor-styles-wrapper .equinox-connected-line-wrap,
.editor-styles-wrapper .wp-block-equinox-connected-line,
.editor-styles-wrapper [data-type="equinox/connected-line"],
.wp-block-equinox-connected-line,
[data-type="equinox/connected-line"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* In Editor: The outer containers MUST be regular block elements taking 100% width */
.editor-styles-wrapper .equinox-connected-line,
.editor-styles-wrapper .equinox-connected-line.mode-horizontal,
.editor-styles-wrapper .equinox-connected-line.rail,
.editor-styles-wrapper .equinox-connected-line.mode-horizontal > .block-editor-inner-blocks,
.editor-styles-wrapper .equinox-connected-line .block-editor-inner-blocks {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* In Editor: The CSS Grid container is strictly .block-editor-block-list__layout of parent block */
.editor-styles-wrapper .equinox-connected-line.mode-horizontal > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .equinox-connected-line.rail > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper [data-type="equinox/connected-line"] > .equinox-connected-line.mode-horizontal > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper [data-type="equinox/connected-line"] > .equinox-connected-line-wrap > .equinox-connected-line.mode-horizontal > .block-editor-inner-blocks > .block-editor-block-list__layout {
  display: grid !important;
  grid-template-columns: repeat(var(--eq-columns, 3), minmax(0, 1fr)) !important;
  column-gap: 52px !important;
  row-gap: 36px !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Force each child block in editor to occupy 100% of its grid cell */
.editor-styles-wrapper .equinox-connected-line.mode-horizontal > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="equinox/connected-line-item"],
.editor-styles-wrapper .equinox-connected-line.mode-horizontal > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block,
.editor-styles-wrapper .equinox-connected-line.mode-horizontal > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  grid-column: span 1 !important;
}

.editor-styles-wrapper .equinox-connected-line.mode-horizontal > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="equinox/connected-line-item"] > .block-editor-block-list__block-edit,
.editor-styles-wrapper .equinox-connected-line.mode-horizontal > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block > .block-editor-block-list__block-edit,
.editor-styles-wrapper .equinox-connected-line.mode-horizontal > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block > .block-editor-block-list__block-edit {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
}

.editor-styles-wrapper .equinox-connected-line.mode-horizontal .rc {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
}

.editor-styles-wrapper .equinox-connected-line.mode-horizontal .block-list-appender,
.editor-styles-wrapper .equinox-connected-line.mode-horizontal .wp-block-appender,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .block-list-appender,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .wp-block-appender {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  margin-top: 16px !important;
  padding: 12px 0 !important;
}

.editor-styles-wrapper .equinox-connected-line .block-editor-button-block-appender {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  border-radius: 6px !important;
  background: #f8fafc !important;
  border: 1.5px dashed #93bccd !important;
  color: #027ca1 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.editor-styles-wrapper .equinox-connected-line .block-editor-button-block-appender:hover {
  background: #eef5f8 !important;
  border-color: #027ca1 !important;
  color: #003b53 !important;
}

/* Step Container (.rc) */
.equinox-connected-line .rc {
  position: relative !important;
  padding-top: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

/* Step Dot / Indicator */
.equinox-connected-line .dot {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--eq-line-color, #93BCCD);
  color: #027CA1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 600;
  background: #ffffff;
  position: relative;
  z-index: 2;
  flex: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.equinox-connected-line .dot.on,
.equinox-connected-line .rc.is-highlighted .dot {
  background: var(--eq-active-color, #003B53);
  border-color: var(--eq-active-color, #003B53);
  color: var(--eq-accent-color, #FFD457);
}

/* Horizontal Connecting Line */
.equinox-connected-line .rl {
  position: absolute;
  left: 46px;
  top: 29px;
  width: calc(100% + 52px - 46px);
  border-top: 1px var(--eq-line-style, dotted) var(--eq-line-color, #c2ced4);
  z-index: 1;
  pointer-events: none;
}

/* Hide line on the last item both in frontend AND in Gutenberg editor */
.equinox-connected-line .rc:last-child .rl,
.equinox-connected-line .rc:last-of-type .rl,
.equinox-connected-line .rc.is-last-item .rl,
.equinox-connected-line .block-editor-block-list__layout > *:last-child .rl,
.equinox-connected-line .block-editor-block-list__layout > [data-type="equinox/connected-line-item"]:last-of-type .rl,
.equinox-connected-line .block-editor-block-list__layout > .wp-block:last-of-type .rl,
.equinox-connected-line > [data-type="equinox/connected-line-item"]:last-of-type .rl,
.equinox-connected-line > .wp-block:last-of-type .rl,
.equinox-connected-line > .rc:last-of-type .rl,
.equinox-connected-line .block-editor-block-list__layout > *:nth-last-child(2):has(+ .block-list-appender) .rl,
.equinox-connected-line .block-editor-block-list__layout > *:nth-last-child(2):has(+ .wp-block-appender) .rl {
  display: none !important;
}

/* Step Content Container (InnerBlocks in Horizontal Mode) */
.equinox-connected-line .rc-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.editor-styles-wrapper .equinox-connected-line.mode-horizontal .rc .rc-content,
.editor-styles-wrapper .equinox-connected-line.mode-horizontal .rc .rc-content > .block-editor-inner-blocks,
.editor-styles-wrapper .equinox-connected-line.mode-horizontal .rc .rc-content > .block-editor-inner-blocks > .block-editor-block-list__layout {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.editor-styles-wrapper .equinox-connected-line.mode-horizontal .rc .rc-content .wp-block {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.editor-styles-wrapper .equinox-connected-line.mode-horizontal .rc .rc-content .block-list-appender,
.editor-styles-wrapper .equinox-connected-line.mode-horizontal .rc .rc-content .wp-block-appender {
  width: 100% !important;
  display: flex !important;
  justify-content: flex-start !important;
  margin-top: 14px !important;
  padding: 0 !important;
}

.editor-styles-wrapper .equinox-connected-line.mode-horizontal .rc .rc-content .block-editor-button-block-appender {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border-radius: 4px !important;
  background: #f8fafc !important;
  border: 1px dashed #93bccd !important;
  color: #027ca1 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.editor-styles-wrapper .equinox-connected-line.mode-horizontal .rc .rc-content .block-editor-button-block-appender:hover {
  background: #eef5f8 !important;
  border-color: #027ca1 !important;
  color: #003b53 !important;
}

/* Step Typography (Inherits from Kadence Customizer H3 & Base Typography) */
.equinox-connected-line .stephead,
.equinox-connected-line .rc-content > h3,
.equinox-connected-line .rc-content h3.stephead {
  font-family: var(--global-h3-font-family, var(--global-heading-font-family, 'Montserrat', 'Helvetica Neue', Arial, sans-serif));
  font-size: var(--global-h3-font-size, 22px);
  font-weight: var(--global-h3-font-weight, 600);
  line-height: var(--global-h3-line-height, 1.3);
  letter-spacing: var(--global-h3-letter-spacing, 0);
  text-transform: var(--global-h3-text-transform, none);
  color: var(--global-palette1, #003B53);
  margin: 26px 0 8px;
}

.equinox-connected-line .rc .body,
.equinox-connected-line .rc-content > p,
.equinox-connected-line .rc-content p.body {
  font-family: var(--global-font-family, var(--global-base-font-family, 'Montserrat', 'Helvetica Neue', Arial, sans-serif));
  font-size: var(--global-body-font-size, var(--global-base-font-size, 18px));
  font-weight: var(--global-body-font-weight, var(--global-base-font-weight, 400));
  line-height: var(--global-body-line-height, var(--global-base-line-height, 1.62));
  letter-spacing: var(--global-body-letter-spacing, 0.005em);
  color: var(--global-palette4, #2c2c2c);
  margin: 0 0 14px 0;
}

/* Call to Action Container & Kadence Advanced Button Integration */
.equinox-connected-line .ministepcta,
.equinox-connected-line .rc-content .ministepcta {
  margin-top: auto;
  padding-top: 18px;
}

.editor-styles-wrapper .equinox-connected-line .ministepcta .block-editor-inner-blocks,
.editor-styles-wrapper .equinox-connected-line .ministepcta .block-editor-block-list__layout {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-template-columns: none !important;
}

.editor-styles-wrapper .equinox-connected-line .ministepcta .block-editor-block-list__layout > .wp-block {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  grid-column: auto !important;
}

.editor-styles-wrapper .equinox-connected-line .ministepcta .wp-block-kadence-advancedbtn {
  margin: 0 !important;
}

/* ==========================================================================
   MODE 2: VERTICAL TIMELINE LIST (.timelinelist .trow) - WIDE SCREEN BASE
   ========================================================================== */
.equinox-connected-line.mode-vertical,
.equinox-connected-line.timelinelist,
.editor-styles-wrapper .equinox-connected-line.mode-vertical,
.editor-styles-wrapper .equinox-connected-line.timelinelist {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.editor-styles-wrapper .equinox-connected-line.mode-vertical .block-editor-block-list__layout,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .block-editor-inner-blocks,
.equinox-connected-line.mode-vertical > .block-editor-inner-blocks > .block-editor-block-list__layout {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* Single Unbroken Straight Vertical Rail: Subtle Dashed Line */
/* Position: 150px (year) + 36px (gap) + 24px (half of 48px marker) = 210px */
.equinox-connected-line.mode-vertical .timeline-rail,
.equinox-connected-line.timelinelist .timeline-rail,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .timeline-rail,
.editor-styles-wrapper .equinox-connected-line.timelinelist .timeline-rail {
  position: absolute !important;
  left: 210px !important;
  top: 18px !important;
  bottom: 24px !important;
  width: 0 !important;
  border-left: 2px dashed #93BCCD !important;
  transform: translateX(-50%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.equinox-connected-line.mode-vertical[style*="--eq-line-color"] .timeline-rail,
.editor-styles-wrapper .equinox-connected-line.mode-vertical[style*="--eq-line-color"] .timeline-rail {
  border-left-width: 2px !important;
  border-left-style: var(--eq-line-style, dashed) !important;
  border-left-color: var(--eq-line-color, #93BCCD) !important;
}

/* Milestone Row: 150px Year | 48px Marker | 1fr Content (36px gap) */
.equinox-connected-line.mode-vertical .trow,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .trow,
.editor-styles-wrapper .equinox-connected-line.mode-vertical [data-type="equinox/connected-line-item"].trow,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .wp-block-equinox-connected-line-item.trow {
  display: grid !important;
  grid-template-columns: 150px 48px 1fr !important;
  grid-template-rows: auto !important;
  grid-template-areas: none !important;
  column-gap: 36px !important;
  row-gap: 0 !important;
  padding: 48px 0 !important;
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  cursor: default;
}

/* Editor wrappers for child block items in vertical mode */
.editor-styles-wrapper .equinox-connected-line.mode-vertical > [data-type="equinox/connected-line-item"],
.editor-styles-wrapper .equinox-connected-line.mode-vertical > .wp-block,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .block-editor-block-list__layout > [data-type="equinox/connected-line-item"],
.editor-styles-wrapper .equinox-connected-line.mode-vertical .block-editor-block-list__layout > .wp-block {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  grid-column: auto !important;
}

.editor-styles-wrapper .equinox-connected-line.mode-vertical .block-editor-block-list__block-edit,
.editor-styles-wrapper .equinox-connected-line.mode-vertical [data-type="equinox/connected-line-item"] > .block-editor-block-list__block-edit,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .wp-block > .block-editor-block-list__block-edit {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* First & Last row padding */
.equinox-connected-line.mode-vertical > .trow:first-of-type,
.equinox-connected-line.mode-vertical > .trow:first-child,
.equinox-connected-line.mode-vertical .timeline-rail + .trow,
.equinox-connected-line.mode-vertical > *:nth-child(2).trow,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .trow:first-of-type,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .trow:first-child,
.editor-styles-wrapper .equinox-connected-line.mode-vertical [data-type="equinox/connected-line-item"]:first-of-type,
.editor-styles-wrapper .equinox-connected-line.mode-vertical [data-type="equinox/connected-line-item"]:first-child,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .block-editor-block-list__layout > [data-type="equinox/connected-line-item"]:first-of-type,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .block-editor-block-list__layout > [data-type="equinox/connected-line-item"]:first-child,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .block-editor-block-list__layout > .wp-block:first-of-type,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .block-editor-block-list__layout > .wp-block:first-child,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .block-editor-block-list__layout > *:first-child {
  padding-top: 0 !important;
}

.equinox-connected-line.mode-vertical > .trow:last-of-type,
.equinox-connected-line.mode-vertical > .trow:last-child,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .trow:last-of-type,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .trow:last-child,
.editor-styles-wrapper .equinox-connected-line.mode-vertical [data-type="equinox/connected-line-item"]:last-of-type,
.editor-styles-wrapper .equinox-connected-line.mode-vertical [data-type="equinox/connected-line-item"]:last-child,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .block-editor-block-list__layout > [data-type="equinox/connected-line-item"]:last-of-type,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .block-editor-block-list__layout > [data-type="equinox/connected-line-item"]:last-child,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .block-editor-block-list__layout > .wp-block:last-of-type,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .block-editor-block-list__layout > .wp-block:last-child,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .block-editor-block-list__layout > *:last-child {
  padding-bottom: 0 !important;
}

/* Left Column: Dedicated Space with Light Year Font */
.equinox-connected-line.mode-vertical .tleft,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .tleft {
  grid-area: auto !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  text-align: right !important;
  padding-top: 1px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.equinox-connected-line.mode-vertical .tyear,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .tyear {
  display: block !important;
  font-family: var(--global-heading-font-family, 'Montserrat', 'Helvetica Neue', Arial, sans-serif) !important;
  font-size: 34px !important;
  font-weight: 300 !important; /* Light, refined architectural weight */
  color: var(--global-palette1, #003B53) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  text-align: right !important;
  white-space: nowrap !important;
  transition: color 0.18s ease !important;
}

/* Center Column: Circular Marker sitting on the subtle dashed rail */
.equinox-connected-line.mode-vertical .tmarker,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .tmarker {
  grid-area: auto !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.equinox-connected-line.mode-vertical .tnode,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .tnode {
  position: relative !important;
  z-index: 3 !important;
  width: 24px !important;
  height: 24px !important;
  margin-top: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
  box-sizing: border-box !important;
}

.equinox-connected-line.mode-vertical .tring,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .tring {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  border: 2px solid var(--eq-active-color, #003B53) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 6px #ffffff !important;
  transition: all 0.22s cubic-bezier(.4, 0, .2, 1) !important;
  box-sizing: border-box !important;
}

/* Consistent Warm Gold / Yellow accent on ALL milestone pips */
.equinox-connected-line.mode-vertical .tpip,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .tpip {
  position: relative !important;
  z-index: 1 !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--eq-accent-color, #FFD457) !important;
  border: 1px solid #D98D00 !important;
  box-sizing: border-box !important;
  transition: all 0.22s cubic-bezier(.4, 0, .2, 1) !important;
}

/* Right Column: Subtitle (.tera), Title (.ttitle), Description (.tbody) */
.equinox-connected-line.mode-vertical .tright,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .tright {
  grid-area: auto !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
  padding-top: 2px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.equinox-connected-line.mode-vertical .tera,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .tera {
  display: inline-block !important;
  font-family: var(--global-font-family, 'Montserrat', Arial, sans-serif) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: #D98D00 !important;
  margin-bottom: 8px !important;
}

.equinox-connected-line.mode-vertical .ttitle,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .ttitle {
  font-family: var(--global-h4-font-family, var(--global-heading-font-family, 'Montserrat', Arial, sans-serif)) !important;
  font-size: var(--global-h4-font-size, 21px) !important;
  font-weight: 700 !important;
  color: var(--global-palette1, #003B53) !important;
  line-height: 1.32 !important;
  letter-spacing: var(--global-h4-letter-spacing, 0) !important;
  text-transform: var(--global-h4-text-transform, none) !important;
  margin: 0 0 12px !important;
  transition: color 0.18s ease !important;
}

.equinox-connected-line.mode-vertical .tbody,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .tbody {
  font-family: var(--global-font-family, var(--global-base-font-family, 'Montserrat', Arial, sans-serif)) !important;
  font-size: var(--global-body-font-size, var(--global-base-font-size, 16.5px)) !important;
  font-weight: var(--global-body-font-weight, var(--global-base-font-weight, 400)) !important;
  line-height: var(--global-body-line-height, var(--global-base-line-height, 1.72)) !important;
  letter-spacing: var(--global-body-letter-spacing, 0) !important;
  color: var(--global-palette4, #2c2c2c) !important;
  margin: 0 !important;
  max-width: 740px !important;
}

/* ==========================================================================
   VERTICAL TIMELINE HOVER & HIGHLIGHT EFFECTS (about.html Prototype Fidelity)
   ========================================================================== */

/* 1. Year color turns to Ocean Blue */
.equinox-connected-line .trow:hover .tyear,
.equinox-connected-line .trow.is-highlighted .tyear,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .trow:hover .tyear,
.editor-styles-wrapper .equinox-connected-line.mode-vertical [data-type="equinox/connected-line-item"]:hover .tyear,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .wp-block:hover .tyear {
  color: #027CA1 !important;
}

/* 2. Marker Ring: Scale 1.15, Amber border #D98D00, Gold halo shadow */
.equinox-connected-line .trow:hover .tring,
.equinox-connected-line .tmarker:hover .tring,
.equinox-connected-line .tnode:hover .tring,
.equinox-connected-line .trow.is-highlighted .tring,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .trow:hover .tring,
.editor-styles-wrapper .equinox-connected-line.mode-vertical [data-type="equinox/connected-line-item"]:hover .tring,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .wp-block:hover .tring {
  transform: scale(1.15) !important;
  border-color: #D98D00 !important;
  box-shadow: 0 0 0 6px #ffffff, 0 2px 10px rgba(217, 141, 0, 0.25) !important;
}

/* 3. Marker Pip: Scale 1.2, Dark Amber fill #D98D00 */
.equinox-connected-line .trow:hover .tpip,
.equinox-connected-line .tmarker:hover .tpip,
.equinox-connected-line .tnode:hover .tpip,
.equinox-connected-line .trow.is-highlighted .tpip,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .trow:hover .tpip,
.editor-styles-wrapper .equinox-connected-line.mode-vertical [data-type="equinox/connected-line-item"]:hover .tpip,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .wp-block:hover .tpip {
  transform: scale(1.2) !important;
  background: #D98D00 !important;
  border-color: #D98D00 !important;
}

/* 4. Title color turns to Ocean Blue */
.equinox-connected-line .trow:hover .ttitle,
.equinox-connected-line .trow.is-highlighted .ttitle,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .trow:hover .ttitle,
.editor-styles-wrapper .equinox-connected-line.mode-vertical [data-type="equinox/connected-line-item"]:hover .ttitle,
.editor-styles-wrapper .equinox-connected-line.mode-vertical .wp-block:hover .ttitle {
  color: #027CA1 !important;
}

/* ==========================================================================
   BUTTONS: FULL KADENCE THEME CUSTOMIZER INTEGRATION
   Inherits padding, typography, border-radius, and colors directly from Kadence Customizer
   ========================================================================== */
.equinox-connected-line .btn,
.equinox-connected-line .button,
.equinox-connected-line .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  box-sizing: border-box;
  max-width: 100%;
}

/* In Editor preview fallback to Kadence Customizer CSS variables */
.editor-styles-wrapper .equinox-connected-line .btn,
.editor-styles-wrapper .equinox-connected-line .button,
.editor-styles-wrapper .equinox-connected-line .wp-block-button__link {
  font-family: var(--global-btn-font-family, var(--global-font-family, 'Montserrat', 'Helvetica Neue', Arial, sans-serif));
  font-size: var(--global-btn-font-size, 14.5px);
  font-weight: var(--global-btn-font-weight, 600);
  line-height: var(--global-btn-line-height, 1.3);
  letter-spacing: var(--global-btn-letter-spacing, 0);
  text-transform: var(--global-btn-text-transform, none);
  padding: var(--global-btn-padding-top, 11px) var(--global-btn-padding-right, 22px) var(--global-btn-padding-bottom, 11px) var(--global-btn-padding-left, 22px);
  border-radius: var(--global-btn-radius, 3px);
  border: var(--global-btn-border-width, 1.5px) solid transparent;
}

/* Customizer Primary Button (Theme Gold / Main) */
.equinox-connected-line .button.button-style-primary,
.equinox-connected-line .btn.btn-primary,
.equinox-connected-line .btn.primary,
.equinox-connected-line .btn.main {
  background-color: var(--global-palette-btn-bg, #FFD457);
  color: var(--global-palette-btn, #003B53);
  border-color: var(--global-palette-btn-bg, #FFD457);
}

.equinox-connected-line .button.button-style-primary:hover,
.equinox-connected-line .btn.btn-primary:hover,
.equinox-connected-line .btn.primary:hover,
.equinox-connected-line .btn.main:hover {
  background-color: var(--global-palette-btn-bg-hover, #f7c943);
  border-color: var(--global-palette-btn-bg-hover, #f7c943);
  color: var(--global-palette-btn-hover, #002b3d);
}

/* Customizer Secondary Button (Navy / Secondary) */
.equinox-connected-line .button.button-style-secondary,
.equinox-connected-line .btn.btn-secondary,
.equinox-connected-line .btn.secondary {
  background-color: var(--global-palette-sec-btn-bg, var(--global-palette-btn-sec-bg, var(--global-palette1, #003B53)));
  color: var(--global-palette-sec-btn, var(--global-palette-btn-sec, #ffffff));
  border-color: var(--global-palette-sec-btn-bg, var(--global-palette-btn-sec-bg, var(--global-palette1, #003B53)));
}

.equinox-connected-line .button.button-style-secondary:hover,
.equinox-connected-line .btn.btn-secondary:hover,
.equinox-connected-line .btn.secondary:hover {
  background-color: var(--global-palette-sec-btn-bg-hover, var(--global-palette-btn-sec-bg-hover, #002b3d));
  border-color: var(--global-palette-sec-btn-bg-hover, var(--global-palette-btn-sec-bg-hover, #002b3d));
  color: var(--global-palette-sec-btn-hover, var(--global-palette-btn-sec-hover, #ffffff));
}

/* Customizer Outline Button (Ocean Blue Border / Outline) */
.equinox-connected-line .button.button-style-outline,
.equinox-connected-line .btn.btn-outline,
.equinox-connected-line .btn.outline {
  background-color: transparent;
  color: var(--global-palette-outline-btn, var(--global-palette-btn-out, var(--global-palette2, #027CA1)));
  border-color: var(--global-palette-outline-btn-border, var(--global-palette-btn-out, var(--global-palette2, #027CA1)));
}

.equinox-connected-line .button.button-style-outline:hover,
.equinox-connected-line .btn.btn-outline:hover,
.equinox-connected-line .btn.outline:hover {
  background-color: var(--global-palette-outline-btn-bg-hover, var(--global-palette-btn-out-bg-hover, var(--global-palette2, #027CA1)));
  color: var(--global-palette-outline-btn-hover, var(--global-palette-btn-out-hover, #ffffff));
  border-color: var(--global-palette-outline-btn-border-hover, var(--global-palette-btn-out-bg-hover, var(--global-palette2, #027CA1)));
}

.equinox-connected-line .btn svg.bic,
.equinox-connected-line .button svg.bic,
.equinox-connected-line .wp-block-button__link svg.bic {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* ==========================================================================
   RESPONSIVE DESIGN: HORIZONTAL MODE (Tablet & Mobile)
   ========================================================================== */
@container (max-width: 992px) {
  :not(.editor-styles-wrapper) .equinox-connected-line.mode-horizontal,
  .editor-styles-wrapper .equinox-connected-line.mode-horizontal > .block-editor-inner-blocks > .block-editor-block-list__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 36px !important;
    row-gap: 32px !important;
  }
}

@media (max-width: 992px) {
  :not(.editor-styles-wrapper) .equinox-connected-line.mode-horizontal,
  .editor-styles-wrapper .equinox-connected-line.mode-horizontal > .block-editor-inner-blocks > .block-editor-block-list__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 36px !important;
    row-gap: 32px !important;
  }
}

@container (max-width: 768px) {
  :not(.editor-styles-wrapper) .equinox-connected-line.mode-horizontal,
  .editor-styles-wrapper .equinox-connected-line.mode-horizontal > .block-editor-inner-blocks > .block-editor-block-list__layout {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .equinox-connected-line.mode-horizontal .rc,
  .editor-styles-wrapper .equinox-connected-line.mode-horizontal .rc {
    position: relative !important;
    padding-left: 68px !important;
    padding-top: 0 !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
  }

  .equinox-connected-line.mode-horizontal .dot,
  .editor-styles-wrapper .equinox-connected-line.mode-horizontal .dot {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    z-index: 2 !important;
  }

  .equinox-connected-line.mode-horizontal .rl,
  .editor-styles-wrapper .equinox-connected-line.mode-horizontal .rl {
    position: absolute !important;
    left: 23px !important;
    top: 46px !important;
    width: 0 !important;
    height: calc(100% + 40px - 46px) !important;
    border-top: none !important;
    border-left: 1.5px var(--eq-line-style, dotted) var(--eq-line-color, #93BCCD) !important;
    z-index: 1 !important;
  }

  .equinox-connected-line.mode-horizontal .stephead,
  .equinox-connected-line.mode-horizontal .rc-content > h3,
  .editor-styles-wrapper .equinox-connected-line.mode-horizontal .stephead,
  .editor-styles-wrapper .equinox-connected-line.mode-horizontal .rc-content > h3 {
    margin: 0 0 10px 0 !important;
    padding-top: 0 !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
  }

  .equinox-connected-line.mode-horizontal .rc .body,
  .equinox-connected-line.mode-horizontal .rc-content > p,
  .editor-styles-wrapper .equinox-connected-line.mode-horizontal .rc .body,
  .editor-styles-wrapper .equinox-connected-line.mode-horizontal .rc-content > p {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  .equinox-connected-line.mode-horizontal .ministepcta,
  .equinox-connected-line.mode-horizontal .rc-content .ministepcta,
  .equinox-connected-line.mode-horizontal .rc-content .wp-block-buttons,
  .equinox-connected-line.mode-horizontal .rc-content .kt-btn-wrap,
  .editor-styles-wrapper .equinox-connected-line.mode-horizontal .ministepcta,
  .editor-styles-wrapper .equinox-connected-line.mode-horizontal .rc-content .ministepcta,
  .editor-styles-wrapper .equinox-connected-line.mode-horizontal .rc-content .wp-block-buttons,
  .editor-styles-wrapper .equinox-connected-line.mode-horizontal .rc-content .kt-btn-wrap {
    margin-top: 18px !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 768px) {
  :not(.editor-styles-wrapper) .equinox-connected-line.mode-horizontal,
  .editor-styles-wrapper .equinox-connected-line.mode-horizontal > .block-editor-inner-blocks > .block-editor-block-list__layout {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .equinox-connected-line.mode-horizontal .rc,
  .editor-styles-wrapper .equinox-connected-line.mode-horizontal .rc {
    position: relative !important;
    padding-left: 68px !important;
    padding-top: 0 !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
  }

  .equinox-connected-line.mode-horizontal .dot,
  .editor-styles-wrapper .equinox-connected-line.mode-horizontal .dot {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    z-index: 2 !important;
  }

  .equinox-connected-line.mode-horizontal .rl,
  .editor-styles-wrapper .equinox-connected-line.mode-horizontal .rl {
    position: absolute !important;
    left: 23px !important;
    top: 46px !important;
    width: 0 !important;
    height: calc(100% + 40px - 46px) !important;
    border-top: none !important;
    border-left: 1.5px var(--eq-line-style, dotted) var(--eq-line-color, #93BCCD) !important;
    z-index: 1 !important;
  }

  .equinox-connected-line.mode-horizontal .stephead,
  .equinox-connected-line.mode-horizontal .rc-content > h3,
  .editor-styles-wrapper .equinox-connected-line.mode-horizontal .stephead,
  .editor-styles-wrapper .equinox-connected-line.mode-horizontal .rc-content > h3 {
    margin: 0 0 10px 0 !important;
    padding-top: 0 !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
  }

  .equinox-connected-line.mode-horizontal .rc .body,
  .equinox-connected-line.mode-horizontal .rc-content > p,
  .editor-styles-wrapper .equinox-connected-line.mode-horizontal .rc .body,
  .editor-styles-wrapper .equinox-connected-line.mode-horizontal .rc-content > p {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  .equinox-connected-line.mode-horizontal .ministepcta,
  .equinox-connected-line.mode-horizontal .rc-content .ministepcta,
  .equinox-connected-line.mode-horizontal .rc-content .wp-block-buttons,
  .equinox-connected-line.mode-horizontal .rc-content .kt-btn-wrap,
  .editor-styles-wrapper .equinox-connected-line.mode-horizontal .ministepcta,
  .editor-styles-wrapper .equinox-connected-line.mode-horizontal .rc-content .ministepcta,
  .editor-styles-wrapper .equinox-connected-line.mode-horizontal .rc-content .wp-block-buttons,
  .editor-styles-wrapper .equinox-connected-line.mode-horizontal .rc-content .kt-btn-wrap {
    margin-top: 18px !important;
    padding-top: 0 !important;
  }
}

/* ==========================================================================
   RESPONSIVE DESIGN: VERTICAL MODE (Narrow Screens / Mobile Layout <= 768px)
   Applies BOTH via Container Query (Editor Canvas & Nested Sections)
   AND via Media Query (Frontend Viewport & Mobile Preview)
   ========================================================================== */

@container (max-width: 768px) {
  .equinox-connected-line.mode-vertical .timeline-rail,
  .equinox-connected-line.timelinelist .timeline-rail,
  .editor-styles-wrapper .equinox-connected-line.mode-vertical .timeline-rail,
  .editor-styles-wrapper .equinox-connected-line.timelinelist .timeline-rail {
    left: 16px !important;
    top: 14px !important;
    bottom: 20px !important;
    transform: translateX(-50%) !important;
  }

  .equinox-connected-line.mode-vertical .trow,
  .editor-styles-wrapper .equinox-connected-line.mode-vertical .trow,
  .editor-styles-wrapper .equinox-connected-line.mode-vertical [data-type="equinox/connected-line-item"].trow,
  .editor-styles-wrapper .equinox-connected-line.mode-vertical .wp-block-equinox-connected-line-item.trow {
    display: grid !important;
    grid-template-columns: 32px 1fr !important;
    grid-template-rows: auto auto !important;
    grid-template-areas: none !important;
    column-gap: 22px !important;
    row-gap: 0 !important;
    padding: 32px 0 !important;
  }

  .equinox-connected-line.mode-vertical .tmarker,
  .editor-styles-wrapper .equinox-connected-line.mode-vertical .tmarker {
    grid-area: auto !important;
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }

  .equinox-connected-line.mode-vertical .tnode,
  .editor-styles-wrapper .equinox-connected-line.mode-vertical .tnode {
    width: 24px !important;
    height: 24px !important;
    margin-top: 4px !important;
  }

  .equinox-connected-line.mode-vertical .tleft,
  .editor-styles-wrapper .equinox-connected-line.mode-vertical .tleft {
    grid-area: auto !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    text-align: left !important;
    padding-top: 0 !important;
    margin-bottom: 4px !important;
  }

  .equinox-connected-line.mode-vertical .tyear,
  .editor-styles-wrapper .equinox-connected-line.mode-vertical .tyear {
    font-size: 26px !important;
    line-height: 1.1 !important;
    text-align: left !important;
  }

  .equinox-connected-line.mode-vertical .tright,
  .editor-styles-wrapper .equinox-connected-line.mode-vertical .tright {
    grid-area: auto !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-top: 0 !important;
    margin: 0 !important;
  }

  .equinox-connected-line.mode-vertical .tera,
  .editor-styles-wrapper .equinox-connected-line.mode-vertical .tera {
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }

  .equinox-connected-line.mode-vertical .ttitle,
  .editor-styles-wrapper .equinox-connected-line.mode-vertical .ttitle {
    font-size: 18px !important;
    line-height: 1.32 !important;
    margin-bottom: 8px !important;
  }

  .equinox-connected-line.mode-vertical .tbody,
  .editor-styles-wrapper .equinox-connected-line.mode-vertical .tbody {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
}

@media (max-width: 768px) {
  .equinox-connected-line.mode-vertical .timeline-rail,
  .equinox-connected-line.timelinelist .timeline-rail,
  .editor-styles-wrapper .equinox-connected-line.mode-vertical .timeline-rail,
  .editor-styles-wrapper .equinox-connected-line.timelinelist .timeline-rail {
    left: 16px !important;
    top: 14px !important;
    bottom: 20px !important;
    transform: translateX(-50%) !important;
  }

  .equinox-connected-line.mode-vertical .trow,
  .editor-styles-wrapper .equinox-connected-line.mode-vertical .trow,
  .editor-styles-wrapper .equinox-connected-line.mode-vertical [data-type="equinox/connected-line-item"].trow,
  .editor-styles-wrapper .equinox-connected-line.mode-vertical .wp-block-equinox-connected-line-item.trow {
    display: grid !important;
    grid-template-columns: 32px 1fr !important;
    grid-template-rows: auto auto !important;
    grid-template-areas: none !important;
    column-gap: 22px !important;
    row-gap: 0 !important;
    padding: 32px 0 !important;
  }

  .equinox-connected-line.mode-vertical .tmarker,
  .editor-styles-wrapper .equinox-connected-line.mode-vertical .tmarker {
    grid-area: auto !important;
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }

  .equinox-connected-line.mode-vertical .tnode,
  .editor-styles-wrapper .equinox-connected-line.mode-vertical .tnode {
    width: 24px !important;
    height: 24px !important;
    margin-top: 4px !important;
  }

  .equinox-connected-line.mode-vertical .tleft,
  .editor-styles-wrapper .equinox-connected-line.mode-vertical .tleft {
    grid-area: auto !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    text-align: left !important;
    padding-top: 0 !important;
    margin-bottom: 4px !important;
  }

  .equinox-connected-line.mode-vertical .tyear,
  .editor-styles-wrapper .equinox-connected-line.mode-vertical .tyear {
    font-size: 26px !important;
    line-height: 1.1 !important;
    text-align: left !important;
  }

  .equinox-connected-line.mode-vertical .tright,
  .editor-styles-wrapper .equinox-connected-line.mode-vertical .tright {
    grid-area: auto !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-top: 0 !important;
    margin: 0 !important;
  }

  .equinox-connected-line.mode-vertical .tera,
  .editor-styles-wrapper .equinox-connected-line.mode-vertical .tera {
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }

  .equinox-connected-line.mode-vertical .ttitle,
  .editor-styles-wrapper .equinox-connected-line.mode-vertical .ttitle {
    font-size: 18px !important;
    line-height: 1.32 !important;
    margin-bottom: 8px !important;
  }

  .equinox-connected-line.mode-vertical .tbody,
  .editor-styles-wrapper .equinox-connected-line.mode-vertical .tbody {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
}