/* =================================
   FOUNDATION: Custom Properties & Typography
   ================================= */

:root {
  /* Brand Colors */
  --retarus-red: #e00;
  --retarus-blue: #08237d;
  --retarus-dark-grey: #7a869a;
  --retarus-light-grey: #f7f7f9;
  --retarus-border-grey: #d8dce1;
  --retarus-breadcrumb-grey: #AFAFB4;
  

}

/* Embedding Open Sans font */
@font-face {
  font-family: "Open Sans";
  src: url("https://fonts.gstatic.com/s/opensans/v34/mem8YaGs126MiZpBA-UFUK0Udc1UAw.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

/* Apply Open Sans as the global font */
body {
  font-family: "Open Sans", sans-serif !important;
}

/* Normalize heading font weight and color across browsers */
/* Default: color: var(--theme-headline-color) → var(--K15t-foreground), not #000c34 */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600 !important;
  color: #000c34 !important;
}

/* =================================
   BATCH 2: LAYOUT STRUCTURE
   Header, Footer & Navigation
   ================================= */

/* Header content - Position closer to bottom border */
.header-content {
  margin-top: auto !important;
  padding-bottom: 0.5rem !important;
}

/* Article page: header links sit too high above the separator due to the flex centering
   inside .header-content. Negative margin-bottom on .header-links only shifts the links
   down without affecting the search bar (a sibling flex item). */
body:has(.article-page) .header-links {
  margin-bottom: -1.25rem !important;
}

/* Header links - Font styling */
.header-links {
  font-size: 0.95rem;
  font-weight: 400;
}

/* Header links - Flex layout and pipe separators */
.header-links ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

.header-links ul li {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.header-links ul li a {
  margin: 0;
  padding: 0;
}

.header-links ul li:not(:first-child)::before {
  content: "|";
  margin: 0 0.5rem;
}

/* Header border - Black bottom border */
.header,
[data-component="header"] {
  border-block-end: 1px solid #000 !important;
}

/* Footer top border */
footer.footer {
  border-top: 1px solid #000000;
  padding-top: 10px !important;
}

/* Footer links - Flex layout and pipe separators */
.footer-links {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

.footer-links li {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.footer-links li a {
  margin: 0;
  padding: 0;
}

.footer-links li:not(:first-child)::before {
  content: "|";
  margin: 0 0.5rem;
}

/* =================================
   BATCH 3: NAVIGATION ELEMENTS
   Breadcrumbs, Sidebar & TOC
   ================================= */

/* Breadcrumbs - Arrow separator */
.breadcrumbs li span[aria-hidden="true"] {
  display: none;
}

/* Breadcrumbs - Display all items on one line, set font size to 14px (+1px over default 13px) */
/* The ol defaults to block layout, causing each li to stack vertically.
   display: flex makes items flow horizontally.
   Default font is var(--K15t-font-body-small) ≈ 0.8125rem (13px). */
.breadcrumbs ol {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

/* Make li a flex row so ::after (the ›) aligns vertically with the link text.
   vertical-align has no effect on block-level list items; flex centering is reliable. */
.breadcrumbs li {
  display: flex;
  align-items: center;
}

.breadcrumbs li::after {
  content: "›";
  font-size: 1.2em;
  margin: 0 0.5em;
  color: var(--retarus-breadcrumb-grey);
}

.breadcrumbs li:hover {
  color: var(--retarus-breadcrumb-grey);
}

.breadcrumbs li:last-child::after {
  content: none;
}


/* Right Sidebar TOC - Remove border, default black, active item in Retarus red */
/* Uses the officially supported [data-component="toc"] CSS custom property interface */
[data-component="toc"] {
  --border-color: transparent;
  --foreground-color: #000;
  --foreground-color-selected: var(--retarus-red);
}

/* Left nav tree items - Font size (article page sidebar) */
.navigator .tree-item-header {
  font-size: 15px;
}

/* TOC active item - Red left indicator bar */
/* Default uses background-color: currentColor — overriding to always be Retarus red */
.toc.sticky .toc-list .toc-link[aria-current="true"]::before {
  background-color: var(--retarus-red);
}

/* Navigator toggle button - Black border */
.navigator-toggle,
.navigator-toggle:hover {
  border-color: #000;
}

/* Navigator toggle - Both icons in red (hamburger when closed, chevron when open) */
.navigator-toggle .navigator-icon-opened,
.navigator-toggle .navigator-icon-closed {
  color: var(--retarus-red);
}

/* Navigator - Black divider between left nav and main content area */
/* Default: border-inline-end: 1px solid var(--K15t-border-neutral) (grey) */
.navigator {
  border-inline-end-color: #000;
}

/* =================================
   BATCH 4: GLOBAL LINKS & TYPOGRAPHY
   Link Styling & Heading Sizes
   ================================= */

/* Global link styling */
a {
  color: var(--retarus-blue);
  text-decoration: underline;
}

a:hover {
  color: var(--retarus-red);
}

/* External links */
a.external-link {
  color: var(--retarus-blue);
  text-decoration: underline;
}

a.external-link:hover {
  color: var(--retarus-red);
}

/* Horizontal rule styling */
hr {
  border-color: var(--retarus-dark-grey);
  margin-top: 25px;
  margin-bottom: 10px;
}

/* =================================
   BATCH 5: LINK EXCEPTIONS
   Override global link styling for specific contexts
   ================================= */

/* Left sidebar navigation links - no underline, black text */
.tree-item-header a {
  text-decoration: none;
  color: #000;
}

.tree-item-header a:hover {
  text-decoration: none;
  color: var(--retarus-red);
}

/* Breadcrumbs - grey color, no underline by default, underline on hover */
.breadcrumbs li a {
  text-decoration: none;
  color: var(--retarus-breadcrumb-grey);
}

.breadcrumbs li a:hover {
  text-decoration: underline;
  color: var(--retarus-breadcrumb-grey);
}

/* Table of Contents links - black color, no underline by default, underline + red on hover */
/* Note: color: #000 is set here directly — the --foreground-color token falls back to inherit,
   which picks up the global a { color: var(--retarus-blue) } rule and turns links blue. */
.toc-list .toc-link {
  text-decoration: none;
  color: #000;
}

.toc-list .toc-link:hover {
  text-decoration: underline;
  color: var(--retarus-red);
}

/* Header links - no underline, black color */
.header-links ul li a {
  text-decoration: none;
  color: #000;
}

.header-links ul li a:hover {
  text-decoration: none;
  color: var(--retarus-red);
}

/* Footer links - no underline, black color */
.footer-links li a {
  text-decoration: none;
  color: #000;
}

.footer-links li a:hover {
  text-decoration: underline;
  color: #000;
}

/* Footer content links - default blue, no underline */
.footer-content li a {
  color: var(--retarus-blue);
  text-decoration: none;
}

.footer-content li a:hover {
  color: #000;
  text-decoration: underline;
}

/* HOME PAGE - tile-title links should NOT be underlined */
main.home-page .tile-title a {
  text-decoration: none;
  color: #000c34;
}

main.home-page .tile-title a:hover {
  color: var(--retarus-red);
}

/* ARTICLE OVERVIEW PAGE - tile-title links SHOULD be underlined */
main.article-overview-page .tile-title a {
  text-decoration: underline;
  color: #000c34;
}

main.article-overview-page .tile-title a:hover {
  color: var(--retarus-red);
}

/* ARTICLE OVERVIEW PAGE - h3 links in items list SHOULD be underlined */
main.article-overview-page .items.list > li > h3 > a {
  text-decoration: underline;
  color: #000c34;
}

main.article-overview-page .items.list > li > h3 > a:hover {
  color: var(--retarus-red);
}

/* ARTICLE OVERVIEW PAGE - nested li links should NOT be underlined */
main.article-overview-page .items.list > li > ul > li > a {
  text-decoration: none;
  color: #000c34;
}

main.article-overview-page .items.list > li > ul > li > a:hover {
  color: var(--retarus-red);
}

/* =================================
   END BATCH 5
   ================================= */

/* =================================
   BATCH 6: CONTENT COMPONENTS
   Panel Macros, Blockquotes, Images & Containers
   ================================= */

/* Panel Macros - Tip styling */
.panel-macro--tip {
  background-color: var(--retarus-light-grey);
  border-left: 3px solid var(--retarus-red);
}

/* Panel Macros - Info styling */
.panel-macro--info {
  background-color: var(--retarus-light-grey);
  border-left: 3px solid var(--retarus-red);
}

/* Panel Macros - Hide icons */
.panel-macro__icon {
  display: none;
}

/* Blockquote/Note styling — ScrollSites article content is in .article-body */
.article-body blockquote {
  border-left: 3px solid var(--retarus-red);
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-left: 20px;
}

/* Blockquote - List margins */
.article-body blockquote ol,
.article-body blockquote ul {
  margin-top: 0;
  margin-bottom: 0;
}

/* Embedded images - Top margin */
/* Note: .vp-image removed — ViewPort-only class, not present in ScrollSites DOM */
figure.confluence-embedded-image.confluence-content-image-border {
  margin-top: 12px;
}

/* Inline images - Cap height at 24px */
/* Default: max-block-size: max(32px, 1lh) — the 32px floor makes images appear at 32px+.
   Overriding both max and min to enforce 24px; leaving min at 1lh would let it override
   max-block-size whenever the computed line-height exceeds 24px. */
.inline-image img {
  max-block-size: 24px;
  min-block-size: 0;
}

/* Expand container spacing */
.expand-container {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* Expand - Keep summary grey when open (matches hover state) */
/* Default: .expand[open] .expand-control only resets border-radius, leaving background transparent (white).
   Re-applying the hover token keeps the grey background persistent after click. */
.expand[open] .expand-control {
  background-color: var(--K15t-surface-raised-hovered);
}

/* Panel component - White background, square corners, no icon, red left border */
/* Default: neutral background, rounded corners (--K15t-radius-small), all-around border, ::before icon */
/* padding-left: 0 — removes the default left padding so content sits flush against the red border.
   margin-left: 0 — resets any inherited outer left margin. */
[data-component="panel"] {
  background-color: #fff;
  border: none;
  border-left: 3px solid var(--retarus-red);
  border-radius: 0;
  margin-left: 0;
  padding-left: 0;
}

/* Hide the default appearance-specific icon (rendered as ::before mask image) */
[data-component="panel"]::before {
  display: none;
}

/* =================================
   END BATCH 6
   ================================= */

/* =================================
   BATCH 7: INTERACTIVE ELEMENTS
   Toggles, Code Blocks, Accordions & Dropdowns
   ================================= */

/* Toggle/Expand buttons - General styling */
.toggle {
  color: var(--retarus-red);
  border-color: var(--retarus-red);
  background-color: white;
}

/* Toggle/Expand buttons - Specific button styling */
button#toggle-open.toggle {
  color: var(--retarus-red);
}

/* Code blocks - Language label */
.code-macro__language {
  background-color: var(--retarus-border-grey);
}

/* Code blocks - Pre and code background */
.code-macro pre {
  background-color: #fff;
  border: 1px solid var(--retarus-border-grey);
}

.code-macro code, 
.code-macro pre {
  background-color: #fff;
}

/* Code blocks - Copy button */
.code-macro .toolbar button.copy-to-clipboard-button {
  color: var(--retarus-red);
}

/* Code blocks - Syntax highlighting tokens */
.code-macro .token.class-name, 
.code-macro .token.deleted, 
.code-macro .token.function, 
.code-macro .token.property, 
.code-macro .token.selector, 
.code-macro .token.tag {
  color: var(--retarus-red);
}

/* Dropdown options - Indicator (red left border) */
.dropdown__option::before {
  background-color: var(--retarus-red) !important;
}

/* Dropdown menu - Selected/active item left border (red) */
.dropdown__option.is-selected::before,
.dropdown__option[aria-selected="true"]::before,
.dropdown__option[data-selected]::before {
  background-color: var(--retarus-red) !important;
}

/* Dropdown menu - Hover state left border (red) */
.dropdown__option:hover::before {
  background-color: var(--retarus-red) !important;
}

/* =================================
   END BATCH 7
   ================================= */

/* =================================
   BATCH 8: BUTTONS & FORMS
   Button Styling & Form Controls
   ================================= */

/* Product page CTA button - Default: white bg, black border, red text */
.button.button--primary {
  background-color: #fff;
  border: 2px solid #000;
  color: var(--retarus-red);
  text-decoration: none;
  border-radius: 1.5rem;
  font-weight: 500;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* Product page CTA button - Hover: red bg, red border, white text */
.button.button--primary:hover {
  background-color: var(--retarus-red);
  border-color: var(--retarus-red);
  color: #fff;
}

/* Search bar - Angular corners for all components */
[data-component="search-bar"] .search-input__input,
[data-component="search-bar"] .dropdown__button,
[data-component="search-bar"] .search-input__submit,
[data-component="search-bar"] .search-bar__input-container {
  border-radius: 0 !important;
}

/* Search bar dropdown button - Default state */
[data-component="search-bar"] .dropdown__button,
.search-bar .dropdown__button {
  background-color: #EFF0F4 !important;
  color: #000 !important;
}

/* Search bar dropdown button - Hover state (red) */
[data-component="search-bar"] .dropdown__button:hover,
.search-bar .dropdown__button:hover {
  background-color: var(--retarus-red) !important;
  color: #fff !important;
}

/* Search bar dropdown button - Expanded/active state (red, not blue) */
[data-component="search-bar"] .dropdown__button[aria-expanded="true"],
.search-bar .dropdown__button[aria-expanded="true"],
[data-component="search-bar"] .dropdown__button:active,
[data-component="search-bar"] .dropdown__button:focus,
.search-bar .dropdown__button:focus {
  background-color: var(--retarus-red) !important;
  color: #fff !important;
}

/* Search input - Black border on focus, not blue */
.search-input__input:focus,
.search-input__input:focus-visible,
.search-input input:focus,
.search-bar input:focus,
input.search-input__input:focus,
[data-component="search-bar"] input:focus,
[data-component="search-input"] input:focus {
  border-color: #000 !important;
  border-width: 1px !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Search bar container - Remove outline, keep only border on focus */
.search-bar__input-container:has(input:focus-visible),
[data-component="search-bar"] .search-bar__input-container:has(input:focus-visible) {
  outline: none !important;
  border-color: #000 !important;
  border-width: 1px !important;
}

/* Search bar container - Keep white background on hover and focus */
.search-bar__input-container:has(input:hover),
.search-bar__input-container:has(input:focus),
.search-bar__input-container:has(input:focus-visible),
[data-component="search-bar"] .search-bar__input-container:has(input:hover),
[data-component="search-bar"] .search-bar__input-container:has(input:focus),
[data-component="search-bar"] .search-bar__input-container:has(input:focus-visible) {
  background-color: #fff !important;
}

/* Search input - Keep white background on hover and focus */
.search-input__input,
.search-input__input:hover,
.search-input__input:focus,
.search-input__input:focus-visible {
  background-color: #fff !important;
}

/* Search submit button (magnifier icon) - Grey at rest, matches the search border color */
/* Default border color: var(--K15t-border-neutral-strong) → #E2E5EB in light mode */
.search-input__submit,
button.search-input__submit,
[type="submit"].search-input__submit {
  background-color: transparent !important;
  color: var(--K15t-border-neutral-strong) !important;
}

/* Search submit button - Black on hover (same intent as border going darker on hover) */
.search-input__submit:hover,
button.search-input__submit:hover {
  background-color: transparent !important;
  color: #000 !important;
}

/* Search submit button - Black on active/focus (input is active, icon should be prominent) */
.search-input__submit:active,
.search-input__submit:focus,
.search-input__submit:focus-visible {
  background-color: transparent !important;
  color: #000 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Magnifier icon - No background */
.search-input__submit svg {
  background-color: transparent !important;
}

/* =================================
   END BATCH 8
   ================================= */

/* =================================
   BATCH 9: TABLES
   Confluence Table Styling
   ================================= */

/* Table container - Remove outer borders and shadows */
table.confluenceTable {
  width: 100% !important;
  border-collapse: collapse !important;
  background-color: white !important;
  font-family: sans-serif !important;
  font-size: 16px !important;
  border: none !important;
  box-shadow: none !important;
}

/* Table headers - Bottom border only */
table.confluenceTable th.confluenceTh {
  background-color: white !important;
  font-weight: bold !important;
  padding: 12px 16px !important;
  text-align: left !important;
  vertical-align: top !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid #ddd !important;
  box-shadow: none !important;
}

/* Table data cells - Fully borderless */
table.confluenceTable td.confluenceTd {
  background-color: white !important;
  border: none !important;
  padding: 12px 16px !important;
  text-align: left !important;
  vertical-align: top !important;
  box-shadow: none !important;
}

/* Table row hover effect */
table.confluenceTable tr:hover td {
  background-color: #f1f1f1 !important;
}

/* =================================
   END BATCH 9
   ================================= */

/* =================================
   BATCH 11: BANNER & SPACING
   Page Layout Adjustments
   ================================= */

/* Banner - Reduce top and bottom padding by ~50% */
[data-component="banner"].banner,
.banner {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

/* Banner hgroup - Reduce margins */
.banner {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
}

hgroup {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Tiles - Reduce border-radius from medium (5pt) to small (3pt) */
/* Default: border-radius: var(--K15t-radius-medium) */
.tile {
  border-radius: var(--K15t-radius-small);
}

/* Portal page tiles - Set measured aspect ratio (332 × 231 px) */
main.home-page .tile {
  aspect-ratio: 332 / 231;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Article/content page - Reduce top padding (default is ~72px, too much space below header) */
div#content.content {
  padding-top: 12px !important;
}

/* Portal page - Bottom margin for content */
.portal {
  margin-bottom: 30px;
}

/* Constrain site to 90% viewport width on desktop, centered with equal side margins */
/* Only activates at ≥1280px so mobile and tablet remain full-width */
@media screen and (min-width: 1280px) {
  body {
    max-width: 90%;
    margin-inline: auto;
  }
}

/* =================================
   END BATCH 11
   ================================= */

/* =================================
   BATCH 12: PRODUCT PAGE OVERRIDES
   News section & CTA
   ================================= */

/* News tile - Remove border and shadow */
.news .tile {
  border: none;
  box-shadow: none;
}

/* News tile title ("Last Updated") - 20px */
.news .tile-title {
  font-size: 20px;
}

/* News list items - 14px, no heading size */
.news .items.list li h3 {
  font-size: 14px;
}

/* News list links - Retarus dark blue, underlined */
.news .items.list li a {
  color: #000c34;
  text-decoration: underline;
}

.news .items.list li a:hover {
  color: var(--retarus-red);
}

/* News - Hide article timestamps */
.news time {
  display: none;
}

/* Product page - Pages section links - Retarus dark blue, not default blue */
section.pages a {
  color: #000c34;
}

section.pages a:hover {
  color: var(--retarus-red);
}

/* Product page - Hide empty pages sections (ul has no li children) */
/* Uses :not(:has(li)) at the section level to avoid nested :has() which has limited browser support */
section.pages:not(:has(ul.items.list li)) {
  display: none;
}

/* =================================
   END BATCH 12
   ================================= */