/**
 * plugins/themes/jurnalFhIndexTheme/styles/jurnalFhIndex.css
 *
 * Design tokens/layout translated 1:1 from the approved
 * theme-dev/portal-jurnal-fh-unpad.html mockup.
 *
 * This stylesheet loads on every site-level page under this theme (login,
 * register, site search, static pages when no journal is selected), but the
 * task scope is only three of them: the site index, login, and register.
 * Two scoping roots keep the rest untouched:
 *   - `body.jfh_themed` — shared chrome (base tokens, masthead, footer) —
 *     carried by all three in-scope pages (see indexSite.tpl and this
 *     theme's header.tpl/footer.tpl overrides for where that class is set).
 *   - `body.pkp_page_index.pkp_op_index` — content specific to the site
 *     index only (hero banner, watermark, journal list). Login/register
 *     never carry this body-class combination, so these rules cannot leak
 *     onto them.
 */

body.jfh_themed {
  --paper: #FBF6EC;
  --ink: #1C1A16;
  --red: #B3202E;
  --red-deep: #6E141E;
  --gold: #D9A62E;
  --muted: #6B6252;
  --faint: #948B76;
  --rule: #E7DFC9;
  --sh1: 0 1px 2px rgba(28,26,22,0.06), 0 1px 1px rgba(28,26,22,0.04);
  --sh2: 0 6px 16px rgba(28,26,22,0.10), 0 2px 6px rgba(28,26,22,0.06);
  --sh3: 0 16px 32px rgba(28,26,22,0.16), 0 4px 10px rgba(28,26,22,0.08);

  margin: 0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
}
body.jfh_themed * { box-sizing: border-box; }
body.jfh_themed a { color: inherit; text-decoration: none; }
body.jfh_themed ::selection { background: var(--red); color: #fff; }
body.jfh_themed .jfh_wrap { max-width: 1180px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
@media (max-width: 720px) {
  body.jfh_themed .jfh_wrap { padding-left: 20px; padding-right: 20px; }
}

/* masthead — the only dark element, carries the logo — shared by all 3 pages */
body.jfh_themed .jfh_masthead { width: 100%; background: var(--ink); position: relative; z-index: 2; box-shadow: var(--sh2); }
body.jfh_themed .jfh_masthead::after { content:""; position:absolute; left:0; right:0; bottom:-3px; height:3px; background: linear-gradient(90deg, var(--red-deep), var(--red), var(--gold)); }
body.jfh_themed .jfh_masthead .jfh_wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 16px; padding-bottom: 16px; }
/* flex items with only a height set on a nested <img> can otherwise be
   collapsed to 0 width by the browser's automatic min-width:auto sizing —
   pin both to their natural size so they never shrink. */
body.jfh_themed .jfh_masthead .jfh_logo_link { flex-shrink: 0; display: block; }
body.jfh_themed .jfh_masthead .jfh_logo { height: 34px; display: block; flex-shrink: 0; }
body.jfh_themed .jfh_masthead nav { display: flex; align-items: center; gap: 20px; font-size: 13px; font-weight: 500; color: #D8D1C0; }
body.jfh_themed .jfh_masthead nav a { transition: color .15s; }
body.jfh_themed .jfh_masthead nav a:hover { color: #fff; }
/* default theme's own CSS has a generic rule
   `.pkp_site_name_wrapper, .pkp_navigation_primary_wrapper,
   .pkp_navigation_user, ... { width: 100% }` intended for its own layout —
   it also matches this reused `pkp_navigation_user` class (from
   {load_menu name="user" ulClass="pkp_navigation_user"}) since our own
   rule below never declared a competing `width`, so the 100% rule won
   uncontested and stretched the user-nav <ul> to the width of its
   containing block, which in turn stretched the whole <nav> and left no
   room for `.jfh_wrap`'s `justify-content:space-between` to do anything —
   logo and nav ended up bunched together on the left instead of pinned to
   opposite ends of the bar. Fix: explicitly override width back to auto
   and stop it shrinking/growing as a flex item. */
body.jfh_themed .jfh_masthead .pkp_navigation_user { display: flex; align-items: center; gap: 20px; list-style: none; margin: 0; padding: 0; width: auto; flex-shrink: 0; }
body.jfh_themed .jfh_masthead nav { flex-shrink: 1; min-width: 0; }
body.jfh_themed .jfh_masthead .pkp_navigation_user li { display: block; }
body.jfh_themed .jfh_lang { display: flex; align-items: center; gap: 8px; padding-right: 18px; margin-right: 2px; border-right: 1px solid rgba(216,209,192,0.3); font-size: 12px; flex-shrink: 0; }
body.jfh_themed .jfh_lang a { white-space: nowrap; }
body.jfh_themed .jfh_lang a.jfh_active { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
body.jfh_themed .jfh_lang a:not(.jfh_active) { color: #A69C87; }
body.jfh_themed .jfh_lang a:not(.jfh_active):hover { color: #D8D1C0; }
body.jfh_themed .jfh_site_nav_toggle { display: none; }

/* Mobile fix (bug, not a new design — the approved mockup never defined a
   masthead breakpoint at all, so at narrow widths the logo+nav flex row
   simply overflowed horizontally instead of wrapping: the user-nav <ul>
   ("Login"/"Register") rendered past the right edge of the viewport,
   reachable only by scrolling sideways — on a real phone that reads as
   "the branding/nav isn't there". Verified via a same-origin iframe sized
   to 375/390px (this environment's browser window doesn't actually
   resize — see CATATAN-KENDALA.md): before this rule, body.scrollWidth
   was 538px against a 356px content width, and the user-nav <ul> right
   edge sat at x=538. This only makes the row wrap instead of overflow —
   it does not add any new visual element beyond what the mockup already
   has. */
@media (max-width: 640px) {
  body.jfh_themed .jfh_masthead .jfh_wrap { flex-wrap: wrap; row-gap: 10px; padding-top: 12px; padding-bottom: 12px; }
  body.jfh_themed .jfh_masthead nav { flex-wrap: wrap; row-gap: 8px; width: 100%; }
  body.jfh_themed .jfh_lang { padding-right: 14px; }
}

/* footer — red gradient — shared by all 3 pages */
body.jfh_themed .jfh_footer { width: 100%; background: linear-gradient(160deg, var(--red-deep) 0%, var(--red) 65%, #8A1B27 100%); color: #F3DCC7; }
body.jfh_themed .jfh_footer .jfh_wrap { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 20px; padding-top: 36px; padding-bottom: 36px; }
body.jfh_themed .jfh_footer .jfh_name { font-family: 'Source Serif 4', serif; color: #fff; font-size: 17px; margin-bottom: 6px; }
body.jfh_themed .jfh_footer .jfh_addr { font-size: 13px; line-height: 1.6; color: #EBC9AE; }
body.jfh_themed .jfh_footer .jfh_copy { font-size: 13px; color: #EBC9AE; }

/* login/register content wrapper (no mockup for the form itself — only
   base color/typography/spacing consistency is in scope, per brief) */
body.jfh_themed .jfh_page_wrap { padding-top: 40px; padding-bottom: 64px; min-height: 40vh; }
body.jfh_themed .jfh_page_wrap h1 { font-family: 'Source Serif 4', serif; font-weight: 600; color: var(--ink); }

/* ---- everything below is specific to the site index page only ---- */

/* hero banner — real photo, plain contrast overlay */
body.pkp_page_index.pkp_op_index .jfh_hero { width: 100%; height: 420px; position: relative; overflow: hidden; }
body.pkp_page_index.pkp_op_index .jfh_hero img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; object-position: center 38%; }
body.pkp_page_index.pkp_op_index .jfh_hero .jfh_veil { position:absolute; inset:0; background: linear-gradient(100deg, rgba(18,16,13,0.88) 0%, rgba(110,20,30,0.68) 40%, rgba(110,20,30,0.22) 68%, rgba(110,20,30,0.02) 100%); }
body.pkp_page_index.pkp_op_index .jfh_hero .jfh_wrap { position: relative; z-index: 1; width: 100%; height: 100%; display:flex; align-items:center; }
body.pkp_page_index.pkp_op_index .jfh_hero h1 { font-family: 'Source Serif 4', serif; font-weight: 600; font-size: 32px; color: #fff; max-width: 32ch; line-height: 1.28; margin: 0; }

body.pkp_page_index.pkp_op_index .jfh_content_area { position: relative; }
body.pkp_page_index.pkp_op_index .jfh_content_area::before {
  content: "";
  position: absolute;
  top: -10px;
  right: -70px;
  width: 480px;
  height: 480px;
  background-image: url("images/watermark-big-logo.png");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}
body.pkp_page_index.pkp_op_index .jfh_featured,
body.pkp_page_index.pkp_op_index .jfh_index_list { position: relative; z-index: 1; }

/* section header */
body.pkp_page_index.pkp_op_index .jfh_section_head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin-bottom: 32px; margin-top: 48px; flex-wrap: wrap; gap: 14px; }
body.pkp_page_index.pkp_op_index .jfh_section_head h2 { margin: 0; font-family: 'Source Serif 4', serif; font-weight: 600; font-size: 22px; }
body.pkp_page_index.pkp_op_index .jfh_search_box { display: flex; background: #fff; border-radius: 3px; box-shadow: var(--sh1); border: 1px solid var(--rule); transition: box-shadow .2s, border-color .2s; }
body.pkp_page_index.pkp_op_index .jfh_search_box:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px rgba(179,32,46,0.14); }
body.pkp_page_index.pkp_op_index .jfh_search_box input { border: none; background: transparent; padding: 9px 12px; font-size: 13px; font-family: 'IBM Plex Sans', sans-serif; width: 220px; }
body.pkp_page_index.pkp_op_index .jfh_search_box input:focus { outline: none; }
body.pkp_page_index.pkp_op_index .jfh_search_box button { border: none; background: var(--ink); color: #fff; padding: 0 16px; font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 0 3px 3px 0; transition: background .15s; }
body.pkp_page_index.pkp_op_index .jfh_search_box button:hover { background: var(--red); }
body.pkp_page_index.pkp_op_index .jfh_no_results { display: none; padding: 24px 0; color: var(--muted); font-size: 14px; }
body.pkp_page_index.pkp_op_index .jfh_no_results.jfh_show { display: block; }

/* about / announcements (dormant today, wired for when the admin fills them in) */
body.pkp_page_index.pkp_op_index .jfh_about { padding-top: 32px; font-size: 15px; line-height: 1.7; color: var(--muted); max-width: 72ch; }
body.pkp_page_index.pkp_op_index .jfh_announcements { padding-top: 24px; display: flex; flex-direction: column; gap: 10px; }
body.pkp_page_index.pkp_op_index .jfh_announcement { border: 1px solid var(--rule); background: #fff; border-radius: 3px; padding: 12px 16px; font-size: 13px; }
body.pkp_page_index.pkp_op_index .jfh_announcement a { font-weight: 600; }
body.pkp_page_index.pkp_op_index .jfh_announcement a:hover { color: var(--red); }

/* featured journal (first by OJS order) */
body.pkp_page_index.pkp_op_index .jfh_featured { display: grid; grid-template-columns: 30px 7fr 5fr; column-gap: 22px; padding: 8px 0 44px; border-bottom: 1px solid var(--rule); margin-bottom: 8px; }
@media (max-width: 800px) {
  body.pkp_page_index.pkp_op_index .jfh_featured { grid-template-columns: 1fr; }
}
body.pkp_page_index.pkp_op_index .jfh_featured .jfh_n { font-family: 'Source Serif 4', serif; font-size: 14px; color: var(--faint); text-align: right; padding-top: 6px; }
body.pkp_page_index.pkp_op_index .jfh_featured h3 { font-family: 'Source Serif 4', serif; font-weight: 600; font-size: 28px; line-height: 1.25; margin: 0 0 14px; }
body.pkp_page_index.pkp_op_index .jfh_featured h3 a:hover { color: var(--red); }
body.pkp_page_index.pkp_op_index .jfh_featured p { font-size: 15px; line-height: 1.65; color: var(--muted); max-width: 58ch; margin: 0 0 20px; }
body.pkp_page_index.pkp_op_index .jfh_featured .jfh_meta { font-size: 13px; color: var(--faint); margin-bottom: 20px; }
body.pkp_page_index.pkp_op_index .jfh_featured .jfh_actions { display: flex; gap: 20px; font-size: 13px; font-weight: 600; }
body.pkp_page_index.pkp_op_index .jfh_featured .jfh_actions a.jfh_primary { padding: 10px 20px; background: var(--ink); color: #fff; }
body.pkp_page_index.pkp_op_index .jfh_featured .jfh_actions a.jfh_primary:hover { background: var(--red); }
body.pkp_page_index.pkp_op_index .jfh_featured .jfh_actions a.jfh_secondary { display: flex; align-items: center; color: var(--muted); }
body.pkp_page_index.pkp_op_index .jfh_featured .jfh_side { border-left: 1px solid var(--rule); padding-left: 32px; display: flex; flex-direction: column; gap: 18px; }
body.pkp_page_index.pkp_op_index .jfh_featured .jfh_side .jfh_label { font-size: 11px; font-weight: 600; color: var(--faint); letter-spacing: 0.3px; }
body.pkp_page_index.pkp_op_index .jfh_featured .jfh_side .jfh_val { font-size: 14px; margin-top: 4px; }

/* other journals: plain index list */
body.pkp_page_index.pkp_op_index .jfh_index_list { padding-bottom: 80px; }
body.pkp_page_index.pkp_op_index .jfh_index_row { display: grid; grid-template-columns: 30px 1fr 130px; column-gap: 22px; padding: 24px 0; border-bottom: 1px solid var(--rule); align-items: start; }
body.pkp_page_index.pkp_op_index .jfh_index_row .jfh_n { font-family: 'Source Serif 4', serif; font-size: 14px; color: var(--faint); text-align: right; padding-top: 2px; }
body.pkp_page_index.pkp_op_index .jfh_index_row .jfh_title { font-family: 'Source Serif 4', serif; font-size: 17px; font-weight: 600; margin-bottom: 6px; display: block; }
body.pkp_page_index.pkp_op_index .jfh_index_row .jfh_title:hover { color: var(--red); }
body.pkp_page_index.pkp_op_index .jfh_index_row .jfh_desc { font-size: 13px; line-height: 1.6; color: var(--muted); margin-bottom: 8px; max-width: 62ch; }
body.pkp_page_index.pkp_op_index .jfh_index_row .jfh_meta { font-size: 12px; color: var(--faint); }
body.pkp_page_index.pkp_op_index .jfh_index_row .jfh_accred { font-size: 11px; font-weight: 600; }
body.pkp_page_index.pkp_op_index .jfh_index_row .jfh_links { text-align: right; font-size: 12px; font-weight: 600; }
body.pkp_page_index.pkp_op_index .jfh_index_row .jfh_links a { display: block; margin-bottom: 6px; }
body.pkp_page_index.pkp_op_index .jfh_index_row .jfh_links a.jfh_primary { border-bottom: 1px solid var(--ink); display: inline-block; }
body.pkp_page_index.pkp_op_index .jfh_index_row .jfh_links a.jfh_primary:hover { color: var(--red); border-color: var(--red); }
body.pkp_page_index.pkp_op_index .jfh_index_row .jfh_links a.jfh_secondary { color: var(--muted); }
body.pkp_page_index.pkp_op_index .jfh_index_row.jfh_hidden,
body.pkp_page_index.pkp_op_index .jfh_featured.jfh_hidden { display: none; }