/* ============================================================
   Blog Stylesheet - extends main site style
   ============================================================ */

/* ---- BLOG LISTING ---- */
.blog-hero {
    background: linear-gradient(135deg, #1a3a5c 0%, #2e6da4 100%);
    color: #fff;
    padding: 60px 24px;
    text-align: center;
}
.blog-hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; margin-bottom: 10px; }
.blog-hero p  { font-size: 1.05rem; opacity: 0.88; }

.blog-section { padding: 60px 24px; background: #e8f0fb; min-height: 60vh; }
.blog-container { max-width: 860px; margin: 0 auto; }

.post-card {
    background: #fff;
    border-radius: 14px;
    padding: 32px 36px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(26,58,92,0.09);
    border-left: 5px solid #5a7fbf;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(26,58,92,0.14); }
.post-card-meta { font-size: 0.82rem; color: #888; margin-bottom: 10px; }
.post-card-meta i { color: #00b4d8; margin-right: 4px; }
.post-card h2 { font-size: 1.25rem; font-weight: 700; color: #1a3a5c; margin-bottom: 10px; }
.post-card h2 a { color: #1a3a5c; text-decoration: none; transition: color 0.2s; }
.post-card h2 a:hover { color: #00b4d8; }
.post-card p { color: #555; font-size: 0.95rem; line-height: 1.7; margin-bottom: 16px; }
.read-more {
    display: inline-block;
    color: #2e6da4;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s;
}
.read-more:hover { border-color: #00b4d8; color: #00b4d8; }

/* ---- PAGINATION ---- */
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 36px;
    flex-wrap: wrap;
}
.pagination a, .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s;
}
.pagination a { background: #fff; color: #2e6da4; box-shadow: 0 2px 8px rgba(26,58,92,0.1); }
.pagination a:hover { background: #2e6da4; color: #fff; }
.pagination span { background: #2e6da4; color: #fff; }
.pagination .prev-next { width: auto; padding: 0 16px; }

/* ---- SINGLE POST ---- */
.post-hero {
    background: linear-gradient(135deg, #1a3a5c 0%, #2e6da4 100%);
    color: #fff;
    padding: 60px 24px 40px;
    text-align: center;
}
.post-hero h1 { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 800; line-height: 1.2; max-width: 820px; margin: 0 auto 14px; }
.post-hero .post-meta { font-size: 0.88rem; opacity: 0.75; }
.post-hero .post-meta i { margin-right: 5px; color: #00b4d8; }

.post-body-section { padding: 50px 24px 60px; background: #e8f0fb; }
.post-body-wrap { max-width: 820px; margin: 0 auto; }

.post-content-card {
    background: #fff;
    border-radius: 14px;
    padding: 44px 48px;
    box-shadow: 0 4px 24px rgba(26,58,92,0.09);
}
.post-divider {
    border: none;
    border-top: 2px solid #b3cbf3;
    margin: 0 0 32px 0;
}
.post-content { color: #333; font-size: 1rem; line-height: 1.85; }
.post-content h2 { color: #1a3a5c; font-size: 1.3rem; margin: 28px 0 12px; }
.post-content h3 { color: #2e6da4; font-size: 1.1rem; margin: 22px 0 10px; }
.post-content p  { margin-bottom: 18px; }
.post-content ul, .post-content ol { margin: 0 0 18px 24px; }
.post-content li { margin-bottom: 6px; }
.post-content a  { color: #2e6da4; }
.post-content blockquote {
    border-left: 4px solid #00b4d8;
    padding: 12px 20px;
    background: #e8f0fb;
    border-radius: 0 8px 8px 0;
    margin: 20px 0;
    font-style: italic;
    color: #555;
}

/* ---- SHARE BUTTONS ---- */
.share-section { margin-top: 36px; padding-top: 28px; border-top: 1px solid #e0e8f5; }
.share-section h4 { font-size: 0.95rem; font-weight: 700; color: #1a3a5c; margin-bottom: 14px; }
.share-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    border: none;
    transition: opacity 0.2s, transform 0.2s;
}
.share-btn:hover { opacity: 0.88; transform: translateY(-2px); color: #fff; }
.share-facebook  { background: #1877f2; }
.share-twitter   { background: #000; }
.share-linkedin  { background: #0a66c2; }
.share-pinterest { background: #e60023; }
.share-email     { background: #5a7fbf; }
.share-copy      { background: #2e6da4; }
.share-copy.copied { background: #28a745; }

/* ---- EDIT BUTTON ---- */
.edit-bar {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 10px;
    padding: 12px 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.edit-bar span { font-size: 0.88rem; color: #856404; font-weight: 600; }
.btn-edit {
    background: #1a3a5c;
    color: #fff;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}
.btn-edit:hover { background: #2e6da4; color: #fff; }

/* ---- ADMIN PANEL ---- */
.admin-wrap {
    min-height: 100vh;
    background: #e8f0fb;
    font-family: 'Inter', sans-serif;
}
.admin-topbar {
    background: #1a3a5c;
    color: #fff;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.admin-topbar .brand { font-size: 1rem; font-weight: 700; color: #fff; text-decoration: none; }
.admin-topbar .brand span { color: #00b4d8; }
.admin-topbar nav a { color: rgba(255,255,255,0.75); font-size: 0.88rem; margin-left: 20px; text-decoration: none; transition: color 0.2s; }
.admin-topbar nav a:hover { color: #fff; }
.admin-topbar nav a.active { color: #00b4d8; font-weight: 600; }

.admin-main { max-width: 1100px; margin: 36px auto; padding: 0 24px; }
.admin-card {
    background: #fff;
    border-radius: 14px;
    padding: 36px;
    box-shadow: 0 4px 20px rgba(26,58,92,0.09);
    margin-bottom: 24px;
}
.admin-card h2 { color: #1a3a5c; font-size: 1.3rem; font-weight: 700; margin-bottom: 24px; border-bottom: 2px solid #e8f0fb; padding-bottom: 14px; }

.admin-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.admin-table th { background: #e8f0fb; color: #1a3a5c; font-weight: 700; padding: 12px 16px; text-align: left; }
.admin-table td { padding: 12px 16px; border-bottom: 1px solid #f0f4fb; color: #444; vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: #fafcff; }

.badge-published { background: #d4edda; color: #155724; padding: 3px 10px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; }
.badge-draft     { background: #fff3cd; color: #856404; padding: 3px 10px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; }

.admin-form-group { margin-bottom: 20px; }
.admin-form-group label { display: block; font-weight: 600; color: #1a3a5c; font-size: 0.9rem; margin-bottom: 7px; }
.admin-form-group input[type="text"],
.admin-form-group input[type="password"],
.admin-form-group input[type="email"],
.admin-form-group select,
.admin-form-group textarea {
    width: 100%;
    padding: 11px 15px;
    border: 2px solid #d0dce8;
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: inherit;
    color: #222;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fafcff;
}
.admin-form-group input:focus,
.admin-form-group select:focus,
.admin-form-group textarea:focus {
    outline: none;
    border-color: #5a7fbf;
    box-shadow: 0 0 0 3px rgba(90,127,191,0.18);
}
.admin-form-group textarea { min-height: 120px; resize: vertical; }
.admin-hint { font-size: 0.8rem; color: #888; margin-top: 5px; }

.btn-admin-primary {
    background: #1a3a5c;
    color: #fff;
    padding: 11px 28px;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    display: inline-block;
}
.btn-admin-primary:hover { background: #2e6da4; color: #fff; }
.btn-admin-success { background: #28a745; }
.btn-admin-success:hover { background: #218838; }
.btn-admin-danger  { background: #dc3545; color: #fff; padding: 6px 14px; border: none; border-radius: 7px; font-size: 0.82rem; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; transition: background 0.2s; }
.btn-admin-danger:hover { background: #b02a37; }
.btn-admin-edit { background: #5a7fbf; color: #fff; padding: 6px 14px; border-radius: 7px; font-size: 0.82rem; font-weight: 600; text-decoration: none; display: inline-block; transition: background 0.2s; }
.btn-admin-edit:hover { background: #2e6da4; color: #fff; }
.btn-admin-new { background: #00b4d8; color: #fff; padding: 10px 22px; border-radius: 10px; font-size: 0.9rem; font-weight: 700; text-decoration: none; display: inline-block; transition: background 0.2s; float: right; }
.btn-admin-new:hover { background: #0096b5; color: #fff; }

/* Auth pages */
.auth-wrap {
    min-height: 100vh;
    background: linear-gradient(135deg, #1a3a5c 0%, #2e6da4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: 'Inter', sans-serif;
}
.auth-card {
    background: #fff;
    border-radius: 16px;
    padding: 44px 40px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}
.auth-logo { text-align: center; margin-bottom: 28px; }
.auth-logo h1 { font-size: 1.2rem; font-weight: 800; color: #1a3a5c; }
.auth-logo p { font-size: 0.82rem; color: #888; margin-top: 4px; }
.auth-card h2 { font-size: 1.15rem; font-weight: 700; color: #1a3a5c; margin-bottom: 22px; text-align: center; }
.auth-link { text-align: center; margin-top: 18px; font-size: 0.88rem; color: #666; }
.auth-link a { color: #2e6da4; font-weight: 600; text-decoration: none; }
.auth-alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 0.9rem; font-weight: 600; }
.auth-alert.error   { background: #f8d7da; color: #721c24; }
.auth-alert.success { background: #d4edda; color: #155724; }

@media (max-width: 600px) {
    .post-content-card { padding: 24px 18px; }
    .share-buttons { gap: 7px; }
    .share-btn { padding: 8px 13px; font-size: 0.78rem; }
    .admin-card { padding: 22px 16px; }
    .auth-card { padding: 32px 22px; }
}