/* ============================================================
   Blog styles - navy theme (#1a274f), black & white.
   Shared by listing (index), single post (show), category, tag
   and search views. Replaces the per-view inline <style> blocks
   that used to be duplicated across index + show templates.
   All rules use logical properties (margin-inline-*) so RTL
   languages (Arabic) work without extra overrides.
   ============================================================ */

.blog-section,
.post-section { background: #fff; }

/* ---------- Page headers ---------- */
.blog-page-header,
.post-header {
    background: #f5f7fb;
    border-bottom: 1px solid #e6e9f2;
    padding: 50px 0 40px;
    margin-bottom: 50px;
}
.post-header { margin-bottom: 40px; }

.blog-page-header h1 {
    color: #1a274f;
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 6px;
}
.post-header h1 {
    color: #0a0a0a;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 16px;
    max-width: 860px;
}
.blog-page-header p { color: #5b6478; font-size: 15px; margin: 0; }

.blog-breadcrumb,
.post-breadcrumb { font-size: 13px; margin-bottom: 14px; }
.post-breadcrumb { margin-bottom: 16px; }
.blog-breadcrumb a,
.post-breadcrumb a { color: #5b6478; text-decoration: none; }
.blog-breadcrumb a:hover,
.post-breadcrumb a:hover { color: #1a274f; }
.blog-breadcrumb .sep,
.post-breadcrumb .sep { margin: 0 8px; color: #c0c4cf; }
.blog-breadcrumb .current,
.post-breadcrumb .current { color: #1a274f; font-weight: 600; }

.post-header-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
    font-size: 13.5px; color: #5b6478;
}
.post-header-meta i { color: #1a274f; margin-inline-end: 5px; }
.post-header-cat {
    background: #1a274f; color: #fff; text-decoration: none;
    font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    padding: 5px 12px; border-radius: 6px;
}
.post-header-cat:hover { background: #0f1a3a; color: #fff; }

/* ---------- Cards ---------- */
.blog-card {
    background: #fff;
    border: 1px solid #e6e9f2;
    border-radius: 14px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.blog-card:hover {
    border-color: rgba(26, 39, 79, .35);
    box-shadow: 0 10px 30px rgba(26, 39, 79, .10);
    transform: translateY(-3px);
}
.blog-card-img {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f5f7fb;
}
.blog-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.blog-card:hover .blog-card-img img { transform: scale(1.04); }

.blog-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex-grow: 1; }
.blog-card-meta {
    display: flex; align-items: center; gap: 14px;
    font-size: 12.5px; color: #8a8f9c; margin-bottom: 10px;
}
.blog-card-meta i { color: #1a274f; margin-inline-end: 4px; }
.blog-card-cat {
    display: inline-block;
    background: #1a274f; color: #fff;
    font-size: 11px; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 6px;
    text-decoration: none;
}
.blog-card-cat:hover { background: #0f1a3a; color: #fff; }
.blog-card-title {
    font-size: 18px; font-weight: 700; line-height: 1.35;
    margin-bottom: 10px;
}
.blog-card-title a { color: #0a0a0a; text-decoration: none; }
.blog-card-title a:hover { color: #1a274f; }
.blog-card-excerpt {
    color: #5b6478; font-size: 14px; line-height: 1.6;
    margin-bottom: 16px; flex-grow: 1;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card-readmore {
    color: #1a274f; font-weight: 600; font-size: 14px;
    text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.blog-card-readmore:hover { color: #0a0a0a; }

/* ---------- Sidebar ---------- */
.blog-sidebar-widget {
    background: #fff;
    border: 1px solid #e6e9f2;
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 24px;
}
.blog-sidebar-widget h5 {
    color: #1a274f; font-size: 15px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e6e9f2;
}
.blog-search-form { display: flex; }
.blog-search-form input {
    flex: 1; border: 1px solid #e6e9f2;
    border-start-start-radius: 8px; border-end-start-radius: 8px;
    border-start-end-radius: 0; border-end-end-radius: 0;
    border-inline-end: none;
    padding: 10px 14px; font-size: 14px; outline: none;
}
.blog-search-form input:focus { border-color: #1a274f; }
.blog-search-form button {
    background: #1a274f; color: #fff; border: none;
    padding: 0 18px; cursor: pointer;
    border-start-end-radius: 8px; border-end-end-radius: 8px;
    border-start-start-radius: 0; border-end-start-radius: 0;
}
.blog-cat-list { list-style: none; margin: 0; padding: 0; }
.blog-cat-list li { border-bottom: 1px solid #f0f2f8; }
.blog-cat-list li:last-child { border-bottom: none; }
.blog-cat-list a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 2px; color: #3c4258; text-decoration: none; font-size: 14px;
    transition: color .15s, padding-inline-start .15s;
}
.blog-cat-list a:hover,
.blog-cat-list a.active { color: #1a274f; font-weight: 600; padding-inline-start: 6px; }
.blog-cat-list .count {
    background: #f5f7fb; color: #1a274f;
    font-size: 12px; font-weight: 600;
    min-width: 26px; text-align: center;
    padding: 2px 8px; border-radius: 20px;
}

.blog-recent-item { display: flex; gap: 12px; margin-bottom: 16px; }
.blog-recent-item:last-child { margin-bottom: 0; }
.blog-recent-thumb {
    width: 72px; height: 56px; flex: 0 0 72px;
    border-radius: 8px; overflow: hidden; background: #f5f7fb;
}
.blog-recent-thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-recent-title {
    font-size: 13.5px; font-weight: 600; line-height: 1.4; margin: 0 0 4px;
}
.blog-recent-title a { color: #0a0a0a; text-decoration: none; }
.blog-recent-title a:hover { color: #1a274f; }
.blog-recent-date { font-size: 12px; color: #8a8f9c; }

.blog-tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-tagcloud a {
    background: #f5f7fb; color: #3c4258;
    border: 1px solid #e6e9f2;
    font-size: 12.5px; padding: 5px 12px; border-radius: 20px;
    text-decoration: none; transition: all .15s;
}
.blog-tagcloud a:hover { background: #1a274f; border-color: #1a274f; color: #fff; }

.blog-newsletter-box { background: #1a274f; border: none; }
.blog-newsletter-box h5 { color: #fff; border-color: rgba(255, 255, 255, .15); }
.blog-newsletter-box p { color: rgba(255, 255, 255, .75); font-size: 13.5px; }
.blog-newsletter-box input {
    width: 100%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08);
    color: #fff; border-radius: 8px; padding: 10px 14px; font-size: 14px;
    outline: none; margin-bottom: 10px;
}
.blog-newsletter-box input::placeholder { color: rgba(255, 255, 255, .5); }
.blog-newsletter-box input:focus { border-color: #fff; }
.blog-newsletter-box button {
    width: 100%; background: #fff; color: #1a274f;
    border: none; border-radius: 8px; padding: 11px;
    font-weight: 700; font-size: 14px; cursor: pointer;
    transition: opacity .15s;
}
.blog-newsletter-box button:hover { opacity: .9; }

/* ---------- Pagination ---------- */
.blog-pagination .pagination { justify-content: center; gap: 6px; }
.blog-pagination .page-link {
    color: #1a274f; border: 1px solid #e6e9f2; border-radius: 8px !important;
    padding: 8px 14px; font-weight: 600;
}
.blog-pagination .page-item.active .page-link {
    background: #1a274f; border-color: #1a274f; color: #fff;
}
.blog-pagination .page-link:hover { background: #f5f7fb; color: #1a274f; }

.blog-empty {
    text-align: center; padding: 70px 20px; color: #8a8f9c;
    border: 1px dashed #e6e9f2; border-radius: 14px;
}
.blog-empty i { font-size: 42px; color: #c0c4cf; margin-bottom: 14px; display: block; }

/* ---------- Single post ---------- */
.post-cover {
    border-radius: 14px; overflow: hidden;
    border: 1px solid #e6e9f2; margin-bottom: 34px;
}
.post-cover img { width: 100%; display: block; }

.post-video {
    position: relative; border-radius: 14px; overflow: hidden;
    border: 1px solid #e6e9f2; margin-bottom: 34px;
    aspect-ratio: 16 / 9; background: #0a0a0a;
}
.post-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.post-content {
    color: #1f2433; font-size: 16.5px; line-height: 1.85;
}
.post-content h2, .post-content h3, .post-content h4 {
    color: #1a274f; font-weight: 700; margin: 1.6em 0 .6em;
}
.post-content h2 { font-size: 26px; }
.post-content h3 { font-size: 21px; }
.post-content h4 { font-size: 18px; }
.post-content p { margin-bottom: 1.2em; }
.post-content a { color: #1a274f; font-weight: 600; }
.post-content img {
    max-width: 100%; height: auto; border-radius: 12px;
    border: 1px solid #e6e9f2; margin: 10px 0;
}
.post-content blockquote {
    border-inline-start: 4px solid #1a274f;
    background: #f5f7fb;
    border-start-end-radius: 10px; border-end-end-radius: 10px;
    padding: 18px 22px; margin: 1.5em 0;
    color: #3c4258; font-style: italic;
}
.post-content ul, .post-content ol { padding-inline-start: 1.4em; margin-bottom: 1.2em; }
.post-content li { margin-bottom: .4em; }
.post-content table {
    width: 100%; border-collapse: collapse; margin: 1.4em 0;
    border: 1px solid #e6e9f2; border-radius: 10px; overflow: hidden;
}
.post-content th {
    background: #1a274f; color: #fff; padding: 10px 14px;
    text-align: start; font-size: 14px;
}
.post-content td { padding: 10px 14px; border-top: 1px solid #e6e9f2; font-size: 14.5px; }
.post-content iframe { max-width: 100%; border-radius: 12px; }

.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 36px 0 0; }
.post-tags a {
    background: #f5f7fb; color: #3c4258; border: 1px solid #e6e9f2;
    font-size: 12.5px; padding: 5px 12px; border-radius: 20px;
    text-decoration: none; transition: all .15s;
}
.post-tags a:hover { background: #1a274f; border-color: #1a274f; color: #fff; }

.post-translations {
    display: flex; align-items: center; gap: 10px;
    background: #f5f7fb; border: 1px solid #e6e9f2; border-radius: 10px;
    padding: 12px 16px; margin-top: 26px; font-size: 13.5px; color: #5b6478;
}
.post-translations a {
    background: #fff; color: #1a274f; border: 1px solid #e6e9f2;
    font-weight: 700; font-size: 12px; text-decoration: none;
    padding: 4px 10px; border-radius: 6px; text-transform: uppercase;
}
.post-translations a:hover { background: #1a274f; border-color: #1a274f; color: #fff; }

.post-related { margin-top: 60px; }
.post-related h4 {
    color: #1a274f; font-size: 21px; font-weight: 700; margin-bottom: 22px;
}

/* ---------- Flash messages (brand-only: navy / black / white) ----------
   The newsletter form reuses Bootstrap's .alert-success / .alert-warning, which
   are green / yellow. The design rule is navy + black + white only, so we
   re-skin them within the blog scope (this file only loads on blog pages, so
   nothing else on the site is affected). Success and error stay distinguishable
   via the left accent (navy vs black). */
.blog-section .alert,
.post-section .alert {
    background: #eef1f8;
    border: 1px solid #1a274f;
    border-inline-start: 4px solid #1a274f;
    color: #1a274f;
}
.blog-section .alert-warning,
.post-section .alert-warning,
.blog-section .alert-danger,
.post-section .alert-danger {
    background: #fff;
    border-color: #1a274f;
    border-inline-start: 4px solid #0a0a0a;
    color: #1a274f;
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
    .blog-page-header,
    .post-header { padding: 34px 0 28px; margin-bottom: 30px; }
    .blog-page-header h1,
    .post-header h1 { font-size: 26px; }
    .post-content { font-size: 15.5px; }
}