/* ==========================================================================
   Medi4u — blog index + article. Layered over the legacy inline styles of blog/index.php and blog/post.php
   ========================================================================== */

.m4-blog { font-family: var(--f-body); }
.m4-blog .m4-abha { border-color: var(--orange-d); color: var(--orange-d); }
.m4-blog .m4-abha:hover { background: var(--orange-d); border-color: var(--orange-d); color: #fff; }
.m4-blog .breadcrumb-bar { background: transparent; border-bottom: 1px solid var(--line); padding: 14px 0; }
.m4-blog .breadcrumb-bar a { color: var(--teal-d); font-weight: 600; }
.m4-blog .breadcrumb-bar a:hover { color: var(--orange-d); }

/* hero */
.m4-blog .blog-hero, .m4-blog .post-hero { background: var(--ink) !important; position: relative; overflow: hidden; }
.m4-blog .blog-hero::before, .m4-blog .post-hero::before { content: ""; position: absolute; width: 700px; height: 700px; right: -220px; top: -320px; left: auto; bottom: auto; border-radius: 50%; background: radial-gradient(circle, rgba(0, 150, 136, .4), transparent 64%) !important; opacity: 1 !important; }
.m4-blog .blog-hero::after, .m4-blog .post-hero::after { content: none; }
.m4-blog .blog-hero h1, .m4-blog .post-hero h1 { font-family: var(--f-display) !important; font-weight: 600 !important; letter-spacing: -.026em; color: #fff; text-wrap: balance; }
.m4-blog .hero-badge-blog { background: rgba(54, 201, 182, .12) !important; border: 1px solid rgba(54, 201, 182, .35) !important; color: var(--teal-b) !important; font-family: var(--f-mono); font-size: .7rem !important; letter-spacing: .14em; text-transform: uppercase; }
.m4-blog .blog-hero p, .m4-blog .post-hero p { color: rgba(255, 255, 255, .78); }

/* filters */
.m4-blog .category-filter { background: #fff; border-bottom: 1px solid var(--line); }
.m4-blog .filter-btn { border-radius: 999px; font-weight: 600; transition: background .25s, color .25s, border-color .25s; }
.m4-blog .filter-btn:hover, .m4-blog .filter-btn.active { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }

/* cards + headings */
.m4-blog .featured-body h2, .m4-blog .section-heading, .m4-blog .blog-card-body h5, .m4-blog .sidebar-card h5,
.m4-blog .sidebar-post-body h6, .m4-blog .pn-title, .m4-blog .tags-section h6, .m4-blog .share-section h6 { font-family: var(--f-display); color: var(--ink); font-weight: 600; letter-spacing: -.012em; }
.m4-blog .featured-card, .m4-blog .blog-card, .m4-blog .sidebar-card { border: 1px solid var(--line); border-radius: 22px; box-shadow: none; transition: transform .45s var(--ease-out), box-shadow .45s, border-color .3s; }
.m4-blog .featured-card:hover, .m4-blog .blog-card:hover { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: var(--teal-l); }
.m4-blog .tag { background: var(--teal-50) !important; color: var(--teal-d) !important; }
.m4-blog .card-read-link, .m4-blog .read-link { color: var(--ink) !important; background: none !important; padding: 0 !important; font-weight: 700; }
.m4-blog .card-read-link:hover, .m4-blog .read-link:hover { color: var(--teal-d) !important; }
.m4-blog .cat-ABDM, .m4-blog .cat-ABDM-s { background: var(--teal-50) !important; color: var(--teal-d) !important; }

/* article body */
.m4-blog .article-body h2 { font-family: var(--f-display); color: var(--ink); font-weight: 600; letter-spacing: -.02em; }
.m4-blog .article-body h3 { font-family: var(--f-display); color: var(--teal-d); font-weight: 600; }
.m4-blog .article-body strong { color: var(--ink); }
.m4-blog .article-body a { color: var(--teal-d); text-decoration: underline; text-decoration-color: rgba(0, 150, 136, .35); text-underline-offset: 3px; }
.m4-blog .article-body a:hover { color: var(--orange-d); }
.m4-blog .article-body table th { background: var(--ink); }
.m4-blog .share-copy { background: var(--teal-50); color: var(--teal-d); }

/* dark CTA blocks */
.m4-blog .cta-section, .m4-blog .cta-sidebar { position: relative; overflow: hidden; background: var(--ink) !important; }
.m4-blog .cta-section { background: var(--teal-d) !important; }
.m4-blog .cta-section h2, .m4-blog .cta-sidebar h5 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.02em; }
.m4-blog .cta-btn, .m4-blog .cta-sidebar a { background: #fff !important; color: var(--ink) !important; border-radius: 999px; font-weight: 700; transition: background .25s, color .25s, transform .3s var(--ease-out); }
.m4-blog .cta-btn:hover, .m4-blog .cta-sidebar a:hover { background: var(--orange-d) !important; color: #fff !important; transform: translateY(-2px); }

/* ---------- the blog's own lead popup (same class names as the home popup, legacy dark-blue skin) ---------- */
.m4-blog .contact-popup { background: var(--paper); border-radius: 26px; padding: 40px; box-shadow: var(--sh-2); }
.m4-blog .contact-popup .form-header { color: var(--ink); text-align: left; padding-right: 40px; }
.m4-blog .contact-popup .form-header h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.7rem; letter-spacing: -.02em; color: var(--ink); }
.m4-blog .contact-popup .form-header p { color: var(--muted); opacity: 1; }
.m4-blog .contact-popup .form-header .popup-icon, .m4-blog .contact-popup .form-header > div:first-child:not(:only-child) { margin-bottom: 8px; }
.m4-blog .contact-popup .input-wrapper input, .m4-blog .contact-popup .input-wrapper textarea { background: #fff; border: 1.5px solid var(--line); color: var(--ink); border-radius: 14px; padding: 14px 14px 14px 44px; }
.m4-blog .contact-popup .input-wrapper input::placeholder, .m4-blog .contact-popup .input-wrapper textarea::placeholder { color: #8b979a; }
.m4-blog .contact-popup .input-wrapper input:focus, .m4-blog .contact-popup .input-wrapper textarea:focus { border-color: var(--teal); background: #fff; box-shadow: 0 0 0 4px rgba(0, 150, 136, .14); }
.m4-blog .contact-popup .input-icon { color: var(--teal-d); }
.m4-blog .contact-popup .btn-submit { background: var(--ink); border-radius: 999px; height: 54px; padding: 0; }
.m4-blog .contact-popup .btn-submit:hover { background: var(--orange-d); box-shadow: 0 16px 30px -14px rgba(240, 90, 34, .9); transform: none; }
.m4-blog .contact-popup .popup-close { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.m4-blog .contact-popup .popup-close:hover { background: var(--ink); color: #fff; }
@media (max-width: 640px) { .m4-blog .contact-popup { padding: 28px 20px; } }

/* legacy style.css forces `p { margin: 0 !important }`, which left this subtitle off-centre */
.m4-blog .blog-hero p { margin: 0 auto !important; }
.m4-blog .cta-sidebar p, .m4-blog .cta-section p { color: rgba(255, 255, 255, .8) !important; }