/* ==========================================================================
   JWEMPO -- layout corrections
   --------------------------------------------------------------------------
   Loaded after styles.css. This file fixes alignment only: no colour, font,
   spacing scale or component design is changed here. styles.css is compiled
   from SCSS (it ships with a .map), so it is never hand-edited.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Article cards overflow the screen on phones
   --------------------------------------------------------------------------
   .card__post-list is a flex container, so the Bootstrap .row inside it
   becomes a flex item. A flex item sizes itself to its own content instead of
   its parent, so the row measured 439px inside a 345px column on a 375px
   screen. The row's -15px margins then pushed it further out, and article
   titles, author lines and category labels ran off the right edge.

   Below the md breakpoint the card only ever stacks, so flex earns nothing
   there. Restoring normal block flow lets the row size to its parent again.
   Measured on /, /articles, /current-issue and /article/view/*: the widest
   element goes from 439px to 375px, exactly the viewport. Desktop geometry is
   byte-identical either way, which is why this is still scoped to phones.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

    .card__post-list {
        display: block;
    }

}


/* --------------------------------------------------------------------------
   DOI links
   --------------------------------------------------------------------------
   A DOI sits inside the same heading as the issue title, and that heading is
   `text-transform: capitalize`. The rule is right for a title and wrong for a
   URL: the link read "Https://Doi.Org/10.56542/Wi.Jwempo.V3.I1.2026" while the
   href underneath was correctly lower-case. A DOI is quoted and copied by
   readers, so it has to display exactly as it is.

   The same links are one long unbreakable word, which is what still ran 41px
   off a 375px screen after the fix above. Letting them wrap keeps them inside
   the card. Headings keep their capitalisation; only the DOI is exempt.
   -------------------------------------------------------------------------- */

a[href*="doi.org"] {
    text-transform: none;
    overflow-wrap: break-word;
    word-break: break-word;
}


/* --------------------------------------------------------------------------
   Main navigation
   --------------------------------------------------------------------------
   The theme styles this menu in Poppins, which was never actually loaded, so
   until now it was drawn in the system sans-serif. Loading the real font made
   the labels slightly wider and "Current Issue" and "Submit Article" began
   splitting over two lines, which left the bar ragged.

   There is room: the eleven items need 1011px of the 1120px available at
   desktop width. Keeping each label on one line restores the single row the
   menu is designed as. Below the lg breakpoint the menu collapses into the
   burger, so this deliberately does not apply there.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {

    .navbar-nav > li > a {
        white-space: nowrap;
    }

}


/* ==========================================================================
   Reading order in an article listing
   --------------------------------------------------------------------------
   Measured on /articles before any of this:

       category badge   10px / 600
       authors          12px / 700   (blue)
       date             11px / 700
       ARTICLE TITLE    15px / 700
       DOI              16px / 400
       abstract         14px / 500

   The title of the paper -- the one thing a reader is scanning for -- was
   smaller than its own DOI, and everything around it was set in bold, so
   nothing receded and the eye landed on the category badge and the author
   names first.

   Only size, weight, line-height and spacing change below. No colour is
   touched: the blue on author names and the DOI is the site's link colour and
   stays exactly as it is.
   ========================================================================== */

/* The title now leads. It used to carry style="font-size:15px" directly in the
   markup, which no stylesheet could override and which pinned it at one size on
   every screen; that attribute was replaced with this class in the seven views
   that list articles. */
.wrapper__list__article .card__post__title h5,
.wrapper__list__article h5.jw-title,
h5.jw-title {
    font-size: 1.25rem;
    line-height: 1.35;
    margin-bottom: .4rem;
}

/* Academic titles belong to their authors, capitals and all. The listing forced
   `capitalize` on every word, so a paper filed as "...Success Factors for the
   Design and Build Approach..." was displayed as "...Success Factors For The
   Design And Build Approach...", while the article's own page showed it
   correctly -- the same paper, spelt two ways. */
/* The theme sets the capitals from
   `.card__post__transition .card__post__body .card__post__content .card__post__title h5`,
   so this mirrors that chain rather than reaching for !important -- a shorter
   selector here would simply lose. */
.wrapper__list__article .card__post__transition .card__post__body .card__post__content .card__post__title h5,
.wrapper__list__article .card__post__transition .card__post__body .card__post__content .card__post__title h5 a,
h5.jw-title,
h5.jw-title a {
    text-transform: none;
}

/* Author line and date step back so the title carries the weight. They keep
   their colour and their place; only the boldness goes.

   Same story as above: the theme's own selector for these spans is seven levels
   deep, so this matches it and adds the wrapper to win by one. */
.wrapper__list__article .card__post .card__post__body .card__post__content .card__post__author-info .list-inline .list-inline-item span {
    font-weight: 500;
}

/* The date is supporting detail even next to the author names. */
.wrapper__list__article .card__post .card__post__body .card__post__content .card__post__author-info .list-inline .list-inline-item span.text-dark {
    font-weight: 400;
}

/* A DOI is a reference, not a headline. */
.wrapper__list__article a[href*="doi.org"] {
    font-size: .78rem;
    line-height: 1.5;
}

/* The abstract is the longest text on the page and was set at weight 500, which
   reads as emphasis over several lines. */
.wrapper__list__article .card__post__content p {
    font-weight: 400;
    line-height: 1.65;
}