/* SHADA FA ZOO FULL ARTICLE LEGACY FEATURE GLOBAL V2.1
 *
 * Scope: Persian ZOO full article pages only.
 * Purpose:
 * - enforce approved ShadaIRANSans throughout full article UI/content
 * - correct intro/subtitle and metadata typography
 * - remove the old horizontal divider under the intro
 * - leave image placement and ZOO content structure unchanged
 */

.shada-zoo-article,
.shada-zoo-article *,
.shada-zoo-article .pos-content,
.shada-zoo-article .pos-description {
    font-family: ShadaIRANSans, IRANSans, Tahoma, Arial, sans-serif !important;
}

/* Article H1 */
.shada-zoo-article .shada-zoo-article__title,
.shada-zoo-article .shada-zoo-article__title * {
    font-family: ShadaIRANSans, IRANSans, Tahoma, Arial, sans-serif !important;
    font-weight: 900 !important;
}

/* Metadata directly under the article title */
.shada-zoo-article .shada-zoo-article__meta,
.shada-zoo-article .shada-zoo-article__meta *,
.shada-zoo-article .shada-zoo-article__meta a {
    font-family: ShadaIRANSans, IRANSans, Tahoma, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.8 !important;
}

/* Subtitle / intro: approved Persian article opening */
.shada-zoo-article .shada-zoo-article__lead,
.shada-zoo-article .shada-zoo-article__lead *,
.shada-zoo-article .shada-zoo-article__lead p {
    font-family: ShadaIRANSans, IRANSans, Tahoma, Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 2 !important;
}

/* Remove all legacy divider treatments below/around the intro */
.shada-zoo-article .shada-zoo-article__lead {
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
    padding-bottom: 0 !important;
}

.shada-zoo-article .shada-zoo-article__lead::before,
.shada-zoo-article .shada-zoo-article__lead::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
}

.shada-zoo-article .shada-zoo-article__header {
    border-bottom: 0 !important;
    box-shadow: none !important;
}

.shada-zoo-article .shada-zoo-article__header::before,
.shada-zoo-article .shada-zoo-article__header::after {
    content: none !important;
    display: none !important;
}

/* If an old subtitle contains an actual HR, do not render it. */
.shada-zoo-article .shada-zoo-article__lead hr {
    display: none !important;
}

/* Main article body */
.shada-zoo-article .shada-zoo-article__content,
.shada-zoo-article .shada-zoo-article__content p,
.shada-zoo-article .shada-zoo-article__content li,
.shada-zoo-article .shada-zoo-article__content blockquote,
.shada-zoo-article .shada-zoo-article__content td,
.shada-zoo-article .shada-zoo-article__content th {
    font-family: ShadaIRANSans, IRANSans, Tahoma, Arial, sans-serif !important;
    font-size: 17px !important;
    line-height: 2.05 !important;
}

/* Defeat old inline/editor font-family and font-size styling in ordinary article prose. */
.shada-zoo-article .shada-zoo-article__content p *,
.shada-zoo-article .shada-zoo-article__content li * {
    font-family: ShadaIRANSans, IRANSans, Tahoma, Arial, sans-serif !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/* Article headings */
.shada-zoo-article .shada-zoo-article__content h2,
.shada-zoo-article .shada-zoo-article__related h2 {
    font-family: ShadaIRANSans, IRANSans, Tahoma, Arial, sans-serif !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    line-height: 1.6 !important;
}

.shada-zoo-article .shada-zoo-article__content h3 {
    font-family: ShadaIRANSans, IRANSans, Tahoma, Arial, sans-serif !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.65 !important;
}

/* Captions and image-adjacent text */
.shada-zoo-article figcaption,
.shada-zoo-article .caption,
.shada-zoo-article .wp-caption-text {
    font-family: ShadaIRANSans, IRANSans, Tahoma, Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
}

/* Keep article RTL without changing media placement. */
.shada-zoo-article {
    direction: rtl;
    text-align: right;
}

@media (max-width: 760px) {
    .shada-zoo-article .shada-zoo-article__lead,
    .shada-zoo-article .shada-zoo-article__lead *,
    .shada-zoo-article .shada-zoo-article__lead p,
    .shada-zoo-article .shada-zoo-article__content,
    .shada-zoo-article .shada-zoo-article__content p,
    .shada-zoo-article .shada-zoo-article__content li {
        font-size: 16px !important;
    }
}

/* SHADA FA FEATURED ARTICLE IMAGE — GLOBAL BODY FLOW V2.1
 *
 * The dedicated ZOO Image remains separate from Subtitle and Text.
 * Full-width Subtitle/intro renders first.
 * Featured Image then floats on the PHYSICAL LEFT of the article body.
 *
 * Aspect ratio is preserved; no cropping:
 * - landscape images are normally constrained by max-width
 * - portrait images are normally constrained by max-height, so they become
 *   naturally narrower without requiring orientation-detection JavaScript
 * - square images fall naturally between those two behaviours
 *
 * Images manually inserted inside the article Text element are NOT targeted.
 */

/* Both possible ZOO alignment classes are normalised to the approved
   physical-left Persian article presentation. */
.shada-zoo-article > .shada-zoo-article__feature--left,
.shada-zoo-article > .shada-zoo-article__feature--right {
    float: left !important;
    clear: left !important;
    width: auto !important;
    max-width: 36% !important;
    margin: 0.75rem 1.65rem 1.55rem 0 !important;
    padding: 8px !important;
    direction: ltr !important;
    text-align: left !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 70, 78, 0.14) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(15, 70, 78, 0.10) !important;
    box-sizing: border-box !important;
}

/* Remove legacy float/alignment behaviour from nested ZOO/UIkit wrappers. */
.shada-zoo-article > .shada-zoo-article__feature--left > *,
.shada-zoo-article > .shada-zoo-article__feature--right > * {
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Aspect-ratio-aware sizing without crop.
 *
 * Landscape:
 *   max-width ~ 352px, height follows ratio.
 *
 * Portrait:
 *   max-height ~ 416px, width follows ratio, therefore it naturally renders
 *   narrower than a landscape image.
 */
.shada-zoo-article > .shada-zoo-article__feature--left img,
.shada-zoo-article > .shada-zoo-article__feature--right img {
    display: block !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    max-width: min(100%, 352px) !important;
    max-height: 416px !important;
    object-fit: contain !important;
    border-radius: 11px !important;
    margin: 0 !important;
}

/* Keep body wrapping cleanly around the featured image. */
.shada-zoo-article > .shada-zoo-article__content {
    display: block !important;
}

/* Ensure later structural blocks start below the floated featured image. */
.shada-zoo-article > .shada-zoo-article__taxonomy,
.shada-zoo-article > .shada-zoo-article__bottom,
.shada-zoo-article > .shada-zoo-article__related,
.shada-zoo-article > .shada-zoo-article__author {
    clear: both !important;
}

/* Native above/top/bottom images are left unchanged by the desktop flow rule. */

/* Mobile/tablet: stop floating and place the featured image as its own
   centred block between intro and body. */
@media (max-width: 760px) {
    .shada-zoo-article > .shada-zoo-article__feature--left,
    .shada-zoo-article > .shada-zoo-article__feature--right {
        float: none !important;
        clear: both !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0.85rem 0 1.4rem !important;
        text-align: center !important;
    }

    .shada-zoo-article > .shada-zoo-article__feature--left img,
    .shada-zoo-article > .shada-zoo-article__feature--right img {
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: none !important;
        margin: 0 auto !important;
    }
}

/* SHADA FA V2.1 — LEGACY FIRST-BODY-IMAGE FEATURE
 *
 * full.php adds this class ONLY to the first body image when the item has
 * no dedicated ZOO Image/Media. Later Text images remain ordinary body images.
 */
.shada-zoo-article .shada-zoo-article__content img.shada-zoo-article__legacy-feature-image {
    display: block !important;
    float: left !important;
    clear: left !important;

    width: auto !important;
    height: auto !important;
    max-width: min(36%, 352px) !important;
    max-height: 416px !important;
    object-fit: contain !important;

    margin: 0.75rem 1.65rem 1.55rem 0 !important;
    padding: 8px !important;

    background: #ffffff !important;
    border: 1px solid rgba(15, 70, 78, 0.14) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(15, 70, 78, 0.10) !important;
    box-sizing: border-box !important;
}

/* Neutralise old WordPress alignment classes on the selected lead image. */
.shada-zoo-article .shada-zoo-article__content img.shada-zoo-article__legacy-feature-image.alignleft,
.shada-zoo-article .shada-zoo-article__content img.shada-zoo-article__legacy-feature-image.alignright,
.shada-zoo-article .shada-zoo-article__content img.shada-zoo-article__legacy-feature-image.aligncenter {
    float: left !important;
    margin: 0.75rem 1.65rem 1.55rem 0 !important;
}

@media (max-width: 760px) {
    .shada-zoo-article .shada-zoo-article__content img.shada-zoo-article__legacy-feature-image,
    .shada-zoo-article .shada-zoo-article__content img.shada-zoo-article__legacy-feature-image.alignleft,
    .shada-zoo-article .shada-zoo-article__content img.shada-zoo-article__legacy-feature-image.alignright,
    .shada-zoo-article .shada-zoo-article__content img.shada-zoo-article__legacy-feature-image.aligncenter {
        float: none !important;
        clear: both !important;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: none !important;
        margin: 0.85rem auto 1.4rem !important;
    }
}