/* Modern single-post components — layered on top of the existing theme identity
   (colors/fonts pulled from :root and skin-1.css), scoped to avoid touching
   shared .dz-share-post / .dz-social-icon classes used elsewhere on the site. */

.read-progress {
    position: fixed;
    top: 0;
    inset-inline: 0;
    height: 3px;
    background: rgba(0, 0, 0, 0.08);
    z-index: 1200;
    pointer-events: none;
}

/* Keep the shared detail banner inside the viewport on narrow screens. */
.dz-bnr-inr#my-element {
    min-height: 220px;
    height: auto;
    background-position: center;
    background-size: cover;
}

.read-progress__bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--primary-hover, var(--primary)));
    transition: width 0.12s linear;
}

.post-meta-modern {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin: 1rem 0 1.75rem;
    padding: 0.9rem 1.15rem;
    background: rgba(97, 91, 31, 0.06);
    border-inline-start: 3px solid var(--primary);
    border-radius: 10px;
    font-size: 0.92rem;
    color: #55524a;
}

.post-meta-modern__item {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    min-height: 38px;
    padding: 0.35rem 0.72rem;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(97, 91, 31, 0.13);
    border-radius: 999px;
    white-space: nowrap;
}

.post-ui-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--primary);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.post-meta-modern__value {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    unicode-bidi: isolate;
}

.post-meta-modern__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.post-meta-modern__tag {
    background: var(--primary);
    color: #fff;
    padding: 0.22rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.6;
}

.post-fontctrl {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #f7f6f1;
    border: 1px solid #e7e3d3;
    border-radius: 999px;
    padding: 0.3rem 0.4rem 0.3rem 0.9rem;
}

.post-fontctrl .fontSize {
    font-size: 0.85rem;
    color: #7a7669;
}

.post-fontctrl button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e2ded0;
    background: #fff;
    color: #3a382f;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.post-fontctrl button:hover,
.post-fontctrl button:focus-visible {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.post-share-modern {
    position: relative;
    margin: 2rem 0;
    padding: 1.25rem 1.35rem;
    border-radius: 16px;
    background: linear-gradient(180deg, #fbfaf5, #f2efe2);
    border: 1px solid #ece6d3;
}

.post-share-modern__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.9rem;
    font-weight: 700;
    color: var(--secondary, #192436);
}

.post-share-modern__label .post-ui-icon {
    color: var(--primary);
}

.post-share-modern__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.post-share-modern__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff !important;
    font-size: 1.05rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(25, 36, 54, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.post-share-modern__btn svg {
    width: 19px;
    height: 19px;
    pointer-events: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.post-share-modern__btn svg .post-ui-icon--fill,
.post-share-modern__btn--x svg {
    fill: currentColor;
    stroke: none;
}

.post-share-modern__btn:hover,
.post-share-modern__btn:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(25, 36, 54, 0.2);
    filter: brightness(1.05);
    color: #fff;
}

.post-share-modern__btn--facebook { background: #1877f2; }
.post-share-modern__btn--x { background: #0a0a0a; }
.post-share-modern__btn--telegram { background: #26a5e4; }
.post-share-modern__btn--whatsapp { background: #25d366; }
.post-share-modern__btn--copy { background: var(--secondary, #192436); }
.post-share-modern__btn--print { background: #6c757d; }

.post-share-modern__toast {
    position: fixed;
    inset-inline: 0;
    bottom: 28px;
    margin: 0 auto;
    width: max-content;
    max-width: 90vw;
    background: var(--secondary, #192436);
    color: #fff;
    padding: 0.6rem 1.25rem;
    border-radius: 999px;
    font-size: 0.9rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    z-index: 1300;
    pointer-events: none;
}

.post-share-modern__toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* The issuer/position holder is a field of its own, kept out of the article
   body's HTML, but rendered inside .post-body so it inherits the exact same
   typography as the rest of the article. Only the alignment is forced to
   the left, regardless of the writer's own alignment choices in the editor.
   custom.css forces ".post-body *{text-align:justify}" with !important so
   saved per-paragraph alignment from the editor can never break the always-
   justified body text; matching !important here keeps this more specific
   selector winning over it. */
.post-body .post-issuer,
.post-body .post-issuer span {
    text-align: left !important;
}

.post-body .post-issuer {
    margin-top: 1.25rem;
}

.post-body .post-issuer span {
    display: block;
}

@media (max-width: 575.98px) {
    /* Previously hidden outright on phones; give it a compact height instead
       so the article keeps its banner like every other page does. */
    .dz-bnr-inr#my-element {
        min-height: 0;
        height: 190px;
    }

    .dz-bnr-inr#my-element .dz-bnr-inr-entry {
        height: 190px;
    }

    .dz-bnr-inr#my-element h1,
    .dz-bnr-inr#my-element .h1 {
        font-size: 22px;
    }

    .post-details-style {
        margin-block: 24px;
        padding: 24px 16px;
        border-radius: 10px;
    }

    .post-meta-modern {
        justify-content: flex-start;
        font-size: 0.85rem;
        padding: 0.75rem 0.9rem;
    }

    .post-share-modern__btn {
        width: 40px;
        height: 40px;
    }
}