/* Orion Theme Styles - Modular CSS for themes */

/* ===== CONTENT TYPOGRAPHY ===== */
.content h1 {
    font-size: 2rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}
@media (min-width: 640px) {
    .content h1 {
        font-size: 2.5rem;
        margin-bottom: 2rem;
    }
}
@media (min-width: 1024px) {
    .content h1 {
        font-size: 3rem;
    }
}
.dark .content h1 {
    color: #f9fafb;
}

.content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}
@media (min-width: 640px) {
    .content h2 {
        font-size: 1.75rem;
        margin-top: 2.5rem;
        margin-bottom: 1rem;
    }
}
@media (min-width: 1024px) {
    .content h2 {
        font-size: 2rem;
        margin-top: 3rem;
    }
}
.dark .content h2 {
    color: #f3f4f6;
}

.content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}
@media (min-width: 640px) {
    .content h3 {
        font-size: 1.375rem;
        margin-top: 1.75rem;
        margin-bottom: 0.625rem;
    }
}
@media (min-width: 1024px) {
    .content h3 {
        font-size: 1.5rem;
        margin-top: 2rem;
        margin-bottom: 0.75rem;
    }
}
.dark .content h3 {
    color: #e5e7eb;
}

.content p {
    font-size: 1rem;
    color: #6b7280;
    margin-bottom: 1.25rem;
    line-height: 1.7;
}
@media (min-width: 640px) {
    .content p {
        font-size: 1.0625rem;
        margin-bottom: 1.375rem;
    }
}
@media (min-width: 1024px) {
    .content p {
        font-size: 1.125rem;
        margin-bottom: 1.5rem;
    }
}
.dark .content p {
    color: #9ca3af;
}

.content ul {
    font-size: 1rem;
    color: #6b7280;
    margin-bottom: 1.25rem;
    padding-left: 1.25rem;
    line-height: 1.7;
    list-style-type: disc;
}
@media (min-width: 640px) {
    .content ul {
        font-size: 1.0625rem;
        margin-bottom: 1.375rem;
        padding-left: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .content ul {
        font-size: 1.125rem;
        margin-bottom: 1.5rem;
    }
}
.dark .content ul {
    color: #9ca3af;
}

.content ol {
    font-size: 1rem;
    color: #6b7280;
    margin-bottom: 1.25rem;
    padding-left: 1.25rem;
    line-height: 1.7;
    list-style-type: decimal;
}
@media (min-width: 640px) {
    .content ol {
        font-size: 1.0625rem;
        margin-bottom: 1.375rem;
        padding-left: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .content ol {
        font-size: 1.125rem;
        margin-bottom: 1.5rem;
    }
}
.dark .content ol {
    color: #9ca3af;
}

.content li {
    margin-bottom: 0.75rem;
    display: list-item;
}

/* ===== TASK LIST STYLING ===== */
.content .task-list-item {
    list-style-type: none;
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.75rem;
}

.content .task-list-item input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    left: 0;
    top: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--color-primary);
    border-radius: 0.375rem;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dark .content .task-list-item input[type="checkbox"] {
    background: #1f2937;
    border-color: var(--color-primary);
}

.content .task-list-item input[type="checkbox"]:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: scale(1.05);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.content .task-list-item input[type="checkbox"]::after {
    content: "";
    position: absolute;
    left: 0.35rem;
    top: 0.15rem;
    width: 0.375rem;
    height: 0.625rem;
    border: solid white;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.3s ease;
}

.content .task-list-item input[type="checkbox"]:checked::after {
    transform: rotate(45deg) scale(1);
}

.content .task-list-item input[type="checkbox"]:hover {
    border-color: var(--color-secondary);
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), 0.2);
}

.content .task-list-item input[type="checkbox"]:checked:hover {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
}

.content ul.task-list {
    padding-left: 0;
    margin: 1.5rem 0;
}

/* Add subtle animation on check */
@keyframes checkmark {
    0% {
        transform: rotate(45deg) scale(0);
    }
    50% {
        transform: rotate(45deg) scale(1.2);
    }
    100% {
        transform: rotate(45deg) scale(1);
    }
}

.content .task-list-item input[type="checkbox"]:checked::after {
    animation: checkmark 0.3s ease;
}

/* ===== TABLE STYLING ===== */
.content table {
    width: 100%;
    margin: 2rem 0;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    font-size: 0.95rem;
}

.dark .content table {
    background: #1f2937;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.content thead {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

.content thead th {
    padding: 1rem 1.5rem;
    text-align: left;
    font-weight: 700;
    color: var(--color-button-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
    border-bottom: 2px solid var(--color-secondary);
}

.content thead th:first-child {
    padding-left: 2rem;
}

.content thead th:last-child {
    padding-right: 2rem;
}

.content tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid #e5e7eb;
}

.dark .content tbody tr {
    border-bottom: 1px solid #374151;
}

.content tbody tr:last-child {
    border-bottom: none;
}

.content tbody tr:hover {
    background: rgba(var(--color-primary-rgb), 0.05);
    transform: scale(1.01);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.dark .content tbody tr:hover {
    background: rgba(var(--color-primary-rgb), 0.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.content tbody td {
    padding: 1rem 1.5rem;
    color: #4b5563;
    font-weight: 500;
}

.dark .content tbody td {
    color: #d1d5db;
}

.content tbody td:first-child {
    padding-left: 2rem;
    font-weight: 600;
    color: #111827;
}

.dark .content tbody td:first-child {
    color: #f3f4f6;
}

.content tbody td:last-child {
    padding-right: 2rem;
}

/* Alternate row coloring for better readability */
.content tbody tr:nth-child(even) {
    background: rgba(var(--color-primary-rgb), 0.02);
}

.dark .content tbody tr:nth-child(even) {
    background: rgba(var(--color-primary-rgb), 0.05);
}

/* Mobile responsive tables */
@media (max-width: 640px) {
    .content table {
        font-size: 0.75rem;
        margin: 1.5rem 0;
        border-radius: 0.75rem;
    }
    
    .content thead th,
    .content tbody td {
        padding: 0.5rem 0.75rem;
    }
    
    .content thead th:first-child,
    .content tbody td:first-child {
        padding-left: 0.75rem;
    }
    
    .content thead th:last-child,
    .content tbody td:last-child {
        padding-right: 0.75rem;
    }
    
    /* Allow horizontal scroll on mobile */
    .content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .content table {
        font-size: 0.875rem;
    }
    
    .content thead th,
    .content tbody td {
        padding: 0.75rem 1rem;
    }
    
    .content thead th:first-child,
    .content tbody td:first-child {
        padding-left: 1rem;
    }
    
    .content thead th:last-child,
    .content tbody td:last-child {
        padding-right: 1rem;
    }
}

/* Special styling for first column if it contains headers */
.content tbody td strong {
    color: var(--color-primary);
    font-weight: 600;
}

.content ul ul,
.content ol ol,
.content ul ol,
.content ol ul {
    margin-top: 0.75rem;
    margin-bottom: 0;
}

/* ===== LINK STYLING ===== */
/* Style only external links in markdown content paragraphs and lists */
.content p a[href^="http"], .content li a[href^="http"] {
    color: var(--color-button-text);
    font-weight: 600;
    transition: all 200ms ease;
    text-decoration: none;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--color-link-gradient-end) 100%);
    padding: 0.0625rem 0.375rem;
    border-radius: 4px;
    border: 1px solid rgba(var(--primary-color-rgb), 0.3);
    box-shadow: 0 1px 2px rgba(var(--primary-color-rgb), 0.15);
    display: inline-block;
    margin: 0.0625rem 0.125rem;
}

.dark .content p a[href^="http"], .dark .content li a[href^="http"] {
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%) !important;
    color: var(--primary-color) !important;
    border-color: rgba(107, 114, 128, 0.5) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.dark .content p a[href^="http"]:hover, .dark .content li a[href^="http"]:hover {
    background: linear-gradient(135deg, #D97706 0%, #F59E0B 100%) !important;
    color: #111827 !important;
    border-color: rgba(217, 119, 6, 0.5) !important;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3) !important;
}

.content p a[href^="http"]:hover, .content li a[href^="http"]:hover {
    background: linear-gradient(135deg, var(--color-link-gradient-end) 0%, #FFA500 100%);
    border-color: rgba(var(--primary-color-rgb), 0.5);
    box-shadow: 0 2px 6px rgba(var(--primary-color-rgb), 0.3);
    transform: translateY(-1px);
}

/* Active state for better interaction feedback */
.content p a[href^="http"]:active, .content li a[href^="http"]:active {
    transform: translateY(0px);
    box-shadow: 0 1px 2px rgba(var(--primary-color-rgb), 0.4);
}

/* Internal links get subtle styling */
.content p a:not([href^="http"]), .content li a:not([href^="http"]) {
    color: var(--primary-color);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: rgba(var(--primary-color-rgb), 0.5);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
    transition: all 200ms ease;
}

.content p a:not([href^="http"]):hover, .content li a:not([href^="http"]):hover {
    text-decoration-color: #FFBE18;
}

/* Dark mode for internal links */
.dark .content p a:not([href^="http"]), .dark .content li a:not([href^="http"]) {
    color: #fbbf24 !important;
    text-decoration-color: rgba(251, 191, 36, 0.6) !important;
}

.dark .content p a:not([href^="http"]):hover, .dark .content li a:not([href^="http"]):hover {
    color: #f59e0b !important;
    text-decoration-color: #f59e0b !important;
}

/* ===== DARK MODE GENERAL ===== */
.dark {
    background-color: #1a1a1a;
    color: #e5e5e5;
}

.dark .bg-white {
    background-color: #2d2d2d !important;
}

.dark .text-gray-900 {
    color: #e5e5e5 !important;
}

.dark .text-gray-700 {
    color: #a1a1aa !important;
}

.dark .text-gray-600 {
    color: #71717a !important;
}

.dark .text-gray-500 {
    color: #6b7280 !important;
}

.dark .border-gray-200 {
    border-color: #404040 !important;
}

.dark .bg-gray-50 {
    background-color: #374151 !important;
}

.dark .bg-gray-100 {
    background-color: #4b5563 !important;
}

.dark .hover\:bg-gray-50:hover {
    background-color: #374151 !important;
}

.dark .highlight {
    background: #0d1117 !important;
    border-color: #21262d !important;
}

/* ===== CODE STYLING ===== */
/* Inline code styling */
.content code:not(.highlight code) {
    @apply bg-gray-100 px-3 py-1 font-mono text-base text-gray-800;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

/* Hide line number anchors in code blocks */
.content .highlight a[id^="__codelineno"] {
    display: none !important;
}

/* Style for line spans with anchors - make them invisible but functional */
.content .highlight span[id^="__span"] {
    position: relative;
}

.content .highlight span[id^="__span"] a {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    text-decoration: none;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    z-index: 1;
}

/* Reset link styling inside code blocks for any other links */
.content code a:not([id^="__codelineno"]), .content pre a:not([id^="__codelineno"]) {
    color: #2563eb;
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    box-shadow: none;
    transform: none;
}

.content code a:not([id^="__codelineno"]):hover, .content pre a:not([id^="__codelineno"]):hover {
    color: #1e40af;
}

/* Dark mode for links inside code blocks */
.dark .content code a:not([id^="__codelineno"]), .dark .content pre a:not([id^="__codelineno"]) {
    color: #60a5fa !important;
}

.dark .content code a:not([id^="__codelineno"]):hover, .dark .content pre a:not([id^="__codelineno"]):hover {
    color: #93c5fd !important;
}

/* Primary button text colors using CSS variables */
.bg-primary {
    color: var(--color-button-text) !important;
}

.hover\:bg-primary-dark:hover {
    color: var(--color-button-text-hover) !important;
}

/* Inline syntax highlighted code */
.content .inlinehilite {
    background: #f3f4f6;
    padding: 0.25rem 0.5rem;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', monospace;
    font-size: 0.875rem;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}

.dark .content .inlinehilite {
    background: #374151;
    color: #e5e7eb;
    border-color: #4b5563;
}

/* Code blocks - modern GitHub Dark theme */
.content .highlight {
    position: relative;
    margin: 2rem 0;
    overflow: hidden;
    background: #0d1117;
    border: 1px solid #21262d;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.content .highlight pre {
    margin: 0;
    overflow-x: auto;
    background: transparent !important;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', monospace;
    font-size: 14px;
    line-height: 1.6;
    color: #e6edf3;
    padding: 2rem;
}

.content .highlight code {
    background: transparent !important;
    padding: 0;
    color: inherit;
}

/* Language title badge */
.content .highlight .filename {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.75rem 1.25rem;
    background: #21262d;
    color: #7d8590;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', monospace;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom-left-radius: 12px;
    border-top-right-radius: 16px;
    z-index: 10;
}

/* GitHub Dark theme syntax colors */
.content .highlight .hll { background-color: #1f2428; }
.content .highlight .c { color: #8b949e; font-style: italic; } /* Comment */
.content .highlight .err { color: #f85149; } /* Error */
.content .highlight .k { color: #ff7b72; font-weight: bold; } /* Keyword */
.content .highlight .l { color: #a5d6ff; } /* Literal */
.content .highlight .n { color: #e6edf3; } /* Name */
.content .highlight .o { color: #ff7b72; } /* Operator */
.content .highlight .p { color: #e6edf3; } /* Punctuation */
.content .highlight .ch { color: #8b949e; font-style: italic; } /* Comment.Hashbang */
.content .highlight .cm { color: #8b949e; font-style: italic; } /* Comment.Multiline */
.content .highlight .cp { color: #8b949e; font-weight: bold; } /* Comment.Preproc */
.content .highlight .cpf { color: #8b949e; font-style: italic; } /* Comment.PreprocFile */
.content .highlight .c1 { color: #8b949e; font-style: italic; } /* Comment.Single */
.content .highlight .cs { color: #8b949e; font-weight: bold; font-style: italic; } /* Comment.Special */
.content .highlight .gd { color: #ffa198; background-color: #490202; } /* Generic.Deleted */
.content .highlight .ge { font-style: italic; } /* Generic.Emph */
.content .highlight .gr { color: #f85149; } /* Generic.Error */
.content .highlight .gh { color: #79c0ff; font-weight: bold; } /* Generic.Heading */
.content .highlight .gi { color: #56d364; background-color: #0f2419; } /* Generic.Inserted */
.content .highlight .go { color: #8b949e; } /* Generic.Output */
.content .highlight .gp { color: #8b949e; } /* Generic.Prompt */
.content .highlight .gs { font-weight: bold; } /* Generic.Strong */
.content .highlight .gu { color: #79c0ff; } /* Generic.Subheading */
.content .highlight .gt { color: #f85149; } /* Generic.Traceback */
.content .highlight .kc { color: #79c0ff; } /* Keyword.Constant */
.content .highlight .kd { color: #ff7b72; } /* Keyword.Declaration */
.content .highlight .kn { color: #ff7b72; } /* Keyword.Namespace */
.content .highlight .kp { color: #79c0ff; } /* Keyword.Pseudo */
.content .highlight .kr { color: #ff7b72; } /* Keyword.Reserved */
.content .highlight .kt { color: #ff7b72; } /* Keyword.Type */
.content .highlight .ld { color: #a5d6ff; } /* Literal.Date */
.content .highlight .m { color: #a5d6ff; } /* Literal.Number */
.content .highlight .s { color: #a5d6ff; } /* Literal.String */
.content .highlight .na { color: #e6edf3; } /* Name.Attribute */
.content .highlight .nb { color: #ffa657; } /* Name.Builtin */
.content .highlight .nc { color: #ffa657; font-weight: bold; } /* Name.Class */
.content .highlight .no { color: #79c0ff; } /* Name.Constant */
.content .highlight .nd { color: #d2a8ff; } /* Name.Decorator */
.content .highlight .ni { color: #ffa657; } /* Name.Entity */
.content .highlight .ne { color: #ffa657; } /* Name.Exception */
.content .highlight .nf { color: #d2a8ff; } /* Name.Function */
.content .highlight .nl { color: #ffa657; } /* Name.Label */
.content .highlight .nn { color: #ffa657; } /* Name.Namespace */
.content .highlight .nx { color: #e6edf3; } /* Name.Other */
.content .highlight .py { color: #e6edf3; } /* Name.Property */
.content .highlight .nt { color: #7ee787; } /* Name.Tag */
.content .highlight .nv { color: #79c0ff; } /* Name.Variable */
.content .highlight .ow { color: #ff7b72; } /* Operator.Word */
.content .highlight .w { color: #f0f6fc; } /* Text.Whitespace */
.content .highlight .mb { color: #a5d6ff; } /* Literal.Number.Bin */
.content .highlight .mf { color: #a5d6ff; } /* Literal.Number.Float */
.content .highlight .mh { color: #a5d6ff; } /* Literal.Number.Hex */
.content .highlight .mi { color: #a5d6ff; } /* Literal.Number.Integer */
.content .highlight .mo { color: #a5d6ff; } /* Literal.Number.Oct */
.content .highlight .sa { color: #a5d6ff; } /* Literal.String.Affix */
.content .highlight .sb { color: #a5d6ff; } /* Literal.String.Backtick */
.content .highlight .sc { color: #a5d6ff; } /* Literal.String.Char */
.content .highlight .dl { color: #a5d6ff; } /* Literal.String.Delimiter */
.content .highlight .sd { color: #a5d6ff; } /* Literal.String.Doc */
.content .highlight .s2 { color: #a5d6ff; } /* Literal.String.Double */
.content .highlight .se { color: #79c0ff; } /* Literal.String.Escape */
.content .highlight .sh { color: #a5d6ff; } /* Literal.String.Heredoc */
.content .highlight .si { color: #a5d6ff; } /* Literal.String.Interpol */
.content .highlight .sx { color: #a5d6ff; } /* Literal.String.Other */
.content .highlight .sr { color: #7ee787; } /* Literal.String.Regex */
.content .highlight .s1 { color: #a5d6ff; } /* Literal.String.Single */
.content .highlight .ss { color: #a5d6ff; } /* Literal.String.Symbol */
.content .highlight .bp { color: #79c0ff; } /* Name.Builtin.Pseudo */
.content .highlight .fm { color: #d2a8ff; } /* Name.Function.Magic */
.content .highlight .vc { color: #79c0ff; } /* Name.Variable.Class */
.content .highlight .vg { color: #79c0ff; } /* Name.Variable.Global */
.content .highlight .vi { color: #79c0ff; } /* Name.Variable.Instance */
.content .highlight .vm { color: #79c0ff; } /* Name.Variable.Magic */
.content .highlight .il { color: #a5d6ff; } /* Literal.Number.Integer.Long */

/* Line numbers styling */
.content .highlight .linenos {
    background: #0d1117;
    border-right: 1px solid #21262d;
    color: #6e7681;
    padding: 0.5rem;
    user-select: none;
    text-align: right;
}

/* Copy button (if implemented later) */
.content .highlight:hover::after {
    content: "Copy";
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    padding: 0.5rem 0.75rem;
    background: #21262d;
    color: #e6edf3;
    font-size: 12px;
    border-radius: 8px;
    opacity: 0.7;
    pointer-events: none;
    font-weight: 500;
}

.content blockquote {
    @apply border-l-4 border-primary pl-4 my-6 text-gray-600 italic text-base;
}
@media (min-width: 640px) {
    .content blockquote {
        @apply pl-5 my-7 text-lg;
    }
}
@media (min-width: 1024px) {
    .content blockquote {
        @apply pl-6 my-8 text-xl;
    }
}

/* ===== BLOG CARD STYLING ===== */
.blog-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 1.25rem;
    transition: all 300ms ease;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
@media (min-width: 640px) {
    .blog-card {
        border-radius: 20px;
        padding: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .blog-card {
        border-radius: 24px;
        padding: 2rem;
    }
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
    border-color: rgba(var(--primary-color-rgb), 0.2);
}
@media (min-width: 640px) {
    .blog-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2);
    }
}
@media (min-width: 1024px) {
    .blog-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }
}

.blog-card h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.75rem;
    transition: color 200ms ease;
}
@media (min-width: 640px) {
    .blog-card h2 {
        font-size: 1.5rem;
        margin-bottom: 0.875rem;
    }
}
@media (min-width: 1024px) {
    .blog-card h2 {
        font-size: 1.875rem;
        margin-bottom: 1rem;
    }
}

.blog-card h2:hover {
    color: var(--primary-color);
}

/* Dark mode blog card styling */
.dark .blog-card {
    background: #1f2937;
    border-color: #374151;
}

.dark .blog-card:hover {
    border-color: rgba(var(--primary-color-rgb), 0.3);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.dark .blog-card h2 {
    color: #f9fafb;
}

.blog-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.75rem;
    color: #6b7280;
    flex-wrap: wrap;
}
@media (min-width: 640px) {
    .blog-meta {
        gap: 0.75rem;
        margin-bottom: 1.25rem;
        font-size: 0.8125rem;
    }
}
@media (min-width: 1024px) {
    .blog-meta {
        gap: 1rem;
        margin-bottom: 1.5rem;
        font-size: 0.875rem;
    }
}

.dark .blog-meta {
    color: #9ca3af;
}

.blog-meta svg {
    width: 1rem;
    height: 1rem;
}

.read-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--primary-color);
    color: var(--color-button-text);
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    transition: all 200ms ease;
    text-decoration: none !important;
    vertical-align: middle;
    font-size: 0.875rem;
}
@media (min-width: 640px) {
    .read-more-btn {
        gap: 0.625rem;
        padding: 0.625rem 1.25rem;
        font-size: 0.9375rem;
    }
}
@media (min-width: 1024px) {
    .read-more-btn {
        gap: 0.75rem;
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
}

.read-more-btn:hover {
    background: var(--primary-color-dark);
    transform: scale(1.05);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    text-decoration: none !important;
}

.read-more-btn svg {
    flex-shrink: 0;
}

/* Dark mode overrides for inline styled elements */
.dark h1[style*="color: #111827"] {
    color: #f9fafb !important;
}

.dark h2[style*="color: #111827"] {
    color: #f3f4f6 !important;
}

.dark h3[style*="color: #111827"] {
    color: #e5e7eb !important;
}

.dark p[style*="color: #6b7280"] {
    color: #9ca3af !important;
}

.dark [style*="color: #374151"] {
    color: #d1d5db !important;
}

.dark [style*="color: #4b5563"] {
    color: #9ca3af !important;
}

.dark [style*="background: #f9fafb"] {
    background: #1f2937 !important;
}

.dark [style*="border: 1px solid #e5e7eb"],
.dark [style*="border: 2px solid #e5e7eb"] {
    border-color: #374151 !important;
}

.dark [style*="border-bottom: 3px solid #f3f4f6"] {
    border-bottom-color: #374151 !important;
}

.dark time[style*="color: #6b7280"] {
    color: #9ca3af !important;
}

/* ===== MOBILE MENU ANIMATIONS ===== */
#mobile-menu {
    transition: all 300ms ease-in-out;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* Focus and accessibility improvements */
button:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Smooth icon transitions */
#hamburger-icon,
#close-icon {
    transition: all 0.2s ease-in-out;
}

/* ===== TAG STYLING ===== */
.tag {
    display: inline-block !important;
    padding: 0.25rem 0.5rem;
    background: rgba(var(--color-primary-rgb), 0.05);
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0.875rem;
    border: 1px solid rgba(var(--color-primary-rgb), 0.15);
    transition: all 0.2s ease-in-out;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin: 0.25rem 0.25rem 0.25rem 0;
    vertical-align: top;
}

/* Expandable tag container */
.tag-container-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.hidden-tags {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.hidden-tags.show {
    display: flex !important;
}

.hidden-tags.hide {
    display: none !important;
}

/* Expand/collapse button styling */
.tag-expand-btn,
.tag-collapse-btn {
    cursor: pointer;
    border: none;
    background: rgba(var(--color-primary-rgb), 0.08);
    color: var(--color-primary);
    border: 1px solid rgba(var(--color-primary-rgb), 0.25);
    transition: all 0.2s ease-in-out;
}

.tag-expand-btn:hover,
.tag-collapse-btn:hover {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: var(--color-button-text);
    border-color: var(--color-secondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.25);
}

/* Button visibility states - moved to end of file for proper cascade */
.tag svg {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-right: 0.25rem;
    vertical-align: middle;
}

.tag:hover {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: var(--color-button-text);
    border-color: var(--color-secondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.25);
    text-decoration: none;
}

/* Dark mode tag styling */
.dark .tag {
    background: rgba(var(--color-primary-rgb), 0.1);
    color: #d1d5db;
    border-color: rgba(var(--color-primary-rgb), 0.25);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark .tag:hover {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: var(--color-button-text);
    border-color: var(--color-secondary);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.4);
}
.tag-more {
    background: rgba(var(--color-primary-rgb), 0.08);
    color: var(--color-primary);
    border-color: rgba(var(--color-primary-rgb), 0.25);
    cursor: default;
    opacity: 0.8;
}
.dark .tag-more {
    background: rgba(var(--color-primary-rgb), 0.15);
    color: var(--color-primary);
    border-color: rgba(var(--color-primary-rgb), 0.3);
}

.tag-icon {
    width: 0.75rem;
    height: 0.75rem;
    opacity: 0.6;
    flex-shrink: 0;
}

.tag-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow-wrap: break-word;
    flex-direction: row !important;
}

/* Individual blog post tags styling */
.content .post-tags {
    margin-top: 3rem;
    margin-bottom: 2rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.02) 0%, rgba(var(--color-primary-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--color-primary-rgb), 0.2);
    border-radius: 1rem;
    width: 100%;
    overflow: hidden;
}

.dark .content .post-tags {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.05) 0%, rgba(var(--color-primary-rgb), 0.08) 100%);
    border-color: rgba(var(--color-primary-rgb), 0.3);
}

.content .post-tags h4 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.content .post-tags h4::before {
    content: '🏷️';
    font-size: 1rem;
}

.dark .content .post-tags h4 {
    color: var(--color-primary);
}

/* ===== POST NAVIGATION STYLING ===== */
.post-navigation {
    margin-top: 3rem;
    padding-top: 2rem;
}

.nav-post a {
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #fefefe 0%, #f9fafb 100%);
    transition: all 0.3s ease;
    display: block;
    text-decoration: none;
}

.nav-post a:hover {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, #fffbf5 0%, #fef9f3 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.15);
    text-decoration: none;
}

/* Dark mode navigation post styling */
.dark .nav-post a {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    border-color: #374151;
}

.dark .nav-post a:hover {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
    box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.2);
}

.nav-post h5 {
    margin: 0;
    line-height: 1.3;
}

.nav-post p {
    margin: 0;
    font-size: 0.875rem;
}

/* FINAL OVERRIDE: Button visibility rules - must be at end of file for proper cascade */
.tag-collapse-btn {
    display: none !important;
}

.tag-expand-btn {
    display: inline-block !important;
}

.tag-expand-btn.hidden {
    display: none !important;
}

.tag-collapse-btn.visible {
    display: inline-block !important;
}