/* Stellar MLS Rules & Regulations — design tokens from rules.stellarmls.com */
:root {
  /* DXP base tokens carried over from rules.stellarmls.com (only the ones this stylesheet actually uses) */
  --dxp-g-brand: #005fb2; /* Salesforce brand blue for inline text links */
  --dxp-g-root-contrast: #1a1b1e; /* Default body text color */
  --dxp-s-body-line-height: 1.5; /* Base body line height from DXP */
  --dxp-s-body-font-size: 1rem; /* Body text size per live site --dxp-s-body-font-size */
  --dxp-s-body-font-weight: 400; /* Normal body weight from DXP */
  --dxp-s-body-font-style: normal; /* Normal body style from DXP */
  --dxp-s-body-letter-spacing: 0em; /* No extra letter spacing from DXP */
  --dxp-s-body-text-transform: none; /* No text transform on body copy per DXP */

  /* Rules & Regulations site-specific tokens (--rr-*) */
  --rr-font-family: 'Poppins', Arial, sans-serif; /* Primary typeface */
  --rr-horizontal-padding: 8%; /* Desktop horizontal page inset (header/hero/footer) */
  --rr-horizontal-padding-mobile: 4%; /* Mobile horizontal page inset */
  --rr-page-edge-padding: 50px; /* Fixed inset from page edge to sidebar on main content */
  --rr-intro-card-max-width: 1000px; /* Intro card max width on home page */
  --rr-hero-content-max-width: 700px; /* Hero title column max width */
  --rr-hero-title-font-size: 2rem; /* Hero h1 size from live site computed styles */
  --rr-hero-title-font-weight: 700; /* Bold hero title per live site */
  --rr-sidebar-title-font-weight: 650; /* Sidebar heading weight per live site computed styles */
  --rr-search-max-width: 600px; /* Hero search field max width */
  --rr-logo-width: 210px; /* Header logo width per live site computed styles */
  --rr-sidebar-min-width: 250px; /* Sidebar minimum width before stacking */
  --rr-column-gap: 2rem; /* Gap between sidebar and content columns (32px) */
  --rr-color-primary: #9e1c64; /* Brand magenta for buttons and active nav */
  --rr-color-primary-dark: #7a1550; /* Darker magenta for hover states */
  --rr-color-text-primary: #211b57; /* Navy text for headings and nav links */
  --rr-color-text-secondary: #4a5568; /* Secondary body and meta text */
  --rr-color-hover: #cc3340; /* Red accent for link and nav hover */
  --rr-color-background: #f8f9fa; /* Page background behind content */
  --rr-color-white: #ffffff; /* Pure white surfaces */
  --rr-color-border: #e5e5e5; /* Standard divider and border color */
  --rr-color-footer-bg: #211b57; /* Footer background navy */
  --rr-color-footer-text: #C0CCDB; /* Footer body text color */
  --rr-hero-gradient: linear-gradient(to right, #430098, #008CAD); /* Hero gradient; cyan end darkened from #00BCDA (2.3:1) to #008CAD (3.9:1) so the white title passes large-text contrast when it wraps on mobile (WCAG 1.4.3) */
  --rr-focus-ring-color: #9e1c64; /* Focus outline on light surfaces — 7.9:1 against white (WCAG 2.4.7 / 1.4.11) */
  --rr-focus-ring-color-inverse: #ffffff; /* Focus outline on the dark hero gradient */
  --rr-focus-ring-width: 3px; /* Thick enough to be obvious at a glance */
  --rr-focus-ring-offset: 2px; /* Gap so the ring doesn't blend into filled buttons */
  --rr-radius-sm: 6px; /* Small corner radius for inputs and nav */
  --rr-radius-md: 12px; /* Medium corner radius for cards */
  --rr-transition-fast: 0.2s ease; /* Fast color and background transitions */
  --rr-font-size-xs: 0.75rem; /* Extra-small text (footer, meta) */
  --rr-font-size-sm: 0.875rem; /* Small text (breadcrumbs, buttons) */
  --rr-font-size-base: 1rem; /* Base body and nav link size */
  --rr-font-size-xl: 1.25rem; /* Extra-large text for card titles */
  --rr-font-size-2xl: 1.5rem; /* 2xl heading scale step */
  --rr-font-size-3xl: 1.875rem; /* 3xl heading scale step */
  --rr-touch-target-min: 44px; /* Minimum tap target for mobile accessibility */
  --rr-spacing-xs: 4px; /* Extra-small spacing unit */
  --rr-spacing-sm: 8px; /* Small spacing unit */
  --rr-spacing-md: 16px; /* Medium spacing unit */
  --rr-spacing-lg: 24px; /* Large spacing unit */
  --rr-spacing-xl: 32px; /* Extra-large spacing unit */
  --rr-spacing-2xl: 48px; /* 2xl spacing for hero vertical padding */
}

*,
*::before,
*::after {
  box-sizing: border-box; /* Consistent box model across all elements */
}

html {
  font-size: 100%; /* Respect the user's browser font-size setting (16px default) so text scales (WCAG 1.4.4) */
  -webkit-text-size-adjust: 100%; /* Prevent iOS font scaling on rotation */
}

body {
  margin: 0; /* Remove default browser margin */
  font-family: var(--rr-font-family); /* Poppins per live site */
  font-size: var(--rr-font-size-base); /* 1rem body text */
  font-weight: 400; /* Normal weight for body copy */
  line-height: var(--dxp-s-body-line-height); /* 1.5 line height */
  color: var(--rr-color-text-primary); /* Navy primary text */
  background: var(--rr-color-background); /* Light gray page background */
}

a {
  color: var(--dxp-g-brand); /* Blue links in article body and breadcrumbs */
  text-decoration: none; /* No underline by default */
  transition: color var(--rr-transition-fast); /* Smooth hover color change */
}

a:hover {
  color: var(--rr-color-hover); /* Red hover accent per live site */
  text-decoration: underline; /* Underline on hover */
}

/* Shared container — matches the live site's horizontal padding. No max-width: measured the live site's
   own header via getBoundingClientRect at 1920px and 2400px viewports and both land at exactly 8% inset
   with no cap, so capping ours at 1200px was centering content with large empty gutters on wide screens
   instead of letting it use the full width like the live site does. */
.hero-banner .container,
.site-main .container,
.site-footer .container {
  max-width: none; /* Explicit override — Bootstrap's own .container class caps at 1320px past the xxl
                       breakpoint, so simply omitting max-width here lets that cap win instead of ours */
  padding-left: var(--rr-horizontal-padding); /* 8% left inset */
  padding-right: var(--rr-horizontal-padding); /* 8% right inset */
  width: 100%; /* Full viewport width, no cap */
}

@media (max-width: 767.98px) {
  .hero-banner .container,
  .site-main .container,
  .site-footer .container {
    padding-left: var(--rr-horizontal-padding-mobile); /* 4% inset on mobile */
    padding-right: var(--rr-horizontal-padding-mobile); /* 4% inset on mobile */
  }
}

/* Skip link (WCAG 2.4.1) — hidden off-screen until it receives keyboard focus, then pinned top-left */
.skip-link {
  position: absolute; /* Taken out of flow so it never shifts the header */
  top: var(--rr-spacing-sm); /* 8px from top when visible */
  left: var(--rr-spacing-sm); /* 8px from left when visible */
  z-index: 1100; /* Above header, hero dropdown, and admin overlays */
  padding: var(--rr-spacing-sm) var(--rr-spacing-md); /* Comfortable target */
  background: var(--rr-color-text-primary); /* Navy background for high contrast */
  color: var(--rr-color-white); /* White text on navy (about 14:1) */
  font-weight: 600; /* Readable label */
  border-radius: var(--rr-radius-sm); /* Match site corner radius */
  transform: translateY(-200%); /* Off-screen until focused */
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0); /* Slide into view on keyboard focus */
  color: var(--rr-color-white); /* Keep white text instead of link hover color */
  outline: 3px solid var(--rr-color-primary); /* Visible focus ring */
  outline-offset: 2px; /* Separate ring from the box */
}

#main-content:focus {
  outline: none; /* Programmatic focus target from the skip link; not an interactive control */
}

/* Header — full-width bar with horizontal inset on the header itself (matches live site) */
.site-header {
  box-sizing: border-box; /* Match live site box model */
  display: block; /* Block-level header per live site */
  background: var(--rr-color-white); /* White header bar */
  border-bottom: 1px solid var(--rr-color-border); /* Subtle bottom divider */
  padding: var(--rr-spacing-md) var(--rr-horizontal-padding); /* 16px vertical, 8% horizontal per live site */
}

@media (max-width: 767.98px) {
  .site-header {
    padding-left: var(--rr-horizontal-padding-mobile); /* 4% horizontal inset on mobile */
    padding-right: var(--rr-horizontal-padding-mobile); /* 4% horizontal inset on mobile */
  }
}

.site-header .container {
  display: flex; /* Logo left, admin link right */
  align-items: center; /* Vertically center header items */
  justify-content: space-between; /* Push logo and admin to edges */
  max-width: none; /* Header content is not capped at 1200px per live site */
  margin-left: 0; /* No centering offset — padding is on .site-header */
  margin-right: 0; /* No centering offset — padding is on .site-header */
  padding-left: 0; /* Avoid double horizontal inset (padding on .site-header) */
  padding-right: 0; /* Avoid double horizontal inset (padding on .site-header) */
  width: 100%; /* Fill padded header width */
}

.site-logo {
  display: inline-block; /* Shrink-wrap logo link per live site */
  cursor: pointer; /* Pointer cursor on logo link per live site */
  text-decoration: none; /* No underline on logo link */
}

.site-logo img,
.site-logo .logo {
  box-sizing: border-box; /* Match live site box model */
  border: none; /* No border on logo image */
  vertical-align: middle; /* Middle-align logo per live site */
  max-width: 100%; /* Scale down on narrow viewports */
  width: var(--rr-logo-width); /* 210px per live site computed styles */
  height: auto; /* Preserve the PNG's 1144x260 aspect ratio when scaled to 210px */
  display: inline-block; /* Allow vertical-align middle */
  cursor: pointer; /* Pointer cursor on logo image */
}

.header-actions {
  display: flex; /* Sign-in and admin links in a row */
  align-items: center; /* Vertically align header auth controls */
  gap: 1rem; /* Space between sign-in and admin link */
}

.header-user {
  font-size: var(--rr-font-size-sm); /* Match admin link size */
  color: var(--rr-color-text-secondary); /* Subtle signed-in user label */
}

/* Role badge beside the signed-in user's name (Publisher / Editor / No role) */
.header-role {
  display: inline-block; /* Pill shape */
  padding: 0.1rem 0.5rem; /* Compact pill */
  border-radius: 999px; /* Fully rounded */
  background: var(--rr-color-primary); /* Magenta badge for an assigned role */
  color: var(--rr-color-white); /* White text, ~7.9:1 on magenta */
  font-size: var(--rr-font-size-xs); /* Smaller than the name */
  font-weight: 600; /* Readable at small size */
  line-height: 1.5; /* Consistent pill height */
}

.header-role-none {
  background: var(--rr-color-border); /* Neutral gray when no app role is assigned */
  color: var(--rr-color-text-secondary); /* Dark gray text, ~6.4:1 on #e5e5e5 */
}

.header-auth-link {
  font-size: var(--rr-font-size-sm); /* Match admin link size */
  font-weight: 500; /* Medium weight for auth links */
  color: var(--rr-color-primary); /* Magenta brand color */
  text-decoration: none; /* No underline by default */
}

.header-auth-link:hover {
  color: var(--rr-color-primary-dark); /* Darker magenta on hover */
  text-decoration: underline; /* Underline on hover */
}

.admin-link {
  font-size: var(--rr-font-size-sm); /* 0.875rem admin link */
  font-weight: 500; /* Medium weight for admin link */
  color: var(--rr-color-primary); /* Magenta brand color */
  text-decoration: none; /* No underline by default */
  transition: color var(--rr-transition-fast); /* Smooth hover */
}

.admin-link:hover {
  color: var(--rr-color-primary-dark); /* Darker magenta on hover */
  text-decoration: underline; /* Underline on hover */
}

/* Hero banner — purple-to-cyan gradient from live site */
.hero-banner {
  background: var(--rr-hero-gradient); /* linear-gradient(to right, #430098, #00BCDA) */
  color: var(--rr-color-white); /* White text on gradient */
  padding: var(--rr-spacing-2xl) var(--rr-horizontal-padding); /* 48px vertical, 8% horizontal */
  margin-bottom: 0; /* No gap below hero */
}

@media (max-width: 767.98px) {
  .hero-banner {
    padding: var(--rr-spacing-xl) var(--rr-horizontal-padding-mobile); /* Tighter mobile padding */
  }
}

.hero-banner .container {
  display: flex; /* Title left, search right */
  align-items: center; /* Vertically center hero content */
  justify-content: space-between; /* Space between title and search */
  gap: var(--rr-spacing-xl); /* 32px gap between columns */
  padding-left: 0; /* Container padding handled by hero-banner */
  padding-right: 0; /* Container padding handled by hero-banner */
}

.hero-banner h1,
.hero-banner .hero-title {
  box-sizing: border-box; /* Match live site box model */
  flex-shrink: 0; /* Never compress the title — search field yields space instead */
  padding: 0; /* No padding on hero title */
  margin: 0; /* No default heading margin */
  font-size: var(--rr-hero-title-font-size); /* 2rem per live site computed styles */
  font-weight: var(--rr-hero-title-font-weight); /* 700 bold per live site */
  line-height: 1.25; /* Tight heading line height */
  letter-spacing: 0; /* No extra letter spacing */
  color: var(--rr-color-white); /* White title on gradient */
  white-space: nowrap; /* Single-line title per live site */
  max-width: var(--rr-hero-content-max-width); /* 700px title column cap */
}

@media (max-width: 767.98px) {
  .hero-banner h1,
  .hero-banner .hero-title {
    font-size: var(--rr-font-size-xl); /* 1.25rem on narrow screens to avoid overflow */
    white-space: normal; /* Allow title wrap on mobile */
  }
}

.hero-search {
  position: relative; /* Anchor live-search dropdown to the form */
  flex: 1 1 auto; /* Shrink to whatever room the nowrap title leaves behind */
  min-width: 0; /* Allow the flex item to shrink past its content's intrinsic width */
  max-width: var(--rr-search-max-width); /* 600px search field cap */
  margin-left: auto; /* Push search to the right on wide screens */
}

/* Live search dropdown below the hero input */
.hero-search-suggest {
  position: absolute; /* Sit under the input row */
  top: 100%; /* Directly below the form controls */
  left: 0; /* Align with form left edge */
  right: 0; /* Match form width */
  z-index: 20; /* Above hero gradient and page content */
  margin-top: 0.35rem; /* Small gap below the input */
  padding: 0.5rem 0; /* Vertical padding inside the panel */
  background: var(--rr-color-white); /* Readable panel on gradient */
  color: var(--rr-color-text-primary); /* Navy body text */
  border-radius: var(--rr-radius-sm); /* Match input corner radius */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); /* Elevate above hero */
  max-height: min(24rem, 70vh); /* Scroll long result sets */
  overflow-y: auto; /* Scroll when needed */
}

.hero-search-suggest-list {
  list-style: none; /* No bullets */
  margin: 0; /* Flush with panel */
  padding: 0; /* Flush with panel */
}

.hero-search-suggest-list [role="option"] {
  cursor: pointer; /* Options navigate on click even though they're no longer <a> elements */
}

.hero-search-suggest-item {
  display: block; /* Full-width row */
  padding: 0.65rem 1rem; /* Comfortable hit target */
  text-decoration: none; /* Link without underline */
  color: inherit; /* Inherit panel text color */
  border-bottom: 1px solid var(--rr-color-border, #e9ecef); /* Row separator */
}

.hero-search-suggest-item:hover,
.hero-search-suggest-item:focus {
  background: var(--rr-color-surface-muted, #f8f9fa); /* Hover/focus row */
  color: inherit; /* Keep link color */
}

/* Keyboard-highlighted option (aria-activedescendant target set by hero-search.js) — must be clearly visible (WCAG 2.4.7) */
.hero-search-suggest-list [role="option"].is-active .hero-search-suggest-item {
  background: #e8eefc; /* Light blue fill distinct from the hover gray */
  box-shadow: inset 4px 0 0 var(--rr-color-primary); /* Magenta left bar so the highlight isn't color-fill only */
}

.hero-search-suggest-item .search-result-title {
  display: block; /* Title on its own line */
}

.hero-search-suggest-item .search-result-context {
  display: block; /* Parent section context */
  margin-top: 0.15rem; /* Tight spacing under title */
}

.hero-search-suggest-item .summary {
  display: block; /* Snippet under context */
  margin-top: 0.25rem; /* Separate from title block */
  font-size: var(--rr-font-size-sm); /* Smaller excerpt */
}

.hero-search-suggest-status {
  margin: 0; /* No default paragraph margin */
  padding: 0.75rem 1rem; /* Match row padding */
  font-size: var(--rr-font-size-sm); /* Secondary text size */
  color: var(--rr-color-text-muted, #6c757d); /* Muted status copy */
}

.hero-search-suggest-footer {
  padding: 0.5rem 1rem 0.65rem; /* Footer spacing */
  border-top: 1px solid var(--rr-color-border, #e9ecef); /* Separate from results */
}

.hero-search-suggest-view-all {
  width: 100%; /* Full-width footer action */
  padding: 0.5rem 0.75rem; /* Button padding */
  font-family: inherit; /* Match Poppins */
  font-size: var(--rr-font-size-sm); /* Slightly smaller than Search button */
  font-weight: 500; /* Medium weight */
  color: var(--rr-color-primary); /* Brand accent */
  background: transparent; /* Text button style */
  border: 1px solid var(--rr-color-primary); /* Outline button */
  border-radius: var(--rr-radius-sm); /* Rounded corners */
  cursor: pointer; /* Pointer on hover */
}

.hero-search-suggest-view-all:hover {
  background: var(--rr-color-primary); /* Fill on hover */
  color: var(--rr-color-white); /* White label on hover */
}

.hero-search .form-control {
  flex: 1 1 auto; /* Fill remaining space in the search form */
  min-width: 0; /* Allow shrinking below the UA default input width */
  height: var(--rr-touch-target-min); /* 44px touch-friendly input height */
  border: none; /* No border on search input */
  border-radius: var(--rr-radius-sm) 0 0 var(--rr-radius-sm); /* Rounded left corners */
  padding: 0 var(--rr-spacing-md); /* 16px horizontal padding */
  font-family: inherit; /* Match Poppins from body */
  font-size: var(--rr-font-size-base); /* 1rem input text */
  color: var(--rr-color-text-primary); /* Navy input text */
  box-shadow: none; /* No default bootstrap shadow */
}

.hero-search .form-control:focus {
  border-color: transparent; /* No visible border on focus */
  box-shadow: none; /* Replaced by the solid outline below */
  outline: var(--rr-focus-ring-width) solid var(--rr-focus-ring-color-inverse); /* Solid white ring, clearly visible on the gradient (WCAG 2.4.7) — was a 35% white shadow */
  outline-offset: var(--rr-focus-ring-offset); /* Ring sits outside the white input so it contrasts with the gradient */
}

.hero-search .btn-search {
  display: inline-flex; /* Icon and label side by side */
  align-items: center; /* Vertically center button content */
  gap: 0.35rem; /* Gap between icon and label */
  height: var(--rr-touch-target-min); /* 44px button height */
  padding: 0 var(--rr-spacing-lg); /* 24px horizontal padding */
  background: var(--rr-color-primary); /* Magenta search button */
  color: var(--rr-color-white); /* White button label */
  border: none; /* No button border */
  border-radius: 0 var(--rr-radius-sm) var(--rr-radius-sm) 0; /* Rounded right corners */
  font-family: inherit; /* Match Poppins */
  font-size: var(--rr-font-size-base); /* 1rem button text */
  font-weight: 500; /* Medium weight label */
  white-space: nowrap; /* Keep "Search" on one line */
  transition: background var(--rr-transition-fast); /* Smooth hover */
  cursor: pointer; /* Pointer cursor on button */
}

.hero-search .btn-search:hover {
  background: var(--rr-color-primary-dark); /* Darker magenta on hover */
  color: var(--rr-color-white); /* Keep white text on hover */
}

@media (max-width: 991.98px) {
  .hero-banner .container {
    flex-direction: column; /* Stack title above search on tablet */
    align-items: flex-start; /* Left-align stacked content */
  }

  .hero-search {
    margin-left: 0; /* Reset right alignment when stacked */
    max-width: 100%; /* Full width search on mobile */
  }
}

/* Main layout */
.site-main {
  padding: var(--rr-spacing-xl) 0 var(--rr-spacing-2xl); /* Top 32px, bottom 48px */
}

.site-main .container {
  padding-left: var(--rr-page-edge-padding); /* 50px from page edge to left menu */
}

@media (max-width: 767.98px) {
  .site-main .container {
    padding-left: var(--rr-horizontal-padding-mobile); /* 4% inset on mobile */
  }
}

.content-pane {
  padding-left: var(--rr-column-gap); /* 1rem gap from sidebar */
}

@media (max-width: 991.98px) {
  .content-pane {
    padding-left: 0; /* No left padding when sidebar stacks */
    margin-top: var(--rr-spacing-lg); /* 24px gap below sidebar */
  }
}

/* Sidebar */
.sidebar-nav {
  padding-right: var(--rr-spacing-md); /* 16px right padding */
  min-width: var(--rr-sidebar-min-width); /* 250px minimum sidebar width */
}

@media (max-width: 991.98px) {
  .sidebar-nav {
    min-width: 0; /* Don't force width when stacked full-bleed on mobile */
    padding-right: 0; /* No right padding when stacked */
  }
}

/* Mobile nav toggle — collapses the full article list behind a dropdown below the lg breakpoint,
   so an article page opens with the content visible immediately instead of below ~170 nav links */
.sidebar-nav-toggle {
  display: none; /* Shown only below lg via the d-lg-none Bootstrap utility on the element */
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--rr-spacing-sm);
  padding: var(--rr-spacing-sm) var(--rr-spacing-md);
  margin-bottom: var(--rr-spacing-md);
  background: var(--rr-color-white);
  border: 1px solid var(--rr-color-border);
  border-radius: var(--rr-radius-sm);
  font-family: var(--rr-font-family);
  font-size: var(--rr-font-size-base);
  font-weight: 600;
  color: var(--rr-color-text-primary);
  cursor: pointer;
}

@media (max-width: 991.98px) {
  .sidebar-nav-toggle {
    display: flex; /* Visible dropdown trigger on tablet/mobile */
  }
}

.sidebar-nav-toggle .chevron-toggle {
  transform: rotate(90deg); /* Pointing down when collapsed, matches a closed dropdown */
  transition: transform var(--rr-transition-fast);
}

.sidebar-nav-toggle[aria-expanded="true"] .chevron-toggle {
  transform: rotate(270deg); /* Pointing up when the article list is expanded */
}

@media (max-width: 991.98px) {
  .sidebar-nav-collapse.collapse:not(.show) {
    display: none; /* Collapsed by default on mobile until the toggle is tapped */
  }

  .sidebar-nav-collapse {
    padding: var(--rr-spacing-sm) var(--rr-spacing-md);
    margin-bottom: var(--rr-spacing-md);
    background: var(--rr-color-white);
    border: 1px solid var(--rr-color-border);
    border-radius: var(--rr-radius-sm);
    max-height: 60vh; /* Keep the dropdown from pushing content far below the fold */
    overflow-y: auto;
  }
}

.sidebar-nav-title {
  box-sizing: border-box; /* Match live site box model */
  display: block; /* Block heading above section links per live site */
  margin: 0; /* No default heading margin per live site */
  padding: var(--rr-spacing-md) var(--rr-spacing-md) var(--rr-spacing-md) 0; /* 16px top/right/bottom, 0 left per live site */
  font-size: var(--rr-font-size-2xl); /* 1.5rem per live site computed styles */
  font-weight: var(--rr-sidebar-title-font-weight); /* 650 per live site computed styles */
  line-height: 1.3; /* 1.3 line height per live site */
  color: var(--rr-color-text-primary); /* Navy title color */
  text-decoration: none; /* No underline per live site */
}

.sidebar-nav .nav-link {
  color: var(--rr-color-text-primary); /* Navy nav link text */
  padding: var(--rr-spacing-sm) var(--rr-spacing-sm); /* 8px vertical and horizontal */
  border-bottom: 1px solid var(--rr-color-border); /* Divider between items */
  display: flex; /* Chevron and title side by side */
  align-items: center; /* Vertically center link content */
  justify-content: flex-start; /* Chevron before title per live site */
  gap: var(--rr-spacing-sm); /* 8px gap between chevron and title */
  text-decoration: none; /* No underline */
  font-size: var(--rr-font-size-base); /* 1rem section link text */
  font-weight: 600; /* Semibold section links */
  line-height: 1.4; /* Readable link line height */
  border-radius: 0; /* Square corners for default state */
  transition: color var(--rr-transition-fast), background var(--rr-transition-fast); /* Smooth hover */
  overflow-wrap: break-word; /* Wrap long article titles */
}

.sidebar-nav .nav-link:hover {
  color: var(--rr-color-primary); /* Brand magenta #9e1c64 hover per marketing; ~7:1 contrast on tint (WCAG AA) */
  text-decoration: none; /* No underline on hover */
  background: rgba(158, 28, 100, 0.04); /* Subtle magenta tint on hover */
}

.sidebar-nav .nav-link.active {
  background: var(--rr-color-primary); /* Magenta active background */
  color: var(--rr-color-white); /* White text on active */
  border-radius: var(--rr-radius-sm); /* 6px rounded active item */
  border-bottom-color: transparent; /* Hide divider on active item */
}

.sidebar-nav .nav-link.active:hover {
  color: var(--rr-color-white); /* Keep white text on active hover */
  background: var(--rr-color-primary-dark); /* Darker magenta on active hover */
}

.sidebar-nav .nav-link .chevron {
  opacity: 0.55; /* Muted chevron for inactive items */
  font-size: 1.1rem; /* Slightly larger chevron */
  line-height: 1; /* Tight chevron line height */
  flex-shrink: 0; /* Prevent chevron from shrinking */
  transform: rotate(0deg); /* Point right when collapsed */
  transition: transform var(--rr-transition-fast), opacity var(--rr-transition-fast); /* Smooth expand rotation */
}

.sidebar-nav .nav-link.expanded .chevron {
  transform: rotate(90deg); /* Point down when section is expanded */
}

.sidebar-nav .nav-link.active .chevron {
  opacity: 1; /* Full opacity chevron on active */
}

.sidebar-nav .nav-link.child {
  box-sizing: border-box; /* Match live site box model */
  margin: 0; /* Reset margin before live-site indent */
  margin-left: calc(var(--rr-spacing-lg) - var(--rr-spacing-sm)); /* 16px indent per live site computed styles */
  padding: var(--rr-spacing-sm); /* 8px padding per live site */
  cursor: pointer; /* Pointer cursor on article links per live site */
  font-size: var(--rr-font-size-sm); /* 0.875rem per live site computed styles */
  font-weight: 500; /* Medium weight per live site (not section link 600) */
  font-style: var(--dxp-s-body-font-style); /* Normal style per live site */
  letter-spacing: var(--dxp-s-body-letter-spacing); /* 0em letter spacing per live site */
  text-transform: var(--dxp-s-body-text-transform); /* No transform per live site */
  line-height: var(--dxp-s-body-line-height); /* 1.5 line height per live site */
  min-height: var(--rr-touch-target-min); /* 44px touch target per live site */
  align-items: center; /* Vertically center link label per live site flex layout */
  overflow-wrap: break-word; /* Wrap long article titles per live site */
  border-radius: var(--rr-radius-sm); /* 6px corners per live site */
  transition: all var(--rr-transition-fast); /* All-property transition per live site */
  border-bottom: none; /* No divider on child article items */
}

.sidebar-nav .nav-link.child.active {
  color: var(--rr-color-white); /* White text on active article link per live site */
  background-color: var(--rr-color-primary); /* Magenta active background per live site */
}

.sidebar-section-group {
  margin-bottom: 0.125rem; /* Minimal gap between section groups */
}

/* Breadcrumbs */
.breadcrumb {
  --bs-breadcrumb-divider: '>'; /* Greater-than divider */
  box-sizing: border-box; /* Match live site box model */
  font-family: var(--rr-font-family); /* Poppins per live site */
  font-size: var(--rr-font-size-sm); /* 0.875rem per live site computed styles */
  font-weight: 500; /* Medium weight per live site computed styles */
  line-height: 1.5; /* 1.5 line height per live site */
  color: var(--rr-color-primary); /* Magenta breadcrumb text per live site */
  margin-bottom: var(--rr-spacing-md); /* 16px below breadcrumbs */
  padding: 0; /* No bootstrap breadcrumb padding */
  background: transparent; /* No breadcrumb background */
}

.breadcrumb-item {
  color: var(--rr-color-primary); /* Magenta crumbs per live site */
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--rr-color-primary); /* Magenta divider chevrons */
}

.breadcrumb-item a {
  color: var(--rr-color-primary); /* Magenta breadcrumb links per live site */
  text-decoration: underline; /* Underlined so links differ from the magenta current-page crumb by more than color (WCAG 1.4.1) */
  text-underline-offset: 2px; /* Keep underline clear of descenders */
}

.breadcrumb-item a:hover {
  color: var(--rr-color-hover); /* Red hover on breadcrumb links */
  text-decoration: underline; /* Underline on hover */
}

.breadcrumb-item.active {
  color: var(--rr-color-primary); /* Active crumb stays magenta per live site */
}

/* Shared h2 typography — download blocks and other plain in-page section headings */
.section-heading {
  box-sizing: border-box; /* Match live site box model */
  padding: 0; /* No padding on section headings per live site */
  margin: var(--rr-spacing-md) 0; /* 16px vertical margin per live site h2 */
  font-family: var(--rr-font-family); /* Poppins per live site */
  font-size: var(--rr-font-size-xl); /* 1.25rem per live site computed styles */
  font-weight: 700; /* Bold section headings per live site */
  font-style: var(--dxp-s-body-font-style); /* Normal style per live site */
  letter-spacing: var(--dxp-s-body-letter-spacing); /* 0em letter spacing per live site */
  text-transform: var(--dxp-s-body-text-transform); /* No transform per live site */
  line-height: 1.3; /* Tight heading line height per live site */
  color: var(--rr-color-text-primary); /* Navy #211b57 per live site */
}

/* Home content title — now the page h1 for accessibility (WCAG 1.3.1); visual size unchanged at 1.875rem */
h1.page-subtitle, /* Page-level h1 on the home page */
h2.page-subtitle { /* Kept so any remaining h2 usage renders identically */
  box-sizing: border-box; /* Match live site box model */
  display: block; /* Block on home intro per live site layout */
  padding: 0; /* No padding on home title per live site */
  margin: 0 0 var(--rr-spacing-lg) 0; /* 24px below title per live site */
  font-family: var(--rr-font-family); /* Poppins per live site */
  font-size: var(--rr-font-size-3xl); /* 1.875rem per live site computed styles */
  font-weight: 700; /* Bold home title per live site */
  font-style: normal; /* Normal per live site */
  letter-spacing: normal; /* Normal per live site */
  text-transform: none; /* None per live site */
  line-height: 1.2; /* Tight heading line height per live site */
  color: var(--rr-color-text-primary); /* Navy #211b57 per live site */
}

/* Article/section/search content title — page h1 for accessibility (WCAG 1.3.1); live site look is 20px / 26px, inline */
h1.article-title, /* Page-level h1 on article, category, search, and 404 pages */
h2.article-title, /* Any remaining h2 usage renders identically */
h3.article-title { /* Admin Edit live-preview title, nested under the "Live Preview" h2 */
  box-sizing: border-box; /* Match live site box model */
  display: inline; /* Inline per live site computed display */
  padding: 0; /* No padding per live site h2 */
  margin: var(--rr-spacing-md) 0; /* 16px top and bottom per live site h2 */
  font-family: var(--rr-font-family); /* Poppins per live site */
  font-size: 1.25rem; /* 20px at default size, but scales with user font settings (WCAG 1.4.4) */
  font-weight: 700; /* 700 per live site computed font-weight */
  font-style: normal; /* Normal per live site computed font-style */
  letter-spacing: normal; /* Normal per live site computed letter-spacing */
  text-transform: none; /* None per live site computed text-transform */
  line-height: 1.625rem; /* 26px at default size, scales with text (WCAG 1.4.4) */
  color: var(--rr-color-text-primary); /* Exact navy per live site computed color */
}

/* Note: h2.article-title, h2.page-subtitle, .section-heading, and .sidebar-nav-title all carry
   enough selector specificity (class + tag) to beat Bootstrap's bare `h2, .h2` reboot rules —
   including its 1200px+ breakpoint — without needing !important or a duplicate override block. */

.article-intro {
  box-sizing: border-box; /* Match live site box model */
  padding: 0; /* No padding on intro paragraph per live site */
  margin: 0 0 var(--rr-spacing-xl) 0; /* 32px below intro per live site computed styles */
  font-family: var(--rr-font-family); /* Poppins per live site */
  font-size: var(--rr-font-size-base); /* 1rem body text per live site */
  font-weight: var(--dxp-s-body-font-weight); /* 400 normal weight per live site */
  font-style: var(--dxp-s-body-font-style); /* Normal style per live site */
  letter-spacing: var(--dxp-s-body-letter-spacing); /* 0em letter spacing per live site */
  line-height: 1.7; /* Relaxed intro line height per live site computed styles */
  color: var(--rr-color-text-primary); /* Navy #211b57 per live site (not gray) */
  max-width: var(--rr-intro-card-max-width); /* 1000px intro width cap */
}

.page-lead {
  font-size: var(--rr-font-size-base); /* 1rem intro paragraph */
  line-height: var(--dxp-s-body-line-height); /* 1.5 line height */
  color: var(--rr-color-text-secondary); /* Gray intro text */
  margin-bottom: var(--rr-spacing-lg); /* 24px below intro */
  max-width: var(--rr-intro-card-max-width); /* 1000px intro width cap */
}

.page-meta {
  font-size: var(--rr-font-size-xs); /* 0.75rem meta text */
  color: var(--rr-color-text-secondary); /* Gray meta color */
  margin-bottom: var(--rr-spacing-md); /* 16px below meta */
}

.content-header {
  display: flex; /* Breadcrumb row and PDF button side by side per live site */
  justify-content: space-between; /* Push PDF button to right */
  align-items: center; /* Center-align button with breadcrumb row per live site */
  gap: var(--rr-spacing-md); /* 16px gap per live site */
  margin-bottom: var(--rr-spacing-sm); /* 8px below header row */
}

/* Download PDF button — filled magenta pill per live site */
.btn-download-pdf {
  box-sizing: border-box; /* Match live site box model */
  display: inline-flex; /* Center label in button per live site */
  align-items: center; /* Vertically center label per live site */
  justify-content: center; /* Horizontally center label per live site */
  flex-shrink: 0; /* Prevent button shrinking in content-header per live site */
  border: none; /* No border on filled button per live site */
  color: var(--rr-color-white); /* White label per live site */
  background: var(--rr-color-primary); /* Magenta fill per live site */
  border-radius: var(--rr-radius-md); /* 12px rounded corners per live site */
  font-family: var(--rr-font-family); /* Poppins per live site */
  font-size: var(--dxp-s-body-font-size); /* 1rem per live site */
  font-weight: 700; /* Bold label per live site */
  font-style: normal; /* Normal per live site */
  letter-spacing: normal; /* Normal per live site */
  text-transform: none; /* None per live site */
  line-height: 1.5; /* Readable line height per live site */
  padding: 0.75rem 1.5rem; /* More horizontal than vertical padding per live site */
  text-decoration: none; /* No underline per live site */
  white-space: nowrap; /* Keep label on one line */
  box-shadow: none; /* Flat button per live site */
  transition: background var(--rr-transition-fast), color var(--rr-transition-fast); /* Smooth hover */
}

.btn-download-pdf:hover {
  background: var(--rr-color-primary-dark); /* Darker magenta on hover */
  color: var(--rr-color-white); /* White text on hover */
  text-decoration: none; /* No underline on hover */
}

/* 404 landing page */
.not-found-card {
  max-width: 42rem;
  margin: var(--rr-spacing-2xl) auto;
  text-align: center;
}

.not-found-card .page-lead {
  margin: 0 auto var(--rr-spacing-xl);
  max-width: 34rem;
}

/* Home download section */
.download-card {
  margin-top: var(--rr-spacing-xl); /* 32px above download section */
  padding-top: var(--rr-spacing-lg); /* 24px top padding */
  border-top: 1px solid var(--rr-color-border); /* Top divider */
}

.download-card p {
  margin: 0 0 var(--rr-spacing-md); /* 16px below description */
  max-width: 42rem; /* Readable paragraph width */
  color: var(--rr-color-text-secondary); /* Gray description text */
}

/* Category article list */
.article-link-list {
  list-style: none; /* No bullets */
  padding: 0; /* No list padding */
  margin: var(--rr-spacing-lg) 0 0; /* 24px top margin */
}

.article-link-list li {
  border-bottom: 1px solid var(--rr-color-border); /* Divider between articles */
}

.article-link-list a {
  display: flex; /* Title and chevron side by side */
  align-items: center; /* Vertically center link content */
  justify-content: space-between; /* Push chevron to right */
  padding: var(--rr-spacing-sm) 0; /* 8px vertical padding */
  color: var(--rr-color-text-primary); /* Navy article link */
  text-decoration: none; /* No underline */
  font-size: var(--rr-font-size-base); /* 1rem link text */
  font-weight: 600; /* Semibold article titles */
  line-height: 1.4; /* Match sidebar link line height */
  transition: color var(--rr-transition-fast); /* Smooth hover */
}

.article-link-list a:hover {
  color: var(--rr-color-hover); /* Red hover accent */
  text-decoration: none; /* No underline on hover */
}

.article-link-list .chevron {
  color: var(--rr-color-text-secondary); /* Gray chevron */
}

/* Search results */
.search-results {
  list-style: none; /* No bullets */
  padding: 0; /* No list padding */
  margin: var(--rr-spacing-lg) 0 0; /* 24px top margin */
}

.search-results li {
  padding: var(--rr-spacing-md) 0; /* 16px vertical padding per result */
  border-bottom: 1px solid var(--rr-color-border); /* Divider between results */
}

.search-results .search-result-title {
  display: block; /* Own line, context/snippet stack beneath it */
  font-size: var(--rr-font-size-base); /* 1rem result title */
  font-weight: 600; /* Semibold result titles */
  color: var(--dxp-g-brand); /* Blue result links */
  text-decoration: underline; /* Identify links by more than color (WCAG 1.4.1) */
  text-underline-offset: 2px; /* Keep underline clear of descenders */
}

.search-results .search-result-title:hover {
  color: var(--rr-color-hover); /* Red hover on result links */
}

.search-results .search-result-context {
  font-size: var(--rr-font-size-sm); /* 0.875rem parent-section context line */
  color: var(--rr-color-text-secondary); /* Gray context text */
  margin-top: var(--rr-spacing-xs); /* 4px below title */
}

.search-results .summary {
  font-size: var(--rr-font-size-sm); /* 0.875rem result snippet */
  color: var(--rr-color-text-secondary); /* Gray snippet text */
  margin-top: var(--rr-spacing-xs); /* 4px above snippet */
  line-height: 1.5; /* Readable multi-line excerpt */
}

/* Highlighted search-term matches on the full search page and in the live search dropdown */
.search-results mark,
.hero-search-suggest-list mark {
  background-color: #e0bd64; /* Brand gold highlight per marketing; also replaces Bootstrap's faint #fcf8e3 in the dropdown */
  color: var(--dxp-g-root-contrast); /* Dark text (~9.6:1); blue, red, and gray text all fail WCAG AA on this gold */
  padding: 0 1px; /* Slight breathing room around the match */
  border-radius: 2px; /* Softened highlight corners */
}

/* Article body (rich HTML from Salesforce) */
.article-body {
  box-sizing: border-box; /* Match live site box model */
  font-family: var(--rr-font-family); /* Poppins per live site */
  font-size: var(--dxp-s-body-font-size); /* 1rem body text per live site */
  font-weight: var(--dxp-s-body-font-weight); /* 400 normal weight per live site */
  font-style: var(--dxp-s-body-font-style); /* Normal style per live site */
  letter-spacing: var(--dxp-s-body-letter-spacing); /* 0em letter spacing per live site */
  text-transform: var(--dxp-s-body-text-transform); /* No transform per live site */
  line-height: var(--dxp-s-body-line-height); /* 1.5 line height per live site */
  color: var(--dxp-g-root-contrast); /* #1a1b1e body text per live site */
  word-wrap: break-word; /* Break long words per live site */
  overflow-wrap: break-word; /* Modern word-wrap fallback per live site */
  hyphens: manual; /* Manual hyphenation per live site */
}

.article-body p {
  margin-bottom: var(--rr-spacing-md); /* 16px between paragraphs */
}

.article-body h2,
.article-body h3,
.article-body h4 {
  font-weight: 500; /* Medium weight — 300 was too thin to read comfortably for low-vision users */
  margin-top: var(--rr-spacing-lg); /* 24px above subheadings */
  margin-bottom: var(--rr-spacing-sm); /* 8px below subheadings */
  color: var(--rr-color-text-primary); /* Navy subheading color */
}

.article-body a {
  color: var(--dxp-g-brand); /* Blue inline links in article HTML */
  text-decoration: underline; /* Blue vs body text is only ~2.6:1, so links need a non-color cue (WCAG 1.4.1) */
  text-underline-offset: 2px; /* Keep underline clear of descenders */
}

.article-body a:hover {
  color: var(--rr-color-hover); /* Red hover on article links */
}

.article-body ul {
  margin-bottom: var(--rr-spacing-md); /* 16px below lists */
  padding-left: var(--rr-spacing-lg); /* 24px list indent */
  list-style: disc; /* Disc bullets per live site computed styles */
}

.article-body ol {
  margin-bottom: var(--rr-spacing-md); /* 16px below ordered lists */
  padding-left: var(--rr-spacing-lg); /* 24px list indent */
  list-style: decimal; /* Numbered lists keep decimal markers */
}

/* CKEditor's own editing surface auto-varies nested list markers per level (its content.css, which only
   applies inside the editor's .ck-content scope) — the saved HTML has no inline style for this, so without
   matching rules here, every level of a nested list renders as plain decimal/disc once it leaves the editor.
   These match CKEditor's default nesting scheme exactly, so the editor preview and the live page/PDF agree. */
.article-body ol ol {
  list-style-type: lower-alpha;
}

.article-body ol ol ol {
  list-style-type: lower-roman;
}

.article-body ol ol ol ol {
  list-style-type: upper-alpha;
}

.article-body ol ol ol ol ol {
  list-style-type: upper-roman;
}

.article-body ul ul {
  list-style-type: circle;
}

.article-body ul ul ul {
  list-style-type: square;
}

.article-body table {
  width: 100%; /* Full-width tables */
  margin-bottom: var(--rr-spacing-md); /* 16px below tables */
  border-collapse: collapse; /* Collapsed table borders */
}

.article-body th,
.article-body td {
  border: 1px solid var(--rr-color-border); /* Table cell borders */
  padding: var(--rr-spacing-sm) var(--rr-spacing-sm); /* 8px cell padding */
}

.article-body th {
  background: var(--rr-color-background); /* Light gray table header — matches admin Live Preview */
  font-weight: 600; /* Semibold header cells */
  color: var(--dxp-g-root-contrast); /* Dark text; Bootstrap table-dark otherwise inherits white on this background */
}

/* Pasted/imported tables sometimes carry Bootstrap table-dark (white text) while site.css lightens th backgrounds */
.article-body table.table-dark {
  color: var(--dxp-g-root-contrast); /* Body text color on the table, not Bootstrap’s #fff */
}

.article-body table.table-dark th,
.article-body table.table-dark td {
  color: var(--dxp-g-root-contrast); /* Readable cells when table-dark is present in stored HTML */
}

/* Inline images from the CKEditor image upload feature (wrapped in <figure class="image">) */
.article-body img {
  max-width: 100%; /* Never overflow the article column */
  height: auto; /* Preserve aspect ratio when constrained */
}

.article-body figure.image {
  display: table; /* Shrinks to the image width so captions wrap under it (matches the editor) */
  clear: both; /* Block images start below any floated side image */
  margin: var(--rr-spacing-md) auto; /* 16px vertical spacing; centered like CKEditor's "Centered image" style */
  text-align: center; /* Center the image within the figure */
}

.article-body figure.image img {
  display: block; /* No inline baseline gap under the image */
  margin: 0 auto; /* Center inside the figure */
}

/* Image sizing from CKEditor's resize dropdown / drag handles: saved as style="width:NN%" plus image_resized */
.article-body figure.image.image_resized {
  display: block; /* The inline width applies to the figure, not a shrink-wrapped table */
  box-sizing: border-box; /* Width includes any padding */
  max-width: 100%; /* Never wider than the article column */
}

.article-body figure.image.image_resized img {
  width: 100%; /* Image fills the resized figure */
}

.article-body img.image_resized {
  height: auto; /* Resized inline images keep their aspect ratio */
}

/* "Side image" style: floated right beside the text, capped at half the column */
.article-body figure.image.image-style-side {
  float: right; /* Text wraps on the left */
  margin-left: var(--rr-spacing-md); /* Gap between text and image */
  max-width: 50%; /* Leave room for the wrapped text */
}

/* "In line" style: image sits within a line of text */
.article-body .image-inline {
  display: inline-flex; /* Flows with the surrounding text */
  max-width: 100%; /* Never overflow the column */
  vertical-align: middle; /* Align with the text line */
}

.article-body::after {
  content: ""; /* Clearfix so a floated side image never overlaps the content below the article */
  display: block;
  clear: both;
}

.article-body figure.image figcaption {
  margin-top: var(--rr-spacing-xs); /* 4px above caption text */
  font-size: var(--rr-font-size-sm); /* 0.875rem caption */
  color: var(--rr-color-text-secondary); /* Gray caption text */
  text-align: center;
}

/* Previous/Next document navigation — footer of article and section pages */
.prev-next-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--rr-spacing-lg);
  margin-top: var(--rr-spacing-xl);
  padding-top: var(--rr-spacing-lg);
  border-top: 1px solid var(--rr-color-border);
}

.prev-next-spacer {
  flex: 1 1 0;
}

.prev-next-link {
  display: flex;
  flex-direction: column;
  gap: var(--rr-spacing-xs);
  flex: 1 1 0;
  min-width: 0;
  padding: var(--rr-spacing-md);
  border: 1px solid var(--rr-color-border);
  border-radius: var(--rr-radius-md);
  text-decoration: none;
  transition: border-color var(--rr-transition-fast), background var(--rr-transition-fast);
}

.prev-next-link:hover {
  border-color: var(--rr-color-primary);
  background: rgba(158, 28, 100, 0.04);
  text-decoration: none;
}

.prev-next-link.next {
  align-items: flex-end;
  text-align: right;
}

.prev-next-direction {
  font-size: var(--rr-font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rr-color-primary);
}

.prev-next-title {
  font-size: var(--rr-font-size-base);
  font-weight: 600;
  color: var(--rr-color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media (max-width: 575.98px) {
  .prev-next-nav {
    flex-direction: column;
  }

  .prev-next-link.next {
    align-items: flex-start;
    text-align: left;
  }
}

/* Admin area — internal management screens, not styled to match the marketing site */
.site-main.admin-shell .container {
  padding-left: var(--rr-horizontal-padding); /* Replace the public 50px sidebar gutter with the standard 8% inset */
  max-width: 1100px; /* Readable admin content width instead of full-bleed */
}

/* Two-pane editing/compare screens need much more than a readable-paragraph width */
.site-main.admin-shell.admin-wide .container {
  max-width: none;
}

/* Version History — wide table with Compare / Roll back columns */
.site-main.admin-shell.admin-revisions-wide .container {
  max-width: 80vw; /* ~80% of screen width per product request */
  width: 80%;
}

.admin-revisions-table-wrap {
  overflow-x: auto; /* Horizontal scroll on narrow viewports instead of crushing columns */
  -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS when table overflows */
}

.admin-page-title {
  font-size: calc(1.325rem + 0.9vw); /* Keeps the old Bootstrap h2 size now that admin titles are h1 elements */
  margin: 0 0 var(--rr-spacing-xs) 0;
  font-family: var(--rr-font-family);
  font-weight: 700;
  color: var(--rr-color-text-primary);
}

@media (min-width: 1200px) {
  .admin-page-title {
    font-size: 2rem; /* Bootstrap h2 cap at xl, matching the previous h2 rendering */
  }
}

.admin-back-link {
  display: inline-block;
  margin-bottom: var(--rr-spacing-sm);
  font-size: var(--rr-font-size-sm);
  font-weight: 600;
  color: var(--rr-color-text-secondary);
}

.admin-back-link:hover {
  color: var(--rr-color-primary);
}

.admin-page-summary {
  margin: 0 0 var(--rr-spacing-lg) 0;
  color: var(--rr-color-text-secondary);
  font-size: var(--rr-font-size-sm);
}

.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rr-spacing-sm);
  margin-bottom: var(--rr-spacing-lg);
}

.admin-article-tree {
  display: flex;
  flex-direction: column;
  gap: var(--rr-spacing-lg);
}

.admin-section-group {
  border: 1px solid var(--rr-color-border);
  border-radius: var(--rr-radius-md);
  overflow: hidden;
  background: var(--rr-color-white);
}

.admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rr-spacing-md);
  padding: var(--rr-spacing-sm) var(--rr-spacing-md);
  border-bottom: 1px solid var(--rr-color-border);
}

.admin-section-group .admin-row:last-child {
  border-bottom: none;
}

.admin-section-row {
  background: var(--rr-color-background);
}

.admin-article-row {
  padding-left: calc(var(--rr-spacing-md) + var(--rr-spacing-lg)); /* Indent under its section */
}

.admin-row-main {
  display: flex;
  align-items: baseline;
  gap: var(--rr-spacing-sm);
  min-width: 0;
  flex-wrap: wrap;
}

.admin-row-title {
  font-weight: 600;
  color: var(--rr-color-text-primary);
}

.admin-section-row .admin-row-title {
  font-weight: 700;
}

.admin-slug {
  font-family: monospace;
  font-size: var(--rr-font-size-xs);
  color: var(--rr-color-text-secondary);
}

.admin-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: var(--rr-radius-sm);
  font-size: var(--rr-font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.admin-badge-section {
  background: var(--rr-color-primary);
  color: var(--rr-color-white);
}

/* Article status tags (Admin Articles list). Text carries the meaning; colors are all >= 7:1 contrast. */
.admin-badge-published {
  background: #d1e7dd; /* Light green */
  color: #0f5132; /* Dark green text, ~7.4:1 */
  border: 1px solid #a3cfbb; /* Edge so the pill is visible in forced-colors / low-contrast screens */
}

.admin-badge-draft {
  background: #fff3cd; /* Light amber */
  color: #664d03; /* Dark amber text, ~7.8:1 */
  border: 1px solid #ffe69c; /* Pill edge */
}

.admin-badge-unpublished {
  background: #e2e3e5; /* Light gray */
  color: #41464b; /* Dark gray text, ~7.3:1 */
  border: 1px dashed #a7acb1; /* Dashed edge hints "not live" */
}

/* Draft who/when and "Live: title" hints next to the tags */
.admin-row-meta {
  font-size: var(--rr-font-size-xs);
  color: var(--rr-color-text-secondary);
}

/* One-line legend under the Articles toolbar */
.admin-status-legend {
  margin: 0 0 var(--rr-spacing-md) 0;
  font-size: var(--rr-font-size-sm);
  color: var(--rr-color-text-secondary);
}

.admin-row-actions {
  display: flex;
  gap: var(--rr-spacing-md);
  flex-shrink: 0;
  font-size: var(--rr-font-size-sm);
}

.admin-card {
  border: 1px solid var(--rr-color-border);
  border-radius: var(--rr-radius-md);
  padding: var(--rr-spacing-md);
  background: var(--rr-color-white);
}

.admin-compare-pane {
  max-height: 600px;
  overflow: auto;
}

/* Compare to Live — revision heading and rollback actions on one row */
.admin-compare-heading-row {
  display: flex; /* Put revision number and rollback on the same line */
  flex-wrap: wrap; /* Wrap on narrow columns instead of overflowing */
  align-items: center; /* Vertically center heading and pill buttons */
  justify-content: space-between; /* Title left, actions right */
  gap: var(--rr-spacing-md); /* Space between title and button group */
  margin-bottom: var(--rr-spacing-xs); /* Gap before created-by line */
}

/* Version History action pills — Compare to Live and Roll back share one look */
.admin-history-action-cell {
  white-space: nowrap; /* Keep controls on one line */
  vertical-align: middle; /* Align Compare and Rollback on the same baseline */
}

.btn-rollback-group {
  display: inline-flex; /* Split main + caret as one control */
  flex-wrap: nowrap; /* Never wrap the label onto a second line */
  align-items: stretch; /* Equal height halves */
  vertical-align: middle; /* Sit mid-row with sibling action cell */
}

.btn-rollback {
  box-sizing: border-box; /* Match download button box model */
  display: inline-flex; /* Center label like Download PDF */
  align-items: center; /* Vertical center */
  justify-content: center; /* Horizontal center */
  flex-shrink: 0; /* Don't compress the label in narrow columns */
  border: none; /* Flat filled control */
  border-radius: var(--rr-radius-md); /* Full pill by default — Compare and solo Roll back match */
  color: var(--rr-color-white); /* White label on magenta */
  background: var(--rr-color-primary); /* Brand magenta fill */
  font-family: var(--rr-font-family); /* Poppins */
  font-size: var(--rr-font-size-sm); /* Slightly smaller than home Download for table density */
  font-weight: 700; /* Bold like Download PDF */
  line-height: 1.5; /* Same for <a> and <button> */
  padding: 0.5rem 1rem; /* Compact pill padding for History rows */
  min-height: 2.25rem; /* Identical hit height for Compare and Roll back */
  text-decoration: none; /* No underline on anchors */
  white-space: nowrap; /* Single-line label */
  box-shadow: none; /* Flat */
  cursor: pointer; /* Affordance */
  transition: background var(--rr-transition-fast), color var(--rr-transition-fast); /* Hover fade */
}

/* Split group: join main + caret into one pill (override full radius on the halves) */
.btn-rollback-group-split > .btn-rollback:first-child {
  border-radius: var(--rr-radius-md) 0 0 var(--rr-radius-md); /* Left pill half */
  border-right: 1px solid rgba(255, 255, 255, 0.35); /* Subtle seam before caret */
}

.btn-rollback-caret {
  padding-left: 0.65rem; /* Narrow caret hit area */
  padding-right: 0.65rem;
  border-radius: 0 var(--rr-radius-md) var(--rr-radius-md) 0; /* Right pill half */
}

.btn-rollback:hover,
.btn-rollback:focus-visible {
  background: var(--rr-color-primary-dark); /* Darker magenta like Download PDF hover */
  color: var(--rr-color-white); /* Keep white label */
  text-decoration: none; /* Anchors stay undecorated on hover */
}

/* Bootstrap caret glyph stays white on magenta */
.btn-rollback-caret::after {
  border-top-color: var(--rr-color-white); /* Visible caret on primary fill */
}

.admin-compare-pane img {
  max-width: 100%;
  height: auto;
}

/* Live Preview — unlike the Before/Compare panes, shows the whole article with no height cap or scrollbar */
.admin-preview-pane img {
  max-width: 100%;
  height: auto;
}

/* Marks a field/section as editor-internal-only, never rendered on the public site or sent to OpenAI */
.admin-private-tag {
  display: inline-block;
  margin-left: var(--rr-spacing-sm);
  padding: 0.1rem 0.4rem;
  border-radius: var(--rr-radius-sm);
  background: var(--rr-color-background);
  color: var(--rr-color-text-secondary);
  font-size: var(--rr-font-size-xs);
  font-weight: 500;
  text-transform: none;
}

.admin-prior-notes {
  margin-top: var(--rr-spacing-lg);
  padding-top: var(--rr-spacing-md);
  border-top: 1px solid var(--rr-color-border);
}

/* Collapsed-by-default section (e.g. Edit's "Before (Published)" pane) */
.admin-collapsible-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--rr-spacing-sm) var(--rr-spacing-md);
  background: var(--rr-color-white);
  border: 1px solid var(--rr-color-border);
  border-radius: var(--rr-radius-sm);
  font-family: var(--rr-font-family);
  font-weight: 600;
  color: var(--rr-color-text-primary);
  cursor: pointer;
}

.admin-collapsible-toggle .chevron-toggle {
  font-size: 1.1rem;
  transition: transform var(--rr-transition-fast);
}

.admin-collapsible-toggle[aria-expanded="true"] .chevron-toggle {
  transform: rotate(90deg);
}

.admin-prior-notes ul {
  list-style: none;
  padding: 0;
  margin: var(--rr-spacing-sm) 0 0;
}

.admin-prior-notes li {
  padding: var(--rr-spacing-sm) 0;
  border-bottom: 1px solid var(--rr-color-border);
}

.admin-prior-notes li:last-child {
  border-bottom: none;
}

/* CKEditor is dropped into a narrow default height; give it real room to edit long articles */
.ck.ck-editor__editable {
  min-height: 600px;
}

.ck.ck-editor {
  width: 100%;
}

@media (max-width: 767.98px) {
  .admin-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rr-spacing-xs);
  }
}

/* Footer — matches the live rules.stellarmls.com footer (computed styles measured from the live page):
   navy contact block with centered logo/contacts/social icons, then a darker legal bar.
   Text is 0.875rem instead of the live site's 12px for readability. */
.site-footer {
  background: var(--rr-color-footer-bg); /* #211b57 navy contact block */
  border-top: none; /* No top border on dark footer */
  padding: 0; /* Inner blocks own their padding */
  color: var(--rr-color-footer-text); /* #C0CCDB footer text (~9.6:1 on navy) */
  font-size: var(--rr-font-size-sm); /* 0.875rem — raised from the live 12px for readability */
  text-align: center; /* Everything in the footer is centered */
}

.site-footer a {
  color: var(--rr-color-footer-text); /* Footer link color */
  text-decoration: underline; /* Footer links identified by more than color (WCAG 1.4.1) */
}

.footer-content {
  display: flex; /* Stack details above social icons */
  flex-direction: column; /* Vertical stack per live site */
  align-items: center; /* Center horizontally */
  padding: var(--rr-spacing-md) var(--rr-spacing-md) 0; /* 16px top/sides, social row supplies bottom spacing */
}

.footer-details {
  display: flex; /* Column of logo, heading, contact lines */
  flex-direction: column; /* Vertical stack */
  align-items: center; /* Center each line */
  max-width: 600px; /* Live site cap */
}

.footer-logo {
  width: 40px; /* Live site logo size */
  height: 40px; /* Square star mark */
  margin: 0 0 var(--rr-spacing-xs); /* 4px below logo */
}

.site-footer .footer-heading {
  margin: 0 0 var(--rr-spacing-xs); /* 4px below heading, no default h2 margin */
  font-family: var(--rr-font-family); /* Poppins */
  font-size: var(--rr-font-size-sm); /* 14px per live site */
  font-weight: 600; /* Semibold per live site */
  line-height: 1.5; /* 21px per live site */
  color: var(--rr-color-white); /* White heading on navy */
}

.footer-details p {
  margin: 0 0 2px; /* Tight 2px rhythm between contact lines per live site */
  line-height: 1.3; /* Compact contact lines per live site */
}

.footer-social {
  display: flex; /* Icons in a row */
  flex-wrap: wrap; /* Wrap on very narrow screens */
  justify-content: center; /* Centered row */
  gap: var(--rr-spacing-sm); /* 8px between icons per live site */
  margin: var(--rr-spacing-sm) 0 var(--rr-spacing-md); /* 8px above, 16px below per live site */
  padding: 0; /* Reset list padding */
  list-style: none; /* No bullets on the icon list */
}

.footer-social a {
  display: flex; /* Center the icon inside the circle */
  align-items: center; /* Vertical centering */
  justify-content: center; /* Horizontal centering */
  width: 36px; /* Live site circle size */
  height: 36px; /* Live site circle size */
  border-radius: 50%; /* Circular badge */
  background: var(--rr-color-footer-text); /* #C0CCDB badge */
  transition: background var(--rr-transition-fast); /* Smooth hover */
}

.footer-social a:hover {
  background: var(--rr-color-white); /* Brighten badge on hover */
}

.footer-social svg {
  width: 20px; /* Icon inside the 36px badge */
  height: 20px; /* Square icon */
  fill: var(--rr-color-footer-bg); /* Navy glyph (~9.6:1 on the badge) */
}

.footer-disclaimer {
  display: flex; /* Links above copyright */
  flex-direction: column; /* Vertical stack */
  align-items: center; /* Center */
  gap: var(--rr-spacing-xs); /* 4px between rows per live site */
  padding: var(--rr-spacing-sm) var(--rr-spacing-md); /* 8px/16px per live site */
  background: #1b164a; /* Darker navy legal bar per live site */
}

.footer-disclaimer-links {
  display: flex; /* Links in a row */
  flex-wrap: wrap; /* Wrap on narrow screens */
  justify-content: center; /* Centered */
  gap: var(--rr-spacing-xs); /* 4px between links per live site */
}

.site-footer .footer-disclaimer-links a {
  padding: var(--rr-spacing-xs); /* 4px hit-area padding per live site */
  text-decoration: none; /* Live site shows these plain; underline returns on hover/focus */
}

.site-footer .footer-disclaimer-links a:hover,
.site-footer .footer-disclaimer-links a:focus-visible {
  text-decoration: underline; /* Underline on interaction */
}

.footer-copyright {
  margin: 0; /* No default paragraph margin */
  font-size: var(--rr-font-size-sm); /* Readable copyright */
}

.site-footer a:hover {
  color: var(--rr-color-white); /* White footer link hover */
}

/* Admin save-in-progress overlay — a transparent full-screen scrim with a small centered card,
   shown while an AJAX save (e.g. Edit's fetch-based Save) is in flight. */
.admin-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 27, 30, 0.35); /* Transparent dark scrim, not a solid block */
  backdrop-filter: blur(1px);
}

.admin-overlay-card {
  display: flex;
  align-items: center;
  gap: var(--rr-spacing-md);
  padding: var(--rr-spacing-lg) var(--rr-spacing-xl);
  background: var(--rr-color-white);
  border-radius: var(--rr-radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  font-weight: 600;
  color: var(--rr-color-text-primary);
}

.admin-spinner {
  width: 20px;
  height: 20px;
  border: 3px solid var(--rr-color-border);
  border-top-color: var(--rr-color-primary);
  border-radius: 50%;
  animation: admin-spin 0.8s linear infinite;
}

@keyframes admin-spin {
  to { transform: rotate(360deg); }
}

/* Admin result modal (_ResultModal.cshtml) — success/error outcome of AJAX admin actions.
   Kind is shown by the title text and an icon, with the colored accent as a supplement (WCAG 1.4.1). */
.admin-result-modal .modal-header {
  gap: var(--rr-spacing-sm); /* Space between icon and title */
  border-top: 6px solid transparent; /* Accent bar, colored per kind below */
  border-top-left-radius: var(--bs-modal-inner-border-radius); /* Keep the rounded top corners */
  border-top-right-radius: var(--bs-modal-inner-border-radius); /* Keep the rounded top corners */
}

.admin-result-modal .modal-title {
  font-family: var(--rr-font-family); /* Poppins */
  font-weight: 700; /* Strong title */
  color: var(--rr-color-text-primary); /* Navy title text */
}

.admin-result-icon {
  display: inline-flex; /* Center glyph in the circle */
  align-items: center; /* Vertical centering */
  justify-content: center; /* Horizontal centering */
  flex-shrink: 0; /* Never squish the icon */
  width: 28px; /* Circle size */
  height: 28px; /* Circle size */
  border-radius: 50%; /* Circle */
  color: var(--rr-color-white); /* White glyph */
  font-weight: 700; /* Bold glyph */
}

.admin-result-modal.is-success .modal-header {
  border-top-color: #1e7e34; /* Green accent (~5.2:1 on white) */
}

.admin-result-modal.is-success .admin-result-icon {
  background: #1e7e34; /* Green circle */
}

.admin-result-modal.is-success .admin-result-icon::before {
  content: "\2713"; /* Check mark */
}

.admin-result-modal.is-error .modal-header {
  border-top-color: #b02a37; /* Red accent (~6.3:1 on white) */
}

.admin-result-modal.is-error .admin-result-icon {
  background: #b02a37; /* Red circle */
}

.admin-result-modal.is-error .admin-result-icon::before {
  content: "\2715"; /* Cross mark */
}

.admin-result-modal.is-confirm .modal-header {
  border-top-color: #997404; /* Amber accent (~4.6:1 on white) for "are you sure?" dialogs */
}

.admin-result-modal.is-confirm .admin-result-icon {
  background: #997404; /* Amber circle */
}

.admin-result-modal.is-confirm .admin-result-icon::before {
  content: "!"; /* Warning mark */
  font-weight: 700; /* Heavier glyph */
}

/* Deleted tag + muted deleted rows (Articles list "Show deleted" view) */
.admin-badge-deleted {
  background: #ffffff; /* White pill */
  color: #b02a37; /* Red text, ~6.3:1 */
  border: 1px solid #b02a37; /* Red outline */
}

.admin-row-deleted .admin-row-title {
  text-decoration: line-through; /* Extra non-color cue; the Deleted tag carries the meaning */
  color: var(--rr-color-text-secondary); /* Muted */
}

.admin-row-actions .btn-link-danger {
  color: #b02a37; /* Red Delete link, ~6.3:1 */
  padding: 0; /* Inline with the other row links */
  border: 0; /* Link look */
  background: none; /* Link look */
  text-decoration: underline; /* Matches other links (WCAG 1.4.1) */
  font-size: inherit; /* Same size as Edit/Revisions */
}

.admin-row-actions .btn-link-action {
  color: var(--dxp-g-brand); /* Same blue as other links */
  padding: 0; /* Inline */
  border: 0; /* Link look */
  background: none; /* Link look */
  text-decoration: underline; /* Link look */
  font-size: inherit; /* Same size as other row links */
}

/* Keyboard focus indicators (WCAG 2.4.7 Focus Visible, 1.4.11 Non-text Contrast).
   :focus-visible shows the ring for keyboard/AT users without adding it on every mouse click.
   Covers all custom-styled interactive controls whose default focus styling was lost or too faint. */
a:focus-visible, /* Any link, including article-body and footer links */
button:focus-visible, /* Any native button */
.btn-search:focus-visible, /* Hero Search button */
.btn-download-pdf:focus-visible, /* Download PDF / Browse All Articles buttons */
.btn-rollback:focus-visible, /* Version History rollback split button */
.sidebar-nav .nav-link:focus-visible, /* Sidebar section and article links */
.sidebar-nav-toggle:focus-visible, /* Mobile "Browse Articles" toggle */
.prev-next-link:focus-visible, /* Previous / Next article cards */
.hero-search-suggest-item:focus-visible, /* Suggest dropdown rows (mouse users who tab in) */
.hero-search-suggest-view-all:focus-visible, /* Suggest "View all results" button */
.article-link-list a:focus-visible, /* Category page article list */
.header-auth-link:focus-visible, /* Header Sign out link */
.admin-link:focus-visible, /* Header Admin link */
.site-logo:focus-visible, /* Header logo home link */
.admin-collapsible-toggle:focus-visible, /* Admin collapsible sections */
.admin-compare-pane:focus-visible { /* Keyboard-scrollable compare/before panes */
  outline: var(--rr-focus-ring-width) solid var(--rr-focus-ring-color); /* 3px solid magenta ring */
  outline-offset: var(--rr-focus-ring-offset); /* 2px gap so the ring stays visible on filled/magenta controls */
  box-shadow: none; /* Suppress Bootstrap's faint focus shadow so only one clear indicator shows */
}

.hero-banner .btn-search:focus-visible, /* Search button sits on the dark gradient */
.hero-banner a:focus-visible { /* Any link rendered inside the hero */
  outline-color: var(--rr-focus-ring-color-inverse); /* White ring — magenta would vanish against the purple gradient */
}

.site-footer a:focus-visible { /* Footer links sit on dark navy */
  outline-color: var(--rr-focus-ring-color-inverse); /* White ring for contrast on navy */
}

/* Reduced motion (WCAG 2.3.3 best practice) — respect the OS "reduce motion" setting by removing
   transitions, chevron rotation animation, smooth scrolling, and the spinning admin loader. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important; /* Effectively instant state changes */
    animation-duration: 0.01ms !important; /* Stop looping/decorative animations */
    animation-iteration-count: 1 !important; /* Don't loop the spinner */
    scroll-behavior: auto !important; /* No smooth scrolling */
  }

  .admin-spinner {
    animation: none; /* Static ring instead of spinning; "Saving…" text still conveys progress */
  }
}