:root {
  /* Fallback; JS updates this to match the sticky utility bar height when that bar is enabled */
  --anchor-scroll-offset: 96px;
  /* Override Bootstrap's :root { scroll-behavior: smooth } */
  scroll-behavior: auto;
}

html {
  scroll-padding-top: var(--anchor-scroll-offset);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

*:target {
  scroll-margin-top: var(--anchor-scroll-offset);
}

/*
- When a URL fragment targets an element,
the `:target` pseudo-class triggers the corresponding CSS rules.
- If the body lacks the hashscroll attribute: 
   - The targeted element gets highlighted with an animation (highlight-target).
   - Its parent <dt>(if applicable) gets highlighted with a different animation (highlight-target-parent-dt).
- These animations visually emphasize the targeted element and its parent for better user experience.
*/
body:not([hashscroll]) *:target {
  animation: highlight-target 3.5s 0.25s ease;
}

body:not([hashscroll]) dt:has(:target) {
  animation: highlight-target-parent-dt 3.5s 0.25s ease;
}

dl.terms-and-definitions-list>.highlight {
  background-color: yellow !important;
  transition: background-color 0.3s ease-in-out;
}

#content:focus {
  outline: none;
}

#content img[role="button"]:focus-visible {
  outline: 2px solid #0071eb;
  outline-offset: 2px;
}

svg[icon] {
  width: 1.25em;
  height: 1.25em;
  vertical-align: text-top;
}

@keyframes highlight-target {
  50% {
    background-color: yellow;
  }
}

@keyframes highlight-target-parent-dt {
  50% {
    background-color: yellow;
    border: 1px solid rgb(0, 200, 255);
  }
}

#svg {
  display: none;
}

main * {
  overflow-wrap: anywhere;
  /* Breaks long URLs at any point without distorting column width */
  word-break: normal;
  /* Breaks words at logical places according to the language */
}

/* Fix for Bootstrap's responsive tables */
.table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
}

/* Override the overflow-wrap property for table-responsive content */
.table-responsive * {
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: nowrap !important;
}

dd td img {
  max-width: 30px;
}





/* Notices */

.notice {
  margin: 1em 0;
  padding: 0.5em 0.9em 0.55em 0.65em;
  border-left: .5em solid;
}

.notice p {
  margin: 0.4em 0 0;
}

.note {
  background: var(--note-bg);
  border-color: var(--note-border);
}

.note .notice-link {
  display: block;
  color: var(--note-text);
}

.issue {
  background: var(--issue-bg);
  border-color: var(--issue-border);
}

.issue .notice-link:before {
  display: block;
  color: var(--issue-text);
}

.warning {
  background: var(--warning-notice-bg);
  border-color: var(--warning-notice-border);
}

.warning .notice-link {
  display: block;
  color: var(--warning-notice-text);
}

.example {
  color: #cebe00;
  background: #1a1e23;
  border-left: 0.5em solid;
}

.example .notice-link {
  display: block;
  color: inherit;
  font-size: 1.1em;
  font-family: Heebo, sans-serif;
}

.example pre[class*="language-"] {
  padding: 0;
  border-radius: 0;
}

.todo {
  background: var(--todo-bg);
  border-color: var(--todo-border);
}

.todo .notice-link {
  display: block;
  color: var(--todo-text);
}

.informative {
  background: var(--informative-bg);
  border-color: var(--informative-border);
}

.informative .notice-link {
  display: block;
  color: var(--informative-text);
}

/* End Notices */


/* Custom styles for Bootstrap alerts */

/* Override default alert colors */
.alert-primary {
  background-color: #f9fcff;
  /* Light cyan */
  border-color: #b2ebf2;
  color: #007E8A;
}

.alert-secondary {
  background-color: #f5f5f5;
  /* Light gray */
  border-color: #e0e0e0;
  color: #616161;
}

.alert-success {
  background-color: #e8f5e9;
  /* Light green */
  border-color: #c8e6c9;
  color: #317C35;
}

.alert-danger {
  background-color: #ffebee;
  /* Light red */
  border-color: #ef9a9a;
  color: #CE2C2C;
}

.alert-warning {
  background-color: #fffde7;
  /* Light yellow */
  border-color: #fff9c4;
  color: #A06403;
}

.alert-info {
  background-color: #e1f5fe;
  /* Light blue */
  border-color: #b3e5fc;
  color: #0273B1;
}

.alert-light {
  background-color: #f9f9f9;
  border-color: #eeeeee;
  color: #424242;
}

.alert-dark {
  background-color: #e0e0e0;
  border-color: #bdbdbd;
  color: #212121;
}

/* Optional: Override link colors within alerts */
.alert a {
  color: inherit;
  /* Inherit the alert's text color */
  font-weight: bold;
}

.alert-primary a {
  color: #007E8A;
}

.alert-success a {
  color: #317C35;
}

.alert-danger a {
  color: #CE2C2C;
}

.alert-warning a {
  color: #A06403;
}

.alert-info a {
  color: #0273B1;
}

.alert-dark a {
  color: #000000;
}


/* Dark theme styles for Bootstrap alerts */
[data-bs-theme="dark"] .alert-primary {
  background-color: #004d40;
  /* Dark cyan */
  border-color: #00695c;
  color: #b2dfdb;
}

[data-bs-theme="dark"] .alert-secondary {
  background-color: #424242;
  /* Dark gray */
  border-color: #616161;
  color: #e0e0e0;
}

[data-bs-theme="dark"] .alert-success {
  background-color: #1b5e20;
  /* Dark green */
  border-color: #2e7d32;
  color: #a5d6a7;
}

[data-bs-theme="dark"] .alert-danger {
  background-color: #b71c1c;
  /* Dark red */
  border-color: #c62828;
  color: #FAD1D1;
}

[data-bs-theme="dark"] .alert-warning {
  background-color: #A84F00;
  /* Dark yellow */
  border-color: #ffb300;
  color: #FFE8A3;
}

[data-bs-theme="dark"] .alert-info {
  background-color: #01579b;
  /* Dark blue */
  border-color: #0277bd;
  color: #85d4f9;
}

[data-bs-theme="dark"] .alert-light {
  background-color: #303030;
  border-color: #424242;
  color: #e0e0e0;
}

[data-bs-theme="dark"] .alert-dark {
  background-color: #212121;
  border-color: #424242;
  color: #bdbdbd;
}

/* Optional: Override link colors within dark theme alerts */
[data-bs-theme="dark"] .alert a {
  color: inherit;
  font-weight: bold;
}

[data-bs-theme="dark"] .alert-primary a {
  color: #80cbc4;
}

[data-bs-theme="dark"] .alert-success a {
  color: #81c784;
}

[data-bs-theme="dark"] .alert-danger a {
  color: #ef5350;
}

[data-bs-theme="dark"] .alert-warning a {
  color: #ffca28;
}

[data-bs-theme="dark"] .alert-info a {
  color: #4fc3f7;
}

[data-bs-theme="dark"] .alert-dark a {
  color: #9e9e9e;
}
/* End Custom styles for Bootstrap alerts */

/* Custom menu button styles */

/**
 * Menu toggle button positioned at right edge of viewport
 * Uses hamburger icon to clearly indicate slide-in menu functionality
 * Fixed to right edge for intuitive association with offcanvas-end panel
 */
.menu-toggle-btn {
  position: fixed !important;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1040; /* Below offcanvas (1045) but above content */
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none;
  padding: 0.75rem 0.5rem !important;
  margin: 0 !important;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
  transition: opacity 0.15s ease-in-out;
}

/* Ensure SVG icons in the button inherit current text color */
.menu-toggle-btn svg {
  fill: currentColor;
}

/* Dark mode: provide better contrast for the menu button */
[data-bs-theme="dark"] .menu-toggle-btn {
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.5);
}

/* Hide the fixed button when offcanvas is open (offcanvas adds backdrop to body) */
body.offcanvas-backdrop .menu-toggle-btn,
body:has(.offcanvas.show) .menu-toggle-btn,
body:has(.offcanvas.showing) .menu-toggle-btn {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Hide in print mode */
@media print {
  .menu-toggle-btn {
    display: none !important;
  }
}

#offcanvasSettings .btn-menu-item {
  border-radius: unset;
  width: 100%;
  text-align: left;
  border: 1px solid #dee2e6;
  /* Subtle border */
  background-color: var(--card-bg);
  color: var(--card-text);
  /* Subtle background color */
  padding: 10px 15px;
  margin-bottom: 5px;
  transition: background-color 0.2s ease;
}

#offcanvasSettings .btn-menu-item:hover {
  background-color: #e9ecef;
  /* Slightly darker background on hover */
}