/* ==========================================================================
   IJMRDS — upgrade layer
   --------------------------------------------------------------------------
   This file does NOT redesign the site. The layout, the three-column inner
   pages, the navbar, every section and its order are exactly as they were.
   What it does is settle the things that made a good structure look cheap:
   one palette instead of nine, one type scale, one border radius, one shadow,
   real focus states, and motion that stays out of the way.

   Loaded last, so it wins on equal specificity without !important except where
   it has to beat an inline style.
   ========================================================================== */

/* ---- 1. Self-hosted faces -------------------------------------------------
   Same two families the site always used, now served from our own origin.
   Two render-blocking requests to fonts.googleapis.com become zero. */
@font-face {
	font-family: 'Averia Serif Libre';
	font-style: normal; font-weight: 400; font-display: swap;
	src: url('../fonts/averia-serif-libre.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
	               U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193;
}
@font-face {
	font-family: 'Metrophobic';
	font-style: normal; font-weight: 400; font-display: swap;
	src: url('../fonts/metrophobic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
	               U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193;
}

/* ---- 2. Tokens ------------------------------------------------------------
   Every value below is either already in the site or derived from it. The
   navy is the theme-color (#000066) and the nav bar; the teal and orange are
   the template's --primary and --secondary. Nothing new was invented. */
:root {
	--ij-brand:      #12276b;   /* navy — headings, nav, section headers      */
	--ij-brand-2:    #1c3a94;   /* lifted navy — hover, gradients             */
	--ij-brand-wash: #eef1f9;   /* navy at 4% — tints, zebra rows             */
	--ij-teal:       #00b98e;   /* template --primary — actions               */
	--ij-teal-ink:   #00795c;   /* teal dark enough for text on white         */
	--ij-orange:     #ff6922;   /* template --secondary — the one accent      */
	--ij-amber-wash: #fff8e6;   /* replaces the flat yellow marquee           */
	--ij-ink:        #23272f;   /* body copy                                  */
	--ij-ink-soft:   #5b6472;   /* secondary copy                             */
	--ij-rule:       #dfe3ea;   /* hairlines                                  */
	--ij-paper:      #ffffff;

	--ij-r:    10px;            /* one radius                                 */
	--ij-r-sm: 6px;
	--ij-sh:   0 1px 2px rgba(18,39,107,.06), 0 4px 16px rgba(18,39,107,.07);
	--ij-sh-2: 0 2px 6px rgba(18,39,107,.10), 0 12px 32px rgba(18,39,107,.12);

	--ij-fast: 140ms;
	--ij-ui:   240ms;
	--ij-in:   cubic-bezier(.22, 1, .36, 1);
}

/* ---- 3. Base --------------------------------------------------------------
   The body copy was 15px Metrophobic at browser-default leading over a
   photograph. Readable line-height and a real ink colour do more for the
   perceived quality of this site than any amount of decoration. */
body {
	color: var(--ij-ink);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
p { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
::selection { background: var(--ij-teal); color: #fff; }

/* Keyboard users had no visible focus anywhere on the site. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--ij-teal-ink);
	outline-offset: 2px;
	border-radius: var(--ij-r-sm);
}

/* ---- 4. Type --------------------------------------------------------------
   The h1 carried `text-shadow: 3px 3px 5px #0004` — a 2009 tell. Removed.
   Sizes move to clamp() so the title stops needing its own mobile override. */
h1, h2, h3, h4, .display-6 { font-family: 'Averia Serif Libre', Georgia, serif; }
.header h1, .header h1 small { text-shadow: none; }
.header h1 {
	color: var(--ij-brand);
	font-size: clamp(1.35rem, 1.05rem + 1.5vw, 2.1rem);
	line-height: 1.25;
	letter-spacing: -.01em;
}
.header h1 small { color: var(--ij-ink-soft); font-size: .52em; }
.header h3 { font-size: clamp(.92rem, .84rem + .4vw, 1.06rem); line-height: 1.6; }
/* the strap line alternated pure red on near-black; keep the alternation,
   drop the shout -- accent on ink, the same pair used everywhere else. */
.header h3      { color: var(--ij-ink-soft); font-weight: 400; }
.header h3 b    { color: var(--ij-brand); }
.header h3 span { color: var(--ij-orange); }

/* The homepage title sat in fixed `display-6` and wrapped to three lines on a
   phone at a size that fought the logo. */
.header .display-6 {
	color: var(--ij-brand) !important;
	font-size: clamp(1.5rem, 1.05rem + 2.2vw, 2.6rem);
	line-height: 1.22;
	letter-spacing: -.015em;
	text-shadow: none;
}

/* ---- 5. Links -------------------------------------------------------------
   `a:hover { color: red }` was the site-wide hover. Red is the colour of an
   error; it should not be the reward for pointing at a link. */
a { color: var(--ij-brand); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover, a:active, a:focus { color: var(--ij-teal-ink); text-decoration-color: currentColor; }

/* ---- 6. Top navigation ----------------------------------------------------
   Kept: navy bar, same items, same dropdown behaviour. Changed: the hover was
   a jump to pure `blue`, which flashed. Now it lifts one step within the same
   hue, and the bar gets a hairline so it separates from the page under it. */
.top-menu #top-menu-container { box-shadow: 0 1px 0 var(--ij-rule), var(--ij-sh); }
.top-menu a, .top-menu .top-menu-lbl {
	background-color: var(--ij-brand);
	font-weight: 600; letter-spacing: .01em;
	transition: background-color var(--ij-fast) ease;
}
.top-menu a:hover, .top-menu .top-menu-lbl:hover,
.top-menu .top-sub-menu-out:hover > .top-menu-lbl { background-color: var(--ij-brand-2); }
.top-menu .top-sub-menu-in { box-shadow: var(--ij-sh-2); }

/* Bootstrap navbar on the homepage — same links, calmer states. */
.nav-bar .navbar { border-radius: var(--ij-r); box-shadow: var(--ij-sh); }
.navbar-light .navbar-nav .nav-link { transition: color var(--ij-fast) ease; }
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active { color: var(--ij-teal-ink); }
.dropdown-menu { border: 1px solid var(--ij-rule); box-shadow: var(--ij-sh-2); border-radius: var(--ij-r-sm) !important; overflow: hidden; }
.dropdown-item { transition: background-color var(--ij-fast) ease, color var(--ij-fast) ease; }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--ij-brand-wash); color: var(--ij-brand); }

/* ---- 7. The call-for-paper strip -----------------------------------------
   Was `background: yellow` with green text — the highest-contrast, least
   readable combination on the page, and the first thing a reader saw. Same
   strip, same message, now a warm band that belongs to the palette. */
.head-marquee {
	background-color: var(--ij-amber-wash);
	border-block: 1px solid #f3e3bd;
	padding-block: 6px;
	font-weight: 600;
}
.head-marquee span { color: var(--ij-orange); }

/* ---- 8. Buttons -----------------------------------------------------------
   Four button colours existed (gold #EED100, pure blue, lime #97CC04, orange
   #F45D01) with an inverting hover that swapped background for transparent —
   which read as the button turning off. One shape, one motion, colours pulled
   back to the palette. */
.btn, .top-menu .btn {
	border-radius: var(--ij-r-sm);
	font-weight: 600;
	transition: transform var(--ij-fast) var(--ij-in),
	            box-shadow var(--ij-fast) ease,
	            background-color var(--ij-fast) ease,
	            border-color var(--ij-fast) ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--ij-sh); }
.btn:active { transform: translateY(0); }

.btn-blue  { background-color: var(--ij-brand); }
.btn-blue:hover, .btn-blue:focus, .btn-blue:active {
	background-color: var(--ij-brand-2); color: #fff !important; border-color: var(--ij-brand-2);
}
.btn-green { background-color: var(--ij-teal-ink); }
.btn-green:hover, .btn-green:focus, .btn-green:active {
	background-color: #05684f; color: #fff !important; border-color: #05684f;
}
.btn-orange { background-color: var(--ij-orange); }
.btn-orange:hover, .btn-orange:focus, .btn-orange:active {
	background-color: #e85a15; color: #fff !important; border-color: #e85a15;
}
.btn-gold { background-color: #d9a400; color: #fff; }
.btn-gold:hover, .btn-gold:focus, .btn-gold:active {
	background-color: #bd8f00; color: #fff !important; border-color: #bd8f00;
}
.btn-primary {
	--bs-btn-bg: var(--ij-teal); --bs-btn-border-color: var(--ij-teal);
	--bs-btn-hover-bg: var(--ij-teal-ink); --bs-btn-hover-border-color: var(--ij-teal-ink);
	--bs-btn-active-bg: var(--ij-teal-ink); --bs-btn-active-border-color: var(--ij-teal-ink);
}

/* ---- 9. Sidebar panels ----------------------------------------------------
   Same panels, same order, same contents. They were `border: 3px solid brown`
   with a solid brown heading — the CSS keyword, not a chosen colour. A 3px
   border on a 250px column is a lot of ink spent on a container. */
.side-section {
	border: 1px solid var(--ij-rule);
	border-radius: var(--ij-r);
	overflow: hidden;
	background: var(--ij-paper);
	box-shadow: var(--ij-sh);
}
.side-heading {
	background: linear-gradient(180deg, var(--ij-brand-2), var(--ij-brand));
	font-family: 'Averia Serif Libre', Georgia, serif;
	font-weight: 400; font-size: 1.02rem; letter-spacing: .01em;
	padding: 10px 8px;
}
.side-content.side-block-links a {
	border-radius: var(--ij-r-sm);
	margin-inline: 6px;
	transition: background-color var(--ij-fast) ease, color var(--ij-fast) ease;
}
.side-content.side-block-links a:hover { background-color: var(--ij-brand-wash); color: var(--ij-brand); }

/* The issue banner used the same brown. */
.archive-header {
	background: linear-gradient(180deg, var(--ij-brand-2), var(--ij-brand));
	border-radius: var(--ij-r) var(--ij-r) 0 0;
	font-family: 'Averia Serif Libre', Georgia, serif;
	font-weight: 400; letter-spacing: .01em; padding: 9px 12px;
}
.archive-rp-info {
	border: 1px solid var(--ij-rule); border-top: 0;
	border-radius: 0 0 var(--ij-r) var(--ij-r);
	background: var(--ij-paper);
	padding: 12px 14px;
}

/* The "Special Issue" box was bordered #f44f4f — a fire-alarm red. */
.si-box-home { border: 1px solid var(--ij-rule); border-radius: var(--ij-r); overflow: hidden; box-shadow: var(--ij-sh); }
.si-box-home .si-box-title { background: linear-gradient(180deg, var(--ij-orange), #e85a15); }

/* ---- 10. Tables -----------------------------------------------------------
   `.listing th` was #9bf — a pale blue that white text sat on at roughly 1.9:1.
   Same table, readable header, quieter zebra. */
.listing { border-collapse: separate; border-spacing: 0; border-radius: var(--ij-r); overflow: hidden; box-shadow: var(--ij-sh); }
.listing th { background-color: var(--ij-brand); font-weight: 600; padding: 8px 10px; }
.listing td { padding: 7px 10px; }
.listing .row-0 { background-color: var(--ij-paper); }
.listing .row-1 { background-color: var(--ij-brand-wash); }
.listing .row-0:hover, .listing .row-1:hover { background-color: #e4e9f5; }
table.pagination { background-color: var(--ij-brand-wash); border-radius: var(--ij-r-sm); overflow: hidden; }
.pagination td a { border-radius: var(--ij-r-sm); transition: background-color var(--ij-fast) ease; }
.pagination td a:hover { background-color: #dbe1f0; }

.tbl-form .section-heading {
	background-color: var(--ij-brand-wash);
	color: var(--ij-brand);
	font-family: 'Averia Serif Libre', Georgia, serif;
	border-radius: var(--ij-r-sm);
}

/* ---- 11. Forms ------------------------------------------------------------
   Inputs were flat boxes with no focus treatment beyond the browser default. */
.txt, input[type=text], input[type=email], input[type=number], input[type=password],
input[type=url], input[type=tel], input[type=date], select, textarea {
	border: 1px solid var(--ij-rule);
	border-radius: var(--ij-r-sm);
	padding: 7px 10px;
	background-color: var(--ij-paper);
	transition: border-color var(--ij-fast) ease, box-shadow var(--ij-fast) ease;
}
.txt:focus, input:focus, select:focus, textarea:focus {
	border-color: var(--ij-teal-ink);
	box-shadow: 0 0 0 3px rgba(0,185,142,.16);
	outline: none;
}
details.tooltip { color: var(--ij-brand); border-color: var(--ij-rule); border-radius: var(--ij-r-sm); }
details.tooltip summary:hover { background-color: var(--ij-brand-wash); }
.success-msg, .err-msg { border-radius: var(--ij-r-sm); padding: 10px 14px; font-weight: 500; }
.success-msg { border-color: var(--ij-teal-ink); color: var(--ij-teal-ink); background: #eefaf6; }
.err-msg     { border-color: #d64545; color: #b02a2a; background: #fdf2f2; }
i.info { border-color: #c7d0e8; background-color: var(--ij-brand-wash); color: var(--ij-brand); }
i.info span { background-color: var(--ij-brand-wash); border-color: #c7d0e8; border-radius: var(--ij-r-sm); box-shadow: var(--ij-sh-2); }

/* ---- 12. Footer -----------------------------------------------------------
   Flat #eee band. Same links, same rows, just seated properly. */
.footer {
	background-color: var(--ij-brand-wash);
	border-top: 1px solid var(--ij-rule);
	color: var(--ij-ink-soft);
	padding-block: 6px;
}
.footer .footer-links a { display: inline-block; padding: 2px 4px; border-radius: var(--ij-r-sm); }

/* ---- 13. Homepage cards ---------------------------------------------------
   The four feature tiles and the indexing grid are unchanged in markup and
   position; they just get a real card treatment and something to respond to
   on hover. */
.cat-item, .indexing > div {
	border-radius: var(--ij-r);
	background: var(--ij-paper);
	border: 1px solid var(--ij-rule);
	transition: transform var(--ij-ui) var(--ij-in), box-shadow var(--ij-ui) ease;
}
.cat-item:hover, .indexing > div:hover {
	transform: translateY(-3px);
	box-shadow: var(--ij-sh-2);
}
.indexing > div:hover { background-color: var(--ij-brand-wash); }
.cat-item .bi, .cat-item .fa { color: var(--ij-orange); }

/* Justified body copy opens rivers at narrow widths; hyphenation closes them. */
.align-j { hyphens: auto; }

/* ---- 14. Back to top ------------------------------------------------------
   Fixed at 45px from both edges, it landed on top of the running text on a
   phone. Smaller, circular, clear of the thumb zone and of the copy. */
.back-to-top {
	border-radius: 50%;
	width: 44px; height: 44px;
	display: none; place-items: center;
	box-shadow: var(--ij-sh-2);
	transition: transform var(--ij-fast) var(--ij-in), background-color var(--ij-fast) ease;
}
.back-to-top:hover { transform: translateY(-2px); }
@media (max-width: 767px) {
	.back-to-top { right: 14px; bottom: 14px; width: 40px; height: 40px; }
}

/* ---- 15. Touch targets ----------------------------------------------------
   Several sidebar and footer links were under 32px tall on a phone. */
@media (max-width: 767px) {
	.side-content.side-block-links a,
	.footer .footer-links a,
	.pagination td a { min-height: 44px; display: flex; align-items: center; justify-content: center; }
	.top-menu a, .top-menu .top-menu-lbl { min-height: 46px; display: flex; align-items: center; }
}

/* ---- 16. Motion -----------------------------------------------------------
   Nothing here animates layout: transform and opacity only, 140–240ms, one
   entry curve. The site shipped animate.css and WOW.js classes with no way to
   turn them off; this is the kill switch that was missing. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.animated { animation: none !important; opacity: 1 !important; }
}

/* ---- "New" badge: the raw `yellow` circle each page declares inline -------- */
.new-highlight {
	background-color: var(--ij-orange);
	color: #fff;
	border-radius: 999px;
	padding: 2px 9px;
	font-size: .78em;
	font-weight: 700;
	letter-spacing: .02em;
	vertical-align: .12em;
}

/* `<p><b><big>...` is how this site writes a sub-heading. common.css justifies
   every <p>, so once a heading wraps to a second line the first one gets pulled
   out into word-gaps. A heading is not body copy: leave it ragged. */
p:has(> b > big) { text-align: left; hyphens: manual; }

/* ---- Soft blue shade ------------------------------------------------------
   A light tint of the brand navy behind everything, so the pages stop reading
   as flat white (and the home page as mint). Cards and boxes stay white and
   now lift off the page. The home hero photo still shows through its panels. */
:root { --ij-sky: #f1f5fd; }
body { background-color: var(--ij-sky); }
.bg-white-transparent { background-color: rgba(241, 245, 253, .94); }

/* ---- Polish pass 2 --------------------------------------------------------
   Same markup, same layout. Finishes the move from the template's mint/teal
   surfaces to the navy family, and gives the homepage sections some edges. */

/* Homepage footer: `bg-dark` forces navy with !important, but section 12 set
   the footer ink to grey and the links stayed navy -- invisible text. */
.footer.bg-dark { color: #c9d3ea; border-top: 0; }
.footer.bg-dark a { color: #e6ecfa; transition: color var(--ij-fast) ease; }
.footer.bg-dark a:hover, .footer.bg-dark a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer.bg-dark hr, .footer.bg-dark .border-top { border-color: rgba(255,255,255,.14) !important; }

/* Template mint (#EFFDF5, !important in bootstrap) -> navy wash. */
.bg-light { background-color: var(--ij-brand-wash) !important; }

/* Homepage sections: rounded, hairline, soft shadow, so each one reads as a
   panel on the blue page instead of a slightly different blue. */
.container-xxl.bg-white-transparent, .header.bg-white-transparent {
	border: 1px solid rgba(18, 39, 107, .08);
	border-radius: 16px;
	box-shadow: var(--ij-sh);
}

/* A short navy-to-teal rule under each centred section title. */
.bg-white-transparent .text-center > h1.mb-3::after,
.bg-white-transparent .text-center > h2.mb-3::after,
.bg-white-transparent.text-center > h1.mb-3::after {
	content: "";
	display: block;
	width: 56px; height: 3px;
	margin: 14px auto 0;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--ij-brand-2), var(--ij-teal));
}

/* Feature tiles: dashed teal inner border -> quiet solid hairline; hover fills
   navy instead of teal so it matches the nav and the side panels. */
.cat-item div { border: 1px solid var(--ij-rule); border-radius: var(--ij-r-sm); }
.cat-item:hover div { background: linear-gradient(180deg, var(--ij-brand-2), var(--ij-brand)); }

/* Indexing tiles: teal `border-primary` -> hairline, rounded like the rest. */
.indexing > div.border-primary { border-color: var(--ij-rule) !important; background: var(--ij-paper); }

/* The one `btn-dark` (common.css paints it a muddy #2e4944) joins the navy buttons. */
.btn-dark { background-color: var(--ij-brand);
	--bs-btn-bg: var(--ij-brand); --bs-btn-border-color: var(--ij-brand);
	--bs-btn-hover-bg: var(--ij-brand-2); --bs-btn-hover-border-color: var(--ij-brand-2);
	--bs-btn-active-bg: var(--ij-brand-2); --bs-btn-active-border-color: var(--ij-brand-2);
}
.btn-dark:hover, .btn-dark:focus-visible { background-color: var(--ij-brand-2); }
.btn { border-radius: var(--ij-r-sm); }
@media (max-width: 575.98px) {
	/* Panels run edge to edge on phones; rounded corners there just get clipped. */
	.container-xxl.bg-white-transparent, .header.bg-white-transparent { border-radius: 0; border-inline: 0; }
}

/* Paper detail page (paper.html, data from Supabase) */
.paper-title{color:#12276b;font-size:1.45em;line-height:1.35;margin:.4em 0 .8em}
table.paper-meta{border-collapse:collapse;width:100%;margin-bottom:1.2em}
table.paper-meta th{width:30%;text-align:left;background:#eef3fc;white-space:nowrap}
table.paper-meta th,table.paper-meta td{border:1px solid #d6e0f0}
.paper-abstract{text-align:justify;line-height:1.7}
@media (max-width:600px){table.paper-meta th{white-space:normal;width:38%}}

/* Security check (Turnstile) + email OTP dialog, added by assets/js/ijmrds-db.js */
.captcha-box{display:flex;justify-content:center;min-height:65px;margin:12px 0 4px}
.captcha-err{color:#b3261e}
.otp-modal{position:fixed;inset:0;z-index:1000;background:rgba(18,39,107,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.otp-box{background:#fff;border-radius:12px;box-shadow:0 18px 50px rgba(18,39,107,.3);max-width:420px;width:100%;padding:24px;text-align:center}
.otp-box h3{color:var(--ij-brand);margin:0 0 8px}
.otp-box p{color:var(--ij-ink-soft);line-height:1.55}
.otp-box .otp-code{display:block;width:100%;max-width:220px;margin:14px auto 4px;text-align:center;font-size:26px;letter-spacing:10px;padding:8px}
.otp-err{color:#b3261e;min-height:1.4em;margin:4px 0}
.otp-btns button{margin:4px}
.otp-btns .otp-cancel{background:#fff;color:var(--ij-brand);border:1px solid var(--ij-rule)}
.track-table{margin-top:18px}
.track-table th{width:auto}