/* Import Inter font for consistency */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Root Variables */
:root {
 --himalayan-blue: #2A6BCF;
 --himalayan-blue-lite: #5A93E9;
 --terracotta-brown: #E2725B;
 --evergreen-green: #00703C;
 --goldenrod-gold: #DAA520;
 --mountain-rock-gray: #808080;
 --monastery-maroon: #800000;
 --cloud-white: #FFFFFF;
 --sunrise-orange: #FF6F00;
 --frost-gray: #f2f2f2;
 --text-primary: #2c2c2c;
 --text-secondary: #4d4d4d;
 --text-muted: #6e6e6e;
 --transition: all 0.2s ease;
 --border-radius: 6px;
 --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Section */
section.blog-container {
 max-width: 1200px;
 margin: 0 auto;
 padding: 1rem;
 background: var(--cloud-white);
 font-family: var(--font-family);
 color: var(--text-primary);
 contain: layout;
}

/* Article */
article.blog-post {
 background: var(--cloud-white);
 border: 1px solid var(--frost-gray);
 border-radius: var(--border-radius);
 padding: 0 1rem 1rem;
 overflow: hidden;
}

/* Headings */
h1 {
 font-size: clamp(1.5rem, 3.5vw, 2rem);
 font-weight: 700;
 color: var(--himalayan-blue);
 margin: 1rem 0;
 line-height: 1.2;
 text-align: center;
}

div.blog-content h2,
div.blog-content h3,
div.blog-content h4,
div.blog-content h5,
div.blog-content h6 {
 color: var(--text-primary);
 margin: 1rem 0 0.5rem;
 font-weight: 600;
 line-height: 1.3;
}

div.blog-content h2 { font-size: clamp(1.25rem, 2.5vw, 1.4rem); }
div.blog-content h3 { font-size: clamp(1.1rem, 2vw, 1.25rem); }
div.blog-content h4 { font-size: clamp(1rem, 1.8vw, 1.1rem); }
div.blog-content h5,
div.blog-content h6 { font-size: clamp(0.95rem, 1.6vw, 1rem); }

/* Images */
figure.blog-image-container {
 width: calc(100% + 2rem);
 margin: 0 -1.1rem;
 overflow: hidden;
}

img.blog-image {
 width: 100%;
 height: auto;
 max-height: 350px;
 object-fit: cover;
 display: block;
 margin: 0;
}

/* Inline Images */
div.blog-content img {
 max-width: 100%;
 height: auto;
 margin: 0.75rem auto;
 display: block;
 border-radius: var(--border-radius);
}

/* Meta Information */
div.blog-meta {
 display: flex;
 flex-wrap: wrap;
 gap: 1rem;
 font-size: 0.85rem;
 color: var(--text-secondary);
 margin: 0.75rem 0;
 justify-content: center;
}

span.meta-item {
 display: flex;
 align-items: center;
 gap: 0.4rem;
}

img.meta-icon {
 width: 16px;
 height: 16px;
 opacity: 0.9;
}

/* Content */
div.blog-content {
 font-size: 0.95rem;
 line-height: 1.5;
 color: var(--text-primary);
}

div.blog-content p {
 margin-bottom: 0.75rem;
 color: var(--text-muted);
}

div.blog-content strong {
 font-weight: 600;
 color: var(--text-primary);
}

div.blog-content a {
 color: var(--himalayan-blue);
 text-decoration: none;
 border-bottom: 1px solid var(--himalayan-blue-lite);
 transition: var(--transition);
}

div.blog-content a:hover {
 color: var(--sunrise-orange);
 border-bottom-color: var(--sunrise-orange);
}

div.blog-content ul,
div.blog-content ol {
 margin: 0.75rem 0;
 padding-left: 1.5rem;
 color: var(--text-muted);
}

div.blog-content li {
 margin-bottom: 0.3rem;
}

/* Tables */
div.blog-content figure {
 margin: 0; /* Neutralize figure margins for tables */
 padding: 0;
 width: 100%;
 max-width: 100%;
 overflow: hidden;
}

div.blog-content table {
 width: 100%;
 max-width: 100%;
 border-collapse: collapse;
 border: 1px solid var(--frost-gray);
 background: var(--cloud-white);
 margin: 0.5rem 0;
 table-layout: auto; /* Adjust columns based on content */
 display: block; /* Enable horizontal scrolling */
 overflow-x: auto; /* Scroll for wide tables */
 -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
 scrollbar-width: thin; /* Firefox */
 scrollbar-color: var(--himalayan-blue) var(--frost-gray); /* Firefox */
 box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); /* Scroll cue */
}

div.blog-content table::-webkit-scrollbar {
 height: 8px;
}

div.blog-content table::-webkit-scrollbar-track {
 background: var(--frost-gray);
}

div.blog-content table::-webkit-scrollbar-thumb {
 background: var(--himalayan-blue);
 border-radius: 4px;
}

div.blog-content th,
div.blog-content td {
 padding: 0.6rem;
 border: 1px solid var(--frost-gray);
 text-align: left;
 font-size: 0.85rem;
 color: var(--text-primary);
 white-space: nowrap; /* Prevent wrapping for short text */
 word-wrap: break-word; /* Wrap long text */
 min-width: 90px; /* Balanced column width */
 line-height: 1.2; /* Compact line height */
 vertical-align: top; /* Align content to top */
}

div.blog-content th {
 background: var(--himalayan-blue);
 color: var(--cloud-white);
 font-weight: 600;
}

div.blog-content td {
 background: var(--cloud-white);
}

div.blog-content tr:nth-child(even) td {
 background: var(--frost-gray);
}

div.blog-content td ul {
 padding-left: 1rem;
 margin: 0.25rem 0;
 font-size: 0.8rem;
 line-height: 1.3;
}

div.blog-content td ul li {
 margin-bottom: 0.2rem;
}

/* Tags */
div.blog-tags {
 margin-top: 0.75rem;
 display: flex;
 flex-wrap: wrap;
 gap: 0.5rem;
 font-size: 0.85rem;
 color: var(--text-secondary);
 justify-content: center;
}

span.tags-label {
 font-weight: 500;
 color: var(--text-primary);
}

a.tag {
 background: var(--frost-gray);
 padding: 0.3rem 0.6rem;
 border-radius: 4px;
 text-decoration: none;
 color: var(--text-primary);
 transition: var(--transition);
}

a.tag:hover {
 background: var(--himalayan-blue);
 color: var(--cloud-white);
}

/* Call to Action */
div.blog-cta {
 margin-top: 1rem;
 text-align: center;
}

a.cta-link {
 display: inline-block;
 background: var(--himalayan-blue);
 color: var(--cloud-white);
 padding: 0.5rem 1rem;
 border-radius: var(--border-radius);
 text-decoration: none;
 font-weight: 500;
 transition: var(--transition);
}

a.cta-link:hover {
 background: var(--sunrise-orange);
}

/* Responsive Design */
@media (max-width: 768px) {
 section.blog-container {
 padding: 0.75rem;
 margin: 0 0.5rem;
 }

 article.blog-post {
 padding: 0 0.75rem 0.75rem;
 }

 figure.blog-image-container {
 width: calc(100% + 1.5rem);
 margin: 0 -0.85rem;
 }

 div.blog-content img {
 margin: 0.5rem auto;
 }

 h1 {
 font-size: clamp(1.25rem, 3vw, 1.5rem);
 }

 img.blog-image {
 max-height: 280px;
 }

 div.blog-meta {
 gap: 0.75rem;
 font-size: 0.8rem;
 }

 img.meta-icon {
 width: 14px;
 height: 14px;
 }

 div.blog-content {
 font-size: 0.9rem;
 }

 div.blog-content h2 { font-size: clamp(1.1rem, 2vw, 1.25rem); }
 div.blog-content h3 { font-size: clamp(1rem, 1.8vw, 1.1rem); }
 div.blog-content h4 { font-size: clamp(0.95rem, 1.6vw, 1rem); }
 div.blog-content h5,
 div.blog-content h6 { font-size: clamp(0.9rem, 1.4vw, 0.95rem); }

 div.blog-content table {
 margin: 0.4rem 0;
 box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
 }

 div.blog-content th,
 div.blog-content td {
 padding: 0.4rem; /* More compact */
 font-size: 0.8rem;
 min-width: 70px; /* Smaller columns */
 line-height: 1.1;
 }

 div.blog-content td ul {
 font-size: 0.75rem;
 line-height: 1.2;
 padding-left: 0.8rem;
 }

 a.cta-link {
 padding: 0.4rem 0.8rem;
 }
}

@media (max-width: 480px) {
 section.blog-container {
 padding: 0.5rem;
 margin: 0 0.25rem;
 }

 article.blog-post {
 padding: 0 0.5rem 0.5rem;
 }

 figure.blog-image-container {
 width: calc(100% + 1rem);
 margin: 0 -0.6rem;
 }

 div.blog-content img {
 margin: 0.5rem auto;
 }

 h1 {
 font-size: clamp(1.1rem, 2.5vw, 1.25rem);
 }

 img.blog-image {
 max-height: 220px;
 }

 div.blog-meta {
 gap: 0.5rem;
 font-size: 0.75rem;
 }

 img.meta-icon {
 width: 12px;
 height: 12px;
 }

 div.blog-content {
 font-size: 0.85rem;
 }

 div.blog-content h2 { font-size: clamp(1rem, 1.8vw, 1.1rem); }
 div.blog-content h3 { font-size: clamp(0.95rem, 1.6vw, 1rem); }
 div.blog-content h4 { font-size: clamp(0.9rem, 1.4vw, 0.95rem); }
 div.blog-content h5,
 div.blog-content h6 { font-size: clamp(0.85rem, 1.2vw, 0.9rem); }

 div.blog-content ul,
 div.blog-content ol {
 padding-left: 1.25rem;
 }

 div.blog-content table {
 margin: 0.3rem 0;
 }

 div.blog-content th,
 div.blog-content td {
 padding: 0.3rem; /* Very compact */
 font-size: 0.75rem;
 min-width: 60px; /* Compact columns */
 line-height: 1;
 }

 div.blog-content td ul {
 font-size: 0.7rem;
 line-height: 1.1;
 padding-left: 0.6rem;
 }

 a.tag {
 padding: 0.25rem 0.5rem;
 font-size: 0.75rem;
 }

 a.cta-link {
 padding: 0.35rem 0.7rem;
 font-size: 0.85rem;
 }
}

@media (max-width: 320px) {
 section.blog-container {
 padding: 0.3rem;
 margin: 0;
 }

 article.blog-post {
 padding: 0 0.3rem 0.3rem;
 }

 figure.blog-image-container {
 width: calc(100% + 0.6rem);
 margin: 0 -0.4rem;
 }

 div.blog-content img {
 margin: 0.5rem auto;
 }

 h1 {
 font-size: clamp(1rem, 2vw, 1.1rem);
 }

 img.blog-image {
 max-height: 180px;
 }

 div.blog-meta {
 gap: 0.4rem;
 font-size: 0.7rem;
 }

 img.meta-icon {
 width: 10px;
 height: 10px;
 }

 div.blog-content {
 font-size: 0.8rem;
 }

 div.blog-content h2 { font-size: clamp(1rem, 1.8vw, 1.1rem); }
 div.blog-content h3 { font-size: clamp(0.95rem, 1.6vw, 1rem); }
 div.blog-content h4 { font-size: clamp(0.9rem, 1.4vw, 0.95rem); }
 div.blog-content h5,
 div.blog-content h6 { font-size: clamp(0.85rem, 1.2vw, 0.9rem); }

 div.blog-content ul,
 div.blog-content ol {
 padding-left: 1.25rem;
 }

 div.blog-content table {
 margin: 0.2rem 0;
 box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
 }

 div.blog-content th,
 div.blog-content td {
 padding: 0.2rem; /* Extremely compact */
 font-size: 0.7rem;
 min-width: 50px; /* Minimal column width */
 line-height: 1;
 }

 div.blog-content td ul {
 font-size: 0.65rem;
 line-height: 1;
 padding-left: 0.5rem;
 }

 a.tag {
 padding: 0.2rem 0.4rem;
 font-size: 0.7rem;
 }

 a.cta-link {
 padding: 0.3rem 0.6rem;
 font-size: 0.8rem;
 }
}