@charset "UTF-8";
/* ==========================================================================
   theme9 — Meridian
   Premium academic publishing theme for Journal Manager.

   Single custom stylesheet. Loaded after Bootstrap 5 (LTR or RTL build).
   One unified sheet serves both writing directions: layout uses CSS logical
   properties, so nothing needs mirroring by hand.

   SECTIONS
     1.  Design tokens
     2.  Reset & base
     3.  Typography
     4.  Layout
     5.  Header
     6.  Navigation
     7.  Components
     8.  Forms
     9.  Footer
     10. RTL / LTR handling
     11. Responsive (mobile-first)
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

/* --- Webfonts -----------------------------------------------------------
   The typeface is chosen in Journal settings -> theme options (LTR font
   name / RTL font name). The header loads the matching sheet from
   public/css/, which defines the families 'ltr-font' and 'rtl-font'. The
   theme names those families rather than any specific typeface, so the
   operator's choice applies without touching this file. */

:root {
  /* ── Specified palette ───────────────────────────────────────────────
     These twelve values are the contract. Everything else in this file
     derives from them, so a palette change means editing only this block. */
  --color-primary:        #0d5c58;
  --color-primary-dark:   #0a4a47;
  --color-primary-darker: #073a38;
  --color-accent-gold:    #f0d48a;
  --color-heading:        #0b3b39;
  --color-body:           #24312f;
  --color-link:           #0e7c6b;
  --color-link-hover:     #0a5f52;
  --color-bg:             #f3f7f6;
  --color-surface:        #ffffff;
  --color-border:         #dce7e5;
  --color-footer-bg:      #0b1f2a;
  --color-footer-text:    #c7d5d3;
  --color-menu-text:      #f1f7f6;   /* admin: Menu link color */

  /* Brand ramp, derived from the palette */
  --m-brand-900: var(--color-primary-darker);
  --m-brand-800: var(--color-primary-dark);
  --m-brand-700: var(--color-primary);
  --m-brand-600: var(--color-link);
  --m-brand-100: #e4f1ef;

  /* Accent */
  --m-accent:       var(--color-link);
  --m-accent-hover: var(--color-link-hover);
  --m-accent-light: #e8f4f1;
  --m-gold:         var(--color-accent-gold);

  /* Neutrals */
  --m-white:    var(--color-surface);
  --m-gray-50:  var(--color-bg);
  --m-gray-100: #e9f0ef;
  --m-gray-200: var(--color-border);
  --m-gray-400: #7d908d;
  --m-gray-600: #4a5c59;
  --m-gray-900: var(--color-body);

  /* Semantic aliases */
  --m-body-bg:     var(--color-bg);
  --m-surface:     var(--color-surface);
  --m-text:        var(--color-body);
  --m-heading:     var(--color-heading);
  --m-text-muted:  var(--m-gray-600);
  --m-text-subtle: var(--m-gray-400);
  --m-border:      var(--color-border);
  --m-link:        var(--color-link);
  --m-link-hover:  var(--color-link-hover);

  /* Section gradients (article card banners) */
  --m-grad-1: linear-gradient(135deg, #0a4a47 0%, #0d5c58 100%);
  --m-grad-2: linear-gradient(135deg, #073a38 0%, #0e7c6b 100%);
  --m-grad-3: linear-gradient(135deg, #0d5c58 0%, #14867a 100%);
  --m-grad-4: linear-gradient(135deg, #0b3b39 0%, #0a5f52 100%);

  /* Typography */
  --m-font-body: 'ltr-font', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --m-font-display: 'ltr-font', Georgia, 'Times New Roman', serif;
  --m-fs-xs:  0.75rem;
  --m-fs-sm:  0.85rem;
  --m-fs-base: 1rem;
  --m-fs-lg:  1.2rem;
  --m-fs-xl:  1.5rem;
  --m-fs-2xl: 1.875rem;
  --m-lh-body: 1.7;
  --m-lh-tight: 1.3;
  --m-tracking-wide: 0.08em;

  /* Spacing scale */
  --m-space-xs:  4px;
  --m-space-sm:  8px;
  --m-space-md:  16px;
  --m-space-lg:  24px;
  --m-space-xl:  40px;
  --m-space-2xl: 60px;

  /* Radii & elevation */
  --m-radius:    4px;
  --m-radius-lg: 8px;
  --m-shadow:       0 1px 4px rgba(0, 0, 0, 0.08);
  --m-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.14);
  --m-shadow-nav:   0 2px 12px rgba(0, 0, 0, 0.18);

  /* Layout */
  --m-container: 1200px;
  --m-gutter: 16px;
  --m-zone-utility: 40px;
  --m-zone-nav: 50px;

  /* Motion */
  --m-transition: 0.18s ease;

  /* Bootstrap variable bridge — makes every Bootstrap component
     adopt the design system without per-component overrides. */
  --bs-primary: var(--m-brand-800);
  --bs-primary-rgb: 13, 92, 88;
  --bs-body-bg: var(--m-body-bg);
  --bs-body-color: var(--m-text);
  --bs-body-font-family: var(--m-font-body);
  --bs-body-line-height: var(--m-lh-body);
  --bs-border-color: var(--m-border);
  --bs-border-radius: var(--m-radius);
  --bs-link-color: var(--m-link);
  --bs-link-hover-color: var(--m-link-hover);
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--m-font-body);
  font-size: var(--m-fs-base);
  line-height: var(--m-lh-body);
  color: var(--m-text);
  background: var(--m-body-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

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

hr {
  border: 0;
  border-block-start: 1px solid var(--m-border);
  margin-block: var(--m-space-xl);
  opacity: 1;
}

/* Skip link — first focusable element on every page */
.m-skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--m-space-md);
  z-index: 9999;
  padding: var(--m-space-sm) var(--m-space-md);
  font-size: var(--m-fs-sm);
  font-weight: 600;
  color: var(--m-white);
  background: var(--m-accent);
  border-radius: 0 0 var(--m-radius) var(--m-radius);
  text-decoration: none;
  transition: inset-block-start 0.2s ease;
}
.m-skip-link:focus {
  inset-block-start: 0;
  color: var(--m-white);
  outline: none;
}

/* Visible focus for keyboard users everywhere */
:focus-visible {
  outline: 2px solid var(--m-accent);
  outline-offset: 2px;
}

.m-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--m-space-md);
  font-family: var(--m-font-display);
  font-weight: 700;
  line-height: var(--m-lh-tight);
  color: var(--m-heading);
}

h1 { font-size: var(--m-fs-2xl); }
h2 { font-size: var(--m-fs-xl); font-weight: 600; }
h3 { font-size: var(--m-fs-lg); font-weight: 600; line-height: 1.4; }
h4 { font-size: var(--m-fs-base); font-weight: 600; font-family: var(--m-font-body); }
h5 { font-size: 0.9rem; font-weight: 600; font-family: var(--m-font-body); }
h6 { font-size: var(--m-fs-sm); font-weight: 600; font-family: var(--m-font-body); }

p { margin: 0 0 var(--m-space-md); }
p:last-child { margin-block-end: 0; }

a {
  color: var(--m-link);
  text-decoration: none;
  transition: color var(--m-transition);
}
a:hover,
a:focus {
  color: var(--m-link-hover);
  text-decoration: underline;
}

strong, b { font-weight: 700; }
small { font-size: var(--m-fs-xs); }

blockquote {
  margin-block: var(--m-space-lg);
  padding: var(--m-space-md) var(--m-space-lg);
  border-inline-start: 3px solid var(--m-accent);
  background: var(--m-gray-100);
  color: var(--m-text-muted);
  font-style: italic;
}

code, pre, kbd, samp {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-size: 0.875em;
  background: var(--m-gray-100);
  border-radius: var(--m-radius);
}
code { padding: 2px 5px; }
pre {
  padding: var(--m-space-md);
  margin-block: var(--m-space-md);
  overflow-x: auto;
}

/* Latin numerals / identifiers inside RTL text (DOI, ISSN, dates) */
.ltr,
.m-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.m-container {
  width: 100%;
  max-width: var(--m-container);
  margin-inline: auto;
  padding-inline: var(--m-gutter);
}

/* Page shell — sticks the footer to the bottom on short pages */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#dv_main_cnt,
.m-main {
  flex: 1 0 auto;
  display: block;
}

.m-section {
  padding-block: var(--m-space-xl);
}
.m-section--tight { padding-block: var(--m-space-lg); }
.m-section--surface { background: var(--m-surface); }
.m-section--muted { background: var(--m-gray-100); }
.m-section--brand-tint { background: var(--m-brand-100); }

/* Two-column content + sidebar */
.m-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--m-space-lg);
  align-items: start;
}

/* Section heading bar — white on brand, accent rule on the inline start */
.m-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--m-space-sm);
  margin-block-end: var(--m-space-lg);
  padding-block-end: var(--m-space-md);
  border-block-end: 2px solid var(--m-brand-800);
}
.m-section-head__title {
  margin: 0;
  font-family: var(--m-font-display);
  font-size: var(--m-fs-xl);
  font-weight: 700;
  color: var(--m-brand-800);
}
.m-section-head__link {
  font-size: var(--m-fs-sm);
  font-weight: 600;
  color: var(--m-accent);
  white-space: nowrap;
}

/* Centered variant with an accent underline */
.m-section-head--center {
  display: block;
  text-align: center;
  border-block-end: 0;
}
.m-section-head--center .m-section-head__title {
  position: relative;
  display: inline-block;
  padding-block-end: 0.6rem;
}
.m-section-head--center .m-section-head__title::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  background: var(--m-accent);
}

/* Uppercase band used above grouped article lists */
.m-band {
  display: block;
  margin: 0 0 var(--m-space-lg);
  padding: var(--m-space-sm) var(--m-space-md);
  font-family: var(--m-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--m-white);
  background: var(--m-brand-700);
  border-inline-start: 4px solid var(--m-accent);
  border-radius: 0 var(--m-radius) var(--m-radius) 0;
}


/* ==========================================================================
   5. HEADER
   ========================================================================== */

.m-head {
  position: relative;
  z-index: 1030;
}
.m-head.is-sticky {
  position: sticky;
  inset-block-start: 0;
  box-shadow: var(--m-shadow-nav);
}

/* --- Zone 1: utility bar --- */
.m-utility {
  min-height: var(--m-zone-utility);
  display: flex;
  align-items: center;
  background: var(--color-primary-darker);
  color: rgba(255, 255, 255, 0.7);
}
.m-utility .m-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--m-space-md);
}
.m-utility__group {
  display: flex;
  align-items: center;
  gap: var(--m-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
.m-utility__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--m-space-sm);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
  border-radius: var(--m-radius);
  text-decoration: none;
  transition: color var(--m-transition), background var(--m-transition);
}
.m-utility__link:hover,
.m-utility__link:focus {
  color: var(--m-white);
  background: rgba(255, 255, 255, 0.1);
  text-decoration: none;
}

/* --- Zone 2: masthead --- */
.m-masthead {
  display: flex;
  align-items: center;
  background: var(--color-primary) center / cover no-repeat;
  border-block-end: 0;
}
.m-masthead .m-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--m-space-md);
  padding-block: var(--m-space-md);
}
/* The journal's own stylesheet (images/<journal>/stl_front.css) loads after
   this file and sets a blanket a{color}. Anchors sitting on the dark header
   or footer must therefore declare their own colour, or that global rule
   wins and puts mid-tone text on a dark ground. */
.m-masthead__brand {
  display: flex;
  align-items: center;
  gap: var(--m-space-md);
  min-width: 0;
  color: var(--color-accent-gold);
  text-decoration: none;
}
.m-masthead__brand:hover { text-decoration: none; }
.m-masthead__logo {
  flex-shrink: 0;
  max-height: 62px;
  width: auto;
}
.m-masthead__title {
  margin: 0;
  font-family: var(--m-font-display);
  font-size: var(--m-masthead-title, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-accent-gold);
  transition: color var(--m-transition);
}
.m-masthead__brand:hover .m-masthead__title { color: #fae6b8; }
.m-masthead__meta {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.02em;
}
.m-masthead__badge {
  flex-shrink: 0;
  padding: var(--m-space-sm) var(--m-space-md);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--m-radius);
  font-size: var(--m-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--m-tracking-wide);
  color: rgba(255, 255, 255, 0.85);
}

/* --- Accent rule between masthead and nav --- */
.m-accent-rule {
  height: 4px;
  background: var(--color-accent-gold);
}


/* ==========================================================================
   6. NAVIGATION
   ========================================================================== */

.m-nav {
  background: var(--color-primary-dark);
}
.m-nav .m-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--m-space-sm);
  flex-wrap: wrap;
  min-height: var(--m-zone-nav);
}

.m-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--m-space-sm);
  padding: 6px 12px;
  font-size: var(--m-fs-sm);
  font-weight: 600;
  color: var(--color-menu-text);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--m-radius);
  cursor: pointer;
  transition: background var(--m-transition);
}
.m-nav__toggle:hover { background: rgba(255, 255, 255, 0.12); }

/* Menu — a stacked drawer on small screens, a bar from lg up (section 11) */
.m-nav__menu {
  display: none;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: var(--m-space-sm) 0;
  list-style: none;
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
}
.m-nav__menu.is-open { display: flex; }

.m-nav__item { position: relative; }

.m-nav__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--m-space-sm) var(--m-space-md);
  font-size: var(--m-fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-menu-text);
  text-decoration: none;
  border-inline-start: 3px solid transparent;
  transition: color var(--m-transition), background var(--m-transition),
              border-color var(--m-transition);
}
.m-nav__link:hover,
.m-nav__link:focus {
  color: var(--color-menu-text);
  background: var(--color-primary-darker);
  border-inline-start-color: var(--color-accent-gold);
  text-decoration: none;
}
.m-nav__item.is-current > .m-nav__link {
  color: var(--color-accent-gold);
  border-inline-start-color: var(--color-accent-gold);
}
.m-nav__caret {
  font-size: 0.7em;
  opacity: 0.75;
  transition: transform var(--m-transition);
}
.m-nav__item.is-open > .m-nav__link .m-nav__caret { transform: rotate(180deg); }

/* Dropdown */
.m-nav__sub {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
  background: rgba(0, 0, 0, 0.16);
}
.m-nav__item.is-open > .m-nav__sub { display: block; }
.m-nav__sublink {
  display: block;
  padding: var(--m-space-sm) var(--m-space-md) var(--m-space-sm) var(--m-space-xl);
  padding-inline: var(--m-space-xl) var(--m-space-md);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: background var(--m-transition), color var(--m-transition);
}
.m-nav__sublink:hover,
.m-nav__sublink:focus {
  color: var(--m-white);
  background: rgba(255, 255, 255, 0.1);
  text-decoration: none;
}

.m-nav__search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--m-space-sm);
  font-size: 1rem;
  color: var(--color-menu-text);
  background: none;
  border: 0;
  border-radius: var(--m-radius);
  cursor: pointer;
  transition: color var(--m-transition), background var(--m-transition);
}
.m-nav__search:hover,
.m-nav__search:focus {
  color: var(--m-white);
  background: rgba(255, 255, 255, 0.12);
}

/* --- Search overlay --- */
.m-search-overlay {
  display: none;
  background: var(--color-primary-darker);
  padding-block: var(--m-space-lg);
}
.m-search-overlay.is-open { display: block; }
.m-search-overlay__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--m-space-sm);
}
.m-search-overlay__input {
  flex: 1 1 240px;
  min-width: 0;
}
.m-search-overlay__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--m-space-md);
  margin-block-start: var(--m-space-sm);
}
.m-search-overlay__meta a { color: rgba(255, 255, 255, 0.75); font-size: var(--m-fs-sm); }
.m-search-overlay__meta a:hover { color: var(--m-white); }
.m-search-overlay__close {
  color: rgba(255, 255, 255, 0.75);
  background: none;
  border: 0;
  font-size: 1.1rem;
  cursor: pointer;
  padding: var(--m-space-xs);
}
.m-search-overlay__close:hover { color: var(--m-white); }

/* Breadcrumb */
.m-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m-space-sm);
  margin: 0;
  padding: var(--m-space-sm) 0;
  list-style: none;
  font-size: var(--m-fs-sm);
  color: var(--m-text-muted);
}
.m-crumbs li + li::before {
  content: "›";
  margin-inline-end: var(--m-space-sm);
  color: var(--m-text-subtle);
}


/* ==========================================================================
   7. COMPONENTS
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------ */
.m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--m-space-sm);
  padding: 10px var(--m-space-lg);
  font-family: var(--m-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  border: 0;
  border-radius: var(--m-radius);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--m-transition), color var(--m-transition),
              box-shadow var(--m-transition);
}
.m-btn:hover,
.m-btn:focus { text-decoration: none; }

.m-btn--primary { background: var(--m-accent); color: var(--m-white); }
.m-btn--primary:hover,
.m-btn--primary:focus {
  background: var(--m-accent-hover);
  color: var(--m-white);
  box-shadow: 0 3px 10px rgba(197, 90, 17, 0.35);
}

.m-btn--brand { background: var(--m-brand-800); color: var(--m-white); }
.m-btn--brand:hover,
.m-btn--brand:focus { background: var(--m-brand-700); color: var(--m-white); }

.m-btn--outline {
  background: transparent;
  color: var(--m-brand-800);
  box-shadow: inset 0 0 0 2px var(--m-brand-800);
}
.m-btn--outline:hover,
.m-btn--outline:focus { background: var(--m-brand-800); color: var(--m-white); }

.m-btn--sm { padding: 6px var(--m-space-md); font-size: var(--m-fs-xs); }
.m-btn--block { width: 100%; }

/* Bootstrap button alignment with the design system */
.btn { border-radius: var(--m-radius); font-weight: 600; }
.btn-primary {
  --bs-btn-bg: var(--m-brand-800);
  --bs-btn-border-color: var(--m-brand-800);
  --bs-btn-hover-bg: var(--m-brand-700);
  --bs-btn-hover-border-color: var(--m-brand-700);
  --bs-btn-active-bg: var(--m-brand-900);
  --bs-btn-active-border-color: var(--m-brand-900);
}

/* --- Cards -------------------------------------------------------------- */
.m-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
  overflow: hidden;
  transition: transform var(--m-transition), box-shadow var(--m-transition);
}
.m-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--m-shadow-hover);
}

.m-card__banner {
  display: block;
  height: 140px;
  flex-shrink: 0;
  background: var(--m-grad-1) center / cover no-repeat;
  transition: opacity var(--m-transition);
}
.m-card:hover .m-card__banner { opacity: 0.92; }

.m-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--m-space-sm);
  padding: var(--m-space-lg);
}

.m-card__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--m-tracking-wide);
  color: var(--m-accent);
}

.m-card__title {
  margin: 0;
  font-family: var(--m-font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--m-text);
}
.m-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--m-transition);
}
.m-card:hover .m-card__title a { color: var(--m-accent); }

.m-card__authors {
  margin: 0;
  font-size: 0.8rem;
  color: var(--m-text-muted);
}

.m-card__excerpt {
  flex: 1;
  margin: 0;
  font-size: var(--m-fs-sm);
  line-height: 1.6;
  color: var(--m-text-muted);
}

/* Line clamping — degrades to plain overflow where unsupported */
.m-clamp-2,
.m-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.m-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.m-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

.m-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--m-space-sm);
  margin-block-start: auto;
  padding-block-start: var(--m-space-sm);
  border-block-start: 1px solid var(--m-border);
}
.m-card__date { font-size: var(--m-fs-xs); color: var(--m-text-subtle); }
.m-card__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--m-accent);
}

/* Galley / file links rendered as compact chips */
.m-files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m-space-xs);
  margin: var(--m-space-sm) 0 0;
  padding: 0;
  list-style: none;
}
.m-files a,
.m-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--m-white);
  background: var(--m-brand-800);
  border-radius: var(--m-radius);
  text-decoration: none;
  transition: background var(--m-transition);
}
.m-files a:hover,
.m-file-chip:hover {
  background: var(--m-brand-700);
  color: var(--m-white);
  text-decoration: none;
}

/* Grid of cards */
.m-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--m-space-lg);
}

/* --- Article list rows (dense listing variant) -------------------------- */
.m-article-row {
  padding-block: var(--m-space-md);
  border-block-end: 1px solid var(--m-border);
}
.m-article-row:last-child { border-block-end: 0; }
.m-article-row__title {
  margin: 0 0 var(--m-space-xs);
  font-family: var(--m-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
}
.m-article-row__title a { color: var(--m-text); }
.m-article-row__title a:hover { color: var(--m-accent); text-decoration: none; }
.m-article-row__meta {
  font-size: var(--m-fs-sm);
  color: var(--m-text-muted);
}
/* Abstract preview — two lines is enough to judge relevance without the row
   becoming a wall of text in a twelve-article listing. */
.m-article-row__abstract {
  margin: var(--m-space-sm) 0;
  max-width: 92ch;
  font-size: var(--m-fs-sm);
  line-height: 1.65;
  color: var(--m-text-muted);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Hero (current issue) ----------------------------------------------- */
.m-hero {
  background: var(--m-surface);
  border-block-end: 1px solid var(--m-border);
  padding-block: var(--m-space-xl);
}
.m-hero__layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--m-space-lg);
}
.m-hero__cover { flex-shrink: 0; width: 180px; }
.m-hero__cover img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--m-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.m-cover-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--m-space-sm);
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: var(--m-space-lg);
  text-align: center;
  color: var(--m-white);
  background: var(--m-grad-1);
  border-radius: var(--m-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.m-cover-placeholder__label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.75;
}
.m-cover-placeholder__number {
  font-family: var(--m-font-display);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
}
.m-cover-placeholder__year { font-size: 0.95rem; opacity: 0.85; }

.m-hero__body { flex: 1; min-width: 0; text-align: center; }
.m-hero__eyebrow {
  margin-block-end: var(--m-space-sm);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--m-accent);
}
.m-hero__title {
  margin-block-end: var(--m-space-md);
  font-size: 1.4rem;
  line-height: 1.25;
}
.m-hero__desc {
  margin-block-end: var(--m-space-md);
  color: var(--m-text-muted);
  max-width: 62ch;
}
.m-hero__date {
  margin-block-end: var(--m-space-lg);
  font-size: var(--m-fs-sm);
  color: var(--m-text-subtle);
}

/* --- Sidebar blocks ----------------------------------------------------- */
.m-block {
  margin-block-end: var(--m-space-lg);
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
  overflow: hidden;
}
.m-block__title {
  display: flex;
  align-items: center;
  gap: var(--m-space-sm);
  margin: 0;
  padding: var(--m-space-sm) var(--m-space-md);
  font-family: var(--m-font-body);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--m-white);
  background: var(--m-brand-800);
}
.m-block__body { padding: var(--m-space-md); }
.m-block__body > :last-child { margin-block-end: 0; }

.m-block__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.m-block__list li {
  padding-block: var(--m-space-sm);
  border-block-end: 1px solid var(--m-border);
}
.m-block__list li:last-child { border-block-end: 0; }
.m-block__list a {
  display: block;
  font-size: 0.875rem;
  color: var(--m-text);
  transition: color var(--m-transition), padding-inline-start var(--m-transition);
}
.m-block__list a:hover,
.m-block__list a:focus {
  color: var(--m-accent);
  padding-inline-start: 4px;
  text-decoration: none;
}

/* Definition rows inside sidebar blocks (ISSN, frequency…) */
.m-defs { margin: 0; }
.m-defs__row {
  display: flex;
  justify-content: space-between;
  gap: var(--m-space-sm);
  padding-block: 5px;
  font-size: 0.875rem;
}
.m-defs__key { font-weight: 600; color: var(--m-text); }
.m-defs__val { color: var(--m-text-muted); text-align: end; }

/* --- Badges & chips ----------------------------------------------------- */
.m-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--m-white);
  background: var(--m-brand-800);
  border-radius: 3px;
  white-space: nowrap;
}
.m-badge--accent { background: var(--m-accent); }
.m-badge--muted { background: var(--m-gray-100); color: var(--m-text-muted); }
.m-badge--outline {
  background: transparent;
  color: var(--m-brand-800);
  box-shadow: inset 0 0 0 1px var(--m-border);
}

/* --- Keyword cloud ------------------------------------------------------ */
.m-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--m-space-xs) var(--m-space-md);
  max-width: 1000px;
  margin-inline: auto;
  line-height: 1.7;
}
/* Rendered as tag pills rather than scaled text: uniform hit areas are
   easier to click and to read, and weight alone still conveys prominence. */
.m-cloud a,
.m-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-primary);
  background: var(--m-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  text-decoration: none;
  transition: background var(--m-transition), color var(--m-transition),
              border-color var(--m-transition);
}
.m-cloud a:hover,
.m-cloud a:focus,
.m-tag:hover,
.m-tag:focus {
  color: var(--m-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
  text-decoration: none;
}
.m-cloud__w1 { font-size: 0.78rem; }
.m-cloud__w2 { font-size: 0.85rem; }
.m-cloud__w3 { font-size: 0.92rem; }
.m-cloud__w4 { font-size: 1rem; }
.m-cloud__w5 { font-size: 1.1rem; background: var(--m-accent-light); }

/* --- Related journals --------------------------------------------------- */
/* Same pure-CSS marquee as the news strip: no JavaScript dependency, the
   travel distance derived from the track's own width against the viewport,
   and motion suppressed entirely under prefers-reduced-motion. */
.m-related-mq {
  width: 100%;
  max-width: var(--m-container);
  margin-inline: auto;
  padding-inline: var(--m-gutter);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
.m-related-mq__track {
  display: flex;
  width: max-content;
  padding-block: 6px;
  will-change: transform;
  /* linear, not ease-in-out: with `alternate` an eased curve comes to a dead
     stop at each end and lingers there, which over this duration reads as no
     motion at all. */
  animation: m-related-marquee 28s linear infinite alternate;
}
.m-related-mq__track > .m-related__item { margin-inline-end: var(--m-space-lg); }
.m-related-mq:hover .m-related-mq__track,
.m-related-mq:focus-within .m-related-mq__track { animation-play-state: paused; }
@keyframes m-related-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* transform is physical, so the travel has to be mirrored by hand. In RTL the
   flex track hangs from the container's right edge and overflows to the left,
   so it must travel right to pull that content into view — translating left
   would drift into empty space. */
@keyframes m-related-marquee-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}
[dir="rtl"] .m-related-mq__track { animation-name: m-related-marquee-rtl; }
.m-related-mq .m-related__item { flex: 0 0 158px; width: 158px; }

.m-related {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--m-space-lg) var(--m-space-md);
}
.m-related__item { display: block; text-align: center; text-decoration: none;
  color: var(--m-heading); }
.m-related__item:hover { text-decoration: none; }
/* These are spans, so they need an explicit display: aspect-ratio has no
   effect on a non-replaced inline box, which collapsed the cover to zero
   height and painted nothing regardless of the image attached to it. */
.m-related__cover {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  min-height: 120px;
  border-radius: var(--m-radius);
  background: var(--m-grad-4) center / cover no-repeat;
  box-shadow: 0 4px 12px rgba(0, 26, 58, 0.15);
  transition: transform var(--m-transition), box-shadow var(--m-transition);
}
.m-related__item:hover .m-related__cover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(0, 26, 58, 0.24);
}
.m-related__name {
  display: block;
  margin-block-start: var(--m-space-sm);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--m-brand-800);
}

/* --- Article detail ----------------------------------------------------- */
.m-article-detail {
  padding: var(--m-space-lg);
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
}
.m-article-detail__title {
  margin-block-end: var(--m-space-md);
  font-size: 1.35rem;
  line-height: 1.35;
  overflow-wrap: break-word;
}
.m-article-detail .abstract,
.m-article-detail .article-container {
  padding-inline-start: var(--m-space-md);
  border-inline-start: 4px solid var(--m-accent);
}

/* --- Inherited page shells ---------------------------------------------- */
/* Pages carried over from the base theme open a Bootstrap container rather
   than .m-container. Constraining them here keeps every route on the same
   measure without editing ~50 templates. */
.m-main > .container,
.m-main > .container-fluid,
.m-main > [id="dv_main_cnt"] {
  width: 100%;
  max-width: var(--m-container);
  margin-inline: auto;
  padding-inline: var(--m-gutter);
}
.m-main > [id="dv_main_cnt"] > .bg-white {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
  margin-block: var(--m-space-lg);
}

/* --- Pills / feature badges (About the Journal) -------------------------- */
.m-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m-space-sm);
  margin: var(--m-space-md) 0 0;
  padding: 0;
  list-style: none;
}
.m-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--m-accent-light);
  border: 1px solid var(--color-border);
  border-radius: 999px;
}
.m-pill i { color: var(--color-link); }

/* --- Definition list card (Journal Information) -------------------------- */
.m-deflist {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.m-deflist__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--m-space-sm);
  padding-block: 10px;
  border-block-end: 1px solid var(--color-border);
}
.m-deflist__row:last-child { border-block-end: 0; }
.m-deflist__key {
  flex: 0 0 auto;
  min-width: 132px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--m-text-subtle);
}
.m-deflist__val {
  flex: 1 1 60%;
  font-size: 0.92rem;
  color: var(--m-text);
}

/* --- News & announcement cards ------------------------------------------ */
.m-news-card {
  display: flex;
  flex-direction: column;
  gap: var(--m-space-sm);
  padding: var(--m-space-lg);
  background: var(--m-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
  transition: transform var(--m-transition), box-shadow var(--m-transition);
}
.m-news-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--m-shadow-hover);
}
.m-news-card__date {
  align-self: flex-start;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--m-white);
  background: var(--color-primary);
  border-radius: 3px;
}
.m-news-card__title {
  margin: 0;
  font-family: var(--m-font-display);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
}
.m-news-card__title a { color: var(--m-heading); text-decoration: none; }
.m-news-card:hover .m-news-card__title a { color: var(--color-link); }
.m-news-card__excerpt {
  flex: 1;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--m-text-muted);
}
.m-news-card__more {
  margin-block-start: auto;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-link);
}

/* --- Prose (About page body copy) --------------------------------------- */
.m-prose { max-width: 78ch; }
.m-prose > :first-child { margin-block-start: 0; }
.m-prose h2, .m-prose h3 { margin-block-start: var(--m-space-xl); }
.m-prose ul, .m-prose ol { padding-inline-start: var(--m-space-xl); }

/* --- Bootstrap component harmonisation ---------------------------------- */
/* The inherited templates lean on Bootstrap primitives; these rules bring
   them into the design system without touching their markup. */
.card {
  border-color: var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
}
.card-header {
  background: var(--m-gray-100);
  border-block-end: 1px solid var(--m-border);
  font-weight: 600;
}
.accordion {
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(15, 79, 74, 0.18);
  --bs-accordion-active-bg: var(--m-gray-100);
  --bs-accordion-active-color: var(--m-brand-800);
  --bs-accordion-border-color: var(--m-border);
  --bs-accordion-btn-padding-y: 0.65rem;
}
.accordion-button { font-weight: 600; }
.accordion-button:not(.collapsed) { box-shadow: none; }
.accordion-button.hid_ac_ico::after { display: none; }

.list-group-item { border-color: var(--m-border); }

.table { --bs-table-border-color: var(--m-border); }
.table > thead {
  background: var(--m-brand-800);
  color: var(--m-white);
}
.table > thead th {
  font-family: var(--m-font-body);
  font-size: var(--m-fs-sm);
  font-weight: 600;
  border-color: transparent;
}

.pagination {
  --bs-pagination-color: var(--m-brand-800);
  --bs-pagination-border-color: var(--m-border);
  --bs-pagination-hover-bg: var(--m-brand-800);
  --bs-pagination-hover-color: var(--m-white);
  --bs-pagination-hover-border-color: var(--m-brand-800);
  --bs-pagination-active-bg: var(--m-accent);
  --bs-pagination-active-border-color: var(--m-accent);
  --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(197, 90, 17, 0.25);
  --bs-pagination-border-radius: var(--m-radius);
  gap: var(--m-space-xs);
  flex-wrap: wrap;
}

.alert { border-radius: var(--m-radius); border-inline-start-width: 4px; }
.badge { font-weight: 600; }
.nav-tabs { --bs-nav-tabs-link-active-color: var(--m-brand-800); }

/* Divider used by inherited templates */
.divider {
  height: 1px;
  margin-block: var(--m-space-lg);
  background: var(--m-border);
}
.divider-dotted {
  height: 0;
  background: none;
  border-block-start: 1px dotted var(--m-border);
}

/* Back-to-top */
#back-to-up {
  inset-inline-end: var(--m-space-lg);
  inset-block-end: var(--m-space-lg);
  inset-inline-start: auto;
  transform: none;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  padding: 0;
}


/* ==========================================================================
   8. FORMS
   ========================================================================== */

label {
  display: block;
  margin-block-end: var(--m-space-xs);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--m-text);
}

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
  font-family: var(--m-font-body);
  font-size: 0.9rem;
  color: var(--m-text);
  background-color: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  padding: 9px var(--m-space-md);
  transition: border-color var(--m-transition), box-shadow var(--m-transition);
}

.form-control:focus,
.form-select:focus,
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,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--m-brand-600);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.18);
}

.form-control::placeholder { color: var(--m-text-subtle); }

textarea { resize: vertical; min-height: 120px; }

.input-group-text {
  background: var(--m-gray-100);
  border-color: var(--m-border);
  color: var(--m-text-muted);
}

/* Search form used across browse/search pages */
.m-searchbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m-space-sm);
}
.m-searchbar__field { flex: 1 1 220px; min-width: 0; }

/* Validation states */
.is-invalid,
.form-control.is-invalid { border-color: #c53030; }
.m-form-error {
  margin-block-start: var(--m-space-xs);
  font-size: var(--m-fs-sm);
  color: #c53030;
}

/* Select2 harmonisation (vendored, used by advanced search) */
.select2-container--bootstrap .select2-selection {
  border-color: var(--m-border);
  border-radius: var(--m-radius);
}


/* ==========================================================================
   9. FOOTER
   ========================================================================== */

.m-footer {
  flex-shrink: 0;
  margin-block-start: var(--m-space-xl);
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
}

.m-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--m-space-lg);
  padding-block: var(--m-space-xl);
}

.m-footer__col h2,
.m-footer__col h3,
.m-footer__heading {
  margin-block-end: var(--m-space-md);
  padding-block-end: var(--m-space-sm);
  font-family: var(--m-font-body);
  font-size: var(--m-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
  border-block-end: 1px solid rgba(255, 255, 255, 0.12);
}

.m-footer__brand-name {
  display: block;
  margin-block-end: var(--m-space-sm);
  font-family: var(--m-font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--m-white);
  text-decoration: none;
}
.m-footer__brand-name:hover { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.m-footer__brand-meta {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  margin-block-end: var(--m-space-xs);
}

.m-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.m-footer__list li { margin-block-end: var(--m-space-sm); }
.m-footer__list a,
.m-footer a {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color var(--m-transition);
}
.m-footer__list a:hover,
.m-footer a:hover,
.m-footer a:focus { color: var(--m-white); text-decoration: none; }

.m-footer__news-date {
  display: block;
  font-size: var(--m-fs-xs);
  color: rgba(255, 255, 255, 0.4);
}

/* "More" button under the footer news teaser */
.m-footer__more {
  display: inline-flex;
  align-items: center;
  gap: var(--m-space-sm);
  margin-block-start: var(--m-space-sm);
  padding: 7px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-footer-text);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--m-radius);
  text-decoration: none;
  transition: background var(--m-transition), border-color var(--m-transition),
              color var(--m-transition);
}
.m-footer__more:hover,
.m-footer__more:focus {
  color: var(--m-white);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
}
.m-footer__more i { font-size: 0.72em; }

/* Newsletter */
.m-footer__form { margin-block-start: var(--m-space-lg); }
.m-footer__form .form-control {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--m-white);
}
.m-footer__form .form-control::placeholder { color: rgba(255, 255, 255, 0.45); }
.m-footer__form .form-control:focus {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--m-accent);
  box-shadow: 0 0 0 3px rgba(197, 90, 17, 0.25);
}
.m-footer__form .input-group-text {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.6);
}

/* Social icons */
.m-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m-space-sm);
  margin: var(--m-space-md) 0 0;
  padding: 0;
  list-style: none;
}
.m-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--m-radius);
  transition: background var(--m-transition), color var(--m-transition);
}
.m-social a:hover,
.m-social a:focus {
  color: var(--m-white);
  background: var(--m-accent);
}
.m-social img { width: 20px; height: 20px; }

/* Bottom bar */
.m-footer__bottom {
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
}
.m-footer__bottom .m-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--m-space-sm);
  padding-block: var(--m-space-md);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
}

/* Cookie notice injected by app.js */
#cookie_elm { color: inherit; }


/* ==========================================================================
   10. RTL / LTR HANDLING
   ========================================================================== */

/* Layout mirroring is handled by logical properties throughout this sheet,
   so this section only covers what direction alone cannot: the typeface,
   and the few glyphs that must physically flip. */

[dir="rtl"] {
  --m-font-body: 'rtl-font', Tahoma, Arial, sans-serif;
  --m-font-display: 'rtl-font', Tahoma, Arial, sans-serif;
  --bs-body-font-family: var(--m-font-body);
}

/* Persian and Arabic do not take letter-spacing */
[dir="rtl"] .m-nav__link,
[dir="rtl"] .m-band,
[dir="rtl"] .m-badge,
[dir="rtl"] .m-masthead__badge,
[dir="rtl"] .m-card__eyebrow,
[dir="rtl"] .m-hero__eyebrow,
[dir="rtl"] .m-footer__heading,
[dir="rtl"] .m-block__title,
[dir="rtl"] .m-footer__col h2,
[dir="rtl"] .m-footer__col h3 {
  letter-spacing: 0;
}

/* RTL sets slightly looser leading for legibility at the same size */
[dir="rtl"] body { line-height: 1.85; }

/* Directional glyphs: arrows and chevrons mirror, everything else does not */
[dir="rtl"] .m-card__more .fa-arrow-right,
[dir="rtl"] .m-icon-flip {
  transform: scaleX(-1);
}


/* ==========================================================================
   11. RESPONSIVE (mobile-first)
   ========================================================================== */

/* --- ≥576px : small tablets --------------------------------------------- */
@media (min-width: 576px) {
  :root { --m-gutter: 20px; }

  .m-hero__title { font-size: 1.6rem; }
  .m-grid { grid-template-columns: repeat(2, 1fr); }
  .m-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .m-footer__col--brand { grid-column: 1 / -1; }
}

/* --- ≥768px : tablets ---------------------------------------------------- */
@media (min-width: 768px) {
  .m-masthead__title { font-size: 1.75rem; }

  .m-hero { padding-block: var(--m-space-2xl); }
  .m-hero__layout {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--m-space-xl);
  }
  .m-hero__cover { width: 220px; }
  .m-hero__body { text-align: start; }
  .m-hero__title { font-size: 1.75rem; }

  .m-section { padding-block: var(--m-space-2xl); }
  .m-related { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* --- ≥992px : desktop — the nav becomes a horizontal bar ----------------- */
@media (min-width: 992px) {
  :root { --m-gutter: 24px; }

  .m-masthead__title { font-size: 2rem; }

  .m-nav .m-container { flex-wrap: nowrap; }
  .m-nav__toggle { display: none; }

  .m-nav__menu {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: auto;
    padding: 0;
    border-block-start: 0;
    min-height: var(--m-zone-nav);
  }
  .m-nav__link {
    height: 100%;
    padding-inline: var(--m-space-md);
    border-inline-start: 0;
    border-block-end: 3px solid transparent;
  }
  .m-nav__link:hover,
  .m-nav__link:focus { border-inline-start: 0; }
  .m-nav__item.is-current > .m-nav__link {
    border-inline-start: 0;
    border-block-end-color: var(--m-accent);
  }

  .m-nav__sub {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    min-width: 230px;
    padding-block: var(--m-space-sm);
    background: var(--m-surface);
    border-inline-start: 3px solid var(--m-brand-700);
    border-radius: 0 0 var(--m-radius) var(--m-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    z-index: 200;
  }
  .m-nav__sublink {
    padding-inline: var(--m-space-lg);
    color: var(--m-text);
  }
  .m-nav__sublink:hover,
  .m-nav__sublink:focus {
    color: var(--m-brand-800);
    background: var(--m-gray-100);
  }

  .m-hero__cover { width: 240px; }

  .m-grid { grid-template-columns: repeat(3, 1fr); }
  .m-grid--2 { grid-template-columns: repeat(2, 1fr); }

  .m-layout--sidebar-end { grid-template-columns: minmax(0, 1fr) 300px; }
  .m-layout--sidebar-start { grid-template-columns: 300px minmax(0, 1fr); }
  .m-layout--three { grid-template-columns: 280px minmax(0, 1fr) 300px; }

  .m-footer__grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; }
  .m-footer__col--brand { grid-column: auto; }

  .m-card__banner { height: 160px; }
}

/* --- ≥1200px : wide ------------------------------------------------------ */
@media (min-width: 1200px) {
  .m-hero__title { font-size: 2rem; }
  .m-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .m-related { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
}

/* --- ≥1400px / ≥1700px : reclaim the side margins on large monitors ------
   A fixed 1200px cap leaves ~360px of dead space each side at 1920px. The
   container widens in two steps instead, while prose keeps a readable
   measure so line length does not grow with the screen. */
@media (min-width: 1400px) {
  :root { --m-container: 1320px; --m-gutter: 32px; }
  .m-related-mq .m-related__item { flex-basis: 176px; width: 176px; }
  .m-grid { gap: var(--m-space-xl); }
}
@media (min-width: 1700px) {
  :root { --m-container: 1440px; --m-gutter: 40px; }
}

/* --- ≤380px : very small phones ------------------------------------------ */
@media (max-width: 380px) {
  :root { --m-gutter: 12px; }
  .m-masthead__title { font-size: 1.15rem; }
  .m-masthead .m-container { gap: var(--m-space-sm); }
  .m-utility__link { padding-inline: 4px; font-size: 0.74rem; }
  .m-card__body,
  .m-block__body,
  .m-news-card { padding: var(--m-space-md); }
  .m-defs__row,
  .m-deflist__row { flex-direction: column; gap: 2px; }
  .m-defs__val,
  .m-deflist__val { text-align: start; }
  .m-btn,
  .m-btn--sm { width: 100%; justify-content: center; }
  .m-files a { max-width: 100%; }
}


/* --- Admin colour-setting hooks ----------------------------------------- */
/* The generated stylesheet targets the markup of the original theme:
   #footer, .navbar, #ju_header_title_m. theme9 uses different class names,
   so those rules never applied and the operator's colour settings had no
   effect here. Mirroring the expected colours onto this theme's elements
   restores them without importing the old markup. */
#footer.m-footer,
#footer.m-footer .m-footer__bottom .m-container { color: inherit; }
.m-masthead__title,
#ju_header_title_m a { color: var(--color-accent-gold); }

/* --- Overflow defences -------------------------------------------------- */
/* Journal staff paste arbitrary HTML into page content, news bodies and the
   footer note. These rules stop any of it from widening the page, without
   needing to touch the markup they produce. */

img, svg, video, canvas, iframe, embed, object {
  max-width: 100%;
}
img, video { height: auto; }

/* Long unbroken tokens — DOIs, URLs, emails, accession numbers — wrap
   instead of pushing the layout sideways. */
.m-card__title,
.m-card__authors,
.m-article-row__title,
.m-article-row__meta,
.m-block__list a,
.m-defs__val,
.m-deflist__val,
.m-news-card__title,
.m-article-detail__title,
.m-footer__list a {
  overflow-wrap: anywhere;
}

/* Wide tables scroll inside their own box rather than the viewport. */
.m-article-detail table,
.m-block__body table,
.m-main [id="dv_main_cnt"] .bg-white table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Pre-formatted blocks and embedded media from pasted content. */
.m-main pre { max-width: 100%; overflow-x: auto; }
.m-main iframe { display: block; }

/* Inline styles on pasted content frequently carry fixed pixel widths.
   Cap them so a 900px table or figure cannot break a 360px screen. */
.m-main [style*="width"] { max-width: 100%; }

/* Bootstrap rows inside inherited templates must not create horizontal
   scroll at narrow widths. */
.m-main .row { margin-inline: 0; }
.m-main .row > [class*="col-"] { min-width: 0; }


/* ==========================================================================
   PREFERENCES, PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .m-related-mq__track { animation: none !important; transform: none !important; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .m-card:hover,
  .m-related__item:hover .m-related__cover { transform: none; }
}

@media (prefers-contrast: more) {
  .m-card,
  .m-block { border-color: var(--m-text); }
  .m-nav { border-block-end: 2px solid var(--m-white); }
}

@media print {
  .m-utility,
  .m-nav,
  .m-accent-rule,
  .m-search-overlay,
  .m-footer,
  #back-to-up,
  #cookie_elm { display: none !important; }

  body { background: #fff; color: #000; }
  .m-card,
  .m-block { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    color: #555;
  }
}

/* --- Article listing counters ------------------------------------------- */
/* View / download figures on browse rows. The numbers are forced LTR so a
   Persian page still renders "1,234" rather than reversing the digit groups. */
.m-article-row__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m-space-md);
}
.m-article-row__stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.m-article-row__stat i { font-size: .9em; opacity: .75; }