/* ================================================================
   AVGCXR JOURNAL — CORPORATE PREMIUM THEME
   International Journal of AVGC-XR Design
   
   Typography   : Montserrat (Google Fonts)
   Primary Blue : #0057B8  — Deep Corporate Blue (AVGCXR Logo)
   White        : #FFFFFF
   
   Load order: Registered AFTER styles/index.less in
   DefaultThemePlugin.php so all rules cascade safely on top
   without touching the compiled LESS output.
   ================================================================ */


/* ================================================================
   SECTION 0  —  GOOGLE FONTS
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');


/* ================================================================
   SECTION 1  —  DESIGN TOKENS
   ================================================================ */
:root {
  /* ── Corporate Blue Palette (extracted from AVGCXR logo blue segment) ── */
  --cb:              #0057B8;   /* Primary — Deep Corporate Blue             */
  --cb-dark:         #003D82;   /* Darkened — hover / pressed states         */
  --cb-mid:          #1A6FCC;   /* Mid-tone — interactive elements           */
  --cb-light:        #E8F0FB;   /* Tint — backgrounds, focus rings           */
  --cb-glow:         rgba(0, 87, 184, 0.18);

  /* ── Neutrals ── */
  --white:           #FFFFFF;
  --off-white:       #F7F9FC;
  --gray-50:         #F9FAFB;
  --gray-100:        #F3F4F6;
  --gray-200:        #E5E7EB;
  --gray-300:        #D1D5DB;
  --gray-400:        #9CA3AF;
  --gray-600:        #4B5563;
  --gray-700:        #374151;
  --gray-800:        #1F2937;
  --dark:            #0B1729;   /* Near-black with deep blue tint            */

  /* ── Typography ── */
  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* ── Layout ── */
  --container:       1400px;   /* matches corporate header-footer.css max-width */
  --container-w:     90%;      /* matches corporate header-footer.css width: 90% */
  --header-h:        70px;
  --topbar-h:        34px;

  /* ── Borders & Radii ── */
  --r-xs:            3px;
  --r-sm:            6px;
  --r:               10px;
  --r-lg:            14px;
  --r-xl:            18px;

  /* ── Shadows ── */
  --s-xs:  0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
  --s-sm:  0 2px 8px  rgba(0,0,0,0.09);
  --s:     0 4px 18px rgba(0,0,0,0.11);
  --s-lg:  0 8px 32px rgba(0,0,0,0.14);
  --s-xl:  0 16px 48px rgba(0,0,0,0.18);
  --s-blue: 0 4px 20px rgba(0, 87, 184, 0.28);

  /* ── Transitions ── */
  --t:    0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --t-f:  0.15s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Research / Homepage brand palette ── */
  --research-heading:  #4A0D10;             /* All homepage section headings */
  --research-border:   #F3D8D8;             /* Card / table borders          */
  --research-border-row: #FAE8E8;           /* Row separator (lighter tint)  */
  --research-text:     #555555;             /* Body value text               */
  --research-label:    #222222;             /* Table label text              */
  --research-card-bg:  #FFFFFF;             /* Card background               */
  --research-cta:      #BF2229;             /* Submit / CTA button           */
  --research-cta-dark: #9E1B21;             /* CTA button hover              */
  --research-icon-bg:  #FDEAEA;             /* Circular icon container fill  */
  --research-icon-bg-hover: #F9D0D3;        /* Icon container hover          */

  /* ── Shared homepage section heading size ── */
  --section-h2:  clamp(2.2rem, 3.8vw, 2.8125rem); /* 45px at desktop (2.8125 × 16) */
}


/* ================================================================
   SECTION 2  —  GLOBAL BASE RESETS
   ================================================================ */
html,
body {
  font-family: var(--font) !important;
  background:  var(--off-white) !important;
  color:       var(--gray-800) !important;
  -webkit-font-smoothing:  antialiased !important;
  -moz-osx-font-smoothing: grayscale   !important;
  scroll-behavior: smooth !important;
  /* Prevent horizontal scroll bleed */
  width:        100% !important;
  max-width:    100vw !important;
  overflow-x:   hidden !important;
  box-sizing:   border-box !important;
}

/* ── Body offset for fixed header ────────────────────────────────────────
   The header is position:fixed, so without this the top of every page
   sits hidden underneath the 85px header bar. We push all body content
   down by exactly --header-h so nothing is clipped.
   The homepage hero overrides this to 0 (hero sits flush under the
   transparent header, just like avgcxrsolutions.com).
──────────────────────────────────────────────────────────────────────── */
body {
  padding-top: var(--header-h) !important;
}

/* Homepage: hero starts below the fixed header — body gets the same
   padding-top offset as every other page so content is never hidden
   underneath the 85px fixed bar. */
body.pkp_page_index {
  padding-top: var(--header-h) !important;
}

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

img {
  max-width: 100%;
  height: auto;
}

/* Global link colour */
a {
  color: var(--cb) !important;
  transition: color var(--t-f) !important;
}
a:hover,
a:focus {
  color: var(--cb-dark) !important;
}

/* ================================================================
   SECTION 2A  —  SKIP LINKS  (visually hidden, keyboard accessible)
   Source: templates/frontend/components/skipLinks.tpl
   Why: The links ARE required for accessibility (WCAG 2.4.1 — bypass
   blocks). We visually hide them off-screen so sighted users never
   see them, but keyboard users reach them via Tab and they snap into
   view on :focus.
   ================================================================ */
.cmp_skip_to_content {
  position:   absolute !important;
  top:        0        !important;
  left:       0        !important;
  z-index:    9999     !important;
  /* Off-screen by default */
  width:      1px      !important;
  height:     1px      !important;
  overflow:   hidden   !important;
  clip:       rect(0 0 0 0) !important;
  clip-path:  inset(50%) !important;
  white-space: nowrap  !important;
}

/* Snap into view when focused by keyboard */
.cmp_skip_to_content:focus-within,
.cmp_skip_to_content a:focus {
  width:      auto     !important;
  height:     auto     !important;
  clip:       auto     !important;
  clip-path:  none     !important;
  overflow:   visible  !important;
  white-space: normal  !important;
}

.cmp_skip_to_content a {
  display:         inline-block            !important;
  padding:         0.6rem 1.2rem           !important;
  background:      var(--dark)             !important;
  color:           #ffffff                 !important;
  font-family:     var(--font)             !important;
  font-size:       0.85rem                 !important;
  font-weight:     600                     !important;
  text-decoration: none                    !important;
  border-radius:   0 0 var(--r-sm) var(--r-sm) !important;
  border:          none                    !important;
}


/* ================================================================
   SECTION 2B  —  SUPPRESS DEFAULT THEME'S DUPLICATE NAV OUTPUT
   The Default Theme's header.tpl (lib/pkp) outputs a .pkp_head_wrapper
   block containing .pkp_navigation_primary_row and .pkp_navigation_user_wrapper.
   Our child theme header.tpl replaces that entire block, but the Default
   Theme's compiled LESS still makes those elements visible when they appear
   in the DOM from any fallback render path.
   These rules suppress only the Default Theme's nav wrappers — our custom
   .avgcxr-navbar__center and .avgcxr-navbar__actions are unaffected.
   ================================================================ */

/* Default Theme nav row — not used in our header */
.pkp_head_wrapper,
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper {
  display: none !important;
}

/* Raw pkp_nav_list rendered outside our navbar (Default Theme fallback) */
.pkp_structure_head ul.pkp_nav_list:not(.avgcxr-nav-list):not(.avgcxr-mobile-nav-list):not(.avgcxr-user-nav):not(.avgcxr-mobile-user-nav) {
  display: none !important;
}

/* Default Theme's user nav wrapper — replaced by .avgcxr-navbar__actions */
.pkp_navigation_user_wrapper:not(.avgcxr-navbar__actions) {
  display: none !important;
}


/* ================================================================
   SECTION 3  —  HEADER : OUTER SHELL
   Matches avgcxrsolutions.com .navbar exactly:
     height: 85px | background: #fff | border-bottom: 1px solid rgba(0,0,0,.08)
     No rainbow stripe on the header (main site doesn't have one)
   ================================================================ */

/* Update header-h token to match main site exactly */
:root {
  --header-h: 85px;
}

/* Full-bleed FIXED white bar — position:fixed so it stays at top while scrolling.
   The body gets padding-top equal to --header-h (see Section 2) so content
   is never hidden underneath the header. */
.pkp_structure_head,
.avgcxr-navbar {
  background:    #ffffff                          !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08)   !important;
  box-shadow:    none                             !important;
  position:      fixed                            !important;
  top:           0                                !important;
  left:          0                                !important;
  z-index:       1000                             !important;
  width:         100%                             !important;
  box-sizing:    border-box                       !important;
  overflow:      visible                          !important;
  /* Smooth transition on background + shadow — matches main site */
  transition:    background 0.3s ease, box-shadow 0.3s ease,
                 backdrop-filter 0.3s ease        !important;
  padding:       0                                !important;
}

/* Scrolled state — frosted-glass effect (mirrors .navbar.scrolled on avgcxrsolutions.com)
   Toggled by avgcxr-navbar.js when the user scrolls past SCROLL_THRESHOLD.
   Uses the exact background value from the research website devtools:
   background: #F9F7F473 (rgb(249,247,244) at ~45% opacity) + backdrop blur. */
.pkp_structure_head.scrolled,
.avgcxr-navbar.scrolled {
  background:              rgba(249, 247, 244, 0.45) !important;
  backdrop-filter:         blur(20px)                !important;
  -webkit-backdrop-filter: blur(20px)                !important;
  box-shadow:              0 4px 18px rgba(0,0,0,0.10) !important;
  border-bottom:           1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Solid fallback for browsers without backdrop-filter support */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pkp_structure_head.scrolled,
  .avgcxr-navbar.scrolled {
    background: rgba(249, 247, 244, 0.96) !important;
  }
}

/* NO rainbow stripe on the header — main site doesn't have one */
.pkp_structure_head::before,
.avgcxr-navbar::before {
  display: none !important;
}


/* ================================================================
   SECTION 4  —  NAVBAR INNER WRAPPER
   3-column flex: [logo] [nav+search] [user-actions]
   Matches .navbar>.container-fluid from header-footer.css:
     max-width: 1400px | width: 90% | margin: 0 auto
   ================================================================ */

/* ── Inner container — 3-column flex ── */
.avgcxr-navbar__inner {
  display:         flex                         !important;
  align-items:     center                       !important;
  justify-content: space-between                !important;
  flex-wrap:       nowrap                       !important;
  width:           90%                          !important;  /* matches header-footer.css width: 90% */
  max-width:       1400px                       !important;  /* matches header-footer.css --page-inner */
  margin-left:     auto                         !important;
  margin-right:    auto                         !important;
  min-height:      var(--header-h)              !important;
  box-sizing:      border-box                   !important;
  position:        relative                     !important;
  overflow:        visible                      !important;
}


/* ================================================================
   SECTION 5  —  NAVBAR COLUMNS
   Matches .navbar-brand, .navbar-nav, and right-side structure
   from avgcxrsolutions.com header-footer.css
   ================================================================ */

/* ── Column 1: Logo — left, never shrinks ── */
/* Matches .navbar-brand from header-footer.css */
.avgcxr-navbar__brand {
  flex-shrink:  0                                  !important;
  min-width:    0                                  !important;
  max-width:    clamp(140px, 20vw, 300px)          !important;  /* exact from header-footer.css */
}

.avgcxr-navbar__logo-link {
  display:     flex        !important;
  align-items: center      !important;
  height:      var(--header-h) !important;
  padding:     5px 0       !important;
  text-decoration: none    !important;
  border:      none        !important;
}

/* Matches .navbar-brand img from header-footer.css */
.avgcxr-navbar__logo-img {
  height:     clamp(30px, 4vw, 60px)  !important;  /* exact from header-footer.css */
  width:      auto                    !important;
  display:    block                   !important;
  max-width:  100%                    !important;
  object-fit: contain                 !important;
}

/* Text fallback when no logo image is set */
/* Matches .navbar-brand span from header-footer.css */
.avgcxr-navbar__logo-text {
  font-family:    var(--font)   !important;
  font-weight:    700           !important;
  font-size:      clamp(0.8rem, 0.9vw, 1rem) !important;  /* exact from header-footer.css */
  color:          #0d0d0d       !important;
  white-space:    nowrap        !important;
  text-decoration: none         !important;
  line-height:    var(--header-h) !important;
  display:        block         !important;
}

/* ── Column 2: Primary nav + Search — fills centre ── */
.avgcxr-navbar__center {
  flex:            1            !important;
  display:         flex         !important;
  justify-content: center       !important;
  align-items:     center       !important;
  overflow:        visible      !important;
}

/* ── Nav list (primary menu) — Matches .navbar-nav from header-footer.css ── */
.avgcxr-nav-list,
ul.avgcxr-nav-list {
  display:     flex   !important;
  align-items: center !important;
  list-style:  none   !important;
  margin:      0      !important;
  padding:     0      !important;
  flex-wrap:   nowrap !important;
}

.avgcxr-nav-list > li {
  position:    relative    !important;
  display:     inline-flex !important;
  align-items: center      !important;
}

/* Matches .navbar-nav .nav-link from header-footer.css exactly */
.avgcxr-nav-list > li > a {
  font-family:    var(--font)                         !important;
  font-size:      clamp(0.75rem, 0.85vw, 0.95rem)    !important;  /* exact from header-footer.css */
  font-weight:    500                                 !important;  /* exact: font-weight 500 */
  letter-spacing: 0.02em                              !important;  /* exact: letter-spacing .02em */
  color:          #000000                             !important;  /* exact: color #000 */
  padding:        6px 14px                            !important;  /* exact: padding 6px 14px */
  border-radius:  4px                                 !important;  /* exact: border-radius 4px */
  white-space:    nowrap                              !important;
  display:        flex                                !important;
  align-items:    center                              !important;
  gap:            3px                                 !important;  /* exact: gap 3px */
  text-decoration: none                               !important;
  transition:     opacity 0.2s                        !important;  /* exact: transition opacity .2s */
  border:         none                                !important;
  height:         var(--header-h)                     !important;
  box-sizing:     border-box                          !important;
}

/* Hover: opacity .45 — exact match from header-footer.css */
.avgcxr-nav-list > li > a:hover,
.avgcxr-nav-list > li > a:focus {
  opacity:        0.45        !important;
  color:          #000000     !important;
  text-decoration: none       !important;
}

/* Chevron for items with sub-menus — matches .chevron style */
.avgcxr-nav-list > li > a[aria-haspopup]::after,
.avgcxr-nav-list > li[data-has-submenu] > a::after {
  content:       ''                               !important;
  display:       inline-block                     !important;
  width:         5px                              !important;
  height:        5px                              !important;
  border-right:  1.5px solid currentColor         !important;
  border-bottom: 1.5px solid currentColor         !important;
  transform:     rotate(45deg) translateY(-2px)   !important;
  margin-left:   4px                              !important;
  opacity:       0.6                              !important;
  transition:    transform 0.3s                   !important;
  flex-shrink:   0                                !important;
}

.avgcxr-nav-list > li:hover > a[aria-haspopup]::after,
.avgcxr-nav-list > li:hover > a::after {
  transform: rotate(225deg) translateY(2px) !important;
}

/* ── Dropdown menus ── */
.avgcxr-nav-list ul {
  position:       absolute                        !important;
  top:            100%                            !important;
  left:           0                               !important;
  min-width:      200px                           !important;
  background:     #ffffff                         !important;
  border-radius:  0 0 var(--r-lg) var(--r-lg)    !important;
  box-shadow:     0 16px 48px rgba(0,0,0,0.08)   !important;
  border:         1px solid rgba(0,0,0,0.06)      !important;
  border-top:     1px solid rgba(0,0,0,0.06)      !important;
  list-style:     none                            !important;
  margin:         0                               !important;
  padding:        8px 0                           !important;
  z-index:        1200                            !important;
  opacity:        0                               !important;
  visibility:     hidden                          !important;
  transform:      translateY(-8px)                !important;
  transition:     opacity 0.22s ease, transform 0.22s ease, visibility 0.22s !important;
  pointer-events: none                            !important;
}

.avgcxr-nav-list > li:hover > ul,
.avgcxr-nav-list > li:focus-within > ul {
  opacity:        1            !important;
  visibility:     visible      !important;
  transform:      translateY(0) !important;
  pointer-events: auto         !important;
}

.avgcxr-nav-list ul li {
  display: block !important;
}

.avgcxr-nav-list ul a {
  display:         block      !important;
  padding:         10px 20px  !important;
  font-family:     var(--font) !important;
  font-size:       0.85rem    !important;
  font-weight:     500        !important;
  color:           #0d0d0d    !important;
  text-decoration: none       !important;
  white-space:     nowrap     !important;
  transition:      opacity 0.2s !important;
  height:          auto       !important;
  border:          none       !important;
  border-radius:   0          !important;
}

.avgcxr-nav-list ul a:hover {
  opacity: 0.45 !important;
  color:   #0d0d0d !important;
}

/* ── Search link — styled like a nav item ── */
.avgcxr-nav-search {
  font-family:    var(--font)                       !important;
  font-size:      clamp(0.75rem, 0.85vw, 0.95rem)  !important;
  font-weight:    500                               !important;
  letter-spacing: 0.02em                            !important;
  color:          #000000                           !important;
  padding:        6px 14px                          !important;
  border-radius:  4px                               !important;
  display:        flex                              !important;
  align-items:    center                            !important;
  gap:            5px                               !important;
  text-decoration: none                             !important;
  transition:     opacity 0.2s                      !important;
  height:         var(--header-h)                   !important;
  white-space:    nowrap                            !important;
  border:         none                              !important;
}

.avgcxr-nav-search:hover,
.avgcxr-nav-search:focus {
  opacity:        0.45    !important;
  color:          #000000 !important;
  text-decoration: none   !important;
}

.avgcxr-nav-search .fa-search {
  font-size: 0.8em !important;
}

/* ── Column 3: User nav (Register / Login) — right ── */
/* Symmetrical distance to right edge mirrors logo distance from left */
.avgcxr-navbar__actions {
  flex-shrink:     0               !important;
  display:         flex            !important;
  align-items:     center          !important;
  justify-content: flex-end        !important;
}

/* User nav list */
.avgcxr-user-nav,
ul.avgcxr-user-nav {
  display:     flex   !important;
  align-items: center !important;
  list-style:  none   !important;
  margin:      0      !important;
  padding:     0      !important;
  flex-wrap:   nowrap !important;
}

.avgcxr-user-nav__item,
.avgcxr-user-nav li {
  display:     inline-flex !important;
  align-items: center      !important;
  position:    relative    !important;
}

/* Register / Login links — same style as nav links on main site */
.avgcxr-user-nav a {
  font-family:    var(--font)                         !important;
  font-size:      clamp(0.75rem, 0.85vw, 0.95rem)    !important;
  font-weight:    500                                 !important;
  letter-spacing: 0.02em                              !important;
  color:          #000000                             !important;
  padding:        6px 14px                            !important;
  border-radius:  4px                                 !important;
  white-space:    nowrap                              !important;
  display:        flex                                !important;
  align-items:    center                              !important;
  text-decoration: none                               !important;
  transition:     opacity 0.2s                        !important;
  border:         none                                !important;
  height:         var(--header-h)                     !important;
  box-sizing:     border-box                          !important;
}

.avgcxr-user-nav a:hover,
.avgcxr-user-nav a:focus {
  opacity:        0.45     !important;
  color:          #000000  !important;
  text-decoration: none    !important;
}

/* Profile dropdown (logged-in state) */
.avgcxr-user-nav li ul {
  position:       absolute                        !important;
  top:            100%                            !important;
  right:          0                               !important;
  left:           auto                            !important;
  min-width:      180px                           !important;
  background:     #ffffff                         !important;
  border-radius:  0 0 var(--r-lg) var(--r-lg)    !important;
  box-shadow:     0 16px 48px rgba(0,0,0,0.08)   !important;
  border:         1px solid rgba(0,0,0,0.06)      !important;
  list-style:     none                            !important;
  margin:         0                               !important;
  padding:        8px 0                           !important;
  z-index:        1200                            !important;
  opacity:        0                               !important;
  visibility:     hidden                          !important;
  transform:      translateY(-8px)                !important;
  transition:     opacity 0.22s ease, transform 0.22s ease, visibility 0.22s !important;
  pointer-events: none                            !important;
}

.avgcxr-user-nav li:hover > ul,
.avgcxr-user-nav li:focus-within > ul {
  opacity:        1             !important;
  visibility:     visible       !important;
  transform:      translateY(0) !important;
  pointer-events: auto          !important;
}

.avgcxr-user-nav li ul li {
  display: block !important;
}

.avgcxr-user-nav li ul a {
  display:      block       !important;
  padding:      10px 20px   !important;
  font-size:    0.85rem     !important;
  font-weight:  500         !important;
  color:        #0d0d0d     !important;
  height:       auto        !important;
  border:       none        !important;
  border-radius: 0          !important;
  transition:   opacity 0.2s !important;
}

.avgcxr-user-nav li ul a:hover {
  opacity: 0.45 !important;
}

/* ── Hide hamburger on desktop ── */
.avgcxr-navbar__hamburger {
  display: none !important;
}

/* ── Responsive tweaks 1200–1400px (matches header-footer.css breakpoint) ── */
@media (min-width: 1200px) and (max-width: 1400px) {
  .avgcxr-nav-list > li > a,
  .avgcxr-user-nav a,
  .avgcxr-nav-search {
    font-size: 0.72rem  !important;  /* exact from header-footer.css */
    padding:   6px 8px  !important;  /* exact from header-footer.css */
  }

  .avgcxr-navbar__brand {
    max-width: 160px !important;  /* exact from header-footer.css */
  }
}


/* ================================================================
   SECTION 6  —  MOBILE NAVIGATION
   Matches .mobile-menu-overlay pattern from header-footer.css
   Hamburger + slide-down drawer on max-width: 991px
   ================================================================ */

/* ── Hide the mobile drawer on desktop ─────────────────────────────────────
   The Default Theme's compiled LESS (nav-toggle.less) sets:
     .pkp_site_nav_menu { display: block }
   at @media (min-width: @screen-desktop), which forces our drawer visible
   because it carries the class pkp_site_nav_menu.

   This unconditional rule hides the drawer at all widths above 991px.
   The @media (max-width: 991px) block below overrides it back to
   display: block (with max-height: 0 for the closed/collapsed state)
   on mobile, where it is needed.
   ──────────────────────────────────────────────────────────────────────── */
.avgcxr-mobile-menu {
  display: none !important;
}

@media (max-width: 991px) {

  /* Show hamburger, hide desktop nav columns */
  .avgcxr-navbar__hamburger {
    display:        flex            !important;
    flex-direction: column          !important;
    justify-content: center         !important;
    align-items:    center          !important;
    gap:            5px             !important;
    width:          44px            !important;
    height:         44px            !important;
    background:     transparent     !important;
    border:         1px solid rgba(0,0,0,0.12) !important;
    border-radius:  var(--r-sm)     !important;
    cursor:         pointer         !important;
    flex-shrink:    0               !important;
    order:          3               !important;
  }

  .avgcxr-hamburger__bar {
    display:      block         !important;
    width:        20px          !important;
    height:       2px           !important;
    background:   #0d0d0d       !important;
    border-radius: 2px          !important;
    transition:   all 0.3s ease !important;
  }

  /* Hide center nav and user actions on mobile */
  .avgcxr-navbar__center,
  .avgcxr-navbar__actions {
    display: none !important;
  }

  /* Logo stays visible on mobile */
  .avgcxr-navbar__brand {
    flex:         1    !important;
    max-width:    none !important;
    order:        2    !important;
  }

  .avgcxr-navbar__inner {
    width:      100%      !important;
    max-width:  100%      !important;
    padding:    0 1.25rem !important;
    min-height: 60px      !important;
  }

  .avgcxr-navbar__logo-link {
    height: 60px !important;
  }

  .avgcxr-navbar__logo-img {
    height: clamp(28px, 6vw, 44px) !important;
  }

  /* Mobile menu drawer — slides down from header */
  .avgcxr-mobile-menu {
    display:    block                           !important;
    position:   absolute                        !important;
    top:        100%                            !important;
    left:       0                               !important;
    width:      100%                            !important;
    background: #ffffff                         !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.12)   !important;
    border-top: 1px solid rgba(0,0,0,0.08)      !important;
    z-index:    1500                            !important;
    overflow:   hidden                          !important;
    max-height: 0                               !important;
    transition: max-height 0.38s cubic-bezier(0.4,0,0.2,1) !important;
  }

  /* OJS JS adds .is_open when hamburger is clicked */
  .pkp_site_nav_menu.is_open,
  .avgcxr-mobile-menu.is_open {
    max-height: 80vh !important;
    overflow-y: auto !important;
  }

  .avgcxr-mobile-menu__inner {
    padding: 1rem 1.25rem 1.5rem !important;
  }

  /* Mobile nav list */
  .avgcxr-mobile-nav-list,
  ul.avgcxr-mobile-nav-list {
    list-style: none  !important;
    margin:     0     !important;
    padding:    0     !important;
    width:      100%  !important;
  }

  .avgcxr-mobile-nav-list > li {
    display:      block !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
  }

  .avgcxr-mobile-nav-list > li:last-child {
    border-bottom: none !important;
  }

  .avgcxr-mobile-nav-list > li > a {
    display:     block         !important;
    padding:     0.85rem 0     !important;
    font-family: var(--font)   !important;
    font-size:   1rem          !important;
    font-weight: 500           !important;
    color:       #0d0d0d       !important;
    text-decoration: none      !important;
    transition:  opacity 0.2s  !important;
    border:      none          !important;
    height:      auto          !important;
  }

  .avgcxr-mobile-nav-list > li > a:hover {
    opacity: 0.45 !important;
  }

  /* Mobile sub-menus — displayed as a flat list */
  .avgcxr-mobile-nav-list ul {
    list-style: none !important;
    margin:     0    !important;
    padding:    0 0 0 1rem !important;
  }

  .avgcxr-mobile-nav-list ul a {
    display:     block    !important;
    padding:     0.65rem 0 !important;
    font-size:   0.88rem  !important;
    color:       #0d0d0d  !important;
    opacity:     0.7      !important;
    transition:  opacity 0.2s !important;
    height:      auto     !important;
    border:      none     !important;
  }

  .avgcxr-mobile-nav-list ul a:hover {
    opacity: 1 !important;
  }

  /* Mobile search link */
  .avgcxr-mobile-search-link {
    display:     flex     !important;
    align-items: center   !important;
    gap:         8px      !important;
    padding:     0.85rem 0 !important;
    font-family: var(--font) !important;
    font-size:   1rem     !important;
    font-weight: 500      !important;
    color:       #0d0d0d  !important;
    text-decoration: none !important;
    border-top:  1px solid rgba(0,0,0,0.07) !important;
    transition:  opacity 0.2s !important;
  }

  .avgcxr-mobile-search-link:hover { opacity: 0.45 !important; }

  /* Mobile user nav (Register / Login) */
  .avgcxr-mobile-menu__actions {
    padding-top: 0.75rem  !important;
    border-top:  1px solid rgba(0,0,0,0.07) !important;
    margin-top:  0.5rem   !important;
  }

  .avgcxr-mobile-user-nav,
  ul.avgcxr-mobile-user-nav {
    list-style: none !important;
    margin:     0    !important;
    padding:    0    !important;
    display:    flex !important;
    gap:        0.75rem !important;
    flex-wrap:  wrap !important;
  }

  .avgcxr-mobile-user-nav a {
    font-family:  var(--font) !important;
    font-size:    0.88rem     !important;
    font-weight:  600         !important;
    color:        #0d0d0d     !important;
    text-decoration: none     !important;
    padding:      0.5rem 1.25rem !important;
    border:       1px solid rgba(0,0,0,0.15) !important;
    border-radius: 20px       !important;
    display:      inline-flex !important;
    align-items:  center      !important;
    transition:   opacity 0.2s !important;
    height:       auto        !important;
  }

  .avgcxr-mobile-user-nav a:hover { opacity: 0.6 !important; }

} /* end @media (max-width: 991px) */

/* ================================================================
   SECTION 7  —  MAIN CONTENT LAYOUT
   ================================================================ */

.pkp_structure_content {
  background:     var(--off-white) !important;
  padding-top:    2.25rem !important;
  padding-bottom: 3.5rem  !important;
}

/* ================================================================
   SECTION 7A  —  HERO SECTION  (homepage only, isolated)
   The background image is applied ONLY to the .avgcxr-hero block
   injected into indexJournal.tpl, NOT to the whole page wrapper.
   This prevents the image bleeding behind sidebar/main-content.
   ================================================================ */

/* ── Homepage: break main panel padding so hero bleeds edge-to-edge ── */
body.pkp_page_index .pkp_structure_main {
  padding:       0             !important;
  border-radius: 0             !important;
  overflow:      visible       !important;
}

/* ── Homepage: main = full width; sidebar hidden from default position ── */
/* The sidebar content is re-rendered inside the About section via
   the avgcxr-about-journal__sidebar slot (see indexJournal.tpl).      */
body.pkp_page_index .pkp_structure_content {
  display: block !important;
}

body.pkp_page_index .pkp_structure_main {
  width: 100% !important;
}

/* Hide the OJS sidebar from its default location on the homepage —
   we render it inside the About section two-column layout instead. */
body.pkp_page_index .pkp_structure_sidebar {
  display: none !important;
}

body.pkp_page_index .pkp_structure_sidebar .pkp_block {
  margin-bottom: 0 !important;
}

/* Restore padding for all content INSIDE main, below the hero */
.page_index_journal > *:not(.avgcxr-hero) {
  padding-left:  2.5rem !important;
  padding-right: 2.5rem !important;
}

/* Hero block itself — full 100% width, no radius, no margin clipping.
   margin-top: calc(-1 * var(--header-h)) pulls the hero UP so it sits
   directly behind the fixed transparent header, exactly like avgcxrsolutions.com.
   The header is translucent/fixed so the hero image shows through it. */
.avgcxr-hero {
  position:          relative                          !important;
  width:             70%                              !important;
  /* Full-bleed breakout: cancel any auto-margin centering that the compiled
     Default Theme LESS applies to .pkp_structure_main:first-child:last-child
     (margin-left/right: auto at desktop). This pushes the hero edge-to-edge
     so the left gap caused by the centred container is eliminated.
     The technique is: margin-left = -100vw/2 + 50%, width = 100vw. */
  width:             100vw                             !important;
  margin-left:       calc(-50vw + 50%)                 !important;
  margin-right:      calc(-50vw + 50%)                 !important;
  /* Height matches the reference avgcxrsolutions.com hero:
     100vh fills the viewport so the full image composition is visible. */
  min-height:        82vh                             !important;
  display:           flex                              !important;
  align-items:       center                            !important;
  justify-content:   center                            !important;
  /* Top padding = header height so text is never under the fixed bar */
  padding:           calc(var(--header-h) + 3rem) clamp(1.5rem, 5vw, 4rem) 5rem !important;
  overflow:          hidden                            !important;
  border-radius:     0                                 !important;
  /* Pull the hero up to sit directly under the fixed header — no white gap */
  margin-top:        calc(-1 * var(--header-h))        !important;
  /* Remove bottom margin — the gap below was caused by this 2rem space
     showing as a bare background strip between the hero and page content */
  margin-bottom:     0                                 !important;

  /* Dark overlay + hero image.
     NOTE: The actual image URL is overridden by an inline <style> in indexJournal.tpl
     using $baseUrl so it resolves correctly through OJS's asset pipeline.
     This fallback path handles direct CSS file access. */
  background-image:
    linear-gradient(
      135deg,
      rgba(10, 5, 40, 0.80) 0%,
      rgba(0, 30, 80, 0.68) 55%,
      rgba(10, 5, 40, 0.82) 100%
    ),
    url('/AVGCXR%20-%20Journal/plugins/themes/avgcxr/images/hero-bg.jpg'); /* fallback only — overridden by inline style */
  background-size:       cover                         !important;
  background-position:   center center                 !important;
  background-attachment: scroll                        !important;
  background-repeat:     no-repeat                     !important;
  background-color:      var(--dark)                   !important;  /* fallback while image loads */
}

/* H1 hero title */
.avgcxr-hero .avgcxr-hero__title,
.avgcxr-hero h1.avgcxr-hero__title {
  font-family:     'Montserrat', sans-serif !important;
  font-size:       clamp(2.5rem, 4vw, 3.5rem) !important;
  font-weight:     800           !important;
  line-height:     1.2          !important;
  letter-spacing:  -0.03em       !important;
  color:           #ffffff       !important;
  margin:          0 0 1rem      !important;
  max-width:       100%          !important;
  text-align:      center        !important;
  text-shadow:     0 2px 20px rgba(0,0,0,0.6) !important;
  display:         block         !important;
  padding:         0             !important;
  border:          none          !important;
  border-bottom:   none          !important;
  background:      none          !important;
}

/* Hero tagline */
.avgcxr-hero .avgcxr-hero__tagline,
.avgcxr-hero p.avgcxr-hero__tagline {
  font-family:     'Montserrat', sans-serif !important;
  font-size:       1.25rem                 !important;
  font-weight:     400                     !important;
  line-height:     1.65                    !important;
  color:           rgba(255,255,255,0.92) !important;
  margin:          0 0 1.5rem    !important;
  max-width:       100%          !important;
  text-align:      center        !important;
  background:      none          !important;
}

/* Sub-CTA line above the submission button */
.avgcxr-hero .avgcxr-hero__subcta,
.avgcxr-hero p.avgcxr-hero__subcta {
  font-family:    var(--font)  !important;
  font-size:      1.25rem      !important;
  font-weight:    400          !important;
  line-height:    1.5          !important;
  color:          rgb(255, 255, 255) !important;
  margin:         0 0 1.25rem  !important;
  letter-spacing: 0.01em       !important;
  text-align:     center       !important;
}

/* Hero CTA button — maroon pill matching research site */
.avgcxr-hero__cta,
a.avgcxr-hero__cta,
.avgcxr-cfp__cta,
a.avgcxr-cfp__cta,
.avgcxr-hero .avgcxr-hero__cta {
  display:         inline-flex   !important;
  align-items:     center        !important;
  justify-content: center        !important;
  gap:             0.5rem        !important;
  margin-top:      1.75rem       !important;
  padding:         1rem 2.5rem   !important;
  background:      var(--research-cta) !important;
  color:           #ffffff       !important;
  font-family:     'Montserrat', sans-serif !important;
  font-size:       clamp(0.82rem, 1vw, 1rem) !important;
  font-weight:     600           !important;
  letter-spacing:  0.04em        !important;
  text-transform:  uppercase     !important;
  text-decoration: none          !important;
  border:          none          !important;
  border-bottom:   none          !important;
  outline:         none          !important;
  border-radius:   60px          !important;
  box-shadow:      0 4px 20px rgba(191, 34, 41, 0.35) !important;
  transition:      background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  cursor:          pointer       !important;
}

.avgcxr-hero__cta:hover,
.avgcxr-hero__cta:focus,
.avgcxr-hero__cta:focus-visible,
.avgcxr-hero__cta:active,
.avgcxr-hero__cta:visited,
a.avgcxr-hero__cta:hover,
a.avgcxr-hero__cta:focus,
a.avgcxr-hero__cta:focus-visible,
a.avgcxr-hero__cta:active,
a.avgcxr-hero__cta:visited,
.avgcxr-cfp__cta:hover,
.avgcxr-cfp__cta:focus,
.avgcxr-cfp__cta:focus-visible,
.avgcxr-cfp__cta:active,
.avgcxr-cfp__cta:visited,
a.avgcxr-cfp__cta:hover,
a.avgcxr-cfp__cta:focus,
a.avgcxr-cfp__cta:focus-visible,
a.avgcxr-cfp__cta:active,
a.avgcxr-cfp__cta:visited,
.avgcxr-hero .avgcxr-hero__cta:hover,
.avgcxr-hero .avgcxr-hero__cta:focus,
.avgcxr-hero .avgcxr-hero__cta:focus-visible,
.avgcxr-hero .avgcxr-hero__cta:active,
.avgcxr-hero .avgcxr-hero__cta:visited {
  background:      var(--research-cta-dark) !important;
  color:           #ffffff          !important;
  transform:       translateY(-3px) !important;
  box-shadow:      0 10px 28px rgba(191, 34, 41, 0.48) !important;
  text-decoration: none             !important;
  border-bottom:   none             !important;
  outline:         none             !important;
}

/* Inner text container — centered, capped at 960px so text doesn't
   stretch the full viewport width on large screens */
.avgcxr-hero__content {
  position:   relative    !important;
  z-index:    1           !important;
  width:      100%        !important;
  max-width:  960px       !important;
  text-align: center      !important;
  display:    flex        !important;
  flex-direction: column  !important;
  align-items: center     !important;
}

/* Decorative corner glow */
.avgcxr-hero::after {
  content:    ''           !important;
  position:   absolute     !important;
  bottom:     -40px        !important;
  right:      -40px        !important;
  width:      260px        !important;
  height:     260px        !important;
  border-radius: 50%       !important;
  background: radial-gradient(circle, rgba(0,87,184,0.25) 0%, transparent 70%) !important;
  pointer-events: none     !important;
}

/* Responsive hero */
@media (max-width: 767px) {
  .avgcxr-hero {
    min-height:  100vh                                             !important;
    padding:     calc(var(--header-h) + 2rem) 1.25rem 3rem        !important;
    background-size:       cover                                   !important;
    background-attachment: scroll                                  !important;
    margin-bottom: 0                                               !important;
  }
  .avgcxr-hero .avgcxr-hero__title {
    font-size: clamp(1.6rem, 5vw, 2.2rem) !important;
    text-align: center !important;
  }
  .avgcxr-hero__content {
    max-width: 100% !important;
  }
  .page_index_journal > *:not(.avgcxr-hero) {
    padding-left:  1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .avgcxr-hero {
    min-height:   100vh                                            !important;
    padding:      calc(var(--header-h) + 2.5rem) 2rem 4rem        !important;
    margin-bottom: 0                                               !important;
  }
  .avgcxr-hero__content {
    max-width: 720px !important;
  }
}

/* Hamburger → X animation when mobile menu is open */
.avgcxr-navbar__hamburger.is_open .avgcxr-hamburger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg) !important;
}
.avgcxr-navbar__hamburger.is_open .avgcxr-hamburger__bar:nth-child(2) {
  opacity: 0 !important;
  transform: scaleX(0) !important;
}
.avgcxr-navbar__hamburger.is_open .avgcxr-hamburger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg) !important;
}

/* ── Strip ALL white wrapper backgrounds on the homepage ── */
body,
html {
  background-image: none !important;
}

/* Remove the centered white card container that wraps everything */
body.pkp_page_index .pkp_structure_page,
body.pkp_page_index .pkp_structure_content,
body.pkp_page_index .pkp_structure_main,
body.pkp_page_index .page_index_journal {
  background:    transparent !important;
  background-image: none     !important;
  box-shadow:    none        !important;
  border:        none        !important;
  border-radius: 0           !important;
  max-width:     100%        !important;
  width:         100%        !important;
  padding-left:  0           !important;
  padding-right: 0           !important;
  margin-left:   0           !important;
  margin-right:  0           !important;
}

/* Override the compiled LESS fixed-width container breakpoints from body.less */
body.pkp_page_index .pkp_structure_content {
  padding-top:    0    !important;
  padding-bottom: 0    !important;
  float:          none !important;
}

/* Override compiled LESS float:left + fixed width on .pkp_structure_main */
body.pkp_page_index .pkp_structure_main {
  float:   none !important;
  padding: 0    !important;
}

/* Override compiled LESS float:right + fixed width on .pkp_structure_sidebar */
body.pkp_page_index .pkp_structure_sidebar {
  float: none !important;
}

/* Also kill the off-white body background on the index page */
body.pkp_page_index {
  background: var(--off-white) !important;
}

/* page_index_journal wrapper — no top padding, hero sits flush */
.page_index_journal {
  padding-top: 0 !important;
}

/* ── White card panel ── */
.pkp_structure_main {
  background:    var(--white) !important;
  border-radius: var(--r-xl)  !important;
  box-shadow:    var(--s)     !important;
  padding:       2.5rem 3rem  !important;
  animation:     avgcxrFadeUp 0.38s ease both !important;
}

/* Remove default full-height border pseudo-elements */
.pkp_structure_main::before,
.pkp_structure_main::after {
  display: none !important;
}


/* ================================================================
   SECTION 8  —  TYPOGRAPHY
   ================================================================ */

/* H1 — page title with blue accent underline */
.pkp_structure_main h1,
.pkp_structure_main .page h1 {
  font-family:    var(--font)  !important;
  font-size:      1.7rem       !important;
  font-weight:    800          !important;
  letter-spacing: -0.03em      !important;
  line-height:    1.22         !important;
  color:          #4A0D10  !important;
  margin-top:     0            !important;
  margin-bottom:  1.5rem       !important;
  padding-bottom: 0.75rem      !important;
  border-bottom:  3px solid #9E1B21 !important;
}

.pkp_structure_main h2 {
  font-family:    var(--font)  !important;
  font-size:      1.25rem      !important;
  font-weight:    700          !important;
  letter-spacing: -0.02em      !important;
  color:          var(--dark)  !important;
}

.pkp_structure_main h3 {
  font-family:    var(--font)  !important;
  font-size:      1rem         !important;
  font-weight:    700          !important;
  color:          var(--dark)  !important;
}

.pkp_structure_main h4,
.pkp_structure_main h5,
.pkp_structure_main h6 {
  font-family: var(--font) !important;
  font-weight: 600         !important;
  color:       var(--dark) !important;
}

.pkp_structure_main p,
.pkp_structure_main li {
  font-family: var(--font)     !important;
  font-size:   1rem         !important;
  line-height: 1.82            !important;
  color:       #000000 !important;
}

.pkp_structure_main a {
  color:          var(--cb)   !important;
  font-weight:    500         !important;
  text-decoration: none       !important;
  border-bottom:  1px solid transparent !important;
  transition:     color var(--t-f), border-color var(--t-f) !important;
}

.pkp_structure_main a:hover {
  color:             var(--cb-dark) !important;
  border-bottom-color: var(--cb)    !important;
}

/* Breadcrumbs */
.cmp_breadcrumbs ol {
  font-family: var(--font) !important;
  font-size:   0.77rem     !important;
}

.cmp_breadcrumbs a {
  color:       var(--cb)   !important;
  font-weight: 500         !important;
}

.cmp_breadcrumbs .separator,
.cmp_breadcrumbs .current {
  color: var(--gray-400) !important;
}


/* ================================================================
   SECTION 9  —  BUTTONS
   ================================================================ */

/* Primary button */
.cmp_button {
  font-family:    var(--font)  !important;
  font-size:      0.78rem      !important;
  font-weight:    700          !important;
  letter-spacing: 0.07em       !important;
  text-transform: uppercase    !important;
  background:     var(--cb)    !important;
  color:          var(--white) !important;
  border:         none         !important;
  border-radius:  var(--r)     !important;
  box-shadow:     var(--s-blue)!important;
  text-decoration: none        !important;
  transition:     all var(--t) !important;
}

.cmp_button:hover,
.cmp_button:focus {
  background:   var(--cb-dark) !important;
  color:        var(--white)   !important;
  transform:    translateY(-2px) !important;
  box-shadow:   0 7px 24px rgba(0,87,184,0.38) !important;
  text-decoration: none        !important;
}

/* Wire / outline button */
.cmp_button_wire {
  font-family:    var(--font) !important;
  font-weight:    700         !important;
  border-color:   var(--cb)   !important;
  color:          var(--cb)   !important;
  border-radius:  var(--r)    !important;
  transition:     all var(--t) !important;
}

.cmp_button_wire:hover,
.cmp_button_wire:focus {
  background: var(--cb)    !important;
  color:      var(--white) !important;
}


/* ================================================================
   SECTION 10  —  SIDEBAR CARD SYSTEM
   ================================================================ */

.pkp_structure_sidebar {
  padding-top: 0 !important;
}

/* ── Base card ── */
.pkp_block {
  background:    var(--white) !important;
  border:        1px solid var(--gray-200) !important;
  border-top:    3px solid var(--cb)       !important;
  border-radius: var(--r-lg)               !important;
  box-shadow:    var(--s-xs)               !important;
  padding:       1.5rem                    !important;
  margin-bottom: 1.25rem                   !important;
  position:      relative                  !important;
  overflow:      hidden                    !important;
  transition:    box-shadow var(--t), transform var(--t) !important;
  animation:     avgcxrFadeUp 0.42s ease both !important;
}

.pkp_block:hover {
  box-shadow: var(--s) !important;
  transform:  translateY(-3px) !important;
}

/* Stagger entrance */
.pkp_block:nth-child(1) { animation-delay: 0.06s !important; }
.pkp_block:nth-child(2) { animation-delay: 0.13s !important; }
.pkp_block:nth-child(3) { animation-delay: 0.20s !important; }
.pkp_block:nth-child(4) { animation-delay: 0.27s !important; }

/* Block section title */
.pkp_block .title {
  font-family:    var(--font)  !important;
  font-size:      0.62rem      !important;
  font-weight:    800          !important;
  letter-spacing: 0.15em       !important;
  text-transform: uppercase    !important;
  color:          var(--gray-400) !important;
  margin-bottom:  1rem         !important;
  margin-top:     0            !important;
  display:        flex         !important;
  align-items:    center       !important;
  gap:            0.5rem       !important;
}

/* Decorative line after title */
.pkp_block .title::after {
  content:    ''        !important;
  flex:       1         !important;
  height:     1px       !important;
  background: var(--gray-200) !important;
}

/* Generic content links */
.pkp_block .content a {
  font-family:     var(--font)    !important;
  font-size:       0.88rem        !important;
  font-weight:     500            !important;
  color:           var(--gray-800) !important;
  text-decoration: none           !important;
  transition:      color var(--t-f) !important;
}

.pkp_block .content a:hover {
  color: var(--cb) !important;
}


/* ── 10A. Make a Submission — Dark CTA Card ── */
/* Hidden on the homepage — the hero section already has a submission CTA */
body.pkp_page_index .block_make_submission {
  display: none !important;
}

.block_make_submission {
  background:  linear-gradient(150deg, var(--dark) 0%, #0A2240 100%) !important;
  border:      none             !important;
  border-top:  3px solid var(--cb) !important;
  border-radius: var(--r-lg)    !important;
}

/* Decorative circle glow */
.block_make_submission::after {
  content:       '' !important;
  position:      absolute !important;
  top:           -30px    !important;
  right:         -30px    !important;
  width:         100px    !important;
  height:        100px    !important;
  border-radius: 50%      !important;
  background:    radial-gradient(circle, rgba(0,87,184,0.35) 0%, transparent 70%) !important;
  pointer-events: none    !important;
}

/* Tagline */
.block_make_submission .avgcxr-cta-tagline {
  display:     block          !important;
  font-family: var(--font)    !important;
  font-size:   0.77rem        !important;
  font-weight: 400            !important;
  line-height: 1.55           !important;
  color:       rgba(255,255,255,0.52) !important;
  margin-bottom: 1.1rem       !important;
}

/* CTA button */
.block_make_submission_link,
.block_make_submission a.block_make_submission_link {
  display:        block      !important;
  width:          100%       !important;
  box-sizing:     border-box !important;
  padding:        0.85rem 1.25rem !important;
  background:     var(--cb)  !important;
  color:          var(--white) !important;
  font-family:    var(--font) !important;
  font-size:      0.75rem    !important;
  font-weight:    800        !important;
  letter-spacing: 0.09em     !important;
  text-transform: uppercase  !important;
  text-align:     center     !important;
  text-decoration: none      !important;
  border:         none       !important;
  border-radius:  var(--r)   !important;
  box-shadow:     0 4px 18px rgba(0,87,184,0.55) !important;
  transition:     all var(--t) !important;
  position:       relative   !important;
  z-index:        1          !important;
}

.block_make_submission_link:hover,
.block_make_submission a.block_make_submission_link:hover {
  background:   var(--cb-dark) !important;
  color:        var(--white)   !important;
  transform:    translateY(-2px) !important;
  box-shadow:   0 8px 28px rgba(0,87,184,0.65) !important;
  text-decoration: none        !important;
}

.block_make_submission_link:active,
.block_make_submission a.block_make_submission_link:active {
  transform: translateY(0) !important;
}


/* ── 10B. Information Block ── */
.block_information {
  border-top-color: var(--cb-mid) !important;
}

.block_information .content ul {
  list-style: none !important;
  padding:    0    !important;
  margin:     0    !important;
}

.block_information .content li {
  border-bottom: 1px solid var(--gray-100) !important;
  padding:       0 !important;
}

.block_information .content li:last-child {
  border-bottom: none !important;
}

.block_information .content a {
  display:     flex    !important;
  align-items: center  !important;
  gap:         0.6rem  !important;
  padding:     0.65rem 0 !important;
  font-size:   0.875rem !important;
  font-weight: 600     !important;
  color:       var(--gray-700) !important;
  text-decoration: none !important;
  transition:  all var(--t-f) !important;
}

/* Arrow indicator — #4A0D10, never blue */
.block_information .content a::before {
  content:     '→'          !important;
  color:       #4A0D10      !important;
  font-weight: 700          !important;
  font-size:   0.82rem      !important;
  flex-shrink: 0            !important;
  transition:  transform var(--t-f) !important;
}

/* Hover: darken text slightly, slide arrow right — no blue, no underline */
.block_information .content a:hover,
.block_information .content a:focus {
  color:           #4A0D10   !important;
  text-decoration: none      !important;
  padding-left:    4px       !important;
}

.block_information .content a:hover::before,
.block_information .content a:focus::before {
  color:     #4A0D10         !important;
  transform: translateX(3px) !important;
}


/* ── 10C. Latest Publications (Web Feed) Block ── */
.block_web_feed .content a {
  color:           inherit    !important;
  text-decoration: none       !important;
  transition:      color var(--t-f) !important;
}

.block_web_feed .content a:hover,
.block_web_feed .content a:focus {
  color:           #4A0D10   !important;
  text-decoration: none      !important;
}

.block_information .content a:hover::before {
  transform: translateX(4px) !important;
}


/* ================================================================
   SECTION 11  —  FOOTER
   ================================================================ */

/* ================================================================
   SECTION 11  —  FOOTER
   Source tokens extracted from AVGCXR Solutions header-footer.css:
     background: linear-gradient(to bottom, #100223 0%, #100223 100%)
     font-size headers : .8rem | letter-spacing: .12em | uppercase
     font-size links   : .82rem | margin-bottom: .7rem
     bottom border     : rgba(26, 39, 68, 0.12)   (—outline-var)
   ================================================================ */

/* Exact brand colour from AVGCXR header-footer.css */
:root {
  --footer-bg:         #100223;                   /* from footer gradient  */
  --footer-text:       rgba(255, 255, 255, 0.72); /* body copy in footer   */
  --footer-heading:    #ffffff;                   /* column headings       */
  --footer-link:       rgba(255, 255, 255, 0.78); /* link default          */
  --footer-link-hover: rgba(255, 255, 255, 1);    /* link hover            */
  --footer-divider:    rgba(26, 39, 68, 0.22);    /* --outline-var value   */
}

.pkp_structure_footer_wrapper {
  background:  var(--footer-bg) !important;
  margin-top:  0           !important;
  position:    relative    !important;
  border-top:  none        !important;
}

/* Rainbow stripe at footer top — keeps brand identity */
.pkp_structure_footer_wrapper::before {
  content:  '' !important;
  display:  block !important;
  height:   3px  !important;
  background: linear-gradient(90deg,
    #E63950   0%,
    #F5672D   14.3%,
    #F5A623   28.6%,
    #6DC83C   42.8%,
    #00B5BD   57.1%,
    #1E9BF0   71.4%,
    #9B4FD4   85.7%,
    #F0508A  100%
  ) !important;
}

/* ── Inner footer grid container ── */
.pkp_structure_footer {
  max-width:   var(--container) !important;
  margin:      0 auto           !important;
  padding:     0 clamp(1.25rem, 5vw, 3rem) !important;
  font-family: var(--font)      !important;
  text-align:  left             !important; /* columns align left */
}

/* ── Multi-column grid layout — matches AVGCXR Solutions footer ── */
.avgcxr-footer-grid {
  display:               grid                                  !important;
  grid-template-columns: minmax(180px, 1.5fr) repeat(3, 1fr)  !important;
  gap:                   2.5rem clamp(1.5rem, 4vw, 4rem)      !important;
  padding:               clamp(2rem, 4vw, 3.5rem) 0 clamp(1.5rem, 3vw, 2.5rem) !important;
  align-items:           start                                 !important;
}

/* Brand column — logo + tagline */
.avgcxr-footer-brand {
  display: flex           !important;
  flex-direction: column  !important;
  gap: 1rem               !important;
}

/* Footer logo link — reset any global a{} interference */
.avgcxr-footer-logo-link {
  display:         inline-flex !important;
  align-items:     center      !important;
  text-decoration: none        !important;
  border:          none        !important;
  border-bottom:   none        !important;
  outline-offset:  3px         !important;
}

.avgcxr-footer-logo {
  height:     clamp(30px, 4vw, 50px) !important;
  width:      auto                   !important;
  display:    block                  !important;
  object-fit: contain                !important;
  max-width:  180px                  !important;
}

.avgcxr-footer-tagline {
  font-family:    var(--font)       !important;
  font-size:      0.78rem           !important;
  font-weight:    400               !important;
  line-height:    1.65              !important;
  color:          var(--footer-text) !important;
  margin:         0                 !important;
  max-width:      220px             !important;
}

/* Column heading style — matches .footer-col h4 from header-footer.css */
.avgcxr-footer-col h4,
.avgcxr-footer-col .avgcxr-footer-col-heading {
  font-family:    var(--font)          !important;
  font-size:      0.80rem              !important;  /* exact: .8rem */
  font-weight:    700                  !important;
  letter-spacing: 0.12em               !important;  /* exact: .12em */
  text-transform: uppercase            !important;
  color:          var(--footer-heading) !important;
  margin:         0 0 1.25rem 0        !important;  /* exact: margin-bottom 1.25rem */
}

/* Column link style — matches .footer-col a from header-footer.css */
.avgcxr-footer-col a {
  display:         block         !important;
  font-family:     var(--font)   !important;
  font-size:       0.82rem       !important;  /* exact: .82rem */
  font-weight:     400           !important;
  color:           var(--footer-link) !important;
  text-decoration: none          !important;
  margin-bottom:   0.7rem        !important;  /* exact: .7rem */
  transition:      color 0.2s    !important;
  border:          none          !important;
}

.avgcxr-footer-col a:hover {
  color: var(--footer-link-hover) !important;
}

/* ── Footer bottom bar ── */
.avgcxr-footer-bottom {
  display:         flex               !important;
  justify-content: space-between      !important;
  flex-wrap:       wrap               !important;
  gap:             0.5rem             !important;
  border-top:      1px solid var(--footer-divider) !important;
  padding:         1.25rem 0          !important;  /* exact from header-footer.css */
  font-family:     var(--font)        !important;
  font-size:       0.72rem            !important;  /* exact: .72rem */
  font-weight:     400                !important;
  color:           var(--footer-text) !important;
}

.avgcxr-footer-bottom a {
  color:           var(--footer-text) !important;
  text-decoration: none               !important;
  border:          none               !important;
  transition:      color 0.2s         !important;
}

.avgcxr-footer-bottom a:hover {
  color: var(--footer-link-hover) !important;
}

/* ── Hide the old OJS footer elements inside new template ── */
.pkp_footer_content {
  display: none !important; /* replaced by avgcxr-footer-grid */
}

.pkp_brand_footer {
  display: none !important; /* PKP brand embedded in new footer bottom */
}

/* ── Responsive footer grid ── */
@media (max-width: 767px) {
  .avgcxr-footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .avgcxr-footer-brand {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 479px) {
  .avgcxr-footer-grid {
    grid-template-columns: 1fr !important;
  }
  .avgcxr-footer-bottom {
    flex-direction: column   !important;
    align-items:    center   !important;
    text-align:     center   !important;
  }
}

.pkp_footer_content {
  font-family: var(--font)             !important;
  font-size:   0.8rem                  !important;
  line-height: 1.7                     !important;
  color:       rgba(255,255,255,0.48)  !important;
  padding:     1.75rem 0 0.75rem       !important;
  text-align:  left                    !important;
}

.pkp_footer_content a {
  color:       rgba(255,255,255,0.62)   !important;
  border-bottom: 1px solid transparent  !important;
  transition:  color var(--t-f), border-color var(--t-f) !important;
}

.pkp_footer_content a:hover {
  color:             var(--cb-mid)  !important;
  border-bottom-color: var(--cb-mid) !important;
}

/* OJS / PKP brand */
.pkp_brand_footer {
  padding:         0.75rem 0 1.5rem !important;
  display:         flex             !important;
  justify-content: flex-end         !important;
  align-items:     center           !important;
  float:           none             !important;
}

.pkp_brand_footer a {
  float:   none         !important;
  display: inline-block !important;
  opacity: 0.24         !important;
  filter:  invert(1) brightness(2) !important;
  max-width: 110px      !important;
  transition: opacity var(--t) !important;
}

.pkp_brand_footer a:hover {
  opacity: 0.5 !important;
}


/* ================================================================
   SECTION 12  —  ARTICLE / ISSUE OBJECTS
   ================================================================ */

.obj_article_summary {
  font-family:   var(--font)      !important;
  padding-bottom: 1.5rem          !important;
  margin-bottom:  1.5rem          !important;
  border-bottom:  1px solid var(--gray-200) !important;
}

.obj_article_summary:last-child {
  border-bottom: none !important;
  margin-bottom: 0    !important;
}

.obj_article_summary .title a {
  font-family:    var(--font)  !important;
  font-size:      0.97rem      !important;
  font-weight:    700          !important;
  letter-spacing: -0.01em      !important;
  color:          var(--dark)  !important;
  line-height:    1.45         !important;
  text-decoration: none        !important;
  border-bottom:  none         !important;
  transition:     color var(--t-f) !important;
}

.obj_article_summary .title a:hover {
  color: var(--cb) !important;
}

.obj_article_summary .authors {
  font-family: var(--font)     !important;
  font-size:   0.8rem          !important;
  color:       var(--gray-400) !important;
  margin:      0.3rem 0        !important;
}

/* Issue section heading */
.pkp_structure_main .section h2 {
  font-family:    var(--font)     !important;
  font-size:      0.68rem         !important;
  font-weight:    800             !important;
  letter-spacing: 0.13em          !important;
  text-transform: uppercase       !important;
  color:          var(--cb)       !important;
  border-bottom:  2px solid var(--cb-light) !important;
  padding-bottom: 0.5rem          !important;
  margin:         2rem 0 1rem     !important;
}

/* Galley link badges */
.obj_galley_link a {
  font-family:    var(--font) !important;
  font-size:      0.7rem      !important;
  font-weight:    700         !important;
  letter-spacing: 0.04em      !important;
  border-radius:  var(--r-xs) !important;
}


/* ================================================================
   SECTION 13  —  FORMS & NOTIFICATIONS
   ================================================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="search"],
select,
textarea {
  font-family:   var(--font)  !important;
  font-size:     0.88rem      !important;
  border-radius: var(--r-sm)  !important;
  transition:    border-color var(--t-f), box-shadow var(--t-f) !important;
}

input:focus,
select:focus,
textarea:focus {
  outline:      none !important;
  border-color: var(--cb) !important;
  box-shadow:   0 0 0 3px rgba(0,87,184,0.14) !important;
}

.cmp_notification {
  font-family:   var(--font) !important;
  border-left-color: var(--cb) !important;
  background:    var(--cb-light) !important;
  border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
}

/* Pagination */
.cmp_pagination .prev,
.cmp_pagination .next {
  font-family: var(--font) !important;
  font-weight: 700         !important;
  color:       var(--cb)   !important;
}


/* ================================================================
   SECTION 14  —  MICRO ANIMATIONS
   ================================================================ */

@keyframes avgcxrFadeUp {
  from {
    opacity:   0;
    transform: translateY(18px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

.pkp_structure_main {
  animation: avgcxrFadeUp 0.38s ease both !important;
}


/* ================================================================
   SECTION 15  —  ACCESSIBILITY & FOCUS
   ================================================================ */

a:focus-visible,
button:focus-visible {
  outline:        3px solid var(--cb) !important;
  outline-offset: 3px !important;
  border-radius:  2px !important;
}

/* Screen reader only */
.pkp_screen_reader {
  position:   absolute !important;
  width:      1px      !important;
  height:     1px      !important;
  overflow:   hidden   !important;
  clip:       rect(0,0,0,0) !important;
  white-space: nowrap  !important;
}


/* ================================================================
   SECTION 16  —  USER NAV PROFILE DROPDOWN ALIGNMENT FIX
   The generic .pkp_nav_list ul rule sets left:0 for all dropdowns.
   We must override it specifically for the user nav so the profile
   menu (Dashboard / View Profile / Logout) drops down flush to the
   RIGHT edge of the username trigger, not the left edge of the page.
   ================================================================ */

/* Step 1 — give every user nav <li> a positioning context */
.pkp_navigation_user > li {
  position: relative !important;
}

/* Step 2 — anchor the nested dropdown to the right edge of its trigger */
.pkp_navigation_user > li > ul {
  left:    auto  !important;
  right:   0     !important;
  top:     100%  !important;
  position: absolute !important;
  min-width: 180px   !important;
}

/* Step 3 — keep the reveal behaviour consistent with the primary nav */
.pkp_navigation_user > li:hover > ul {
  left:    auto !important;
  right:   0    !important;
  top:     100% !important;
}


/* ================================================================
   SECTION 17  —  HIDE HOMEPAGE IMAGE ABOVE CURRENT ISSUE
   The .homepage_image block is rendered by indexJournal.tpl when a
   homepage image is uploaded in Journal Settings. We suppress it
   entirely because the hero section already handles visual branding.
   ================================================================ */
.homepage_image {
  display: none !important;
}


/* ================================================================
   SECTION 17B  —  CURRENT ISSUE & OJS HOMEPAGE SECTION HEADINGS
   Style the OJS-rendered "Current Issue" h2 and any other
   standard OJS homepage section headings to match the custom
   section heading token used throughout the homepage.
   The Current Issue heading is LEFT-aligned (academic journal
   convention); the homepage_about heading stays centred.
   ================================================================ */

/* Current Issue heading — left-aligned per academic journal spec */
.page_index_journal .avgcxr-ci__heading {
  font-family:    var(--font)              !important;
  font-size:      var(--section-h2)        !important;
  font-weight:    700                      !important;
  color:          var(--research-heading)  !important;
  line-height:    1.2                      !important;
  letter-spacing: -0.02em                  !important;
  text-align:     left                     !important;
  margin:         0                        !important;
  padding:        0                        !important;
  border:         none                     !important;
  background:     none                     !important;
}

/* Other OJS homepage headings — keep centred */
.page_index_journal .homepage_about > h2 {
  font-family:    var(--font)              !important;
  font-size:      var(--section-h2)        !important;
  font-weight:    700                      !important;
  color:          var(--research-heading)  !important;
  line-height:    1.2                      !important;
  letter-spacing: -0.02em                  !important;
  text-align:     center                   !important;
  margin:         0 0 32px                 !important;
  padding:        0                        !important;
  border:         none                     !important;
  background:     none                     !important;
}

@media (max-width: 991px) {
  .page_index_journal .avgcxr-ci__heading,
  .page_index_journal .homepage_about > h2 {
    font-size: 2.3rem !important;
  }
}

@media (max-width: 575px) {
  .page_index_journal .avgcxr-ci__heading,
  .page_index_journal .homepage_about > h2 {
    font-size: 1.9rem !important;
  }
}


/* ================================================================
   SECTION 18  —  ABOUT THE JOURNAL (Homepage)
   Full-width soft light-blue band inserted immediately after the
   hero section and before the Current Issue block.
   ================================================================ */

.avgcxr-about-journal {
  width:            100%;
  background-color: #FFFFFF;
  padding:          80px 0;
}

.avgcxr-about-journal__inner {
  max-width:  1200px;
  width:      90%;
  margin:     0 auto;
  display:    grid;
  grid-template-columns: 1fr 300px;
  gap:        48px;
  align-items: start;
}

/* ── Heading ── */
.pkp_structure_main .avgcxr-about-journal__heading,
.avgcxr-about-journal__heading {
  font-family:    var(--font)               !important;
  font-size:      2.8125rem                 !important;
  font-weight:    700                       !important;
  color:          #4A0D10                   !important;
  line-height:    1.2                       !important;
  margin:         0 0 40px                  !important;
  letter-spacing: -0.02em                   !important;
  text-align:     left                      !important;
}

/* ── Body wrapper — left red accent line matching Research website ── */
.avgcxr-about-journal__body {
  max-width:     900px;
  border-left:   4px solid #BF2229;
  padding-left:  28px;
}

/* ── Paragraphs ── */
.avgcxr-about-journal__body p {
  font-family:  var(--font)   !important;
  font-size:    clamp(1rem, 1.1vw, 1.125rem) !important;
  font-weight:  400           !important;
  color:        #000000       !important;
  line-height:  1.8           !important;
  margin:       0 0 24px      !important;
}

.avgcxr-about-journal__body p:last-child {
  margin-bottom: 0 !important;
}

/* ================================================================
   SECTION 18 — RESPONSIVE
   ================================================================ */

/* Tablet (≤ 991px) — stack About + sidebar vertically */
@media (max-width: 991px) {
  .avgcxr-about-journal {
    padding: 60px 0;
  }

  .avgcxr-about-journal__inner {
    grid-template-columns: 1fr !important;
    gap:                   36px !important;
  }

  .pkp_structure_main .avgcxr-about-journal__heading,
  .avgcxr-about-journal__heading {
    font-size: 2.3rem !important;
    margin-bottom: 28px !important;
  }

  .avgcxr-about-journal__body p {
    font-size: 1rem !important;
  }
}

/* Mobile (≤ 575px) */
@media (max-width: 575px) {
  .avgcxr-about-journal {
    padding: 48px 0;
  }

  .avgcxr-about-journal__inner {
    width: 92%;
    grid-template-columns: 1fr !important;
    gap:                   28px !important;
  }

  .pkp_structure_main .avgcxr-about-journal__heading,
  .avgcxr-about-journal__heading {
    font-size: 1.9rem !important;
    margin-bottom: 20px !important;
  }

  .avgcxr-about-journal__body {
    padding-left: 18px;
    border-left-width: 3px;
  }

  .avgcxr-about-journal__body p {
    font-size: 0.95rem !important;
    line-height: 1.75 !important;
  }
}


/* ── Left column wrapper ── */
.avgcxr-about-journal__left {
  min-width: 0;
}

/* ── Right column: sidebar blocks ── */
.avgcxr-about-journal__sidebar {
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
  min-width:      0;
}

/* Style the OJS blocks inside the sidebar slot — matches Why Publish card style */
.avgcxr-about-journal__sidebar .pkp_block {
  background:    var(--research-card-bg)               !important;
  border:        1.5px solid #9E1B21                   !important;
  border-radius: 18px                                  !important;
  padding:       28px 28px                             !important;
  box-shadow:    var(--s-xs)                           !important;
  margin-bottom: 0                                     !important;
  transition:    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                 box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.avgcxr-about-journal__sidebar .pkp_block:hover {
  transform:  translateY(-6px)                         !important;
  box-shadow: 0 16px 40px rgba(74, 13, 16, 0.12)       !important;
}

/* Card heading ("INFORMATION", "LATEST PUBLICATIONS") */
.avgcxr-about-journal__sidebar .pkp_block .title {
  font-family:    'Montserrat', sans-serif              !important;
  font-size:      0.72rem                              !important;
  font-weight:    800                                  !important;
  letter-spacing: 0.1em                                !important;
  text-transform: uppercase                            !important;
  color:          #4A0D10                              !important;
  margin:         0 0 0.9rem                           !important;
  padding:        0 0 0.7rem                           !important;
  border-bottom:  1.5px solid #9E1B21                  !important;
  background:     none                                 !important;
}

/* All content text inside the sidebar cards */
.avgcxr-about-journal__sidebar .pkp_block .content,
.avgcxr-about-journal__sidebar .pkp_block .content a,
.avgcxr-about-journal__sidebar .pkp_block li,
.avgcxr-about-journal__sidebar .pkp_block p {
  font-family: 'Montserrat', sans-serif                !important;
  color:       #000000                                 !important;
}

/* Links in the Information block */
.avgcxr-about-journal__sidebar .pkp_block .content a {
  font-size:       0.88rem                             !important;
  font-weight:     500                                 !important;
  text-decoration: none                                !important;
  transition:      color 0.15s ease                    !important;
}

.avgcxr-about-journal__sidebar .pkp_block .content a:hover,
.avgcxr-about-journal__sidebar .pkp_block .content a:focus {
  color:           #9E1B21                             !important;
  text-decoration: underline                           !important;
}

/* Horizontal separator lines between list items */
.avgcxr-about-journal__sidebar .pkp_block .content li {
  border-bottom: 1.5px solid #9E1B21                   !important;
  padding:       0.5rem 0                              !important;
  list-style:    none                                  !important;
  font-size:     0.88rem                               !important;
}

.avgcxr-about-journal__sidebar .pkp_block .content li:last-child {
  border-bottom: none                                  !important;
}

.avgcxr-about-journal__sidebar .pkp_block .content ul {
  list-style: none  !important;
  padding:    0     !important;
  margin:     0     !important;
}


/* ================================================================
   SECTION 19  —  CALL FOR PAPERS (Homepage)
   Inserted after "About the Journal" (Section 18) and before the
   Current Issue block.
   ================================================================ */

/* ── Section wrapper ── */
.avgcxr-cfp {
  width:            100%;
  background-color: #FFFFFF;
  padding:          80px 0;
}

/* ── Centred inner container ── */
.avgcxr-cfp__inner {
  max-width: 1200px;
  width:     90%;
  margin:    0 auto;
}

/* ── Section heading ── */
.pkp_structure_main .avgcxr-cfp__heading,
.avgcxr-cfp__heading {
  font-family:    var(--font)               !important;
  font-size:      2.8125rem                 !important;
  font-weight:    700                       !important;
  color:          #4A0D10                   !important;
  line-height:    1.2                       !important;
  margin:         0 0 24px                  !important;
  letter-spacing: -0.02em                   !important;
  text-align:     center                    !important;
}

/* ── Intro paragraph ── */
.avgcxr-cfp__intro {
  font-family:  var(--font)                        !important;
  font-size:    clamp(1rem, 1.1vw, 1.125rem)       !important;
  font-weight:  400                                !important;
  color:        #000000                            !important;
  line-height:  1.8                                !important;
  margin:       0 auto 48px                        !important;
  max-width:    860px                              !important;
  text-align:   center                             !important;
}

/* ── Information card ── */
.avgcxr-cfp__card {
  background:    var(--research-card-bg);
  border-radius: 18px;
  border:        1px solid var(--research-border);
  box-shadow:    0 4px 24px rgba(74, 13, 16, 0.07);
  overflow:      hidden;
  margin-bottom: 48px;
  transition:    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                 box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.avgcxr-cfp__card:hover {
  transform:  translateY(-4px);
  box-shadow: 0 12px 36px rgba(74, 13, 16, 0.11);
}

/* ── Individual rows ── */
.avgcxr-cfp__row {
  display:       grid;
  grid-template-columns: 220px 1fr;
  align-items:   start;
  gap:           0 32px;
  padding:       18px 32px;
  border-bottom: 1px solid var(--research-border-row);
}

.avgcxr-cfp__row--last {
  border-bottom: none;
}

/* ── Label column — highlighted in brand maroon, bold ── */
.avgcxr-cfp__label {
  font-family:  var(--font)                !important;
  font-size:    1rem                       !important;
  font-weight:  700                        !important;
  color:        var(--research-heading)    !important;
  line-height:  1.6                        !important;
  padding-top:  2px                        !important;
}

/* ── Value column — plain black body text ── */
.avgcxr-cfp__value {
  font-family:  var(--font)  !important;
  font-size:    0.9rem       !important;
  font-weight:  400          !important;
  color:        #000000      !important;
  line-height:  1.7          !important;
}

/* ── CTA wrapper — centred ── */
.avgcxr-cfp__cta-wrap {
  display:         flex;
  justify-content: center;
}

/* ── CTA button — research-brand maroon pill, overrides the dark hero button ── */
.avgcxr-cfp__cta,
a.avgcxr-cfp__cta {
  background:   var(--research-cta)                 !important;
  color:        #ffffff                             !important;
  box-shadow:   0 4px 20px rgba(191, 34, 41, 0.30) !important;
}

.avgcxr-cfp__cta:hover,
.avgcxr-cfp__cta:focus,
.avgcxr-cfp__cta:active,
.avgcxr-cfp__cta:visited,
a.avgcxr-cfp__cta:hover,
a.avgcxr-cfp__cta:focus,
a.avgcxr-cfp__cta:active,
a.avgcxr-cfp__cta:visited {
  background:   var(--research-cta-dark)            !important;
  color:        #ffffff                             !important;
  box-shadow:   0 8px 28px rgba(191, 34, 41, 0.42) !important;
}

/* ================================================================
   SECTION 19 — RESPONSIVE
   ================================================================ */

/* Tablet (≤ 991px) */
@media (max-width: 991px) {
  .avgcxr-cfp {
    padding: 60px 0;
  }

  .pkp_structure_main .avgcxr-cfp__heading,
  .avgcxr-cfp__heading {
    font-size: 2.3rem !important;
  }

  .avgcxr-cfp__row {
    grid-template-columns: 180px 1fr;
    gap:                   0 20px;
    padding:               16px 24px;
  }
}

/* Mobile (≤ 575px) */
@media (max-width: 575px) {
  .avgcxr-cfp {
    padding: 48px 0;
  }

  .avgcxr-cfp__inner {
    width: 92%;
  }

  .pkp_structure_main .avgcxr-cfp__heading,
  .avgcxr-cfp__heading {
    font-size: 1.9rem !important;
  }

  .avgcxr-cfp__intro {
    font-size:     0.95rem !important;
    margin-bottom: 32px    !important;
  }

  /* Stack into single column on mobile */
  .avgcxr-cfp__row {
    grid-template-columns: 1fr;
    gap:                   4px 0;
    padding:               14px 20px;
  }

  .avgcxr-cfp__label {
    font-size: 0.78rem !important;
    color:     var(--research-heading) !important;
  }

  .avgcxr-cfp__value {
    font-size: 0.88rem !important;
  }

  .avgcxr-cfp__card {
    border-radius: 10px;
    margin-bottom: 32px;
  }
}


/* ================================================================
   SECTION 20  —  WHY PUBLISH IN IJAXD (Homepage)
   4-column feature card grid. Inserted after the Call for Papers
   section. Visual reference: AVGCXR Solutions Research website
   "Why choose AVGC XR for research?" section.
   ================================================================ */

/* ── Section wrapper — white background, generous vertical padding ── */
.avgcxr-why-publish {
  width:            100%;
  background-color: #FFFFFF;
  padding:          100px 0;
}

/* ── Centred inner container ── */
.avgcxr-why-publish__inner {
  max-width: 1200px;
  width:     90%;
  margin:    0 auto;
}

/* ── Section header block ── */
.avgcxr-why-publish__header {
  text-align:    center;
  margin-bottom: 64px;
  max-width:     760px;
  margin-left:   auto;
  margin-right:  auto;
}

/* ── Section heading ── */
.pkp_structure_main .avgcxr-why-publish__heading,
.avgcxr-why-publish__heading {
  font-family:    var(--font)               !important;
  font-size:      2.8125rem                 !important;
  font-weight:    700                       !important;
  color:          #4A0D10                   !important;
  line-height:    1.2                       !important;
  margin:         0 0 20px                  !important;
  letter-spacing: -0.02em                   !important;
}

/* ── Subtitle ── */
.avgcxr-why-publish__subtitle {
  font-family:  var(--font)                        !important;
  font-size:    clamp(1rem, 1.1vw, 1.1rem)         !important;
  font-weight:  400                                !important;
  color:        #000000                            !important;
  line-height:  1.75                               !important;
  margin:       0                                  !important;
}

/* ── 4-column card grid ── */
.avgcxr-why-publish__grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   28px;
  align-items:           stretch;
}

/* ── Individual feature card ── */
.avgcxr-why-card {
  background:    var(--research-card-bg);
  border:        1.5px solid var(--research-border);
  border-radius: 18px;
  padding:       36px 28px;
  display:       flex;
  flex-direction: column;
  gap:           20px;
  /* Lift animation on hover */
  transition:    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                 box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                 border-color 0.28s ease;
  /* Entrance animation — staggered via nth-child below */
  animation:     avgcxrFadeUp 0.42s ease both;
}

.avgcxr-why-card:hover {
  transform:    translateY(-8px);
  box-shadow:   0 20px 48px rgba(74, 13, 16, 0.10);
  border-color: #E8B4B8;
}

/* Stagger card entrance */
.avgcxr-why-card:nth-child(1) { animation-delay: 0.05s; }
.avgcxr-why-card:nth-child(2) { animation-delay: 0.12s; }
.avgcxr-why-card:nth-child(3) { animation-delay: 0.19s; }
.avgcxr-why-card:nth-child(4) { animation-delay: 0.26s; }

/* ── Circular icon container ── */
.avgcxr-why-card__icon-wrap {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           56px;
  height:          56px;
  border-radius:   50%;
  background-color: var(--research-icon-bg);
  flex-shrink:     0;
  transition:      background-color 0.25s ease;
}

.avgcxr-why-card:hover .avgcxr-why-card__icon-wrap {
  background-color: var(--research-icon-bg-hover);
}

/* ── SVG icon ── */
.avgcxr-why-card__icon {
  width:  26px;
  height: 26px;
  color:  var(--research-heading);
  display: block;
  flex-shrink: 0;
}

/* ── Card heading ── */
.avgcxr-why-card__title {
  font-family:    var(--font)              !important;
  font-size:      1.5625rem                !important;   /* ~25px */
  font-weight:    700                      !important;
  color:          #4A0D10                  !important;
  line-height:    1.3                      !important;
  margin:         0                        !important;
  letter-spacing: -0.01em                  !important;
}

.avgcxr-why-publish .avgcxr-why-card__title,
.avgcxr-why-publish h3.avgcxr-why-card__title {
  color: #4A0D10 !important;
}

/* ── Card body text ── */
.avgcxr-why-card__body {
  font-family:  var(--font)              !important;
  font-size:    0.92rem                  !important;
  font-weight:  400                      !important;
  color:        var(--research-text)     !important;
  line-height:  1.75                     !important;
  margin:       0                        !important;
  flex:         1;
}

/* ================================================================
   SECTION 20 — RESPONSIVE
   ================================================================ */

/* Tablet — 2 columns (≤ 1024px) */
@media (max-width: 1024px) {
  .avgcxr-why-publish {
    padding: 80px 0;
  }

  .avgcxr-why-publish__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .avgcxr-why-publish__header {
    margin-bottom: 48px;
  }
}

/* Small tablet (≤ 767px) */
@media (max-width: 767px) {
  .avgcxr-why-publish {
    padding: 64px 0;
  }

  .pkp_structure_main .avgcxr-why-publish__heading,
  .avgcxr-why-publish__heading {
    font-size: 2.3rem !important;
  }

  .avgcxr-why-publish__grid {
    gap: 20px;
  }

  .avgcxr-why-card {
    padding: 28px 22px;
    border-radius: 16px;
  }
}

/* Mobile — 1 column (≤ 575px) */
@media (max-width: 575px) {
  .avgcxr-why-publish {
    padding: 52px 0;
  }

  .avgcxr-why-publish__inner {
    width: 92%;
  }

  .avgcxr-why-publish__header {
    margin-bottom: 36px;
  }

  .pkp_structure_main .avgcxr-why-publish__heading,
  .avgcxr-why-publish__heading {
    font-size: 1.9rem !important;
  }

  .avgcxr-why-publish__subtitle {
    font-size: 0.95rem !important;
  }

  .avgcxr-why-publish__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .avgcxr-why-card {
    padding: 24px 20px;
  }
}


/* ================================================================
   SECTION 21  —  SCROLL HEADER (Homepage)
   Default state (page top): solid white — same as all other pages.
   After scrolling past SCROLL_THRESHOLD px the JS adds .scrolled and
   the header transitions to the frosted-glass style defined in the
   global .scrolled rule in Section 3.
   Nav link colours remain dark (#000) at all times because the header
   is never transparent — no colour overrides needed here.
   ================================================================ */

/* Ensure the homepage header is NOT transparent at load — override any
   browser or framework default that might strip the background. */
body.pkp_page_index .pkp_structure_head,
body.pkp_page_index .avgcxr-navbar {
  background:    #ffffff                        !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow:    none                           !important;
  /* Smooth transition for the scroll effect */
  transition:    background 0.28s ease,
                 border-color 0.28s ease,
                 box-shadow 0.28s ease,
                 backdrop-filter 0.28s ease     !important;
}

/* Scrolled state on homepage — inherits the global .scrolled rule from
   Section 3. This rule exists only to explicitly cancel any accidental
   solid-white override that could fight Section 3. */
body.pkp_page_index .pkp_structure_head.scrolled,
body.pkp_page_index .avgcxr-navbar.scrolled {
  background:              rgba(249, 247, 244, 0.45) !important;
  backdrop-filter:         blur(20px)                !important;
  -webkit-backdrop-filter: blur(20px)                !important;
  box-shadow:              0 4px 18px rgba(0,0,0,0.10) !important;
  border-bottom:           1px solid rgba(0, 0, 0, 0.06) !important;
}


/* ================================================================
   SECTION 22  —  CURRENT ISSUE (Homepage Redesign)
   Academic-journal layout:
     • Left-aligned heading + full-width divider
     • Issue title (h2 in ci-issue-meta) + publication date
     • "Articles" subsection with left accent line
     • Responsive article cards: title · authors · PDF button
   All content is dynamic — pulled from OJS $publishedSubmissions.
   ================================================================ */

/* ── Section wrapper ── */
.avgcxr-ci {
  width:            100%;
  background-color: #FFFFFF;
  padding:          80px 0 96px;
}

.avgcxr-ci__inner {
  max-width: 1200px;
  width:     90%;
  margin:    0 auto;
}

/* ── Section heading ("Current Issue") ── */
/* Base styles live in Section 17B above (.avgcxr-ci__heading).
   No additional overrides needed here. */

/* ── Full-width divider under heading ── */
.avgcxr-ci__divider {
  border:        none                                    !important;
  border-top:    4px solid var(--research-cta)           !important;
  margin:        18px 0 36px                             !important;
  width:         100%                                    !important;
  opacity:       1                                       !important;
}

/* ── Issue meta block (title + date) ── */
.ci-issue-meta {
  margin-bottom: 2.5rem;   /* ~two blank lines of space before Articles */
}

/* Issue identification h2 — e.g. "Vol. 1 No. 1 (2026): Test" */
.ci-issue-meta .ci-issue-title,
.ci-issue-title {
  font-family:    var(--font)             !important;
  font-size:      clamp(1.25rem, 2vw, 1.6rem) !important;
  font-weight:    700                     !important;
  color:          var(--research-heading) !important;   /* #4A0D10 */
  line-height:    1.3                     !important;
  margin:         0 0 0                   !important;
  padding:        0 0 14px               !important;
  border:         none                    !important;
  border-bottom:  3px solid #4A0D10      !important;   /* brown accent line */
  background:     none                    !important;
  letter-spacing: -0.01em                 !important;
  display:        inline-block            !important;
}

/* Ensure the meta block provides spacing between accent line and date */
.ci-issue-meta .ci-issue-title {
  margin-bottom: 16px !important;
}

/* Publication date */
.ci-issue-date {
  font-family:  var(--font)    !important;
  font-size:    0.95rem        !important;
  font-weight:  400            !important;
  color:        #000000        !important;
  margin:       0              !important;
  line-height:  1.5            !important;
}

/* ── Articles section wrapper ── */
.ci-articles-section {
  margin-top: 0;
}

/* ── Section heading row with left accent line ── */
.ci-section-heading-wrap {
  display:     flex;
  align-items: center;
  gap:         14px;
  margin-bottom: 24px;
}

/* Vertical accent line */
.ci-section-accent {
  display:          block;
  flex-shrink:      0;
  width:            4px;
  height:           28px;
  background-color: var(--research-cta);   /* #BF2229 */
  border-radius:    2px;
}

/* "Articles" heading */
.ci-section-heading-wrap .ci-section-heading,
.ci-section-heading {
  font-family:    var(--font)             !important;
  font-size:      1.35rem                 !important;
  font-weight:    700                     !important;
  color:          var(--research-heading) !important;
  line-height:    1.2                     !important;
  margin:         0                       !important;
  padding:        0                       !important;
  border:         none                    !important;
  background:     none                    !important;
  letter-spacing: -0.01em                 !important;
}

/* ── Article cards grid ── */
.ci-articles-grid {
  display:               grid;
  grid-template-columns: 1fr;   /* single column default; expands at desktop */
  gap:                   20px;
}

/* ── Individual article card ── */
.ci-article-card {
  background:    var(--research-card-bg);
  border:        1px solid var(--research-border);
  border-radius: var(--r-lg);
  padding:       28px 32px;
  box-shadow:    var(--s-xs);
  transition:    transform var(--t), box-shadow var(--t);
}

.ci-article-card:hover {
  transform:  translateY(-3px);
  box-shadow: var(--s);
}

/* ── A. Article title ── */
.ci-article-title {
  font-family:  var(--font)    !important;
  font-size:    1.05rem        !important;
  font-weight:  700            !important;
  line-height:  1.5            !important;
  margin:       0 0 8px        !important;
  padding:      0              !important;
  border:       none           !important;
  background:   none           !important;
}

.ci-article-title a {
  color:           var(--research-heading) !important;
  text-decoration: none                    !important;
  transition:      color var(--t-f)        !important;
}

.ci-article-title a:hover,
.ci-article-title a:focus {
  color:           var(--research-cta)     !important;
  text-decoration: underline               !important;
}

.ci-article-subtitle {
  display:     block;
  font-weight: 400;
  font-size:   0.93em;
  margin-top:  4px;
  color:       var(--gray-600);
}

/* ── B. Authors ── */
.ci-article-authors {
  font-family:  var(--font) !important;
  font-size:    0.92rem     !important;
  font-weight:  400         !important;
  color:        #000000     !important;
  line-height:  1.5         !important;
  margin:       0 0 16px    !important;
}

/* ── C. Galley buttons row ── */
.ci-article-galleys {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
  margin:    0;
}

/* Base galley button */
.ci-galley-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  padding:         7px 18px;
  font-family:     var(--font)   !important;
  font-size:       0.8rem        !important;
  font-weight:     700           !important;
  letter-spacing:  0.06em        !important;
  text-transform:  uppercase     !important;
  text-decoration: none          !important;
  border-radius:   var(--r-sm)   !important;
  border:          none          !important;
  cursor:          pointer;
  transition:      background var(--t), color var(--t), transform var(--t-f), box-shadow var(--t) !important;
  line-height:     1             !important;
}

/* PDF button — primary red */
.ci-galley-btn--pdf {
  background: var(--research-cta)   !important;
  color:      #ffffff               !important;
  box-shadow: 0 2px 8px rgba(191, 34, 41, 0.28) !important;
}

.ci-galley-btn--pdf:hover,
.ci-galley-btn--pdf:focus {
  background:  var(--research-cta-dark) !important;
  color:       #ffffff                  !important;
  transform:   translateY(-1px)         !important;
  box-shadow:  0 4px 14px rgba(191, 34, 41, 0.38) !important;
  text-decoration: none                 !important;
}

.ci-galley-btn--pdf:active {
  transform: translateY(0) !important;
}

/* PDF button icon */
.ci-galley-btn__icon {
  width:       14px;
  height:      14px;
  flex-shrink: 0;
}

/* Other galley types — outlined style */
.ci-galley-btn--other {
  background:  transparent                !important;
  color:       var(--research-heading)    !important;
  border:      1px solid var(--research-heading) !important;
  box-shadow:  none                       !important;
}

.ci-galley-btn--other:hover,
.ci-galley-btn--other:focus {
  background:  var(--research-heading)    !important;
  color:       #ffffff                    !important;
  transform:   translateY(-1px)           !important;
  text-decoration: none                   !important;
}

/* ── View all issues footer link ── */
.avgcxr-ci__footer {
  margin-top: 40px;
  text-align: left;
}

.avgcxr-ci__all-issues-link {
  font-family:     var(--font)            !important;
  font-size:       0.9rem                 !important;
  font-weight:     600                    !important;
  color:           var(--research-cta)    !important;
  text-decoration: none                   !important;
  border-bottom:   1px solid transparent  !important;
  transition:      color var(--t-f), border-color var(--t-f) !important;
  letter-spacing:  0.02em                 !important;
}

.avgcxr-ci__all-issues-link:hover,
.avgcxr-ci__all-issues-link:focus {
  color:        var(--research-cta-dark)  !important;
  border-color: var(--research-cta-dark)  !important;
  text-decoration: none                   !important;
}

/* ── OJS default .obj_issue_toc wrapper — strip default styles ── */
.avgcxr-ci .obj_issue_toc {
  margin:     0   !important;
  padding:    0   !important;
  border:     none !important;
  background: none !important;
}

/* ================================================================
   SECTION 22 — RESPONSIVE
   ================================================================ */

/* Desktop wide: two-column card grid (≥ 900px) */
@media (min-width: 900px) {
  .ci-articles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet (≤ 991px) */
@media (max-width: 991px) {
  .avgcxr-ci {
    padding: 64px 0 80px;
  }

  .ci-article-card {
    padding: 24px 26px;
  }
}

/* Small tablet (≤ 767px) */
@media (max-width: 767px) {
  .avgcxr-ci {
    padding: 52px 0 68px;
  }

  /* Force single column */
  .ci-articles-grid {
    grid-template-columns: 1fr;
  }

  .ci-issue-title {
    font-size: 1.25rem !important;
  }
}

/* Mobile (≤ 575px) */
@media (max-width: 575px) {
  .avgcxr-ci {
    padding: 44px 0 56px;
  }

  .avgcxr-ci__inner {
    width: 92%;
  }

  .avgcxr-ci__divider {
    margin: 14px 0 28px !important;
  }

  .ci-issue-meta {
    margin-bottom: 2rem;
  }

  .ci-article-card {
    padding: 20px 18px;
    border-radius: var(--r);
  }

  .ci-article-title {
    font-size: 1rem !important;
  }

  .ci-article-authors {
    font-size: 0.88rem !important;
  }

  .ci-galley-btn {
    padding:   6px 14px !important;
    font-size: 0.75rem  !important;
  }

  .ci-section-accent {
    height: 22px;
  }

  .ci-section-heading-wrap .ci-section-heading,
  .ci-section-heading {
    font-size: 1.15rem !important;
  }
}


/* ================================================================
   ARCHIVES PAGE
   ================================================================ */

/* "Archives" h1 heading — brand brown, with #9E1B21 accent underline */
.page_issue_archive h1 {
  color:          #4A0D10         !important;
  font-family:    var(--font)     !important;
  font-weight:    700             !important;
  letter-spacing: -0.01em        !important;
  border-bottom:  2px solid #9E1B21 !important;
  padding-bottom: 0.5rem         !important;
}

/* ================================================================
   ABOUT THE JOURNAL PAGE — subheading color
   ================================================================ */

/* Bold subheadings in the About page body ("Focus and scope",
   "Peer review process", "Review stages", etc.) — entered as rich
   text so they render as <strong> or <b> inside <p> blocks.        */
.page_about strong,
.page_about b,
.page_about h2,
.page_about h3,
.page_about h4 {
  color: #4A0D10 !important;
}

/* ================================================================
   SUBMISSIONS PAGE — subheading color
   ================================================================ */

/* Template h2s ("Author Guidelines", "Submission Checklist", etc.)
   and bold subheadings inside rich-text content areas              */
.page_submissions h2,
.page_submissions h3,
.page_submissions h4,
.page_submissions strong,
.page_submissions b {
  color: #4A0D10 !important;
}

/* ================================================================
   STICKY FOOTER
   ----------------------------------------------------------------
   DOM hierarchy (confirmed from header.tpl + footer.tpl):

     <body>  ← padding-top: var(--header-h) for fixed header
       <div class="pkp_structure_page">        ← flex column
         <header class="pkp_structure_head">
         <div class="pkp_structure_content">  ← flex: 1  (grows)
           <div class="pkp_structure_main">
         </div>
         <div class="pkp_structure_footer_wrapper">  ← last child, stays at bottom
       </div>
     </body>

   The footer is INSIDE .pkp_structure_page, so that is the
   correct flex parent — NOT body/html.
   min-height accounts for body's padding-top (the fixed header).
   The homepage cancels this because it uses its own full-bleed
   layout with individual sections.
   ================================================================ */

.pkp_structure_page {
  display:        flex                                      !important;
  flex-direction: column                                    !important;
  min-height:     calc(100vh - var(--header-h))             !important;
}

.pkp_structure_content {
  flex:           1 0 auto                                  !important;
}

.pkp_structure_footer_wrapper {
  flex-shrink:    0                                         !important;
}

/* Cancel sticky-footer flex on the homepage — it uses its own
   full-viewport hero + stacked section layout                   */
body.pkp_page_index .pkp_structure_page {
  display:    block     !important;
  min-height: 0         !important;
  flex:       none      !important;
}

body.pkp_page_index .pkp_structure_content {
  flex: none !important;
}


/* ================================================================
   LOGIN & REGISTER PAGES  —  Premium redesign
   Targets: .page_login  /  .page_register
   No JS, no template logic changes, no other pages affected.
   ================================================================ */

/* ── 1. Page wrapper — center the card with breathing room ── */
.page_login,
.page_register {
  width:      100%                          !important;
  max-width:  600px                         !important;
  margin:     3rem auto 4rem               !important;
  padding:    0 1.25rem                    !important;
  box-sizing: border-box                   !important;
}

/* ── 2. Breadcrumbs — tighten up above the heading ── */
.page_login .breadcrumb,
.page_register .breadcrumb {
  margin-bottom: 1.25rem !important;
}

/* ── 3. Page heading ── */
.page_login h1,
.page_register h1 {
  font-family:    var(--font)               !important;
  font-size:      clamp(2rem, 4vw, 2.6rem)  !important;
  font-weight:    700                       !important;
  color:          #4A0D10                   !important;
  margin:         0 0 0.6rem               !important;
  padding-bottom: 0.55rem                   !important;
  line-height:    1.2                       !important;
  letter-spacing: -0.01em                  !important;
  border:         none                      !important;
  border-bottom:  3px solid #9E1B21         !important;
  width:          100%                      !important;
}

/* Remove the short ::after pseudo-element — the border-bottom above
   serves as the single accent line matching the card width below    */
.page_login h1::after,
.page_register h1::after {
  display: none !important;
}

/* ── 4. Required-field note ── */
.page_login > p,
.page_register > p {
  font-family: var(--font)      !important;
  font-size:   0.85rem          !important;
  color:       var(--gray-600)  !important;
  margin:      0.5rem 0 1.5rem !important;
}

/* ── 5. Card — wrap the form in a white elevated card ── */
.page_login .cmp_form,
.page_register .cmp_form {
  background:    #FFFFFF                         !important;
  border-radius: 14px                            !important;
  box-shadow:    0 4px 32px rgba(0,0,0,0.10),
                 0 1px 6px  rgba(0,0,0,0.06)    !important;
  padding:       2.5rem 2.25rem                  !important;
  border:        1px solid var(--gray-200)       !important;
}

/* ── 6. Fieldset resets ── */
.page_login fieldset,
.page_register fieldset {
  border:  none    !important;
  padding: 0       !important;
  margin:  0       !important;
}

.page_login fieldset.fields,
.page_register fieldset.fields,
.page_register fieldset.identity,
.page_register fieldset.login,
.page_register fieldset.consent,
.page_register fieldset.reviewer {
  display:        flex         !important;
  flex-direction: column       !important;
  gap:            1.35rem      !important;
}

.page_register fieldset.identity,
.page_register fieldset.login {
  margin-bottom: 1.5rem !important;
}

/* Fieldset legend styling */
.page_register fieldset.identity > legend,
.page_register fieldset.login > legend,
.page_register fieldset.reviewer > legend {
  font-family:    var(--font)    !important;
  font-size:      0.72rem        !important;
  font-weight:    800            !important;
  letter-spacing: 0.1em          !important;
  text-transform: uppercase      !important;
  color:          #4A0D10        !important;
  padding-bottom: 0.6rem         !important;
  border-bottom:  1.5px solid #9E1B21 !important;
  width:          100%           !important;
  margin-bottom:  0.25rem        !important;
}

/* ── 7. Field rows ── */
.page_login .username,
.page_login .password,
.page_login .remember,
.page_register .given_name,
.page_register .family_name,
.page_register .affiliation,
.page_register .country,
.page_register .email,
.page_register .password,
.page_register .reviewer_interests,
.page_register .reviewer_nocontext_interests,
.page_register .optin {
  display:        flex         !important;
  flex-direction: column       !important;
  gap:            0.4rem       !important;
}

/* ── 8. Labels ── */
.page_login label,
.page_register label {
  display:        flex         !important;
  flex-direction: column       !important;
  gap:            0.4rem       !important;
  font-family:    var(--font)  !important;
  font-size:      0.9rem       !important;
  font-weight:    600          !important;
  color:          #4A0D10      !important;
  cursor:         default      !important;
}

.page_login .label,
.page_register .label {
  font-family: var(--font)  !important;
  font-size:   0.9rem       !important;
  font-weight: 600          !important;
  color:       #4A0D10      !important;
}

/* Required asterisk */
.page_login .required,
.page_register .required {
  color:       #BF2229     !important;
  margin-left: 2px         !important;
  font-weight: 700         !important;
}

/* ── 9. Text, email, password inputs ── */
.page_login input[type="text"],
.page_login input[type="password"],
.page_login input[type="email"],
.page_register input[type="text"],
.page_register input[type="password"],
.page_register input[type="email"],
.page_register select {
  width:         100%                       !important;
  height:        48px                       !important;
  padding:       0 1rem                     !important;
  font-family:   var(--font)               !important;
  font-size:     0.95rem                   !important;
  font-weight:   400                        !important;
  color:         var(--gray-800)           !important;
  background:    #FFFFFF                   !important;
  border:        1.5px solid #dcdcdc       !important;
  border-radius: 9px                       !important;
  outline:       none                      !important;
  box-shadow:    none                      !important;
  transition:    border-color 0.2s ease,
                 box-shadow   0.2s ease    !important;
  box-sizing:    border-box               !important;
  -webkit-appearance: none               !important;
  appearance:    none                    !important;
}

.page_register select {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234A0D10' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat:   no-repeat                  !important;
  background-position: right 1rem center          !important;
  padding-right:       2.5rem                     !important;
}

/* Focus state */
.page_login input[type="text"]:focus,
.page_login input[type="password"]:focus,
.page_login input[type="email"]:focus,
.page_register input[type="text"]:focus,
.page_register input[type="password"]:focus,
.page_register input[type="email"]:focus,
.page_register select:focus {
  border-color: #9E1B21                            !important;
  box-shadow:   0 0 0 3px rgba(158,27,33,0.12)    !important;
  outline:      none                               !important;
}

/* ── 10. Checkbox rows ── */
.page_login .remember label,
.page_register .optin label,
.page_register .optin-privacy label,
.page_register .optin-email label {
  flex-direction: row        !important;
  align-items:    flex-start !important;
  gap:            0.6rem     !important;
  font-weight:    400        !important;
  color:          var(--gray-700) !important;
  cursor:         pointer    !important;
  line-height:    1.5        !important;
}

.page_login .remember input[type="checkbox"],
.page_register input[type="checkbox"] {
  width:         16px    !important;
  height:        16px    !important;
  margin:        3px 0 0 !important;
  flex-shrink:   0       !important;
  accent-color:  #9E1B21 !important;
  cursor:        pointer !important;
}

/* ── 11. Error block ── */
.page_login .pkp_form_error,
.page_register .pkp_form_error {
  background:    #FEF2F2          !important;
  border:        1px solid #FCA5A5 !important;
  border-radius: 8px              !important;
  padding:       0.85rem 1rem     !important;
  color:         #991B1B          !important;
  font-family:   var(--font)      !important;
  font-size:     0.9rem           !important;
  font-weight:   500              !important;
  margin-bottom: 1rem             !important;
}

/* ── 12. Buttons row ── */
.page_login .buttons,
.page_register .buttons {
  display:        flex         !important;
  align-items:    center       !important;
  gap:            1.25rem      !important;
  flex-wrap:      wrap         !important;
  margin-top:     0.5rem       !important;
}

/* Primary submit button */
.page_login .buttons button.submit,
.page_register .buttons button.submit {
  display:         inline-flex           !important;
  align-items:     center                !important;
  justify-content: center                !important;
  height:          48px                  !important;
  padding:         0 2rem                !important;
  background:      #BF2229              !important;
  color:           #FFFFFF              !important;
  font-family:     var(--font)          !important;
  font-size:       0.9rem               !important;
  font-weight:     700                  !important;
  letter-spacing:  0.05em              !important;
  text-transform:  uppercase           !important;
  border:          none                 !important;
  border-radius:   60px                 !important;
  box-shadow:      0 4px 16px rgba(191,34,41,0.30) !important;
  cursor:          pointer              !important;
  transition:      background 0.2s ease,
                   transform  0.15s ease,
                   box-shadow 0.2s ease !important;
  outline:         none                 !important;
}

.page_login .buttons button.submit:hover,
.page_register .buttons button.submit:hover {
  background:  #9E1B21                           !important;
  transform:   translateY(-2px)                  !important;
  box-shadow:  0 8px 24px rgba(158,27,33,0.38)  !important;
}

.page_login .buttons button.submit:active,
.page_register .buttons button.submit:active {
  transform:  translateY(0)   !important;
  box-shadow: none            !important;
}

/* ── 13. Secondary links (Register / Login / Forgot password) ── */
.page_login .buttons a.register,
.page_register .buttons a.login {
  font-family:     var(--font)   !important;
  font-size:       0.88rem       !important;
  font-weight:     500           !important;
  color:           #9E1B21       !important;
  text-decoration: none          !important;
  border:          none          !important;
  background:      none          !important;
  box-shadow:      none          !important;
  transition:      color 0.15s ease !important;
}

.page_login .buttons a.register:hover,
.page_register .buttons a.login:hover {
  color:           #4A0D10       !important;
  text-decoration: underline     !important;
}

/* Forgot password link inside label */
.page_login .password label a {
  font-family:     var(--font)   !important;
  font-size:       0.82rem       !important;
  font-weight:     500           !important;
  color:           #9E1B21       !important;
  text-decoration: none          !important;
  align-self:      flex-start    !important;
  margin-top:      0.1rem        !important;
  transition:      color 0.15s ease !important;
}

.page_login .password label a:hover {
  color:           #4A0D10       !important;
  text-decoration: underline     !important;
}

/* ── 14. OJS notification bar (login required message) ── */
.page_login .cmp_notification,
.page_register .cmp_notification {
  background:    #EBF5FB          !important;
  border-left:   3px solid #9E1B21 !important;
  border-radius: 6px              !important;
  padding:       0.75rem 1rem     !important;
  font-family:   var(--font)      !important;
  font-size:     0.875rem         !important;
  color:         var(--gray-700)  !important;
  margin-bottom: 1.25rem          !important;
}

.page_login .cmp_notification a,
.page_register .cmp_notification a {
  color:           #9E1B21 !important;
  font-weight:     600     !important;
  text-decoration: none    !important;
}

.page_login .cmp_notification a:hover,
.page_register .cmp_notification a:hover {
  color:           #4A0D10     !important;
  text-decoration: underline   !important;
}

/* ── 15. Responsive — mobile ── */
@media (max-width: 640px) {
  .page_login,
  .page_register {
    margin:  2rem auto 3rem !important;
    padding: 0 1rem         !important;
  }

  .page_login .cmp_form,
  .page_register .cmp_form {
    padding:       1.75rem 1.25rem !important;
    border-radius: 10px            !important;
  }

  .page_login .buttons,
  .page_register .buttons {
    flex-direction: column     !important;
    align-items:    stretch    !important;
  }

  .page_login .buttons button.submit,
  .page_register .buttons button.submit {
    width: 100% !important;
  }

  .page_login .buttons a.register,
  .page_register .buttons a.login {
    text-align: center !important;
  }
}


/* ================================================================
   SECTION 23  —  HOMEPAGE TYPOGRAPHY UNIFICATION
   Standardises all paragraph and list text within .page_index_journal
   to match the "About the Journal" section's typographic baseline.

   Scope: every <p> and <li> inside the homepage content wrapper,
   excluding the hero (which has its own white text rules) and the
   fixed header/footer. The !important flags are necessary to win
   over the section-specific rules set in Sections 18–22 above that
   target narrower BEM class selectors.
   ================================================================ */

/* ── Unified paragraph baseline ── */
body.pkp_page_index .page_index_journal p,
body.pkp_page_index .page_index_journal li {
  font-family:     var(--font)                             !important;
  font-size:       clamp(1rem, 1.1vw, 1.125rem)           !important;  /* matches About body */
  font-weight:     400                                     !important;  /* clean, not thin */
  line-height:     1.8                                     !important;  /* matches About body */
  letter-spacing:  0.01em                                  !important;  /* subtle, prevents density */
  color:           #111111                                 !important;  /* high-contrast, matches About */
}

/* ── Re-pin the hero's own paragraph text (white on dark bg) ──
   The hero rule must be more specific than the unified rule above
   so its white colour is not overridden. */
body.pkp_page_index .page_index_journal .avgcxr-hero p,
body.pkp_page_index .page_index_journal .avgcxr-hero li {
  color:       rgba(255, 255, 255, 0.92) !important;
  font-size:   1.25rem                   !important;
  line-height: 1.65                      !important;
}

/* ── CFP intro paragraph — keep centred, override unified color ──
   .avgcxr-cfp__intro already has text-align:center and a max-width
   constraint; the unified rule above corrects its color and line-height
   but we also restore its specific font-size so it doesn't grow. */
body.pkp_page_index .page_index_journal .avgcxr-cfp__intro {
  font-size: clamp(1rem, 1.1vw, 1.125rem) !important;
  color:     #111111                       !important;
}

/* ── CFP card value cells ── */
body.pkp_page_index .page_index_journal .avgcxr-cfp__value {
  font-size:   clamp(1rem, 1.1vw, 1.125rem) !important;
  font-weight: 400                           !important;
  line-height: 1.8                           !important;
  color:       #111111                       !important;
}

/* ── Why Publish card body text ── */
body.pkp_page_index .page_index_journal .avgcxr-why-card__body {
  font-size:   clamp(1rem, 1.1vw, 1.125rem) !important;
  font-weight: 400                           !important;
  line-height: 1.8                           !important;
  color:       #111111                       !important;
}

/* ── Why Publish subtitle ── */
body.pkp_page_index .page_index_journal .avgcxr-why-publish__subtitle {
  font-size:   clamp(1rem, 1.1vw, 1.125rem) !important;
  font-weight: 400                           !important;
  line-height: 1.8                           !important;
  color:       #111111                       !important;
}

/* ── Current Issue: article authors + date ── */
body.pkp_page_index .page_index_journal .ci-article-authors,
body.pkp_page_index .page_index_journal .ci-issue-date {
  font-size:   clamp(1rem, 1.05vw, 1.05rem) !important;
  font-weight: 400                           !important;
  line-height: 1.8                           !important;
  color:       #111111                       !important;
}

/* ── Sidebar card body paragraphs and list items ──
   Sidebar cards are smaller by design; keep their own font-size
   but unify the weight, line-height, and colour. */
body.pkp_page_index .page_index_journal
  .avgcxr-about-journal__sidebar .pkp_block p,
body.pkp_page_index .page_index_journal
  .avgcxr-about-journal__sidebar .pkp_block li {
  font-size:   0.88rem !important;   /* sidebar cards intentionally smaller */
  font-weight: 400     !important;
  line-height: 1.8     !important;
  color:       #111111 !important;
}

/* ── Responsive: scale down gracefully on narrow viewports ── */
@media (max-width: 767px) {
  body.pkp_page_index .page_index_journal p,
  body.pkp_page_index .page_index_journal li {
    font-size: 1rem !important;
  }
}

@media (max-width: 575px) {
  body.pkp_page_index .page_index_journal p,
  body.pkp_page_index .page_index_journal li {
    font-size:   0.97rem !important;
    line-height: 1.75    !important;
  }
}


/* ================================================================
   SECTION 24  —  SEARCH PAGE
   Targets: body .page_search
   Rules are scoped to .page_search so nothing bleeds to other pages.
   Backend logic (form action, input names, Smarty vars) is untouched
   — this file only controls visual presentation.
   ================================================================ */


/* ----------------------------------------------------------------
   24-A  SIDEBAR HIDE + FULL-WIDTH MAIN
   Hide the OJS sidebar on the search page and give the main column
   the full container width so the search form has room to breathe.
   ---------------------------------------------------------------- */

body.pkp_page_search .pkp_structure_sidebar {
  display: none !important;
}

body.pkp_page_search .pkp_structure_main {
  width:   100% !important;
  float:   none !important;
  padding: 0    !important;
}

/* Cancel the default two-column float layout on search */
body.pkp_page_search .pkp_structure_content {
  display: block !important;
}


/* ----------------------------------------------------------------
   24-B  PAGE WRAPPER & HEADING
   ---------------------------------------------------------------- */

.page_search {
  max-width:  900px;
  margin:     0 auto;
  padding:    2.5rem 1.5rem 4rem;
  font-family: var(--font);
}

/* H1 — "Search" — brand brown with accent underline, matches other pages */
.page_search .avgcxr-search__title {
  font-family:    var(--font)               !important;
  font-size:      clamp(1.8rem, 3vw, 2.4rem) !important;
  font-weight:    700                       !important;
  color:          #4A0D10                   !important;
  line-height:    1.2                       !important;
  letter-spacing: -0.02em                   !important;
  margin:         0 0 1.75rem               !important;
  padding-bottom: 0.6rem                    !important;
  border-bottom:  3px solid #9E1B21         !important;
}

/* Breadcrumbs spacing */
.page_search .cmp_breadcrumbs {
  margin-bottom: 1rem !important;
}


/* ----------------------------------------------------------------
   24-C  FORM CARD
   White elevated card that wraps the entire form.
   ---------------------------------------------------------------- */

.avgcxr-search__form-card {
  background:    #ffffff;
  border:        1px solid #e2e8f4;
  border-radius: 14px;
  box-shadow:    0 4px 24px rgba(0, 0, 0, 0.07),
                 0 1px 4px  rgba(0, 0, 0, 0.04);
  padding:       2rem 2.25rem 2.25rem;
  margin-bottom: 2.5rem;
}

.avgcxr-search__form {
  display:        flex;
  flex-direction: column;
  gap:            0;   /* internal spacing handled per-block below */
}


/* ----------------------------------------------------------------
   24-D  PRIMARY SEARCH ROW  (text input + submit button side-by-side)
   ---------------------------------------------------------------- */

.avgcxr-search__primary-row {
  display:   flex;
  gap:       12px;
  align-items: stretch;
  margin-bottom: 1.5rem;
}

/* Input wrapper — grows to fill available space */
.avgcxr-search__input-wrap {
  position:  relative;
  flex:      1 1 auto;
  min-width: 0;
}

/* Search icon — absolutely positioned inside the input */
.avgcxr-search__input-icon {
  position:        absolute;
  left:            1rem;
  top:             50%;
  transform:       translateY(-50%);
  width:           18px;
  height:          18px;
  color:           #9CA3AF;
  pointer-events:  none;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.avgcxr-search__input-icon svg {
  width:  18px;
  height: 18px;
  display: block;
}

/* Main query input */
.avgcxr-search__query-input,
.page_search input.query {
  width:         100%                        !important;
  height:        52px                        !important;
  padding:       0 1rem 0 3rem               !important;  /* left room for icon */
  font-family:   var(--font)                 !important;
  font-size:     1rem                        !important;
  font-weight:   400                         !important;
  color:         var(--gray-800)             !important;
  background:    #ffffff                     !important;
  border:        1.5px solid #e2e8f4         !important;
  border-radius: 8px                         !important;
  outline:       none                        !important;
  box-shadow:    none                        !important;
  transition:    border-color 0.2s ease,
                 box-shadow   0.2s ease      !important;
  box-sizing:    border-box                  !important;
  -webkit-appearance: none                   !important;
  appearance:    none                        !important;
}

.avgcxr-search__query-input:focus,
.page_search input.query:focus {
  border-color: #9E1B21                          !important;
  box-shadow:   0 0 0 3px rgba(158, 27, 33, 0.1) !important;
  outline:      none                             !important;
}

.avgcxr-search__query-input::placeholder,
.page_search input.query::placeholder {
  color:       #9CA3AF   !important;
  font-weight: 400       !important;
}

/* Submit button — CTA pill matching the rest of the theme */
.avgcxr-search__submit-btn,
.page_search .submit button,
.page_search button.submit {
  display:         inline-flex                        !important;
  align-items:     center                             !important;
  justify-content: center                             !important;
  flex-shrink:     0                                  !important;
  height:          52px                               !important;
  padding:         0 2rem                             !important;
  background:      var(--cb)                          !important;  /* #0057B8 corporate blue */
  color:           #ffffff                            !important;
  font-family:     var(--font)                        !important;
  font-size:       0.875rem                           !important;
  font-weight:     700                                !important;
  letter-spacing:  0.06em                             !important;
  text-transform:  uppercase                          !important;
  border:          none                               !important;
  border-radius:   8px                                !important;
  box-shadow:      0 4px 16px rgba(0, 87, 184, 0.28) !important;
  cursor:          pointer                            !important;
  white-space:     nowrap                             !important;
  transition:      background 0.2s ease,
                   transform  0.15s ease,
                   box-shadow 0.2s ease               !important;
  outline:         none                               !important;
}

.avgcxr-search__submit-btn:hover,
.page_search .submit button:hover,
.page_search button.submit:hover {
  background:  var(--cb-dark)                        !important;
  transform:   translateY(-2px)                      !important;
  box-shadow:  0 8px 24px rgba(0, 87, 184, 0.38)    !important;
  color:       #ffffff                               !important;
}

.avgcxr-search__submit-btn:active,
.page_search .submit button:active,
.page_search button.submit:active {
  transform:  translateY(0)  !important;
  box-shadow: none           !important;
}

/* Hide the original .submit div wrapper — button is now in the primary row */
.page_search .submit {
  display: none !important;
}


/* ----------------------------------------------------------------
   24-E  ADVANCED FILTERS FIELDSET
   ---------------------------------------------------------------- */

.avgcxr-search__advanced,
.page_search fieldset.search_advanced {
  border:        none                         !important;
  border-top:    1.5px solid #e2e8f4          !important;
  padding:       1.5rem 0 0                   !important;
  margin:        0                            !important;
}

/* Legend — small uppercase label, matches sidebar card .title style */
.avgcxr-search__advanced-legend,
.page_search fieldset.search_advanced > legend {
  font-family:    var(--font)   !important;
  font-size:      0.72rem       !important;
  font-weight:    800           !important;
  letter-spacing: 0.12em        !important;
  text-transform: uppercase     !important;
  color:          #4A0D10       !important;
  padding:        0             !important;
  margin-bottom:  1.25rem       !important;
  float:          none          !important;
  width:          100%          !important;
  display:        block         !important;
  border:         none          !important;
  background:     none          !important;
  line-height:    1             !important;
}

.avgcxr-search__advanced-legend-text {
  display: inline-block;
}

/* Filters body — two-column grid at desktop, single col on mobile */
.avgcxr-search__filters-body {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1.25rem 2rem;
  align-items:           start;
}

/* Filter group — label + input stacked */
.avgcxr-search__filter-group {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
}

/* Filter group label */
.avgcxr-search__filter-label,
.page_search .author .label,
.page_search .author label.label {
  font-family:    var(--font)  !important;
  font-size:      0.82rem      !important;
  font-weight:    600          !important;
  color:          #4A0D10      !important;
  letter-spacing: 0.01em       !important;
  margin:         0            !important;
  display:        block        !important;
}


/* ----------------------------------------------------------------
   24-F  DATE RANGE INPUTS
   The OJS html_select_date_a11y helper outputs a <fieldset> + 3
   <select> elements (Month / Day / Year). We style these to match
   the corporate input baseline.
   ---------------------------------------------------------------- */

/* Inner fieldset from html_select_date_a11y — strip default box */
.avgcxr-search__date-block fieldset,
.page_search .date_range fieldset {
  border:   none !important;
  padding:  0    !important;
  margin:   0    !important;
}

/* Legend rendered by html_select_date_a11y ("Date From" / "Date To") */
.avgcxr-search__date-block fieldset legend,
.page_search .date_range fieldset legend {
  font-family:    var(--font)  !important;
  font-size:      0.75rem      !important;
  font-weight:    600          !important;
  color:          var(--gray-600) !important;
  letter-spacing: 0.01em       !important;
  margin-bottom:  0.4rem       !important;
  padding:        0            !important;
  float:          none         !important;
  display:        block        !important;
  width:          100%         !important;
}

/* Row that holds Month / Day / Year selects side by side */
.avgcxr-search__date-range-row {
  display:     flex;
  align-items: center;
  gap:         10px;
}

/* The separator dash between From and To */
.avgcxr-search__date-sep {
  font-family: var(--font);
  font-size:   1rem;
  font-weight: 300;
  color:       var(--gray-400);
  flex-shrink: 0;
  line-height: 1;
  margin-top:  1.6rem;   /* align with select mid-point */
}

/* Each date block */
.avgcxr-search__date-block {
  flex: 1 1 0;
  min-width: 0;
}

/* Select wrapper output by html_select_date_a11y */
.avgcxr-search__date-block .select_date,
.page_search .date_range .select_date {
  display:   flex;
  gap:       6px;
  flex-wrap: nowrap;
}

/* All three date selects (Month, Day, Year) */
.avgcxr-search__date-block select,
.page_search .date_range select,
.avgcxr-search__filter-group--dates select {
  flex:              1 1 auto            !important;
  min-width:         0                   !important;
  height:            42px                !important;
  padding:           0 0.6rem            !important;
  font-family:       var(--font)         !important;
  font-size:         0.82rem             !important;
  font-weight:       400                 !important;
  color:             var(--gray-800)     !important;
  background-color:  #ffffff             !important;
  border:            1.5px solid #e2e8f4 !important;
  border-radius:     8px                 !important;
  outline:           none                !important;
  box-shadow:        none                !important;
  cursor:            pointer             !important;
  transition:        border-color 0.2s ease,
                     box-shadow   0.2s ease !important;
  -webkit-appearance: none               !important;
  appearance:        none                !important;
  /* Custom chevron */
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%234A0D10' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
  background-repeat:   no-repeat         !important;
  background-position: right 0.55rem center !important;
  padding-right:       1.8rem            !important;
}

.avgcxr-search__date-block select:focus,
.page_search .date_range select:focus,
.avgcxr-search__filter-group--dates select:focus {
  border-color: #9E1B21                          !important;
  box-shadow:   0 0 0 3px rgba(158, 27, 33, 0.1) !important;
  outline:      none                             !important;
}

/* Accessibility label for each select rendered by html_select_date_a11y */
.avgcxr-search__date-block label,
.page_search .date_range label {
  font-family: var(--font)      !important;
  font-size:   0.72rem          !important;
  font-weight: 500              !important;
  color:       var(--gray-600)  !important;
  margin-bottom: 2px            !important;
  display:     block            !important;
}


/* ----------------------------------------------------------------
   24-G  AUTHOR & JOURNAL INPUTS
   ---------------------------------------------------------------- */

/* Author text input */
.avgcxr-search__text-input,
.page_search .author input[type="text"] {
  width:         100%                        !important;
  height:        42px                        !important;
  padding:       0 1rem                      !important;
  font-family:   var(--font)                 !important;
  font-size:     0.88rem                     !important;
  font-weight:   400                         !important;
  color:         var(--gray-800)             !important;
  background:    #ffffff                     !important;
  border:        1.5px solid #e2e8f4         !important;
  border-radius: 8px                         !important;
  outline:       none                        !important;
  box-shadow:    none                        !important;
  transition:    border-color 0.2s ease,
                 box-shadow   0.2s ease      !important;
  box-sizing:    border-box                  !important;
  -webkit-appearance: none                   !important;
  appearance:    none                        !important;
}

.avgcxr-search__text-input:focus,
.page_search .author input[type="text"]:focus {
  border-color: #9E1B21                          !important;
  box-shadow:   0 0 0 3px rgba(158, 27, 33, 0.1) !important;
  outline:      none                             !important;
}

.avgcxr-search__text-input::placeholder {
  color:       #9CA3AF !important;
  font-weight: 400     !important;
}

/* Journal selector */
.avgcxr-search__select,
.page_search .author select {
  width:             100%                    !important;
  height:            42px                    !important;
  padding:           0 1.8rem 0 1rem         !important;
  font-family:       var(--font)             !important;
  font-size:         0.88rem                 !important;
  font-weight:       400                     !important;
  color:             var(--gray-800)         !important;
  background-color:  #ffffff                 !important;
  border:            1.5px solid #e2e8f4     !important;
  border-radius:     8px                     !important;
  outline:           none                    !important;
  box-shadow:        none                    !important;
  cursor:            pointer                 !important;
  transition:        border-color 0.2s ease,
                     box-shadow   0.2s ease  !important;
  -webkit-appearance: none                   !important;
  appearance:        none                    !important;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%234A0D10' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
  background-repeat:   no-repeat             !important;
  background-position: right 0.75rem center  !important;
  box-sizing:          border-box            !important;
}

.avgcxr-search__select:focus,
.page_search .author select:focus {
  border-color: #9E1B21                          !important;
  box-shadow:   0 0 0 3px rgba(158, 27, 33, 0.1) !important;
  outline:      none                             !important;
}

/* "Search Journal" label — slight top margin to separate from Author */
.page_search .author .label_contexts,
.avgcxr-search__filter-label.label_contexts {
  margin-top: 0.75rem !important;
}


/* ----------------------------------------------------------------
   24-H  RESULTS SECTION
   ---------------------------------------------------------------- */

.avgcxr-search__results-section {
  margin-top: 0.5rem;
}

/* Result count badge */
.avgcxr-search__results-meta {
  display:       flex;
  align-items:   center;
  margin-bottom: 1.25rem;
}

.avgcxr-search__results-count {
  font-family:    var(--font);
  font-size:      0.82rem;
  font-weight:    600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:          var(--gray-400);
}

/* Result list — strip default ul styles */
.avgcxr-search__results-list,
.page_search .search_results {
  list-style: none !important;
  margin:     0    !important;
  padding:    0    !important;
}

/* Individual result item — card style */
.avgcxr-search__result-item,
.page_search .search_results > li {
  background:    #ffffff                       !important;
  border:        1px solid #e2e8f4             !important;
  border-left:   4px solid #BF2229             !important;
  border-radius: 10px                          !important;
  padding:       1.5rem 1.75rem                !important;
  margin-bottom: 1rem                          !important;
  box-shadow:    0 2px 10px rgba(0,0,0,0.05)  !important;
  transition:    transform 0.2s ease,
                 box-shadow 0.2s ease          !important;
}

.avgcxr-search__result-item:hover,
.page_search .search_results > li:hover {
  transform:  translateY(-2px)                !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.09)    !important;
}

.avgcxr-search__result-item:last-child,
.page_search .search_results > li:last-child {
  margin-bottom: 0 !important;
}

/* Article title inside result card */
.avgcxr-search__result-item .obj_article_summary .title a,
.page_search .search_results .obj_article_summary .title a {
  font-family:    var(--font)   !important;
  font-size:      1rem          !important;
  font-weight:    700           !important;
  color:          #4A0D10       !important;
  text-decoration: none         !important;
  line-height:    1.45          !important;
  transition:     color 0.15s ease !important;
}

.avgcxr-search__result-item .obj_article_summary .title a:hover,
.page_search .search_results .obj_article_summary .title a:hover {
  color: #BF2229 !important;
}

/* Authors + date meta text */
.avgcxr-search__result-item .obj_article_summary .authors,
.avgcxr-search__result-item .obj_article_summary .published,
.page_search .search_results .obj_article_summary .authors,
.page_search .search_results .obj_article_summary .published {
  font-family: var(--font)     !important;
  font-size:   0.82rem         !important;
  font-weight: 400             !important;
  color:       var(--gray-400) !important;
  margin-top:  0.3rem          !important;
}


/* ----------------------------------------------------------------
   24-I  NO RESULTS / NOTIFICATION
   ---------------------------------------------------------------- */

.avgcxr-search__no-results {
  margin-top: 0.5rem;
}

.avgcxr-search__no-results .cmp_notification {
  border-radius: 8px             !important;
  font-family:   var(--font)     !important;
  font-size:     0.92rem         !important;
}


/* ----------------------------------------------------------------
   24-J  PAGINATION
   ---------------------------------------------------------------- */

.avgcxr-search__pagination,
.page_search .cmp_pagination {
  margin-top:    2rem            !important;
  padding-top:   1.5rem          !important;
  border-top:    1px solid #e2e8f4 !important;
  font-family:   var(--font)     !important;
  font-size:     0.88rem         !important;
}

.page_search .cmp_pagination .prev,
.page_search .cmp_pagination .next {
  font-weight: 700        !important;
  color:       var(--cb)  !important;
}

.page_search .cmp_pagination .prev:hover,
.page_search .cmp_pagination .next:hover {
  color: var(--cb-dark) !important;
}


/* ----------------------------------------------------------------
   24-K  RESPONSIVE
   ---------------------------------------------------------------- */

/* Tablet — stack filters vertically, allow date row to wrap */
@media (max-width: 767px) {
  .page_search {
    padding: 2rem 1.25rem 3rem;
  }

  .avgcxr-search__form-card {
    padding: 1.5rem 1.25rem 1.75rem;
  }

  .avgcxr-search__filters-body {
    grid-template-columns: 1fr;
    gap:                   1rem;
  }

  .avgcxr-search__date-range-row {
    flex-wrap: wrap;
    gap:       8px;
  }

  .avgcxr-search__date-sep {
    display: none;  /* hide dash on mobile — each block is full width */
  }

  .avgcxr-search__date-block {
    flex: 1 1 100%;
  }
}

/* Mobile — stack primary row too */
@media (max-width: 575px) {
  .avgcxr-search__primary-row {
    flex-direction: column;
    gap:            10px;
  }

  .avgcxr-search__submit-btn,
  .page_search .submit button,
  .page_search button.submit {
    width:  100%   !important;
    height: 48px   !important;
  }

  .avgcxr-search__query-input,
  .page_search input.query {
    height: 48px !important;
  }

  .avgcxr-search__result-item,
  .page_search .search_results > li {
    padding: 1.15rem 1.25rem !important;
  }

  .page_search .avgcxr-search__title {
    font-size: 1.7rem !important;
  }
}


/* ================================================================
   SECTION 24 — PATCH A  (Left-align, compact filters, fix locale)
   Overrides the centred card layout from Section 24 above.
   All rules are scoped tightly so nothing outside .page_search
   is affected.
   ================================================================ */

/* ── 1. Remove centred max-width constraint from page wrapper ──
   The original rule set max-width:900px + margin:0 auto, making the
   form look like a login card. Full-width flowing layout restores
   consistency with every other page on the site. */
.page_search {
  max-width:  100%   !important;
  margin:     0      !important;  /* kill the auto-centering */
  padding:    2rem 2.5rem 4rem !important;
}

/* ── 2. Flatten the form card — remove card chrome ──
   Drop the shadow/border that created the "modal" look. Keep a very
   subtle bottom separator so the form region still feels contained
   without being a floating panel. */
.avgcxr-search__form-card {
  background:    transparent           !important;
  border:        none                  !important;
  border-bottom: 1.5px solid #e2e8f4  !important;
  border-radius: 0                     !important;
  box-shadow:    none                  !important;
  padding:       0 0 1.75rem           !important;
  margin-bottom: 2rem                  !important;
}

/* ── 3. Primary row — left-aligned, not stretching full page width ──
   Cap the search bar at a comfortable reading width so it doesn't
   span a 1400px monitor edge-to-edge. */
.avgcxr-search__primary-row {
  max-width:     760px !important;
  align-items:   center !important;
}

/* ── 4. Flatten filters body into a single flex row ──
   Replace the 1fr 1fr grid with a wrapping flex row so
   "Published After", "Published Before", and "By Author"
   sit compactly side-by-side on one line. */
.avgcxr-search__filters-body {
  display:     flex         !important;
  flex-wrap:   wrap         !important;
  align-items: flex-start   !important;
  gap:         1rem 1.75rem !important;
}

/* Each filter group shrinks to fit its content, not half the page */
.avgcxr-search__filter-group {
  flex:      0 1 auto !important;
  min-width: 0        !important;
  width:     auto     !important;
}

/* Date group: the two date blocks + separator sit in their own flex row */
.avgcxr-search__filter-group--dates {
  flex:      0 1 auto !important;
}

.avgcxr-search__date-range-row {
  flex-wrap: nowrap !important;   /* keep Month/Day/Year selects on one line */
}

/* Author input — give it a fixed comfortable width */
.avgcxr-search__filter-group--author {
  flex: 0 1 220px !important;
}

.avgcxr-search__text-input,
.page_search .author input[type="text"] {
  width: 100% !important;   /* fills the 220px flex basis */
}

/* ── 5. Hide the broken ##search.dateRange## locale string ──
   The translation key "search.dateRange" does not exist in OJS core
   locale files, so Smarty outputs the raw key surrounded by ##.
   We hide the entire .avgcxr-search__filter-label div that wraps it.
   The containing filter group already has its own visible labels on
   the individual "Published After" / "Published Before" fieldset
   legends rendered by html_select_date_a11y, so nothing is lost. */
.avgcxr-search__filter-group--dates > .avgcxr-search__filter-label:first-child {
  display: none !important;
}

/* Belt-and-suspenders: if the broken string renders inside a <legend>
   or bare <div> without our BEM class (e.g. from a cached template),
   zero out its size so it is invisible but still takes no space. */
.page_search .avgcxr-search__filter-group--dates > div:not(.avgcxr-search__date-range-row):first-child {
  display: none !important;
}

/* ── 6. Tighten the advanced fieldset top spacing ── */
.avgcxr-search__advanced,
.page_search fieldset.search_advanced {
  padding-top: 1.25rem !important;
}

/* ── 7. Results section — no extra top gap needed now form is flat ── */
.avgcxr-search__results-section {
  margin-top: 0.25rem !important;
}

/* ── 8. Responsive patches ── */
@media (max-width: 767px) {
  .page_search {
    padding: 1.5rem 1.25rem 3rem !important;
  }

  /* Stack filter groups vertically on tablet */
  .avgcxr-search__filters-body {
    flex-direction: column !important;
    gap:            0.75rem !important;
  }

  .avgcxr-search__filter-group--author {
    flex: 0 1 auto !important;
    width: 100%    !important;
  }

  .avgcxr-search__primary-row {
    max-width: 100% !important;
  }
}

@media (max-width: 575px) {
  /* Date selects wrap to two rows on very small screens */
  .avgcxr-search__date-range-row {
    flex-wrap: wrap   !important;
    gap:       6px    !important;
  }

  .avgcxr-search__date-sep {
    display: none !important;
  }
}

/* ================================================================
   SECTION 24 — PATCH B  (Two-column form, horizontal date selects)
   Stacks on top of Patch A. All rules scoped to .page_search.
   ================================================================ */


/* ----------------------------------------------------------------
   B-1  TWO-COLUMN FORM LAYOUT
   Left col : primary search input + submit button (.avgcxr-search__primary-row)
   Right col : advanced filters fieldset (.avgcxr-search__advanced)
   The form card div is the flex parent of these two children.
   ---------------------------------------------------------------- */

/* Form card becomes the two-column flex container */
.avgcxr-search__form-card {
  display:   block !important;   /* keep block so the inner form can flex */
}

.avgcxr-search__form {
  display:               grid                    !important;
  grid-template-columns: 1fr 420px               !important;  /* search bar | filters */
  gap:                   0 2.5rem                !important;
  align-items:           start                   !important;
}

/* Left column: primary row stacks vertically within its grid cell */
.avgcxr-search__primary-row {
  display:        flex          !important;
  flex-direction: column        !important;
  gap:            0.75rem       !important;
  max-width:      100%          !important;  /* override the 760px cap from Patch A */
  align-items:    stretch       !important;
  /* Span one grid row; advanced fieldset spans its own column */
}

/* Search input fills full column width */
.avgcxr-search__input-wrap {
  width: 100% !important;
}

.avgcxr-search__query-input,
.page_search input.query {
  width:  100% !important;
  height: 48px !important;
}

/* Submit button full-width under the input */
.avgcxr-search__submit-btn {
  width:  100% !important;
  height: 44px !important;
}

/* Right column: advanced fieldset occupies its grid cell */
.avgcxr-search__advanced,
.page_search fieldset.search_advanced {
  border-top:   none                     !important;   /* remove top divider — now a side column */
  border-left:  1.5px solid #e2e8f4      !important;   /* vertical separator between columns */
  padding:      0 0 0 2.5rem             !important;
  margin:       0                        !important;
  /* Align legend with the top of the left column */
  padding-top:  0                        !important;
}

/* Advanced legend sits flush at the top of the right column */
.avgcxr-search__advanced-legend,
.page_search fieldset.search_advanced > legend {
  margin-top:    0            !important;
  margin-bottom: 1rem         !important;
  padding-top:   0.15rem      !important;   /* optical alignment with input top */
}

/* Filters body: stack Published After / Published Before / Author vertically
   inside the right column — they are already compact because the date selects
   are now horizontal (see B-2 below) */
.avgcxr-search__filters-body {
  display:        flex            !important;
  flex-direction: column          !important;
  flex-wrap:      nowrap          !important;
  gap:            1rem            !important;
  align-items:    flex-start      !important;
}

.avgcxr-search__filter-group {
  width:     100%    !important;
  flex:      none    !important;
  min-width: 0       !important;
}

.avgcxr-search__filter-group--author {
  flex: none   !important;
  width: 100%  !important;
}

.avgcxr-search__text-input,
.page_search .author input[type="text"] {
  width: 100% !important;
}


/* ----------------------------------------------------------------
   B-2  HORIZONTAL DATE SELECTS
   html_select_date_a11y outputs flat siblings inside a <fieldset>:
     <fieldset>
       <legend>Published After</legend>
       <label for="dateFromYear">Year</label>   ← no wrapper div
       <select id="dateFromYear">…</select>
       <label for="dateFromMonth">Month</label>
       <select id="dateFromMonth">…</select>
       <label for="dateFromDay">Day</label>
       <select id="dateFromDay">…</select>
     </fieldset>

   Strategy: make the fieldset a CSS grid with 3 label/select pairs
   laid out as stacked label-above-select columns in a single row.
   Grid columns: [label+select] [label+select] [label+select]
   Each pair is a 2-row sub-column (label row 1, select row 2).
   ---------------------------------------------------------------- */

/* The inner fieldset produced by html_select_date_a11y */
.avgcxr-search__date-block fieldset,
.page_search .avgcxr-search__date-block fieldset {
  border:   none                                       !important;
  padding:  0                                          !important;
  margin:   0                                          !important;
  /* 3-column grid: each column = one Year/Month/Day pair */
  display:               grid                          !important;
  grid-template-columns: repeat(3, auto)               !important;
  grid-template-rows:    auto auto                     !important;   /* row1=legend, row2=labels, row3=selects */
  column-gap:            8px                           !important;
  row-gap:               3px                           !important;
  align-items:           end                           !important;
}

/* Legend spans all 3 columns — sits above the selects as the group label */
.avgcxr-search__date-block fieldset legend,
.page_search .avgcxr-search__date-block fieldset legend {
  grid-column:  1 / -1                  !important;
  grid-row:     1                       !important;
  font-family:  var(--font)             !important;
  font-size:    0.75rem                 !important;
  font-weight:  600                     !important;
  color:        #4A0D10                 !important;
  margin-bottom: 4px                    !important;
  padding:      0                       !important;
  float:        none                    !important;
  display:      block                   !important;
  width:        auto                    !important;
}

/* Labels (Year, Month, Day) — row 2, one per column */
.avgcxr-search__date-block fieldset label,
.page_search .avgcxr-search__date-block fieldset label {
  grid-row:    2                        !important;
  font-family: var(--font)              !important;
  font-size:   0.68rem                  !important;
  font-weight: 500                      !important;
  color:       var(--gray-400)          !important;
  white-space: nowrap                   !important;
  padding:     0                        !important;
  margin:      0                        !important;
  display:     block                    !important;
  align-self:  end                      !important;
}

/* Selects (Year, Month, Day) — row 3, one per column */
.avgcxr-search__date-block fieldset select,
.page_search .avgcxr-search__date-block fieldset select {
  grid-row:          3                         !important;
  height:            36px                      !important;
  padding:           0 1.6rem 0 0.5rem         !important;
  font-family:       var(--font)               !important;
  font-size:         0.78rem                   !important;
  font-weight:       400                       !important;
  color:             var(--gray-800)           !important;
  background-color:  #ffffff                   !important;
  border:            1.5px solid #e2e8f4       !important;
  border-radius:     6px                       !important;
  outline:           none                      !important;
  cursor:            pointer                   !important;
  white-space:       nowrap                    !important;
  min-width:         0                         !important;
  width:             auto                      !important;
  /* Custom chevron */
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%234A0D10' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E") !important;
  background-repeat:   no-repeat               !important;
  background-position: right 0.45rem center    !important;
  -webkit-appearance:  none                    !important;
  appearance:          none                    !important;
  box-shadow:          none                    !important;
  transition:          border-color 0.2s ease  !important;
}

.avgcxr-search__date-block fieldset select:focus,
.page_search .avgcxr-search__date-block fieldset select:focus {
  border-color: #9E1B21                          !important;
  box-shadow:   0 0 0 3px rgba(158,27,33,0.10)  !important;
  outline:      none                             !important;
}

/* Date range row: Published After + separator + Published To side by side */
.avgcxr-search__date-range-row {
  display:     flex         !important;
  flex-wrap:   nowrap       !important;
  align-items: flex-end     !important;   /* align to bottom of the select row */
  gap:         10px         !important;
}

/* Each date block takes only as much space as its 3-column grid needs */
.avgcxr-search__date-block {
  flex:      0 0 auto !important;
  min-width: 0        !important;
}

/* The "—" separator aligns with the selects, not the legends */
.avgcxr-search__date-sep {
  display:     block         !important;
  font-size:   0.85rem       !important;
  color:       var(--gray-400) !important;
  flex-shrink: 0             !important;
  line-height: 36px          !important;   /* match select height */
  margin-top:  auto          !important;
  padding-bottom: 0          !important;
}


/* ----------------------------------------------------------------
   B-3  RESPONSIVE FALLBACK  (≤ 992px → single column)
   ---------------------------------------------------------------- */

@media (max-width: 992px) {

  /* Revert to single-column stacked form */
  .avgcxr-search__form {
    grid-template-columns: 1fr  !important;
    gap:                   0    !important;
  }

  /* Primary row reverts to horizontal (input + button beside each other) */
  .avgcxr-search__primary-row {
    flex-direction: row       !important;
    gap:            10px      !important;
    margin-bottom:  1.25rem   !important;
    align-items:    stretch   !important;
  }

  .avgcxr-search__submit-btn {
    width:  auto    !important;
    height: 48px    !important;
    flex-shrink: 0  !important;
  }

  .avgcxr-search__input-wrap {
    flex: 1 1 auto !important;
  }

  /* Restore top divider; remove left border */
  .avgcxr-search__advanced,
  .page_search fieldset.search_advanced {
    border-left:  none                    !important;
    border-top:   1.5px solid #e2e8f4    !important;
    padding:      1.25rem 0 0            !important;
  }

  /* Filters body can wrap on tablet */
  .avgcxr-search__filters-body {
    flex-direction: row     !important;
    flex-wrap:      wrap    !important;
    gap:            0.75rem 1.5rem !important;
  }

  .avgcxr-search__filter-group--author {
    flex: 0 1 200px !important;
    width: auto     !important;
  }
}

@media (max-width: 575px) {

  /* Filters fully stacked on small phones */
  .avgcxr-search__filters-body {
    flex-direction: column !important;
    gap:            0.75rem !important;
  }

  .avgcxr-search__filter-group--author {
    flex:  none !important;
    width: 100% !important;
  }

  /* Date selects: allow Month/Day/Year to wrap if screen is very narrow */
  .avgcxr-search__date-range-row {
    flex-wrap: wrap !important;
    gap:       6px  !important;
  }

  .avgcxr-search__date-sep {
    display: none !important;
  }
}

/* ================================================================
   SECTION 24 — PATCH C  (Inline search bar, flat background, proportions)
   Final-layer overrides. Resolves conflicts left by Patches A and B.
   All rules scoped to .page_search / body.pkp_page_search.
   ================================================================ */


/* ----------------------------------------------------------------
   C-1  STRIP ALL CARD CHROME — form card, main panel, body bg
   The original Section 24-C defined box-shadow + border + border-radius
   on .avgcxr-search__form-card. Patches A-B partially neutralised it
   but didn't kill every property. This block is the definitive reset.
   ---------------------------------------------------------------- */

/* The search page body background — flat white, matches every other page */
body.pkp_page_search {
  background: #ffffff !important;
}

/* Main content panel — no card styling on the search page */
body.pkp_page_search .pkp_structure_main {
  background:    transparent !important;
  border:        none        !important;
  border-radius: 0           !important;
  box-shadow:    none        !important;
}

/* Form card wrapper — fully flat, just provides bottom spacing */
.avgcxr-search__form-card {
  background:    transparent !important;
  border:        none        !important;
  border-top:    none        !important;
  border-bottom: 1.5px solid #e2e8f4 !important;
  border-radius: 0           !important;
  box-shadow:    none        !important;
  padding:       0 0 1.75rem !important;
  margin-bottom: 2rem        !important;
  display:       block       !important;
}


/* ----------------------------------------------------------------
   C-2  COLUMN PROPORTIONS + GAP
   Replace the fixed 1fr/420px split with a 60/40 split that scales
   with the container. Increase the column gap to 3rem.
   align-items: start ensures the shorter column doesn't stretch.
   ---------------------------------------------------------------- */

.avgcxr-search__form {
  display:               grid            !important;
  grid-template-columns: 3fr 2fr         !important;  /* ~60% left, ~40% right */
  gap:                   0 3rem          !important;
  align-items:           start           !important;
}


/* ----------------------------------------------------------------
   C-3  INLINE SEARCH BAR + BUTTON  (overrides Patch B's column layout)
   Patch B set flex-direction:column + width:100% on the primary row
   and button — that's what causes the stacked/full-width appearance.
   We flip it back to a flex row here.
   ---------------------------------------------------------------- */

.avgcxr-search__primary-row {
  display:        flex          !important;
  flex-direction: row           !important;   /* ← was "column" in Patch B */
  align-items:    center        !important;
  gap:            0.75rem       !important;
  flex-wrap:      nowrap        !important;
  max-width:      100%          !important;
  margin-bottom:  0             !important;
}

/* Input grows to fill the left column */
.avgcxr-search__input-wrap {
  flex:      1 1 auto  !important;
  min-width: 0         !important;
  width:     auto      !important;  /* override the 100% width from Patch B */
}

.avgcxr-search__query-input,
.page_search input.query {
  width:  100%  !important;   /* fills the flex item, not the full page */
  height: 48px  !important;
}

/* Button: auto width, never stretches, fixed padding */
.avgcxr-search__submit-btn {
  flex-shrink: 0              !important;
  width:       auto           !important;   /* ← was 100% in Patch B */
  height:      48px           !important;
  padding:     0 1.75rem      !important;
  white-space: nowrap         !important;
}


/* ----------------------------------------------------------------
   C-4  RIGHT COLUMN — advanced fieldset alignment
   Left border acts as the column divider. Padding rebalanced for 3rem gap.
   ---------------------------------------------------------------- */

.avgcxr-search__advanced,
.page_search fieldset.search_advanced {
  border-top:    none                  !important;
  border-left:   1.5px solid #e2e8f4  !important;
  padding:       0 0 0 2rem            !important;
  margin:        0                     !important;
}

/* Legend aligns optically with the input top edge */
.avgcxr-search__advanced-legend,
.page_search fieldset.search_advanced > legend {
  margin-top:    0      !important;
  padding-top:   0.1rem !important;
  margin-bottom: 0.9rem !important;
}


/* ----------------------------------------------------------------
   C-5  RESPONSIVE — override the Patch B breakpoint rules
   ≤ 992px → single stacked column, input+button back inline
   ≤ 575px → everything fully stacked
   ---------------------------------------------------------------- */

@media (max-width: 992px) {

  .avgcxr-search__form {
    grid-template-columns: 1fr !important;
    gap:                   0   !important;
  }

  /* Left column: input + button stay on one line */
  .avgcxr-search__primary-row {
    flex-direction: row       !important;
    align-items:    center    !important;
    gap:            0.75rem   !important;
    margin-bottom:  1.25rem   !important;
  }

  .avgcxr-search__submit-btn {
    flex-shrink: 0    !important;
    width:       auto !important;
    height:      48px !important;
    padding:     0 1.5rem !important;
  }

  .avgcxr-search__input-wrap {
    flex: 1 1 auto !important;
  }

  /* Right column reverts to below the search bar */
  .avgcxr-search__advanced,
  .page_search fieldset.search_advanced {
    border-left:  none                  !important;
    border-top:   1.5px solid #e2e8f4  !important;
    padding:      1.25rem 0 0           !important;
  }

  /* Filters can wrap horizontally on tablet */
  .avgcxr-search__filters-body {
    flex-direction: row   !important;
    flex-wrap:      wrap  !important;
    gap:            0.75rem 1.5rem !important;
  }

  .avgcxr-search__filter-group--author {
    flex:  0 1 200px !important;
    width: auto      !important;
  }
}

@media (max-width: 575px) {

  .page_search {
    padding: 1.5rem 1.25rem 3rem !important;
  }

  /* Stack input above button on very small screens only */
  .avgcxr-search__primary-row {
    flex-direction: column  !important;
    align-items:    stretch !important;
  }

  .avgcxr-search__submit-btn {
    width:  100%  !important;
    height: 46px  !important;
  }

  /* All filter groups fully stacked */
  .avgcxr-search__filters-body {
    flex-direction: column  !important;
    gap:            0.75rem !important;
  }

  .avgcxr-search__filter-group--author {
    flex:  none !important;
    width: 100% !important;
  }

  /* Date selects can wrap */
  .avgcxr-search__date-range-row {
    flex-wrap: wrap !important;
    gap:       6px  !important;
  }

  .avgcxr-search__date-sep {
    display: none !important;
  }
}

/* ================================================================
   SECTION 24 — PATCH D  (White background, input alignment, no-results)
   Final visual polish layer. All rules scoped to .page_search /
   body.pkp_page_search so nothing outside the search page is touched.
   ================================================================ */


/* ----------------------------------------------------------------
   D-1  PURE WHITE PAGE BACKGROUND
   The global html/body rule sets --off-white (#F7F9FC) as the body
   background (Section 2). The .pkp_structure_page and
   .pkp_structure_content wrappers inherit or re-apply it. We force
   every layer of the search page stack to #ffffff so there is no
   visible grey behind the content.
   ---------------------------------------------------------------- */

body.pkp_page_search,
body.pkp_page_search .pkp_structure_page,
body.pkp_page_search .pkp_structure_content,
body.pkp_page_search .pkp_structure_main,
body.pkp_page_search .page_search {
  background-color: #ffffff !important;
  background-image: none    !important;   /* kill any inherited gradient */
}


/* ----------------------------------------------------------------
   D-2  VERTICAL INPUT ALIGNMENT — left column offset
   The right column starts with the "ADVANCED FILTERS" legend before
   the first input appears. The legend occupies:
     font-size:      0.72rem   (line-height: 1  → ~11.5px at 16px root)
     margin-bottom:  0.9rem    (Patch C value   → ~14.4px)
     ─────────────────────────────────────────────────────────
     Total push:  calc(0.72rem + 0.9rem)  ≈ 25.9px

   Adding this value as margin-top to .avgcxr-search__primary-row
   nudges the left column's input top edge down to the same baseline
   as the first date-select row on the right.

   Written as calc() so it automatically stays in sync if either the
   legend font-size or margin-bottom are adjusted in future patches.
   ---------------------------------------------------------------- */

.avgcxr-search__primary-row {
  margin-top: calc(0.72rem + 0.9rem) !important;
}

/* On ≤ 992px the layout is single-column so the offset is meaningless —
   reset it to zero so there's no unexplained top gap in mobile view. */
@media (max-width: 992px) {
  .avgcxr-search__primary-row {
    margin-top: 0 !important;
  }
}


/* ----------------------------------------------------------------
   D-3  CLEAN "NO RESULTS" / NOTIFICATION AREA
   The existing rules (Section 24-I and the global .cmp_notification
   in Section 13) apply border-radius:8px, a blue left-border, and
   the light-blue (#EBF5FB) background — which produces a coloured
   pill badge. We want a flat, inline text treatment that reads like
   part of the page rather than an alert component.
   ---------------------------------------------------------------- */

/* Wrapper div — remove the top margin that created a gap */
.avgcxr-search__no-results {
  margin-top:  0          !important;
  padding-top: 1.25rem    !important;
  border-top:  1px solid #e2e8f4 !important;
}

/* The notification component inside no-results — full reset to flat */
.page_search .avgcxr-search__no-results .cmp_notification,
.page_search .cmp_notification {
  display:          block          !important;
  background:       transparent    !important;
  background-color: transparent    !important;
  border:           none           !important;
  border-left:      none           !important;
  border-radius:    0              !important;
  box-shadow:       none           !important;
  padding:          0              !important;
  margin:           0              !important;

  /* Typography — flat body text, not an alert */
  font-family:  var(--font)  !important;
  font-size:    1rem         !important;
  font-weight:  400          !important;
  color:        #111111      !important;
  line-height:  1.6          !important;
}

/* Any links inside the notification */
.page_search .avgcxr-search__no-results .cmp_notification a,
.page_search .cmp_notification a {
  color:           var(--cb)       !important;
  font-weight:     500             !important;
  text-decoration: none            !important;
  border-bottom:   1px solid transparent !important;
  transition:      border-color 0.15s ease !important;
}

.page_search .avgcxr-search__no-results .cmp_notification a:hover,
.page_search .cmp_notification a:hover {
  border-bottom-color: var(--cb) !important;
}

/* Also flatten any error-type notification on the search page */
.page_search .cmp_notification.notifyError {
  color:            #991B1B     !important;
  background:       transparent !important;
  border:           none        !important;
  border-left:      none        !important;
  border-radius:    0           !important;
  padding:          0           !important;
}


/* ================================================================
   SECTION 25  —  ARTICLE VIEW PAGE
   Targets: body.pkp_page_article  (URL pattern: /article/view/...)
   The body class is generated by the OJS header template as
   pkp_page_{$requestedPage}, where $requestedPage = "article".
   All rules are scoped to this class so no other page is affected.
   ================================================================ */


/* ----------------------------------------------------------------
   25-A  HIDE THE SIDEBAR ENTIRELY
   The sidebar on article pages contains the "Make a Submission" dark
   card and the "Information" block. Both are irrelevant to a reader
   viewing article details and add visual clutter.
   We hide the whole sidebar column rather than individual blocks so
   any future blocks added to the sidebar are also suppressed here
   without needing further CSS changes.
   ---------------------------------------------------------------- */

body.pkp_page_article .pkp_structure_sidebar {
  display: none !important;
}


/* ----------------------------------------------------------------
   25-B  EXPAND MAIN CONTENT TO FULL WIDTH
   The default OJS compiled LESS sets .pkp_structure_main to a fixed
   percentage width (e.g. ~75%) and floats it left, leaving room for
   the sidebar column. With the sidebar gone we must cancel both the
   fixed width and the float so the article content fills the
   available container.
   ---------------------------------------------------------------- */

body.pkp_page_article .pkp_structure_main {
  width:   100% !important;
  float:   none !important;
  padding: 0    !important;   /* the inner .page_article has its own padding */
}

/* Cancel the two-column float container on the article page */
body.pkp_page_article .pkp_structure_content {
  display: block !important;
}


/* ----------------------------------------------------------------
   25-C  ARTICLE PAGE CONTENT PADDING & BACKGROUND
   Ensure the article content area is flat white and has comfortable
   reading padding, consistent with the rest of the site.
   ---------------------------------------------------------------- */

body.pkp_page_article .pkp_structure_page,
body.pkp_page_article .pkp_structure_content,
body.pkp_page_article .pkp_structure_main {
  background-color: #ffffff !important;
  background-image: none    !important;
}

/* The white card panel applied sitewide by .pkp_structure_main is
   fine to keep on article pages — it gives the article a clean
   contained reading surface. Re-enable its default padding here
   so the article title / metadata / abstract have breathing room. */
body.pkp_page_article .pkp_structure_main {
  padding: 2.5rem 3rem !important;
}