/**
 * GepcomTech brand overlay for the Magefan Blog module (default "modern"
 * template). Magefan ships its own self-contained CSS, so this file only
 * re-skins colors, fonts, spacing and card treatment to match the site's
 * locked design system (blue-600 #2563EB accent, Inter typeface, rounded
 * card/container language) without touching Magefan's PHP templates.
 */

.blog-page {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #374151;
    background-color: #ffffff;
}

.blog-page .page-title,
.blog-page h1,
.blog-page h2,
.blog-page h3 {
    font-weight: 700;
    color: #111827;
}

.blog-page .container {
    max-width: 1280px;
}

.blog-page a {
    color: #2563EB;
    text-decoration: none;
}

.blog-page a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

/* Post list cards */
.blog-page .post-list.modern .post-item {
    margin-bottom: 2rem;
}

.blog-page .post-list.modern .post-container {
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    background: #ffffff;
}

.blog-page .post-list.modern .post-container:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.blog-page .post-title a {
    color: #111827;
}

.blog-page .post-title a:hover {
    color: #2563EB;
    text-decoration: none;
}

.blog-page .post-category .category-name {
    display: inline-block;
    background: #eff6ff;
    color: #2563EB;
    border-radius: 9999px;
    padding: 0.15rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Sidebar */
.blog-page .block.block-blog-sidebar,
.blog-page .sidebar .block {
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    background: #ffffff;
}

.blog-page .sidebar .block-title,
.blog-page .sidebar .block strong {
    color: #111827;
    font-weight: 700;
}

/* Search box */
.blog-page .block-search input[type="text"],
.blog-page .sidebar input[type="text"] {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
}

.blog-page .block-search input[type="text"]:focus,
.blog-page .sidebar input[type="text"]:focus {
    outline: none;
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Buttons */
.blog-page .btn,
.blog-page button.action.primary,
.blog-page input.action.primary {
    background-color: #2563EB;
    border-color: #2563EB;
    border-radius: 0.5rem;
    color: #ffffff;
}

.blog-page .btn:hover,
.blog-page button.action.primary:hover {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
}

/* Post view */
.blog-page.blog-post-view .post-content,
.blog-page.blog-post-view .post-view {
    line-height: 1.75;
    color: #374151;
}

.blog-page.blog-post-view .post-content img {
    border-radius: 0.75rem;
}