/**
 * Custom stylesheet - JoCPES (Journal of Computation Physics and Earth Science)
 * Rewritten from scratch (sesi 5, M12) on top of OJS 3.5 `default` theme.
 * Style reference: shadcn/ui - sharp corners (no border-radius), clean typography,
 * generous whitespace, clear content boundaries, subtle borders instead of heavy shadows.
 *
 * Does NOT modify core/theme files - this is the journal's own custom stylesheet,
 * managed entirely through Journal Settings > Website > Appearance > Custom CSS,
 * so it survives any future OJS core upgrade untouched.
 *
 * Brand colours kept from the previous look (blue accent) - see :root variables below.
 * Change only the variables to re-theme without touching the rest of the file.
 */

:root {
  --jocpes-primary: #006798;
  --jocpes-primary-dark: #004f76;
  --jocpes-primary-tint: rgba(0, 103, 152, 0.08);
  --jocpes-accent: #1e6292;
  --jocpes-text: #1a1a1a;
  --jocpes-text-muted: #5f6b76;
  --jocpes-border: #e2e5e8;
  --jocpes-border-strong: #c9ced3;
  --jocpes-bg-subtle: #f7f8f9;
  --jocpes-radius: 0px; /* shadcn-style: sharp corners everywhere */
}

/* ==========================================================================
   0. Global reset of rounded corners + base typography
   ========================================================================== */

.pkp_structure_page,
.pkp_structure_page *,
.cmp_button,
.pkp_form input,
.pkp_form select,
.pkp_form textarea,
.obj_article_summary,
.pkp_block,
.value.galleys_links a,
.obj_galley_link {
  border-radius: var(--jocpes-radius) !important;
}

.pkp_structure_page {
  color: var(--jocpes-text);
  -webkit-font-smoothing: antialiased;
}

/* Sesi 14 UX audit: tombol "Connect your ORCID iD" di form Register
   menampilkan kode CSS mentah sebagai teks yang terlihat (".st0{fill:...}")
   alih-alih ikon ORCID - root cause: elemen <style> di dalam SVG ikonnya
   tidak diperlakukan default `display:none` sebagaimana mestinya. Ini
   bawaan plugin ORCID (bukan sesuatu di stylesheet ini yang menyebabkannya
   - sudah dicek, tidak ada rule luas yang menyentuh SVG di file ini), jadi
   fix defensif ini aman ditambahkan tanpa risiko - kalaupun ternyata
   browser sungguhan sudah menyembunyikannya sendiri, baris ini no-op. */
svg style {
  display: none !important;
}

.pkp_structure_page,
.pkp_structure_content {
  max-width: 1200px;
  margin: 0 auto;
}

/* ==========================================================================
   1. Header / navigation - rebuilt light, to match the JOCPES logo's own
   white background (previously a dark teal bar clashed with the logo AND made
   nav text invisible after an earlier white-background override - the theme's
   default nav text colour assumes a DARK header, see plugins/themes/default/
   styles/head.less; every state below is overridden on purpose, not just hover).
   ========================================================================== */

:root {
  --jocpes-navy: #1e2a5e; /* matches the logo subtitle colour */
}

.pkp_structure_head {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--jocpes-border);
  box-shadow: none;
  /* subtle nod to the logo's black/red/yellow/blue letters, understated */
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, #1a1a1a 0%, #1a1a1a 20%, var(--jocpes-primary) 20%, var(--jocpes-primary) 45%, #e63946 45%, #e63946 65%, #ffd60a 65%, #ffd60a 82%, #2b4bd6 82%, #2b4bd6 100%) 1;
}

.pkp_head_wrapper {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.pkp_site_name,
.pkp_site_name .is_text {
  color: var(--jocpes-navy) !important;
}

.pkp_site_name a {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.pkp_site_name .is_img:focus {
  outline-color: var(--jocpes-primary) !important;
}

.pkp_navigation_primary_wrapper {
  border-top: 1px solid var(--jocpes-border);
  background: #fff;
}

/* Top-level nav links (primary menu, user/account menu, search) - normal state */
.pkp_navigation_primary > li > a,
.pkp_navigation_user > li > a,
.pkp_navigation_search_wrapper a {
  color: var(--jocpes-navy) !important;
  font-weight: 500;
  border-color: transparent !important;
  transition: color 0.15s ease, border-color 0.15s ease;
}

/* Hover - clear colour shift + underline, no more invisible-on-invisible */
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_user > li > a:hover,
.pkp_navigation_search_wrapper a:hover {
  color: var(--jocpes-primary) !important;
  border-color: var(--jocpes-primary) !important;
}

/* Focus/keyboard nav - readable inverted pill instead of white-on-white */
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_user > li > a:focus,
.pkp_navigation_search_wrapper a:focus {
  background: var(--jocpes-primary) !important;
  color: #fff !important;
}

.pkp_navigation_user > li > a:focus .task_count {
  background: #fff !important;
  color: var(--jocpes-primary) !important;
}

/* Active top-level menu indicator - the core Navigation Menu template
   (templates/frontend/components/navigationMenu.tpl) has no current-page
   detection at all, so a small script adds `.pkp_nav_active` to the matching
   <li> client-side (injected via Journal Settings > Website > Search Indexing
   "Custom head tags" / journal_settings.customHeaders - a core field already
   used for SEO meta tags, NOT the removed customHeader plugin - see
   _migration/DECISIONS.md for why that plugin doesn't exist in 3.5 anymore). */
/* User feedback (sesi 9): the underline looked "doubled/layered" - root
   cause was that setting `border-color` here revealed the theme's OWN
   `border-bottom: 2px solid transparent` (head.less line 331, the same
   mechanism the theme itself uses for :hover) at the same time as a
   separate custom `:after` line 1px below it - two near-overlapping lines.
   Decision: drop both underline mechanisms entirely, active state is now
   colour + weight only, matching the user's explicit preference. */
.pkp_navigation_primary > li.pkp_nav_active > a {
  color: var(--jocpes-primary) !important;
  font-weight: 700;
}

/* Mobile hamburger icon - REBUILT (sesi 10) using an inline SVG icon instead
   of the theme's original 3-hairline-bars-out-of-CSS-borders technique.
   User reported (2 rounds, with fresh screenshots each time) that the icon
   still rendered as an indistinct solid dark blob on their real device even
   after: (a) fixing `appearance:button` blocking custom colours (D21), and
   (b) fixing the border-radius/contrast/colour-block issues (D22). Every
   value was re-verified correct via getComputedStyle in this session's
   testing tool each time, yet the user's screenshots kept showing what is
   clearly NOT 3 crisp separated lines. Root cause conclusion: 3 separate
   2-3px CSS border/pseudo-element hairlines packed into a ~20px icon is
   inherently fragile across real device pixel ratios/rendering/compression
   - close enough together that they visually merge into a blob instead of
   staying distinct, no matter how "correct" the underlying colour values
   are. This is a well-known reason production icon sets use actual vector
   graphics instead of CSS-only line art for exactly this failure mode.
   Fix: replace the icon entirely with a proper SVG (crisp at any size,
   device-independent, cannot merge into a blob) via `background-image`,
   and neutralise the theme's original border-bottom/:before/:after bars
   completely so nothing is left to conflict with it. */
.pkp_site_nav_toggle {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: none !important;
  background: #fff !important;
  border: 1px solid var(--jocpes-border-strong) !important;
  border-radius: var(--jocpes-radius);
}

.pkp_site_nav_toggle:hover {
  background: var(--jocpes-bg-subtle) !important;
  border-color: var(--jocpes-primary) !important;
}

.pkp_site_nav_toggle:focus {
  outline-color: var(--jocpes-primary) !important;
}

.pkp_site_nav_toggle > span {
  border-bottom: 0 !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e2a5e' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 22px !important;
  width: 22px !important;
  height: 22px !important;
}

.pkp_site_nav_toggle > span:before,
.pkp_site_nav_toggle > span:after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
}

/* "Currently open" indicator - the theme's own JS
   (plugins/themes/default/js/main.js) toggles class
   `pkp_site_nav_toggle--transform` on this button when the menu opens, so
   the indicator hooks that same class rather than adding new JS/markup:
   button gets a light primary-tint backplate + border (same accent
   language as the Editorial Policies hover block, section 4), and the icon
   image swaps from 3-line to an X, drawn as the same kind of crisp SVG. */
.pkp_site_nav_toggle.pkp_site_nav_toggle--transform {
  background: var(--jocpes-primary-tint) !important;
  border-color: var(--jocpes-primary) !important;
}

.pkp_site_nav_toggle.pkp_site_nav_toggle--transform > span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006798' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E") !important;
}

/* Mobile dropdown menu panel (opens under the header when hamburger is tapped)
   - this is a SEPARATE element from .pkp_navigation_primary_wrapper, still had
   the theme's dark teal default background (was showing through behind the
   user-account section specifically, since that inner section has no opaque
   background of its own to cover it). Confirmed via computed style: was
   rgb(8, 85, 83). */
.pkp_site_nav_menu {
  background: #fff !important;
  border-top: 1px solid var(--jocpes-border);
}

.pkp_site_nav_menu .pkp_navigation_user,
.pkp_site_nav_menu .pkp_navigation_search_wrapper {
  border-top-color: var(--jocpes-border) !important;
}

.pkp_site_nav_menu a,
.pkp_site_nav_menu a:hover,
.pkp_site_nav_menu a:focus {
  color: var(--jocpes-navy) !important;
}

.pkp_site_nav_menu a:hover {
  color: var(--jocpes-primary) !important;
}

.pkp_site_nav_menu > li > ul .task_count {
  background: var(--jocpes-bg-subtle) !important;
  color: var(--jocpes-navy) !important;
}

/* ==========================================================================
   2. Article summary cards (homepage / issue listing) - clear card boundaries,
      no overlap, consistent spacing, sharp corners
   ========================================================================== */

.obj_article_summary {
  border: 1px solid var(--jocpes-border);
  border-left: 3px solid var(--jocpes-primary);
  background: #fff;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.obj_article_summary:hover {
  border-color: var(--jocpes-border-strong);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.obj_article_summary .title {
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.4rem;
  overflow-wrap: break-word;
  word-break: break-word;
}

.obj_article_summary .authors {
  color: var(--jocpes-text-muted);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.obj_article_summary .authors,
.obj_article_summary .title,
.obj_article_summary .subtitle {
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

/* Download / galley link pills - sharp, clear tap target */
.obj_galley_link,
.value.galleys_links a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--jocpes-border-strong);
  padding: 0.3rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--jocpes-primary);
  background: var(--jocpes-bg-subtle);
  text-decoration: none;
  white-space: nowrap;
}

.obj_galley_link:hover,
.value.galleys_links a:hover {
  background: #fff;
  border-color: var(--jocpes-primary);
  /* User feedback (sesi 14): hover bikin teks tak terlihat. Root cause: tema
     bawaan (styles/components.less .cmp_button_wire:hover) sudah punya
     aturan `color: #fff` untuk hover-nya sendiri (didesain untuk latar
     solid warna primer saat hover) - rule di atas cuma menimpa `background`
     jadi putih tanpa ikut menimpa `color`, jadi warna putih dari tema itu
     tetap kepakai di atas latar putih baru = teks hilang total. Ditambahkan
     eksplisit di sini supaya tidak lagi mewarisi apapun dari tema. */
  color: var(--jocpes-primary) !important;
}

/* Article usage counts (views/downloads) - injected by the
   plugins/generic/articleUsageDisplay plugin (sesi 13), restoring what the
   old bootstrap3 theme used to show via Submission::getViews()/
   ArticleGalley::getViews() - those simple counters no longer exist in
   3.5's codebase, so this reads the same official usage-stats service the
   theme's own "Downloads chart" option uses. Kept visually quiet (small,
   muted, icon-led) so it reads as metadata, not competing with the
   download button for attention. */
.obj_article_usage_counts {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--jocpes-border);
}

.usage_count {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--jocpes-text-muted);
}

.usage_count::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.65;
}

.usage_count_views::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6b76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.usage_count_downloads::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6b76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}

.usage_count_number {
  font-weight: 600;
  color: var(--jocpes-text);
}

/* ==========================================================================
   2b. Homepage - "About the Journal" reorder + cover image sizing
   The template renders 3 sibling blocks under .page_index_journal in this
   DOM order: <section class="homepage_about"> (just the heading, empty) ->
   <section class="current_issue"> (the full issue listing) ->
   <div class="additional_content"> (the actual About text/cover/ISSN, set via
   Journal Settings > Website > Setup > Additional Content). Reordering these
   requires touching the theme template - instead we flex the shared parent
   and use `order` to move `additional_content` up, right after the About
   heading and before Current Issue, with ZERO template changes.
   ========================================================================== */

.page_index_journal {
  display: flex;
  flex-direction: column;
}

.page_index_journal .homepage_about {
  order: 1;
}

.page_index_journal .additional_content {
  order: 2;
}

.page_index_journal .current_issue {
  order: 3;
}

/* The cover image was a hardcoded inline width:594px/height:866px - not
   responsive at all. Force it to behave like a normal cover thumbnail. */
.additional_content .aimcolumn.aimleft img,
.additional_content img[alt="cover image"] {
  width: 100% !important;
  height: auto !important;
  max-width: 260px !important;
  border: 1px solid var(--jocpes-border);
  display: block;
  margin: 0 auto;
}

.additional_content .row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
  padding: 1.5rem 0 2rem;
}

.additional_content .aimcolumn.aimleft {
  flex: 0 0 260px;
}

.additional_content .aimcolumn.aimright {
  flex: 1 1 320px;
  min-width: 0; /* allow text to wrap instead of forcing the flex item wide */
}

.additional_content .aimcolumn.aimright ul {
  padding-left: 1.1rem;
}

.additional_content .container img.indexings {
  height: 40px;
  width: auto;
  max-width: 100%;
}

.additional_content .container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}

@media (max-width: 600px) {
  .additional_content .aimcolumn.aimleft {
    flex-basis: 100%;
    max-width: 200px;
    margin: 0 auto;
  }
}

/* ==========================================================================
   3. Article detail page - abstract, metadata
   IMPORTANT: do NOT add padding/border/width to `.obj_article_details`, `.row`,
   `.main_entry` or `.entry_details` themselves -- the theme's own LESS
   (styles/objects/article_details.less) lays `.main_entry` and `.entry_details`
   side-by-side using hand-calculated FIXED pixel widths (not %), so any extra
   padding on their ancestor silently eats into that budget and pushes
   `.entry_details` onto a new line below `.main_entry`. Style only text/leaf
   elements here. (Found & fixed sesi 6, see _migration/DECISIONS.md.)
   ========================================================================== */

.obj_article_details .page_title,
.obj_article_details .title {
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.35;
}

.obj_article_details .item.abstract {
  line-height: 1.7;
  color: var(--jocpes-text);
}

/* Any long unbroken string (DOI, URLs) must wrap instead of causing horizontal overflow */
.obj_article_details,
.obj_article_details a,
.value {
  overflow-wrap: anywhere;
}

/* ==========================================================================
   4. Sidebar blocks - consistent card treatment matching article cards
   ========================================================================== */

.pkp_block {
  border: 1px solid var(--jocpes-border);
  background: #fff;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.pkp_block .title,
.pkp_block h2 {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--jocpes-text-muted);
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--jocpes-border);
  padding-bottom: 0.5rem;
}

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

/* Sidebar block link lists (Editorial Policies, People, Tools, etc.) - clear,
   modern hover/focus feedback so it's obvious which item the user is
   pointing at or has just opened. */
.pkp_block .content ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pkp_block .content ul li {
  margin: 0;
}

.pkp_block .content ul li + li {
  border-top: 1px solid var(--jocpes-border);
}

.pkp_block .content ul li a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.5rem;
  margin: 0 -0.5rem;
  color: var(--jocpes-text);
  border-left: 3px solid transparent;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

.pkp_block .content ul li a .fa {
  color: var(--jocpes-text-muted);
  width: 1.1em;
  text-align: center;
  transition: color 0.15s ease;
}

.pkp_block .content ul li a:hover,
.pkp_block .content ul li a:focus {
  background: var(--jocpes-bg-subtle);
  border-left-color: var(--jocpes-primary);
  color: var(--jocpes-primary);
  padding-left: 0.75rem;
  outline: none;
}

.pkp_block .content ul li a:hover .fa,
.pkp_block .content ul li a:focus .fa {
  color: var(--jocpes-primary);
}

/* Currently open page, when the block happens to link to it - subtle
   persistent highlight (not just on hover) */
.pkp_block .content ul li a[aria-current="page"],
.pkp_block .content ul li a.current {
  background: var(--jocpes-bg-subtle);
  border-left-color: var(--jocpes-primary);
  color: var(--jocpes-primary);
  font-weight: 600;
}

/* Floating/sticky sidebar on desktop only - the theme floats the sidebar at
   min-width:992px (see plugins/themes/default/styles/body.less), so the
   sticky behaviour is scoped to the same breakpoint; below that the sidebar
   already stacks normally under the main content and must stay static. The
   sidebar itself is often taller than the viewport (many blocks), so instead
   of just pinning it (which would cut content off-screen) it becomes its own
   scrollable panel once you scroll past its natural position. */
@media (min-width: 992px) {
  .pkp_structure_sidebar {
    position: sticky;
    top: 1rem;
    align-self: flex-start;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* ==========================================================================
   5. Buttons and form fields - sharp corners, clear focus state
   ========================================================================== */

.cmp_button {
  border-radius: var(--jocpes-radius) !important;
  font-weight: 500;
  border: 1px solid var(--jocpes-primary);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cmp_button.isPrimary,
.cmp_button.isWarnable {
  background: var(--jocpes-primary);
  border-color: var(--jocpes-primary);
}

.cmp_button.isPrimary:hover {
  background: var(--jocpes-primary-dark);
  border-color: var(--jocpes-primary-dark);
}

/* Sesi 14 UX audit: tombol submit utama form publik (Register/Login/Search,
   class ".submit" bawaan tema - beda dari ".cmp_button.isPrimary" di atas)
   sebelumnya tampil pudar/abu-abu, tidak terlihat sebagai aksi utama -
   dibuat konsisten dengan gaya tombol primary di tempat lain di situs. */
.cmp_form .submit,
.cmp_form button[type="submit"] {
  background: var(--jocpes-primary) !important;
  color: #fff !important;
  border: 1px solid var(--jocpes-primary) !important;
  border-radius: var(--jocpes-radius) !important;
  font-weight: 500;
  padding: 0.5rem 1.25rem !important;
  height: auto !important;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cmp_form .submit:hover,
.cmp_form button[type="submit"]:hover {
  background: var(--jocpes-primary-dark) !important;
  border-color: var(--jocpes-primary-dark) !important;
}

/* Sesi 14 UX audit: ".pkp_form" ternyata TIDAK dipakai form publik manapun
   di frontend (login/register/pencarian semua pakai ".cmp_form", class yang
   lebih baru) - rule ini sebelumnya nyaris tidak pernah benar-benar aktif
   di halaman yang pengunjung lihat. Ditambahkan ".cmp_form" supaya styling
   ini benar-benar berlaku di semua form publik, bukan cuma di teori. */
.pkp_form input[type="text"],
.pkp_form input[type="email"],
.pkp_form input[type="password"],
.pkp_form input[type="search"],
.pkp_form select,
.pkp_form textarea,
.cmp_form input[type="text"],
.cmp_form input[type="email"],
.cmp_form input[type="password"],
.cmp_form input[type="search"],
.cmp_form select,
.cmp_form textarea {
  border: 1px solid var(--jocpes-border-strong) !important;
  border-radius: var(--jocpes-radius) !important;
}

.pkp_form input:focus,
.pkp_form select:focus,
.pkp_form textarea:focus,
.cmp_form input:focus,
.cmp_form select:focus,
.cmp_form textarea:focus {
  outline: 2px solid var(--jocpes-primary);
  outline-offset: 1px;
  border-color: var(--jocpes-primary) !important;
}

/* Make sure every clickable control keeps a visible focus ring for accessibility */
a:focus-visible,
button:focus-visible,
.cmp_button:focus-visible {
  outline: 2px solid var(--jocpes-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   6. Footer - calmer, clear separation from content
   ========================================================================== */

/* User feedback (sesi 12): footer terlihat seperti "kotak abu-abu" yang
   kurang rapi. Root cause ada di 2 lapis sekaligus: (a) rule di bawah ini
   sendiri sebelumnya pakai background abu-abu, DAN (b) konten
   journal_settings.pageFooter (admin-editable, lihat DECISIONS.md) juga
   punya `background:#f5f8fa` inline di div pembungkusnya - dua abu-abu
   nyaris sama persis bertumpuk. Dihapus total di kedua lapis (lapis kedua
   diedit langsung di DB, bukan di sini) - footer sekarang polos/menyatu
   dengan halaman, cuma dipisah garis tipis, sesuai gaya minimal shadcn yang
   dipakai di seluruh situs.
   Catatan: selector `.footer`/`.logo`/`.copyright` yang PERNAH ada di sini
   dihapus - itu target class yang TIDAK PERNAH ADA di markup pageFooter
   sesungguhnya (isinya <div> polos dengan inline style + komentar HTML,
   bukan class terstruktur), jadi rule itu selama ini dead code, tidak
   pernah benar-benar berlaku. */
.pkp_structure_footer {
  border-top: 1px solid var(--jocpes-border);
  background: #fff;
  margin-top: 2rem;
}

.pkp_structure_footer_wrapper {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.pkp_footer_content {
  padding: 0.5rem 0 !important;
  font-size: 0.9rem;
}

/* "Platform & workflow by OJS/PKP" branding - user requested it hidden.
   Confirmed safe via lib/pkp/templates/frontend/components/footer.tpl:
   `.pkp_brand_footer` is its own dedicated <div>, a sibling of
   `.pkp_footer_content` (the actual Address/Contact footer content) - not
   nested inside it, so hiding this class touches nothing else. This is a
   pure display toggle, not a licence requirement: OJS is GPL-licensed and
   does not mandate this front-end badge stay visible (GPL obligations are
   about source-code availability, not a UI attribution badge), so removing
   it here is safe. No core/template file touched - stylesheet-only. */
.pkp_brand_footer {
  display: none !important;
}

/* ==========================================================================
   7. Generic overflow safety net - nothing should ever force horizontal scroll
   ========================================================================== */

img,
iframe,
table {
  max-width: 100%;
}

table {
  display: block;
  overflow-x: auto;
}

pre,
code {
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ==========================================================================
   8. Responsive adjustments
   ========================================================================== */

@media (max-width: 992px) {
  .obj_article_details,
  .pkp_block {
    padding: 1.25rem;
  }
}

@media (max-width: 768px) {
  .pkp_structure_content {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .obj_article_summary {
    padding: 1rem;
  }

  .obj_article_details {
    padding: 1.25rem;
  }

  .pkp_head_wrapper {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

@media (max-width: 480px) {
  .obj_galley_link,
  .value.galleys_links a {
    width: 100%;
    justify-content: center;
  }
}

/* Mobile open menu should float above content while scrolling, not scroll
   away with the page. The menu panel (.pkp_site_nav_menu) is positioned
   `absolute; top:100%` relative to .pkp_head_wrapper's `position:relative`
   (see plugins/themes/default/styles/head.less) - rather than touching that
   theme file or fighting its positioning, we make the header itself sticky
   at the viewport top. The absolutely-positioned menu then rides along with
   it automatically, with zero changes needed to the menu's own CSS.
   Scoped to exactly the theme's own mobile breakpoint (<992px, see
   variables.less @screen-desktop) so the desktop header/nav, which the
   theme already renders as a normal static block, is completely untouched. */
@media (max-width: 991.98px) {
  .pkp_structure_head {
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  .pkp_site_nav_menu {
    max-height: calc(100vh - 65px);
    overflow-y: auto;
  }
}