:where([class^="ri-"])::before { content: "\f3c2"; }

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; /* Added more comprehensive font stack */
}


.skip-link {
  position: absolute;
  top: -40px; 
  left: 0;
  background: #FF7F27; 
  color: white;
  padding: 8px;
  z-index: 100;
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
}


.sidebar-link.active {
  color: #FF7F27; 
  background-color: rgba(255, 127, 39, 0.1); 
}
.sidebar-link:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.05);
}


.code-block {
  background: #1E293B; 
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
  overflow-x: auto; 
}



.search-results {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #1F2937; 
  border: 1px solid #374151; 
  border-radius: 8px;
  margin-top: 4px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 50;
}
.search-results.show {
  display: block;
}

.cogwheel {
  transform-origin: center;
}
.cogwheel i {
  display: block;
  transition: none; 
}

.feature-card {
  transition: transform 0.3s ease;
}
.feature-card:hover {
  transform: translateY(-8px);
}


.custom-table {
  width: 100%;
  border-collapse: collapse; 
  margin-top: 0.5rem; 
}
.custom-table th,
.custom-table td {
  border: 1px solid #4A5568; 
  padding: 0.75rem; 
  text-align: left;
}
.custom-table th {
  background-color: #1F2937; 
  font-weight: bold; 
}
.custom-table caption { 
  padding: 0.5rem;
  font-size: 0.875rem;
  color: #A0AEC0; 
  text-align: left;
}
.hidden-caption-info { 
    display: block; 
}



article p a.nav-link:not(.external-link), 
main section p a.nav-link:not(.external-link),
.main-link-area a.nav-link:not(.external-link) {
  text-decoration: underline;
  
}

nav a.nav-link, aside a.nav-link, footer a.nav-link {
    text-decoration: none;
}
a.nav-link.underline-on-hover:hover {
    text-decoration: underline;
}
a.external-link::after {
    content: ' \f10c'; 
    font-family: 'remixicon';
    font-size: 0.8em;
    margin-left: 2px;
}



body.high-contrast {
  background-color: #ffffff !important;
  color: #000000 !important;
  font-size: 110%;
}
body.high-contrast .bg-dark,
body.high-contrast .bg-dark-lighter,
body.high-contrast .bg-dark\/50,
body.high-contrast .bg-primary\/10,
body.high-contrast .custom-table th { 
  background-color: #f0f0f0 !important; 
}
body.high-contrast .text-gray-100,
body.high-contrast .text-gray-300,
body.high-contrast .text-gray-400,
body.high-contrast .text-white {
  color: #000000 !important;
}
body.high-contrast .text-primary,
body.high-contrast .bg-gradient-to-r.from-primary.to-orange-400.bg-clip-text.text-transparent {
  color: #0000ff !important; 
  -webkit-text-fill-color: #0000ff !important;
   background-image: none !important; 
}
body.high-contrast .border-gray-700,
body.high-contrast .border-gray-800 {
  border-color: #000000 !important;
}
body.high-contrast a.nav-link {
  color: #0000ff !important;
  text-decoration: underline !important;
}
body.high-contrast .sidebar-link.active {
  background-color: #e0e0e0 !important;
  color: #000000 !important;
  border: 1px solid black;
}
body.high-contrast button.bg-primary,
body.high-contrast button.bg-orange-500 {
    background-color: #0000ff !important;
    color: #ffffff !important;
}
body.high-contrast button.bg-gray-200,
body.high-contrast button.bg-white {
    background-color: #cccccc !important;
    color: #000000 !important;
}

.thumbnail-container {
    display: inline-block;
    position: relative;
    margin: 10px;
}

.thumbnail-img {
    width: auto;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: transform 0.3s;
}

.thumbnail-img:hover {
    transform: scale(1.05);
}


.key-features {
    background-image: linear-gradient(to right, rgba(84, 74, 74, 0.9) 0%, rgba(122, 78, 78, 0.8) 40%, rgba(255, 255, 255, 0) 100%), url('cogwheelbg.jpg');
    background-size: cover;
    background-position: center;
}


#main-header.custom-bg-image {
    background-image: url('https://via.placeholder.com/1920x600.png?text=Cool+Mechanical+Background'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


form legend {
    font-weight: bold;
    margin-bottom: 0.5rem;
}
form fieldset {
    border: 1px solid #4A5568; 
    padding: 1rem;
    border-radius: 8px; 
    margin-bottom: 1rem;
}


@media (max-width: 768px) { 
  .nav-links {
    flex-direction: column; 
    align-items: center; 
    gap: 1rem; 
  }

 
  .docs-sidebar { 
    display: none; 
  }
  .docs-main-content { 
    margin-left: 0; 
  }
}


@media (min-width: 769px) {
  .docs-sidebar {
    display: block; 
  }
  .docs-main-content {
    margin-left: 16rem;
  }
}

@media print {

    nav,
    button,
    .no-print {
        display: none;
    }

    body {
        font-family: serif;
        color: #000;
        background: none;
    }

    html,
    body {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    video,
    iframe[src*="youtube"],
    .video-container {
        display: none !important;
    }


    img {
        max-width: 100px;
        height: auto;
        display: block;
        margin: 10px 0;
    }

    a::after {
        content: " (" attr(href) ")";
    }
}