/* HelpdeskHero - Clean Corporate Professional */
:root {
    /* Colors */
    --color-primary: #1d4ed8;
    --color-primary-hover: #1e40af;
    --color-primary-light: rgba(29, 78, 216, 0.06);
    --color-secondary: #475569;
    --color-accent: #ea580c;
    --color-background: #f9fafb;
    --color-surface: #ffffff;
    --color-text: #111827;
    --color-text-muted: #4b5563;
    --color-border: #d1d5db;

    /* Header */
    --header-bg: #ffffff;
    --header-border: 1px solid #d1d5db;
    --header-shadow: none;
    --header-height: 56px;
    --logo-font-size: 1.125rem;
    --logo-font-weight: 700;

    /* Footer */
    --footer-bg: #1f2937;
    --footer-text: #9ca3af;
    --footer-accent: #ffffff;

    /* Typography */
    --font-family-sans: 'Source Sans 3', system-ui, sans-serif;
    --font-family-heading: Georgia, 'Times New Roman', serif;
    --font-size-base: 0.9375rem;
    --font-weight-heading: 700;
    --line-height-base: 1.6;
    --line-height-heading: 1.25;

    /* Layout */
    --max-width-content: 1140px;
    --border-radius: 0.25rem;
    --border-radius-lg: 0.375rem;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.375rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1.25rem;
    --spacing-xl: 1.75rem;
    --spacing-2xl: 2.5rem;

    /* Cards */
    --card-border: 1px solid #d1d5db;
    --card-shadow: none;
    --card-shadow-hover: none;
    --card-transform-hover: none;
    --card-image-height: 175px;
    --card-padding: 1.25rem;

    /* Decorative */
    --accent-gradient: none;
    --header-decoration: none;
    --code-bg: #1f2937;
    --code-text: #d1d5db;

    /* Shadows */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;

    /* Tags */
    --tag-bg: #f3f4f6;
    --tag-border: 1px solid #d1d5db;
    --tag-radius: 0.25rem;
    --tag-font-size: 0.75rem;

    /* Pagination */
    --pagination-radius: 0.25rem;
    --pagination-active-bg: #1d4ed8;
    --pagination-active-text: #ffffff;

    /* Nav */
    --nav-link-font-weight: 500;
    --nav-link-letter-spacing: 0.01em;
}

/* Card hover - border highlight instead of shadow */
.article-card {
    transition: border-color 0.15s ease;
}
.article-card:hover {
    border-color: #1d4ed8;
}

/* Category with orange accent */
.article-card-category {
    color: #ea580c;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-family: 'Source Sans 3', sans-serif;
}

/* Compact article grid */
.article-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

/* Sidebar with blue top accent */
.sidebar-title,
.category-nav-title {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 2px solid #1d4ed8;
    padding-bottom: 0.5rem;
    color: #374151;
}

/* Orange CTA buttons */
.not-found-link {
    background-color: #ea580c;
    border-radius: 0.25rem;
}
.not-found-link:hover {
    background-color: #c2410c;
}

/* Tag compact style */
.tag-badge {
    font-family: 'Source Sans 3', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.125rem 0.5rem;
}
.tag-badge:hover {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
}

/* Blockquote - clean corporate */
.prose blockquote {
    border-left: 3px solid #1d4ed8;
    background: #f3f4f6;
    font-style: normal;
    border-radius: 0;
}

/* Pagination compact */
.pagination-link {
    min-width: 2rem;
    height: 2rem;
    font-size: 0.8125rem;
}

/* Footer subtle top border */
.site-footer {
    border-top: 3px solid #1d4ed8;
}

/* Language Picker - Compact table rows */
.language-picker-section {
    background: #f9fafb;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    padding: 1.5rem;
    border-top: 3px solid #1d4ed8;
}
.language-picker-title {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #374151;
}
.language-picker-subtitle {
    font-size: 0.8125rem;
}
.language-picker-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0;
}
.language-picker-item {
    border: none;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 0;
    padding: 0.5rem 0.75rem;
    flex-direction: row;
    gap: 0.5rem;
    background: transparent;
    border-left: 3px solid transparent;
}
.language-picker-item:hover {
    background: rgba(29, 78, 216, 0.04);
    border-left-color: #1d4ed8;
    transform: none;
    box-shadow: none;
}
.language-picker-item.active {
    background: rgba(29, 78, 216, 0.08);
    border-left-color: #1d4ed8;
    border-radius: 0;
}
.language-picker-item.active .language-native,
.language-picker-item.active .language-name {
    color: #1d4ed8;
}
.language-picker-item .language-native {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
}
.language-picker-item .language-name {
    font-size: 0.6875rem;
    margin-top: 0;
}