/* ==========================================================================
   HEALTH INQUIRIES — journal stylesheet ("Field")
   Open Journal Systems 3.3 · Default theme · journal 47

   WHERE THIS GOES
     Settings > Website > Appearance > Advanced > Journal style sheet

   THE HOMEPAGE HERO IS SEPARATE
     Settings > Website > Appearance > Advanced > Additional Content
     Paste the contents of hrj-additional-content.html there FIRST.

   WRITTEN AGAINST THE REAL PKP MARKUP. Notes on why particular overrides
   exist are inline — please keep them, they explain the non-obvious ones.
   ========================================================================== */

/* --------------------------------------------------------------- 0. tokens */
:root{
  /* hero height — the Information block is positioned against this, so if the
     hero's min-height changes, change it here too */
  --hi-hero-h:600px;
  --hi-interior-h:230px;
  --hi-green:#007F65;        /* brand green, sampled from the logo artwork    */
  --hi-green-dk:#00543F;
  --hi-link:#00735B;         /* 5.83:1 on white — passes WCAG AA. see FIX 3   */
  --hi-ink:#12181C;
  --hi-body:#39443F;
  --hi-muted:#5D6B66;
  --hi-rule:#DFE5E3;
  --hi-rule-2:#C7D2CE;
  --hi-foot:#0C1512;
  --hi-foot-ink:#94A69F;
  --hi-wrap:1240px;
  --hi-gut:60px;
  --hi-face:"Gill Sans","Gill Sans MT",Corbel,"Trebuchet MS",-apple-system,
            "Segoe UI",Roboto,sans-serif;
  /* The artwork. Replace with a web-sized file — the current one is 2.5 MB
     at 3179x2613 and is the first thing every visitor waits for (FIX 5).    */
  --hi-art:url(/public/journals/47/homepageImage_en_US.jpg);
  --hi-scrim:linear-gradient(180deg,rgba(8,14,12,.74) 0%,rgba(8,14,12,.20) 24%,
              rgba(8,14,12,.20) 44%,rgba(8,14,12,.90) 100%),
             linear-gradient(90deg,rgba(8,14,12,.80) 0%,rgba(8,14,12,.62) 34%,
              rgba(8,14,12,.05) 66%,rgba(8,14,12,0) 100%);
}

/* ------------------------------------------------------------ 1. typography
   FIX 1 — THE EMPTY-BOX ICONS.
   The previous stylesheet did this:
       p, a, li, span, div, … { font-family:'Public Sans' !important; }
   Font Awesome sets its icon font on .fa with no !important, so that rule won
   every fight and pushed every icon into a text font with no icon glyphs —
   which is why "Search" and the submission checklist showed as squares.
   Here the face is set once on body and inherited. No !important is used on
   font-family anywhere, so .fa keeps its own font. (The only !important in
   this file is on the account menu's position — see section 2.)            */
body{font-family:var(--hi-face);font-size:16.5px;line-height:1.62;
  color:var(--hi-ink);background:#fff;-webkit-font-smoothing:antialiased}
input,button,select,textarea{font-family:inherit}
.fa,[class^="fa-"],[class*=" fa-"]{font-family:FontAwesome}

h1,h2,h3,h4{color:var(--hi-ink);letter-spacing:-.008em}
a{color:var(--hi-link)}
a:hover{color:var(--hi-green-dk)}

/* Focus is a designed state, not the browser default. The theme barely
   provides one and keyboard users currently get almost no feedback.        */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--hi-green);outline-offset:3px;border-radius:2px}

/* --------------------------------------------------------------- 2. header
   Two modes.
   HOME  — header is lifted out of flow and sits transparent over the hero.
   OTHER — header IS the banner: artwork, scrim, logo and nav, in normal flow.
           The page title cannot be pulled onto the banner because it lives
           inside .pkp_structure_main, a different branch of the document.   */
.pkp_structure_head{background:transparent;border-bottom:0;position:relative}
.pkp_head_wrapper{max-width:var(--hi-wrap);margin:0 auto;
  padding:34px var(--hi-gut);position:relative;z-index:2;
  display:flex;align-items:center;gap:20px;flex-wrap:nowrap}

/* REAL STRUCTURE (confirmed from the live DOM, not guessed):
       .pkp_head_wrapper
         └ div.pkp_site_name_wrapper     the logo
         └ nav.pkp_site_nav_menu         holds BOTH the nav and the account
   Earlier attempts targeted .pkp_navigation_primary_wrapper as a flex child.
   It isn't one — it lives inside .pkp_site_nav_menu — which is why nothing
   took effect. The logo wrapper was also 952px wide and unshrinkable, pushing
   the nav off-screen entirely. */
.pkp_site_name_wrapper{flex:0 0 auto;margin:0;width:auto;max-width:320px}
.pkp_site_name{margin:0}
.pkp_site_nav_menu{flex:1 1 auto;min-width:0;display:flex;align-items:center;
  justify-content:flex-end;gap:26px;flex-wrap:nowrap;background:transparent}
.pkp_site_nav_menu > *{flex:0 0 auto}
/* The theme renders .pkp_navigation_user_wrapper at the very top of the page
   (top=0, 31px tall, full width) rather than inside the header row — so the
   account text sat white-on-white AND its 31px band pushed the artwork down.
   Pin it into the header instead. */
.pkp_head_wrapper{position:relative}
/* Force the header to be the positioning reference. If .pkp_site_nav_menu or
   .pkp_navigation_primary_row is positioned, the account anchors to that
   instead and lands mid-header rather than in the corner. */
.pkp_site_nav_menu,.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper{position:static}
/* The theme carries ~28 rules for this menu and one of them out-specifies a
   bare .pkp_navigation_user_wrapper, which is why `right` was being ignored.
   Scoped through two ancestors so it wins without !important. */
/* The account is already a sibling of the nav inside .pkp_site_nav_menu, so
   the simplest correct answer is to let flex place it: forced back into normal
   flow, it becomes the last item in a flex-end row and lands in the corner by
   itself. Absolute positioning kept anchoring to the wrong box; this needs no
   offsets at all and is responsive for free. */
.pkp_structure_head .pkp_head_wrapper .pkp_navigation_user_wrapper{
  position:static !important;
  top:auto !important;right:auto !important;bottom:auto !important;left:auto !important;
  width:auto !important;max-width:none;height:auto;margin:0 !important;padding:0;
  flex:0 0 auto;order:9;display:flex;align-items:center;background:transparent;
  /* breathing room between Search and the account, with a hairline divider so
     the two read as separate groups rather than one long list */
  padding-left:26px;
  border-left:1px solid rgba(255,255,255,.28)}
.pkp_structure_head .pkp_head_wrapper .pkp_navigation_user{
  margin:0 !important;padding:0;display:flex !important;align-items:center;
  justify-content:flex-end !important;width:auto !important;gap:14px}
.pkp_site_nav_menu > a[href^="#"]{display:none}
.pkp_page_index .additional_content,
.pkp_page_index .page_index_journal{margin:0;padding:0}
.pkp_page_index .additional_content > *:first-child,
.pkp_page_index .hi_hero{margin-top:0}
.pkp_site_name .is_img img{height:50px;width:auto;max-height:50px}

.pkp_navigation_primary_wrapper,.pkp_site_nav_menu,.pkp_navigation_primary,
.pkp_navigation_primary>li{background:transparent}
.pkp_navigation_primary_wrapper{display:flex;align-items:center;gap:20px;flex-wrap:nowrap}
.pkp_navigation_primary{display:flex;gap:20px;list-style:none;margin:0;padding:0;
  flex-wrap:nowrap}
.pkp_navigation_primary>li{margin:0}
.pkp_navigation_primary a{color:#fff;font-size:14.5px;white-space:nowrap;padding:0 0 5px;
  border-bottom:2px solid transparent;background:transparent}
.pkp_navigation_primary a:hover{border-bottom-color:rgba(255,255,255,.55);
  color:#fff;text-decoration:none}
.pkp_navigation_primary .current>a,
.pkp_navigation_primary li.current>a{border-bottom-color:#fff;color:#fff}
.pkp_search,.pkp_search a{color:#fff;font-size:14.5px;white-space:nowrap}
/* the theme paints the user-menu strip green; clear it so it sits on the art */
.pkp_navigation_user_wrapper,.pkp_navigation_user,.pkp_user_nav,
.pkp_navigation_user>li,.pkp_user_nav>li,.pkp_site_nav_menu{background:transparent}
.pkp_navigation_user,.pkp_navigation_user a,.pkp_user_nav,.pkp_user_nav a,
.pkp_navigation_user>li>a{color:#fff}
.pkp_navigation_user .dropdown-menu{background:#0E1A16;border:0;
  box-shadow:0 12px 34px -10px rgba(0,0,0,.55)}
.pkp_navigation_user .dropdown-menu a{color:#E6EDEA}
.pkp_structure_head a:focus-visible{outline-color:#fff}

/* dropdowns need to read as raised panels — the previous sheet explicitly
   removed their border and shadow, leaving a flat green slab               */
/* Dropdown panels. The link colour has to be scoped through the header and
   cover both markup shapes (.dropdown-menu and a nested ul), or the theme's
   own blue link colour shows through instead. */
.pkp_structure_head .dropdown-menu,
.pkp_structure_head .pkp_navigation_primary ul ul{background:#0E1A16;border:0;
  box-shadow:0 14px 38px -12px rgba(0,0,0,.6);padding:8px 0;min-width:230px}
.pkp_structure_head .dropdown-menu a,
.pkp_structure_head .dropdown-menu li a,
.pkp_structure_head .pkp_navigation_primary ul ul a,
.pkp_structure_head .pkp_navigation_primary li li a{
  color:#E6EDEA;padding:10px 20px;border-bottom:0;font-size:14.5px;
  display:block;background:transparent}
.pkp_structure_head .dropdown-menu a:hover,
.pkp_structure_head .dropdown-menu li a:hover,
.pkp_structure_head .pkp_navigation_primary ul ul a:hover,
.pkp_structure_head .pkp_navigation_primary li li a:hover{
  background:#17261F;color:#fff;text-decoration:none}

/* the artwork band behind the header on every page except the homepage */
body:not(.pkp_page_index) .pkp_structure_head{
  background:var(--hi-art) center 38%/cover no-repeat;min-height:var(--hi-interior-h);
  display:flex;align-items:flex-end;isolation:isolate}
body:not(.pkp_page_index) .pkp_structure_head::after{content:"";
  position:absolute;inset:0;z-index:-1;background:var(--hi-scrim)}
body:not(.pkp_page_index) .pkp_head_wrapper{width:100%;padding-top:24px;padding-bottom:24px}

/* Homepage. Until the Additional Content hero is pasted in, the header stays
   in flow as a banner like every other page — otherwise it floats over an
   empty white page. Once the hero is in, swap to the commented-out rule. */
.pkp_page_index .pkp_structure_head{
  background:var(--hi-art) center 38%/cover no-repeat;min-height:300px;
  display:flex;align-items:flex-end;isolation:isolate;position:relative}
.pkp_page_index .pkp_structure_head::after{content:"";position:absolute;inset:0;
  z-index:-1;background:var(--hi-scrim)}
.pkp_page_index .pkp_head_wrapper{width:100%;padding-bottom:34px}
/* :has() lets the header switch itself the moment the hero HTML is pasted
   into Additional Content, so nothing here needs changing by hand. */
body.pkp_page_index:has(.hi_hero) .pkp_structure_head{position:absolute;top:0;
  left:0;right:0;z-index:5;background:none;min-height:0;display:block}
body.pkp_page_index:has(.hi_hero) .pkp_structure_head::after{content:none}
/* -------------------------------------------------------------- 3. the hero
   Markup comes from Additional Content. It renders inside
   .pkp_structure_main, so it is broken out of the wrapper with the 100vw
   technique. Nothing above it may set overflow:hidden or this collapses.   */
/* No 100vw breakout: on the homepage .pkp_structure_content is made a single
   full-width column below, so the hero is edge-to-edge by simply being block
   level. calc(50% - 50vw) assumes a centred parent and main is a grid column,
   which is what pushed the hero off to the left. */
.hi_hero{position:relative;width:auto;margin-left:0;
  min-height:var(--hi-hero-h);display:flex;align-items:flex-end;isolation:isolate;
  background:var(--hi-art) center 38%/cover no-repeat;padding-top:130px}
.hi_hero::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--hi-scrim)}
/* A stray ::after was drawing a hairline down the full page height. These are
   clearfix pseudo-elements only — nothing here relies on them, since the
   layout is grid/flex rather than floats. */
.pkp_structure_page::after,.pkp_structure_page::before,
.pkp_structure_content::after,.pkp_structure_content::before,
.pkp_structure_main::after,.pkp_structure_main::before{content:none}
/* The hero renders INSIDE .pkp_structure_main, so the heading and paragraph
   rules further down this file (.pkp_structure_main h1 / p) would otherwise
   repaint this text in dark ink. Every selector here carries an extra class
   so it outranks them regardless of source order. */
.hi_hero .hi_hero_in{max-width:var(--hi-wrap);margin:0 auto;width:100%;
  padding:0 var(--hi-gut) 54px;color:#fff}
.hi_hero .hi_kick{font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:#9FE3CE;margin:0 0 16px}
.hi_hero .hi_hero_in h1{font-weight:300;font-size:clamp(38px,5.4vw,72px);
  line-height:1.04;letter-spacing:-.026em;max-width:15ch;margin:0 0 18px;
  color:#fff;font-family:var(--hi-face)}
.hi_hero .hi_sub{font-size:18px;line-height:1.5;max-width:46ch;
  color:#DCE6E2;margin:0 0 26px}
.hi_hero .hi_credit{position:absolute;right:var(--hi-gut);bottom:22px;margin:0;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.62)}
.hi_hero .hi_hero_in p{color:inherit}
.hi_hero .hi_hero_in p:has(> .hi_cta){margin:0}
.hi_hero .hi_cta,.hi_cta{display:inline-block;background:var(--hi-green);
  color:#fff;padding:16px 34px;font-size:15px;font-weight:600;text-decoration:none}
.hi_cta:hover{background:var(--hi-green-dk);color:#fff;text-decoration:none}

/* OJS's own homepage image is not used — the hero carries the artwork.
   Leave the file uploaded; --hi-art points at it.                          */
.pkp_page_index .homepage_image{display:none}
/* HOMEPAGE LAYOUT
   One full-width column. A two-column grid was tried so the Information block
   could sit beside the text, but it breaks the hero's full-bleed: the hero
   then lives in an off-centre grid column and no offset reaches both viewport
   edges cleanly. Full-bleed hero wins; Information goes below as a row. */
.pkp_page_index .pkp_structure_page,
.pkp_page_index .pkp_site,
.pkp_page_index .pkp_structure_content{max-width:none;width:auto;
  padding-left:0;padding-right:0;margin-left:0;margin-right:0}
.pkp_page_index .pkp_structure_content{display:block;padding:0}
.pkp_page_index .pkp_structure_main{display:flex;flex-direction:column;
  width:auto;max-width:none;padding:0;border:0}
.pkp_page_index .hi_hero{order:-1;margin-top:0;width:auto;margin-left:0}
/* Information sits level with "About the journal" in the empty right-hand
   space. It is a sibling of main and comes after it in the markup, so the only
   way up there without a grid (which breaks the hero's full bleed) is to
   position it against the content box, offset by the hero's height. */
.pkp_page_index .pkp_structure_content{position:relative}
.pkp_page_index .pkp_structure_sidebar{position:absolute;
  top:calc(var(--hi-hero-h) + 62px);
  right:calc(max(0px,(100vw - var(--hi-wrap))/2) + var(--hi-gut));
  width:260px;max-width:none;margin:0;padding:0;border:0}
.pkp_page_index .pkp_block{display:block;border-top:0;margin:0;
  border-left:3px solid var(--hi-green);padding:2px 0 2px 22px}
.pkp_page_index .pkp_block .title{margin:0 0 16px;font-size:16px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--hi-ink)}
.pkp_page_index .pkp_block ul{flex-direction:column;gap:12px}
@media (max-width:1180px){
  /* not enough room beside the text — drop it back into normal flow */
  .pkp_page_index .pkp_structure_sidebar{position:static;width:auto;
    max-width:var(--hi-wrap);margin:0 auto;padding:30px var(--hi-gut) 50px}
  .pkp_page_index .pkp_block{display:flex;flex-wrap:wrap;align-items:baseline;
    gap:14px 30px;border-top:1px solid var(--hi-rule);padding-top:24px}
  .pkp_page_index .pkp_block .title{margin:0;font-size:12.5px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--hi-muted)}
  .pkp_page_index .pkp_block ul{flex-direction:row;gap:12px 30px}
}
.pkp_page_index .pkp_structure_main > hr{display:none}
/* the theme draws column separators; none of them belong on the homepage */
.pkp_page_index .pkp_structure_content,
.pkp_page_index .pkp_structure_content > *,
.pkp_page_index .pkp_structure_main,
.pkp_page_index .pkp_structure_sidebar,
.pkp_page_index .pkp_structure_main > *{border-left:0;border-right:0}

/* ---------- homepage sections below the hero (from Additional Content) ---- */
.hi_band{max-width:var(--hi-wrap);margin:0 auto;padding:62px var(--hi-gut) 0}
.hi_band .hi_eyebrow{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--hi-muted);font-weight:600;margin:0 0 18px}
.hi_band p{max-width:64ch;color:var(--hi-body);margin:0 0 1.05em}
.hi_band p.hi_lead{font-size:22px;line-height:1.5;color:var(--hi-ink)}
.hi_strands{max-width:var(--hi-wrap);margin:0 auto;padding:44px var(--hi-gut) 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.hi_strands > div{border-top:3px solid var(--hi-green);padding-top:20px}
.hi_strands b,.hi_strands strong{display:block;font-size:20px;
  font-weight:600;margin-bottom:10px;line-height:1.3}
.hi_strands span{font-size:15px;line-height:1.6;color:var(--hi-muted)}
.hi_facts{max-width:var(--hi-wrap);margin:56px auto 0;padding:0 var(--hi-gut);
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--hi-rule);border-bottom:1px solid var(--hi-rule)}
.hi_facts > div{padding:24px 26px 24px 0}
.hi_facts b,.hi_facts strong{display:block;font-size:25px;font-weight:300;
  color:var(--hi-green);margin-bottom:5px;line-height:1.2}
.hi_facts span{font-size:14px;color:var(--hi-muted);line-height:1.5}
@media (max-width:860px){
  .hi_band{padding:44px var(--hi-gut) 0}
  .hi_strands,.hi_facts{grid-template-columns:1fr;gap:26px}
  .hi_facts > div{padding:20px 0;border-bottom:1px solid var(--hi-rule)}
}

/* ------------------------------------------------------------- 4. the grid
   The theme floats these at fixed widths:
       .pkp_structure_main{float:left;width:652px}
       .pkp_structure_sidebar{float:right;width:300px}
   Making the parent a grid neutralises float on its children, which is
   cleaner than fighting the widths one by one.                             */
.pkp_structure_content{max-width:var(--hi-wrap);margin:0 auto;
  padding:0 var(--hi-gut);display:grid;align-items:start;
  grid-template-columns:minmax(0,760px) minmax(220px,240px);
  column-gap:72px;justify-content:start}
/* OJS emits .pkp_structure_sidebar BEFORE .pkp_structure_main and swaps them
   visually with float:left / float:right. Grid ignores float, so the columns
   must be assigned explicitly or the sidebar lands on the left. */
.pkp_structure_main{float:none;width:auto;padding:56px 0 84px;min-width:0;
  grid-column:1;grid-row:1}
.pkp_structure_sidebar{float:none;width:auto;padding:56px 0 84px 28px;
  border-left:1px solid var(--hi-rule);box-sizing:border-box;
  grid-column:2;grid-row:1}

/* The theme puts EVERY heading in Lora, a serif:
       .pkp_structure_main h1 { font-family:Lora,serif; font-weight:700 }
   So headings were not in Gill Sans at all. These match the theme's own
   specificity and win on source order, since our sheet loads after it. */
.pkp_structure_main h1,.pkp_structure_main h2,.pkp_structure_main h3,
.pkp_structure_main h4,.pkp_structure_main h5,.pkp_block .title,
.pkp_block h2,.page_title{font-family:var(--hi-face)}
.pkp_structure_main h1{font-weight:300;font-size:clamp(32px,4vw,46px);
  line-height:1.08;letter-spacing:-.025em;margin:0 0 32px;color:var(--hi-ink)}
.pkp_structure_main h2{font-size:23px;font-weight:600;line-height:1.3;
  margin:34px 0 12px;letter-spacing:-.008em}
.pkp_structure_main h3{font-size:19px;font-weight:600;line-height:1.35;
  margin:26px 0 10px}
.pkp_structure_main h4{font-size:17px;font-weight:600;margin:22px 0 8px}
.pkp_structure_main p{color:var(--hi-body);margin:0 0 1.05em}

.pkp_block .title{font-size:16px;font-weight:600;color:var(--hi-ink);margin:0 0 16px}
.pkp_block ul{list-style:none;padding:0;margin:0;display:flex;
  flex-direction:column;gap:12px}
/* FIX 3 — the old #009879 measured 3.64:1 on white and failed WCAG AA.     */
.pkp_block a{color:var(--hi-link);font-size:15px;text-decoration:none}
.pkp_block a:hover{color:var(--hi-green-dk);text-decoration:underline}

/* ------------------------------------------------------------- 5. controls */
.pkp_button,.pkp_button_primary,button.submitFormButton,
input[type="submit"],.cmp_button{background:var(--hi-green);color:#fff;border:0;
  padding:14px 28px;font-size:15px;font-weight:600;border-radius:0;
  font-family:inherit;cursor:pointer}
.pkp_button:hover,input[type="submit"]:hover{background:var(--hi-green-dk);color:#fff}
input[type="text"],input[type="email"],input[type="password"],
input[type="search"],textarea,select{font-family:inherit;font-size:16px;
  padding:12px 14px;border:2px solid var(--hi-rule-2);border-radius:0;background:#fff}
input:focus,textarea:focus,select:focus{border-color:var(--hi-green);outline:none}

/* -------------------------------------------------------------- 6. footer */
.pkp_structure_footer_wrapper,.pkp_structure_footer{background:var(--hi-foot);
  color:var(--hi-foot-ink);border-top:0}
.pkp_structure_footer{padding:48px var(--hi-gut)}
.pkp_structure_footer .pkp_footer_content{max-width:var(--hi-wrap);margin:0 auto}
.pkp_structure_footer p{font-size:13px;line-height:1.7;color:var(--hi-foot-ink);
  max-width:76ch}
.pkp_structure_footer a{color:#BFD3CC}
/* "Platform & workflow by OJS/PKP" renders near-black on the dark footer */
.pkp_brand_footer{max-width:var(--hi-wrap);margin:0 auto;padding:0 var(--hi-gut) 8px;
  opacity:.6}
.pkp_brand_footer,.pkp_brand_footer a,.pkp_brand_footer p{color:var(--hi-foot-ink)}
.pkp_brand_footer img,.pkp_brand_footer svg{filter:brightness(0) invert(1);opacity:.75}

/* ---------------------------------------------------------------- 7. phone */
@media (max-width:860px){
  :root{--hi-gut:20px}
  body{font-size:16px}
  .pkp_head_wrapper{padding:18px var(--hi-gut);gap:12px 20px;flex-wrap:wrap}
  .pkp_site_name_wrapper{flex:0 0 100%;min-width:auto}
  /* phone: the account simply wraps with everything else */
  .pkp_structure_head .pkp_head_wrapper .pkp_navigation_user_wrapper{
    order:3;justify-content:flex-start}
  .pkp_navigation_primary_wrapper{flex:1 1 100%;justify-content:flex-start;margin-left:0}
  .pkp_site_name .is_img img{height:42px;max-height:42px}
  .pkp_navigation_primary_wrapper{gap:14px;flex-wrap:wrap}
  .pkp_navigation_primary{flex-wrap:wrap;gap:14px 22px}
  body:not(.pkp_page_index) .pkp_structure_head{min-height:190px}

  /* .hi_hero is a flex ROW. Putting .hi_credit back into normal flow makes
     it a sibling flex item that steals ~40% of the width and squeezes the
     headline into a narrow column, so the column direction is load-bearing. */
  .hi_hero{min-height:0;padding-top:200px;flex-direction:column;align-items:stretch}
  .hi_hero_in{padding-bottom:26px}
  .hi_hero h1{font-size:36px;max-width:none;line-height:1.06}
  .hi_sub{font-size:17px;max-width:none;margin-bottom:26px}
  .hi_cta{display:block;text-align:center}
  .hi_credit{position:static;padding:0 var(--hi-gut) 16px;text-align:left}

  .pkp_structure_content,
  .pkp_page_index .pkp_structure_content{grid-template-columns:1fr;gap:0}
  .pkp_structure_main{padding:40px 0 46px}
  .pkp_structure_sidebar{padding:32px 0 52px;border-top:1px solid var(--hi-rule)}
  .pkp_structure_footer{padding:38px var(--hi-gut)}
}


/* ==========================================================================
   8. TEMPLATE 2 — APPROVED REFINEMENT PASS
   Visual direction approved Aug 2026. These rules refine the existing build
   without removing OJS functionality or dynamic states.
   ========================================================================== */

/* ---- 8.1 account controls --------------------------------------------------
   Keep the logged-in username, task count and dropdown visible. The stock OJS
   task count is preserved but styled as a compact status badge. */
.pkp_structure_head .pkp_navigation_user>li>a{
  display:inline-flex;align-items:center;gap:8px;color:#fff;
  font-size:14px;line-height:1.2;text-decoration:none;white-space:nowrap}
.pkp_structure_head .pkp_navigation_user .task_count{
  display:inline-block;min-width:26px;width:26px;height:26px;margin-left:2px;
  border-radius:999px;background:rgba(255,255,255,.14);color:#fff;
  line-height:26px;text-align:center;font-size:13px;font-weight:500;
  box-sizing:border-box}
.pkp_structure_head .pkp_navigation_user>li>a:hover .task_count,
.pkp_structure_head .pkp_navigation_user>li>a:focus .task_count{
  background:rgba(255,255,255,.24);color:#fff}
.pkp_structure_head .pkp_navigation_user>li>a:hover{color:#fff;text-decoration:none}

/* ---- 8.2 interior page rhythm -------------------------------------------- */
body:not(.pkp_page_index) .cmp_breadcrumbs{
  margin:0 0 26px;padding:0;background:transparent;border:0;
  font-size:13px;color:var(--hi-muted)}
body:not(.pkp_page_index) .cmp_breadcrumbs a{color:var(--hi-link);text-decoration:none}
body:not(.pkp_page_index) .cmp_breadcrumbs a:hover{text-decoration:underline}
body:not(.pkp_page_index) .pkp_structure_main p{max-width:72ch}
body:not(.pkp_page_index) .pkp_structure_main h2{margin-top:40px}
body:not(.pkp_page_index) .pkp_structure_main h2:first-of-type{margin-top:28px}

/* The sidebar should feel like an intentional journal-links rail, not a spare
   OJS column. */
body:not(.pkp_page_index) .pkp_structure_sidebar .pkp_block{margin:0 0 30px;padding:0}
body:not(.pkp_page_index) .pkp_structure_sidebar .pkp_block .title{
  margin:0 0 18px;font-size:15px;font-weight:600}
body:not(.pkp_page_index) .pkp_structure_sidebar .pkp_block ul{gap:14px}
body:not(.pkp_page_index) .pkp_structure_sidebar .pkp_block a{
  display:inline-block;padding:2px 0;font-size:15px}

/* ---- 8.3 About / policy pages -------------------------------------------- */
.page_about h2,.page_about h3,.page_privacy h2,.page_privacy h3{
  color:var(--hi-green-dk)}
.page_about h2,.page_about h3{scroll-margin-top:24px}
.page_about p,.page_privacy p{line-height:1.72}
.page_about ul,.page_about ol{max-width:72ch;color:var(--hi-body)}
.page_about li{margin-bottom:.45em}

/* ---- 8.4 Editorial Team ---------------------------------------------------
   Editorial content is entered through OJS as rich text. These selectors make
   the common image + biography pattern read as a deliberate staff profile list
   without requiring names or biographies to be hard-coded in CSS. */
.page_editorial_team{max-width:100%}
.page_editorial_team img{
  width:112px;height:112px;object-fit:cover;border-radius:50%;
  display:block;margin:0 0 18px;box-shadow:0 0 0 1px var(--hi-rule)}
.page_editorial_team p{max-width:72ch;margin-bottom:20px}
.page_editorial_team p:has(img){margin-top:30px;margin-bottom:12px}
.page_editorial_team p:has(img)+p{
  padding-bottom:30px;margin-bottom:30px;border-bottom:1px solid var(--hi-rule)}
.page_editorial_team p:has(img)+p strong:first-child{
  color:var(--hi-green-dk);font-size:18px}
.page_editorial_team p:last-child{border-bottom:0}

/* Where the editorial content uses each image as its own block, pull the bio
   into a desktop profile row. :has() is already used elsewhere in this file. */
@media (min-width:861px){
  .page_editorial_team p:has(> img){
    float:left;clear:left;width:136px;margin:2px 22px 30px 0}
  .page_editorial_team p:has(> img) img{margin:0}
  .page_editorial_team p:has(> img)+p{
    min-height:112px;padding:0 0 30px 158px;margin:0 0 30px;
    border-bottom:1px solid var(--hi-rule)}
  .page_editorial_team::after{content:"";display:block;clear:both}
}

/* ---- 8.5 Contact ---------------------------------------------------------- */
.page_contact .contact_section{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;
  margin-top:26px}
.page_contact .contact_section>div,
.page_contact .contact_section section{
  position:relative;margin:0;padding:24px 24px 24px 26px;
  border:1px solid var(--hi-rule);border-left:3px solid var(--hi-green);
  background:#fff;box-shadow:0 8px 24px rgba(12,21,18,.05)}
.page_contact .contact_section h2,.page_contact .contact_section h3{
  margin-top:0;font-size:18px;color:var(--hi-ink)}
.page_contact .contact_section p{font-size:15px;line-height:1.62}

/* OJS 3.3 contact markup may expose the two contacts as sibling sections rather
   than inside .contact_section. This fallback improves that markup too. */
.page_contact>h2,.page_contact>h3{color:var(--hi-green-dk)}
.page_contact>h2+*,.page_contact>h3+*{max-width:72ch}

/* ---- 8.6 Archives / empty state ------------------------------------------ */
.page_issue_archive .issues_archive{margin-top:30px}
.page_issue_archive .cmp_notification,
.page_issue_archive .issues_archive:empty{
  border:1px solid var(--hi-rule);border-left:3px solid var(--hi-green);
  background:#FAFCFB;padding:22px 24px;color:var(--hi-body)}
.page_issue_archive .obj_issue_summary{
  padding:26px 0;border-bottom:1px solid var(--hi-rule)}
.page_issue_archive .obj_issue_summary:first-child{border-top:1px solid var(--hi-rule)}

/* ---- 8.7 Search ----------------------------------------------------------- */
.page_search form{max-width:760px}
.page_search .search_input{display:flex;align-items:stretch;gap:12px;margin:0 0 22px}
.page_search .search_input input{flex:1;min-width:0}
.page_search .search_advanced{
  margin:0;padding:22px 24px 24px;border:1px solid var(--hi-rule);
  background:#FAFCFB}
.page_search .search_advanced legend{
  padding:0 12px;font-size:14px;font-weight:600;color:var(--hi-ink)}
.page_search .search_advanced .date_range{display:flex;flex-wrap:wrap;gap:10px}
.page_search .search_advanced .date_range select{min-width:100px}
.page_search .search_advanced .author{margin-top:18px}
.page_search .search_advanced input[type="text"]{width:100%;box-sizing:border-box}
.page_search .submit{display:flex;justify-content:flex-end;margin-top:18px}
.page_search .submit button,
.page_search button[type="submit"]{
  min-height:46px;padding:0 24px;border:0;border-radius:0;box-shadow:none;
  background:var(--hi-green);color:#fff;font-size:15px;font-weight:600}
.page_search .submit button:hover,
.page_search button[type="submit"]:hover{background:var(--hi-green-dk);color:#fff}
.page_search .submit button:after,
.page_search button[type="submit"]:after{
  background:transparent;box-shadow:none;color:inherit}
.page_search select{min-height:46px}
.page_search .search_results{margin-top:44px}
.page_search .obj_article_summary{padding:24px 0;border-top:1px solid var(--hi-rule)}

/* ---- 8.8 Forms / buttons -------------------------------------------------- */
.pkp_button,.pkp_button_primary,button.submitFormButton,input[type="submit"],.cmp_button{
  transition:background-color .18s ease,color .18s ease,border-color .18s ease}
input[type="text"],input[type="email"],input[type="password"],
input[type="search"],textarea,select{box-sizing:border-box;min-height:46px}
textarea{min-height:140px}

/* ---- 8.9 Footer ----------------------------------------------------------- */
.pkp_structure_footer{padding-top:54px;padding-bottom:54px}
.pkp_structure_footer .pkp_footer_content{display:block}
.pkp_structure_footer p{max-width:68ch;margin-bottom:14px}
.pkp_brand_footer{opacity:.48;padding-bottom:18px}
.pkp_brand_footer img,.pkp_brand_footer svg{max-height:72px}

/* ---- 8.10 Responsive ------------------------------------------------------ */
@media (max-width:1100px){
  .pkp_structure_content{grid-template-columns:minmax(0,1fr) 220px;column-gap:48px}
}
@media (max-width:860px){
  .pkp_structure_head .pkp_head_wrapper .pkp_navigation_user_wrapper{
    padding-left:0;border-left:0}
  .pkp_structure_head .pkp_navigation_user>li>a{font-size:14px}
  .pkp_structure_content,
  .pkp_page_index .pkp_structure_content{grid-template-columns:1fr;column-gap:0}
  .pkp_structure_sidebar{padding:28px 0 46px;border-left:0;border-top:1px solid var(--hi-rule)}
  .page_contact .contact_section{grid-template-columns:1fr}
  .page_editorial_team img{width:96px;height:96px}
  .page_search .search_input{flex-direction:column}
  .page_search .submit{justify-content:stretch}
  .page_search .submit button,.page_search button[type="submit"]{width:100%}
}

/* ========================================================================== 
   PATCH — keep primary navigation dropdowns reachable on interior pages
   The artwork header is shorter in the refined design, which exposed a small
   dead zone between the top-level nav item and its submenu. Moving the pointer
   through that gap could end :hover before the submenu was reached.
   ========================================================================== */
@media (min-width:861px){
  .pkp_structure_head .pkp_navigation_primary > li{
    position:relative;
  }

  /* Invisible hover bridge between the parent item and its submenu. */
  .pkp_structure_head .pkp_navigation_primary > li:has(ul)::after{
    content:"";
    position:absolute;
    left:-10px;
    right:-10px;
    top:100%;
    height:24px;
    background:transparent;
  }

  /* Keep the submenu available while either the parent or submenu has focus. */
  .pkp_structure_head .pkp_navigation_primary > li:hover > ul,
  .pkp_structure_head .pkp_navigation_primary > li:focus-within > ul{
    display:block;
    visibility:visible;
    opacity:1;
  }
}

/* ========================================================================== 
   PATCH v3 — primary-menu hover reliability
   Screen-recording review showed the About menu can still close while the
   pointer travels from the top-level label into lower submenu items on
   interior pages. Make the submenu physically meet the trigger and give the
   submenu itself an invisible hover bridge. This avoids relying on the
   previous li pseudo-element bridge.
   ========================================================================== */
@media (min-width:861px){
  .pkp_structure_head,
  .pkp_head_wrapper,
  .pkp_site_nav_menu,
  .pkp_navigation_primary_wrapper,
  .pkp_navigation_primary{
    overflow:visible;
  }

  /* Retire the earlier bridge so it cannot sit on top of submenu links. */
  .pkp_structure_head .pkp_navigation_primary > li:has(ul)::after{
    content:none;
  }

  .pkp_structure_head .pkp_navigation_primary > li{
    position:relative;
  }

  /* OJS may add an offset/margin to dropdowns. Remove it so there is no
     pointer dead-zone between the parent item and the panel. */
  .pkp_structure_head .pkp_navigation_primary > li > ul{
    top:calc(100% - 2px) !important;
    margin-top:0 !important;
    z-index:1000;
    overflow:visible;
  }

  /* This transparent strip belongs to the submenu itself. While crossing the
     few pixels above the visible panel, the pointer is still over the submenu. */
  .pkp_structure_head .pkp_navigation_primary > li > ul::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-18px;
    height:18px;
    background:transparent;
  }

  .pkp_structure_head .pkp_navigation_primary > li:hover > ul,
  .pkp_structure_head .pkp_navigation_primary > li:focus-within > ul,
  .pkp_structure_head .pkp_navigation_primary > li > ul:hover{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }
}

/* ========================================================================== 
   PATCH v4 — dropdown stacking above interior-page content
   The submenu itself was opening, but the following content layer was painted
   above the part of the menu that extends below the artwork header. A child
   z-index cannot escape its ancestor stacking context, so the fix must raise
   the HEADER stacking context itself, not only the dropdown.
   ========================================================================== */
@media (min-width:861px){
  /* Keep the complete header, nav and dropdown above the content that follows. */
  body:not(.pkp_page_index) .pkp_structure_head{
    position:relative;
    z-index:100;
    overflow:visible;
  }

  body:not(.pkp_page_index) .pkp_head_wrapper,
  body:not(.pkp_page_index) .pkp_site_nav_menu,
  body:not(.pkp_page_index) .pkp_navigation_primary_wrapper,
  body:not(.pkp_page_index) .pkp_navigation_primary{
    position:relative;
    z-index:101;
    overflow:visible;
  }

  body:not(.pkp_page_index) .pkp_navigation_primary > li > ul,
  body:not(.pkp_page_index) .pkp_navigation_primary .dropdown-menu{
    z-index:110 !important;
  }

  /* The main content is deliberately below the header stacking context. */
  body:not(.pkp_page_index) .pkp_structure_content{
    position:relative;
    z-index:1;
  }
}

/* ========================================================================== 
   PATCH v5 — Contact + Search layout refinement
   Uses the actual OJS 3.3 frontend markup. The Default theme still floats
   contact/search children at tablet widths, so this patch explicitly resets
   those legacy floats/widths before applying the refined layouts.
   ========================================================================== */

/* ---- Contact: two equal, aligned cards ---------------------------------- */
.page_contact .contact_section{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  width:100%;
  margin:26px 0 0;
  align-items:stretch;
}

/* Mailing address, when configured, is a full-width item above the contacts. */
.page_contact .contact_section > .address{
  grid-column:1 / -1;
  margin:0 0 2px;
  padding:0 0 22px;
  border:0;
  border-bottom:1px solid var(--hi-rule);
  background:transparent;
  box-shadow:none;
}

/* OJS Default theme sets .contact {float:left;width:50%} and gives the primary
   extra right padding. Those rules were shrinking each card inside its grid
   cell, which produced the staggered layout visible on the live page. */
.page_contact .contact_section > .contact,
.page_contact .contact_section > .contact.primary,
.page_contact .contact_section > .contact.support{
  float:none !important;
  clear:none !important;
  width:auto !important;
  max-width:none !important;
  height:100%;
  margin:0 !important;
  padding:26px 28px !important;
  box-sizing:border-box;
  border:1px solid var(--hi-rule);
  border-left:3px solid var(--hi-green);
  background:#fff;
  box-shadow:0 10px 28px rgba(12,21,18,.055);
}

.page_contact .contact_section > .contact h3{
  margin:0 0 16px;
  font-size:19px;
  line-height:1.25;
  color:var(--hi-ink);
}
.page_contact .contact_section > .contact .name{
  margin:0 0 8px;
  font-size:16px;
  font-weight:500;
  color:var(--hi-body);
}
.page_contact .contact_section > .contact .title,
.page_contact .contact_section > .contact .affiliation,
.page_contact .contact_section > .contact .phone,
.page_contact .contact_section > .contact .email{
  margin:7px 0 0;
  font-size:14.5px;
  line-height:1.55;
}
.page_contact .contact_section > .contact .label{
  font-weight:600;
  color:var(--hi-muted);
}
.page_contact .contact_section > .contact .email a{
  color:var(--hi-link);
  text-underline-offset:2px;
}

/* ---- Search: search bar + button, then compact filter panel ------------- */
.page_search form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "query submit"
    "filters filters";
  gap:16px 12px;
  width:100%;
  max-width:760px;
  margin:0;
}

.page_search .search_input{
  grid-area:query;
  display:block;
  min-width:0;
  margin:0;
}
.page_search .search_input .query,
.page_search .search_input input[type="text"],
.page_search .search_input input[type="search"]{
  width:100%;
  max-width:none;
  height:48px;
  min-height:48px;
  margin:0;
  box-sizing:border-box;
  border:1px solid var(--hi-rule-2);
  background:#fff;
  font-size:16px;
  line-height:1.3;
}

.page_search .submit{
  grid-area:submit;
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  margin:0;
  text-align:left;
}
.page_search .submit button,
.page_search button[type="submit"]{
  width:auto;
  min-width:116px;
  height:48px;
  min-height:48px;
  margin:0;
  padding:0 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  white-space:nowrap;
}

.page_search .search_advanced{
  grid-area:filters;
  float:none !important;
  width:auto !important;
  margin:2px 0 0;
  padding:20px 22px 22px;
  box-sizing:border-box;
  border:1px solid var(--hi-rule);
  background:#FAFCFB;
}
.page_search .search_advanced > legend{
  padding:0 9px;
  margin:0;
  font-size:13.5px;
  font-weight:600;
  color:var(--hi-muted);
}

/* Reset the Default theme's 50/50 floated filter columns. */
.page_search .search_advanced .date_range,
.page_search .search_advanced .author{
  float:none !important;
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box;
}
.page_search .search_advanced .date_range{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px 24px;
  margin:0;
}
.page_search .search_advanced .date_range > fieldset{
  min-width:0;
  margin:0;
  padding:0;
  border:0;
}
.page_search .search_advanced .date_range > fieldset > legend{
  display:block;
  width:100%;
  padding:0;
  margin:0 0 8px;
  font-size:14px;
  font-weight:600;
  color:var(--hi-ink);
}

/* Date selects: override the stock fixed 6em / 4em / 10em widths. */
.page_search .search_advanced .date_range fieldset select{
  width:calc(33.333% - 7px) !important;
  min-width:0 !important;
  height:44px;
  min-height:44px;
  margin:0 6px 0 0 !important;
  padding:9px 10px;
  box-sizing:border-box;
  vertical-align:top;
}
.page_search .search_advanced .date_range fieldset select:last-of-type{
  margin-right:0 !important;
}

.page_search .search_advanced .author{
  margin:20px 0 0 !important;
  padding-top:18px;
  border-top:1px solid var(--hi-rule);
}
.page_search .search_advanced .author label{
  display:block;
  margin:0 0 8px;
  font-size:14px;
  font-weight:600;
  color:var(--hi-ink);
}
.page_search .search_advanced .author input[type="text"]{
  width:100%;
  max-width:420px;
  height:44px;
  min-height:44px;
  margin:0;
  border:1px solid var(--hi-rule-2);
}

/* Keep short utility pages compact without changing long About/editorial pages. */
body.pkp_page_search .pkp_structure_main,
body.pkp_page_about.pkp_op_contact .pkp_structure_main{
  padding-bottom:62px;
}

/* Sidebar: align the rail cleanly with the top of utility-page content. */
body.pkp_page_search .pkp_structure_sidebar,
body.pkp_page_about.pkp_op_contact .pkp_structure_sidebar{
  padding-top:56px;
  padding-bottom:62px;
}

@media (max-width:860px){
  .page_contact .contact_section{
    grid-template-columns:1fr;
    gap:16px;
  }
  .page_contact .contact_section > .contact,
  .page_contact .contact_section > .contact.primary,
  .page_contact .contact_section > .contact.support{
    height:auto;
    padding:22px 22px !important;
  }

  .page_search form{
    grid-template-columns:1fr;
    grid-template-areas:
      "query"
      "submit"
      "filters";
    gap:12px;
  }
  .page_search .submit button,
  .page_search button[type="submit"]{
    width:100%;
  }
  .page_search .search_advanced{
    margin-top:4px;
    padding:18px;
  }
  .page_search .search_advanced .date_range{
    grid-template-columns:1fr;
    gap:18px;
  }
  .page_search .search_advanced .author input[type="text"]{
    max-width:none;
  }
}

/* ========================================================================== 
   PATCH v6 — Contact alignment + compact footer
   Keeps the working header/dropdown/account behavior untouched.
   ========================================================================== */

/* ---- Contact: force the two real OJS contact blocks onto one row --------- */
.page_contact .contact_section{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  grid-auto-flow:row !important;
  gap:24px !important;
  align-items:stretch !important;
  width:100% !important;
  max-width:none !important;
  margin:26px 0 0 !important;
}

/* Some OJS installs emit an address/edit/helper node before the two contacts.
   Keep those from consuming one of the two card columns. */
.page_contact .contact_section > .address,
.page_contact .contact_section > .cmp_edit_link,
.page_contact .contact_section > .pkp_edit_link,
.page_contact .contact_section > .edit_link{
  grid-column:1 / -1 !important;
}
.page_contact .contact_section > .address:empty{display:none !important}

/* The actual OJS contact blocks. Explicit column placement prevents an empty
   or utility node from pushing Principal Contact to column 2 / Support to row 2. */
.page_contact .contact_section > .contact.primary,
.page_contact .contact_section > .primary.contact{
  grid-column:1 !important;
  grid-row:auto !important;
}
.page_contact .contact_section > .contact.support,
.page_contact .contact_section > .support.contact{
  grid-column:2 !important;
  grid-row:auto !important;
}

.page_contact .contact_section > .contact,
.page_contact .contact_section > .contact.primary,
.page_contact .contact_section > .contact.support{
  float:none !important;
  clear:none !important;
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:auto !important;
  margin:0 !important;
  padding:26px 28px !important;
  box-sizing:border-box !important;
  border:1px solid var(--hi-rule) !important;
  border-left:3px solid var(--hi-green) !important;
  background:#fff !important;
  box-shadow:0 8px 22px rgba(12,21,18,.045) !important;
}

/* Fallback for OJS markup where .primary/.support are direct children of the
   page rather than wrapped by .contact_section. */
.page_contact > .contact.primary,
.page_contact > .contact.support{
  float:none !important;
  clear:none !important;
  display:inline-block !important;
  vertical-align:top !important;
  width:calc(50% - 14px) !important;
  max-width:none !important;
  margin:26px 0 0 !important;
  padding:26px 28px !important;
  box-sizing:border-box !important;
  border:1px solid var(--hi-rule) !important;
  border-left:3px solid var(--hi-green) !important;
  background:#fff !important;
  box-shadow:0 8px 22px rgba(12,21,18,.045) !important;
}
.page_contact > .contact.primary{margin-right:24px !important}

/* Keep the utility Edit link visually separate from the cards. */
.page_contact .cmp_edit_link,
.page_contact .pkp_edit_link,
.page_contact > a[class*="edit"]{
  position:relative;
  z-index:1;
}

/* Short contact page: less dead white space before the footer. */
body.pkp_page_about.pkp_op_contact .pkp_structure_main,
body.pkp_op_contact .pkp_structure_main{
  padding-bottom:44px !important;
}
body.pkp_page_about.pkp_op_contact .pkp_structure_sidebar,
body.pkp_op_contact .pkp_structure_sidebar{
  padding-bottom:44px !important;
}

/* ---- Footer: compact two-column composition ------------------------------ */
.pkp_structure_footer_wrapper{
  background:var(--hi-foot) !important;
  padding:0 !important;
  margin:0 !important;
}
.pkp_structure_footer{
  width:auto !important;
  max-width:var(--hi-wrap) !important;
  margin:0 auto !important;
  padding:34px var(--hi-gut) 30px !important;
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-columns:minmax(0,760px) minmax(130px,1fr) !important;
  gap:54px !important;
  align-items:end !important;
  text-align:left !important;
  background:var(--hi-foot) !important;
}
.pkp_structure_footer .pkp_footer_content{
  float:none !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  align-self:start !important;
}
.pkp_structure_footer .pkp_footer_content p{
  max-width:760px !important;
  margin:0 0 9px !important;
  font-size:12.5px !important;
  line-height:1.62 !important;
  color:var(--hi-foot-ink) !important;
}
.pkp_structure_footer .pkp_footer_content p:last-child{margin-bottom:0 !important}

.pkp_structure_footer .pkp_brand_footer,
.pkp_brand_footer{
  float:none !important;
  clear:none !important;
  width:auto !important;
  max-width:170px !important;
  margin:0 !important;
  padding:0 !important;
  justify-self:end !important;
  align-self:end !important;
  opacity:.42 !important;
  color:var(--hi-foot-ink) !important;
  text-align:right !important;
}
.pkp_structure_footer .pkp_brand_footer a,
.pkp_brand_footer a{
  float:none !important;
  display:block !important;
  width:auto !important;
  max-width:150px !important;
  margin:0 0 0 auto !important;
  padding:0 !important;
}
.pkp_structure_footer .pkp_brand_footer img,
.pkp_structure_footer .pkp_brand_footer svg,
.pkp_brand_footer img,
.pkp_brand_footer svg{
  display:block !important;
  width:auto !important;
  max-width:150px !important;
  height:auto !important;
  max-height:58px !important;
  margin:0 0 0 auto !important;
  filter:brightness(0) invert(1) !important;
  opacity:.72 !important;
}

@media (max-width:860px){
  .page_contact .contact_section{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
  .page_contact .contact_section > .contact.primary,
  .page_contact .contact_section > .primary.contact,
  .page_contact .contact_section > .contact.support,
  .page_contact .contact_section > .support.contact{
    grid-column:1 !important;
  }
  .page_contact > .contact.primary,
  .page_contact > .contact.support{
    display:block !important;
    width:100% !important;
    margin:16px 0 0 !important;
    padding:22px !important;
  }

  .pkp_structure_footer{
    grid-template-columns:1fr !important;
    gap:24px !important;
    padding:30px var(--hi-gut) 26px !important;
  }
  .pkp_structure_footer .pkp_brand_footer,
  .pkp_brand_footer{
    justify-self:start !important;
    text-align:left !important;
    max-width:150px !important;
  }
  .pkp_structure_footer .pkp_brand_footer a,
  .pkp_brand_footer a,
  .pkp_structure_footer .pkp_brand_footer img,
  .pkp_structure_footer .pkp_brand_footer svg,
  .pkp_brand_footer img,
  .pkp_brand_footer svg{
    margin-left:0 !important;
    margin-right:auto !important;
  }
}


/* ==========================================================================
   PATCH v7 — footer layout repair
   v6 exposed legacy/nested footer widths from OJS/page-footer content, which
   squeezed the acknowledgement to the right and pushed the PKP brand below.
   This patch forces one compact desktop row and neutralises those old widths.
   ========================================================================== */

.pkp_structure_footer_wrapper{
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  background:var(--hi-foot) !important;
}

/* Footer content + PKP mark in ONE row. */
.pkp_structure_footer{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
  max-width:var(--hi-wrap) !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 auto !important;
  padding:30px var(--hi-gut) !important;
  gap:64px !important;
  box-sizing:border-box !important;
  background:var(--hi-foot) !important;
}

/* The journal footer text should own the available horizontal space. */
.pkp_structure_footer .pkp_footer_content{
  display:block !important;
  float:none !important;
  clear:none !important;
  position:static !important;
  flex:1 1 auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:860px !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
}

/* OJS rich-text/footer HTML can contain its own floated/50%-width wrappers.
   Neutralise them so the acknowledgement actually uses the width above. */
.pkp_structure_footer .pkp_footer_content > *,
.pkp_structure_footer .pkp_footer_content > div,
.pkp_structure_footer .pkp_footer_content section,
.pkp_structure_footer .pkp_footer_content article{
  float:none !important;
  clear:none !important;
  position:static !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  height:auto !important;
  margin-left:0 !important;
  margin-right:0 !important;
  text-align:left !important;
}

.pkp_structure_footer .pkp_footer_content p{
  width:auto !important;
  max-width:92ch !important;
  margin:0 0 8px !important;
  padding:0 !important;
  font-size:12px !important;
  line-height:1.55 !important;
  color:var(--hi-foot-ink) !important;
}
.pkp_structure_footer .pkp_footer_content p:last-child{
  margin-bottom:0 !important;
}

/* PKP branding stays small and vertically centred instead of falling beneath
   the acknowledgement. */
.pkp_structure_footer .pkp_brand_footer,
.pkp_brand_footer{
  display:block !important;
  float:none !important;
  clear:none !important;
  position:static !important;
  flex:0 0 145px !important;
  width:145px !important;
  max-width:145px !important;
  min-width:145px !important;
  height:auto !important;
  margin:0 0 0 auto !important;
  padding:0 !important;
  align-self:center !important;
  text-align:right !important;
  opacity:.38 !important;
}

.pkp_structure_footer .pkp_brand_footer a,
.pkp_brand_footer a{
  display:block !important;
  float:none !important;
  width:100% !important;
  max-width:145px !important;
  margin:0 !important;
  padding:0 !important;
}

.pkp_structure_footer .pkp_brand_footer img,
.pkp_structure_footer .pkp_brand_footer svg,
.pkp_brand_footer img,
.pkp_brand_footer svg{
  display:block !important;
  width:100% !important;
  max-width:145px !important;
  height:auto !important;
  max-height:52px !important;
  margin:0 0 0 auto !important;
  filter:brightness(0) invert(1) !important;
  opacity:.72 !important;
}

/* Keep very short pages from manufacturing extra footer height. */
.pkp_structure_footer_wrapper::before,
.pkp_structure_footer_wrapper::after,
.pkp_structure_footer::before,
.pkp_structure_footer::after{
  content:none !important;
}

/* Tablet/phone: stack naturally, but remain compact. */
@media (max-width:860px){
  .pkp_structure_footer{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:20px !important;
    padding:28px var(--hi-gut) 24px !important;
  }

  .pkp_structure_footer .pkp_footer_content{
    max-width:none !important;
    width:100% !important;
  }

  .pkp_structure_footer .pkp_footer_content p{
    max-width:none !important;
    font-size:12.5px !important;
  }

  .pkp_structure_footer .pkp_brand_footer,
  .pkp_brand_footer{
    flex:0 0 auto !important;
    width:125px !important;
    min-width:0 !important;
    max-width:125px !important;
    margin:0 !important;
    text-align:left !important;
  }

  .pkp_structure_footer .pkp_brand_footer a,
  .pkp_brand_footer a,
  .pkp_structure_footer .pkp_brand_footer img,
  .pkp_structure_footer .pkp_brand_footer svg,
  .pkp_brand_footer img,
  .pkp_brand_footer svg{
    max-width:125px !important;
    margin-left:0 !important;
    margin-right:auto !important;
  }
}


/* ==========================================================================
   PATCH v8 — remove visible OJS / PKP footer branding
   ========================================================================== */

.pkp_brand_footer,
.pkp_structure_footer .pkp_brand_footer{
  display:none !important;
}

/* With the brand mark gone, let the acknowledgement use the footer width
   naturally while keeping the compact v7 footer spacing. */
.pkp_structure_footer{
  justify-content:flex-start !important;
}

.pkp_structure_footer .pkp_footer_content{
  max-width:980px !important;
}


/* ==========================================================================
   PATCH v9 — full-width three-column acknowledgement footer
   Uses the existing three acknowledgement paragraphs as separate columns on
   desktop, then collapses gracefully on smaller screens.
   ========================================================================== */

.pkp_structure_footer{
  display:block !important;
  width:100% !important;
  max-width:var(--hi-wrap) !important;
  margin:0 auto !important;
  padding:32px var(--hi-gut) 28px !important;
  box-sizing:border-box !important;
  background:var(--hi-foot) !important;
}

/* Use the full footer width instead of keeping the acknowledgement in a
   narrow text block. */
.pkp_structure_footer .pkp_footer_content{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:48px !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  align-items:start !important;
}

/* OJS/Additional Content may wrap the rich text in one generic container.
   display:contents lets the existing paragraphs become the actual grid items
   without changing any of the journal's text. */
.pkp_structure_footer .pkp_footer_content > div,
.pkp_structure_footer .pkp_footer_content > section,
.pkp_structure_footer .pkp_footer_content > article{
  display:contents !important;
}

.pkp_structure_footer .pkp_footer_content p{
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  font-size:12.5px !important;
  line-height:1.62 !important;
  color:#9FB0AA !important;
}

/* If a paragraph contains an explicit break-separated continuation, keep its
   spacing compact rather than creating a tall footer. */
.pkp_structure_footer .pkp_footer_content br + br{
  display:none !important;
}

.pkp_structure_footer_wrapper{
  border-top:1px solid rgba(127, 169, 154, .18) !important;
}

/* OJS/PKP mark remains intentionally hidden from v8. */
.pkp_brand_footer,
.pkp_structure_footer .pkp_brand_footer{
  display:none !important;
}

/* Tablet: two columns; the final acknowledgement spans the footer width. */
@media (max-width:1000px) and (min-width:641px){
  .pkp_structure_footer .pkp_footer_content{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:28px 38px !important;
  }

  .pkp_structure_footer .pkp_footer_content p:nth-of-type(3){
    grid-column:1 / -1 !important;
    max-width:72ch !important;
  }
}

/* Phone: single readable column. */
@media (max-width:640px){
  .pkp_structure_footer{
    padding:28px var(--hi-gut) 26px !important;
  }

  .pkp_structure_footer .pkp_footer_content{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .pkp_structure_footer .pkp_footer_content p{
    font-size:12.5px !important;
    line-height:1.65 !important;
  }
}


/* ==========================================================================
   PATCH v10 — branded editorial footer
   Adds a restrained Health Inquiries brand block and uses the remaining space
   for the three acknowledgement paragraphs. No OJS/PKP mark.
   ========================================================================== */

.pkp_structure_footer_wrapper{
  background:
    linear-gradient(90deg, rgba(0,127,101,.09), transparent 34%),
    var(--hi-foot) !important;
  border-top:1px solid rgba(132,184,165,.22) !important;
}

.pkp_structure_footer{
  display:grid !important;
  grid-template-columns:180px repeat(3,minmax(0,1fr)) !important;
  gap:34px !important;
  align-items:start !important;
  max-width:var(--hi-wrap) !important;
  margin:0 auto !important;
  padding:34px var(--hi-gut) 32px !important;
  box-sizing:border-box !important;
}

/* Small CSS-drawn journal mark. It is deliberately decorative: the journal
   name is already present elsewhere on every page. */
.pkp_structure_footer::before{
  content:"HEALTH\A INQUIRIES";
  white-space:pre;
  display:flex !important;
  align-items:center;
  min-height:58px;
  padding:0 0 0 18px;
  border-left:3px solid var(--hi-green);
  color:#EAF2EF;
  font-family:var(--hi-face);
  font-size:17px;
  font-weight:600;
  line-height:.92;
  letter-spacing:-.03em;
}

/* Let the existing rich-text paragraphs become grid items alongside the brand
   block, regardless of OJS's wrapper markup. */
.pkp_structure_footer .pkp_footer_content{
  display:contents !important;
}

.pkp_structure_footer .pkp_footer_content > div,
.pkp_structure_footer .pkp_footer_content > section,
.pkp_structure_footer .pkp_footer_content > article{
  display:contents !important;
}

.pkp_structure_footer .pkp_footer_content p{
  position:relative !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:14px 0 0 !important;
  font-size:12.2px !important;
  line-height:1.62 !important;
  color:#9FAFA9 !important;
}

/* Tiny editorial accent over each acknowledgement column. */
.pkp_structure_footer .pkp_footer_content p::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:34px;
  height:1px;
  background:rgba(93,181,151,.65);
}

/* Keep the PKP/OJS mark removed. */
.pkp_brand_footer,
.pkp_structure_footer .pkp_brand_footer{
  display:none !important;
}

/* Tablet: brand spans the full row, then acknowledgement copy in two columns. */
@media (max-width:1050px) and (min-width:641px){
  .pkp_structure_footer{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:28px 42px !important;
  }

  .pkp_structure_footer::before{
    grid-column:1 / -1 !important;
    min-height:46px;
  }

  .pkp_structure_footer .pkp_footer_content p:nth-of-type(3){
    grid-column:1 / -1 !important;
    max-width:72ch !important;
  }
}

/* Mobile: compact brand + readable stacked acknowledgement. */
@media (max-width:640px){
  .pkp_structure_footer{
    grid-template-columns:1fr !important;
    gap:22px !important;
    padding:28px var(--hi-gut) 26px !important;
  }

  .pkp_structure_footer::before{
    min-height:44px;
    font-size:16px;
  }

  .pkp_structure_footer .pkp_footer_content p{
    font-size:12.5px !important;
    line-height:1.65 !important;
  }
}


/* ==========================================================================
   PATCH v11 — structured branded footer
   Requires the matching hi_footer HTML in OJS Page Footer source/code view.
   ========================================================================== */

.pkp_structure_footer_wrapper{
  background:
    radial-gradient(circle at 92% 12%, rgba(0,127,101,.12), transparent 23%),
    linear-gradient(90deg, rgba(0,127,101,.055), transparent 30%),
    var(--hi-foot) !important;
  border-top:1px solid rgba(135,190,170,.22) !important;
  padding:0 !important;
  min-height:0 !important;
}

.pkp_structure_footer{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
}

.pkp_structure_footer .pkp_footer_content{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}

.pkp_structure_footer .pkp_footer_content > *{
  float:none !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
}

.hi_footer{
  width:100%;
  color:#A8B9B2;
  font-family:var(--hi-face);
}

.hi_footer_grid{
  max-width:var(--hi-wrap);
  margin:0 auto;
  padding:36px var(--hi-gut) 30px;
  display:grid;
  grid-template-columns:220px minmax(0,1.35fr) minmax(0,1fr) minmax(0,.95fr);
  gap:38px;
  align-items:start;
  box-sizing:border-box;
}

.hi_footer_brand{
  padding-right:28px;
  border-right:1px solid rgba(184,213,202,.18);
}

.hi_footer_wordmark{
  display:flex;
  align-items:flex-start;
  gap:14px;
  color:#F2F7F5;
  font-size:25px;
  line-height:.88;
  font-weight:500;
  letter-spacing:-.035em;
}

.hi_footer_wordmark_rule{
  display:block;
  width:3px;
  height:52px;
  flex:0 0 3px;
  background:#32B995;
  margin-top:1px;
}

.hi_footer_tagline{
  margin:18px 0 0 17px !important;
  color:#56C8A8 !important;
  font-size:13.5px !important;
  line-height:1.45 !important;
  letter-spacing:.01em;
}

.hi_footer_ack{
  position:relative;
  padding-top:15px;
}

.hi_footer_accent{
  position:absolute;
  top:0;
  left:0;
  display:block;
  width:28px;
  height:1px;
  background:#54C4A5;
  opacity:.8;
}

.hi_footer_ack p{
  margin:0 !important;
  padding:0 !important;
  max-width:none !important;
  color:#A8B9B2 !important;
  font-size:12.25px !important;
  line-height:1.58 !important;
}

.hi_footer_bottom{
  border-top:1px solid rgba(69,177,146,.36);
  max-width:none;
  padding:13px max(var(--hi-gut), calc((100vw - var(--hi-wrap))/2 + var(--hi-gut)));
  display:flex;
  align-items:center;
  gap:11px;
  flex-wrap:wrap;
  color:#55C5A6;
  font-size:10.5px;
  line-height:1.3;
  letter-spacing:.16em;
  text-transform:uppercase;
  box-sizing:border-box;
}

.hi_footer_bottom span[aria-hidden="true"]{
  opacity:.55;
}

.pkp_brand_footer,
.pkp_structure_footer .pkp_brand_footer{
  display:none !important;
}

@media (max-width:1050px){
  .hi_footer_grid{
    grid-template-columns:210px repeat(2,minmax(0,1fr));
    gap:30px 34px;
  }

  .hi_footer_ack:last-child{
    grid-column:2 / -1;
    max-width:68ch;
  }
}

@media (max-width:720px){
  .hi_footer_grid{
    padding:30px var(--hi-gut) 26px;
    grid-template-columns:1fr;
    gap:24px;
  }

  .hi_footer_brand{
    padding:0 0 22px;
    border-right:0;
    border-bottom:1px solid rgba(184,213,202,.18);
  }

  .hi_footer_ack:last-child{
    grid-column:auto;
    max-width:none;
  }

  .hi_footer_wordmark{
    font-size:22px;
  }

  .hi_footer_bottom{
    padding:13px var(--hi-gut);
    gap:8px;
    font-size:9.5px;
    letter-spacing:.12em;
  }
}


/* ==========================================================================
   PATCH v12 — mobile layout overhaul
   Based on 390px iPhone screenshots. Desktop/tablet >= 861px is unchanged.
   ========================================================================== */

@media (max-width:860px){

  /* ---------------------------------------------------------------- header */
  .pkp_structure_head{
    overflow:visible !important;
  }

  .pkp_head_wrapper{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    padding:12px var(--hi-gut) !important;
    box-sizing:border-box !important;
    position:relative !important;
  }

  .pkp_site_name_wrapper{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    max-width:none !important;
    height:58px !important;
    min-height:58px !important;
    padding-left:52px !important;
    box-sizing:border-box !important;
  }

  .pkp_site_nav_toggle{
    position:absolute !important;
    left:0 !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    z-index:10003 !important;
    width:42px !important;
    height:42px !important;
    margin:0 !important;
    border:1px solid rgba(255,255,255,.18) !important;
    border-radius:0 !important;
    background:rgba(5,15,12,.34) !important;
  }

  .pkp_site_name{
    position:static !important;
    left:auto !important;
    right:auto !important;
    width:auto !important;
    max-width:220px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    white-space:normal !important;
  }

  .pkp_site_name .is_img{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
  }

  .pkp_site_name .is_img img{
    display:block !important;
    height:44px !important;
    width:auto !important;
    max-width:210px !important;
    max-height:44px !important;
  }

  /* The original desktop flex overrides were leaking into OJS's collapsed
     mobile navigation. Reset the nav to a real stacked panel. */
  .pkp_site_nav_menu{
    position:absolute !important;
    top:100% !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:none !important;
    display:block !important;
    padding:12px 20px 18px !important;
    margin:0 !important;
    box-sizing:border-box !important;
    background:rgba(7,20,16,.985) !important;
    border-top:1px solid rgba(255,255,255,.12) !important;
    box-shadow:0 18px 34px rgba(0,0,0,.28) !important;
    z-index:10002 !important;
    overflow:visible !important;
  }

  .pkp_site_nav_menu > *{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }

  .pkp_navigation_primary_row,
  .pkp_navigation_primary_wrapper{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  .pkp_navigation_primary{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    text-align:left !important;
  }

  .pkp_navigation_primary > li{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    border-bottom:1px solid rgba(255,255,255,.09) !important;
  }

  .pkp_navigation_primary > li > a{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:11px 2px !important;
    border:0 !important;
    color:#F2F7F5 !important;
    font-size:15px !important;
    line-height:1.35 !important;
    box-sizing:border-box !important;
  }

  .pkp_navigation_primary > li > a:hover,
  .pkp_navigation_primary > li > a:focus{
    background:transparent !important;
    color:#8EDCC5 !important;
    text-decoration:none !important;
  }

  /* Mobile nested items are part of the menu, not desktop floating panels. */
  .pkp_structure_head .pkp_navigation_primary ul,
  .pkp_structure_head .pkp_navigation_primary ul ul,
  .pkp_structure_head .pkp_navigation_primary .dropdown-menu{
    position:static !important;
    transform:none !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 0 8px 14px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    box-sizing:border-box !important;
  }

  .pkp_structure_head .pkp_navigation_primary li li{
    display:block !important;
    width:100% !important;
    margin:0 !important;
  }

  .pkp_structure_head .pkp_navigation_primary li li a{
    display:block !important;
    width:100% !important;
    padding:7px 2px !important;
    color:#BFD2CB !important;
    font-size:13.5px !important;
    line-height:1.35 !important;
    background:transparent !important;
    border:0 !important;
  }

  .pkp_navigation_search_wrapper{
    float:none !important;
    width:100% !important;
    margin:10px 0 0 !important;
    padding:10px 0 0 !important;
    border-top:1px solid rgba(255,255,255,.12) !important;
  }

  .pkp_navigation_search_wrapper .pkp_search,
  .pkp_navigation_search_wrapper a{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:10px 2px !important;
    color:#F2F7F5 !important;
    font-size:15px !important;
    box-sizing:border-box !important;
  }

  /* Account becomes a distinct section under the site navigation. */
  .pkp_structure_head .pkp_head_wrapper .pkp_navigation_user_wrapper{
    position:static !important;
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:10px 0 0 !important;
    padding:12px 0 0 !important;
    border:0 !important;
    border-top:1px solid rgba(255,255,255,.12) !important;
    transform:none !important;
  }

  .pkp_structure_head .pkp_navigation_user{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    text-align:left !important;
  }

  .pkp_structure_head .pkp_navigation_user > li{
    display:block !important;
    width:100% !important;
    margin:0 !important;
  }

  .pkp_structure_head .pkp_navigation_user > li > a{
    display:flex !important;
    width:100% !important;
    justify-content:flex-start !important;
    padding:9px 2px !important;
    box-sizing:border-box !important;
  }

  .pkp_structure_head .pkp_navigation_user ul,
  .pkp_structure_head .pkp_navigation_user .dropdown-menu{
    position:static !important;
    transform:none !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:3px 0 0 14px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .pkp_structure_head .pkp_navigation_user ul a,
  .pkp_structure_head .pkp_navigation_user .dropdown-menu a{
    display:block !important;
    width:100% !important;
    padding:7px 2px !important;
    color:#BFD2CB !important;
    background:transparent !important;
    font-size:13.5px !important;
    box-sizing:border-box !important;
  }

  /* ------------------------------------------------------- interior layout */
  body:not(.pkp_page_index) .pkp_structure_content{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 var(--hi-gut) !important;
    gap:0 !important;
    box-sizing:border-box !important;
  }

  body:not(.pkp_page_index) .pkp_structure_main{
    grid-column:1 !important;
    grid-row:1 !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:34px 0 38px !important;
    box-sizing:border-box !important;
  }

  body:not(.pkp_page_index) .pkp_structure_sidebar{
    grid-column:1 !important;
    grid-row:2 !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:24px 0 34px !important;
    border-top:1px solid var(--hi-rule) !important;
    border-left:0 !important;
    box-sizing:border-box !important;
  }

  body:not(.pkp_page_index) .pkp_structure_sidebar .pkp_block{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:2px 0 2px 18px !important;
    border-left:3px solid var(--hi-green) !important;
  }

  body:not(.pkp_page_index) .pkp_structure_sidebar .pkp_block .title{
    margin:0 0 12px !important;
    font-size:12px !important;
    letter-spacing:.18em !important;
    text-transform:uppercase !important;
    color:var(--hi-muted) !important;
  }

  body:not(.pkp_page_index) .pkp_structure_sidebar .pkp_block ul{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    gap:8px 24px !important;
  }

  body:not(.pkp_page_index) .pkp_structure_sidebar .pkp_block a{
    font-size:14px !important;
  }

  body:not(.pkp_page_index) .cmp_breadcrumbs{
    margin-bottom:22px !important;
  }

  body:not(.pkp_page_index) .pkp_structure_main h1{
    font-size:32px !important;
    line-height:1.08 !important;
    margin-bottom:24px !important;
  }

  body:not(.pkp_page_index) .pkp_structure_main p,
  body:not(.pkp_page_index) .pkp_structure_main ul,
  body:not(.pkp_page_index) .pkp_structure_main ol{
    max-width:none !important;
  }

  /* ------------------------------------------------------------- homepage */
  .pkp_page_index .pkp_structure_content{
    display:block !important;
    padding:0 !important;
  }

  .pkp_page_index .pkp_structure_main{
    width:100% !important;
    max-width:none !important;
    padding:0 !important;
  }

  /* The old 200px top padding existed because the desktop nav wrapped across
     the hero. With a collapsed menu, the hero only needs room for one header. */
  .hi_hero{
    padding-top:112px !important;
  }

  .hi_hero .hi_hero_in{
    padding-left:var(--hi-gut) !important;
    padding-right:var(--hi-gut) !important;
    padding-bottom:26px !important;
  }

  .hi_hero .hi_hero_in h1{
    font-size:34px !important;
    line-height:1.06 !important;
  }

  .hi_hero .hi_sub{
    font-size:16px !important;
    line-height:1.5 !important;
  }

  .hi_hero .hi_credit{
    font-size:9px !important;
    line-height:1.35 !important;
  }

  .hi_band{
    padding-top:42px !important;
  }

  .hi_band p.hi_lead{
    font-size:20px !important;
  }

  /* --------------------------------------------------------------- footer */
  .hi_footer_grid{
    gap:19px !important;
  }

  .hi_footer_brand{
    padding-bottom:18px !important;
  }

  .hi_footer_ack{
    padding-top:12px !important;
  }

  .hi_footer_ack p{
    font-size:12px !important;
    line-height:1.58 !important;
  }
}

@media (max-width:430px){
  :root{--hi-gut:18px}

  .pkp_site_name_wrapper{
    padding-left:48px !important;
  }

  .pkp_site_name .is_img img{
    height:40px !important;
    max-height:40px !important;
    max-width:195px !important;
  }

  .pkp_site_nav_toggle{
    width:38px !important;
    height:38px !important;
  }

  .hi_hero .hi_hero_in h1{
    font-size:32px !important;
  }

  .hi_cta{
    padding:14px 20px !important;
  }
}


/* ==========================================================================
   PATCH v13 — polished mobile navigation
   Keeps desktop >= 861px untouched.
   ========================================================================== */

@media (max-width:860px){

  /* Respect OJS' own hamburger show/hide state. v12's !important display:block
     could overpower the inline display value used by the theme's JS. */
  .pkp_site_nav_menu[style*="display: none"]{
    display:none !important;
  }
  .pkp_site_nav_menu[style*="display: block"],
  .pkp_site_nav_menu[style*="display:block"]{
    display:block !important;
  }

  /* Solid, deliberate drawer — no page/hero content showing through. */
  .pkp_site_nav_menu{
    background:#08130F !important;
    padding:8px 18px 16px !important;
    max-height:calc(100vh - 82px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    border-top:1px solid rgba(255,255,255,.10) !important;
    border-bottom:1px solid rgba(75,184,150,.26) !important;
    box-shadow:0 20px 42px rgba(0,0,0,.42) !important;
  }

  /* Subtle custom scrollbar for devices/browsers that display one. */
  .pkp_site_nav_menu{
    scrollbar-width:thin;
    scrollbar-color:rgba(92,190,158,.46) transparent;
  }
  .pkp_site_nav_menu::-webkit-scrollbar{width:5px}
  .pkp_site_nav_menu::-webkit-scrollbar-track{background:transparent}
  .pkp_site_nav_menu::-webkit-scrollbar-thumb{
    background:rgba(92,190,158,.42);
    border-radius:4px;
  }

  /* Cleaner logo bar. */
  .pkp_head_wrapper{
    background:rgba(5,15,12,.18) !important;
  }

  .pkp_site_nav_toggle{
    border:1px solid rgba(255,255,255,.26) !important;
    background:rgba(5,15,12,.62) !important;
    box-shadow:none !important;
  }
  .pkp_site_nav_toggle:hover,
  .pkp_site_nav_toggle:focus-visible{
    background:#0E251D !important;
    border-color:rgba(93,207,170,.72) !important;
  }

  /* Primary items feel like large touch targets, not desktop links stacked. */
  .pkp_navigation_primary > li{
    border-bottom:1px solid rgba(255,255,255,.085) !important;
  }

  .pkp_navigation_primary > li > a{
    min-height:46px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:12px 2px !important;
    color:#F2F6F4 !important;
    font-size:15.5px !important;
    font-weight:500 !important;
    letter-spacing:.005em !important;
  }

  .pkp_navigation_primary > li > a:hover,
  .pkp_navigation_primary > li > a:focus-visible{
    color:#77D8BB !important;
  }

  /* Give parent items an intentional disclosure indicator. The OJS 3.3 menu
     template renders child menus as plain nested <ul>s on mobile; we keep them
     accessible and visually group them instead of relying on hover. */
  .pkp_navigation_primary > li:has(> ul) > a::after{
    content:"⌄";
    flex:0 0 auto;
    margin-left:12px;
    color:#6BCFB0;
    font-size:17px;
    line-height:1;
    font-weight:400;
  }

  /* Nested About / Submissions sections become compact inset groups. */
  .pkp_structure_head .pkp_navigation_primary > li > ul{
    width:calc(100% - 8px) !important;
    margin:-2px 0 8px 8px !important;
    padding:3px 0 5px 15px !important;
    border-left:2px solid rgba(68,191,154,.42) !important;
    background:rgba(255,255,255,.018) !important;
  }

  .pkp_structure_head .pkp_navigation_primary li li a{
    min-height:35px !important;
    display:flex !important;
    align-items:center !important;
    padding:7px 8px !important;
    color:#B9CCC5 !important;
    font-size:13.5px !important;
    font-weight:400 !important;
    border-radius:2px !important;
  }

  .pkp_structure_head .pkp_navigation_primary li li a:hover,
  .pkp_structure_head .pkp_navigation_primary li li a:focus-visible{
    color:#EAF5F1 !important;
    background:rgba(80,190,155,.10) !important;
  }

  /* Search becomes a distinct action row. */
  .pkp_navigation_search_wrapper{
    margin:7px 0 0 !important;
    padding:8px 0 0 !important;
    border-top:0 !important;
  }

  .pkp_navigation_search_wrapper .pkp_search,
  .pkp_navigation_search_wrapper a{
    min-height:44px !important;
    display:flex !important;
    align-items:center !important;
    gap:9px !important;
    padding:10px 12px !important;
    color:#F3F8F6 !important;
    background:rgba(0,127,101,.12) !important;
    border:1px solid rgba(78,188,154,.20) !important;
  }

  .pkp_navigation_search_wrapper .pkp_search:hover,
  .pkp_navigation_search_wrapper .pkp_search:focus-visible{
    background:rgba(0,127,101,.22) !important;
    border-color:rgba(93,205,170,.48) !important;
    text-decoration:none !important;
  }

  /* Account area is visually separated from the journal links. */
  .pkp_structure_head .pkp_head_wrapper .pkp_navigation_user_wrapper{
    margin:12px 0 0 !important;
    padding:12px 0 0 !important;
    border-top:1px solid rgba(94,194,163,.28) !important;
  }

  .pkp_structure_head .pkp_navigation_user > li > a{
    min-height:42px !important;
    align-items:center !important;
    padding:9px 12px !important;
    color:#F2F7F5 !important;
    background:rgba(255,255,255,.025) !important;
    border-left:2px solid var(--hi-green) !important;
    font-size:14px !important;
  }

  /* Match the default OJS mobile convention: don't repeat the top-level task
     count beside the username; retain counts in Dashboard/subitems. */
  .pkp_structure_head .pkp_navigation_user > li > a .task_count{
    display:none !important;
  }

  .pkp_structure_head .pkp_navigation_user ul,
  .pkp_structure_head .pkp_navigation_user .dropdown-menu{
    margin:0 !important;
    padding:5px 0 0 14px !important;
  }

  .pkp_structure_head .pkp_navigation_user ul a,
  .pkp_structure_head .pkp_navigation_user .dropdown-menu a{
    min-height:34px !important;
    display:flex !important;
    align-items:center !important;
    padding:6px 10px !important;
    color:#BFD1CA !important;
    font-size:13.5px !important;
  }

  .pkp_structure_head .pkp_navigation_user ul a:hover,
  .pkp_structure_head .pkp_navigation_user ul a:focus-visible,
  .pkp_structure_head .pkp_navigation_user .dropdown-menu a:hover,
  .pkp_structure_head .pkp_navigation_user .dropdown-menu a:focus-visible{
    color:#F3F8F6 !important;
    background:rgba(80,190,155,.09) !important;
  }

  .pkp_structure_head .pkp_navigation_user .task_count{
    width:23px !important;
    height:23px !important;
    line-height:23px !important;
    margin-left:8px !important;
    background:rgba(84,198,165,.18) !important;
    color:#DFF3EC !important;
    font-size:11px !important;
  }

  /* Keep focus rings inside the drawer crisp and visible. */
  .pkp_site_nav_menu a:focus-visible,
  .pkp_site_nav_menu button:focus-visible{
    outline:2px solid #78D8BC !important;
    outline-offset:2px !important;
  }

  /* A bit more breathing room when the menu is closed. */
  .pkp_site_name_wrapper{
    height:62px !important;
    min-height:62px !important;
  }
}

/* On devices with a real hover pointer, collapse nested groups until the
   parent is hovered/focused. Touch devices keep child links visible because
   OJS 3.3's stock template does not provide a separate tap-to-expand button. */
@media (max-width:860px) and (hover:hover) and (pointer:fine){
  .pkp_navigation_primary > li:has(> ul) > ul{
    display:none !important;
  }
  .pkp_navigation_primary > li:has(> ul):hover > ul,
  .pkp_navigation_primary > li:has(> ul):focus-within > ul{
    display:block !important;
  }
}


/* ==========================================================================
   PATCH v14 — compact mobile navigation
   Fixes v13's overly tall drawer while keeping it readable and touch-friendly.
   Desktop >= 861px remains unchanged.
   ========================================================================== */

@media (max-width:860px){

  /* Compact overall drawer */
  .pkp_site_nav_menu{
    padding:6px 16px 12px !important;
    max-height:min(70vh,560px) !important;
  }

  /* Main navigation rows */
  .pkp_navigation_primary > li > a{
    min-height:38px !important;
    padding:8px 2px !important;
    font-size:14.5px !important;
  }

  /* Parent groups stay visually clear without consuming huge vertical space */
  .pkp_navigation_primary > li:has(> ul) > a{
    min-height:36px !important;
    padding-bottom:6px !important;
  }

  /* About submenu: compact 2-column grid */
  .pkp_structure_head .pkp_navigation_primary > li > ul{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:2px 8px !important;
    width:100% !important;
    margin:0 0 7px !important;
    padding:3px 0 5px 11px !important;
    border-left:2px solid rgba(68,191,154,.38) !important;
    background:transparent !important;
  }

  .pkp_structure_head .pkp_navigation_primary li li{
    width:auto !important;
    min-width:0 !important;
    border:0 !important;
  }

  .pkp_structure_head .pkp_navigation_primary li li a{
    min-height:27px !important;
    padding:4px 6px !important;
    font-size:12.5px !important;
    line-height:1.25 !important;
  }

  /* Submissions only has two links — keep them side by side */
  .pkp_navigation_primary > li:nth-last-of-type(1) > ul,
  .pkp_navigation_primary > li:has(> a[href*="submissions"]) > ul{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  /* Search: one compact action row */
  .pkp_navigation_search_wrapper{
    margin:5px 0 0 !important;
    padding:5px 0 0 !important;
  }

  .pkp_navigation_search_wrapper .pkp_search,
  .pkp_navigation_search_wrapper a{
    min-height:36px !important;
    padding:7px 10px !important;
    font-size:13.5px !important;
  }

  /* Account section: much shorter */
  .pkp_structure_head .pkp_head_wrapper .pkp_navigation_user_wrapper{
    margin:8px 0 0 !important;
    padding:8px 0 0 !important;
  }

  .pkp_structure_head .pkp_navigation_user > li > a{
    min-height:34px !important;
    padding:6px 10px !important;
    font-size:13px !important;
  }

  /* Turn Dashboard / View Profile / Logout into a compact 3-column action row */
  .pkp_structure_head .pkp_navigation_user ul,
  .pkp_structure_head .pkp_navigation_user .dropdown-menu{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:4px !important;
    width:100% !important;
    margin:3px 0 0 !important;
    padding:0 !important;
  }

  .pkp_structure_head .pkp_navigation_user ul li,
  .pkp_structure_head .pkp_navigation_user .dropdown-menu li{
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
  }

  .pkp_structure_head .pkp_navigation_user ul a,
  .pkp_structure_head .pkp_navigation_user .dropdown-menu a{
    min-height:30px !important;
    justify-content:center !important;
    padding:5px 6px !important;
    text-align:center !important;
    font-size:11.5px !important;
    line-height:1.2 !important;
    background:rgba(255,255,255,.025) !important;
    border:1px solid rgba(255,255,255,.055) !important;
  }

  .pkp_structure_head .pkp_navigation_user .task_count{
    width:19px !important;
    height:19px !important;
    line-height:19px !important;
    margin-left:5px !important;
    font-size:9.5px !important;
  }

  /* Slightly shorter header bar */
  .pkp_site_name_wrapper{
    height:56px !important;
    min-height:56px !important;
  }

  .pkp_site_name .is_img img{
    height:39px !important;
    max-height:39px !important;
  }

  .pkp_site_nav_toggle{
    width:36px !important;
    height:36px !important;
  }
}

/* Keep nested groups visible on touch devices. On hover-capable narrow
   windows, allow the existing compact hover/focus reveal behavior. */
@media (max-width:860px) and (hover:hover) and (pointer:fine){
  .pkp_navigation_primary > li:has(> ul) > ul{
    display:none !important;
  }
  .pkp_navigation_primary > li:has(> ul):hover > ul,
  .pkp_navigation_primary > li:has(> ul):focus-within > ul{
    display:grid !important;
  }
}


/* ==========================================================================
   PATCH v15 — true mobile accordion navigation
   Requires the matching small script snippet in frontend/components/header.tpl.
   Desktop >= 861px is unchanged.
   ========================================================================== */

@media (max-width:860px){

  /* v14 showed nested menus all the time. v15 lets the script-controlled
     accordion decide whether each group is open. */
  .pkp_navigation_primary > li.hi_mobile_has_submenu,
  .pkp_navigation_user > li.hi_mobile_has_submenu{
    position:relative !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 38px !important;
    align-items:center !important;
  }

  .pkp_navigation_primary > li.hi_mobile_has_submenu > a,
  .pkp_navigation_user > li.hi_mobile_has_submenu > a{
    grid-column:1 !important;
    grid-row:1 !important;
    width:100% !important;
    min-width:0 !important;
    padding-right:8px !important;
  }

  /* The dedicated toggle means the parent label remains a normal usable link. */
  .hi_mobile_subtoggle{
    grid-column:2 !important;
    grid-row:1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    margin:0 1px 0 auto !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:#7DD9BE !important;
    cursor:pointer !important;
    box-shadow:none !important;
  }

  .hi_mobile_subtoggle::before{
    content:"";
    width:7px;
    height:7px;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:rotate(45deg) translate(-1px,-1px);
    transform-origin:center;
    transition:transform .18s ease;
  }

  .hi_mobile_has_submenu.hi_mobile_submenu_open > .hi_mobile_subtoggle::before{
    transform:rotate(225deg) translate(-1px,-1px);
  }

  .hi_mobile_subtoggle:hover,
  .hi_mobile_subtoggle:focus-visible{
    color:#E9F7F2 !important;
    background:rgba(82,193,158,.10) !important;
  }

  /* Remove v13/v14's decorative chevron from the parent link itself. */
  .pkp_navigation_primary > li:has(> ul) > a::after{
    content:none !important;
    display:none !important;
  }

  /* CLOSED by default. This is the key difference from v14. */
  .pkp_structure_head .pkp_navigation_primary > li.hi_mobile_has_submenu > ul,
  .pkp_structure_head .pkp_navigation_user > li.hi_mobile_has_submenu > ul,
  .pkp_structure_head .pkp_navigation_user > li.hi_mobile_has_submenu > .dropdown-menu{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    display:none !important;
  }

  /* OPEN only after the dedicated toggle is tapped. */
  .pkp_structure_head .pkp_navigation_primary > li.hi_mobile_submenu_open > ul{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:2px 8px !important;
    width:100% !important;
    margin:0 0 6px !important;
    padding:3px 0 5px 11px !important;
    border-left:2px solid rgba(68,191,154,.38) !important;
    background:rgba(255,255,255,.012) !important;
  }

  .pkp_structure_head .pkp_navigation_user > li.hi_mobile_submenu_open > ul,
  .pkp_structure_head .pkp_navigation_user > li.hi_mobile_submenu_open > .dropdown-menu{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:4px !important;
    width:100% !important;
    margin:3px 0 2px !important;
    padding:0 !important;
  }

  /* Account top row should read as one compact item, not a second menu header. */
  .pkp_navigation_user > li.hi_mobile_has_submenu{
    border-left:2px solid var(--hi-green) !important;
    background:rgba(255,255,255,.025) !important;
  }

  .pkp_structure_head .pkp_navigation_user > li.hi_mobile_has_submenu > a{
    border-left:0 !important;
    background:transparent !important;
    min-height:34px !important;
    padding:6px 9px !important;
  }

  .pkp_structure_head .pkp_navigation_user > li.hi_mobile_has_submenu > .hi_mobile_subtoggle{
    margin-right:2px !important;
  }

  /* With all three accordion groups closed, the whole drawer stays compact. */
  .pkp_site_nav_menu{
    max-height:min(72vh,520px) !important;
    padding-bottom:11px !important;
  }

  /* A little visual feedback when a section is open. */
  .pkp_navigation_primary > li.hi_mobile_submenu_open > a,
  .pkp_navigation_user > li.hi_mobile_submenu_open > a{
    color:#80DCC1 !important;
  }
}

/* v14's hover-only submenu rule conflicts with the real toggle. Neutralise it. */
@media (max-width:860px) and (hover:hover) and (pointer:fine){
  .pkp_navigation_primary > li.hi_mobile_has_submenu > ul{
    display:none !important;
  }
  .pkp_navigation_primary > li.hi_mobile_has_submenu.hi_mobile_submenu_open > ul{
    display:grid !important;
  }
}

/* Toggle buttons are a mobile-only control. */
@media (min-width:861px){
  .hi_mobile_subtoggle{
    display:none !important;
  }
}


/* ==========================================================================
   PATCH v16 — CSS-ONLY compact mobile navigation
   No template/JavaScript changes required.
   Desktop >= 861px remains unchanged.

   Mobile layout:
   - Current + Archives share a row
   - About + its four child links form one compact section
   - Submissions + its two child links form one compact section
   - Search is a short full-width action
   - Account actions sit in one compact row
   ========================================================================== */

@media (max-width:860px){

  /* v15's script-driven controls are not being used. */
  .hi_mobile_subtoggle{
    display:none !important;
  }

  /* Solid compact drawer */
  .pkp_site_nav_menu{
    background:#08130F !important;
    padding:7px 14px 11px !important;
    max-height:min(68vh,470px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    box-shadow:0 18px 34px rgba(0,0,0,.40) !important;
  }

  /* Use two columns for the simple top-level destinations. */
  .pkp_navigation_primary{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:4px 8px !important;
    width:100% !important;
  }

  .pkp_navigation_primary > li{
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
    border:0 !important;
  }

  /* Current / Archives become compact buttons. */
  .pkp_navigation_primary > li:not(:has(> ul)){
    border:1px solid rgba(255,255,255,.07) !important;
    background:rgba(255,255,255,.018) !important;
  }

  .pkp_navigation_primary > li:not(:has(> ul)) > a{
    min-height:34px !important;
    padding:7px 9px !important;
    font-size:13.5px !important;
    line-height:1.15 !important;
  }

  /* About / Submissions occupy a full row. */
  .pkp_navigation_primary > li:has(> ul){
    grid-column:1 / -1 !important;
    display:grid !important;
    grid-template-columns:112px minmax(0,1fr) !important;
    align-items:start !important;
    padding:5px 0 !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
  }

  .pkp_navigation_primary > li:has(> ul) > a{
    grid-column:1 !important;
    grid-row:1 !important;
    min-height:31px !important;
    padding:6px 6px 6px 2px !important;
    font-size:13.5px !important;
    font-weight:600 !important;
    color:#F2F7F5 !important;
  }

  /* Remove decorative dropdown arrow from the label in CSS-only mode. */
  .pkp_navigation_primary > li:has(> ul) > a::after{
    content:none !important;
    display:none !important;
  }

  /* Child links live beside the parent label instead of underneath it. */
  .pkp_structure_head .pkp_navigation_primary > li:has(> ul) > ul,
  .pkp_structure_head .pkp_navigation_primary > li:has(> ul) > .dropdown-menu{
    grid-column:2 !important;
    grid-row:1 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:2px 5px !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  .pkp_structure_head .pkp_navigation_primary li li{
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
    border:0 !important;
  }

  .pkp_structure_head .pkp_navigation_primary li li a{
    min-height:28px !important;
    padding:5px 7px !important;
    font-size:11.5px !important;
    line-height:1.18 !important;
    color:#B8CBC4 !important;
    background:rgba(255,255,255,.018) !important;
    border:1px solid rgba(255,255,255,.045) !important;
  }

  .pkp_structure_head .pkp_navigation_primary li li a:hover,
  .pkp_structure_head .pkp_navigation_primary li li a:focus-visible{
    color:#F1F8F5 !important;
    background:rgba(71,187,152,.11) !important;
  }

  /* Search remains prominent but compact. */
  .pkp_navigation_search_wrapper{
    margin:6px 0 0 !important;
    padding:0 !important;
    border:0 !important;
  }

  .pkp_navigation_search_wrapper .pkp_search,
  .pkp_navigation_search_wrapper a{
    min-height:34px !important;
    padding:7px 9px !important;
    font-size:12.5px !important;
    line-height:1.15 !important;
    background:rgba(0,127,101,.13) !important;
    border:1px solid rgba(80,190,155,.22) !important;
  }

  /* Compact account module. */
  .pkp_structure_head .pkp_head_wrapper .pkp_navigation_user_wrapper{
    margin:7px 0 0 !important;
    padding:7px 0 0 !important;
    border-top:1px solid rgba(84,190,158,.24) !important;
  }

  .pkp_navigation_user{
    display:block !important;
  }

  .pkp_navigation_user > li{
    display:grid !important;
    grid-template-columns:105px minmax(0,1fr) !important;
    align-items:center !important;
    width:100% !important;
    min-width:0 !important;
    background:rgba(255,255,255,.015) !important;
  }

  .pkp_structure_head .pkp_navigation_user > li > a{
    grid-column:1 !important;
    grid-row:1 !important;
    min-height:31px !important;
    padding:6px 8px !important;
    border-left:2px solid var(--hi-green) !important;
    background:transparent !important;
    font-size:11.5px !important;
  }

  .pkp_structure_head .pkp_navigation_user > li > a .task_count{
    display:none !important;
  }

  /* Dashboard / View Profile / Logout sit beside username. */
  .pkp_structure_head .pkp_navigation_user > li > ul,
  .pkp_structure_head .pkp_navigation_user > li > .dropdown-menu{
    grid-column:2 !important;
    grid-row:1 !important;
    position:static !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:3px !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 0 0 5px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .pkp_structure_head .pkp_navigation_user ul li,
  .pkp_structure_head .pkp_navigation_user .dropdown-menu li{
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
  }

  .pkp_structure_head .pkp_navigation_user ul a,
  .pkp_structure_head .pkp_navigation_user .dropdown-menu a{
    min-height:27px !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    padding:4px 4px !important;
    text-align:center !important;
    font-size:9.8px !important;
    line-height:1.1 !important;
    background:rgba(255,255,255,.022) !important;
    border:1px solid rgba(255,255,255,.05) !important;
    white-space:normal !important;
  }

  .pkp_structure_head .pkp_navigation_user .task_count{
    width:17px !important;
    height:17px !important;
    line-height:17px !important;
    margin-left:3px !important;
    font-size:8.5px !important;
  }

  /* Shorter logo bar without making the brand feel cramped. */
  .pkp_site_name_wrapper{
    height:54px !important;
    min-height:54px !important;
  }

  .pkp_site_name .is_img img{
    height:38px !important;
    max-height:38px !important;
  }

  .pkp_site_nav_toggle{
    width:35px !important;
    height:35px !important;
  }
}

/* Override v15's hover accordion logic: this build intentionally keeps child
   destinations visible because no JavaScript/template change is available. */
@media (max-width:860px) and (hover:hover) and (pointer:fine){
  .pkp_navigation_primary > li:has(> ul) > ul,
  .pkp_navigation_primary > li:has(> ul):hover > ul,
  .pkp_navigation_primary > li:has(> ul):focus-within > ul{
    display:grid !important;
  }
}

@media (max-width:430px){
  .pkp_navigation_primary > li:has(> ul){
    grid-template-columns:96px minmax(0,1fr) !important;
  }

  .pkp_navigation_user > li{
    grid-template-columns:92px minmax(0,1fr) !important;
  }

  .pkp_structure_head .pkp_navigation_primary li li a{
    font-size:11px !important;
  }

  .pkp_structure_head .pkp_navigation_user ul a,
  .pkp_structure_head .pkp_navigation_user .dropdown-menu a{
    font-size:9.3px !important;
  }
}


/* ==========================================================================
   PATCH v17 — MOBILE DESIGN 2 SIDE DRAWER
   CSS-only implementation based on the approved Design 2 mockup.
   Desktop >= 861px is unchanged.
   ========================================================================== */

@media (max-width:860px){

  /* ---------------------------- closed mobile header --------------------- */
  .pkp_head_wrapper{
    position:relative !important;
    padding:12px 18px !important;
  }

  .pkp_site_name_wrapper{
    height:58px !important;
    min-height:58px !important;
    padding:0 52px 0 0 !important;
    display:flex !important;
    align-items:center !important;
  }

  .pkp_site_name{
    margin:0 !important;
    max-width:215px !important;
  }

  .pkp_site_name .is_img img{
    height:42px !important;
    max-height:42px !important;
    max-width:210px !important;
  }

  /* Design 2: logo left, hamburger right. */
  .pkp_site_nav_toggle{
    position:absolute !important;
    left:auto !important;
    right:18px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:40px !important;
    height:40px !important;
    border:1px solid rgba(118,214,183,.34) !important;
    background:rgba(5,17,13,.50) !important;
    z-index:10005 !important;
  }

  /* ------------------------------- drawer ------------------------------- */
  .pkp_site_nav_menu{
    position:fixed !important;
    top:0 !important;
    bottom:0 !important;
    left:0 !important;
    right:auto !important;
    width:min(84vw,340px) !important;
    height:100vh !important;
    height:100dvh !important;
    max-height:none !important;
    margin:0 !important;
    padding:104px 24px 28px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    box-sizing:border-box !important;
    background:
      radial-gradient(circle at 20% 12%, rgba(0,127,101,.13), transparent 30%),
      linear-gradient(180deg,#071711 0%,#06130F 100%) !important;
    border:0 !important;
    border-right:1px solid rgba(87,193,158,.26) !important;
    box-shadow:22px 0 52px rgba(0,0,0,.44) !important;
    z-index:10003 !important;
    gap:0 !important;
  }

  /* Drawer brand. This reproduces the wordmark treatment without requiring
     template access or a second uploaded image. */
  .pkp_site_nav_menu::before{
    content:"HEALTH\A INQUIRIES";
    white-space:pre;
    position:absolute;
    top:30px;
    left:28px;
    display:block;
    color:#F3F7F5;
    font-family:var(--hi-face);
    font-size:23px;
    font-weight:500;
    line-height:.83;
    letter-spacing:-.035em;
  }

  /* Dim the page behind the drawer while preserving the Design 2 sliver. */
  body:has(.pkp_site_nav_menu[style*="display: block"])::before,
  body:has(.pkp_site_nav_menu[style*="display:block"])::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:10000;
    pointer-events:none;
    background:rgba(3,10,8,.46);
    backdrop-filter:blur(1px);
  }

  body:has(.pkp_site_nav_menu[style*="display: block"]),
  body:has(.pkp_site_nav_menu[style*="display:block"]){
    overflow:hidden !important;
  }

  /* Move the existing hamburger over the drawer and turn it into an X while
     OJS reports the menu as open. It remains the actual working close button. */
  body:has(.pkp_site_nav_menu[style*="display: block"]) .pkp_site_nav_toggle,
  body:has(.pkp_site_nav_menu[style*="display:block"]) .pkp_site_nav_toggle{
    position:fixed !important;
    top:31px !important;
    left:calc(min(84vw,340px) - 61px) !important;
    right:auto !important;
    transform:none !important;
    width:36px !important;
    height:36px !important;
    border:0 !important;
    background:transparent !important;
    color:#56C9A7 !important;
    font-size:0 !important;
  }

  body:has(.pkp_site_nav_menu[style*="display: block"]) .pkp_site_nav_toggle::before,
  body:has(.pkp_site_nav_menu[style*="display:block"]) .pkp_site_nav_toggle::before{
    content:"×";
    display:block;
    font-family:Arial,sans-serif;
    font-size:34px;
    font-weight:200;
    line-height:34px;
    color:#56C9A7;
  }

  /* Respect the state OJS sets on the menu. */
  .pkp_site_nav_menu[style*="display: none"]{
    display:none !important;
  }
  .pkp_site_nav_menu[style*="display: block"],
  .pkp_site_nav_menu[style*="display:block"]{
    display:block !important;
  }

  /* --------------------------- main navigation --------------------------- */
  .pkp_navigation_primary_row,
  .pkp_navigation_primary_wrapper,
  .pkp_navigation_primary{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .pkp_navigation_primary{
    list-style:none !important;
  }

  .pkp_navigation_primary > li{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
  }

  /* Current + Archives: large editorial rows like Design 2. */
  .pkp_navigation_primary > li:not(:has(> ul)){
    border-bottom:1px solid rgba(255,255,255,.09) !important;
  }

  .pkp_navigation_primary > li:not(:has(> ul)) > a{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    min-height:65px !important;
    padding:17px 0 !important;
    color:#F1F6F4 !important;
    font-size:16px !important;
    font-weight:500 !important;
    line-height:1.2 !important;
    background:transparent !important;
    border:0 !important;
  }

  /* Minimal line icons using the Font Awesome font already loaded by OJS. */
  .pkp_navigation_primary > li:not(:has(> ul)) > a::before{
    flex:0 0 29px;
    margin-right:14px;
    font-family:FontAwesome;
    font-size:20px;
    font-weight:normal;
    color:#59C9A8;
    text-align:center;
  }

  .pkp_navigation_primary > li > a[href*="/issue/current"]::before{
    content:"\f02d"; /* book */
  }

  .pkp_navigation_primary > li > a[href*="/issue/archive"]::before{
    content:"\f187"; /* archive */
  }

  .pkp_navigation_primary > li:not(:has(> ul)) > a::after{
    content:"›";
    margin-left:auto;
    color:#5AC9A8;
    font-size:25px;
    font-weight:300;
    line-height:1;
  }

  /* About + Submissions are editorial sections with small green labels. */
  .pkp_navigation_primary > li:has(> ul){
    display:block !important;
    width:100% !important;
    padding:25px 0 19px !important;
    border-bottom:1px solid rgba(255,255,255,.09) !important;
  }

  .pkp_navigation_primary > li:has(> ul) > a{
    display:flex !important;
    width:100% !important;
    min-height:0 !important;
    padding:0 0 12px !important;
    color:#54C5A4 !important;
    font-size:11.5px !important;
    font-weight:600 !important;
    line-height:1.2 !important;
    letter-spacing:.18em !important;
    text-transform:uppercase !important;
    border:0 !important;
    background:transparent !important;
  }

  .pkp_navigation_primary > li:has(> ul) > a::before{
    content:none !important;
  }

  .pkp_navigation_primary > li:has(> ul) > a::after{
    content:"⌄" !important;
    display:block !important;
    margin-left:auto !important;
    color:#55C7A5 !important;
    font-size:18px !important;
    line-height:1 !important;
    letter-spacing:0 !important;
  }

  /* Child pages are vertical and roomy, matching the selected mockup. */
  .pkp_structure_head .pkp_navigation_primary > li:has(> ul) > ul,
  .pkp_structure_head .pkp_navigation_primary > li:has(> ul) > .dropdown-menu{
    position:static !important;
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 0 0 17px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .pkp_structure_head .pkp_navigation_primary li li{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    border-bottom:1px solid rgba(255,255,255,.06) !important;
  }

  .pkp_structure_head .pkp_navigation_primary li li:last-child{
    border-bottom:0 !important;
  }

  .pkp_structure_head .pkp_navigation_primary li li a{
    display:block !important;
    width:100% !important;
    min-height:0 !important;
    padding:10px 0 !important;
    color:#D5E0DC !important;
    font-size:14.5px !important;
    font-weight:400 !important;
    line-height:1.25 !important;
    background:transparent !important;
    border:0 !important;
  }

  .pkp_structure_head .pkp_navigation_primary li li a:hover,
  .pkp_structure_head .pkp_navigation_primary li li a:focus-visible{
    color:#72D7B8 !important;
    background:transparent !important;
  }

  /* -------------------------------- search ------------------------------- */
  .pkp_navigation_search_wrapper{
    display:block !important;
    width:100% !important;
    margin:24px 0 0 !important;
    padding:0 !important;
    border:0 !important;
  }

  .pkp_navigation_search_wrapper .pkp_search,
  .pkp_navigation_search_wrapper a{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    min-height:54px !important;
    margin:0 !important;
    padding:13px 16px !important;
    box-sizing:border-box !important;
    color:#F2F7F5 !important;
    font-size:15px !important;
    background:rgba(0,127,101,.075) !important;
    border:1px solid rgba(83,196,161,.32) !important;
  }

  .pkp_navigation_search_wrapper .pkp_search:hover,
  .pkp_navigation_search_wrapper .pkp_search:focus-visible{
    background:rgba(0,127,101,.14) !important;
    border-color:rgba(90,205,169,.58) !important;
    text-decoration:none !important;
  }

  /* ------------------------------- account ------------------------------- */
  .pkp_structure_head .pkp_head_wrapper .pkp_navigation_user_wrapper{
    position:static !important;
    display:block !important;
    width:100% !important;
    margin:28px 0 0 !important;
    padding:25px 0 0 !important;
    border:0 !important;
    border-top:1px solid rgba(255,255,255,.10) !important;
  }

  .pkp_structure_head .pkp_navigation_user{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .pkp_structure_head .pkp_navigation_user > li{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
  }

  .pkp_structure_head .pkp_navigation_user > li > a{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    min-height:0 !important;
    padding:0 0 14px !important;
    color:#F0F5F3 !important;
    font-size:14.5px !important;
    font-weight:500 !important;
    background:transparent !important;
    border:0 !important;
  }

  .pkp_structure_head .pkp_navigation_user > li > a::before{
    content:"\f007";
    display:flex;
    align-items:center;
    justify-content:center;
    width:37px;
    height:37px;
    margin-right:12px;
    border-radius:50%;
    background:#3EA987;
    color:#fff;
    font-family:FontAwesome;
    font-size:16px;
    font-weight:normal;
  }

  .pkp_structure_head .pkp_navigation_user > li > a .task_count{
    display:none !important;
  }

  /* Dashboard / Profile / Logout as a quiet horizontal line. */
  .pkp_structure_head .pkp_navigation_user > li > ul,
  .pkp_structure_head .pkp_navigation_user > li > .dropdown-menu{
    position:static !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    gap:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .pkp_structure_head .pkp_navigation_user ul li,
  .pkp_structure_head .pkp_navigation_user .dropdown-menu li{
    display:flex !important;
    width:auto !important;
    margin:0 !important;
  }

  .pkp_structure_head .pkp_navigation_user ul li + li::before,
  .pkp_structure_head .pkp_navigation_user .dropdown-menu li + li::before{
    content:"";
    width:1px;
    height:15px;
    margin:8px 13px 0;
    background:rgba(84,196,161,.28);
  }

  .pkp_structure_head .pkp_navigation_user ul a,
  .pkp_structure_head .pkp_navigation_user .dropdown-menu a{
    min-height:0 !important;
    padding:6px 0 !important;
    color:#59C8A7 !important;
    font-size:12.5px !important;
    line-height:1.2 !important;
    background:transparent !important;
    border:0 !important;
    white-space:nowrap !important;
  }

  .pkp_structure_head .pkp_navigation_user .task_count{
    width:19px !important;
    height:19px !important;
    line-height:19px !important;
    margin-left:6px !important;
    background:rgba(65,178,144,.30) !important;
    color:#EAF5F1 !important;
    font-size:9px !important;
  }

  /* ------------------------------ polish -------------------------------- */
  .pkp_site_nav_menu a:focus-visible{
    outline:2px solid #65D0AF !important;
    outline-offset:3px !important;
  }

  .pkp_site_nav_menu{
    scrollbar-width:thin;
    scrollbar-color:rgba(92,190,158,.42) transparent;
  }

  .pkp_site_nav_menu::-webkit-scrollbar{width:4px}
  .pkp_site_nav_menu::-webkit-scrollbar-track{background:transparent}
  .pkp_site_nav_menu::-webkit-scrollbar-thumb{
    background:rgba(92,190,158,.38);
    border-radius:5px;
  }
}

/* Narrow phones: preserve the same visual hierarchy, just trim the drawer. */
@media (max-width:430px){
  .pkp_site_nav_menu{
    width:86vw !important;
    padding-left:21px !important;
    padding-right:21px !important;
  }

  .pkp_site_nav_menu::before{
    left:24px !important;
    font-size:21px !important;
  }

  body:has(.pkp_site_nav_menu[style*="display: block"]) .pkp_site_nav_toggle,
  body:has(.pkp_site_nav_menu[style*="display:block"]) .pkp_site_nav_toggle{
    left:calc(86vw - 57px) !important;
  }

  .pkp_navigation_primary > li:not(:has(> ul)) > a{
    min-height:58px !important;
    font-size:15px !important;
  }

  .pkp_structure_head .pkp_navigation_primary li li a{
    font-size:13.5px !important;
  }
}

/* Neutralise v15/v16 accordion/compact-grid rules for this Design 2 build. */
@media (max-width:860px) and (hover:hover) and (pointer:fine){
  .pkp_navigation_primary > li:has(> ul) > ul,
  .pkp_navigation_primary > li:has(> ul):hover > ul,
  .pkp_navigation_primary > li:has(> ul):focus-within > ul{
    display:block !important;
  }
}


/* ==========================================================================
   PATCH v18 — Design 2 menu state fix
   CLOSED by default. OJS' existing hamburger JS opens/closes the drawer by
   changing the nav element's inline display value.
   ========================================================================== */

@media (max-width:860px){

  /* Important: older refinement patches forced this menu to display:block.
     Reset that so the mobile drawer is genuinely closed on initial load. */
  .pkp_site_nav_menu{
    display:none !important;
  }

  /* OJS toggles the mobile nav's inline display state when the hamburger is
     activated. Only the open state should override the default above. */
  .pkp_site_nav_menu[style*="display: block"],
  .pkp_site_nav_menu[style*="display:block"]{
    display:block !important;
  }

  .pkp_site_nav_menu[style*="display: none"],
  .pkp_site_nav_menu[style*="display:none"]{
    display:none !important;
  }

  /* Dim/lock the page only while the drawer is actually open. */
  body:not(:has(.pkp_site_nav_menu[style*="display: block"]))::before{
    content:none !important;
  }

  body:not(:has(.pkp_site_nav_menu[style*="display:block"])){
    overflow:auto;
  }
}

/* Desktop navigation must always remain visible. */
@media (min-width:861px){
  .pkp_site_nav_menu{
    display:block !important;
  }
}


/* ==========================================================================
   PATCH v19 — FINAL OJS 3.3 MOBILE DRAWER STATE FIX
   OJS Default Theme main.js toggles:
     .pkp_site_nav_menu--isOpen
     .pkp_site_nav_toggle--transform
   Use those real classes instead of inline-style selectors.
   ========================================================================== */

@media (max-width:860px){

  /* Closed by default */
  .pkp_site_nav_menu{
    display:none !important;
  }

  /* OJS 3.3 actual open state */
  .pkp_site_nav_menu.pkp_site_nav_menu--isOpen{
    display:block !important;
    position:fixed !important;
    top:0 !important;
    bottom:0 !important;
    left:0 !important;
    right:auto !important;
    width:min(84vw,340px) !important;
    height:100vh !important;
    height:100dvh !important;
    max-height:none !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    z-index:10004 !important;
  }

  /* Page dim only while drawer is open */
  body:has(.pkp_site_nav_menu--isOpen)::before{
    content:"" !important;
    position:fixed !important;
    inset:0 !important;
    z-index:10000 !important;
    pointer-events:none !important;
    background:rgba(3,10,8,.46) !important;
    backdrop-filter:blur(1px);
  }

  body:has(.pkp_site_nav_menu--isOpen){
    overflow:hidden !important;
  }

  body:not(:has(.pkp_site_nav_menu--isOpen))::before{
    content:none !important;
    display:none !important;
  }

  body:not(:has(.pkp_site_nav_menu--isOpen)){
    overflow:auto !important;
  }

  /* Closed hamburger: normal top-right button */
  .pkp_site_nav_toggle:not(.pkp_site_nav_toggle--transform){
    position:absolute !important;
    left:auto !important;
    right:18px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:40px !important;
    height:40px !important;
    z-index:10005 !important;
  }

  /* Open state: use the same OJS toggle as the drawer close control */
  .pkp_site_nav_toggle.pkp_site_nav_toggle--transform{
    position:fixed !important;
    top:29px !important;
    left:calc(min(84vw,340px) - 58px) !important;
    right:auto !important;
    transform:none !important;
    width:38px !important;
    height:38px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    z-index:10006 !important;
    color:#5DD0AE !important;
  }

  /* Let OJS' built-in transformed hamburger make the X.
     Remove our earlier artificial × pseudo-element. */
  .pkp_site_nav_toggle.pkp_site_nav_toggle--transform::before{
    content:none !important;
    display:none !important;
  }

  /* Cancel all old inline-style based open-state hacks from v17/v18. */
  .pkp_site_nav_menu[style*="display: block"],
  .pkp_site_nav_menu[style*="display:block"]{
    display:none !important;
  }

  .pkp_site_nav_menu.pkp_site_nav_menu--isOpen[style*="display: block"],
  .pkp_site_nav_menu.pkp_site_nav_menu--isOpen[style*="display:block"],
  .pkp_site_nav_menu.pkp_site_nav_menu--isOpen{
    display:block !important;
  }

  /* Ensure old body:has(inline style) rules cannot move the button. */
  body:has(.pkp_site_nav_menu[style*="display: block"]) .pkp_site_nav_toggle:not(.pkp_site_nav_toggle--transform),
  body:has(.pkp_site_nav_menu[style*="display:block"]) .pkp_site_nav_toggle:not(.pkp_site_nav_toggle--transform){
    position:absolute !important;
    top:50% !important;
    left:auto !important;
    right:18px !important;
    transform:translateY(-50%) !important;
  }
}

@media (max-width:430px){
  .pkp_site_nav_menu.pkp_site_nav_menu--isOpen{
    width:86vw !important;
  }

  .pkp_site_nav_toggle.pkp_site_nav_toggle--transform{
    left:calc(86vw - 57px) !important;
  }
}

/* Desktop remains permanently visible as before. */
@media (min-width:861px){
  .pkp_site_nav_menu,
  .pkp_site_nav_menu.pkp_site_nav_menu--isOpen{
    display:block !important;
  }
}


/* ==========================================================================
   PATCH v20 — APPROVED MOBILE COMBINATION
   Homepage: "Modern Bold" concept
   Navigation: Design 2 slide drawer from v19
   Desktop >= 861px is unchanged.
   ========================================================================== */

@media (max-width:860px){

  /* ======================== MOBILE HOMEPAGE / HERO ======================= */

  /* Let the artwork own the entire first screen area. */
  body.pkp_page_index:has(.hi_hero) .pkp_structure_head{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:20 !important;
    background:transparent !important;
  }

  body.pkp_page_index .pkp_head_wrapper{
    padding:16px 18px 0 !important;
    background:transparent !important;
  }

  body.pkp_page_index .pkp_site_name_wrapper{
    height:52px !important;
    min-height:52px !important;
    padding-right:52px !important;
  }

  body.pkp_page_index .pkp_site_name .is_img img{
    height:39px !important;
    max-height:39px !important;
    width:auto !important;
  }

  body.pkp_page_index .pkp_site_nav_toggle:not(.pkp_site_nav_toggle--transform){
    right:18px !important;
    width:38px !important;
    height:38px !important;
    background:rgba(4,17,13,.58) !important;
    border:1px solid rgba(105,203,171,.34) !important;
    backdrop-filter:blur(4px);
  }

  .pkp_page_index .hi_hero{
    min-height:500px !important;
    padding-top:104px !important;
    align-items:flex-end !important;
    background-position:center 42% !important;
    background-size:cover !important;
  }

  /* More cinematic contrast like the approved mockup. */
  .pkp_page_index .hi_hero::after{
    background:
      linear-gradient(180deg,
        rgba(3,10,8,.18) 0%,
        rgba(3,10,8,.26) 25%,
        rgba(3,10,8,.52) 62%,
        rgba(3,10,8,.88) 100%) !important;
  }

  .pkp_page_index .hi_hero .hi_hero_in{
    padding:0 18px 24px !important;
    max-width:none !important;
  }

  .pkp_page_index .hi_hero .hi_kick{
    margin:0 0 14px !important;
    color:#DAE8E3 !important;
    font-size:9.5px !important;
    line-height:1.35 !important;
    letter-spacing:.22em !important;
    font-weight:600 !important;
  }

  .pkp_page_index .hi_hero .hi_hero_in h1{
    max-width:10.8ch !important;
    margin:0 0 16px !important;
    color:#fff !important;
    font-size:34px !important;
    line-height:1.04 !important;
    letter-spacing:-.032em !important;
    font-weight:300 !important;
    text-wrap:balance;
    text-shadow:0 2px 18px rgba(0,0,0,.24);
  }

  .pkp_page_index .hi_hero .hi_sub{
    max-width:31ch !important;
    margin:0 0 22px !important;
    color:#F0F5F3 !important;
    font-size:14.5px !important;
    line-height:1.55 !important;
    font-weight:400 !important;
    text-shadow:0 1px 10px rgba(0,0,0,.28);
  }

  .pkp_page_index .hi_hero .hi_cta,
  .pkp_page_index .hi_cta{
    min-height:46px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 22px !important;
    background:#008E73 !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.08) !important;
    box-shadow:0 8px 22px rgba(0,0,0,.18) !important;
    font-size:13px !important;
    font-weight:600 !important;
    line-height:1.2 !important;
  }

  .pkp_page_index .hi_hero .hi_cta:hover,
  .pkp_page_index .hi_hero .hi_cta:focus-visible{
    background:#007A63 !important;
    transform:translateY(-1px);
  }

  /* Credit gets its own line below the CTA instead of colliding with it. */
  .pkp_page_index .hi_hero .hi_credit{
    position:static !important;
    display:block !important;
    margin:13px 0 0 !important;
    padding:0 !important;
    color:rgba(112,214,181,.82) !important;
    font-size:8.5px !important;
    line-height:1.4 !important;
    letter-spacing:.15em !important;
    text-transform:uppercase !important;
  }

  /* ============================= ABOUT BAND ============================== */

  .pkp_page_index .hi_band{
    margin:0 !important;
    padding:34px 18px 32px !important;
    background:#fff !important;
  }

  .pkp_page_index .hi_band .hi_eyebrow{
    margin:0 0 20px !important;
    color:#52645E !important;
    font-size:10px !important;
    line-height:1.3 !important;
    letter-spacing:.22em !important;
    font-weight:600 !important;
  }

  .pkp_page_index .hi_band p.hi_lead{
    margin:0 0 22px !important;
    max-width:none !important;
    color:#151C1A !important;
    font-size:18px !important;
    line-height:1.5 !important;
    letter-spacing:-.012em !important;
  }

  .pkp_page_index .hi_band p:not(.hi_lead):not(.hi_eyebrow){
    margin:0 0 20px !important;
    max-width:none !important;
    color:#44504C !important;
    font-size:13.5px !important;
    line-height:1.62 !important;
  }

  /* Give the end of About a subtle editorial cue without inventing a fake
     clickable link. */
  .pkp_page_index .hi_band::after{
    content:"";
    display:block;
    width:42px;
    height:2px;
    margin-top:27px;
    background:var(--hi-green);
  }

  /* ============================= STRANDS ================================ */

  .pkp_page_index .hi_strands{
    margin:0 !important;
    padding:0 18px 8px !important;
    display:block !important;
    background:#fff !important;
  }

  .pkp_page_index .hi_strands > div{
    padding:23px 0 24px !important;
    border-top:1px solid #DDE5E2 !important;
  }

  .pkp_page_index .hi_strands > div:first-child{
    border-top:1px solid #C9D8D3 !important;
  }

  .pkp_page_index .hi_strands b,
  .pkp_page_index .hi_strands strong{
    margin:0 0 8px !important;
    color:#18201D !important;
    font-size:17px !important;
    line-height:1.28 !important;
  }

  .pkp_page_index .hi_strands span{
    display:block !important;
    color:#4E5B56 !important;
    font-size:13px !important;
    line-height:1.58 !important;
  }

  /* =============================== FACTS ================================ */

  .pkp_page_index .hi_facts{
    margin:0 !important;
    padding:10px 18px 28px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:0 !important;
    background:#fff !important;
    border:0 !important;
  }

  .pkp_page_index .hi_facts > div{
    padding:20px 0 !important;
    border-top:1px solid #DDE5E2 !important;
    border-bottom:0 !important;
  }

  .pkp_page_index .hi_facts b,
  .pkp_page_index .hi_facts strong{
    margin:0 0 6px !important;
    color:#00816A !important;
    font-size:21px !important;
    line-height:1.2 !important;
    font-weight:300 !important;
  }

  .pkp_page_index .hi_facts span{
    color:#46534F !important;
    font-size:13px !important;
    line-height:1.5 !important;
  }

  /* ======================= HOMEPAGE INFORMATION BLOCK =================== */

  .pkp_page_index .pkp_structure_sidebar{
    position:static !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 18px 36px !important;
    background:#fff !important;
  }

  .pkp_page_index .pkp_block{
    display:block !important;
    margin:0 !important;
    padding:22px 0 0 18px !important;
    border-top:1px solid #DCE5E1 !important;
    border-left:3px solid var(--hi-green) !important;
  }

  .pkp_page_index .pkp_block .title{
    margin:0 0 14px !important;
    color:#5D6C67 !important;
    font-size:10.5px !important;
    line-height:1.3 !important;
    letter-spacing:.2em !important;
    text-transform:uppercase !important;
  }

  .pkp_page_index .pkp_block ul{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    gap:10px 22px !important;
    margin:0 !important;
  }

  .pkp_page_index .pkp_block a{
    font-size:13px !important;
  }

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

  /* Preserve approved footer but make its mobile entrance feel deliberate. */
  .pkp_page_index .pkp_structure_footer_wrapper{
    border-top:0 !important;
  }

  .pkp_page_index .hi_footer_grid{
    padding-top:30px !important;
  }
}

@media (max-width:430px){
  .pkp_page_index .hi_hero{
    min-height:495px !important;
  }

  .pkp_page_index .hi_hero .hi_hero_in h1{
    font-size:32px !important;
  }

  .pkp_page_index .hi_hero .hi_sub{
    font-size:14px !important;
  }
}


/* ==========================================================================
   PATCH v21 — MOBILE HOMEPAGE POLISH
   - fixes CTA / artwork-credit collision
   - shortens long vertical content stack
   - turns strands into swipeable editorial cards
   - compacts facts
   - turns Information into an intentional pre-footer quick-links band
   Desktop >= 861px unchanged.
   ========================================================================== */

@media (max-width:860px){

  /* ======================== 1. HERO — NO OVERLAP ========================= */

  .pkp_page_index .hi_hero{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:1fr auto !important;
    align-items:stretch !important;
    min-height:500px !important;
    padding-top:102px !important;
  }

  .pkp_page_index .hi_hero .hi_hero_in{
    grid-column:1 !important;
    grid-row:1 !important;
    align-self:end !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:0 18px 14px !important;
  }

  /* Keep the button in its own clean row. */
  .pkp_page_index .hi_hero .hi_hero_in p:has(> .hi_cta){
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .pkp_page_index .hi_hero .hi_cta,
  .pkp_page_index .hi_cta{
    position:relative !important;
    z-index:2 !important;
    margin:0 !important;
    min-width:176px !important;
    min-height:46px !important;
  }

  /* Credit is a separate grid row below the hero content — it physically
     cannot overlap the CTA anymore. */
  .pkp_page_index .hi_hero .hi_credit{
    grid-column:1 !important;
    grid-row:2 !important;
    align-self:start !important;
    justify-self:stretch !important;
    position:static !important;
    width:auto !important;
    margin:0 !important;
    padding:0 18px 18px !important;
    box-sizing:border-box !important;
    color:rgba(111,213,181,.84) !important;
    font-size:8px !important;
    line-height:1.4 !important;
    letter-spacing:.14em !important;
    text-align:left !important;
    white-space:normal !important;
  }

  /* ======================== 2. ABOUT — CLEANER =========================== */

  .pkp_page_index .hi_band{
    padding:34px 18px 28px !important;
  }

  .pkp_page_index .hi_band .hi_eyebrow{
    margin-bottom:18px !important;
  }

  .pkp_page_index .hi_band p.hi_lead{
    margin-bottom:18px !important;
    font-size:18px !important;
    line-height:1.48 !important;
  }

  .pkp_page_index .hi_band p:not(.hi_lead):not(.hi_eyebrow){
    margin-bottom:0 !important;
    font-size:13px !important;
    line-height:1.6 !important;
  }

  .pkp_page_index .hi_band::after{
    margin-top:23px !important;
  }

  /* ================= 3. STRANDS — HORIZONTAL EDITORIAL CARDS ============ */

  .pkp_page_index .hi_strands{
    display:flex !important;
    flex-direction:row !important;
    gap:12px !important;
    width:100% !important;
    margin:0 !important;
    padding:8px 18px 22px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    box-sizing:border-box !important;
    background:#fff !important;
  }

  .pkp_page_index .hi_strands::-webkit-scrollbar{
    display:none;
  }

  .pkp_page_index .hi_strands > div{
    flex:0 0 78% !important;
    min-width:0 !important;
    scroll-snap-align:start;
    margin:0 !important;
    padding:20px 18px 19px !important;
    border:1px solid #D9E4E0 !important;
    border-top:3px solid var(--hi-green) !important;
    background:#FBFCFC !important;
    box-sizing:border-box !important;
  }

  /* Let a piece of the next card remain visible: clear visual affordance to
     swipe without adding JavaScript or controls. */
  .pkp_page_index .hi_strands > div:last-child{
    margin-right:4px !important;
  }

  .pkp_page_index .hi_strands b,
  .pkp_page_index .hi_strands strong{
    display:block !important;
    margin:0 0 9px !important;
    font-size:16px !important;
    line-height:1.25 !important;
  }

  .pkp_page_index .hi_strands span,
  .pkp_page_index .hi_strands p{
    margin:0 !important;
    font-size:12.5px !important;
    line-height:1.5 !important;
    color:#4D5A55 !important;
  }

  /* ======================= 4. FACTS — COMPACT GRID ======================= */

  .pkp_page_index .hi_facts{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    margin:0 !important;
    padding:0 18px 28px !important;
    background:#fff !important;
  }

  .pkp_page_index .hi_facts > div{
    min-width:0 !important;
    margin:0 !important;
    padding:17px 15px !important;
    border:1px solid #DDE6E2 !important;
    background:#fff !important;
  }

  .pkp_page_index .hi_facts > div:last-child{
    grid-column:1 / -1 !important;
  }

  .pkp_page_index .hi_facts b,
  .pkp_page_index .hi_facts strong{
    display:block !important;
    margin:0 0 6px !important;
    color:#00826B !important;
    font-size:18px !important;
    line-height:1.18 !important;
  }

  .pkp_page_index .hi_facts span,
  .pkp_page_index .hi_facts p{
    margin:0 !important;
    color:#4B5753 !important;
    font-size:11.75px !important;
    line-height:1.42 !important;
  }

  /* ===================== 5. INFORMATION QUICK LINKS ====================== */

  /* It still comes after the homepage content in OJS markup, but now the
     sections above are dramatically shorter and this block is styled as a
     deliberate utility band attached to the footer. */
  .pkp_page_index .pkp_structure_sidebar{
    position:static !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    background:#EFF6F3 !important;
    border:0 !important;
  }

  .pkp_page_index .pkp_structure_sidebar .pkp_block,
  .pkp_page_index .pkp_block{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:22px 18px 23px !important;
    border:0 !important;
    border-top:1px solid #D5E3DE !important;
    box-sizing:border-box !important;
    background:#EFF6F3 !important;
  }

  .pkp_page_index .pkp_block .title{
    margin:0 0 13px !important;
    color:#52655E !important;
    font-size:9.5px !important;
    line-height:1.3 !important;
    letter-spacing:.22em !important;
    text-transform:uppercase !important;
  }

  .pkp_page_index .pkp_block ul{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .pkp_page_index .pkp_block li{
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
  }

  .pkp_page_index .pkp_block a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:39px !important;
    width:100% !important;
    padding:7px 5px !important;
    box-sizing:border-box !important;
    color:#007A64 !important;
    font-size:11.5px !important;
    line-height:1.2 !important;
    text-align:center !important;
    text-decoration:none !important;
    border:1px solid rgba(0,127,101,.20) !important;
    background:rgba(255,255,255,.68) !important;
  }

  .pkp_page_index .pkp_block a:hover,
  .pkp_page_index .pkp_block a:focus-visible{
    color:#fff !important;
    background:#007F65 !important;
    border-color:#007F65 !important;
  }

  /* Footer follows immediately without another visual gap. */
  .pkp_page_index .pkp_structure_footer_wrapper{
    margin-top:0 !important;
    border-top:0 !important;
  }

  /* ========================== 6. RHYTHM FIXES ============================ */

  .pkp_page_index .pkp_structure_main{
    margin:0 !important;
    padding:0 !important;
  }

  .pkp_page_index .additional_content{
    margin:0 !important;
    padding:0 !important;
  }
}

@media (max-width:430px){

  .pkp_page_index .hi_hero{
    min-height:485px !important;
  }

  .pkp_page_index .hi_hero .hi_hero_in h1{
    font-size:31px !important;
    max-width:11ch !important;
  }

  .pkp_page_index .hi_hero .hi_sub{
    font-size:13.5px !important;
    line-height:1.5 !important;
  }

  .pkp_page_index .hi_strands > div{
    flex-basis:82% !important;
  }

  .pkp_page_index .hi_facts{
    grid-template-columns:1fr 1fr !important;
  }
}


/* ==========================================================================
   PATCH v22 — APPROVED MOBILE HOMEPAGE
   Based on the approved editorial mockup:
   - strong full-bleed hero
   - clean About section
   - numbered "Our Approach" rows
   - single compact facts strip
   - "Our Community" links above footer
   - preserves Design 2 working side drawer
   Desktop >= 861px unchanged.
   ========================================================================== */

@media (max-width:860px){

  /* ======================================================================
     HERO
     ====================================================================== */

  .pkp_page_index .hi_hero{
    min-height:505px !important;
    padding-top:100px !important;
    background-position:center 38% !important;
  }

  .pkp_page_index .hi_hero::after{
    background:
      linear-gradient(
        180deg,
        rgba(3,10,8,.12) 0%,
        rgba(3,10,8,.18) 22%,
        rgba(3,10,8,.45) 57%,
        rgba(3,10,8,.88) 100%
      ) !important;
  }

  .pkp_page_index .hi_hero .hi_hero_in{
    padding:0 20px 13px !important;
  }

  .pkp_page_index .hi_hero .hi_kick{
    margin-bottom:13px !important;
    font-size:9px !important;
    letter-spacing:.22em !important;
  }

  .pkp_page_index .hi_hero .hi_hero_in h1{
    max-width:11ch !important;
    margin-bottom:15px !important;
    font-size:33px !important;
    line-height:1.04 !important;
    letter-spacing:-.032em !important;
    font-weight:300 !important;
  }

  .pkp_page_index .hi_hero .hi_sub{
    max-width:30ch !important;
    margin-bottom:20px !important;
    font-size:14px !important;
    line-height:1.52 !important;
  }

  .pkp_page_index .hi_hero .hi_cta,
  .pkp_page_index .hi_cta{
    min-height:46px !important;
    min-width:188px !important;
    padding:0 20px !important;
    background:#008A70 !important;
    font-size:12.75px !important;
    box-shadow:none !important;
  }

  .pkp_page_index .hi_hero .hi_cta::after,
  .pkp_page_index .hi_cta::after{
    content:"→";
    margin-left:15px;
    font-size:18px;
    line-height:1;
    font-weight:300;
  }

  .pkp_page_index .hi_hero .hi_credit{
    padding:0 20px 17px !important;
    font-size:7.8px !important;
    line-height:1.45 !important;
    letter-spacing:.14em !important;
  }


  /* ======================================================================
     ABOUT THE JOURNAL
     ====================================================================== */

  .pkp_page_index .hi_band{
    padding:30px 20px 28px !important;
    background:#fff !important;
  }

  .pkp_page_index .hi_band .hi_eyebrow{
    margin:0 0 18px !important;
    color:#54635E !important;
    font-size:9.5px !important;
    letter-spacing:.22em !important;
  }

  .pkp_page_index .hi_band p.hi_lead{
    margin:0 0 15px !important;
    font-size:17px !important;
    line-height:1.5 !important;
    color:#171E1B !important;
  }

  .pkp_page_index .hi_band p:not(.hi_lead):not(.hi_eyebrow){
    margin:0 !important;
    font-size:12.5px !important;
    line-height:1.58 !important;
    color:#4A5651 !important;
  }

  /* Replace v20/v21 short green ending rule with an editorial full divider. */
  .pkp_page_index .hi_band::after{
    content:"";
    display:block;
    width:100% !important;
    height:1px !important;
    margin:25px 0 0 !important;
    background:#DCE4E1 !important;
  }


  /* ======================================================================
     OUR APPROACH — CLEAN NUMBERED ROWS
     ====================================================================== */

  .pkp_page_index .hi_strands{
    position:relative !important;
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:48px 20px 0 !important;
    overflow:visible !important;
    background:#fff !important;
    box-sizing:border-box !important;
  }

  .pkp_page_index .hi_strands::before{
    content:"OUR APPROACH";
    position:absolute;
    top:20px;
    left:20px;
    color:#485852;
    font-size:9px;
    line-height:1.2;
    font-weight:600;
    letter-spacing:.23em;
  }

  .pkp_page_index .hi_strands{
    counter-reset:hi-approach;
  }

  .pkp_page_index .hi_strands > div{
    counter-increment:hi-approach;
    position:relative !important;
    display:grid !important;
    grid-template-columns:52px minmax(0,1fr) 18px !important;
    gap:10px !important;
    align-items:start !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:17px 0 18px !important;
    border:0 !important;
    border-top:1px solid #DCE4E1 !important;
    background:#fff !important;
    scroll-snap-align:none !important;
    box-sizing:border-box !important;
  }

  .pkp_page_index .hi_strands > div:last-child{
    border-bottom:1px solid #DCE4E1 !important;
    margin-right:0 !important;
  }

  .pkp_page_index .hi_strands > div::before{
    content:counter(hi-approach, decimal-leading-zero);
    grid-column:1;
    grid-row:1 / span 2;
    color:#007F65;
    font-size:29px;
    line-height:1;
    font-weight:300;
    letter-spacing:-.04em;
  }

  .pkp_page_index .hi_strands > div::after{
    content:"›";
    grid-column:3;
    grid-row:1 / span 2;
    align-self:center;
    justify-self:end;
    color:#00856C;
    font-size:26px;
    line-height:1;
    font-weight:300;
  }

  .pkp_page_index .hi_strands b,
  .pkp_page_index .hi_strands strong{
    grid-column:2;
    display:block !important;
    margin:0 0 4px !important;
    color:#19211E !important;
    font-size:15px !important;
    line-height:1.25 !important;
    font-weight:600 !important;
  }

  .pkp_page_index .hi_strands span,
  .pkp_page_index .hi_strands p{
    grid-column:2;
    display:block !important;
    margin:0 !important;
    color:#4C5853 !important;
    font-size:11.75px !important;
    line-height:1.46 !important;
  }


  /* ======================================================================
     FACTS — ONE PALE GREEN INFORMATION STRIP
     ====================================================================== */

  .pkp_page_index .hi_facts{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:0 !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    background:#EDF6F2 !important;
    border:0 !important;
  }

  .pkp_page_index .hi_facts > div,
  .pkp_page_index .hi_facts > div:last-child{
    grid-column:auto !important;
    min-width:0 !important;
    margin:0 !important;
    padding:17px 11px 18px !important;
    border:0 !important;
    border-right:1px solid #D5E5DE !important;
    background:transparent !important;
    box-sizing:border-box !important;
  }

  .pkp_page_index .hi_facts > div:last-child{
    border-right:0 !important;
  }

  .pkp_page_index .hi_facts b,
  .pkp_page_index .hi_facts strong{
    display:block !important;
    margin:0 0 7px !important;
    color:#183029 !important;
    font-size:13px !important;
    line-height:1.2 !important;
    font-weight:600 !important;
  }

  .pkp_page_index .hi_facts span,
  .pkp_page_index .hi_facts p{
    display:block !important;
    margin:0 !important;
    color:#4D5C56 !important;
    font-size:9.6px !important;
    line-height:1.42 !important;
  }

  /* Small line icons using OJS' existing Font Awesome asset. */
  .pkp_page_index .hi_facts > div::before{
    display:block;
    margin-bottom:8px;
    color:#007F65;
    font-family:FontAwesome;
    font-size:18px;
    line-height:1;
    font-weight:normal;
  }

  .pkp_page_index .hi_facts > div:nth-child(1)::before{
    content:"\f0c0"; /* users */
  }

  .pkp_page_index .hi_facts > div:nth-child(2)::before{
    content:"\f073"; /* calendar */
  }

  .pkp_page_index .hi_facts > div:nth-child(3)::before{
    content:"\f09c"; /* unlock */
  }


  /* ======================================================================
     INFORMATION -> OUR COMMUNITY
     ====================================================================== */

  .pkp_page_index .pkp_structure_sidebar{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
    border:0 !important;
  }

  .pkp_page_index .pkp_structure_sidebar .pkp_block,
  .pkp_page_index .pkp_block{
    width:100% !important;
    margin:0 !important;
    padding:21px 20px 22px !important;
    background:#fff !important;
    border:0 !important;
    box-sizing:border-box !important;
  }

  /* Keep the accessible original title in DOM but visually present the
     approved label. */
  .pkp_page_index .pkp_block .title{
    margin:0 0 14px !important;
    color:#43554E !important;
    font-size:0 !important;
    line-height:1 !important;
    letter-spacing:0 !important;
  }

  .pkp_page_index .pkp_block .title::after{
    content:"OUR COMMUNITY";
    color:#43554E;
    font-size:9px;
    line-height:1.2;
    font-weight:600;
    letter-spacing:.23em;
  }

  .pkp_page_index .pkp_block ul{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:0 !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .pkp_page_index .pkp_block li{
    position:relative;
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 9px !important;
    border-right:1px solid #DCE5E1 !important;
  }

  .pkp_page_index .pkp_block li:first-child{
    padding-left:0 !important;
  }

  .pkp_page_index .pkp_block li:last-child{
    padding-right:0 !important;
    border-right:0 !important;
  }

  .pkp_page_index .pkp_block a{
    display:block !important;
    width:100% !important;
    min-height:0 !important;
    padding:0 !important;
    color:#007760 !important;
    font-size:10.75px !important;
    line-height:1.3 !important;
    font-weight:500 !important;
    text-align:left !important;
    background:transparent !important;
    border:0 !important;
    text-decoration:none !important;
  }

  .pkp_page_index .pkp_block a::before{
    display:block;
    margin-bottom:7px;
    color:#00826A;
    font-family:FontAwesome;
    font-size:18px;
    line-height:1;
    font-weight:normal;
  }

  .pkp_page_index .pkp_block li:nth-child(1) a::before{
    content:"\f02d"; /* book */
  }

  .pkp_page_index .pkp_block li:nth-child(2) a::before{
    content:"\f044"; /* edit */
  }

  .pkp_page_index .pkp_block li:nth-child(3) a::before{
    content:"\f19c"; /* institution */
  }

  .pkp_page_index .pkp_block a:hover,
  .pkp_page_index .pkp_block a:focus-visible{
    color:#005E4D !important;
    background:transparent !important;
    text-decoration:underline !important;
  }


  /* ======================================================================
     FOOTER — TIGHTER MOBILE ENTRY
     ====================================================================== */

  .pkp_page_index .pkp_structure_footer_wrapper{
    margin:0 !important;
    border-top:0 !important;
  }

  .pkp_page_index .hi_footer_grid{
    padding-top:27px !important;
  }

  .pkp_page_index .hi_footer_brand{
    padding-bottom:17px !important;
  }

  /* ======================================================================
     SAFETY / OVERFLOW
     ====================================================================== */

  .pkp_page_index,
  .pkp_page_index .pkp_structure_page,
  .pkp_page_index .pkp_structure_content,
  .pkp_page_index .pkp_structure_main,
  .pkp_page_index .additional_content{
    max-width:100% !important;
    overflow-x:hidden !important;
  }
}

@media (max-width:430px){

  .pkp_page_index .hi_hero{
    min-height:495px !important;
  }

  .pkp_page_index .hi_hero .hi_hero_in h1{
    font-size:31px !important;
  }

  .pkp_page_index .hi_strands > div{
    grid-template-columns:46px minmax(0,1fr) 16px !important;
  }

  .pkp_page_index .hi_strands > div::before{
    font-size:27px !important;
  }

  .pkp_page_index .hi_facts b,
  .pkp_page_index .hi_facts strong{
    font-size:12px !important;
  }

  .pkp_page_index .hi_facts span,
  .pkp_page_index .hi_facts p{
    font-size:9px !important;
  }

  .pkp_page_index .pkp_block a{
    font-size:10px !important;
  }
}


/* ==========================================================================
   PATCH v26 — DESKTOP-SAFE COMMUNITY + MOBILE HERO
   - Desktop remains exactly in its original layout.
   - Custom Our Community block is hidden on desktop.
   - Custom Our Community block appears only on mobile after About.
   - Original OJS Information sidebar remains on desktop.
   - Original OJS Information sidebar hides only on mobile when the custom
     community block exists.
   - Artwork credit stays INSIDE hero, preserving desktop placement.
   ========================================================================== */

/* Never show the custom community block on desktop. */
.hi_community {
  display:none;
}

@media (max-width:860px) {

  /* ======================================================================
     HERO — DARKER ARTWORK, TEXT ABOVE OVERLAY
     ====================================================================== */

  body.pkp_page_index .hi_hero {
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;
    background-color:rgba(0,0,0,.32) !important;
    background-blend-mode:multiply !important;
  }

  body.pkp_page_index .hi_hero::after {
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,.28) 0%,
        rgba(0,0,0,.34) 30%,
        rgba(0,0,0,.50) 62%,
        rgba(0,0,0,.72) 100%
      ) !important;
  }

  body.pkp_page_index .hi_hero .hi_hero_in,
  body.pkp_page_index .hi_hero .hi_credit {
    position:relative !important;
    z-index:2 !important;
  }

  body.pkp_page_index .hi_hero .hi_kick {
    color:rgba(255,255,255,.88) !important;
    text-shadow:0 1px 8px rgba(0,0,0,.55) !important;
  }

  body.pkp_page_index .hi_hero .hi_hero_in h1 {
    color:#fff !important;
    text-shadow:0 2px 18px rgba(0,0,0,.58) !important;
  }

  body.pkp_page_index .hi_hero .hi_sub {
    color:rgba(255,255,255,.96) !important;
    text-shadow:0 1px 12px rgba(0,0,0,.58) !important;
  }

  /* CTA stays in normal flow. */
  body.pkp_page_index .hi_hero .hi_hero_in p:has(> .hi_cta) {
    display:block !important;
    position:static !important;
    width:100% !important;
    margin:20px 0 0 !important;
    padding:0 !important;
  }

  body.pkp_page_index .hi_hero .hi_cta,
  body.pkp_page_index .hi_cta {
    position:static !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    min-height:46px !important;
    min-width:188px !important;
    margin:0 !important;
    padding:0 18px !important;
    transform:none !important;
    background:#008B70 !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.13) !important;
    box-sizing:border-box !important;
  }

  /* Credit stays INSIDE the hero but occupies its own row below CTA. */
  body.pkp_page_index .hi_hero .hi_credit {
    display:block !important;
    position:relative !important;
    inset:auto !important;
    float:none !important;
    clear:both !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:8px 18px 12px !important;
    transform:none !important;
    box-sizing:border-box !important;
    background:rgba(0,0,0,.30) !important;
    color:rgba(103,215,180,.88) !important;
    font-size:7.5px !important;
    line-height:1.35 !important;
    letter-spacing:.13em !important;
    text-align:left !important;
    text-transform:uppercase !important;
    white-space:normal !important;
  }


  /* ======================================================================
     CUSTOM OUR COMMUNITY — MOBILE ONLY
     ====================================================================== */

  body.pkp_page_index .hi_community {
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:21px 20px 22px !important;
    box-sizing:border-box !important;
    background:#F1F7F4 !important;
    border-top:1px solid #D7E4DF !important;
    border-bottom:1px solid #D7E4DF !important;
  }

  body.pkp_page_index .hi_community_title {
    margin:0 0 14px !important;
    color:#43554E !important;
    font-size:9px !important;
    line-height:1.2 !important;
    font-weight:600 !important;
    letter-spacing:.23em !important;
    text-transform:uppercase !important;
  }

  body.pkp_page_index .hi_community_links {
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:0 !important;
    width:100% !important;
  }

  body.pkp_page_index .hi_community_links a {
    display:block !important;
    min-width:0 !important;
    padding:3px 10px !important;
    color:#00745E !important;
    font-size:10.5px !important;
    line-height:1.3 !important;
    font-weight:500 !important;
    text-align:left !important;
    text-decoration:none !important;
    border-right:1px solid #CEDDD7 !important;
  }

  body.pkp_page_index .hi_community_links a:first-child {
    padding-left:0 !important;
  }

  body.pkp_page_index .hi_community_links a:last-child {
    padding-right:0 !important;
    border-right:0 !important;
  }

  body.pkp_page_index .hi_community_links a::before {
    display:block !important;
    margin-bottom:7px !important;
    color:#00826A !important;
    font-family:FontAwesome !important;
    font-size:17px !important;
    line-height:1 !important;
    font-weight:normal !important;
  }

  body.pkp_page_index .hi_community_links a:nth-child(1)::before {
    content:"\f02d";
  }

  body.pkp_page_index .hi_community_links a:nth-child(2)::before {
    content:"\f044";
  }

  body.pkp_page_index .hi_community_links a:nth-child(3)::before {
    content:"\f19c";
  }

  /* Hide ONLY the original mobile Information sidebar when our mobile
     community block exists. Desktop is unaffected because this rule is
     inside the mobile media query. */
  body.pkp_page_index:has(.hi_community) .pkp_structure_sidebar {
    display:none !important;
  }


  /* ======================================================================
     WIDTH SAFETY
     ====================================================================== */

  body.pkp_page_index .hi_hero,
  body.pkp_page_index .hi_band,
  body.pkp_page_index .hi_community,
  body.pkp_page_index .hi_strands,
  body.pkp_page_index .hi_facts {
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
}

@media (max-width:430px) {
  body.pkp_page_index .hi_community {
    padding-left:18px !important;
    padding-right:18px !important;
  }

  body.pkp_page_index .hi_community_links a {
    padding-left:8px !important;
    padding-right:8px !important;
    font-size:10px !important;
  }
}


/* ==========================================================================
   PATCH v27 — RESTORE DESKTOP ACCOUNT / PROFILE MENU
   The mobile drawer patches later in the cascade forced .pkp_site_nav_menu
   to display:block at desktop widths. That defeated the original flex header
   and pushed the logged-in account control out of the visible header.
   Mobile <= 860px is untouched.
   ========================================================================== */

@media (min-width:861px){

  /* Restore the approved desktop header row. */
  .pkp_structure_head .pkp_head_wrapper{
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
  }

  .pkp_structure_head .pkp_site_name_wrapper{
    flex:0 0 auto !important;
    width:auto !important;
    max-width:300px !important;
  }

  /* This MUST be flex on desktop. Earlier mobile state patches changed it to
     block, which is what made the account disappear. */
  .pkp_structure_head .pkp_site_nav_menu,
  .pkp_structure_head .pkp_site_nav_menu.pkp_site_nav_menu--isOpen{
    display:flex !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    width:auto !important;
    max-width:none !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex-wrap:nowrap !important;
    gap:18px !important;
    position:static !important;
    overflow:visible !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .pkp_structure_head .pkp_navigation_primary_row,
  .pkp_structure_head .pkp_navigation_primary_wrapper{
    display:flex !important;
    flex:0 1 auto !important;
    min-width:0 !important;
    width:auto !important;
    max-width:none !important;
    align-items:center !important;
    margin:0 !important;
    padding:0 !important;
  }

  .pkp_structure_head .pkp_navigation_primary{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:18px !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
  }

  .pkp_structure_head .pkp_navigation_primary > li{
    display:block !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
  }

  .pkp_structure_head .pkp_navigation_primary > li > a{
    width:auto !important;
    white-space:nowrap !important;
  }

  .pkp_structure_head .pkp_navigation_search_wrapper{
    flex:0 0 auto !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
  }

  /* Explicitly restore the logged-in account area. */
  .pkp_structure_head .pkp_head_wrapper .pkp_navigation_user_wrapper{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    position:static !important;
    flex:0 0 auto !important;
    width:auto !important;
    max-width:none !important;
    height:auto !important;
    margin:0 !important;
    padding:0 0 0 18px !important;
    align-items:center !important;
    border:0 !important;
    border-left:1px solid rgba(255,255,255,.28) !important;
    background:transparent !important;
    transform:none !important;
  }

  .pkp_structure_head .pkp_navigation_user{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
  }

  .pkp_structure_head .pkp_navigation_user > li{
    display:block !important;
    position:relative !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
  }

  .pkp_structure_head .pkp_navigation_user > li > a{
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    width:auto !important;
    padding:0 !important;
    color:#fff !important;
    font-size:14px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    background:transparent !important;
    border:0 !important;
  }

  .pkp_structure_head .pkp_navigation_user > li > a .task_count{
    display:inline-block !important;
    min-width:26px !important;
    width:26px !important;
    height:26px !important;
    margin-left:2px !important;
    border-radius:999px !important;
    line-height:26px !important;
    text-align:center !important;
    background:rgba(255,255,255,.14) !important;
    color:#fff !important;
    font-size:13px !important;
  }

  /* Restore the normal desktop dropdown instead of the mobile inline actions. */
  .pkp_structure_head .pkp_navigation_user > li > ul,
  .pkp_structure_head .pkp_navigation_user > li > .dropdown-menu{
    position:absolute !important;
    top:calc(100% + 12px) !important;
    right:0 !important;
    left:auto !important;
    width:auto !important;
    min-width:210px !important;
    margin:0 !important;
    padding:8px 0 !important;
    background:#0E1A16 !important;
    border:0 !important;
    box-shadow:0 14px 38px -12px rgba(0,0,0,.60) !important;
    z-index:10020 !important;
  }

  .pkp_structure_head .pkp_navigation_user ul li,
  .pkp_structure_head .pkp_navigation_user .dropdown-menu li{
    display:block !important;
    width:100% !important;
    margin:0 !important;
  }

  .pkp_structure_head .pkp_navigation_user ul li + li::before,
  .pkp_structure_head .pkp_navigation_user .dropdown-menu li + li::before{
    content:none !important;
    display:none !important;
  }

  .pkp_structure_head .pkp_navigation_user ul a,
  .pkp_structure_head .pkp_navigation_user .dropdown-menu a{
    display:block !important;
    width:100% !important;
    padding:10px 18px !important;
    box-sizing:border-box !important;
    color:#E6EDEA !important;
    font-size:14px !important;
    line-height:1.35 !important;
    white-space:nowrap !important;
    background:transparent !important;
  }

  .pkp_structure_head .pkp_navigation_user ul a:hover,
  .pkp_structure_head .pkp_navigation_user ul a:focus-visible,
  .pkp_structure_head .pkp_navigation_user .dropdown-menu a:hover,
  .pkp_structure_head .pkp_navigation_user .dropdown-menu a:focus-visible{
    color:#fff !important;
    background:rgba(0,127,101,.22) !important;
  }
}

/* Slightly tighten the desktop header before it reaches the mobile breakpoint
   so Search + account never get pushed out on smaller laptops. */
@media (min-width:861px) and (max-width:1180px){
  .pkp_structure_head .pkp_site_nav_menu{
    gap:12px !important;
  }

  .pkp_structure_head .pkp_navigation_primary{
    gap:12px !important;
  }

  .pkp_structure_head .pkp_head_wrapper .pkp_navigation_user_wrapper{
    padding-left:12px !important;
  }

  .pkp_structure_head .pkp_navigation_primary > li > a,
  .pkp_structure_head .pkp_navigation_search_wrapper a,
  .pkp_structure_head .pkp_navigation_user > li > a{
    font-size:13px !important;
  }
}


/* ==========================================================================
   PATCH v28 — MOBILE INNER-PAGE REFINEMENT
   Scope:
   - MOBILE ONLY (<= 860px)
   - NON-HOMEPAGE ONLY
   - Does NOT change desktop
   - Does NOT change the approved homepage
   - Does NOT change the approved mobile drawer
   ========================================================================== */

@media (max-width: 860px) {

  /* ------------------------------------------------------------------------
     1. INNER PAGE FOUNDATION
     ------------------------------------------------------------------------ */

  body:not(.pkp_page_index) .pkp_structure_content,
  body:not(.pkp_page_index) .pkp_structure_main {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body:not(.pkp_page_index) .pkp_structure_main {
    padding: 0 !important;
    background: #fff !important;
  }

  body:not(.pkp_page_index) .pkp_structure_main > .page {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 34px 18px 42px !important;
    box-sizing: border-box !important;
    background: #fff !important;
  }

  /* Keep long text readable instead of feeling like squeezed desktop copy. */
  body:not(.pkp_page_index) .pkp_structure_main .page p,
  body:not(.pkp_page_index) .pkp_structure_main .page li {
    font-size: 14.5px !important;
    line-height: 1.72 !important;
  }

  body:not(.pkp_page_index) .pkp_structure_main .page p {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
  }

  body:not(.pkp_page_index) .pkp_structure_main .page a {
    text-underline-offset: 2px !important;
  }


  /* ------------------------------------------------------------------------
     2. BREADCRUMBS + PAGE TITLES
     ------------------------------------------------------------------------ */

  body:not(.pkp_page_index) .cmp_breadcrumbs {
    margin: 0 0 28px !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  body:not(.pkp_page_index) .cmp_breadcrumbs ol,
  body:not(.pkp_page_index) .cmp_breadcrumbs ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:not(.pkp_page_index) .cmp_breadcrumbs a {
    color: #007C66 !important;
  }

  body:not(.pkp_page_index) .pkp_structure_main .page > h1,
  body:not(.pkp_page_index) .pkp_structure_main .page h1 {
    position: relative !important;
    margin: 0 0 30px !important;
    padding: 0 0 17px !important;
    color: #18211E !important;
    font-size: clamp(29px, 8vw, 36px) !important;
    line-height: 1.06 !important;
    font-weight: 300 !important;
    letter-spacing: -.025em !important;
  }

  body:not(.pkp_page_index) .pkp_structure_main .page > h1::after,
  body:not(.pkp_page_index) .pkp_structure_main .page h1::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 42px !important;
    height: 2px !important;
    background: #00866C !important;
  }


  /* ------------------------------------------------------------------------
     3. SECTION TYPOGRAPHY — ABOUT / GUIDELINES / SUBMISSIONS
     ------------------------------------------------------------------------ */

  body:not(.pkp_page_index) .pkp_structure_main .page h2,
  body:not(.pkp_page_index) .pkp_structure_main .page h3 {
    color: #26332E !important;
    font-weight: 650 !important;
    letter-spacing: -.01em !important;
  }

  body:not(.pkp_page_index) .pkp_structure_main .page h2 {
    position: relative !important;
    margin: 34px 0 14px !important;
    padding: 17px 0 0 16px !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    border-top: 1px solid #DCE6E2 !important;
  }

  body:not(.pkp_page_index) .pkp_structure_main .page h2::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 17px !important;
    width: 3px !important;
    height: 23px !important;
    border-radius: 3px !important;
    background: #00866C !important;
  }

  body:not(.pkp_page_index) .pkp_structure_main .page h3 {
    margin: 28px 0 12px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  body:not(.pkp_page_index) .pkp_structure_main .page strong {
    color: #26332E !important;
  }

  /* Prevent the first content heading from getting a redundant top rule. */
  body:not(.pkp_page_index) .pkp_structure_main .page > h1 + h2,
  body:not(.pkp_page_index) .pkp_structure_main .page .cmp_breadcrumbs + h1 + h2 {
    margin-top: 0 !important;
  }


  /* ------------------------------------------------------------------------
     4. ABOUT THE JOURNAL
     ------------------------------------------------------------------------ */

  body.pkp_page_about.pkp_op_index .page_about {
    padding-bottom: 48px !important;
  }

  body.pkp_page_about.pkp_op_index .page_about > p,
  body.pkp_page_about.pkp_op_index .page_about section > p {
    color: #3A4742 !important;
  }

  body.pkp_page_about.pkp_op_index .page_about em {
    color: #26332E !important;
  }

  body.pkp_page_about.pkp_op_index .page_about h2 + p,
  body.pkp_page_about.pkp_op_index .page_about h3 + p {
    margin-top: 0 !important;
  }


  /* ------------------------------------------------------------------------
     5. EDITORIAL TEAM — PROFILE-CARD FEEL WITHOUT CHANGING OJS HTML
     ------------------------------------------------------------------------ */

  body.pkp_page_about.pkp_op_editorialTeam .page_editorial_team,
  body.pkp_page_about.pkp_op_editorialTeam .page_editorialTeam {
    padding-bottom: 50px !important;
  }

  body.pkp_page_about.pkp_op_editorialTeam .page img {
    display: block !important;
    width: 88px !important;
    height: 88px !important;
    max-width: 88px !important;
    object-fit: cover !important;
    margin: 0 0 14px !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 5px #EEF6F3 !important;
  }

  body.pkp_page_about.pkp_op_editorialTeam .page p:has(> img) {
    margin: 30px 0 15px !important;
  }

  body.pkp_page_about.pkp_op_editorialTeam .page p:has(> img):first-of-type {
    margin-top: 4px !important;
  }

  /* The common OJS editorial layout is image paragraph + biography paragraph. */
  body.pkp_page_about.pkp_op_editorialTeam .page p:has(> img) + p {
    margin: 0 !important;
    padding: 0 0 28px !important;
    border-bottom: 1px solid #DCE6E2 !important;
    color: #3B4843 !important;
  }

  body.pkp_page_about.pkp_op_editorialTeam .page p:has(> img) + p strong:first-child {
    display: inline !important;
    color: #006F59 !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
  }


  /* ------------------------------------------------------------------------
     6. AUTHOR GUIDELINES — SCANNABLE ARTICLE SECTIONS
     ------------------------------------------------------------------------ */

  body.pkp_page_Submissions.pkp_op_Author_Guidelines .page,
  body.pkp_page_submissions.pkp_op_Author_Guidelines .page,
  body.pkp_page_Submissions.pkp_op_authorGuidelines .page {
    padding-bottom: 50px !important;
  }

  body.pkp_page_Submissions.pkp_op_Author_Guidelines .page h2,
  body.pkp_page_Submissions.pkp_op_Author_Guidelines .page h3,
  body.pkp_page_submissions.pkp_op_Author_Guidelines .page h2,
  body.pkp_page_submissions.pkp_op_Author_Guidelines .page h3 {
    scroll-margin-top: 90px !important;
  }

  body.pkp_page_Submissions.pkp_op_Author_Guidelines .page ul,
  body.pkp_page_Submissions.pkp_op_Author_Guidelines .page ol,
  body.pkp_page_submissions.pkp_op_Author_Guidelines .page ul,
  body.pkp_page_submissions.pkp_op_Author_Guidelines .page ol {
    margin: 12px 0 24px !important;
    padding-left: 22px !important;
  }

  body.pkp_page_Submissions.pkp_op_Author_Guidelines .page li,
  body.pkp_page_submissions.pkp_op_Author_Guidelines .page li {
    margin-bottom: 9px !important;
  }


  /* ------------------------------------------------------------------------
     7. SUBMISSIONS — CTA + CHECKLIST CARDS
     ------------------------------------------------------------------------ */

  body.pkp_page_about.pkp_op_submissions .cmp_notification,
  body.pkp_page_Submissions .cmp_notification,
  body.pkp_page_submissions .cmp_notification {
    position: relative !important;
    margin: 0 0 30px !important;
    padding: 17px 17px 17px 20px !important;
    border: 0 !important;
    border-left: 4px solid #00866C !important;
    border-radius: 0 10px 10px 0 !important;
    background: #EEF6F3 !important;
    box-shadow: none !important;
  }

  body.pkp_page_about.pkp_op_submissions .cmp_notification p,
  body.pkp_page_Submissions .cmp_notification p,
  body.pkp_page_submissions .cmp_notification p {
    margin: 0 !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }

  body.pkp_page_about.pkp_op_submissions .cmp_notification a,
  body.pkp_page_Submissions .cmp_notification a,
  body.pkp_page_submissions .cmp_notification a {
    color: #006F59 !important;
    font-weight: 650 !important;
  }

  body.pkp_page_about.pkp_op_submissions .submission_checklist,
  body.pkp_page_Submissions .submission_checklist,
  body.pkp_page_submissions .submission_checklist {
    margin-top: 22px !important;
  }

  body.pkp_page_about.pkp_op_submissions .submission_checklist ul,
  body.pkp_page_Submissions .submission_checklist ul,
  body.pkp_page_submissions .submission_checklist ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border: 0 !important;
  }

  body.pkp_page_about.pkp_op_submissions .submission_checklist li,
  body.pkp_page_Submissions .submission_checklist li,
  body.pkp_page_submissions .submission_checklist li {
    position: relative !important;
    margin: 0 0 11px !important;
    padding: 16px 15px 16px 42px !important;
    border: 1px solid #DDE7E3 !important;
    border-radius: 9px !important;
    background: #FBFDFC !important;
    font-size: 12.8px !important;
    line-height: 1.55 !important;
  }

  body.pkp_page_about.pkp_op_submissions .submission_checklist li::before,
  body.pkp_page_Submissions .submission_checklist li::before,
  body.pkp_page_submissions .submission_checklist li::before {
    content: "✓" !important;
    position: absolute !important;
    left: 15px !important;
    top: 15px !important;
    color: #00866C !important;
    font-size: 18px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
  }


  /* ------------------------------------------------------------------------
     8. SEARCH — CLEAN MOBILE FILTER PANEL
     ------------------------------------------------------------------------ */

  body.pkp_page_search .page_search form,
  body.pkp_page_search .page_search .cmp_form {
    width: 100% !important;
    max-width: none !important;
  }

  body.pkp_page_search .page_search input[type="text"],
  body.pkp_page_search .page_search input[type="search"],
  body.pkp_page_search .page_search select {
    width: 100% !important;
    min-width: 0 !important;
    height: 45px !important;
    padding: 0 12px !important;
    border: 1px solid #C9D7D2 !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 13px !important;
  }

  body.pkp_page_search .page_search input:focus,
  body.pkp_page_search .page_search select:focus {
    outline: 2px solid rgba(0,134,108,.16) !important;
    outline-offset: 1px !important;
    border-color: #00866C !important;
  }

  body.pkp_page_search .page_search button,
  body.pkp_page_search .page_search .submit button,
  body.pkp_page_search .page_search input[type="submit"] {
    min-height: 46px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: #00866C !important;
    color: #fff !important;
    font-weight: 650 !important;
    box-shadow: none !important;
  }

  body.pkp_page_search .page_search fieldset {
    margin: 22px 0 0 !important;
    padding: 20px 16px 18px !important;
    border: 1px solid #D9E5E0 !important;
    border-radius: 10px !important;
    background: #F6FAF8 !important;
  }

  body.pkp_page_search .page_search fieldset legend {
    padding: 0 8px !important;
    color: #41524B !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
  }

  body.pkp_page_search .page_search label {
    display: block !important;
    margin: 0 0 7px !important;
    color: #2D3B36 !important;
    font-size: 12px !important;
    font-weight: 650 !important;
  }

  /* OJS date controls: keep 3 columns, but make them proportionate and tidy. */
  body.pkp_page_search .page_search fieldset .date_range,
  body.pkp_page_search .page_search fieldset .date {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
  }

  body.pkp_page_search .page_search fieldset > div,
  body.pkp_page_search .page_search .search_advanced > div {
    margin-bottom: 18px !important;
  }

  body.pkp_page_search .page_search fieldset > div:last-child,
  body.pkp_page_search .page_search .search_advanced > div:last-child {
    margin-bottom: 0 !important;
  }


  /* ------------------------------------------------------------------------
     9. CURRENT ISSUE / EMPTY STATES
     ------------------------------------------------------------------------ */

  body.pkp_page_issue .page_issue > p,
  body.pkp_page_issue .page_issue .cmp_notification,
  body.pkp_page_issue .page_issue .obj_issue_summary,
  body.pkp_page_issue .page_issue_archive > p {
    padding: 18px !important;
    border-left: 4px solid #00866C !important;
    border-radius: 0 9px 9px 0 !important;
    background: #F3F7F5 !important;
  }


  /* ------------------------------------------------------------------------
     10. MOBILE INFORMATION SIDEBAR ON NON-HOMEPAGE PAGES
     Keep it compact and intentional rather than a desktop sidebar squeezed
     below the article.
     ------------------------------------------------------------------------ */

  body:not(.pkp_page_index) .pkp_structure_sidebar {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 22px 18px 24px !important;
    box-sizing: border-box !important;
    border-top: 1px solid #DCE6E2 !important;
    background: #F6FAF8 !important;
  }

  body:not(.pkp_page_index) .pkp_structure_sidebar .pkp_block {
    margin: 0 !important;
    padding: 0 0 0 15px !important;
    border-left: 3px solid #00866C !important;
  }

  body:not(.pkp_page_index) .pkp_structure_sidebar .title {
    margin: 0 0 12px !important;
    color: #43554E !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: .19em !important;
    text-transform: uppercase !important;
  }

  body:not(.pkp_page_index) .pkp_structure_sidebar .content {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  body:not(.pkp_page_index) .pkp_structure_sidebar .content a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid #D2E1DB !important;
    border-radius: 5px !important;
    background: #fff !important;
    color: #00745E !important;
    font-size: 11px !important;
    text-decoration: none !important;
  }


  /* ------------------------------------------------------------------------
     11. EDIT LINKS — MAKE THEM SUBTLE
     ------------------------------------------------------------------------ */

  body:not(.pkp_page_index) .pkp_structure_main .page .cmp_edit_link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 0 12px !important;
    color: #00745E !important;
    font-size: 11px !important;
  }


  /* ------------------------------------------------------------------------
     12. TABLE / EMBED SAFETY
     ------------------------------------------------------------------------ */

  body:not(.pkp_page_index) .pkp_structure_main table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body:not(.pkp_page_index) .pkp_structure_main img,
  body:not(.pkp_page_index) .pkp_structure_main iframe,
  body:not(.pkp_page_index) .pkp_structure_main video {
    max-width: 100% !important;
  }
}


/* Extra tightening for phones around iPhone 12/13 width. */
@media (max-width: 430px) {

  body:not(.pkp_page_index) .pkp_structure_main > .page {
    padding-left: 17px !important;
    padding-right: 17px !important;
  }

  body:not(.pkp_page_index) .pkp_structure_main .page > h1,
  body:not(.pkp_page_index) .pkp_structure_main .page h1 {
    font-size: 29px !important;
  }

  body:not(.pkp_page_index) .pkp_structure_main .page p,
  body:not(.pkp_page_index) .pkp_structure_main .page li {
    font-size: 14px !important;
  }

  body.pkp_page_search .page_search fieldset {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  body:not(.pkp_page_index) .pkp_structure_sidebar {
    padding-left: 17px !important;
    padding-right: 17px !important;
  }
}