/* ============================================================
   site-fix.css — Responsive corrections layered on top of porg.css
   Loaded AFTER porg.css so it takes precedence.
   Fixes mobile/tablet rendering issues identified during QA.
   ============================================================ */

/* ---------- 1. Hamburger toggle visibility ---------- */
/* Bootstrap's default hides .navbar-toggle at ≥768px, but our sidebar
   kicks in only at ≥780px. Force visibility at <780px with stronger
   specificity than Bootstrap's `.navbar-toggle` selector. */
.navbar-porg .navbar-header {
	position: relative;
	min-height: 3rem;
}
.navbar-porg .navbar-header button.navbar-toggle,
header button.navbar-toggle,
button#myadd.navbar-toggle {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: fixed !important;
	right: 1rem !important;
	top: 1rem !important;
	margin: 0 !important;
	padding: 8px 10px !important;
	border: 1px solid #ccc !important;
	border-radius: 4px !important;
	background-color: #ffffff !important;
	cursor: pointer !important;
	z-index: 1000 !important;
	width: auto !important;
	height: auto !important;
	min-width: 44px !important;
	min-height: 44px !important;
	box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.navbar-porg .navbar-header button.navbar-toggle .icon-bar,
header button.navbar-toggle .icon-bar,
button#myadd.navbar-toggle .icon-bar {
	display: block !important;
	width: 22px !important;
	height: 2px !important;
	margin: 4px 0 !important;
	background-color: #444 !important;
	border-radius: 1px !important;
}
.navbar-porg .navbar-header button.navbar-toggle .sr-only,
header button.navbar-toggle .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}
@media only screen and (min-width: 780px) {
	.navbar-porg .navbar-header button.navbar-toggle,
	header button.navbar-toggle,
	button#myadd.navbar-toggle {
		display: none !important;
	}
}

/* ---------- 2. Main content / footer breakpoint sync ---------- */
/* porg.css uses 768px for main, 780px for navbar — fix mismatch. */
main {
	width: 100% !important;
	margin-left: 0 !important;
}
footer {
	width: 100% !important;
	margin-left: 0 !important;
}
@media only screen and (min-width: 780px) {
	main {
		width: calc(100% - 15rem) !important;
		margin-left: 15rem !important;
	}
	footer {
		width: calc(100% - 15rem) !important;
		margin-left: 15rem !important;
	}
}

/* ---------- 3. Mobile navigation collapse behaviour ---------- */
/* On mobile the nav-main should be hidden by default; jQuery slideToggle
   in the existing pages will reveal it on hamburger tap.
   On desktop (≥780px) it must always be visible. */
@media only screen and (max-width: 779px) {
	#nav-main {
		display: none;
	}
	.navbar-porg {
		min-height: 4rem;
	}
}
@media only screen and (min-width: 780px) {
	#nav-main {
		display: block !important;
	}
}

/* ---------- 4. Prevent any text overflow ---------- */
/* Use overflow-wrap only — word-break:break-word splits mid-word ("Internat-/ional")
   which looks bad. overflow-wrap breaks ONLY when there's no normal break point. */
body, h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote,
article, section, .tile, .intro-content, .meta, .author-title,
.addspan, .addleftxian1, .addleftxian2 {
	word-wrap: break-word;
	overflow-wrap: break-word;
}
/* Chinese text can break anywhere; English/mixed content shouldn't.
   The :lang() pseudo lets us be selective. */
:lang(zh) p, :lang(zh) li, :lang(zh) h1, :lang(zh) h2, :lang(zh) h3 {
	word-break: normal;
	line-break: auto;
}

/* ---------- 5. Mobile typography scaling ---------- */
@media only screen and (max-width: 779px) {
	html {
		font-size: 15px;
	}
	h1 {
		font-size: 1.625rem !important;
		line-height: 1.25 !important;
		margin: 0.5rem 0 1rem !important;
	}
	h2 {
		font-size: 1.375rem !important;
		line-height: 1.3 !important;
	}
	h3 {
		font-size: 1.125rem !important;
		line-height: 1.35 !important;
	}
	.home .intro-content,
	.audience .intro-content {
		font-size: 1rem !important;
	}
}

/* ---------- 6. Container box-sizing for safety ---------- */
.intro-content,
.tile,
.featured-entries-list,
.recent-entries-list,
.article-container,
section.article-content,
footer .column {
	max-width: 100%;
	box-sizing: border-box;
}

/* On tablet (780-1199px), give the intro content a more comfortable width
   instead of the 50% split which leaves it too narrow. */
@media only screen and (min-width: 780px) and (max-width: 1199px) {
	.home .intro-content,
	.audience .intro-content,
	.collection .intro-content,
	.theme .intro-content {
		width: 100% !important;
		float: none !important;
	}
	.home .featured-entries-list,
	.audience .featured-entries-list,
	.collection .featured-entries-list,
	.theme .featured-entries-list {
		width: 100% !important;
		float: none !important;
	}
}

/* ---------- 7. Media element safety ---------- */
img, svg, video, iframe {
	max-width: 100%;
	height: auto;
}

/* ---------- 8. Search form layout ---------- */
.navbar-porg .navbar-form {
	margin-top: 1rem;
}
.navbar-porg .search,
.navbar-form input.search {
	width: 100%;
	max-width: 250px;
	box-sizing: border-box;
}
@media only screen and (max-width: 779px) {
	.navbar-porg .navbar-form {
		float: none !important;
		display: block;
		margin: 1rem 0 0;
		padding: 0;
	}
	.navbar-porg .navbar-form .search {
		width: 100%;
		max-width: 100%;
	}
}

/* ---------- 9. Language switcher dropdown ---------- */
#jump-links {
	width: 100%;
	max-width: 200px;
	padding: 0.4rem 0.6rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	font-family: inherit;
	font-size: 0.95rem;
}

/* ---------- 10. Author cards (tutor / examiner profiles) ---------- */
.author.addauthor {
	overflow: hidden;
	margin: 0 0 1.5rem;
	padding: 0 0 1rem;
	border-bottom: 1px solid #eee;
}
.author.addauthor:last-child {
	border-bottom: none;
}
.author.addauthor .headshot,
.author.addauthor .headshot.addpic {
	float: left;
	margin: 0 1rem 0.5rem 0;
}
.author.addauthor .headshot img,
.author.addauthor .headshot.addpic img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}
.author.addauthor .addauthorright {
	overflow: hidden;
	margin: 0;
}
@media only screen and (max-width: 479px) {
	.author.addauthor .headshot,
	.author.addauthor .headshot.addpic {
		float: none;
		margin: 0 0 0.75rem;
	}
	.author.addauthor .headshot img,
	.author.addauthor .headshot.addpic img {
		width: 64px;
		height: 64px;
	}
}

/* ---------- 11. Tile grid responsiveness ---------- */
.recent-entries-list ul {
	margin: 0;
	padding: 0;
}
.recent-entries-list ul li {
	box-sizing: border-box;
}
.tile {
	box-sizing: border-box;
	padding: 1.25rem 1.5rem;
}
.tile .top h3 {
	margin-top: 0;
}

/* ---------- 12. Intro article spacing ---------- */
.intro-content article p {
	margin: 0 0 1rem;
	line-height: 1.65;
}
.intro-content article {
	line-height: 1.65;
}

/* ---------- 13. Team images on careers page ---------- */
.addteam {
	overflow: hidden;
	margin: 0 -0.5rem;
}
.addteam .addlist {
	float: left;
	width: 25%;
	padding: 0.5rem;
	box-sizing: border-box;
}
@media only screen and (max-width: 779px) {
	.addteam .addlist {
		width: 50%;
	}
}
.addteam .addlistpic img {
	width: 100%;
	height: auto;
	display: block;
}

/* ---------- 14. Article header meta typography ---------- */
.meta time {
	display: block;
	font-size: 0.95rem;
	color: #666;
	margin: 0.25rem 0;
}

/* ---------- 15. Article horizontal padding on mobile ---------- */
@media only screen and (max-width: 779px) {
	.article-no-image .article-container,
	.article-container,
	.intro-content,
	.home,
	.audience,
	section.article-content {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
}

/* ---------- 16. Decorative line elements ---------- */
.addxian {
	border-bottom: 1px solid #ccc;
	margin: 0.25rem 0 0.75rem;
}
.addleftxian1,
.addleftxian2 {
	border-left: 3px solid #E54028;
	padding-left: 1rem;
	margin: 1rem 0 1.5rem;
}
.addjianju20 {
	height: 1.25rem;
}
.addh3 {
	margin: 1.75rem 0 0.5rem;
}
.addspan {
	font-weight: 600;
	color: #333;
}

/* ---------- 17. Footer columns clear after floats ---------- */
footer::after {
	content: "";
	display: block;
	clear: both;
}
footer .column {
	padding: 1rem 1.5rem;
}

/* ---------- 18. Anchor focus styling for accessibility ---------- */
a:focus, button:focus, input:focus, select:focus {
	outline: 2px solid #E54028;
	outline-offset: 2px;
}

/* ---------- 19. Tile inner heading hover ---------- */
.tile a:hover h3,
.list-entry a:hover h3 {
	color: #E54028;
}

/* ---------- 20. Suppress horizontal scrolling ---------- */
/* Do NOT use overflow-x: hidden on html/body — it breaks position:fixed
   in some headless rendering contexts. Instead constrain children. */
html {
	width: 100%;
	max-width: 100%;
}
body {
	max-width: 100%;
}