/* ============================================================
   JEBI — 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 in the theme sets a font-size on body.
   With the browser default of 16px that resolves to ~11.2px,
   and every theme-rendered block on the homepage inherits it:
   Announcements, "Vol 13, No 1 (2026)", Table of Contents,
   #pageFooter. Custom inline font-sizes typed into
   journalDescription / additionalHomeContent are absolute,
   so the top half and the bottom half of the page end up on
   two different systems.

   Relative units, not px
   This journal runs the OJS Font Size block (#sidebarFontSize,
   initialised as fontSize("#sizer","body",9,16,32)). 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 is identical to the px design (13 / 15 / 22), and the
   visitor's font-size control keeps working.

   Conversion:  #content 13/16 = 0.8125
                h2 22/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.
   ============================================================ */


/* ---- 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) ---- */
#content h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.69em;     /* 22px */
    font-weight: 700;
    line-height: 1.3;
    color: #65202E;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e5e5;
}


/* ---- 3. Section headings ----
   Announcements / Vol 13, No 1 (2026) / 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: #65202E;
    margin: 30px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5d9cf;
}


/* ---- 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 #e5d9cf; }
table.announcements td.endseparator  { border-top: 1px solid #e5d9cf; }
table.announcements td.separator    { border-top: 1px solid #f0eae4; }

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: #65202E; 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 #f2f2f2;
}
.tocArticle:last-child { border-bottom: 0; }

.tocTitle a {
    font-size: 1em;        /* 13px */
    line-height: 1.55;
    color: #65202E;
    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. 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: #8A825C; }


/* ============================================================
   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 click a heading and read
   getComputedStyle(...).fontSize, 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
   relative chain.
   ============================================================ */