/*
 * Thai Journal of Anesthesiology - custom journal style sheet (v31)
 * - pageHeaderLogoImage as full-width banner above the menu
 * - banner is NOT clickable
 * - v7:  fixed mobile/tablet banner overlapping content
 * - v8:  "Open Menu" hamburger moved from top-left to top-right
 * - v9:  Bootstrap-3 "navbar-default" look for the menu + submenus
 * - v10: Search removed from the header
 * - v11: mobile submenus tap-to-toggle with tja-menu-toggle.html
 * - v12: removed the theme's vertical column rules
 * - v13: desktop dropdown card sizes to its content
 * - v14: tablet band keeps the desktop bar below 992px
 * - v15: "Make a Submission" as glossy white Bootstrap button
 * - v18-v22: Facebook card scales continuously; fluid page container
 *        and article inner columns
 * - v23-v27: sidebar 28.5% proportional; Bootstrap panels; Login
 *        pinned to the container's right edge
 * - v28: band 656-991.98px (v37); v29: bigger fonts, band Login moved to
 *        its own top-right strip
 * - v30: (1) the HEADER container (banner + menu, .pkp_structure_head/
 *        .pkp_head_wrapper) was still stepped at the theme's fixed
 *        728/952/1160px, squeezing the banner with big side gaps in
 *        the band - it now uses the same fluid min(1200px, 100%-40px)
 *        as the content. (2) band menu wrapping FIXED for good: the
 *        primary menu is now a nowrap FLEXBOX (no inline-block
 *        whitespace gaps, cannot break onto a second line) with
 *        clamp(12px..14px) items that grow with the width.
 * - v31: (1) the gray header background is FULL-BLEED again - the
 *        fluid cap moved from .pkp_structure_head (which carries the
 *        gray) to the inner .pkp_head_wrapper, so only the content is
 *        constrained. (2) at stacked-sidebar widths (700-991px, iPad
 *        portrait) the sidebar blocks flow into TWO balanced columns
 *        (~desktop sidebar width each) instead of one full-width pile.
 * Theme target: PKP default theme (ThaiJO he02), OJS 3.3.x.
 * 2026-08-25
 */

/* 1) The banner image itself: fill the row, keep aspect ratio */
img[src*="pageHeaderLogoImage"] {
  display: block;
  width: 100%;
  max-width: 1200px;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto;
}

/* 2) Its link wrapper: break out of the inline box */
.navbar-brand,
a:has(> img[src*="pageHeaderLogoImage"]) {
  float: none !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  padding: 14px 15px !important;
}

/* 3) The header container spans the full row */
.navbar-header,
div:has(> a > img[src*="pageHeaderLogoImage"]) {
  float: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 4) Menu drops to its own row under the banner */
.navbar-collapse,
.navbar .navbar-nav {
  clear: both;
}

.navbar {
  height: auto !important;
}

/* 5) Banner is not a link: no clicking, no pointer cursor */
.navbar-brand,
a:has(> img[src*="pageHeaderLogoImage"]) {
  pointer-events: none !important;
  cursor: default !important;
}

/* 6) PKP default-theme markup: site name block spans the row */
.pkp_site_name {
  float: none;
  width: 100%;
}
.pkp_site_name .is_img img,
.pkp_site_name img {
  width: 100%;
  max-width: 1200px;
  height: auto;
}

/*
 * 7) OPTIONAL - teal menu bar matched to the capnogram line (#0d6a74).
 *    Desktop-scoped so it will not break the mobile menu panel colors.
 *    Delete this comment wrapper to activate; it overrides the gray
 *    Bootstrap bar from section 13a.

@media (min-width: 992px) {
  .pkp_navigation_primary_row {
    background: #0d6a74 !important;
    border-color: #0d6a74 !important;
  }
  .pkp_navigation_primary > li > a,
  .pkp_navigation_primary > li > a:focus {
    color: #ffffff !important;
  }
  .pkp_navigation_primary > li > a:hover,
  .pkp_navigation_primary > li:hover > a {
    background: #0a5560 !important;
    color: #ffffff !important;
  }
}

*/

/* 8) Sidebar Facebook block.
      Fallback (older browsers): choose the 240px or 340px plugin by
      the COLUMN's real width via a container query.
      Modern browsers: the 340px card ALWAYS scales continuously to
      fill the column exactly as the layout changes - downscaled
      sharp, upscaled at most 1.25x and centered when the cap kicks in.
      The block HTML does not need to change. */

div:has(> .tja-fb) {
  container-type: inline-size;
}
.tja-fb {
  container-type: inline-size;
  text-align: center;
}
.tja-fb iframe { max-width: 100%; }

/* default / fallback: small version */
.tja-fb-sm,
iframe[src*="facebook.com/plugins/page.php"][src*="width=240"] {
  display: inline-block;
}
.tja-fb-lg,
iframe[src*="facebook.com/plugins/page.php"][src*="width=340"] {
  display: none;
}

/* fallback tier: the column is wide enough for the full 340px card */
@container (min-width: 344px) {
  .tja-fb-sm,
  iframe[src*="facebook.com/plugins/page.php"][src*="width=240"] {
    display: none;
  }
  .tja-fb-lg,
  iframe[src*="facebook.com/plugins/page.php"][src*="width=340"] {
    display: inline-block;
  }
}

/* modern browsers - the 340px card always tracks the column width.
   Scale factor = column/340, capped at 1.25; the frame height follows
   the same math so no gap or clipping appears below. */
@supports (transform: scale(calc(100cqw / 340px))) {

  .tja-fb {
    position: relative;
    width: 100%;
    height: min(calc(100cqw * 560 / 340), 700px); /* 700 = 560 * 1.25 */
    overflow: hidden;
  }

  .tja-fb .tja-fb-sm,
  .tja-fb iframe[src*="facebook.com/plugins/page.php"][src*="width=240"] {
    display: none !important;
  }

  .tja-fb .tja-fb-lg,
  .tja-fb iframe[src*="facebook.com/plugins/page.php"][src*="width=340"] {
    display: block !important;
    position: absolute;
    top: 0;
    left: 50%;
    width: 340px !important;
    height: 560px !important;
    max-width: none !important;
    transform: translateX(-50%) scale(min(calc(100cqw / 340px), 1.25));
    transform-origin: top center;
  }
}

/* 9) General guard: sidebar media never spills out of its column */
.pkp_block img, [class*="block"] img {
  max-width: 100%;
  height: auto;
}
.pkp_block iframe, [class*="block"] iframe {
  max-width: 100%;
}

/* 10) Stack the sidebar below the content on narrow screens (phone-style)
       instead of squeezing it into a clipped side column */
@media (max-width: 991.98px) {
  [class*="col-sm-"],
  [class*="col-md-"],
  [class*="col-lg-"],
  .row [class*="col-"],
  .pkp_structure_content [class*="col-"] {
    float: none !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* 11) FIX <992px: put the banner back into normal document flow.
       The default theme pins .pkp_site_name as position:absolute inside a
       fixed-height (2.857rem) .pkp_site_name_wrapper, sized for a tiny
       logo. Below 992px we release the wrapper's fixed height, reserve
       the top 2.857rem for the absolute "Open Menu" toggle, and make
       .pkp_site_name static so the header grows with the banner.
       (Section 16 removes the toggle reservation again at 656-991.98px,
       where the toggle is hidden.) */
@media (max-width: 991.98px) {

  .pkp_site_name_wrapper,
  div:has(> .pkp_site_name),
  div:has(> * > a > img[src*="pageHeaderLogoImage"]) {
    height: auto !important;
    max-height: none !important;
    min-height: 2.857rem;
    padding-top: 2.857rem;   /* clear the absolute nav toggle button */
    overflow: visible !important;
  }

  .pkp_site_name,
  div:has(> a > img[src*="pageHeaderLogoImage"]) {
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    max-width: 100%;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
    text-align: center;
  }

  .pkp_site_name .is_img,
  .pkp_site_name > a {
    display: block !important;
    margin: 0 !important;
  }
}

/* 12) Hamburger ("Open Menu" toggle) at the TOP-RIGHT corner, inset 15px
       from the right edge (matches the banner's side padding). */
@media (max-width: 991.98px) {
  .pkp_site_nav_toggle {
    left: auto !important;
    right: 15px !important;
  }
}

/* ====================================================================
   13) BOOTSTRAP-3 "navbar-default" LOOK FOR THE NAVIGATION
       Palette: bar #f8f8f8 / border #e7e7e7 / link #777 (hover #333) /
       open item #555 on #e7e7e7 / dropdown card #fff with #f5f5f5 hover.
   ==================================================================== */

/* 13a) Desktop >= 992px: gray navbar row + white dropdown cards.
        14px items - the Login sits in its own top strip. */
@media (min-width: 992px) {

  .pkp_navigation_primary_row {
    background: #f8f8f8;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
  }

  /* the theme caps the menu at max-width:80%, which forces early
     wrapping - give it the whole row */
  .pkp_navigation_primary {
    max-width: 100%;
  }

  /* top-level items */
  .pkp_navigation_primary > li > a {
    margin: 0;
    padding: 13px 12px;
    border-bottom: 0;
    color: #777777;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    text-decoration: none;
  }

  /* "Home" text flush with the left edge of the content column */
  .pkp_navigation_primary > li:first-child > a {
    margin-left: 0;
    padding-left: 0;
  }
  .pkp_navigation_primary > li:last-child > a { margin-right: 0; }

  .pkp_navigation_primary > li > a:hover,
  .pkp_navigation_primary > li > a:focus {
    color: #333333;
    background: transparent;
    border-bottom: 0;
    outline: 0;
  }

  /* parent whose dropdown is open (hover) = Bootstrap "open" state */
  .pkp_navigation_primary > li:hover > a {
    color: #555555;
    background: #e7e7e7;
  }

  /* dropdown panel = Bootstrap .dropdown-menu card; sizes to content,
     capped at 420px */
  .pkp_navigation_primary ul,
  .pkp_navigation_user ul {
    width: auto;
    width: max-content;
    min-width: 180px;
    max-width: 420px;
    padding: 5px 0;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  }

  .pkp_navigation_primary ul a,
  .pkp_navigation_user ul a {
    display: block;
    padding: 6px 20px;
    border-left: 0;
    color: #333333;
    font-size: 13px;
    white-space: normal;   /* wraps only past the 420px cap */
    text-decoration: none;
  }
  .pkp_navigation_primary ul a:hover,
  .pkp_navigation_primary ul a:focus,
  .pkp_navigation_user ul a:hover,
  .pkp_navigation_user ul a:focus {
    background: #f5f5f5;
    border-left: 0;
    color: #262626;
    outline: 0;
  }

  /* dropdown flush with its parent item (theme offsets it by 1rem) */
  .pkp_navigation_primary > li:hover ul { left: 0; }
}

/* 13b) Phones < 656px: collapsed-navbar panel.
        (Section 16 overrides this block at 656-991.98px, so effectively
        the panel styles below apply only under 656px.)
        Submenus: always expanded (indented) as the no-JS fallback;
        with tja-menu-toggle.html installed (html.tja-js) they become
        tap-to-toggle (first tap opens, second tap follows the link). */
@media (max-width: 991.98px) {

  /* toggle button: Bootstrap .navbar-toggle chrome */
  .pkp_site_nav_toggle {
    background: transparent !important;
    border: 1px solid #dddddd !important;
    border-radius: 4px;
    box-shadow: none !important;
  }
  .pkp_site_nav_toggle:hover,
  .pkp_site_nav_toggle:focus {
    background: #dddddd !important;
    outline: 0;
  }
  .pkp_site_nav_toggle > span {
    border-bottom-color: #888888 !important;
  }
  .pkp_site_nav_toggle > span:before,
  .pkp_site_nav_toggle > span:after {
    background: #888888 !important;
  }

  /* the slide-down panel */
  .pkp_site_nav_menu {
    padding: 8px 0 !important;
    background: #f8f8f8 !important;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  }

  /* top-level items */
  .pkp_site_nav_menu .pkp_nav_list > li > a {
    display: block;
    margin: 0;
    padding: 10px 15px;
    color: #777777;
    line-height: 20px;
    text-decoration: none;
  }
  .pkp_site_nav_menu .pkp_nav_list > li > a:hover,
  .pkp_site_nav_menu .pkp_nav_list > li > a:focus {
    color: #333333;
    background: transparent;
    text-decoration: none;
  }

  /* submenus: flat and indented under their parent (no-JS fallback:
     always visible) */
  .pkp_site_nav_menu .pkp_nav_list ul,
  .pkp_site_nav_menu .dropdown-menu {
    display: block !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .pkp_site_nav_menu .pkp_nav_list ul a {
    display: block;
    padding: 5px 15px 5px 30px;
    border-left: 0;
    color: #777777;
    line-height: 20px;
    text-decoration: none;
    white-space: normal;
  }
  .pkp_site_nav_menu .pkp_nav_list ul a:hover,
  .pkp_site_nav_menu .pkp_nav_list ul a:focus {
    color: #333333;
    background: transparent;
    text-decoration: none;
  }

  /* with the toggle script installed (html.tja-js): submenus start
     collapsed, Bootstrap-style; .tja-open opens one panel at a time */
  html.tja-js .pkp_site_nav_menu .pkp_nav_list ul,
  html.tja-js .pkp_site_nav_menu .dropdown-menu {
    display: none !important;
  }
  html.tja-js .pkp_site_nav_menu .pkp_nav_list li.tja-open > ul,
  html.tja-js .pkp_site_nav_menu .pkp_nav_list li.tja-open > .dropdown-menu {
    display: block !important;
  }
  html.tja-js .pkp_site_nav_menu .pkp_nav_list li.tja-open > a {
    color: #333333;
    background: #e7e7e7;
  }

  /* separator above the Login row (phone panel only; the tablet band
     moves the user nav to the top strip instead) */
  .pkp_site_nav_menu .pkp_navigation_user.pkp_navigation_user {
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid #e7e7e7 !important;
  }
}

/* 14) Remove Search from the header navigation (desktop right-side link
       AND the row inside the mobile slide-down menu). The Search block
       in the sidebar is a separate custom block and is NOT affected. */
.pkp_navigation_search_wrapper {
  display: none !important;
}

/* 15) Remove the default theme's full-height column rules
       (the 1px vertical line at the left of the content column and the
       divider before the sidebar). To KEEP the content|sidebar divider,
       delete the ":after" selectors from this rule. */
.pkp_structure_main:before,
.pkp_structure_main::before,
.pkp_structure_main:after,
.pkp_structure_main::after {
  display: none !important;
  content: none !important;
}

/* ====================================================================
   16) TABLET BAND 656-991.98px (v36): KEEP THE DESKTOP MENU BAR.
       The theme collapses to the hamburger below 992px; with our
       9 items; below ~700px the row wraps to a second line (v36). The Login/user nav gets
       its own TOP-RIGHT strip above the banner. v30: the primary
       menu is a nowrap FLEXBOX - no inline-block whitespace gaps,
       physically cannot wrap - with clamp(12px..14px) items that
       grow with the available width.
   ==================================================================== */
@media (min-width: 656px) and (max-width: 991.98px) {

  /* no hamburger in this band */
  .pkp_site_nav_toggle { display: none !important; }

  /* section 11 reserved 2.857rem for the toggle - not needed here */
  .pkp_site_name_wrapper,
  div:has(> .pkp_site_name),
  div:has(> * > a > img[src*="pageHeaderLogoImage"]) {
    padding-top: 0 !important;
    min-height: 0 !important;
  }

  /* top strip above the banner for the Login/user nav,
     pinned to the right like on desktop */
  .pkp_head_wrapper {
    position: relative;
    padding-top: 2.143rem !important;
  }
  .pkp_navigation_user_wrapper,
  #navigationUserWrapper {
    position: absolute !important;
    top: 0 !important;
    left: auto !important;
    right: 20px !important;
    bottom: auto !important;
    transform: none !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    z-index: 1000;
  }
  .pkp_site_nav_menu .pkp_navigation_user.pkp_navigation_user {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: right;
    font-size: 13px;
    list-style: none;
  }
  .pkp_site_nav_menu .pkp_navigation_user > li {
    position: relative !important;
    display: inline-block !important;
  }
  .pkp_site_nav_menu .pkp_navigation_user > li > a {
    display: inline-block !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    color: #777777 !important;
    font-size: 13px;
    line-height: 20px;
    white-space: nowrap;
    text-decoration: none !important;
  }
  .pkp_site_nav_menu .pkp_navigation_user > li > a:hover,
  .pkp_site_nav_menu .pkp_navigation_user > li > a:focus {
    color: #333333 !important;
    background: transparent !important;
  }

  /* the menu container becomes a static gray Bootstrap bar */
  .pkp_site_nav_menu {
    display: block !important;
    position: static !important;
    top: auto !important;
    margin: 0 !important;
    padding: 0 15px !important;
    background: #f8f8f8 !important;
    border-top: 1px solid #e7e7e7 !important;
    border-bottom: 1px solid #e7e7e7 !important;
    box-shadow: none !important;
  }

  /* v30: wrapper layers around the PRIMARY menu become plain
     full-width blocks (the user nav lives in the top strip) */
  .pkp_site_nav_menu .pkp_navigation_primary_row,
  .pkp_site_nav_menu .pkp_navigation_primary_wrapper,
  .pkp_site_nav_menu > *:has(.pkp_navigation_primary),
  .pkp_site_nav_menu > * > *:has(> .pkp_navigation_primary) {
    position: static !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
    transform: none !important;
  }

  /* v36: flex row that MAY wrap to a second line when tight (~<700px) */
  .pkp_site_nav_menu .pkp_navigation_primary {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
    list-style: none;
  }

  /* items */
  .pkp_site_nav_menu .pkp_navigation_primary > li {
    position: relative !important;
    display: block !important;
    float: none !important;
    flex: 0 0 auto;
  }

  /* top-level links: fluid 12-14px, growing with the width */
  .pkp_site_nav_menu .pkp_navigation_primary > li > a {
    display: block !important;
    margin: 0 !important;
    padding: 12px clamp(4px, 2.4vw - 11.8px, 12px) !important; /* =12px @991 (ต่อเนียนกับเดสก์ท็อป) ไล่ลง ~4px @660 */
    color: #777777 !important;
    font-size: clamp(12px, 1.5vw, 14px);
    line-height: 20px;
    white-space: nowrap;
    text-decoration: none !important;
  }
  .pkp_site_nav_menu .pkp_navigation_primary > li:first-child > a {
    padding-left: 0 !important;
  }
  .pkp_site_nav_menu .pkp_navigation_primary > li > a:hover,
  .pkp_site_nav_menu .pkp_navigation_primary > li > a:focus {
    color: #333333 !important;
    background: transparent !important;
  }
  .pkp_site_nav_menu .pkp_navigation_primary > li:hover > a {
    color: #555555 !important;
    background: #e7e7e7 !important;
  }

  /* dropdown caret (the theme only draws it at >=992px) */
  .pkp_site_nav_menu .pkp_nav_list > li > a[aria-haspopup]:after,
  .pkp_site_nav_menu .pkp_nav_list > li[aria-haspopup] > a:after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.3em;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    vertical-align: middle;
  }

  /* dropdowns: absolute white cards, parked off-screen until hover.
     The html.tja-js duplicates outrank the tap-toggle "hidden" rules
     from 13b (same specificity, later in the cascade). */
  .pkp_site_nav_menu .pkp_nav_list ul,
  .pkp_site_nav_menu .dropdown-menu,
  html.tja-js .pkp_site_nav_menu .pkp_nav_list ul,
  html.tja-js .pkp_site_nav_menu .dropdown-menu {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: -9999px !important;
    right: auto !important;
    float: none !important;
    width: max-content !important;
    min-width: 180px !important;
    max-width: 420px !important;
    margin: 0 !important;
    padding: 5px 0 !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 4px !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175) !important;
    z-index: 1000 !important;
  }
  .pkp_site_nav_menu .pkp_nav_list > li:hover > ul,
  .pkp_site_nav_menu .pkp_nav_list > li:hover > .dropdown-menu,
  html.tja-js .pkp_site_nav_menu .pkp_nav_list > li:hover > ul,
  html.tja-js .pkp_site_nav_menu .pkp_nav_list > li:hover > .dropdown-menu {
    left: 0 !important;
  }

  /* the user dropdown opens right-aligned under the top strip */
  .pkp_site_nav_menu .pkp_navigation_user > li:hover > ul,
  html.tja-js .pkp_site_nav_menu .pkp_navigation_user > li:hover > ul {
    left: auto !important;
    right: 0 !important;
  }

  /* dropdown links */
  .pkp_site_nav_menu .pkp_nav_list ul a {
    display: block !important;
    padding: 6px 20px !important;
    border-left: 0 !important;
    color: #333333 !important;
    font-size: 13px;
    line-height: 1.5;
    white-space: normal;
    text-decoration: none !important;
  }
  .pkp_site_nav_menu .pkp_nav_list ul a:hover,
  .pkp_site_nav_menu .pkp_nav_list ul a:focus {
    background: #f5f5f5 !important;
    color: #262626 !important;
  }
}

/* 17) "Make a Submission": glossy white Bootstrap button
       (white->gray gradient, #ccc border, rounded, gray text),
       CENTERED in the sidebar column. */
.pkp_block.block_make_submission,
.block_make_submission,
.block_make_submission .content {
  text-align: center !important;
}
.pkp_block.block_make_submission a,
.block_make_submission a,
.block_make_submission .block_make_submission_link {
  display: inline-block !important;
  width: auto !important;
  padding: 10px 24px !important;
  background-color: #f5f5f5 !important;
  background-image: linear-gradient(to bottom, #ffffff, #e9e9e9) !important;
  border: 1px solid #cccccc !important;
  border-bottom-color: #b3b3b3 !important;
  border-radius: 5px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
              0 1px 2px rgba(0, 0, 0, 0.05) !important;
  color: #666666 !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-align: center;
  text-decoration: none !important;
  text-shadow: 0 1px 0 #ffffff !important;
}
.pkp_block.block_make_submission a:hover,
.pkp_block.block_make_submission a:focus,
.block_make_submission a:hover,
.block_make_submission a:focus {
  background-color: #eeeeee !important;
  background-image: linear-gradient(to bottom, #f8f8f8, #dddddd) !important;
  color: #555555 !important;
  text-decoration: none !important;
}

/* ====================================================================
   18) FLUID LAYOUT
   ==================================================================== */

/* 18a) Containers: cap 1200px, fluid below it. v31: the gray header
        background (.pkp_structure_head) stays FULL-BLEED; only the
        inner .pkp_head_wrapper (banner + menu + user strip) is
        constrained, replacing the theme's stepped 728/952/1160px.
        Banner, menu, content and footer all share
        min(1200px, 100% - 40px). */
@media (min-width: 768px) {
  .pkp_structure_head {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
  .pkp_head_wrapper {
    width: min(1200px, calc(100% - 40px)) !important;
    max-width: none !important;
    margin: 0 auto !important;
  }
  .pkp_structure_content,
  .pkp_structure_footer,
  .pkp_search_mobile {
    width: min(1200px, calc(100% - 40px)) !important;
  }
}
@media (min-width: 992px) {
  /* the head wrapper already constrains the width - the menu wrapper
     just fills it so "Home" stays flush with the content edge */
  .pkp_navigation_primary_wrapper {
    width: 100% !important;
  }

  /* the Login/user nav. The theme centers an absolute wrapper
     (left:50% + translateX) and relied on the <ul> being as wide as
     the container to push "Login" to the right edge; overriding that
     width collapsed the ul and centered it. Pin the wrapper to the
     container's RIGHT edge instead and let the ul shrink-wrap. */
  .pkp_navigation_user_wrapper {
    left: auto !important;
    right: max(20px, calc((100% - 1200px) / 2)) !important;
    transform: none !important;
    width: auto !important;
    padding: 0 !important;
  }
  .pkp_navigation_user {
    width: auto !important;
    text-align: right;
  }
}

/* 18b) PROPORTIONAL columns like the Bootstrap theme:
        main 71.5%, sidebar 28.5% - as the window narrows BOTH columns
        shrink together, and the Facebook card follows the sidebar
        via section 8. At the 1200px cap: main 858px, sidebar 342px.
        Pages WITHOUT a sidebar are untouched (:has() guard). */
@media (min-width: 992px) {
  .pkp_structure_sidebar {
    width: 28.5% !important;
  }
  .pkp_structure_main:has(+ .pkp_structure_sidebar) {
    width: 71.5% !important;
  }
}

/* 18c) FLUID article inner columns. The theme fixes .main_entry at px
       widths derived from the old fixed containers (428/352/560px)
       next to a fixed 300px .entry_details; calc keeps the details
       column beside the article at every width. */
@media (min-width: 768px) {
  .obj_article_details .main_entry {
    float: left;
    width: calc(100% - 300px) !important;
  }
  .obj_article_details .entry_details {
    float: left;
    width: 300px !important;
  }
}

/* ====================================================================
   19) SIDEBAR BLOCKS AS BOOTSTRAP PANELS
       Every block becomes a .panel.panel-default: white card, #ddd
       border, 4px radius, soft shadow; block titles render as the
       gray .panel-heading strip; block content gets 15px body
       padding. Handles titles both outside and inside the .content
       wrapper (the custom Facebook block keeps its title inside).
   ==================================================================== */
.pkp_structure_sidebar .pkp_block {
  margin: 0 0 20px !important;
  padding: 0 !important;
  background: #ffffff;
  border: 1px solid #dddddd !important;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  overflow: hidden;   /* children respect the rounded corners */
}

/* block body */
.pkp_structure_sidebar .pkp_block .content {
  margin: 0 !important;
  padding: 15px !important;
}

/* title OUTSIDE .content (standard OJS blocks) */
.pkp_structure_sidebar .pkp_block > .title {
  display: block;
  margin: 0 !important;
  padding: 10px 15px !important;
  background: #f5f5f5;
  border-bottom: 1px solid #dddddd;
  border-radius: 4px 4px 0 0;
  color: #333333;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
}

/* title INSIDE .content (e.g. the custom Facebook block): bleed it
   over the body padding so it still reads as the heading strip */
.pkp_structure_sidebar .pkp_block .content .title {
  display: block;
  margin: -15px -15px 15px !important;
  padding: 10px 15px !important;
  background: #f5f5f5;
  border-bottom: 1px solid #dddddd;
  color: #333333;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
}

/* ====================================================================
   20) STACKED SIDEBAR AS TWO BALANCED COLUMNS (700-991.98px, v31)
       When the sidebar drops below the content (iPad portrait), its
       blocks flow into two columns of roughly desktop-sidebar width.
       CSS multi-column balances the two so both bottoms end at about
       the same height; break-inside keeps each block panel whole.
   ==================================================================== */
/* v40/41: sidebar goes 2-column from 480px (was 700px) */
@media (min-width: 480px) and (max-width: 991.98px) {
  .pkp_structure_sidebar {
    width: 100% !important;
    column-count: 2;
    column-gap: 20px;
  }
  .pkp_structure_sidebar .pkp_block {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    width: 100%;
  }
}

/* ====================================================================
   20) v35: BANNER SIZE - progressive curve chosen after live tuning.
       min(1200px, max(78vw, 115vw - 290px)):
       - wide screens: caps at 1200px
       - 1240 down to ~725px: 115vw-290px - the RATIO shrinks as the
         window narrows (~92% at 1240, ~86% at 992, ~80% at 820)
       - below ~725px: floor of 78vw so phones keep a readable logo
   ==================================================================== */
img[src*="pageHeaderLogoImage"],
.pkp_site_name .is_img img,
.pkp_site_name img {
  width: min(1200px, max(78vw, calc(115vw - 290px))) !important;
  max-width: none !important;
  height: auto !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ====================================================================
   21) v35: KILL THE THEME'S STEPPED CONTAINER WIDTHS FOR GOOD.
       body.less steps  width: 728/952/1160px  at 768/992/1200 on ALL
       of these wrappers - including .pkp_site_name_wrapper (the
       banner's own wrapper) and the menu row, which section 18a never
       covered. That was the visible jump at 1200->1199 and 992->991.
       Outer wrappers: fluid, capped at 1200. Inner header rows: fill
       their (already fluid) parent. .pkp_navigation_user is left
       alone - sections 16/18a position it absolutely.
       v38: applies at ALL widths - starting it at 768px made the
       header snap to full-bleed the moment the window crossed 767.
   ==================================================================== */
@media (min-width: 1px) {
  .pkp_head_wrapper,
  .pkp_structure_content,
  .pkp_structure_footer,
  .pkp_search_mobile {
    width: min(1200px, calc(100% - 40px)) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .pkp_site_name_wrapper,
  .pkp_navigation_primary_wrapper {
    width: 100% !important;
    max-width: none !important;
  }
  /* the theme pins full-height column borders at the old fixed
     widths (728/652/860px) - keep them on the fluid column edges */
  .pkp_structure_main::before { left: 0 !important; }
  .pkp_structure_main::after { left: auto !important; right: 0 !important; }
}

/* ====================================================================
   22) v39: MENU = ONE LINE ALWAYS, LEFT EDGE RIDING THE BANNER.
       "Align to banner" + "never wrap" conflict below ~1000px (ten
       items at full size are wider than the banner there). Resolution:
       the row's LEFT edge tracks the banner's left edge exactly
       (padding-left = half the wrapper-banner gap), the right side may
       extend past the banner when tight, and items compress fluidly
       (font 14->10px, side padding 12->3px) so ONE line survives all
       the way down to the 656px hamburger point. If a width still
       wraps, tune the two knobs: font "1.1vw + 3px", padding
       "1.6vw - 6px".
   ==================================================================== */
@media (min-width: 656px) {
  .pkp_navigation_primary,
  .pkp_site_nav_menu .pkp_navigation_primary {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: calc((100% - min(1200px, max(78vw, 115vw - 290px))) / 2) !important;
    padding-right: 0 !important;
    list-style: none;
    text-align: left !important;
  }
  .pkp_navigation_primary > li,
  .pkp_site_nav_menu .pkp_navigation_primary > li {
    flex: 0 0 auto;
    float: none !important;
  }
  .pkp_navigation_primary > li > a,
  .pkp_site_nav_menu .pkp_navigation_primary > li > a {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
    padding-left: clamp(3px, 1.6vw - 6px, 12px) !important;
    padding-right: clamp(3px, 1.6vw - 6px, 12px) !important;
    font-size: clamp(10px, 1.1vw + 3px, 14px) !important;
    line-height: 20px;
    white-space: nowrap !important;
  }
  .pkp_navigation_primary > li:first-child > a,
  .pkp_site_nav_menu .pkp_navigation_primary > li:first-child > a {
    padding-left: 0 !important;
  }
}