/* ============================================================
   IJRD — site-wide type scale
   Target platform: OJS 2.4.8.1 + macrothink theme
   ------------------------------------------------------------
   Why this file exists
   The PKP base stylesheet sets  #content { font-size: 0.7em }
   and no stylesheet loaded by this journal sets a font-size on
   body. With the browser default of 16px that resolves to
   ~11.2px, and every theme-rendered block inherits it:
   Announcements, "Vol 12, No 1 (2025)", Table of Contents,
   #pageFooter. Custom inline font-sizes typed into
   journalDescription / additionalHomeContent are absolute, so
   the top half and the bottom half of the homepage end up on
   two different systems.

   Relative units, not px
   This journal runs the OJS Font Size block (#sidebarFontSize).
   It changes the font-size of body, so every size below is
   expressed in em: #content is relative to body, everything
   inside #content is relative to #content. At the default body
   size of 16px the result matches the intended px design
   (13 body / 15 section headings / 28 journal name), and the
   visitor's font-size control keeps working.

   Conversion:  #content 13/16 = 0.8125
                h2 28/13, h3 15/13, h4 13/13, meta 12/13, 11/13
   Only font-size is relative. Spacing stays in px on purpose:
   it keeps the rhythm readable and does not need to scale.

   Palette sampled from the current cover image
   IJRD_Cover_v2_URL_frame.png:
     #651B53  deep plum   (primary, headings and links)
     #C8324B  crimson     (accent)
     #938F52  olive       (footer links)
   ============================================================ */


/* ---- 1. Baseline: the single number that governs the page ---- */
#content {
    font-size: 0.8125em;   /* 13px at the default body size */
    line-height: 1.7;
    color: #333;
}


/* ---- 2. Journal name (the only H2 on the homepage) ----
   The rule under the title is already drawn by the theme:
   #content { border-top: 2px dotted #000 } from the PKP base
   stylesheet. So the h2 itself carries no border of its own;
   a border here produced two lines stacked on top of each other. */
#content h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.2em;      /* 28px */
    font-weight: 700;
    line-height: 1.2;
    color: #651B53;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
}


/* ---- 2b. The ISSN meta line, directly under the title rule ----
   One small grey line: journal identifier plus the four facts a
   reader checks first. It reads as a caption to the title, not as
   body text, so it drops a step in size and two in colour.
   Targeted by class; the :first-of-type fallback keeps it working
   even if the class is stripped when the field is saved.
   The hairline underneath closes the caption off from the
   abstract-length prose that follows, the same way the JEBI
   homepage does it (there it is written inline on the element). */
#journalDescription p.journal-meta,
#journalDescription > p:first-of-type {
    font-size: 0.92em;     /* 12px */
    line-height: 1.5;
    color: #888;
    letter-spacing: .01em;
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e3d8e0;
}


/* ---- 3. Section headings ----
   Announcements / Vol 12, No 1 (2025) / Table of Contents all
   come out of the template as bare h3. One spec for all three,
   so they read as one level instead of three accidents. */
#content h3 {
    font-family: inherit;
    font-size: 1.15em;     /* 15px */
    font-weight: 700;
    line-height: 1.4;
    color: #651B53;
    margin: 30px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e3d8e0;
}


/* ---- 4. Sub-headings: announcement titles, "Articles" ---- */
#content h4,
table.announcements td.title h4 {
    font-family: inherit;
    font-size: 1em;        /* 13px */
    font-weight: 700;
    line-height: 1.5;
    color: #333;
    margin: 0 0 6px;
}
#content h4.tocSectionTitle {
    font-size: 0.85em;     /* 11px */
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #999;
    border: 0;
    margin: 18px 0 8px;
}


/* ---- 5. Announcements block ---- */
#announcementsHome { margin: 30px 0; }
#announcementsHome h3 { text-align: left; }

table.announcements td { padding: 6px 8px; }

/* the template draws dotted rules; hairline solid matches the
   dividers used in the custom homepage blocks above */
table.announcements td.headseparator { border-top: 1px solid #e3d8e0; }
table.announcements td.endseparator  { border-top: 1px solid #e3d8e0; }
table.announcements td.separator    { border-top: 1px solid #f0eaf0; }

table.announcements td.description { line-height: 1.7; color: #444; }
table.announcements td.posted {
    padding-top: 10px;
    font-style: normal;
    font-size: 0.92em;     /* 12px */
    color: #888;
}
table.announcements td.more a { font-size: 0.92em; }

#announcementsHome a { color: #651B53; text-decoration: none; }
#announcementsHome a:hover { text-decoration: underline; }


/* ---- 6. Current issue + Table of Contents ---- */
#issueDescription {
    font-size: 0.92em;     /* 12px */
    color: #666;
    margin: -4px 0 6px;
}

.tocArticle {
    padding: 10px 0;
    border-bottom: 1px solid #f2f0f4;
}
.tocArticle:last-child { border-bottom: 0; }

.tocTitle a {
    font-size: 1em;        /* 13px */
    line-height: 1.55;
    color: #651B53;
    text-decoration: none;
}
.tocTitle a:hover { text-decoration: underline; }

.tocAuthors {
    padding-left: 0;
    margin-top: 4px;
    font-size: 0.92em;     /* 12px */
    line-height: 1.6;
    color: #666;
}
.tocGalleys a.file { font-size: 0.92em; }
.tocPages { font-size: 0.92em; color: #999; }


/* ---- 7. Custom homepage content ----
   The homepage currently wraps each list item in its own <ul>,
   which stacks four separate lists with uneven gaps. These two
   rules collapse them back into one rhythm until the markup is
   fixed in Setup step 5. */
#additionalHomeContent ul { margin: 0 0 4px; padding-left: 20px; }
#additionalHomeContent li { margin-bottom: 4px; line-height: 1.7; }
#additionalHomeContent p { margin: 0 0 8px; }
#additionalHomeContent strong { font-weight: 700; }


/* ---- 8. Cover image ----
   The current <img> uses padding-left/right, which shrinks the
   image instead of creating a gap. Move the spacing outside. */
#journalDescription img {
    margin: 0 0 12px 20px;
    padding: 0;
    max-width: 100%;
    height: auto;
    border: 1px solid #e5e5e5;
}


/* ---- 9. Page footer ---- */
#pageFooter {
    margin-top: 36px;
    padding-top: 14px;
    border-top: 1px solid #e5e5e5;
    font-size: 0.92em;     /* 12px */
    line-height: 1.65;
    color: #888;
}
#pageFooter p { margin: 0 0 6px; }
#pageFooter a { color: #938F52; }


/* ============================================================
   If nothing above takes effect, the stylesheet is being loaded
   BEFORE the theme CSS. Fix by prefixing each selector with
   "body " (e.g. body #content { ... }), which raises specificity
   without resorting to !important.

   Verify after upload, in an incognito window (the Font Size
   block stores its value in a cookie, so a normal window may
   report a size you set earlier):
   getComputedStyle(document.querySelector('#content')).fontSize
   should return 13px. Then read the same value on a section
   heading, which should be close to 15px. Finally click "+"/"-"
   in the sidebar Font Size block: the text must still change
   size. If it does not, some container between body and
   #content defines its own font-size and breaks the chain.
   ============================================================ */