/* ========================================================================
   STUDIA UNIVERSITATIS — OJS SITE STYLESHEET (re-skin)
   Version: 2026-05-25
   Replaces: consolidated-files/styleSheet.css (2025-11-28)

   Design language: warm-monochrome editorial, mirroring the published
   articles (Quarto extension `studia-iur`, vol. 70 nr. 3 cover).

   Section map (preserves the legacy section structure so diffs read cleanly):
     §0   Page exclusions  (bibliography-page island)
     §A   @font-face       (Libertinus self-host)
     §B   Design tokens    (color, type, scale)  — see tokens.css
     §1   Base typography & global resets
     §2   Page layout & structure
     §3   Footnote enhancements
     §4   Button & nav styles
     §5   Content sections (TOC, abbreviations, references)
     §6   Images & visual elements
     §7   Reading optimization
     §8   Navigation
     §9   Responsive / media queries

   For: Open Journal Systems (OJS) — STUDIA Universitatis Babeș-Bolyai.
   Deployment: see CHANGELOG.md in this folder.
   ======================================================================== */


/* ==================================================
   SECTION 0: PAGE EXCLUSIONS — bibliography-page island
   This page brings its own embedded Georgia design (see
   SUBB_Iurisprudentia_bibliograhic_references.html). We `revert` host
   styles, then declare the small minimum needed for the embedded look.
   Paper colour swapped to var(--bg) so the island reads on the same
   warm-cream surface as the rest of the site.
   ================================================== */

.page-static .bibliography-page,
.page-static .bibliography-page * {
    all: revert;
}

.page-static .bibliography-page {
    font-family: Georgia, serif;
    background-color: var(--bg, #f6f3ec);
    max-width: 42em;
    margin: 0 auto;
    padding: 3em 4em;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
    color: var(--text, #1c1a16);
}

.page-static .bibliography-header,
.page-static .bibliography-footer {
    font-family: Georgia, serif;
    font-size: 1rem;
    line-height: 1.6;
}

.page-static .bibliography-header { margin-bottom: 2em; }

.page-static .bibliography-footer {
    margin-top: 2.5em;
    padding-top: 1.5em;
    border-top: 1px solid var(--border, #d6d1c8);
}

.page-static .bibliography-header p,
.page-static .bibliography-footer p {
    font-family: Georgia, serif;
    margin: 0 0 0.75em 0;
}

.page-static .bibliography-container,
.page-static .bibliography-container *,
.page-static .csl-bib-body,
.page-static .csl-bib-body * {
    font-family: Georgia, serif;
    font-size: 0.875rem;
    line-height: 1.5;
}

.page-static .bibliography-container .csl-entry,
.page-static .bibliography-container > div,
.page-static .csl-bib-body > div,
.page-static .csl-entry {
    padding-left: 1.5em;
    text-indent: -1.5em;
    margin-bottom: 0.75em;
}

.page-static .bibliography-page a {
    color: var(--link, #4a4137);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.page-static .bibliography-page a:hover {
    color: var(--link-hover, #1c1a16);
}


/* ==================================================
   SECTION A: @font-face — Libertinus
   Files already uploaded to the OJS Public Library at:
     https://studia.law.ubbcluj.ro/index.php/iurisprudentia/libraryFiles/downloadPublic/<id>
   Library file IDs (confirmed 2026-05-25 via HEAD probe):
       8  → LibertinusSerif-Regular
       9  → LibertinusSans-Regular
      10  → LibertinusSerif-Italic
      11  → LibertinusSerif-Bold
      12  → LibertinusSerif-BoldItalic
   URLs are relative (no host) so the stylesheet works on both
   studia.law.ubbcluj.ro and any staging mirror. `local()` first lets
   a system-installed Libertinus render instantly with no download.

   Note: OJS serves these via PHP with `cache-control: private`, so
   each first-load fetches the full 250–500 KB face. After the
   browser caches it for the session, subsequent pages are instant.
   To improve this long-term, ask the server admin to put the .otf
   files in `/public/journals/<id>/` static directory instead.
   ================================================== */

@font-face {
    font-family: "Libertinus Serif";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("Libertinus Serif"),
         local("LibertinusSerif-Regular"),
         url("/index.php/iurisprudentia/libraryFiles/downloadPublic/8") format("opentype");
}

@font-face {
    font-family: "Libertinus Serif";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: local("Libertinus Serif Italic"),
         local("LibertinusSerif-Italic"),
         url("/index.php/iurisprudentia/libraryFiles/downloadPublic/10") format("opentype");
}

@font-face {
    font-family: "Libertinus Serif";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local("Libertinus Serif Bold"),
         local("LibertinusSerif-Bold"),
         url("/index.php/iurisprudentia/libraryFiles/downloadPublic/11") format("opentype");
}

@font-face {
    font-family: "Libertinus Serif";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: local("Libertinus Serif Bold Italic"),
         local("LibertinusSerif-BoldItalic"),
         url("/index.php/iurisprudentia/libraryFiles/downloadPublic/12") format("opentype");
}

@font-face {
    font-family: "Libertinus Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("Libertinus Sans"),
         local("LibertinusSans-Regular"),
         url("/index.php/iurisprudentia/libraryFiles/downloadPublic/9") format("opentype");
}


/* ==================================================
   SECTION B: DESIGN TOKENS
   Mirrors `_extensions/studia-iur/studia-iur.css` + `params.css`.
   See tokens.css in this folder for the documented version.
   ================================================== */

:root {
  --bg:         #f6f3ec;
  --panel-bg:   #ece8df;
  --text:       #1c1a16;
  --accent:     #2f2a24;
  --accent-dim: rgba(47, 42, 36, 0.08);
  --muted:      #6f6a63;
  --border:     #d6d1c8;
  --link:       #4a4137;
  --link-hover: #1c1a16;
  --flash:      rgba(210, 150, 40, 0.4);

  --font-body: "Libertinus Serif", Georgia, "Times New Roman", serif;
  --font-ui:   "Libertinus Sans", -apple-system, "Segoe UI",
               "Helvetica Neue", Helvetica, sans-serif;

  --line-height:        1.5;
  --line-height-print:  1.24;
  --par-spacing:        0.24em;
  --indent:             0.9996em;
  --fn-size:            0.8333em;

  --h1-em: 1.54em;
  --h2-em: 1.24em;
  --h3-em: 1.00em;
  --h4-em: 1.00em;

  --h1-above: 2.48em;   --h1-below: 1.24em;
  --h2-above: 1.24em;   --h2-below: 1.24em;
  --h3-above: 1.5258em; --h3-below: 0.9542em;
  --h4-above: 0.62em;   --h4-below: 0.62em;

  --measure: clamp(45ch, 50ch + 5vw, 75ch);

  /* OJS theme bridge */
  --pkp-color-primary:           var(--accent);
  --pkp-color-primary-lighter:   var(--muted);
  --pkp-color-primary-darker:    var(--link-hover);
  --pkp-color-secondary:         var(--muted);
  --pkp-color-background:        var(--bg);
  --pkp-color-background-light:  var(--panel-bg);
  --pkp-color-border:            var(--border);
  --pkp-color-text:              var(--text);
  --pkp-color-text-light:        var(--muted);
  --pkp-color-link:              var(--link);
  --pkp-color-link-hover:        var(--link-hover);
}

:root[data-theme="dark"] {
  --bg: #1c1a16; --panel-bg: #25221d; --text: #e8e3d6;
  --accent: #f1ecde; --accent-dim: rgba(241, 236, 222, 0.10);
  --muted: #9c958c; --border: #3a352e;
  --link: #d4ccb8; --link-hover: #f5f0e4;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #1c1a16; --panel-bg: #25221d; --text: #e8e3d6;
    --accent: #f1ecde; --accent-dim: rgba(241, 236, 222, 0.10);
    --muted: #9c958c; --border: #3a352e;
    --link: #d4ccb8; --link-hover: #f5f0e4;
  }
}

@media print {
  :root,
  :root[data-theme="dark"],
  :root[data-theme="light"] {
    --bg: #ffffff; --panel-bg: #ffffff;
    --text: #1c1a16; --accent: #2f2a24;
    --accent-dim: rgba(47, 42, 36, 0.08);
    --muted: #6f6a63; --border: #d6d1c8;
    --link: #4a4137; --link-hover: #1c1a16;
    --line-height: var(--line-height-print);
  }
}


/* ==================================================
   SECTION 1: BASE TYPOGRAPHY & GLOBAL RESETS
   ================================================== */

* { box-sizing: border-box; }

html {
    /* Bump root font-size 12.5% (16px → 18px). Every rem-defined size in
       this stylesheet — body, headings, buttons, catalog titles, footer
       labels, footnote refs — scales by the same factor automatically.
       Respects the user's browser-level font-size preference (which is
       what `%` of the user's chosen default means; using `px` here would
       lock everyone to 18px regardless of their accessibility settings).
       To dial up or down: 106.25% ≈ 17px (subtle), 112.5% ≈ 18px (current),
       118.75% ≈ 19px (large), 125% ≈ 20px (very large).               */
    font-size: 112.5%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: var(--muted) var(--bg);
}

/* Scrollbar at viewport edge — keeps the editorial measure clean of
   browser chrome. Recoloured to the warm-monochrome palette. */
html::-webkit-scrollbar           { width: 12px; }
html::-webkit-scrollbar-track     { background: var(--bg); }
html::-webkit-scrollbar-thumb     {
    background: var(--muted);
    border-radius: 6px;
    border: 3px solid var(--bg);   /* inset look — thumb floats in the gutter */
}
html::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* `!important` on the four font-family rules below is required to beat
   /public/site/styleSheet.css, which is loaded AFTER this file by OJS and
   declares `body { font-family: Georgia }` + `h1..h6 { Lucida Grande }`.
   That site-level file is shared with the OTHER journal on this OJS
   install (default theme) and must not be modified, so we win the
   specificity war from inside this journal-level file instead. The
   site-level rules are simple `body {}` / `h1,h2,h3,h4,h5,h6 {}` with
   no `!important`, so a single `!important` here is sufficient — no
   selector gymnastics needed. */
body {
    font-family: var(--font-body) !important;
    font-size: 1rem !important;        /* override theme's `font-size:16px`
                                           so root font-size: 112.5% above
                                           actually carries into body text.
                                           1rem = 18px now (was 16px).      */
    font-variant-ligatures: common-ligatures;
    font-feature-settings: "kern" 1, "liga" 1, "clig" 1;
    /* Sub-pixel text-shadow thickens Libertinus strokes — applied
       globally then disabled on headings + UI labels via the override
       block below. Headings (already 500) and UI labels (already 600)
       don't need thickening; the shadow halo pooling under descenders
       reads as a faint underline at small font sizes (especially on
       small mobile screens), so we scope it tight.
       Disabled in print (no thickening on physical ink). */
    text-shadow: 0 0 0.25px currentColor;
    background-color: var(--bg);
    color: var(--text);
    line-height: var(--line-height);
    margin: 0 auto;          /* center body itself — HTML galley pages
                                load their own htmlArticleGalley/default.css
                                which sets `body { max-width: 768px; margin: auto }`.
                                Using `margin: 0` here killed the centering
                                and pushed articles to the left edge of the
                                viewport. `0 auto` preserves both behaviours. */
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* HTML galley body — the htmlArticleGalley default.css caps body at 768px
   on desktop. That's narrower than our 210mm WordSection1 (≈794px), which
   then gets clipped and reads cramped. Widen the galley body to give the
   WordSection1 room to breathe; the WordSection1's own `margin: 0 auto`
   then centers the paper inside that wider body. */
body.pkp_page_article.pkp_op_view {
    max-width: 960px !important;
    margin: 0 auto !important;
    padding-left: 1rem;
    padding-right: 1rem;
}

body,
p, .article-content > * {
    font-family: var(--font-body) !important;
    line-height: var(--line-height);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-body) !important;
    font-weight: 500;
    line-height: 1.25;
    color: var(--text);
    letter-spacing: -0.005em;
}

/* UI labels — masthead navbar text, OJS form labels, breadcrumbs, etc.
   Take the Sans display. Identified by OJS's own class names. */
.pkp_navigation_primary,
.pkp_navigation_user,
.pkp_navigation_primary a,
.pkp_navigation_user a,
.navbar a,
.breadcrumb,
.pkp_form .label,
.pkp_form label,
.cmp_form .label {
    font-family: var(--font-ui);
}

/* Article-summary title — serif, sentence case, regular weight.
   The cover treats display caps only on the masthead; nothing else
   shouts. */
.article-summary-title,
.article-summary-title a {
    font-family: var(--font-body) !important;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
}

/* Masthead wordmark — site-level CSS declares
   `.navbar-logo-text { font-family: 'Lucida Grande'; text-transform: uppercase }`
   and loads after us. Force serif + sentence case for the journal title.
   Also strip the underline from the wrapping anchor — the wordmark IS the
   masthead, not a body link; the title-on-its-own-row provides affordance. */
.navbar-logo-text,
.navbar-logo a,
.navbar-logo a:hover,
.navbar-logo a:focus,
.navbar-logo a:visited,
a .navbar-logo-text,
a:hover .navbar-logo-text {
    font-family: var(--font-body) !important;
    text-transform: none !important;
    letter-spacing: 0.02em;
    font-weight: 500;
    text-decoration: none !important;
    text-decoration-color: transparent !important;
    border-bottom: none !important;
    color: var(--text) !important;
}

.navbar-logo a:hover .navbar-logo-text,
.navbar-logo a:focus .navbar-logo-text {
    color: var(--accent) !important;
}

.article-summary-title a:hover { color: var(--accent); }

/* Article details title — extension's small-caps lowercase treatment,
   centred, hairline-rule below. Matches the cover's typographic
   restraint. */
.article-details-title {
    font-family: var(--font-body);
    font-size: var(--h1-em);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.005em;
    text-transform: none;
    text-align: center;
    color: var(--text);
    margin: 1.6rem 0 var(--h1-below);
}

/* Footnote references inline — extension's vertical-baseline rule. */
span.MsoFootnoteReference { vertical-align: baseline; }

/* Disable the body text-shadow halo on headings, UI labels, masthead,
   buttons, footnote refs, and anywhere the type is already 500+ weight
   or below body size. The halo only earns its keep on 400-weight body
   prose at body size; everywhere else it pools as a fine line under
   descenders, which reads as a phantom underline on mobile. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.main-header, .main-header *,
.pkp_site_name, .pkp_site_name *,
.navbar-logo, .navbar-logo *,
.navbar-logo-text,
.pkp_navigation_primary, .pkp_navigation_primary *,
.pkp_navigation_user, .pkp_navigation_user *,
.pkp_nav_list, .pkp_nav_list *,
nav, nav *,
.btn, .btn *,
.btn-primary, .btn-secondary,
.references-toggle-btn, .galley-link, .issue-galley,
.article-summary-galleys a, .article-details-galleys a,
.homepage-issue-galleys > a, .page-issue-galleys a,
.dropdown-menu, .dropdown-menu *,
.dropdown-item, .dropdown-header,
.return, .header_view, .header_view *,
.article-summary-title, .article-summary-title *,
.article-details-title, .article-details h1,
.article-details-fulltitle, .article-details-issue-section,
.article-details-doi, .article-details-published,
.article-details-pubid, .article-details-issue-identifier,
.article-summary-authors, .article-summary-pages,
.article-summary-date, .article-summary-doi,
.article-details-author-affiliation, .article-details-author-orcid,
.site-footer .pkp_block .title, .site-footer-sidebar .pkp_block .title,
.pkp_block .title,
.alert, .alert *,
sup, sub, .footnote-ref,
a[href^="#_ftn"], a[href^="#_edn"],
a[href^="#_ftnref"], a[href^="#_ednref"],
.footnote-tooltip, .footnote-tooltip *,
small, .small,
.metadate-section-header, .metadate-subhead,
.lang-chip, .kw-chip,
input, select, textarea, button,
label, .label, legend,
.tagit-choice, #tagitInput {
    text-shadow: none !important;
}

/* ── Typography rhythm — metadata clusters + title block ──────────────
   Two complaints addressed here (2026-05-26):
     • "Too looser leading" — body line-height 1.5 is correct for prose
       at 45-75ch measure, but wrong for short-line metadata stacks. Per
       Bringhurst: shorter measure → tighter leading. Metadata gets 1.35.
     • "Elements dispersed" — OJS theme assigns `margin-top: 1em` to
       every metadata block under .article-details-main, so title +
       author + affiliation + ORCID + DOI read as five separated items
       instead of a cohesive title-block. Collapse the inter-item
       margins to 0.15-0.4em so they group; preserve a clear separator
       gap between the title-block and the abstract/buttons below.    */

/* Title-block container — assert tighter leading scope. */
.article-details,
.article-details-main,
.article-details-meta,
.article-meta-mobile,
.metadate-citation {
    line-height: 1.35 !important;
}

/* The display title still gets its own (tighter still) leading. */
.article-details h1,
.article-details-fulltitle,
.article-details-title {
    line-height: 1.15 !important;
    margin-top: 0.3em !important;
    margin-bottom: 0.4em !important;
}

/* All inline metadata items — collapse their margins so the title block
   reads as a single unit instead of a vertical list. */
.article-details-issue-section,
.article-details-issue-identifier,
.article-details-doi,
.article-details-published,
.article-details-pubid,
.article-details-author,
.article-details-author-affiliation,
.article-details-author-orcid,
.article-details-authors,
.article-details-keywords,
.article-details-keywords-value,
.authors-string {
    line-height: 1.35 !important;
    margin-top: 0.15em !important;
    margin-bottom: 0 !important;
}

/* First metadata block above the title gets no top margin so the
   "VOL. 70 NO. 3 (2025), ARTICLES" rubric sits at the top edge. */
.article-details-main > :first-child,
.article-meta-mobile > :first-child {
    margin-top: 0 !important;
}

/* The author cluster: name → affiliation → ORCID hug each other. */
.article-details-author {
    margin-top: 0.4em !important;       /* slight breath after title */
}

.article-details-author-affiliation,
.article-details-author-orcid {
    margin-top: 0.05em !important;
    font-size: 0.875rem !important;
    color: var(--muted);
}

/* DOI / publication-date strip — sits as a metadata cluster, not
   individual items. Reduce font, mute color, tight leading. */
.article-details-doi,
.article-details-published,
.article-details-pubid,
.article-details-issue-section,
.article-details-issue-identifier {
    font-family: var(--font-ui);
    font-size: 0.8rem !important;
    letter-spacing: 0.02em;
    color: var(--muted) !important;
    margin-top: 0.25em !important;
}

/* Clear gap before the abstract/keywords block — signals end of
   title-block, start of content. */
.article-details-abstract,
.article-details-block.article-details-abstract,
.article-details-galleys,
.article-details-keywords {
    margin-top: 2rem !important;
}

/* The article-summary block (issue TOC entries) gets the same tightening
   so titles and their metadata cluster instead of floating. */
.article-summary {
    line-height: 1.35;
}

.article-summary-authors,
.article-summary-pages,
.article-summary-date {
    margin-top: 0.15em !important;
    line-height: 1.35;
}

.article-summary-title {
    margin-top: 0.1em !important;
    margin-bottom: 0.3em !important;
    line-height: 1.2 !important;
}


/* ── Dark-mode visibility fixes ────────────────────────────────────────
   Three bugs surfaced by mobile screenshots in dark mode (2026-05-26):
     • `.main-header` retains theme-hardcoded `background: #f7f7f7`
       because my earlier override used `body > header` which doesn't
       match the actual `<header class="main-header">` nested inside a
       `.pkp_structure_page` wrapper.
     • Mobile menu items inside the masthead inherit the dark-theme
       cream text color but sit on the light-cream masthead background
       → light-on-light, invisible.
     • PKP wordmark `filter: invert(0.85) saturate(0) brightness(0.4)`
       darkens a white SVG → correct in light mode, invisible in dark.
   All three fixed below. */

.main-header {
    background-color: var(--bg) !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border);
}

.main-header a,
.main-header .navbar-logo a,
.main-header .navbar-nav .nav-link {
    color: var(--text) !important;
}

.main-header .navbar-toggler,
.navbar-toggler {
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    background: transparent !important;
    padding: 0.45rem 0.65rem !important;
    border-radius: 2px !important;
}

.main-header .navbar-toggler:hover,
.main-header .navbar-toggler:focus,
.navbar-toggler:hover,
.navbar-toggler:focus {
    background: var(--accent-dim) !important;
    border-color: var(--accent) !important;
}

/* Hamburger icon — Bootstrap 4 ships `.navbar-toggler-icon` with an
   inline SVG background-image that hardcodes `stroke='rgba(0,0,0,0.5)'`.
   That stays black in dark mode → invisible on the masthead. Replace
   the SVG with three CSS-drawn lines using `currentColor` so the icon
   adapts to whichever theme is active. */
.navbar-toggler-icon {
    background-image: none !important;
    width: 22px !important;
    height: 16px !important;
    position: relative !important;
    display: inline-block;
    vertical-align: middle;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after,
.navbar-toggler-icon > span {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background-color: currentColor;
    border-radius: 1px;
}

.navbar-toggler-icon::before { top: 0; }
.navbar-toggler-icon::after  { bottom: 0; }

/* Middle line — drawn via box-shadow on ::before to avoid needing JS
   to inject a child span. Stacked at center of the 16px-tall icon. */
.navbar-toggler-icon::before {
    box-shadow: 0 7px 0 currentColor;
}


/* ── Pagination ────────────────────────────────────────────────────────
   Theme paints `.pagination strong, .pagination a` as white-bg boxes
   with blue link text — light boxes float on dark page in dark mode,
   and the blue underlined link is off-palette in any theme. Retoken
   to hairline rectangles matching the rest of the UI buttons. */
.pagination,
.page-search .pagination {
    background: transparent !important;
    margin: 1.5rem 0 !important;
}

.pagination strong,
.pagination a,
.page-search .pagination strong,
.page-search .pagination a,
.page-link {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--accent) !important;
    font-family: var(--font-ui) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    padding: 0.4rem 0.85rem !important;
    border-radius: 2px !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 0.2rem !important;
    transition: background .15s, border-color .15s, color .15s;
}

.pagination a:hover,
.pagination a:focus,
.pagination strong:hover,
.pagination strong:focus,
.page-search .pagination a:hover,
.page-search .pagination a:focus,
.page-link:hover,
.page-link:focus {
    background: var(--accent-dim) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    text-decoration: none !important;
}

/* Current-page indicator — `strong` (or `.page-item.active .page-link`).
   Filled with --accent to distinguish from clickable prev/next. */
.pagination strong,
.page-search .pagination strong,
.page-item.active .page-link,
.page-item.active .page-link:hover,
.page-item.active .page-link:focus {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--bg) !important;
    cursor: default !important;
}


/* ── Theme toggle button (light/dark switch in the navbar) ────────────
   Markup is injected via the Custom Header Plugin (see CHANGELOG §
   "Theme toggle deployment"). The button is `#theme-toggle` with two
   inline SVGs `.t-sun` and `.t-moon`. CSS shows the moon icon in light
   mode (click = go to dark) and the sun icon in dark mode (click = go
   back to light). The icons are absolute-positioned siblings so the
   button geometry stays stable when they swap.

   The button styles like the rest of the UI hairline buttons; on hover
   it tints with --accent-dim, just like ARCHIVE/SEARCH/Galley buttons.
   It can be placed anywhere in the masthead — JS appends it to the
   primary nav by default; CSS would also accept it inside a #userNav
   or .language-toggle area without changes. */
#theme-toggle,
button.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    margin: 0 0.4rem;
    padding: 0 !important;
    background: transparent !important;
    border: 1px solid var(--border) !important;
    border-radius: 2px !important;
    color: var(--accent) !important;
    cursor: pointer;
    line-height: 1;
    transition: background .15s, border-color .15s, color .15s;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
}

#theme-toggle:hover,
#theme-toggle:focus,
button.theme-toggle-btn:hover,
button.theme-toggle-btn:focus {
    background: var(--accent-dim) !important;
    border-color: var(--accent) !important;
    outline: none;
}

#theme-toggle svg,
button.theme-toggle-btn svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Default (light mode, no preference set): show the moon (click → dark) */
#theme-toggle .t-sun,
button.theme-toggle-btn .t-sun { display: none; }
#theme-toggle .t-moon,
button.theme-toggle-btn .t-moon { display: inline-block; }

/* Explicit dark theme: show the sun (click → light) */
:root[data-theme="dark"] #theme-toggle .t-sun,
:root[data-theme="dark"] button.theme-toggle-btn .t-sun { display: inline-block; }
:root[data-theme="dark"] #theme-toggle .t-moon,
:root[data-theme="dark"] button.theme-toggle-btn .t-moon { display: none; }

/* Auto-dark from OS preference (no explicit choice): show the sun. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) #theme-toggle .t-sun,
    :root:not([data-theme]) button.theme-toggle-btn .t-sun { display: inline-block; }
    :root:not([data-theme]) #theme-toggle .t-moon,
    :root:not([data-theme]) button.theme-toggle-btn .t-moon { display: none; }
}

/* PKP wordmark filter — dark-mode flip. The default filter darkens a
   white SVG to charcoal (correct on cream). In dark mode we want the
   white SVG to read as muted cream on charcoal, so we use a no-op
   filter and let the native white show through at reduced opacity. */
:root[data-theme="dark"] .footer-brand-image,
:root[data-theme="dark"] .pkp_brand_footer img,
:root[data-theme="dark"] .pkp_brand_footer svg {
    filter: none !important;
    opacity: 0.55;
}

:root[data-theme="dark"] .pkp_brand_footer a:hover .footer-brand-image,
:root[data-theme="dark"] .pkp_brand_footer a:hover img {
    opacity: 0.85;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .footer-brand-image,
    :root:not([data-theme]) .pkp_brand_footer img,
    :root:not([data-theme]) .pkp_brand_footer svg {
        filter: none !important;
        opacity: 0.55;
    }
    :root:not([data-theme]) .pkp_brand_footer a:hover .footer-brand-image,
    :root:not([data-theme]) .pkp_brand_footer a:hover img {
        opacity: 0.85;
    }
}


/* HTML galley page header — `.header_view` wraps the back-arrow + title.
   Theme paints a 30×30 dark-blue square (`#3c5570`) with a white ← arrow
   for `.return`. Retokened to a hairline-rectangle box in the warm
   palette so the galley masthead reads in the same idiom as the rest
   of the UI. */
.header_view {
    background-color: var(--panel-bg) !important;
    border-bottom: 1px solid var(--border);
}

.header_view .return {
    background-color: transparent !important;
    border: 1px solid var(--border) !important;
    border-radius: 2px !important;
    width: auto !important;
    min-width: 36px;
    height: 30px !important;
    line-height: 28px !important;
    transition: background .15s, border-color .15s;
}

.header_view .return:hover,
.header_view .return:focus {
    background-color: var(--accent-dim) !important;
    border-color: var(--accent) !important;
}

.header_view .return:before {
    color: var(--accent) !important;
    font-size: 1.1rem !important;
    position: static !important;        /* override theme's absolute pos */
    display: inline-block;
    line-height: 28px;
}

.header_view .title {
    color: var(--text) !important;
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
}

/* ── Theme px-sized text → rem ─────────────────────────────────────────
   The healthSciences theme hardcodes pixels on several visible-body
   contexts (static pages, article-summary metadata, form widgets), so
   bumping `html { font-size }` has no effect on them on its own.
   Recasting each to rem at the equivalent ratio against the theme's
   16px baseline. After this block, every visible piece of text scales
   proportionally when the root font-size changes. */
.page-content                         { font-size: 1.25rem !important;   /* was 20px */
                                         line-height: 1.5 !important;     /* was 30px */ }
.page-content p,
.page-content li                      { font-size: 1rem !important;       /* was 16px */ }
.article-summary-authors,
.article-summary-pages                { font-size: 0.875rem !important;   /* was 14px */ }
.article-summary-date                 { font-size: 1rem !important; }
.author-details-author                { font-size: 1.3125rem !important;  /* was 21px */ }
.author-details-issue                 { font-size: 0.875rem !important;   /* was 14px */ }
.submissions-checklist                { font-size: 1rem !important;       /* was 16px */ }
.alert .form-error-list               { font-size: 1rem !important;       /* was 16px */ }

/* ── Alerts / banners ─────────────────────────────────────────────────
   Theme: `.alert-primary { background:#3c5570; color: rgba(255,255,255,.85) }`
   with white underlined links — the dark navy band on the Submissions
   page CTA, login confirmations, etc. Retoken to the warm palette.
   `.alert-primary` keeps a filled-charcoal CTA presence (it's a page-level
   call to action). `.alert-danger` keeps red but warm-shifted. */
.alert {
    border-radius: 2px !important;
    padding: 1.25rem 1.5rem !important;
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    line-height: 1.55;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
}

/* .alert-primary — softened to match the info/warning/success family so
   notices ("No Results") don't read as CTAs. The actionable links inside
   ("Login or Register to make a submission") draw attention through their
   own underlined link styling, not through the panel paint. */
.alert-primary {
    background-color: var(--panel-bg) !important;
    border-left: 3px solid var(--accent) !important;
    border-top-color: var(--border) !important;
    border-right-color: var(--border) !important;
    border-bottom-color: var(--border) !important;
    color: var(--text) !important;
}

.alert-primary a,
.alert-primary a:visited {
    color: var(--link) !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(74, 65, 55, 0.45) !important;
    text-underline-offset: 2px !important;
    text-decoration-thickness: 0.06em !important;
    border-bottom: none !important;
}

.alert-primary a:hover,
.alert-primary a:focus {
    color: var(--link-hover) !important;
    text-decoration-color: currentColor !important;
}

/* Quieter variants — info / warning / success — sit on the panel-bg
   surface with a coloured left bar so they read as a "note", not a CTA. */
.alert-info,
.alert-warning,
.alert-success {
    background-color: var(--panel-bg) !important;
    border-left: 3px solid var(--accent) !important;
    border-top-color: var(--border) !important;
    border-right-color: var(--border) !important;
    border-bottom-color: var(--border) !important;
    color: var(--text) !important;
}

.alert-info a,
.alert-warning a,
.alert-success a {
    color: var(--link) !important;
}

/* Danger / errors — keep red for universal-error convention, but warm-
   shift the hue so it sits in the same palette family. */
.alert-danger {
    background-color: #8a2424 !important;
    border-color: #8a2424 !important;
    color: var(--bg) !important;
}

.alert-danger a,
.alert-danger a:hover,
.alert-danger a:focus,
.alert-danger a:active {
    color: var(--bg) !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(246, 243, 236, 0.6) !important;
    text-underline-offset: 2px !important;
}
.pkp_block .title                     { font-size: 1.5rem !important;     /* was 24px */ }
.btn,
.btn-primary,
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary                { font-size: 1.125rem;              /* was 18px */ }
.btn.btn                              { font-size: 1rem; }                /* theme dup */
#tagitInput,
.tagit-choice                         { font-size: 1rem !important; }
.search-filters h2                    { font-size: 1.5rem !important; line-height: 1.6 !important; }
.search-filters label                 { font-size: 0.9rem !important; }


/* ── Link treatment — three tiers (catalog / body / metadata) ─────────
   Rationale: a single underlined-charcoal rule for every link reads as
   visual noise on high-density OJS pages (issue archive, TOC, article
   landing) where dozens of links cluster. We stratify by context:

     1. BODY (default) — paragraphs, bibliography, footnotes, references.
        Keep underlined charcoal (WCAG-safe, scholarship convention).
        Underline opacity dropped from 0.45 → 0.25 — single change that
        lightens every body link without breaking convention.

     2. CATALOG — article-summary titles, TOC items, archive items, nav.
        No underline at rest; position-on-its-own-row provides the
        affordance. Underline appears on hover/focus. Visited state
        muted so readers can track progress through long TOCs.

     3. METADATA — DOI strings, ORCID, dates, issue identifiers. Tiny,
        muted, dotted hover-only underline. These are machine identifiers
        that shouldn't read as body-text links.

   Plus an additive `↗` glyph for external (off-site) links — purely
   semantic, doesn't replace any affordance. */

/* TIER 2 — Body / inline (default for all <a>) */
a {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 0.06em;
    text-decoration-color: rgba(74, 65, 55, 0.25);   /* was 0.45 */
    transition: color .15s, text-decoration-color .15s, border-color .15s;
}

a:hover,
a:focus {
    color: var(--link-hover);
    text-decoration-color: currentColor;
}

a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 1px;
}

/* TIER 1 — Catalog (no underline at rest, underline on hover) */
.article-summary-title a,
.issue-summary-title a,
.issue-summary-series a,
#subb-toc-sidebar a,
.article-summary-authors a,
.article-summary-pages a,
.article-summary-date a,
.article-details-issue-section a,
.article-details-issue-identifier a,
.author-string-href,
.authors-string a,
.breadcrumb a,
.nav-link,
#primaryNav .nav-link,
.dropdown-item,
.category-subcategories-list li a,
.author-details-article a,
.return,
.header_view .title {
    color: var(--text);
    text-decoration: none;
    text-decoration-color: transparent;
    border-bottom: none;
}

.article-summary-title a:hover,
.article-summary-title a:focus,
.issue-summary-title a:hover,
.issue-summary-title a:focus,
.issue-summary-series a:hover,
#subb-toc-sidebar a:hover,
#subb-toc-sidebar a:focus,
.article-summary-authors a:hover,
.article-summary-authors a:focus,
.article-details-issue-section a:hover,
.article-details-issue-identifier a:hover,
.author-string-href:hover,
.authors-string a:hover,
.breadcrumb a:hover,
.nav-link:hover,
#primaryNav .nav-link:hover,
.dropdown-item:hover,
.category-subcategories-list li a:hover,
.author-details-article a:hover,
.return:hover,
.header_view .title:hover {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: currentColor;
}

/* Catalog `:visited` — muted, so readers can see what they've opened.
   Skip on nav/breadcrumb/header — those aren't "have I read this" cues. */
.article-summary-title a:visited,
.issue-summary-title a:visited,
#subb-toc-sidebar a:visited,
.author-details-article a:visited {
    color: var(--muted);
}

/* TIER 3 — Metadata (muted, dotted hover-only) */
.article-summary-doi a,
.article-details-doi a,
.article-details-published a,
.article-details-author-orcid a,
.metadate-author a,
.csl-entry a {
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px dotted transparent;
    word-break: break-all;
}

.article-summary-doi a:hover,
.article-summary-doi a:focus,
.article-details-doi a:hover,
.article-details-published a:hover,
.article-details-author-orcid a:hover,
.metadate-author a:hover {
    color: var(--accent);
    border-bottom-color: var(--muted);
}

/* External-link `↗` glyph — additive marker for inline body links that
   leave the site. Deliberately scoped NARROWLY: only links that sit
   inside flowing prose (paragraphs, footnotes, bibliography, abstracts,
   article content). NOT on catalog titles, navigation, metadata badges
   or buttons — those already convey their affordance through position
   (own row), shape (button), or muted styling (metadata). Adding an
   arrow there is "click here" UI for an editorial site, and on titles
   that wrap to multiple lines the arrow orphans onto its own line.

   Implementation: opt-in by ancestor scope. The arrow only appears when
   the link is descended from one of the body-prose containers. */
.article-content a[href^="http"]:not([href*="studia.law.ubbcluj.ro"]):not(:has(img))::after,
.article-details-abstract a[href^="http"]:not([href*="studia.law.ubbcluj.ro"]):not(:has(img))::after,
.article-details-references a[href^="http"]:not([href*="studia.law.ubbcluj.ro"]):not(:has(img))::after,
.MsoFootnoteText a[href^="http"]:not([href*="studia.law.ubbcluj.ro"]):not(:has(img))::after,
.MsoEndnoteText a[href^="http"]:not([href*="studia.law.ubbcluj.ro"]):not(:has(img))::after,
#htmlContainer a[href^="http"]:not([href*="studia.law.ubbcluj.ro"]):not(:has(img))::after,
.WordSection1 a[href^="http"]:not([href*="studia.law.ubbcluj.ro"]):not(:has(img))::after,
.csl-bib-body a[href^="http"]:not([href*="studia.law.ubbcluj.ro"]):not(:has(img))::after,
.bibliography-page a[href^="http"]:not([href*="studia.law.ubbcluj.ro"]):not(:has(img))::after,
.page-static .page-content a[href^="http"]:not([href*="studia.law.ubbcluj.ro"]):not(:has(img))::after {
    content: "\00a0↗";        /* non-breaking space keeps the glyph
                                  glued to the last word so it never
                                  wraps onto its own line. */
    font-size: 0.78em;
    color: var(--muted);
    text-decoration: none;
    display: inline;
    white-space: nowrap;
}

/* Belt-and-suspenders: explicit kill list for catalog / nav / metadata
   contexts. These rules win on equal specificity because they come
   later. Anything declared as a kill-list selector NEVER gets the
   arrow, even if some future ancestor accidentally matches it. */
.article-summary-title a::after,
.issue-summary-title a::after,
.issue-summary-series a::after,
.article-summary-authors a::after,
.article-summary-pages a::after,
.article-summary-date a::after,
.article-summary-doi a::after,
.article-summary-galleys a::after,
.article-details-title::after,
.article-details-galleys a::after,
.article-details-doi a::after,
.article-details-issue-section a::after,
.article-details-issue-identifier a::after,
.article-details-author-orcid a::after,
.article-details-published a::after,
.author-string-href::after,
.authors-string a::after,
.author-details-article a::after,
.metadate-author a::after,
.metadate-citation a::after,
#subb-toc-sidebar a::after,
.breadcrumb a::after,
.nav-link::after,
#primaryNav .nav-link::after,
.dropdown-item::after,
#primaryNav .dropdown-item::after,
.btn::after,
.btn-primary::after,
.return::after,
.header_view .title::after,
.navbar-logo-text::after,
.footer-brand-image::after,
.footnote-tooltip a::after,
.category-subcategories-list li a::after {
    content: none !important;
}

/* Selection — warm tint that matches the flash highlight. */
::selection {
    background: var(--flash);
    color: var(--text);
}


/* ==================================================
   SECTION 2: PAGE LAYOUT & STRUCTURE
   ================================================== */

/* The 210mm cream-paper container — preserved from the legacy CSS.
   Now sits on the warm-cream body, so the box-shadow reads as a
   page lifted off the desk. */
.WordSection1 {
    background-color: var(--bg);
    max-width: 210mm;
    margin: 0 auto;
    padding: 40px 60px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
}

/* OJS masthead — give the journal title the cover's typographic weight.
   `.pkp_site_name_text` and `.navbar-logo-text` are OJS's own classes for
   the wordmark; we set both. */
.pkp_site_name_text,
.navbar-logo-text,
body > header h1,
body > header h2 {
    font-family: var(--font-body);
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--text);
}

/* Masthead container — hairline rule under, breathing room above. */
body > header,
.pkp_structure_head {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

/* OJS site footer / colophon — mirrors the cover's bottom ISSN block.
   The healthSciences theme defines `.site-footer { background: #333;
   color: #fff }` and `.site-footer a { color: #fff; text-decoration:
   underline }` — that's the dark band you saw. The block container
   `.pkp_block` holds the link children. We retoken everything: warm
   panel-bg background, muted-charcoal text, hairline rule above. */
body > footer,
.site-footer,
.pkp_structure_footer {
    background: var(--panel-bg) !important;
    border-top: 1px solid var(--border);
    color: var(--text) !important;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    line-height: 1.55;
    padding: 2rem 0 !important;
}

body > footer a,
.site-footer a,
.pkp_structure_footer a {
    color: var(--link) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(74, 65, 55, 0.25);
    transition: color .15s, border-color .15s;
}

body > footer a:hover,
.site-footer a:hover,
.pkp_structure_footer a:hover,
body > footer a:focus,
.site-footer a:focus,
.pkp_structure_footer a:focus {
    color: var(--link-hover) !important;
    border-bottom-color: currentColor;
}

/* Footer block children — `.pkp_block` is the wrapper for each footer
   column (Information / Browse / etc.). The healthSciences theme paints
   them white-on-dark; recolour to ink-on-cream. */
.site-footer .pkp_block,
.site-footer-sidebar .pkp_block {
    color: var(--text);
}

.site-footer .pkp_block .title,
.site-footer-sidebar .pkp_block .title {
    color: var(--accent);
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.site-footer-sidebar {
    border-bottom: 1px solid var(--border) !important;
    padding-bottom: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

/* The "make submission" block button inside the footer — restyle to
   match the catalog buttons rather than the theme's high-contrast pill. */
.site-footer .block_make_submission .block_make_submission_link {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--accent) !important;
    border-radius: 2px !important;
    font-family: var(--font-ui) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 0.5rem 0.9rem !important;
}

.site-footer .block_make_submission .block_make_submission_link:hover,
.site-footer .block_make_submission .block_make_submission_link:focus {
    background: var(--accent-dim) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

/* "Platform & workflow by OJS/PKP" footer brand block. The OJS markup is:
       <div class="pkp_brand_footer">
         <a><img class="footer-brand-image" ...></a>
       </div>
   plus a "Platform & workflow by" caption (sometimes raw text, sometimes
   inside `.pkp_brand_footer span` or `.pkp_brand_text`). The healthSciences
   theme assumes a dark footer and either makes the SVG white or paints
   the caption white. Force readable charcoal on cream and resize the
   wordmark sensibly. The footer-brand-image is left with its native
   colour but reduced in opacity so it reads as a quiet colophon, not
   a flag. */
.pkp_brand_footer,
.pkp_brand_footer * {
    color: var(--muted) !important;
}

.pkp_brand_footer a,
.pkp_brand_footer span,
.pkp_brand_footer p {
    color: var(--muted) !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent;
}

.pkp_brand_footer a:hover {
    color: var(--accent) !important;
    border-bottom-color: rgba(74, 65, 55, 0.25);
}

.footer-brand-image,
.pkp_brand_footer img,
.pkp_brand_footer svg {
    max-width: 96px;
    height: auto;
    opacity: 0.55;                /* the OJS/PKP wordmark on cream — quiet */
    filter: invert(0.85) saturate(0) brightness(0.4);
    /* invert+saturate+brightness combo turns the theme's white-on-dark
       brand SVG into a near-charcoal silhouette on cream. If the SVG
       in your install is already dark, this still keeps it dark
       (filter is idempotent in that direction).                     */
    transition: opacity .15s;
}

.pkp_brand_footer a:hover .footer-brand-image,
.pkp_brand_footer a:hover img {
    opacity: 0.85;
}

/* Bootstrap column overrides — pure layout, kept verbatim from legacy. */
.col-12 { max-width: 100% !important; }

.col-lg-3 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.page-issue-description-wrapper {
    width: 100% !important;
    grid-column: 1 / -1 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
}

.page-issue-description-wrapper * { text-align: left !important; }

.issue-toc-section {
    width: 100% !important;
    grid-column: 1 / -1 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body > div.container.page-issue > div.row.justify-content-center.page-issue-details > div.col-lg-9 {
    margin-left: 0 !important;
    padding-left: 15px !important;
}

/* Section ordering: move section before h2 (legacy fix, preserved). */
body > div.container.container-homepage-issue.page-content > section { order: -1 !important; }
body > div.container.container-homepage-issue.page-content > h2      { order:  0 !important; }
body > div.container.container-homepage-issue.page-content {
    display: flex !important;
    flex-direction: column !important;
}

/* Tighter spacing for homepage articles — legacy preserved, restyled
   to use serif body and the new measure. */
body > div.container.container-homepage-issue.page-content > section > article {
    line-height: 1.35 !important;
    padding: 0.85rem 0 !important;
    border-bottom: 1px solid var(--border);
}

body > div.container.container-homepage-issue.page-content > section > article:last-child {
    border-bottom: none;
}

body > div.container.container-homepage-issue.page-content > section > article * {
    line-height: 1.35 !important;
    margin: 0.25rem 0 !important;
    padding: 0.125rem 0 !important;
}

/* Issue summary block (cover image left, metadata right) — mirrors the
   cover's two-zone layout. The cover image gets the artifact shadow. */
.issue-summary {
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 1.25rem;
    display: grid;
    grid-template-columns: minmax(180px, 280px) 1fr;
    gap: 1.5rem;
    align-items: start;
}

.issue-summary-title {
    font-family: var(--font-body);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.3;
    margin: 0 0 0.5rem;
    color: var(--text);
}

.issue-summary-volume,
.issue-summary-number,
.issue-summary-year {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}


/* ==================================================
   SECTION 3: FOOTNOTE ENHANCEMENTS
   Behavior preserved; visual layer replaced.
   ================================================== */

/* Footnote/endnote reference — charcoal, regular weight, no underline
   by default; underline on hover only. Replaces blue+bold. */
a.footnote-ref,
a[href^="#_ftn"],
a[href^="#_edn"] {
    color: var(--accent);
    font-family: var(--font-ui);
    font-size: 0.75em;
    font-weight: 600;
    text-decoration: none;
    vertical-align: baseline;
    cursor: pointer;
    position: relative;
    padding: 0 1px;
    border-radius: 2px;
    transition: background .15s, color .15s;
}

a.footnote-ref:hover,
a[href^="#_ftn"]:hover,
a[href^="#_edn"]:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--link-hover);
}

/* Active-reference highlight — warm flash matching the extension's
   `.flash` (rgba 210,150,40,0.4) rather than the legacy dark-block. */
a[href^="#_ftn"].active-reference,
a[href^="#_edn"].active-reference {
    background-color: var(--flash) !important;
    color: var(--accent) !important;
    border-radius: 2px;
    padding: 0 2px;
    animation: fadeOutHighlight 0.75s ease-out 2s forwards;
}

a[href^="#_ftn"].active-reference *,
a[href^="#_ftn"].active-reference span,
a[href^="#_ftn"].active-reference sup,
a[href^="#_edn"].active-reference *,
a[href^="#_edn"].active-reference span,
a[href^="#_edn"].active-reference sup {
    color: var(--accent) !important;
    background-color: transparent !important;
}

/* Return-link styling — mirrors the forward-ref but slightly smaller
   so the visual hierarchy matches the extension's `a.note-sym`. */
a[href^="#_ftnref"],
a[href^="#_ednref"] {
    color: var(--accent);
    font-family: var(--font-ui);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    margin-right: 5px;
    padding: 0 2px;
    border-radius: 2px;
    transition: background .15s, color .15s;
    vertical-align: baseline;
    display: inline;
}

a[href^="#_ftnref"]:hover,
a[href^="#_ednref"]:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--link-hover);
}

a[href^="#_ftnref"].active-footnote,
a[href^="#_ednref"].active-footnote {
    background-color: var(--flash) !important;
    color: var(--accent) !important;
    animation: fadeOutHighlight 0.75s ease-out 2s forwards;
}

a[href^="#_ftnref"].active-footnote *,
a[href^="#_ftnref"].active-footnote span,
a[href^="#_ftnref"].active-footnote sup,
a[href^="#_ednref"].active-footnote *,
a[href^="#_ednref"].active-footnote span,
a[href^="#_ednref"].active-footnote sup {
    color: var(--accent) !important;
    background-color: transparent !important;
}

@keyframes fadeOutHighlight {
    0%   { background-color: var(--flash); opacity: 1; }
    100% { background-color: transparent;  opacity: 1; }
}

/* Tooltip — extension's "elevated card on cream" look. White card,
   hairline border, 3px charcoal left bar as the visual anchor.
   Legacy dark-block tooltip discarded. */
.footnote-tooltip {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 8px;

    background: #ffffff;
    color: var(--text);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 2px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10),
                0 1px  4px rgba(0, 0, 0, 0.05);
    padding: 0.6rem 0.9rem;
    min-width: 200px;
    max-width: 350px;
    width: max-content;

    font-family: var(--font-ui);
    font-size: 0.8rem;
    line-height: 1.5;
    text-align: left !important;
    text-indent: 0 !important;
    font-weight: normal;
    z-index: 1000;
    word-wrap: break-word;
    overflow-wrap: break-word;

    /* Elegant measurement approach — preserved from legacy. */
    visibility: hidden;
}

/* Dark theme — mirror the extension's tooltip dark treatment. */
:root[data-theme="dark"] .footnote-tooltip {
    background: #2d2a24;
    color: var(--text);
    border-color: var(--border);
    border-left-color: var(--accent);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55),
                0 1px  4px rgba(0, 0, 0, 0.30);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .footnote-tooltip {
        background: #2d2a24;
        color: var(--text);
        border-color: var(--border);
        border-left-color: var(--accent);
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55),
                    0 1px  4px rgba(0, 0, 0, 0.30);
    }
}

a[href^="#_ftn"]:hover .footnote-tooltip,
a[href^="#_edn"]:hover .footnote-tooltip,
a.footnote-ref:hover .footnote-tooltip {
    display: block !important;
    visibility: visible !important;
}

.footnote-tooltip.tooltip-right { left: auto; right: 0; }

.footnote-tooltip *,
.footnote-tooltip span,
.footnote-tooltip sup,
.footnote-tooltip sub {
    text-align: left !important;
    text-indent: 0 !important;
    color: inherit !important;
    background: transparent !important;
}

.MsoFootnoteText .footnote-tooltip,
.MsoEndnoteText .footnote-tooltip,
div[id^="ftn"] .footnote-tooltip,
div[id^="edn"] .footnote-tooltip {
    display: none !important;
}

.MsoFootnoteText,
.MsoFootnoteText * { vertical-align: baseline !important; }

.MsoFootnoteText sup,
.MsoFootnoteText .MsoFootnoteReference {
    vertical-align: baseline !important;
    font-size: inherit !important;
    position: static !important;
    top: auto !important;
}

.MsoFootnoteText span.MsoFootnoteReference {
    vertical-align: baseline !important;
    font-size: inherit !important;
}

/* Tooltip arrow — match the new white-card tone. */
.footnote-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 20px;
    border: 6px solid transparent;
    border-top-color: #ffffff;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.08));
}

:root[data-theme="dark"] .footnote-tooltip::after { border-top-color: #2d2a24; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .footnote-tooltip::after { border-top-color: #2d2a24; }
}

.footnote-tooltip.tooltip-right::after { left: auto; right: 20px; }

/* Footnotes section at end of article — hairline above, smaller text,
   serif body, hanging indent (matches extension `.footnotes-list`). */
.footnotes-section {
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    font-family: var(--font-body);
    font-size: var(--fn-size);
    line-height: 1.55;
    color: var(--text);
}

/* Footnote sections — same 210mm measure as the body paper. */
.MsoFootnoteText {
    max-width: 210mm;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    font-family: var(--font-body);
}

div[id^="ftn"] {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.55;
}

/* Cream-paper continuation for the footnote container below the rule.
   Scoped to the article-galley body only — the original rule was
   `body > div:last-of-type` which leaked into the OJS default theme's
   `.pkp_structure_page` wrapper on CDP (every page wrapper became
   210mm-wide). Now only fires when the body carries the OJS galley
   classes. */
body.pkp_page_article.pkp_op_view > div:last-of-type,
body:has(> .WordSection1) > div:last-of-type {
    max-width: 210mm;
    margin-left: auto;
    margin-right: auto;
    padding-left: 60px;
    padding-right: 60px;
    padding-top: 0;
    padding-bottom: 40px;
    background-color: var(--bg);
}

body.pkp_page_article.pkp_op_view > div:last-child,
body:has(> .WordSection1) > div:last-child,
div[id^="ftn"]:first-of-type {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
}

body > div:nth-child(2) > hr,
hr {
    max-width: 210mm;
    margin-left: auto;
    margin-right: auto;
    border: 0;
    border-top: 1px solid var(--border);
}

/* Cream paper continuation across the article container. */
body > div { background-color: var(--bg); }


/* ==================================================
   SECTION 4: BUTTON & NAV STYLES
   No more pills. Hairline rectangles with the editorial palette.
   Galley download buttons take the extension's `.metadate-section-header`
   uppercase Sans treatment so a "DOWNLOAD PDF" reads as a label, not a
   call-to-action shouting at the reader.
   ================================================== */

.homepage-issue-galleys > a,
.btn,
.btn-primary,
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary,
.references-toggle-btn,
.galley-link,
.issue-galley,
.article-details-galleys a,
.pkp_controllers_linkAction,
.pkp_linkaction_download {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 0.5rem 0.9rem;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
    box-shadow: none;
}

.homepage-issue-galleys > a:hover,
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.references-toggle-btn:hover,
.galley-link:hover,
.issue-galley:hover,
.article-details-galleys a:hover,
.pkp_controllers_linkAction:hover,
.pkp_linkaction_download:hover {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}

/* The OJS "primary" button (article-action submit) keeps a filled
   variant so the form CTA is still distinguishable. */
.btn-primary,
.pkp_form button[type="submit"] {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.pkp_form button[type="submit"]:hover,
.pkp_form button[type="submit"]:focus,
.pkp_form button[type="submit"]:active {
    /* Theme uses `.btn-primary:hover { background:#577ba2 !important }` —
       blue swap. We deepen the charcoal instead, keep the cream label.
       No size, padding, or transform change → no hover jitter. The
       `!important` is required to beat the theme's own `!important`. */
    background: var(--link-hover) !important;
    border-color: var(--link-hover) !important;
    color: var(--bg) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Galley download buttons — hairline rectangle, charcoal text on cream
   (revised 2026-05-26 after design-critique). Same treatment as the
   ARCHIVE/nav buttons so all UI rectangles speak one language. Subtle
   accent-dim wash on hover, no fill swap, no size or padding jitter.
   `!important` on every property is required to beat OJS's `.btn-primary`
   class (which the theme paints filled blue with `!important`). */
/* Galley list contexts — covers article-level, issue-level (page-issue),
   homepage current-issue, and the legacy `.issue-galley` / `.galley-link`
   wrappers. Any `<a>` inside one of these containers gets the hairline
   rectangle. Added 2026-05-26 after spotting the "Full Issue" buttons
   still rendering filled on the issue-detail page (they sit under
   `.page-issue-galleys`, which the previous list missed). */
.article-summary-galleys a,
.article-details-galleys a,
.homepage-issue-galleys > a,
.page-issue-galleys a,
.page-issue-galleys > a,
.issue-galley,
a.issue-galley,
.galley-link {
    background: transparent !important;
    color: var(--accent) !important;
    border: 1px solid var(--border) !important;
    border-radius: 2px !important;
    padding: 0.55rem 1.1rem !important;
    font-family: var(--font-ui) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
    display: inline-block !important;
    margin: 0.25rem 0.35rem 0.25rem 0 !important;
    transition: background .15s, border-color .15s, color .15s !important;
}

.article-summary-galleys a:hover,
.article-summary-galleys a:focus,
.article-summary-galleys a:active,
.article-details-galleys a:hover,
.article-details-galleys a:focus,
.article-details-galleys a:active,
.homepage-issue-galleys > a:hover,
.homepage-issue-galleys > a:focus,
.homepage-issue-galleys > a:active,
.page-issue-galleys a:hover,
.page-issue-galleys a:focus,
.page-issue-galleys a:active,
.issue-galley:hover,
.issue-galley:focus,
.galley-link:hover,
.galley-link:focus {
    background: var(--accent-dim) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* The "Full Issue" heading uses `.h3` (visual-class only, not an <h3>).
   Retoken so it speaks the same small-caps idiom as other section heads. */
.page-issue-galleys .h3,
.page-issue-galleys h3 {
    font-family: var(--font-body) !important;
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    font-variant-caps: small-caps !important;
    text-transform: lowercase !important;
    letter-spacing: 0.04em !important;
    color: var(--accent) !important;
    margin: 0 0 0.75rem !important;
    padding-bottom: 0.3rem !important;
    border-bottom: 1px solid var(--border) !important;
}

/* ── Theme `#f7f7f7` panel sweep ───────────────────────────────────────
   The healthSciences theme paints `background: #f7f7f7` on a half-dozen
   container selectors. Each one survives the dark-mode token cascade
   because the bg colour is hardcoded, not `var(--bg)` or `var(--panel-bg)`.
   In dark mode this produces a light-grey island floating on the dark
   page (the "Full Issue" card in the screenshot was one such island).
   Overriding all of them to `transparent` so they inherit the body bg
   regardless of theme. Padding/layout from theme rules is preserved;
   only the paint is removed. */
.page-issue-description-wrapper,
.page-issue-galleys,
.homepage-issue-description-wrapper,
.article-details-main,
.page-view-pdf,
.page-section .section-description,
.page-category-description-wrapper,
.search-filters {
    background: transparent !important;
}

/* Where the theme intentionally uses the f7f7f7 panel as a "callout"
   surface — search-filters specifically — keep the visual separation
   with a hairline border instead of a fill, so the meaning survives
   into dark mode. */
.search-filters {
    border: 1px solid var(--border) !important;
    border-radius: 2px !important;
    padding: 1.25rem 1.5rem !important;
}

/* The article-details-main panel — at theme min-width:992px breakpoint
   it gets `padding: 3rem 6rem`. We keep the inner padding (good editorial
   breathing room) but kill the fill. The hairline rule above creates
   the "card" affordance without painting a surface. */
.article-details-main {
    border-left: 3px solid var(--border) !important;
    padding-left: 2rem !important;
}

@media (max-width: 991px) {
    .article-details-main {
        border-left: none !important;
        padding-left: 0 !important;
    }
}

/* Navigation — strip pill radii from nav links and dropdowns.
   Hover affordance comes from a 2px underline, not a rounded bg. */
nav .dropdown-menu,
nav .dropdown-toggle,
nav .nav-link,
#primaryNav .dropdown-menu,
#primaryNav .dropdown-toggle,
#primaryNav .nav-link {
    border-radius: 2px !important;
    font-family: var(--font-ui);
    font-weight: 600;
    color: var(--text);
    background: transparent;
}

/* All Bootstrap dropdown panels site-wide — primary nav (ARCHIVE),
   language toggle (top-left), user nav (top-right), and any other.
   The healthSciences theme declares `.dropdown-menu { background:#3c5570 }`
   at the bare-class level, plus a more specific
   `#primaryNav .dropdown-menu.show { background:#3c5570 }` for the
   open primary-nav submenu. We override both with a higher-specificity
   chain + `!important`. */
.dropdown-menu,
nav .dropdown-menu,
#primaryNav .dropdown-menu,
#primaryNav .dropdown-menu.show,
.language-toggle .dropdown-menu,
#userNav .dropdown-menu,
#languageSmallNav .dropdown-menu,
.navbar-nav .dropdown-menu {
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
    border-radius: 2px !important;
    padding: 0.35rem 0 !important;
    color: var(--text) !important;
}

/* Dropdown items in language & user nav — theme paints them
   `color: #fff` on the dark blue panel. With the panel now cream,
   we recolour the items to charcoal so they're readable. */
.dropdown-menu .dropdown-item,
.language-toggle .dropdown-item,
#userNav .dropdown-item,
#languageSmallNav .dropdown-item,
.navbar-nav .dropdown-menu .dropdown-item,
.dropdown-menu a,
.dropdown-menu button {
    color: var(--text) !important;
    background: transparent !important;
    font-family: var(--font-ui) !important;
    text-decoration: none !important;
    text-transform: none !important;
    border-radius: 2px !important;
    border: 1px solid transparent !important;
    padding: 0.4rem 0.85rem !important;
    margin: 1px 4px !important;
    transition: background .15s, color .15s, border-color .15s;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.language-toggle .dropdown-item:hover,
.language-toggle .dropdown-item:focus,
#userNav .dropdown-item:hover,
#userNav .dropdown-item:focus,
#languageSmallNav .dropdown-item:hover,
#languageSmallNav .dropdown-item:focus,
.dropdown-menu a:hover,
.dropdown-menu a:focus,
.dropdown-menu button:hover,
.dropdown-menu button:focus {
    background: var(--accent-dim) !important;
    color: var(--accent) !important;
    border-color: var(--border) !important;
}

/* Dropdown header label inside dropdowns (e.g. user nav "dorin.jorea") —
   theme uses `color: rgba(255,255,255,0.85)`; retoken to muted charcoal. */
.dropdown-header,
.dropdown-menu .dropdown-header {
    color: var(--muted) !important;
    background: transparent !important;
    font-family: var(--font-ui) !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 0.5rem 0.85rem 0.3rem !important;
    margin: 0 !important;
}

nav .nav-link:hover,
nav .nav-link:focus,
#primaryNav .nav-link:hover,
#primaryNav .nav-link:focus {
    color: var(--accent) !important;
    background: var(--accent-dim) !important;
    border-color: transparent !important;   /* theme adds a #757575 box on
                                                hover/focus — soften it away;
                                                the bg tint signals state. */
}

/* Active / aria-expanded dropdown toggle — the ARCHIVE button when its
   menu is open. Same accent-dim wash as hover, no harsh outline. */
#primaryNav .nav-link[aria-expanded="true"],
#primaryNav .dropdown-toggle[aria-expanded="true"],
nav .dropdown-toggle[aria-expanded="true"] {
    background: var(--accent-dim) !important;
    color: var(--accent) !important;
    border-color: transparent !important;
}

nav .dropdown-item,
nav .dropdown-menu a,
nav .dropdown-menu button,
#primaryNav .dropdown-item,
#primaryNav .dropdown-menu a,
#primaryNav .dropdown-menu button,
#primaryNav .dropdown-menu.show .dropdown-item {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--text) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 2px !important;
    margin: 1px 4px !important;
    padding: 0.4rem 0.75rem !important;
    text-decoration: none !important;
    text-transform: none !important;
    text-align: left;
    transition: background .15s, color .15s, border-color .15s;
}

nav .dropdown-item:hover,
nav .dropdown-menu a:hover,
nav .dropdown-menu button:hover,
#primaryNav .dropdown-item:hover,
#primaryNav .dropdown-item:focus,
#primaryNav .dropdown-menu.show .dropdown-item:hover,
#primaryNav .dropdown-menu.show .dropdown-item:focus {
    background: var(--accent-dim) !important;
    color: var(--accent) !important;
    border-color: var(--border) !important;
}

/* Article summary galley buttons — preserved sizing, restyled. */
body > div.container.page-issue > div.row.issue-wrapper > div > div > div > div > div.article-summary-galleys a {
    font-family: var(--font-ui);
    font-size: 0.72rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.5rem 0.9rem !important;
}

/* References toggle — same treatment as galley buttons, full width on
   mobile (Section 9). */
.references-toggle-btn {
    cursor: pointer;
    width: auto;
    transition: background .15s, color .15s, border-color .15s, transform .1s;
}

.references-toggle-btn:hover  { transform: none; }
.references-toggle-btn:active { transform: translateY(1px); }


/* ==================================================
   SECTION 5: CONTENT SECTIONS (TOC, abbreviations, refs)
   ================================================== */

/* The two-pane TOC grid — preserved at the layout level, repainted at
   the typographic level. Sidebar takes the Sans-display label
   treatment; content stays serif. */
.page-content:has(#subb-toc-container),
.page-content:has(#subb-toc-container) > div {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#subb-toc-container {
    display: grid;
    grid-template-columns: 200px 2fr;
    align-items: start;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: var(--bg);
}

#subb-toc-sidebar {
    padding: 1.25rem 1.25rem 1.25rem;
    box-sizing: border-box;
    background: var(--panel-bg);
    border-right: 1px solid var(--border);
    min-height: 100%;
}

#subb-toc-content {
    padding: 1.25rem 1.5rem 2rem;
    box-sizing: border-box;
    text-align: justify;
    hyphens: auto;
    font-family: var(--font-body);
}

#subb-toc-sidebar h2 {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    text-align: left;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    line-height: 1.2;
}

#subb-toc-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#subb-toc-sidebar li { margin: 0.15rem 0; }

#subb-toc-sidebar a {
    display: inline-block;
    padding: 0.2rem 0.5rem 0.2rem 0.5rem;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--muted);
    text-decoration: none;
    border-radius: 2px;
    border-left: 2px solid transparent;
    transition: color .15s, background .15s, border-color .15s;
}

#subb-toc-sidebar a:hover {
    color: var(--accent);
    background: var(--accent-dim);
    border-left-color: var(--accent);
}

#subb-toc-content h1 {
    font-family: var(--font-body);
    font-size: var(--h2-em);
    font-weight: 500;
    line-height: 1.3;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    margin: 0 0 1rem 0;
    color: var(--text);
}

#subb-toc-content h1 a { float: right; }

#subb-toc-content p {
    line-height: 1.5;
    margin: 0 0 0.6rem;
}

#subb-toc-intro {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

#subb-toc-intro p {
    margin-top: 0;
    line-height: 1.5;
}

/* References sections — preserved hooks, restyled fades. */
.references-section-with-button {
    position: relative;
    overflow: visible;
}

.references-fade-overlay {
    pointer-events: none;
    /* If the legacy JS draws a gradient, it inherits the body bg.
       The legacy hard-coded gradient (#fafaf8) is replaced by the
       reader's actual background through `currentBackground` trick. */
    background: linear-gradient(to bottom,
        rgba(246, 243, 236, 0) 0%,
        var(--bg) 100%) !important;
}

/* Abbreviations list — preserved measure, retoken borders. */
.abbreviations-list {
    max-width: var(--measure) !important;
    margin: 0 auto !important;
    padding: 0 clamp(0.5rem, 2vw, 4rem) !important;
}

.abbreviations-item {
    display: grid !important;
    grid-template-columns: minmax(100px, 1fr) 1fr !important;
    gap: 1.25rem !important;
    padding: 0.6rem 0 !important;
    border-bottom: 1px solid var(--border) !important;
    align-items: baseline;
}

.abbreviation-term {
    font-family: var(--font-ui);
    font-size: 0.78rem !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--accent);
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
}

.abbreviation-definition {
    font-family: var(--font-body);
    font-size: 0.88rem !important;
    color: var(--text);
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.45 !important;
}


/* ==================================================
   SECTION 6: IMAGES & VISUAL ELEMENTS
   Cover shadow preserved verbatim — the strongest piece of the
   current site's identity, and the only thing besides the 210mm
   container that already reads as editorial.
   ================================================== */

.homepage-issue-cover,
.page-issue-cover,
.img-fluid,
.card-img-top {
    box-shadow: 14px 21px 28px -7px rgba(0, 0, 0, 0.20);
}

.img-fluid {
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

.col-lg-3 .img-fluid,
.sidebar .img-fluid {
    padding-right: 0 !important;
}

.col-lg-9 .img-fluid,
.main-content .img-fluid {
    padding-left: 0 !important;
}

.issue-summary-cover {
    max-width: 300px;
    height: auto;
}

/* Issue TOC section heading ("Articles", "Editoriale", etc.) — the
   healthSciences theme paints it `#577ba2` (OJS blue) in Fira Sans.
   Retoken to charcoal small-caps in the same idiom as the article-body
   section heads. */
.issue-toc-section-title,
.category-title,
h2.issue-toc-section-title,
h3.issue-toc-section-title {
    font-family: var(--font-body) !important;
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    font-variant-caps: small-caps !important;
    text-transform: lowercase !important;
    letter-spacing: 0.04em !important;
    color: var(--accent) !important;
    margin: 2rem 0 1rem !important;
    padding-bottom: 0.4rem !important;
    border-bottom: 1px solid var(--border) !important;
}

/* Ghost-border kill — the artifact shadow on covers lifts the IMAGE
   away from its parent wrapper, which still draws Bootstrap/healthSciences
   default borders + padding. The visual result is a hairline rectangle
   floating where the cover "used to be" before the shadow displaced it.
   Strip the wrapper's border/background/padding so only the shadowed
   image reads. Targets the wrapper anchor and card containers commonly
   used by OJS for issue covers. */
.homepage-issue-cover,
.page-issue-cover,
a.homepage-issue-cover,
a.page-issue-cover,
.obj_issue_summary,
.obj_issue_summary > a,
.issue-summary > a,
.issue-summary-cover-wrapper,
.card:has(> .card-img-top),
.card:has(.homepage-issue-cover),
.card:has(.page-issue-cover) {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none;
}

/* Re-assert the artifact shadow on the image itself (above rule above
   would otherwise clear it from the wrapper). The shadow is meant for
   the IMAGE element, not the wrapper. */
img.homepage-issue-cover,
img.page-issue-cover,
.homepage-issue-cover img,
.page-issue-cover img,
.issue-summary-cover,
.card-img-top {
    box-shadow: 14px 21px 28px -7px rgba(0, 0, 0, 0.20);
    border: none !important;
}


/* ==================================================
   SECTION 7: READING OPTIMIZATION
   Preserved measure from the legacy stylesheet — already perfect.
   ================================================== */

.article-content > *,
body > div .article-content > *,
div.article-content > *,
[class*="article-content"] > * {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 clamp(0.5rem, 2vw, 4rem);
    transition: max-width .3s ease, padding .3s ease;
}

div[class*="article-content"] p,
div[class*="article-content"] h1,
div[class*="article-content"] h2,
div[class*="article-content"] h3,
div[class*="article-content"] div {
    max-width: var(--measure) !important;
    margin: 0 auto !important;
    padding: 0 clamp(0.5rem, 2vw, 4rem) !important;
}

/* Section heads inside article content — small-caps lowercase, hairline
   under-rule, charcoal. Matches extension's `h1.sec / h2.sec / h3.sec`. */
[class*="article-content"] h1,
[class*="article-content"] h2 {
    font-family: var(--font-body);
    font-size: var(--h2-em);
    font-weight: 400;
    font-variant-caps: small-caps;
    text-transform: lowercase;
    letter-spacing: 0.04em;
    color: var(--accent);
    margin-top: var(--h2-above);
    margin-bottom: var(--h2-below);
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}

[class*="article-content"] h3 {
    font-family: var(--font-body);
    font-size: var(--h3-em);
    font-weight: 400;
    font-variant-caps: small-caps;
    text-transform: lowercase;
    letter-spacing: 0.03em;
    color: var(--accent);
    margin-top: var(--h3-above);
    margin-bottom: var(--h3-below);
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--border);
}

[class*="article-content"] h4 {
    font-family: var(--font-body);
    font-size: var(--h4-em);
    font-weight: 400;
    font-style: italic;
    margin-top: var(--h4-above);
    margin-bottom: var(--h4-below);
    color: var(--text);
}

/* Galley display — preserved disabled max-width rules so text flows in
   the WordSection1 210mm container. */
.galley_view p,
.galley-view p,
.obj_galley_link p,
iframe p,
.galley_content p {
    /* max-width: 600px !important; */ /* DISABLED — see PROGRESS-NOTES */
    margin: 0 auto !important;
    padding: 0 20px !important;
}

.galley_view .article-content p,
.galley-view .article-content p,
iframe .article-content p {
    /* max-width: 600px !important; */ /* DISABLED */
    margin: 0 auto !important;
    padding: 0 20px !important;
}


/* ==================================================
   SECTION 8: NAVIGATION STYLES
   ================================================== */

#primaryNav .dropdown-menu * { text-transform: none !important; }


/* ==================================================
   SECTION 8b: OJS DEFAULT THEME (Caiete de Drept Penal)
   Studia uses `healthSciences` theme; CDP uses the OJS `default` theme.
   Default theme uses different markup (`.pkp_site_nav_menu`,
   `.pkp_site_name`, `.pkp_structure_*`) and ships with a saturated blue
   palette (`rgb(30,98,146)` masthead nav, white text). These rules
   propagate the warm-monochrome design language into the default theme.
   Audited 2026-05-26 via local mirror at localhost:8765/cdp-home.html.
   ================================================== */

/* Default-theme primary nav bar — `.pkp_site_nav_menu` is the blue
   masthead band. Recolour to cream with hairline rule. */
.pkp_site_nav_menu {
    background-color: var(--panel-bg) !important;
    border-bottom: 1px solid var(--border);
}

.pkp_site_name {
    color: var(--text) !important;
    background-color: transparent !important;
}

.pkp_site_name a,
.pkp_site_name .pkp_site_name_text,
.pkp_site_name_text {
    color: var(--text) !important;
    text-decoration: none !important;
    font-family: var(--font-body) !important;
    font-weight: 500;
}

.pkp_site_name a:hover,
.pkp_site_name a:focus {
    color: var(--accent) !important;
}

/* Nav-list items (primary + user) in the default theme. White-on-blue
   → charcoal-on-cream. Catalog-tier link treatment: no underline at
   rest, accent-dim wash on hover. */
.pkp_navigation_primary,
.pkp_navigation_user,
.pkp_nav_list {
    background-color: transparent !important;
}

.pkp_navigation_primary a,
.pkp_navigation_user a,
.pkp_nav_list a,
#navigationPrimary a,
#navigationUser a {
    color: var(--text) !important;
    background-color: transparent !important;
    text-decoration: none !important;
    font-family: var(--font-ui) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.85rem;
    padding: 0.6rem 1rem !important;
    border-radius: 2px !important;
    transition: color .15s, background .15s;
}

.pkp_navigation_primary a:hover,
.pkp_navigation_primary a:focus,
.pkp_navigation_user a:hover,
.pkp_navigation_user a:focus,
.pkp_nav_list a:hover,
.pkp_nav_list a:focus,
#navigationPrimary a:hover,
#navigationUser a:hover {
    color: var(--accent) !important;
    background-color: var(--accent-dim) !important;
}

/* Default theme submenu (e.g. CDP "All Issues" / "About" dropdowns).
   Already partially covered by the generic .dropdown-menu rule, but
   the default theme uses .pkp_nav_list nested ULs without bootstrap
   .dropdown-menu class. */
.pkp_nav_list ul,
.pkp_navigation_primary ul,
.pkp_navigation_user ul {
    background-color: var(--bg) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    padding: 0.35rem 0;
}

/* Default theme structure wrappers. `.pkp_structure_main` and
   `.pkp_structure_content` have no max-width by default — content
   spills full-width to the right. Cap and center for editorial measure. */
.pkp_structure_main,
.pkp_structure_content {
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* Default theme journal name in masthead. The .pkp_site_name has the
   journal title image OR text — recolour text and keep image visible. */
.pkp_brand_footer .pkp_brand_credit,
.pkp_brand_footer .pkp_brand_logo {
    color: var(--muted) !important;
}

/* Default theme sidebar blocks (e.g. CDP's "Language" sidebar). */
.pkp_block .title {
    color: var(--accent) !important;
    font-family: var(--font-ui) !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.4rem;
    margin-bottom: 0.6rem;
}

.pkp_block ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.pkp_block li {
    margin: 0.25rem 0;
}

.pkp_block a {
    color: var(--link) !important;
    text-decoration: none !important;
    font-family: var(--font-ui) !important;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(74, 65, 55, 0.25);
}

.pkp_block a:hover,
.pkp_block a:focus {
    color: var(--link-hover) !important;
    border-bottom-color: currentColor;
}

/* Default theme article-summary "Read More" affordance — kept inline
   but quieter. */
.cmp_announcement .more,
.obj_announcement_summary .more,
.read-more-link {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}


/* ==================================================
   SECTION 9: RESPONSIVE / MEDIA QUERIES
   Layout & responsive rules — preserved from legacy where they're
   purely functional, restyled where they touched visual tokens.
   ================================================== */

@media (min-width: 769px) {
    body > header > div > nav > a > span {
        font-size: clamp(1.0rem, 1.5vw, 1.2rem) !important;
    }

    body > header > div > nav .navbar-toggler {
        font-size: 1.5rem !important;
        padding: 0.5rem 0.75rem !important;
    }
}

@media (min-width: 992px) {
    .col-12 {
        -ms-flex: 0 0 100% !important;
        flex:     0 0 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .abbreviations-item {
        grid-template-columns: 1fr !important;
        gap: 0.25rem !important;
        padding: 0.65rem 0 !important;
    }

    .abbreviation-term      { margin-bottom: 0.1rem !important; }
    .abbreviation-definition { margin-bottom: 0.5rem !important; }

    /* DOI container mobile (preserved selectors). */
    body > div.container.container-homepage-issue.page-content > div.row.issue-wrapper > div > div > div > div:nth-child(4) {
        padding: 0 15px !important;
    }

    body > div.container.container-homepage-issue.page-content > div.row.issue-wrapper > div > div > div > div:nth-child(4) > div.article-summary-doi {
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
        word-break: break-all !important;
    }

    body > header > div > nav {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body > header > div > nav .navbar-toggler {
        font-size: clamp(0.75rem, 2vw, 1.5rem) !important;
        padding: 0.25rem 0.5rem !important;
        border: none !important;
    }

    body > header > div > nav > a > span {
        font-size: clamp(0.8rem, 2.5vw, 1.0rem) !important;
    }

    .btn.btn-primary { margin: 0.25rem 0 !important; }

    .references-section-with-button {
        margin-bottom: 15px !important;
        overflow: visible;
    }

    .references-section-with-button .references-toggle-btn {
        margin-top: 5px !important;
        margin-bottom: 10px !important;
        width: 100%;
        box-sizing: border-box;
        max-width: 100%;
    }

    .references-section-with-button .article-details-block.article-details-references {
        margin-bottom: 0 !important;
    }

    /* URL breaking — preserved selectors. */
    #subb-toc-content p a[href*="doi.org"],
    #subb-toc-content p a[href*="http"],
    div#subb-toc-content a[href*="doi.org"],
    div#subb-toc-content a[href*="http"] {
        word-break: break-all !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        max-width: 100%;
        display: inline;
    }

    #subb-toc-content p {
        hanging-punctuation: none;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    #subb-toc-content p a[href*="doi.org"] + *,
    #subb-toc-content p a[href*="http"] + *,
    div#subb-toc-content a[href*="doi.org"] + *,
    div#subb-toc-content a[href*="http"] + * {
        display: inline;
        white-space: pre;
    }

    [href*="doi.org"],
    [href*="http"] {
        word-break: break-all !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    body > header > div > nav > a > span {
        font-size: clamp(0.8rem, 2.5vw, 1.0rem) !important;
        line-height: 1.2;
        word-break: keep-all;
        overflow-wrap: break-word;
        hyphens: manual;
        -webkit-hyphens: manual;
        -ms-hyphens: manual;
        display: inline-block;
        max-width: 100%;
        text-align: center;
        white-space: normal;
    }

    body > header > div > nav > a > span::after {
        content: "";
        white-space: nowrap;
    }

    /* Issue summary stacks on mobile. */
    .issue-summary {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (max-width: 767px) {
    .col-md-8:has(#subb-toc-container) { padding: 0 !important; }

    #subb-toc-container {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #subb-toc-sidebar {
        padding: 1.25rem 1.25rem 0.75rem;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    #subb-toc-content { padding: 1rem 1.25rem 2rem; }

    #subb-toc-sidebar > ul {
        display: block;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #subb-toc-sidebar > ul > li {
        display: block;
        margin: 0.3rem 0;
        font-weight: 600;
    }

    #subb-toc-sidebar ul ul {
        display: block;
        list-style: none;
        margin: 0.3rem 0 0.7rem 0.9rem;
        padding: 0;
    }

    #subb-toc-sidebar ul ul li {
        display: inline;
        margin: 0;
        font-weight: normal;
    }

    #subb-toc-sidebar ul ul li:not(:last-child)::after {
        content: " | ";
        color: var(--muted);
    }

    #subb-toc-sidebar > ul > li:not(:last-child)::after {
        content: "";
    }
}


/* ==================================================
   §10 — 2026-05-26 follow-up patches
   --------------------------------------------------
   Added after the second design-critique round on
   live dark-mode iPhone screenshots. Each block is
   a targeted fix; comment in the block explains
   the screenshot/symptom it answers.
   ================================================== */

/* ── (a) SEARCH submit button — hairline, not filled.
   User flagged the cream "SEARCH" pill on the search
   page as another galley-style filled island. Convert
   .pkp_form button[type="submit"] and .btn-primary to
   the same hairline rectangle the galley buttons use.
   The earlier filled-charcoal variant is retired —
   nothing else in the editorial design needs a
   distinguishable "filled CTA". */
.btn-primary,
.pkp_form button[type="submit"],
.pkp_form input[type="submit"] {
    background: transparent !important;
    color: var(--accent) !important;
    border: 1px solid var(--border) !important;
    border-radius: 2px !important;
    padding: 0.55rem 1.4rem !important;
    font-family: var(--font-ui) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background .15s, border-color .15s, color .15s !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.pkp_form button[type="submit"]:hover,
.pkp_form button[type="submit"]:focus,
.pkp_form button[type="submit"]:active,
.pkp_form input[type="submit"]:hover,
.pkp_form input[type="submit"]:focus,
.pkp_form input[type="submit"]:active {
    background: var(--accent-dim) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ── (a2) Form fields — token-driven, dark-mode aware.
   Register / login / contact / submission forms used to
   render with the browser-default white field on every
   theme. On dark mode that produced a row of blinding
   white rectangles (see register-page screenshot,
   2026-05-26). Re-paint all text-like fields with the
   panel-bg + hairline border idiom so they sit on the
   page in both palettes.

   `appearance: none` is required on iOS/Safari to stop
   the system from over-painting the background back to
   white on focus. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select,
.pkp_form input,
.pkp_form textarea,
.pkp_form select,
.form-control {
    background-color: var(--panel-bg) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 2px !important;
    padding: 0.55rem 0.75rem !important;
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus,
.form-control:focus {
    background-color: var(--bg) !important;
    border-color: var(--accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px var(--accent-dim) !important;
}

/* Browser autofill — Chrome/Safari paint a light-yellow
   fill on remembered logins that overrides background.
   Trick: large inset-shadow of panel-bg + matching text
   colour via -webkit-text-fill-color. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--panel-bg) inset !important;
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text) !important;
}

/* Checkbox / radio — keep native control but tint to
   `accent` so they're charcoal on light, cream-ish on
   dark, matching the rest of the UI. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--accent);
}

/* Any remaining filled button — `.btn` w/o `.btn-primary`,
   `.pkp_form .submit`, OJS link-actions used as form CTAs.
   §10(a) hit `.btn-primary` and submit inputs; this
   widens the net so nothing slips through as a cream
   island on dark mode. */
.pkp_form .buttons button,
.pkp_form .buttons input,
.pkp_form button.submit,
button.btn,
.btn.submit {
    background: transparent !important;
    color: var(--accent) !important;
    border: 1px solid var(--border) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}
.pkp_form .buttons button:hover,
.pkp_form .buttons input:hover,
.pkp_form button.submit:hover,
button.btn:hover,
.btn.submit:hover {
    background: var(--accent-dim) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

/* ORCID call-out box — register form decorates the
   "Create or Connect your ORCID iD" with its own brand
   tile. Keep the iD logo, retoken the wrapper. */
.orcid_profile,
.orcid {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}


/* ── (b) Sidebar language toggle — readable in dark mode.
   Photo 2: the "English" / "Limba Română" sidebar block
   was rendering near-invisible on dark — the theme paints
   `.pkp_block.pkp_block_languageToggle a` as `color: #666`
   hardcoded, which is below contrast on `--bg: #1c1a16`.
   Force `--link` so it tracks the rest of the link palette
   in both themes. */
.pkp_block.pkp_block_languageToggle,
.pkp_block.pkp_block_languageToggle ul,
.pkp_block.pkp_block_languageToggle li,
.pkp_block.pkp_block_languageToggle a,
#languageToggle a,
.locale-toggle a {
    color: var(--link) !important;
    font-family: var(--font-ui) !important;
}
.pkp_block.pkp_block_languageToggle a:hover,
.pkp_block.pkp_block_languageToggle a:focus,
#languageToggle a:hover,
.locale-toggle a:hover {
    color: var(--link-hover) !important;
    text-decoration: underline !important;
}

/* ── (c) Mobile padding — reduce on HTML article galleys
   and static pages (Editor profiles, About sub-pages),
   preserve the larger desktop-style padding only on the
   "main" pages (index, issue, article landing).

   User report: "Juanita Goicovici page has too much
   padding on mobile. all html articles or custom static
   pages has too much margins or paddings on mobile,
   except the main ones."

   Strategy: at ≤768px, kill horizontal padding on the
   `.container` and `.page-content` wrappers, but only
   when the body is NOT one of the main page classes.
   This stays compatible with the journal landing
   (`pkp_page_index`), issue grid (`pkp_page_issue`)
   and article landing (`pkp_op_view`). */
@media (max-width: 768px) {
    body:not(.pkp_page_index):not(.pkp_page_issue):not(.pkp_op_view):not(.pkp_op_index) .container,
    body:not(.pkp_page_index):not(.pkp_page_issue):not(.pkp_op_view):not(.pkp_op_index) .page-content,
    body:not(.pkp_page_index):not(.pkp_page_issue):not(.pkp_op_view):not(.pkp_op_index) .page {
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
    }

    /* HTML article galley body — the iframe loads its own
       document; default htmlArticleGalley CSS gives it
       `body { max-width: 768px; margin: auto }` which on
       a 375px viewport leaves a small but visible inset.
       Tighten to a single readable gutter. */
    body.galley,
    body.pkp_page_article.pkp_op_download,
    body[class*="htmlGalley"] {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Static editor / about pages — `.page-static` and
       `.pkp_page_about` (About → Editorial Team → profile).
       The OJS default theme keeps a `.container` with 15px
       padding plus a `.page-static .page-content` with its
       own inner padding — doubled gutter on mobile. */
    .page-static .page-content,
    body.pkp_page_about .page-content,
    body.pkp_op_editorialTeam .page-content,
    body.pkp_op_contact .page-content {
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
    }
}

/* ── (d) CDP light-lock — when this CSS is loaded inside
   the Criminal-Law-Writings journal, force the light
   palette regardless of OS preference or stored toggle.
   The user wants CDP to ship light-only for now; dark
   mode will be reviewed later.

   Selector: OJS default theme adds a journal-context
   class to <body>. We match all known forms so the lock
   works regardless of which class OJS emits. The block
   re-asserts the light tokens at maximum specificity. */
body.pkp_journal_caietededreptpenal :root,
body[class*="caietededreptpenal"],
html:has(body[class*="caietededreptpenal"]) {
    --bg:         #f6f3ec !important;
    --panel-bg:   #ece8df !important;
    --text:       #1c1a16 !important;
    --accent:     #2f2a24 !important;
    --accent-dim: rgba(47, 42, 36, 0.08) !important;
    --muted:      #6f6a63 !important;
    --border:     #d6d1c8 !important;
    --link:       #4a4137 !important;
    --link-hover: #1c1a16 !important;
}
/* And hide the theme-toggle button on CDP so the UI
   doesn't suggest something the lock will overrule. */
body[class*="caietededreptpenal"] #theme-toggle {
    display: none !important;
}


/* ── (a3) Navbar search field — visible, scoped override.
   The §10(a2) generic input rule paints every text input
   with `--panel-bg`. In the navbar (which is itself
   cream / panel-bg) that makes the search field
   disappear — only the magnifying-glass icon and the
   "Search" prompt overlay remain visible (see CDP
   screenshot 2026-05-26).

   `.pkp_search` is the PKP-lib navbar search wrapper
   used by the OJS default theme on CDP and on the
   site-index. Give the `input[name="query"]` inside it
   a contrasting `--bg` background + hairline border so
   the field reads as a real text-entry control.

   `.pkp_search_mobile` is the duplicate mobile-only
   form OJS emits next to the desktop one. The default
   theme hides it via media queries; we keep that
   behaviour intact and only style the desktop variant
   so the mobile DOM stays untouched. */
.pkp_search input[name="query"],
.pkp_search input[type="text"] {
    background-color: var(--bg) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 2px !important;
    padding: 0.35rem 0.6rem !important;
    min-width: 12rem;
    max-width: 18rem;
    font-family: var(--font-ui) !important;
    font-size: 0.9rem !important;
}

.pkp_search input[name="query"]:focus,
.pkp_search input[type="text"]:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent-dim) !important;
}

/* The PKP-lib search prompt overlay (".search_prompt")
   sits on top of the input and shows the localized
   "Search" word + magnifying-glass. The default theme
   positions it absolutely; we keep position but
   re-tokenise colour so it reads on cream. */
.pkp_search .search_prompt,
.pkp_search .headerSearchPrompt {
    color: var(--muted) !important;
    font-family: var(--font-ui) !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
}
.pkp_search .search_prompt:hover,
.pkp_search .headerSearchPrompt:hover {
    color: var(--accent) !important;
}

/* Belt-and-braces: keep the mobile duplicate hidden on
   wide viewports so we don't get the "empty box below
   the user-nav dropdown" artifact shown in screenshot 3. */
@media (min-width: 768px) {
    .pkp_search_mobile { display: none !important; }
}


/* ── (e) Site-index page (/index/index) — multi-journal landing.
   This page is rendered by the OJS site-level default
   theme (NOT healthSciences) so it uses its own selector
   set. The global stylesheet was leaking through only
   partially: tokens applied, but the header/footer
   chrome and the journal-listing links kept the default
   theme's hardcoded greys + blues.

   Fixes:
     1. Header strip → cream (was light-grey #f5f5f5)
     2. Footer → cream with hairline top rule (was dark)
     3. Journal titles → charcoal underlined link
     4. Action buttons ("Vizualizați Jurnalul", "Număr
        curent") already pick up §10(a) hairline rule —
        no extra work.
     5. Moon icon — fill the crescent with currentColor
        instead of stroke-only, so it's visible at 17 px.

   Screenshot 2026-05-26 (post-deploy of §10 a–d).        */
.pkp_structure_head,
#headerNavigationContainer,
.pkp_site_name_wrapper,
header#headerNavigationContainer {
    background: var(--bg) !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border) !important;
}

.pkp_site_name a,
.pkp_site_name h1,
.pkp_site_name h2 {
    color: var(--text) !important;
    font-family: var(--font-body) !important;
}

.pkp_structure_footer,
#pkpFooter,
#pkpFooterContent,
.pkp_structure_footer_wrapper {
    background: var(--bg) !important;
    color: var(--muted) !important;
    border-top: 1px solid var(--border) !important;
}

.pkp_structure_footer a,
#pkpFooter a,
#pkpFooterContent a {
    color: var(--link) !important;
}

/* OJS / PKP wordmark in the site footer — same treatment
   as the journal-level wordmark fix: desaturate + dim,
   never invert (dark mode handled by the existing
   `[data-theme="dark"] .pkp_brand_footer img` rule). */
.pkp_brand_footer img,
#pkpFooter .pkp_brand_footer img {
    filter: saturate(0) brightness(0.4) !important;
    opacity: 0.7 !important;
}

/* Journal listing — titles + descriptions on /index/index */
.has_journal_thumbnails .journal h2 a,
.has_journal_thumbnails .journal .title a,
.journal .title a,
.journal h2 a,
#journalDescription a,
.journal_description a {
    color: var(--accent) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 0.18em !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
}
.journal .title a:hover,
.journal h2 a:hover {
    color: var(--link-hover) !important;
}

/* Moon icon — was outline-only (fill:none) which at
   17 px on a cream strip read as an empty box. Fill
   the crescent with currentColor so it shows. The sun
   keeps the outline rendering (it's a circle + rays,
   needs stroke). */
#theme-toggle .t-moon,
button.theme-toggle-btn .t-moon {
    fill: currentColor !important;
    stroke: none !important;
}


/* ==================================================
   PRINT
   ================================================== */

@media print {
    body {
        background: #ffffff;
        color: #1c1a16;
        text-shadow: none !important;       /* disable the stroke-thickening
                                                trick on physical ink — print
                                                doesn't need it and rendering
                                                may smear at high DPI.        */
    }

    .WordSection1,
    body > div:last-of-type {
        box-shadow: none;
        background: #ffffff;
        max-width: none;
        padding: 0;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    .footnote-tooltip,
    .references-toggle-btn,
    nav,
    body > header,
    body > footer,
    .pkp_structure_head,
    .pkp_structure_footer {
        display: none !important;
    }
}


/* ==================================================
   CDP FIX (2026-07-14): article-page masthead shrinks & drops search
   --------------------------------------------------
   On CDP article pages (body.pkp_page_article.pkp_op_view) the whole page
   was squeezed to a 210mm column, so the navbar lost its search box on the
   right. Cause: the galley footnote-paper rule
       body.pkp_page_article.pkp_op_view > div:last-of-type { max-width:210mm; ... }
   also matches `.pkp_structure_page` (the page wrapper) on the article
   LANDING page, plus the body `max-width:960px` galley-widener. Together
   they cap the masthead. Undo both on the page wrapper so the header spans
   full width and the search returns to its normal position — matching the
   issue page. Scoped to CDP only (this file loads on journal 4 / CDP).
   The article reading column is preserved by .pkp_structure_content and,
   in the HTML galley, by .WordSection1 (210mm), which are untouched.
   ================================================== */
body.pkp_page_article.pkp_op_view {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.pkp_page_article.pkp_op_view > .pkp_structure_page {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ==================================================
   CDP FIX (2026-07-14): main column overruns the right sidebar
   --------------------------------------------------
   On CDP pages with the default OJS sidebar (the "Language" block), the
   layout is float-based: .pkp_structure_main floats left, the 300px
   .pkp_structure_sidebar floats right, inside .pkp_structure_content.
   The shared re-skin caps .pkp_structure_main at 1140px (the same width as
   the content wrapper). With a sidebar present, main (~860px) + sidebar
   (300px) exceed the content width, so main floats UNDER the sidebar:
     - the issue-TOC page numbers (right-aligned to main's edge) land in
       the sidebar zone, and
     - main's right-edge divider rule (.pkp_structure_main::after) cuts
       through the Language block.
   Fix: when a sidebar is present, give main an explicit width that leaves
   room for the 300px sidebar plus a 40px gutter. Scoped to CDP (this file
   loads on journal 4 only); Studia is untouched (its issue pages use the
   custom two-pane #subb-toc TOC, not this default sidebar).
   ================================================== */
.pkp_structure_content.has_sidebar .pkp_structure_main {
    max-width: none !important;
    width: calc(100% - 230px) !important;   /* 190px sidebar + 40px gutter */
}

/* The default sidebar holds only the tiny EN / Română language switch, so
   the theme's 300px column reads as a big empty rail next to the TOC.
   Slim it to 190px so it's proportional to the main text block; the main
   column above widens to match (calc keeps a 40px gutter between them). */
.pkp_structure_content.has_sidebar .pkp_structure_sidebar {
    width: 190px !important;
}


/* ==================================================
   CDP FIX (2026-07-14): nav search box rides high
   --------------------------------------------------
   The desktop search input is position:absolute; top:0 inside its form,
   so it pins to the top of the nav band instead of centering — it sits
   ~8px above the menu items (CURRENT / ALL ISSUES / ...). Stretch the form
   to the nav's full height and vertically center the input.
   ================================================== */
.pkp_search.pkp_search_desktop {
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
}

.pkp_search.pkp_search_desktop input[name="query"] {
    top: 50% !important;
    transform: translateY(-50%) !important;
}