/* Blog Detail (single post) page. Scoped to .mahima-blog-detail-meta / .mahima-blog-sidebar-* so it never bleeds elsewhere. */

/* Hide the Easy Table of Contents plugin's auto-injected box. */
#ez-toc-container {
    display: none;
}

/* When a sidebar shortcode returns nothing (e.g. Categories hidden because only
   "Uncategorized" exists), the widget wrapper still occupies one flex "gap" of empty
   space above the next box. Removing it from flex layout entirely avoids that gap. */
.mahima-blog-detail-columns__sidebar .elementor-widget-shortcode:has(.elementor-shortcode:empty) {
    display: none;
}

/* "Share this article" row (AddToAny plugin buttons, styled as plain circular icons). */
.mahima-blog-share {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    font-family: "Sentinel Pro", sans-serif;
}

.mahima-blog-share__label {
    font-size: 14px;
    font-weight: 700;
    color: #5a5a5a;
}

.mahima-blog-share .a2a_kit {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Let AddToAny's own brand colors show (Facebook blue, LinkedIn blue, Twitter blue,
   WhatsApp green) but force a proper circle — AddToAny's default shape is a
   rounded square, not a circle. */
.mahima-blog-share .a2a_svg {
    border-radius: 50% !important;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mahima-blog-share a:hover .a2a_svg {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

/* End-of-content CTA linking to Projects. */
.mahima-blog-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 0;
    padding: 20px 28px;
    background: #F4F2EE;
    border-radius: 10px;
    font-family: "Sentinel Pro", sans-serif;
}

.mahima-blog-cta__text {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 16px;
    font-weight: 500;
    color: #232323;
}

.mahima-blog-cta__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4em;
    font-size: 24px;
    color: #D9B26B;
}

.mahima-blog-cta__icon::before {
    content: "\f256";
    font-family: "FontAwesome";
    font-weight: normal;
}

.mahima-blog-cta__button {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    background: #D9B26B;
    color: #25377C;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    border-radius: 6px;
    white-space: nowrap;
    transition: background 0.3s ease, transform 0.3s ease;
}

.mahima-blog-cta__button:hover {
    background: #25377C;
    color: #ffffff;
    transform: translateY(-2px);
}

@media (max-width: 600px) {
    .mahima-blog-cta {
        flex-direction: column;
        align-items: flex-start;
    }
    .mahima-blog-cta__button {
        width: 100%;
        justify-content: center;
    }
}

/* Post body headings (the actual WYSIWYG content, e.g. "What Is Green Living?") — leaf
   icon before, thin gold rule after, homepage's section-heading font, lighter weight
   than the theme default. Applies uniformly to EVERY heading level (h1–h6) since
   different posts' content uses different tags — same treatment regardless of level.
   Paragraphs are left completely untouched. */
.elementor-widget-theme-post-content h1,
.elementor-widget-theme-post-content h2,
.elementor-widget-theme-post-content h3,
.elementor-widget-theme-post-content h4,
.elementor-widget-theme-post-content h5,
.elementor-widget-theme-post-content h6 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 24px 0 14px !important;
    font-family: "Futura Std", sans-serif !important;
    /* The "Futura Std" custom font only has a single registered weight (400/Book) —
       requesting 500 has no matching @font-face and renders inconsistently (browser-
       dependent synthetic bold) across pages. 400 is the only weight guaranteed to
       render identically everywhere. */
    font-weight: 400 !important;
    font-size: clamp(20px, 3.2vw, 28px) !important;
}

.elementor-widget-theme-post-content h1::before,
.elementor-widget-theme-post-content h2::before,
.elementor-widget-theme-post-content h3::before,
.elementor-widget-theme-post-content h4::before,
.elementor-widget-theme-post-content h5::before,
.elementor-widget-theme-post-content h6::before {
    content: "\f06c";
    font-family: "FontAwesome";
    font-weight: normal;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3em;
    font-size: 0.75em;
    color: #D9B26B;
}

.elementor-widget-theme-post-content h1::after,
.elementor-widget-theme-post-content h2::after,
.elementor-widget-theme-post-content h3::after,
.elementor-widget-theme-post-content h4::after,
.elementor-widget-theme-post-content h5::after,
.elementor-widget-theme-post-content h6::after {
    content: "";
    flex: 1 1 40px;
    height: 2px;
    min-width: 30px;
    background: #D9B26B;
    margin-left: 4px;
}

.elementor-widget-theme-post-content p {
    margin-bottom: clamp(1rem, 3vw, 2.5rem);
}

/* Narrow screens: the heading text needs the room, drop the decorative rule instead
   of letting it squeeze the title into a one-word-per-line wrap. */
@media (max-width: 480px) {
    .elementor-widget-theme-post-content h1::after,
    .elementor-widget-theme-post-content h2::after,
    .elementor-widget-theme-post-content h3::after,
    .elementor-widget-theme-post-content h4::after,
    .elementor-widget-theme-post-content h5::after,
    .elementor-widget-theme-post-content h6::after {
        display: none;
    }
}

.mahima-blog-detail-meta {
    font-family: "Sentinel Pro", sans-serif;
}

.mahima-blog-detail-meta__underline {
    display: block;
    width: 64px;
    height: 3px;
    background: #D9B26B;
    margin: 12px 0 16px;
}

.mahima-blog-detail-meta__desc {
    margin: 0 0 16px;
    font-size: clamp(18px, 2.2vw, 20px);
    font-weight: 500;
    line-height: 1.6;
    color: #ffffff;
    max-width: 640px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85), 0 1px 2px rgba(0, 0, 0, 0.6);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mahima-blog-detail-meta__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(12px, 2vw, 20px);
    font-size: clamp(16px, 1.8vw, 18px);
}

.mahima-blog-detail-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: clamp(16px, 1.8vw, 18px);
    font-weight: 500;
    color: #ffffff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85), 0 1px 2px rgba(0, 0, 0, 0.6);
}

.mahima-blog-detail-meta__item svg {
    flex-shrink: 0;
    color: #D9B26B;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Post title over the banner image — same contrast treatment. */
.elementor-element-5ec06b52 .elementor-heading-title {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Breadcrumb (Yoast [wpseo_breadcrumb], widget id 4eeaf22) sits over the same busy
   banner image — needs the same contrast help. */
.elementor-element-4eeaf22 .elementor-shortcode,
.elementor-element-4eeaf22 .elementor-shortcode a,
.elementor-element-4eeaf22 .elementor-shortcode span {
    color: #ffffff !important;
    font-size: clamp(17px, 1.9vw, 20px) !important;
    font-weight: 500;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85), 0 1px 2px rgba(0, 0, 0, 0.6);
}

.elementor-element-4eeaf22,
.elementor-element-4eeaf22 .elementor-shortcode {
    text-align: left !important;
}

.elementor-element-4eeaf22 .elementor-shortcode a {
    transition: color 0.3s ease;
}

.elementor-element-4eeaf22 .elementor-shortcode a:hover {
    color: #D9B26B !important;
}

/* ---- Two-column content layout ---- */

.mahima-blog-detail-columns {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    /* Elementor gives every container a default 10px padding — stacks on top of the
       16px the outer content wrapper already applies on mobile. Zero it out here. */
    padding: 0 !important;
}

.mahima-blog-detail-columns__main {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 !important;
}

.mahima-blog-detail-columns__sidebar {
    flex: 0 0 400px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 !important;
}

@media (max-width: 1024px) {
    /* The real flex layout lives on Elementor's own nested .e-con-inner (which reads
       direction from a per-element CSS var set in the container's own JSON settings,
       not from this class) — overriding flex-direction on the outer wrapper alone
       does nothing. Must target .e-con-inner directly, with !important since the
       per-element var-driven rule has equal specificity and loads after this file. */
    .mahima-blog-detail-columns > .e-con-inner {
        flex-direction: column !important;
    }
    .mahima-blog-detail-columns__main,
    .mahima-blog-detail-columns__sidebar {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ---- Sidebar boxes ---- */

.mahima-blog-sidebar-box {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 24px;
    font-family: "Sentinel Pro", sans-serif;
}

.mahima-blog-sidebar-box__title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 600;
    color: #232323;
}

.mahima-blog-sidebar-box__title::before {
    content: "\f06c";
    font-family: "FontAwesome";
    font-weight: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    font-size: 0.8em;
    color: #D9B26B;
}

.mahima-blog-sidebar-box__text {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.6;
    color: #5a5a5a;
}

.mahima-blog-sidebar-categories {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mahima-blog-sidebar-categories li + li {
    border-top: 1px solid #f0f0f0;
}

.mahima-blog-sidebar-categories a {
    display: block;
    padding: 10px 0;
    color: #444444;
    font-size: 15px;
    text-decoration: none;
}

.mahima-blog-sidebar-categories a:hover {
    color: #25377C;
}

.mahima-blog-sidebar-latest {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.mahima-blog-sidebar-latest li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.mahima-blog-sidebar-latest__thumb {
    flex-shrink: 0;
    display: block;
    width: 100px;
    height: 72px;
    border-radius: 6px;
    overflow: hidden;
}

.mahima-blog-sidebar-latest__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.mahima-blog-sidebar-latest li:hover .mahima-blog-sidebar-latest__thumb img {
    transform: scale(1.1);
}

.mahima-blog-sidebar-latest__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mahima-blog-sidebar-latest__title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #232323;
    text-decoration: none;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mahima-blog-sidebar-latest__title:hover {
    color: #25377C;
}

.mahima-blog-sidebar-latest__date {
    font-size: 12px;
    color: #999999;
}

/* ---- Newsletter box: styles the site's existing CF7 "Newsletter Form" ---- */

.mahima-blog-sidebar-box--newsletter {
    background: #34479B;
}

.mahima-blog-sidebar-box--newsletter .mahima-blog-sidebar-box__title,
.mahima-blog-sidebar-box--newsletter .mahima-blog-sidebar-box__text {
    color: #ffffff;
}

.mahima-blog-sidebar-box--newsletter .mahima-blog-sidebar-box__text {
    color: rgba(255, 255, 255, 0.8);
}

.mahima-blog-sidebar-box--newsletter .newsletter_form {
    display: flex;
    gap: 8px;
}

.mahima-blog-sidebar-box--newsletter .newsletter_form > div:first-child {
    flex: 1 1 auto;
}

.mahima-blog-sidebar-box--newsletter .wpcf7-form-control-wrap {
    display: block;
}

.mahima-blog-sidebar-box--newsletter input[type="email"] {
    width: 100% !important;
    height: 44px !important;
    background: #ffffff !important;
    color: #232323 !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
}

.mahima-blog-sidebar-box--newsletter input[type="email"]::placeholder {
    color: #888888;
}

.mahima-blog-sidebar-box--newsletter .form-button {
    height: 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: #D9B26B !important;
    color: #25377C !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer;
}

.mahima-blog-sidebar-box--newsletter .form-button svg path {
    fill: #25377C;
}

.mahima-blog-sidebar-box--newsletter .wpcf7-response-output {
    color: #ffffff;
    font-size: 12px;
    margin: 8px 0 0;
    border-color: rgba(255, 255, 255, 0.4) !important;
}