/*
 * Publication pages — frontend2/news/inner.blade.php.
 *
 * A post whose body has three headings or more is read as a report: a sticky
 * contents beside a reading column, sections that fold, and a progress bar.
 * Shorter posts only pick up the PDF button and the licence line from here.
 *
 * Logical properties throughout, so the same rules lay out the Arabic page
 * right to left and the English one left to right.
 */

/* ---- PDF button and licence line, on every post ---- */
.publication-pdf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #7bb133;
    color: #fff !important;
    text-decoration: none;
    padding: 12px 22px;
    border-radius: 6px;
    font-weight: 600;
}
.publication-pdf:hover { background-color: #6ba02b; color: #fff !important; }
.publication-pdf-icon { flex: none; }

.publication-license {
    margin-top: 28px;
    padding: 12px 16px;
    background-color: #f7f7f7;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    font-size: 14px;
}
.publication-license a { color: #4d7020 !important; text-decoration: none !important; }
.publication-license a:hover { text-decoration: underline !important; }

/* ---- Reading progress ---- */
.publication-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    height: 4px;
    z-index: 10000;
    pointer-events: none;
}
.publication-progress span {
    display: block;
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 0;
    background-color: #7bb133;
}

/* ---- Layout: contents beside the reading column ---- */
.publication-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 24px;
}
.publication-body { min-width: 0; max-width: 760px; }

/* The site hides sideways overflow on html and body. "hidden" makes body a
   scroll container of its own, which never scrolls, and a sticky element
   inside it then never sticks. "clip" hides the overflow just the same
   without that side effect. */
html:has(.publication-layout),
html:has(.publication-layout) body { overflow-x: clip; }

@media (min-width: 992px) {
    .publication-layout {
        grid-template-columns: 270px minmax(0, 1fr);
        gap: 48px;
        align-items: start;
    }
    /* The site's navigation bar pins itself to the top once the page scrolls. */
    .publication-aside {
        position: sticky;
        top: 100px;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* ---- Contents ---- */
.publication-toc {
    background-color: #f7f7f7;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    padding: 16px 12px;
}
.publication-toc-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 8px;
    padding: 0 8px 10px;
    border-bottom: 1px solid #e3e3e3;
}
.publication-toc h2 {
    font-family: FIT_Heavy, sans-serif;
    font-size: 16px;
    color: #050505;
    margin: 0;
    padding: 0;
    border: 0;
}
/* Folds every branch at once, for a reader who wants to see the shape of the
   report before choosing where to go. It says what the next press will do. */
.publication-toc-fold {
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 0;
    font-family: FIT_Medium, sans-serif;
    font-size: 12px;
    line-height: 1.2;
    color: #6f7073;
    cursor: pointer;
}
.publication-toc-fold:hover { color: #050505; text-decoration: underline; }

/* The entry and its fold arrow share one row; the link keeps the whole width
   it had, so the target a reader presses does not shrink. */
.toc-entry { display: flex; align-items: stretch; }
.toc-entry > a { flex: 1 1 auto; min-width: 0; }
.toc-branch-toggle {
    flex: 0 0 auto;
    width: 32px;
    background: none;
    border: 0;
    padding: 0;
    color: #8b8c8f;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.toc-branch-toggle::after {
    content: "";
    width: 7px;
    height: 7px;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(45deg);
    margin-block-start: -3px;
    transition: transform .15s ease;
}
.toc-branch-toggle[aria-expanded="false"]::after {
    transform: rotate(-45deg);
    margin-block-start: 0;
    margin-block-end: -3px;
}
.toc-branch-toggle:hover { background-color: #eef3e6; color: #050505; }
/* A folded branch keeps the parent marked, so the reader still sees where they
   are while its sub-sections are away. */
.publication-toc li.has-children > .toc-entry > a[aria-current="true"] { border-inline-start-color: #7bb133; }
.publication-toc ul { list-style: none; margin: 0; padding: 0; }
.publication-toc li { margin: 0; }
/* Section titles are long and wrap over two or three lines, so a line that
   only breaks on the right does not tell the reader where one entry ends and
   the next begins. A hairline between entries does, and the line inside an
   entry is set tighter than the space around it so each title holds together
   as one block. */
.publication-toc li + li { border-block-start: 1px solid #e6e6e6; }
.publication-toc a {
    display: block;
    padding: 10px;
    border-radius: 4px;
    border-inline-start: 3px solid transparent;
    color: #46474a;
    text-decoration: none;
    font-family: FIT_Medium, sans-serif;
    font-size: 14px;
    line-height: 1.45;
}
/* A sub-section belongs to the entry above it, so it is indented and marked
   by a rail rather than cut off by another full-width rule. */
.publication-toc li.toc-level-3 a {
    position: relative;
    padding-inline-start: 26px;
    font-size: 13px;
    color: #6f7073;
}
.publication-toc li.toc-level-3 a::before {
    content: "";
    position: absolute;
    inset-inline-start: 12px;
    top: 11px;
    bottom: 11px;
    width: 2px;
    border-radius: 1px;
    background-color: #d9dcd4;
}
.publication-toc li.toc-level-3 + li.toc-level-3 { border-block-start-color: #f0f0f0; }
.publication-toc li.has-children > ul > li:first-child { border-block-start: 1px solid #f0f0f0; }
.publication-toc a:hover { background-color: #eef3e6; color: #050505; }
.publication-toc a[aria-current="true"] {
    background-color: #fff;
    color: #050505;
    border-inline-start-color: #7bb133;
    font-family: FIT_Heavy, sans-serif;
}
.publication-toc a:focus-visible,
.publication-toc-toggle:focus-visible,
.publication-section-toggle:focus-visible {
    outline: 2px solid #7bb133;
    outline-offset: 2px;
}

/* On a narrow screen the contents folds behind a button — only once the
   script is there to open it, so without it the list simply shows. */
.publication-toc-toggle {
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    background-color: #f7f7f7;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    font-family: FIT_Heavy, sans-serif;
    font-size: 15px;
    color: #050505;
}
.publication-toc-toggle::after,
.publication-section-toggle::after {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    /* Physical sides on purpose: the chevron is turned by rotation, and
       logical sides would mirror its starting corner on the Arabic page. */
    border-right: 2px solid #7bb133;
    border-bottom: 2px solid #7bb133;
    transform: rotate(45deg); /* pointing down */
    transition: transform 0.2s;
    margin-block-start: -4px;
}
.publication-toc-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); margin-block-start: 4px; }
/* A folded section points along the line, the way the text runs. */
.publication-section-toggle[aria-expanded="false"]::after { transform: rotate(-45deg); margin-block-start: 0; }
/* The site sets its direction in CSS rather than with a dir attribute, which
   :dir() cannot see, so the script reports the direction it finds. */
.publication-layout[data-direction="rtl"] .publication-section-toggle[aria-expanded="false"]::after { transform: rotate(135deg); }

@media (max-width: 991.98px) {
    .publication-aside { margin-bottom: 24px; }
    .publication-aside.is-enhanced .publication-toc-toggle { display: flex; }
    .publication-aside.is-enhanced .publication-toc { display: none; margin-top: 8px; }
    .publication-aside.is-enhanced.is-open .publication-toc { display: block; }
    .publication-aside.is-enhanced .publication-toc h2 { display: none; }
    .publication-aside.is-enhanced .publication-toc-head { justify-content: flex-end; }
}

/* ---- The report itself ---- */
.embedText.publication-body p,
.embedText.publication-body li {
    font-size: 17px;
    line-height: 1.95;
    color: #4a4b4d;
}
.embedText.publication-body p { margin: 0 0 16px; }

/* Arabic reports cite English sources. Letting each paragraph take its
   direction from its own first letter keeps the full stops, brackets and
   return arrows of an English reference on the right side of it. */
.publication-body p,
.publication-body li,
.publication-body td,
.publication-body th,
.publication-body h3,
.publication-body h4,
.publication-section-toggle > span,
.publication-toc a { unicode-bidi: plaintext; text-align: start; }

/* A list the editor aligned (justified, say) carries it on the ul/ol itself;
   the items follow it rather than the rule above. */
.publication-body ul[style*="text-align"] > li,
.publication-body ol[style*="text-align"] > li { text-align: inherit; }

.publication-body [id] { scroll-margin-top: 110px; }

.embedText.publication-body h2 {
    font-size: 24px;
    line-height: 1.5;
    margin: 0;
}
.embedText.publication-body h3 {
    font-family: FIT_Heavy, sans-serif;
    font-size: 19px;
    line-height: 1.55;
    color: #050505;
    margin: 30px 0 10px;
}
.embedText.publication-body h4,
.embedText.publication-body h5,
.embedText.publication-body h6 {
    font-family: FIT_Heavy, sans-serif;
    font-size: 17px;
    color: #050505;
    margin: 24px 0 8px;
}

.publication-body img { max-width: 100%; height: auto; }

.publication-body blockquote {
    margin: 24px 0;
    padding: 14px 18px;
    background-color: #f7f7f7;
    border-inline-start: 4px solid #7bb133;
    border-radius: 4px;
}
.embedText.publication-body blockquote p:last-child { margin-bottom: 0; }

.publication-table { overflow-x: auto; margin: 20px 0; }
.publication-body table { width: 100%; border-collapse: collapse; font-size: 15px; }
.publication-body th { background-color: #f7f7f7; color: #050505; }

/* Footnote markers in the text. */
.embedText.publication-body sup a {
    text-decoration: none !important;
    font-family: FIT_Heavy, sans-serif;
    font-size: 12px;
    padding: 0 2px;
}

/* ---- Sections that fold ---- */
.publication-section { border-bottom: 1px solid #e3e3e3; }
.publication-section:first-child .publication-section-toggle { padding-top: 0; }
.publication-section-toggle {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 22px 0;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
}
.publication-section-toggle:hover { color: #6ba02b; }
.publication-section-toggle > span { flex: 1; }
.publication-section-body { padding-bottom: 18px; }
/* A heading with nothing under it: no arrow, the same height as the others. */
.publication-section-empty > h2 { padding: 22px 0; }
.publication-section-empty > .publication-section-body { display: none; }

/* ---- Footnotes ---- */
.publication-footnotes,
.publication-body ol:has(> li[id^="footnote-"]),
.publication-body ol:has(> li[id^="endnote-"]) {
    margin-top: 36px;
    padding-top: 18px;
    border-top: 1px solid #e3e3e3;
}
/* The heading the page gives the notes takes over their separator. */
.embedText h2.publication-references-title,
.embedText.publication-body h2.publication-references-title {
    margin: 36px 0 14px;
    padding-top: 18px;
    border-top: 1px solid #e3e3e3;
}
.publication-references-title + .publication-footnotes,
.publication-references-title + ol {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
/* Folded with the others, the notes heading is one of the section titles:
   the line between sections is its separator, and the list's own goes. */
.embedText.publication-body .publication-section > h2.publication-references-title {
    margin: 0;
    padding-top: 0;
    border-top: 0;
}
.embedText.publication-body .publication-notes-section .publication-footnotes,
.embedText.publication-body .publication-notes-section ol {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.embedText.publication-body .publication-footnotes li,
.embedText.publication-body .publication-footnotes p {
    font-size: 14px;
    line-height: 1.8;
    color: #58595b;
}
.embedText.publication-body .publication-footnotes p { margin: 0 0 6px; }
.publication-footnotes li:target { background-color: #f3f8ea; border-radius: 4px; }
.embedText.publication-body .publication-footnotes a[href^="#footnote-ref"],
.embedText.publication-body .publication-footnotes a[href^="#endnote-ref"],
.embedText.publication-body .publication-footnotes a[href^="#fnref"] { text-decoration: none !important; }

@media (prefers-reduced-motion: reduce) {
    .publication-toc-toggle::after,
    .publication-section-toggle::after { transition: none; }
}

/* A picture and the caption Word gave it (Caption style), joined on import. */
.embedText figure { margin: 24px 0; text-align: center; }
.embedText figure img { display: inline-block; max-width: 100%; height: auto; }
.embedText figure figcaption,
.embedText p.caption {
    margin: 8px auto 0;
    max-width: 640px;
    font-size: 14px;
    line-height: 1.7;
    color: #58595b;
    text-align: center;
    unicode-bidi: plaintext;
}

/* The admin preview's notice; never on the public page. */
.publication-preview-bar {
    position: sticky;
    top: 0;
    z-index: 1050;
    padding: 10px 16px;
    background: #fff4d6;
    border-bottom: 1px solid #f0d58a;
    color: #5a4500;
    font-size: 14px;
    text-align: center;
}