/* ============================================================
   detail-fixes.css — corrections for the public detail pages.

   Loaded LAST (after style.css, style1.css, rtl.css, rtl-visual-parity.css and
   direction.css) so these rules win without editing any vendor template file.

   Scope is deliberately narrow. ProjectDetail, GalleryDetail and TeamDetail
   already render their main image correctly (measured at 724px, 724px and 397px
   tall) and are not referenced here at all, so they cannot regress.

   Each block records the defect it fixes and how it was measured.
   ============================================================ */


/* ------------------------------------------------------------
   1. BlogDetail main image was invisible.

   style.css:7655 hides the FIRST image inside .blog-detail_image so the theme
   can cross-fade to a second one on hover:

       .blog-detail_image img:first-child { position:absolute; opacity:0;
                                            filter:blur(10px);
                                            transform:translatex(50%) scalex(2); }
       .news-detail_inner:hover .blog-detail_image img:first-child { opacity:1; }

   That assumes TWO <img> elements. BlogDetail.js emits one, built from the CMS
   image, so the only image on the page IS :first-child - it inherited opacity 0
   and position absolute, nothing was left in flow, and the container collapsed.
   Measured before this fix: container height 0, image opacity 0. The file itself
   was fine (HTTP 200, image/webp, 124 KB); the browser simply never fetched it
   because the box had no height.

   Restoring the visible state for a lone image keeps the cross-fade intact
   wherever two images really are present. Emitting a duplicate <img> from JS was
   rejected: it would download the image twice to satisfy a hover effect the CMS
   has no second image for.
   ------------------------------------------------------------ */
.blog-detail_image img:first-child:only-child {
    position: relative;
    opacity: 1;
    filter: none;
    transform: none;
}


/* ------------------------------------------------------------
   2. ServiceDetail main image was invisible - a different cause.

   style1.css:1234-1247 sets:

       .service-detail_image     { height:100%; display:flex; align-items:flex-start; }
       .service-detail_image img { height:100%; width:auto; object-fit:contain; }

   Neither the section nor its column has a definite height, so height:100%
   resolves against an indefinite parent: the flex container gets no content
   height, and the image then resolves 100% of zero. Measured before this fix:
   container height 0, computed image height exactly 0px, with no rule in any
   stylesheet explicitly setting a height - the percentage chain was collapsing.

   Letting the image size itself and the container follow its content is what
   every other detail page already does.
   ------------------------------------------------------------ */
.service-detail_image {
    height: auto;
    display: block;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.service-detail_image img {
    height: auto;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    display: block;
}


/* ------------------------------------------------------------
   3. BlogDetail article layout.

   This block used to mirror .blog-detail_date_outer for RTL and reserve 200px on
   .blog-detail_meta so the floating date badge could not land on the meta row.
   BlogDetail.js no longer emits either element: the badge was pinned with a
   physical `right:60px` over the image, needed hand-mirroring for Arabic, and
   put the date somewhere a reader does not look for it. The date is now the
   first item of an ordinary flex row, which mirrors itself and cannot collide
   with anything. Those rules are gone rather than left behind - nothing else in
   the site emits those classes (BlogDetail.js is the only file that mentions
   `blog-detail`).

   What replaces them is the article layout itself. It lives here, not in
   style1.css, because this file loads last and the page is built entirely from
   JavaScript, so there is no template CSS to fight - only the theme rules that
   would otherwise leak in.

   .blog-detail_image is deliberately still used for the still image: it already
   carries the uniform 16/9 frame and the `contain` fit shared with the news
   cards (style1.css, end of file), plus fix 1 above.
   ------------------------------------------------------------ */

/* --- header meta row: date, publisher, views ---------------- */
.article-detail_header {
    margin-bottom: var(--sp-5, 1.5rem);
}

.article-detail_meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.article-detail_meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-small, 0.875rem);
    line-height: 1.4;
    color: var(--ft-muted, #51607a);
}

.article-detail_meta-item .icon {
    color: var(--main-color);
    font-size: 1em;
    line-height: 1;
}

/* A date or a view count keeps its own direction, so it cannot reorder against
   the Arabic label sitting beside it. */
.article-detail_meta-value {
    unicode-bidi: isolate;
}

/* --- hero media --------------------------------------------- */
.article-detail_media {
    margin: 0 0 var(--sp-5, 1.5rem);
}

.article-detail_media .blog-detail_image {
    border-radius: var(--radius-lg, 22px);
}

/* The video gets the same frame as the still so a story that has one is not a
   different shape from a story that does not. The dark fill is what shows in the
   letterbox strip while the poster frame loads. */
.article-detail_video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg, 22px);
    background-color: var(--ft-navy, #111d42);
}

/* --- lead paragraph (the Brief column) ---------------------- */
.article-detail_lead {
    margin: 0 0 var(--sp-5, 1.5rem);
    padding-inline-start: 18px;
    border-inline-start: 3px solid var(--main-color);
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    line-height: 1.75;
    font-weight: 500;
    color: var(--ft-ink, #1f2a44);
}

/* --- article body (the rich-text column) -------------------- */
.article-detail_body {
    font-size: var(--fs-body, 1rem);
    line-height: 1.85;
    color: var(--ft-ink, #1f2a44);
    /* A pasted URL with no spaces in it is the usual cause of a detail page
       scrolling sideways on a phone. */
    overflow-wrap: anywhere;
}

.article-detail_body > *:first-child {
    margin-top: 0;
}

.article-detail_body > *:last-child {
    margin-bottom: 0;
}

.article-detail_body p {
    margin: 0 0 var(--sp-4, 1rem);
}

.article-detail_body h1,
.article-detail_body h2,
.article-detail_body h3,
.article-detail_body h4,
.article-detail_body h5,
.article-detail_body h6 {
    margin: var(--sp-6, 2rem) 0 var(--sp-3, 0.75rem);
    line-height: 1.3;
    color: var(--ft-navy, #111d42);
}

.article-detail_body h1 { font-size: var(--fs-h3, 2rem); }
.article-detail_body h2 { font-size: var(--fs-h3, 2rem); }
.article-detail_body h3 { font-size: var(--fs-h4, 1.5rem); }
.article-detail_body h4 { font-size: var(--fs-h5, 1.25rem); }
.article-detail_body h5,
.article-detail_body h6 { font-size: var(--fs-h6, 1.05rem); }

.article-detail_body ul,
.article-detail_body ol {
    margin: 0 0 var(--sp-4, 1rem);
    /* Logical, so the bullets sit on the correct side in Arabic without a
       separate RTL rule. */
    padding-inline-start: 1.4em;
}

.article-detail_body li {
    margin-bottom: 0.5em;
}

.article-detail_body a {
    color: var(--main-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.article-detail_body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md, 14px);
}

.article-detail_body blockquote {
    margin: var(--sp-5, 1.5rem) 0;
    padding: var(--sp-4, 1rem) var(--sp-5, 1.5rem);
    border-inline-start: 4px solid var(--main-color);
    border-radius: var(--radius-sm, 8px);
    background-color: var(--ft-light-gray, #f4f7fb);
    color: var(--ft-ink, #1f2a44);
}

/* Wide content scrolls inside its own box; the page never does. `display:block`
   is what lets a table scroll at all - a table box ignores overflow-x. */
.article-detail_body table,
.article-detail_body pre {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.article-detail_body table {
    width: 100%;
    border-collapse: collapse;
}

.article-detail_body th,
.article-detail_body td {
    padding: 10px 14px;
    border: 1px solid var(--ft-border, #dbe3ef);
    text-align: start;
}

/* Arabic sets slightly looser, so the same body copy stays comfortable in a
   script with taller ascenders and no capital letters to break up the line. */
.rtl .article-detail_body,
[dir="rtl"] .article-detail_body {
    line-height: 2;
}

/* --- document download -------------------------------------- */
.article-detail_actions {
    margin-top: var(--sp-6, 2rem);
}

/* --- related posts sidebar ---------------------------------- */
/* style.css:.post-widget .post .thumb img is `width:100%; height:auto`, so each
   thumbnail took the shape of whatever was uploaded: measured 414x576 for a
   328x456 portrait next to 414x233 for a 1460x820 landscape, in the same short
   list. The widget gets the frame the news cards and the hero already use, so
   the column reads as a list instead of a stack of different-sized pictures.
   Scoped safely - BlogDetail.js is the only file that emits `post-widget`. */
.post-widget .post .thumb {
    aspect-ratio: 16 / 9;
    background-color: var(--ft-light-gray, #f4f7fb);
}

.post-widget .post .thumb a,
.post-widget .post .thumb img {
    width: 100%;
    height: 100%;
}

.post-widget .post .thumb img {
    object-fit: contain;
    object-position: center;
}

@media (max-width: 575.98px) {
    /* Corners this round look wrong once the media is only a few hundred pixels
       across, and the lead's indent is worth more as reading width. */
    .article-detail_media .blog-detail_image,
    .article-detail_video {
        border-radius: var(--radius-md, 14px);
    }

    .article-detail_lead {
        padding-inline-start: 14px;
    }

    .article-detail_meta {
        gap: 8px 16px;
    }
}


/* ------------------------------------------------------------
   4. Footer newsletter: one layout model, not two.

   footer.css:413 positions the submit button absolutely inside the input, while
   style1.css:3811 makes the same .form-group a flex container. An absolutely
   positioned child is out of flex flow, so gap/align-items never applied to it
   and the two models silently disagreed.

   Absolute positioning is the model the visual design depends on (the button
   sits inside the rounded input), so the flex declaration is dropped for this
   box and the RTL inset is made symmetric with LTR - rtl.css:425 used left:0
   against LTR's right:20px, pushing the button flush against the rounded edge in
   Arabic.
   ------------------------------------------------------------ */
.footer-style_three .newsletter-box .form-group {
    display: block;
}

.rtl .newsletter-box .form-group button,
[dir="rtl"] .newsletter-box .form-group button {
    left: 20px;
    right: auto;
}

/* The validation message sits under the input, never beside the button. */
.newsletter-box .field-error,
.newsletter-box #NewsletterStatus {
    display: block;
    width: 100%;
    clear: both;
}