/**
 * Jetson HelpScout Docs Custom Styles
 *
 * This CSS file styles the HelpScout Docs site to match Jetson's brand.
 * Aligned with jetson.help main site aesthetics.
 *
 * Usage:
 * 1. Upload this file to your web server or use a service like Dropbox
 * 2. In HelpScout: Manage > Docs > Custom Code > Custom Stylesheet URL
 * 3. Paste the URL to this CSS file
 *
 * Alternatively, copy the contents into the "Insert <head> Code" field
 * wrapped in <style> tags.
 */

/* ==========================================================================
   FONTS
   Import Jetson's brand fonts from Fontshare
   ========================================================================== */

@import url("https://api.fontshare.com/v2/css?f[]=general-sans@200,201,400,401,600,601&f[]=satoshi@500,501,700,701,900,901&display=swap");

/* ==========================================================================
   CSS CUSTOM PROPERTIES (Light Mode)
   ========================================================================== */

:root {
    /* Core palette - matches jetson.help */
    --jetson-background: #fafafa;
    --jetson-foreground: #18181b;
    --jetson-card: #ffffff;
    --jetson-muted: #f4f4f5;
    --jetson-muted-foreground: #71717a;
    --jetson-border: #e4e4e7;
    --jetson-hover-muted: #27272a;

    /* Brand colors - dark gray is primary, subtle accents */
    --jetson-primary: #18181b;
    --jetson-primary-foreground: #ffffff;
    --jetson-secondary: #52525b;
    --jetson-secondary-foreground: #ffffff;

    /* Accent uses foreground color for links - more subtle */
    --jetson-accent: #18181b;
    --jetson-accent-hover: #27272a;

    /* Category colors for visual variety */
    --jetson-blue: #3498db;
    --jetson-green: #2ecc71;
    --jetson-orange: #e67e22;
    --jetson-purple: #9b59b6;
    --jetson-gray: #95a5a6;

    /* Semantic colors */
    --jetson-success: #0affe7;
    --jetson-warning: #f59e0b;
    --jetson-danger: #f43f5e;
    --jetson-info: #94a3b8;

    /* Typography */
    --font-heading:
        "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    --font-body:
        "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Spacing & Radius */
    --radius: 0.75rem;
    --radius-sm: 0.5rem;
    --radius-lg: 1rem;
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root {
        /* Core palette - dark mode */
        --jetson-background: #11100f;
        --jetson-foreground: #f5f1e8;
        --jetson-card: #181818;
        --jetson-muted: #242424;
        --jetson-muted-foreground: #a1a1a1;
        --jetson-border: #3a3a3a;
        --jetson-hover-muted: #d4cfc4;

        /* Brand colors - inverted for dark */
        --jetson-primary: #f5f1e8;
        --jetson-primary-foreground: #11100f;
        --jetson-secondary: #3a3a3a;
        --jetson-secondary-foreground: #f5f1e8;

        /* Accent in dark mode */
        --jetson-accent: #f5f1e8;
        --jetson-accent-hover: #d4cfc4;

        /* Category colors - brighter for dark mode */
        --jetson-blue: #5dade2;
        --jetson-green: #58d68d;
        --jetson-orange: #f39c12;
        --jetson-purple: #bb8fce;
        --jetson-gray: #b2babb;
    }
}

/* ==========================================================================
   GLOBAL STYLES
   ========================================================================== */

/* Smooth scroll behavior for internal navigation */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    font-family: var(--font-body) !important;
    background-color: var(--jetson-background) !important;
    color: var(--jetson-foreground) !important;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* All headings use General Sans */
h1,
h2,
h3,
h4,
h5,
h6,
.contentWrapper h1,
.contentWrapper h2,
.contentWrapper h3,
.contentWrapper h4,
#fullArticle h1,
#fullArticle h2,
#fullArticle h3,
#fullArticle h4 {
    font-family: var(--font-heading) !important;
    color: var(--jetson-foreground) !important;
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* ==========================================================================
   HEADER & NAVIGATION
   Overrides HelpScout's Bootstrap 2-era navbar styling
   ========================================================================== */

/* Main navbar container */
.navbar {
    margin-bottom: 0 !important;
    background-color: var(--jetson-primary) !important;
}

.navbar-inner {
    min-height: 56px !important;
    padding: 0 1.5rem !important;
    background-color: var(--jetson-primary) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Brand/Logo area */
.navbar .brand {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: var(--font-heading) !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: var(--jetson-primary-foreground) !important;
    text-shadow: none !important;
    text-decoration: none !important;
    letter-spacing: -0.02em !important;
}

.navbar .brand:hover {
    color: var(--jetson-primary-foreground) !important;
    opacity: 0.9;
}

/* Navigation list */
.navbar .nav {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.navbar .nav > li {
    float: none !important;
    display: flex !important;
}

/* Navigation links */
.navbar .nav > li > a,
.navbar a,
#mainNav a {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.5rem 0.875rem !important;
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--jetson-primary-foreground) !important;
    text-shadow: none !important;
    text-decoration: none !important;
    border-radius: var(--radius-sm) !important;
    transition: all 0.2s ease !important;
    opacity: 0.85;
}

.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus,
.navbar a:hover,
#mainNav a:hover {
    color: var(--jetson-primary-foreground) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    opacity: 1;
}

/* Active nav state */
.navbar .nav > li.active > a,
.navbar .nav > li > a.active {
    color: var(--jetson-primary-foreground) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    opacity: 1;
}

/* Dropdown menus in nav */
.navbar .dropdown-menu {
    background-color: var(--jetson-card) !important;
    border: 1px solid var(--jetson-border) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15) !important;
    padding: 0.5rem !important;
}

.navbar .dropdown-menu a {
    color: var(--jetson-foreground) !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: var(--radius-sm) !important;
}

.navbar .dropdown-menu a:hover {
    background-color: var(--jetson-muted) !important;
    color: var(--jetson-foreground) !important;
}

/* Remove old Bootstrap styling artifacts */
.navbar .divider-vertical,
.navbar .nav > li > a:focus {
    background-color: transparent !important;
}

/* Mobile nav toggle */
.navbar .btn-navbar,
.navbar-toggle {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.5rem !important;
}

.navbar .btn-navbar:hover,
.navbar-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.navbar .btn-navbar .icon-bar,
.navbar-toggle .icon-bar {
    background-color: var(--jetson-primary-foreground) !important;
}

/* ==========================================================================
   SEARCH SECTION
   ========================================================================== */

#docsSearch {
    background-color: var(--jetson-card) !important;
    padding: 3rem 2rem !important;
    border-bottom: 1px solid var(--jetson-border);
}

#docsSearch h1 {
    font-family: var(--font-heading) !important;
    color: var(--jetson-foreground) !important;
    font-size: 2rem !important;
    font-weight: 600 !important;
    margin-bottom: 1.5rem !important;
}

/* Search bar container - make input and button connect seamlessly */
#searchBar,
.searchBar {
    display: flex !important;
    align-items: stretch !important;
}

/* Search input field */
#searchBar .search-query,
.search-query,
input[type="search"],
.docsSearch input {
    font-family: var(--font-body) !important;
    background-color: var(--jetson-background) !important;
    border: 1px solid var(--jetson-border) !important;
    border-radius: var(--radius) 0 0 var(--radius) !important;
    border-right: none !important;
    padding: 0.625rem 0.875rem !important;
    font-size: 0.875rem !important;
    color: var(--jetson-foreground) !important;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    flex: 1 !important;
    min-width: 0 !important;
}

#searchBar .search-query:focus,
.search-query:focus,
input[type="search"]:focus {
    border-color: var(--jetson-foreground) !important;
    box-shadow: 0 0 0 2px rgba(24, 24, 27, 0.1) !important;
    outline: none !important;
}

@media (prefers-color-scheme: dark) {
    #searchBar .search-query:focus,
    .search-query:focus,
    input[type="search"]:focus {
        box-shadow: 0 0 0 2px rgba(245, 241, 232, 0.15) !important;
    }
}

/* Search button - connects to input */
#searchBar button,
.docsSearch button {
    font-family: var(--font-body) !important;
    background-color: var(--jetson-primary) !important;
    color: var(--jetson-primary-foreground) !important;
    border: 1px solid var(--jetson-primary) !important;
    border-radius: 0 var(--radius) var(--radius) 0 !important;
    padding: 0.625rem 0.875rem !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0 !important;
}

#searchBar button:hover,
.docsSearch button:hover {
    background-color: #27272a !important;
    border-color: #27272a !important;
}

/* Search results dropdown */
#serp-dd,
.search-results,
.autocomplete-suggestions {
    background-color: var(--jetson-card) !important;
    border: 1px solid var(--jetson-border) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1) !important;
}

/* ==========================================================================
   CATEGORY & COLLECTION CARDS
   ========================================================================== */

/* Category list container */
.category-list {
    display: grid;
    gap: 1.5rem;
}

/* Individual category cards */
.category-list .category,
.category,
.collection {
    background-color: var(--jetson-card) !important;
    border: 1px solid var(--jetson-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 1.5rem !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.category-list .category:hover,
.category:hover,
.collection:hover {
    border-color: var(--jetson-foreground) !important;
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 40px -12px rgba(24, 24, 27, 0.12) !important;
}

@media (prefers-color-scheme: dark) {
    .category-list .category:hover,
    .category:hover,
    .collection:hover {
        box-shadow: 0 12px 40px -12px rgba(245, 241, 232, 0.08) !important;
    }
}

/* Category headings */
.category h2,
.category h3,
.collection h2,
.collection h3 {
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    color: var(--jetson-foreground) !important;
    margin-bottom: 0.75rem !important;
}

/* Category/collection title links */
.category h2 a,
.category h3 a,
.collection h2 a,
.collection h3 a,
.category > a,
.collection > a {
    color: var(--jetson-foreground) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.category h2 a:hover,
.category h3 a:hover,
.collection h2 a:hover,
.collection h3 a:hover,
.category > a:hover,
.collection > a:hover {
    color: var(--jetson-blue) !important;
}

/* Category descriptions */
.category p,
.collection p {
    color: var(--jetson-muted-foreground) !important;
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
}

/* Category icons - uses category colors for visual variety */
.category .icon,
.category i,
.collection .icon {
    color: var(--jetson-foreground) !important;
}

/* Two and three column layouts */
.twoCol .collection,
.threeCol .collection {
    background-color: var(--jetson-card) !important;
    border-radius: var(--radius-lg) !important;
}

/* ==========================================================================
   ARTICLE LIST
   ========================================================================== */

/* Most popular articles section */
.most-pop-articles,
.article-list {
    background-color: transparent !important;
}

.most-pop-articles h3,
.article-list h3 {
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    color: var(--jetson-foreground) !important;
    border-bottom: 1px solid var(--jetson-border) !important;
    padding-bottom: 0.75rem !important;
    margin-bottom: 1rem !important;
}

/* Article links */
.most-pop-articles a,
.article-list a,
.articleList a {
    font-family: var(--font-body) !important;
    color: var(--jetson-blue) !important;
    text-decoration: none !important;
    padding: 0.625rem 0 !important;
    display: block;
    border-bottom: 1px solid var(--jetson-muted) !important;
    transition: all 0.2s ease;
}

.most-pop-articles a:hover,
.article-list a:hover,
.articleList a:hover {
    color: var(--jetson-foreground) !important;
    padding-left: 0.5rem !important;
}

/* ==========================================================================
   ARTICLE CONTENT
   ========================================================================== */

/* Content wrapper - the outer container gets the border */
.contentWrapper {
    background-color: var(--jetson-card) !important;
    border-radius: var(--radius-lg) !important;
    padding: 2.5rem !important;
    border: 1px solid var(--jetson-border) !important;
}

/* Inner article content - no border to avoid double borders */
#fullArticle,
.article-content {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Article title */
#fullArticle h1,
.article-content h1 {
    font-family: var(--font-heading) !important;
    font-size: 2rem !important;
    font-weight: 600 !important;
    color: var(--jetson-foreground) !important;
    margin-bottom: 1.5rem !important;
    letter-spacing: -0.02em !important;
}

/* Section headings */
#fullArticle h2 {
    font-family: var(--font-heading) !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: var(--jetson-foreground) !important;
    margin-top: 2.5rem !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 1px solid var(--jetson-border) !important;
}

#fullArticle h3 {
    font-family: var(--font-heading) !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: var(--jetson-foreground) !important;
    margin-top: 2rem !important;
    margin-bottom: 0.75rem !important;
}

/* Body text */
#fullArticle p,
.article-content p {
    font-family: var(--font-body) !important;
    color: var(--jetson-foreground) !important;
    font-size: 1rem !important;
    line-height: 1.75 !important;
    margin-bottom: 1.25rem !important;
}

/* Links in content - visible blue for discoverability */
#fullArticle a,
.article-content a {
    color: var(--jetson-blue) !important;
    text-decoration: none !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

#fullArticle a:hover,
.article-content a:hover {
    text-decoration: underline !important;
}

/* Lists */
#fullArticle ul,
#fullArticle ol {
    padding-left: 1.5rem !important;
    margin-bottom: 1.25rem !important;
}

#fullArticle li {
    font-family: var(--font-body) !important;
    color: var(--jetson-foreground) !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.75 !important;
}

/* Code blocks */
#fullArticle code,
.article-content code {
    font-family: "SF Mono", "Fira Code", "Monaco", monospace !important;
    background-color: var(--jetson-muted) !important;
    padding: 0.2rem 0.4rem !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.875em !important;
    color: var(--jetson-foreground) !important;
}

#fullArticle pre,
.article-content pre {
    background-color: #1a1a1a !important;
    color: #f5f5f5 !important;
    border-radius: var(--radius) !important;
    padding: 1.25rem !important;
    overflow-x: auto !important;
    margin: 1.5rem 0 !important;
    border: 1px solid var(--jetson-border) !important;
}

#fullArticle pre code {
    background-color: transparent !important;
    padding: 0 !important;
    color: inherit !important;
}

/* Blockquotes */
#fullArticle blockquote,
.article-content blockquote {
    border-left: 4px solid var(--jetson-foreground) !important;
    background-color: var(--jetson-muted) !important;
    padding: 1rem 1.25rem !important;
    margin: 1.5rem 0 !important;
    border-radius: 0 var(--radius) var(--radius) 0 !important;
}

#fullArticle blockquote p {
    color: var(--jetson-muted-foreground) !important;
    font-style: italic;
    margin-bottom: 0 !important;
}

/* Images */
#fullArticle img,
.article-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: var(--radius) !important;
    border: 1px solid var(--jetson-border) !important;
    margin: 1.5rem 0 !important;
}

/* Tables */
#fullArticle table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 1.5rem 0 !important;
    border-radius: var(--radius) !important;
    overflow: hidden;
    border: 1px solid var(--jetson-border) !important;
}

#fullArticle th {
    font-family: var(--font-heading) !important;
    background-color: var(--jetson-muted) !important;
    color: var(--jetson-foreground) !important;
    font-weight: 600 !important;
    text-align: left !important;
    padding: 0.875rem 1rem !important;
    border-bottom: 1px solid var(--jetson-border) !important;
}

#fullArticle td {
    font-family: var(--font-body) !important;
    padding: 0.875rem 1rem !important;
    border-bottom: 1px solid var(--jetson-muted) !important;
    color: var(--jetson-foreground) !important;
}

#fullArticle tr:last-child td {
    border-bottom: none !important;
}

#fullArticle tr:hover {
    background-color: var(--jetson-muted) !important;
}

/* ==========================================================================
   ARTICLE FOOTER & METADATA
   ========================================================================== */

.articleFoot,
.article-footer {
    border-top: 1px solid var(--jetson-border) !important;
    margin-top: 2.5rem !important;
    padding-top: 1.5rem !important;
}

/* Last updated timestamp */
.articleFoot time.lu,
.article-footer time {
    font-family: var(--font-body) !important;
    color: var(--jetson-muted-foreground) !important;
    font-size: 0.875rem !important;
}

/* Helpful rating */
.helpfulRating,
.article-rating {
    background-color: var(--jetson-muted) !important;
    border-radius: var(--radius) !important;
    padding: 1.25rem !important;
    margin-top: 1.5rem !important;
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.sidebar,
#sidebar,
aside {
    background-color: var(--jetson-card) !important;
    border: 1px solid var(--jetson-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 1.5rem !important;
}

.sidebar h3,
.sidebar h4,
#sidebar h3 {
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    color: var(--jetson-foreground) !important;
    margin-bottom: 1rem !important;
    font-size: 1rem !important;
}

.sidebar a,
#sidebar a {
    color: var(--jetson-blue) !important;
    font-size: 0.9375rem !important;
    display: block;
    padding: 0.5rem 0 !important;
    transition: color 0.2s ease;
}

.sidebar a:hover,
#sidebar a:hover {
    color: var(--jetson-foreground) !important;
}

.sidebar a.active,
#sidebar a.active {
    color: var(--jetson-foreground) !important;
    font-weight: 600;
    background-color: var(--jetson-muted) !important;
    padding: 0.5rem 0.75rem !important;
    margin: 0 -0.75rem !important;
    border-radius: var(--radius-sm) !important;
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */

.breadcrumbs,
.breadcrumb,
nav[aria-label="breadcrumb"] {
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;
    color: var(--jetson-muted-foreground) !important;
    margin-bottom: 1.5rem !important;
}

.breadcrumbs a,
.breadcrumb a {
    color: var(--jetson-muted-foreground) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.breadcrumbs a:hover,
.breadcrumb a:hover {
    color: var(--jetson-foreground) !important;
}

.breadcrumbs span,
.breadcrumb-separator {
    color: var(--jetson-muted-foreground) !important;
    margin: 0 0.5rem !important;
}

/* ==========================================================================
   BUTTONS & INTERACTIVE ELEMENTS
   ========================================================================== */

.btn,
button,
.button {
    font-family: var(--font-body) !important;
    border-radius: var(--radius) !important;
    font-weight: 500 !important;
    transition: all 0.2s ease;
}

.btn-primary,
.button-primary {
    background-color: var(--jetson-primary) !important;
    color: var(--jetson-primary-foreground) !important;
    border: none !important;
}

.btn-primary:hover,
.button-primary:hover {
    background-color: #27272a !important;
    transform: translateY(-1px);
}

.btn-secondary,
.button-secondary {
    background-color: var(--jetson-muted) !important;
    color: var(--jetson-foreground) !important;
    border: 1px solid var(--jetson-border) !important;
}

.btn-secondary:hover,
.button-secondary:hover {
    background-color: var(--jetson-border) !important;
}

/* ==========================================================================
   CALLOUTS & ALERTS
   ========================================================================== */

.callout,
.alert,
.note,
.warning,
.info {
    border-radius: var(--radius) !important;
    padding: 1rem 1.25rem !important;
    margin: 1.5rem 0 !important;
    border-left-width: 4px !important;
    border-left-style: solid !important;
}

.callout.info,
.alert-info,
.note {
    background-color: rgba(52, 152, 219, 0.1) !important;
    border-left-color: var(--jetson-blue) !important;
}

.callout.warning,
.alert-warning {
    background-color: rgba(230, 126, 34, 0.1) !important;
    border-left-color: var(--jetson-orange) !important;
}

.callout.success,
.alert-success {
    background-color: rgba(46, 204, 113, 0.1) !important;
    border-left-color: var(--jetson-green) !important;
}

.callout.danger,
.alert-danger,
.callout.error {
    background-color: rgba(231, 76, 60, 0.1) !important;
    border-left-color: #e74c3c !important;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer,
.footer,
#footer {
    background-color: var(--jetson-card) !important;
    border-top: 1px solid var(--jetson-border) !important;
    padding: 2rem !important;
}

footer a,
.footer a {
    color: var(--jetson-muted-foreground) !important;
    transition: color 0.2s ease;
}

footer a:hover,
.footer a:hover {
    color: var(--jetson-foreground) !important;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    #docsSearch {
        padding: 2rem 1rem !important;
    }

    #docsSearch h1 {
        font-size: 1.5rem !important;
    }

    #fullArticle,
    .article-content {
        padding: 1.5rem !important;
        border-radius: var(--radius) !important;
    }

    #fullArticle h1 {
        font-size: 1.5rem !important;
    }

    #fullArticle h2 {
        font-size: 1.25rem !important;
    }

    .category-list .category,
    .collection {
        padding: 1.25rem !important;
    }
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

/* Focus states for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--jetson-foreground) !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    body {
        background-color: white !important;
    }

    #docsSearch,
    .sidebar,
    footer,
    .breadcrumbs {
        display: none !important;
    }

    #fullArticle {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
}

/* ==========================================================================
   DARK MODE - COMPREHENSIVE ELEMENT SUPPORT
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    /* Global */
    body {
        background-color: var(--jetson-background) !important;
        color: var(--jetson-foreground) !important;
    }

    /* Navbar - inverted in dark mode */
    .navbar,
    .navbar-inner {
        background-color: var(--jetson-primary) !important;
    }

    .navbar .brand {
        color: var(--jetson-primary-foreground) !important;
    }

    .navbar .nav > li > a,
    .navbar a {
        color: var(--jetson-primary-foreground) !important;
    }

    .navbar .nav > li > a:hover,
    .navbar a:hover {
        background-color: rgba(0, 0, 0, 0.2) !important;
    }

    .navbar .dropdown-menu {
        background-color: var(--jetson-card) !important;
        border-color: var(--jetson-border) !important;
    }

    .navbar .dropdown-menu a {
        color: var(--jetson-foreground) !important;
    }

    .navbar .dropdown-menu a:hover {
        background-color: var(--jetson-muted) !important;
    }

    /* Search section */
    #docsSearch {
        background-color: var(--jetson-card) !important;
        border-bottom-color: var(--jetson-border) !important;
    }

    #searchBar .search-query,
    .search-query,
    input[type="search"],
    .docsSearch input {
        background-color: var(--jetson-muted) !important;
        border-color: var(--jetson-border) !important;
        color: var(--jetson-foreground) !important;
    }

    #searchBar .search-query::placeholder,
    .search-query::placeholder,
    input[type="search"]::placeholder {
        color: var(--jetson-muted-foreground) !important;
    }

    #searchBar button,
    .docsSearch button {
        background-color: var(--jetson-primary) !important;
        color: var(--jetson-primary-foreground) !important;
        border-color: var(--jetson-primary) !important;
    }

    #searchBar button:hover,
    .docsSearch button:hover {
        background-color: var(--jetson-hover-muted) !important;
        border-color: var(--jetson-hover-muted) !important;
    }

    /* Search results dropdown */
    #serp-dd,
    .search-results,
    .autocomplete-suggestions {
        background-color: var(--jetson-card) !important;
        border-color: var(--jetson-border) !important;
    }

    /* Category cards */
    .category-list .category,
    .category,
    .collection {
        background-color: var(--jetson-card) !important;
        border-color: var(--jetson-border) !important;
    }

    .twoCol .collection,
    .threeCol .collection {
        background-color: var(--jetson-card) !important;
    }

    /* Article list - keep blue for visibility */
    .most-pop-articles a,
    .article-list a,
    .articleList a {
        color: var(--jetson-blue) !important;
        border-bottom-color: var(--jetson-border) !important;
    }

    /* Sidebar links */
    .sidebar a,
    #sidebar a {
        color: var(--jetson-blue) !important;
    }

    /* Article content */
    #fullArticle,
    .article-content,
    .contentWrapper {
        background-color: var(--jetson-card) !important;
        border-color: var(--jetson-border) !important;
    }

    /* Code blocks */
    #fullArticle code,
    .article-content code {
        background-color: var(--jetson-muted) !important;
        color: var(--jetson-foreground) !important;
    }

    #fullArticle pre,
    .article-content pre {
        background-color: #0d0d0d !important;
        color: #e5e5e5 !important;
        border-color: var(--jetson-border) !important;
    }

    /* Blockquotes */
    #fullArticle blockquote,
    .article-content blockquote {
        background-color: var(--jetson-muted) !important;
        border-left-color: var(--jetson-foreground) !important;
    }

    /* Tables */
    #fullArticle table {
        border-color: var(--jetson-border) !important;
    }

    #fullArticle th {
        background-color: var(--jetson-muted) !important;
        color: var(--jetson-foreground) !important;
        border-bottom-color: var(--jetson-border) !important;
    }

    #fullArticle td {
        color: var(--jetson-foreground) !important;
        border-bottom-color: var(--jetson-border) !important;
    }

    #fullArticle tr:hover {
        background-color: var(--jetson-muted) !important;
    }

    /* Article footer */
    .articleFoot,
    .article-footer {
        border-top-color: var(--jetson-border) !important;
    }

    .helpfulRating,
    .article-rating {
        background-color: var(--jetson-muted) !important;
    }

    /* Sidebar */
    .sidebar,
    #sidebar,
    aside {
        background-color: var(--jetson-card) !important;
        border-color: var(--jetson-border) !important;
    }

    .sidebar a,
    #sidebar a {
        color: var(--jetson-foreground) !important;
    }

    .sidebar a.active,
    #sidebar a.active {
        background-color: var(--jetson-muted) !important;
    }

    /* Breadcrumbs */
    .breadcrumbs a,
    .breadcrumb a {
        color: var(--jetson-muted-foreground) !important;
    }

    /* Buttons */
    .btn-primary,
    .button-primary {
        background-color: var(--jetson-primary) !important;
        color: var(--jetson-primary-foreground) !important;
    }

    .btn-secondary,
    .button-secondary {
        background-color: var(--jetson-secondary) !important;
        color: var(--jetson-secondary-foreground) !important;
        border-color: var(--jetson-border) !important;
    }

    /* Callouts */
    .callout.info,
    .alert-info,
    .note {
        background-color: rgba(93, 173, 226, 0.15) !important;
    }

    .callout.warning,
    .alert-warning {
        background-color: rgba(243, 156, 18, 0.15) !important;
    }

    .callout.success,
    .alert-success {
        background-color: rgba(88, 214, 141, 0.15) !important;
    }

    .callout.danger,
    .alert-danger,
    .callout.error {
        background-color: rgba(231, 76, 60, 0.15) !important;
    }

    /* Footer */
    footer,
    .footer,
    #footer {
        background-color: var(--jetson-card) !important;
        border-top-color: var(--jetson-border) !important;
    }

    footer a,
    .footer a {
        color: var(--jetson-muted-foreground) !important;
    }

    /* Images - add subtle border */
    #fullArticle img,
    .article-content img {
        border-color: var(--jetson-border) !important;
    }
}

/* ==========================================================================
   VIEW TRANSITIONS API - SMOOTH PAGE TRANSITIONS
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 0.1s;
    }
}

/* ==========================================================================
   HIGH CONTRAST & FORCED COLORS MODE
   ========================================================================== */

@media (prefers-contrast: high) {
    .category-list .category,
    .category,
    .collection {
        border-width: 2px !important;
    }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible {
        outline-width: 3px !important;
    }
}

@media (forced-colors: active) {
    .sidebar a.active,
    #sidebar a.active {
        forced-color-adjust: none;
        background-color: Highlight;
        color: HighlightText;
    }
}
