/* =====================================================
   OJS 3.5 MULTI-JOURNAL STYLESHEET
   Purpose: Shared base styles with per-journal theming
            via CSS custom properties.
            Includes fixes for GARP homepage structural
            issues (MSO styles, typography, layout,
            footer logos, journal list, skip-nav, etc.)

   USAGE:
   Override the variables in the ":root" block below
   (or in a journal-specific stylesheet) to brand each
   journal independently without touching this file.
   ===================================================== */


/* =====================================================
   1. DESIGN TOKENS (Override per journal)
   ===================================================== */

:root {
    /* Brand colours */
    --color-primary:        #003366;   /* Main headings, buttons, nav */
    --color-primary-hover:  #0056b3;   /* Hover state for primary elements */
    --color-accent:         #d63384;   /* Links on hover, highlights */
    --color-link:           #0056b3;   /* Default link colour */

    /* Neutrals */
    --color-text:           #222222;
    --color-text-muted:     #555555;
    --color-bg:             #f8f9fa;
    --color-surface:        #ffffff;
    --color-border:         #dee2e6;
    --color-table-header-bg:#e9ecef;
    --color-table-header-fg:#343a40;

    /* Typography */
    --font-body:   system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --font-size-base:   15px;
    --font-size-sm:     14px;
    --line-height-body: 1.7;
    --line-height-heading: 1.3;

    /* Heading sizes */
    --h1-size: 2rem;
    --h2-size: 1.75rem;
    --h3-size: 1.5rem;
    --h4-size: 1.25rem;
    --h5-size: 1.1rem;
    --h6-size: 1rem;

    /* Spacing */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  40px;

    /* Borders & radius */
    --radius-sm:  4px;
    --radius-md:  6px;
    --border:     1px solid var(--color-border);

    /* Transitions */
    --transition-fast: 0.2s ease;
}


/* =====================================================
   2. BOX MODEL RESET
   ===================================================== */

html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}


/* =====================================================
   3. BASE / BODY
   ===================================================== */

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    background: var(--color-bg);
    color: var(--color-text);
    text-rendering: optimizeSpeed;
}


/* =====================================================
   4. TYPOGRAPHY — PARAGRAPHS
   ===================================================== */

p,
.pkp_structure_main p,
.page p,
.article-summary p,
.abstract-text,
.metadata__value {
    text-align: justify;
    margin: 0 0 1em;
}


/* =====================================================
   5. TYPOGRAPHY — HEADINGS
   ===================================================== */

h1, h2, h3,
h4, h5, h6 {
    font-weight: 700;
    margin: 1em 0 0.5em;
    line-height: var(--line-height-heading);
    color: var(--color-primary);
    font-synthesis-weight: none; /* Prevents layout shift during font swap */
}

h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }
h5 { font-size: var(--h5-size); }
h6 { font-size: var(--h6-size); }


/* =====================================================
   6. LINKS
   ===================================================== */

a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--color-accent);
    text-decoration: underline;
}


/* =====================================================
   7. BUTTONS
   ===================================================== */

button,
.btn,
input[type="submit"] {
    display: inline-block;
    padding: 10px var(--space-md);
    background: var(--color-primary);
    color: var(--color-surface);
    border: 0;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

button:hover,
.btn:hover,
input[type="submit"]:hover {
    background: var(--color-primary-hover);
}

button:focus-visible,
.btn:focus-visible,
input[type="submit"]:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}


/* =====================================================
   8. TABLES
   ===================================================== */

table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    background: var(--color-surface);
}

th,
td {
    padding: 12px 15px;
    border: var(--border);
    text-align: left;
}

th {
    background: var(--color-table-header-bg);
    color: var(--color-table-header-fg);
}


/* =====================================================
   9. OJS / PKP OVERRIDES
   ===================================================== */

/* Hide PKP branding footer without causing layout recalculation */
.pkp_brand_footer {
    display: none !important;
}

/* Isolate layout recalculations to the main content area */
.pkp_structure_main {
    contain: layout style;
}


/* =====================================================
   10. ACCESSIBILITY
   ===================================================== */

/* Skip-to-content link */
.skip-link {
    position: absolute;
    left: 0;
    top: -40px;
    background: #000;
    color: #fff;
    padding: var(--space-sm) var(--space-md);
    z-index: 100;
    border-radius: 0 0 var(--radius-sm) 0;
    font-weight: 600;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration:  0.01ms !important;
    }
}


/* =====================================================
   11. RESPONSIVE
   ===================================================== */

@media (max-width: 768px) {
    :root {
        --font-size-base: var(--font-size-sm);

        --h1-size: 1.5rem;
        --h2-size: 1.25rem;
        --h3-size: 1.1rem;
    }
}


/* =====================================================
   12. PER-JOURNAL THEME EXAMPLES
   ===================================================== */

/*
   To brand a specific journal, add a wrapper class
   to its <body> tag (e.g. via OJS theme settings or
   custom header HTML) and override variables here.

   Example — Journal of Law & Governance (green theme):

   .journal-jlg {
       --color-primary:       #1a5c3a;
       --color-primary-hover: #2e7d52;
       --color-accent:        #e07b00;
       --color-link:          #1a5c3a;
   }

   Example — Journal of Health Sciences (teal theme):

   .journal-jhs {
       --color-primary:       #005f73;
       --color-primary-hover: #0a9396;
       --color-accent:        #ee9b00;
       --color-link:          #005f73;
   }

   No other changes needed — all components pick up
   the new values automatically.
*/


/* =====================================================
   13. MSO / WORD PASTE OVERRIDES
   Fix: Content pasted from Microsoft Word into OJS
   carries inline mso-* styles and Times New Roman
   that override the site theme. These rules reset all
   such elements back to the design-token values.
   ===================================================== */

/* Reset font family injected by Word paste */
[style*="font-family"],
[style*="mso-"],
.MsoNormal,
.MsoBodyText {
    font-family: var(--font-body) !important;
    font-size: var(--font-size-base) !important;
    line-height: var(--line-height-body) !important;
    color: var(--color-text) !important;
}

/* Reset Word-injected paragraph margins */
.MsoNormal,
.MsoBodyText,
p[style*="mso-margin"] {
    margin: 0 0 1em !important;
}

/* Neutralise Word's mso-fareast and lang attributes visually */
span[lang],
span[style*="mso-"],
span[style*="font-family"] {
    font-family: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
}


/* =====================================================
   14. SKIP NAVIGATION (OJS CLASS)
   Fix: OJS uses .cmp_skip_to_content, not .skip-link.
   Both are now supported.
   ===================================================== */

.cmp_skip_to_content a,
.skip-link {
    position: absolute;
    left: 0;
    top: -60px;
    background: #000;
    color: #fff;
    padding: var(--space-sm) var(--space-md);
    z-index: 200;
    border-radius: 0 0 var(--radius-sm) 0;
    font-weight: 600;
    text-decoration: none;
    transition: top var(--transition-fast);
}

.cmp_skip_to_content a:focus,
.skip-link:focus {
    top: 0;
}


/* =====================================================
   15. SITE LOGO
   Fix: Original logo is 1408×1600px — constrain it so
   it doesn't blow out the header on any screen size.
   ===================================================== */

.pkp_site_name img,
.pkp_site_name a.is_img img {
    max-width: 220px;
    max-height: 80px;
    width: auto;
    height: auto;
    display: block;
}


/* =====================================================
   16. ABOUT SECTION
   Fix: .about_site had no visual separation from the
   journals list. Give it breathing room and a subtle
   background so it reads as an introductory block.
   ===================================================== */

.about_site {
    background: var(--color-surface);
    border-left: 4px solid var(--color-primary);
    padding: var(--space-md) var(--space-lg);
    margin: var(--space-lg) 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.about_site p {
    margin: 0 0 0.75em;
}

.about_site p:last-child {
    margin-bottom: 0;
}


/* =====================================================
   17. JOURNALS LIST
   Fix: The default OJS journal list renders as a bare
   <ul> with no visual card treatment. Each journal
   entry gets a card so the list is scannable.
   ===================================================== */

.journals > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-md);
}

.journals > ul > li {
    background: var(--color-surface);
    border: var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    transition: box-shadow var(--transition-fast);
}

.journals > ul > li:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Journal title link */
.journals .body h3 {
    margin: 0 0 var(--space-sm);
    font-size: var(--h4-size);
}

.journals .body h3 a {
    color: var(--color-primary);
    text-decoration: none;
}

.journals .body h3 a:hover,
.journals .body h3 a:focus {
    color: var(--color-accent);
    text-decoration: underline;
}

/* Journal description text */
.journals .body .description {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: var(--space-xs) 0 var(--space-sm);
}

.journals .body .description p {
    margin: 0;
}

/* View / Current Issue links */
.journals .links {
    list-style: none;
    margin: var(--space-sm) 0 0;
    padding: 0;
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.journals .links li a {
    display: inline-block;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--transition-fast),
                color var(--transition-fast);
}

/* "View Journal" — outlined style */
.journals .links li.view a {
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    background: transparent;
}

.journals .links li.view a:hover,
.journals .links li.view a:focus {
    background: var(--color-primary);
    color: var(--color-surface);
}

/* "Current Issue" — filled style */
.journals .links li.current a {
    background: var(--color-primary);
    color: var(--color-surface);
    border: 2px solid var(--color-primary);
}

.journals .links li.current a:hover,
.journals .links li.current a:focus {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}


/* =====================================================
   18. FOOTER — EMAIL LINK & LOGOS
   Fix: Email was unstyled plain text. Logos had raw
   inline heights/padding. Both are normalised here.
   ===================================================== */

.pkp_footer_content {
    padding: var(--space-lg) 0;
}

/* Make the email link visually distinct */
.pkp_footer_content a[href^="mailto:"] {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: none;
}

.pkp_footer_content a[href^="mailto:"]:hover,
.pkp_footer_content a[href^="mailto:"]:focus {
    color: var(--color-accent);
    text-decoration: underline;
}

/* Footer logo strip */
.footer-logos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin: var(--space-md) 0;
}

/* Normalise all footer logos — override any inline height/padding */
.footer-logos img {
    height: 32px !important;
    width: auto !important;
    padding: 0 !important;
    display: block;
}

/* Footer <hr> — clean rule, no Word-style attributes */
.pkp_footer_content hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-md) 0;
}

/* Copyright line */
.pkp_footer_content p:last-child {
    margin-bottom: 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}


/* =====================================================
   19. NAVIGATION — MOBILE TOGGLE BUTTON
   Fix: .pkp_site_nav_toggle had no accessible style.
   Style it consistently with the design tokens.
   ===================================================== */

.pkp_site_nav_toggle {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.9rem;
    font-weight: 600;
    display: none; /* shown via responsive block below */
}

.pkp_site_nav_toggle:hover,
.pkp_site_nav_toggle:focus-visible {
    background: var(--color-primary);
    color: var(--color-surface);
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .pkp_site_nav_toggle {
        display: inline-block;
    }
}


/* =====================================================
   20. SCREEN-READER-ONLY UTILITY
   Fix: .pkp_screen_reader class must visually hide the
   site <h1> (which duplicates the logo) while keeping
   it in the accessibility tree.
   ===================================================== */

.pkp_screen_reader {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}