/* ============================================
   1. Card borders + hover lift
   ============================================ */
.tile {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: border-color 0.2s ease;
}
.tile:hover {
  border-color: #E3522A;
}

/* ============================================
   2. Orange accent underline on section headings
   Scoped to .article-body h2 only — a bare h2 selector
   was also matching the "On this Page" TOC widget heading.
   ============================================ */
.article-body h2 {
  position: relative;
  padding-bottom: 12px;
}
.article-body h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background-color: #E3522A;
}

/* ============================================
   3. Announcement banner — background + link color
   ============================================ */
theme-announcement-banner.notice {
  background-color: #0B455C;
}
.notice-body,
theme-announcement-banner.notice {
  color: #ffffff;
}
theme-announcement-banner.notice svg {
  color: #ffffff;
  fill: currentColor;
}
theme-announcement-banner.notice a {
  color: #E3522A;
  font-weight: 600;
  text-decoration: underline;
}
theme-announcement-banner.notice .notice-dismiss {
  color: #ffffff;
}

/* ============================================
   4. CTA-style links (standalone "go to guide" links)
   Resting color: grey (#344563), matches table headers.
   Brand orange (#E3522A) reserved for hover only.
   ============================================ */
.article-body > p > a:only-child {
  display: inline-block;
  color: #344563;
  font-weight: 600;
  text-decoration: none;
  padding: 2px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.article-body > p > a:only-child:hover {
  color: #E3522A;
  border-bottom-color: #E3522A;
}
.article-body > p > a:only-child::after {
  content: " →";
}

/* ============================================
   4b. All other in-body links (e.g. inline list links)
   Same color treatment as CTA links, but no arrow.
   ============================================ */
.article-body a {
  color: #344563;
  transition: color 0.2s ease;
}
.article-body a:hover {
  color: #E3522A;
}

/* ============================================
   5. Numbered step headers
   ============================================ */
.article-body h3 {
  border-left: 3px solid #E3522A;
  padding-left: 12px;
}

/* ============================================
   6. Pagination footer
   ============================================ */
.page-pagination-item a {
  transition: color 0.2s ease;
}
.page-pagination-item a:hover {
  color: #E3522A;
}

/* ============================================
   7. Breadcrumb trail
   ============================================ */
.breadcrumbs a {
  color: #344563;
  font-weight: 600;
  transition: color 0.2s ease;
}
.breadcrumbs a:hover {
  color: #E3522A;
}

/* ============================================
   8. Search bar focus state
   ============================================ */
.search-input__input:focus {
  border-color: #E3522A;
  box-shadow: 0 0 0 2px rgba(227, 82, 42, 0.15);
  outline: none;
}

/* ============================================
   9. Footer — bookend the page to match the navy header
   Scoped to the site-wide copyright footer only (footer.footer),
   NOT the bare <footer> tag — that also wraps the Previous/Next
   pagination nav on every article page, which should stay unstyled.
   ============================================ */
footer.footer {
  background-color: #001D44;
  color: #ffffff;
}
footer.footer a {
  color: #E3522A;
}

/* ============================================
   10. Sidebar — highlight the currently active page
   Uses aria-current="page" (confirmed present on the
   active sidebar link) rather than a class, since no
   "active"/"current" class exists in the markup.
   ============================================ */
.navigator a[aria-current="page"] {
  background-color: rgba(227, 82, 42, 0.08);
  border-radius: 6px;
  font-weight: 600;
  color: #E3522A;
}

/* ============================================
   11. Code blocks — give them a visible box
   Previously fully transparent, no border, black-on-white,
   indistinguishable from regular prose.
   ============================================ */
pre {
  background-color: #F4F5F7;
  border: 1px solid #DFE1E6;
  border-radius: 6px;
  padding: 16px;
}
pre code {
  color: #172B4D;
}

/* ============================================
   12. "Why this matters" panel — brand-aligned color
   Was default Confluence lavender/pink (unrelated to brand).
   ============================================ */
[data-appearance="note"] {
  background-color: #FFF4EE;
  border-left: 3px solid #E3522A;
}

/* ============================================
   13. "This shows up differently by role" panel
   Background stays pale navy tint (distinct from the
   note panel's cream), but border color unified to the
   same brand orange used everywhere else on the site.
   ============================================ */
.article-body [data-component="panel"][data-appearance="info"] {
  background-color: #EEF2F6;
  border-left: 3px solid #E3522A;
}

/* ============================================
   14. "On this Page" TOC — give it a visible container
   Was fully transparent, blending into blank white space.
   ============================================ */
.toc.sticky {
  background-color: #F7F8FA;
  border: 1px solid #E1E4E8;
  border-radius: 8px;
  padding: 16px;
}

/* ============================================
   15. TOC heading — tie into brand accent system
   ============================================ */
.toc-heading {
  padding-bottom: 8px;
  border-bottom: 2px solid #E3522A;
  margin-bottom: 8px;
}

/* ============================================
   16. TOC active section link — orange accent
   FIXED: was adding a second competing indicator on top
   of Scroll Sites' own built-in active-tab pseudo-element
   (a 4px rounded tab using background-color: currentColor,
   which rendered black by default since no color was set).
   Removed our redundant border-left and instead recolored
   their existing indicator directly.
   ============================================ */
.toc.sticky .toc-list .toc-link[aria-current="true"] {
  font-weight: 600;
}
.toc.sticky .toc-list .toc-link[aria-current="true"]::before {
  background-color: #E3522A;
}

/* ============================================
   17. Body text color — softer charcoal instead of navy
   Navy reads heavier at paragraph scale over long-form
   text; a neutral dark grey is easier on extended reading.
   Headings, links, and panel text are untouched — this
   only targets plain paragraphs and list items directly
   in the article body.
   ============================================ */
.article-body > p,
.article-body li {
  color: #2D2D2D;
}

/* ============================================
   18. Sidebar — fade inactive links
   Opacity set to 0.80 — the original 0.65 made sidebar
   text noticeably harder to read than body text (contrast
   ratio 6.13:1 vs body text's 13.77:1). 0.80 brings
   contrast to 10.73:1, much closer to body-text legibility,
   while the active page still stands out clearly via its
   orange color rather than needing a big contrast gap.
   ============================================ */
.navigator a:not([aria-current="page"]) {
  color: rgba(0, 12, 52, 0.80);
}

/* ============================================
   19. Brand font — Figtree
   Matches the actual mavvrik.ai marketing site font
   (confirmed via inspection), replacing Open Sans.
   Font file itself is loaded via the custom JS field.
   .navigator-body is included directly because it has
   its own explicit font-family rule that would otherwise
   override inheritance from the outer .navigator wrapper.
   Code blocks are intentionally excluded — pre/code keep
   their monospace font regardless of this change.
   ============================================ */
body,
.article-body,
.navigator,
.navigator-body,
.toc,
.breadcrumbs,
footer.footer,
h1, h2, h3, p {
  font-family: 'Figtree', sans-serif;
}

/* ============================================
   20. Table row striping + hover
   All rows were previously identical/transparent, making
   it easy to lose your place on wide multi-column tables.
   ============================================ */
.article-body table tbody tr:nth-child(even) {
  background-color: #F7F8FA;
}
.article-body table tbody tr:hover {
  background-color: #FFF4EE;
}

/* ============================================
   21. Screenshots — subtle border + shadow
   Previously floated bare with no border/shadow, only a
   6px corner radius. Framing them like a small "window"
   makes them read as product screenshots rather than
   plain inline images.
   ============================================ */
.article-body img {
  border: 1px solid #E1E4E8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ============================================
   22. "Use with AI" menu — brand accent on hover
   Was fully generic (white bg, plain grey icons, no
   hover feedback at all).
   ============================================ */
theme-menu-item:hover {
  background-color: #FFF4EE;
}
theme-menu-item:hover .prefix svg {
  color: #E3522A;
}

/* ============================================
   23. Search results dropdown — brand accent
   Matched search term was plain black bold text with no
   color; result rows had no hover feedback at all.
   ============================================ */
.search-suggestion-option:hover,
.search-suggestion-option-container[aria-selected="true"] .search-suggestion-option {
  background-color: #FFF4EE;
}
.search-suggestion-option em {
  color: #E3522A;
  font-weight: 600;
  font-style: normal;
}

/* ============================================
   24. Panel icons — remove entirely, and collapse the
   grid column that was reserved for it
   Both the "why this matters" and role-based info panels
   previously showed a small icon (generic purple/blue,
   unrelated to brand). Removed rather than recolored.
   FIXED: the panel uses CSS Grid with an explicit fixed-
   width column for the icon (grid-template-columns: 24px
   ...). Simply hiding the icon left that column reserved,
   creating a wide dead gap between the border and the
   text. Collapsing to a single column and forcing the
   content into it removes the gap entirely.
   ============================================ */
[data-component="panel"][data-appearance="note"]::before,
[data-component="panel"][data-appearance="info"]::before {
  display: none !important;
}
[data-component="panel"][data-appearance="note"],
[data-component="panel"][data-appearance="info"] {
  grid-template-columns: 1fr !important;
  column-gap: 0 !important;
}
[data-component="panel"][data-appearance="note"] > .panel-content,
[data-component="panel"][data-appearance="info"] > .panel-content {
  grid-column: 1 !important;
}

/* ============================================
   25. Panel border-radius fix — square off left corners
   Both note and info panels have border-radius: 6px on
   all four corners, but only border-left is set (not a
   full border). This meant the top-left and bottom-left
   corners curved inward, cutting the straight accent line
   short and leaving a small gap of background color
   visible at each end. Squaring off just the left corners
   lets the border-left run the full height cleanly, while
   the right side keeps its rounding.
   ============================================ */
.article-body [data-component="panel"][data-appearance="note"],
.article-body [data-component="panel"][data-appearance="info"] {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* ============================================
   26. Content column width — responsive, not fixed
   Content had a hardcoded fixed 760px width, centered in
   a fluid article container. On a laptop, available space
   is already close to that, so there's no visible waste —
   but on a large monitor, the container grows much wider
   while the content stays locked at 760px, leaving large
   equal empty margins on both sides.
   FIXED PROPERLY: switched from a fixed width to
   width: 100% with a max-width cap. This fills whatever
   space is actually available (matching today's laptop
   behavior exactly) while capping how wide it's allowed
   to grow on large monitors — rather than guessing a
   single fixed number that works for one screen size.
   ============================================ */
.fb-layout-body,
.fb-layout-container > header,
.fb-layout-container > footer {
  width: 100%;
  max-width: 900px;
}

/* ============================================
   27. Line-numbered code blocks — restore gutter space
   Section 11's blanket "padding: 16px" on all <pre>
   elements overwrote Prism.js's own padding-left (~3.8em)
   that reserves space for its line-numbers gutter. This
   pushed the numbered gutter (.line-numbers-rows) outside
   the visible code block entirely, leaving an empty
   column with a stray divider line where the numbers used
   to be. Restoring the expected left padding specifically
   for line-numbered blocks puts the gutter back in place.
   ============================================ */
pre.line-numbers {
  padding-left: 3.8em;
}

/* ============================================
   28. Code snippet box — hug content width
   Side-effect of section 26 (widening the content
   column): the code-snippet wrapper (.theme-code-snippet)
   has "min-width: 100%", forcing it to stretch to fill
   the full (now wider) content column regardless of how
   short the actual code is — leaving a large blank strip
   of background past where the text ends. Overriding
   min-width to 0 lets width: fit-content actually take
   effect, so each code block sizes to its own content
   (a one-line command stays compact, a long JSON block
   sizes to its longest line) rather than always
   stretching full-width.
   ============================================ */
.theme-code-snippet {
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
}