/* ================================================================
   tecRacer Training — Premium Dark / Orange Theme
   ================================================================
   Color System:
     Dark:            #111113
     Dark surface:    #1a1a1e
     Dark elevated:   #242428
     Dark border:     #2e2e35
     Accent:          #e67e00
     Accent glow:     rgba(230, 126, 0, 0.35)
     Accent gradient: linear-gradient(135deg, #e67e00, #ff9a1f)
     Body bg:         #f2f3f5
     Content bg:      #ffffff
     Text:            #2d2d32
     Text muted:      #6b6b76
   ================================================================ */


/* ============================================
   0. KEYFRAME ANIMATIONS
   ============================================ */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(230, 126, 0, 0); }
    50%      { box-shadow: 0 0 12px 2px rgba(230, 126, 0, 0.15); }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}


/* ============================================
   1. CSS CUSTOM PROPERTIES
   ============================================ */

:root {
    --tr-dark: #111113;
    --tr-dark-surface: #1a1a1e;
    --tr-dark-elevated: #242428;
    --tr-dark-border: #2e2e35;
    --tr-accent: #e67e00;
    --tr-accent-hover: #ff9a1f;
    --tr-accent-glow: rgba(230, 126, 0, 0.35);
    --tr-accent-gradient: linear-gradient(135deg, #e67e00, #ff9a1f);
    --tr-body-bg: #f2f3f5;
    --tr-content-bg: #ffffff;
    --tr-text: #2d2d32;
    --tr-text-muted: #6b6b76;
    --tr-radius: 8px;
    --tr-radius-sm: 5px;
    --tr-radius-lg: 12px;
    --tr-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --tr-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --tr-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --tr-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* Theme learn variables */
    --TAG-LINK-BG-color: var(--tr-dark);
    --MAIN-TEXT-color: var(--tr-text);
    --MAIN-TITLES-TEXT-color: var(--tr-dark);
    --MAIN-LINK-color: var(--tr-accent);
    --MAIN-LINK-HOVER-color: var(--tr-accent-hover);
    --MAIN-ANCHOR-color: var(--tr-accent);

    --MENU-HOME-LINK-color: #aaa;
    --MENU-HOME-LINK-HOVER-color: var(--tr-accent-hover);
    --MENU-HEADER-BG-color: var(--tr-dark);
    --MENU-HEADER-BORDER-color: var(--tr-accent);

    --MENU-SEARCH-BG-color: var(--tr-dark-elevated);
    --MENU-SEARCH-BOX-color: #444;
    --MENU-SEARCH-BOX-ICONS-color: #888;
    --MENU-SEARCH-BOX-TEXT-color: #ddd;

    --MENU-SECTIONS-BORDER-color: var(--tr-dark);
    --MENU-SECTIONS-ACTIVE-BG-color: var(--tr-dark-elevated);
    --MENU-SECTIONS-BG-color: var(--tr-dark-surface);
    --MENU-SECTIONS-LINK-color: #a0a0a8;
    --MENU-SECTIONS-LINK-HOVER-color: #fff;
    --MENU-SECTION-ACTIVE-CATEGORY-color: #fff;
    --MENU-SECTION-ACTIVE-CATEGORY-BG-color: var(--tr-accent);

    --MENU-VISITED-color: var(--tr-accent);
    --MENU-SECTION-HR-color: var(--tr-dark-border);
}


/* ============================================
   2. GLOBAL / BASE
   ============================================ */

html {
    scroll-behavior: smooth;
}

::selection {
    background: rgba(230, 126, 0, 0.25);
    color: inherit;
}

body {
    color: var(--tr-text) !important;
    background: var(--tr-body-bg) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1 {
    text-align: left;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

h2, h3, h4, h5 {
    color: var(--tr-dark) !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

h2 {
    padding-bottom: 0.35em;
    border-bottom: 2px solid #eee;
    margin-bottom: 0.75em;
}

p {
    text-align: left;
    font-size: 1.2rem;
    line-height: 1.7;
}

a {
    color: var(--tr-accent);
    transition: color var(--tr-transition);
}

a:hover {
    color: var(--tr-accent-hover);
}

.anchor {
    color: var(--tr-accent);
}

#body a.anchor-link:hover {
    color: var(--tr-accent) !important;
}

/* Animated underline on content links */
#body-inner .Content a:not(.anchor):not(.highlight):not(.btn):not(.button):not(.nav) {
    text-decoration: none;
    background-image: linear-gradient(var(--tr-accent-hover), var(--tr-accent-hover));
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.3s ease, color var(--tr-transition);
}

#body-inner .Content a:not(.anchor):not(.highlight):not(.btn):not(.button):not(.nav):hover {
    background-size: 100% 2px;
}

#body a.highlight:after {
    display: block;
    content: "";
    height: 1px;
    width: 0%;
    transition: width 0.5s ease;
    background-color: var(--tr-accent-hover);
}


/* ============================================
   3. FORM FOCUS STATES
   ============================================ */

textarea:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="url"]:focus,
input[type="color"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
select[multiple=multiple]:focus {
    border-color: var(--tr-accent) !important;
    box-shadow: 0 0 0 3px var(--tr-accent-glow) !important;
    outline: none;
    transition: border-color var(--tr-transition), box-shadow var(--tr-transition);
}


/* ============================================
   4. SIDEBAR
   ============================================ */

#sidebar {
    background: var(--tr-dark-surface);
    border-right: 1px solid var(--tr-dark-border);
    border-top: none;
    transition: all var(--tr-transition);
}

#sidebar #header-wrapper {
    background: var(--tr-dark);
    color: var(--MENU-SEARCH-BOX-color);
    border-bottom: 1px solid var(--tr-dark-border);
    position: relative;
}

/* Orange gradient glow line at bottom of header */
#sidebar #header-wrapper::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent,
        rgba(230, 126, 0, 0.6),
        var(--tr-accent),
        rgba(230, 126, 0, 0.6),
        transparent
    );
}

/* Search box */
#sidebar .searchbox {
    border-color: var(--tr-dark-border);
    background: var(--tr-dark-elevated);
    color: var(--MENU-SEARCH-BOX-TEXT-color);
    border-radius: var(--tr-radius-sm);
    transition: border-color var(--tr-transition), box-shadow var(--tr-transition);
}

#sidebar .searchbox:focus-within {
    border-color: var(--tr-accent) !important;
    box-shadow: 0 0 0 3px var(--tr-accent-glow);
}

#sidebar .searchbox * {
    color: var(--MENU-SEARCH-BOX-ICONS-color);
}

.searchbox input::-webkit-input-placeholder { color: #666; }
.searchbox input::-moz-placeholder { color: #666; }
.searchbox input:-moz-placeholder { color: #666; }
.searchbox input:-ms-input-placeholder { color: #666; }

/* Sidebar links */
#sidebar a {
    color: var(--MENU-SECTIONS-LINK-color);
    transition: color var(--tr-transition), padding-left var(--tr-transition);
}

#sidebar a:hover {
    color: var(--MENU-SECTIONS-LINK-HOVER-color);
}

/* Menu items */
#sidebar ul.topics > li.parent,
#sidebar ul.topics > li.active {
    background: var(--tr-dark-elevated);
}

/* Active item — left accent bar instead of full background to avoid overflow */
#sidebar ul li.active > a {
    background: var(--tr-dark-elevated) !important;
    color: #fff !important;
    font-weight: 600;
    border-left: 3px solid var(--tr-accent) !important;
    box-shadow: none;
}

/* Hover effect on non-active items */
#sidebar ul.topics li:not(.active) > a:hover {
    padding-left: 4px;
}

/* Visited icon */
#sidebar ul li.visited > a .read-icon {
    color: var(--tr-accent);
    display: none;
}

#sidebar hr {
    border-color: var(--tr-dark-border);
}

#sidebar ul.topics > li > a {
    font-size: 1.0rem;
    font-weight: 500;
}

#sidebar ul li li {
    text-indent: 0rem;
}

/* Sidebar scrollbar */
#sidebar::-webkit-scrollbar { width: 5px; }
#sidebar::-webkit-scrollbar-track { background: transparent; }
#sidebar::-webkit-scrollbar-thumb {
    background: var(--tr-dark-border);
    border-radius: 10px;
}
#sidebar::-webkit-scrollbar-thumb:hover { background: var(--tr-accent); }
#sidebar { scrollbar-color: var(--tr-dark-border) transparent; scrollbar-width: thin; }

/* Shortcuts section */
#sidebar section#shortcuts {
    border-top: 1px solid var(--tr-dark-border);
    padding-top: 1rem;
}

#sidebar section#shortcuts h3 {
    color: var(--tr-accent);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.8;
}

#sidebar section#shortcuts a {
    color: #888;
    transition: color var(--tr-transition);
}

#sidebar section#shortcuts a:hover {
    color: #fff;
}


/* ============================================
   5. LOGO
   ============================================ */

#header #logo {
    display: block;
    padding: 1rem 0;
    text-align: center;
}

#header #logo img {
    filter: brightness(0) invert(1);
    width: 170px;
    height: auto;
    display: inline-block;
    transition: opacity var(--tr-transition);
}

#header #logo:hover img {
    opacity: 0.85;
}


/* ============================================
   6. TOP BAR / BREADCRUMBS
   ============================================ */

#top-bar {
    background: var(--tr-dark);
    color: #aaa;
    border-bottom: 1px solid var(--tr-dark-border);
}

#body #breadcrumbs {
    color: #999;
}

#body #breadcrumbs span {
    color: #666;
}

#body #breadcrumbs a {
    color: var(--tr-accent);
    transition: color var(--tr-transition);
}

#body #breadcrumbs a:hover {
    color: var(--tr-accent-hover);
}

#toc-menu {
    border-right-color: var(--tr-dark-border) !important;
    color: #aaa !important;
}

#sidebar-toggle-span {
    border-right-color: var(--tr-dark-border) !important;
}

#sidebar-toggle-span a {
    color: #aaa !important;
    transition: color var(--tr-transition);
}

#sidebar-toggle-span a:hover {
    color: var(--tr-accent) !important;
}

#toc-menu:hover {
    color: var(--tr-accent) !important;
}


/* ============================================
   7. CONTENT AREA
   ============================================ */

#body .padding {
    background: var(--tr-content-bg);
    animation: fadeIn 0.4s ease-out;
}

/* Content card feel */
#body-inner {
    animation: fadeInUp 0.45s ease-out;
}

#body hr {
    border: none;
    border-bottom: 2px solid #eee;
    margin: 2rem 0;
}

/* Chapter pages */
#chapter {
    align-items: center;
    justify-content: left;
}

#chapter p { text-align: left; }
#chapter h3 { text-align: left; }
#chapter h4 { text-align: left; }

/* Children page cards */
.children p {
    margin-top: 0;
    padding: 0.5rem 0;
    transition: padding-left var(--tr-transition);
}

.children p:hover {
    padding-left: 4px;
}


/* ============================================
   8. NAVIGATION ARROWS (Prev / Next)
   ============================================ */

#body .nav {
    color: var(--tr-accent) !important;
    transition: all var(--tr-transition);
}

#body .nav:hover {
    color: var(--tr-accent-hover) !important;
    background: rgba(230, 126, 0, 0.06) !important;
}

#body .nav i {
    transition: transform var(--tr-transition);
}

#body .nav.nav-prev:hover i {
    transform: translateX(-3px);
}

#body .nav.nav-next:hover i {
    transform: translateX(3px);
}


/* ============================================
   9. TABLES
   ============================================ */

table {
    border: none;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    border-radius: var(--tr-radius);
    overflow: hidden;
    box-shadow: var(--tr-shadow-sm);
    margin: 1.5rem 0;
}

th {
    background: var(--tr-dark) !important;
    color: #fff !important;
    padding: 0.75rem 1rem;
    border: none;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

th:first-child {
    border-radius: var(--tr-radius) 0 0 0;
}

th:last-child {
    border-radius: 0 var(--tr-radius) 0 0;
}

td {
    padding: 0.7rem 1rem;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    transition: background var(--tr-transition);
}

tr:nth-child(even) { background-color: #fafafa; }
tr:nth-child(odd)  { background-color: #fff; }

tr:hover td {
    background-color: #fff8f0;
}

/* Orange left accent on hover */
tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--tr-accent);
}

tr:last-child td:first-child { border-radius: 0 0 0 var(--tr-radius); }
tr:last-child td:last-child  { border-radius: 0 0 var(--tr-radius) 0; }


/* ============================================
   10. BUTTONS
   ============================================ */

.button {
    background: linear-gradient(135deg, #e67e00, #d97200) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(230, 126, 0, 0.25) !important;
    border: none !important;
    border-radius: var(--tr-radius-sm) !important;
    transition: all var(--tr-transition);
    font-weight: 600;
}

.button:hover {
    background: linear-gradient(135deg, #ff9a1f, #e67e00) !important;
    box-shadow: 0 4px 16px rgba(230, 126, 0, 0.35) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.button:active {
    background: linear-gradient(135deg, #cc6f00, #b86000) !important;
    box-shadow: 0 1px 4px rgba(230, 126, 0, 0.2) !important;
    transform: translateY(0);
}

.button-secondary {
    background: var(--tr-dark) !important;
    color: #fff !important;
    box-shadow: var(--tr-shadow-sm) !important;
    border: none !important;
    border-radius: var(--tr-radius-sm) !important;
    transition: all var(--tr-transition);
    font-weight: 600;
}

.button-secondary:hover {
    background: var(--tr-dark-elevated) !important;
    box-shadow: var(--tr-shadow-md) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.btn-default {
    color: #fff !important;
    background: linear-gradient(135deg, #e67e00, #d97200) !important;
    border: none !important;
    border-radius: var(--tr-radius-sm) !important;
    box-shadow: 0 2px 8px rgba(230, 126, 0, 0.25) !important;
    transition: all var(--tr-transition);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
    color: #fff !important;
    background: linear-gradient(135deg, #ff9a1f, #e67e00) !important;
    box-shadow: 0 4px 16px rgba(230, 126, 0, 0.35) !important;
}


/* ============================================
   11. NOTICE BOXES
   Modern design keeping original layout for
   icon + label positioning in top border.
   ============================================ */

div.notices {
    border-radius: var(--tr-radius);
    overflow: hidden;
    box-shadow: var(--tr-shadow-sm);
    margin: 1.5rem 0;
    transition: box-shadow var(--tr-transition);
}

div.notices:hover {
    box-shadow: var(--tr-shadow-md);
}

div.notices p {
    background: #fafafa !important;
    color: #444;
    border-radius: 0 0 var(--tr-radius) var(--tr-radius);
}

/* Info */
div.notices.info p {
    border-top-color: var(--tr-accent) !important;
    background: #fffaf3 !important;
}
div.notices.info p:first-child:before,
div.notices.info p:first-child:after {
    color: #fff !important;
}

/* Warning */
div.notices.warning p {
    border-top-color: #d9534f !important;
    background: #fef7f7 !important;
}
div.notices.warning p:first-child:before,
div.notices.warning p:first-child:after {
    color: #fff !important;
}

/* Note */
div.notices.note p {
    border-top-color: #4a90c4 !important;
    background: #f5f9fd !important;
}
div.notices.note p:first-child:before,
div.notices.note p:first-child:after {
    color: #fff !important;
}

/* Tip */
div.notices.tip p {
    border-top-color: #48a448 !important;
    background: #f6fdf6 !important;
}
div.notices.tip p:first-child:before,
div.notices.tip p:first-child:after {
    color: #fff !important;
}


/* ============================================
   12. CODE BLOCKS
   ============================================ */

pre {
    border-left: 3px solid var(--tr-accent) !important;
    border-radius: 0 var(--tr-radius) var(--tr-radius) 0 !important;
    box-shadow: var(--tr-shadow-sm) !important;
    transition: box-shadow var(--tr-transition);
    margin: 1.5rem 0 !important;
}

pre:hover {
    box-shadow: var(--tr-shadow-md) !important;
}

/* Inline code */
code {
    background: #f4f4f6 !important;
    border: 1px solid #e4e4e8 !important;
    color: var(--tr-text) !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    font-size: 0.88em;
    font-weight: 500;
}

/* Reset inside pre blocks */
pre code {
    background: inherit !important;
    border: none !important;
    color: whitesmoke !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-size: 15px;
    font-weight: 400;
}


/* ============================================
   13. COPY TO CLIPBOARD
   ============================================ */

code + .copy-to-clipboard {
    background-color: #f4f4f6 !important;
    border: 1px solid #e4e4e8 !important;
    border-radius: 4px !important;
    transition: all var(--tr-transition);
}

code + .copy-to-clipboard:hover {
    background-color: var(--tr-accent) !important;
    border-color: var(--tr-accent) !important;
}

pre .copy-to-clipboard {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-radius: 4px !important;
    transition: all var(--tr-transition);
}

pre .copy-to-clipboard:hover {
    background-color: var(--tr-accent) !important;
    color: #fff !important;
}


/* ============================================
   14. BLOCKQUOTES
   ============================================ */

blockquote {
    border-left: 4px solid var(--tr-accent) !important;
    background: linear-gradient(135deg, #fffaf5, #fff8f0);
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    border-radius: 0 var(--tr-radius) var(--tr-radius) 0;
    box-shadow: var(--tr-shadow-sm);
}

blockquote p {
    color: #555 !important;
    font-style: italic;
}

blockquote code {
    background: rgba(230, 126, 0, 0.08) !important;
    border-color: rgba(230, 126, 0, 0.2) !important;
}


/* ============================================
   15. TOC DROPDOWN
   ============================================ */

.progress {
    background-color: var(--tr-dark) !important;
    border: 1px solid var(--tr-dark-border) !important;
    border-radius: var(--tr-radius);
    box-shadow: var(--tr-shadow-lg);
}

.progress a {
    color: #aaa !important;
    transition: color var(--tr-transition), padding-left var(--tr-transition);
}

.progress a:hover {
    color: var(--tr-accent) !important;
    padding-left: 4px;
}

#TableOfContents a {
    color: #aaa !important;
    transition: color var(--tr-transition);
}

#TableOfContents a:hover {
    color: var(--tr-accent) !important;
}

#TableOfContents > ul > li > a {
    color: #ddd !important;
    font-weight: 500;
}


/* ============================================
   16. SEARCH AUTOCOMPLETE
   ============================================ */

.autocomplete-suggestions {
    background: var(--tr-dark) !important;
    border: 1px solid var(--tr-dark-border) !important;
    box-shadow: var(--tr-shadow-lg) !important;
    border-radius: 0 0 var(--tr-radius) var(--tr-radius);
}

.autocomplete-suggestion {
    color: #bbb !important;
    border-bottom: 1px solid var(--tr-dark-elevated);
    padding: 12px 16px !important;
    transition: all var(--tr-transition);
}

.autocomplete-suggestion b {
    color: var(--tr-accent) !important;
    font-weight: 700;
}

.autocomplete-suggestion.selected,
.autocomplete-suggestion:hover {
    background: var(--tr-dark-elevated) !important;
    color: #fff !important;
    padding-left: 20px !important;
}

.autocomplete-suggestion > .context {
    color: #666 !important;
    font-size: 0.85em;
}


/* ============================================
   17. TAGS
   ============================================ */

#body .tags a.tag-link {
    background-color: var(--tr-dark);
    border-radius: 3px;
    transition: all var(--tr-transition);
}

#body .tags a.tag-link:hover {
    background-color: var(--tr-accent);
}

#body .tags a.tag-link:before {
    border-right-color: var(--tr-dark);
}

#body .tags a.tag-link:hover:before {
    border-right-color: var(--tr-accent);
}

#body .tags a.tag-link::before {
    left: -12.5px;
}


/* ============================================
   18. HOME LINKS
   ============================================ */

#homelinks {
    background: var(--tr-dark);
    background-color: var(--tr-accent);
    border-bottom-color: var(--tr-accent);
}

#homelinks a {
    color: var(--MENU-HOME-LINK-color);
    transition: color var(--tr-transition);
}

#homelinks a:hover {
    color: var(--MENU-HOME-LINK-HOVER-color);
}


/* ============================================
   19. TABS
   ============================================ */

#body-inner .tabs-wrapper.ui-theme-badges .tabs-nav li.current a {
    background: linear-gradient(135deg, #e67e00, #d97200) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(230, 126, 0, 0.25);
    border-radius: var(--tr-radius-sm) var(--tr-radius-sm) 0 0 !important;
}

#body-inner .tabs-wrapper.ui-theme-badges .tabs-nav li a {
    background: #f0f0f2;
    color: var(--tr-text);
    border-radius: var(--tr-radius-sm) var(--tr-radius-sm) 0 0;
    transition: all var(--tr-transition);
    font-weight: 500;
}

#body-inner .tabs-wrapper.ui-theme-badges .tabs-nav li a:hover {
    background: var(--tr-accent-hover);
    color: #fff;
}

#body-inner .tabs-wrapper .tabs-content {
    border-radius: 0 0 var(--tr-radius) var(--tr-radius);
    box-shadow: var(--tr-shadow-sm);
}


/* ============================================
   20. CUSTOM COMPONENTS
   ============================================ */

.container {
    height: 150px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container p {
    font-size: 3rem;
    padding: 0.5rem;
    font-weight: bold;
    letter-spacing: 0.1rem;
    text-align: center;
    overflow: hidden;
}

.container p span.typed-text {
    font-weight: normal;
    color: var(--tr-accent);
}

.container p span.cursor {
    display: inline-block;
    background-color: #ccc;
    margin-left: 0.1rem;
    width: 3px;
    animation: blink 1s infinite;
}

.container p span.cursor.typing {
    animation: none;
}

.highlight-wrapper { position: relative; }
.highlight-link { position: absolute; bottom: 0; right: 0; }

.navpre { margin-right: 8px; vertical-align: middle; }
.navpresmall { margin-right: 10px; font-size: 6px; vertical-align: middle; }

.navpresmall a,
.navpre a {
    display: flex;
    align-items: center;
}

a:hover .navpre,
a:hover .navpresmall { color: var(--tr-accent); }

.active a:hover .navpre,
.active a:hover .navpresmall { color: #FFF; }

a:visited .navpre,
a:visited .navpresmall { color: var(--tr-accent); }


/* ============================================
   21. LISTS — Refined spacing
   ============================================ */

#body-inner ul,
#body-inner ol {
    margin-bottom: 1rem;
}

#body-inner li {
    margin-bottom: 0.25rem;
    line-height: 1.7;
}


/* ============================================
   22. IMAGES — Clean presentation
   ============================================ */

#body-inner img {
    border-radius: var(--tr-radius);
    box-shadow: var(--tr-shadow-sm);
    transition: box-shadow var(--tr-transition);
    max-width: 100%;
    height: auto;
}

#body-inner img:hover {
    box-shadow: var(--tr-shadow-md);
}

/* Featherlight lightbox overlay */
.featherlight .featherlight-content {
    border-radius: var(--tr-radius-lg);
    overflow: hidden;
}


/* ============================================
   23. FOOTER LINE
   ============================================ */

footer.footline {
    border-top: 1px solid #eee;
    margin-top: 3rem;
    padding-top: 1rem;
}


/* ============================================
   24. RESPONSIVE REFINEMENTS
   ============================================ */

@media only all and (max-width: 59.938em) {
    #sidebar {
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
    }

    #body .padding {
        padding: 1.5rem;
    }
}

@media only all and (max-width: 47.938em) {
    #body .padding {
        padding: 1rem;
    }

    table {
        font-size: 0.9rem;
    }

    th, td {
        padding: 0.5rem 0.65rem;
    }
}