:root {
    --primary-color: #3AABA6;
    --secondary-color: #D9D9D9;
    --text-color: #D9D9D9;
    --background-color: #0F1F2A;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
}

header {
    background-color: var(--background-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    position: sticky;
    top: 0;
    z-index: 100;
}

nav {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
}

.logo svg,
.logo img {
    height: 100px;
    width: auto;
    padding: 0rem;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: bold;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    transition: all 0.3s;
}

.nav-links a:hover, 
.nav-links a.active {
    background-color: var(--primary-color);
    color: var(--background-color);
}

main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 1rem;
    padding-top: 2rem;
}

.collections-posts {
    display: grid;
    gap: 2rem;
}

.collections-posts article, .event-item, .about {
    background: var(--background-color);
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border: 1px solid var(--primary-color);
}

h1, h2, h3 {
    color: var(--primary-color);
}

.event-item time {
    display: inline;
    background: none;
    color: inherit;
    padding: 0;
    margin: 0;
    font-weight: normal;
}

footer {
    background: var(--background-color);
    color: var(--text-color);
    padding: 2rem 0;
    margin-top: 4rem;
    border-top: 1px solid var(--primary-color);
    text-align: center;
}

footer p {
    margin: 0 auto;
    max-width: 800px;
}

.event-item {
    display: flex;
    gap: 2rem;
    transition: transform 0.2s, box-shadow 0.2s;
    padding: 1.5rem;
}

.event-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(58, 171, 166, 0.2);
}

.event-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.event-preview {
    color: var(--secondary-color);
    margin-top: 1rem;
}

.back-button {
    display: inline-block;
    color: var(--primary-color);
    text-decoration: none;
    margin-bottom: 2rem;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s;
}

.back-button:hover {
    border-bottom-color: var(--primary-color);
}

.event-full {
    background: #D9D9D9;
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid rgba(15, 31, 42, 0.1);
}

/* Add these styles for better markdown rendering */
.collections-posts article,
.event-item,
.about,
.event-full {
    background: var(--background-color);
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border: 1px solid var(--primary-color);
}

/* Markdown content styles */
.collections-posts article h1,
.event-item h1,
.about h1,
.event-full h1 {
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    font-size: 2.5rem;
}

.collections-posts article h2,
.event-item h2,
.about h2,
.event-full h2 {
    color: var(--primary-color);
    margin: 2rem 0 1rem;
    font-size: 2rem;
}

.collections-posts article h3,
.event-item h3,
.about h3,
.event-full h3 {
    color: var(--primary-color);
    margin: 0rem 0 0.75rem;
    font-size: 1.5rem;
}

/* Lists */
.collections-posts article ul,
.event-item ul,
.about ul,
.event-full ul,
.collections-posts article ol,
.event-item ol,
.about ol,
.event-full ol {
    margin: 1rem 0;
    padding-left: 2rem;
}

.collections-posts article li,
.event-item li,
.about li,
.event-full li {
    margin: 0.5rem 0;
}

/* Emphasis */
.collections-posts article em,
.event-item em,
.about em,
.event-full em {
    color: var(--primary-color);
    font-style: italic;
}

.collections-posts article strong,
.event-item strong,
.about strong,
.event-full strong {
    color: var(--primary-color);
    font-weight: bold;
}

/* Links */
.collections-posts article a,
.event-item a,
.about a,
.event-full a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s;
}

.collections-posts article a:hover,
.event-item a:hover,
.about a:hover,
.event-full a:hover {
    color: var(--primary-color);
}

/* Code blocks */
.collections-posts article pre,
.event-item pre,
.about pre,
.event-full pre {
    background: var(--primary-color);
    color: var(--background-color);
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    margin: 1rem 0;
}

/* Blockquotes */
.collections-posts article blockquote,
.event-item blockquote,
.about blockquote,
.event-full blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: 1rem;
    margin: 1rem 0;
    color: var(--secondary-color);
    font-style: italic;
}

/* Add these styles for collections posts */
.collections-preview {
    transition: transform 0.2s, box-shadow 0.2s;
}

.collections-preview:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(58, 171, 166, 0.2);
}

.post-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.post-preview {
    color: var(--secondary-color);
    margin-top: 1rem;
}

.post-full {
    background: #D9D9D9;
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid rgba(15, 31, 42, 0.1);
}

/* Update existing styles to include post-full */
.collections-posts article,
.event-item,
.about,
.event-full,
.post-full {
    background: var(--background-color);
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border: 1px solid var(--primary-color);
}

.event-metadata {
    margin: 1rem 0;
    color: var(--secondary-color);
}

.event-detail {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.event-detail svg {
    width: 16px;
    height: 16px;
    color: var(--primary-color);
}

.event-detail time,
.event-detail span {
    font-size: 0.9rem;
}

/* Update logo styles */
.logo a {
    display: block;
    padding: 0;
    background: none !important;
    opacity: 0.8;
    transition: opacity 0.2s, transform 0.2s;
}

.logo a:hover {
    opacity: 1;
    transform: scale(1.05);
    background: none !important;
    color: inherit !important;
}

.logo a.active {
    background: none !important;
    color: inherit !important;
}

/* Remove any background or other highlighting effects */
.logo a:active,
.logo a:focus {
    background: none;
    outline: none;
}

/* Ensure logo doesn't inherit nav link styles */
.logo a {
    padding: 0;
    background: none;
}

.logo a:hover {
    background: none;
    color: inherit;
}

.event-description {
    margin: 1rem 0;
    color: var(--text-color);
    line-height: 1.5;
}

.event-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.tag {
    background: var(--primary-color);
    color: var(--background-color);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.event-title-link {
    color: var(--primary-color);
    text-decoration: none;
    transition: opacity 0.2s;
}

.event-title-link:hover {
    opacity: 0.8;
    text-decoration: none;
}

/* Make sure the title link doesn't inherit other link styles */
.event-item h3 .event-title-link {
    padding: 0;
    background: none;
}

.event-item h3 .event-title-link:hover {
    background: none;
    color: var(--primary-color);
}

.event-image {
    flex: 0 0 300px; /* Fixed width, won't grow or shrink */
    height: 200px; /* Fixed height */
    overflow: hidden;
    border-radius: 8px;
}

.event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-content {
    flex: 1;
    min-width: 0; /* Prevents content from overflowing */
}

/* Add responsive styling */
@media (max-width: 768px) {
    .event-item {
        flex-direction: column;
    }

    .event-image {
        flex: 0 0 200px;
        width: 100%;
    }
}

.page-header {
    margin-bottom: 2rem;
}

.page-header h1 {
    margin-bottom: 1rem;
}

.page-description {
    color: var(--secondary-color);
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 800px;
}

/* About page styles */
.about-container {
    max-width: 800px;
    margin: 0 auto;
}

.about-header {
    text-align: center;
    margin-bottom: 4rem;
}

.about-header .tagline {
    color: var(--primary-color);
    font-size: 1.2rem;
    margin-top: 1rem;
}

.about-section {
    margin-bottom: 3rem;
}

.about-section h2 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

.about-section p {
    color: var(--text-color);
    line-height: 1.8;
    font-size: 1.1rem;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.value-card {
    background: var(--background-color);
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid var(--primary-color);
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(58, 171, 166, 0.2);
}

.value-card svg {
    width: 40px;
    height: 40px;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.value-card h3 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.value-card p {
    color: var(--text-color);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
    .values-grid {
        grid-template-columns: 1fr;
    }
}

.about-logo {
    margin-bottom: 2rem;
}

.about-logo img {
    width: 300px;  /* Adjust this value to your preference */
    height: auto;
    display: block;
    margin: 0 auto;
}

/* FAQ Styles */
.faq-section {
    margin-top: 4rem;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    overflow: hidden;
}

.faq-question {
    width: 100%;
    padding: 1.5rem;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.1rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s;
}

.faq-question:hover {
    background-color: rgba(58, 171, 166, 0.1);
}

.faq-question svg {
    width: 24px;
    height: 24px;
    color: var(--primary-color);
    transition: transform 0.3s;
}

.faq-item.active .faq-question svg {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0 1.5rem;
}

.faq-item.active .faq-answer {
    max-height: 200px; /* Adjust based on content */
    padding-bottom: 1.5rem;
}

.faq-answer p {
    color: var(--primary-color);
    line-height: 1.5;
}

/* Make sure links within FAQ answers are still visible */
.faq-answer a {
    color: var(--text-color);
    text-decoration: underline;
}

.faq-answer a:hover {
    opacity: 0.8;
}

.blogs-posts {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 0rem;
}

.blog-preview {
    border-bottom: 1px solid var(--primary-color);
    padding: 2rem 0;
    transition: transform 0.2s ease;
    background: none;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
}

.blog-preview:first-child {
    padding-top: 0;
}

.blog-preview:last-child {
    border-bottom: none;
}

.blog-preview .post-link {
    display: block;
    text-decoration: none;
}

.blog-preview .post-meta {
    margin-bottom: 1rem;
}

.blog-preview .post-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-color);
    opacity: 0.8;
    font-size: 0.9rem;
}

.blog-preview .post-date i {
    color: var(--primary-color);
    width: 14px;
    height: 14px;
}

.blog-preview h3 {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    color: var(--primary-color);
    transition: color 0.2s ease;
}

.blog-preview .post-description {
    color: var(--text-color);
    opacity: 0.9;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.blog-preview:hover {
    transform: translateX(10px);
    box-shadow: none;
}

.blog-preview:hover h2 {
    color: var(--text-color);
}

/* Blog tags */
.blog-tags {
    display: flex;
    gap: 0.5rem;
}

.blog-tag {
    font-size: 0.8rem;
    padding: 0.25rem 0.75rem;
    background: var(--primary-color);
    color: var(--background-color);
    border-radius: 15px;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.blog-tag:hover {
    opacity: 1;
}

/* Collections Grid Styles */
.collections-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
}

.collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.collection-category {
    margin-bottom: 4rem;
}

.collection-category-header {
    padding: 2rem 1.5rem 1rem;
    text-align: left;
    max-width: 800px;
    margin: 0 auto;
}

.collection-item {
    position: relative;
    background: var(--background-color);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.collection-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.collection-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 1;
}

.collection-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.collection-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: 1rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.collection-item:hover .collection-overlay {
    transform: translateY(0);
}

.collection-item:hover .collection-image {
    transform: scale(1.05);
}

.collection-title {
    color: var(--text-color);
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.collection-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.collection-tag {
    background: var(--primary-color);
    color: var(--background-color);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
}

/* Modal Styles */
.collection-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 31, 42, 0.95); /* Using theme background color with opacity */
    z-index: 1000;
    padding: 2rem;
}

.collection-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--background-color);
    border: 1px solid var(--primary-color);
    border-radius: 12px;
    max-width: 1200px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    color: var(--text-color);
}

.modal-gallery {
    position: relative;
    aspect-ratio: 16/9;
    background: rgba(15, 31, 42, 0.8);
    border-bottom: 1px solid var(--primary-color);
}

.gallery-main {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-main img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--primary-color);
    color: var(--background-color);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 2;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.gallery-nav:hover {
    opacity: 0.8;
}

.gallery-nav.prev { left: 1rem; }
.gallery-nav.next { right: 1rem; }

.gallery-thumbnails {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    overflow-x: auto;
    background: var(--background-color);
    border-bottom: 1px solid var(--primary-color);
}

.thumbnail {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.thumbnail.active {
    opacity: 1;
    border-color: var(--primary-color);
}

.thumbnail:hover {
    opacity: 0.8;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-details {
    padding: 2rem;
}

.modal-details h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.modal-details p {
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.modal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.modal-tag {
    background: var(--primary-color);
    color: var(--background-color);
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.8rem;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.modal-close:hover {
    background: var(--primary-color);
    color: var(--background-color);
}

/* Add responsive styles */
@media (max-width: 768px) {
    .collection-modal {
        padding: 1rem;
    }

    .modal-content {
        width: 95%;
    }

    .gallery-nav {
        width: 32px;
        height: 32px;
        font-size: 1.2rem;
    }

    .thumbnail {
        width: 60px;
        height: 60px;
    }
}

/* Collections Grid Layout */
.collections-masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.collection-item {
    break-inside: avoid;
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.collection-item:hover {
    transform: translateY(-5px);
}

.collection-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 1;
}

.collection-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.collection-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: 1rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.collection-item:hover .collection-overlay {
    transform: translateY(0);
}

.collection-item:hover .collection-image {
    transform: scale(1.05);
}

/* Category Styling */
.collection-category-header {
    padding: 2rem 1.5rem 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--primary-color);
}

.category-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.item-count {
    text-align: center;
    font-size: 0.9rem;
    color: var(--background-color);
    background: var(--primary-color);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.item-count:hover {
    opacity: 1;
}

.category-date {
    display: block;
    font-size: 0.9rem;
    color: var(--text-color);
    margin-top: 0.5rem;
    opacity: 0.8;
}

.collection-category-header p {
    margin: 1rem auto;
    max-width: 600px;
    line-height: 1.6;
}

/* FAQ Styles */
.faq-section {
    margin-top: 4rem;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    overflow: hidden;
}

.faq-question {
    width: 100%;
    padding: 1.5rem;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.1rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s;
}

.faq-question:hover {
    background-color: rgba(58, 171, 166, 0.1);
}

.faq-question svg {
    width: 24px;
    height: 24px;
    color: var(--primary-color);
    transition: transform 0.3s;
}

.faq-item.active .faq-question svg {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0 1.5rem;
}

.faq-item.active .faq-answer {
    max-height: 200px; /* Adjust based on content */
    padding-bottom: 1.5rem;
}

.faq-answer p {
    color: var(--primary-color);
    line-height: 1.5;
}

/* Make sure links within FAQ answers are still visible */
.faq-answer a {
    color: var(--text-color);
    text-decoration: underline;
}

.faq-answer a:hover {
    opacity: 0.8;
}

.blogs-posts {
    display: grid;
    gap: 2rem;
}

.blog-preview {
    background: var(--background-color);
    transition: transform 0.2s, box-shadow 0.2s;
}

.blog-preview:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(58, 171, 166, 0.2);
}

/* Search Styles */
.search-container {
    max-width: 600px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.search-input {
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    color: var(--text-color);
    background: var(--background-color);
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(58, 171, 166, 0.3);
}

.search-input::placeholder {
    color: var(--text-color);
    opacity: 0.6;
}

/* Add this to existing styles for no results */
.no-results {
    text-align: center;
    padding: 2rem;
    color: var(--text-color);
    font-style: italic;
    opacity: 0.8;
}

/* Update the Lucide pen icon size */
svg.lucide.lucide-pen {
    width: 20px;
    height: 20px;
}

/* Markdown Content Styling */
.markdown-content,
.post-full,
.event-full {
    color: var(--text-color);
    line-height: 1.6;
}

.markdown-content h1,
.post-full h1,
.event-full h1 {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin: 2rem 0 1.5rem;
}

.markdown-content h2,
.post-full h2,
.event-full h2 {
    font-size: 2rem;
    color: var(--primary-color);
    margin: 2rem 0 1rem;
}

.markdown-content h3,
.post-full h3,
.event-full h3 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin: 1.5rem 0 1rem;
}

.markdown-content p,
.post-full p,
.event-full p {
    margin: 1rem 0;
    line-height: 1.8;
}

.markdown-content ul,
.markdown-content ol,
.post-full ul,
.post-full ol,
.event-full ul,
.event-full ol {
    margin: 1rem 0;
    padding-left: 2rem;
}

.markdown-content li,
.post-full li,
.event-full li {
    margin: 0.5rem 0;
}

.markdown-content code,
.post-full code,
.event-full code {
    background: rgba(58, 171, 166, 0.1);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.9em;
}

.markdown-content pre,
.post-full pre,
.event-full pre {
    background: rgba(58, 171, 166, 0.1);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.markdown-content pre code,
.post-full pre code,
.event-full pre code {
    background: none;
    padding: 0;
}

.markdown-content blockquote,
.post-full blockquote,
.event-full blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--text-color);
    opacity: 0.9;
}

.markdown-content img,
.post-full img,
.event-full img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.5rem 0;
}

.markdown-content a,
.post-full a,
.event-full a {
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s;
}

.markdown-content a:hover,
.post-full a:hover,
.event-full a:hover {
    border-bottom-color: var(--primary-color);
}

/* Back button styling - make it more specific */
.event-full .back-button,
.post-full .back-button {
    display: inline-block;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: bold;
    margin-bottom: 1rem;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s;
}

.event-full .back-button:hover,
.post-full .back-button:hover {
    border-bottom-color: var(--primary-color);
}

/* Remove any conflicting styles */
.event-full a {
    text-decoration: none;
}

.event-full a:hover {
    color: var(--primary-color);
}

/* Show More Button Styles */
.show-more-btn, .hide-btn {
    display: block;
    margin: 2rem auto 0;
    padding: 0.75rem 2rem;
    background: var(--primary-color);
    color: var(--background-color);
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.show-more-btn:hover, .hide-btn:hover {
    opacity: 0.9;
}

.hide-btn {
    background: var(--background-color);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

/* Hamburger menu styles */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    position: relative;
}

/* Target Lucide SVG icons specifically */
.hamburger svg.lucide,
.hamburger svg.lucide-menu,
.hamburger svg.lucide-x {
    width: 40px !important;
    height: 40px !important;
    color: var(--primary-color) !important;
    stroke: var(--primary-color) !important;
    stroke-width: 2 !important;
}

/* Remove any default button styles */
.hamburger:focus {
    outline: none;
}

/* Mobile styles */
@media screen and (max-width: 768px) {
    nav {
        position: relative;
    }

    .hamburger {
        display: block;
        z-index: 101;
    }

    .nav-links {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--background-color);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        z-index: 100;
        padding: 2rem;
    }

    .nav-links.active {
        display: flex !important; /* Force display when active */
    }

    /* Ensure hamburger is clickable */
    .hamburger {
        display: block;
        z-index: 101;
        cursor: pointer;
        position: relative;
        padding: 0.5rem;
    }
}

/* RSS Link styles */
.rss-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-color);
    text-decoration: none;
    margin-left: 0rem;
    padding: 0.25rem 0rem;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.rss-link:hover {
    background: rgba(58, 171, 166, 0.1);
}

.rss-link svg {
    width: 16px;
    height: 16px;
}