/* ============================================================================
   IJAA — International Journal of Analysis and Applications
   Custom stylesheet for OJS 3.3.0.8 / Default Theme Bootstrap 3 (flatly)

   WHERE THIS GOES
   Dashboard -> Settings -> Website -> Appearance -> Advanced -> Additional CSS
   (or upload as a .css file in the same place). Nothing here requires a
   template change; it only restyles markup the theme already outputs.

   FONT FILES
   Upload the 16 .woff2 files from ijaa-fonts.zip to the web root in a folder
   named "fonts", so they resolve as https://etamaths.com/fonts/<file>.woff2
   (same place as /ijaa.png and /Scopus.svg). If you put them elsewhere,
   change the paths in section 1 only.

   CONTENT BLOCKS
   Sections marked [needs snippet] style HTML that you paste into an OJS
   settings field. See ijaa-content-snippets.html. Until it is pasted, those
   rules are inert and nothing breaks.

   TABLE OF CONTENTS
   1  Fonts
   2  Design tokens
   3  Base / typography
   4  Buttons and links
   5  Site header, navigation, search
   6  Page shell and sidebar layout
   7  Sidebar blocks
   8  Breadcrumbs and page headings
   9  Article list entries (home, issue, search)
   10 Issue and archive pages
   11 Article landing page
   12 Editorial board            [needs snippet]
   13 Static content pages
   14 Homepage hero              [needs snippet]
   15 Indexing badge strip       [needs snippet]
   16 Footer
   17 Responsive
   18 Print
   ========================================================================= */


/* ==========================================================================
   1  FONTS — self-hosted, no third-party requests
   ========================================================================== */

/* Inter — UI, navigation, metadata */
@font-face{font-family:"IJAA Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IJAA Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/inter-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"IJAA Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/inter-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IJAA Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/inter-latin-ext-500-normal.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"IJAA Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/inter-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IJAA Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/inter-latin-ext-600-normal.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"IJAA Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("/fonts/inter-latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IJAA Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("/fonts/inter-latin-ext-700-normal.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* Source Serif 4 — titles, abstracts, reading text */
@font-face{font-family:"IJAA Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/source-serif-4-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IJAA Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/source-serif-4-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"IJAA Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url("/fonts/source-serif-4-latin-400-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IJAA Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url("/fonts/source-serif-4-latin-ext-400-italic.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"IJAA Serif";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/source-serif-4-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IJAA Serif";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/source-serif-4-latin-ext-600-normal.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"IJAA Serif";font-style:normal;font-weight:700;font-display:swap;
  src:url("/fonts/source-serif-4-latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IJAA Serif";font-style:normal;font-weight:700;font-display:swap;
  src:url("/fonts/source-serif-4-latin-ext-700-normal.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}


/* ==========================================================================
   2  DESIGN TOKENS — change colours here, nowhere else
   ========================================================================== */

:root{
  --ijaa-ink:#12203A;          /* headings, primary text          */
  --ijaa-ink-soft:#33415C;     /* body text                       */
  --ijaa-muted:#67748C;        /* metadata, captions              */
  --ijaa-paper:#FFFFFF;        /* cards                           */
  --ijaa-bg:#F6F5F2;           /* page background (warm)          */
  --ijaa-bg-2:#FBFAF8;         /* subtle fills                    */
  --ijaa-line:#E3E1DA;         /* hairlines                       */
  --ijaa-line-strong:#CFCCC2;  /* borders on interactive elements */
  --ijaa-accent:#0E6E62;       /* links, primary buttons          */
  --ijaa-accent-dark:#0A544A;  /* hover                           */
  --ijaa-accent-soft:#E7F1EF;  /* tags, highlights                */

  --ijaa-radius:10px;
  --ijaa-radius-lg:16px;
  --ijaa-shadow-sm:0 1px 2px rgba(18,32,58,.06), 0 1px 3px rgba(18,32,58,.04);
  --ijaa-shadow-md:0 2px 6px rgba(18,32,58,.06), 0 8px 24px rgba(18,32,58,.07);

  --ijaa-sans:"IJAA Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ijaa-serif:"IJAA Serif",Georgia,"Times New Roman",serif;
  --ijaa-measure:68ch;         /* maximum reading line length     */
  --ijaa-shell:1200px;         /* maximum page width              */
  --ijaa-rail:300px;           /* sidebar width                   */
}


/* ==========================================================================
   3  BASE / TYPOGRAPHY
   ========================================================================== */

body{
  background:var(--ijaa-bg);
  color:var(--ijaa-ink);
  font-family:var(--ijaa-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.h1,.h2,.h3,.h4{
  font-family:var(--ijaa-serif);
  color:var(--ijaa-ink);
  line-height:1.24;
  letter-spacing:-.008em;
}

/* Leave MathJax output completely alone */
.MathJax,.MathJax_Display,mjx-container{font-family:inherit}

hr{border-top-color:var(--ijaa-line)}
::selection{background:var(--ijaa-accent-soft)}


/* ==========================================================================
   4  BUTTONS AND LINKS
   ========================================================================== */

a{color:var(--ijaa-accent)}
a:hover,a:focus{color:var(--ijaa-accent-dark);text-decoration:underline;text-underline-offset:2px}

.btn{
  font-family:var(--ijaa-sans);
  font-weight:600;
  font-size:14px;
  border-radius:8px;
  padding:10px 18px;
  border:1px solid transparent;
  text-shadow:none;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.btn:hover,.btn:focus{text-decoration:none}

.btn-primary,.btn-primary:focus{
  background:var(--ijaa-accent);
  border-color:var(--ijaa-accent);
  color:#fff;
}
.btn-primary:hover,.btn-primary:active,.btn-primary:active:hover{
  background:var(--ijaa-accent-dark);
  border-color:var(--ijaa-accent-dark);
  color:#fff;
}

.btn-default,.btn-default:focus{
  background:var(--ijaa-paper);
  border-color:var(--ijaa-line-strong);
  color:var(--ijaa-ink);
}
.btn-default:hover{
  background:var(--ijaa-paper);
  border-color:var(--ijaa-ink);
  color:var(--ijaa-ink);
}


/* ==========================================================================
   5  SITE HEADER, NAVIGATION, SEARCH
   The theme prints two .container-fluid rows inside #headerNavigationContainer:
   the first holds the Register/Login list, the second the journal name and nav.
   ========================================================================== */

#headerNavigationContainer.navbar-default{
  background:var(--ijaa-paper);
  border:0;
  border-bottom:1px solid var(--ijaa-line);
  border-radius:0;
  margin-bottom:0;
  box-shadow:none;
}

/* --- utility bar (Register / Login) --- */
#headerNavigationContainer > .container-fluid:first-of-type{
  background:var(--ijaa-ink);
  padding:0 24px;
}
#headerNavigationContainer > .container-fluid:first-of-type > .row{
  max-width:var(--ijaa-shell);
  margin:0 auto;
}
#navigationUser{margin:0;padding:6px 0}
#navigationUser > li > a{
  color:#C9D3E4;
  font-size:12.5px;
  font-weight:500;
  padding:6px 12px;
  border-radius:6px;
  background:transparent;
}
#navigationUser > li > a:hover,
#navigationUser > li > a:focus{
  color:#fff;
  background:rgba(255,255,255,.10);
  text-decoration:none;
}

/* --- masthead + navigation row --- */
#headerNavigationContainer > .container-fluid:last-of-type{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  max-width:var(--ijaa-shell);
  margin:0 auto;
  padding:0 24px;
}
#headerNavigationContainer .navbar-header{
  flex:0 0 100%;
  float:none;
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px 0 18px;
}
#headerNavigationContainer .site-name{margin:0;font-size:inherit}
#headerNavigationContainer .navbar-brand{
  font-family:var(--ijaa-serif);
  font-size:25px;
  font-weight:700;
  line-height:1.2;
  color:var(--ijaa-ink);
  height:auto;
  padding:0;
  white-space:normal;
}
#headerNavigationContainer .navbar-brand:hover{color:var(--ijaa-accent);text-decoration:none}
/* If a logo image is uploaded in Appearance settings it renders here */
#headerNavigationContainer .navbar-brand img{max-height:62px;width:auto}

/* main navigation row.
   Bootstrap 3 sets .navbar-collapse.collapse{display:block !important} above
   768px, so the display value here has to be !important to win. It is scoped
   to the desktop breakpoint on purpose: below 768px the collapsed menu must
   stay hidden until the toggle is pressed. */
@media (min-width:768px){
  #nav-menu.collapse{display:flex !important}
}
#nav-menu{
  flex:0 0 100%;
  border-top:1px solid var(--ijaa-line);
  padding:0;
  flex-wrap:wrap;
  align-items:center;
}
#main-navigation{float:none;margin:0;display:flex;flex-wrap:wrap;flex:0 1 auto}
#main-navigation > li > a{
  font-family:var(--ijaa-sans);
  font-size:14.5px;
  font-weight:500;
  color:var(--ijaa-ink-soft);
  padding:14px 14px;
  border-bottom:2px solid transparent;
  background:transparent;
}
#main-navigation > li > a:hover,
#main-navigation > li > a:focus{
  color:var(--ijaa-accent);
  background:transparent;
  border-bottom-color:var(--ijaa-line-strong);
  text-decoration:none;
}
#main-navigation > li.active > a,
#main-navigation > li.active > a:hover{
  color:var(--ijaa-ink);
  font-weight:600;
  background:transparent;
  border-bottom-color:var(--ijaa-accent);
}

/* search form, pushed to the right of the nav row */
#nav-menu .pull-md-right{margin-left:auto;float:none}
#nav-menu .navbar-form{
  float:none;
  margin:0;
  padding:0;
  border:0;
  box-shadow:none;
  display:flex;
  align-items:center;
  gap:8px;
}
#nav-menu .navbar-form .form-control{
  height:38px;
  border-radius:999px;
  border:1px solid var(--ijaa-line-strong);
  background:var(--ijaa-bg-2);
  box-shadow:none;
  font-size:14px;
  padding:0 16px;
  min-width:220px;
  color:var(--ijaa-ink);
}
#nav-menu .navbar-form .form-control:focus{
  border-color:var(--ijaa-accent);
  background:var(--ijaa-paper);
  outline:none;
}
#nav-menu .navbar-form .btn{padding:9px 16px;font-size:13px}

/* mobile toggle */
#headerNavigationContainer .navbar-toggle{
  border-color:var(--ijaa-line-strong);
  border-radius:8px;
  margin:0;
}
#headerNavigationContainer .navbar-toggle .icon-bar{background:var(--ijaa-ink)}


/* ==========================================================================
   6  PAGE SHELL AND SIDEBAR LAYOUT
   Replaces the Bootstrap 3 float grid (col-sm-2 makes the sidebar 17% wide
   between 768px and 991px, which is what wraps "Open Access Policy" onto
   three lines today).
   ========================================================================== */

/* Bootstrap 3 puts clearfix pseudo-elements on .row, .container and .navbar-*.
   The moment one of those becomes a flex container, those pseudo-elements turn
   into real flex items and eat a gap each. Every container flexed below must
   be listed here. */
.pkp_structure_content.container:before,
.pkp_structure_content.container:after,
#headerNavigationContainer > .container-fluid:before,
#headerNavigationContainer > .container-fluid:after,
#headerNavigationContainer .navbar-header:before,
#headerNavigationContainer .navbar-header:after,
#nav-menu:before,
#nav-menu:after,
#main-navigation:before,
#main-navigation:after,
#nav-menu .navbar-form:before,
#nav-menu .navbar-form:after,
.article-details > .row:before,
.article-details > .row:after,
.media-list:before,
.media-list:after,
.issues:before,
.issues:after,
.article-summary .btn-group:before,
.article-summary .btn-group:after,
.ijaa-indexing:before,
.ijaa-indexing:after{
  display:none;
}

.pkp_structure_content.container{
  width:100%;
  max-width:var(--ijaa-shell);
  padding:36px 24px 64px;
  display:flex;
  align-items:flex-start;
  gap:44px;
}
.pkp_structure_main{
  float:none;
  width:auto;
  min-width:0;
  flex:1 1 0;      /* basis 0: the rail keeps its width, main takes the rest */
  padding:0;
}
.pkp_structure_sidebar{
  float:none;
  width:var(--ijaa-rail);
  flex:0 0 var(--ijaa-rail);
  padding:0;
  position:sticky;
  top:24px;
}

/* The article page has its own rail (PDF, DOI, licence). Showing both rails
   at once is what makes that page feel cramped. Delete this block if you want
   "Make a Submission" and the indexing block on article pages too. */
.pkp_page_article .pkp_structure_sidebar{display:none}


/* ==========================================================================
   7  SIDEBAR BLOCKS
   ========================================================================== */

.pkp_block{
  background:var(--ijaa-paper);
  border:1px solid var(--ijaa-line);
  border-radius:var(--ijaa-radius-lg);
  box-shadow:var(--ijaa-shadow-sm);
  padding:20px 22px;
  margin:0 0 18px;
}
.pkp_block .title{
  font-family:var(--ijaa-sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ijaa-muted);
  margin:0 0 12px;
}
.pkp_block ul{list-style:none;margin:0;padding:0}
.pkp_block li + li{border-top:1px solid var(--ijaa-line)}
.pkp_block li a{
  display:block;
  padding:9px 0;
  font-size:14.5px;
  color:var(--ijaa-ink-soft);
}
.pkp_block li a:hover{color:var(--ijaa-accent);text-decoration:none}
.pkp_block p{margin:0 0 10px;font-size:14.5px;color:var(--ijaa-ink-soft)}
.pkp_block p:last-child{margin-bottom:0}

/* "Make a Submission" block reads as the primary call to action */
.block_make_submission .block_make_submission_link,
.block_make_submission a.btn{
  display:block;
  width:100%;
  text-align:center;
  background:var(--ijaa-accent);
  border-color:var(--ijaa-accent);
  color:#fff;
  font-weight:600;
  padding:12px 16px;
  border-radius:8px;
}
.block_make_submission a:hover{background:var(--ijaa-accent-dark);color:#fff;text-decoration:none}

/* Indexing logos in a custom sidebar block: one height, monochrome until hover */
#customblock-ith img,
.block_custom img{
  display:block;
  height:30px;
  width:auto;
  max-width:100%;
  margin:14px auto;
  filter:grayscale(1);
  opacity:.75;
  transition:filter .18s ease,opacity .18s ease;
}
#customblock-ith img:hover,
.block_custom img:hover{filter:none;opacity:1}


/* ==========================================================================
   8  BREADCRUMBS AND PAGE HEADINGS
   ========================================================================== */

.cmp_breadcrumbs .breadcrumb{
  background:transparent;
  padding:0;
  margin:0 0 22px;
  font-size:13px;
  color:var(--ijaa-muted);
  border-radius:0;
}
.cmp_breadcrumbs .breadcrumb a{color:var(--ijaa-muted)}
.cmp_breadcrumbs .breadcrumb a:hover{color:var(--ijaa-accent)}
.cmp_breadcrumbs .breadcrumb > li + li:before{color:var(--ijaa-line-strong)}

.page > .page-header,
.page-header{
  border-bottom:0;
  padding-bottom:0;
  margin:0 0 22px;
}
.page > .page-header,
h1.page-header{font-size:32px}


/* ==========================================================================
   9  ARTICLE LIST ENTRIES (home, issue table of contents, search results)
   Markup: .article-summary.media > .media-body > h3.media-heading + .meta
   ========================================================================== */

.media-list{margin:0;display:flex;flex-direction:column;gap:14px}

.article-summary.media,
.media-list > .media{
  margin:0;
  background:var(--ijaa-paper);
  border:1px solid var(--ijaa-line);
  border-radius:var(--ijaa-radius-lg);
  box-shadow:var(--ijaa-shadow-sm);
  padding:22px 24px;
  transition:box-shadow .16s ease,border-color .16s ease;
  overflow:visible;
}
.article-summary.media:hover{
  box-shadow:var(--ijaa-shadow-md);
  border-color:var(--ijaa-line-strong);
}

.article-summary .media-heading{
  font-family:var(--ijaa-serif);
  font-size:19.5px;
  font-weight:600;
  line-height:1.3;
  margin:0;
}
.article-summary .media-heading a{color:var(--ijaa-ink)}
.article-summary .media-heading a:hover{color:var(--ijaa-accent);text-decoration:none}

.article-summary .meta{margin-top:9px}
.article-summary .authors{
  font-size:14.5px;
  color:var(--ijaa-ink-soft);
  line-height:1.55;
  max-width:82ch;
}
.article-summary .pages,
.article-summary .published{
  font-size:13px;
  color:var(--ijaa-muted);
  margin:8px 0 0;
}

.article-summary .btn-group{margin-top:14px;display:flex;gap:8px}
.article-summary .btn-group > .btn,
.article-summary .galley-link.btn{
  float:none;
  background:var(--ijaa-paper);
  border:1px solid var(--ijaa-line-strong);
  color:var(--ijaa-ink);
  font-size:13px;
  font-weight:600;
  padding:8px 14px;
  border-radius:8px;
}
.article-summary .galley-link.btn:hover{
  border-color:var(--ijaa-accent);
  color:var(--ijaa-accent);
  background:var(--ijaa-paper);
}


/* ==========================================================================
   10  ISSUE AND ARCHIVE PAGES
   ========================================================================== */

/* section headings inside a table of contents */
.sections > .section > h2,
.issue-toc .section > h2{
  font-family:var(--ijaa-sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ijaa-muted);
  padding-bottom:10px;
  border-bottom:1px solid var(--ijaa-line-strong);
  margin:34px 0 16px;
}

.issue-toc .heading{
  background:var(--ijaa-paper);
  border:1px solid var(--ijaa-line);
  border-radius:var(--ijaa-radius-lg);
  box-shadow:var(--ijaa-shadow-sm);
  padding:28px 30px;
  margin:0 0 26px;
}
.issue-toc .heading .issue-details h1,
.issue-toc .heading .issue-details h2{margin:0 0 8px;font-size:30px}
.issue-toc .heading .issue-details .published,
.issue-toc .heading .issue-details .description{
  font-size:14px;
  color:var(--ijaa-muted);
  margin:0;
}

/* current issue section on the homepage */
.current_issue > .page-header h2{
  font-size:26px;
  margin:0 0 20px;
}

/* archive listing */
.issues{margin:0;display:flex;flex-direction:column;gap:14px}
.issue-summary{
  background:var(--ijaa-paper);
  border:1px solid var(--ijaa-line);
  border-radius:var(--ijaa-radius-lg);
  box-shadow:var(--ijaa-shadow-sm);
  padding:20px 24px;
  margin:0;
}
.issue-summary:hover{box-shadow:var(--ijaa-shadow-md);border-color:var(--ijaa-line-strong)}
.issue-summary .media-heading,
.issue-summary .title{font-family:var(--ijaa-serif);font-size:19px;font-weight:600;margin:0}
.issue-summary .title a{color:var(--ijaa-ink)}
.issue-summary .description{font-size:14px;color:var(--ijaa-muted);margin-top:6px}

.pagination > li > a,
.pagination > li > span{
  color:var(--ijaa-ink-soft);
  border-color:var(--ijaa-line);
}
.pagination > .active > a,
.pagination > .active > span{
  background:var(--ijaa-accent);
  border-color:var(--ijaa-accent);
}


/* ==========================================================================
   11  ARTICLE LANDING PAGE
   Markup: article.article-details > header > h1.page-header
           > .row > section.article-sidebar.col-md-4 + div.col-md-8
   The sidebar is printed first, so it lands on the left. The rules below turn
   the row into flexbox and move it to the right, next to the reading column.
   ========================================================================== */

.article-details > header > h1.page-header{
  font-size:clamp(26px,2.6vw,34px);
  line-height:1.24;
  max-width:42ch;
  margin:0 0 8px;
  border:0;
  padding:0;
}

.article-details > .row{
  display:flex;
  flex-wrap:nowrap;   /* with wrap, the reading column's content width would
                         push the rail onto its own line before shrinking */
  align-items:flex-start;
  gap:44px;
  margin:26px 0 0;
}
.article-details > .row > .article-sidebar{
  order:2;
  float:none;
  width:var(--ijaa-rail);
  flex:0 0 var(--ijaa-rail);
  padding:0;
  position:sticky;
  top:24px;
}
.article-details > .row > .col-md-8{
  order:1;
  float:none;
  width:auto;
  min-width:0;
  flex:1 1 0;
  padding:0;
}

/* --- author line --- */
.article-details .authors{
  margin:0 0 26px;
  padding:0 0 22px;
  border-bottom:1px solid var(--ijaa-line);
}
.article-details .authors strong{
  font-family:var(--ijaa-sans);
  font-size:16px;
  font-weight:500;
  line-height:1.7;
  color:var(--ijaa-ink);
}

/* --- abstract --- */
.article-details .article-summary h3,
.article-details .article-abstract h3{
  font-family:var(--ijaa-sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ijaa-muted);
  margin:0 0 14px;
}
.article-details .article-abstract p{
  font-family:var(--ijaa-serif);
  font-size:18px;
  line-height:1.68;
  color:var(--ijaa-ink-soft);
  max-width:var(--ijaa-measure);
}

/* --- keywords, shown when the metadata field is filled --- */
.article-details .keywords .value,
.article-details .article-keywords{margin-top:6px}
.article-details .keywords .value span,
.article-details .article-keywords span{
  display:inline-block;
  border:1px solid var(--ijaa-line-strong);
  border-radius:999px;
  padding:5px 13px;
  margin:0 6px 6px 0;
  font-size:13px;
  color:var(--ijaa-ink-soft);
  background:var(--ijaa-paper);
}

/* --- references --- */
.article-references{
  margin-top:34px;
  padding-top:28px;
  border-top:1px solid var(--ijaa-line);
}
.article-references h3{
  font-family:var(--ijaa-sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ijaa-muted);
  margin:0 0 16px;
}
.article-references-content ol{
  padding-left:26px;
  max-width:var(--ijaa-measure);
}
.article-references-content li{
  font-size:15px;
  line-height:1.6;
  color:var(--ijaa-ink-soft);
  margin-bottom:12px;
}
.article-references-content a{word-break:break-word}

/* --- article rail: PDF, DOI, licence --- */
.article-sidebar .download{margin:0 0 18px}
.article-sidebar .download .galley-link.btn{
  display:block;
  width:100%;
  text-align:center;
  background:var(--ijaa-accent);
  border-color:var(--ijaa-accent);
  color:#fff;
  font-size:15px;
  font-weight:600;
  padding:13px 18px;
  border-radius:8px;
  margin:0 0 8px;
}
.article-sidebar .download .galley-link.btn:hover{
  background:var(--ijaa-accent-dark);
  border-color:var(--ijaa-accent-dark);
  color:#fff;
}

.article-sidebar .list-group{margin:0 0 18px}
.article-sidebar .list-group-item{
  border:1px solid var(--ijaa-line);
  border-radius:var(--ijaa-radius) !important;
  background:var(--ijaa-paper);
  padding:14px 16px;
  margin-bottom:8px;
  font-size:13.5px;
  box-shadow:var(--ijaa-shadow-sm);
}
.article-sidebar .list-group-item.doi strong{
  display:block;
  font-family:var(--ijaa-sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ijaa-muted);
  margin-bottom:5px;
}
.article-sidebar .list-group-item.doi a{word-break:break-all;font-size:13.5px}

.article-sidebar .panel.copyright{
  border:1px solid var(--ijaa-line);
  border-radius:var(--ijaa-radius-lg);
  box-shadow:var(--ijaa-shadow-sm);
  background:var(--ijaa-paper);
}
.article-sidebar .panel.copyright .panel-body{padding:18px 20px;font-size:13.5px;color:var(--ijaa-ink-soft)}
.article-sidebar .panel.copyright h5{
  font-family:var(--ijaa-sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ijaa-muted);
  margin:0 0 8px;
}


/* ==========================================================================
   12  EDITORIAL BOARD                                        [needs snippet]
   Works with the markup in ijaa-content-snippets.html, pasted into
   Settings -> Journal -> Masthead -> Editorial Team.
   ========================================================================== */

.ijaa-board{margin-bottom:40px}
.ijaa-board > h2{
  font-family:var(--ijaa-sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ijaa-muted);
  padding-bottom:10px;
  border-bottom:1px solid var(--ijaa-line-strong);
  margin:0 0 18px;
}
.ijaa-board > h3{
  font-family:var(--ijaa-serif);
  font-size:18px;
  font-weight:600;
  margin:26px 0 14px;
}
.ijaa-people{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:14px;
}
.ijaa-person{
  background:var(--ijaa-paper);
  border:1px solid var(--ijaa-line);
  border-radius:var(--ijaa-radius);
  box-shadow:var(--ijaa-shadow-sm);
  padding:17px 19px;
}
.ijaa-person .n{
  display:block;
  font-family:var(--ijaa-serif);
  font-size:17px;
  font-weight:600;
  line-height:1.3;
  color:var(--ijaa-ink);
}
.ijaa-person .a{
  display:block;
  font-size:13.5px;
  line-height:1.5;
  color:var(--ijaa-ink-soft);
  margin-top:6px;
}
.ijaa-person .e{
  display:block;
  font-size:12.5px;
  color:var(--ijaa-muted);
  margin-top:9px;
  word-break:break-word;
}

/* Fallback while the page is still a flat list of paragraphs */
.page_editorial_team p{margin:0 0 4px;font-size:15px;color:var(--ijaa-ink-soft);max-width:var(--ijaa-measure)}
.page_editorial_team p strong{
  display:block;
  font-family:var(--ijaa-sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ijaa-muted);
  margin:26px 0 10px;
}


/* ==========================================================================
   13  STATIC CONTENT PAGES (Aims & Scope, About, Author Guidelines, Contact)
   ========================================================================== */

.page > p,
.page > ul,
.page > ol,
.page_about p,
.author_guidelines p,
.copyright-notice p{
  font-family:var(--ijaa-serif);
  font-size:17.5px;
  line-height:1.7;
  color:var(--ijaa-ink-soft);
  max-width:var(--ijaa-measure);
}
.page > ul,
.page > ol{padding-left:24px}
.page > ul li,
.page > ol li{margin-bottom:8px}
.page h2,
.page h3{margin:34px 0 12px}
.page h2{font-size:22px}
.page h3{font-size:19px}
.page strong{color:var(--ijaa-ink)}

.alert{
  border:0;
  border-left:3px solid var(--ijaa-accent);
  border-radius:var(--ijaa-radius);
  background:var(--ijaa-accent-soft);
  color:var(--ijaa-ink-soft);
  padding:16px 20px;
  max-width:var(--ijaa-measure);
}

/* Cloudflare-obfuscated addresses should not look like broken text */
.__cf_email__{color:var(--ijaa-accent)}


/* ==========================================================================
   14  HOMEPAGE HERO                                          [needs snippet]
   Styles the markup pasted into
   Settings -> Website -> Appearance -> Journal Description (or Homepage Image
   / Additional Content, wherever the description currently lives).
   ========================================================================== */

.ijaa-hero{
  background:var(--ijaa-paper);
  border:1px solid var(--ijaa-line);
  border-radius:var(--ijaa-radius-lg);
  box-shadow:var(--ijaa-shadow-sm);
  padding:38px 40px;
  margin:0 0 34px;
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:44px;
  align-items:start;
}
.ijaa-hero .ijaa-eyebrow{
  font-family:var(--ijaa-sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ijaa-muted);
}
.ijaa-hero h2{font-size:clamp(26px,3vw,34px);margin:12px 0 0}
.ijaa-hero p{
  font-family:var(--ijaa-serif);
  font-size:18px;
  line-height:1.6;
  color:var(--ijaa-ink-soft);
  max-width:56ch;
  margin:16px 0 0;
}
.ijaa-hero .ijaa-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.ijaa-facts{border-left:1px solid var(--ijaa-line);padding-left:26px;margin:0}
.ijaa-facts .f{padding:11px 0}
.ijaa-facts .f + .f{border-top:1px solid var(--ijaa-line)}
.ijaa-facts .k{
  font-family:var(--ijaa-sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ijaa-muted);
}
.ijaa-facts .v{font-family:var(--ijaa-serif);font-size:17px;font-weight:600;margin-top:4px}

/* Plain journal description, when no hero markup is used */
.journal-description{max-width:var(--ijaa-measure);margin-bottom:34px}
.journal-description p{font-family:var(--ijaa-serif);font-size:17px;line-height:1.68;color:var(--ijaa-ink-soft)}
.journal-description strong{
  display:block;
  font-family:var(--ijaa-sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ijaa-muted);
  margin:28px 0 8px;
}


/* --- Scope / topics card, sits under the hero -------------- [needs snippet] */

.ijaa-scope{
  background:var(--ijaa-paper);
  border:1px solid var(--ijaa-line);
  border-radius:var(--ijaa-radius-lg);
  box-shadow:var(--ijaa-shadow-sm);
  padding:30px 34px;
  margin:0 0 30px;
}
.ijaa-scope > .ijaa-eyebrow{
  display:block;
  font-family:var(--ijaa-sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ijaa-muted);
  margin:0 0 14px;
}
.ijaa-scope p{
  font-family:var(--ijaa-serif);
  font-size:17.5px;
  line-height:1.65;
  color:var(--ijaa-ink-soft);
  max-width:var(--ijaa-measure);
  margin:0 0 22px;
}
/* The topics sentence is left exactly as written — one semicolon-separated
   run. It only gets a quieter size and two text columns on wide screens, so it
   stops reading as a wall while every word stays where it was. */
.ijaa-scope .ijaa-topics{
  font-family:var(--ijaa-serif);
  font-size:15.5px;
  line-height:1.62;
  color:var(--ijaa-muted);
  max-width:none;
  margin:0;
  padding-top:16px;
  border-top:1px solid var(--ijaa-line);
}
@media (min-width:992px){
  .ijaa-scope .ijaa-topics{
    column-count:2;
    column-gap:48px;
    column-rule:1px solid var(--ijaa-line);
  }
}

/* Panels for thin content pages (Aims & Scope, About). These pages already sit
   next to the site sidebar, so the extra information goes UNDER the text as a
   full-width strip rather than in a second rail — three columns of content on
   one page reads as clutter and squeezes the text to a ribbon. */
.ijaa-panel{
  background:var(--ijaa-paper);
  border:1px solid var(--ijaa-line);
  border-radius:var(--ijaa-radius-lg);
  box-shadow:var(--ijaa-shadow-sm);
  padding:22px 24px;
}
.ijaa-panel + .ijaa-panel{margin-top:16px}
.ijaa-panel > .ijaa-eyebrow{
  display:block;
  font-family:var(--ijaa-sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ijaa-muted);
  margin:0 0 12px;
}
.ijaa-panel .ijaa-facts{border-left:0;padding-left:0}
.ijaa-panel .ijaa-facts .v{font-size:15.5px}

/* Policy cards — a short page's sections laid out as a grid instead of a
   single running column, so four two-line policies fill the width. */
.ijaa-policies{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:16px;
  margin:0 0 22px;
}
/* the stacked-panel margin must not apply inside the grid, or every card
   after the first sits 16px lower than its neighbour */
.ijaa-policies .ijaa-panel + .ijaa-panel{margin-top:0}
.ijaa-policies .ijaa-panel{padding:22px 24px}
.ijaa-policies .ijaa-panel p{
  font-family:var(--ijaa-serif);
  font-size:15.5px;
  line-height:1.62;
  color:var(--ijaa-ink-soft);
  margin:0;
  max-width:none;
}
.ijaa-more{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--ijaa-sans);
  font-size:14.5px;
  font-weight:600;
}
.ijaa-more::after{content:"\2192";font-weight:400}
.ijaa-more:hover{text-decoration:none}
.ijaa-more:hover::after{transform:translateX(2px)}

/* facts laid out across the page instead of stacked */
.ijaa-facts--row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:0 30px;
}
.ijaa-facts--row .f{padding:10px 0}
.ijaa-facts--row .f + .f{border-top:0}
.ijaa-facts--row .v{font-size:15.5px}

/* indexing logos inside a panel */
.ijaa-panel .marks{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.ijaa-panel .marks img{
  height:26px;
  width:auto;
  filter:grayscale(1);
  opacity:.7;
  transition:filter .18s ease,opacity .18s ease;
}
.ijaa-panel .marks a:hover img{filter:none;opacity:1}

/* Optional row of links under the scope card */
.ijaa-quicklinks{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:22px 0 0;
  padding:0;
  list-style:none;
}
.ijaa-quicklinks li{margin:0}
.ijaa-quicklinks a{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--ijaa-line-strong);
  border-radius:999px;
  background:var(--ijaa-paper);
  padding:8px 16px;
  font-size:13.5px;
  font-weight:600;
  color:var(--ijaa-ink);
}
.ijaa-quicklinks a:hover{
  border-color:var(--ijaa-accent);
  color:var(--ijaa-accent);
  text-decoration:none;
}


/* ==========================================================================
   15  INDEXING BADGE STRIP                                   [needs snippet]
   ========================================================================== */

.ijaa-indexing{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
  background:var(--ijaa-bg-2);
  border:1px solid var(--ijaa-line);
  border-radius:var(--ijaa-radius-lg);
  padding:16px 22px;
  margin:0 0 30px;
}
.ijaa-indexing .ijaa-eyebrow{
  font-family:var(--ijaa-sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ijaa-muted);
}
.ijaa-indexing .marks{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.ijaa-indexing img{
  height:26px;
  width:auto;
  filter:grayscale(1);
  opacity:.7;
  transition:filter .18s ease,opacity .18s ease;
}
.ijaa-indexing a:hover img{filter:none;opacity:1}


/* ==========================================================================
   16  FOOTER
   ========================================================================== */

.footer{
  background:var(--ijaa-ink);
  color:#B9C5DA;
  border-top:0;
  padding:48px 0 28px;
  font-size:14px;
}
.footer .container{max-width:var(--ijaa-shell);width:100%;padding:0 24px}
.footer a{color:#D6DEEC}
.footer a:hover{color:#fff}
.footer h1,.footer h2,.footer h3,.footer h4,.footer h5{
  font-family:var(--ijaa-sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#8FA3C4;
  margin:0 0 14px;
}
.footer p{color:#B9C5DA;line-height:1.65}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:8px}
.footer img{
  height:30px;
  width:auto;
  margin:0 18px 12px 0;
  filter:grayscale(1) brightness(2.2);
  opacity:.85;
  transition:filter .18s ease,opacity .18s ease;
}
.footer a:hover img{filter:none;opacity:1}
.footer hr{border-top-color:rgba(255,255,255,.14)}


/* ==========================================================================
   17  RESPONSIVE
   ========================================================================== */

@media (max-width:991px){
  .pkp_structure_content.container{flex-direction:column;gap:32px;padding-top:28px}
  /* In a column flex container flex-basis applies to HEIGHT, so the desktop
     "flex:1 1 0" would collapse the main column to zero height here. */
  .pkp_structure_main{flex:0 1 auto;width:100%}
  .article-details > .row > .col-md-8{flex:0 1 auto;width:100%}
  .pkp_structure_sidebar{width:100%;flex:0 1 auto;position:static}
  .pkp_block{margin-bottom:14px}
  .article-details > .row{flex-direction:column;flex-wrap:wrap;gap:28px}
  .article-details > .row > .article-sidebar{order:0;width:100%;flex:1 1 auto;position:static}
  .ijaa-hero{grid-template-columns:minmax(0,1fr);gap:28px;padding:28px 26px}
  .ijaa-facts{border-left:0;border-top:1px solid var(--ijaa-line);padding-left:0;padding-top:6px}
}

@media (max-width:767px){
  .pkp_structure_content.container{padding-left:18px;padding-right:18px}
  #headerNavigationContainer > .container-fluid:last-of-type{padding:0 18px}
  #headerNavigationContainer .navbar-brand{font-size:21px}
  #nav-menu{border-top:0;padding-bottom:12px}
  #main-navigation{flex-direction:column;width:100%}
  #main-navigation > li > a{padding:12px 0;border-bottom:1px solid var(--ijaa-line)}
  #nav-menu .pull-md-right{margin-left:0;width:100%}
  #nav-menu .navbar-form .form-control{min-width:0;width:100%}
  .article-summary.media,.media-list > .media{padding:18px 18px}
  .article-summary .media-heading{font-size:18px}
  .article-details .article-abstract p{font-size:17px}
  .page > p,.page_about p,.author_guidelines p{font-size:16.5px}
  .ijaa-people{grid-template-columns:1fr}
}


/* ==========================================================================
   18  PRINT
   ========================================================================== */

@media print{
  #headerNavigationContainer,.pkp_structure_sidebar,.article-sidebar,.footer,
  .cmp_breadcrumbs{display:none !important}
  .pkp_structure_content.container{display:block;padding:0}
  body{background:#fff;font-size:12pt}
  .article-summary.media{box-shadow:none;border:0;padding:0}
}