/* ==================================================================
   Bosara Theme  |  styles/bosara-20260930-v1.css
   Child of OJS 3.5 Default for BOSARA (Journal Barista Mixiologi and
   Restaurant Management, Politeknik Pariwisata Makassar).
   Built on the IConMTHS Theme v3e structure, which follows the
   SCIENTIST journal (journal.lontaradigitech.com/index.php/SCIENTIST):
   1160px white page panel, dark header and nav, block title bars,
   white identity table, dark footer with light text.
   Canvas: a green mountain landscape (images/bosara-mountains.svg).

   Design read: academic journal of a hospitality polytechnic, read by
   students, lecturers and practitioners; SCIENTIST page structure on
   a mountain canvas, dial ENERGY 2 / RHYTHM 1 / MOTION 1 (hover and
   focus colour only, no animation).

   Palette (2 cores + 1 accent + neutrals; measurements and contrast
   in notes-palette.md):
     --bsr-deep   #1b3f34  darkest pine of the illustration: header,
                           nav, footer, primary buttons (white 11.6:1)
     --bsr-green  #006634  the BOSARA logo green: block title bars,
                           button hover, links (7.1:1 on white)
     --bsr-mint   #9dd8c5  farthest ridge of the illustration: hover
                           and focus on dark surfaces only (7.2:1)
     --bsr-canvas #dbf2eb  pale sky behind the ridges

   OJS constraints honoured: nav switches at 992px; no display/position
   override on .pkp_site_nav_menu below 992px; no overflow-x:hidden on
   body; keyboard focus always visible.
   ================================================================== */

:root {
  --bsr-deep: #1b3f34;
  --bsr-green: #006634;
  --bsr-mint: #9dd8c5;
  --bsr-canvas: #dbf2eb;
  --bsr-ink: rgba(0, 0, 0, 0.87);
  --bsr-panel: #f1f1f1;
  --bsr-line: #dddddd;
}

/* ---------- 1. Canvas: mountain landscape -------------------------
   One wide scene (3683x1335 units), not a tile. The sky colour fills
   the canvas while the SVG loads and above the ridges. Only the
   gutters beside the white panel show it; no text sits on it.
   Desktop (992px up): fixed to the viewport, covering it, anchored at
   the bottom, so the ridges stay put while the panel scrolls.
   Below 992px the panel is almost full width, so the scene scrolls
   with the page (fixed backgrounds misbehave on iOS and repaint on
   every scroll) and sits at the foot of the page at full width. */
body {
  background-color: var(--bsr-canvas);
  background-image: url("../images/bosara-mountains.svg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  background-attachment: scroll;
}
@media (min-width: 992px) {
  body {
    background-size: cover;
    background-attachment: fixed;
  }
}

/* ---------- 2. Focus: visible on dark and light surfaces ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--bsr-green);
  outline-offset: 2px;
}
/* Mint on the dark header, footer and block bars. */
body > .pkp_structure_page > .pkp_structure_head a:focus-visible,
body > .pkp_structure_page > .pkp_structure_head button:focus-visible,
.pkp_structure_footer_wrapper a:focus-visible,
.pkp_block .title a:focus-visible {
  outline-color: var(--bsr-mint);
}

/* ---------- 3. Header frame ---------------------------------------
   Outer header transparent so the canvas shows at the sides; the
   inner wrapper is the pine panel, same width as the content panel.
   "body >" scoping keeps these rules off any header markup pasted
   into content fields, and beats a homepage-image header background
   if the Default option is switched on later. */
body > .pkp_structure_page > .pkp_structure_head {
  background: transparent;
  border-bottom: 0;
}
body > .pkp_structure_page > .pkp_structure_head .pkp_head_wrapper {
  background-color: var(--bsr-deep);
}
.pkp_site_nav_menu {
  background: var(--bsr-deep);
}

/* ---------- 4. Logo: full panel width, as on SCIENTIST ------------
   The BOSARA banner is 4591x900 (about 5.1:1), so at 1160px it is
   227px tall. */
.pkp_site_name_wrapper {
  padding-left: 0;
  padding-right: 0;
}
.pkp_site_name {
  padding-top: 0;
  padding-bottom: 0;
}
.pkp_site_name > a {
  padding-top: 0;
  padding-bottom: 0;
}
.pkp_site_name .is_img {
  display: block;
  margin: 0;
}
/* Default caps the logo at 2.143rem (mobile) and 80px (desktop). With
   width:100% that cap would squash the image, so the cap is lifted and
   the aspect ratio alone sets the height. */
.pkp_site_name .is_img img {
  width: 100%;
  max-width: 100%;
  max-height: none;
  height: auto;
}

/* ---------- 5. Primary navigation --------------------------------- */
.pkp_nav_list > li {
  background: var(--bsr-deep);
}
.pkp_nav_list > li > a,
.pkp_navigation_search_wrapper a {
  color: #fff;
  font-weight: 700;
}
.pkp_navigation_primary > li > a {
  border-bottom: 3px solid transparent;
}
/* Same inset SCIENTIST gives the first and last items, so the labels
   do not touch the panel edge. */
.pkp_navigation_primary > li:first-child > a {
  margin-left: 0.5em;
}
.pkp_navigation_primary > li:last-child > a {
  margin-right: 0.5em;
}
/* Default turns a focused item into a white box with dark text; kept
   as a colour change plus the visible outline from section 2. */
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_search_wrapper a:hover,
.pkp_navigation_search_wrapper a:focus,
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
  color: var(--bsr-mint);
  background: transparent;
  border-color: transparent;
}
/* Dropdown panel stays white (Default), recoloured to the palette.
   The left edge marks the hovered/focused item: a state signal. */
.pkp_nav_list ul a {
  color: var(--bsr-green);
}
.pkp_nav_list ul a:hover,
.pkp_nav_list ul a:focus,
.pkp_navigation_primary .dropdown-menu a:hover,
.pkp_navigation_primary .dropdown-menu a:focus {
  background: var(--bsr-panel);
  border-color: var(--bsr-green);
  color: var(--bsr-deep);
}

/* ---------- 6. User navigation (Register / Login / account) ------- */
.pkp_navigation_user > li.profile {
  border-radius: 5px;
}
.pkp_navigation_user > li > a {
  color: #fff;
}
.pkp_navigation_user .task_count {
  background: #d63b3b;
  color: #fff;
}
.pkp_navigation_user > li > a:focus .task_count {
  background: var(--bsr-green);
}
@media (min-width: 992px) {
  /* Default gives the user list a fixed desktop width; the longer
     signed-in menu can push it past the viewport edge. */
  .pkp_navigation_user {
    width: auto;
    max-width: 100%;
  }
  /* Default centres the wrapper (left:50% + translateX(-50%)). It is
     pinned to the right edge of the header row instead, the edge the
     nav bar and white panel end on. padding-right:0 also cancels the
     30px the old journal stylesheet added, which pushed the links
     170-290px past the viewport on every page. */
  .pkp_navigation_user_wrapper {
    left: auto;
    right: 0;
    transform: none;
    padding-right: 0;
  }
  /* Default pulls the last link 0.714rem past the list edge; kept
     inside so the link box ends on the panel edge. */
  .pkp_navigation_user > li:last-child > a {
    margin-right: 0;
  }
  /* Account menu opens leftwards from the right edge of its item, so
     it never runs past the panel or the viewport. Only the open
     (hover) state is touched; the closed state stays off-screen. */
  .pkp_navigation_user > li:hover > ul {
    left: auto;
    right: 0;
  }
}

/* ---------- 7. Content canvas: white page panel -------------------
   The panel sits on the canvas at the Default content width (1160px
   from 1200px up), exactly as on SCIENTIST. */
.pkp_structure_content {
  background: #fff;
}
.pkp_structure_main,
.pkp_structure_sidebar {
  overflow-wrap: break-word;
}
.pkp_structure_main img,
.pkp_block img {
  max-width: 100%;
  height: auto;
}

/* ---------- 8. Sidebar block title bars ---------------------------
   A dark bar with white text is the SCIENTIST block signature, here
   in the BOSARA logo green so it sits one step brighter than the pine
   header. Uppercase with light tracking only here, so the bars read as
   labels and the block content keeps normal case. */
.pkp_block .title {
  margin: 0 0 0.857rem;
  padding: 0.571rem 0.857rem;
  background: var(--bsr-green);
  color: #fff;
  font-size: 0.93rem;
  line-height: 1.43rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* BOSARA has custom blocks whose title and content are both empty
   (customblock-menu, -mou, -indeksasi today). Without this they would
   show a bare green bar and leave a gap in the sidebar. Hidden only
   while empty, so a block an editor fills later shows again. */
.pkp_block .title:empty {
  display: none;
}
.pkp_block.block_custom:has(> .title:empty):not(:has(> .content *)) {
  display: none;
}
.pkp_block .content a {
  color: var(--bsr-green);
}
.pkp_block .content a:hover,
.pkp_block .content a:focus {
  color: var(--bsr-deep);
}

/* ---------- 9. Headings in the main column ------------------------ */
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.pkp_structure_main .page_title {
  color: var(--bsr-deep);
}
.pkp_page_index .current_issue .current_issue_title {
  color: var(--bsr-deep);
}
/* Links in the main column: logo green instead of the Default blue.
   Buttons drawn as links keep their own colours (sections 10, 11).
   :where() keeps this at the weight of ".pkp_structure_main a", so
   the article and issue title rules below still win. */
.pkp_structure_main a:where(:not(.obj_galley_link, .cmp_button)) {
  color: var(--bsr-green);
}
.pkp_structure_main a:where(:not(.obj_galley_link, .cmp_button)):hover,
.pkp_structure_main a:where(:not(.obj_galley_link, .cmp_button)):focus {
  color: var(--bsr-deep);
}

/* ---------- 10. Issue TOC, article list, galleys ------------------
   Section names keep the Default rule-line layout, recoloured. Galley
   buttons keep the Default outline style, which SCIENTIST also uses. */
.obj_issue_toc .section > h2,
.obj_issue_toc .section > h3,
.obj_issue_toc .galleys > h2,
.obj_issue_toc .galleys > h3 {
  color: var(--bsr-green);
}
.obj_article_summary > .title a {
  color: var(--bsr-deep);
}
.obj_article_summary > .title a:hover,
.obj_article_summary > .title a:focus {
  color: var(--bsr-green);
  text-decoration: underline;
}
.obj_galley_link {
  border-color: var(--bsr-green);
  color: var(--bsr-green);
}
.obj_galley_link:hover,
.obj_galley_link:focus {
  background: var(--bsr-green);
  color: #fff;
}

/* ---------- 11. Archive, article view, forms, tables -------------- */
.obj_issue_summary .title {
  color: var(--bsr-deep);
}
.obj_issue_summary .title:hover,
.obj_issue_summary .title:focus {
  color: var(--bsr-green);
}
.obj_article_details .item .label,
.obj_article_details .main_entry .item .label {
  color: var(--bsr-green);
}
/* Primary actions (search submit, form submit, make a submission):
   solid pine replaces the grey Default gradient so buttons match the
   header. One colour, no glow, 3px radius kept from Default. */
.cmp_button,
.cmp_form .buttons button,
.page_lost_password .buttons button,
.page_search .submit button,
.block_make_submission a {
  background: var(--bsr-deep);
  border: 1px solid var(--bsr-deep);
  box-shadow: none;
  color: #fff;
}
.cmp_button:hover,
.cmp_button:focus,
.cmp_form .buttons button:hover,
.cmp_form .buttons button:focus,
.page_lost_password .buttons button:hover,
.page_lost_password .buttons button:focus,
.page_search .submit button:hover,
.page_search .submit button:focus,
.block_make_submission a:hover,
.block_make_submission a:focus {
  background: var(--bsr-green);
  border-color: var(--bsr-green);
  box-shadow: none;
  color: #fff;
}
/* The sidebar link colour (.pkp_block .content a) outranks the rule
   above and painted the button label green on pine. */
.pkp_block.block_make_submission .content a,
.pkp_block.block_make_submission .content a:hover,
.pkp_block.block_make_submission .content a:focus {
  color: #fff;
}
.cmp_form input[type="text"]:focus,
.cmp_form input[type="email"]:focus,
.cmp_form input[type="password"]:focus,
.cmp_form input[type="url"]:focus,
.cmp_form select:focus,
.cmp_form textarea:focus,
.page_search input[type="text"]:focus {
  border-color: var(--bsr-green);
}
/* Tables pasted into static pages scroll inside their own box on
   small screens instead of widening the page. */
.pkp_structure_main table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}
.pkp_structure_main th {
  background: var(--bsr-panel);
  color: var(--bsr-deep);
}
.pkp_structure_main th,
.pkp_structure_main td {
  border: 1px solid var(--bsr-line);
  padding: 0.357rem 0.571rem;
}

/* ---------- 12. Footer --------------------------------------------
   Pine panel, same colour as the header, so the page is framed top
   and bottom in the darkest green of the ridges. Text rules for the
   BOSARA footer content are in section 16. */
.pkp_structure_footer_wrapper {
  background: transparent;
}
.pkp_footer_content,
.pkp_brand_footer {
  background: var(--bsr-deep);
}
.pkp_footer_content h1,
.pkp_footer_content h2,
.pkp_footer_content h3,
.pkp_footer_content h4 {
  color: #fff;
}
/* The OJS/PKP credit is a dark-on-transparent PNG. Rendered white so
   it stays legible on the dark panel; the credit itself is unchanged. */
.pkp_brand_footer img {
  filter: brightness(0) invert(1);
}

/* ---------- 13. Below the 992px nav switch ------------------------
   Only colours and spacing. .pkp_site_nav_menu keeps its Default
   display/position so the hamburger toggle stays in control. */
@media (max-width: 991px) {
  /* Default positions the site name absolutely beside the toggle, sized
     for a one-line text title. The full-width banner is taller, so the
     name returns to normal flow (the wrapper then grows with the logo)
     and starts after the 2.857rem toggle, so the two never overlap. */
  body > .pkp_structure_page > .pkp_structure_head .pkp_site_name_wrapper {
    height: auto;
    min-height: 2.857rem;
  }
  body > .pkp_structure_page > .pkp_structure_head .pkp_site_name {
    position: relative;
    left: auto;
    right: auto;
    margin-left: 2.857rem;
    padding-left: 0.357rem;
    overflow: visible;
    white-space: normal;
  }
  .pkp_nav_list > li {
    background: transparent;
  }
  .pkp_nav_list ul a,
  .pkp_site_nav_menu a {
    color: #fff;
  }
  .pkp_nav_list ul a:hover,
  .pkp_nav_list ul a:focus,
  .pkp_site_nav_menu a:hover,
  .pkp_site_nav_menu a:focus {
    background: transparent;
    color: #fff;
    text-decoration: underline;
  }
  .pkp_block .title {
    font-size: 0.857rem;
  }
}

/* ---------- 14. Very narrow screens (under 360px) -----------------
   The reCAPTCHA widget on login and register is a fixed 304px iframe.
   Default pads both the content panel and the main column by 0.714rem,
   so the widget ends past a 320px screen. Where that widget is
   present, only the panel padding remains (10px each side). */
@media (max-width: 359px) {
  .pkp_structure_main:has(.g-recaptcha) {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ---------- 15. Homepage: Additional Home Content -----------------
   BOSARA's "Additional Home Content" setting holds, in this order: a
   one-line publication note, a pasted section.homepage_about with the
   subject classification, then a second div.additional_content with
   the "Journal BOSARA" heading, the journal identity table
   (table.data, inline olive background and white text) and the scope
   list (#additional).
   Order: this block sits right after About, before Current Issue
   (Pak CEO's request, 2026-09-30), same as IConMTHS. Only the visual
   order changes; the DOM and screen-reader order stay as written. */
.pkp_page_index .page_index_journal {
  display: flex;
  flex-direction: column;
}
.pkp_page_index .page_index_journal > * {
  order: 3;
}
.pkp_page_index .page_index_journal > .homepage_image,
.pkp_page_index .page_index_journal > .homepage_about {
  order: 1;
}
.pkp_page_index .page_index_journal > .additional_content {
  order: 2;
}

/* a) The pasted class names pull in Default page rules a second time:
      section padding on the inner homepage_about, and negative side
      margins, padding and a top rule on the inner additional_content.
      Removed so everything shares the left edge of the block. */
.page_index_journal > .additional_content .homepage_about,
.page_index_journal > .additional_content .additional_content {
  margin: 0;
  padding: 0;
  border: 0;
}
.page_index_journal > .additional_content .homepage_about {
  margin-top: 1rem;
}

/* b) Heading: same size, weight and colour as "About the Journal" and
      "Current Issue", left-aligned like them (the inline centring is
      overridden for that reason). */
.page_index_journal > .additional_content h1 {
  margin: 2.143rem 0 1.43rem;
  font-size: 1.285rem;
  line-height: 2.143rem;
  font-weight: 700;
  color: var(--bsr-deep);
  text-align: left !important;
}

/* c) The identity table: white, black text, thin neutral rules, square
      corners. The inline olive background, white text and 10px radius
      are overridden here only. Label column kept narrow; values take
      the rest. Links use the theme green (7.1:1 on white). */
.page_index_journal > .additional_content table.data {
  display: table;
  width: 100% !important;
  margin: 0;
  border: 1px solid var(--bsr-line) !important;
  border-collapse: collapse;
  border-radius: 0 !important;
  background: #fff !important;
  color: #000 !important;
}
.page_index_journal > .additional_content table.data td {
  padding: 0.571rem 0.714rem !important;
  border: 1px solid var(--bsr-line);
  background: #fff;
  color: #000;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.page_index_journal > .additional_content table.data td:first-child {
  width: 10rem;
}
.page_index_journal > .additional_content table.data a {
  color: var(--bsr-green);
  text-decoration: underline;
}
.page_index_journal > .additional_content table.data a:hover,
.page_index_journal > .additional_content table.data a:focus {
  color: var(--bsr-deep);
}
.page_index_journal > .additional_content #additional {
  margin-top: 1.43rem;
}
/* Narrow screens: each row stacks, label above value. Today the table
   ends 51px past a 320px screen because the long ISSN decree number
   and the Scopus link cannot wrap inside the value column. */
@media (max-width: 599px) {
  .page_index_journal > .additional_content table.data,
  .page_index_journal > .additional_content table.data tbody,
  .page_index_journal > .additional_content table.data tr,
  .page_index_journal > .additional_content table.data td {
    display: block;
    width: auto !important;
  }
  .page_index_journal > .additional_content table.data {
    border-width: 1px 0 0 !important;
  }
  .page_index_journal > .additional_content table.data tr {
    padding: 0.571rem 0;
    border-bottom: 1px solid var(--bsr-line);
  }
  .page_index_journal > .additional_content table.data td {
    padding: 0 !important;
    border: 0;
  }
  .page_index_journal > .additional_content table.data td:first-child {
    margin-bottom: 0.143rem;
    font-size: 0.857rem;
  }
  /* Justified text opens wide gaps on a phone-width column. */
  .page_index_journal > .additional_content #additional {
    text-align: left !important;
  }
}

/* ---------- 16. Footer text and the duplicate OJS/PKP credit ------
   The Page Footer content sets its text inline in dark green #006400,
   which would read 1.6:1 on the pine panel. On #1b3f34: body text white
   at 80% (renders #d1d9d6, 8.1:1), labels in bold white (11.6:1), links
   in mint (7.2:1). The rule is white at 18%, quiet but visible.
   The content also ends with a pasted copy of the OJS/PKP credit that
   links to another journal (pusaka); the theme prints its own credit
   below it, so the pasted copy is hidden. */
.pkp_footer_content .pkp_brand_footer {
  display: none;
}
.pkp_footer_content,
.pkp_footer_content [style*="color"] {
  color: rgba(255, 255, 255, 0.8) !important;
}
.pkp_footer_content strong,
.pkp_footer_content b {
  color: #fff;
}
.pkp_footer_content a,
.pkp_footer_content a strong {
  color: var(--bsr-mint);
}
.pkp_footer_content a:hover,
.pkp_footer_content a:focus,
.pkp_footer_content a:hover strong,
.pkp_footer_content a:focus strong {
  color: #fff;
}
.pkp_footer_content hr {
  margin: 1.43rem 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
/* The location map is an embedded iframe (width 100%, height 200). */
.pkp_footer_content iframe {
  display: block;
  max-width: 100%;
  border: 0;
}
/* The contact emails (decoded by Cloudflare on load) are single long
   words; on a 320px screen they ran 51px past the edge of every page.
   They may now break anywhere instead. */
.pkp_footer_content {
  overflow-wrap: anywhere;
}