/**********************************
IJIT modern stylesheet - 2026-08-29
Color theme: SCS brand blue (https://www.scs.org.sg) blended with the
IJIT Stitch design draft. Typography: Source Serif 4 (headlines) + Inter (body).
Hand-written (no build step / no CDN framework), matching this site's
existing plain-CSS approach - only used by pages opted into the new look.
**********************************/

:root {
	--color-primary: #004c98;
	--color-primary-dark: #003d7a;
	--color-primary-container: #e6edf5;
	--color-text: #212529;
	--color-text-muted: #50616a;
	--color-border: #dee2e6;
	--color-surface: #ffffff;
	--color-background: #f9f9fc;
	--color-accent: #eab66d;
	--font-headline: "Source Serif 4", Georgia, "Times New Roman", serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--container-max: 960px;

	/* Standardized type scale (2026-08-29) - every font-size in this file should
	   reference one of these, never a raw px value. See AGENTS.md at the site
	   root for the full design-system reference. */
	--fs-xs: 13px;   /* footer copyright/links, quicklink sub-label */
	--fs-sm: 14px;   /* nav links, sidebar links, form inputs/buttons, read-more link */
	--fs-base: 16px; /* body paragraphs, quicklink titles */
	--fs-md: 17px;   /* fieldset legend */
	--fs-lg: 20px;   /* h2 sub-headings - card h2 AND sidebar "Journal Menu" heading */
	--fs-xl: 28px;   /* h1 page titles */
}

* { box-sizing: border-box; }

html, body.ijit-modern {
	height: 100%;
}
body.ijit-modern {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-text);
	background: var(--color-background);
	line-height: 1.5;
	/* Sticky footer: page shell is a column flexbox, main content grows to
	   fill any leftover space so the footer always sits at the bottom of the
	   viewport on short pages, and after the content on tall ones. */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.ijit-main { flex: 1 0 auto; }
.ijit-footer { flex: none; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* Shared width constraint - used by the nav bar, hero, main content, and
   footer so all four bands are guaranteed to share the exact same left/right
   edges, with zero chance of the max-width/padding numbers drifting apart
   between them. */
.ijit-container {
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

/* Top nav */
.ijit-topnav {
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	position: sticky;
	top: 0;
	z-index: 50;
}
.ijit-topnav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 10px;
	padding-bottom: 10px;
	gap: 16px;
	flex-wrap: wrap;
}
.ijit-topnav-logo img { height: 36px; display: block; }
.ijit-topnav-links {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}
.ijit-topnav-links a {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 4px 0;
	border-bottom: 2px solid transparent;
}
.ijit-topnav-links a:hover { color: var(--color-primary); text-decoration: none; }
.ijit-topnav-links a.active {
	color: var(--color-primary);
	border-bottom-color: var(--color-primary);
}

/* Hero - shares .ijit-container's exact width with the nav bar and main
   content below it (see .ijit-main), not full-bleed. */
.ijit-hero {
	margin-top: 20px;
}
.ijit-hero-inner {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.ijit-hero-inner img {
	width: 100%;
	height: auto;
	display: block;
}

/* Main grid layout - shares .ijit-container's exact width with the hero
   banner above it. */
.ijit-main {
	padding-top: 32px;
	padding-bottom: 48px;
	display: flex;
	align-items: flex-start;
	gap: 24px;
}
@media (max-width: 760px) {
	.ijit-main { flex-direction: column; }
}
/* Right-side content column - explicit flex sizing (flex-grow:1, flex-basis:0)
   plus min-width:0, the standard robust pattern for "flexible column next to
   a fixed sidebar". Sized to always resolve to exactly 676px at the 960px
   container width (960 - 40px padding - 220px sidebar - 24px gap = 676px)
   regardless of how little content a page has (a short list, a login form) -
   this replaced an earlier CSS Grid version where short-content pages
   (reviewers/sitemap/links) were visibly not reaching that width. */
.ijit-content {
	flex: 0 0 680px;
	width: 680px;
	max-width: 100%; /* safety net: never exceeds the available row width, even though flex-basis says 680px */
	box-sizing: border-box;
	min-width: 0;
}
@media (max-width: 760px) {
	.ijit-content { flex: 0 0 auto; width: 100%; }
}
.ijit-card {
	width: 100%;
	box-sizing: border-box;
}

/* Sidebar - column narrowed back down; "Journal Menu" title kept at its
   larger size, only the link list itself is compact. */
.ijit-sidebar {
	flex: 0 0 220px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 10px;
	padding: 16px;
	position: sticky;
	top: 76px;
}
@media (max-width: 760px) {
	.ijit-sidebar { flex: 0 0 auto; width: 100%; position: static; }
}
.ijit-sidebar h2 {
	font-family: var(--font-headline);
	font-size: var(--fs-lg);
	font-weight: 600;
	color: var(--color-primary);
	margin: 4px 4px 12px;
}
.ijit-sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.ijit-sidebar a {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--color-text);
	font-size: var(--fs-sm);
	font-weight: 500;
	padding: 8px 9px;
	border-radius: 6px;
	border-left: 3px solid transparent;
}
.ijit-sidebar a:hover {
	background: var(--color-primary-container);
	text-decoration: none;
}
.ijit-sidebar a.active {
	color: var(--color-primary);
	font-weight: 700;
	background: var(--color-primary-container);
	border-left-color: var(--color-primary);
}
.ijit-sidebar svg { flex: none; width: 16px; height: 16px; opacity: 0.85; }

/* Content cards */
.ijit-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 10px;
	padding: 28px;
	margin-bottom: 24px;
}
.ijit-card h1, .ijit-card h2 {
	font-family: var(--font-headline);
	color: var(--color-primary);
}
.ijit-card h1 { font-size: var(--fs-xl); font-weight: 700; margin-top: 0; margin-bottom: 16px; }
/* h2 gets real top spacing (sub-section heading, e.g. sitemap's Journal/Author/
   Reviewers groups) - only the very first heading in a card should sit flush
   with no top margin, handled by :first-child below. */
.ijit-card h2 { font-size: var(--fs-lg); font-weight: 600; margin-top: 28px; margin-bottom: 8px; }
.ijit-card h1:first-child, .ijit-card h2:first-child { margin-top: 0; }
.ijit-card p { color: var(--color-text-muted); font-size: var(--fs-base); }
.ijit-card ul { margin: 0 0 8px; padding-left: 22px; }
.ijit-card li { margin-bottom: 6px; line-height: 1.5; }
.ijit-card .ijit-readmore { font-size: var(--fs-sm); font-weight: 600; }

/* Welcome graphic: reproduces the old site's exact layout - the open-book
   image (image/home_page_book.jpeg, user-supplied 1920x1063 asset) as a
   background with the "Welcome to / International Journal of Information
   Technology" greeting centered on top, nothing else. Same idea, nicer type. */
.ijit-welcome-graphic {
	max-width: 900px;
	margin: 0 auto 24px;
	aspect-ratio: 1920 / 1063;
	background-image: url("../image/home_page_book.jpeg");
	background-size: cover;
	background-position: center;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
}
.ijit-welcome-graphic .ijit-welcome-greeting {
	font-family: var(--font-headline);
	color: var(--color-primary-dark);
	text-shadow: 0 1px 3px rgba(255,255,255,0.85);
	/* Keep the text within the book's visible open-page area, not spilling
	   over its edges/spine - sized relative to the graphic's own width
	   (clamp) so it scales down together with the image on small screens
	   instead of a fixed px size overflowing a shrunk container. */
	max-width: 66%;
	margin: 0 auto;
}
.ijit-welcome-graphic .ijit-welcome-greeting .ijit-welcome-line1 {
	display: block;
	font-size: clamp(13px, 2.6vw, 22px);
	font-weight: 600;
	margin-bottom: 6px;
}
.ijit-welcome-graphic .ijit-welcome-greeting .ijit-welcome-line2 {
	display: block;
	font-size: clamp(16px, 3.8vw, 32px);
	font-weight: 700;
	line-height: 1.25;
}

.ijit-quicklinks {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
@media (max-width: 600px) {
	.ijit-quicklinks { grid-template-columns: 1fr; }
}
.ijit-quicklinks a {
	display: block;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 10px;
	padding: 18px;
	color: var(--color-text);
	font-weight: 600;
	font-size: var(--fs-base); /* was 15px, merged into the base size */
}
.ijit-quicklinks a:hover {
	border-color: var(--color-primary);
	background: var(--color-primary-container);
	text-decoration: none;
}
.ijit-quicklinks span.ijit-quicklink-sub {
	display: block;
	font-weight: 400;
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	margin-top: 4px;
}

/* Footer */
.ijit-footer {
	background: var(--color-primary);
	margin-top: 32px;
}
.ijit-footer-inner {
	padding-top: 20px;
	padding-bottom: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
}
.ijit-footer-copy {
	color: #cbe6ff;
	font-size: var(--fs-xs);
}
.ijit-footer-links { display: flex; gap: 20px; }
.ijit-footer-links a {
	color: #cbe6ff;
	font-size: var(--fs-xs);
}
.ijit-footer-links a:hover { color: #ffffff; }

/* Forms and data tables inside .ijit-card - used by reviewers/specialissues
   pages. Old markup (tables-as-forms, tables-as-data-listings) is left
   structurally intact for safety (PHP field names, layout) - just restyled. */
.ijit-card table {
	border-collapse: collapse;
	width: 100%;
}
.ijit-card fieldset {
	border: 1px solid var(--color-border);
	border-radius: 8px;
	padding: 20px;
	margin: 0;
}
.ijit-card legend {
	font-family: var(--font-headline);
	color: var(--color-primary);
	font-weight: 600;
	font-size: var(--fs-md);
	padding: 0 8px;
}
.ijit-card input[type="text"],
.ijit-card input[type="password"],
.ijit-card textarea {
	width: 100%;
	max-width: 360px;
	padding: 8px 10px;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	color: var(--color-text);
	margin: 2px 0;
}
.ijit-card textarea { max-width: 100%; }
.ijit-card input[type="submit"] {
	background: var(--color-primary);
	color: #ffffff;
	border: none;
	padding: 10px 26px;
	border-radius: 6px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fs-sm);
	cursor: pointer;
}
.ijit-card input[type="submit"]:hover { background: var(--color-primary-dark); }
.ijit-card .ijit-notice {
	background: var(--color-primary-container);
	color: var(--color-primary-dark);
	border-radius: 8px;
	padding: 12px 16px;
	margin-bottom: 16px;
	font-weight: 600;
}