/* --- Base Styles --- */
:root {
    --bg-color: #0D0D0D; /* Darker base background like storm.dev */
    --bg-color-secondary: #121212; /* Slightly lighter for cards/alt sections */
    --card-bg-color: #1B1B1B; /* Card background */
    --text-color: #C5C5C5; /* Main text - slightly less bright white (for subtitles, body) */ /* Adjusted comment */
    --text-color-secondary: #8A8A8A; /* Meta text, secondary info, placeholder */ /* Adjusted comment */
    --heading-color: #FFFFFF; /* White for main headings and header links/sign-in */ /* <-- UPDATED: Added header links/sign-in */
    --accent-color: #A076F9; /* Storm Purple Accent (for links, general highlights - may differ slightly from button) */ /* Adjusted comment */
    --accent-color-hover: #B592F9; /* Lighter purple for accent hover */
    --link-color: var(--accent-color); /* General link color */
    --link-hover-color: var(--accent-color-hover); /* General link hover color */
    --border-color: #2A2A2A; /* Subtle borders - slightly lighter */

    /* --- UPDATED Button Colors --- */
    /* Vibrant purple for accent buttons like Sign Up */
    --button-accent-bg: #8B5CF6; /* A vibrant purple similar to the image button */
    --button-accent-hover-bg: #9A7AF9; /* Lighter hover for accent button */
    --button-primary-text: #FFFFFF; /* Text color for accent button */

    /* --- NEW: Colors for the hero input submit button --- */
    --input-submit-bg: #E0E0E0; /* Light grey */
    --input-submit-text: #1A1A1A; /* Dark text */
    --input-submit-hover-bg: #CCCCCC; /* Slightly darker grey on hover */


    --code-bg-color: #1E1E1E; /* Match code background */
    --code-text-color: #ABB2BF;
    --star-empty-color: #555; /* Darker grey for empty stars */

    /* Fonts matching storm.dev (assuming these are the intended families) */
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-mono: 'Roboto Mono', SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --container-max-width: 1200px; /* Wider */
    --spacing-unit: 1rem;
    --border-radius: 8px; /* Slightly larger radius */
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color); /* Body text uses the slightly less bright white */
    font-family: var(--font-body);
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-weight: 400;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

.site-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.site-main {
    flex: 1;
    padding: calc(var(--spacing-unit) * 4) 0; /* Much more vertical padding */
    width: 100%;
}

.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(var(--spacing-unit) * 2); /* Increased horizontal padding */
    padding-right: calc(var(--spacing-unit) * 2);
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--heading-color); /* Headings are white */
    margin-bottom: calc(var(--spacing-unit) * 1);
    line-height: 1.3;
    font-weight: 700;
}

/* Match storm.dev hero heading size approx */
h1 { font-size: 3rem; font-weight: 800; }
h2 { font-size: 2rem; margin-top: calc(var(--spacing-unit) * 3); font-weight: 700;}
h3 { font-size: 1.6rem; margin-top: calc(var(--spacing-unit) * 2.5); font-weight: 600; }
h4 { font-size: 1.4rem; font-weight: 600;}

p {
    margin-bottom: calc(var(--spacing-unit) * 1.2);
    font-size: 1rem;
}

a {
    color: var(--link-color); /* Uses accent color for general links */
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

a:hover {
    color: var(--link-hover-color);
    text-decoration: none;
}

strong, b { font-weight: 700; }
em, i { font-style: italic; }

ul, ol {
    margin-bottom: var(--spacing-unit);
    padding-left: calc(var(--spacing-unit) * 1.5);
}

li {
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

blockquote {
    border-left: 3px solid var(--border-color);
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.5);
    margin: calc(var(--spacing-unit) * 1.5) 0;
    font-style: normal;
    color: var(--text-color-secondary);
    background-color: var(--bg-color-secondary);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

hr {
    border: 0;
    height: 1px;
    background-color: var(--border-color);
    margin: calc(var(--spacing-unit) * 3) 0;
}

/* --- Header --- */
.site-header {
    background-color: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    padding: calc(var(--spacing-unit) * 1) 0;
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- Logo Styles --- */
.site-branding .logo-link {
    display: inline-block;
    line-height: 0;
}

.site-branding .site-logo {
    height: 40px; /* Adjust this value as needed */
    width: auto;
    max-width: 100%;
    vertical-align: middle;
}

.site-branding .site-tagline {
    font-size: 0.8rem; /* Adjusted */
    color: var(--text-color-secondary);
    margin-top: 5px;
    font-weight: 400;
}

.logo-link + .site-tagline {
    font-size: 0.8rem;
}

.main-navigation {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

/* Header button uses general button styles below */
/* .header-button {} */

/* Styles for the Sign In link */
.header-signin-link {
    color: var(--heading-color); /* <-- UPDATED: Should be white like in the image */
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.5rem 0;
    background-color: transparent;
    border: none;
    transition: color 0.2s ease;
}

.header-signin-link:hover {
    color: var(--accent-color-hover); /* Use accent hover color */
    text-decoration: none;
}

.main-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    align-items: center;
}

.main-navigation a { /* Style for nav links (Pricing, Enterprise, Discord) */
    color: var(--heading-color); /* <-- UPDATED: Should be white like in the image */
    font-size: 0.9rem;
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 0;
    transition: color 0.2s ease;
}

.main-navigation a:hover,
.main-navigation .active a {
    color: var(--accent-color-hover); /* Use accent hover color */
}

/* Styles for the header actions container */
.header-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1); /* Space between Sign Up button and Sign In link */
}

/* Styles for the Sign Up button (inherits from general .button below) */
.header-actions .header-button {
    padding: 0.65rem 1.5rem; /* Refined padding for header button */
    border-radius: 6px;
}


/* --- Buttons (General) --- */
/* These styles apply to .button, <button>, <input type="submit">, and .button-primary */
/* They will style the Sign Up button with the vibrant accent color */
.button, button, input[type="submit"], .button-primary {
    display: inline-block;
    padding: 0.65rem 1.5rem; /* Slightly less vertical, more horizontal padding */
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border-radius: 6px; /* Keep this or try 8px if needed */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    background-color: var(--button-accent-bg); /* <-- Uses UPDATED vibrant purple variable */
    border: 6px solid var(--button-accent-bg); /* Border matches bg */
    color: var(--button-primary-text); /* White text */
    white-space: nowrap;
    text-transform: none;
}
.button:hover, button:hover, input[type="submit"]:hover, .button-primary:hover {
    background-color: var(--button-accent-hover-bg); /* <-- Uses UPDATED vibrant purple hover variable */
    border-color: var(--button-accent-hover-bg);
    color: var(--button-primary-text);
}


/* --- Hero Section (Input/Submit Area) --- */
/* Assuming a structure like:
<div class="hero-section">
  ...
  <div class="hero-input-area">
    <textarea placeholder="..."></textarea> // Or input[type="text"]
    <button type="submit">Submit →</button> // Or input[type="submit"]
  </div>
</div>
*/

/* Style the container for the input and button */
.hero-input-area {
    display: flex; /* Arrange input and button side-by-side */
    align-items: center;
    width: 100%;
    max-width: 700px; /* Adjust max width to match image visually */
    margin: calc(var(--spacing-unit) * 2) auto 0 auto; /* Center the block */
    background-color: #333; /* Dark background for the whole area */ /* <-- Matches image input area */
    border-radius: 10px; /* More rounded corners like image */
    padding: 10px; /* Padding inside the container */
    /* Optional: Subtle border or shadow */
    border: 1px solid #444;
}

/* Style the text input element (textarea or input[type="text"]) */
.hero-input-area textarea,
.hero-input-area input[type="text"],
.hero-input-area input[type="search"]
 {
    flex-grow: 1; /* Allow input to take up available space */
    background-color: transparent; /* Input field itself is transparent */
    border: none; /* Remove default border */
    outline: none; /* Remove default outline on focus */
    color: var(--heading-color); /* Text color inside input (white) */ /* <-- Matches image */
    font-family: var(--font-body);
    font-size: 1.1rem; /* Slightly larger font in input */
    padding: 0.5rem; /* Padding inside input/textarea */
    resize: none; /* Prevent textarea resize handle */
    min-height: 50px; /* Ensure minimum height for textarea */
}

/* Style the placeholder text inside the input */
.hero-input-area textarea::placeholder,
.hero-input-area input::placeholder {
    color: var(--text-color-secondary); /* Placeholder color (darker grey) */ /* <-- Matches image */
    opacity: 1; /* Ensure placeholder is fully opaque */
}

/* Style the Submit button specifically within the hero input area */
/* This rule is more specific than the general button rule, overriding its styles */
.hero-input-area button,
.hero-input-area input[type="submit"] {
    display: inline-flex; /* Use flex to center text and arrow */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    padding: 0.7rem 1.5rem; /* Padding for this specific button */
    font-size: 0.95rem; /* Font size for this button */
    font-weight: 600; /* Font weight for this button */
    line-height: 1; /* Single line height */
    border-radius: 8px; /* Rounded corners like image */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out; /* Only background transition needed */
    background-color: var(--input-submit-bg); /* <-- Use NEW light grey background variable */
    border: none; /* Override border from general rule */
    color: var(--input-submit-text); /* <-- Use NEW dark text variable */
    white-space: nowrap;
    text-transform: none; /* Ensure no uppercase */
    margin-left: 10px; /* Space between input and button */
}

.hero-input-area button:hover,
.hero-input-area input[type="submit"]:hover {
    background-color: var(--input-submit-hover-bg); /* <-- Use NEW hover grey variable */
    color: var(--input-submit-text); /* Ensure text color doesn't change on hover */
}

/* Style for the arrow, assuming it's part of the button text like "Submit →" */
/* If it's a separate element or icon, this would need adjustment */
/* Assuming the arrow is just text, no extra style needed beyond button color */


/* --- Footer --- */
.site-footer {
    background-color: var(--bg-color);
    border-top: 1px solid var(--border-color);
    padding: calc(var(--spacing-unit) * 1.5) 0;
    margin-top: calc(var(--spacing-unit) * 4);
    color: var(--text-color-secondary); /* Footer text is secondary color */
    font-size: 0.85rem;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-unit);
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.footer-links a {
    color: var(--text-color-secondary); /* Footer links are secondary color */
    font-size: 0.85rem;
}
.footer-links a:hover {
    color: var(--text-color); /* Hover makes them main text color */
}

/* --- Homepage Blog List --- */
.page-home .page-header {
    margin-bottom: calc(var(--spacing-unit) * 3);
    text-align: left;
}
.page-home .page-header .description {
    font-size: 1.2rem;
    color: var(--text-color-secondary);
    max-width: 650px;
    line-height: 1.6;
}

.post-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 1.5);
}

/* --- Blog Post Cards --- */
.post-entry {
    background-color: var(--card-bg-color);
    padding: calc(var(--spacing-unit) * 1.8) calc(var(--spacing-unit) * 2);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
}
.post-entry:hover {
    border-color: var(--accent-color);
    background-color: #222222;
}

.post-entry .entry-header h2 {
    font-size: 1.5rem;
    margin-bottom: calc(var(--spacing-unit) * 0.4);
    font-weight: 600;
}
.post-entry .entry-header h2 a {
    color: var(--heading-color); /* Post title links are white */
    text-decoration: none;
}
.post-entry .entry-header h2 a:hover {
    color: var(--accent-color); /* Hover makes them accent color */
}

.post-entry .entry-meta {
    font-size: 0.8rem;
    color: var(--text-color-secondary); /* Meta text is secondary color */
    margin-bottom: var(--spacing-unit);
    line-height: 1.4;
}
.post-entry .entry-meta .byline::before {
    content: "by ";
}
.post-entry .entry-meta .posted-on::after {
    content: none;
}

.post-entry .entry-summary {
    font-size: 0.95rem;
    color: var(--text-color); /* Summary text is main text color */
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    flex-grow: 1;
}

.post-entry .entry-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    border-top: none;
    padding-top: 0;
}

.post-entry .read-more {
    font-weight: 600;
    color: var(--accent-color); /* Read more link is accent color */
}
.post-entry .read-more:hover {
    color: var(--accent-color-hover);
    text-decoration: underline;
}

.post-entry .tags {
    text-align: right;
}
.post-entry .tags a {
    display: inline-block;
    font-size: 0.75rem;
    background-color: rgba(160, 118, 249, 0.1); /* Subtle accent background */
    color: var(--accent-color); /* Tag text is accent color */
    padding: 0.2em 0.6em;
    border-radius: 4px;
    margin-left: 5px;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid rgba(160, 118, 249, 0.3);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.post-entry .tags a:hover {
    background-color: rgba(160, 118, 249, 0.2);
    color: var(--accent-color-hover);
}


/* --- Single Post (single.html) --- */
.page-single article.post-single {
    max-width: 1024px; /* Content width */
    margin-left: auto;
    margin-right: auto;
    padding: calc(var(--spacing-unit) * 1);
}

.page-single .entry-header {
    margin-bottom: calc(var(--spacing-unit) * 2.5);
    padding-bottom: calc(var(--spacing-unit) * 1.5);
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}
.page-single .entry-title {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: var(--spacing-unit);
}
.page-single .entry-meta {
    margin-bottom: calc(var(--spacing-unit) * 1);
    font-size: 0.9rem;
    color: var(--text-color-secondary); /* Meta text is secondary color */
}
.page-single .tags {
    margin-top: var(--spacing-unit);
}
.page-single .tags a {
    display: inline-block;
    font-size: 0.75rem;
    background-color: rgba(160, 118, 249, 0.1); /* Tag background */
    color: var(--accent-color); /* Tag text */
    padding: 0.2em 0.6em;
    border-radius: 4px;
    margin-right: 6px;
    margin-left: 0;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid rgba(160, 118, 249, 0.3);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.page-single .tags a:hover {
    background-color: rgba(160, 118, 249, 0.2);
    color: var(--accent-color-hover);
}

.featured-image {
    margin-bottom: calc(var(--spacing-unit) * 2.5);
    border-radius: var(--border-radius);
    overflow: hidden;
}
.featured-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--border-radius);
}

.entry-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-color); /* Content text is main text color */
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    margin-top: calc(var(--spacing-unit) * 2.5);
    margin-bottom: calc(var(--spacing-unit) * 1);
    font-weight: 700;
}
.entry-content h2 { font-size: 1.8rem; }
.entry-content h3 { font-size: 1.5rem; }
.entry-content h4 { font-size: 1.3rem; }


.entry-content figure {
    margin: calc(var(--spacing-unit) * 2.5) 0;
}
.entry-content figure img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--border-radius);
}
.entry-content figcaption {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-color-secondary); /* Figcaption is secondary color */
    margin-top: calc(var(--spacing-unit) * 0.75);
}

/* Code Blocks */
.entry-content pre {
    background-color: var(--code-bg-color);
    color: var(--code-text-color);
    padding: calc(var(--spacing-unit) * 1.5);
    margin: calc(var(--spacing-unit) * 2) 0;
    border-radius: var(--border-radius);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.9em;
    line-height: 1.6;
    border: 1px solid var(--border-color);
}

.entry-content code {
    font-family: var(--font-mono);
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-color);
    padding: 0.15em 0.3em;
    border-radius: 4px;
    font-size: 0.85em;
    word-wrap: break-word;
}

.entry-content pre code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
    border: none;
    color: inherit;
}

.entry-content a {
    color: var(--link-color); /* Links in content use accent color */
    text-decoration: underline; /* Underline links in content */
}
.entry-content a:hover {
    color: var(--link-hover-color);
}

/* --- Table Styles --- */
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: calc(var(--spacing-unit) * 2.5) 0;
    font-size: 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    table-layout: fixed;
}

.entry-content th,
.entry-content td {
    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 1.2);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    line-height: 1.4;
    word-wrap: break-word;
}

/* Header specific styles */
.entry-content thead th {
    font-weight: 600;
    color: var(--text-color-secondary);
    background-color: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
    white-space: normal;
    vertical-align: bottom;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Remove bottom border from last row */
.entry-content tbody tr:last-child td {
    border-bottom: none;
}

/* Row Hover */
.entry-content tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

/* Link styling within table cells */
.entry-content td a {
    color: var(--link-color);
    font-weight: 500;
    text-decoration: none;
}
.entry-content td a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

/* Styling for the text within table cells (scores) */
.entry-content td {
    color: var(--text-color);
    font-size: 0.85rem;
}

/* Styling for the star spans CONTAINER */
.entry-content td .star-rating-container {
    display: inline-block;
    white-space: nowrap;
}


/* Common styles for BOTH filled and empty stars */
.entry-content td .stars-filled,
.entry-content td .stars-empty {
    display: inline-block;
    vertical-align: middle;
    font-size: 1.1rem;
    letter-spacing: 1px;
    line-height: 1.1;
    white-space: nowrap;
    margin-bottom: 2px;
}

/* Color for FILLED stars */
.entry-content td .stars-filled {
    color: var(--accent-color); /* Stars use accent color */
}

/* Color for EMPTY stars */
.entry-content td .stars-empty {
    color: var(--star-empty-color);
}

/* Styling for bold text within cells */
.entry-content td strong {
    font-weight: 600;
    color: var(--heading-color);
}
.entry-content td strong a {
     color: var(--heading-color);
     font-weight: 600;
}
.entry-content td strong a:hover {
     color: var(--accent-color-hover);
}

/* Alignment overrides - based on storm.dev look */
.entry-content td:first-child,
.entry-content th:first-child {
     text-align: left;
     width: 25%;
}
.entry-content td:last-child,
.entry-content th:last-child {
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
    color: var(--text-color);
    width: 15%;
}
/* Center align other columns */
.entry-content th:nth-child(n+2):not(:last-child),
.entry-content td:nth-child(n+2):not(:last-child) {
    text-align: center;
    width: 20%;
    white-space: nowrap; /* Ensure stars/score don't wrap in center cols */
}

/* Remove BR tag margin */
.entry-content td br {
    margin: 0;
    line-height: 0.5;
    display: block;
    content: "";
    margin-top: 2px;
}


/* --- Post Navigation --- */
.post-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: calc(var(--spacing-unit) * 3);
    padding-top: calc(var(--spacing-unit) * 1.5);
    border-top: 1px solid var(--border-color);
    font-size: 1rem;
    gap: var(--spacing-unit);
}
.post-navigation a {
    color: var(--text-color-secondary);
    display: block;
    padding: var(--spacing-unit);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--card-bg-color);
    flex: 1;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.post-navigation a:hover {
    color: var(--link-hover-color);
    text-decoration: none;
    border-color: var(--accent-color);
    background-color: var(--bg-color-secondary);
}
.post-navigation .prev { text-align: left; }
.post-navigation .next { text-align: right; }
.post-navigation .prev::before { content: '← '; }
.post-navigation .next::after { content: ' →'; }

/* --- Pagination --- */
.pagination {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin-top: calc(var(--spacing-unit) * 3);
}

.pagination li {
    margin: 0 6px;
}

.pagination a, .pagination span {
    display: block;
    padding: 0.6rem 1.1rem;
    background-color: var(--card-bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pagination a:hover {
    background-color: var(--accent-color); /* Pagination hover uses accent */
    border-color: var(--accent-color);
    color: var(--button-primary-text); /* Text turns white */
}

.pagination .active a, .pagination .active span {
    background-color: var(--accent-color); /* Active pagination uses accent */
    border-color: var(--accent-color);
    color: var(--button-primary-text); /* Text is white */
    cursor: default;
}

.pagination .disabled span {
    color: var(--text-color-secondary);
    background-color: transparent;
    border-color: var(--border-color);
    cursor: default;
}


/* --- Responsive --- */
@media (max-width: 992px) {
    .container {
        max-width: 960px;
    }
    h1 { font-size: 2.6rem; }
    .page-single .entry-title { font-size: 2.4rem; }

     /* Allow table columns to adjust */
     .entry-content td:first-child,
     .entry-content th:first-child,
     .entry-content td:last-child,
     .entry-content th:last-child,
     .entry-content th:nth-child(n+2):not(:last-child),
     .entry-content td:nth-child(n+2):not(:last-child) {
         width: auto; /* Let width be more flexible on tablet */
     }
}

@media (max-width: 768px) {
    html { font-size: 15px; }

    h1 { font-size: 2.2rem; }
    .page-single .entry-title { font-size: 2.1rem; }
    h2 { font-size: 1.7rem; }
    h3 { font-size: 1.4rem; }

    .container {
        padding-left: var(--spacing-unit);
        padding-right: var(--spacing-unit);
    }

    .site-main {
        padding: calc(var(--spacing-unit) * 2.5) 0;
    }

    .header-inner {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .site-branding {
        flex-basis: 100%;
        text-align: center;
        margin-bottom: var(--spacing-unit);
    }
    .site-branding .site-logo {
        height: 35px;
    }
    .main-navigation {
        width: 100%;
        justify-content: center;
        gap: var(--spacing-unit);
    }
    .main-navigation ul {
        gap: var(--spacing-unit);
        justify-content: center;
    }
    .header-actions {
        /* Center the actions block */
        width: 100%;
        justify-content: center;
    }
    .header-button {
         padding: 0.6rem 1rem;
         font-size: 0.85rem;
    }

    .footer-inner {
        flex-direction: column;
        text-align: center;
    }
     .footer-links ul {
        gap: var(--spacing-unit);
    }

    .post-entry {
        padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 1.5);
    }
    .post-entry .entry-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: calc(var(--spacing-unit) * 0.75);
    }
     .post-entry .tags {
        text-align: left;
        margin-top: calc(var(--spacing-unit) * 0.5);
    }
     .post-entry .tags a { margin-left: 0; margin-right: 5px; margin-bottom: 4px;}

     .page-single article.post-single {
        padding: 0;
        max-width: 100%;
     }
     .page-single .entry-title { font-size: 2rem; }
     .entry-content { font-size: 1rem; }

    .post-navigation {
        flex-direction: column;
        gap: var(--spacing-unit);
    }
     .post-navigation a {
        text-align: center !important;
    }
     .post-navigation .prev::before { content: ''; }
     .post-navigation .next::after { content: ''; }

     .pagination a, .pagination span {
        padding: 0.5rem 0.8rem;
     }

     /* Table adjustments for mobile */
     .entry-content table {
         font-size: 0.8rem; /* Even smaller font */
         display: block;
         overflow-x: auto;
         white-space: nowrap;
         border: none;
         border-radius: 0;
         -webkit-overflow-scrolling: touch;
     }
     .entry-content thead {
         /* display: none; */ /* Optionally hide */
     }
     .entry-content th,
     .entry-content td {
         padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 0.7); /* Smaller padding */
         white-space: nowrap;
         border: none;
         border-bottom: 1px solid var(--border-color);
         vertical-align: middle; /* Keep vertical align */
     }
      /* Reset widths and alignment for horizontal scrolling */
      .entry-content td:first-child,
      .entry-content th:first-child,
      .entry-content td:last-child,
      .entry-content th:last-child,
      .entry-content th:nth-child(n+2):not(:last-child),
      .entry-content td:nth-child(n+2):not(:last-child) {
          width: auto !important;
          text-align: left !important; /* Align all left */
          white-space: nowrap !important; /* Ensure no wrap */
      }
       .entry-content td:last-child {
          font-weight: normal; /* Reset weight */
       }
       .entry-content td span { /* Slightly smaller stars */
           font-size: 1rem;
       }
       .entry-content td br { /* Adjust spacing */
            margin-top: 0px;
            line-height: 0.3;
       }

     /* Responsive adjustments for the hero input area */
     .hero-input-area {
        flex-direction: column; /* Stack input and button on mobile */
        padding: 10px; /* Adjust padding */
        border-radius: 8px; /* Slightly less round on mobile */
    }

    .hero-input-area textarea,
    .hero-input-area input[type="text"],
    .hero-input-area input[type="search"] {
        width: 100%; /* Full width on mobile */
        margin-bottom: 10px; /* Space between input and button */
        padding: 0.6rem; /* Adjust padding */
        font-size: 1rem; /* Adjust font size */
        min-height: 80px; /* Maybe taller textarea on mobile */
    }

    .hero-input-area button,
    .hero-input-area input[type="submit"] {
        width: 100%; /* Full width button on mobile */
        margin-left: 0; /* Remove left margin */
        padding: 0.8rem; /* Adjust padding */
        font-size: 1rem; /* Adjust font size */
    }

}