/*
Theme Name:  MeroVPS
Theme URI:   https://www.merovps.com/blog
Author:      MeroVPS
Author URI:  https://www.merovps.com
Description: Official MeroVPS blog theme. Built with Tailwind CSS, matching the MeroVPS design system. Fully SEO-optimised at the theme layer — no plugin dependency for schema, meta, or canonical tags.
Version:     1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: merovps
Tags:        blog, custom-header, custom-menu, featured-images, full-width-template, rtl-language-support, sticky-post, threaded-comments, translation-ready
*/

/* ─── Match main site scale: max-w-7xl fills viewport up to 1536px ─────────── */
.max-w-7xl { max-width: 1536px !important; }

/* ─── Base resets (Tailwind handles most; these fill gaps) ─────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
    background-color: #fbf8ff;
    color: #1a1b23;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── Typography ────────────────────────────────────────────────────────────── */
.entry-content h2,
.prose-merovps h2 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 0.75rem; line-height: 1.3; color: #1a1b23; }
.entry-content h3,
.prose-merovps h3 { font-size: 1.25rem; font-weight: 600; margin: 1.5rem 0 0.5rem; line-height: 1.4; color: #1a1b23; }
.entry-content p,
.prose-merovps p  { font-size: 1.125rem; margin-bottom: 1.25rem; line-height: 1.75; color: #444655; }
.entry-content ul, .entry-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; color: #444655; }
.entry-content li { margin-bottom: 0.4rem; line-height: 1.75; }
.entry-content a  { color: #5073FF; text-decoration: underline; text-underline-offset: 2px; }
.entry-content a:hover { color: #3b5bdb; }
.entry-content blockquote {
    border-left: 3px solid #5073FF;
    padding: 0.75rem 1.25rem;
    margin: 1.5rem 0;
    background: #f3f2fe;
    border-radius: 0 8px 8px 0;
    color: #444655;
    font-style: italic;
}
.entry-content code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.875em;
    background: #eeedf9;
    padding: 0.15em 0.4em;
    border-radius: 4px;
    color: #5073FF;
}
.entry-content pre {
    background: #1a1b23;
    color: #e2e1ed;
    padding: 1.25rem;
    border-radius: 12px;
    overflow-x: auto;
    margin-bottom: 1.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
}
.entry-content pre code { background: none; color: inherit; padding: 0; }
.entry-content img { max-width: 100%; height: auto; border-radius: 12px; margin: 1rem 0; }
.entry-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.entry-content th, .entry-content td { padding: 0.75rem 1rem; border: 1px solid #c4c5d7; text-align: left; }
.entry-content th { background: #eeedf9; font-weight: 700; }

/* ─── Text gradient (brand) ─────────────────────────────────────────────────── */
.text-gradient {
    background: linear-gradient(135deg, #5073FF 0%, #7C9FFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ─── Post card hover ────────────────────────────────────────────────────────── */
.post-card { transition: box-shadow 0.2s ease, transform 0.2s ease; }
.post-card:hover { box-shadow: 0 8px 20px rgba(80,115,255,0.12), 0 2px 6px rgba(0,0,0,0.06); transform: translateY(-2px); }

/* ─── Breadcrumbs ───────────────────────────────────────────────────────────── */
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; list-style: none; padding: 0; margin: 0; font-size: 0.8125rem; color: #747686; }
.breadcrumbs li a { color: #747686; text-decoration: none; }
.breadcrumbs li a:hover { color: #5073FF; }
.breadcrumbs li[aria-current="page"] { color: #1a1b23; font-weight: 600; }

/* ─── Pagination ────────────────────────────────────────────────────────────── */
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; font-weight: 600; font-size: 0.9rem; color: #444655; border: 1px solid #c4c5d7; text-decoration: none; transition: all 0.15s; }
.pagination .page-numbers.current { background: #5073FF; color: #fff; border-color: #5073FF; }
.pagination .page-numbers:hover:not(.current) { background: #eeedf9; color: #5073FF; border-color: #5073FF; }
.pagination .page-numbers.dots { border: none; cursor: default; }

/* ─── Skip link accessibility ───────────────────────────────────────────────── */
.skip-link { position: absolute; left: -999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { left: 6px; top: 6px; width: auto; height: auto; background: #5073FF; color: #fff; padding: 8px 16px; border-radius: 8px; font-weight: 700; z-index: 9999; text-decoration: none; }

/* ─── Screen reader text ────────────────────────────────────────────────────── */
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.screen-reader-text:focus { clip: auto; height: auto; overflow: auto; position: static; white-space: normal; width: auto; }