/* ─── Google Fonts ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');
@import url('./theme-colors.css');

/* ─── Theme tokens ──────────────────────────────────────────────── */
/* Use existing theme variables from main.min.css - automatically switches with theme */
:root {
    --rs-bg: var(--base);
    --rs-surface: var(--base-tint);
    --rs-surface-hover: var(--base-shade);
    --rs-border: var(--base-shade);
    --rs-text-primary: var(--t-bright);
    --rs-text-secondary: var(--t-muted);
    --rs-accent: var(--accent);
    --rs-accent-soft: rgba(var(--accent-rgb, 2, 115, 94), 0.1);
    --rs-accent-hover: var(--accent);
    --rs-tag-bg: var(--base-shade);
    --rs-tag-text: var(--t-medium);
    --rs-filter-active: var(--accent);
    --rs-filter-text: #ffffff;
    --rs-filter-idle: var(--base-shade);
    --rs-filter-idle-text: var(--t-medium);
    --rs-shadow: 0 2px 12px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04);
    --rs-shadow-hover: 0 8px 32px rgba(0, 0, 0, .10), 0 2px 8px rgba(0, 0, 0, .06);
    --rs-input-bg: var(--base-tint);
    --rs-input-border: var(--base-shade);
    --rs-sidebar-bg: var(--base-tint);
    --rs-icon-ring: rgba(var(--accent-rgb, 2, 115, 94), 0.1);
}

/* Dark mode shadow adjustments */
[data-theme="dark"],
[color-scheme="dark"],
.dark,
body.dark-mode {
    --rs-shadow: 0 2px 12px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
    --rs-shadow-hover: 0 8px 32px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .4);
    --rs-icon-ring: rgba(var(--accent-rgb, 2, 115, 94), 0.15);
}

/* ─── Remove spacing from page header ───────────────────────────── */
.mxd-section-inner-headline.padding-headline-pre-block {
    padding-bottom: 5px !important;
    margin-bottom: 10px !important;
}

/* Remove spacing between page header and services/resources section */
.mxd-section-inner-headline+#services-section,
.mxd-section-inner-headline~#services-section,
.mxd-section-inner-headline+#resources-section,
.mxd-section-inner-headline~#resources-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ─── Dark Mode for Header ──────────────────────────────────────── */
[data-theme="dark"] #header,
[data-theme="dark"] .mxd-header,
[color-scheme="dark"] #header,
[color-scheme="dark"] .mxd-header,
.dark #header,
.dark .mxd-header,
body.dark-mode #header,
body.dark-mode .mxd-header {
    background: var(--base) !important;
    background-color: var(--base) !important;
    color: var(--t-bright) !important;
    border-bottom: 1px solid var(--base-shade) !important;
}

[data-theme="dark"] .mxd-header *,
[color-scheme="dark"] .mxd-header *,
.dark .mxd-header *,
body.dark-mode .mxd-header * {
    color: var(--t-bright) !important;
}

[data-theme="dark"] .mxd-logo__text,
[color-scheme="dark"] .mxd-logo__text,
.dark .mxd-logo__text,
body.dark-mode .mxd-logo__text {
    color: var(--t-bright) !important;
}

[data-theme="dark"] .mxd-header__logo,
[data-theme="dark"] .mxd-header__controls,
[color-scheme="dark"] .mxd-header__logo,
[color-scheme="dark"] .mxd-header__controls,
.dark .mxd-header__logo,
.dark .mxd-header__controls,
body.dark-mode .mxd-header__logo,
body.dark-mode .mxd-header__controls {
    color: var(--t-bright) !important;
}

[data-theme="dark"] .mxd-header .btn,
[color-scheme="dark"] .mxd-header .btn,
.dark .mxd-header .btn,
body.dark-mode .mxd-header .btn {
    color: var(--t-bright) !important;
    border-color: var(--t-bright) !important;
}

/* ─── Dark Mode for Page Header ────────────────────────────────── */
[data-theme="dark"] .mxd-section-inner-headline,
[color-scheme="dark"] .mxd-section-inner-headline,
.dark .mxd-section-inner-headline,
body.dark-mode .mxd-section-inner-headline {
    background: var(--base) !important;
    color: var(--t-bright) !important;
}

[data-theme="dark"] .mxd-section-inner-headline *,
[color-scheme="dark"] .mxd-section-inner-headline *,
.dark .mxd-section-inner-headline *,
body.dark-mode .mxd-section-inner-headline * {
    color: var(--t-bright) !important;
}

[data-theme="dark"] .mxd-section-inner-headline h1,
[data-theme="dark"] .mxd-section-inner-headline h2,
[data-theme="dark"] .mxd-section-inner-headline h3,
[color-scheme="dark"] .mxd-section-inner-headline h1,
[color-scheme="dark"] .mxd-section-inner-headline h2,
[color-scheme="dark"] .mxd-section-inner-headline h3,
.dark .mxd-section-inner-headline h1,
.dark .mxd-section-inner-headline h2,
.dark .mxd-section-inner-headline h3,
body.dark-mode .mxd-section-inner-headline h1,
body.dark-mode .mxd-section-inner-headline h2,
body.dark-mode .mxd-section-inner-headline h3 {
    color: var(--t-bright) !important;
}

/* Dark mode for page sections (bottom sections) */
[data-theme="dark"] .mxd-section,
[color-scheme="dark"] .mxd-section,
.dark .mxd-section,
body.dark-mode .mxd-section {
    background: var(--base) !important;
    color: var(--t-bright) !important;
}

[data-theme="dark"] .mxd-section *,
[color-scheme="dark"] .mxd-section *,
.dark .mxd-section *,
body.dark-mode .mxd-section * {
    color: var(--t-bright) !important;
}

[data-theme="dark"] .mxd-section h1,
[data-theme="dark"] .mxd-section h2,
[data-theme="dark"] .mxd-section h3,
[data-theme="dark"] .mxd-section h4,
[color-scheme="dark"] .mxd-section h1,
[color-scheme="dark"] .mxd-section h2,
[color-scheme="dark"] .mxd-section h3,
[color-scheme="dark"] .mxd-section h4,
.dark .mxd-section h1,
.dark .mxd-section h2,
.dark .mxd-section h3,
.dark .mxd-section h4,
body.dark-mode .mxd-section h1,
body.dark-mode .mxd-section h2,
body.dark-mode .mxd-section h3,
body.dark-mode .mxd-section h4 {
    color: var(--t-bright) !important;
}

/* ─── Dark Mode for Tech Stack Section (Our Stacks) ────────────── */
[data-theme="dark"] .mxd-tech-stack-cards,
[data-theme="dark"] .mxd-tech-stack-grid,
[data-theme="dark"] .mxd-tech-stack-logos,
.dark .mxd-tech-stack-cards,
.dark .mxd-tech-stack-grid,
.dark .mxd-tech-stack-logos,
body.dark-mode .mxd-tech-stack-cards,
body.dark-mode .mxd-tech-stack-grid,
body.dark-mode .mxd-tech-stack-logos {
    background: transparent !important;
}

[data-theme="dark"] .mxd-tech-stack-cards__inner,
[data-theme="dark"] .mxd-tech-stack-cards__inner-v2,
[data-theme="dark"] .mxd-tech-stack-grid__inner,
[data-theme="dark"] .mxd-tech-stack-logos__inner,
[color-scheme="dark"] .mxd-tech-stack-cards__inner,
[color-scheme="dark"] .mxd-tech-stack-cards__inner-v2,
[color-scheme="dark"] .mxd-tech-stack-grid__inner,
[color-scheme="dark"] .mxd-tech-stack-logos__inner,
.dark .mxd-tech-stack-cards__inner,
.dark .mxd-tech-stack-cards__inner-v2,
.dark .mxd-tech-stack-grid__inner,
.dark .mxd-tech-stack-logos__inner,
body.dark-mode .mxd-tech-stack-cards__inner,
body.dark-mode .mxd-tech-stack-cards__inner-v2,
body.dark-mode .mxd-tech-stack-grid__inner,
body.dark-mode .mxd-tech-stack-logos__inner {
    background: var(--base-tint) !important;
    background-color: var(--base-tint) !important;
    border: 1px solid var(--base-shade) !important;
    border-color: var(--base-shade) !important;
    color: var(--t-bright) !important;
}

[data-theme="dark"] .mxd-tech-stack-cards__logo,
[data-theme="dark"] .mxd-tech-stack-cards__icon,
[data-theme="dark"] .mxd-tech-stack-grid__logo,
[data-theme="dark"] .mxd-tech-stack-logos__logo,
.dark .mxd-tech-stack-cards__logo,
.dark .mxd-tech-stack-cards__icon,
.dark .mxd-tech-stack-grid__logo,
.dark .mxd-tech-stack-logos__logo,
body.dark-mode .mxd-tech-stack-cards__logo,
body.dark-mode .mxd-tech-stack-cards__icon,
body.dark-mode .mxd-tech-stack-grid__logo,
body.dark-mode .mxd-tech-stack-logos__logo {
    filter: brightness(1.1) !important;
}

[data-theme="dark"] .mxd-tech-stack-cards__title,
[data-theme="dark"] .mxd-tech-stack-grid__title,
[color-scheme="dark"] .mxd-tech-stack-cards__title,
[color-scheme="dark"] .mxd-tech-stack-grid__title,
.dark .mxd-tech-stack-cards__title,
.dark .mxd-tech-stack-grid__title,
body.dark-mode .mxd-tech-stack-cards__title,
body.dark-mode .mxd-tech-stack-grid__title {
    color: var(--t-bright) !important;
}

[data-theme="dark"] .mxd-tech-stack-cards__title .t-bright,
[data-theme="dark"] .mxd-tech-stack-cards__title .t-caption,
[data-theme="dark"] .mxd-tech-stack-grid__title .t-bright,
[data-theme="dark"] .mxd-tech-stack-grid__title .t-caption,
[color-scheme="dark"] .mxd-tech-stack-cards__title .t-bright,
[color-scheme="dark"] .mxd-tech-stack-cards__title .t-caption,
[color-scheme="dark"] .mxd-tech-stack-grid__title .t-bright,
[color-scheme="dark"] .mxd-tech-stack-grid__title .t-caption,
.dark .mxd-tech-stack-cards__title .t-bright,
.dark .mxd-tech-stack-cards__title .t-caption,
.dark .mxd-tech-stack-grid__title .t-bright,
.dark .mxd-tech-stack-grid__title .t-caption,
body.dark-mode .mxd-tech-stack-cards__title .t-bright,
body.dark-mode .mxd-tech-stack-cards__title .t-caption,
body.dark-mode .mxd-tech-stack-grid__title .t-bright,
body.dark-mode .mxd-tech-stack-grid__title .t-caption {
    color: var(--t-bright) !important;
}

[data-theme="dark"] .mxd-section-title,
[color-scheme="dark"] .mxd-section-title,
.dark .mxd-section-title,
body.dark-mode .mxd-section-title {
    background: var(--base) !important;
    background-color: var(--base) !important;
    color: var(--t-bright) !important;
}

[data-theme="dark"] .mxd-section-title *,
[color-scheme="dark"] .mxd-section-title *,
.dark .mxd-section-title *,
body.dark-mode .mxd-section-title * {
    color: var(--t-bright) !important;
}

[data-theme="dark"] .mxd-section-title h2,
[data-theme="dark"] .mxd-section-title h1,
[data-theme="dark"] .mxd-section-title h3,
[color-scheme="dark"] .mxd-section-title h2,
[color-scheme="dark"] .mxd-section-title h1,
[color-scheme="dark"] .mxd-section-title h3,
.dark .mxd-section-title h2,
.dark .mxd-section-title h1,
.dark .mxd-section-title h3,
body.dark-mode .mxd-section-title h2,
body.dark-mode .mxd-section-title h1,
body.dark-mode .mxd-section-title h3 {
    color: var(--t-bright) !important;
}

[data-theme="dark"] .mxd-section-title__title,
[color-scheme="dark"] .mxd-section-title__title,
.dark .mxd-section-title__title,
body.dark-mode .mxd-section-title__title {
    color: var(--t-bright) !important;
}

[data-theme="dark"] .mxd-section-title__title *,
[color-scheme="dark"] .mxd-section-title__title *,
.dark .mxd-section-title__title *,
body.dark-mode .mxd-section-title__title * {
    color: var(--t-bright) !important;
}

[data-theme="dark"] .mxd-pinned-universal,
[color-scheme="dark"] .mxd-pinned-universal,
.dark .mxd-pinned-universal,
body.dark-mode .mxd-pinned-universal {
    background: var(--base) !important;
}

[data-theme="dark"] .mxd-pinned-universal__static,
[data-theme="dark"] .mxd-pinned-universal__scroll,
[color-scheme="dark"] .mxd-pinned-universal__static,
[color-scheme="dark"] .mxd-pinned-universal__scroll,
.dark .mxd-pinned-universal__static,
.dark .mxd-pinned-universal__scroll,
body.dark-mode .mxd-pinned-universal__static,
body.dark-mode .mxd-pinned-universal__scroll {
    background: var(--base) !important;
    color: var(--t-bright) !important;
}

/* Dark mode for container and block elements */
[data-theme="dark"] .mxd-container,
[data-theme="dark"] .mxd-block,
[color-scheme="dark"] .mxd-container,
[color-scheme="dark"] .mxd-block,
.dark .mxd-container,
.dark .mxd-block,
body.dark-mode .mxd-container,
body.dark-mode .mxd-block {
    background: var(--base) !important;
    background-color: var(--base) !important;
    color: var(--t-bright) !important;
}

[data-theme="dark"] .mxd-container *,
[data-theme="dark"] .mxd-block *,
[color-scheme="dark"] .mxd-container *,
[color-scheme="dark"] .mxd-block *,
.dark .mxd-container *,
.dark .mxd-block *,
body.dark-mode .mxd-container *,
body.dark-mode .mxd-block * {
    color: var(--t-bright) !important;
}

/* Dark mode for reveal-type and other text elements */
[data-theme="dark"] .reveal-type,
[color-scheme="dark"] .reveal-type,
.dark .reveal-type,
body.dark-mode .reveal-type {
    color: var(--t-bright) !important;
}

[data-theme="dark"] .reveal-type *,
[color-scheme="dark"] .reveal-type *,
.dark .reveal-type *,
body.dark-mode .reveal-type * {
    color: var(--t-bright) !important;
}

/* Dark mode for grid container */
[data-theme="dark"] .grid-container,
[color-scheme="dark"] .grid-container,
.dark .grid-container,
body.dark-mode .grid-container {
    background: var(--base) !important;
    background-color: var(--base) !important;
}

/* Dark mode for pinned universal section */
[data-theme="dark"] .mxd-pinned-universal__static-inner,
[data-theme="dark"] .mxd-pinned-universal__scroll-inner,
[color-scheme="dark"] .mxd-pinned-universal__static-inner,
[color-scheme="dark"] .mxd-pinned-universal__scroll-inner,
.dark .mxd-pinned-universal__static-inner,
.dark .mxd-pinned-universal__scroll-inner,
body.dark-mode .mxd-pinned-universal__static-inner,
body.dark-mode .mxd-pinned-universal__scroll-inner {
    background: var(--base) !important;
    background-color: var(--base) !important;
    color: var(--t-bright) !important;
}

/* Ensure all paragraph and text elements in dark mode */
[data-theme="dark"] .mxd-section p,
[data-theme="dark"] .mxd-section span,
[data-theme="dark"] .mxd-section div,
[color-scheme="dark"] .mxd-section p,
[color-scheme="dark"] .mxd-section span,
[color-scheme="dark"] .mxd-section div,
.dark .mxd-section p,
.dark .mxd-section span,
.dark .mxd-section div,
body.dark-mode .mxd-section p,
body.dark-mode .mxd-section span,
body.dark-mode .mxd-section div {
    color: var(--t-bright) !important;
}

/* Dark mode for card split title */
[data-theme="dark"] .card-split-title,
[color-scheme="dark"] .card-split-title,
.dark .card-split-title,
body.dark-mode .card-split-title {
    color: var(--t-bright) !important;
}

[data-theme="dark"] .card-split-title *,
[color-scheme="dark"] .card-split-title *,
.dark .card-split-title *,
body.dark-mode .card-split-title * {
    color: var(--t-bright) !important;
}

/* ─── Section shell ─────────────────────────────────────────────── */
#services-section,
#resources-section {
    background: var(--rs-bg);
    font-family: 'DM Sans', sans-serif;
    padding: 0 20px 100px;
    margin-top: 0;
    /* Removed top padding */
    transition: background .3s ease, color .3s ease, background-color .3s ease;
    color: var(--rs-text-primary);
}

/* Sections automatically use theme variables - no override needed */

@media (max-width: 600px) {

    #services-section,
    #resources-section {
        padding: 0 16px 64px;
        /* Removed top padding */
    }
}

.rs-container {
    max-width: 1160px;
    margin: 0 auto;
}

/* ─── Heading ───────────────────────────────────────────────────── */
.rs-heading {
    text-align: center;
    margin-bottom: 48px;
    padding-top: 0;
    margin-top: 0;
}

.rs-heading h2 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: var(--rs-text-primary);
    margin: 0 0 14px;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.rs-heading p {
    color: var(--rs-text-secondary);
    font-size: 1.15rem;
    /* Increased from 1.05rem */
    font-weight: 300;
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ─── Search + category bar ─────────────────────────────────────── */
.rs-toolbar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.rs-search-wrap {
    flex: 1 1 200px;
    min-width: 0;
    position: relative;
}

.rs-select-wrap {
    position: relative;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .rs-toolbar {
        flex-wrap: wrap;
    }

    .rs-search-wrap {
        flex: 1 1 100%;
    }

    .rs-select-wrap {
        flex: 1 1 auto;
    }

    .rs-clear-btn {
        flex: 0 0 auto;
    }
}

.rs-search-wrap svg {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--rs-text-secondary);
    pointer-events: none;
    width: 18px;
    /* Increased size */
    height: 18px;
    transition: color .3s ease;
}

.rs-search-wrap input {
    width: 100%;
    padding: 15px 16px 15px 50px;
    /* Increased padding and left padding for larger icon */
    border: 1.5px solid var(--rs-input-border);
    border-radius: 12px;
    background: var(--rs-input-bg);
    color: var(--rs-text-primary);
    font-family: 'DM Sans', sans-serif;
    font-size: 1.05rem;
    /* Increased from .95rem */
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .3s ease, color .3s ease;
    box-sizing: border-box;
}

.rs-search-wrap input::placeholder {
    color: var(--rs-text-secondary);
    font-size: 1.05rem;
    /* Increased placeholder text */
}

.rs-search-wrap input:focus {
    border-color: var(--rs-accent);
    box-shadow: 0 0 0 3px var(--rs-accent-soft);
}

.rs-select-wrap select {
    appearance: none;
    padding: 15px 44px 15px 18px;
    /* Increased padding */
    border: 1.5px solid var(--rs-input-border);
    border-radius: 12px;
    background: var(--rs-input-bg);
    color: var(--rs-text-primary);
    font-family: 'DM Sans', sans-serif;
    font-size: 1.05rem;
    /* Increased from .95rem */
    outline: none;
    cursor: pointer;
    transition: border-color .2s, background .3s ease, color .3s ease;
    width: 100%;
}

.rs-select-wrap select:focus {
    border-color: var(--rs-accent);
}

.rs-select-wrap::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    /* Increased size */
    height: 7px;
    background: var(--rs-text-secondary);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    pointer-events: none;
}

.rs-clear-btn {
    padding: 15px 24px;
    /* Increased padding */
    border: 1.5px solid var(--rs-input-border);
    border-radius: 12px;
    background: var(--rs-input-bg);
    color: var(--rs-text-primary);
    font-family: 'DM Sans', sans-serif;
    font-size: 1.05rem;
    /* Increased from .95rem */
    cursor: pointer;
    transition: all .2s, background .3s ease, color .3s ease, border-color .3s ease;
    white-space: nowrap;
    font-weight: 500;
    /* Added weight */
}

.rs-clear-btn:hover {
    border-color: var(--rs-accent);
    color: var(--rs-accent);
}

/* ─── Pill tabs ─────────────────────────────────────────────────── */
.rs-tabs-wrap {
    position: relative;
    margin-bottom: 36px;
}

.rs-tabs-wrap::after {
    content: '';
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right, transparent, var(--rs-bg));
    pointer-events: none;
    border-radius: 0 999px 999px 0;
}

@media (max-width: 840px) {
    .rs-tabs-wrap::after {
        display: block;
    }
}

.rs-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.rs-tabs::-webkit-scrollbar {
    display: none;
}

.rs-tab {
    padding: 10px 20px;
    /* Increased padding */
    border-radius: 999px;
    border: 1.5px solid var(--rs-filter-idle);
    background: var(--rs-filter-idle);
    color: var(--rs-filter-idle-text);
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    /* Increased from .875rem */
    font-weight: 500;
    cursor: pointer;
    transition: all .2s, background .3s ease, color .3s ease, border-color .3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.rs-tab:hover {
    border-color: var(--rs-accent);
    color: var(--rs-accent);
}

.rs-tab.active {
    background: var(--rs-filter-active);
    border-color: var(--rs-filter-active);
    color: var(--rs-filter-text);
}

.rs-tab .rs-tab-count {
    background: rgba(255, 255, 255, .25);
    color: inherit;
    font-size: .85rem;
    /* Increased from .75rem */
    padding: 2px 8px;
    /* Increased padding */
    border-radius: 999px;
    font-weight: 600;
}

.rs-tab.active .rs-tab-count {
    background: rgba(255, 255, 255, .3);
}

.rs-tab:not(.active) .rs-tab-count {
    background: var(--rs-border);
    color: var(--rs-text-secondary);
}

/* ─── Body layout: sidebar + grid ──────────────────────────────── */
.rs-body {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 28px;
    align-items: start;
}

@media (max-width: 840px) {
    .rs-body {
        grid-template-columns: 1fr;
    }

    .rs-sidebar {
        display: none !important;
    }
}

/* ─── Sidebar ───────────────────────────────────────────────────── */
.rs-sidebar {
    background: var(--rs-sidebar-bg);
    border: 1.5px solid var(--rs-border);
    border-radius: 18px;
    padding: 24px 20px;
    box-shadow: var(--rs-shadow);
    position: sticky;
    top: 24px;
    transition: background .3s ease, border-color .3s ease, color .3s ease;
    color: var(--rs-text-primary);
}

.rs-sidebar-title {
    font-family: 'Sora', sans-serif;
    font-size: 1.1rem;
    /* Increased from 1rem */
    font-weight: 700;
    color: var(--rs-text-primary);
    margin: 0 0 16px;
}

.rs-sidebar-category {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.rs-sidebar-category li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 4px;
    /* Increased padding */
    border-bottom: 1px solid var(--rs-border);
    color: var(--rs-text-primary);
    font-size: 1rem;
    /* Increased from .9rem */
    cursor: pointer;
    transition: color .15s, background .3s ease, border-color .3s ease;
}

.rs-sidebar-category li:last-child {
    border-bottom: none;
}

.rs-sidebar-category li:hover {
    color: var(--rs-accent);
}

.rs-sidebar-category li.active {
    color: var(--rs-accent);
    font-weight: 600;
}

.rs-sidebar-count {
    background: var(--rs-tag-bg);
    color: var(--rs-text-secondary);
    border-radius: 6px;
    padding: 3px 9px;
    /* Increased padding */
    font-size: .85rem;
    /* Increased from .75rem */
    font-weight: 500;
}

/* ─── Cards grid ────────────────────────────────────────────────── */
.rs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (max-width: 580px) {
    .rs-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── Card ──────────────────────────────────────────────────────── */
.rs-card {
    background: var(--rs-surface);
    border: 1.5px solid var(--rs-border);
    border-radius: 18px;
    padding: 28px 26px 24px;
    /* Increased padding */
    box-shadow: var(--rs-shadow);
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Increased gap */
    transition: box-shadow .25s, transform .25s, border-color .25s, opacity .3s, background .3s ease, color .3s ease;
    animation: rsCardIn .4s ease both;
    cursor: default;
    color: var(--rs-text-primary);
}

.rs-card:hover {
    box-shadow: var(--rs-shadow-hover);
    transform: translateY(-3px);
    border-color: var(--rs-accent);
}

.rs-card.hidden {
    display: none;
}

@keyframes rsCardIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rs-icon {
    width: 56px;
    /* Increased from 52px */
    height: 56px;
    border-radius: 14px;
    background: var(--rs-icon-ring);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    /* Increased from 1.5rem */
    flex-shrink: 0;
    margin-bottom: 4px;
}

.rs-card-title {
    font-family: 'Sora', sans-serif;
    font-size: 1.2rem;
    /* Increased from 1.05rem */
    font-weight: 700;
    color: var(--rs-text-primary);
    line-height: 1.3;
    /* Increased from 1.25 */
    margin: 0;
}

.rs-card-sub {
    font-size: .95rem;
    /* Increased from .8rem */
    color: var(--rs-text-secondary);
    font-weight: 300;
    margin: -4px 0 4px;
    /* Adjusted margin */
}

.rs-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rs-tag {
    background: var(--rs-tag-bg);
    color: var(--rs-tag-text);
    font-size: .85rem;
    /* Increased from .75rem */
    font-weight: 500;
    padding: 5px 12px;
    /* Increased padding */
    border-radius: 999px;
    transition: background .2s, color .2s;
}

.rs-card:hover .rs-tag {
    background: var(--rs-accent-soft);
    color: var(--rs-accent);
}

.rs-card-desc {
    font-size: 1rem;
    /* Increased from .875rem */
    color: var(--rs-text-secondary);
    line-height: 1.6;
    /* Increased from 1.55 */
    margin: 0;
    flex: 1;
}

/* ─── Button styling for service cards ──────────────────────────── */
.rs-card .btn {
    align-self: flex-start;
    margin-top: 8px;
}

.rs-card .btn-default {
    font-size: 1rem;
    /* Match increased text size */
}

/* Update button style to match design - lighter color with reduced height */
.rs-card .btn-default,
.rs-card .btn.btn-default {
    background: var(--t-bright) !important;
    background-color: var(--t-bright) !important;
    color: var(--base) !important;
    border: 1.5px solid var(--t-bright) !important;
    border-radius: 8px !important;
    padding: 2px 20px !important;
    height: auto !important;
    min-height: 30px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    transition: all .2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.rs-card .btn-default:hover,
.rs-card .btn.btn-default:hover {
    background: var(--base) !important;
    background-color: var(--base) !important;
    color: var(--t-bright) !important;
    border-color: var(--t-bright) !important;
    transform: translateY(-1px) !important;
}

.rs-card .btn-default .btn-caption,
.rs-card .btn.btn-default .btn-caption {
    color: inherit !important;
    font-size: inherit !important;
}

.rs-card .btn-default i,
.rs-card .btn.btn-default i {
    color: inherit !important;
    font-size: 0.95rem !important;
}

/* Dark mode button adjustments - lighter gray instead of black */
[data-theme="dark"] .rs-card .btn-default,
[color-scheme="dark"] .rs-card .btn-default,
.dark .rs-card .btn-default,
body.dark-mode .rs-card .btn-default,
[data-theme="dark"] .rs-card .btn.btn-default,
[color-scheme="dark"] .rs-card .btn.btn-default,
.dark .rs-card .btn.btn-default,
body.dark-mode .rs-card .btn.btn-default {
    background: #333333 !important;
    background-color: #333333 !important;
    color: #FFFFFF !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .rs-card .btn-default:hover,
[color-scheme="dark"] .rs-card .btn-default:hover,
.dark .rs-card .btn-default:hover,
body.dark-mode .rs-card .btn-default:hover,
[data-theme="dark"] .rs-card .btn.btn-default:hover,
[color-scheme="dark"] .rs-card .btn.btn-default:hover,
.dark .rs-card .btn.btn-default:hover,
body.dark-mode .rs-card .btn.btn-default:hover {
    background: #555555 !important;
    background-color: #555555 !important;
    color: #FFFFFF !important;
    border-color: #555555 !important;
}

/* ─── Empty state ──────────────────────────────────────────────── */
.rs-empty {
    grid-column: 1/-1;
    text-align: center;
    padding: 60px 20px;
    color: var(--rs-text-secondary);
    display: none;
}

.rs-empty.visible {
    display: block;
}

.rs-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.rs-empty h3 {
    font-family: 'Sora', sans-serif;
    font-size: 1.2rem;
    /* Increased from 1.1rem */
    color: var(--rs-text-primary);
    margin: 0 0 8px;
}

.rs-empty p {
    font-size: 1rem;
    /* Increased from .875rem */
    margin: 0;
}

/* ─── Result count ──────────────────────────────────────────────── */
.rs-result-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    font-size: 1rem;
    /* Increased from .85rem */
    color: var(--rs-text-secondary);
    flex-wrap: wrap;
    gap: 8px;
}

.rs-result-count strong {
    color: var(--rs-text-primary);
    font-size: 1.05rem;
    /* Slightly larger */
}

/* ─── Loading indicator ────────────────────────────────────────── */
.rs-loading {
    grid-column: 1/-1;
    text-align: center;
    padding: 60px 20px;
    color: var(--rs-text-secondary);
}

.rs-loading-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid var(--rs-border);
    border-top-color: var(--rs-accent);
    border-radius: 50%;
    animation: rsSpin 0.8s linear infinite;
}

@keyframes rsSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ─── Pagination ──────────────────────────────────────────────── */
.rs-pagination-wrapper {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.rs-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rs-pagination-nav {
    display: flex;
    align-items: center;
}

.rs-pagination-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.rs-pagination-item {
    margin: 0;
}

.rs-pagination-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 16px;
    border: 1.5px solid var(--rs-border);
    border-radius: 10px;
    background: var(--rs-surface);
    color: var(--rs-text-primary);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: all .2s ease, background .3s ease, color .3s ease, border-color .3s ease;
    cursor: pointer;
    user-select: none;
}

.rs-pagination-link[type="button"],
button.rs-pagination-link {
    border: 1.5px solid var(--rs-border);
    background: var(--rs-surface);
    color: var(--rs-text-primary);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0 16px;
    margin: 0;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

button.rs-pagination-link:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.rs-pagination-link:hover:not(.disabled) {
    background: var(--rs-surface-hover);
    border-color: var(--rs-accent);
    color: var(--rs-accent);
    transform: translateY(-1px);
}

.rs-pagination-item.active .rs-pagination-link {
    background: var(--rs-accent);
    border-color: var(--rs-accent);
    color: var(--rs-filter-text);
    font-weight: 600;
}

.rs-pagination-item.disabled .rs-pagination-link {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    background: var(--rs-surface);
    color: var(--rs-text-secondary);
}

.rs-pagination-ellipsis {
    border: none;
    background: transparent;
    cursor: default;
    min-width: auto;
    padding: 0 8px;
    color: var(--rs-text-secondary);
}

.rs-pagination-ellipsis:hover {
    transform: none;
    background: transparent;
    border: none;
    color: var(--rs-text-secondary);
}

.rs-pagination-summary {
    text-align: center;
    color: var(--rs-text-secondary);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5;
}

/* ─── Services/Resources Sections use theme variables ────────────── */
/* Sections automatically adapt to light/dark mode via theme variables */
#services-section,
#resources-section {
    background: var(--rs-bg);
    color: var(--rs-text-primary);
}

/* Ensure all child elements use dark mode colors */
[data-theme="dark"] #services-section .rs-heading,
[data-theme="dark"] #resources-section .rs-heading,
.dark #services-section .rs-heading,
.dark #resources-section .rs-heading,
body.dark-mode #services-section .rs-heading,
body.dark-mode #resources-section .rs-heading {
    color: var(--rs-text-primary) !important;
}

[data-theme="dark"] #services-section .rs-heading h2,
[data-theme="dark"] #resources-section .rs-heading h2,
.dark #services-section .rs-heading h2,
.dark #resources-section .rs-heading h2,
body.dark-mode #services-section .rs-heading h2,
body.dark-mode #resources-section .rs-heading h2 {
    color: var(--rs-text-primary) !important;
}

[data-theme="dark"] #services-section .rs-heading p,
[data-theme="dark"] #resources-section .rs-heading p,
.dark #services-section .rs-heading p,
.dark #resources-section .rs-heading p,
body.dark-mode #services-section .rs-heading p,
body.dark-mode #resources-section .rs-heading p {
    color: var(--rs-text-secondary) !important;
}

/* Dark mode for result bar */
[data-theme="dark"] #services-section .rs-result-bar,
[data-theme="dark"] #resources-section .rs-result-bar,
.dark #services-section .rs-result-bar,
.dark #resources-section .rs-result-bar,
body.dark-mode #services-section .rs-result-bar,
body.dark-mode #resources-section .rs-result-bar {
    color: var(--rs-text-primary) !important;
}

[data-theme="dark"] #services-section .rs-result-bar strong,
[data-theme="dark"] #resources-section .rs-result-bar strong,
.dark #services-section .rs-result-bar strong,
.dark #resources-section .rs-result-bar strong,
body.dark-mode #services-section .rs-result-bar strong,
body.dark-mode #resources-section .rs-result-bar strong {
    color: var(--rs-text-primary) !important;
}

/* Dark mode for page sections wrapper */
[data-theme="dark"] .mxd-section-wrapper,
[color-scheme="dark"] .mxd-section-wrapper,
.dark .mxd-section-wrapper,
body.dark-mode .mxd-section-wrapper {
    background: var(--base) !important;
}

/* Dark mode for container elements */
[data-theme="dark"] #services-section .rs-container,
[data-theme="dark"] #resources-section .rs-container,
.dark #services-section .rs-container,
.dark #resources-section .rs-container,
body.dark-mode #services-section .rs-container,
body.dark-mode #resources-section .rs-container {
    color: var(--rs-text-primary);
}

/* Ensure all elements within services/resources sections use dark mode */
[data-theme="dark"] #services-section .rs-toolbar,
[data-theme="dark"] #resources-section .rs-toolbar,
.dark #services-section .rs-toolbar,
.dark #resources-section .rs-toolbar,
body.dark-mode #services-section .rs-toolbar,
body.dark-mode #resources-section .rs-toolbar {
    color: var(--rs-text-primary);
}

[data-theme="dark"] #services-section .rs-tabs-wrap,
[data-theme="dark"] #resources-section .rs-tabs-wrap,
.dark #services-section .rs-tabs-wrap,
.dark #resources-section .rs-tabs-wrap,
body.dark-mode #services-section .rs-tabs-wrap,
body.dark-mode #resources-section .rs-tabs-wrap {
    color: var(--rs-text-primary);
}

[data-theme="dark"] #services-section .rs-body,
[data-theme="dark"] #resources-section .rs-body,
.dark #services-section .rs-body,
.dark #resources-section .rs-body,
body.dark-mode #services-section .rs-body,
body.dark-mode #resources-section .rs-body {
    color: var(--rs-text-primary);
}

[data-theme="dark"] #services-section .rs-grid,
[data-theme="dark"] #resources-section .rs-grid,
.dark #services-section .rs-grid,
.dark #resources-section .rs-grid,
body.dark-mode #services-section .rs-grid,
body.dark-mode #resources-section .rs-grid {
    color: var(--rs-text-primary);
}

/* Ensure buttons in dark mode are visible */
[data-theme="dark"] .btn,
.dark .btn,
body.dark-mode .btn {
    transition: all .3s ease;
}

/* Dark mode for card descriptions */
[data-theme="dark"] .rs-card-desc,
[color-scheme="dark"] .rs-card-desc,
.dark .rs-card-desc,
body.dark-mode .rs-card-desc {
    color: var(--t-bright) !important;
    color: #FFFFFF !important;
}

/* Dark mode for card subtitles */
[data-theme="dark"] .rs-card-sub,
[color-scheme="dark"] .rs-card-sub,
.dark .rs-card-sub,
body.dark-mode .rs-card-sub {
    color: var(--t-muted) !important;
}

/* Dark mode for icons */
[data-theme="dark"] .rs-icon,
.dark .rs-icon,
body.dark-mode .rs-icon {
    background: var(--rs-icon-ring) !important;
    color: var(--rs-accent) !important;
}

/* Dark mode for select dropdown arrow */
[data-theme="dark"] .rs-select-wrap::after,
[color-scheme="dark"] .rs-select-wrap::after,
.dark .rs-select-wrap::after,
body.dark-mode .rs-select-wrap::after {
    background: var(--t-muted) !important;
}

/* Dark mode for empty state */
[data-theme="dark"] .rs-empty,
[color-scheme="dark"] .rs-empty,
.dark .rs-empty,
body.dark-mode .rs-empty {
    color: var(--t-muted) !important;
}

[data-theme="dark"] .rs-empty h3,
[color-scheme="dark"] .rs-empty h3,
.dark .rs-empty h3,
body.dark-mode .rs-empty h3 {
    color: var(--t-bright) !important;
}

/* Dark mode for loading spinner */
[data-theme="dark"] .rs-loading-spinner,
[color-scheme="dark"] .rs-loading-spinner,
.dark .rs-loading-spinner,
body.dark-mode .rs-loading-spinner {
    border-color: var(--base-shade) !important;
    border-top-color: var(--accent) !important;
}

[data-theme="dark"] .rs-loading,
[color-scheme="dark"] .rs-loading,
.dark .rs-loading,
body.dark-mode .rs-loading {
    color: var(--t-muted) !important;
}

/* Ensure smooth transitions for key elements in dark mode */
[data-theme="dark"] #services-section,
[data-theme="dark"] #resources-section,
[data-theme="dark"] .rs-card,
[data-theme="dark"] .rs-sidebar,
[data-theme="dark"] .rs-heading,
[data-theme="dark"] .mxd-section-inner-headline,
.dark #services-section,
.dark #resources-section,
.dark .rs-card,
.dark .rs-sidebar,
.dark .rs-heading,
.dark .mxd-section-inner-headline,
body.dark-mode #services-section,
body.dark-mode #resources-section,
body.dark-mode .rs-card,
body.dark-mode .rs-sidebar,
body.dark-mode .rs-heading,
body.dark-mode .mxd-section-inner-headline {
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

@media (max-width: 640px) {
    .rs-pagination-wrapper {
        margin-top: 40px;
        gap: 16px;
    }

    .rs-pagination-list {
        gap: 6px;
    }

    .rs-pagination-link {
        min-width: 40px;
        height: 40px;
        padding: 0 12px;
        font-size: 0.875rem;
    }

    .rs-pagination-summary {
        font-size: 0.85rem;
        padding: 0 20px;
    }
}