/**
 * plugins/themes/ijahg/styles/journal.css
 *
 * The component layer: rules that LESS variables cannot express.
 * Registered as .css, so OJS serves this file straight from disk — edit and
 * reload, no cache to clear.
 *
 * Design brief: anthropology, urban humanities and green cybernetics. Every
 * theme shipped with OJS is blue, teal or framework-grey, so this one is warm
 * and earthy: forest green with a clay accent, serif headings over sans
 * metadata, and restrained rule work instead of ornament.
 *
 * Rules of engagement, so this file cannot grow into the 1085-line sheet it
 * replaces:
 *   - presentation only; never position or size OJS's structural wrappers
 *   - no !important, ever — if a rule needs it, the cascade is wrong
 *   - no fixed content widths, no global reset
 *   - colours and radii belong in index.less unless a component needs its own
 *   - OJS keeps its grid, breakpoints, mobile navigation and forms
 *
 * Contrast checked against both surfaces; every value below passes WCAG AA:
 *   leaf-dark   #2d6a4f   6.39:1     clay      #a85a34   5.03:1
 *   forest      #2c6250   7.07:1     muted     #6b746f   4.82:1
 */

/* -- 01. Tokens ---------------------------------------------------------
   Used only by this file. The parent theme is LESS and never reads these;
   anything OJS itself must honour goes in index.less instead. */
:root {
    --ijahg-forest-deep: #1d4438;
    --ijahg-forest: #2c6250;
    --ijahg-clay: #a85a34;
    --ijahg-clay-deep: #8f4a29;

    --ijahg-text: #26302c;
    --ijahg-muted: #6b746f;

    --ijahg-parchment: #faf8f4;
    --ijahg-border: #dfe4dd;

    --ijahg-serif: "Noto Serif", Georgia, "Times New Roman", serif;
    --ijahg-rule: 2px;
}

/* -- 02. Masthead -------------------------------------------------------
   The band colour comes from the theme option (Settings > Website >
   Appearance), not from here — see the note in index.less. This only shapes
   what sits inside it. */
/* The parent sets the logo's anchor to inline-block, so its width is derived
   from the image it contains. `max-width: 100%` on the image then resolves
   against a box that is itself sized by the image — a circular constraint that
   does nothing. The image renders at max-height x its aspect ratio (this logo
   is 6750x600, so 11.25:1) and overflows the header on narrow screens.

   Giving the anchor a real width to resolve against fixes it: the image is
   then bounded by the header column, and height follows from the aspect ratio
   rather than being the only limit. */
.pkp_site_name .is_img {
    display: block;
    max-width: 100%;
}

.pkp_site_name .is_img img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 105px;
    object-fit: contain;
}

.pkp_site_name_wrapper .pkp_site_name a {
    font-family: var(--ijahg-serif);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* Below 992px the parent locks the header to a fixed 2.857rem (40px) and
   positions the site name absolutely inside it — so the logo cannot push the
   header taller, it simply spills out the bottom. (Above 992px the parent
   already sets height:auto, which is why this only shows on phones.)

   Put the site name back in flow so the header grows to fit it, and reserve
   the toggle's width as padding. The hamburger itself is position:absolute
   with z-index 999, so it stays pinned top-left and is unaffected — OJS keeps
   owning the mobile menu. */
@media (max-width: 991px) {
    .pkp_site_name_wrapper {
        height: auto;
        min-height: 2.857rem;
        padding-left: 2.857rem;
    }

    .pkp_site_name {
        position: static;
    }
}

/* -- 03. Primary navigation --------------------------------------------
   The nav wrapper's position stays OJS's business — that is what drives the
   mobile menu. Everything below styles the dropdown panel and its links. */
/* 500, not 600. White text on a dark band renders optically thinner than the
   same weight on white, so it wants a touch more than normal — but 600 made
   the navigation heavier than the masthead above it, which inverted the
   hierarchy. */
.pkp_navigation_primary > li > a {
    font-size: 0.93rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Floating panels only exist at desktop. Below 992px OJS renders submenus as
   an inline nested list inside the dark mobile menu, where a white bordered
   card would be plainly wrong — so the whole panel treatment is scoped. */
@media (min-width: 992px) {
    .pkp_navigation_primary ul {
        min-width: 12rem;
        padding: 0.35rem 0;
        border: 1px solid var(--ijahg-border);
        border-radius: 4px;
        background: #fff;
        box-shadow: 0 6px 20px rgba(29, 68, 56, 0.1);
    }

    /* The parent gives panel links vertical padding and no horizontal padding,
       so their text sits hard against the panel edge once the panel has a
       border. Give them the inset a menu needs. */
    .pkp_navigation_primary ul a {
        display: block;
        padding-left: 1rem;
        padding-right: 1.5rem;
        color: var(--ijahg-text);
        text-decoration: none;
    }

    /* The parent's only hover rule for panel links is scoped to .dropdown-menu,
       a class this markup never carries — so panel links had no hover feedback
       at all while top-level links did. That asymmetry is the "hover thing"
       difference, and it applied to every panel, not just the first. */
    .pkp_navigation_primary ul a:hover,
    .pkp_navigation_primary ul a:focus {
        background: var(--ijahg-parchment);
        color: var(--ijahg-forest);
    }

    /* The parent pulls the FIRST top-level link 0.5em left so the row sits
       flush with the container edge, but positions every panel from its li's
       left edge + 7px. For the first item those disagree by ~1em, leaving its
       panel right of its own label. Tied to the parent's magic numbers
       (7px / 40px in head.less); if a future OJS release changes them, this
       needs the same change. */
    .pkp_navigation_primary > li:first-child:hover ul {
        transform: translate3d(calc(7px - 1em), 40px, 0);
    }
}

/* Same parent rule, second defect: it is `li:first-child a`, a DESCENDANT
   selector, not `> a`. So the -0.5em also lands on every link *inside* the
   first item's panel, pushing their text out past the panel border while the
   other panels' links sit correctly. Reset it for panel links only, leaving
   the top-level label's offset alone — the rule above compensates the panel
   for that. The last-child mirror is guarded in case a dropdown ever ends
   the row. */
.pkp_navigation_primary > li:first-child ul a {
    margin-left: 0;
}

.pkp_navigation_primary > li:last-child ul a {
    margin-right: 0;
}

/* -- 03b. Breadcrumbs ---------------------------------------------------
   OJS renders <nav class="cmp_breadcrumbs"> as the first child of .page,
   directly above the <h1>, with no visual separation — so it reads as the
   first line of the article rather than as navigation chrome.

   Setting it in its own light strip decouples it: same width as the content
   column, clearly a different surface, and a real gap before the title. The
   parent styles it inline-block with the bottom margin on the <ol>, so both
   move here to make the strip a proper block. */
.cmp_breadcrumbs {
    display: block;
    /* No box. A panel with almost no padding reads as a mistake, and a filled
       card is itself a content shape — the thing we are trying not to look
       like. A hairline underneath does the same job with nothing to inset:
       zero padding top and sides, so the trail sits flush with the column and
       cannot be mistaken for the first line of the article.

       Asymmetric on purpose: nothing above, a little breathing room to the
       rule, and a generous gap between the rule and the page title. That gap
       is what carries the separation. */
    margin: 0 0 4.5rem 0 ;
    padding: 0 0 0 0;
    border: 0;
    border-bottom: 1px solid var(--ijahg-border);
    border-radius: 0;
    background: none;
}

.cmp_breadcrumbs ol {
    margin: 0;
    padding: 0;
    font-size: 0.8rem;
    line-height: 1.5;
}

.cmp_breadcrumbs a {
    color: var(--ijahg-forest);
    text-decoration: none;
}

.cmp_breadcrumbs a:hover,
.cmp_breadcrumbs a:focus {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cmp_breadcrumbs .separator {
    padding: 0 0.45em;
    color: var(--ijahg-border);
}

/* The trail ends on the current page: state, not a link. */
.cmp_breadcrumbs .current {
    color: var(--ijahg-muted);
    font-weight: 600;
}

/* One crumb is the full issue title ("Vol. 1 No. 1 (2023): International
   Journal of Anthropology HumaniverCity and GreenCybernomics"), which wraps to
   several lines on a phone and swamps the strip. Clamp the links there; the
   current crumb stays whole so you never lose your place. */
@media (max-width: 767px) {
    .cmp_breadcrumbs ol {
        font-size: 0.75rem;
    }

    .cmp_breadcrumbs li a {
        display: inline-block;
        max-width: 11rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }
}

/* -- 04. Page and section headings --------------------------------------
   A short clay rule under each heading is the theme's one repeated motif:
   measured, structural, no ornament. */
.pkp_structure_main > h1,
.page_index_journal > h2,
.homepage_about > h2,
.current_issue > h2 {
    font-family: var(--ijahg-serif);
    letter-spacing: -0.01em;
}

.homepage_about > h2::after,
.current_issue > h2::after,
.obj_issue_toc .section > h3::after {
    content: "";
    display: block;
    width: 3rem;
    height: var(--ijahg-rule);
    margin-top: 0.6rem;
    background: var(--ijahg-clay);
}

.obj_issue_toc .section > h3 {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ijahg-forest);
}

.current_issue_title {
    font-family: var(--ijahg-serif);
    font-size: 1.15rem;
    line-height: 1.45;
    color: var(--ijahg-text);
}

/* A custom navigation menu item with no title makes OJS render
   <h1 class="page_title"></h1> — an empty heading that still takes vertical
   space and pollutes the document outline for screen readers. Collapse it.
   This is a safety net, not the fix: the page should be given a title in
   Settings > Website > Navigation Menus. */
.page_title:empty {
    display: none;
}

/* -- 05. Issue table of contents ---------------------------------------- */
.obj_issue_toc .heading .published .label {
    font-weight: 600;
    color: var(--ijahg-muted);
}

.obj_issue_toc .sections .section + .section {
    margin-top: 2.25rem;
}

/* -- 06. Article list ---------------------------------------------------
   One entry per row rather than a grid: long scholarly titles need the
   measure. The clay stripe is transparent until hover, so the row does not
   shift — no layout change on interaction. */
.cmp_article_list.articles {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cmp_article_list.articles > li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--ijahg-border);
}

.cmp_article_list.articles > li:last-child {
    border-bottom: 0;
}

.obj_article_summary {
    position: relative;
    padding: 1.15rem 1rem 1.15rem 1.15rem;
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease, border-left-color 0.15s ease;
}

.obj_article_summary:hover,
.obj_article_summary:focus-within {
    background: var(--ijahg-parchment);
    border-left-color: var(--ijahg-clay);
}

.obj_article_summary .title {
    margin: 0 0 0.4rem;
    font-family: var(--ijahg-serif);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
}

.obj_article_summary .title a {
    color: var(--ijahg-text);
    text-decoration: none;
}

.obj_article_summary .title a:hover,
.obj_article_summary .title a:focus {
    color: var(--ijahg-forest);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.obj_article_summary .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.9rem;
    font-size: 0.85rem;
    color: var(--ijahg-muted);
}

.obj_article_summary .authors {
    font-weight: 600;
    color: var(--ijahg-text);
}

.obj_article_summary .pages {
    font-variant-numeric: tabular-nums;
}

/* -- 07. Galley (PDF) buttons -------------------------------------------
   Fix the container so the buttons flow, rather than positioning each one.
   The list is `ul.galleys_links` in the Default theme — not `.galleys`. */
.obj_article_summary .galleys_links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    clear: both;
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
}

.obj_article_summary .galleys_links > li {
    margin: 0;
    padding: 0;
}

.obj_article_summary .obj_galley_link {
    display: inline-block;
    float: none;
    margin: 0;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--ijahg-forest);
    border-radius: 999px;
    background: transparent;
    color: var(--ijahg-forest);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.obj_article_summary .obj_galley_link:hover,
.obj_article_summary .obj_galley_link:focus {
    background: var(--ijahg-forest);
    color: #fff;
}

/* -- 07b. Search page ---------------------------------------------------
   The parent theme gives this page its own, larger type scale: the query box
   at 1.285rem (18px), fieldset legends at 1.143rem (16px) and labels at 1rem
   against 0.93rem everywhere else. On a page that is mostly form furniture it
   reads as though the browser zoomed in. Bring it back onto the site's scale,
   keeping the query box's generous height so it stays an easy target. */
.page_search .search_input .query {
    height: calc(2.5rem - 2px);
    font-size: 1rem;
    line-height: calc(2.5rem - 2px);
}

.page_search .cmp_form legend,
.page_search .search_advanced legend {
    font-size: 0.93rem;
    font-weight: 600;
    color: var(--ijahg-text);
}

/* "Advanced filters" labels the whole fieldset, so it earns the theme's
   section treatment rather than just being smaller. */
.page_search .search_advanced > legend {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ijahg-forest);
}

.page_search .search_advanced label {
    font-size: 0.93rem;
    color: var(--ijahg-muted);
}

.page_search .search_advanced {
    border-radius: 4px;
    background: var(--ijahg-parchment);
}

/* -- 07c. Embedded media ------------------------------------------------
   Custom pages carry pasted embeds — the Contact page's Google Map, for one.
   Google's copy-HTML gives a fixed pixel width (or none at all, which renders
   at the browser default 300px), so on a phone the map either overflows the
   column or shrinks to a stamp. Make any embed fluid and give it a sane
   height, so a pasted iframe behaves without anyone editing the markup. */
.pkp_structure_main iframe {
    display: block;
    max-width: 100%;
    width: 100%;
    border: 1px solid var(--ijahg-border);
    border-radius: 4px;
}

/* Height only for map-style embeds; leaving video aspect ratios alone. */
.pkp_structure_main iframe[src*="google.com/maps"] {
    height: 360px;
}

@media (max-width: 767px) {
    .pkp_structure_main iframe[src*="google.com/maps"] {
        height: 260px;
    }
}

/* -- 08. Sidebar blocks -------------------------------------------------- */
.pkp_structure_sidebar .pkp_block {
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--ijahg-border);
    border-radius: 4px;
    background: var(--ijahg-parchment);
}

.pkp_structure_sidebar .pkp_block + .pkp_block {
    margin-top: 1.25rem;
}

.pkp_structure_sidebar .pkp_block .title {
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--ijahg-border);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ijahg-forest);
}

/* -- 09. Footer ---------------------------------------------------------- */
.pkp_structure_footer_wrapper {
    background: var(--ijahg-forest-deep);
    color: rgba(255, 255, 255, 0.88);
}

.pkp_structure_footer_wrapper a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* lib/pkp's footer.tpl renders a .pkp_brand_footer block linking to "About
   this Publishing System". Hidden here rather than by overriding that core
   template, so OJS keeps receiving its own updates to it. display:none also
   drops it from the accessibility tree, so screen readers do not announce a
   link nobody can see. */
.pkp_brand_footer {
    display: none;
}

/* -- 10. Small screens ---------------------------------------------------
   Corrections only. OJS keeps its own breakpoints and mobile navigation. */
@media (max-width: 767px) {
    .pkp_site_name .is_img img {
        max-height: 64px;
    }

    .obj_article_summary {
        padding: 1rem 0.5rem 1rem 0.85rem;
    }

    .obj_article_summary .title {
        font-size: 1rem;
    }
}