/* Font Awesome — required by the icons we inject into the accordion headings.
   An @import must stay at the very top of the file. */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');

/* CRAB-61835 branding tokens (do not publish before 2026-08-27).
   Logo + favicon are uploaded in Scroll Sites theme admin, not here.

   Scroll sets theme chrome vars inside `@layer overrides` on
   `:root[data-color-scheme='light']`, which beats a plain `:root` rule —
   match that specificity. Article/body links use `--K15t-link` (defaults to
   blue-600), so remap that too. */
@layer overrides {
  :root,
  :host {
    --sq-maroon: #5b0116;
    --sq-cream: #f6f5ed;
    --sq-orange: #f9532d;
    --sq-navy: #01445c;
    --sq-cerulean: #287d9c;
    --sq-maroon-rgb: 91, 1, 22;
  }

  :root[data-color-scheme='light'],
  :host([data-color-scheme='light']) {
    --sq-maroon: #5b0116;
    --sq-cream: #f6f5ed;
    --sq-orange: #f9532d;
    --sq-navy: #01445c;
    --sq-cerulean: #287d9c;
    --sq-maroon-rgb: 91, 1, 22;

    /* Site chrome (header / footer / banner). */
    --theme-primary-color: var(--sq-maroon);
    --theme-on-primary-color: #ffffff;
    --theme-header-text-color: var(--sq-maroon);
    --theme-header-background-color: var(--sq-cream);
    --theme-footer-text-color: #ffffff;
    --theme-footer-background-color: var(--sq-maroon);
    --theme-banner-text-color: #ffffff;
    /* Page / article headings (h1–h6 use --theme-headline-color). */
    --theme-headline-color: var(--sq-maroon);

    /* In-content + nav links (theme default: --K15t-color-blue-600). */
    --K15t-link: var(--sq-maroon);
    --K15t-link-visited: var(--sq-maroon);
    --K15t-foreground-brand: var(--sq-maroon);
    --K15t-background-brand: rgba(var(--sq-maroon-rgb), 0.08);
    --K15t-background-brand-hovered: rgba(var(--sq-maroon-rgb), 0.14);
    --K15t-border-brand: var(--sq-maroon);
    --K15t-border-brand-hovered: var(--sq-orange);
  }
}

/* Hover/active for theme links site-wide (orange per AC).
   Skip filled primary buttons — orange text on maroon/orange fill is unreadable. */
a:hover:not(.sq-btn-primary):not([data-component='handy-button']),
a:active:not(.sq-btn-primary):not([data-component='handy-button']) {
  color: var(--sq-orange);
}

/* Filled primary / maroon buttons: keep white label on hover (bg may stay
   maroon or shift to orange — either way the label must stay white). */
.sq-btn-primary:hover,
.sq-btn-primary:active,
.sq-btn-primary:focus-visible,
[data-component='handy-button']:hover,
[data-component='handy-button']:active,
[data-component='handy-button']:focus-visible {
  color: #ffffff !important;
}

/* Shared keyboard focus ring — visible on Tab, not on mouse click.
   Orange accent meets UI focus contrast on cream/white (≥3:1). */
a:focus-visible,
button:focus-visible,
.picker:focus-visible,
.picker select:focus-visible,
.sq-btn:focus-visible,
.sq-close:focus-visible,
[data-component='handy-button']:focus-visible {
  outline: 2px solid var(--sq-orange);
  outline-offset: 2px;
}

/* Text selection: theme primary is now dark maroon, which makes the browser
   highlight unreadable (maroon-on-maroon). Force a high-contrast selection. */
::selection {
  background: var(--sq-maroon);
  color: #ffffff;
}

::-moz-selection {
  background: var(--sq-maroon);
  color: #ffffff;
}

/* Sidebar tree, breadcrumbs, TOC — selected/active accents. */
.navigator a:hover,
.tree-item a:hover,
.breadcrumbs a:hover,
.toc a:hover,
.page-pagination a:hover {
  color: var(--sq-orange);
}

.navigator .tree-item-header,
.navigator a,
.breadcrumbs a,
.toc a,
.page-pagination a,
.article-body a,
.main-content a {
  color: var(--sq-maroon);
}

/* Current page in the left nav uses maroon background via theme primary —
   keep label white so it stays readable (don't let the maroon link rule win). */
.navigator .tree-item-header:has(> [aria-current='page']),
.navigator .tree-item-header:has(> [aria-current='page']) a,
.navigator a[aria-current='page'] {
  color: #ffffff;
}

.navigator .tree-item-header:has(> [aria-current='page']) a:hover,
.navigator a[aria-current='page']:hover {
  color: #ffffff;
}

.navigator a:hover,
.breadcrumbs a:hover,
.toc a:hover,
.page-pagination a:hover,
.article-body a:hover,
.main-content a:hover {
  color: var(--sq-orange);
}

/* Non-current tree rows: orange hover only (current row stays white-on-maroon). */
.navigator .tree-item-header:not(:has(> [aria-current='page'])) a:hover {
  color: var(--sq-orange);
}

/* "Previous page" / "Next page" labels — brand Navy (secondary), not theme blue-gray. */
.page-pagination-label {
  color: var(--sq-navy);
}

.article-overview-page .content {
  row-gap: 0;
}

/* Cream page chrome behind tiles (landing) and article surfaces. */
body,
.article-overview-page.hero-layout.body,
.article-overview-page {
  background-color: var(--sq-cream);
}

/* All content headings maroon (theme default is neutral near-black). */
h1,
h2,
h3,
h4,
h5,
h6,
.article-title,
.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5,
.main-content h6,
.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 {
  color: var(--sq-maroon);
}

/* Panels inherit panel foreground — don't force maroon over info/warning chrome. */
[data-component='panel'] :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
}

/* The site name reads "Seeq Knowledge Base", but the logo beside it already
   says "Seeq" — relabel it to just "Knowledge Base". Zero out the original
   text node, then restore the theme's size via the injected pseudo-element
   (weight/color are inherited). */
.header .header-site-branding a.header-site-name {
  font-size: 0;
  color: var(--sq-maroon);
}

.header .header-site-branding a.header-site-name::after {
  content: 'Knowledge Base';
  font-size: 16px;
  color: var(--sq-maroon);
}

.header {
  background-color: var(--sq-cream);
  color: var(--sq-maroon);
}

.header .header-links a,
.header .header-content a {
  color: var(--sq-maroon);
}

.header .header-links a:hover,
.header .header-content a:hover,
.header .header-site-branding a.header-site-name:hover::after {
  color: var(--sq-orange);
}

/* Version / variant pickers (Latest / Cloud).
   Theme swaps fill to header-text (maroon) on hover/open and sets label to
   header-background (cream). Force white label on maroon fill; don't override
   `color` on :hover or we paint maroon text onto the maroon chip. */
.header .picker,
.header-pickers .picker {
  --_text-color: var(--sq-maroon);
  --_text-color-active: #ffffff;
  --_background-color: #ffffff;
  --_background-color-active: var(--sq-maroon);
  --_border-color: var(--sq-maroon);
  --_border-color-active: var(--sq-maroon);
}

.banner {
  /* Solid maroon hero (replaces previous navy gradient / theme banner image). */
  background-image: none !important;
  background-color: var(--sq-maroon) !important;

  hgroup h1 {
    display: none;
  }

  p {
    font-size: 36px;
    font-weight: 500;
  }
}

.footer {
  background-color: var(--sq-maroon);
  color: #fff;
}

/* Layout the tiles into a 2x2 grid on desktop and a column on mobile. */
.article-overview-page {
  .items.tiles {
    /* `.pages` is a `subgrid`; span every column so the grid is full width
       (otherwise it would sit in a single narrow grid track). */
    grid-column: 1 / -1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;

    @media (max-width: 700px) {
      grid-template-columns: 1fr;
    }

    > li {
      margin: 0;
      padding: 0;
      list-style: none;
    }
  }

  .tile {
    position: relative;
    height: 100%;
    padding: 26px 28px 28px;
    border: 1px solid #e3e6e8;
    border-radius: 12px;
    background: #fff;
    transition:
      box-shadow 0.15s ease,
      border-color 0.15s ease,
      transform 0.15s ease;

    &:hover {
      border-color: var(--sq-orange);
      box-shadow: 0 10px 28px rgba(var(--sq-maroon-rgb), 0.14);
      transform: translateY(-2px);
    }
  }

  .tile-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 10px;

    .fas {
      flex: none;
      width: 1.4rem;
      color: var(--sq-orange);
      font-size: 1.4rem;
      text-align: center;
    }

    a {
      color: var(--sq-maroon);
      text-decoration: none;

      &:hover {
        color: var(--sq-orange);
      }

      &::after {
        content: '';
        position: absolute;
        inset: 0;
      }
    }
  }

  .tile-text {
    color: #5a6470;
    line-height: 1.5;
  }
}

/* While the modal is open, lock scrolling on the page behind it so the modal's
   own content is the only scroll context (custom.js toggles this on <html>).
   Without it the background scrolls too — a confusing second scrollbar. */
html.sq-modal-open {
  overflow: hidden;
}

#sq-training-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Alt backdrop: rgba(1, 68, 92, 0.40) Navy */
  background: rgba(var(--sq-maroon-rgb), 0.30);

  /* `sq-gone` hides the whole modal (on the root) or its toggled inner bits. */
  &.sq-gone,
  .sq-gone {
    display: none !important;
  }

  .sq-training-modal-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 780px;
    max-height: 85vh;
    background: white;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    overflow: hidden;
  }

  .sq-close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #5a6470;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;

    &:hover {
      background: #f0f1f2;
      color: #000;
    }
  }

  .sq-scrollable-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 40px 44px 44px;
    color: #2b333b;
    line-height: 1.55;
  }

  /* Hero: title + the two value-prop benefits, each with a check. Left-aligned
     so the checks share the same left rail as the numbered steps below. */
  .sq-modal-hero {
    h2 {
      margin: 0 0 16px;
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--sq-maroon);
    }
  }

  .sq-benefits {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: flex;
      align-items: baseline;
      gap: 10px;
      color: #5a6470;
    }

    li + li {
      margin-top: 8px;
    }

    .fas {
      flex: none;
      color: var(--sq-maroon);
      font-size: 0.85rem;
    }
  }

  /* Each content section is separated by a hairline divider and even spacing. */
  .sq-modal-section {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid #e7eaec;

    > h3 {
      margin: 0 0 18px;
      font-size: 1.15rem;
      font-weight: 600;
      color: var(--sq-maroon);
    }

    > p {
      margin: 0 0 20px;
    }
  }

  /* Numbered steps with circular badges (via a CSS counter). */
  .sq-steps {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    counter-reset: sq-step;

    li {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      counter-increment: sq-step;
    }

    li + li {
      margin-top: 18px;
    }

    li::before {
      content: counter(sq-step);
      flex: none;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--sq-maroon);
      color: #fff;
      font-size: 0.9rem;
      font-weight: 600;
    }
  }

  .sq-step-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 2px;
  }

  .sq-step-title {
    font-weight: 600;
    color: #1c2530;
  }

  .sq-step-desc {
    color: #5a6470;
    font-size: 0.95rem;
  }

  /* Action row: a primary/secondary button plus an optional inline note. */
  .sq-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
  }

  .sq-actions-note {
    color: #5a6470;
    font-size: 0.9rem;
  }

  .sq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 22px;
    border: 1.5px solid transparent;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color 0.15s ease,
      border-color 0.15s ease,
      color 0.15s ease;
  }

  .sq-btn-primary {
    background: var(--sq-maroon);
    color: #fff !important;

    &:hover,
    &:active,
    &:focus-visible {
      background: var(--sq-orange);
      color: #fff !important;
    }
  }

  /* Calendar schedule: loads automatically when the modal opens. While it's
     fetching we show a spinner + label; on failure, a link to the live site. */
  #sq-training-schedule {
    margin-top: 4px;
  }

  .sq-schedule-status {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #5a6470;
    font-size: 0.95rem;

    &.sq-schedule-error a {
      color: var(--sq-maroon);
    }

    &.sq-schedule-error a:hover {
      color: var(--sq-orange);
    }
  }

  .sq-training-course + .sq-training-course {
    margin-top: 32px;
  }

  .sq-training-course {
    h4 {
      margin: 0 0 6px;
      font-size: 1rem;
      font-weight: 600;
      color: var(--sq-maroon);
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.9rem;
      /* Reset the Confluence/Scroll theme's default table chrome (vertical grid
         borders, header background) so only our hairline rows remain. */
      border: 0;
    }

    /* Quiet, letter-spaced column labels — the "designed" header treatment.
       Symmetric horizontal padding gives each column even breathing room. */
    thead th {
      padding: 8px 18px;
      text-align: left;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--sq-navy);
      white-space: nowrap;
      background: none;
      border: 0;
      border-bottom: 1px solid #e4e8ec;
    }

    tbody td {
      padding: 13px 18px;
      text-align: left;
      vertical-align: top;
      color: #5a6470;
      background: none;
      border: 0;
      border-bottom: 1px solid #eef1f3;
    }

    tbody tr:last-child td {
      border-bottom: none;
    }

    /* The first column aligns flush with the content rail; the last sits flush
       with the right edge. Inner columns keep padding on both sides. */
    th:first-child,
    td:first-child {
      width: 100%;
      padding-left: 0;
    }

    th:last-child,
    td:last-child {
      padding-right: 0;
    }

    td:first-child {
      color: #1c2530;
      font-weight: 500;
    }

    th:not(:first-child),
    td:not(:first-child) {
      white-space: nowrap;
    }

    /* Right-aligned, tabular counts so the seat numbers line up. */
    .sq-num {
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
  }

  /* Spinner shown beside the "Loading upcoming sessions…" label. */
  #sq-loader {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(var(--sq-maroon-rgb), 0.25);
    border-top-color: var(--sq-maroon);
    border-radius: 50%;
    animation: sq-spin 0.8s linear infinite;
  }

  /* Mobile: full-viewport card and tighter padding. */
  @media (max-width: 600px) {
    padding: 0;

    .sq-training-modal-card {
      max-width: none;
      max-height: 100%;
      height: 100%;
      border-radius: 0;
    }

    .sq-scrollable-content {
      padding: 32px 22px 36px;
    }

    /* A 4-column table doesn't fit a phone, so stack each session into a card:
       the session name as a heading, then label/value rows for the rest. The
       labels come from each cell's data-label (set in custom.js). */
    .sq-training-course table,
    .sq-training-course tbody,
    .sq-training-course tr,
    .sq-training-course td {
      display: block;
      width: auto;
    }

    .sq-training-course thead {
      display: none;
    }

    .sq-training-course tr {
      padding: 16px 0;
      border-bottom: 1px solid #eef1f3;
    }

    .sq-training-course tr:last-child {
      border-bottom: none;
    }

    .sq-training-course td {
      padding: 0;
      border: none;
      white-space: normal;
    }

    /* Session name = the card heading. */
    .sq-training-course td:first-child {
      margin-bottom: 10px;
      color: #1c2530;
      font-weight: 600;
    }

    /* Remaining fields: muted label on the left, value on the right. */
    .sq-training-course td:not(:first-child) {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 3px 0;
      font-size: 0.9rem;
    }

    .sq-training-course td:not(:first-child)::before {
      content: attr(data-label);
      color: var(--sq-navy);
    }

    /* In stacked mode the value sits at the row's right via flex, not text-align. */
    .sq-num {
      text-align: left;
    }
  }
}

/* Spinner used by #sq-loader */
@keyframes sq-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}